import Link from "next/link";
import React from "react";

const PopularRudrakshaCombination = () => {
  return (
    <div className="bg-[#EDE8E0] min-h-screen p-4">
      <h1 className="sm:pt-14 pb-8 font-serif mt-4 sm:text-6xl text-2xl text-zinc-800 text-center">
        Popular Rudraksha Combination
      </h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 sm:gap-4 gap-7">
        <div className="text-white flex flex-col bg-[url('/buy-rudraksha/zodiac_combo_1x_1_f7d5771c-e186-4efe-93ec-f985fd30178d.webp')] justify-start sm:h-[300px] bg-cover bg-center bg-no-repeat w-full p-6">
          <h1 className="sm:text-4xl sm:w-[30%]  text-lg mb-3">
            Zodiac Combination
          </h1>
          <Link href={"/collections/zodiac-combination"}>
            <button className="px-4 py-4 border-none text-white border font-semibold bg-[#b68d40]  ">
              Explore Combination
            </button>
          </Link>
        </div>

        <div className="text-white flex flex-col justify-start sm:h-[300px] bg-cover bg-center w-full p-6 bg-[url('/buy-rudraksha/goals_aspirations_combo_1x_1_6da0bb78-1e20-4c48-b7a5-de4d6995b51c.webp')]">
          <h1 className="sm:text-4xl sm:w-[60%]  text-lg mb-3">Combination by Goals
          and Aspirations</h1>
          <Link href={"/collections/combination-by-goals-and-aspirations"}>
            <button className="px-4 py-4 border-none text-white border font-semibold bg-[#b68d40]  ">
              Explore Combination
            </button>
          </Link>
        </div>

        <div className="text-white flex flex-col justify-start sm:h-[300px] bg-cover bg-center bg-no-repeat w-full p-6 bg-[url('/buy-rudraksha/maha_dasha_1x_1_e12fc2ae-e143-45fd-9199-33e0012f1b2c.webp')]">
          <h1 className="sm:text-4xl sm:w-[50%]  text-lg mb-3">Combination for
          Maha Dasha</h1>
          <Link href={"/collections/combination-for-maha-dasha"}>
            <button className="px-4 py-4 border-none text-white border font-semibold bg-[#b68d40]  ">
              Explore Combination
            </button>
          </Link>
        </div>

        <div className="text-white flex flex-col justify-start sm:h-[300px] bg-cover bg-center w-full p-6 bg-no-repeat bg-[url('/buy-rudraksha/rudraksha_kavach_1x_1_1d5d5deb-91bb-4e92-9a42-76a7b84aef11.webp')]">
          <h1 className="sm:text-4xl sm:w-[30%]  text-lg mb-3">Rudraksha Kavach</h1>
          <Link href={"/collections/rudraksha-kavach"}>
            <button className="px-4 py-4 border-none text-white border font-semibold bg-[#b68d40]  ">
              Explore Combination
            </button>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default PopularRudrakshaCombination;