56 lines
2.0 KiB
JavaScript
56 lines
2.0 KiB
JavaScript
import React from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { productsCards } from "@/utils";
|
|
|
|
const ExclusiveProductCards = () => {
|
|
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8 max-w-8xl">
|
|
<div className="text-center mb-12">
|
|
<h1 className="font-serif text-5xl text-slate-800 mb-4">
|
|
Only at Gupta Rudraksha™
|
|
</h1>
|
|
<h2 className="text-xl text-slate-700">
|
|
Explore divinity with Gupta Rudraksha's rare and authentic collection.
|
|
Step into a world of spiritual bliss.
|
|
</h2>
|
|
</div>
|
|
<div className="flex-wrap gap-5 flex items-center justify-center">
|
|
{productsCards.map((product) => (
|
|
<Link href={`/products/${product.title}`} key={product.id}>
|
|
<div
|
|
key={product.id}
|
|
className="relative bg-[#EDE8E0] overflow-hidden h-[350px] w-[300px] "
|
|
>
|
|
<div className="absolute top-0 left-0 bg-[#C19A5B] text-white py-1 px-3 rounded-br-lg z-10">
|
|
Exclusive
|
|
</div>
|
|
<div className="h-[300px] w-[300px] flex items-center justify-center">
|
|
<Image
|
|
src={"/one-one.jpg"}
|
|
alt={`Logo for ${product.title}`}
|
|
width={160}
|
|
height={150}
|
|
className="object-contain hover:scale-125 transition-all ease-in duration-300"
|
|
/>
|
|
</div>
|
|
<div className="p-4 ">
|
|
<h3 className="text-center text-[1rem] uppercase text-gray-800">
|
|
{product.title}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="py-4 border-y-2 mt-9">
|
|
<Link href={'/collections/only-in-nepa-rudraksha'}><h2 className="text-2xl text-center underline text-[#C19A5B]">Shop Exclusive Products</h2></Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ExclusiveProductCards;
|