Live site: lorena-rozas.vercel.app Stack: Next.js 15 · TypeScript · Tailwind CSS v4 · Framer Motion · Vercel · MagicPath AI Project Overview

Lorena Rozas is an Argentine digital marketing educator who built a 7,000-student platform called Revodigital from scratch — going from zero to $7,000 USD in her first 28 days. She needed a landing page that matched the ambition of that story: premium, persuasive, and built to convert on mobile.

Lorena's audience is first-time digital entrepreneurs browsing on their phones. The page had to do three things simultaneously: build trust fast, explain a three-tier course offering, and close the sale — all without requiring a single phone call or sales conversation.

Additional constraints:

Argentine market requires Mercado Pago as primary payment gateway

Many buyers need a secondary path to confirm payment via WhatsApp

Heavy social proof (20+ testimonial photos) had to feel premium, not cluttered

No prior web presence — zero to shipped in one build cycle

The visual system centers on a near-black (#080808) base with a warm gold accent (#C4963A) — a palette that signals luxury education without feeling corporate. Every heading uses font-normal weight to stay elegant rather than aggressive, and italic gold spans throughout the copy add personality without sacrificing readability.

Typography and spacing were calibrated mobile-first. Sections are tight enough to keep momentum but breathable enough to let the content land. The hierarchy is deliberate: story → credibility → content → social proof → price → action.

Next.js 15 App Router with TypeScript — full type safety, zero runtime errors

Tailwind CSS v4 (@import "tailwindcss") — utility-first with custom layer overrides for brand consistency

Framer Motion throughout: useInView scroll triggers, AnimatePresence transitions, directional slide animations

Infinite-loop carousel built from scratch — 3× photo array with silent position reset, no visible jump, auto-advance every 4 seconds

Vercel deployment with automatic CI/CD from GitHub

Swipeable Testimonial Lightbox Clicking any testimonial photo opens a full-screen lightbox. Users can swipe left/right (drag with velocity detection), use arrow keys, tap navigation dots, or click arrows. Direction-aware slide animation (x: dir * 80px) makes the gesture feel native. 20+ photos across three sections: students, colleagues, and ROI screenshots.

Accordion Course Modules Five course modules expand on tap, revealing topic bullets with a + → × rotation and smooth height animation. Replaces a static list that was invisible on mobile.

Dual Payment CTA Each pricing card has two CTAs: a primary gold button linking to Mercado Pago, and a secondary WhatsApp button with a pre-filled Spanish message that includes the plan name and confirms payment. Covers 100% of buyer types in the Argentine market.

Three-Plan Pricing Layout Esencial ($96 ARS) and Premium ($160 ARS) sit side by side; Lits ($267 ARS) spans full width below with a "Todo incluido" badge. The "Más elegido" badge on Premium drives anchoring without tricks.

YouTube Embed + Context Copy Direct embed — no click-to-play overlay, loads immediately. A subtle notice below the video instructs viewers to watch until the end before accessing course content, reducing drop-off at the decision stage.

The page launched on Vercel with automatic deploys tied to the GitHub repo. Content, copy, and pricing were iterated in real time — over 30 production pushes during a single build session — with zero downtime.

The result is a mobile-first sales page that handles the full conversion funnel: from cold traffic seeing the hero, through video and social proof, to payment — without any external CMS, third-party forms, or unnecessary JavaScript weight.