From 704d2f895996a6c3ba60a5aa2c7da49d95f5d16c Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 21 Jun 2026 15:44:11 +0000
Subject: [PATCH] Bob AI: Added video testimonials section for high-impact
 social proo

---
 src/pages/HomePage.tsx                        |  4 +-
 .../HomePage/sections/VideoTestimonials.tsx   | 78 +++++++++++++++++++
 2 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/HomePage/sections/VideoTestimonials.tsx

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index bd5c9e1..5cdc529 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -12,7 +12,8 @@ import RatingSection from './HomePage/sections/Rating';
 import MetricsSection from './HomePage/sections/Metrics';
 import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage(): React.JSX.Element {
+
+import VideoTestimonialsSection from './HomePage/sections/VideoTestimonials';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
@@ -28,6 +29,7 @@ export default function HomePage(): React.JSX.Element {
   <MetricsSection />
 
   <ContactSection />
+          <VideoTestimonialsSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/VideoTestimonials.tsx b/src/pages/HomePage/sections/VideoTestimonials.tsx
new file mode 100644
index 0000000..0026e49
--- /dev/null
+++ b/src/pages/HomePage/sections/VideoTestimonials.tsx
@@ -0,0 +1,78 @@
+import { motion } from "motion/react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Card from "@/components/ui/Card";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import RatingStars from "@/components/ui/RatingStars";
+import Tag from "@/components/ui/Tag";
+
+export default function VideoTestimonials() {
+  const testimonials = [
+    {
+      name: "Arjun K.",
+      role: "Developer",
+      company: "TechCorp",
+      rating: 5,
+      videoSrc: "https://videos.pexels.com/video-files/3129957/3129957-uhd_2560_1440_25fps.mp4",
+    },
+    {
+      name: "Meera S.",
+      role: "Designer",
+      company: "Creative Studio",
+      rating: 5,
+      videoSrc: "https://videos.pexels.com/video-files/3129671/3129671-uhd_2560_1440_25fps.mp4",
+    },
+    {
+      name: "Rahul V.",
+      role: "Product Manager",
+      company: "Innovate Inc",
+      rating: 5,
+      videoSrc: "https://videos.pexels.com/video-files/3206323/3206323-uhd_2560_1440_25fps.mp4",
+    }
+  ];
+
+  return (
+    <section data-webild-section="video-testimonials" id="video-testimonials" className="relative w-full py-24 bg-background">
+      <div className="w-content-width mx-auto">
+        <div className="text-center mb-16 flex flex-col items-center">
+          <ScrollReveal variant="fade">
+            <Tag text="Testimonials" className="mb-4" />
+          </ScrollReveal>
+          <TextAnimation
+            text="Real stories from our users"
+            variant="fade-blur"
+            tag="h2"
+            gradientText={false}
+            className="text-4xl md:text-5xl font-bold text-foreground mb-4"
+          />
+          <ScrollReveal variant="fade" delay={0.2}>
+            <p className="text-lg text-accent max-w-2xl mx-auto">
+              See how Codifya is helping teams build better and faster.
+            </p>
+          </ScrollReveal>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {testimonials.map((testimonial, index) => (
+            <ScrollReveal variant="fade" key={index} delay={0.1 * index} className="h-full">
+              <Card className="h-full flex flex-col overflow-hidden p-0">
+                <div className="relative aspect-[9/16] w-full overflow-hidden">
+                  <ImageOrVideo
+                    videoSrc={testimonial.videoSrc}
+                    className="w-full h-full object-cover"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent pointer-events-none" />
+                  <div className="absolute bottom-0 left-0 right-0 p-6">
+                    <RatingStars rating={testimonial.rating} className="mb-3 text-primary-cta" />
+                    <h3 className="text-xl font-bold text-white mb-1">{testimonial.name}</h3>
+                    <p className="text-sm text-white/80">{testimonial.role} at {testimonial.company}</p>
+                  </div>
+                </div>
+              </Card>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
-- 
2.49.1