SKINĀIRE is a dermatology clinic demo site — a marketing landing page plus a clinical portal prototype for appointment management, patient stories, and before/after treatment galleries. It was built for skin-aire-dermatologia.vercel.app with a warm, clinical brand palette (rosy brown, tan, peach puff).
What it does
Public landing
- Hero — Grainient WebGL background, typewriter headline, and clinic positioning copy in Spanish/English.
- About — Masonry layout with doctor photography and brand story.
- Before / after — Compare slider cards with lightbox modal for treatment results (7 clinical cases).
- Reviews — Patient opinion carousel from structured JSON data.
- Location & contact — Clinic address, appointment calendar UI, and WhatsApp floating button.
- CTA — Conversion-focused sections with Framer Motion animations.
Clinical portal (demo)
A separate authenticated-style portal with:
- Marketing dashboard for clinic staff
- Theme picker (multiple brand palettes)
- Login demo UX with aligned hints
- Inventory and appointment seed data
- Export utilities for image comparisons
Tech stack
| Layer | Choice |
|---|---|
| Framework | Next.js 15 + React 19 + TypeScript |
| Styling | Tailwind CSS 3 |
| Animation | Framer Motion |
| WebGL | OGL (hero grainient background) |
| i18n | Custom dictionary + language context (ES/EN) |
| Deploy | Vercel |
Sections below the fold use next/dynamic with safe chunk imports to reduce initial JS bundle while keeping SSR for SEO.
Development process
Initial landing
First commit delivered the full SKINĀIRE dermatology landing: hero, about, reviews, before/after gallery, contact, footer, navbar, and bilingual support. Brand colors documented in Plan.md (#A57865, #BBA892, #8B6459, #E4C7B8).
Vercel deploy fix
Added explicit npm and Next.js project settings in vercel.json so the demo deploys reliably on Vercel.
Clinical portal
Added the portal demo with marketing dashboard, theme system, and seeded demo data for appointments and inventory.
Portal navigation polish
Improved portal navigation flow and login demo UX for a more realistic staff workflow.
Landing & portal UX polish
Heart favicon, theme picker refinements, and developer notes for maintaining the demo.
Hero typewriter & compare slider
Added HeroTypewriterTitle, before/after reveal slider component, and updated CTA copy.
Card and mobile fixes
Improved before/after card layout, login hint alignment, and mobile responsive fixes across landing and portal.
Lightbox and copy update
Fixed story lightbox viewport sizing on small screens and refreshed hero subtitle copy.
Building Smartclic Demo