282 lines
16 KiB
HTML
282 lines
16 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>About Us & Contact | Fethiye Adventure Co.</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;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"/>
|
|
<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;
|
|
}
|
|
.form-input-focus:focus {
|
|
outline: none;
|
|
border-color: #ff6b00;
|
|
box-shadow: 0 0 0 1px #ff6b00;
|
|
}
|
|
::-webkit-scrollbar { width: 8px; }
|
|
::-webkit-scrollbar-track { background: #131313; }
|
|
::-webkit-scrollbar-thumb { background: #333333; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #ff6b00; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-md">
|
|
<!-- TopNavBar -->
|
|
<nav class="fixed top-0 w-full z-50 flex flex-col bg-surface dark:bg-surface border-b border-outline-variant transition-all duration-300 ease-in-out">
|
|
<div class="max-w-container-max mx-auto w-full px-margin-desktop py-4 flex justify-between items-center">
|
|
<div class="font-headline-md text-headline-md font-bold text-primary dark:text-primary">
|
|
Fethiye Adventure Co.
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-stack-lg">
|
|
<a class="font-body-md text-body-md text-on-surface hover:text-primary transition-colors" href="#">Tours</a>
|
|
<a class="font-body-md text-body-md text-on-surface hover:text-primary transition-colors" href="#">Private Charters</a>
|
|
<a class="font-body-md text-body-md text-on-surface hover:text-primary transition-colors" href="#">About Us</a>
|
|
<a class="font-body-md text-body-md text-primary font-bold border-b-2 border-primary pb-1" href="#">Contact</a>
|
|
<button class="bg-primary-container text-on-primary px-8 py-3 font-label-md text-label-md uppercase tracking-wider hover:opacity-90 transition-all">
|
|
Book Now
|
|
</button>
|
|
</div>
|
|
<button class="md:hidden text-primary">
|
|
<span class="material-symbols-outlined">menu</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<main class="pt-32 pb-section-gap">
|
|
<div class="max-w-container-max mx-auto px-margin-desktop">
|
|
<!-- Hero Heading -->
|
|
<div class="mb-stack-lg border-l-4 border-primary-container pl-6">
|
|
<h1 class="font-display-lg text-display-lg uppercase leading-none">The Spirit of<br/><span class="text-primary-container">Adventure</span></h1>
|
|
<p class="font-body-lg text-body-lg mt-4 max-w-2xl text-on-surface-variant">We don't just provide tours; we curate life-defining moments amidst the turquoise waters and rugged peaks of Fethiye.</p>
|
|
</div>
|
|
<!-- Split Layout Section -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-section-gap items-start mt-stack-lg">
|
|
<!-- Left: Content & Mission -->
|
|
<div class="space-y-stack-lg">
|
|
<section>
|
|
<h2 class="font-headline-lg text-headline-lg mb-stack-md">Our Mission</h2>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
|
|
Founded in 2010 by a team of local sailors and mountain guides, Fethiye Adventure Co. was born from a desire to showcase the Mediterranean's hidden gems with professional rigor and sustainable practices. We believe that true luxury lies in the raw beauty of nature, accessed through expert craftsmanship.
|
|
</p>
|
|
</section>
|
|
<div class="relative h-[400px] overflow-hidden group border border-outline-variant">
|
|
<img alt="Adventure Mission" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="A professional tour guide in technical gear standing on a rugged cliffside overlooking the turquoise waters of Oludeniz, Fethiye. The lighting is high-contrast golden hour, casting long dramatic shadows. The aesthetic is clean, adventurous, and premium, with a deep anthracite color palette and sharp details in the surrounding limestone terrain." src="https://lh3.googleusercontent.com/aida-public/AB6AXuChYoQM5EXifUAJVegRfITxlbTcda7_woCek97JaojiIIVQqmW1lQpFwcDfAOGxvEpyR-LnRFPka9zjG0J2R0GSdCzZ5ofizZKQ0poir4tXVBHarWmA1Q12ZRQEkFbifbvFabF7nWhydvSRBL0GI88fXUx-c4GUJzQFnu92v-xhOVebCAqDAo44qQPICqRQtmw3p9gxTb4-GhzDxJTOY3PXcgQ5CSI2r-d8mpaSAy1VyEfdn3jVC7_ETJNJ3OOrSAEZKyewA7HkGoo"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-background to-transparent opacity-60"></div>
|
|
</div>
|
|
<section class="grid grid-cols-2 gap-gutter">
|
|
<div class="p-stack-md bg-surface-container-high border border-outline-variant">
|
|
<span class="text-primary-container font-headline-md text-headline-md block mb-1">14+</span>
|
|
<span class="font-label-md text-label-md uppercase text-on-surface-variant">Years Experience</span>
|
|
</div>
|
|
<div class="p-stack-md bg-surface-container-high border border-outline-variant">
|
|
<span class="text-primary-container font-headline-md text-headline-md block mb-1">200+</span>
|
|
<span class="font-label-md text-label-md uppercase text-on-surface-variant">Unique Routes</span>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- Right: Contact Form -->
|
|
<div class="bg-surface-container p-stack-lg border border-outline-variant sticky top-32">
|
|
<h2 class="font-headline-lg text-headline-lg mb-stack-md">Get in Touch</h2>
|
|
<form class="space-y-stack-md">
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-label-md text-on-surface-variant uppercase">Full Name</label>
|
|
<input class="w-full bg-surface-container-lowest border border-outline-variant p-4 text-on-surface form-input-focus transition-all" placeholder="John Doe" type="text"/>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-label-md text-on-surface-variant uppercase">Email Address</label>
|
|
<input class="w-full bg-surface-container-lowest border border-outline-variant p-4 text-on-surface form-input-focus transition-all" placeholder="john@example.com" type="email"/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-label-md text-on-surface-variant uppercase">Phone</label>
|
|
<input class="w-full bg-surface-container-lowest border border-outline-variant p-4 text-on-surface form-input-focus transition-all" placeholder="+90 5XX XXX XX XX" type="tel"/>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-label-md text-on-surface-variant uppercase">Interest</label>
|
|
<select class="w-full bg-surface-container-lowest border border-outline-variant p-4 text-on-surface form-input-focus transition-all">
|
|
<option>Private Yacht Charter</option>
|
|
<option>Paragliding Adventure</option>
|
|
<option>Hiking & Ancient Ruins</option>
|
|
<option>Custom Itinerary</option>
|
|
</select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-label-md text-on-surface-variant uppercase">Message</label>
|
|
<textarea class="w-full bg-surface-container-lowest border border-outline-variant p-4 text-on-surface form-input-focus transition-all" placeholder="How can we make your trip unforgettable?" rows="4"></textarea>
|
|
</div>
|
|
<button class="w-full bg-primary-container text-on-primary py-4 font-headline-md text-headline-md uppercase tracking-widest hover:bg-opacity-90 transition-all flex items-center justify-center gap-2" type="submit">
|
|
Send Request
|
|
<span class="material-symbols-outlined">send</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- Integrated Map Section -->
|
|
<section class="mt-section-gap">
|
|
<div class="flex flex-col md:flex-row justify-between items-end mb-stack-lg border-b border-outline-variant pb-stack-sm">
|
|
<h2 class="font-headline-lg text-headline-lg">Our Headquarters</h2>
|
|
<p class="font-body-md text-body-md text-on-surface-variant mb-1">Karagözler, Fevzi Çakmak Cd. No:42, 48300 Fethiye/Muğla</p>
|
|
</div>
|
|
<div class="relative h-[500px] bg-surface-container-high border border-outline-variant grayscale hover:grayscale-0 transition-all duration-500 overflow-hidden">
|
|
<!-- Map Placeholder with data-location -->
|
|
<img alt="Fethiye Office Location" class="w-full h-full object-cover" data-alt="A stylized, high-contrast satellite view map of the Fethiye marina and surrounding Mediterranean coastline. The image uses a dark mode aesthetic with deep anthracite water and subtle orange glowing markers for key locations. The lighting is sophisticated and moody, highlighting the dramatic geography of the Turkish Riviera in a premium editorial style." data-location="Fethiye" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCiXexIfdJoSzYGpyw5B52Y3UTpBZWSpn8HU6AAHlSLEH40ipaCOChjq5iBPfXyTj0WhDDjcyNQmT3g-8n7LZthDx4VdTqA32PJIQD9Z-NnHlJ4EGl8h6gxLzmkBpDZniPhgDbJJUEC_QqCol6AQ9lYaY572V5RzQDxFuwazWcDIGLqCY1iFwe_wlyfzDGUzP27Jk0_zTUIRpw6JMzobHtEYCd1aKoSaIp4IpTu8i3Xe8ILBqi2ECYeVQra7fEFgF7Gm7v1FntloI0"/>
|
|
<!-- Overlay Marker Card -->
|
|
<div class="absolute bottom-10 left-10 bg-background p-stack-md border border-primary-container max-w-xs shadow-2xl">
|
|
<div class="flex items-center gap-stack-sm text-primary-container mb-2">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">location_on</span>
|
|
<span class="font-label-md text-label-md uppercase">Fethiye Office</span>
|
|
</div>
|
|
<p class="text-on-surface text-body-md">Open Daily: 08:00 - 20:00</p>
|
|
<p class="text-on-surface-variant text-label-md mt-1">Pop by for a Turkish tea and a travel consultation.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="bg-surface-container-lowest dark:bg-surface-container-lowest border-t border-outline-variant">
|
|
<div 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 gap-stack-md">
|
|
<div class="font-headline-md text-headline-md font-bold text-primary">
|
|
Fethiye Adventure Co.
|
|
</div>
|
|
<div class="flex flex-wrap justify-center gap-stack-lg">
|
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Privacy Policy</a>
|
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Terms of Service</a>
|
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">FAQ</a>
|
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Blog</a>
|
|
</div>
|
|
<div class="font-body-md text-body-md text-on-surface-variant">
|
|
© 2024 Fethiye Adventure Co. All rights reserved.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
// Simple scroll interaction for the Navbar
|
|
window.addEventListener('scroll', () => {
|
|
const nav = document.querySelector('nav');
|
|
if (window.scrollY > 50) {
|
|
nav.classList.add('bg-opacity-90', 'backdrop-blur-md', 'py-2');
|
|
nav.classList.remove('py-4');
|
|
} else {
|
|
nav.classList.remove('bg-opacity-90', 'backdrop-blur-md', 'py-2');
|
|
nav.classList.add('py-4');
|
|
}
|
|
});
|
|
|
|
// Form submission feedback
|
|
const form = document.querySelector('form');
|
|
form.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const btn = form.querySelector('button');
|
|
const originalContent = btn.innerHTML;
|
|
btn.innerHTML = 'Sending...';
|
|
btn.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = 'Message Sent!';
|
|
btn.classList.replace('bg-primary-container', 'bg-green-600');
|
|
form.reset();
|
|
setTimeout(() => {
|
|
btn.innerHTML = originalContent;
|
|
btn.classList.replace('bg-green-600', 'bg-primary-container');
|
|
btn.disabled = false;
|
|
}, 3000);
|
|
}, 1500);
|
|
});
|
|
</script>
|
|
</body></html> |