SF Dental Clinic

# San Francisco Dental Clinic — Prompt final para o Open Design

- **Negócio:** San Francisco Dental Clinic
- **Nicho / cidade:** Clínica odontológica — San Francisco, CA
- **Prompt-base (biblioteca Motion Sites):** "Local Business Google Maps"
- **Alternativo considerado:** "Wellness Motion Site" (só como referência de calma/leveza no hero)
- **Por que esse estilo:** é o único prompt da biblioteca feito especificamente para negócio local — hero, serviços, localização e contato com telefone clicável e direções no Maps, sem inventar dados.
- **Status dos dados:** telefone, endereço, horários, link de agendamento e avaliações reais NÃO foram fornecidos. O prompt manda omitir o que estiver como [TO BE PROVIDED] — nunca inventar e nunca exibir o placeholder no site.
- **Entregue em:** 14/10/2026 — aguardando geração no Open Design (placar: resposta / reunião / cliente = pendente)
- **✅ VALIDADO por Leonardo em 14/10/2026 (04:04 PDT) — feedback anterior RETIRADO:** ele gerou o site no Open Design a partir deste prompt, anexou o HTML resultante (`~/workspace/user/files/sf-dental-clinic.html`) e declarou: "EU AMEI O RESULTADO FINAL DESTE SITE" — retirando o relato das 02:02 de que esse prompt-base já tinha falhado uma vez (motivo desconhecido) e decidindo que **este prompt pode ser usado como base para os próximos testes de websites motion**. Verificação do Wally sobre o HTML: 0 placeholders, 0 preços, 0 telefones falsos, 0 depoimentos/avaliações inventados (seção de reviews omitida corretamente), 6 serviços e 3 passos fiéis ao prompt, CTAs todos para `#visit` (regra do sem-telefone cumprida), CTA fixo no mobile presente, vídeo do hero referenciado (`hero-video-loop.mp4`). Ressalva técnica: o HTML referencia 3 arquivos externos (`hero-video-loop.mp4`, `about-clinic.jpg`, `hero-poster.jpg`) — precisa deles na mesma pasta para funcionar fora do Open Design.

---

## PROMPT — copiar tudo abaixo e colar no Open Design

Build and deploy a polished, standalone one-page website for the local business described below. Use strong creative judgment to fill gaps without asking questions. Follow every rule below literally.

### BUSINESS

- Name: San Francisco Dental Clinic
- Category: Dental clinic
- City: San Francisco, California
- Language: English (en-US) throughout — perfect spelling and grammar, no lorem ipsum, no placeholder text anywhere on the page
- Phone: [TO BE PROVIDED]
- Address: [TO BE PROVIDED]
- Opening hours: [TO BE PROVIDED]
- Online booking link: [TO BE PROVIDED]
- Verbatim patient reviews: [TO BE PROVIDED]

CRITICAL FACT RULE: Omit any field marked [TO BE PROVIDED] entirely — do not render the placeholder, do not invent a substitute. Never invent prices, discounts, insurance lists, awards, years in business, patient counts, ratings, testimonials, doctor names, or specific medical claims. Neutral supporting copy inferred from the dental category is allowed; factual claims are not.

### VISUAL IDENTITY — calm, clean, premium, human

Create a distinctive identity for a modern San Francisco dental clinic. Real people, real smiles, real care — never robotic, never generic futuristic, no sci-fi imagery, no dark cyber aesthetic.

- Palette: bright clinical white `#FFFFFF` and soft off-white `#F7FAF9` backgrounds, deep teal ink `#123332` for text, calm teal primary `#0E7C7B`, soft aqua tint `#DDEEEA` for section backgrounds and cards, one warm accent used sparingly `#E8B04B` only for small highlights — never for body text
- Typography: `Fraunces` (Google Fonts, regular + italic) for display headings — warm, editorial, trustworthy — and `Inter` (400, 500, 600) for body and UI. Large, confident headings; very little text per screen; generous white space
- Imagery: bright, natural-light photography style throughout — a welcoming modern clinic interior, a real dentist speaking kindly with a real patient, close-ups of natural healthy smiles of diverse adults. No stocky grins with exaggerated whitening, no tools-in-mouth close-ups, nothing clinical or frightening
- Logo: simple wordmark "San Francisco Dental Clinic" with a minimal tooth/smile arc mark drawn as inline SVG in teal; use the same mark as favicon
- Corners and buttons: rounded-full primary buttons, rounded-3xl cards, soft shadows, thin `rgba(18,51,50,0.08)` borders

### HERO — full viewport, cinematic video

- Full-screen hero with a bespoke cinematic background video generated with the highest-quality model available, at least 1080p, upscaled when useful. Regenerate flawed results. Video: slow, calm movement inside a bright modern dental clinic — natural window light, a dentist greeting a relaxed patient, both real people, soft teal and white tones. Autoplay, muted, seamless loop, `playsInline`, with a poster frame
- Soft white-to-transparent gradient overlay for text legibility — keep the scene bright, never dark
- Navigation bar on top: glass pill (`bg-white/70 backdrop-blur-md rounded-full shadow-sm`) with the logo left, links center (Services, About, Visit Us), and a primary teal pill button right: "Book an Appointment"
- Badge above the heading (small glass pill): "Dental care in San Francisco"
- Heading (Fraunces, two lines): "A healthier smile," / "a calmer visit." — second line in italic
- Subtitle (one short sentence only): "Gentle, modern dentistry for you and your family — right here in San Francisco."
- Two CTAs: primary teal pill "Book an Appointment" and secondary white glass pill "Call the Clinic". If the phone number or booking link is [TO BE PROVIDED], both buttons link to the Visit Us / contact section instead — never to a fake number or a dead `#` link
- Bottom of hero: a simple scroll cue and three small feature pills: "Gentle care", "Modern technology", "All ages welcome" — no numbers, no claims

### PAGE STRUCTURE (single page, in this order)

1. **Hero** — as above
2. **Services** — heading "Care for every smile" + six cards, each with an inline SVG icon, a short title, and ONE line of neutral description. Keep only these category-level services, described generically with no prices and no outcome promises:
   - Preventive Care — "Exams, cleanings, and checkups that keep small issues from becoming big ones."
   - General Dentistry — "Everyday treatment to keep your teeth strong, healthy, and pain-free."
   - Cosmetic Dentistry — "Subtle improvements that help your smile look as good as it feels."
   - Teeth Whitening — "A brighter, more even smile with a gentle, professional approach."
   - Implants & Restorative — "Natural-looking solutions to repair or replace damaged teeth."
   - Emergency Dentistry — "Prompt care when tooth pain or an accident can't wait."
3. **About** — heading "Dentistry that feels human" + two short paragraphs of neutral copy about a calm, unhurried, judgment-free experience in San Francisco. No history, no founding year, no team names or bios unless provided above. Beside the text, a bright photo-style image of the clinic team environment with layered parallax
4. **How It Works** — three simple steps in a horizontal row (stacked on mobile): 1 "Book" — "Pick a time that works for you." 2 "Visit" — "Relax — we explain everything before we begin." 3 "Smile" — "Leave with a clear plan and a healthier smile."
5. **Reviews** — include this section ONLY if verbatim patient reviews were provided above; quote them word-for-word with first name only. If reviews are [TO BE PROVIDED], omit the entire section — do not write sample testimonials
6. **Visit Us** — heading "Visit us in San Francisco" + contact card: address, hours, and phone ONLY if provided above (omit each missing line). Phone numbers must be tap-to-call (`tel:` links) and the address must open Google Maps directions. If a booking link was provided, add a primary "Book an Appointment" button; otherwise the card ends with the line "Call us to book your visit." only when a phone exists, and is omitted if it does not
7. **Final CTA band** — soft aqua background, heading "Ready for a healthier smile?" + one primary button "Book an Appointment" following the same link rule as the hero
8. **Footer** — logo, short line "San Francisco Dental Clinic — gentle, modern dentistry in San Francisco.", the same nav links, and contact details only if provided. No fake social links

### MOTION

- Smooth, transform-based scroll parallax with 2–3 layered depths on the hero and About imagery; disable parallax and video autoplay motion effects under `prefers-reduced-motion`
- Staggered fade-up entrance on hero elements (badge, heading lines, subtitle, CTAs) — 0.5s, easing `cubic-bezier(0.22, 1, 0.36, 1)`
- Gentle reveal-on-scroll for section headings and service cards; subtle hover lift on cards and buttons. Calm and slow — no bouncing, no spinning, nothing playful or aggressive

### TECHNICAL

- Single self-contained build, responsive mobile-first: the "Book an Appointment" action must stay visible and reachable on mobile (sticky bottom bar on small screens is welcome)
- Optimize for speed and SEO: semantic HTML, title "San Francisco Dental Clinic — Gentle, Modern Dentistry in San Francisco", meta description, and an OG image from the hero poster frame
- Verify before returning: live video plays and loops, parallax is smooth, every link works, no placeholder or [TO BE PROVIDED] text is visible anywhere, and no invented fact appears on the page
- Deploy to a memorable business-based URL, then return the URL and a three-line design summary

---

## Checklist pós-geração (conferir no Open Design / na preview)

1. CTA "Book an Appointment" visível no mobile (ideal: barra fixa embaixo) e telefone clicável (`tel:`) — se telefone não foi fornecido, nenhum número falso pode aparecer
2. Serviços acima da dobra seguinte ao hero, com no máximo 1 linha de descrição por card
3. Nenhum dado inventado: sem preço, avaliação, depoimento, anos de mercado, nomes de dentistas ou lista de convênios
4. Nenhum texto placeholder ou "[TO BE PROVIDED]" visível em lugar nenhum da página
5. Visual claro, calmo e humano — gente real, clínica real, nada robótico/futurista — e vídeo do hero rodando em loop sem travar