dental-clinic-hariyom

byYogesh Patel

Act as principal full-stack/AI/3D/UX/security/SEO/DevOps engineer. Build a production-ready full-stack website for HARIYOM DENTAL CLINIC. Doctor: Dr. Priya Patel. Hours: 10 AM–8 PM. Languages: English, Hindi, Gujarati. GOAL Create an original premium dental-tech experience. Use the supplied Hariyom logo/mascot image and user-provided Instagram Reel only as inspiration. Do not copy the Reel, other clinics or copyrighted assets. Make it cinematic, trustworthy, friendly and human. Patient journey: WOW → CURIOUS → TRUST → UNDERSTAND → COMFORTABLE → CHAT WITH AI → BOOK. DESIGN Premium, friendly, trustworthy, modern, clean, calm and human. Palette: deep navy/royal blue, turquoise/cyan, green, soft pink, white/light blue. Clean typography, whitespace, depth and polished UI. Avoid generic hospital templates, excessive glassmorphism/neon, cheap stock photos, clutter and unnecessary motion. Homepage: cinematic hero, trust, interactive tooth, services, treatment journey, Why Hariyom, doctor, AI assistant, education, genuine testimonials, gallery, appointment, contact, footer. HERO / 3D Hero headline: “Your Smile Deserves Exceptional Care.” Supporting: “Modern dentistry, advanced technology, and compassionate care — designed around you.” CTA: “Book an Appointment”; secondary: “Chat with AI Dental Assistant”. Realistic 3D tooth in a clean medical environment. Start with macro enamel view; on scroll, camera moves around/inside tooth, gums/particles/light subtly animate, tooth becomes healthier, then reveal HARIYOM DENTAL CLINIC. Scroll: tooth→rotate→enter→structure→treatment→healthy→booking. Use Three.js, React Three Fiber, Drei, GSAP and/or Framer Motion. Use optimized GLB/GLTF, Draco/Meshopt, realistic materials, studio/rim lighting. Provide low-GPU/mobile fallback and reduced motion. Never let animation block scrolling or hurt performance. INTERACTIVE TOOTH Allow rotate, zoom, hotspots and clickable Gum, Enamel, Dentin, Root, Nerve. Show short educational panels; never diagnose. Original animations: tooth→smile; inside tooth enamel→dentin→pulp; cleaning particles; dental scan/AI interface; implant; braces; smile transformation; clinic transition. Procedure visualizer example: root canal problem→cross-section→infection→cleaning→filling→restoration→healthy result. Clearly state illustrations are educational and vary by patient; never imply AI diagnosis. SERVICES Services: check-up, cleaning, root canal, implants, crowns/bridges, whitening, cosmetic, orthodontic, pediatric, wisdom tooth, gum care, smile makeover. Each has 3D icon, approved description, Learn More and Book Appointment. Hover: subtle 3D tilt/depth/glow. Use only approved clinic data. DOCTOR / TRUST Dr. Priya Patel profile with photo placeholder, verified qualifications, experience, practice areas and patient-first philosophy. Why Hariyom: patient-first care, modern technology, comfortable environment, personalized treatment, transparent communication, family-friendly care. Testimonials must be genuine clinic-provided; otherwise admin placeholders. Gallery must use clinic-owned assets with lightbox/lazy loading. Never invent credentials, testimonials, prices or claims. AI DENTAL RECEPTIONIST Floating 3D tooth/assistant chatbot. Agent: “Yogesh – AI Dental Receptionist.” Personality: warm, professional, calm, caring, human-like. Auto-detect English/Hindi/Gujarati. Greeting: “Hi! I’m Yogesh, Hariyom Dental Clinic’s AI Dental Receptionist. How can I help you today?” Quick actions: Book Appointment, Reschedule, Cancel, Ask About Treatments, Clinic Timings, Location, Emergency Help, Talk to Clinic Staff. AI is receptionist/educational assistant, NOT a doctor. Never diagnose, prescribe medicine/dosage, guarantee outcomes, replace dental consultation, invent facts or claim certainty. For symptoms say a dentist must examine the patient. For severe swelling, uncontrolled bleeding, breathing/swallowing difficulty, serious trauma or unconsciousness: advise urgent emergency care, never delay care for chat, and escalate when configured. LLM + RAG Frontend: Next.js + React + TypeScript + Tailwind. Backend: Next.js API or Python FastAPI. LLM: OpenAI API. Optional LangChain/LangGraph. DB: PostgreSQL + Prisma. Vector: pgvector/Qdrant. Embeddings: OpenAI. Cache: Redis. Storage: S3-compatible. RAG: approved clinic info, services, education, doctor, hours, policies, location, FAQs, pricing, emergency and pre/post-care. Answer only from approved knowledge, live availability and approved education. If unknown: “I don’t have that information right now. I can connect you with the clinic team.” Never invent price, availability, qualifications, duration, diagnosis or policy. APPOINTMENTS Collect name, phone, email, preferred date/time, new/existing, reason and language. Show summary and require explicit confirmation. State machine: GREETING → INTENT → NAME → PHONE → DATE → TIME → REASON → AVAILABILITY → CONFIRM → BOOK → CONFIRMATION → COMPLETE. LLM handles language; backend owns business logic and DB changes. Tools: clinic info, services, doctor, availability, create/reschedule/cancel appointment, WhatsApp confirmation, lead, staff escalation. Statuses: PENDING, CONFIRMED, RESCHEDULED, CANCELLED, COMPLETED, NO_SHOW. DATABASE patients, appointments, doctors, services, clinic_settings, chat sessions/messages, leads, notifications, admins, audit_logs, knowledge documents. ADMIN / CMS Admin: appointments, leads, chats, requests, inquiries, service interest, analytics; day/week/month calendar; confirm/reschedule/cancel/complete/contact/note. CMS: clinic info, doctor, services, FAQs, testimonials, gallery, hours, appointment settings, AI knowledge base, WhatsApp templates. CMS updates need no developer. WHATSAPP Integrate Meta WhatsApp Business API or approved provider. After confirmation send consent-based WhatsApp with patient, doctor, date/time; optional 24h/2h reminders; approved templates; secure webhook. Future voice: ElevenLabs + Whisper/STT + OpenAI on same backend; English/Hindi/Gujarati. SECURITY / PRIVACY Treat health data as sensitive. HTTPS, encryption in transit/at rest where applicable, secure authentication, RBAC, input validation, rate limiting, CSRF/XSS/SQLi protection, secure cookies, session expiry, audit logs, PII minimization, prompt-injection protection, RAG source validation and secure logging. Secrets only in server environment. Never expose API keys or sensitive patient data in frontend/localStorage. Consent: “By continuing, you agree that your information may be used to respond to your request and manage your appointment.” Include Privacy Policy, Terms and Medical Disclaimer. SEO Support local terms such as Dentist near me, Dental clinic [CITY], Dentist [AREA], Root canal [CITY], Dental implant [CITY], Teeth whitening [CITY], Pediatric dentist [CITY]. Implement metadata, OG, canonical, sitemap, robots, breadcrumbs, FAQ and Dentist/LocalBusiness schema. Avoid unsupported “best” claims. PERFORMANCE / MOBILE / ACCESSIBILITY Target Lighthouse 90+; SEO 95+. Optimize models, textures, images, fonts, JS/CSS using lazy loading, dynamic imports, code splitting, WebP/AVIF, compressed textures, LOD and GPU-friendly rendering. Load heavy 3D after critical content. Mobile must be touch-first with reduced 3D/fallback. Mobile nav: Home, Services, AI Assistant, Appointment, Contact. Sticky “Book Appointment”. Use keyboard navigation, ARIA, contrast, focus, alt text, reduced motion and accessible chatbot/forms. MICRO-INTERACTIONS Use subtle button depth, chatbot pulse, service 3D tilt, section reveals, tooth loader and short transitions; never overload. ARCHITECTURE Structure: app/, components/{3d,animations,chatbot,booking,services,ui}, lib/{ai,rag,db,whatsapp,security}, api/, prisma/, public/{models,textures,images}, hooks/, types/, config/, docs/. APIs for chat, appointments/availability, leads, WhatsApp webhook, contact and admin auth. Validate with Zod/equivalent; safe errors; no stack traces. ANALYTICS Events: hero_cta_clicked, service_viewed, chat_opened, chat_started, appointment_started, appointment_completed, whatsapp_clicked, phone_clicked, directions_clicked. Avoid sensitive health data. LOADING / 404 Loader: short glowing tooth outline + “Preparing your smile experience…”. 404: friendly 3D tooth + “Oops! This page needs a dental check-up.” + Back to Home. TESTING / DEPLOYMENT Unit/API/integration/E2E tests for booking, cancellation, rescheduling, chatbot, auth, admin, WhatsApp, RAG, errors/mobile. Provide .env.example, Dockerfile, docker-compose.yml, README, migrations, deployment/env docs and CI/CD. Run lint, typecheck, tests and production build; fix every error. No TODO/FIXME, broken links, console errors, fake APIs, hardcoded secrets or production placeholders. Deploy: Vercel frontend, Cloud Run/AWS backend, managed PostgreSQL, Docker. FINAL DELIVERABLE Do not create only a visual prototype. Deliver working frontend, backend, PostgreSQL, admin dashboard, AI chatbot/RAG, appointment system, WhatsApp architecture, 3D animations, responsive UI, SEO, security, accessibility, analytics, tests, Docker, deployment docs, environment configuration, README and future voice-AI architecture. FINAL CREATIVE STANDARD Combine premium product presentation, medical technology, original friendly 3D, modern dentistry and AI. Core feeling: “Technology is advanced here, but the care still feels human.”