Seed Health Landing Page

Overview

This landing page for Seed Health is a masterclass in high-end wellness e-commerce design, blending scientific authority with a minimalist, luxury aesthetic. It features a sophisticated layout that uses ample whitespace, high-fidelity 3D product renders, and specialized video components to build trust and educate the consumer on complex biological products.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast "Naturalist" palette. The background is a soft eggshell/off-white (#fcfcf9), complemented by a deep "Seed Green" (#1a3c1e) for primary text and call-to-action buttons. Accents include a vibrant lime green for promo bars and "Bundle" labels to draw immediate attention.
• Typography: The system utilizes a clean Sans-Serif font with tight letter spacing for headings and a slightly more generous line height for body text (lineheight="8px" on spans). Hierarchy is established through weight shifts (350 for identifiers, bold for headlines) rather than extreme size differences.
• Page Structure:
  1. Parallax Hero: A full-viewport section with a capsule-in-capsule visual that responds to scroll or swiper transitions.
  2. Horizontal Product Carousel: A dark-themed section featuring autoplaying video loops of products on floating cards.
  3. Interactive Visuals: A technical deep-dive section (ViaCap®) using fixed-position text against a dynamic product backdrop.
  4. Social Proof: A custom video gallery (Mux Player integration) for customer stories and testimonials.
• Reusable Components:
  • The "Pill" Button: Dark green rounded buttons with white text, featuring a subtle horizontal slide transition on hover.
  • Video Cards: Product cards that replace static images with a muted playsinline loop video, which is a highly effective way to demonstrate packaging quality.
  • Vertical Swiper: The hero uses a swiper-vertical class to transition between core value propositions while maintaining visual continuity.
• Interaction & Motion: The site relies heavily on parallax effects. Images and text containers move at different speeds (data-swiper-parallax="5%") during scroll. The product carousel uses a custom "grab" cursor transition, indicating a tactile, non-linear browsing experience.
• Technical Clues: Built on Next.js with styled-components (noted by sc- class prefixes). Media is handled via Cloudinary and Mux for optimized, performant video delivery.

Use Cases

• Who should clone this: Brands in biotech, high-end supplements, skincare, or technical consumer electronics that need to explain the "how" behind a premium price point.
• Effective Remixes: Adapt the Video Carousel for a fashion brand to show garment movement, or the Technical Deep-Dive section for a SaaS product to explain a complex software architecture.
• Remix Directions: Swap the organic green palette for high-tech blues (AI/SaaS) or vibrant pastels (Beauty). The information architecture (Problem -> Solution -> Mechanics -> Proof) is universal for conversion-focused landing pages.
• Clone Scope: A full-page clone is best for those wanting to replicate the parallax scrolling experience. Alternatively, the Product Carousel or the Video Testimonial Grid are highly portable sections that can be added to any existing e-commerce site to increase dwell time.