57 lines
2.5 KiB
JavaScript
57 lines
2.5 KiB
JavaScript
import React from "react";
|
|
|
|
const SiddhaThree = () => {
|
|
return (
|
|
<div className="bg-[#F5F1EB] min-h-screen py-12 px-6 sm:px-12">
|
|
<h1 className="sm:pt-14 pb-10 font-serif mt-4 sm:text-6xl text-3xl text-zinc-800 text-center">
|
|
Design Available
|
|
</h1>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{[
|
|
{
|
|
title: "Loose Beads/Red Thread",
|
|
description:
|
|
"Loose beads provide flexibility in crafting your own unique Rudraksha accessories. Ideal for those who wish to design custom malas or incorporate Rudraksha beads into existing jewelry pieces.",
|
|
image: "/sidhi-mala/1.webp",
|
|
},
|
|
{
|
|
title: "Silver Capped",
|
|
description:
|
|
"Silver-capped Rudraksha beads add an elegant touch to your spiritual accessories. The silver caps not only enhance the aesthetics but also provide additional durability.",
|
|
image: "/sidhi-mala/2_01d4b37c-ade7-44a1-8847-b63ca7945b5b.webp",
|
|
},
|
|
{
|
|
title: "Silver Chain",
|
|
description:
|
|
"A Rudraksha chain with silver links combines the sacred energy of Rudraksha with the elegance of silver. The chain design allows for a more versatile and adjustable accessory, suitable for daily wear.",
|
|
image: "/sidhi-mala/3_4bb67323-1af4-4167-9f11-34cdab60e320.webp",
|
|
},
|
|
{
|
|
title: "Rudraksha Chain",
|
|
description:
|
|
"A Rudraksha chain with silver links combines the sacred energy of Rudraksha with the elegance of silver. The chain design allows for a more versatile and adjustable accessory, suitable for daily wear.",
|
|
image: "/sidhi-mala/4_b5f14d83-0ef5-4e47-8e96-d36db882aadc.webp",
|
|
},
|
|
].map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="relative text-white flex flex-col justify-end h-64 sm:h-80 bg-cover bg-center bg-no-repeat w-full p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300"
|
|
style={{ backgroundImage: `url(${item.image})` }}
|
|
>
|
|
<div className="bg-black bg-opacity-50 p-4 rounded-lg">
|
|
<h1 className="sm:text-2xl text-lg font-bold mb-2">
|
|
{item.title}
|
|
</h1>
|
|
<h3 className="sm:text-sm text-xs leading-relaxed">
|
|
{item.description}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SiddhaThree;
|