chore: setup project for production
This commit is contained in:
afnaann
152
components/premium-rudraksha/PremiumBanner.jsx
Normal file
152
components/premium-rudraksha/PremiumBanner.jsx
Normal file
@@ -0,0 +1,152 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import { ChevronRight, Gem } from "lucide-react";
|
||||
import authAxios from "@/utils/axios";
|
||||
import Image from "next/image";
|
||||
|
||||
const PremiumBanner = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
email: "",
|
||||
phone_number: "",
|
||||
});
|
||||
|
||||
const [message, setMessage] = useState("");
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prevState) => ({
|
||||
...prevState,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const response = await authAxios.post(
|
||||
"/consultation/booking/create/",
|
||||
formData
|
||||
);
|
||||
if (response.status === 201) {
|
||||
setFormData({
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
email: "",
|
||||
phone_number: "",
|
||||
});
|
||||
setMessage("Consultation experts will contact you shortly.");
|
||||
setTimeout(() => {
|
||||
setMessage("");
|
||||
}, 5000);
|
||||
} else {
|
||||
setMessage("An error occurred. Please try again.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error submitting form:", error);
|
||||
setMessage("An error occurred. Please try again.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white p-8 flex items-center justify-center">
|
||||
<div className="max-w-6xl w-full bg-white shadow-lg rounded-xl overflow-hidden p-12">
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{/* Left: Form Section */}
|
||||
<div className="bg-[#EDE8E0] p-14 flex flex-col justify-center rounded-lg">
|
||||
<h2 className="text-4xl font-serif text-center text-[#AC8C6B]">
|
||||
Book a Free Consultation
|
||||
</h2>
|
||||
<p className="text-center text-gray-600 text-sm mt-2">
|
||||
Get expert guidance tailored to your needs.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-5 mt-6">
|
||||
<input
|
||||
type="text"
|
||||
name="first_name"
|
||||
placeholder="First Name"
|
||||
value={formData.first_name}
|
||||
onChange={handleInputChange}
|
||||
className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="last_name"
|
||||
placeholder="Last Name"
|
||||
value={formData.last_name}
|
||||
onChange={handleInputChange}
|
||||
className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="phone_number"
|
||||
placeholder="Phone Number"
|
||||
value={formData.phone_number}
|
||||
onChange={handleInputChange}
|
||||
className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
|
||||
required
|
||||
/>
|
||||
|
||||
{message && (
|
||||
<p className="text-green-700 bg-green-100 py-2 text-center rounded-md">
|
||||
{message}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-[#AC874C] text-white font-semibold py-4 rounded-md hover:bg-[#96724f] transition"
|
||||
>
|
||||
Request Consultation
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Right: Benefits & App Download */}
|
||||
<div className="p-14 flex flex-col justify-center">
|
||||
<h2 className="text-4xl font-serif text-[#AC8C6B] text-center">
|
||||
Why Choose Our Consultation?
|
||||
</h2>
|
||||
<p className="text-center text-gray-600 text-sm mt-2">
|
||||
Gain expert insights and personalized guidance.
|
||||
</p>
|
||||
|
||||
<ul className="mt-6 space-y-4 text-gray-700 text-lg">
|
||||
<li className="flex items-center">
|
||||
<ChevronRight className="text-[#AC8C6B] mr-2" />
|
||||
Expert guidance from experienced professionals
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<ChevronRight className="text-[#AC8C6B] mr-2" />
|
||||
Tailored advice for your specific needs
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<ChevronRight className="text-[#AC8C6B] mr-2" />
|
||||
Unlock clarity and direction in life
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<ChevronRight className="text-[#AC8C6B] mr-2" />
|
||||
Free initial text-based consultation
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PremiumBanner;
|
||||
115
components/premium-rudraksha/PremiumBannerLast.jsx
Normal file
115
components/premium-rudraksha/PremiumBannerLast.jsx
Normal file
@@ -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;
|
||||
21
components/premium-rudraksha/PremiumBannerOne.jsx
Normal file
21
components/premium-rudraksha/PremiumBannerOne.jsx
Normal file
@@ -0,0 +1,21 @@
|
||||
'use client'
|
||||
import { FaArrowRightLong } from "react-icons/fa6";
|
||||
import { FaWhatsapp } from "react-icons/fa";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const PremiumBannerOne = () => {
|
||||
const router = useRouter()
|
||||
return (
|
||||
<div className="h-[65vh] bg-[url('/consultation_banner_1.webp')] ">
|
||||
<div className="flex flex-col justify-start sm:w-3/4 p-4 sm:pl-52 sm:pt-28 ">
|
||||
<h1 className="sm:text-5xl text-3xl sm:text-left text-center mb-5 tracking-wider sm:w-3/4 font-serif">Personalized Rudraksha Consultation for Your Sacred Journey</h1>
|
||||
<h3 className="sm:text-xl sm:text-left text-center text-zinc-800 sm:w-3/4">Whether you seek clarity on selecting the right Rudraksha for your spiritual goals or a deeper understanding of the sacred beads, our consultations are crafted to provide you with the wisdom and direction you seek .</h3>
|
||||
<div className="mt-6 flex gap-6 ">
|
||||
<button onClick={()=> router.push('/products/premium-rudraksha-consultation-astrology')} className="bg-[#b68d40] sm:py-2 p-2 sm:px-5 font-bold text-white sm:text-xl justify-center sm:whitespace-nowrap flex items-center sm:gap-3">Book a consultation <FaArrowRightLong className="sm:my-3" size={26}/></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PremiumBannerOne;
|
||||
24
components/premium-rudraksha/PremiumBannerTwo.jsx
Normal file
24
components/premium-rudraksha/PremiumBannerTwo.jsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
|
||||
const PremiumBannerTwo = () => {
|
||||
return (
|
||||
<div className="min-h-[60vh] mx-auto">
|
||||
<h2 className="text-center sm:text-5xl mt-3 text-3xl font-serif sm:mt-16 tracking-wider mb-11">
|
||||
Three Generations of Expertise
|
||||
</h2>
|
||||
<iframe
|
||||
width="800"
|
||||
className="mx-auto sm:h-[350px] h-[160px] mb-5 w-[300px] sm:w-[600px]"
|
||||
height="450"
|
||||
src="https://www.youtube.com/embed/_drMO01Mjtc"
|
||||
title="Everything you need to know about Rudraksh | Keerthi History with Sukritya from Gupta Rudraksha"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerPolicy="strict-origin-when-cross-origin"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PremiumBannerTwo;
|
||||
26
components/premium-rudraksha/PremuimBannerThree.jsx
Normal file
26
components/premium-rudraksha/PremuimBannerThree.jsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { categoriesForPremiumThree } from '@/utils'
|
||||
import React from 'react'
|
||||
|
||||
const PremuimBannerThree = () => {
|
||||
|
||||
return (
|
||||
<div className='min-h-[75vh]'>
|
||||
<h2 className="text-center sm:text-5xl mt-3 font-[500] text-zinc-800 text-3xl font-serif sm:pt-20 pt-7 tracking-wide mb-11">
|
||||
Who Should Book A Consultation?
|
||||
</h2>
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{categoriesForPremiumThree.map((category, index) => (
|
||||
<div key={index} className=" p-4 flex flex-col items-center text-center ">
|
||||
<h2 className=' rounded-full h-20 w-20 bg-gradient-to-b from-[#E7DBC8] to-pink-50 flex items-center justify-center'>{category.logo}</h2>
|
||||
<h3 className=" sm:text-lg text-sm font-semibold">{category.title}</h3>
|
||||
<p className="mt-2 text-xs sm:text-[0.96rem] text-gray-600">{category.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PremuimBannerThree
|
||||
Reference in New Issue
Block a user