<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Travel Map Animation SaaS</title>

    <!-- Tailwind CSS for modern, clean SaaS styling -->

    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Alpine.js for lightweight reactivity -->

    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Three.js & Globe.gl for the 3D Interactive Earth -->

    <script src="//unpkg.com/three"></script>

    <script src="//unpkg.com/globe.gl"></script>

</head>

<body class="bg-[#0b0f19] text-white font-sans antialiased overflow-x-hidden" x-data="{ mobileMenu: false }">


    <!-- Header / Navbar -->

    <header class="absolute top-0 left-0 w-full z-50 flex items-center justify-between px-8 py-6">

        <div class="flex items-center space-x-2">

            <div class="bg-gradient-to-tr from-blue-600 to-indigo-500 p-2 rounded-xl shadow-lg border border-white/10 flex items-center justify-center">

                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>

            </div>

            <span class="text-xl font-bold tracking-tight">mult</span>

        </div>

        <nav class="hidden md:flex items-center space-x-8 text-sm font-medium text-gray-300">

            <a href="#create" class="hover:text-white transition">Create</a>

            <a href="#features" class="hover:text-white transition">Features</a>

            <a href="#pricing" class="hover:text-white transition">Pricing</a>

        </nav>

        <div class="flex items-center space-x-4">

            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop&crop=faces" alt="Avatar" class="w-9 h-9 rounded-full border border-white/20 object-cover">

        </div>

    </header>


    <!-- Hero Section -->

    <section class="relative w-full h-screen flex flex-col items-center justify-end pb-20">

        

        <!-- Background 3D Globe Container -->

        <div id="globe-container" class="absolute inset-0 z-0 opacity-80 pointer-events-auto"></div>


        <!-- Floating UI Mockup Overlay Badge (Buenos Aires Trip style) -->

        <div class="absolute z-10 top-1/3 left-10 md:left-24 bg-black/40 backdrop-blur-md border border-white/10 p-4 rounded-2xl shadow-2xl animate-bounce duration-1000">

            <p class="text-xs uppercase tracking-wider text-gray-400 font-semibold">Buenos Aires</p>

            <p class="text-lg font-bold text-white flex items-center gap-1">🇦🇷 Argentina</p>

            <div class="mt-2 pt-2 border-t border-white/10 flex items-center justify-between gap-4">

                <span class="text-xl font-extrabold text-blue-400">$140</span>

                <span class="text-xs bg-blue-500/20 text-blue-300 px-2 py-0.5 rounded-full font-medium">15 Hours</span>

            </div>

        </div>


        <!-- Main Action Content -->

        <div class="relative z-10 text-center px-4 max-w-xl mx-auto flex flex-col items-center">

            <a href="#create" class="bg-white text-black hover:bg-gray-100 transition px-8 py-3.5 rounded-full font-semibold shadow-xl flex items-center gap-2 mb-8 text-sm tracking-wide">

                Create map animation

            </a>

            

            <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-1">Travel map animation</p>

            <p class="text-xs text-gray-500 mb-4">Zero-config</p>


            <button class="border border-white/20 bg-white/5 hover:bg-white/10 transition backdrop-blur-md px-6 py-2.5 rounded-full text-sm font-medium text-white mb-6">

                View examples

            </button>

            <p class="text-xs text-gray-400 max-w-sm">Turn your trip into a clear, beautiful map animation for sharing or presenting.</p>

        </div>

    </section>


    <!-- Globe Script Initialization -->

    <script>

        // Initialize Three.js/Globe.gl 3D World centered near South America

        const world = Globe()

            (document.getElementById('globe-container'))

            .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')

            .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')

            .backgroundColor('#0b0f19')

            .showAtmosphere(true)

            .atmosphereColor('#3b82f6')

            .atmosphereAltitude(0.15);


        // Auto-rotate the globe slowly for a dynamic SaaS feel

        world.controls().autoRotate = true;

        world.controls().autoRotateSpeed = 0.8;

        world.controls().enableZoom = false;


        // Focus point on South America (Buenos Aires)

        world.pointOfView({ lat: -25.0, lng: -55.0, altitude: 1.8 });


        // Sample travel route arc data (e.g., Buenos Aires to Madrid)

        const sampleArcs = [{

            startLat: -34.6037, startLng: -58.3816, // Buenos Aires

            endLat: 40.4168, endLng: -3.7038,     // Madrid

            color: ['#3b82f6', '#60a5fa']

        }];


        world.arcsData(sampleArcs)

            .arcColor('color')

            .arcDashLength(0.5)

            .arcDashGap(0.2)

            .arcDashInitialGap(() => Math.random())

            .arcDashAnimateTime(2500)

            .arcStroke(1.5);

    </script>

</body>

</html>