Changed sliding image to be continuous

src/components/HeroSection.jsx

@@ -38,69 +38,51 @@ const HeroSection = () => {
       <div className="absolute inset-0 opacity-5 bg-grain"></div>
 
       {/* Slides */}
-      <AnimatePresence mode="wait" custom={currentSlide}>
+      <AnimatePresence initial={false}>
         <motion.div
           key={currentSlide}
+          className="absolute inset-0"
+        >
+          {/* Background Image with Overlay - Parallax effect */}
+          <motion.div
             initial={{ x: '100%' }}
             animate={{ x: 0 }}
             exit={{ x: '-100%' }}
-          transition={{ duration: 0.6, ease: [0.32, 0.72, 0, 1] }}
+            transition={{ duration: 0.7, ease: "easeInOut" }}
-          className="absolute inset-0"
-        >
-          {/* Background Image with Overlay */}
-          <div
             className="absolute inset-0 bg-cover bg-center"
             style={{ backgroundImage: `url(${heroSlides[currentSlide].image})` }}
           >
             <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/50 to-transparent"></div>
-          </div>
-
-          {/* Content */}
-          <div className="relative h-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center">
-            <motion.div
-              className="max-w-2xl text-white"
-              initial={{ opacity: 0, x: -50 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ delay: 0.3, duration: 0.6 }}
-            >
-              {/* Badge */}
-              <motion.div
-                initial={{ opacity: 0, y: -20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.4, duration: 0.5 }}
-                className="inline-flex items-center gap-2 bg-secondary-200 px-4 py-2 rounded-full mb-6 font-inter font-medium"
-                style={{ color: '#715904' }}
-              >
-                <FaStar style={{ color: '#F9A22E' }} />
-                <span>{heroSlides[currentSlide].badge}</span>
           </motion.div>
 
-              {/* Title */}
+          {/* Content - Slightly delayed for parallax */}
-              <motion.h1
+          <div className="relative h-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center">
-                initial={{ opacity: 0, y: 20 }}
+            <motion.div
-                animate={{ opacity: 1, y: 0 }}
+              initial={{ x: '120%', opacity: 0 }}
-                transition={{ delay: 0.5, duration: 0.6 }}
+              animate={{ x: 0, opacity: 1 }}
-                className="text-4xl sm:text-5xl lg:text-6xl font-playfair font-bold mb-6 leading-tight"
+              exit={{ x: '-120%', opacity: 0 }}
+              transition={{ duration: 0.7, ease: "easeInOut", delay: 0.1 }}
+              className="max-w-2xl text-white"
             >
+              {/* Badge */}
+              <div className="inline-flex items-center gap-2 bg-secondary-200 px-4 py-2 rounded-full mb-6 font-inter font-medium" style={{ color: '#715904' }}>
+                <FaStar style={{ color: '#F9A22E' }} />
+                <span>{heroSlides[currentSlide].badge}</span>
+              </div>
+
+              {/* Title */}
+              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-playfair font-bold mb-6 leading-tight">
                 {heroSlides[currentSlide].title}
-              </motion.h1>
+              </h1>
 
               {/* Description */}
-              <motion.p
+              <p className="text-lg sm:text-xl text-gray-200 mb-8 font-inter leading-relaxed">
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.6, duration: 0.6 }}
-                className="text-lg sm:text-xl text-gray-200 mb-8 font-inter leading-relaxed"
-              >
                 {heroSlides[currentSlide].description}
-              </motion.p>
+              </p>
 
               {/* CTA Button */}
               <motion.button
-                initial={{ opacity: 0, y: 20 }}
+                whileHover={{ scale: 1.05 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.7, duration: 0.6 }}
-                whileHover={{ scale: 1.05, boxShadow: "0 20px 40px rgba(0,0,0,0.3)" }}
                 whileTap={{ scale: 0.95 }}
                 className="bg-gradient-to-r from-secondary-500 to-tertiary-500 hover:from-secondary-600 hover:to-tertiary-600 text-gray-900 px-8 py-4 rounded-lg font-poppins font-semibold text-lg shadow-xl transition-all duration-300"
               >

src/data/siteData.js

@@ -22,7 +22,7 @@ export const heroSlides = [
     id: 1,
     title: "Special Fixed Deposit Schemes",
     description: "Earn up to 8.5% interest on your deposits. Secure your future with our trusted FD plans.",
-    image: "https://images.unsplash.com/photo-1464226184884-fa280b87c399?w=1400&h=700&fit=crop&q=80",
+    image: "https://sc0.blr1.cdn.digitaloceanspaces.com/article/159143-fyoisazenw-1621239169.jpg",
     cta: "Open FD Account",
     badge: "8.5% Interest"
   },
@@ -38,7 +38,7 @@ export const heroSlides = [
     id: 3,
     title: "Kisan Credit Card Facility",
     description: "Access credit anytime with our Kisan Credit Card. Flexible limits and minimal documentation.",
-    image: "https://images.unsplash.com/photo-1560493676-04071c5f467b?w=1400&h=700&fit=crop&q=80",
+    image: "https://www.niti.gov.in/sites/default/files/styles/wide/public/2023-02/Strengthening%20the%20Indian%20Agriculture%20ecosystem%202.jpg?itok=vsjiVSVo",
     cta: "Get KCC Now",
     badge: "Instant Approval"
   },
@@ -46,7 +46,7 @@ export const heroSlides = [
     id: 4,
     title: "Safe & Secure Locker Facility",
     description: "Protect your valuable documents and jewelry. Premium locker facility available at affordable rates.",
-    image: "https://images.unsplash.com/photo-1566281796817-93bc94d7dbd2?w=1400&h=700&fit=crop&q=80",
+    image: "https://res.cloudinary.com/jerrick/image/upload/d_642250b563292b35f27461a7.png,f_jpg,fl_progressive,q_auto,w_1024/673c69b9a541bc001d7b0d2c.jpg",
     cta: "Book a Locker",
     badge: "₹500/year"
   }