Rocc Naturals Video Landing Page

Overview

This Gatsby-powered site is a high-impact, single-page landing destination designed for brand transitions or simple product showcases. It utilizes a high-quality, full-screen video background with floating 3D elements to create depth and motion without complex CSS animations. It is an excellent clone reference for developers needing a stylish "coming soon," "closed for rebrand," or immersive landing page that prioritizes atmosphere over density.

Design System

• Color Palette & Visual Hierarchy: The palette is dominated by earthy deep greens and soft pink accents, grounded by a clean white grid tile background within the video asset. The hierarchy is extremely focused: a top-aligned text announcement, a centered visual focal point, and a bottom-aligned call-to-action (CTA).
• Typography: The design uses a clean, sans-serif typeface. The informational text is small and centered to avoid distracting from the video, while the "Contact" button provides a clear, high-contrast interactive element.
• Page Structure: The site follows a shallow, single-view structure: a full-screen video container (video-banner) serves as the foundation, topped by three informational layers (header text, central branding/logo, and footer button).
• Reusable Components:
  • Video Banner: A robust wrapper set to autoplay, muted, and loop that acts as the primary UI layer.
  • Overlay Contact Form: A hidden-by-default React/Gatsby state-managed form (contact-form) that utilizes a clear "Close" span and standard text inputs.
  • Ghost Button: A minimalist, border-based button that triggers the form overlay.
• Interaction Patterns: The primary interaction is the state change when the "Contact" button is clicked, which toggles the visibility of the .contact-form div. The background video provides passive motion, giving the static page a dynamic feels.
• Implementation Clues: Built with Gatsby, the site leverages a structured gatsby-focus-wrapper for accessibility and a simple POST method for form submission, including a bot-field honey-pot input for spam prevention.

Use Cases

• Who should clone this: Brands undergoing a transition, product launches needing a high-fidelity visual entrance, or artists looking for a portfolio landing page that leads with video content.
• Product Remixes: This pattern is ideal for luxury goods, skincare, or boutique furniture where the aesthetic appeal of the product (via video) is more important than technical specifications.
• Remix Directions:
  • Quick Section Clone: Extract the .video-banner CSS and HTML to create a high-impact hero section for a larger website.
  • Full-Page Clone: Scale the concept into a link-in-bio page by replacing the centered product with a list of links over the video loop.
  • Functional Remix: Swap the contact form for an email signup (Mailchimp/ConvertKit) to use the page as a lead generation tool for a new brand launch.