293 lines
19 KiB
HTML
293 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="scroll-smooth" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>SALMAKIS YACHTING | The Nautical Atelier</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@200;300;400&family=Manrope:wght@300;400;600&family=Inter:wght@400;500;700&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-secondary-container": "#785a1a",
|
|
"tertiary": "#090500",
|
|
"on-tertiary-container": "#958467",
|
|
"error-container": "#ffdad6",
|
|
"inverse-surface": "#2f3131",
|
|
"on-surface-variant": "#43474e",
|
|
"on-error-container": "#93000a",
|
|
"on-background": "#1a1c1c",
|
|
"on-tertiary-fixed-variant": "#52452c",
|
|
"surface-container-highest": "#e2e2e2",
|
|
"background": "#f9f9f9",
|
|
"surface-variant": "#e2e2e2",
|
|
"on-primary-fixed-variant": "#2f486a",
|
|
"tertiary-fixed": "#f4e0be",
|
|
"primary-container": "#001f3f",
|
|
"surface": "#f9f9f9",
|
|
"primary-fixed": "#d4e3ff",
|
|
"on-tertiary": "#ffffff",
|
|
"on-primary-container": "#6f88ad",
|
|
"on-secondary-fixed-variant": "#5d4201",
|
|
"on-primary": "#ffffff",
|
|
"on-secondary-fixed": "#261900",
|
|
"on-primary-fixed": "#001c3a",
|
|
"secondary-fixed-dim": "#e9c176",
|
|
"inverse-primary": "#afc8f0",
|
|
"outline-variant": "#c4c6cf",
|
|
"surface-dim": "#dadada",
|
|
"secondary": "#775a19",
|
|
"primary": "#000613",
|
|
"inverse-on-surface": "#f1f1f1",
|
|
"secondary-container": "#fed488",
|
|
"on-tertiary-fixed": "#241a06",
|
|
"surface-container": "#eeeeee",
|
|
"on-error": "#ffffff",
|
|
"error": "#ba1a1a",
|
|
"surface-container-high": "#e8e8e8",
|
|
"on-secondary": "#ffffff",
|
|
"surface-bright": "#f9f9f9",
|
|
"primary-fixed-dim": "#afc8f0",
|
|
"surface-container-lowest": "#ffffff",
|
|
"outline": "#74777f",
|
|
"secondary-fixed": "#ffdea5",
|
|
"surface-container-low": "#f3f3f3",
|
|
"tertiary-fixed-dim": "#d7c4a4",
|
|
"on-surface": "#1a1c1c",
|
|
"tertiary-container": "#271d08",
|
|
"surface-tint": "#476083"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0px",
|
|
"lg": "0px",
|
|
"xl": "0px",
|
|
"full": "9999px"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Noto Serif"],
|
|
"body": ["Manrope"],
|
|
"label": ["Inter"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.glass-nav {
|
|
background: rgba(249, 249, 249, 0.8);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface font-body antialiased">
|
|
<!-- TopNavBar -->
|
|
<nav class="fixed top-0 w-full z-50 flex flex-col items-center justify-between px-6 md:px-12 py-6 w-full bg-surface/80 backdrop-blur-md dark:bg-primary/80">
|
|
<div class="flex items-center justify-between w-full">
|
|
<span class="text-2xl font-headline tracking-[0.2em] text-primary dark:text-white text-center w-full block uppercase">SALMAKIS</span>
|
|
<div class="md:hidden">
|
|
<span class="material-symbols-outlined text-secondary" data-icon="menu">menu</span>
|
|
</div>
|
|
</div>
|
|
<div class="hidden md:flex items-center space-x-12 mt-6">
|
|
<a class="font-headline tracking-widest uppercase text-sm font-light text-secondary border-b border-secondary pb-1 hover:text-secondary transition-colors duration-500" href="#">M/S MEIRA</a>
|
|
<a class="font-headline tracking-widest uppercase text-sm font-light text-primary/60 dark:text-white/60 hover:text-secondary transition-colors duration-500" href="#">M/Y PRINCESS MELDA</a>
|
|
<a class="font-headline tracking-widest uppercase text-sm font-light text-primary/60 dark:text-white/60 hover:text-secondary transition-colors duration-500" href="#">QUEEN OF SALMAKIS</a>
|
|
<a class="font-headline tracking-widest uppercase text-sm font-light text-primary/60 dark:text-white/60 hover:text-secondary transition-colors duration-500" href="#">DOLCE MARE</a>
|
|
</div>
|
|
</nav>
|
|
<!-- Hero Section -->
|
|
<header class="relative h-screen w-full overflow-hidden">
|
|
<div class="absolute inset-0">
|
|
<img alt="Luxury Yacht Sunset Dining" class="w-full h-full object-cover" data-alt="Cinematic 8k photo of a luxury yacht deck at sunset, elegant dining table set with crystal glasses and white linen, warm golden hour lighting reflecting off polished wood" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3yj7ljBpQhuIme8qbqiS6c-Q8OyFePxrE3AyiuUNJJ3RWdRvmgwjkLLC8I96z20Mh8QIBR976--8G-2xS7HO3c2ldhgTse9M8zPzZoKdBtrVL8ran-rm_UpwUZu_DzgTUYlbEkVTEEFunqFT0l4eUa8MuenzpfkkyLy5vnmoFGtMi0GR3Apw6TcaDeQo5rGq4Xg5PvE1pXFHe808wSZuBI3_a440lstHFXp0MrGu5ct2TW152xhoJELteMoyxPTSARgeIeMflRtf7"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-primary/80 via-transparent to-transparent"></div>
|
|
</div>
|
|
<div class="relative h-full flex flex-col items-center justify-center text-center px-6">
|
|
<h1 class="font-headline text-5xl md:text-8xl font-extralight tracking-tight text-secondary mb-6 italic">A Masterpiece on Water</h1>
|
|
<p class="font-body text-white/80 tracking-widest uppercase text-sm md:text-base max-w-2xl">EXPERIENCE THE ART OF NAUTICAL LIVING. HANDCRAFTED VOYAGES ACROSS THE MEDITERRANEAN.</p>
|
|
<button class="mt-12 px-12 py-4 bg-secondary text-white font-headline tracking-[0.3em] uppercase text-xs hover:bg-on-secondary-container transition-all duration-700">
|
|
DISCOVER THE ATELIER
|
|
</button>
|
|
</div>
|
|
<div class="absolute bottom-12 left-1/2 -translate-x-1/2 flex flex-col items-center">
|
|
<span class="text-white/40 text-[10px] tracking-[0.5em] uppercase mb-4">Scroll to Explore</span>
|
|
<div class="w-px h-16 bg-gradient-to-b from-secondary to-transparent"></div>
|
|
</div>
|
|
</header>
|
|
<!-- Fleet Intro -->
|
|
<section class="py-32 px-6 md:px-24 bg-surface">
|
|
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-end gap-16">
|
|
<div class="w-full md:w-1/2">
|
|
<h2 class="font-headline text-4xl md:text-6xl text-primary leading-tight mb-8">The curated <br/><span class="text-secondary italic">Salmakis Fleet.</span></h2>
|
|
<div class="h-px w-24 bg-secondary mb-8"></div>
|
|
<p class="font-body text-on-surface-variant text-lg leading-relaxed font-light">
|
|
Our fleet represents the pinnacle of naval engineering and interior design. Each vessel is a sanctuary of privacy, offering a bespoke environment tailored to the world's most discerning travelers.
|
|
</p>
|
|
</div>
|
|
<div class="w-full md:w-1/2 flex justify-end">
|
|
<div class="text-right">
|
|
<span class="font-label text-6xl md:text-8xl text-outline-variant/30 font-bold leading-none">01 / 04</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Fleet Grid (Bento/Asymmetric Style) -->
|
|
<main class="pb-40 bg-surface">
|
|
<div class="max-w-[1400px] mx-auto px-6 space-y-40">
|
|
<!-- M/S MEIRA -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-0 group">
|
|
<div class="md:col-span-7 relative h-[600px] md:h-[800px] overflow-hidden">
|
|
<img alt="M/S MEIRA" class="w-full h-full object-cover grayscale-[20%] group-hover:grayscale-0 transition-all duration-1000 scale-100 group-hover:scale-105" data-alt="Sleek white motor sailor yacht M/S MEIRA sailing on turquoise waters under bright mediterranean sun" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB74-T3Ti13lKiCdJ-Df40m60TYnUBXLLtZmtpzxb2e_67n7qXyUipwpNq3U9bxGjWLButShvUqP1EzE3Qre1na7LornQYMlbA3zfuAuVMUEcQJZ9YY0LR8FLG4T1O1Pon1Y7p47Ca_AGaOXmtOj7_Mimef8rZfETTYhaskftaTFyGLj9D3_lsG_VJjGs83SqFDegtluDx_AwMKO47IA-vh4UxreVaZxNInOQuD-T_ZWOHLd1ua6mNPjQGJkfUg-LcFJbBCorG4gx7-"/>
|
|
<div class="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-primary/60 to-transparent md:hidden">
|
|
<h3 class="font-headline text-3xl text-white tracking-widest uppercase">M/S MEIRA</h3>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-5 flex flex-col justify-center md:pl-20 py-12 md:py-0">
|
|
<span class="font-label text-xs tracking-[0.4em] text-secondary uppercase mb-4">Flagship Selection</span>
|
|
<h3 class="font-headline text-4xl md:text-6xl text-primary mb-8 tracking-wide">M/S MEIRA</h3>
|
|
<p class="text-on-surface-variant font-light leading-relaxed mb-12 max-w-sm">
|
|
Defining grandeur with six palatial staterooms and an expansive sundeck featuring a jacuzzi and sky lounge.
|
|
</p>
|
|
<div class="grid grid-cols-3 border-t border-outline-variant/20 pt-8">
|
|
<div class="flex flex-col gap-1">
|
|
<span class="material-symbols-outlined text-secondary text-xl" data-icon="straighten">straighten</span>
|
|
<span class="font-label text-[10px] tracking-widest text-outline uppercase mt-2">Length</span>
|
|
<span class="font-body text-sm text-primary font-semibold">55 Meters</span>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="material-symbols-outlined text-secondary text-xl" data-icon="groups">groups</span>
|
|
<span class="font-label text-[10px] tracking-widest text-outline uppercase mt-2">Guests</span>
|
|
<span class="font-body text-sm text-primary font-semibold">12 Persons</span>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="material-symbols-outlined text-secondary text-xl" data-icon="payments">payments</span>
|
|
<span class="font-label text-[10px] tracking-widest text-outline uppercase mt-2">Price</span>
|
|
<span class="font-body text-sm text-primary font-semibold">From €125k</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- M/Y PRINCESS MELDA -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-0 group">
|
|
<div class="md:col-span-5 md:order-1 flex flex-col justify-center md:pr-20 py-12 md:py-0 md:text-right md:items-end">
|
|
<span class="font-label text-xs tracking-[0.4em] text-secondary uppercase mb-4">Pure Modernism</span>
|
|
<h3 class="font-headline text-4xl md:text-6xl text-primary mb-8 tracking-wide">M/Y PRINCESS MELDA</h3>
|
|
<p class="text-on-surface-variant font-light leading-relaxed mb-12 max-w-sm">
|
|
A contemporary masterpiece of glass and steel, offering panoramic views and a minimalist, zen-inspired interior.
|
|
</p>
|
|
<div class="grid grid-cols-3 border-t border-outline-variant/20 pt-8 w-full">
|
|
<div class="flex flex-col gap-1">
|
|
<span class="material-symbols-outlined text-secondary text-xl" data-icon="straighten">straighten</span>
|
|
<span class="font-label text-[10px] tracking-widest text-outline uppercase mt-2">Length</span>
|
|
<span class="font-body text-sm text-primary font-semibold">42 Meters</span>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="material-symbols-outlined text-secondary text-xl" data-icon="groups">groups</span>
|
|
<span class="font-label text-[10px] tracking-widest text-outline uppercase mt-2">Guests</span>
|
|
<span class="font-body text-sm text-primary font-semibold">10 Persons</span>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="material-symbols-outlined text-secondary text-xl" data-icon="payments">payments</span>
|
|
<span class="font-label text-[10px] tracking-widest text-outline uppercase mt-2">Price</span>
|
|
<span class="font-body text-sm text-primary font-semibold">From €95k</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-7 md:order-2 relative h-[600px] md:h-[800px] overflow-hidden">
|
|
<img alt="M/Y PRINCESS MELDA" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" data-alt="Modern motor yacht M/Y PRINCESS MELDA with sharp architectural lines anchored in a secluded azure cove at noon" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAyUY-gItMKc5HHY-oWXhcwzD6MzOA6vwa_g1ztOkbR1yg0iW1HnEKN1xaD1bTXAODGX_K0Eljvlm7jWgUbR6PGwerp8GP7LlTY4snQ2Y0YFjnmdwTdPUw54CiaK0OyKrqebp2acJurrOJAnnVtiyKB2H3T7M8jqCdVtv9vX2shhnGawTiQJ4uRVDtEqYjVzguAo2J5YtRwGdsr4-U4qgPE1V8W3DFbtsqN7ZRnThFFi7VDz5WQYgS4gn443v6SIZai7pTvPMsv9Kt7"/>
|
|
</div>
|
|
</div>
|
|
<!-- QUEEN OF SALMAKIS -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-0 group">
|
|
<div class="md:col-span-7 relative h-[600px] md:h-[800px] overflow-hidden">
|
|
<img alt="QUEEN OF SALMAKIS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" data-alt="Traditional high-end Gulet QUEEN OF SALMAKIS with dark wood finish and cream sails gliding through calm seas" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDAARpNbHLKXDKgwZTf3xnI87mwxADftMiVXQl1RV1pi94nUI7r2_JS9_6FGK28LC18bB2-NxVmo8iLO1mfxXwBM0ZMX7Z57O9g0INcRGlJEN52Ubvr3zcnnzh5g71lTJSBY5aXpdwZg6fLm_hBVzwb4fPUsg5ZynfYqccD7-8uZ4DnZYrHHVPQS62xxv0j2kH0FBgz-MSSr_S6h9pYu8Yg5LEJ2_u80l72OMJAKMkpdvhTNAwCa8ykBWdRQqQrFkX7KitUgACX4fc1"/>
|
|
</div>
|
|
<div class="md:col-span-5 flex flex-col justify-center md:pl-20 py-12 md:py-0">
|
|
<span class="font-label text-xs tracking-[0.4em] text-secondary uppercase mb-4">Heritage Craft</span>
|
|
<h3 class="font-headline text-4xl md:text-6xl text-primary mb-8 tracking-wide">QUEEN OF SALMAKIS</h3>
|
|
<p class="text-on-surface-variant font-light leading-relaxed mb-12 max-w-sm">
|
|
A royal gulet that marries centuries-old boatbuilding traditions with the uncompromising luxury of a modern resort.
|
|
</p>
|
|
<div class="grid grid-cols-3 border-t border-outline-variant/20 pt-8">
|
|
<div class="flex flex-col gap-1">
|
|
<span class="material-symbols-outlined text-secondary text-xl" data-icon="straighten">straighten</span>
|
|
<span class="font-label text-[10px] tracking-widest text-outline uppercase mt-2">Length</span>
|
|
<span class="font-body text-sm text-primary font-semibold">40 Meters</span>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="material-symbols-outlined text-secondary text-xl" data-icon="groups">groups</span>
|
|
<span class="font-label text-[10px] tracking-widest text-outline uppercase mt-2">Guests</span>
|
|
<span class="font-body text-sm text-primary font-semibold">18 Persons</span>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="material-symbols-outlined text-secondary text-xl" data-icon="payments">payments</span>
|
|
<span class="font-label text-[10px] tracking-widest text-outline uppercase mt-2">Price</span>
|
|
<span class="font-body text-sm text-primary font-semibold">From €70k</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- DOLCE MARE -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-0 group">
|
|
<div class="md:col-span-5 md:order-1 flex flex-col justify-center md:pr-20 py-12 md:py-0 md:text-right md:items-end">
|
|
<span class="font-label text-xs tracking-[0.4em] text-secondary uppercase mb-4">The Sweet Life</span>
|
|
<h3 class="font-headline text-4xl md:text-6xl text-primary mb-8 tracking-wide">DOLCE MARE</h3>
|
|
<p class="text-on-surface-variant font-light leading-relaxed mb-12 max-w-sm">
|
|
Experience 'La Dolce Vita' on the Turkish Riviera. An intimate vessel perfect for multi-generational family escapes.
|
|
</p>
|
|
<div class="grid grid-cols-3 border-t border-outline-variant/20 pt-8 w-full">
|
|
<div class="flex flex-col gap-1">
|
|
<span class="material-symbols-outlined text-secondary text-xl" data-icon="straighten">straighten</span>
|
|
<span class="font-label text-[10px] tracking-widest text-outline uppercase mt-2">Length</span>
|
|
<span class="font-body text-sm text-primary font-semibold">36 Meters</span>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="material-symbols-outlined text-secondary text-xl" data-icon="groups">groups</span>
|
|
<span class="font-label text-[10px] tracking-widest text-outline uppercase mt-2">Guests</span>
|
|
<span class="font-body text-sm text-primary font-semibold">12 Persons</span>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="material-symbols-outlined text-secondary text-xl" data-icon="payments">payments</span>
|
|
<span class="font-label text-[10px] tracking-widest text-outline uppercase mt-2">Price</span>
|
|
<span class="font-body text-sm text-primary font-semibold">From €55k</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-7 md:order-2 relative h-[600px] md:h-[800px] overflow-hidden">
|
|
<img alt="DOLCE MARE Interior" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" data-alt="Interior of yacht DOLCE MARE showing a sun-drenched master cabin with polished mahogany and luxury white bedding" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDIZB8oQKd5601RKs28u9wpSyzRpeG9jqovUE-0N2-U0P6YPuyhJL7b1GZTdeFrA_Goj2VCvedWSo-5q3VxYLBLgOXmLczwcSTRG2uG3AB0TZt863cg_BRqvdoIVS97J-wsOTcQYoFBRwRn1JaqUXExndCYR-eaW7qfcfnjKRc3SdkUxSFrb5WrfWtGX5SSn-549vgTsQARcTuB3BDGEfonptXrcywAPYz8ppGJ7jJeMuEzPOAfudLPZOy4r5b6V4XaKrn_rT8CCz7s"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Call to Action -->
|
|
<section class="py-40 bg-primary text-center">
|
|
<div class="max-w-4xl mx-auto px-6">
|
|
<h2 class="font-headline text-4xl md:text-7xl text-white mb-12">Your private horizon awaits.</h2>
|
|
<p class="font-body text-secondary text-lg tracking-widest uppercase mb-16">Contact our concierge for a bespoke consultation.</p>
|
|
<div class="flex flex-col md:flex-row items-center justify-center gap-8">
|
|
<button class="w-full md:w-auto px-16 py-5 bg-secondary text-white font-headline text-sm tracking-[0.2em] uppercase">BOOK AN INQUIRY</button>
|
|
<button class="w-full md:w-auto px-16 py-5 border border-secondary text-secondary font-headline text-sm tracking-[0.2em] uppercase hover:bg-secondary hover:text-white transition-all duration-500">VIEW ALL DESTINATIONS</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Footer -->
|
|
<footer class="flex flex-col items-center justify-center text-center w-full py-24 px-12 bg-primary dark:bg-primary">
|
|
<div class="text-xl font-headline text-secondary mb-4 tracking-[0.2em]">SALMAKIS</div>
|
|
<div class="flex flex-wrap justify-center gap-8 mb-12">
|
|
<a class="font-headline tracking-widest text-xs font-light uppercase text-secondary/50 hover:text-secondary transition-all" href="#">PRIVACY</a>
|
|
<a class="font-headline tracking-widest text-xs font-light uppercase text-secondary/50 hover:text-secondary transition-all" href="#">TERMS</a>
|
|
<a class="font-headline tracking-widest text-xs font-light uppercase text-secondary/50 hover:text-secondary transition-all" href="#">CONTACT</a>
|
|
<a class="font-headline tracking-widest text-xs font-light uppercase text-secondary/50 hover:text-secondary transition-all" href="#">PRESS</a>
|
|
</div>
|
|
<div class="font-headline tracking-widest text-xs font-light uppercase text-secondary">
|
|
© 2024 SALMAKIS YACHTING. THE NAUTICAL ATELIER.
|
|
</div>
|
|
</footer>
|
|
</body></html> |