Hero Section Components

Basic Hero

Greek Mythology

Explore the timeless tales of gods, heroes, and monsters that shaped Western civilization.

<div class="hero-section hero-basic">
    <h1>Page Title</h1>
    <p class="hero-description">Description</p>
</div>

Hero with Tags

The Olympian Gods

The twelve major deities who ruled from Mount Olympus and shaped the fate of mortals and immortals alike.

Deities Olympus Pantheon Divine Powers 
<div class="hero-section hero-tags">
    <h1>Title</h1>
    <p class="hero-description">Description</p>
    <div class="hero-tags">
        <span class="tag">Tag 1</span>
        <span class="tag">Tag 2</span>
    </div>
</div>

Hero with Background

The Titanomachy

The epic ten-year war between the Titans and the Olympian gods that reshaped the cosmos.

<div class="hero-section hero-image" style="background-image: url('path/to/image.jpg');">
    <div class="hero-overlay"></div>
    <div class="hero-content">
        <h1>Title</h1>
        <p class="hero-description">Description</p>
    </div>
</div>

Hero with CTA Buttons

Begin Your Journey

Dive into the rich tapestry of mythology and discover stories that have inspired generations.

<div class="hero-section hero-cta">
    <h1>Title</h1>
    <p class="hero-description">Description</p>
    <div class="hero-actions">
        <button class="btn btn-primary btn-lg">Primary Action</button>
        <button class="btn btn-secondary btn-lg">Secondary</button>
    </div>
</div>

Hero with Icon

⚡

Zeus: King of the Gods

Supreme ruler of Olympus, master of the sky and thunder, upholder of justice and order.

Sky Thunder Justice 
<div class="hero-section hero-icon">
    <div class="hero-icon-display">⚡</div>
    <h1>Title</h1>
    <p class="hero-description">Description</p>
</div>

Hero with Stats

Greek Mythology Archive

A comprehensive collection of myths, deities, and legendary tales.

12
Olympians
100+
Deities
500+
Myths
50+
Heroes
<div class="hero-section hero-stats">
    <h1>Title</h1>
    <p class="hero-description">Description</p>
    <div class="hero-stat-grid">
        <div class="stat-item">
            <div class="stat-number">42</div>
            <div class="stat-label">Label</div>
        </div>
    </div>
</div>