chore: setup project for production

components/premium-rudraksha/PremiumBannerLast.jsx

@@ -0,0 +1,115 @@
+"use client";
+import React, { useState } from "react";
+import { ChevronRight } from "lucide-react";
+import Image from "next/image";
+
+const PremiumBannerLast = () => {
+  const [selectedService, setSelectedService] = useState(0);
+
+  const services = [
+    {
+      title: "Expert Guidance",
+      description:
+        "Consultation provides access to expert advice and guidance from professionals who have in-depth knowledge and experience in their respective fields. We can offer valuable insights, strategies, and solutions tailored to your specific needs.",
+      imageUrl: ["/expert_guidance_1.jpg", "/expert_guidance_2.jpg"],
+    },
+    {
+      title: "Mantras For You",
+      description:
+        "Rudraksha experts can recommend specific mantras that align with your spiritual goals and intentions. Mantras are considered powerful tools for spiritual growth, and the right mantra can enhance the effectiveness of your Rudraksha.",
+      imageUrl: ["/mantra_1.jpg", "/mantra_2.jpg"],
+    },
+    {
+      title: "Your Birth Chart",
+      description:
+        "Rudraksha experts may also have knowledge of Vedic astrology. By analyzing your birth chart, they can provide insights into the planetary influences on your life and suggest Rudraksha combinations that may help balance and harmonize these influences.",
+      imageUrl: ["/birth_chart_1.jpg", "/birth_chart2.jpg"],
+    },
+    {
+      title: "Your Family Birth Chart",
+      description:
+        "Understanding the birth charts of family members can offer a holistic view of the energy dynamics within the family. Rudraksha experts can provide guidance on selecting Rudraksha beads that complement the energy of the entire family, fostering a harmonious environment.",
+      imageUrl: ["/family_chart1.jpg", "/family_chart_2.jpg"],
+    },
+    {
+      title: "Pooja Service Recommendation",
+      description:
+        "Rudraksha experts may recommend specific pooja services or rituals based on your spiritual needs and challenges. These rituals can be tailored to address specific concerns and promote positive energy flow in your life.",
+      imageUrl: ["/pooja_1.jpg", "/pooja_2.jpg"],
+    },
+    {
+      title: "Client Confidentiality",
+      description:
+        "Rudraksha experts, like other spiritual and holistic practitioners, typically uphold a strong code of client confidentiality. This ensures that personal and sensitive information shared during consultations is kept private and secure.",
+      imageUrl: ["/confidentiality_1.jpg", "/client_confidentiality_2.jpg"],
+    },
+  ];
+
+  const handleServiceClick = (index) => {
+    setSelectedService(index);
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-50 p-4">
+      <h1 className="sm:text-5xl sm:mt-24 text-2xl font-serif text-center tracking-wide mb-12">
+        Perks of Consulting an Expert
+      </h1>
+      <div className="grid sm:grid-cols-3 gap-8">
+        <div className="flex flex-col gap-4 sm:pl-10">
+          {services.map((service, index) => (
+            <div
+              key={index}
+              className="cursor-pointer"
+              onClick={() => handleServiceClick(index)}
+            >
+              <h2
+                className={`text-xl ${
+                  selectedService === index ? "text-yellow-700" : ""
+                } hover:translate-x-4 hover:font-semibold hover:text-yellow-700 transition-all flex items-center`}
+              >
+                {selectedService === index ? (
+                  <ChevronRight className="mr-2" size={20} />
+                ) : (
+                  ""
+                )}
+                {service.title}
+              </h2>
+            </div>
+          ))}
+        </div>
+        <div className="sm:col-span-2">
+          {selectedService !== null && (
+            <div className="bg-white p-6">
+              <div className="flex flex-col-reverse sm:flex-row gap-6">
+                <div className="flex flex-col gap-3 justify-start items-start sm:w-1/2">
+                  <p className="mb-4 mt-2 text-[1.05rem]">
+                    {services[selectedService].description}
+                  </p>
+                  <a href="#form">
+                    <button className="px-5 font-semibold text-white bg-[#C19A5B] py-4">
+                      Book now
+                    </button>
+                  </a>
+                </div>
+                <div className="flex  gap-4 sm:w-1/2">
+                  {services[selectedService].imageUrl.map((url, index) => (
+                    <Image
+                      key={index}
+                      src={url}
+                      alt={`${services[selectedService].title} - ${index + 1}`}
+                      width={230} 
+                      height={350} 
+                      className="sm:w-[230px] sm:h-[350px] w-[130px] h-[250px] object-cover"
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PremiumBannerLast;