md.asif5/pacs-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed sliding image to be continuous

Browse Source
This commit is contained in:
Md Asif
2025-11-26 12:18:24 +05:30
parent 38764f2ed1
commit 0e2d93f153
2 changed files with 23 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/HeroSection.jsx
View File

@@ -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}
initial={{ x: '100%' }}
animate={{ x: 0 }}
exit={{ x: '-100%' }}
transition={{ duration: 0.6, ease: [0.32, 0.72, 0, 1] }}
className="absolute inset-0"
>
{/* Background Image with Overlay */}
<div
{/* Background Image with Overlay - Parallax effect */}
<motion.div
initial={{ x: '100%' }}
animate={{ x: 0 }}
exit={{ x: '-100%' }}
transition={{ duration: 0.7, ease: "easeInOut" }}
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>
</motion.div>
{/* Content */}
{/* Content - Slightly delayed for parallax */}
<div className="relative h-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center">
<motion.div
initial={{ x: '120%', opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: '-120%', opacity: 0 }}
transition={{ duration: 0.7, ease: "easeInOut", delay: 0.1 }}
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' }}
>
<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>
</motion.div>
</div>
{/* Title */}
<motion.h1
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5, duration: 0.6 }}
className="text-4xl sm:text-5xl lg:text-6xl font-playfair font-bold mb-6 leading-tight"
>
<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
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"
>
<p 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 }}
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)" }}
whileHover={{ scale: 1.05 }}
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"
>

6
src/data/siteData.js
View File

@@ -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"
}