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

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

Responsive eCommerce Footer Component with Tailwind CSS
A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

Author:
SHARIFUL ISLAM

7 months ago

743
EduChina
EduChina

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

327
Banner with Form

Author:
Aitrik Saha

8 months ago

1.2k
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

328
Animated Coming Soon Page 1
animated coming soon landing page

Author:
Anonymous

1 year ago

2.4k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

5 months ago

303
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

4 months ago

568
Landing page template
Template de landing page com vídeo

Author:
viva afro

5 months ago

571
ChinaEdu
ChinaEdu

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

109
landing page
web Design

Author:
Hacker Development

5 months ago

796
Portfolio Hero Section 5

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

5 months ago

1.5k
Portfolio Hero Section 4

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

10 months ago

3.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components