Finn Pet Supplements Landing Page

Overview

Finn Pet Supplements is a premium D2C e-commerce landing page that expertly balances playful brand identity with scientific credibility. It serves as an excellent clone reference for its sophisticated use of parallax typography, high-impact product photography, and a clean, conversion-focused layout that remains airy despite heavy content.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast foundation of 'Finn Navy' (#1F1646) for deep readability, set against a soft, off-white background (#EBEBEB). Accents like 'Sustain Green' and 'Safety Orange' are used sparingly for CTA buttons and labels, creating a clear hierarchy that directs the eye toward purchase actions.
• Typography: The system utilizes bold, oversized sans-serif headings (text__H1-sc-4vc7pu-0) for section intros, often with high tracking and low opacity to act as textural backgrounds. Body copy uses a clean, legible sans-serif with ample line height. A monospaced font is used for metadata like reviewer names to provide a technical, trust-worthy feel.
• Page Structure: The flow begins with a lifestyle-heavy jumbotron, followed by a high-speed logo ticker. It then transitions into category sections (Supplements, Best Sellers, Bundles) separated by large 'DropHeader' titles. The latter half focuses on trust-building through veterinary endorsements and customer reviews.
• Reusable Components:
  • Marquee/Ticker: A smooth, CSS-translated logo element for social proof.
  • Product Cards: Minimalist containers featuring a product image, title, price, and primary 'Shop Now' button.
  • DropHeaders: Large, atmospheric text blocks designed for parallax scroll effects.
  • Tertiary Grid: A layout pattern for bundles that uses varying image aspect ratios to maintain visual interest.
• Interaction & Motion: The site relies heavily on scroll-triggered transforms. Product headers (DropHeader__Container) use translate3d to move at a slower rate than the scroll (parallax), and product group containers reveal themselves with opacity fades (Singles__Grid).
• Implementation Clues: Built with Gatsby (React) as indicated by the ___gatsby and gatsby-image-wrapper IDs and classes. Styling is handled via Styled Components, evidenced by the hashed class names (e.g., Jumbotron__Section-sc-wnnthn-0).

Use Cases

• Who should clone this pattern: Developers building modern D2C health, wellness, or pet-care brands that need to look both fun and professional.
• Remix Directions: Swap the pet imagery for organic beauty products or high-end supplements. The 'Fetch the Right Solution' quiz section can be adapted for any diagnostic sales funnel (e.g., skincare routine finders or subscription box curators).
• Practical Adaptations: The logo ticker and veterinary endorsement sections are highly modular and can be extracted for use on existing landing pages that lack social proof.
• Suggested Clone Scope: A full-page clone is ideal for those wanting to master advanced parallax and intersection observer effects in React/Gatsby. For a quicker win, clone the 'Best Sellers' grid and the 'DropHeader' system to elevate a standard Shopify-style layout.