341 lines
23 KiB
HTML
341 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Fethiye Adventure Co. | Premium Mediterranean Experiences</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<!-- Tailwind Configuration -->
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"inverse-surface": "#e5e2e1",
|
|
"surface-bright": "#393939",
|
|
"surface": "#131313",
|
|
"surface-container": "#201f1f",
|
|
"on-tertiary-fixed": "#001d35",
|
|
"inverse-on-surface": "#313030",
|
|
"on-primary-fixed": "#351000",
|
|
"on-primary-container": "#572000",
|
|
"surface-container-high": "#2a2a2a",
|
|
"inverse-primary": "#a04100",
|
|
"on-surface-variant": "#e2bfb0",
|
|
"outline": "#a98a7d",
|
|
"on-error": "#690005",
|
|
"surface-container-lowest": "#0e0e0e",
|
|
"on-secondary-container": "#b6b5b4",
|
|
"on-background": "#e5e2e1",
|
|
"on-tertiary-fixed-variant": "#00497b",
|
|
"surface-container-highest": "#353534",
|
|
"surface-variant": "#353534",
|
|
"on-primary-fixed-variant": "#7a3000",
|
|
"error": "#ffb4ab",
|
|
"tertiary-fixed-dim": "#9ccaff",
|
|
"surface-container-low": "#1c1b1b",
|
|
"primary-fixed-dim": "#ffb693",
|
|
"tertiary-container": "#059eff",
|
|
"on-tertiary-container": "#003357",
|
|
"surface-dim": "#131313",
|
|
"on-secondary-fixed-variant": "#474746",
|
|
"outline-variant": "#5a4136",
|
|
"secondary-container": "#474746",
|
|
"secondary": "#c8c6c5",
|
|
"on-surface": "#e5e2e1",
|
|
"secondary-fixed-dim": "#c8c6c5",
|
|
"primary-fixed": "#ffdbcc",
|
|
"on-secondary": "#303030",
|
|
"on-tertiary": "#003257",
|
|
"on-error-container": "#ffdad6",
|
|
"on-secondary-fixed": "#1b1c1c",
|
|
"primary-container": "#ff6b00",
|
|
"secondary-fixed": "#e4e2e1",
|
|
"on-primary": "#561f00",
|
|
"primary": "#ffb693",
|
|
"surface-tint": "#ffb693",
|
|
"tertiary-fixed": "#d0e4ff",
|
|
"error-container": "#93000a",
|
|
"background": "#131313",
|
|
"tertiary": "#9ccaff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-sm": "8px",
|
|
"section-gap": "120px",
|
|
"gutter": "24px",
|
|
"margin-mobile": "20px",
|
|
"margin-desktop": "64px",
|
|
"container-max": "1280px",
|
|
"stack-md": "16px",
|
|
"stack-lg": "32px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-lg-mobile": ["Montserrat"],
|
|
"headline-md": ["Montserrat"],
|
|
"body-lg": ["Inter"],
|
|
"display-lg": ["Montserrat"],
|
|
"headline-lg": ["Montserrat"],
|
|
"body-md": ["Inter"],
|
|
"label-md": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"headline-lg-mobile": ["32px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
|
"headline-md": ["24px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
|
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
|
"display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"headline-lg": ["40px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
|
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
|
"label-md": ["14px", {"lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "600"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
.nav-blur {
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
.hero-overlay {
|
|
background: linear-gradient(to bottom, rgba(19, 19, 19, 0.4) 0%, rgba(19, 19, 19, 1) 100%);
|
|
}
|
|
.card-hover-stroke:hover {
|
|
border-color: #ff6b00;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-md selection:bg-primary-container selection:text-on-primary-container">
|
|
<!-- TopNavBar (Shared Component) -->
|
|
<header class="fixed top-0 w-full z-50 flex flex-col">
|
|
<!-- Utility Layer -->
|
|
<div class="bg-surface-container-lowest py-2 px-margin-desktop hidden md:flex justify-between items-center border-b border-outline-variant/30">
|
|
<div class="flex gap-stack-lg">
|
|
<span class="font-label-md text-label-md text-on-surface-variant flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[18px]">location_on</span> Fethiye, TR
|
|
</span>
|
|
<span class="font-label-md text-label-md text-on-surface-variant flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[18px]">call</span> +90 555 123 4567
|
|
</span>
|
|
</div>
|
|
<div class="flex gap-stack-md">
|
|
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors cursor-pointer">face_nod</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors cursor-pointer">photo_camera</span>
|
|
</div>
|
|
</div>
|
|
<!-- Primary Layer -->
|
|
<nav class="bg-surface/80 nav-blur border-b border-outline-variant flex items-center justify-between px-margin-desktop py-4 h-20">
|
|
<div class="font-headline-md text-headline-md font-bold text-primary">
|
|
Fethiye Adventure Co.
|
|
</div>
|
|
<div class="hidden md:flex gap-10 items-center">
|
|
<a class="text-primary font-bold border-b-2 border-primary pb-1 font-body-md text-body-md" href="#">Tours</a>
|
|
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">Private Charters</a>
|
|
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">About Us</a>
|
|
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">Contact</a>
|
|
</div>
|
|
<button class="bg-primary-container text-on-primary-container px-8 py-3 font-label-md text-label-md font-bold hover:brightness-110 transition-all uppercase tracking-widest">
|
|
Book Now
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<!-- High-Impact Hero Section -->
|
|
<section class="relative h-screen min-h-[800px] flex items-center justify-center overflow-hidden">
|
|
<div class="absolute inset-0 z-0">
|
|
<img alt="Fethiye Coastline" class="w-full h-full object-cover" data-alt="A cinematic, panoramic view of the Fethiye coastline at golden hour, featuring the deep turquoise waters of the Mediterranean meeting the rugged, pine-covered Taurus Mountains. The sky is painted with vibrant oranges and soft purples, reflecting the high-end adventure brand's primary color palette. The lighting is dramatic and moody, emphasizing the scale and natural beauty of the Turkish landscape in a high-contrast professional photography style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAzA2FQS_7IAJUPS-RHppUDDF3eOmf1m_jhPEu3fN5Gz4nrBQXRgLk2d8TO__ciMHHqrvDnsojsKXXW7bHKQc1p-TA19BEGfAFq2tAz4ND9zj0mCXDqu-29amRRbSGOPA7aLvtqGQyNVCJZswTSVho8-iMRya1-jg4AeFom9V1fquqWni6-Azecmm_w3a3MKIKFACOBb9RRYfiutgPOvBt0x8T66nTsr-2q07TvOBaCDjZxeI32zr8DUPcEiUL-CzGDt5IwxiXt6Lc"/>
|
|
<div class="absolute inset-0 hero-overlay"></div>
|
|
</div>
|
|
<div class="relative z-10 text-center px-margin-mobile md:px-0 max-w-4xl">
|
|
<span class="inline-block px-4 py-1 border border-primary text-primary font-label-md text-label-md mb-stack-md uppercase tracking-[0.2em]">Adventure Awaits</span>
|
|
<h1 class="font-display-lg text-[48px] md:text-display-lg leading-tight mb-stack-lg text-on-surface">
|
|
ELEVATE YOUR <br/><span class="text-primary">FETHIYE</span> EXPERIENCE
|
|
</h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant mb-12 max-w-2xl mx-auto">
|
|
Bespoke adventures tailored for the bold. From the heights of Babadağ to the crystal depths of the Blue Lagoon, discover the Mediterranean's hidden soul.
|
|
</p>
|
|
<div class="flex flex-col md:flex-row gap-gutter justify-center items-center">
|
|
<button class="w-full md:w-auto bg-primary-container text-on-primary-container px-12 py-5 font-headline-md text-[18px] font-bold hover:scale-105 transition-transform">
|
|
Explore Tours
|
|
</button>
|
|
<button class="w-full md:w-auto border-2 border-on-surface text-on-surface px-12 py-5 font-headline-md text-[18px] font-bold hover:bg-on-surface hover:text-background transition-all">
|
|
View Private Charters
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Trending Tours Section -->
|
|
<section class="py-section-gap px-margin-desktop bg-surface">
|
|
<div class="max-w-container-max mx-auto">
|
|
<div class="flex flex-col md:flex-row justify-between items-end mb-16 border-l-4 border-primary pl-8">
|
|
<div>
|
|
<h2 class="font-headline-lg text-headline-lg mb-4 text-on-surface">Trending Adventures</h2>
|
|
<p class="font-body-md text-body-md text-on-surface-variant max-w-xl">
|
|
The most sought-after experiences in Fethiye this season. Selected for their uniqueness and professional execution.
|
|
</p>
|
|
</div>
|
|
<a class="hidden md:flex items-center gap-2 text-primary font-label-md text-label-md hover:underline mb-2" href="#">
|
|
VIEW ALL TOURS <span class="material-symbols-outlined">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
<!-- Bento-style Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 h-auto">
|
|
<!-- Paragliding Card (Large) -->
|
|
<div class="md:col-span-8 group relative overflow-hidden bg-surface-container-high border border-outline-variant card-hover-stroke transition-all cursor-pointer">
|
|
<div class="aspect-[16/9] md:aspect-auto h-full min-h-[450px] relative">
|
|
<img alt="Oludeniz Paragliding" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="A breathtaking aerial view of a paraglider soaring high above the iconic Blue Lagoon of Oludeniz, Fethiye. The turquoise and deep blue hues of the water contrast sharply with the lush greenery of the peninsula below. The lighting is bright and clear, capturing a high-adrenaline professional adventure moment. The overall style is clean and high-contrast, matching the luxury adventure agency's sophisticated aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCnp3654chtUR_yf1Z3Q3_ExL7V5NwacVrMJB_JQFpoiYPtl2SN-XJtI5REOzdGnLPnd8J-msred1gAGawbovdKaK70yEblzQm7ruKfmHBHdsFK17IOwDKElDPFhi-MAbjY_aeen6N7PMGcGDbgP6bI_DlQkO7f0P7fSnizKXkAJF03KDTy-nnorV3d_R4maNg6J3ZzqjFjRK_DO0DPWooeyGy0bpZxqWWhc5ZSYhk61IL4C9LueB5Rlj63Pww3nxlV_3QVcGpsDtw"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-surface to-transparent opacity-80"></div>
|
|
<div class="absolute bottom-0 left-0 p-stack-lg">
|
|
<div class="flex gap-2 mb-4">
|
|
<span class="bg-primary text-on-primary-fixed font-label-md text-[12px] px-3 py-1 font-bold">BEST SELLER</span>
|
|
<span class="bg-surface-container-highest text-on-surface font-label-md text-[12px] px-3 py-1 font-bold border border-outline">SKY</span>
|
|
</div>
|
|
<h3 class="font-headline-lg text-headline-lg mb-2">Ölüdeniz Tandem Paragliding</h3>
|
|
<p class="font-body-md text-on-surface-variant mb-6 max-w-lg">Flight from 1900m Babadağ Mountain with expert pilots and 360-degree views.</p>
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-primary font-headline-md text-headline-md">€140</span>
|
|
<button class="bg-on-surface text-background px-6 py-2 font-bold hover:bg-primary transition-colors">Book Experience</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Boat Trip Card -->
|
|
<div class="md:col-span-4 group bg-surface-container-high border border-outline-variant card-hover-stroke transition-all cursor-pointer">
|
|
<div class="aspect-[4/5] relative overflow-hidden">
|
|
<img alt="Boat Trip" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="A luxury sailing yacht anchored in a secluded, emerald-green bay near Fethiye. The water is perfectly still, reflecting the white hull of the boat and the surrounding limestone cliffs. Soft sunlight dapples through the trees, creating a serene and exclusive Mediterranean atmosphere. The image is styled as a high-end travel magazine feature with deep blacks in the shadows and vibrant natural colors." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAmugXPbgcCdvc5L5NRz404O60_hphtGnTo0lOmZuZDlx9vOBnLZ2NJK7NNwZ2ymoMQ-puDfE6N1YuUNsoFiuwkwWLlya64_JPpn_jzQMA94Yyu9wMlaOvvCbHPt2CvUBNr8_vvPlA1r_bwAiN9jhmSStz8WLgGSPo_PWpAksp5alyx6sQU7Y82k_Fnc_tNsy7gfQmX9qMedPQ3uHPImshF7ET3BksdHGwwbEyBXFx3JHXA8PFYzZO87iG4gl5Wz4_mKzDrUlm-cx4"/>
|
|
<div class="absolute top-4 right-4">
|
|
<span class="bg-surface/60 backdrop-blur-md text-on-surface font-label-md text-[12px] px-3 py-1 border border-outline">SEA</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-stack-lg">
|
|
<h3 class="font-headline-md text-headline-md mb-2">12 Islands Private Charter</h3>
|
|
<p class="font-body-md text-on-surface-variant mb-4 line-clamp-2">Exclusive day cruise visiting hidden coves, sunken ruins, and crystal lagoons with gourmet lunch.</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-primary font-headline-md text-headline-md">From €450</span>
|
|
<span class="material-symbols-outlined text-primary">arrow_forward</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Saklikent Gorge Card -->
|
|
<div class="md:col-span-4 group bg-surface-container-high border border-outline-variant card-hover-stroke transition-all cursor-pointer">
|
|
<div class="aspect-[4/5] relative overflow-hidden">
|
|
<img alt="Saklikent Gorge" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Adventurers walking through the towering, narrow walls of Saklikent Gorge, with icy mountain water flowing around their feet. The limestone cliffs rise dramatically toward a sliver of blue sky, with high-contrast shadows emphasizing the depth and texture of the stone. The lighting is natural but intense, highlighting the raw power of the Mediterranean's geological wonders in a crisp, professional adventure photography style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBSMn6DFJWfc_NIjDkKwbx2mPfSiyZLBCPQ89bvFd3ba7KRfv1nK8k6BCqnszpr5uHKlqyBOfdN5eWstiUx7m1AwZVYExh8P3a0n2OwofY4wechXRvbF9yMvhCRfAb-idRLSy4pM2tF69FmaMhXhi-KoXT5cgQ1cC7ydfjD_EXSLwH18jbwUmmLYbLdaSEy081El5anM6vOyOSKQEqfsYAmBnQ7OG5HNZWJCBT-fGf5TrEXxyr9zaU9Kfhj6OXCiWrz0vpeVfjlKck"/>
|
|
<div class="absolute top-4 right-4">
|
|
<span class="bg-surface/60 backdrop-blur-md text-on-surface font-label-md text-[12px] px-3 py-1 border border-outline">LAND</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-stack-lg">
|
|
<h3 class="font-headline-md text-headline-md mb-2">Saklikent Canyon Trek</h3>
|
|
<p class="font-body-md text-on-surface-variant mb-4 line-clamp-2">Guided hiking through one of the deepest canyons in the world, followed by Tlos ancient city.</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-primary font-headline-md text-headline-md">€65</span>
|
|
<span class="material-symbols-outlined text-primary">arrow_forward</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Jeep Safari Card (Wide/Medium) -->
|
|
<div class="md:col-span-8 group bg-surface-container-high border border-outline-variant card-hover-stroke transition-all cursor-pointer relative overflow-hidden">
|
|
<div class="flex flex-col md:flex-row h-full">
|
|
<div class="w-full md:w-1/2 overflow-hidden h-[300px] md:h-auto">
|
|
<img alt="Jeep Safari" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="A convoy of rugged 4x4 off-road vehicles kicking up dust as they traverse a winding mountain path in the Turkish countryside. The background features expansive views of the Fethiye valley and distant peaks. The sunlight is bright and warm, creating a sense of action and exploration. The visual style is bold and high-contrast, emphasizing the adventurous nature of the brand." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCW2aJ-YOHdKd1WVbxAEmB0K9C0bWIfHjlvk8laK3YzIctHHtgG7INT5ZGNh4V0ep9IgOuDqF5SjVE3mN9SUJf6OBsmA_T_s257iRJ_lsxcZxCaRP4XZN9XjGpOA_uaVJR-gZxqZsn21T983oW_VMadgAbTy7i9KunFJaLEjusrSSbNbmqgar_0miRk0TzgIP35wR3l0D-p2kNUBFSh84_dzSpt01P2z8OUfvi8ckAXsbgv9bv1HCjp07JJUEfcj83cpyWdp3e3exs"/>
|
|
</div>
|
|
<div class="w-full md:w-1/2 p-stack-lg flex flex-col justify-center">
|
|
<div class="flex gap-2 mb-4">
|
|
<span class="bg-surface-container-highest text-on-surface font-label-md text-[12px] px-3 py-1 font-bold border border-outline">OFF-ROAD</span>
|
|
</div>
|
|
<h3 class="font-headline-md text-headline-md mb-4">Off-Road Jeep Safari</h3>
|
|
<p class="font-body-md text-on-surface-variant mb-6">Explore the rugged Taurus Mountains, remote villages, and secret waterfalls in our custom 4x4s.</p>
|
|
<div class="flex items-center gap-6">
|
|
<span class="text-primary font-headline-md text-headline-md">€85</span>
|
|
<button class="bg-surface border border-outline text-on-surface px-6 py-2 font-bold hover:border-primary hover:text-primary transition-all">Details</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Stats / Proof Section -->
|
|
<section class="py-24 bg-surface-container-lowest border-y border-outline-variant">
|
|
<div class="max-w-container-max mx-auto px-margin-desktop grid grid-cols-2 md:grid-cols-4 gap-gutter text-center">
|
|
<div class="space-y-2">
|
|
<div class="text-primary font-display-lg text-[40px] md:text-headline-lg">15+</div>
|
|
<div class="font-label-md text-label-md text-on-surface-variant uppercase tracking-widest">Years Experience</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="text-primary font-display-lg text-[40px] md:text-headline-lg">50k+</div>
|
|
<div class="font-label-md text-label-md text-on-surface-variant uppercase tracking-widest">Happy Guests</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="text-primary font-display-lg text-[40px] md:text-headline-lg">100%</div>
|
|
<div class="font-label-md text-label-md text-on-surface-variant uppercase tracking-widest">Safety Record</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="text-primary font-display-lg text-[40px] md:text-headline-lg">4.9/5</div>
|
|
<div class="font-label-md text-label-md text-on-surface-variant uppercase tracking-widest">TripAdvisor</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- CTA Section -->
|
|
<section class="relative py-section-gap overflow-hidden">
|
|
<div class="absolute inset-0 z-0">
|
|
<img alt="Beach Background" class="w-full h-full object-cover grayscale opacity-20" data-alt="A serene, minimalist view of a secluded white-sand beach with crystal clear turquoise water washing over smooth pebbles. The image is rendered with high contrast and a cool, sophisticated color palette, creating a luxurious and tranquil atmosphere. The composition is clean and symmetrical, reflecting the premium quality of the Fethiye Adventure Co. brand." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCnJSQiCX2tONJGX7bmNkG8X0m9DP3OruDPUcqU_rfY6sLS7xiTRKpsQQUIIzMaTX5w6smkZiMhWk4yWfbtqZQL7QJQ9-FVWa1MqqYdgLe3dOT4IbHjnK72kMOxcrz1Wop5iUJ4LZuhsI4Uo78SBLZJzUf6y8zDNd_LpTkH8vdP64LbnKBum78i1Z29k51Ne6QDOzCvqj4MqiJV9rIbh1-GjDcITl6KaH5wkVb35EE2qTIz-zWHuPsP2PAiYrjvyxGnqvjqgF6pQSQ"/>
|
|
</div>
|
|
<div class="relative z-10 text-center max-w-3xl mx-auto px-margin-mobile">
|
|
<h2 class="font-headline-lg text-headline-lg mb-8">Ready for your next adventure?</h2>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant mb-12">
|
|
Our team of adventure specialists is ready to craft the perfect itinerary for your stay in Fethiye. From group excursions to private VIP experiences.
|
|
</p>
|
|
<div class="p-8 bg-surface-container border border-outline-variant">
|
|
<form class="flex flex-col md:flex-row gap-4">
|
|
<input class="flex-grow bg-background border border-outline-variant p-4 text-on-surface focus:border-primary focus:ring-0" placeholder="Your Email Address" type="email"/>
|
|
<button class="bg-primary-container text-on-primary-container px-10 py-4 font-bold uppercase tracking-widest hover:brightness-110">Get In Touch</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer (Shared Component) -->
|
|
<footer class="w-full py-stack-lg px-margin-desktop max-w-container-max mx-auto flex flex-col md:flex-row justify-between items-center border-t border-outline-variant gap-8 bg-surface-container-lowest">
|
|
<div class="flex flex-col gap-2">
|
|
<div class="font-headline-md text-headline-md font-bold text-primary">Fethiye Adventure Co.</div>
|
|
<p class="text-on-surface-variant font-body-md text-body-md">© 2024 Fethiye Adventure Co. All rights reserved.</p>
|
|
</div>
|
|
<div class="flex flex-wrap justify-center gap-stack-lg">
|
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-md text-body-md" href="#">Privacy Policy</a>
|
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-md text-body-md" href="#">Terms of Service</a>
|
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-md text-body-md" href="#">FAQ</a>
|
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-md text-body-md" href="#">Blog</a>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary cursor-pointer">language</span>
|
|
<span class="font-label-md text-label-md text-on-surface-variant">EN / TRY</span>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
// Micro-interaction for Sticky Header
|
|
window.addEventListener('scroll', () => {
|
|
const header = document.querySelector('header');
|
|
const utilityLayer = header.querySelector('.bg-surface-container-lowest');
|
|
if (window.scrollY > 50) {
|
|
utilityLayer.style.marginTop = `-${utilityLayer.offsetHeight}px`;
|
|
utilityLayer.style.transition = 'margin-top 0.3s ease-in-out';
|
|
} else {
|
|
utilityLayer.style.marginTop = '0';
|
|
}
|
|
});
|
|
</script>
|
|
</body></html> |