Lóvi AI Skin Care Landing Page

Overview

Lóvi is a minimalist landing page designed for an AI-powered health and beauty app. It stands out as a strong clone reference due to its sophisticated use of scroll-triggered animations, high-fidelity iPhone mockups integrated with video, and a clean "above-the-fold" structure that prioritizes quick brand recognition and a clear value proposition.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast monochromatic base (white background with deep navy/black text) accented by soft gold/champagne for secondary elements like the award badge. This creates a clinical yet premium aesthetic appropriate for medical technology.
• Typography: The hierarchy features a bold, sans-serif display font (ES Rebond Grotesque) for primary headlines, utilizing tight letter-spacing and negative tracking for a modern feel. The body text and sub-captions use Geist, providing excellent legibility for instructional content.
• Page Structure: The layout follows a classic vertical stack: a header with download links, a centered hero text block, a floating social proof badge, and a focal-point mockup. Below the fold, the design transitions into an animated text section where individual characters react to scrolling.
• Reusable Components:
  • The Hero Badge: A small, pill-shaped floating label with an icon for achievements or announcements.
  • iPhone Frame: A reusable 15 Pro mockup shell designed to contain looping video content (.mp4), ideal for product demos.
  • Download Button: The standard App Store badge positioned in the top right serves as a persistent Call to Action (CTA).
• Interaction and Motion: The hero section uses entrance animations for typography (fades and slight translations). The "face scan" mockup features a scanning line animation and overlaid video. The implementation uses Framer for smooth scroll-linked character animations (visible in the _animatedtext__icc spans in the HTML).
• Responsive Behavior: The design utilizes three specific breakpoints (1200px, 810px, and mobile). The centered hero text and mockup container are designed to scale fluidly, ensuring the focal video remains the center of gravity on smaller screens.

Use Cases

• Who should clone this: Developers building landing pages for Mobile-first SaaS, AI tools, or health/skincare apps that need to showcase a "scanning" or "analysis" process.
• Effective Remixes: This pattern is perfect for any product that relies on hardware interaction; the iPhone mockup can be swapped for a different device, and the background video can be replaced with a live dashboard demo.
• Practical Directions: Builders should clone the "fold" section for a high-impact landing page. A quick remix would involve swapping the navy/white color scheme for brand colors while retaining the precise typography scale and mobile-mockup centering.
• Suggested Scope: This is best as a full-page clone to preserve the relationship between the headline and the hero animation, though the animated text-reveal component is highly valuable as a standalone section clone.