100 lines
2.8 KiB
JavaScript
100 lines
2.8 KiB
JavaScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import React, { useState, useEffect } from "react";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/ui/carousel";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import Autoplay from "embla-carousel-autoplay";
|
|
import Link from "next/link";
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
const Hero = ({ data }) => {
|
|
console.log(data);
|
|
const plugin = React.useRef(
|
|
Autoplay({ delay: 4000, stopOnInteraction: true })
|
|
);
|
|
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const checkMobile = () => {
|
|
setIsMobile(window.innerWidth < 768);
|
|
};
|
|
|
|
checkMobile();
|
|
window.addEventListener("resize", checkMobile);
|
|
|
|
return () => window.removeEventListener("resize", checkMobile);
|
|
}, []);
|
|
|
|
const heroData = data || [
|
|
{
|
|
type: "image",
|
|
src: "/rudraksh banner image 2.avif",
|
|
overlay: {
|
|
title: "Sacred Collection",
|
|
subtitle: "Discover Authentic Rudraksha",
|
|
description: "Explore our curated selection of premium spiritual items",
|
|
link: "/collection",
|
|
},
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "/rudraksha banner 1.png",
|
|
overlay: {
|
|
title: "Quality Assured",
|
|
subtitle: "Lifetime Authenticity Guarantee",
|
|
description: "Every piece comes with our exclusive certification",
|
|
link: "/products/premium-rudraksha-consultation-astrology",
|
|
},
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "/rudraksha banner 2.png",
|
|
overlay: {
|
|
title: "Sacred Ceremonies",
|
|
subtitle: "Traditional Prana Pratistha",
|
|
description: "Blessed at the ancient Pashupatinath temple",
|
|
link: "/collection/online-pooja",
|
|
},
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="relative w-full h-[55vh] bg-background">
|
|
<Carousel
|
|
plugins={[plugin.current]}
|
|
className="w-full h-full"
|
|
onMouseEnter={plugin.current.stop}
|
|
onMouseLeave={plugin.current.reset}
|
|
>
|
|
<CarouselContent>
|
|
{heroData.map((item, index) => (
|
|
<CarouselItem key={index}>
|
|
<div className="relative w-full h-[55vh] overflow-hidden">
|
|
<Image
|
|
src={item.src || "/placeholder.svg"}
|
|
alt={`Slide ${index + 1}`}
|
|
fill
|
|
className="object-cover brightness-75"
|
|
priority={index === 0}
|
|
/>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious className="left-4 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white border-none" />
|
|
<CarouselNext className="right-4 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white border-none" />
|
|
</Carousel>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|