<link rel="stylesheet" href="{{asset "css/hero.css"}}">

<section class="hero">
    <!-- First Section -->
    <div class="hero-first">
        <!-- Left content with logo and text -->
        <div class="hero-content">
            <img src="assets/images/anyway_logo_black.png" alt="Logo" class="hero-logo">
            <h1 class="hero-title">Our new app is available for download</h1>
            <a href="https://anydev.info/early-access/" class="hero-button">Start now</a>
        </div>

        <!-- Right content with app screenshots -->
        <div class="hero-screenshots">
            <div class="screenshot">
                <img src="assets/screenshots/screenshot_1.png" alt="Screenshot 1">
            </div>
            <div class="screenshot">
                <img src="assets/screenshots/screenshot_2.png" alt="Screenshot 2">
            </div>
            <div class="screenshot">
                <img src="assets/screenshots/screenshot_3.png" alt="Screenshot 3">
            </div>
        </div>
    </div>

    <!-- Catch phrase -->
    <div class="hero-catch-phrase">
        <h1>Let's plan trips your way!</h1>
    </div>

    <!-- Second Section -->
    <div class="hero-second">

        <div class="hero-bloc">
            <div class="bloc-text">
                <h3>Set Your Preferences</h3>
                <ul>
                    <li>Choose from sightseeing, nature, and shopping categories.</li>
                    <li>Refine by subcategories like museums or restaurants.</li>
                    <li>Select trip durations from quick stops to full-day adventures.</li>
                </ul>
            </div>
            <div class="bloc-image">
                <img src="assets/screenshots/screenshot_3.png" alt="Preferences Screen">
            </div>
        </div>

        <div class="hero-bloc">
            <div class="bloc-text">
                <h3>Get the Perfect Trip</h3>
                <ul>
                    <li>Our intelligent algorithm balances landmarks and hidden gems.</li>
                    <li>Custom-tailored trips ensure every stop aligns with your interests.</li>
                    <li>Enjoy smart optimization for the perfect balance of activities.</li>
                </ul>
            </div>
            <div class="bloc-image">
                <img src="assets/screenshots/screenshot_1.png" alt="Optimization Process">
            </div>
        </div>

        <div class="hero-bloc">
            <div class="bloc-text">
                <h3>Explore at Your Own Pace</h3>
                <ul>
                    <li>Skip or remove landmarks as you go.</li>
                    <li>Save your trip for later and revisit anytime.</li>
                    <li>Flexible trip design ensures you never miss important spots.</li>
                </ul>
            </div>
            <div class="bloc-image">
                <img src="assets/screenshots/screenshot_2.png" alt="Itinerary Screen">
            </div>
        </div>

        <div class="hero-bloc">
            <div class="bloc-text">
                <h3>Real-time Flexibility</h3>
                <ul>
                    <li>Remove landmarks or recalculate the trip on-the-go.</li>
                    <li>Adjust your itinerary anytime and keep exploring effortlessly.</li>
                </ul>
            </div>
            <div class="bloc-image">
                <img src="assets/screenshots/screenshot_2.png" alt="App Mockup">
            </div>
        </div>

        <div class="hero-bloc">
            <div class="bloc-text">
                <h3>Find Nearby Toilets</h3>
                <ul>
                    <li>Never struggle to find public restrooms during your trip.</li>
                    <li>Simply ask, and the app shows nearby public toilets.</li>
                    <li>A quick and free solution to an everyday problem.</li>
                </ul>
            </div>
            <div class="bloc-image">
                <img src="assets/screenshots/screenshot_2.png" alt="Toilet Finder">
            </div>
        </div>

        <!-- Call to Action Button -->
        <div class="hero-button-end">
            <a href="https://anydev.info/early-access/" class="cta-button">Get Started Now</a>
        </div>
    </div>
</section>
