Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 66e9694188 | |||
| a4096e00b0 | |||
| f8acd44be4 | |||
| 28f807cbe1 | |||
| b80cb4c298 | |||
| 2c415e3181 | |||
| 1caea88b0b | |||
| 8e48b10eda | |||
| 13cae3b705 | |||
| 8998416bae | |||
| 3adc794cf0 | |||
| c1bbe3f745 | |||
| 78607dad9a | |||
| 4fc250923b |
379
src/app/booking/page.tsx
Normal file
379
src/app/booking/page.tsx
Normal file
@@ -0,0 +1,379 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Calendar, Clock, Users, Check, X, Phone, Mail } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
export default function BookingPage() {
|
||||
const [selectedDate, setSelectedDate] = useState<string>("");
|
||||
const [selectedTime, setSelectedTime] = useState<string>("");
|
||||
const [sessionType, setSessionType] = useState<string>("guided-aarti");
|
||||
const [participants, setParticipants] = useState<number>(1);
|
||||
const [bookingStep, setBookingStep] = useState<"calendar" | "time" | "details" | "confirmation">("calendar");
|
||||
const [bookingData, setBookingData] = useState<any>(null);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "AI Models", id: "models" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Booking", id: "booking" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "/#features" },
|
||||
{ label: "Pricing", href: "/#pricing" },
|
||||
{ label: "AI Models", href: "/#models" },
|
||||
{ label: "Booking", href: "/booking" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Guides", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const availableDates = generateNextDates(14);
|
||||
const timeSlots = [
|
||||
{ time: "06:00 AM", label: "Early Morning" },
|
||||
{ time: "07:00 AM", label: "Morning" },
|
||||
{ time: "12:00 PM", label: "Noon" },
|
||||
{ time: "03:00 PM", label: "Afternoon" },
|
||||
{ time: "06:00 PM", label: "Evening" },
|
||||
{ time: "07:00 PM", label: "Night" },
|
||||
];
|
||||
|
||||
const sessionTypes = [
|
||||
{ id: "guided-aarti", name: "Guided Aarti Session", price: "$15", duration: "30 mins" },
|
||||
{ id: "mantra-learning", name: "Mantra Learning", price: "$12", duration: "25 mins" },
|
||||
{ id: "ritual-planning", name: "Ritual Planning Session", price: "$20", duration: "45 mins" },
|
||||
{ id: "group-ceremony", name: "Group Ceremony", price: "$30", duration: "60 mins" },
|
||||
];
|
||||
|
||||
function generateNextDates(days: number) {
|
||||
const dates = [];
|
||||
for (let i = 1; i <= days; i++) {
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() + i);
|
||||
dates.push(date);
|
||||
}
|
||||
return dates;
|
||||
}
|
||||
|
||||
function handleDateSelect(date: Date) {
|
||||
setSelectedDate(date.toISOString().split("T")[0]);
|
||||
setBookingStep("time");
|
||||
}
|
||||
|
||||
function handleTimeSelect(time: string) {
|
||||
setSelectedTime(time);
|
||||
setBookingStep("details");
|
||||
}
|
||||
|
||||
function handleConfirmBooking() {
|
||||
setBookingData({
|
||||
date: selectedDate,
|
||||
time: selectedTime,
|
||||
sessionType,
|
||||
participants,
|
||||
});
|
||||
setBookingStep("confirmation");
|
||||
}
|
||||
|
||||
function handleNewBooking() {
|
||||
setSelectedDate("");
|
||||
setSelectedTime("");
|
||||
setSessionType("guided-aarti");
|
||||
setParticipants(1);
|
||||
setBookingStep("calendar");
|
||||
setBookingData(null);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="noise"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Aarti AI"
|
||||
bottomLeftText="Divine AI Guidance"
|
||||
bottomRightText="connect@aartiAI.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen pt-20 pb-16 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">Book Your Guided Aarti Session</h1>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
|
||||
Schedule personalized aarti guidance with our AI-powered spiritual experts
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Progress Steps */}
|
||||
<div className="flex justify-center gap-4 mb-12 flex-wrap">
|
||||
<div className={`flex items-center gap-2 px-4 py-2 rounded-lg ${
|
||||
["calendar", "time", "details", "confirmation"].indexOf(bookingStep) >= 0
|
||||
? "bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100"
|
||||
: "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400"
|
||||
}`}>
|
||||
<Calendar className="w-5 h-5" />
|
||||
<span>Select Date</span>
|
||||
</div>
|
||||
<div className={`flex items-center gap-2 px-4 py-2 rounded-lg ${
|
||||
["time", "details", "confirmation"].indexOf(bookingStep) >= 0
|
||||
? "bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100"
|
||||
: "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400"
|
||||
}`}>
|
||||
<Clock className="w-5 h-5" />
|
||||
<span>Select Time</span>
|
||||
</div>
|
||||
<div className={`flex items-center gap-2 px-4 py-2 rounded-lg ${
|
||||
["details", "confirmation"].indexOf(bookingStep) >= 0
|
||||
? "bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100"
|
||||
: "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400"
|
||||
}`}>
|
||||
<Users className="w-5 h-5" />
|
||||
<span>Session Details</span>
|
||||
</div>
|
||||
<div className={`flex items-center gap-2 px-4 py-2 rounded-lg ${
|
||||
bookingStep === "confirmation"
|
||||
? "bg-green-100 dark:bg-green-900 text-green-900 dark:text-green-100"
|
||||
: "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400"
|
||||
}`}>
|
||||
<Check className="w-5 h-5" />
|
||||
<span>Confirmation</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Calendar Step */}
|
||||
{bookingStep === "calendar" && (
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg p-8 border border-gray-200 dark:border-gray-800 mb-8">
|
||||
<h2 className="text-2xl font-bold mb-6">Select Your Preferred Date</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
|
||||
{availableDates.map((date, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => handleDateSelect(date)}
|
||||
className={`p-4 rounded-lg border-2 transition-all ${
|
||||
selectedDate === date.toISOString().split("T")[0]
|
||||
? "border-blue-500 bg-blue-50 dark:bg-blue-900"
|
||||
: "border-gray-300 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700"
|
||||
}`}
|
||||
>
|
||||
<div className="font-semibold">{date.getDate()}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{date.toLocaleDateString("en-US", { weekday: "short" })}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Time Slots Step */}
|
||||
{bookingStep === "time" && selectedDate && (
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg p-8 border border-gray-200 dark:border-gray-800 mb-8">
|
||||
<h2 className="text-2xl font-bold mb-6">Select Your Preferred Time</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
||||
Selected Date: <span className="font-semibold">{new Date(selectedDate).toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" })}</span>
|
||||
</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{timeSlots.map((slot, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => handleTimeSelect(slot.time)}
|
||||
className={`p-4 rounded-lg border-2 transition-all ${
|
||||
selectedTime === slot.time
|
||||
? "border-blue-500 bg-blue-50 dark:bg-blue-900"
|
||||
: "border-gray-300 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700"
|
||||
}`}
|
||||
>
|
||||
<div className="font-semibold text-lg">{slot.time}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">{slot.label}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Session Details Step */}
|
||||
{bookingStep === "details" && selectedDate && selectedTime && (
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg p-8 border border-gray-200 dark:border-gray-800 mb-8">
|
||||
<h2 className="text-2xl font-bold mb-6">Session Details</h2>
|
||||
|
||||
{/* Session Type Selection */}
|
||||
<div className="mb-8">
|
||||
<label className="block text-lg font-semibold mb-4">Session Type</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{sessionTypes.map((type) => (
|
||||
<button
|
||||
key={type.id}
|
||||
onClick={() => setSessionType(type.id)}
|
||||
className={`p-4 rounded-lg border-2 text-left transition-all ${
|
||||
sessionType === type.id
|
||||
? "border-blue-500 bg-blue-50 dark:bg-blue-900"
|
||||
: "border-gray-300 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700"
|
||||
}`}
|
||||
>
|
||||
<div className="font-semibold">{type.name}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
{type.duration} • {type.price}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Participants */}
|
||||
<div className="mb-8">
|
||||
<label className="block text-lg font-semibold mb-4">Number of Participants</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setParticipants(Math.max(1, participants - 1))}
|
||||
className="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<span className="text-2xl font-bold w-12 text-center">{participants}</span>
|
||||
<button
|
||||
onClick={() => setParticipants(Math.min(10, participants + 1))}
|
||||
className="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Confirm Button */}
|
||||
<button
|
||||
onClick={handleConfirmBooking}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition-all"
|
||||
>
|
||||
Confirm Booking
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Confirmation Step */}
|
||||
{bookingStep === "confirmation" && bookingData && (
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg p-8 border border-gray-200 dark:border-gray-800 mb-8">
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full mb-4">
|
||||
<Check className="w-8 h-8 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold mb-2">Booking Confirmed!</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">Your guided aarti session has been scheduled</p>
|
||||
</div>
|
||||
|
||||
{/* Booking Details */}
|
||||
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Date & Time</p>
|
||||
<p className="text-lg font-semibold">
|
||||
{new Date(bookingData.date).toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" })} at {bookingData.time}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Session Type</p>
|
||||
<p className="text-lg font-semibold">
|
||||
{sessionTypes.find(t => t.id === bookingData.sessionType)?.name}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Participants</p>
|
||||
<p className="text-lg font-semibold">{bookingData.participants} {bookingData.participants === 1 ? "person" : "people"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Price</p>
|
||||
<p className="text-lg font-semibold">
|
||||
{sessionTypes.find(t => t.id === bookingData.sessionType)?.price}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="bg-blue-50 dark:bg-blue-900 rounded-lg p-6 mb-8">
|
||||
<h3 className="font-semibold mb-4">Confirmation Details</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Mail className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
<span>Confirmation email sent to your registered email</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Phone className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
<span>You'll receive a reminder 24 hours before the session</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={handleNewBooking}
|
||||
className="flex-1 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-semibold py-3 rounded-lg transition-all"
|
||||
>
|
||||
Book Another Session
|
||||
</button>
|
||||
<Link
|
||||
href="/#pricing"
|
||||
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition-all text-center"
|
||||
>
|
||||
View More Services
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2025 Aarti AI. Bridging Spirituality & Technology."
|
||||
bottomRightText="Made with devotion for spiritual seekers"
|
||||
ariaLabel="Site footer"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
238
src/app/guided-aarti-sessions/page.tsx
Normal file
238
src/app/guided-aarti-sessions/page.tsx
Normal file
@@ -0,0 +1,238 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { MessageCircle, Zap, Heart, Sparkles, Users, Calendar } from "lucide-react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
||||
import TextAbout from "@/components/sections/about/TextAbout";
|
||||
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
|
||||
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
export default function GuidedAartiSessionsPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Sessions", id: "sessions" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Schedule", id: "schedule" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Guided Sessions", href: "/guided-aarti-sessions" },
|
||||
{ label: "Live Chat", href: "#" },
|
||||
{ label: "Session Booking", href: "#" },
|
||||
{ label: "Resources", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Our Team", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Mantra Guide", href: "#" },
|
||||
{ label: "Ritual Instructions", href: "#" },
|
||||
{ label: "Spiritual Blog", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="noise"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Aarti AI - Sessions"
|
||||
bottomLeftText="Real-Time Spiritual Guidance"
|
||||
bottomRightText="sessions@aartiAI.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Live Guided Aarti Sessions"
|
||||
description="Connect with spiritual guides in real-time through our interactive live chat interface. Receive personalized aarti guidance from expert practitioners powered by advanced AI."
|
||||
tag="Real-Time Sessions"
|
||||
tagIcon={MessageCircle}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book a Session", href: "#schedule"},
|
||||
{
|
||||
text: "View Features", href: "#features"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "carousel-1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-serene-hindu-aarti-ceremony-with-tradi-1774187435323-3aa97833.png?_wi=1", imageAlt: "Live aarti session guidance"},
|
||||
{
|
||||
id: "carousel-2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-close-up-of-a-devotee-performing-aarti-1774187437516-86b9cbcb.png?_wi=3", imageAlt: "Interactive spiritual guidance interface"},
|
||||
{
|
||||
id: "carousel-3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/three-distinct-panels-showing-chatgpt-go-1774187436105-3fd2a65f.png?_wi=1", imageAlt: "Real-time chat with spiritual guides"},
|
||||
{
|
||||
id: "carousel-4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-modern-digital-interface-dashboard-for-1774187439845-09258fc1.png?_wi=1", imageAlt: "Live session dashboard"},
|
||||
{
|
||||
id: "carousel-5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-group-of-diverse-devotees-from-differe-1774187435267-c6ede5f9.png?_wi=3", imageAlt: "Community guided sessions"},
|
||||
{
|
||||
id: "carousel-6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-meditating-figure-with-chakras-glowing-1774187436989-65c2a695.png?_wi=4", imageAlt: "Spiritual connection through technology"},
|
||||
]}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={5000}
|
||||
ariaLabel="Guided Aarti Sessions hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
tag="Interactive Learning"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
title="Experience Spirituality Through Real-Time Connection"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Sessions", href: "#features"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="About guided sessions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySeven
|
||||
title="Live Chat & Session Features"
|
||||
description="Our real-time interaction platform combines advanced AI with human spiritual expertise for transformative aarti experiences."
|
||||
tag="Interactive Technology"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Session", href: "#schedule"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "live-chat", title: "Real-Time Live Chat", descriptions: [
|
||||
"Connect instantly with spiritual guides and AI advisors", "Receive immediate responses to your spiritual questions"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-step-by-step-visual-guide-showing-the--1774187437353-624518cc.png?_wi=3", imageAlt: "Live chat interface"},
|
||||
{
|
||||
id: "guided-rituals", title: "Guided Ritual Sessions", descriptions: [
|
||||
"Follow step-by-step aarti rituals with real-time guidance", "Get personalized adjustments based on your experience level"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-beautiful-sanskrit-mantra-displayed-in-1774187435176-e8e77bb1.png?_wi=2", imageAlt: "Guided ritual instructions"},
|
||||
{
|
||||
id: "scheduling", title: "Smart Session Scheduling", descriptions: [
|
||||
"Book sessions at times that work best for you", "Automatic reminders and calendar integration"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-hindu-festival-calendar-interface-show-1774187437483-7140de4e.png?_wi=2", imageAlt: "Session scheduling"},
|
||||
{
|
||||
id: "community", title: "Community Participation", descriptions: [
|
||||
"Join group sessions with other devotees", "Share experiences and learn from spiritual community"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-vibrant-community-forum-or-social-netw-1774187435390-4993488f.png?_wi=1", imageAlt: "Community sessions"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
title="Session Participant Stories"
|
||||
description="Discover how live guided aarti sessions have transformed the spiritual practices of our community members."
|
||||
tag="Live Session Feedback"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[]}
|
||||
buttonAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
kpiItems={[
|
||||
{
|
||||
value: "2K+", label: "Active Sessions Monthly"},
|
||||
{
|
||||
value: "500+", label: "Certified Guides"},
|
||||
{
|
||||
value: "4.95/5", label: "Session Rating"},
|
||||
]}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Priya Sharma", role: "Regular Participant", company: "Delhi", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-professional-portrait-of-a-young-india-1774187434189-d9642f13.png?_wi=1", imageAlt: "Priya Sharma"},
|
||||
{
|
||||
id: "2", name: "Rajesh Gupta", role: "Session Guide", company: "Mumbai", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-professional-portrait-of-an-indian-man-1774187434582-3111e1b6.png?_wi=1", imageAlt: "Rajesh Gupta"},
|
||||
{
|
||||
id: "3", name: "Ananya Patel", role: "Community Leader", company: "Ahmedabad", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-portrait-of-an-indian-woman-in-traditi-1774187434073-5bd9d9df.png?_wi=1", imageAlt: "Ananya Patel"},
|
||||
{
|
||||
id: "4", name: "Vikram Singh", role: "Advanced Practitioner", company: "Bangalore", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-portrait-of-an-indian-man-with-traditi-1774187434319-765e8f5a.png?_wi=1", imageAlt: "Vikram Singh"},
|
||||
{
|
||||
id: "5", name: "Meera Iyer", role: "Beginner", company: "Chennai", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-portrait-of-an-indian-woman-with-a-war-1774187434965-1d87e6f4.png?_wi=1", imageAlt: "Meera Iyer"},
|
||||
{
|
||||
id: "6", name: "Arjun Desai", role: "Master Guide", company: "Pune", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-portrait-of-an-older-indian-man-with-d-1774187435111-483549b6.png?_wi=1", imageAlt: "Arjun Desai"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="schedule" data-section="schedule">
|
||||
<TextAbout
|
||||
tag="Book Your Session"
|
||||
tagIcon={Calendar}
|
||||
tagAnimation="slide-up"
|
||||
title="Schedule Your Next Guided Aarti Session"
|
||||
buttons={[
|
||||
{
|
||||
text: "Browse Available Sessions", href: "#"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
ariaLabel="Session scheduling"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2025 Aarti AI Sessions. Connecting Spirituality in Real-Time."
|
||||
bottomRightText="Made with devotion for spiritual seekers worldwide"
|
||||
ariaLabel="Site footer"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
241
src/app/login/page.tsx
Normal file
241
src/app/login/page.tsx
Normal file
@@ -0,0 +1,241 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
export default function LoginPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
email: "", password: ""});
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [successMessage, setSuccessMessage] = useState("");
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "AI Models", id: "models" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "/#features" },
|
||||
{ label: "Pricing", href: "/#pricing" },
|
||||
{ label: "AI Models", href: "/#models" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Guides", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.email.trim()) {
|
||||
newErrors.email = "Email is required";
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
||||
newErrors.email = "Please enter a valid email";
|
||||
}
|
||||
|
||||
if (!formData.password) {
|
||||
newErrors.password = "Password is required";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
if (errors[name]) {
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
[name]: ""}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSuccessMessage("");
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const storedUser = localStorage.getItem(`user_${formData.email}`);
|
||||
|
||||
if (!storedUser) {
|
||||
setErrors({ form: "User not found. Please create an account." });
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const userData = JSON.parse(storedUser);
|
||||
|
||||
if (userData.password !== formData.password) {
|
||||
setErrors({ form: "Invalid email or password." });
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
localStorage.setItem("currentUser", JSON.stringify(userData));
|
||||
localStorage.setItem("isAuthenticated", "true");
|
||||
|
||||
setSuccessMessage("Login successful! Redirecting...");
|
||||
setFormData({ email: "", password: "" });
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = "/profile";
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
setErrors({ form: "An error occurred. Please try again." });
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="noise"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Aarti AI"
|
||||
bottomLeftText="Divine AI Guidance"
|
||||
bottomRightText="connect@aartiAI.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-card rounded-lg shadow-md p-8 border border-background-accent">
|
||||
<h1 className="text-3xl font-bold text-center mb-2">Sign In</h1>
|
||||
<p className="text-center text-foreground/70 mb-8">
|
||||
Welcome back to your spiritual journey
|
||||
</p>
|
||||
|
||||
{successMessage && (
|
||||
<div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{errors.form && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
|
||||
{errors.form}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
placeholder="your@email.com"
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleInputChange}
|
||||
placeholder="••••••••"
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
{errors.password && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.password}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-2 px-4 rounded-lg transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSubmitting ? "Signing In..." : "Sign In"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-6 text-center text-sm text-foreground/70">
|
||||
Don't have an account?{" "}
|
||||
<Link href="/register" className="text-primary-cta hover:underline font-medium">
|
||||
Create One
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2025 Aarti AI. Bridging Spirituality & Technology."
|
||||
bottomRightText="Made with devotion for spiritual seekers"
|
||||
ariaLabel="Site footer"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
285
src/app/page.tsx
285
src/app/page.tsx
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Sparkles, Heart, Zap, Flame, Star, DollarSign, Crown } from "lucide-react";
|
||||
import { Sparkles, Heart, Zap, Flame, Star, DollarSign, Crown, Mic, Calendar, Users, Brain } from "lucide-react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
||||
@@ -24,8 +24,7 @@ export default function HomePage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "AI Models", href: "#models" },
|
||||
@@ -33,17 +32,15 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Guides", href: "#" },
|
||||
@@ -51,8 +48,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
@@ -92,49 +88,26 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Your Journey",
|
||||
href: "#pricing",
|
||||
},
|
||||
text: "Start Your Journey", href: "#pricing"},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#features",
|
||||
},
|
||||
text: "Learn More", href: "#features"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "carousel-1",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-serene-hindu-aarti-ceremony-with-tradi-1774187435323-3aa97833.png?_wi=1",
|
||||
imageAlt: "Hindu aarti ceremony with AI interface",
|
||||
},
|
||||
id: "carousel-1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-serene-hindu-aarti-ceremony-with-tradi-1774187435323-3aa97833.png?_wi=1", imageAlt: "Hindu aarti ceremony with AI interface"},
|
||||
{
|
||||
id: "carousel-2",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-close-up-of-a-devotee-performing-aarti-1774187437516-86b9cbcb.png",
|
||||
imageAlt: "Spiritual guidance AI technology",
|
||||
},
|
||||
id: "carousel-2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-close-up-of-a-devotee-performing-aarti-1774187437516-86b9cbcb.png?_wi=1", imageAlt: "Spiritual guidance AI technology"},
|
||||
{
|
||||
id: "carousel-3",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/three-distinct-panels-showing-chatgpt-go-1774187436105-3fd2a65f.png?_wi=1",
|
||||
imageAlt: "AI models for aarti assistance",
|
||||
},
|
||||
id: "carousel-3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/three-distinct-panels-showing-chatgpt-go-1774187436105-3fd2a65f.png?_wi=1", imageAlt: "AI models for aarti assistance"},
|
||||
{
|
||||
id: "carousel-4",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-modern-digital-interface-dashboard-for-1774187439845-09258fc1.png?_wi=1",
|
||||
imageAlt: "Modern spiritual platform interface",
|
||||
},
|
||||
id: "carousel-4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-modern-digital-interface-dashboard-for-1774187439845-09258fc1.png?_wi=1", imageAlt: "Modern spiritual platform interface"},
|
||||
{
|
||||
id: "carousel-5",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-group-of-diverse-devotees-from-differe-1774187435267-c6ede5f9.png",
|
||||
imageAlt: "Aarti ritual with AI guidance",
|
||||
},
|
||||
id: "carousel-5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-group-of-diverse-devotees-from-differe-1774187435267-c6ede5f9.png?_wi=1", imageAlt: "Aarti ritual with AI guidance"},
|
||||
{
|
||||
id: "carousel-6",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-meditating-figure-with-chakras-glowing-1774187436989-65c2a695.png",
|
||||
imageAlt: "Divine AI spiritual connection",
|
||||
},
|
||||
id: "carousel-6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-meditating-figure-with-chakras-glowing-1774187436989-65c2a695.png?_wi=1", imageAlt: "Divine AI spiritual connection"},
|
||||
]}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={5000}
|
||||
@@ -150,9 +123,7 @@ export default function HomePage() {
|
||||
title="Bridging Ancient Wisdom with Modern Technology"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Features",
|
||||
href: "#features",
|
||||
},
|
||||
text: "Explore Features", href: "#features"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
@@ -165,13 +136,11 @@ export default function HomePage() {
|
||||
title="Powered by Leading AI Models"
|
||||
description="Choose from our diverse range of AI models to receive personalized aarti guidance. Each model brings unique strengths to your spiritual journey."
|
||||
tag="Advanced AI Integration"
|
||||
tagIcon={Zap}
|
||||
tagIcon={Brain}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Try Now",
|
||||
href: "#pricing",
|
||||
},
|
||||
text: "Try Now", href: "#pricing"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
@@ -180,26 +149,11 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "chatgpt",
|
||||
name: "ChatGPT 4o",
|
||||
price: "Included",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/chatgpt-logo-and-interface-elegantly-dis-1774187435422-9261c300.png",
|
||||
imageAlt: "ChatGPT AI model",
|
||||
},
|
||||
id: "chatgpt", name: "ChatGPT 4o", price: "Included", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/chatgpt-logo-and-interface-elegantly-dis-1774187435422-9261c300.png", imageAlt: "ChatGPT AI model"},
|
||||
{
|
||||
id: "gemini",
|
||||
name: "Google Gemini Pro",
|
||||
price: "Premium",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/google-gemini-logo-displayed-with-multic-1774187437545-086f7519.png",
|
||||
imageAlt: "Google Gemini AI model",
|
||||
},
|
||||
id: "gemini", name: "Google Gemini Pro", price: "Premium", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/google-gemini-logo-displayed-with-multic-1774187437545-086f7519.png", imageAlt: "Google Gemini AI model"},
|
||||
{
|
||||
id: "deepseek",
|
||||
name: "DeepSeek R1",
|
||||
price: "Premium",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/deepseek-logo-with-deep-blue-and-elegant-1774187436268-3ec5b8fa.png",
|
||||
imageAlt: "DeepSeek AI model",
|
||||
},
|
||||
id: "deepseek", name: "DeepSeek R1", price: "Premium", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/deepseek-logo-with-deep-blue-and-elegant-1774187436268-3ec5b8fa.png", imageAlt: "DeepSeek AI model"},
|
||||
]}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
@@ -214,9 +168,7 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#pricing",
|
||||
},
|
||||
text: "Get Started", href: "#pricing"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
@@ -225,45 +177,21 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "ritual-guide",
|
||||
title: "Personalized Ritual Guidance",
|
||||
descriptions: [
|
||||
"Receive step-by-step instructions for performing aarti ceremonies",
|
||||
"AI adapts guidance based on your preferences and available resources",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-step-by-step-visual-guide-showing-the--1774187437353-624518cc.png",
|
||||
imageAlt: "Step-by-step ritual guidance",
|
||||
},
|
||||
id: "ritual-guide", title: "Personalized Ritual Guidance", descriptions: [
|
||||
"Receive step-by-step instructions for performing aarti ceremonies", "AI adapts guidance based on your preferences and available resources"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-step-by-step-visual-guide-showing-the--1774187437353-624518cc.png?_wi=1", imageAlt: "Step-by-step ritual guidance"},
|
||||
{
|
||||
id: "mantra-learning",
|
||||
title: "Mantra Learning Module",
|
||||
descriptions: [
|
||||
"Learn sacred mantras with proper pronunciation",
|
||||
"Audio guidance and practice sessions from multiple AI models",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-beautiful-sanskrit-mantra-displayed-in-1774187435176-e8e77bb1.png",
|
||||
imageAlt: "Mantra learning interface",
|
||||
},
|
||||
id: "mantra-learning", title: "Mantra Learning Module", descriptions: [
|
||||
"Learn sacred mantras with proper pronunciation", "Audio guidance and practice sessions from multiple AI models"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-beautiful-sanskrit-mantra-displayed-in-1774187435176-e8e77bb1.png?_wi=1", imageAlt: "Mantra learning interface"},
|
||||
{
|
||||
id: "festival-calendar",
|
||||
title: "Festival & Celebration Calendar",
|
||||
descriptions: [
|
||||
"Stay updated with important Hindu festivals and auspicious dates",
|
||||
"Personalized reminders and ritual suggestions",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-hindu-festival-calendar-interface-show-1774187437483-7140de4e.png",
|
||||
imageAlt: "Festival calendar interface",
|
||||
},
|
||||
id: "festival-calendar", title: "Festival & Celebration Calendar", descriptions: [
|
||||
"Stay updated with important Hindu festivals and auspicious dates", "Personalized reminders and ritual suggestions"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-hindu-festival-calendar-interface-show-1774187437483-7140de4e.png?_wi=1", imageAlt: "Festival calendar interface"},
|
||||
{
|
||||
id: "community-wisdom",
|
||||
title: "Community Wisdom Sharing",
|
||||
descriptions: [
|
||||
"Connect with other devotees and share spiritual experiences",
|
||||
"Access a library of shared aarti practices and traditions",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-vibrant-community-forum-or-social-netw-1774187435390-4993488f.png?_wi=1",
|
||||
imageAlt: "Community forum interface",
|
||||
},
|
||||
id: "community-wisdom", title: "Community Wisdom Sharing", descriptions: [
|
||||
"Connect with other devotees and share spiritual experiences", "Access a library of shared aarti practices and traditions"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-vibrant-community-forum-or-social-netw-1774187435390-4993488f.png?_wi=1", imageAlt: "Community forum interface"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -282,73 +210,31 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
kpiItems={[
|
||||
{
|
||||
value: "50K+",
|
||||
label: "Active Users",
|
||||
},
|
||||
value: "50K+", label: "Active Users"},
|
||||
{
|
||||
value: "100K+",
|
||||
label: "Aarti Sessions",
|
||||
},
|
||||
value: "100K+", label: "Aarti Sessions"},
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "Average Rating",
|
||||
},
|
||||
value: "4.9/5", label: "Average Rating"},
|
||||
]}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Priya Sharma",
|
||||
role: "Devotee",
|
||||
company: "Delhi",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-professional-portrait-of-a-young-india-1774187434189-d9642f13.png?_wi=1",
|
||||
imageAlt: "Priya Sharma testimonial",
|
||||
},
|
||||
id: "1", name: "Priya Sharma", role: "Devotee", company: "Delhi", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-professional-portrait-of-a-young-india-1774187434189-d9642f13.png?_wi=1", imageAlt: "Priya Sharma testimonial"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Rajesh Gupta",
|
||||
role: "Spiritual Seeker",
|
||||
company: "Mumbai",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-professional-portrait-of-an-indian-man-1774187434582-3111e1b6.png?_wi=1",
|
||||
imageAlt: "Rajesh Gupta testimonial",
|
||||
},
|
||||
id: "2", name: "Rajesh Gupta", role: "Spiritual Seeker", company: "Mumbai", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-professional-portrait-of-an-indian-man-1774187434582-3111e1b6.png?_wi=1", imageAlt: "Rajesh Gupta testimonial"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Ananya Patel",
|
||||
role: "Temple Priest",
|
||||
company: "Ahmedabad",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-portrait-of-an-indian-woman-in-traditi-1774187434073-5bd9d9df.png?_wi=1",
|
||||
imageAlt: "Ananya Patel testimonial",
|
||||
},
|
||||
id: "3", name: "Ananya Patel", role: "Temple Priest", company: "Ahmedabad", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-portrait-of-an-indian-woman-in-traditi-1774187434073-5bd9d9df.png?_wi=1", imageAlt: "Ananya Patel testimonial"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Vikram Singh",
|
||||
role: "Spiritual Guide",
|
||||
company: "Bangalore",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-portrait-of-an-indian-man-with-traditi-1774187434319-765e8f5a.png?_wi=1",
|
||||
imageAlt: "Vikram Singh testimonial",
|
||||
},
|
||||
id: "4", name: "Vikram Singh", role: "Spiritual Guide", company: "Bangalore", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-portrait-of-an-indian-man-with-traditi-1774187434319-765e8f5a.png?_wi=1", imageAlt: "Vikram Singh testimonial"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Meera Iyer",
|
||||
role: "Aarti Enthusiast",
|
||||
company: "Chennai",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-portrait-of-an-indian-woman-with-a-war-1774187434965-1d87e6f4.png?_wi=1",
|
||||
imageAlt: "Meera Iyer testimonial",
|
||||
},
|
||||
id: "5", name: "Meera Iyer", role: "Aarti Enthusiast", company: "Chennai", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-portrait-of-an-indian-woman-with-a-war-1774187434965-1d87e6f4.png?_wi=1", imageAlt: "Meera Iyer testimonial"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Arjun Desai",
|
||||
role: "Cultural Preservationist",
|
||||
company: "Pune",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-portrait-of-an-older-indian-man-with-d-1774187435111-483549b6.png?_wi=1",
|
||||
imageAlt: "Arjun Desai testimonial",
|
||||
},
|
||||
id: "6", name: "Arjun Desai", role: "Cultural Preservationist", company: "Pune", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-portrait-of-an-older-indian-man-with-d-1774187435111-483549b6.png?_wi=1", imageAlt: "Arjun Desai testimonial"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -367,66 +253,25 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "free",
|
||||
tag: "Start",
|
||||
tagIcon: Sparkles,
|
||||
price: "Free",
|
||||
period: "Forever",
|
||||
description: "Perfect for beginners exploring spiritual guidance",
|
||||
button: {
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
featuresTitle: "Included Features",
|
||||
features: [
|
||||
"Basic aarti guidance",
|
||||
"ChatGPT integration",
|
||||
"Festival calendar",
|
||||
"Community access",
|
||||
"5 rituals per month",
|
||||
],
|
||||
id: "free", tag: "Start", tagIcon: Sparkles,
|
||||
price: "Free", period: "Forever", description: "Perfect for beginners exploring spiritual guidance", button: {
|
||||
text: "Get Started", href: "#"},
|
||||
featuresTitle: "Included Features", features: [
|
||||
"Basic aarti guidance", "ChatGPT integration", "Festival calendar", "Community access", "5 rituals per month"],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
tag: "Popular",
|
||||
tagIcon: Crown,
|
||||
price: "$9.99",
|
||||
period: "Month",
|
||||
description: "Enhanced spiritual experience with all AI models",
|
||||
button: {
|
||||
text: "Subscribe Now",
|
||||
href: "#",
|
||||
},
|
||||
featuresTitle: "Pro Features",
|
||||
features: [
|
||||
"All AI models access",
|
||||
"Unlimited aarti guidance",
|
||||
"Advanced mantra learning",
|
||||
"Priority support",
|
||||
"Personalized recommendations",
|
||||
"No ad interruptions",
|
||||
],
|
||||
id: "pro", tag: "Popular", tagIcon: Crown,
|
||||
price: "$9.99", period: "Month", description: "Enhanced spiritual experience with all AI models", button: {
|
||||
text: "Subscribe Now", href: "#"},
|
||||
featuresTitle: "Pro Features", features: [
|
||||
"All AI models access", "Unlimited aarti guidance", "Advanced mantra learning", "Priority support", "Personalized recommendations", "No ad interruptions"],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
tag: "Ultimate",
|
||||
tagIcon: Flame,
|
||||
price: "$19.99",
|
||||
period: "Month",
|
||||
description: "Complete spiritual transformation with exclusive content",
|
||||
button: {
|
||||
text: "Upgrade Today",
|
||||
href: "#",
|
||||
},
|
||||
featuresTitle: "Premium Benefits",
|
||||
features: [
|
||||
"All Pro features included",
|
||||
"1-on-1 spiritual coaching",
|
||||
"Exclusive rituals library",
|
||||
"Custom AI model fine-tuning",
|
||||
"Advanced analytics dashboard",
|
||||
"Lifetime updates & new features",
|
||||
],
|
||||
id: "premium", tag: "Ultimate", tagIcon: Flame,
|
||||
price: "$19.99", period: "Month", description: "Complete spiritual transformation with exclusive content", button: {
|
||||
text: "Upgrade Today", href: "#"},
|
||||
featuresTitle: "Premium Benefits", features: [
|
||||
"All Pro features included", "1-on-1 spiritual coaching", "Exclusive rituals library", "Custom AI model fine-tuning", "Advanced analytics dashboard", "Lifetime updates & new features"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@@ -442,4 +287,4 @@ export default function HomePage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
409
src/app/profile/page.tsx
Normal file
409
src/app/profile/page.tsx
Normal file
@@ -0,0 +1,409 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
interface UserData {
|
||||
name: string;
|
||||
email: string;
|
||||
createdAt: string;
|
||||
preferences?: {
|
||||
theme?: string;
|
||||
notifications?: boolean;
|
||||
language?: string;
|
||||
modelPreference?: string;
|
||||
ritualsPerMonth?: number;
|
||||
};
|
||||
}
|
||||
|
||||
export default function ProfilePage() {
|
||||
const [user, setUser] = useState<UserData | null>(null);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editData, setEditData] = useState<Partial<UserData>>({});
|
||||
const [successMessage, setSuccessMessage] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "AI Models", id: "models" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "/#features" },
|
||||
{ label: "Pricing", href: "/#pricing" },
|
||||
{ label: "AI Models", href: "/#models" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Guides", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const checkAuth = () => {
|
||||
const isAuthenticated = localStorage.getItem("isAuthenticated");
|
||||
const currentUser = localStorage.getItem("currentUser");
|
||||
|
||||
if (!isAuthenticated || !currentUser) {
|
||||
window.location.href = "/login";
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const userData = JSON.parse(currentUser);
|
||||
setUser(userData);
|
||||
setEditData(userData);
|
||||
} catch (error) {
|
||||
console.error("Error parsing user data", error);
|
||||
window.location.href = "/login";
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkAuth();
|
||||
}, []);
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem("isAuthenticated");
|
||||
localStorage.removeItem("currentUser");
|
||||
window.location.href = "/login";
|
||||
};
|
||||
|
||||
const handleEditChange = (field: string, value: string | boolean | number) => {
|
||||
if (field.startsWith("preferences.")) {
|
||||
const prefField = field.replace("preferences.", "");
|
||||
setEditData((prev) => ({
|
||||
...prev,
|
||||
preferences: {
|
||||
...prev.preferences,
|
||||
[prefField]: value,
|
||||
},
|
||||
}));
|
||||
} else {
|
||||
setEditData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSavePreferences = () => {
|
||||
if (user?.email) {
|
||||
const updatedUser = { ...editData } as UserData;
|
||||
localStorage.setItem(`user_${user.email}`, JSON.stringify(updatedUser));
|
||||
localStorage.setItem("currentUser", JSON.stringify(updatedUser));
|
||||
setUser(updatedUser);
|
||||
setIsEditing(false);
|
||||
setSuccessMessage("Preferences saved successfully!");
|
||||
setTimeout(() => setSuccessMessage(""), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="noise"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<p className="text-lg text-foreground">Loading...</p>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="noise"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Aarti AI"
|
||||
bottomLeftText="Divine AI Guidance"
|
||||
bottomRightText="connect@aartiAI.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-card rounded-lg shadow-md border border-background-accent p-8">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-3xl font-bold">User Profile</h1>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-200"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{successMessage && (
|
||||
<div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{/* Account Information */}
|
||||
<div className="border-b md:border-b-0 md:border-r border-background-accent pb-8 md:pb-0 md:pr-8">
|
||||
<h2 className="text-xl font-semibold mb-4">Account Information</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Full Name</p>
|
||||
<p className="text-lg font-medium">{user.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Email</p>
|
||||
<p className="text-lg font-medium">{user.email}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Member Since</p>
|
||||
<p className="text-lg font-medium">
|
||||
{new Date(user.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preferences Section */}
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-semibold">Preferences</h2>
|
||||
{!isEditing && (
|
||||
<button
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="text-primary-cta hover:underline font-medium text-sm"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isEditing ? (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Theme</p>
|
||||
<p className="text-lg font-medium capitalize">
|
||||
{user.preferences?.theme || "Light"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Notifications</p>
|
||||
<p className="text-lg font-medium">
|
||||
{user.preferences?.notifications ? "Enabled" : "Disabled"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Language</p>
|
||||
<p className="text-lg font-medium capitalize">
|
||||
{user.preferences?.language || "English"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Preferred AI Model</p>
|
||||
<p className="text-lg font-medium">
|
||||
{user.preferences?.modelPreference || "ChatGPT"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Theme
|
||||
</label>
|
||||
<select
|
||||
value={editData.preferences?.theme || "light"}
|
||||
onChange={(e) => handleEditChange("preferences.theme", e.target.value)}
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Notifications
|
||||
</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editData.preferences?.notifications ?? true}
|
||||
onChange={(e) =>
|
||||
handleEditChange("preferences.notifications", e.target.checked)
|
||||
}
|
||||
className="h-4 w-4 text-primary-cta rounded focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
<span className="ml-2 text-sm">Enable notifications</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Language
|
||||
</label>
|
||||
<select
|
||||
value={editData.preferences?.language || "en"}
|
||||
onChange={(e) =>
|
||||
handleEditChange("preferences.language", e.target.value)
|
||||
}
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="hi">Hindi</option>
|
||||
<option value="es">Spanish</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Preferred AI Model
|
||||
</label>
|
||||
<select
|
||||
value={editData.preferences?.modelPreference || "ChatGPT"}
|
||||
onChange={(e) =>
|
||||
handleEditChange("preferences.modelPreference", e.target.value)
|
||||
}
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
>
|
||||
<option value="ChatGPT">ChatGPT 4o</option>
|
||||
<option value="Gemini">Google Gemini Pro</option>
|
||||
<option value="DeepSeek">DeepSeek R1</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Rituals Per Month
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="100"
|
||||
value={editData.preferences?.ritualsPerMonth || 5}
|
||||
onChange={(e) =>
|
||||
handleEditChange(
|
||||
"preferences.ritualsPerMonth", parseInt(e.target.value)
|
||||
)
|
||||
}
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
onClick={handleSavePreferences}
|
||||
className="flex-1 bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-2 px-4 rounded-lg transition duration-200"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsEditing(false);
|
||||
setEditData(user);
|
||||
}}
|
||||
className="flex-1 bg-secondary-cta hover:bg-secondary-cta/90 text-white font-semibold py-2 px-4 rounded-lg transition duration-200"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="mt-12 pt-8 border-t border-background-accent">
|
||||
<h2 className="text-xl font-semibold mb-4">Quick Actions</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Link
|
||||
href="/#pricing"
|
||||
className="p-4 bg-background-accent rounded-lg hover:bg-background-accent/80 transition text-center"
|
||||
>
|
||||
<p className="font-semibold text-foreground">View Plans</p>
|
||||
<p className="text-sm text-foreground/60">Upgrade your subscription</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/#features"
|
||||
className="p-4 bg-background-accent rounded-lg hover:bg-background-accent/80 transition text-center"
|
||||
>
|
||||
<p className="font-semibold text-foreground">Explore Features</p>
|
||||
<p className="text-sm text-foreground/60">Learn about our tools</p>
|
||||
</Link>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="p-4 bg-red-100 hover:bg-red-200 transition text-center rounded-lg"
|
||||
>
|
||||
<p className="font-semibold text-red-700">Sign Out</p>
|
||||
<p className="text-sm text-red-600">Leave your account</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2025 Aarti AI. Bridging Spirituality & Technology."
|
||||
bottomRightText="Made with devotion for spiritual seekers"
|
||||
ariaLabel="Site footer"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
426
src/app/quiz/page.tsx
Normal file
426
src/app/quiz/page.tsx
Normal file
@@ -0,0 +1,426 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Sparkles, Heart, Zap, Flame, Star, DollarSign, Crown, Brain, Compass, Lightbulb } from "lucide-react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
||||
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
type QuizQuestion = {
|
||||
id: string;
|
||||
question: string;
|
||||
options: QuizOption[];
|
||||
};
|
||||
|
||||
type QuizOption = {
|
||||
id: string;
|
||||
text: string;
|
||||
modelScores: {
|
||||
chatgpt: number;
|
||||
gemini: number;
|
||||
deepseek: number;
|
||||
};
|
||||
};
|
||||
|
||||
type ModelRecommendation = {
|
||||
name: string;
|
||||
score: number;
|
||||
reason: string;
|
||||
icon: typeof Sparkles;
|
||||
};
|
||||
|
||||
const quizQuestions: QuizQuestion[] = [
|
||||
{
|
||||
id: "q1", question: "What is your primary spiritual goal?", options: [
|
||||
{
|
||||
id: "q1-1", text: "Personal spiritual growth and self-discovery", modelScores: { chatgpt: 8, gemini: 7, deepseek: 6 },
|
||||
},
|
||||
{
|
||||
id: "q1-2", text: "Understanding philosophical concepts deeply", modelScores: { chatgpt: 6, gemini: 9, deepseek: 8 },
|
||||
},
|
||||
{
|
||||
id: "q1-3", text: "Logical analysis of spiritual teachings", modelScores: { chatgpt: 7, gemini: 7, deepseek: 9 },
|
||||
},
|
||||
{
|
||||
id: "q1-4", text: "Practical ritual and ceremony guidance", modelScores: { chatgpt: 9, gemini: 8, deepseek: 7 },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "q2", question: "How do you prefer to receive spiritual guidance?", options: [
|
||||
{
|
||||
id: "q2-1", text: "Conversational and empathetic explanations", modelScores: { chatgpt: 9, gemini: 7, deepseek: 6 },
|
||||
},
|
||||
{
|
||||
id: "q2-2", text: "Comprehensive and scholarly approach", modelScores: { chatgpt: 6, gemini: 9, deepseek: 8 },
|
||||
},
|
||||
{
|
||||
id: "q2-3", text: "Technical and precise information", modelScores: { chatgpt: 7, gemini: 8, deepseek: 9 },
|
||||
},
|
||||
{
|
||||
id: "q2-4", text: "Step-by-step practical instructions", modelScores: { chatgpt: 9, gemini: 7, deepseek: 7 },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "q3", question: "What is your experience level with Hindu spirituality?", options: [
|
||||
{
|
||||
id: "q3-1", text: "Beginner - just starting my journey", modelScores: { chatgpt: 9, gemini: 7, deepseek: 6 },
|
||||
},
|
||||
{
|
||||
id: "q3-2", text: "Intermediate - familiar with basics", modelScores: { chatgpt: 8, gemini: 8, deepseek: 7 },
|
||||
},
|
||||
{
|
||||
id: "q3-3", text: "Advanced - seeking deeper knowledge", modelScores: { chatgpt: 7, gemini: 9, deepseek: 8 },
|
||||
},
|
||||
{
|
||||
id: "q3-4", text: "Expert - interested in rare texts", modelScores: { chatgpt: 6, gemini: 9, deepseek: 9 },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "q4", question: "How much time can you dedicate to spiritual practice?", options: [
|
||||
{
|
||||
id: "q4-1", text: "Less than 15 minutes daily", modelScores: { chatgpt: 9, gemini: 7, deepseek: 7 },
|
||||
},
|
||||
{
|
||||
id: "q4-2", text: "15-30 minutes daily", modelScores: { chatgpt: 8, gemini: 8, deepseek: 8 },
|
||||
},
|
||||
{
|
||||
id: "q4-3", text: "30-60 minutes daily", modelScores: { chatgpt: 8, gemini: 9, deepseek: 8 },
|
||||
},
|
||||
{
|
||||
id: "q4-4", text: "More than 1 hour daily", modelScores: { chatgpt: 7, gemini: 9, deepseek: 9 },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "q5", question: "What aspects of spirituality interest you most?", options: [
|
||||
{
|
||||
id: "q5-1", text: "Mantras and chanting practices", modelScores: { chatgpt: 8, gemini: 8, deepseek: 7 },
|
||||
},
|
||||
{
|
||||
id: "q5-2", text: "Yoga and meditation", modelScores: { chatgpt: 8, gemini: 9, deepseek: 7 },
|
||||
},
|
||||
{
|
||||
id: "q5-3", text: "Philosophy and sacred texts", modelScores: { chatgpt: 7, gemini: 9, deepseek: 9 },
|
||||
},
|
||||
{
|
||||
id: "q5-4", text: "Rituals and ceremonies", modelScores: { chatgpt: 9, gemini: 7, deepseek: 7 },
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const modelDetails = {
|
||||
chatgpt: {
|
||||
name: "ChatGPT 4o", reason: "Best for personalized, conversational guidance and practical ritual support", description: "Perfect for beginners and those seeking empathetic, step-by-step spiritual guidance", color: "from-green-500 to-green-600"},
|
||||
gemini: {
|
||||
name: "Google Gemini Pro", reason: "Ideal for comprehensive knowledge and philosophical understanding", description: "Great for those seeking scholarly, in-depth exploration of spiritual concepts", color: "from-blue-500 to-blue-600"},
|
||||
deepseek: {
|
||||
name: "DeepSeek R1", reason: "Excellent for logical analysis and advanced spiritual reasoning", description: "Perfect for those seeking precise, analytical spiritual guidance", color: "from-purple-500 to-purple-600"},
|
||||
};
|
||||
|
||||
export default function QuizPage() {
|
||||
const [currentQuestion, setCurrentQuestion] = useState(0);
|
||||
const [scores, setScores] = useState({ chatgpt: 0, gemini: 0, deepseek: 0 });
|
||||
const [showResults, setShowResults] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "AI Models", id: "models" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Quiz", id: "quiz" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "/#features" },
|
||||
{ label: "Pricing", href: "/#pricing" },
|
||||
{ label: "AI Models", href: "/#models" },
|
||||
{ label: "Quiz", href: "/quiz" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Guides", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleOptionClick = (option: QuizOption) => {
|
||||
setScores({
|
||||
chatgpt: scores.chatgpt + option.modelScores.chatgpt,
|
||||
gemini: scores.gemini + option.modelScores.gemini,
|
||||
deepseek: scores.deepseek + option.modelScores.deepseek,
|
||||
});
|
||||
|
||||
if (currentQuestion < quizQuestions.length - 1) {
|
||||
setCurrentQuestion(currentQuestion + 1);
|
||||
} else {
|
||||
setShowResults(true);
|
||||
}
|
||||
};
|
||||
|
||||
const getRecommendations = (): ModelRecommendation[] => {
|
||||
const recommendations = [
|
||||
{
|
||||
name: "chatgpt", score: scores.chatgpt,
|
||||
reason: modelDetails.chatgpt.reason,
|
||||
icon: Sparkles,
|
||||
},
|
||||
{
|
||||
name: "gemini", score: scores.gemini,
|
||||
reason: modelDetails.gemini.reason,
|
||||
icon: Brain,
|
||||
},
|
||||
{
|
||||
name: "deepseek", score: scores.deepseek,
|
||||
reason: modelDetails.deepseek.reason,
|
||||
icon: Lightbulb,
|
||||
},
|
||||
];
|
||||
|
||||
return recommendations.sort((a, b) => b.score - a.score);
|
||||
};
|
||||
|
||||
const resetQuiz = () => {
|
||||
setCurrentQuestion(0);
|
||||
setScores({ chatgpt: 0, gemini: 0, deepseek: 0 });
|
||||
setShowResults(false);
|
||||
};
|
||||
|
||||
const recommendations = getRecommendations();
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="noise"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Aarti AI"
|
||||
bottomLeftText="Spiritual Preference Quiz"
|
||||
bottomRightText="connect@aartiAI.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Find Your Perfect AI Spiritual Guide"
|
||||
description="Take our spiritual preference quiz to discover which AI model aligns best with your spiritual journey and goals."
|
||||
tag="Personalized Recommendation"
|
||||
tagIcon={Compass}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Quiz", href: "#quiz-section"},
|
||||
{
|
||||
text: "Back to Home", href: "/"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "carousel-1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-serene-hindu-aarti-ceremony-with-tradi-1774187435323-3aa97833.png?_wi=1", imageAlt: "Spiritual guidance quiz"},
|
||||
{
|
||||
id: "carousel-2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-close-up-of-a-devotee-performing-aarti-1774187437516-86b9cbcb.png?_wi=2", imageAlt: "AI model recommendations"},
|
||||
{
|
||||
id: "carousel-3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/three-distinct-panels-showing-chatgpt-go-1774187436105-3fd2a65f.png?_wi=1", imageAlt: "AI models for spiritual practice"},
|
||||
{
|
||||
id: "carousel-4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-modern-digital-interface-dashboard-for-1774187439845-09258fc1.png?_wi=1", imageAlt: "Quiz interface"},
|
||||
{
|
||||
id: "carousel-5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-group-of-diverse-devotees-from-differe-1774187435267-c6ede5f9.png?_wi=2", imageAlt: "Personalized recommendations"},
|
||||
{
|
||||
id: "carousel-6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-meditating-figure-with-chakras-glowing-1774187436989-65c2a695.png?_wi=2", imageAlt: "Spiritual connection with AI"},
|
||||
]}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={5000}
|
||||
ariaLabel="Quiz hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="quiz-section" data-section="quiz" className="min-h-screen py-20">
|
||||
<div className="w-full max-w-4xl mx-auto px-4">
|
||||
{!showResults ? (
|
||||
<div className="space-y-8">
|
||||
<div className="text-center space-y-4">
|
||||
<div className="inline-block px-4 py-2 rounded-full bg-gradient-to-r from-purple-500/20 to-blue-500/20 border border-purple-500/40">
|
||||
<span className="text-sm font-semibold text-purple-600 dark:text-purple-400">
|
||||
Question {currentQuestion + 1} of {quizQuestions.length}
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold">{quizQuestions[currentQuestion].question}</h2>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-purple-500 to-blue-500 transition-all duration-500"
|
||||
style={{
|
||||
width: `${((currentQuestion + 1) / quizQuestions.length) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{quizQuestions[currentQuestion].options.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
onClick={() => handleOptionClick(option)}
|
||||
className="p-6 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-500 dark:hover:border-purple-400 hover:bg-purple-50 dark:hover:bg-purple-950/20 transition-all duration-300 text-left group"
|
||||
>
|
||||
<span className="text-lg font-semibold group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
|
||||
{option.text}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-12">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="text-4xl font-bold">Your AI Model Recommendation</h2>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400">
|
||||
Based on your preferences, here are the best AI models for your spiritual journey
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{recommendations.map((rec, idx) => {
|
||||
const model = modelDetails[rec.name as keyof typeof modelDetails];
|
||||
return (
|
||||
<div
|
||||
key={rec.name}
|
||||
className={`relative overflow-hidden rounded-2xl p-8 border border-gray-200 dark:border-gray-700 ${
|
||||
idx === 0
|
||||
? "bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-950/30 dark:to-blue-950/30 border-purple-300 dark:border-purple-600"
|
||||
: "bg-gray-50 dark:bg-gray-900/50"
|
||||
}`}
|
||||
>
|
||||
{idx === 0 && (
|
||||
<div className="absolute top-4 right-4 inline-block px-3 py-1 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 text-white text-sm font-semibold">
|
||||
🏆 Best Match
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-start justify-between gap-6">
|
||||
<div className="flex-1 space-y-2">
|
||||
<h3 className="text-2xl font-bold">{model.name}</h3>
|
||||
<p className="text-lg text-gray-700 dark:text-gray-300 font-semibold">
|
||||
{model.reason}
|
||||
</p>
|
||||
<p className="text-gray-600 dark:text-gray-400">{model.description}</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<div className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-blue-500">
|
||||
{Math.round((rec.score / (quizQuestions.length * 10)) * 100)}%
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 text-right">Match Score</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-950/20 dark:to-orange-950/20 rounded-xl p-6 border border-amber-200 dark:border-amber-800">
|
||||
<p className="text-center text-gray-700 dark:text-gray-300">
|
||||
<span className="font-semibold">Pro Tip:</span> You can try all models and switch between them based on your
|
||||
current spiritual need. Each brings unique strengths to your practice.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 justify-center">
|
||||
<button
|
||||
onClick={resetQuiz}
|
||||
className="px-8 py-3 rounded-lg font-semibold bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
Retake Quiz
|
||||
</button>
|
||||
<Link
|
||||
href="/#pricing"
|
||||
className="px-8 py-3 rounded-lg font-semibold bg-gradient-to-r from-purple-500 to-blue-500 text-white hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySeven
|
||||
title="Why Take This Quiz?"
|
||||
description="Understanding your spiritual preferences helps you find the perfect AI guide for your unique journey."
|
||||
tag="Personalization"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[]}
|
||||
buttonAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "preference-1", title: "Tailored Experience", descriptions: [
|
||||
"Get AI recommendations based on your spiritual goals and learning style", "Discover which model resonates best with your practice"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-meditating-figure-with-chakras-glowing-1774187436989-65c2a695.png?_wi=3", imageAlt: "Personalized spiritual experience"},
|
||||
{
|
||||
id: "preference-2", title: "Better Results", descriptions: [
|
||||
"Faster spiritual progress with AI guidance suited to your style", "More meaningful interactions and deeper understanding"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-step-by-step-visual-guide-showing-the--1774187437353-624518cc.png?_wi=2", imageAlt: "Improved spiritual guidance"},
|
||||
{
|
||||
id: "preference-3", title: "Continuous Growth", descriptions: [
|
||||
"Switch between models as your practice evolves", "Leverage different strengths for different spiritual needs"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BIqAjbdPaSZ14HbtJdzZ7Arky1/a-vibrant-community-forum-or-social-netw-1774187435390-4993488f.png?_wi=1", imageAlt: "Continuous spiritual growth"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2025 Aarti AI. Bridging Spirituality & Technology."
|
||||
bottomRightText="Made with devotion for spiritual seekers"
|
||||
ariaLabel="Site footer"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
281
src/app/register/page.tsx
Normal file
281
src/app/register/page.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "", email: "", password: "", confirmPassword: ""});
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [successMessage, setSuccessMessage] = useState("");
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "AI Models", id: "models" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "/#features" },
|
||||
{ label: "Pricing", href: "/#pricing" },
|
||||
{ label: "AI Models", href: "/#models" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Guides", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.name = "Name is required";
|
||||
}
|
||||
|
||||
if (!formData.email.trim()) {
|
||||
newErrors.email = "Email is required";
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
||||
newErrors.email = "Please enter a valid email";
|
||||
}
|
||||
|
||||
if (!formData.password) {
|
||||
newErrors.password = "Password is required";
|
||||
} else if (formData.password.length < 8) {
|
||||
newErrors.password = "Password must be at least 8 characters";
|
||||
}
|
||||
|
||||
if (formData.password !== formData.confirmPassword) {
|
||||
newErrors.confirmPassword = "Passwords do not match";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
if (errors[name]) {
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
[name]: ""}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSuccessMessage("");
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const userData = {
|
||||
name: formData.name,
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
createdAt: new Date().toISOString(),
|
||||
preferences: {
|
||||
theme: "light", notifications: true,
|
||||
language: "en"},
|
||||
};
|
||||
|
||||
localStorage.setItem(`user_${formData.email}`, JSON.stringify(userData));
|
||||
localStorage.setItem("currentUser", JSON.stringify(userData));
|
||||
|
||||
setSuccessMessage("Account created successfully! Redirecting to login...");
|
||||
setFormData({ name: "", email: "", password: "", confirmPassword: "" });
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = "/login";
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
setErrors({ form: "An error occurred. Please try again." });
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="noise"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Aarti AI"
|
||||
bottomLeftText="Divine AI Guidance"
|
||||
bottomRightText="connect@aartiAI.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-card rounded-lg shadow-md p-8 border border-background-accent">
|
||||
<h1 className="text-3xl font-bold text-center mb-2">Create Account</h1>
|
||||
<p className="text-center text-foreground/70 mb-8">
|
||||
Join Aarti AI and start your spiritual journey
|
||||
</p>
|
||||
|
||||
{successMessage && (
|
||||
<div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{errors.form && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
|
||||
{errors.form}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Your full name"
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
placeholder="your@email.com"
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleInputChange}
|
||||
placeholder="••••••••"
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
{errors.password && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.password}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground mb-1">
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleInputChange}
|
||||
placeholder="••••••••"
|
||||
className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
{errors.confirmPassword && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.confirmPassword}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-2 px-4 rounded-lg transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSubmitting ? "Creating Account..." : "Create Account"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-6 text-center text-sm text-foreground/70">
|
||||
Already have an account?{" "}
|
||||
<Link href="/login" className="text-primary-cta hover:underline font-medium">
|
||||
Sign In
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2025 Aarti AI. Bridging Spirituality & Technology."
|
||||
bottomRightText="Made with devotion for spiritual seekers"
|
||||
ariaLabel="Site footer"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
504
src/app/rituals/page.tsx
Normal file
504
src/app/rituals/page.tsx
Normal file
@@ -0,0 +1,504 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import Link from "next/link";
|
||||
import { Search, Filter, X, Clock, Tag as TagIcon } from "lucide-react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
interface Ritual {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
occasion: string;
|
||||
duration: number;
|
||||
description: string;
|
||||
steps: string[];
|
||||
materials: string[];
|
||||
bestTime: string;
|
||||
difficulty: "Beginner" | "Intermediate" | "Advanced";
|
||||
}
|
||||
|
||||
const ritualsDatabase: Ritual[] = [
|
||||
{
|
||||
id: "1", name: "Lakshmi Puja", type: "Prosperity", occasion: "Diwali, Monthly", duration: 45,
|
||||
description: "A sacred ritual to invoke the blessings of Goddess Lakshmi for wealth and prosperity.", steps: [
|
||||
"Clean and prepare the worship area", "Light the lamp (diya) with ghee or oil", "Offer flowers and incense", "Chant Lakshmi mantras", "Distribute blessed offerings (prasad)"],
|
||||
materials: [
|
||||
"Oil lamp (diya)", "Incense sticks", "Flowers", "Sweets or fruits", "Milk or honey"],
|
||||
bestTime: "Evening, especially on new moon", difficulty: "Beginner"},
|
||||
{
|
||||
id: "2", name: "Ganesha Puja", type: "Spiritual", occasion: "New Beginnings, Daily", duration: 30,
|
||||
description: "An auspicious ritual to remove obstacles and seek blessings from Lord Ganesha.", steps: [
|
||||
"Create a clean sacred space", "Place Ganesha idol or image", "Offer flowers and modak (sweet)", "Ring the bell and chant mantras", "Meditate and seek blessings"],
|
||||
materials: [
|
||||
"Ganesha idol", "Modak or laddu", "Flowers", "Bell", "Incense"],
|
||||
bestTime: "Morning or before starting any new work", difficulty: "Beginner"},
|
||||
{
|
||||
id: "3", name: "Navaratri Puja", type: "Festival", occasion: "Navaratri Festival", duration: 60,
|
||||
description: "The nine-day festival celebrating the divine feminine energy with daily rituals.", steps: [
|
||||
"Setup ghatasthapna (pot planting)", "Daily worship of different goddesses", "Perform aarti each day", "Prepare special offerings", "Observe fasting as per tradition"],
|
||||
materials: [
|
||||
"Clay pot", "Barley seeds", "Goddess idols", "Coconut", "Banana leaves"],
|
||||
bestTime: "Morning and evening for 9 days", difficulty: "Intermediate"},
|
||||
{
|
||||
id: "4", name: "Durga Puja", type: "Spiritual", occasion: "Navaratri, Dussehra", duration: 90,
|
||||
description: "A comprehensive ritual to invoke the divine mother Durga for protection and strength.", steps: [
|
||||
"Prepare the altar with great devotion", "Perform kalash puja (pot worship)", "Recite Durga Saptashati (sacred text)", "Offer 108 flowers", "Conclude with aarti and blessing distribution"],
|
||||
materials: [
|
||||
"Durga idol or image", "Sacred water", "Flowers (108)", "Oil lamp", "Sacred thread"],
|
||||
bestTime: "During Navaratri festival", difficulty: "Advanced"},
|
||||
{
|
||||
id: "5", name: "Daily Aarti", type: "Daily Worship", occasion: "Daily", duration: 15,
|
||||
description: "A simple daily ritual of waving light before the deity to show reverence and love.", steps: [
|
||||
"Light the oil lamp", "Hold it with devotion", "Wave in circular motions", "Ring bell gently", "Sing or chant bhajans"],
|
||||
materials: [
|
||||
"Oil lamp (diya)", "Oil or ghee", "Bell", "Flowers"],
|
||||
bestTime: "Morning and evening", difficulty: "Beginner"},
|
||||
{
|
||||
id: "6", name: "Maha Shivaratri Puja", type: "Spiritual", occasion: "Maha Shivaratri", duration: 120,
|
||||
description: "An elaborate night-long ritual dedicated to Lord Shiva, involving fasting and meditation.", steps: [
|
||||
"Begin with ritual bath", "Meditate on Lord Shiva", "Perform abhisheka (bathing the Shiva linga)", "Offer bilva leaves", "Stay awake and chant throughout the night"],
|
||||
materials: [
|
||||
"Shiva linga", "Milk, honey, ghee", "Bilva leaves", "Sacred ash (vibhuti)", "Rudraksha beads"],
|
||||
bestTime: "Night of Maha Shivaratri", difficulty: "Advanced"},
|
||||
{
|
||||
id: "7", name: "Krishna Janmashtami Puja", type: "Festival", occasion: "Krishna Janmashtami", duration: 75,
|
||||
description: "A joyful celebration of Lord Krishna's birth with special rituals and offerings.", steps: [
|
||||
"Fast until midnight", "Prepare Krishna idol", "Perform abhisheka ritual", "Offer butter and milk", "Sing devotional songs and celebrate"],
|
||||
materials: [
|
||||
"Krishna idol", "Butter and milk", "Flowers", "Flute (symbolic)", "Sweets and fruits"],
|
||||
bestTime: "Midnight on Janmashtami", difficulty: "Intermediate"},
|
||||
{
|
||||
id: "8", name: "Satyanarayan Katha Puja", type: "Spiritual", occasion: "Special Occasions, Monthly", duration: 90,
|
||||
description: "A ritual involving the recitation of sacred stories and prayers for family well-being.", steps: [
|
||||
"Invite family and friends", "Setup the altar", "Begin with invocation", "Recite the sacred narrative", "Perform aarti and distribute prasad"],
|
||||
materials: [
|
||||
"Satyanarayan idol", "Sacred text (Katha)", "Oil lamp", "Flowers and incense", "Kheer (rice pudding)"],
|
||||
bestTime: "Evening, preferably on full moon", difficulty: "Intermediate"},
|
||||
{
|
||||
id: "9", name: "Saraswati Puja", type: "Knowledge & Arts", occasion: "Basant Panchami, Start of Academic Year", duration: 45,
|
||||
description: "A ritual to seek blessings of Goddess Saraswati for knowledge, wisdom, and creativity.", steps: [
|
||||
"Clean the study area", "Place Saraswati idol", "Offer flowers and incense", "Chant knowledge-related mantras", "Bless books and instruments"],
|
||||
materials: [
|
||||
"Saraswati idol", "Books", "Musical instruments (symbolic)", "Yellow flowers", "Incense"],
|
||||
bestTime: "Morning, especially on Basant Panchami", difficulty: "Beginner"},
|
||||
{
|
||||
id: "10", name: "Hanuman Puja", type: "Spiritual", occasion: "Tuesday, Hanuman Jayanti", duration: 30,
|
||||
description: "A powerful ritual to seek strength, courage, and devotion from Lord Hanuman.", steps: [
|
||||
"Face northeast direction", "Offer flowers to Hanuman idol", "Chant Hanuman Chalisa", "Apply sacred ash", "Meditate on strength and devotion"],
|
||||
materials: [
|
||||
"Hanuman idol", "Vermilion (sindoor)", "Oil lamp", "Banana offering", "Rudraksha beads"],
|
||||
bestTime: "Tuesday morning or evening", difficulty: "Beginner"},
|
||||
];
|
||||
|
||||
type RitualType = string;
|
||||
type RitualOccasion = string;
|
||||
type DurationRange = "all" | "short" | "medium" | "long";
|
||||
|
||||
export default function RitualsLibraryPage() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [selectedType, setSelectedType] = useState<RitualType | null>(null);
|
||||
const [selectedOccasion, setSelectedOccasion] = useState<RitualOccasion | null>(null);
|
||||
const [durationRange, setDurationRange] = useState<DurationRange>("all");
|
||||
const [selectedRitual, setSelectedRitual] = useState<Ritual | null>(null);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Rituals", id: "rituals" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Rituals Library", href: "/rituals" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Guides", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// Get unique types, occasions
|
||||
const ritualTypes = Array.from(new Set(ritualsDatabase.map((r) => r.type)));
|
||||
const ritualOccasions = Array.from(new Set(ritualsDatabase.flatMap((r) => r.occasion.split(", "))));
|
||||
|
||||
// Filter rituals
|
||||
const filteredRituals = useMemo(() => {
|
||||
return ritualsDatabase.filter((ritual) => {
|
||||
const matchesSearch =
|
||||
ritual.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
ritual.description.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
|
||||
const matchesType = !selectedType || ritual.type === selectedType;
|
||||
|
||||
const matchesOccasion =
|
||||
!selectedOccasion || ritual.occasion.includes(selectedOccasion);
|
||||
|
||||
const matchesDuration =
|
||||
durationRange === "all" ||
|
||||
(durationRange === "short" && ritual.duration <= 30) ||
|
||||
(durationRange === "medium" && ritual.duration > 30 && ritual.duration <= 60) ||
|
||||
(durationRange === "long" && ritual.duration > 60);
|
||||
|
||||
return matchesSearch && matchesType && matchesOccasion && matchesDuration;
|
||||
});
|
||||
}, [searchQuery, selectedType, selectedOccasion, durationRange]);
|
||||
|
||||
const clearFilters = () => {
|
||||
setSearchQuery("");
|
||||
setSelectedType(null);
|
||||
setSelectedOccasion(null);
|
||||
setDurationRange("all");
|
||||
};
|
||||
|
||||
const hasActiveFilters =
|
||||
searchQuery || selectedType || selectedOccasion || durationRange !== "all";
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="noise"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Aarti AI"
|
||||
bottomLeftText="Divine AI Guidance"
|
||||
bottomRightText="connect@aartiAI.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="min-h-screen pt-32 pb-20">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="mb-12">
|
||||
<h1 className="text-5xl font-bold mb-4 text-foreground">Rituals Library</h1>
|
||||
<p className="text-xl text-foreground/70 max-w-2xl">
|
||||
Explore our comprehensive database of sacred rituals. Search, filter, and discover the perfect aarti for any occasion.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="mb-8">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 text-foreground/50" size={20} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search rituals by name or description..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 rounded-lg border border-foreground/20 bg-card text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="mb-8 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-foreground flex items-center gap-2">
|
||||
<Filter size={20} /> Filters
|
||||
</h2>
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="text-sm text-primary-cta hover:underline"
|
||||
>
|
||||
Clear All
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Type Filter */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Ritual Type
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
<button
|
||||
onClick={() => setSelectedType(null)}
|
||||
className={`w-full text-left px-3 py-2 rounded-lg transition ${
|
||||
selectedType === null
|
||||
? "bg-primary-cta text-background"
|
||||
: "bg-card text-foreground hover:bg-foreground/10"
|
||||
}`}
|
||||
>
|
||||
All Types
|
||||
</button>
|
||||
{ritualTypes.map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => setSelectedType(type)}
|
||||
className={`w-full text-left px-3 py-2 rounded-lg transition ${
|
||||
selectedType === type
|
||||
? "bg-primary-cta text-background"
|
||||
: "bg-card text-foreground hover:bg-foreground/10"
|
||||
}`}
|
||||
>
|
||||
{type}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Occasion Filter */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Occasion
|
||||
</label>
|
||||
<div className="space-y-2 max-h-56 overflow-y-auto">
|
||||
<button
|
||||
onClick={() => setSelectedOccasion(null)}
|
||||
className={`w-full text-left px-3 py-2 rounded-lg transition ${
|
||||
selectedOccasion === null
|
||||
? "bg-primary-cta text-background"
|
||||
: "bg-card text-foreground hover:bg-foreground/10"
|
||||
}`}
|
||||
>
|
||||
All Occasions
|
||||
</button>
|
||||
{ritualOccasions.map((occasion) => (
|
||||
<button
|
||||
key={occasion}
|
||||
onClick={() => setSelectedOccasion(occasion)}
|
||||
className={`w-full text-left px-3 py-2 rounded-lg transition text-sm ${
|
||||
selectedOccasion === occasion
|
||||
? "bg-primary-cta text-background"
|
||||
: "bg-card text-foreground hover:bg-foreground/10"
|
||||
}`}
|
||||
>
|
||||
{occasion}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Duration Filter */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Duration
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ value: "all", label: "All Durations" },
|
||||
{ value: "short", label: "Quick (≤30 min)" },
|
||||
{ value: "medium", label: "Moderate (30-60 min)" },
|
||||
{ value: "long", label: "Extended (>60 min)" },
|
||||
].map((duration) => (
|
||||
<button
|
||||
key={duration.value}
|
||||
onClick={() => setDurationRange(duration.value as DurationRange)}
|
||||
className={`w-full text-left px-3 py-2 rounded-lg transition ${
|
||||
durationRange === duration.value
|
||||
? "bg-primary-cta text-background"
|
||||
: "bg-card text-foreground hover:bg-foreground/10"
|
||||
}`}
|
||||
>
|
||||
{duration.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results Count */}
|
||||
<div className="mb-6 text-sm text-foreground/70">
|
||||
Found <span className="font-semibold text-foreground">{filteredRituals.length}</span> ritual{filteredRituals.length !== 1 ? "s" : ""}
|
||||
</div>
|
||||
|
||||
{/* Rituals Grid and Detail View */}
|
||||
{selectedRitual ? (
|
||||
// Detail View
|
||||
<div className="mb-8">
|
||||
<button
|
||||
onClick={() => setSelectedRitual(null)}
|
||||
className="mb-6 text-primary-cta hover:underline flex items-center gap-2"
|
||||
>
|
||||
<X size={16} /> Back to List
|
||||
</button>
|
||||
<div className="bg-card rounded-lg p-8 border border-foreground/10">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h2 className="text-4xl font-bold text-foreground mb-2">
|
||||
{selectedRitual.name}
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-3 mb-4">
|
||||
<span className="inline-flex items-center gap-2 bg-accent/20 text-accent px-3 py-1 rounded-full text-sm font-medium">
|
||||
<TagIcon size={14} /> {selectedRitual.type}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-2 bg-primary-cta/20 text-primary-cta px-3 py-1 rounded-full text-sm font-medium">
|
||||
<Clock size={14} /> {selectedRitual.duration} min
|
||||
</span>
|
||||
<span className="inline-block bg-secondary-cta/20 text-secondary-cta px-3 py-1 rounded-full text-sm font-medium">
|
||||
{selectedRitual.difficulty}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-lg text-foreground/80 mb-6">{selectedRitual.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{/* Steps */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-foreground mb-4">Steps</h3>
|
||||
<ol className="space-y-3">
|
||||
{selectedRitual.steps.map((step, index) => (
|
||||
<li key={index} className="flex gap-4">
|
||||
<span className="flex-shrink-0 w-8 h-8 bg-primary-cta text-background rounded-full flex items-center justify-center font-bold text-sm">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="text-foreground/80 pt-1">{step}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
{/* Materials and Info */}
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-foreground mb-4">Materials Needed</h3>
|
||||
<ul className="space-y-2">
|
||||
{selectedRitual.materials.map((material, index) => (
|
||||
<li key={index} className="flex items-start gap-3">
|
||||
<span className="w-2 h-2 bg-accent rounded-full mt-2"></span>
|
||||
<span className="text-foreground/80">{material}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-foreground mb-2">Best Time</h3>
|
||||
<p className="text-foreground/80">{selectedRitual.bestTime}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : filteredRituals.length > 0 ? (
|
||||
// Grid View
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
||||
{filteredRituals.map((ritual) => (
|
||||
<div
|
||||
key={ritual.id}
|
||||
onClick={() => setSelectedRitual(ritual)}
|
||||
className="bg-card rounded-lg p-6 border border-foreground/10 hover:border-primary-cta/50 cursor-pointer transition hover:shadow-lg"
|
||||
>
|
||||
<div className="mb-4">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<h3 className="text-xl font-bold text-foreground flex-1">
|
||||
{ritual.name}
|
||||
</h3>
|
||||
<span className="text-xs font-medium text-secondary-cta bg-secondary-cta/10 px-2 py-1 rounded-full">
|
||||
{ritual.difficulty}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-foreground/70 mb-3">{ritual.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 mb-4">
|
||||
<div className="flex items-center gap-2 text-sm text-foreground/60">
|
||||
<TagIcon size={14} />
|
||||
<span>{ritual.type}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-foreground/60">
|
||||
<Clock size={14} />
|
||||
<span>{ritual.duration} minutes</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-foreground/10">
|
||||
<p className="text-xs text-foreground/50 mb-2">Occasions:</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{ritual.occasion.split(", ").slice(0, 2).map((occ, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="text-xs bg-accent/20 text-accent px-2 py-1 rounded"
|
||||
>
|
||||
{occ}
|
||||
</span>
|
||||
))}
|
||||
{ritual.occasion.split(", ").length > 2 && (
|
||||
<span className="text-xs text-foreground/50 px-2 py-1">
|
||||
+{ritual.occasion.split(", ").length - 2} more
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="w-full mt-4 bg-primary-cta text-background font-semibold py-2 rounded-lg hover:opacity-90 transition">
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
// Empty State
|
||||
<div className="text-center py-16 bg-card rounded-lg border border-foreground/10">
|
||||
<Search size={48} className="mx-auto mb-4 text-foreground/30" />
|
||||
<h3 className="text-2xl font-bold text-foreground mb-2">
|
||||
No rituals found
|
||||
</h3>
|
||||
<p className="text-foreground/70 mb-6">
|
||||
Try adjusting your search or filter criteria
|
||||
</p>
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="bg-primary-cta text-background px-6 py-2 rounded-lg font-semibold hover:opacity-90 transition"
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2025 Aarti AI. Bridging Spirituality & Technology."
|
||||
bottomRightText="Made with devotion for spiritual seekers"
|
||||
ariaLabel="Site footer"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user