src/components/sections/hero/HeroSplitTestimonial.tsx

@@ -14,6 +14,11 @@ type Testimonial = {
   rating: number;
 } & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
 
+type Company = {
+  name: string;
+  logo?: string;
+};
+
 type HeroSplitTestimonialProps = {
   tag: string;
   title: string;
@@ -21,6 +26,7 @@ type HeroSplitTestimonialProps = {
   primaryButton: { text: string; href: string };
   secondaryButton: { text: string; href: string };
   testimonials: Testimonial[];
+  companies?: Company[];
 } & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
 
 const INTERVAL = 5000;
@@ -34,6 +40,7 @@ const HeroSplitTestimonial = ({
   imageSrc,
   videoSrc,
   testimonials,
+  companies,
 }: HeroSplitTestimonialProps) => {
   const [currentIndex, setCurrentIndex] = useState(0);
 
@@ -75,6 +82,26 @@ const HeroSplitTestimonial = ({
               </MagneticButton>
               <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />
             </div>
+
+            {companies && companies.length > 0 && (
+              <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+                className="mt-10 flex flex-col items-center md:items-start gap-4 w-full"
+              >
+                <p className="text-sm text-foreground/60 font-medium uppercase tracking-wider">Trusted by innovative teams</p>
+                <div className="flex flex-wrap items-center justify-center md:justify-start gap-6 md:gap-8 opacity-60 grayscale hover:grayscale-0 transition-all duration-300">
+                  {companies.map((company) => (
+                    company.logo ? (
+                      <img key={company.name} src={company.logo} alt={company.name} className="h-6 object-contain" />
+                    ) : (
+                      <span key={company.name} className="text-xl font-bold tracking-tight">{company.name}</span>
+                    )
+                  ))}
+                </div>
+              </motion.div>
+            )}
           </div>
         </div>