<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 the amount of sightseeing, nature, and shopping landmarks.</li>
                    <li>Select your preferred duration, from quick 30-minutes to full-day adventures.</li>
                    <li>Finer categories like museums or restaurants will be coming soon.</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 famous must-do's and hidden gems.</li>
                    <li>Custom-tailored trips ensure every stop aligns with your interests.</li>
                    <li>Enjoy our 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>Follow the directions to the next stop.</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>BONUS: find nearby toilets</h3>
                <ul>
                    <li>Never struggle to find public restrooms again.</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>