Home
Ramesh Kumar Sah
HostelLandingPage

HostelLandingPage

This tailwind example is contributed by Ramesh Kumar Sah, on 25-Sep-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Front page

Landing Page

Author Ramesh Kumar Sah

391

Fork Fullscreen

<!DOCTYPE html>
<html class="" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Manrope:wght@400;500;700;800&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Plus+Jakarta+Sans%3Awght%40400%3B500%3B700%3B800" onload="this.rel='stylesheet'" rel="stylesheet"/>
<title>MyHostelBooking - Your Adventure Awaits</title>
<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<style type="text/tailwindcss">
        @layer utilities {
            .transition-all-300 {
                transition: all 0.3s ease-in-out;
            }
            .transition-transform-500 {
                transition: transform 0.5s ease-in-out;
            }
            .animation-delay-200 { animation-delay: 200ms; }
            .animation-delay-400 { animation-delay: 400ms; }
            .animation-delay-600 { animation-delay: 600ms; }
            .animation-delay-800 { animation-delay: 800ms; }
            @keyframes slide-in-up {
                from { opacity: 0; transform: translateY(40px) scale(0.95); }
                to { opacity: 1; transform: translateY(0) scale(1); }
            }
            @keyframes fade-in {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            .animate-slide-in-up {
                animation: slide-in-up 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            }
            .animate-fade-in {
                animation: fade-in 1s ease-out forwards;
            }
            .paused {
                animation-play-state: paused;
            }
            .perspective-1000 {
                perspective: 1000px;
            }
            .transform-style-3d {
                transform-style: preserve-3d;
            }
            .rotate-y-15 {
                transform: rotateY(-15deg);
            }
            .rotate-y-15-hover:hover {
                transform: rotateY(-15deg) scale(1.03);
            }
            .card-3d {
                transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
                box-shadow: 0px 10px 20px rgba(0,0,0,0.1), 0px 5px 10px rgba(0,0,0,0.05);
            }
            .card-3d:hover {
                transform: translateY(-10px) translateZ(20px);
                box-shadow: 0px 25px 50px -12px rgba(250, 198, 56, 0.25);
            }
            .text-shadow-primary {
                text-shadow: 0 2px 20px rgba(250, 198, 56, 0.5);
            }
        }
    </style>
<script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: "#FAC638",
                        'primary-dark': "#F5B30B",
                        secondary: "#F59E0B",
                        "background-light": "#f8f8f5",
                        "background-dark": "#1a160a",
                        "text-light": "#64748B",
                        "text-dark": "#E2E8F0",
                        "surface-light": "#ffffff",
                        "surface-dark": "#2c2613",
                    },
                    fontFamily: {
                        display: ["Manrope", "sans-serif"],
                        body: ["Noto Sans", "sans-serif"],
                    },
                    borderRadius: {
                        DEFAULT: "0.5rem",
                        lg: "0.75rem",
                        xl: "1rem",
                        '2xl': '1.5rem',
                        full: "9999px",
                    },
                    boxShadow: {
                        primary: "0 10px 30px -10px rgba(250, 198, 56, 0.4)",
                        'primary-lg': "0 20px 40px -15px rgba(250, 198, 56, 0.3)",
                        'card': '0px 30px 60px -20px rgba(0, 0, 0, 0.15), 0px 5px 15px -5px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0px 40px 80px -20px rgba(250, 198, 56, 0.2), 0px 10px 20px -5px rgba(0, 0, 0, 0.1)'
                    }
                }
            }
        };
    </script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
</head>
<body class="font-body bg-background-light dark:bg-background-dark text-slate-800 dark:text-text-dark">
<div class="relative flex min-h-screen w-full flex-col group/design-root overflow-x-hidden">
<div class="layout-container flex h-full grow flex-col">
<header class="flex items-center justify-between whitespace-nowrap border-b border-black/5 dark:border-white/5 px-4 sm:px-6 lg:px-8 py-4 backdrop-blur-xl bg-background-light/80 dark:bg-background-dark/80 sticky top-0 z-50 transition-all-300">
<div class="flex items-center gap-2 text-primary">
<span class="material-symbols-outlined text-3xl"> night_shelter </span>
<h2 class="text-xl font-bold font-display text-slate-900 dark:text-white">MyHostelBooking</h2>
</div>
<div class="flex flex-1 justify-end gap-6 items-center">
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-primary transition-colors" href="#">Explore</a>
<a class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-primary transition-colors" href="#">Hostels</a>
<a class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-primary transition-colors" href="#">Cities</a>
<a class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-primary transition-colors" href="#">About Us</a>
</nav>
<div class="flex gap-3">
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-5 bg-primary text-slate-900 text-sm font-bold shadow-primary hover:bg-primary-dark transition-all-300 transform hover:scale-105 active:scale-95">
<span class="truncate">Sign Up</span>
</button>
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-5 bg-primary/10 text-primary text-sm font-bold hover:bg-primary/20 transition-all-300 transform hover:scale-105 active:scale-95">
<span class="truncate">Log In</span>
</button>
</div>
</div>
</header>
<main class="px-4 md:px-10 lg:px-20 xl:px-32 flex flex-1 justify-center py-12 md:py-20">
<div class="layout-content-container flex flex-col max-w-7xl flex-1 gap-24 md:gap-40">
<div class="relative min-h-[700px] rounded-2xl overflow-hidden flex flex-col items-center justify-center p-8 text-center text-white bg-cover bg-center perspective-1000" style='background-image: linear-gradient(rgba(18, 16, 8, 0.6) 0%, rgba(18, 16, 8, 0.9) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuCqGbowIpSwJT9U8FR6kSJNzDGJAe-G1reH5j48XYfIYRNTfl12mYkLGEnjpmMFE-HQ6hetb_GJMRy4A3OS6q6VUMBe3JQ4qF6R6lH3sAruCcPb_UPFMg2VnYJmxgKJOAPbK5_QgHdKFt-7xxA4MRYMQb0iA0iJJcz5g4PPHXu5AN3iW_iWRt28g8EM0gkdV71_He2Z9lnF9iKqWMgTlH02wJB13HMyNV3zb2SbBL9AmKIFoEND6qQu2RyTWfer1_CqvXvUp0QEIjx8");'>
<div class="flex flex-col gap-6 max-w-4xl z-10" style="transform: translateZ(50px);">
<h1 class="text-5xl md:text-7xl font-black tracking-tighter font-display animate-slide-in-up text-shadow-primary">Find Your Next Adventure</h1>
<h2 class="text-lg md:text-xl font-normal opacity-90 animate-slide-in-up animation-delay-200">Affordable, comfortable, and hassle-free hostel bookings for the modern traveler. Your journey starts here.</h2>
</div>
<div class="mt-10 flex flex-wrap gap-4 justify-center z-10 animate-slide-in-up animation-delay-400" style="transform: translateZ(50px);">
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-12 px-8 bg-primary text-slate-900 text-base font-bold shadow-primary-lg hover:bg-primary-dark transition-all-300 transform hover:scale-105 active:scale-95">
<span class="truncate">Start Exploring</span>
</button>
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-12 px-8 bg-white/10 text-white text-base font-bold backdrop-blur-sm hover:bg-white/20 transition-all-300 transform hover:scale-105 active:scale-95">
<span class="truncate">Why Us?</span>
</button>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-background-dark/80 to-transparent"></div>
</div>
<section class="text-center">
<h2 class="text-4xl lg:text-5xl font-bold tracking-tight font-display text-slate-900 dark:text-white">How It Works</h2>
<p class="text-text-light dark:text-text-dark mt-4 max-w-2xl mx-auto text-lg">Booking your perfect hostel stay is as easy as one, two, three. Follow these simple steps to start your next adventure.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16 perspective-1000">
<div class="flex flex-col items-center text-center gap-4 p-8 bg-surface-light dark:bg-surface-dark rounded-2xl card-3d animate-slide-in-up">
<div class="bg-primary/10 p-5 rounded-full text-primary">
<span class="material-symbols-outlined text-4xl">travel_explore</span>
</div>
<h3 class="text-xl font-bold font-display text-slate-900 dark:text-white">Search &amp; Discover</h3>
<p class="text-text-light dark:text-text-dark">Find the perfect hostel with powerful filters for location, price, and vibe.</p>
</div>
<div class="flex flex-col items-center text-center gap-4 p-8 bg-surface-light dark:bg-surface-dark rounded-2xl card-3d animate-slide-in-up animation-delay-200">
<div class="bg-primary/10 p-5 rounded-full text-primary">
<span class="material-symbols-outlined text-4xl">bookmark_add</span>
</div>
<h3 class="text-xl font-bold font-display text-slate-900 dark:text-white">Book Securely</h3>
<p class="text-text-light dark:text-text-dark">Secure your booking with our easy and encrypted payment process.</p>
</div>
<div class="flex flex-col items-center text-center gap-4 p-8 bg-surface-light dark:bg-surface-dark rounded-2xl card-3d animate-slide-in-up animation-delay-400">
<div class="bg-primary/10 p-5 rounded-full text-primary">
<span class="material-symbols-outlined text-4xl">celebration</span>
</div>
<h3 class="text-xl font-bold font-display text-slate-900 dark:text-white">Travel &amp; Connect</h3>
<p class="text-text-light dark:text-text-dark">Enjoy your stay and create memories with travelers from around the globe.</p>
</div>
</div>
</section>
<section class="bg-surface-light dark:bg-surface-dark py-16 md:py-24 rounded-2xl shadow-card">
<div class="container mx-auto px-4 md:px-8">
<h2 class="text-4xl lg:text-5xl font-bold tracking-tight text-center font-display text-slate-900 dark:text-white">Adventure Blog &amp; Travel Guides</h2>
<p class="text-text-light dark:text-text-dark mt-4 max-w-3xl mx-auto text-lg text-center">Get inspired for your next trip with our curated travel stories, tips, and destination guides from fellow adventurers.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
<div class="group flex flex-col rounded-xl overflow-hidden card-3d">
<img alt="Backpacking Europe" class="w-full h-56 object-cover transition-transform-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBa8IoqzNzIkEzJESlpZ2bRWoyfUMmogSM7jnzzoquSoxFq0bw92wd06xh7DAXN0GL7USKgHQLTMerU-f1WIg1SgWnvKR5CBc3_SdyqvSeBi6Fg3XCBonjwTDd9G6km16ukei9FsxiYJge2gRqmPnsWqV9VStGjTGl3cIftu2Qu0XALBz7MB9dVSxqVx5DSf0Ro32agRM6ZHYk5IARG-FAm2stzmxMq-DNN-oLE39QAPmuSN6p5-aoLKYzviUcfVgEaZM2fEXKO10L2"/>
<div class="p-6 bg-surface-light dark:bg-surface-dark flex flex-col flex-1">
<p class="text-sm text-primary font-semibold">GUIDE</p>
<h3 class="text-xl font-bold font-display text-slate-900 dark:text-white mt-2">The Ultimate Guide to Backpacking Europe on a Budget</h3>
<p class="text-sm text-text-light dark:text-text-dark mt-2 flex-grow">Discover how to travel across Europe without breaking the bank.</p>
<a class="mt-4 font-bold text-primary hover:underline" href="#">Read More</a>
</div>
</div>
<div class="group flex flex-col rounded-xl overflow-hidden card-3d">
<img alt="Southeast Asia" class="w-full h-56 object-cover transition-transform-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD0N_x_tyjdSVvi0jUrIuCmQt9aofSAXu6Iri7WZCIu3E0EAytm_2rNmQJScZCHXDfn8E9GLg6gHwLkTw7R7-QOa_s-ui7p0FaliBFUiuzaZoVo-32MnhCLDH5Cg2d-4M27U3DQyoZTxwpBwOUwIhamYcjChLoL_aC3AXI1zbioEa4Hc1MGOU_3DjmRBSbvG3vu2zDnH8mj7d-2n9xMMFnUqOV3t568wKr7FreghE18N6XqkR89Io7G4gbFENcmy0s6SRsLWsn9cMs7"/>
<div class="p-6 bg-surface-light dark:bg-surface-dark flex flex-col flex-1">
<p class="text-sm text-primary font-semibold">STORY</p>
<h3 class="text-xl font-bold font-display text-slate-900 dark:text-white mt-2">Lost and Found in the Temples of Southeast Asia</h3>
<p class="text-sm text-text-light dark:text-text-dark mt-2 flex-grow">A personal story of self-discovery while traveling solo.</p>
<a class="mt-4 font-bold text-primary hover:underline" href="#">Read More</a>
</div>
</div>
<div class="group flex flex-col rounded-xl overflow-hidden card-3d">
<img alt="Hostel Etiquette" class="w-full h-56 object-cover transition-transform-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXerT411hnuOBnaINdsYN19HHbHb4yjPc2K6_-loAGYMhJZGA5RRdl4lQLusg1QcTJQe8Je_G2_v-pmytagRNzE0Eicv-Y7sV9FkZvtOk_seA2yjWQ6u_2jNd2Q_UpZ9QsL4Sa4V6rKQ-28Z4EUAafD7WhMSy7U_PPcT7elAkYacLkAsYjmIe-eX8XyHJ55wF-BWrP8vNNhsog2vstNy9marmgWllZnmnIk4041zcN2vYlHuCv6ZrvHGhSXW0BkbpbqgpO3toOSMaw"/>
<div class="p-6 bg-surface-light dark:bg-surface-dark flex flex-col flex-1">
<p class="text-sm text-primary font-semibold">TIPS</p>
<h3 class="text-xl font-bold font-display text-slate-900 dark:text-white mt-2">10 Unwritten Rules of Hostel Etiquette You Need to Know</h3>
<p class="text-sm text-text-light dark:text-text-dark mt-2 flex-grow">Be the best roommate ever with these essential tips.</p>
<a class="mt-4 font-bold text-primary hover:underline" href="#">Read More</a>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="text-center">
<h2 class="text-4xl lg:text-5xl font-bold tracking-tight font-display text-slate-900 dark:text-white">Join Our Global Community</h2>
<p class="text-text-light dark:text-text-dark mt-4 max-w-3xl mx-auto text-lg">Connect with travelers, share stories, and get insider tips. The journey is better together.</p>
</div>
<div class="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div class="relative h-[500px] rounded-2xl overflow-hidden transform-style-3d group">
<img alt="Community" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzOgqhIDZOnO-jT44kqsuOXBfw_Wd4rssOeS7ZzC7CQDnK6X59y9a7zIQzSA4xjG4C7eh54GqCIGv5MxbO9FyXF_DoWNp-G-u3TUu7LeO5a8eAwMBNHvKcXwANkQiv1sLG62cIKocUX3-TpRzJRE5HIaNpNbjUsxpeHAyPVmS7ealG6gPJ4Gc3ym3zEXeaoQ197HhmxRFI286cOfDmXiRirIQmokRdptWmUm0fANePxEEIOS3Pd-sQfwDwcmgNTsFtaqawTDVz2Nih"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
<div class="absolute bottom-8 left-8 text-white z-10" style="transform: translateZ(30px)">
<h3 class="text-3xl font-bold font-display">Traveler Forums</h3>
<p class="mt-2 max-w-md">Ask questions, find travel buddies, and share your experiences in our dedicated forums.</p>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
<div class="bg-surface-light dark:bg-surface-dark p-8 rounded-2xl shadow-card hover:shadow-card-hover transition-all-300 transform hover:-translate-y-2">
<span class="material-symbols-outlined text-4xl text-primary">event</span>
<h4 class="text-xl font-bold font-display mt-4 text-slate-900 dark:text-white">Local Events</h4>
<p class="text-text-light dark:text-text-dark mt-2">Find exclusive events and meetups organized at our partner hostels worldwide.</p>
</div>
<div class="bg-surface-light dark:bg-surface-dark p-8 rounded-2xl shadow-card hover:shadow-card-hover transition-all-300 transform hover:-translate-y-2">
<span class="material-symbols-outlined text-4xl text-primary">photo_camera</span>
<h4 class="text-xl font-bold font-display mt-4 text-slate-900 dark:text-white">Photo Contests</h4>
<p class="text-text-light dark:text-text-dark mt-2">Share your best travel shots for a chance to be featured and win prizes.</p>
</div>
<div class="bg-surface-light dark:bg-surface-dark p-8 rounded-2xl shadow-card hover:shadow-card-hover transition-all-300 transform hover:-translate-y-2">
<span class="material-symbols-outlined text-4xl text-primary">groups</span>
<h4 class="text-xl font-bold font-display mt-4 text-slate-900 dark:text-white">Group Trips</h4>
<p class="text-text-light dark:text-text-dark mt-2">Join curated group adventures to iconic destinations, planned for you.</p>
</div>
<div class="bg-surface-light dark:bg-surface-dark p-8 rounded-2xl shadow-card hover:shadow-card-hover transition-all-300 transform hover:-translate-y-2">
<span class="material-symbols-outlined text-4xl text-primary">card_membership</span>
<h4 class="text-xl font-bold font-display mt-4 text-slate-900 dark:text-white">Loyalty Program</h4>
<p class="text-text-light dark:text-text-dark mt-2">Earn points on every booking and unlock exclusive member perks.</p>
</div>
</div>
</div>
</section>
<section>
<div class="flex justify-between items-end mb-12">
<h2 class="text-4xl lg:text-5xl font-bold tracking-tight font-display text-slate-900 dark:text-white">Popular Destinations</h2>
<a class="text-primary font-semibold hover:underline flex items-center gap-1" href="#">
        View All Cities <span class="material-symbols-outlined">arrow_forward</span>
</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
<a class="group relative aspect-w-1 aspect-h-1 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all-300 transform hover:-translate-y-2" href="#">
<img alt="Kyoto, Japan" class="w-full h-full object-cover transition-transform-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCGZTerpSQjpMKLhoIAisAvnicZ1YzEmhQkk7sJm1z878rFwjnakcP4_GupnSgf_ZzCXJPt1dCBrbvsUpShthhL6p3rcc2vtn1GM740OrHWb6GYqX1GMRFcDhu2M7zQTtNGLToaLcopGayqhpBqMxNqx3X2XPg3W-kbS4zUqomIfeheiW8Jnms-_R8Qe2ryD-D2sax0C31oTwC-Wo7fiRL7zhG8q1xMHcgwBUilweOXZpbA13lfsEdmx9Vxle9G36sU0HnKKA_CsteO"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 md:p-6">
<h3 class="text-white text-xl md:text-2xl font-bold font-display">Kyoto</h3>
<p class="text-white/80 text-sm">Japan</p>
</div>
</a>
<a class="group relative aspect-w-1 aspect-h-1 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all-300 transform hover:-translate-y-2" href="#">
<img alt="Lisbon, Portugal" class="w-full h-full object-cover transition-transform-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD43y6yNWrn_C83kXOMG-j73oUqb-MOVStECXDz25G4edQMu8t_JOwwqHULkwUXVRx93dnkwQQ-a2gldmzNehh9np2CoJB3q3y2SeHZ7pJQ_WWdrQeGnc5zAWVXNrvDi1AlFnnDDz3nKK9xPCCkbdGE-XizxBSwqbIokb5nOq-IyqWyB-cZ6DFgBVYzaqXlhiA3cdKgKI4r7453iedaWLvWABSNiLTjO0BxxpDHMlpwc1sJGJOAv2TcIesFRIdqkj7f3qzwjsKo2hjN"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 md:p-6">
<h3 class="text-white text-xl md:text-2xl font-bold font-display">Lisbon</h3>
<p class="text-white/80 text-sm">Portugal</p>
</div>
</a>
<a class="group relative aspect-w-1 aspect-h-1 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all-300 transform hover:-translate-y-2" href="#">
<img alt="Medellín, Colombia" class="w-full h-full object-cover transition-transform-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCPS9nSVdX4aEaOey1zw1tY8Z14o9smamY7X8Gnv1miiVRW3PaLeV9MRk8CE4WifGug6b_NgbW1fCmidx0whoKCaw2XY-sA3sgjLzUQskPpn2Qs4l1pSrg7h4Pti9fBwmrKCSKj_PGFHLxx2Opp88fc419zHSPzkLBFyMdCppvS3ROXuAkXFuyhGqisJvjs2WA41uXi6zzu7G6gv3CD-R6xtexZOiEToJtxpiefvc5CLfYnhaeOjLgeDdKXXHg1lupawX82KaXA-BD_"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 md:p-6">
<h3 class="text-white text-xl md:text-2xl font-bold font-display">Medellín</h3>
<p class="text-white/80 text-sm">Colombia</p>
</div>
</a>
<a class="group relative aspect-w-1 aspect-h-1 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all-300 transform hover:-translate-y-2" href="#">
<img alt="Prague, Czech Republic" class="w-full h-full object-cover transition-transform-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCVa1PvcrwfuhNec45YxW_Kwuu13c1oqie9-W1dsPx2rAywIn0FdowTZKom4bEe5LUUUL0MqLsbDOU7yyeQRExdxAyU2HmPyHEFbv1Yy2g7zVjuK4Hs9sQ8ydX3pUtvuUAjIu-MX9kihzz8w_fLoP9snJZZJP1E32rQS57Jp7VCgly0kXkZPOqZOtjkH75vtAWjDBvvsNivDwg3ASCfH7CDVGQPOx7zV9OmJYa-LzREWFAfOkM6XgeTKnJI_8RTnnTB_QNbiRahWLfw"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 md:p-6">
<h3 class="text-white text-xl md:text-2xl font-bold font-display">Prague</h3>
<p class="text-white/80 text-sm">Czech Republic</p>
</div>
</a>
</div>
</section>
<section>
<div class="text-center">
<h2 class="text-4xl lg:text-5xl font-bold tracking-tight font-display text-slate-900 dark:text-white">Our App is Coming Soon!</h2>
<p class="text-text-light dark:text-text-dark mt-4 max-w-3xl mx-auto text-lg">Get ready for an even more seamless booking experience. Sign up to be the first to know when our app launches and receive an exclusive early-bird discount.</p>
</div>
<div class="mt-16 flex flex-col lg:flex-row items-center justify-center gap-12">
<div class="relative w-full max-w-sm h-[500px] perspective-1000">
<div class="absolute inset-0 transform-style-3d rotate-y-15-hover transition-transform-500">
<img alt="App screenshot" class="w-full h-full object-cover rounded-3xl shadow-2xl border-4 border-white/10" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDqjG46sUOO5UOG_W2yWMr_WBsCcOObH9f55W-DU8Gkyqopppi4nJhw-4IYMS8iHlMHnuc_F3dSdF9p10DEFCDPLwOcTosuxh-Ut27uT5OQYNsQAmnE54j9N0FMzCA_d5kQzF29cXxhLsh7vIN91V1Jmv6fHq7DXAQdKqmTQKV2cRCUa5IUvJ6VFicTBza6uitIUHkVIlDyXvY1Mn4XdQbEaLi6vtUcRYo6QFP2aVnADlG_q1rWDZLmGoR_ovIbRDvmQn5Bhd1CJhfI"/>
</div>
</div>
<div class="max-w-md text-center lg:text-left">
<h3 class="text-3xl font-bold font-display text-slate-900 dark:text-white">Book on the go</h3>
<p class="text-text-light dark:text-text-dark mt-4 text-lg">Manage your bookings, discover last-minute deals, and connect with other travelers, all from the palm of your hand.</p>
<form class="mt-8 flex flex-col sm:flex-row gap-4">
<input class="flex-grow h-12 px-4 rounded-full bg-surface-light dark:bg-surface-dark border border-slate-200 dark:border-slate-700 focus:ring-primary focus:border-primary transition-all-300" placeholder="Enter your email" type="email"/>
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-12 px-6 bg-primary text-slate-900 text-base font-bold shadow-primary hover:bg-primary-dark transition-all-300 transform hover:scale-105 active:scale-95" type="submit">
                    Notify Me
                </button>
</form>
</div>
</div>
</section>
<section>
<h2 class="text-4xl lg:text-5xl font-bold tracking-tight text-center font-display text-slate-900 dark:text-white">Stories from Our Travelers</h2>
<p class="text-text-light dark:text-text-dark mt-4 max-w-2xl mx-auto text-center text-lg">Don't just take our word for it. Here's what fellow adventurers are saying about their experiences.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
<div class="flex flex-col gap-6 p-8 bg-surface-light dark:bg-surface-dark rounded-2xl card-3d">
<div class="flex items-center gap-4">
<img alt="Sarah" class="w-14 h-14 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCSDJE_2ny_fzKn139BTvdxsgaanMfo_oEriD0bGXy1u71duC9hF45gJYFvxbBt8DLKqiSjTrxKhazOAz8Wn0lxF4aqxk0Cdvf5EDhOrNX8gAc1VJJdKt_rp75F36KMpsgdvJ4Sx47qqtCfaqSAGPp8E-LZSsoM0_brd10BplxKMlYDJ2GAFyd1DGqFpY7qRKwdXMsaC8ew6ez_nKYY0k1jz1ttn5Bnnfg_YxzR1F9YRJ68YY5OLgvtxDbtVxSka8rLAthOyiVgZ_3a"/>
<div>
<p class="font-bold text-lg font-display text-slate-900 dark:text-white">Sarah K.</p>
<p class="text-sm text-text-light dark:text-text-dark">Seasoned Backpacker</p>
</div>
</div>
<p class="text-slate-700 dark:text-slate-300 italic">"I had an amazing experience booking with MyHostelBooking. The hostel was clean, comfortable, and the staff were incredibly friendly."</p>
</div>
<div class="flex flex-col gap-6 p-8 bg-surface-light dark:bg-surface-dark rounded-2xl card-3d">
<div class="flex items-center gap-4">
<img alt="David" class="w-14 h-14 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAU0XFInflvfpG_SxX55WVuDj1xrLOyBEorlpT152bW92_lSgWJNfMPmjsJk9MMcweByZqRKk3H2J6DRQwmNM3zbNTPJCY5XT1-38TCHUOx87IqWM3oCgGUjjG3g4VXNCmMWPd3ZpvtvuLshEVMSslT_aoC4W9vF2-Xa_4vU9GD9fA-J_WwbBVVBAWvPY3rpZR7CILn3jfIIq4D-XuAPPvpw0tb2aIDYl0JEEfjFI5ieA4G_FbCcYX5bvMqR-ZqY1Lpc16k4nOnsuBn"/>
<div>
<p class="font-bold text-lg font-display text-slate-900 dark:text-white">David L.</p>
<p class="text-sm text-text-light dark:text-text-dark">First-time Hosteler</p>
</div>
</div>
<p class="text-slate-700 dark:text-slate-300 italic">"MyHostelBooking made it easy to find a hostel that fit my budget and travel style. I highly recommend their service."</p>
</div>
<div class="flex flex-col gap-6 p-8 bg-surface-light dark:bg-surface-dark rounded-2xl card-3d">
<div class="flex items-center gap-4">
<img alt="Emily" class="w-14 h-14 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAXHkunZf2l7q6uJxfX8kwH7KVmYaPuyPXEk5whZ7ZviJJsEJiROoXhl16Hk1kRE7M0ley9tMiMEjNA_AR1gaDuVg7wV2894YPGdOWaaQu145X5K9wbtLvYA06fgrEakNWPOXjUBDlKiRj1Apb_2Dt6tFTpEYQuAFLp2YMF7m4P2jWX61vPmW1SnCvN8aj3eVeioI8QPJGG9U-Y8tDt5teYGxTJycFKv3v_OXTbDxszrtu-7l34AiVVCHKB7hIGLJlh-2UjEoSKmokC"/>
<div>
<p class="font-bold text-lg font-display text-slate-900 dark:text-white">Emily R.</p>
<p class="text-sm text-text-light dark:text-text-dark">Solo Traveler</p>
</div>
</div>
<p class="text-slate-700 dark:text-slate-300 italic">"I loved the community aspect of the hostel I booked. I met so many interesting people from all over the world."</p>
</div>
</div>
</section>
<div class="flex flex-col items-center justify-center gap-6 p-12 md:p-20 rounded-2xl bg-primary/10 dark:bg-primary/20 text-center shadow-inner relative overflow-hidden">
<div class="absolute -top-10 -left-10 w-32 h-32 bg-primary/20 rounded-full opacity-50 blur-xl"></div>
<div class="absolute -bottom-16 -right-5 w-48 h-48 bg-primary/20 rounded-full opacity-50 blur-xl"></div>
<h2 class="text-4xl md:text-5xl font-bold tracking-tight max-w-2xl font-display text-slate-900 dark:text-white z-10">Ready to Start Your Adventure?</h2>
<p class="max-w-xl text-text-light dark:text-text-dark z-10 text-lg">Join thousands of travelers who have found their perfect stay with us. Your next great story is just a click away.</p>
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-14 px-10 bg-primary text-slate-900 text-lg font-bold shadow-primary-lg hover:bg-primary-dark transition-all-300 transform hover:scale-105 active:scale-95 z-10">
<span class="truncate">Book Your Hostel Today!</span>
</button>
</div>
</div>
</main>
<footer class="bg-surface-light dark:bg-surface-dark mt-24 border-t border-black/5 dark:border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12">
<div class="lg:col-span-2">
<div class="flex items-center gap-2 text-primary">
<span class="material-symbols-outlined text-3xl"> night_shelter </span>
<h2 class="text-xl font-bold font-display text-slate-900 dark:text-white">MyHostelBooking</h2>
</div>
<p class="mt-4 text-text-light dark:text-text-dark max-w-md">The best way to book hostels and connect with travelers worldwide. Your next adventure is just a few clicks away.</p>
<div class="mt-6 flex gap-4">
<a class="text-text-light dark:text-text-dark hover:text-primary" href="#"><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.26C11.73,8.6 11.77,8.92 11.84,9.22C8.28,9.03 5.15,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.48 2.96,10.28 2.38,9.95C2.38,9.97 2.38,9.98 2.38,10C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.45,16.03 6.13,17.26 8.1,17.31C6.63,18.45 4.81,19.12 2.83,19.12C2.47,19.12 2.12,19.1 1.77,19.05C3.78,20.36 6.15,21.08 8.75,21.08C16,21.08 20.34,15.12 20.34,9.73C20.34,9.56 20.33,9.4 20.32,9.23C21.1,8.64 21.83,7.88 22.46,6Z"></path></svg></a>
<a class="text-text-light dark:text-text-dark hover:text-primary" href="#"><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M17,17H14V11.5C14,10.12 13.43,9.5 12.5,9.5C11.57,9.5 11,10.12 11,11.5V17H8V8H11V9.25C11.43,8.5 12.12,8 13.25,8C15.5,8 17,9.5 17,11.75V17Z"></path></svg></a>
<a class="text-text-light dark:text-text-dark hover:text-primary" href="#"><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a>
</div>
</div>
<div>
<h3 class="text-sm font-bold tracking-wider uppercase text-slate-900 dark:text-white">Company</h3>
<nav class="mt-4 space-y-2">
<a class="text-base text-text-light dark:text-text-dark hover:text-primary" href="#">About Us</a><br/>
<a class="text-base text-text-light dark:text-text-dark hover:text-primary" href="#">Careers</a><br/>
<a class="text-base text-text-light dark:text-text-dark hover:text-primary" href="#">Press</a><br/>
<a class="text-base text-text-light dark:text-text-dark hover:text-primary" href="#">Blog</a>
</nav>
</div>
<div>
<h3 class="text-sm font-bold tracking-wider uppercase text-slate-900 dark:text-white">Support</h3>
<nav class="mt-4 space-y-2">
<a class="text-base text-text-light dark:text-text-dark hover:text-primary" href="#">Contact Us</a><br/>
<a class="text-base text-text-light dark:text-text-dark hover:text-primary" href="#">FAQ</a><br/>
<a class="text-base text-text-light dark:text-text-dark hover:text-primary" href="#">Terms of Service</a><br/>
<a class="text-base text-text-light dark:text-text-dark hover:text-primary" href="#">Privacy Policy</a>
</nav>
</div>
<div>
<h3 class="text-sm font-bold tracking-wider uppercase text-slate-900 dark:text-white">Get the App</h3>
<div class="mt-4 space-y-3">
<a class="flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900 text-white hover:bg-slate-700 transition-colors" href="#">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M17.6,6.2C17,5.6,16.2,5.2,15.2,5.2C14.1,5.2,13.2,5.7,12.6,6.4C12.3,6.1,11.9,5.8,11.5,5.6C11,5.4,10.5,5.2,10,5.2C8.7,5.2,7.7,5.7,7,6.6C6,7.8,5.5,9.2,5.5,11.1C5.5,12.2,5.7,13.2,6.2,14.1C6.6,15,7.3,15.6,8.1,16C8.9,16.4,9.8,16.6,10.7,16.6C11.2,16.6,11.7,16.5,12.1,16.4C12.5,16.2,12.9,16,13.2,15.7C13.2,16.6,13.5,17.3,14,17.8C14.5,18.3,15.1,18.6,15.8,18.6C16.8,18.6,17.6,18.2,18.2,17.4C18.9,16.7,19.2,15.7,19.2,14.6C19.2,13.8,19,13.1,18.6,12.4C18.2,11.7,17.6,11,16.8,10.4L16.2,10C16.6,9.3,16.9,8.5,16.9,7.6C16.9,7,16.7,6.4,16.4,6C16.1,5.7,15.7,5.5,15.3,5.5C14.8,5.5,14.5,5.7,14.2,6C13.9,6.3,13.7,6.7,13.7,7.2C13.7,7.8,13.9,8.4,14.3,8.8L14.8,9.2C14.2,9.9,13.8,10.8,13.8,11.7C13.8,12.1,13.9,12.5,14,12.8C14.2,13.2,14.4,13.5,14.7,13.7C14.4,14,14.1,14.3,13.7,14.5C13.3,14.8,12.8,15,12.3,15.1C11.8,15.3,11.3,15.3,10.7,15.3C10,15.3,9.3,15.2,8.7,14.8C8.1,14.5,7.6,14,7.2,13.3C6.8,12.6,6.6,11.9,6.6,11.1C6.6,9.4,7.1,8.1,8,7.2C8.7,6.2,9.6,5.8,10.7,5.8C11.2,5.8,11.7,5.9,12.1,6.1C12.5,6.3,12.8,6.6,13.1,7C13.6,6.3,14.3,5.8,15.2,5.8C16,5.8,16.7,6.1,17.2,6.6C17.7,7.1,18,7.8,18,8.7C18,9.4,17.8,10,17.4,10.6C17,11.2,16.5,11.7,15.9,12.1L15.4,12.5C15.9,13,16.3,13.6,16.3,14.4C16.3,15.1,16.1,15.6,15.7,16C15.3,16.4,14.9,16.6,14.3,16.6C13.8,16.6,13.3,16.4,13,16C12.6,15.6,12.4,15.1,12.4,14.5C12.4,13.5,12.8,12.6,13.6,11.8L14.2,11.3C15,10.6,15.5,9.7,15.5,8.7C15.5,7.9,15.3,7.3,14.8,6.8C14.4,6.4,13.8,6.2,13.2,6.2C12.6,6.2,12.1,6.4,11.6,6.8C11.2,7.3,11,7.9,11,8.5C11,9.6,11.4,10.5,12.2,11.3L12.8,11.8C13.2,11.4,13.7,11.1,14.2,10.9C14.7,10.6,15.2,10.5,15.8,10.5C16.2,10.5,16.5,10.6,16.8,10.7C17.1,10.9,17.3,11.1,17.5,11.3C17.8,11.8,18,12.3,18,12.8C18,13.4,17.9,13.9,17.6,14.3C17.4,14.8,17.1,15.1,16.7,15.4C16.3,15.7,15.9,15.8,15.4,15.8C15,15.8,14.6,15.7,14.3,15.5C14,15.3,13.7,15,13.5,14.7L13.5,14.7L17.6,6.2Z"></path></svg>
<div>
<p class="text-xs">Download on the</p>
<p class="text-sm font-semibold">App Store</p>
</div>
</a>
<a class="flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900 text-white hover:bg-slate-700 transition-colors" href="#">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M3,12C3,6.5,7.5,2,13,2C18.5,2,23,6.5,23,12C23,17.5,18.5,22,13,22C7.5,22,3,17.5,3,12M13,4C8.6,4,5,7.6,5,12C5,16.4,8.6,20,13,20C17.4,20,21,16.4,21,12C21,7.6,17.4,4,13,4M10,8V16L16,12L10,8Z"></path></svg>
<div>
<p class="text-xs">GET IT ON</p>
<p class="text-sm font-semibold">Google Play</p>
</div>
</a>
</div>
</div>
</div>
<div class="mt-12 border-t border-black/10 dark:border-white/10 pt-8 text-center text-sm text-text-light dark:text-text-dark">
<p>© 2024 MyHostelBooking. All rights reserved. Designed with passion for travelers.</p>
</div>
</div>
</footer>
</div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.remove('paused');
                }
            });
        }, {
            threshold: 0.1
        });
        document.querySelectorAll('.animate-slide-in-up, .animate-fade-in').forEach((el) => {
            el.classList.add('paused');
            observer.observe(el);
        });
    });
</script>

</body></html>

Related Examples