Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Pujari - Digital Spiritual Guidance</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8f4e9; | |
| color: #333; | |
| } | |
| .sanskrit-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .bg-saffron { | |
| background-color: #FF9933; | |
| } | |
| .bg-saffron-light { | |
| background-color: #FFD699; | |
| } | |
| .text-saffron { | |
| color: #FF9933; | |
| } | |
| .bg-spiritual { | |
| background-image: url('https://images.unsplash.com/photo-1589998059171-988d887df646?q=80&w=1000'); | |
| background-size: cover; | |
| background-position: center; | |
| background-blend-mode: overlay; | |
| background-color: rgba(248, 244, 233, 0.9); | |
| } | |
| .mantra-card { | |
| background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,244,233,0.9) 100%); | |
| backdrop-filter: blur(5px); | |
| border-radius: 16px; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); | |
| } | |
| .deity-card { | |
| transition: all 0.3s ease; | |
| } | |
| .deity-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .voice-wave { | |
| position: relative; | |
| height: 50px; | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .voice-wave span { | |
| display: block; | |
| width: 4px; | |
| height: 10px; | |
| background: #FF9933; | |
| margin: 0 2px; | |
| border-radius: 50px; | |
| animation: wave 1.5s infinite ease-in-out; | |
| } | |
| .voice-wave span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .voice-wave span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| .voice-wave span:nth-child(4) { | |
| animation-delay: 0.6s; | |
| } | |
| .voice-wave span:nth-child(5) { | |
| animation-delay: 0.8s; | |
| } | |
| @keyframes wave { | |
| 0%, 100% { | |
| transform: scaleY(1); | |
| } | |
| 50% { | |
| transform: scaleY(2); | |
| } | |
| } | |
| .floating-om { | |
| position: absolute; | |
| font-size: 24px; | |
| color: rgba(255, 153, 51, 0.2); | |
| animation: float 15s infinite ease-in-out; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translate(0, 0) rotate(0deg); | |
| } | |
| 25% { | |
| transform: translate(50px, -30px) rotate(5deg); | |
| } | |
| 50% { | |
| transform: translate(0, -60px) rotate(0deg); | |
| } | |
| 75% { | |
| transform: translate(-50px, -30px) rotate(-5deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-spiritual"> | |
| <!-- Floating OM symbols --> | |
| <div class="floating-om" style="top: 10%; left: 5%;">ॐ</div> | |
| <div class="floating-om" style="top: 20%; right: 10%;">ॐ</div> | |
| <div class="floating-om" style="bottom: 30%; left: 15%;">ॐ</div> | |
| <div class="floating-om" style="bottom: 20%; right: 20%;">ॐ</div> | |
| <!-- Navbar --> | |
| <nav class="bg-white shadow-md py-4"> | |
| <div class="container mx-auto px-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-om text-saffron text-2xl"></i> | |
| <span class="text-xl font-bold sanskrit-font">AI पूजारी</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#home" class="hover:text-saffron">Home</a> | |
| <a href="#features" class="hover:text-saffron">Features</a> | |
| <a href="#puja" class="hover:text-saffron">Puja Services</a> | |
| <a href="#panchang" class="hover:text-saffron">Panchang</a> | |
| <a href="#contact" class="hover:text-saffron">Contact</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-saffron text-white px-4 py-2 rounded-full hover:bg-orange-700 transition"> | |
| <i class="fas fa-user"></i> Login | |
| </button> | |
| <button class="md:hidden"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="py-16 md:py-24"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 sanskrit-font"> | |
| <span class="text-saffron">Digital</span> Spirituality, <br>Ancient <span class="text-saffron">Wisdom</span> | |
| </h1> | |
| <p class="text-lg mb-8"> | |
| Experience authentic Hindu rituals with AI guidance. Our virtual pujari helps you perform pujas correctly, provides daily mantras, and keeps you connected with your spiritual side. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-saffron text-white px-6 py-3 rounded-full hover:bg-orange-700 transition flex items-center justify-center"> | |
| <i class="fas fa-play-circle mr-2"></i> Start Puja Now | |
| </button> | |
| <button class="border border-saffron text-saffron px-6 py-3 rounded-full hover:bg-saffron-light transition flex items-center justify-center"> | |
| <i class="fas fa-video mr-2"></i> Live Pujari | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="mantra-card p-8 max-w-md w-full"> | |
| <div class="voice-wave mb-4"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 sanskrit-font">Today's Mantra</h3> | |
| <p class="text-2xl mb-4 sanskrit-font">ॐ नमः शिवाय</p> | |
| <p class="mb-4">Om Namah Shivaya - The five-syllable mantra dedicated to Lord Shiva</p> | |
| <button class="bg-saffron text-white px-4 py-2 rounded-full hover:bg-orange-700 transition flex items-center mx-auto"> | |
| <i class="fas fa-volume-up mr-2"></i> Listen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-16 bg-white bg-opacity-90"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 sanskrit-font">Our <span class="text-saffron">Divine</span> Features</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-saffron-light p-6 rounded-xl"> | |
| <div class="text-saffron text-4xl mb-4"> | |
| <i class="fas fa-hands-praying"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Step-by-Step Puja</h3> | |
| <p>AI-guided puja instructions with proper timings, materials needed, and correct procedures for various deities.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-saffron-light p-6 rounded-xl"> | |
| <div class="text-saffron text-4xl mb-4"> | |
| <i class="fas fa-calendar-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Panchang & Muhurat</h3> | |
| <p>Daily Hindu calendar with auspicious timings, festivals, and personalized muhurat suggestions.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-saffron-light p-6 rounded-xl"> | |
| <div class="text-saffron text-4xl mb-4"> | |
| <i class="fas fa-language"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Multi-Language</h3> | |
| <p>Available in Hindi, Sanskrit, English, Tamil, Telugu, Gujarati, and more regional languages.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-saffron-light p-6 rounded-xl"> | |
| <div class="text-saffron text-4xl mb-4"> | |
| <i class="fas fa-microphone"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Voice Interaction</h3> | |
| <p>Ask spiritual questions naturally like "How to perform Ganesh Puja?" or "What is today's Rahu Kaal?"</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="bg-saffron-light p-6 rounded-xl"> | |
| <div class="text-saffron text-4xl mb-4"> | |
| <i class="fas fa-gem"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Custom Rituals</h3> | |
| <p>Generate personalized puja procedures for occasions like housewarming, marriage, or remembrance.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="bg-saffron-light p-6 rounded-xl"> | |
| <div class="text-saffron text-4xl mb-4"> | |
| <i class="fas fa-hands-helping"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Temple Connect</h3> | |
| <p>Book temple visits, arrange live pujas with real priests, and make donations to sacred places.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Puja Services Section --> | |
| <section id="puja" class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 sanskrit-font">Puja <span class="text-saffron">Services</span></h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <!-- Deity 1 --> | |
| <div class="deity-card bg-white p-4 rounded-lg shadow-md text-center"> | |
| <img src="https://via.placeholder.com/150" alt="Ganesha" class="w-24 h-24 mx-auto rounded-full object-cover mb-3"> | |
| <h3 class="font-bold">Ganesh Puja</h3> | |
| <p class="text-sm text-gray-600">For success and removing obstacles</p> | |
| <button class="mt-2 text-saffron text-sm hover:underline">Start Puja</button> | |
| </div> | |
| <!-- Deity 2 --> | |
| <div class="deity-card bg-white p-4 rounded-lg shadow-md text-center"> | |
| <img src="https://via.placeholder.com/150" alt="Shiva" class="w-24 h-24 mx-auto rounded-full object-cover mb-3"> | |
| <h3 class="font-bold">Shiv Puja</h3> | |
| <p class="text-sm text-gray-600">For strength and transformation</p> | |
| <button class="mt-2 text-saffron text-sm hover:underline">Start Puja</button> | |
| </div> | |
| <!-- Deity 3 --> | |
| <div class="deity-card bg-white p-4 rounded-lg shadow-md text-center"> | |
| <img src="https://via.placeholder.com/150" alt="Lakshmi" class="w-24 h-24 mx-auto rounded-full object-cover mb-3"> | |
| <h3 class="font-bold">Lakshmi Puja</h3> | |
| <p class="text-sm text-gray-600">For wealth and prosperity</p> | |
| <button class="mt-2 text-saffron text-sm hover:underline">Start Puja</button> | |
| </div> | |
| <!-- Deity 4 --> | |
| <div class="deity-card bg-white p-4 rounded-lg shadow-md text-center"> | |
| <img src="https://via.placeholder.com/150" alt="Hanuman" class="w-24 h-24 mx-auto rounded-full object-cover mb-3"> | |
| <h3 class="font-bold">Hanuman Chalisa</h3> | |
| <p class="text-sm text-gray-600">For courage and protection</p> | |
| <button class="mt-2 text-saffron text-sm hover:underline">Start Puja</button> | |
| </div> | |
| <!-- Deity 5 --> | |
| <div class="deity-card bg-white p-4 rounded-lg shadow-md text-center"> | |
| <img src="https://via.placeholder.com/150" alt="Durga" class="w-24 h-24 mx-auto rounded-full object-cover mb-3"> | |
| <h3 class="font-bold">Durga Saptashati</h3> | |
| <p class="text-sm text-gray-600">For power and overcoming challenges</p> | |
| <button class="mt-2 text-saffron text-sm hover:underline">Start Puja</button> | |
| </div> | |
| <!-- Deity 6 --> | |
| <div class="deity-card bg-white p-4 rounded-lg shadow-md text-center"> | |
| <img src="https://via.placeholder.com/150" alt="Krishna" class="w-24 h-24 mx-auto rounded-full object-cover mb-3"> | |
| <h3 class="font-bold">Krishna Aarti</h3> | |
| <p class="text-sm text-gray-600">For love and devotion</p> | |
| <button class="mt-2 text-saffron text-sm hover:underline">Start Puja</button> | |
| </div> | |
| <!-- Deity 7 --> | |
| <div class="deity-card bg-white p-4 rounded-lg shadow-md text-center"> | |
| <img src="https://via.placeholder.com/150" alt="Saraswati" class="w-24 h-24 mx-auto rounded-full object-cover mb-3"> | |
| <h3 class="font-bold">Saraswati Vandana</h3> | |
| <p class="text-sm text-gray-600">For knowledge and wisdom</p> | |
| <button class="mt-2 text-saffron text-sm hover:underline">Start Puja</button> | |
| </div> | |
| <!-- Deity 8 --> | |
| <div class="deity-card bg-white p-4 rounded-lg shadow-md text-center"> | |
| <img src="https://via.placeholder.com/150" alt="Custom" class="w-24 h-24 mx-auto rounded-full object-cover mb-3"> | |
| <h3 class="font-bold">Custom Puja</h3> | |
| <p class="text-sm text-gray-600">For your specific needs</p> | |
| <button class="mt-2 text-saffron text-sm hover:underline">Create Puja</button> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="bg-saffron text-white px-6 py-3 rounded-full hover:bg-orange-700 transition"> | |
| <i class="fas fa-search mr-2"></i> Explore All Pujas | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Panchang Section --> | |
| <section id="panchang" class="py-16 bg-saffron-light"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 sanskrit-font">Today's <span class="text-saffron">Panchang</span></h2> | |
| <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-saffron text-white p-6 flex flex-col items-center justify-center"> | |
| <div class="text-5xl font-bold mb-2">24</div> | |
| <div class="text-xl mb-1">June 2023</div> | |
| <div class="text-lg">Shukla Paksha</div> | |
| </div> | |
| <div class="md:w-2/3 p-6"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <h3 class="font-bold text-saffron">Tithi</h3> | |
| <p>Panchami</p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-saffron">Nakshatra</h3> | |
| <p>Rohini</p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-saffron">Yoga</h3> | |
| <p>Shobhana</p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-saffron">Karana</h3> | |
| <p>Bava</p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-saffron">Sunrise</h3> | |
| <p>5:45 AM</p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-saffron">Sunset</h3> | |
| <p>7:15 PM</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-bold text-saffron mb-2">Auspicious Timings</h3> | |
| <div class="flex justify-between text-sm"> | |
| <div> | |
| <div class="font-medium">Abhijit Muhurat</div> | |
| <div>11:45 AM - 12:30 PM</div> | |
| </div> | |
| <div> | |
| <div class="font-medium">Amrit Kalam</div> | |
| <div>3:15 PM - 4:45 PM</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="font-bold text-saffron">Rahu Kaal</h3> | |
| <p>10:30 AM - 12:00 PM</p> | |
| </div> | |
| <button class="bg-saffron text-white px-4 py-2 rounded-full hover:bg-orange-700 transition text-sm"> | |
| <i class="fas fa-bell mr-1"></i> Set Reminder | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button class="border border-saffron text-saffron px-6 py-3 rounded-full hover:bg-saffron-light transition"> | |
| <i class="fas fa-calendar-week mr-2"></i> View Monthly Panchang | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Live Pujari Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 sanskrit-font">Connect with <span class="text-saffron">Live Pujaris</span></h2> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Pujari 1 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/400x225" alt="Pujari" class="w-full h-48 object-cover"> | |
| <div class="absolute bottom-0 left-0 bg-saffron text-white px-3 py-1 text-sm font-medium"> | |
| Live Now | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/50" alt="Pujari" class="w-12 h-12 rounded-full object-cover mr-3"> | |
| <div> | |
| <h3 class="font-bold">Pandit Ravi Shankar</h3> | |
| <p class="text-sm text-gray-600">Varanasi, UP</p> | |
| </div> | |
| </div> | |
| <p class="mb-4">Specializes in Rudrabhishek and Maha Mrityunjaya Jaap. Fluent in Hindi, English and Sanskrit.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-saffron font-medium"> | |
| <i class="fas fa-star"></i> 4.9 (128) | |
| </div> | |
| <button class="bg-saffron text-white px-4 py-2 rounded-full hover:bg-orange-700 transition text-sm"> | |
| <i class="fas fa-video mr-1"></i> Book Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pujari 2 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/400x225" alt="Pujari" class="w-full h-48 object-cover"> | |
| <div class="absolute bottom-0 left-0 bg-gray-600 text-white px-3 py-1 text-sm font-medium"> | |
| Available | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/50" alt="Pujari" class="w-12 h-12 rounded-full object-cover mr-3"> | |
| <div> | |
| <h3 class="font-bold">Shastriji Mohan Sharma</h3> | |
| <p class="text-sm text-gray-600">Ujjain, MP</p> | |
| </div> | |
| </div> | |
| <p class="mb-4">Expert in Graha Shanti Pujas and Vastu Shanti. Speaks Hindi, Gujarati and Marathi.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-saffron font-medium"> | |
| <i class="fas fa-star"></i> 4.8 (95) | |
| </div> | |
| <button class="bg-saffron text-white px-4 py-2 rounded-full hover:bg-orange-700 transition text-sm"> | |
| <i class="fas fa-video mr-1"></i> Book Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pujari 3 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/400x225" alt="Pujari" class="w-full h-48 object-cover"> | |
| <div class="absolute bottom-0 left-0 bg-gray-600 text-white px-3 py-1 text-sm font-medium"> | |
| Available | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/50" alt="Pujari" class="w-12 h-12 rounded-full object-cover mr-3"> | |
| <div> | |
| <h3 class="font-bold">Mataji Priyanka Devi</h3> | |
| <p class="text-sm text-gray-600">Puri, Odisha</p> | |
| </div> | |
| </div> | |
| <p class="mb-4">Specialist in Durga Saptashati and Lakshmi Puja. Speaks Hindi, Odia and Bengali.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-saffron font-medium"> | |
| <i class="fas fa-star"></i> 4.7 (76) | |
| </div> | |
| <button class="bg-saffron text-white px-4 py-2 rounded-full hover:bg-orange-700 transition text-sm"> | |
| <i class="fas fa-video mr-1"></i> Book Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="border border-saffron text-saffron px-6 py-3 rounded-full hover:bg-saffron-light transition"> | |
| <i class="fas fa-users mr-2"></i> View All Pujaris | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-saffron-light"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 sanskrit-font">Devotee <span class="text-saffron">Experiences</span></h2> | |
| <div class="max-w-5xl mx-auto"> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/60" alt="User" class="w-12 h-12 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-bold">Rajesh Kumar</h3> | |
| <p class="text-sm text-gray-600">Mumbai</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-2 text-saffron"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <p>"The AI guidance for Ganesh Chaturthi puja was perfect! As someone new to rituals, the step-by-step instructions with voice guidance in Hindi made it so easy to follow."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/60" alt="User" class="w-12 h-12 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-bold">Priya Patel</h3> | |
| <p class="text-sm text-gray-600">Ahmedabad</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-2 text-saffron"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <p>"Booked a live Satyanarayan Puja through the app for our housewarming. Panditji was professional, explained everything in Gujarati, and the whole family could participate remotely."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/60" alt="User" class="w-12 h-12 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-bold">Ananya Sharma</h3> | |
| <p class="text-sm text-gray-600">Bangalore</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-2 text-saffron"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <p>"The daily panchang notifications help me plan my day according to auspicious timings. The AI voice assistant answers all my questions about rituals in simple Tamil."</p> | |
| </div> | |
| <!-- Testimonial 4 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/60" alt="User" class="w-12 h-12 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-bold">Vikram Joshi</h3> | |
| <p class="text-sm text-gray-600">Delhi</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-2 text-saffron"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <p>"Used the custom puja generator for my father's shraddha ceremony. It created a complete procedure with all the right mantras and materials list. Saved us so much time and stress."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 sanskrit-font">Have <span class="text-saffron">Questions?</span></h2> | |
| <div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="text-saffron text-xl mr-4 mt-1"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Address</h4> | |
| <p class="text-gray-600">AI Pujari Services<br>Varanasi, Uttar Pradesh<br>India - 221001</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-saffron text-xl mr-4 mt-1"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Email</h4> | |
| <p class="text-gray-600">support@aipujari.com<br>contact@aipujari.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-saffron text-xl mr-4 mt-1"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Phone</h4> | |
| <p class="text-gray-600">+91 98765 43210<br>+91 11 2345 6789</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-bold mb-4">Follow Us</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-saffron text-2xl hover:text-orange-700"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| <a href="#" class="text-saffron text-2xl hover:text-orange-700"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-saffron text-2xl hover:text-orange-700"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-saffron text-2xl hover:text-orange-700"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="text-saffron text-2xl hover:text-orange-700"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Send Us a Message</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block mb-1">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-saffron focus:border-saffron outline-none transition"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-1">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-saffron focus:border-saffron outline-none transition"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block mb-1">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-saffron focus:border-saffron outline-none transition"> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-1">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-saffron focus:border-saffron outline-none transition"></textarea> | |
| </div> | |
| <button type="submit" class="bg-saffron text-white px-6 py-3 rounded-full hover:bg-orange-700 transition w-full"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-16 bg-saffron-light"> | |
| <div class="container mx-auto px-4 max-w-4xl"> | |
| <h2 class="text-3xl font-bold text-center mb-12 sanskrit-font">Frequently <span class="text-saffron">Asked Questions</span></h2> | |
| <div class="space-y-4"> | |
| <!-- FAQ 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="faq-toggle w-full text-left p-4 flex justify-between items-center"> | |
| <span class="font-medium">How does the AI Pujari work?</span> | |
| <i class="fas fa-chevron-down text-saffron transition-transform"></i> | |
| </button> | |
| <div class="faq-content px-4 pb-4 hidden"> | |
| <p class="text-gray-600">Our AI Pujari combines traditional Vedic knowledge with artificial intelligence. It uses natural language processing to understand your questions about rituals, provides step-by-step guidance for pujas with proper timings and materials, and can even recite mantras with correct pronunciation. The system is trained on authentic scriptures and validated by expert pundits.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="faq-toggle w-full text-left p-4 flex justify-between items-center"> | |
| <span class="font-medium">Can the AI perform pujas on my behalf?</span> | |
| <i class="fas fa-chevron-down text-saffron transition-transform"></i> | |
| </button> | |
| <div class="faq-content px-4 pb-4 hidden"> | |
| <p class="text-gray-600">While the AI can guide you through pujas and provide all necessary information, the actual performance of rituals requires human involvement for spiritual efficacy. However, we do offer live connections with real pujaris who can perform pujas on your behalf at sacred locations, with you participating virtually.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="faq-toggle w-full text-left p-4 flex justify-between items-center"> | |
| <span class="font-medium">Is the panchang information accurate?</span> | |
| <i class="fas fa-chevron-down text-saffron transition-transform"></i> | |
| </button> | |
| <div class="faq-content px-4 pb-4 hidden"> | |
| <p class="text-gray-600">Yes, our panchang data is calculated using precise astronomical algorithms and is verified against traditional methods. We account for geographical location to provide accurate timings for sunrise, sunset, tithis, nakshatras, and other astrological details specific to your region.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ 4 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="faq-toggle w-full text-left p-4 flex justify-between items-center"> | |
| <span class="font-medium">How do I book a live pujari?</span> | |
| <i class="fas fa-chevron-down text-saffron transition-transform"></i> | |
| </button> | |
| <div class="faq-content px-4 pb-4 hidden"> | |
| <p class="text-gray-600">You can browse our available pujaris by specialization, language, and availability. Select your preferred pujari, choose a date and time based on their calendar, and make the payment. You'll receive confirmation with a link to join the live session at the scheduled time. Our pujaris can perform rituals at temples or their own shrines as per your requirements.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ 5 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="faq-toggle w-full text-left p-4 flex justify-between items-center"> | |
| <span class="font-medium">Can I get puja materials delivered?</span> | |
| <i class="fas fa-chevron-down text-saffron transition-transform"></i> | |
| </button> | |
| <div class="faq-content px-4 pb-4 hidden"> | |
| <p class="text-gray-600">Yes, we partner with sacred stores across India to deliver authentic puja samagri to your doorstep. When you select a puja, you'll see an option to order the required materials. We ensure all items are fresh, properly sanctified, and include everything listed in the puja procedure.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 bg-saffron text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-2xl font-bold mb-4 sanskrit-font">Subscribe to Our <span class="text-white">Divine Updates</span></h2> | |
| <p class="max-w-2xl mx-auto mb-6">Receive daily mantras, festival reminders, auspicious timings, and spiritual insights directly to your inbox.</p> | |
| <form class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-full focus:outline-none text-gray-800"> | |
| <button type="submit" class="bg-black text-white px-6 py-3 rounded-r-full hover:bg-gray-800 transition"> | |
| Subscribe | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-om text-saffron text-2xl"></i> | |
| <span class="text-xl font-bold sanskrit-font">AI पूजारी</span> | |
| </div> | |
| <p class="mb-4 text-gray-400">Bridging technology and tradition to keep spirituality accessible in the modern world.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-saffron transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-saffron transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-saffron transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-saffron transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-saffron transition">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-saffron transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-saffron transition">Puja Services</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-saffron transition">Live Pujaris</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-saffron transition">Panchang</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Services</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-saffron transition">AI Puja Guide</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-saffron transition">Mantra Recitation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-saffron transition">Live Havan</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-saffron transition">Temple Donations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-saffron transition">Custom Rituals</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Contact</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-saffron mt-1 mr-2"></i> | |
| <span class="text-gray-400">Varanasi, Uttar Pradesh, India</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope text-saffron mt-1 mr-2"></i> | |
| <span class="text-gray-400">support@aipujari.com</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone-alt text-saffron mt-1 mr-2"></i> | |
| <span class="text-gray-400">+91 98765 43210</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 AI Pujari. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-saffron transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-saffron transition">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-saffron transition">FAQ</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="backToTop" class="fixed bottom-8 right-8 bg-saffron text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-orange-700 transition hidden"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // FAQ Toggle | |
| document.querySelectorAll('.faq-toggle').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| content.classList.toggle('hidden'); | |
| icon.classList.toggle('fa-chevron-down'); | |
| icon.classList.toggle('fa-chevron-up'); | |
| }); | |
| }); | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('backToTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('hidden'); | |
| } else { | |
| backToTopButton.classList.add('hidden'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Today's Panchang Date | |
| const today = new Date(); | |
| const day = today.getDate(); | |
| const month = today.toLocaleString('default', { month: 'long' }); | |
| const year = today.getFullYear(); | |
| document.querySelector('.panchang-date .text-5xl').textContent = day; | |
| document.querySelector('.panchang-date .text-xl').textContent = `${month} ${year}`; | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jhparmar/deepsite-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |