Merge pull request #30 from MYSTICxSAM/video

Changes in UI

Author: 092vk

public/Workers/Worker1.jpeg

@@ -27,11 +27,14 @@ const Hero: React.FC = () => {
         <div className="flex flex-col lg:flex-row items-center justify-between gap-12">
           <div className="w-full lg:w-1/2 space-y-6 animate-fade-in">
             <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight">
-            {t('hero.t1')} <span className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight" 
-              style={{ color: 'hsl(var(--primary))' }}
+              {t('hero.t1')}{" "}
+              <span
+                className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight"
+                style={{ color: 'hsl(var(--primary))' }}
               >
                 {t('hero.title')}
-              </span> {t('hero.t2')}
+              </span>{" "}
+              {t('hero.t2')}
             </h1>
             <p className="text-lg text-muted-foreground max-w-lg">
               {t('hero.subtitle')}
@@ -67,11 +70,16 @@ const Hero: React.FC = () => {
 
           <div className="w-full lg:w-1/2 relative">
             <div className="relative rounded-2xl overflow-hidden shadow-xl animate-fade-in animation-delay-200">
-              <img
-                src="/worker1.jpg"
-                alt="Professional carpenter working" 
-                className="w-full h-[400px] object-cover"
-              />
+              <div className="aspect-w-16 aspect-h-9">
+                   <iframe
+                        className="w-full h-[400px]"
+                        src="https://www.youtube.com/embed/In1KOe8za5g"
+                        title="YouTube video"
+                        frameBorder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowFullScreen
+                      ></iframe>
+              </div>
               <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
                 <div className="flex items-start space-x-4">
                   <div className="bg-white p-3 rounded-full">

public/Workers/Worker2.jpeg

@@ -0,0 +1,53 @@
+import React from 'react';
+
+// Define each video testimonial prop
+const videoTestimonials = [
+  {
+    videoUrl: "https://www.youtube.com/embed/In1KOe8za5g", // Example link - replace with your own
+    name: 'Darshan Gupta ji',
+    feedback: 'Fantastic experience from start to finish. Highly recommend their services!'
+  },
+  {
+    videoUrl: "https://www.youtube.com/embed/VdlUJDlzIIk",
+    name: 'Rakesh Sharma',
+    feedback: 'The support team was quick and reliable. Helped us achieve our goals smoothly.'
+  },
+  {
+    videoUrl: 'https://www.youtube.com/embed/XM7Vyx0r3QU',
+    name: 'Rakesh Patel',
+    feedback: 'Their process was efficient and transparent. Will work again with them for sure!'
+  }
+];
+
+const VideoTestimonialCard = ({ videoUrl, name, feedback }) => (
+  <div className="bg-white rounded-xl shadow-lg p-4 flex flex-col items-center hover:shadow-2xl transition-all duration-300">
+    <div className="w-full aspect-video rounded-lg overflow-hidden mb-4">
+      <iframe
+        src={videoUrl}
+        title={name}
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+        className="w-full h-full"
+      ></iframe>
+    </div>
+    <p className="italic text-gray-800 text-center mb-2">"{feedback}"</p>
+    <div className="flex flex-col items-center">
+      <span className="font-semibold text-gray-900">{name}</span>
+    </div>
+  </div>
+);
+
+const VideoTestimonials = () => (
+  <section className="py-6 bg-gradient-to-r from-gray-50 to-white">
+    <div className="container mx-auto px-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {videoTestimonials.map((testimonial, idx) => (
+          <VideoTestimonialCard key={idx} {...testimonial} />
+        ))}
+      </div>
+    </div>
+  </section>
+);
+
+export default VideoTestimonials;

public/Workers/Worker3.jpeg

@@ -11,6 +11,7 @@ import Footer from "../components/Footer";
 import HeroForm from "@/components/HeroForm";
 import FAQ from "../components/FAQ";
 import Bmodel from "@/components/Bmodel";
+import VideoTestimonials from "@/components/VideoTestimonials";
 // import { Banner } from "@/components/Banner";
 
 const Index: React.FC = () => {
@@ -53,6 +54,7 @@ const Index: React.FC = () => {
       {/* <ServiceCategories /> */}
       <HowItWorks />
       <Testimonials />
+      <VideoTestimonials />
       <FAQ />
       {/* <FeaturedProfessionals /> */}
       <Footer />