87 lines
3.0 KiB
JavaScript
87 lines
3.0 KiB
JavaScript
"use client";
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
const categories = [
|
|
{ title: "Spirituality", image: "/one-two.jpg" },
|
|
{ title: "Meditation", image: "/gallery1.jpg" },
|
|
{ title: "Wellness", image: "/pooja_image.webp" },
|
|
];
|
|
|
|
const BannerSlider = () => {
|
|
return (
|
|
<section className="relative h-fit bg-gradient-to-br from-yellow-800 to-yellow-700 overflow-hidden">
|
|
{/* Background image */}
|
|
<Image
|
|
src="/herothree.jpg"
|
|
alt="Background"
|
|
layout="fill"
|
|
objectFit="cover"
|
|
className="mix-blend-overlay opacity-30"
|
|
/>
|
|
|
|
<div className="container mx-auto px-4 py-16 relative z-10">
|
|
<div className="flex flex-col lg:flex-row items-center justify-between gap-12">
|
|
{/* Text content */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="lg:w-1/3 text-center lg:text-left"
|
|
>
|
|
<h2 className="text-2xl font-medium text-primary-foreground mb-4">
|
|
Discover Your Path
|
|
</h2>
|
|
<h1 className="text-4xl lg:text-5xl font-bold text-white mb-6">
|
|
Astrology-Guided Personal Growth
|
|
</h1>
|
|
<p className="text-lg text-primary-foreground/80 mb-8">
|
|
Unlock your potential with our expert-led consultations and sacred
|
|
Rudraksha beads.
|
|
</p>
|
|
<a
|
|
href="#consultation"
|
|
className="inline-flex items-center gap-2 bg-white text-primary px-6 py-3 rounded-full hover:bg-primary-foreground hover:text-primary transition-colors"
|
|
>
|
|
Book a Consultation
|
|
<ArrowRight className="w-4 h-4" />
|
|
</a>
|
|
</motion.div>
|
|
|
|
{/* Static Cards */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
className="lg:w-2/3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
|
|
>
|
|
{categories.map((category, index) => (
|
|
<div
|
|
key={index}
|
|
className="relative aspect-square rounded-lg overflow-hidden group"
|
|
>
|
|
<Image
|
|
src={category.image || "/placeholder.svg"}
|
|
alt={category.title}
|
|
layout="fill"
|
|
objectFit="cover"
|
|
className="transition-transform duration-300 group-hover:scale-110"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4">
|
|
<h3 className="text-white text-lg font-medium">
|
|
{category.title}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default BannerSlider;
|