Dental & Orthodontics Clinic
A trustworthy cosmetic dental and orthodontics practice website with interactive smile transformation sliders and transparent treatment pricing.
Example of the website this prompt builds. Your result will use your own name, text and images.
- Tech stack
- Next.js (App Router) + Tailwind CSS
- Colour palette
#ffffff#0c4a6e#0284c7#059669
- What it builds
- Emergency dental care top hotline bar
- Navbar with Treatment directory, Doctors, Financing, and Book Appointment
- Hero with instant dental appointment reservation card
- Treatment specialties grid (Invisalign, Dental Implants, Porcelain Veneers, General)
- Interactive Before-and-After smile transformation slider
- Meet our principal dental surgeons with qualifications and awards
- Modern clinic technology highlights (3D Digital Scanning, Painless Laser Dentistry)
- Transparent treatment cost breakdown & 0% APR financing options
- Patient video testimonials and Google 5-star review counter
- Clinic address, free parking directions, and appointment FAQ
- Footer with state dental board certifications
The prompt
Copy everything in the box. Text in quotes and the sample business details are meant to be replaced with your own.
Build a welcoming, modern dental and cosmetic orthodontics clinic website called "Apex Dental Studio & Smile Architecture".
Tech stack: Next.js (App Router) with Tailwind CSS.
Visual style: serene, hygienic, and comforting. Pure white background (#ffffff), deep navy text (#0c4a6e), medical sky blue (#0284c7) for actions, and soft mint green (#059669) for success badges. High-contrast typography and gentle rounded cards designed to alleviate dental anxiety.
Sections, in order:
1. Urgent Hotline Bar: "Tooth pain or dental emergency? Same-day urgent appointments available: (800) 555-DENT".
2. Navbar: logo with subtle tooth smile geometry, links ("Treatments", "Smile Gallery", "Our Team", "Pricing & Insurance", "Contact"), and "Book Online" blue button.
3. Hero: split layout.
- Left side: badge "✦ Top Rated Cosmetic Dental Practice 2026", headline "Modern dentistry designed around your comfort", paragraph explaining pain-free techniques, noise-canceling headphones, and relaxing spa amenities during care.
- Right side: an appointment booking card with Doctor selection, Service type (General Cleaning, Teeth Whitening, Clear Aligners, Dental Implants), Preferred Day, and "Check Real-Time Availability" button.
4. Trust & Credentials Bar: "4.9/5 Rating from 1,800+ patients", "Invisalign Diamond Provider", "Over 15,000 smiles restored", "Accepted by all major insurance networks".
5. Core Dental Services: 6 service cards with transparent pricing estimates: 1) Invisalign Clear Aligners, 2) Same-Day Dental Implants, 3) Porcelain Veneers, 4) Laser Teeth Whitening, 5) Pediatric & Family Dentistry, 6) Sedation & Sleep Dentistry.
6. Interactive Before & After Smile Gallery: split slider showcasing real clinical smile makeovers with patient case notes (e.g., "Full mouth restoration in 3 visits").
7. The Comfort Difference: 4 patient comfort features: Virtual Reality goggles during treatment, needle-free anesthesia, zero waiting times, and complimentary sedation options.
8. Meet the Surgeons: 2 doctor profile cards with portraits, credentials (DDS, FACP), advanced surgical fellowships, and philosophy of care.
9. Transparent Pricing & Financing: explanation of 0% interest monthly payment plans (CareCredit, Sunbit) with calculator starting at $99/mo.
10. Patient Reviews: 3 verified Google reviews with star ratings and reviewer photos.
11. Clinic Location & Hours: operating hours (including Saturday morning slots), address with embedded map placeholder, and subway/parking instructions.
12. Footer: emergency protocols, licensing statements, and copyright.
Quality bar:
- Fully responsive: design mobile-first, then tablet (768px) and desktop (1200px).
- Accessible: semantic HTML landmarks, one h1, alt text on images, visible keyboard focus, colour contrast of at least 4.5:1 for body text.
- Fast: no heavy libraries, lazy-load images below the fold, system or two web fonts at most.
- Use placeholder images from a neutral source and realistic sample copy (no lorem ipsum).
- Respect prefers-reduced-motion for every animation.
- Keep the code clean and commented so I can edit it by hand.How to use this prompt
- 1
Open an AI coding tool. Use any capable assistant: Claude, ChatGPT, Cursor, v0, Bolt, Gemini. Tools that can create files (Cursor, Claude Code, v0, Bolt) are the most convenient because they write the project for you.
- 2
Replace the sample details. Copy the prompt and change the business name, location, colours and any section you do not need. The more specific your details, the better the result.
- 3
Paste the prompt and generate. Send the whole prompt in one message. If the reply is cut off, say “continue from where you stopped”, or ask for one section at a time.
- 4
Run it on your computer. Create a project with “npx create-next-app@latest”, add the generated files, then run “npm run dev” and open http://localhost:3000.
- 5
Review and refine. Check it on a phone-width screen, fix anything that looks off by describing it in plain words, then use the follow-up prompts below to add features one at a time.
- 6
Replace placeholders and publish. Swap in your real text and images, then deploy. Vercel and Netlify both host this kind of site for free.
Follow-up prompts
Send these one at a time after the first version is working. Small, specific requests give much better results than one giant prompt.
Add an interactive draggable before-and-after image comparison slider.
Add an insurance eligibility checker form where patients type their provider name.
Add an interactive smile self-assessment quiz that recommends treatment options.
Add Schema.org Dentist and MedicalBusiness structured data.
Tips for a better result
- Acknowledge dental anxiety directly and highlight comfort amenities to build patient trust.
- Ensure pricing estimates are realistic and feature financing options prominently.
- Want to hand-build a section instead? The Templates library has heroes, pricing tables, FAQs and more with full code.
