crimson-clinic

byKarthikeya Podicheti

MASTER PROMPT — Dental Clinic Website Builder Paste this entire prompt into any AI website builder (Bolt.new, Lovable, v0.dev, Cursor, etc.) Build a complete, production-ready dental clinic website with the following specifications. Do NOT use generic templates — every design decision must feel custom and professional. BRAND & IDENTITY Clinic Name: [CLINIC NAME] (replace with actual name) Tagline: Advanced Treatments | Personalized Care | Commitment to Comfort Primary Color: Deep teal/cyan — use #01696f as primary, #0c4e54 as hover Accent Color: Warm white surfaces (#f7f6f2) with teal CTAs Font: Use Satoshi (from Fontshare CDN) for body, and Instrument Serif (Google Fonts) for display headings Tone: Trust, professional, warm — NOT clinical or cold. This is a premium local clinic. SITE STRUCTURE (All Sections on Homepage) 1. STICKY NAVIGATION BAR Logo (left) — custom SVG tooth/smile icon in teal + clinic name text Nav links: Home | Services | About | Branches | Book Appointment Right side: Phone number (tel: link) + "Book Appointment" CTA button (teal, rounded) Mobile: Hamburger menu that slides in from the right Sticky on scroll, subtle shadow appears on scroll 2. HERO SECTION Headline: "Expert Dental Care, Close to Home" (large display text) Subheadline: "X Clinics in [City] — Advanced Treatments, Pain-Free Smiles, Always Within Reach" Body copy: "Advanced Treatments | Personalized Care | Commitment to Comfort" Two CTAs side by side: "Book an Appointment" (filled teal) + "Enquire Now" (outline teal) Background: Clean white/off-white with a subtle teal gradient overlay on the right side; place a high-quality dental/smile image on the right (hero split layout — 50/50 text | image) 3. STATS BAR (Full Width, Teal Background) Four animated counters in a horizontal row: 15+ Branches 22+ Years Experience 25,000+ Implants Placed 2,00,000+ Happy Patients Use countUp animation (numbers count up on scroll-into-view). 4. QUICK CONTACT INFO BAR Three icon + text blocks in a horizontal strip: 📞 Phone: [NUMBER] — "Need a Dental Service?" 🕐 Hours: Mon–Sun, 9 AM to 9 PM 📅 "Book an Appointment" button → scrolls to booking form 5. SERVICES SECTION Section title: "Complete Dental Care, Under One Roof" Subtitle: "From first checkup to final smile. No referrals. No running around." Display services as a scrollable card carousel on mobile, 3-column grid on desktop Each card: icon (SVG, teal), service name, 1-line description, "View More →" link Services to include (13 total): Pediatric Dentistry Preventive Dentistry Root Canal Treatment Teeth Whitening Teeth Braces & Clips Teeth Gap Treatment Wisdom Tooth Removal Bridges & Crowns Clear Aligners Cosmetic Dentistry Dental Fillings Dental Implants General Dentistry "View All Services →" button below the grid 6. ABOUT SECTION (Two-Column Layout) Left: Image (doctor/clinic interior photo placeholder) Right: Badge: "About Us" Heading: "A Great Place for Dental Care" Paragraph: 22+ years of experience, 15+ branches, 60+ qualified dentists, focused on quality care in a friendly and comfortable setting. Two highlighted stats in boxes: "98% Invisalign Completion Rate" | "100% Patient Satisfaction" "Read More →" link button 7. BRANCH LOCATOR SECTION Title: "Find a Dental Clinic Near You" A dropdown selector to pick a branch from the list: AS Rao Nagar, Dilsukhnagar, Gachibowli, Kompally, Kukatpally (KPHB), Madinaguda, Nallagandla, Srinagar Colony, Vanasthalipuram, Puppalaguda, + any others On selection, show: Branch name as heading Full address Phone number (clickable tel: link) "Get Directions" button → opens Google Maps link "View Branch Details" button Embed a Google Maps iframe showing the selected branch location (or a static map placeholder) 8. APPOINTMENT BOOKING FORM SECTION Title: "Book an Appointment Today" Background: Light teal/off-white tinted section Form fields: Full Name (required) Email (required) Mobile Number (required) Select Clinic (dropdown — same list as branch locator) Preferred Date (date picker) Preferred Time (time picker) Message (textarea, optional) Submit button: "Confirm Appointment" — teal, full width on mobile On submit: show a success message "We'll confirm your appointment shortly!" (no backend needed, just UI feedback) 9. WHY CHOOSE US SECTION Title: "Why Choose [Clinic Name]?" Subtitle: "Every visit is based on certified standards, a skilled team, and genuine commitment." Render as a two-column checklist with teal checkmark icons: ✅ 15+ years of consistent patient care ✅ ISO 9001:2015 certified clinics ✅ 60+ qualified dental professionals across all locations ✅ Specialists in orthodontics, prosthodontics, periodontics & oral surgery ✅ 50,000+ successful procedures completed ✅ Customized treatment plans for every patient ✅ Full transparency on diagnosis and treatment options ✅ Regular training in latest dental advancements ✅ Strict hygiene and safety protocol audits ✅ 98% Invisalign completion rate ✅ Trusted by 2 lakh+ patients 10. FINAL CTA BANNER Full-width teal background section Large headline: "Don't Let Your Oral Health Take a Backseat!" One button: "Book an Appointment" → scrolls to form 11. FOOTER Logo + clinic name (left) Newsletter email input + Subscribe button Social media icons: Facebook, Instagram, Twitter/X, YouTube, LinkedIn (all open in new tab) Contact section: branch selector dropdown → shows address + phone Copyright line: "© 2025 [Clinic Name]. All Rights Reserved. | Privacy Policy | Disclaimer" Design credit (optional) 12. FLOATING ELEMENTS (Always Visible) Bottom-right: WhatsApp chat button (green circle, WhatsApp SVG icon) — links to https://wa.me/91XXXXXXXXXX Bottom sticky bar on mobile only: Two buttons side by side — "📞 Call Now" + "📅 Book Appointment" DESIGN SYSTEM :root { --primary: #01696f; --primary-hover: #0c4e54; --primary-light: #e0f0f1; --text: #1a1a1a; --text-muted: #555; --bg: #f7f6f2; --white: #ffffff; --radius: 0.75rem; --shadow: 0 4px 16px rgba(0,0,0,0.08); } Fonts: Load Satoshi from https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap and Instrument Serif from Google Fonts Body font: Satoshi, 16px base Headings: Instrument Serif for hero/section titles; Satoshi Bold for sub-headings Mobile-first responsive — test at 375px, 768px, 1280px Smooth scroll behavior CSS animations: counters animate on scroll, cards fade-in on scroll using IntersectionObserver All hover states on buttons and cards (subtle lift + shadow) Light/dark mode toggle in the nav (optional but preferred) TECHNICAL REQUIREMENTS Single HTML file with embedded CSS and JS (no frameworks required, pure HTML/CSS/JS) No backend — form submission shows success message only All external links open in target="_blank" rel="noopener noreferrer" Semantic HTML: <header>, <nav>, <main>, <section>, <footer> One <h1> per page; proper heading hierarchy (h1 → h2 → h3) All images include alt, width, height, and loading="lazy" Smooth anchor scroll for all in-page navigation links Sticky "Call Now" + "Book" bottom bar visible on mobile WhatsApp floating button always visible PLACEHOLDER INSTRUCTIONS Replace these before delivery to client: [CLINIC NAME] → actual clinic name [NUMBER] → phone number [City] → city name Branch addresses → real addresses Google Maps links → actual Maps URLs WhatsApp number in the wa.me link All [LOGO] references → actual logo file or describe it for SVG generation Output: One complete .html file, production-ready, with all sections above. Make it look premium — not like a free WordPress theme.