Free
0
2
TrailBound
TrailBound is an adventurous hiking app template for outdoor explorers, offline trail maps, route planning, and GPS tracking products.
Download Codebase
Commercial License<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TrailBound | Tailwind CSS Hiking App Template</title>
<meta name="description" content="TrailBound is an adventurous Tailwind CSS hiking app template for outdoor explorers, offline trail maps, route planning, and GPS tracking products.">
<meta name="keywords" content="TrailBound, Tailwind CSS template, HTML website template, hiking app landing page, offline trail maps, GPS route planner, responsive outdoor design">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="TrailBound | Tailwind CSS Hiking App Template">
<meta property="og:description" content="An adventurous Tailwind CSS hiking app template for outdoor explorers, offline trail maps, route planning, and GPS tracking products.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="TrailBound template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="TrailBound | Tailwind CSS Hiking App Template">
<meta name="twitter:description" content="An adventurous Tailwind CSS hiking app template for outdoor explorers, offline trail maps, route planning, and GPS tracking products.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="TrailBound template preview">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
</style>
</head>
<body class="bg-white text-[#111111]">
<!-- block:start navbar -->
<header id="header" class="w-full border-b border-gray-100">
<nav class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
<div class="text-2xl font-black tracking-tighter">TRAILBOUND.</div>
<div class="hidden md:flex items-center gap-10 text-sm font-medium">
<a href="#" class="hover:text-orange-500 transition-colors">Our Mission</a>
<a href="#" class="hover:text-orange-500 transition-colors">Community</a>
<a href="#" class="hover:text-orange-500 transition-colors">Route Guide</a>
<a href="#" class="hover:text-orange-500 transition-colors">Journal</a>
</div>
<a href="#" class="border border-black rounded-full px-8 py-2.5 text-sm font-medium hover:bg-black hover:text-white transition-all">
Download App
</a>
</nav>
</header>
<!-- block:end navbar -->
<!-- block:start hero -->
<section id="hero" class="pt-20 pb-12 px-6">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col lg:flex-row justify-between items-start gap-12 mb-16">
<div class="w-full lg:w-3/4">
<h1 class="text-7xl md:text-[140px] font-black leading-[0.85] tracking-tighter uppercase">
NAVIGATE<br>
<span class="text-[#FF7A28]">THE WILD</span>
</h1>
</div>
<div class="w-full lg:w-1/4 pt-4">
<p class="text-gray-600 font-medium mb-8 leading-relaxed">
Your journey into the great unknown begins here. Map every peak, track every step, and conquer the world's most breathtaking trails with TrailBound.
</p>
<button class="bg-[#FF7A28] text-white px-10 py-4 rounded-full text-lg font-bold hover:bg-orange-600 transition-all shadow-lg shadow-orange-200">
Begin Journey
</button>
</div>
</div>
<!-- Hero Image Container -->
<div class="w-full rounded-[48px] overflow-hidden shadow-2xl">
<img class="w-full h-[400px] md:h-[700px] object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_4c412c6ba9_21108f6353ce1cb6.png" alt="dramatic desert mountain range with rugged peaks under a vast blue sky, cinematic lighting, high res" />
</div>
</div>
</section>
<!-- block:end hero -->
<!-- block:start demo -->
<section id="app-showcase" class="py-24 px-6 overflow-hidden">
<div class="max-w-7xl mx-auto relative">
<div class="flex flex-col lg:flex-row items-center gap-20">
<div class="w-full lg:w-1/2 z-10">
<h2 class="text-6xl md:text-8xl font-black leading-[0.9] tracking-tighter uppercase mb-8">
EXPLORE<br>EVERY PEAK
</h2>
<p class="text-xl text-gray-600 mb-10 max-w-md">
Unlock curated routes and real-time offline maps for the most remote outdoor destinations on earth.
</p>
<button class="bg-[#FF7A28] text-white px-8 py-4 rounded-full font-bold hover:bg-orange-600 transition-all mb-20">
View Route Guide
</button>
<!-- Stats -->
<div class="flex flex-wrap gap-12 items-center">
<div>
<div class="text-5xl font-black tracking-tighter">75%</div>
<div class="text-sm text-gray-500 font-medium mt-1">expert local guides</div>
</div>
<div class="w-px h-12 bg-gray-200"></div>
<div>
<div class="text-5xl font-black tracking-tighter">2.4K+</div>
<div class="text-sm text-gray-500 font-medium mt-1">active adventurers</div>
</div>
<div class="w-px h-12 bg-gray-200"></div>
<div>
<div class="text-5xl font-black tracking-tighter">300+</div>
<div class="text-sm text-gray-500 font-medium mt-1">mountain ranges</div>
</div>
</div>
</div>
<!-- App Mockups (Skeleton UI) -->
<div class="w-full lg:w-1/2 relative flex justify-center lg:justify-end">
<!-- Background Decorative Swirl -->
<svg class="absolute -z-10 top-0 right-0 w-[600px] h-[600px] text-orange-100 opacity-50" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M44.7,-76.4C58.1,-69.2,69.2,-58.1,76.4,-44.7C83.7,-31.3,87.1,-15.7,85.6,-0.9C84.1,13.9,77.7,27.7,69.2,40.1C60.7,52.5,50,63.4,37.3,71.1C24.6,78.8,12.3,83.3,-1.3,85.5C-14.8,87.7,-29.6,87.7,-43.5,81.4C-57.4,75.1,-70.4,62.5,-78.9,47.9C-87.4,33.3,-91.4,16.7,-91.4,0C-91.4,-16.7,-87.4,-33.3,-78.9,-47.9C-70.4,-62.5,-57.4,-75.1,-43.5,-81.4C-29.6,-87.7,-14.8,-87.7,-1.3,-85.5C12.3,-83.3,24.6,-78.8,37.3,-71.1C50,-63.4,60.7,-52.5,69.2,-40.1C77.7,-27.7,84.1,-13.9,85.6,0.9C87.1,15.7,83.7,31.3,76.4,44.7C69.2,58.1,58.1,69.2,44.7,76.4" transform="translate(100 100)" />
</svg>
<!-- Main Phone -->
<div class="relative w-[300px] h-[600px] bg-[#1a1a1a] rounded-[50px] border-[8px] border-gray-800 shadow-2xl overflow-hidden z-20 translate-y-10">
<div class="w-full h-full p-6 flex flex-col">
<div class="flex justify-between items-center mb-8">
<div class="text-white font-bold">Good morning</div>
<div class="w-10 h-10 rounded-full bg-gray-700"></div>
</div>
<div class="w-full h-12 bg-gray-800 rounded-xl mb-6"></div>
<div class="w-full flex-1 bg-gray-800 rounded-3xl p-4 flex flex-col gap-4">
<div class="w-full h-32 bg-gray-700 rounded-2xl"></div>
<div class="w-3/4 h-6 bg-gray-700 rounded-full"></div>
<div class="w-1/2 h-4 bg-gray-700 rounded-full"></div>
<div class="mt-auto w-full h-20 bg-[#FF7A28] rounded-2xl"></div>
</div>
</div>
</div>
<!-- Secondary Phone -->
<div class="absolute right-0 top-0 w-[260px] h-[520px] bg-[#1a1a1a] rounded-[45px] border-[6px] border-gray-800 shadow-xl overflow-hidden z-10 translate-x-12 -translate-y-8 opacity-90 hidden sm:block">
<div class="w-full h-full p-5 flex flex-col">
<div class="w-full h-full bg-gray-800 rounded-3xl flex flex-col p-4 gap-4">
<div class="flex gap-2">
<div class="w-12 h-12 bg-gray-700 rounded-xl"></div>
<div class="flex-1 space-y-2">
<div class="w-full h-3 bg-gray-700 rounded-full"></div>
<div class="w-2/3 h-3 bg-gray-700 rounded-full"></div>
</div>
</div>
<div class="flex-1 w-full bg-gray-700/50 rounded-2xl"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end demo -->
<!-- block:start about -->
<section id="confidence" class="py-24 px-6 overflow-hidden bg-white">
<div class="max-w-7xl mx-auto flex flex-col lg:flex-row items-center gap-16 relative">
<!-- Decorative Orange Line (Simplified with SVG) -->
<svg class="absolute top-1/2 left-0 w-full h-full -z-10 opacity-20 pointer-events-none" viewBox="0 0 1000 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 200C150 200 250 50 400 50C550 50 650 350 800 350C950 350 1050 200 1200 200" stroke="#FF7A28" stroke-width="4" stroke-dasharray="12 12"/>
</svg>
<div class="w-full lg:w-1/2 relative">
<!-- Phone Mockup -->
<div class="relative mx-auto lg:ml-0 w-[280px] h-[580px] bg-[#1a1a1a] rounded-[45px] border-[8px] border-gray-900 shadow-2xl overflow-hidden z-20">
<div class="p-5 flex flex-col h-full bg-[#111111]">
<div class="text-white text-xs font-bold mb-4 opacity-50">9:41</div>
<div class="text-white text-xl font-bold mb-6">Good afternoon</div>
<div class="w-full h-10 bg-gray-800 rounded-full mb-6 flex items-center px-4">
<i class="fa-solid fa-magnifying-glass text-gray-500 text-xs"></i>
</div>
<div class="text-white text-sm font-bold mb-4">Popular</div>
<div class="flex gap-3 mb-8 overflow-hidden">
<div class="w-12 h-12 rounded-full bg-gray-800 flex-shrink-0"></div>
<div class="w-12 h-12 rounded-full bg-gray-800 flex-shrink-0"></div>
<div class="w-12 h-12 rounded-full bg-gray-800 flex-shrink-0"></div>
<div class="w-12 h-12 rounded-full bg-gray-800 flex-shrink-0"></div>
</div>
<div class="text-white text-sm font-bold mb-4">Top trails nearby</div>
<div class="flex-1 bg-gray-800 rounded-2xl p-3 flex flex-col gap-2">
<div class="w-full h-32 bg-gray-700 rounded-xl"></div>
<div class="w-2/3 h-4 bg-gray-700 rounded-full"></div>
</div>
</div>
</div>
<!-- Floating Cards -->
<div class="absolute -top-10 -left-12 w-44 bg-white/90 backdrop-blur shadow-xl rounded-3xl p-3 z-30 transform -rotate-6 hidden md:block">
<img class="w-full h-28 object-cover rounded-2xl mb-3" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_7a74e02c49_8c105ddf5f05d50a.png" alt="scenic view of Huangshan mountains in China, misty peaks, traditional ink painting style landscape" />
<div class="flex justify-between items-center px-1">
<span class="text-[10px] font-bold">Huangshan, China</span>
<div class="flex items-center gap-1">
<i class="fa-solid fa-star text-orange-400 text-[8px]"></i>
<span class="text-[8px] font-medium">4.9</span>
</div>
</div>
</div>
<div class="absolute top-24 -right-16 w-44 bg-white/90 backdrop-blur shadow-xl rounded-3xl p-3 z-30 transform rotate-6 hidden md:block">
<img class="w-full h-28 object-cover rounded-2xl mb-3" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_3af753c24e_04aa59da42fb4804.png" alt="remote base camp in Nepal Himalayas, tents under snowy peaks, high altitude mountaineering" />
<div class="flex justify-between items-center px-1">
<span class="text-[10px] font-bold">Camp, Nepal</span>
<div class="flex items-center gap-1">
<i class="fa-solid fa-star text-orange-400 text-[8px]"></i>
<span class="text-[8px] font-medium">4.6</span>
</div>
</div>
</div>
<div class="absolute bottom-12 -left-16 w-48 bg-white/90 backdrop-blur shadow-xl rounded-3xl p-3 z-30 transform -rotate-3 hidden md:block">
<img class="w-full h-32 object-cover rounded-2xl mb-3" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_5b778f5bac_f0736fd74cbe4692.png" alt="Overland Track Tasmania landscape, rugged wilderness, cradle mountain view" />
<div class="flex justify-between items-center px-1">
<span class="text-[10px] font-bold">Overland Track</span>
<div class="flex items-center gap-1">
<i class="fa-solid fa-star text-orange-400 text-[8px]"></i>
<span class="text-[8px] font-medium">4.7</span>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/2">
<h2 class="text-6xl md:text-8xl font-black leading-[0.9] tracking-tighter uppercase mb-8">
TRAVEL WITH<br>CONFIDENCE
</h2>
<p class="text-xl text-gray-600 mb-10 max-w-lg leading-relaxed">
Discover amazing outdoor experiences, trusted route suggestions and the best maps around the world, recommended by thousands of mountain guides, trail rangers and other industry professionals.
</p>
<button class="bg-[#FF7A28] text-white px-10 py-5 rounded-full text-lg font-bold hover:bg-orange-600 transition-all shadow-xl shadow-orange-100">
Download the App
</button>
</div>
</div>
</section>
<!-- block:end about -->
<!-- block:start features -->
<section id="values" class="py-24 px-6 bg-white">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col lg:flex-row justify-between items-start gap-8 mb-20">
<h2 class="text-6xl md:text-8xl font-black leading-[0.9] tracking-tighter uppercase">
OUR GUIDING<br>VALUES
</h2>
<p class="text-gray-500 font-medium max-w-sm pt-4 leading-relaxed">
At TrailBound, our values guide every step of your journey. From safety and trust to adventure and discovery, we're committed to creating experiences that inspire and connect you with the world around you.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Value Card 1 -->
<div class="group">
<div class="rounded-[40px] overflow-hidden mb-8 h-[400px] shadow-lg">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_5ffeab8f2f_70cb81a54edb5441.png" alt="hiker on a rocky ridge pointing towards a distant peak, adventure planning, rugged terrain" />
</div>
<h3 class="text-3xl font-black uppercase tracking-tighter mb-4">Route planning</h3>
<p class="text-gray-600 leading-relaxed">
Explore detailed trail information, terrain profiles, and difficulty ratings, so you can plan your next adventure with complete precision.
</p>
</div>
<!-- Value Card 2 -->
<div class="group">
<div class="rounded-[40px] overflow-hidden mb-8 h-[400px] shadow-lg">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_fb21c24882_377d7df20b9198a4.png" alt="back view of a solo female hiker looking at a vast desert landscape, wearing a backpack, track recor" />
</div>
<h3 class="text-3xl font-black uppercase tracking-tighter mb-4">Track recording</h3>
<p class="text-gray-600 leading-relaxed">
The track recorder allows you to record GPS locations at regular intervals along your path, ensuring you never lose your way in the wild.
</p>
</div>
<!-- Value Card 3 -->
<div class="group">
<div class="rounded-[40px] overflow-hidden mb-8 h-[400px] shadow-lg">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_70124a0610_3a22a30dd9d8500d.png" alt="hiker walking on a bright orange sandstone ridge, clear blue sky, 3d route preview visual" />
</div>
<h3 class="text-3xl font-black uppercase tracking-tighter mb-4">3D route preview</h3>
<p class="text-gray-600 leading-relaxed">
The 3D Preview is a 3D map-based feature on our platform, which gives you a clear visual understanding of the elevation and terrain ahead.
</p>
</div>
</div>
</div>
</section>
<!-- block:end features -->
<!-- block:start reviews -->
<section id="reviews" class="py-12 px-6">
<div class="max-w-7xl mx-auto">
<div class="relative w-full h-[500px] rounded-[48px] overflow-hidden flex items-center px-12 md:px-24">
<!-- Background Image -->
<div class="absolute inset-0 -z-10">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_804213375b_bbf6e88ad1a0f8b6.png" alt="wide angle view of the Grand Canyon during daylight, bright blue sky, rugged orange rock formations" />
<div class="absolute inset-0 bg-black/10"></div>
</div>
<div class="max-w-2xl">
<h2 class="text-5xl md:text-7xl font-black text-white leading-[0.9] tracking-tighter uppercase mb-10">
SEE REVIEWS<br>OF TRAILBOUND APP
</h2>
<button class="bg-[#FF7A28] text-white px-10 py-4 rounded-full font-bold hover:bg-orange-600 transition-all">
See all reviews
</button>
</div>
<!-- Glassmorphism Review Cards -->
<div class="absolute right-12 md:right-24 top-20 flex flex-col gap-6 hidden lg:flex">
<!-- Review 1 -->
<div class="bg-white/20 backdrop-blur-xl border border-white/30 rounded-3xl p-5 flex items-center gap-4 w-72 shadow-2xl">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg" class="w-12 h-12 rounded-full border-2 border-orange-400" alt="Nellie Russell">
<div>
<p class="text-white font-bold text-sm">Nellie Russell</p>
<div class="flex text-orange-400 text-[10px] mt-1">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
<span class="text-white/70 ml-2">5.0</span>
</div>
</div>
</div>
<!-- Review 2 -->
<div class="bg-white/20 backdrop-blur-xl border border-white/30 rounded-3xl p-5 flex items-center gap-4 w-72 shadow-2xl translate-x-12">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" class="w-12 h-12 rounded-full border-2 border-orange-400" alt="Rory Todd">
<div>
<p class="text-white font-bold text-sm">Rory Todd</p>
<div class="flex text-orange-400 text-[10px] mt-1">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i>
<span class="text-white/70 ml-2">4.9</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end reviews -->
<!-- block:start footer -->
<footer id="footer" class="py-20 border-t border-gray-100 bg-gray-50 px-6">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-10">
<div class="text-2xl font-black tracking-tighter">TRAILBOUND.</div>
<div class="flex gap-10 text-sm font-medium text-gray-500">
<a href="#" class="hover:text-black">Safety</a>
<a href="#" class="hover:text-black">Privacy</a>
<a href="#" class="hover:text-black">Terms</a>
<a href="#" class="hover:text-black">Support</a>
</div>
<div class="flex gap-6">
<a href="#" class="text-gray-400 hover:text-black transition-colors"><i class="fa-brands fa-instagram text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-black transition-colors"><i class="fa-brands fa-x-twitter text-xl"></i></a>
</div>
</div>
<div class="text-center mt-12 text-xs text-gray-400">
© 2024 TrailBound Adventure Technologies.
</div>
</footer>
<!-- block:end footer -->
</body>
</html>
Unlimited access to all templates
Unlock our entire library of premium UI kits, dashboards, and landing pages. Renews automatically, cancel anytime.
€20
/ 3 months
or €60 / year
Get Unlimited Access
