w-312356-main/src/components/Partners.tsx

import { motion } from "framer-motion";
import { Building2, Award, Shield, Users, Globe } from "lucide-react";

const Partners = () => {
  const partners = [
    { 
      name: "Scotiabank", 
      logo: "https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg",
      category: "Financial Partner",
      icon: Building2
    },
    { 
      name: "Trade Commissioner Service", 
      logo: "https://tailwindui.com/img/logos/158x48/reform-logo-gray-900.svg",
      category: "Government Partner",
      icon: Shield
    },
    { 
      name: "RBC", 
      logo: "https://tailwindui.com/img/logos/158x48/tuple-logo-gray-900.svg",
      category: "Financial Partner",
      icon: Building2
    },
    { 
      name: "University of Toronto", 
      logo: "https://tailwindui.com/img/logos/158x48/savvycal-logo-gray-900.svg",
      category: "Academic Partner",
      icon: Award
    },
    { 
      name: "STEP", 
      logo: "https://tailwindui.com/img/logos/158x48/statamic-logo-gray-900.svg",
      category: "Technology Partner",
      icon: Globe
    }
  ];

  return (
    <section className="section-padding section-soft-wave relative overflow-hidden">
      {/* Background decorative elements */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-1/2 left-1/4 w-64 h-64 bg-gradient-to-br from-blue-500/3 to-purple-500/3 rounded-full blur-3xl"></div>
        <div className="absolute bottom-1/2 right-1/4 w-64 h-64 bg-gradient-to-tr from-teal-500/3 to-green-500/3 rounded-full blur-3xl"></div>
      </div>

      <div className="container mx-auto px-4 sm:px-8 lg:px-16 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            viewport={{ once: true }}
            className="inline-flex items-center gap-2 mb-8 px-6 py-3 bg-gradient-to-r from-blue-500/10 to-purple-500/10 text-blue-700 rounded-full text-sm font-semibold border border-blue-200/50"
          >
            <Users className="h-4 w-4" />
            Strategic Partnerships
          </motion.div>

          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-8 tracking-tight">
            Trusted by Leading Organizations
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto mb-8 leading-relaxed">
            We collaborate with world-class institutions and organizations to deliver the highest quality diagnostic services.
          </p>

          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-10 items-center">
            {partners.map((partner, index) => (
              <motion.div
                key={partner.name}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                viewport={{ once: true }}
                className="col-span-1 text-center group"
              >
                <div className="relative p-6 bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-white/50 group-hover:scale-105">
                  <div className="absolute -top-2 -right-2 w-6 h-6 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <partner.icon className="h-3 w-3 text-blue-600" />
                  </div>
                  
                  <img 
                    src={partner.logo}
                    alt={partner.name}
                    className="h-12 mx-auto object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 mb-3"
                    onError={e => { e.currentTarget.onerror = null; e.currentTarget.src = '/placeholder.svg'; }}
                  />
                  
                  <div className="text-xs text-gray-500 font-medium">
                    {partner.category}
                  </div>
                </div>
              </motion.div>
            ))}
          </div>

          {/* Bottom CTA */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            viewport={{ once: true }}
            className="mt-16"
          >
            <div className="inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-2xl border border-blue-200/50">
              <Shield className="h-5 w-5 text-blue-600" />
              <span className="text-gray-700 font-semibold">Interested in partnering?</span>
              <button className="text-blue-600 font-semibold hover:text-blue-700 transition-colors">
                Contact us →
              </button>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

export default Partners;