Загрузка...
Шаблон лендинга для бронирования путешествий Roam Stays. Идеально для агентств, отелей и блогов о туризме. Адаптивный дизайн, современный стиль.
<html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roam - Editorial Stays</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
body { font-family: 'Newsreader', serif; }
.font-sans { font-family: 'Inter', sans-serif; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
#mobile-menu { transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; }
.menu-open { overflow: hidden; }
/* Hero slideshow: subtle, smooth opacity loop */
@keyframes heroFade {
0%, 22% { opacity: 1; }
25%, 97% { opacity: 0; }
100% { opacity: 1; }
}
#hero-slideshow .hero-slide {
opacity: 0;
animation: heroFade 24s ease-in-out infinite;
will-change: opacity;
}
#hero-slideshow .hero-slide:nth-child(1) { animation-delay: 0s; }
#hero-slideshow .hero-slide:nth-child(2) { animation-delay: 6s; }
#hero-slideshow .hero-slide:nth-child(3) { animation-delay: 12s; }
#hero-slideshow .hero-slide:nth-child(4) { animation-delay: 18s; }
</style>
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">
.font-geist { font-family: 'Geist', sans-serif !important; }
</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">
.font-roboto { font-family: 'Roboto', sans-serif !important; }
</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">
.font-montserrat { font-family: 'Montserrat', sans-serif !important; }
</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">
.font-poppins { font-family: 'Poppins', sans-serif !important; }
</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">
.font-playfair { font-family: 'Playfair Display', serif !important; }
</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">
.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">
.font-merriweather { font-family: 'Merriweather', serif !important; }
</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">
.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">
.font-manrope { font-family: 'Manrope', sans-serif !important; }
</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">
.font-work-sans { font-family: 'Work Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">
.font-pt-serif { font-family: 'PT Serif', serif !important; }
</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">
.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">
.font-space-mono { font-family: 'Space Mono', monospace !important; }
</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">
.font-quicksand { font-family: 'Quicksand', sans-serif !important; }
</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">
.font-nunito { font-family: 'Nunito', sans-serif !important; }
</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">
.font-newsreader { font-family: 'Newsreader', serif !important; }
</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">
.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }
</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">
.font-oswald { font-family: 'Oswald', sans-serif !important; }
</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">
.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }
</style></head>
<body class="antialiased selection:bg-[#9FB5A5] selection:text-[#1F2D26] text-[#1F2D26] bg-[#E7ECE8]">
<!-- Wrapper -->
<div class="max-w-[1600px] mx-auto border-x border-[#C7D0C8] min-h-screen bg-[#F1F4F1] relative">
<!-- Mobile Menu Overlay -->
<div id="mobile-menu" class="fixed inset-0 bg-[#F1F4F1] z-[100] hidden opacity-0 pointer-events-none flex flex-col items-center justify-center">
<button id="close-menu-btn" class="absolute top-6 right-6 p-2 text-[#2C2A26]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32" viewBox="0 0 24 24" data-icon="lucide:x" data-width="32" data-stroke-width="1.5">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"></path>
</svg>
</button>
<nav class="flex flex-col gap-8 text-center text-3xl font-medium italic">
<a href="#" class="hover:text-[#5F6F65] transition-colors">Stays</a>
<a href="#" class="hover:text-[#5F6F65] transition-colors">
Experiences
</a>
<a href="#" class="hover:text-[#5F6F65] transition-colors">Online</a>
<a href="#" class="hover:text-[#5F6F65] transition-colors">Journal</a>
</nav>
<div class="mt-12 flex gap-6">
<a href="#" class="text-sm font-sans uppercase tracking-widest border-b border-[#1F2D26] pb-1">
Host
</a>
<a href="#" class="text-sm font-sans uppercase tracking-widest border-b border-[#1F2D26] pb-1">
Login
</a>
</div>
</div>
<!-- Sticky Navigation -->
<nav class="sticky flex z-50 text-base font-medium tracking-tight bg-[#F1F4F1]/95 w-full border-[#C7D0C8] border-b pt-4 pr-6 pb-4 pl-6 top-0 backdrop-blur-sm items-center justify-between">
<!-- Desktop Left Nav -->
<div class="hidden md:flex gap-8">
<a href="/stays" class="hover:text-[#5F6F65] transition-colors italic">
Stays
</a>
<a href="/experiences" class="hover:text-[#8C867D] transition-colors italic">
Experiences
</a>
<a href="/journal" class="hover:text-[#8C867D] transition-colors italic">
Journal
</a>
</div>
<!-- Mobile Hamburger -->
<button id="open-menu-btn" class="md:hidden p-1">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" data-icon="lucide:menu" data-width="24" data-stroke-width="1.5" class="">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5h16M4 12h16M4 19h16"></path>
</svg>
</button>
<!-- Logo -->
<div class="absolute left-1/2 -translate-x-1/2">
<a href="#" class="flex items-center gap-2">
<span class="uppercase cursor-pointer text-xl font-semibold tracking-tight" onclick="window.location.href='/home';window.location.href='/home';window.location.href='/home';window.location.href='/'" role="button">
ROAM
</span>
</a>
</div>
<!-- Desktop Right Nav -->
<div class="hidden md:flex gap-8">
<a href="/host" class="hover:text-[#8C867D] transition-colors italic">
Become a Host
</a>
<a href="/login" class="hover:text-[#8C867D] transition-colors italic">
Login
</a>
</div>
<!-- Mobile User Icon -->
<a href="#" class="md:hidden p-1 relative">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" data-icon="lucide:user" data-width="24" data-stroke-width="1.5" class="">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</g>
</svg>
</a>
</nav>
<main class="w-full">
<!-- Hero Section -->
<div class="border-[#C7D0C8] border-b pt-10 pr-4 pb-10 pl-4 md:px-6 md:pt-12 md:pb-12">
<h1 class="text-[18vw] sm:text-[16vw] md:text-[14rem] leading-[0.8] md:text-left break-words font-medium text-[#1F2D26] tracking-tight text-center w-full mb-8 sm:mb-10">
Elsewhere
</h1>
<div class="flex flex-col sm:flex-row sm:items-start md:flex-row md:items-start text-base sm:text-lg text-[#5F6F65] mb-6 sm:mb-8 pr-1 pl-1 items-start sm:items-end justify-between gap-6 sm:gap-8">
<p class="leading-snug italic max-w-xs sm:max-w-sm">
<span class="block">Find your next great adventure.</span>
<span class="block">Discover cabins, estates, and homes.</span>
</p>
<p class="leading-snug md:mt-0 italic text-left sm:text-right max-w-xs sm:max-w-sm mt-0 sm:mt-0">
<span class="block">Curated stays for those who</span>
<span class="block">travel with intention.</span>
</p>
</div>
<div class="relative w-full h-[320px] sm:h-[420px] md:h-[600px] overflow-hidden group border border-[#C7D0C8]">
<div id="hero-slideshow" class="absolute inset-0 w-full h-full">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e3813664-aae4-4fb1-b103-668b2131fbed_3840w.jpg" class="hero-slide absolute inset-0 w-full h-full object-cover grayscale-[10%] sepia-[5%] transition-transform duration-[2000ms] ease-in-out scale-100 group-hover:scale-105" alt="Hero Background">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/32f0e634-c09b-40be-95b6-f56d07589c20_3840w.jpg" class="hero-slide absolute inset-0 w-full h-full object-cover grayscale-[10%] sepia-[5%] transition-transform duration-[2000ms] ease-in-out scale-100 group-hover:scale-105" alt="Hero Background">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2b7dd38f-dfbc-42a9-b53d-9e7945e432ae_3840w.jpg" class="hero-slide absolute inset-0 w-full h-full object-cover grayscale-[10%] sepia-[5%] transition-transform duration-[2000ms] ease-in-out scale-100 group-hover:scale-105" alt="Hero Background">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/68bdb9df-9481-4e0a-bbf3-ecec37d5af63_1600w.webp" class="hero-slide absolute inset-0 w-full h-full object-cover grayscale-[10%] sepia-[5%] transition-transform duration-[2000ms] ease-in-out scale-100 group-hover:scale-105" alt="Hero Background">
</div>
<div class="absolute bottom-0 right-0 p-4 sm:p-6 md:p-8 flex gap-4 items-end w-full sm:w-auto justify-center sm:justify-end">
<button class="bg-[#3E6B4E] text-[#F1F4F1] px-6 sm:px-8 py-3 flex items-center gap-3 text-sm font-medium hover:bg-[#2F5B41] transition-colors uppercase tracking-widest font-sans w-full sm:w-auto justify-center">
Explore Stays
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="lucide:arrow-up-right" data-width="16" data-stroke-width="1.5">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h10v10M7 17L17 7"></path>
</svg>
</button>
</div>
<div class="hidden md:flex absolute bottom-8 left-8 gap-4"></div>
</div>
</div>
<div class="border-b border-[#C7D0C8] bg-[#F1F4F1]">
<div class="sm:pt-14 sm:pr-6 sm:pb-14 sm:pl-6 md:text-left md:pt-10 pt-12 pr-4 pb-12 pl-4">
<div class="flex flex-col md:items-end md:mb-10 mt-0 mb-12 gap-x-6 gap-y-6 items-start justify-between md:flex-row">
<div class="">
<span class="text-xs font-mono text-[#9FB5A5] block mb-4 border-b border-[#C7D0C8] w-fit pb-1">
01 — COLLECTIONS
</span>
<h2 class="sm:text-4xl md:text-5xl text-[#1F2D26 text-3xl font-medium tracking-tight">
Curated Destinations
</h2>
<a href="#" class="mt-6 sm:mt-8 inline-flex items-center gap-3 bg-[#1F2D26] px-5 sm:px-6 py-3 text-xs font-sans font-medium uppercase tracking-widest text-[#F1F4F1] transition-colors hover:bg-[#3E6B4E]">
View Collection
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="" data-lucide="arrow-right" data-icon-set="lucide" data-icon-replaced="true" style="color: rgb(241, 244, 241);"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
</div>
<p class="leading-snug lg:text-right italic text-[#5F6F65] text-left max-w-sm">
<span class="lg:text-right">
Discover hand-picked selections for every mood.
</span>
<span class="block">
From high-altitude retreats to sun-soaked coastlines.
</span>
</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 border-[#C7D0C8] border-t border-l">
<a href="#" class="group relative aspect-[3/4] overflow-hidden border-r border-b border-[#C7D0C8] bg-[#EBE9E4]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2ff7fe2d-7c2c-4715-a112-5b0e3dbec252_1600w.jpg" class="grayscale-[10%] group-hover:scale-105 transition-transform duration-1000 w-full h-full object-cover">
<div class="grayscale-[10%] group-hover:scale-105 transition-transform duration-700 w-full h-full object-cover"></div>
<div class="absolute bottom-0 left-0 p-4 sm:p-6 w-full">
<span class="text-[10px] font-sans uppercase tracking-widest text-white/80 mb-1 block">
Collection
</span>
<h3 class="text-xl sm:text-2xl font-medium italic text-white">
Alpine Stillness
</h3>
</div>
</a>
<a href="#" class="group relative aspect-[3/4] overflow-hidden border-r border-b border-[#C7D0C8] bg-[#EBE9E4]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/52b99abc-ab2f-4490-a6b8-eb7a3032fb74_1600w.jpg" class="grayscale-[10%] group-hover:scale-105 transition-transform duration-1000 object-auto bg-center w-full h-full object-cover">
<div class="grayscale-[10%] group-hover:scale-105 transition-transform duration-700 w-full h-full object-cover"></div>
<div class="w-full pt-4 sm:pt-6 pr-4 sm:pr-6 pb-4 sm:pb-6 pl-4 sm:pl-6 absolute bottom-0 left-0">
<span class="text-[10px] font-sans uppercase tracking-widest text-white/80 mb-1 block">
Collection
</span>
<h3 class="text-xl sm:text-2xl font-medium italic text-white">
Coastal Drift
</h3>
</div>
</a>
<a href="#" class="group relative aspect-[3/4] overflow-hidden border-r border-b border-[#C7D0C8] bg-[#EBE9E4]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f6e634ed-5601-417f-917b-f6dc85e993ba_1600w.jpg" class="grayscale-[10%] group-hover:scale-105 transition-transform duration-1000 w-full h-full object-cover">
<div class="grayscale-[10%] group-hover:scale-105 transition-transform duration-700 w-full h-full object-cover"></div>
<div class="absolute bottom-0 left-0 p-4 sm:p-6 w-full">
<span class="text-[10px] font-sans uppercase tracking-widest text-white/80 mb-1 block">
Collection
</span>
<h3 class="text-xl sm:text-2xl font-medium italic text-white">
Forest Haven
</h3>
</div>
</a>
<a href="#" class="group relative aspect-[3/4] overflow-hidden border-r border-b border-[#C7D0C8] bg-[#EBE9E4]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f752d182-a962-407c-b999-06057b6e3970_1600w.webp" class="grayscale-[10%] group-hover:scale-105 transition-transform duration-1000 w-full h-full object-cover">
<div class="grayscale-[10%] group-hover:scale-105 transition-transform duration-700 w-full h-full object-cover"></div>
<div class="w-full pt-4 sm:pt-6 pr-4 sm:pr-6 pb-4 sm:pb-6 pl-4 sm:pl-6 absolute bottom-0 left-0">
<span class="text-[10px] font-sans uppercase tracking-widest text-white/80 mb-1 block">
Collection
</span>
<h3 class="text-xl sm:text-2xl font-medium italic text-white">
Remote Solitude
</h3>
</div>
</a>
</div>
</div>
</div>
<!-- Search / Filter Bar -->
<div class="sticky flex flex-wrap md:px-6 md:flex-nowrap md:pt-8 md:pb-8 bg-[#F1F4F1]/95 z-40 border-[#C7D0C8] border-b pt-8 pr-4 pb-8 pl-4 top-[60px] backdrop-blur-md gap-x-4 gap-y-4 items-center justify-between">
<div class="flex md:w-auto overflow-x-auto no-scrollbar md:pb-0 flex-wrap md:flex-nowrap w-full pb-0 gap-x-3 gap-y-3 items-center">
<span class="text-base font-medium italic whitespace-nowrap mr-2 text-[#9FB5A5] w-full md:w-auto md:mr-2">
Book your stay
</span>
<div class="flex flex-wrap w-full gap-x-3 gap-y-3 md:w-auto md:flex-nowrap md:contents">
<div class="flex items-center border border-[#C7D0C8] bg-[#E7ECE8] px-4 py-1.5 gap-2 w-full sm:w-auto md:w-auto">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" viewBox="0 0 24 24" data-icon="lucide:map-pin" data-width="14" class="">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="">
<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path>
<circle cx="12" cy="10" r="3"></circle>
</g>
</svg>
<input type="text" placeholder="Where to?" class="bg-transparent border-none text-xs uppercase tracking-wider font-sans font-medium placeholder-[#2C2A26] focus:outline-none w-full sm:w-40 md:w-24">
</div>
<div class="flex items-center border border-[#C7D0C8] bg-[#E7ECE8] px-4 py-1.5 gap-2 w-full sm:w-auto md:w-auto">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" viewBox="0 0 24 24" data-icon="lucide:calendar" data-width="14" class="">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" -width="2" class="">
<path d="M8 2v4m8-4v4"></path>
<rect width="18" height="18" x="3" y="4" rx="2"></rect>
<path d="M3 10h18" class=""></path>
</g>
</svg>
<input type="text" placeholder="Dates" class="bg-transparent border-none text-xs uppercase tracking-wider font-sans font-medium placeholder-[#2C2A26] focus:outline-none w-full sm:w-28 md:w-24">
</div>
<div class="flex items-center border border-[#C7D0C8] bg-[#EECE8] px-4 py-1.5 gap-2 w-full sm:w-auto md:w-auto">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" view="0 0 24 24" data-icon="lucide:users" data-width="14" class="">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M16 3.128a4 4 0 0 1 0 7.744M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</g>
</svg>
<input type="text" placeholder="Guests" class="bg-transparent border-none text-xs uppercase tracking-wider font-sans font-medium placeholder-[#2C2A26] focus:outline-none w-full sm:w-24 md:w-20">
</div>
<button class="px-5 py-1.5 bg-[#3E6B4E] text-[#F1F4F1] border border-[#3E6B4E] text-xs uppercase tracking-wider font-sans font-medium flex items-center gap-2 whitespace-nowrap hover:bg-[#2F5B41] transition w-full sm:w-auto md:w-auto justify-center">
Search
</button>
</div>
</div>
<div class="flex md:hidden w-full gap-4 items-center">
<span class="text-base font-medium italic text-[#9FB5A5] inline-flex items-center gap-2 whitespace-nowrap">
Quick find
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" viewBox="0 0 24 24" data-icon="lucide:chevron-right" data-width="14" data-stroke-width="1.5" class="">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6" class=""></path>
</svg>
</span>
<div class="relative flex items-center flex-1 min-w-[200px]">
<input type="text" placeholder="Search destinations..." class="focus:border-[#1F2D26] focus:outline-none placeholder:text-[#9FB5A5] text-sm bg-transparent w-full border-[#C7D0C8] border-b pt-1 pr-8 pb-1 pl-0 font-sans pr-10">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="lucide:search" data-width="16" data-stroke-width="1.5" class="absolute right-0 top-1/2 -translate-y-1/2 text-[#9FB5A5]">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="m21 21l-4.34-4.34"></path>
<circle cx="11" cy="11" r="8"></circle>
</g>
</svg>
</div>
</div>
<div class="hidden md:flex gap-4 md:w-auto w-full border-[#C7D0C8] border-l pl-6 gap-x-4 gap-y-4 items-center">
<span class="text-base font-medium italic text-[#9FB5A5] inline-flex items-center gap-2">
Quick find
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" viewBox="0 0 24 24" data-icon="lucide:chevron-right" data-width="14" data-stroke-width="1.5">
<path fill="none stroke=" currentcolor"="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path>
</svg>
</span>
<div class="relative flex items-center">
<input type="text" placeholder="Search destinations..." class="focus:border-[#1F2D26] focus:outline-none placeholder:text-[#9FB5A5] text-sm bg-transparent w-48 border-[#C7D0C8] border-b pt-1 pr-8 pb-1 pl-0 font-sans pr-10">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="lucide:search" data-width="16" data-stroke-width="1.5" class="absolute right-0 top-1/2 -translate-y-1/2 text-[#9FB5A5]">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="">
<path d="m21 21l-4.34-4.34"></path>
<circle cx="11" cy="11" r="8" class=""></circle>
</g>
</svg>
</div>
</div>
</div>
<!-- Listings Grid -->
<div class="grid grid-cols-1 md:grid-cols-12 border-b border-[#C7D0C8]">
<!-- Sidebar Info -->
<div class="md:col-span-3 p-6 border-b md:border-b-0 md:border-r border-[#C7D0C8] flex flex-col justify-between h-auto md:min-h-[400px]">
<div class="md:sticky md:top-40">
<span class="text-xs font-mono text-[#9FB5A5] block mb-4 border-b border-[#C7D0C8] w-fit pb-1">
02 — DISCOVER
</span>
<h2 class="text-5xl md:text-6xl font-medium tracking-tight leading-[0.95] mb-6 text-[#1F2D26]">
Featured Stays
</h2>
<p class="text-base text-[#5F6F65] leading-relaxed max-w-[240px] italic">
Curated selection of homes for every style of traveler. From
beachfront villas to secluded mountain cabins.
</p>
<div class="mt-12 w-full h-px bg-[#C7D0C8] hidden md:block"></div>
</div>
<div class="mt-8 md:mt-0">
<button class="w-full bg-[#E7ECE8] border border-[#C7D0C8] text-[#1F2D26] px-4 py-3 flex items-center justify-between gap-4 text-xs font-semibold uppercase tracking-widest hover:bg-[#DDE5DF] transition-colors group font-sans">
View All Homes
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="lucide:arrow-right" data-width="16" data-stroke-width="1.5">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"></path>
</svg>
</button>
</div>
</div>
<!-- Listings -->
<div class="md:col-span-9 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<!-- Listing 1 -->
<div class="group cursor-pointer border-b border-r border-[#C7D0C8] p-4 hover:bg-[#E7ECE8] transition-colors">
<div class="relative aspect-[3/4] bg-[#E7ECE8] overflow-hidden mb-4 border border-[#C7D0C8]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3dbfe575-ccd5-4a25-a28a-c1c59d146363_800w.jpg" class="grayscale-[10%] group-hover:scale-105 transition-transform duration-700 w-full h-full object-cover">
<div class="absolute top-2 right-2 bg-[#F1F4F1] px-2 py-0.5 text-[10px] font-sans uppercase tracking-widest border border-[#C7D0C8]">
Superhost
</div>
</div>
<div class="flex justify-between items-start mb-1">
<div class="leading-tight">
<h3 class="text-xl font-medium text-[#1F2D26] tracking-tight">
The Coastal Frame
</h3>
<p class="uppercase text-xs font-sans text-[#5F6F65] tracking-widest">
Malibu, California
</p>
</div>
<div class="flex items-center gap-1">
<span class="text-[#3E6B4E]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="12" height="12" viewBox="0 0 24 24" data-icon="lucide:star" data-width="12" data-stroke-width="2">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z"></path>
</svg>
</span>
<span class="text-xs font-sans">4.98</span>
</div>
</div>
<div class="flex justify-between items-center text-xs font-semibold text-[#5F6F65] mt-2 font-sans">
<span class="uppercase tracking-widest">Oct 22 - 27</span>
<span class="text-[#2C2A26] text-base font-medium font-serif">
$350
<span class="text-xs font-sans text-[#635F59]">/night</span>
</span>
</div>
</div>
<!-- Listing 2 -->
<div class="group cursor-pointer hover:bg-[#E7ECE8] transition-colors border-[#C7D0C8] border-b pt-4 pr-4 pb-4 pl-4">
<div class="relative aspect-[3/4] bg-[#EBE9E4] overflow-hidden mb-4 border border-[#D1CEC7]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e30f1dc0-1c1b-490d-909f-279231f746ce_800w.webp" class="grayscale-[10%] group-hover:scale-105 transition-transform duration-700 w-full h-full object-cover">
</div>
<div class="flex justify-between items-start mb-1">
<div class="leading-tight">
<h3 class="text-xl font-medium tracking-tight text-[#1F2D26]">
The Glass Lodge
</h3>
<p class="text-xs font-sans uppercase tracking-widest text-[#5F6F65]">
Mont-Tremblant, Quebec
</p>
</div>
<div class="flex items-center gap-1">
<span class="text-[#D4A373]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="12" height="12" viewBox="0 0 24 24" data-icon="lucide:star" data-width="12" data-stroke-width="2">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z"></path>
</svg>
</span>
<span class="text-xs">4.98</span>
</div>
</div>
<div class="flex justify-between items-center text-xs font-semibold text-[#635F59] mt-2 font-sans">
<span class="uppercase tracking-widest">Dec 26 - 31</span>
<span class="text-base font-medium text-[#2C2A26] font-serif">
$650
<span class="text-xs font-sans text-[#5F6F65]">/night</span>
</span>
</div>
</div>
<!-- Listing 3 -->
<div class="group cursor-pointer border-b border-[#C7D0C8] p-4 hover:bg-[#E7ECE8] transition-colors">
<div class="relative aspect-[3/4] bg-[#EBE9E4] overflow-hidden mb-4 border border-[#D1CEC7]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/660c0440-9729-40b0-adeb-f97d8f1edbd8_800w.webp" class="grayscale-[10%] group-hover:scale-105 transition-transform duration-700 w-full h-full object-cover">
</div>
<div class="flex justify-between items-start mb-1">
<div class="leading-tight">
<h3 class="font-medium text-xl tracking-tight text-[#1F2D26]">
The Aurora Houses
</h3>
<p class="text-xs font-sans uppercase tracking-widest text-[#5F6F65]">
Aspen, Colorado
</p>
</div>
<div class="flex items-center gap-1">
<span class="text-[#D4A373]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="12" height="12" viewBox="0 0 24 24" data-icon="lucide:star" data-width="12" data-stroke-width="2">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z"></path>
</svg>
</span>
<span class="text-xs font-sans">5.0</span>
</div>
</div>
<div class="flex justify-between items-center text-xs font-semibold text-[#635F59] mt-2 font-sans">
<span class="uppercase tracking-widest">Dec 15 - 20</span>
<span class="text-[#2C2A26] text-base font-medium font-serif">
$850
<span class="text-xs font-sans text-[#5F6F65]">/night</span>
</span>
</div>
</div>
<!-- Listing 4 -->
<div class="group cursor-pointer border-b md:border-b-0 border-r border-[#C7D0C8] p-4 hover:bg-[#E7ECE8] transition-colors">
<div class="relative aspect-[3/4] bg-[#EBE9E4] overflow-hidden mb-4 border border-[#D1CEC7]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4008e7b8-e0fc-4429-bfcc-c3ada0d74214_800w.webp" class="grayscale-[10%] group-hover:scale-105 transition-transform duration-700 w-full h-full object-cover">
<div class="absolute top-2 right-2 bg-[#F1F4F1] px-2 py-0.5 text-[10px] font-sans uppercase tracking-widest border border-[#C7D0C8]">
Guest Favorite
</div>
</div>
<div class="flex justify-between items-start mb-1">
<div class="leading-tight">
<h3 class="font-medium text-xl tracking-tight text-[#1F2D26]">
The Horizon House
</h3>
<p class="text-xs font-sans uppercase tracking-widest text-[#5F6F65]">
Tulum, Mexico
</p>
</div>
<div class="flex items-center gap-1">
<span class="text-[#D4A373]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="12" height="12" viewBox="0 0 24 24" data-icon="lucide:star" data-width="12" data-stroke-width="2">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z"></path>
</svg>
</span>
<span class="text-xs">4.99</span>
</div>
</div>
<div class="flex justify-between items-center text-xs font-semibold text-[#635F59] mt-2 font-sans">
<span class="uppercase tracking-widest">Jan 10 - 15</span>
<span class="text-[#2C2A26] text-base font-medium font-serif">
$420
<span class="text-xs font-sans text-[#635F59]">/night</span>
</span>
</div>
</div>
<!-- Listing 5 -->
<div class="group cursor-pointer border-b md:border-b-0 md:border-r border-[#C7D0C8] p-4 hover:bg-[#E7ECE8] transition-colors">
<div class="relative aspect-[3/4] bg-[#EBE9E4] overflow-hidden mb-4 border border-[#D1CEC7]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/88ca61f6-bdb7-4716-996b-e4feacd6919d_800w.jpg" class="grayscale-[10%] group-hover:scale-105 transition-transform duration-700 w-full h-full object-cover">
</div>
<div class="flex justify-between items-start mb-1">
<div class="leading-tight">
<h3 class="font-medium text-xl tracking-tight text-[#1F2D26]">
The Mirror Cabin
</h3>
<p class="text-xs font-sans uppercase tracking-widest text-[#5F6F65]">
Dalarna, Sweden
</p>
</div>
<div class="flex items-center gap-1">
<span class="text-[#D4A373]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="12" height="12" viewBox="0 0 24 24" data-icon="lucide:star" data-width="12" data-stroke-width="2">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z"></path>
</svg>
</span>
<span class="text-xs font-sans">4.99</span>
</div>
</div>
<div class="flex justify-between items-center text-xs font-semibold text-[#635F59] mt-2 font-sans">
<span class="uppercase tracking-widest">Feb 14 - 16</span>
<span class="text-[#2C2A26] text-base font-medium font-serif">
$650
<span class="text-xs font-sans text-[#635F59]">/night</span>
</span>
</div>
</div>
<!-- Listing 6 -->
<div class="group cursor-pointer p-4 hover:bg-[#E7ECE8] transition-colors">
<div class="relative aspect-[3/4] bg-[#EBE9E4] overflow-hidden mb-4 border border-[#D1CEC7]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/0ec8485b-26fc-4ed1-8926-77a76f01db8a_800w.jpg" class="grayscale-[10%] group-hover:scale-105 transition-transform duration-700 w-full h-full object-cover">
</div>
<div class="flex justify-between items-start mb-1">
<div class="leading-tight">
<h3 class="text-xl font-medium tracking-tight text-[#1F2D26]">
The Aegean House
</h3>
<p class="text-xs font-sans uppercase tracking-widest text-[#5F6F65]">
Santorini, Greece
</p>
</div>
<div class="flex items-center gap-1">
<span class="text-[#D4A373]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="12" height="12" viewBox="0 0 24 24" data-icon="lucide:star" data-width="12" data-stroke-width="2" class="">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z"></path>
</svg>
</span>
<span class="text-xs font-sans">4.88</span>
</div>
</div>
<div class="flex justify-between items-center text-xs font-semibold text-[#635F59] mt-2 font-sans">
<span class="uppercase tracking-widest">Mar 20 - 30</span>
<span class="text-[#2C2A26] text-base font-medium font-serif">
$130
<span class="text-xs font-sans text-[#635F59]">/night</span>
</span>
</div>
</div>
</div>
</div>
<div class="border-b border-[#C7D0C8] bg-[#F1F4F1] py-20">
<div class="text-center max-w-4xl mr-auto ml-auto pr-6 pl-6">
<span class="block text-xs text-[#9FB5A5] font-mono w-fit border-[#C7D0C8] border-b mr-auto mb-8 ml-auto pb-1">
03 — HOW IT WORKS
</span>
<h2 class="md:text-5xl text-4xl font-medium text-[#1F2D26] tracking-tight mb-12">
Considered at Every Step
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 md:relative md:before:content-[''] md:before:absolute md:before:left-0 md:before:right-0 md:before:top-[14px] md:before:border-t md:before:border-dashed md:before:border-[#C7D0C8]">
<div class="flex flex-col items-center gap-3">
<h3 class="text-2xl font-medium italic tracking-tight text-[#1F2D26] bg-[#F1F4F1] px-4 relative z-10">
Discover
</h3>
<p class="text-[#5F6F65] text-sm leading-relaxed">
<span class="block">Find your perfect sanctuary.</span>
<span class="block">Curated stays, reviewed by hand.</span>
</p>
</div>
<div class="flex flex-col items-center gap-3">
<h3 class="text-2xl font-medium italic tracking-tight text-[#1F2D26] bg-[#F1F4F1] px-4 relative z-10">
Book
</h3>
<p class="text-[#5F6F65] text-sm leading-relaxed">
<span class="block">Reserve with complete confidence.</span>
<span class="block">
Transparent pricing. Secure checkout.
</span>
</p>
</div>
<div class="flex flex-col items-center gap-3">
<h3 class="text-2xl font-medium italic tracking-tight text-[#1F2D26] bg-[#F1F4F1] px-4 relative z-10">
Stay
</h3>
<p class="text-[#5F6F65] text-sm leading-relaxed">
<span class="block">Arrive, exhale, and enjoy.</span>
<span class="block">24/7 support if you need it.</span>
</p>
</div>
</div>
</div>
</div>
<!-- Value Proposition (Behind the Scenes style) -->
<div class="border-b border-[#C7D0C8]">
<div class="grid grid-cols-1 lg:grid-cols-12">
<!-- Text Area -->
<div class="lg:col-span-4 md:p-12 lg:border-b-0 lg:border-r flex flex-col min-h-[500px] bg-[#EBE9E4] h-full border-[#D1CEC7] border-b pt-8 pr-8 pb-8 pl-8 justify-center">
<div class="max-w-lg">
<span class="text-xs font-mono text-[#9FB5A5] block mb-6 border-b border-[#C7D0C8] w-fit pb-1">
04 — WHY ROAM
</span>
<h2 class="text-4xl md:text-5xl font-medium tracking-tight mb-6 text-[#1F2D26]">
The Roam Standard
</h2>
<p class="text-lg text-[#5F6F65] italic mb-12 leading-relaxed">
We believe that where you stay should be as inspiring as where
you go. Our collection is curated with an editorial eye,
ensuring privacy, character, and comfort.
</p>
<div class="space-y-10">
<div class="flex gap-5">
<div class="shrink-0 text-[#2C2A26] mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
</div>
<div class="">
<h3 class="text-sm font-bold font-sans uppercase tracking-widest text-[#1F2D26] mb-2">
Curated Homes
</h3>
<p class="text-sm text-[#5F6F65] leading-relaxed">
We review thousands of homes but select only a few. Each
property is chosen for its design, location, and soul.
</p>
</div>
</div>
<div class="flex gap-5">
<div class="shrink-0 text-[#2C2A26] mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path>
<path d="m9 12 2 2 4-4"></path>
</svg>
</div>
<div class="">
<h3 class="text-sm font-bold font-sans uppercase tracking-widest text-[#1F2D26] mb-2">
Quality Assurance
</h3>
<p class="text-sm text-[#5F6F65] leading-relaxed">
Verified for comfort and cleanliness. We check the water
pressure, the linen quality, and the wifi speed.
</p>
</div>
</div>
<div class="flex gap-5">
<div class="shrink-0 text-[#2C2A26] mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
</svg>
</div>
<div class="">
<h3 class="text-sm font-bold font-sans uppercase tracking-widest text-[#1F2D26] mb-2">
Human Support
</h3>
<p class="text-sm text-[#5F6F65] leading-relaxed">
Our concierge team is available to assist with every
detail of your stay, from booking to departure.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Images Grid -->
<div class="lg:col-span-8 grid grid-cols-1 lg:grid-cols-2 lg:order-none md:order-last">
<div class="overflow-hidden group md:h-auto lg:border-r border-[#C7D0C8] h-[280px] border-b relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a7f3cac8-5609-4ac0-8baf-38048221f3f6_1600w.jpg" class="hover:scale-105 transition-transform duration-700 sepia-[10%] grayscale-[10%] w-full h-full object-cover">
<div class="absolute bottom-4 left-4 bg-[#F1F4F1] px-3 py-1 text-xs font-mono border border-[#C7D0C8]">
Fig. 01 — Interiors
</div>
</div>
<div class="grid grid-rows-2 h-full min-h-[280px] md:min-h-[240px] lg:min-h-0">
<div class="relative overflow-hidden group border-b border-[#C7D0C8]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b5ade93a-ad05-40e1-a50a-65e1d0899679_1600w.webp" class="hover:scale-105 transition-transform duration-700 grayscale-[20%] w-full h-full object-cover" style="">
<div class="absolute bottom-4 left-4 bg-[#F1F4F1] px-3 py-1 text-xs font-mono border border-[#C7D0C8]">
Fig. 02 — Details
</div>
</div>
<div class="relative overflow-hidden group">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/68bdb9df-9481-4e0a-bbf3-ecec37d5af63_1600w.webp" class="hover:scale-105 transition-transform duration-700 sepia-[10%] w-full h-full object-cover" style="">
<div class="absolute bottom-4 left-4 bg-[#F2F0E9] px-3 py-1 text-xs font-mono border border-[#D1CEC7]">
Fig. 03 — Location
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inspiration / Testimonials Section -->
<div class="bg-[#F1F4F1] border-[#C7D0C8] border-b pt-10 pr-6 pb-10 pl-6">
<div class="max-w-5xl mx-auto">
<div class="flex flex-col h-full">
<div class="flex flex-col text-center pb-5 items-center justify-center">
<span class="block text-xs text-[#9FB5A5] font-mono w-fit border-[#C7D0C8] border-b mb-6 pb-1">
05 — VOICES FROM ROAM
</span>
</div>
<div class="grid grid-cols-1 relative min-h-[600px] md:min-h-[500px]">
<!-- Slide 1 -->
<div class="guest-story-slide col-start-1 row-start-1 grid grid-cols-1 md:grid-cols-12 gap-12 transition-opacity duration-500 ease-in-out opacity-100 z-10 items-start">
<div class="md:col-span-5 h-full">
<div class="aspect-[4/5] overflow-hidden border border-[#C7D0C8] relative h-full">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/88ca61f6-bdb7-4716-996b-e4feacd6919d_800w.jpg" class="w-full h-full object-cover grayscale">
<div class="absolute bottom-4 right-4 text-[9px] font-sans font-medium uppercase tracking-widest text-white/90 drop-shadow-md">
Early light, first day
</div>
</div>
</div>
<div class="flex flex-col md:col-span-7 pt-0">
<p class="font-mono text-xs text-[#9FB5A5] mb-6 uppercase tracking-widest">
Stayed at The Mirror Cabin — Dalarna, Sweden
</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="text-[#1F2D26] opacity-20 mb-6">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"></path>
</svg>
<blockquote class="text-2xl md:text-3xl font-medium leading-relaxed tracking-tight text-[#1F2D26] mb-8 max-w-md">
<span class="italic block mb-2 opacity-80">
“The cabin was absolutely breathtaking.”
</span>
Every detail felt intentional — from the way the light
moved through the space to the firewood already stacked by
the door. It didn’t feel like a rental. It felt like being
welcomed.
</blockquote>
<div class="mb-8">
<span class="text-xs font-sans uppercase tracking-widest text-[#5F6F65]">
California, USA
</span>
</div>
</div>
</div><div class="flex flex-col text-center mt-10 mb-10 items-center justify-center">
<a href="#" class="inline-flex items-center gap-2 text-xs uppercase tracking-widest border-b border-[#1F2D26] pb-0.5 hover:text-[#5F6F65] hover:border-[#5F6F65] transition-colors font-sans font-medium mb-6">
Read Guest Stories
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M5 12h14m-7-7l7 7l-7 7" class=""></path>
</svg>
</a>
<div class="flex gap-3">
<button id="story-prev" class="w-10 h-10 border border-[#C7D0C8]/60 flex items-center justify-center hover:bg-[#E7ECE8] transition-colors text-[#9FB5A5] hover:text-[#5F6F65]">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path d="m15 18-6-6 6-6"></path>
</svg>
</button>
<button id="story-next" class="w-10 h-10 border border-[#C7D0C8]/60 flex items-center justify-center hover:bg-[#E7ECE8] transition-colors text-[#9FB5A5] hover:text-[#5F6F65]">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
</div>
</div>
<!-- Slide 2 -->
<div class="guest-story-slide col-start-1 row-start-1 grid grid-cols-1 md:grid-cols-12 gap-12 transition-opacity duration-500 ease-in-out opacity-0 pointer-events-none z-0 items-start">
<div class="md:col-span-5 h-full">
<div class="aspect-[4/5] overflow-hidden border border-[#C7D0C8] relative h-full">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e30f1dc0-1c1b-490d-909f-279231f746ce_800w.webp" class="w-full h-full object-cover grayscale">
<div class="absolute bottom-4 right-4 text-[9px] font-sans font-medium uppercase tracking-widest text-white/90 drop-shadow-md">
Afternoon calm
</div>
</div>
</div>
<div class="md:col-span-7 flex flex-col">
<p class="font-mono text-xs text-[#9FB5A5] mb-6 uppercase tracking-widest">
Stayed at The Glass Lodge — Mont-Tremblant, Quebec
</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="text-[#1F2D26] opacity-20 mb-6">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"></path>
</svg>
<blockquote class="text-2xl md:text-3xl font-medium leading-relaxed tracking-tight text-[#1F2D26] mb-8 max-w-md">
<span class="italic block mb-2 opacity-80">
“We arrived tired and left completely reset.”
</span>
The quiet, the views, the way the house was laid out — it
all encouraged us to slow down without trying. We’re
already planning our return.
</blockquote>
<div class="mb-8">
<span class="text-xs font-sans uppercase tracking-widest text-[#5F6F65]">
Montreal, Canada
</span>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="guest-story-slide col-start-1 row-start-1 grid grid-cols-1 md:grid-cols-12 gap-12 transition-opacity duration-500 ease-in-out opacity-0 pointer-events-none z-0 items-start">
<div class="md:col-span-5 h-full">
<div class="aspect-[4/5] overflow-hidden border border-[#C7D0C8] relative h-full">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3dbfe575-ccd5-4a25-a28a-c1c59d146363_800w.jpg" class="w-full h-full object-cover grayscale">
<div class="absolute bottom-4 right-4 text-[9px] font-sans font-medium uppercase tracking-widest text-white/90 drop-shadow-md">
Pacific breeze
</div>
</div>
</div>
<div class="md:col-span-7 flex flex-col">
<p class="font-mono text-xs text-[#9FB5A5] mb-6 uppercase tracking-widest">
Stayed at The Coastal Frame — Malibu, California
</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="text-[#1F2D26] opacity-20 mb-6">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"></path>
</svg>
<blockquote class="text-2xl md:text-3xl font-medium leading-relaxed tracking-tight text-[#1F2D26] mb-8 max-w-md">
<span class="italic block mb-2 opacity-80">
“I didn’t realize how much the place you stay shapes the
experience until this trip.”
</span>
The house framed the landscape perfectly — mornings felt
longer, evenings felt calmer. It stayed with us.
</blockquote>
<div class="mb-8">
<span class="text-xs font-sans uppercase tracking-widest text-[#5F6F65]">
New York, USA
</span>
</div>
</div>
</div>
<!-- Slide 4 -->
<div class="guest-story-slide col-start-1 row-start-1 grid grid-cols-1 md:grid-cols-12 gap-12 transition-opacity duration-500 ease-in-out opacity-0 pointer-events-none z-0 items-start">
<div class="md:col-span-5 h-full">
<div class="aspect-[4/5] overflow-hidden border border-[#C7D0C8] relative h-full">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/660c0440-9729-40b0-adeb-f97d8f1edbd8_800w.webp" class="w-full h-full object-cover grayscale">
<div class="absolute bottom-4 right-4 text-[9px] font-sans font-medium uppercase tracking-widest text-white/90 drop-shadow-md">
Alpine dusk
</div>
</div>
</div>
<div class="md:col-span-7 flex flex-col">
<p class="font-mono text-xs text-[#9FB5A5] mb-6 uppercase tracking-widest">
Stayed at The Aurora Houses — Aspen, Colorado
</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="text-[#1F2D26] opacity-20 mb-6">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"></path>
</svg>
<blockquote class="text-2xl md:text-3xl font-medium leading-relaxed tracking-tight text-[#1F2D26] mb-8 max-w-md">
<span class="italic block mb-2 opacity-80">
“Everything was exactly as described, but somehow
better.”
</span>
The house felt lived-in, thoughtful, and warm. It was the
kind of place where you stop checking your phone without
noticing.
</blockquote>
<div class="mb-8">
<span class="text-xs font-sans uppercase tracking-widest text-[#5F6F65]">
Austin, USA
</span>
</div>
</div>
</div>
<!-- Slide 5 -->
<div class="guest-story-slide col-start-1 row-start-1 grid grid-cols-1 md:grid-cols-12 gap-12 transition-opacity duration-500 ease-in-out opacity-0 pointer-events-none z-0 items-start">
<div class="md:col-span-5 h-full">
<div class="aspect-[4/5] overflow-hidden border border-[#C7D0C8] relative h-full">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4008e7b8-e0fc-4429-bfcc-c3ada0d74214_800w.webp" class="w-full h-full object-cover grayscale">
<div class="absolute bottom-4 right-4 text-[9px] font-sans font-medium uppercase tracking-widest text-white/90 drop-shadow-md">
Open air
</div>
</div>
</div>
<div class="md:col-span-7 flex flex-col">
<p class="font-mono text-xs text-[#9FB5A5] mb-6 uppercase tracking-widest">
Stayed at The Horizon House — Tulum, Mexico
</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="text-[#1F2D26] opacity-20 mb-6">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"></path>
</svg>
<blockquote class="text-2xl md:text-3xl font-medium leading-relaxed tracking-tight text-[#1F2D26] mb-8 max-w-md">
<span class="italic block mb-2 opacity-80">
“The transition between inside and outside was
seamless.”
</span>
Mornings started slow, afternoons disappeared, and nights
were quiet. It didn’t feel like a vacation rental — it
felt like a rhythm.
</blockquote>
<div class="mb-8">
<span class="text-xs font-sans uppercase tracking-widest text-[#5F6F65]">
Mexico City, MX
</span>
</div>
</div>
</div>
<!-- Slide 6 -->
<div class="guest-story-slide col-start-1 row-start-1 grid grid-cols-1 md:grid-cols-12 gap-12 transition-opacity duration-500 ease-in-out opacity-0 pointer-events-none z-0 items-start">
<div class="md:col-span-5 h-full">
<div class="aspect-[4/5] overflow-hidden border border-[#C7D0C8] relative h-full">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/0ec8485b-26fc-4ed1-8926-77a76f01db8a_800w.jpg" class="w-full h-full object-cover grayscale">
<div class="absolute bottom-4 right-4 text-[9px] font-sans font-medium uppercase tracking-widest text-white/90 drop-shadow-md">
Island view
</div>
</div>
</div>
<div class="md:col-span-7 flex flex-col">
<p class="font-mono text-xs text-[#9FB5A5] mb-6 uppercase tracking-widest">
Stayed at The Aegean House — Santorini, Greece
</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="text-[#1F2D26] opacity-20 mb-6">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"></path>
</svg>
<blockquote class="text-2xl md:text-3xl font-medium leading-relaxed tracking-tight text-[#1F2D26] mb-8 max-w-md">
<span class="italic block mb-2 opacity-80">
“We chose this stay for the view, but what surprised us
was the calm.”
</span>
Nothing felt overdone. The space let the island speak for
itself.
</blockquote>
<div class="mb-8">
<span class="text-xs font-sans uppercase tracking-widest text-[#5F6F65]">
Athens, GR
</span>
</div>
</div>
</div>
</div>
<script>
(function() {
const container = document.currentScript.parentElement;
const slides = container.querySelectorAll('.guest-story-slide');
const prev = container.querySelector('#story-prev');
const next = container.querySelector('#story-next');
let idx = 0;
const total = slides.length;
function update() {
slides.forEach((s, i) => {
if (i === idx) {
s.classList.remove('opacity-0', 'pointer-events-none', 'z-0');
s.classList.add('opacity-100', 'z-10');
} else {
s.classList.remove('opacity-100', 'z-10');
s.classList.add('opacity-0', 'pointer-events-none', 'z-0');
}
});
}
next.addEventListener('click', () => {
idx = (idx + 1) % total;
update();
});
prev.addEventListener('click', () => {
idx = (idx - 1 + total) % total;
update();
});
})();
</script>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-[#1F2D26] text-[#F1F4F1] pt-16 pb-8 border-t border-[#C7D0C8]">
<div class="w-full text-center text-[10px] uppercase tracking-[0.25em] text-[#9FB5A5]/40 mb-12 font-sans select-none">
A quieter way to travel.
</div>
<div class="px-6 grid grid-cols-1 md:grid-cols-12 gap-12 mb-16 border-b border-[#F1F4F1]/10 pb-16">
<!-- Brand Column -->
<div class="md:col-span-4 pr-0 md:pr-12">
<a href="#" class="flex items-center gap-2 mb-6">
<span class="text-2xl tracking-tight font-semibold uppercase">
ROAM
</span>
</a>
<p class="leading-relaxed text-[#9FB5A5] max-w-sm mb-8">
Curating considered places to stay — for travelers who move with
intention.
</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 border border-[#F1F4F1]/20 flex items-center justify-center hover:bg-[#F1F4F1] hover:text-[#1F2D26] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="20" height="20" viewBox="0 0 24 24" data-icon="lucide:instagram" data-width="20" data-stroke-width="1.5">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8A4 4 0 0 1 16 11.37m1.5-4.87h.01"></path>
</g>
</svg>
</a>
<a href="#" class="w-10 h-10 border border-[#F1F4F1]/20 flex items-center justify-center hover:bg-[#F1F4F1] hover:text-[#1F2D26] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="20" height="20" viewBox="0 0 24 24" data-icon="lucide:twitter" data-width="20" data-stroke-width="1.5">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6c2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4c-.9-4.2 4-6.6 7-3.8c1.1 0 3-1.2 3-1.2"></path>
</svg>
</a>
<a href="#" class="w-10 h-10 border border-[#F1F4F1]/20 flex items-center justify-center hover:bg-[#F1F4F1] hover:text-[#1F2D26] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="20" height="20" viewBox="0 0 24 24" data-icon="lucide:facebook" data-width="20" data-stroke-width="1.5" class="">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>
</a>
</div>
</div>
<!-- Links Columns (mobile/tablet row 2) -->
<div class="grid grid-cols-2 gap-8 md:contents">
<div class="md:col-span-2">
<h4 class="text-xs font-semibold uppercase tracking-widest text-[#9FB5A5] mb-6 font-sans">
Help & Care
</h4>
<ul class="space-y-4 text-sm text-[#9FB5A5]">
<li class="">
<a href="#" class="hover:text-white transition-colors">
Help Center
</a>
</li>
<li class="">
<a href="#" class="hover:text-white transition-colors">
AirCover
</a>
</li>
<li class="">
<a href="#" class="hover:text-white transition-colors">
Cancellation
</a>
</li>
<li class="">
<a href="#" class="hover:text-white transition-colors">
Safety
</a>
</li>
</ul>
</div>
<div class="md:col-span-2">
<h4 class="text-xs font-bold uppercase tracking-widest text-[#8C867D] mb-6 font-sans">
For Hosts
</h4>
<ul class="space-y-4 text-sm text-[#AAA69D]">
<li class="">
<a href="#" class="hover:text-white transition-colors">
Host with Roam
</a>
</li>
<li>
<a href="#" class="hover:text-white transition-colors">
Host Coverage
</a>
</li>
<li>
<a href="#" class="hover:text-white transition-colors">
Hosting Resources
</a>
</li>
<li>
<a href="#" class="hover:text-white transition-colors">
Host Community
</a>
</li>
</ul>
</div>
</div>
<!-- Newsletter (mobile/tablet row 3) -->
<div class="md:col-span-4">
<h4 class="text-xs font-bold uppercase tracking-widest text-[#8C867D] mb-6 font-sans">
Newsletter
</h4>
<p class="text-[#9FB5A5] text-sm mb-4">
Get exclusive offers and travel inspiration delivered.
</p>
<form class="flex w-full border-b border-[#F1F4F1]/20 pb-2">
<input type="email" placeholder="email@address.com" class="bg-transparent w-full outline-none text-[#F1F4F1] placeholder-[#9FB5A5]/60 font-sans text-sm">
<button class="text-[#F1F4F1] hover:text-[#9FB5A5] uppercase text-xs font-semibold tracking-widest font-sans">
Join
</button>
</form>
<p class="text-[10px] text-[#9FB5A5]/50 mt-3 font-sans leading-relaxed">
Stories, places, and considered escapes — sent occasionally.
</p>
</div>
</div>
<div class="px-6 md:px-20 flex flex-col md:flex-row justify-between items-center text-[10px] text-[#9FB5A5]/40 font-sans tracking-wide">
<div class="flex gap-6 mb-4 md:mb-0">
<a href="#" class="hover:text-[#F1F4F1]">Privacy Policy</a>
<a href="#" class="hover:text-[#F1F4F1]">Terms of Service</a>
</div>
<span class="">© 2025 Roam, Inc. All rights reserved.</span>
</div>
</footer>
</main>
</div>
<script>
// Mobile Menu Logic
const menuBtn = document.getElementById('open-menu-btn');
const closeBtn = document.getElementById('close-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const body = document.body;
function toggleMenu() {
const isHidden = mobileMenu.classList.contains('hidden');
if (isHidden) {
// Open Menu
mobileMenu.classList.remove('hidden');
setTimeout(() => {
mobileMenu.classList.remove('opacity-0', 'pointer-events-none');
}, 10);
body.classList.add('menu-open');
} else {
// Close Menu
mobileMenu.classList.add('opacity-0', 'pointer-events-none');
setTimeout(() => {
mobileMenu.classList.add('hidden');
}, 300);
body.classList.remove('menu-open');
}
}
menuBtn.addEventListener('click', toggleMenu);
closeBtn.addEventListener('click', toggleMenu);
</script>
</body></html>