pagination added in artical and other changes
This commit is contained in:
priyanshuvish
@@ -735,142 +735,6 @@ export function LearningFacilityNew() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Cultural Theme Images Section */}
|
||||
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="container mx-auto section-margin-x">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<div className="branded-tag-system mb-6 justify-center">
|
||||
<div className="dot"></div>
|
||||
<span className="text">Cultural Experience</span>
|
||||
</div>
|
||||
<h2 className="text-h2 mb-6">
|
||||
Journey Through Cultural Heritage
|
||||
</h2>
|
||||
<p className="text-body-lg text-muted max-w-3xl mx-auto">
|
||||
Experience the rich cultural tapestry woven throughout our leadership center. Each space tells a story of ancient wisdom, spiritual foundations, and timeless traditions that inspire modern leaders.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cultural Images Carousel */}
|
||||
<div className="relative">
|
||||
{/* Navigation Controls */}
|
||||
<div className="flex gap-2 justify-center mb-8">
|
||||
<button
|
||||
onClick={() => {
|
||||
const container = document.getElementById('cultural-carousel');
|
||||
if (container) {
|
||||
container.scrollBy({ left: -400, behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
className="flex items-center justify-center w-12 h-12 bg-white border-2 border-gray-200 rounded-lg hover:border-primary hover:bg-primary hover:text-white transition-all duration-300 group"
|
||||
aria-label="Previous cultural images"
|
||||
>
|
||||
<ChevronLeft className="w-6 h-6" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
const container = document.getElementById('cultural-carousel');
|
||||
if (container) {
|
||||
container.scrollBy({ left: 400, behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
className="flex items-center justify-center w-12 h-12 bg-white border-2 border-gray-200 rounded-lg hover:border-primary hover:bg-primary hover:text-white transition-all duration-300 group"
|
||||
aria-label="Next cultural images"
|
||||
>
|
||||
<ChevronRight className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Scrolling Images */}
|
||||
<div
|
||||
id="cultural-carousel"
|
||||
className="flex overflow-x-auto scrollbar-hide gap-6 pb-4"
|
||||
style={{ scrollSnapType: 'x mandatory' }}
|
||||
>
|
||||
{[
|
||||
{
|
||||
title: "Meditation Spaces",
|
||||
description: "Dedicated areas within our leadership center designed for mindful reflection and inner contemplation, where leaders find clarity and purpose.",
|
||||
image: "https://images.unsplash.com/photo-1643793427422-d28ccb5f1f69?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhbmNpZW50JTIwaW5kaWFuJTIwd2lzZG9tJTIwbWVkaXRhdGlvbnxlbnwxfHx8fDE3NTY4OTU1NTZ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
category: "Spiritual Spaces"
|
||||
},
|
||||
{
|
||||
title: "Cultural Architecture",
|
||||
description: "Architectural elements throughout our center that pay homage to classical Indian design, creating inspiring spaces for leadership development.",
|
||||
image: "https://images.unsplash.com/photo-1704788564069-d54cab4169aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmFkaXRpb25hbCUyMGluZGlhbiUyMGFydCUyMHBhdHRlcm5zfGVufDF8fHx8MTc1Njg5NTU5NXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
category: "Architecture"
|
||||
},
|
||||
{
|
||||
title: "Inspirational Sculptures",
|
||||
description: "Carefully curated sculptures and artistic pieces that embody leadership virtues and spiritual wisdom, strategically placed throughout our facility.",
|
||||
image: "https://images.unsplash.com/photo-1566890910598-c5768889e83e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxoaW5kdSUyMGRlaXRpZXMlMjBzY3VscHR1cmUlMjBhcnR8ZW58MXx8fHwxNzU2ODk1NTcxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
category: "Art & Culture"
|
||||
},
|
||||
{
|
||||
title: "Wisdom Library",
|
||||
description: "A collection of ancient texts and modern leadership resources that bridge timeless wisdom with contemporary leadership challenges.",
|
||||
image: "https://images.unsplash.com/photo-1714250175994-008837c7e291?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhbmNpZW50JTIwaW5kaWFuJTIwbWFudXNjcmlwdHMlMjB3aXNkb218ZW58MXx8fHwxNzU2ODk1NTgxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
category: "Learning Resources"
|
||||
},
|
||||
{
|
||||
title: "Cultural Motifs",
|
||||
description: "Traditional patterns and artistic motifs integrated into our center's design, creating an immersive cultural experience for visiting leaders.",
|
||||
image: "https://images.unsplash.com/photo-1703145219083-6037d97decb5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmFkaXRpb25hbCUyMGluZGlhbiUyMGFydCUyMHBhdHRlcm5zfGVufDF8fHx8MTc1Njg5NTU5NXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
category: "Design Elements"
|
||||
},
|
||||
{
|
||||
title: "Sacred Symbols",
|
||||
description: "Meaningful symbols and emblems placed throughout our leadership center that inspire reflection on values, purpose, and authentic leadership.",
|
||||
image: "https://images.unsplash.com/photo-1753204392401-a424cb95d3e2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpbmRpYW4lMjBzcGlyaXR1YWwlMjBzeW1ib2xzJTIwb218ZW58MXx8fHwxNzU2ODk1NjA5fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
category: "Symbolic Elements"
|
||||
}
|
||||
].map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="group flex-shrink-0 w-80"
|
||||
style={{ scrollSnapAlign: 'start' }}
|
||||
>
|
||||
<div className="relative overflow-hidden rounded-2xl h-96 cursor-pointer">
|
||||
<ImageWithFallback
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
|
||||
{/* Category Badge */}
|
||||
<div className="absolute top-4 left-4">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="bg-white/90 text-primary border border-gray-200"
|
||||
>
|
||||
{item.category}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Hover Text Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-col justify-end p-6">
|
||||
<h3 className="text-white text-h4 mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-100" style={{ color: '#FFFFFF !important' }}>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-white text-body leading-relaxed transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-200" style={{ color: '#FFFFFF !important' }}>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
{/* Deluxe Living & Recreation Section */}
|
||||
<section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
|
||||
|
||||
Reference in New Issue
Block a user