Asana is a masonry-layout landing page built for yoga clothing brands that want to sell through community. A neon-charged color palette, creator-led portrait tiles, and a single full-viewport header work together to pull visitors straight into the product experience. Every tile links to a product detail page, making the entire page a frictionless click-through surface.
by Rocket studio
Loading preview…
Quick summary
Asana is a single-page masonry landing page for activewear and yoga clothing brands. It leads with a dramatic full-viewport portrait header, then flows into an asymmetric creator grid where real people wearing real pieces tell the brand story. The Neon Shock color system keeps every surface visually electric while the layout stays clean and fast to scan.
Who this template is for
This template is built for founders, brand teams, and creatives who want their yoga clothing brand to feel alive rather than polished and corporate. If your audience lives between the studio and the street, this layout speaks their language.
Yoga clothing brands launching a new collection drop
Activewear labels that work with creators, instructors, or community athletes
Fashion and lifestyle brands that want a click-through page to drive traffic to product detail pages
What problem this template solves
Most activewear landing pages look like catalog pages. They lead with product flats, rely on persuasion copy, and fail to build emotional connection before asking for a purchase. That friction kills conversions before a visitor even scrolls.
Flat product photography and generic layouts make it hard to stand out in a crowded activewear market
Visitors leave before clicking through when there is no sense of community or brand identity
Standard grid layouts feel static and do not reflect the energy of an active, movement-forward brand
What you get with this template
You get a fully designed, single-page masonry landing page built around a creator-community concept. The layout is ready to populate with creator portraits and collection drop content the moment you open it.
A full-viewport vertical portrait header section with a headline overlay
An asymmetric masonry creator grid with hover-reveal details and call-to-action links
Full-width gradient collection band sections with pill-shaped call-to-action buttons
Theme
Soft Gradient
Creative direction
Creator Spotlight
Color system
Neon Shock
Style
Masonry/Pinterest
Direction
Click-Through
Page Sections
Full-viewport Portrait Header
Asymmetric Masonry Creator Grid
Hover-reveal Tile Details
Gradient Collection Band Breaks
Neon Shock Color System
Per-tile Gradient Shimmer
Related questions
Does this template include a shopping cart or checkout?
Can I replace the creator portraits with my own images?
How many collection drop bands does the template include?
Is this layout suitable for a brand that does not yet work with creators?
What makes this layout different from a standard product grid?
Feature list
This template ships with a focused set of purpose-built design components. Each one serves the click-through goal directly.
Full-Viewport Portrait Header
The header fills the entire screen with a single vertical portrait shot. A gradient sky shifts from electric orchid to laser lime behind the subject. The ultra-thin headline "MOVE LOUDER." floats at the bottom, setting tone without cluttering the image.
Asymmetric Masonry Creator Grid
The core of the page is a Pinterest-style masonry grid built with creator portraits at varying tile sizes. The layout breathes asymmetrically so the grid feels discovered rather than arranged. Each tile routes directly to the relevant product detail page.
Hover-Reveal Creator Details
Each creator tile reveals the practitioner's name, their practice type, and the exact piece they are wearing when a visitor hovers over it. A "Shop Their Look" call-to-action button appears in hot coral, making the path to purchase immediate and personal.
Gradient Collection Band Breaks
Between creator clusters, a full-width gradient band introduces a new collection drop. These bands carry an "Explore the Drop" pill-shaped button and keep the page rhythm from feeling repetitive as the visitor scrolls.
Neon Shock Color System
The template applies the Neon Shock palette consistently across every component. Electric orchid and laser lime carry the gradient washes. Deep UV black anchors backgrounds. Hot coral activates on hover states and price tags, creating a blacklight-in-a-studio effect.
Subtle Per-Tile Gradient Shifts
Every masonry tile carries its own individual gradient shift. As the eye moves across the grid, the surface appears to shimmer. This keeps the page visually engaging through long scroll sessions without adding heavy visual noise.
Page sections overview
Section
Purpose
Portrait Header
Sets brand energy and introduces the headline
Creator Masonry Grid
Showcases community members wearing the pieces
Collection Drop Band
Introduces a new drop with a direct call to action
Creator Cluster Two
Continues the community narrative with more portraits
Second Drop Band
Maintains page rhythm and routes to another product range
Design & branding system
The visual identity is built on a Soft Gradient theme running through the Neon Shock color system. Dark backgrounds let the garments and people radiate rather than recede.
Core palette: electric orchid (#DA70D6), laser lime (#CCFF00), deep UV black (#0D0015), hot coral (#FF6F61), and clean white (#FAFAFA) for body text
Gradients dissolve at the edges across card backgrounds, tiles, and the header sky, never appearing harsh or banded
Typography uses ultra-thin sans-serif for the hero headline and clean white body text to maintain contrast against dark fields
Mobile & speed optimization
The masonry grid and gradient components are designed to reflow cleanly across screen sizes. Mobile visitors experience the same creator-community feel without layout breakage.
Tile sizes and grid columns adjust for smaller viewports so the asymmetric rhythm is preserved on mobile
Gradient washes and hover states are handled with lightweight CSS so the visual effects do not add unnecessary load weight
Portrait images are the dominant asset type, making image sizing decisions straightforward for maintaining visual quality on all devices
How this template helps you convert
The page removes friction at every scroll point. There is no cart, no form, and no checkout on this page. The entire surface is designed to move visitors one step closer to a product detail page.
Creator portraits build trust before a visitor reads a single line of persuasion copy. Seeing real practitioners in real settings wearing the pieces does the selling.
Every masonry tile and every collection band carries a direct link to a product detail page, so every interaction on the page is a potential click-through moment.
The "Shop Their Look" and "Explore the Drop" calls to action are consistently placed and visually distinct in hot coral, removing any ambiguity about what to do next.
Other information about this template
This template is part of the Masonry and Pinterest-style landing page category within the Fashion and Lifestyle collection. It is particularly well-suited to brands operating at the intersection of activewear, athleisure, and yoga lifestyle content.
Template style: Masonry and Pinterest layout
Creative direction: Creator Spotlight
Header concept: Vertical portrait, full viewport
Landing page direction: Click-through, no on-page cart or forms
Theme: Soft Gradient with Neon Shock color system
Best paired with a product detail page that handles sizing, imagery, and checkout
