Building SKINĀIRE Dermatología

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

Sections below the fold use next/dynamic with safe chunk imports to reduce initial JS bundle while keeping SSR for SEO.

Development process

SKINĀIRE is a Next.js 15 app with the App Router, bilingual copy via a custom dictionary context, and deploy on Vercel. Brand colors are documented in Plan.md (#A57865, #BBA892, #8B6459, #E4C7B8).

Marketing landing (first commit)

• Built hero, about, reviews, before/after gallery, contact, footer, and navbar in one release.
• Added ES/EN language switching with a lightweight context provider (no heavy i18n framework).
• Used Framer Motion for section transitions and OGL for the hero grainient background.
• Documented typography and color tokens in Plan.md for consistent clinic branding.

Vercel deploy reliability

• Added explicit vercel.json settings for npm install and Next.js framework detection.
• Followed Vercel Next.js deployment docs to fix failed preview builds.
• Confirmed production URL serves SSR pages and static assets correctly.

Clinical portal demo

• Added a staff-facing portal with dashboard, theme system, and seeded appointment/inventory data.
• Improved portal navigation and login demo UX so the flow reads like a real clinic workflow.
• Used next/dynamic for below-fold sections to keep the initial bundle smaller.

Landing and portal UX passes

• Shipped heart favicon, theme picker refinements, and maintainer notes in the repo.
• Built HeroTypewriterTitle and a before/after compare slider; refreshed hero CTA copy.
• Fixed before/after card layout, login hint alignment, and mobile breakpoints across landing + portal.
• Patched story lightbox viewport sizing on small screens.