# Hero Section Components > Hero section variants: centered text, split layout, video background, animated gradient, and minimal > 히어로 섹션 변형: 중앙 텍스트, 분할 레이아웃, 비디오 배경, 애니메이션 그라디언트, 미니멀 **Category**: Components | **Tags**: hero, header, above-fold, animation, tailwind | **Difficulty**: Beginner ## Preview ``` +---- Centered Hero ----+ +---- Split Hero ------+ | Build Amazing Things | | Text | [Image] | | [CTA] [Secondary] | | CTA | | +-----------------------+ +----------------------+ +---- Gradient Hero ----+ +---- Minimal Hero ----+ | ~~~animated colors~~~ | | | | Bold Statement | | One line. That's it. | | [CTA] | | [CTA] | +-----------------------+ +----------------------+ ``` ## Quick Start ```bash # 1. Pick a hero style and copy the HTML block # 2. Replace headline, subtext, and CTA buttons # 3. Each hero is self-contained (no dependencies between them) ``` ## Full Code ```html Hero Components
Announcing v3.0

Build Amazing
Things Faster

The developer platform that helps you ship products 10x faster with AI-powered tools and seamless collaboration.

Get Started Free Live Demo →
For Developers

Ship Code
With Confidence

Automated testing, deployment pipelines, and real-time monitoring in one platform. Push code and sleep well.

Start Building Read Docs →
99.99%
Uptime SLA
50ms
Avg Latency
10K+
Teams
$ npx create-app my-project
Creating project...
✓ Dependencies installed
✓ CI/CD configured
✓ Monitoring enabled

$ git push origin main
Deploying to production...
✓ Live at https://my-project.app

The Future of AI Development

Build, train, and deploy AI models with zero infrastructure. From prototype to production in minutes.

Start Free Trial

No credit card required

Create Without
Limits

The creative platform for the next generation of makers.

Get Started Watch Video ▶

Simple tools for
complex work.

Less noise. More focus. The workspace that gets out of your way.

Try It Free
``` ## Customization Guide - **Centered hero**: Add a background image with `bg-[url('...')]` and overlay with gradient - **Split hero**: Replace the terminal mockup with a product screenshot or illustration - **Gradient hero**: Change gradient colors in the `from-` `via-` `to-` classes - **Video hero**: Uncomment the `