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

const HeroSeven = () => {
  return (
    <div className="min-h-screen bg-no-repeat flex flex-col sm:p-5 ">
      <div className="text-center mb-6 mt-4 sm:mb-8 sm:mt-6 md:mb-12 md:mt-9 px-4">
        <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl text-slate-800 mb-2 sm:mb-3 md:mb-4">
          Our Collections
        </h1>
        <h2 className="text-lg sm:text-xl text-slate-700 max-w-3xl mx-auto">
          Explore divinity with Gupta Rudraksha&#39;s rare and authentic collection. Step into a world of spiritual bliss.
        </h2>
      </div>
      
      <div className="bg-[url('/pooja_banner_3.png')]  bg-no-repeat bg-cover bg-center mx-auto w-full sm:max-w-7xl flex-grow">
        <div className="flex flex-col justify-end sm:ml-14 items-center sm:items-start gap-3 sm:gap-4 md:gap-5 h-full sm:h-[60%] w-full sm:w-1/2 p-6 sm:p-8 md:p-12">
          <h2 className="font-serif text-lg sm:text-xl md:text-2xl">Experience Divine Blessings</h2>
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-serif text-slate-800 text-center sm:text-left">Anytime, Anywhere</h2>
          <p className="text-base sm:text-lg w-full sm:w-[90%] text-center sm:text-left">
            Online Pooja Services by Certified Brahmans, Using Premium Materials, with 100% Satisfaction Guaranteed.
          </p>
          <Link href={'/pooja-services'}><button className="border border-slate-800 px-4 py-4 mt-7 hover:bg-[#C19A5B] capitalize font-semibold transition-colors ease-in duration-300 font-serif sm:ml-10">explore pooja services</button></Link>
        </div>
      </div>
    </div>
  );
};

export default HeroSeven;