# Premium Dark UI - Layouts Common layout patterns for premium dark UI. --- ## Hero Section ```tsx

Build Production

Your subtitle goes here

``` --- ## Feature Grid ```tsx

Powerful

{features.map((feature) => (

{feature.title}

{feature.description}

))}

``` --- ## CTA Section ```tsx

Get

Join thousands of users

``` --- ## Responsive Design ```tsx // Mobile: Stack, Desktop: Grid

{/* Items */}

// Mobile: Full width, Desktop: Constrained

{/* Content */}

// Mobile: Small text, Desktop: Large text

Responsive Heading

// Mobile: Center, Desktop: Left

{/* Content */}

``` **Breakpoints**: - `sm`: 640px (tablets) - `md`: 768px (tablets/small laptops) - `lg`: 1024px (laptops) - `xl`: 1280px (desktops) --- ## Starter Template ```tsx export default function Page() { return (

{/* Hero */}

Your

Subtitle here

{/* Features */}

Amazing

Feature 1

Description

{/* More cards */}

{/* CTA */}

Get

) } ``` --- ## Related Files - [Colors & Typography](./premium-dark-ui-colors.md) - [Components](./premium-dark-ui-components.md) - [Advanced](./premium-dark-ui-advanced.md)