All Prompts
All Prompts
herolanding pagetailwindresponsivectamockupparallaxoutdoor
Hiking App Hero Section with Phone Mockups
Адаптивный hero-баннер для туристического приложения. Включает заголовки, статистику, CTA, аватары и мокапы телефонов. Tailwind CSS, параллакс.
Prompt
<section class="overflow-hidden pt-16 relative w-full"
data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(1)">
<!-- Accent glows -->
<div class="pointer-events-none absolute inset-0">
<div class="absolute -top-24 -left-24 h-80 w-80 rounded-full bg-lime-300/20 blur-3xl"></div>
<div class="absolute top-1/3 -right-24 h-72 w-72 rounded-full bg-yellow-200/10 blur-3xl"></div>
<div class="absolute bottom-0 left-1/2 h-64 w-[36rem] -translate-x-1/2 rounded-full bg-lime-400/10 blur-3xl"></div>
</div>
<div class="lg:pt-28 lg:pb-32 max-w-7xl mr-auto ml-auto pt-20 pr-6 pb-24 pl-6 relative">
<div class="grid grid-cols-1 items-center gap-16 lg:grid-cols-2">
<!-- Left: Content -->
<div class="max-w-2xl">
<div
class="mb-5 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-neutral-300">
<span class="inline-flex h-1.5 w-1.5 rounded-full bg-lime-300"></span>
Trail conditions: Open
</div>
<h1 class="sm:text-6xl leading-[1.05] text-5xl font-medium tracking-tight font-bricolage">
Yosemite Trails
<span class="font-medium text-neutral-300 tracking-tight font-bricolage">for Hikers</span>
</h1>
<p class="text-neutral-400 max-w-xl mt-5">
Discover iconic routes, plan your hike, and track progress in real
time. Explore curated Yosemite trails with offline maps,
elevation, and group stats.
</p>
<!-- Tags / mini metrics -->
<div class="mt-7 flex flex-wrap gap-3">
<div class="rounded-2xl bg-white/[0.04] px-4 py-2 text-sm text-neutral-200 border border-white/10">
<span class="text-neutral-400">Level:</span>
Moderate
</div>
<div class="rounded-2xl bg-white/[0.04] px-4 py-2 text-sm text-neutral-200 border border-white/10">
<span class="text-neutral-400">Duration:</span>
6.5 h
</div>
<div class="rounded-2xl bg-white/[0.04] px-4 py-2 text-sm text-neutral-200 border border-white/10">
<span class="text-neutral-400">Distance:</span>
14.2 km
</div>
<div class="rounded-2xl bg-white/[0.04] px-4 py-2 text-sm text-neutral-200 border border-white/10">
<span class="text-neutral-400">Group:</span>
8 people
</div>
</div>
<!-- CTAs -->
<div class="mt-8 flex flex-wrap items-center gap-3">
<a href="#"
class="group inline-flex items-center gap-2 rounded-full bg-lime-300 px-5 py-3 text-neutral-950 font-medium hover:brightness-95 active:translate-y-[1px] transition">
Get started
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4 transition -translate-x-0.5 group-hover:translate-x-0.5">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
<a href="#"
class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-5 py-3 text-white/90 hover:bg-white/[0.08] active:translate-y-[1px] transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4 text-white/80">
<path
d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"
class=""></path>
<path d="M15 5.764v15" class=""></path>
<path d="M9 3.236v15" class=""></path>
</svg>
Explore trails
</a>
</div>
<!-- Avatars / social proof -->
<div class="mt-7 flex items-center gap-4">
<div class="flex -space-x-2">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cb364025-2387-4977-a5e2-b5466b778b1d_320w.webp" alt="" class="h-8 w-8 rounded-full ring-2 ring-neutral-950 object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/71ad0e95-131b-49d0-b467-355dc7813bbb_320w.webp" alt="" class="h-8 w-8 rounded-full ring-2 ring-neutral-950 object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/60f2ed7a-4b74-4fdb-8c2c-66ab7dca6cde_320w.webp" alt="" class="h-8 w-8 rounded-full ring-2 ring-neutral-950 object-cover">
<div
class="h-8 w-8 rounded-full bg-white/10 ring-2 ring-neutral-950 flex items-center justify-center text-[11px] text-neutral-300 border border-white/10">
+12
</div>
</div>
<p class="text-sm text-neutral-400">
Trusted by 2,400+ hikers worldwide
</p>
</div>
</div>
<!-- Right: Showcase phones -->
<div class="relative mx-auto w-full max-w-xl lg:ml-auto">
<!-- Floating group container for subtle parallax -->
<div id="phones" class="relative h-[560px] sm:h-[600px]">
<!-- Phone 1: Upcoming trail card -->
<div class="absolute left-2 top-10 sm:left-0 sm:top-6 rotate-[-8deg]">
<div
class="sm:w-72 shadow-black/40 overflow-hidden bg-neutral-900 w-64 h-[620px] ring-white/10 ring-1 rounded-[2.2rem] relative shadow-2xl"
style="transform: translate3d(0px, 0px, 0px);">
<!-- notch -->
<div class="absolute top-3 left-1/2 -translate-x-1/2 h-6 w-28 rounded-full bg-black/70"></div>
<div class="p-5 flex items-center justify-between">
<button class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/5 text-white/80 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="m15 18-6-6 6-6" class=""></path></svg>
</button>
<button class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/5 text-white/80 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><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" class=""></path></svg>
</button>
</div>
<div class="px-5">
<h3 class="text-2xl font-bricolage font-medium tracking-tight">
Yosemite Trails
</h3>
<p class="text-sm text-white/60 mt-1">Discover 24 trails</p>
</div>
<div class="mt-4 pr-5 pl-5">
<div class="overflow-hidden rounded-3xl relative">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c934d23e-214b-4c92-9df8-881eb8f280c2_800w.webp" alt="" class="w-full h-72 object-cover">
<div
class="bg-gradient-to-t from-black/60 via-black/10 to-black/0 pt-4 pb-4 absolute top-0 right-0 bottom-0 left-0">
</div>
<div class="absolute top-3 right-3">
<div
class="rounded-full bg-lime-300/20 backdrop-blur px-2.5 py-1 text-xs font-medium text-lime-300 border border-lime-300/30">
Moderate</div>
</div>
<div class="absolute bottom-3 left-3 right-3">
<div class="flex items-end justify-between">
<div class="">
<p class="font-medium text-white/90">Vernal Fall</p>
<p class="text-xs text-white/70">Yosemite Valley • CA</p>
</div>
<button class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-lime-300 text-neutral-950 shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</button>
</div>
<div class="mt-3 grid grid-cols-2 gap-2">
<div class="rounded-2xl bg-white/15 backdrop-blur px-3 py-2 text-white/90">
<p class="text-[11px] text-white/70">Elevation</p>
<p class="text-sm">+400m</p>
</div>
<div class="rounded-2xl bg-white/15 backdrop-blur px-3 py-2 text-white/90">
<p class="text-[11px] text-white/70">Duration</p>
<p class="text-sm">6.5 h</p>
</div>
<div class="rounded-2xl bg-white/15 backdrop-blur px-3 py-2 text-white/90">
<p class="text-[11px] text-white/70">Distance</p>
<p class="text-sm">14.2 km</p>
</div>
<div class="rounded-2xl bg-white/15 backdrop-blur px-3 py-2 text-white/90">
<p class="text-[11px] text-white/70">Hikers</p>
<p class="text-sm">8</p>
</div>
</div>
</div>
</div>
</div>
<div class="px-5 mt-4">
<div class="flex items-center gap-2 text-xs text-white/60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5">
<path d="M8 2v4" class=""></path>
<path d="M16 2v4" class=""></path>
<rect width="18" height="18" x="3" y="4" rx="2" class=""></rect>
<path d="M3 10h18" class=""></path>
</svg>
<span>Next hike: Tomorrow 8:00 AM</span>
</div>
</div>
<div class="absolute bottom-4 left-0 right-0 flex justify-center">
<div class="h-1 w-16 rounded-full bg-white/10"></div>
</div>
</div>
</div>
<!-- Phone 2: Map route -->
<div class="absolute left-1/2 top-0 -translate-x-1/2 sm:left-1/2 sm:-translate-x-1/2">
<div
class="sm:w-72 shadow-black/50 overflow-hidden bg-neutral-900 w-64 h-[620px] ring-white/10 ring-1 rounded-[2.2rem] relative shadow-2xl"
style="transform: translate3d(0px, 0px, 0px);">
<div class="absolute top-3 left-1/2 -translate-x-1/2 h-6 w-28 rounded-full bg-black/70"></div>
<div class="px-5 pt-4 flex items-center justify-between">
<button class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/5 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-white/80"><path d="m15 18-6-6 6-6" class=""></path></svg>
</button>
<div class="flex -space-x-2">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2a8d2822-6b15-416c-b2a1-331d656c363c_320w.webp" alt="" class="h-7 w-7 rounded-full ring-2 ring-neutral-900 object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/204d39d4-2b62-4998-80bc-4e908c217f17_320w.jpg" alt="" class="h-7 w-7 rounded-full ring-2 ring-neutral-900 object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7895a3d2-423d-4e12-8ee1-63b70b944bfc_320w.webp" alt="" class="h-7 w-7 rounded-full ring-2 ring-neutral-900 object-cover">
<div
class="h-7 w-7 rounded-full bg-white/10 ring-2 ring-neutral-900 flex items-center justify-center text-[10px] text-neutral-300 border border-white/10">
+5</div>
</div>
</div>
<div class="px-5 mt-3">
<h3 class="text-2xl font-bricolage font-medium tracking-tight">
Vernal Fall
</h3>
<p class="text-sm text-white/60 mt-0.5">Starting in 2h 15m</p>
</div>
<div
class="relative mx-4 mt-3 h-[240px] rounded-2xl bg-gradient-to-b from-neutral-900 to-black ring-1 ring-white/10 overflow-hidden">
<!-- Stylized topo lines -->
<svg viewBox="0 0 400 300" class="absolute inset-0 h-full w-full text-neutral-700/40">
<defs class="">
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse" class="">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" stroke-width="0.6" class=""></path>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" class=""></rect>
<!-- route -->
<path d="M30,250 C80,180 120,220 160,180 C200,140 260,160 300,120 C330,95 360,110 370,90" fill="none"
stroke="#d9ff3f" stroke-width="4" stroke-linecap="round" class=""></path>
<!-- start marker -->
<circle cx="30" cy="250" r="8" fill="#d9ff3f" class=""></circle>
<!-- end marker -->
<circle cx="370" cy="90" r="8" fill="#fef08a" class=""></circle>
</svg>
<div class="absolute top-3 left-3 right-3 flex items-center justify-between">
<div
class="rounded-full bg-white/10 px-2.5 py-1 text-xs text-white/80 border border-white/10 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-3 w-3 inline mr-1">
<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" class=""></circle>
</svg>
Start: El Capitan
</div>
<div
class="rounded-full bg-lime-300/20 backdrop-blur px-2.5 py-1 text-xs font-medium text-lime-300 border border-lime-300/30">
14.2 km</div>
</div>
<div class="absolute bottom-3 left-3 right-3 flex items-center justify-between">
<div
class="rounded-full bg-white/10 px-3 py-1.5 text-xs text-white/80 border border-white/10 backdrop-blur">
Offline maps ready
</div>
<div
class="flex items-center gap-2 rounded-full bg-white/10 px-3 py-1.5 border border-white/10 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-3 w-3 text-lime-300">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" class=""></path>
<path d="m9 11 3 3L22 4" class=""></path>
</svg>
<span class="text-xs text-white/70">GPS</span>
</div>
</div>
</div>
<div class="mt-4 px-4">
<div class="rounded-2xl bg-white/[0.04] border border-white/10 p-4">
<div class="flex items-center justify-between mb-3">
<div class="text-xs text-white/60">Trail stats</div>
<div class="text-xs text-lime-300">Moderate</div>
</div>
<div class="grid grid-cols-3 gap-3">
<div class="">
<div class="text-xl font-bricolage font-medium tracking-tight">+400m</div>
<div class="text-[11px] text-white/60">Elevation</div>
</div>
<div>
<div class="text-xl font-bricolage font-medium tracking-tight">6.5h</div>
<div class="text-[11px] text-white/60">Duration</div>
</div>
<div>
<div class="text-xl font-bricolage font-medium tracking-tight">3.2</div>
<div class="text-[11px] text-white/60">Difficulty</div>
</div>
</div>
</div>
</div>
<div class="mt-3 px-4">
<button class="w-full rounded-xl bg-lime-300 px-4 py-3 text-neutral-950 font-medium text-sm flex items-center justify-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
Start hike
</button>
</div>
</div>
</div>
<!-- Phone 3: Live hike -->
<div class="absolute right-1 top-14 sm:right-0 sm:top-10 rotate-[8deg]">
<div
class="sm:w-72 shadow-black/40 ring-1 ring-white/10 overflow-hidden bg-neutral-900 w-64 h-[620px] rounded-[2.2rem] relative shadow-2xl"
style="transform: translate3d(0px, 0px, 0px);">
<div class="absolute top-3 left-1/2 -translate-x-1/2 h-6 w-28 rounded-full bg-black/70"></div>
<div class="relative h-56">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cc58d81e-28c7-4497-8773-59291a867e64_800w.webp" alt="" class="w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0">
<div
class="bg-gradient-to-b from-black/30 via-transparent to-black/40 absolute top-0 right-0 bottom-0 left-0">
</div>
<!-- Status indicators -->
<div class="absolute left-3 top-3 flex gap-2">
<div
class="flex items-center gap-1.5 rounded-full bg-red-500/90 px-2.5 py-1 border border-red-400/50 backdrop-blur">
<span class="h-1.5 w-1.5 rounded-full bg-white animate-pulse"></span>
<span class="text-xs font-medium text-white">Live</span>
</div>
</div>
<div
class="absolute right-3 top-3 flex items-center gap-2 rounded-full bg-white/15 px-2.5 py-1 border border-white/10 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5 text-lime-300">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" class=""></path>
<path d="m9 11 3 3L22 4" class=""></path>
</svg>
<span class="text-xs">87%</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<div class="flex items-center gap-2 text-white/90">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4">
<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" class=""></circle>
</svg>
<span class="text-sm">Vernal Fall Trail</span>
</div>
</div>
</div>
<!-- speed card -->
<div class="relative px-4">
<div class="relative -mt-8 rounded-3xl bg-white/8 border border-white/10 backdrop-blur p-4">
<div class="mx-auto h-1.5 w-14 rounded-full bg-gradient-to-r from-lime-300 to-yellow-200"></div>
<div class="mt-2 flex items-end justify-between">
<div class="text-5xl font-bricolage font-medium tracking-tight">
4.2
</div>
<div class="text-sm text-white/70">km/h</div>
</div>
<div class="mt-1 text-xs text-white/50">Current pace</div>
<div class="mt-3 grid grid-cols-2 gap-3 text-sm">
<div class="rounded-xl bg-white/5 border border-white/10 px-3 py-2">
<p class="text-white/60 text-[11px]">Time</p>
<p class="text-white/90">2:47</p>
</div>
<div class="rounded-xl bg-white/5 border border-white/10 px-3 py-2">
<p class="text-white/60 text-[11px]">Distance</p>
<p class="text-white/90">8.3 km</p>
</div>
</div>
</div>
</div>
<div class="mt-4 px-4">
<div class="rounded-2xl bg-white/[0.04] border border-white/10 p-3">
<div class="flex items-center gap-3">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-xs text-white/60">Progress</span>
<span class="text-xs text-lime-300">58%</span>
</div>
<div class="h-1.5 rounded-full bg-white/10">
<div class="h-1.5 w-[58%] rounded-full bg-gradient-to-r from-lime-300 to-yellow-200"></div>
</div>
</div>
</div>
<div class="mt-3 flex items-center justify-between text-xs">
<div class="flex items-center gap-1.5 text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5">
<path d="m3 16 4 4 4-4" class=""></path>
<path d="M7 20V4" class=""></path>
<path d="m21 8-4-4-4 4" class=""></path>
<path d="M17 4v16" class=""></path>
</svg>
<span class="">Elevation: +232m</span>
</div>
<div class="text-white/90">5.9 km left</div>
</div>
</div>
</div>
<div class="mt-3 px-4">
<div class="flex gap-2">
<button class="flex-1 rounded-xl bg-white/5 border border-white/10 px-4 py-2.5 text-sm text-white/80 hover:bg-white/10 transition">
Pause
</button>
<button class="flex-1 rounded-xl bg-red-500/10 border border-red-500/30 px-4 py-2.5 text-sm text-red-400 hover:bg-red-500/20 transition">
End hike
</button>
</div>
</div>
<div class="absolute bottom-4 left-0 right-0 flex justify-center">
<div class="h-1 w-16 rounded-full bg-white/10"></div>
</div>
</div>
</div>
</div>
</div>
<!-- end phones -->
</div>
</div>
</section>