Figma Landing Page Gallery Hero

Overview

This project clones the high-impact hero section of the Figma landing page, featuring a centered interactive search bar and a large-scale, horizontally scrolling video carousel. It is an excellent reference for building a modern gallery-style landing page that prioritizes visual proof and interactive discovery over traditional static headlines.

Design System

• Color Palette & Visual Hierarchy: The design uses a minimal light-gray and white foundation to let the vibrant, saturated colors of the carousel slides dominate. High contrast is used for primary calls-to-action (a solid blue button #5551FF) and the black utility navigation.
• Typography: The system relies on a clean, geometric sans-serif (Inter-like) with tight tracking. A massive, centrally-aligned H1 provides the core message, which is then reinforced by a smaller, readable body paragraph block following the carousel.
• Page Structure:
  1. Global Navigation: A standard horizontal bar with dropdown menus and prominent 'Log in/Sign up' actions.
  2. Interactive Hero: A centered "Make anything" input field overlaying a carousel.
  3. Carousel Display: A series of non-standard aspect ratio video slides (approximately 3:4) with a focus on depth (central slide is scaled up, peripheral slides are scaled down and semi-transparent).
  4. Social Proof Section: A dense, grayscale logo grid containing high-authority brands (The New York Times, Slack, Airbnb).
• Reusable Components:
  • Interactive Input Bar: A rounded white container with a focused 'Get started' button.
  • Logo Grid: A flexible, responsive container for grayscale company logos.
  • Slide Navigation: Minimalist circular arrow buttons and a 'pause/play' toggle for the carousel.
• Interaction & Motion: The carousel utilizes 3D transforms (translate3d) and scaling to create a perspective effect. The HTML reveals the use of embedded Vimeo players for the video content, allowing for high-performance looping visuals.
• Implementation Details: The site uses a utility-heavy CSS approach with a structured app container. The carousel is built using aria-roledescription="carousel" and role="group" for the slides, ensuring accessibility for complex visual patterns.

Use Cases

• Who should clone this: Creative agencies, design tool startups, or portfolio platforms that need to showcase a high volume of visual work immediately upon page load.
• Effective Remixes:
  • E-commerce: Replace the design tutorial videos with high-definition product lifestyle shots.
  • SaaS: Use the central input bar as a URL-shortener or a search field for a large documentation database.
• Remix Directions: Swap the playful, artistic carousel content for enterprise-focused screencaps while keeping the 3D perspective transition; adapt the logo grid for a 'Featured In' press section.
• Suggested Clone Scope: Start by cloning the Logo Grid and Carousel Navigation for quick wins, or the full Hero Section to overhaul a product's landing page identity.