|
|
@@ -0,0 +1,553 @@
|
|
|
+<script>
|
|
|
+ import { onMount } from 'svelte';
|
|
|
+
|
|
|
+ let scrollY = $state(0);
|
|
|
+ let mobileMenuOpen = $state(false);
|
|
|
+ let lightboxOpen = $state(false);
|
|
|
+ let lightboxIndex = $state(0);
|
|
|
+
|
|
|
+ const WHATSAPP = 'https://wa.me/50689630901?text=Hi!%20I%27d%20like%20to%20book%20a%20fishing%20trip';
|
|
|
+ const PHONE = 'tel:+50689630901';
|
|
|
+
|
|
|
+ const navLinks = [
|
|
|
+ { label: 'About', href: '#about' },
|
|
|
+ { label: 'Fleet', href: '#fleet' },
|
|
|
+ { label: 'Trips', href: '#trips' },
|
|
|
+ { label: 'Gallery', href: '#gallery' },
|
|
|
+ { label: 'Contact', href: '#contact' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ const fleet = [
|
|
|
+ {
|
|
|
+ name: 'Gunslinger',
|
|
|
+ brand: "Clear Water 25'",
|
|
|
+ year: '2007 (Restored 2025)',
|
|
|
+ engine: 'Suzuki 200 HP',
|
|
|
+ capacity: '4–5 passengers',
|
|
|
+ features: ['Outriggers', 'Rod holders', 'Toilet', 'Live well'],
|
|
|
+ image: '/boats/gunslinger-marina-side.jpg',
|
|
|
+ desc: 'Our classic inshore workhorse. Fully restored in 2025 with all new equipment. Perfect for chasing roosterfish and snook along the coast.'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Grady-White',
|
|
|
+ brand: "Grady-White 25.3'",
|
|
|
+ year: '2022',
|
|
|
+ engine: '2× Suzuki 200 HP (44 kts)',
|
|
|
+ capacity: 'Up to 8 passengers',
|
|
|
+ features: ['Radar', '3 Navigators', '2 Fishfinders', 'VHF Radio', 'Toilet', 'Fresh water', 'Live well'],
|
|
|
+ image: '/boats/gradywhite-harbor-front.jpg',
|
|
|
+ desc: 'Our premium offshore machine. Twin engines, full electronics suite, and room for the whole crew. Built for comfort on long offshore runs.'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ const species = [
|
|
|
+ { name: 'Roosterfish', tag: 'Signature Catch' },
|
|
|
+ { name: 'Sailfish', tag: 'Catch & Release' },
|
|
|
+ { name: 'Snook', tag: 'Inshore Trophy' },
|
|
|
+ { name: 'Red Snapper', tag: 'Year-Round' },
|
|
|
+ { name: 'Mahi-Mahi', tag: 'Offshore Classic' },
|
|
|
+ { name: 'Tripletail', tag: 'Unique Catch' },
|
|
|
+ { name: 'Spanish Mackerel', tag: 'Fast & Fun' },
|
|
|
+ { name: 'Jack Crevalle', tag: 'Hard Fighter' },
|
|
|
+ { name: 'Grouper', tag: 'Deep Reef' },
|
|
|
+ { name: 'Corvina', tag: 'Inshore Staple' },
|
|
|
+ { name: 'Hammerhead Shark', tag: 'Rare Encounter' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ const inshoreTrips = [
|
|
|
+ { name: 'Recreativo', duration: '2 Hours', price: 350, desc: 'Quick taste of Costa Rica fishing — perfect for beginners' },
|
|
|
+ { name: '3-Hour Trip', duration: '3 Hours', price: 500, desc: 'Extended inshore session with more action' },
|
|
|
+ { name: 'Half Day', duration: '4–5 Hours', price: 650, desc: 'Our most popular — plenty of time for variety' },
|
|
|
+ { name: '¾ Day', duration: '6–7 Hours', price: 800, desc: 'Explore multiple spots for the best bites' },
|
|
|
+ { name: 'Full Day', duration: '8+ Hours', price: 950, desc: 'The ultimate inshore experience, dawn to dusk' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ const offshoreTrips = [
|
|
|
+ { name: 'Half Day', duration: '4–5 Hours', price: 700, desc: 'Chase sailfish, mahi-mahi and more offshore' },
|
|
|
+ { name: '¾ Day', duration: '6–7 Hours', price: 850, desc: 'Extended time on the open Pacific' },
|
|
|
+ { name: 'Full Day', duration: '8+ Hours', price: 1000, desc: 'All day offshore — maximize your chances' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ const gallery = [
|
|
|
+ { src: '/fishing/roosterfish-group-4men.jpg', type: 'image', caption: 'Group Roosterfish Catch' },
|
|
|
+ { src: '/fishing/sailfish-release-closeup-42s.mp4', type: 'video', caption: 'Sailfish Release' },
|
|
|
+ { src: '/fishing/roosterfish-trio-huge.jpg', type: 'image', caption: 'Monster Roosterfish' },
|
|
|
+ { src: '/fishing/redsnapper-solo-huk-cap.jpg', type: 'image', caption: 'Red Snapper' },
|
|
|
+ { src: '/boats/gradywhite-harbor-crew.jpg', type: 'image', caption: 'Grady-White at Golden Hour' },
|
|
|
+ { src: '/fishing/roosterfish-solo-huk-cap.jpg', type: 'image', caption: 'Trophy Roosterfish' },
|
|
|
+ { src: '/fishing/mahimahi-kid-guide.jpg', type: 'image', caption: 'Family Mahi-Mahi' },
|
|
|
+ { src: '/fishing/snook-solo-hoodie-mountains.jpg', type: 'image', caption: 'Snook — Mountain Backdrop' },
|
|
|
+ { src: '/fishing/sailfish-release-boatside.jpg', type: 'image', caption: 'Sailfish Release' },
|
|
|
+ { src: '/fishing/roosterfish-couple.jpg', type: 'image', caption: 'Couples Fishing' },
|
|
|
+ { src: '/fishing/hammerhead-shark-solo.jpg', type: 'image', caption: 'Hammerhead Shark' },
|
|
|
+ { src: '/fishing/tripletail-solo-blue-clouds.jpg', type: 'image', caption: 'Tripletail' },
|
|
|
+ { src: '/fishing/roosterfish-duo-huge-pair.jpg', type: 'image', caption: 'Double Roosterfish' },
|
|
|
+ { src: '/fishing/snook-woman-flyrod.jpg', type: 'image', caption: 'Fly Fishing Snook' },
|
|
|
+ { src: '/boats/gradywhite-cruising-tropical.jpg', type: 'image', caption: 'Cruising the Coast' },
|
|
|
+ { src: '/fishing/corvina-trio-islands.jpg', type: 'image', caption: 'Triple Corvina' },
|
|
|
+ { src: '/fishing/sailfish-release-dark.jpg', type: 'image', caption: 'Sailfish Action' },
|
|
|
+ { src: '/fishing/redsnapper-woman-blue-shades.jpg', type: 'image', caption: 'Red Snapper' },
|
|
|
+ { src: '/fishing/roosterfish-solo-hoodie-beach.jpg', type: 'image', caption: 'Beach Roosterfish' },
|
|
|
+ { src: '/fishing/spanish-mackerel-solo.jpg', type: 'image', caption: 'Spanish Mackerel' },
|
|
|
+ { src: '/fishing/jack-crevalle-solo-bandana.jpg', type: 'image', caption: 'Jack Crevalle' },
|
|
|
+ { src: '/boats/gunslinger-dock-stern-rods.jpg', type: 'image', caption: 'Ready to Fish' },
|
|
|
+ { src: '/fishing/group-4-marina-catch.jpg', type: 'image', caption: 'Marina Catch Day' },
|
|
|
+ { src: '/fishing/roosterfish-solo-green-shirt.jpg', type: 'image', caption: 'Roosterfish' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ const imageGallery = $derived(gallery.filter((g) => g.type === 'image'));
|
|
|
+
|
|
|
+ function openLightbox(src) {
|
|
|
+ const idx = imageGallery.findIndex((g) => g.src === src);
|
|
|
+ if (idx >= 0) {
|
|
|
+ lightboxIndex = idx;
|
|
|
+ lightboxOpen = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeLightbox() {
|
|
|
+ lightboxOpen = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ function prevImage() {
|
|
|
+ lightboxIndex = (lightboxIndex - 1 + imageGallery.length) % imageGallery.length;
|
|
|
+ }
|
|
|
+
|
|
|
+ function nextImage() {
|
|
|
+ lightboxIndex = (lightboxIndex + 1) % imageGallery.length;
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleKeydown(e) {
|
|
|
+ if (!lightboxOpen) return;
|
|
|
+ if (e.key === 'Escape') closeLightbox();
|
|
|
+ if (e.key === 'ArrowLeft') prevImage();
|
|
|
+ if (e.key === 'ArrowRight') nextImage();
|
|
|
+ }
|
|
|
+
|
|
|
+ $effect(() => {
|
|
|
+ if (lightboxOpen) {
|
|
|
+ document.body.style.overflow = 'hidden';
|
|
|
+ } else {
|
|
|
+ document.body.style.overflow = '';
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ onMount(() => {
|
|
|
+ const observer = new IntersectionObserver(
|
|
|
+ (entries) => {
|
|
|
+ entries.forEach((entry) => {
|
|
|
+ if (entry.isIntersecting) entry.target.classList.add('visible');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ { threshold: 0.1 }
|
|
|
+ );
|
|
|
+ document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
|
|
|
+ return () => observer.disconnect();
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<svelte:window bind:scrollY={scrollY} onkeydown={handleKeydown} />
|
|
|
+
|
|
|
+<!-- NAV -->
|
|
|
+<nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 {scrollY > 50 ? 'bg-deep/95 backdrop-blur-md shadow-lg shadow-black/20' : ''}">
|
|
|
+ <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:h-20 sm:px-6">
|
|
|
+ <a href="#" class="flex items-center gap-2">
|
|
|
+ <img src="/logos/logo-teal-sailfish.jpg" alt="Gunslinger" class="h-9 rounded bg-white p-0.5 sm:h-10" />
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <div class="hidden items-center gap-6 md:flex">
|
|
|
+ {#each navLinks as link}
|
|
|
+ <a href={link.href} class="text-sm font-medium uppercase tracking-wider text-slate-300 transition-colors hover:text-cyan-400">{link.label}</a>
|
|
|
+ {/each}
|
|
|
+ <a href={WHATSAPP} target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 rounded-lg bg-cyan-600 px-5 py-2.5 text-sm font-semibold text-white transition-all hover:bg-cyan-500 hover:shadow-lg hover:shadow-cyan-500/25">
|
|
|
+ Book Now
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button class="p-2 text-white md:hidden" onclick={() => (mobileMenuOpen = !mobileMenuOpen)} aria-label="Menu">
|
|
|
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
|
+ {#if mobileMenuOpen}
|
|
|
+ <path d="M6 18L18 6M6 6l12 12" />
|
|
|
+ {:else}
|
|
|
+ <path d="M4 6h16M4 12h16M4 18h16" />
|
|
|
+ {/if}
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {#if mobileMenuOpen}
|
|
|
+ <div class="border-t border-white/10 bg-deep/98 px-4 pb-4 backdrop-blur-md md:hidden">
|
|
|
+ {#each navLinks as link}
|
|
|
+ <a href={link.href} class="block py-3 text-sm font-medium uppercase tracking-wider text-slate-300 hover:text-cyan-400" onclick={() => (mobileMenuOpen = false)}>{link.label}</a>
|
|
|
+ {/each}
|
|
|
+ <a href={WHATSAPP} target="_blank" rel="noopener noreferrer" class="mt-3 flex w-full items-center justify-center gap-2 rounded-lg bg-cyan-600 px-5 py-2.5 text-sm font-semibold text-white">Book Now</a>
|
|
|
+ </div>
|
|
|
+ {/if}
|
|
|
+</nav>
|
|
|
+
|
|
|
+<!-- HERO -->
|
|
|
+<section class="relative min-h-screen-ios overflow-hidden">
|
|
|
+ <!-- Mobile: video background -->
|
|
|
+ <video class="absolute inset-0 h-full w-full object-cover md:hidden" autoplay muted loop playsinline poster="/fishing/sailfish-release-blue-dorsal.jpg">
|
|
|
+ <source src="/hero-mobile.mp4" type="video/mp4" />
|
|
|
+ </video>
|
|
|
+
|
|
|
+ <!-- Desktop: image background -->
|
|
|
+ <img src="/fishing/roosterfish-trio-huge.jpg" alt="" class="absolute inset-0 hidden h-full w-full object-cover md:block" style="object-position: center 35%" />
|
|
|
+
|
|
|
+ <!-- Overlay -->
|
|
|
+ <div class="absolute inset-0 bg-gradient-to-b from-deep/70 via-deep/30 to-deep"></div>
|
|
|
+
|
|
|
+ <!-- Content -->
|
|
|
+ <div class="relative z-10 flex min-h-screen-ios flex-col items-center justify-center px-4 text-center">
|
|
|
+ <h1 class="font-heading mb-2 text-[2.75rem] font-bold tracking-wider text-white sm:text-7xl lg:text-8xl">GUNSLINGER</h1>
|
|
|
+ <p class="font-heading mb-6 text-lg uppercase tracking-widest text-cyan-400 sm:text-2xl lg:text-3xl">Sportfishing CR</p>
|
|
|
+ <p class="mb-10 max-w-xl text-base text-slate-300 sm:text-lg">Premier fishing charters from Quepos, Costa Rica. Sailfish, roosterfish, snook — your next trophy awaits.</p>
|
|
|
+ <div class="flex flex-col gap-3 sm:flex-row">
|
|
|
+ <a href={WHATSAPP} target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center gap-2 rounded-lg bg-cyan-600 px-8 py-3.5 font-semibold text-white transition-all hover:bg-cyan-500 hover:shadow-lg hover:shadow-cyan-500/25">
|
|
|
+ <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" /><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.612.638l4.67-1.388A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.24 0-4.31-.726-5.993-1.957l-.418-.31-2.79.83.746-2.723-.34-.54A9.96 9.96 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" /></svg>
|
|
|
+ Book on WhatsApp
|
|
|
+ </a>
|
|
|
+ <a href="#trips" class="inline-flex items-center justify-center gap-2 rounded-lg border-2 border-cyan-500/50 px-8 py-3.5 font-semibold text-cyan-300 transition-all hover:border-cyan-400 hover:bg-cyan-500/10">
|
|
|
+ View Trips
|
|
|
+ <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19 9l-7 7-7-7" /></svg>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="absolute bottom-6 left-1/2 -translate-x-1/2 animate-bounce">
|
|
|
+ <svg class="h-6 w-6 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ABOUT -->
|
|
|
+<section id="about" class="py-14 sm:py-24">
|
|
|
+ <div class="mx-auto max-w-7xl px-4 sm:px-6">
|
|
|
+ <div class="reveal grid items-center gap-8 md:grid-cols-2 lg:gap-16">
|
|
|
+ <div>
|
|
|
+ <p class="font-heading mb-3 text-sm uppercase tracking-widest text-cyan-400">Quepos, Costa Rica</p>
|
|
|
+ <h2 class="font-heading mb-6 text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">Where the Big Ones Bite</h2>
|
|
|
+ <p class="mb-4 leading-relaxed text-slate-300">
|
|
|
+ Based at Marina Pez Vela in Quepos — the sportfishing capital of Costa Rica's Central Pacific — Gunslinger Sportfishing offers world-class charters for anglers of all levels.
|
|
|
+ </p>
|
|
|
+ <p class="mb-4 leading-relaxed text-slate-300">
|
|
|
+ Whether you're chasing trophy roosterfish along the inshore reefs, releasing sailfish offshore, or fly fishing for snook in the mangroves, our experienced crew and top-tier equipment make every trip one to remember.
|
|
|
+ </p>
|
|
|
+ <p class="text-sm leading-relaxed text-slate-400">
|
|
|
+ Live bait, light tackle, casting, trolling, fly fishing, deep fishing, and bottom fishing — we match the technique to your target species.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="overflow-hidden rounded-xl">
|
|
|
+ <img src="/boats/gradywhite-harbor-sunset.jpg" alt="Grady-White at sunset in Quepos harbor" class="w-full rounded-xl" loading="lazy" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="reveal mt-12 grid grid-cols-3 gap-4 sm:mt-16">
|
|
|
+ <div class="rounded-xl border border-white/5 bg-navy/50 p-4 text-center sm:p-6">
|
|
|
+ <p class="font-heading text-3xl font-bold text-cyan-400 sm:text-4xl">2</p>
|
|
|
+ <p class="mt-1 text-sm text-slate-400">Boats</p>
|
|
|
+ </div>
|
|
|
+ <div class="rounded-xl border border-white/5 bg-navy/50 p-4 text-center sm:p-6">
|
|
|
+ <p class="font-heading text-3xl font-bold text-cyan-400 sm:text-4xl">15+</p>
|
|
|
+ <p class="mt-1 text-sm text-slate-400">Species</p>
|
|
|
+ </div>
|
|
|
+ <div class="rounded-xl border border-white/5 bg-navy/50 p-4 text-center sm:p-6">
|
|
|
+ <p class="font-heading text-3xl font-bold text-cyan-400 sm:text-4xl">365</p>
|
|
|
+ <p class="mt-1 text-sm text-slate-400">Days / Year</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- FLEET -->
|
|
|
+<section id="fleet" class="bg-navy py-14 sm:py-24">
|
|
|
+ <div class="mx-auto max-w-7xl px-4 sm:px-6">
|
|
|
+ <div class="reveal mb-10 text-center sm:mb-16">
|
|
|
+ <p class="font-heading mb-3 text-sm uppercase tracking-widest text-cyan-400">Our Boats</p>
|
|
|
+ <h2 class="font-heading text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">The Fleet</h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="grid gap-6 md:grid-cols-2 lg:gap-10">
|
|
|
+ {#each fleet as boat}
|
|
|
+ <div class="reveal overflow-hidden rounded-xl border border-white/5 bg-deep/80 transition-all hover:border-cyan-500/30">
|
|
|
+ <div class="aspect-[3/4] overflow-hidden sm:aspect-[4/5]">
|
|
|
+ <img src={boat.image} alt={boat.name} class="h-full w-full object-cover transition-transform duration-500 hover:scale-105" loading="lazy" />
|
|
|
+ </div>
|
|
|
+ <div class="p-5 sm:p-8">
|
|
|
+ <h3 class="font-heading text-2xl font-bold uppercase text-white sm:text-3xl">{boat.name}</h3>
|
|
|
+ <p class="mt-1 text-sm font-medium text-cyan-400">{boat.brand} · {boat.year}</p>
|
|
|
+ <p class="mt-3 text-sm leading-relaxed text-slate-300">{boat.desc}</p>
|
|
|
+ <div class="mt-4 flex flex-wrap gap-2 text-xs">
|
|
|
+ <span class="rounded-full border border-cyan-500/20 bg-cyan-500/10 px-3 py-1 text-cyan-300">{boat.engine}</span>
|
|
|
+ <span class="rounded-full border border-cyan-500/20 bg-cyan-500/10 px-3 py-1 text-cyan-300">{boat.capacity}</span>
|
|
|
+ </div>
|
|
|
+ <div class="mt-3 flex flex-wrap gap-1.5 text-xs text-slate-400">
|
|
|
+ {#each boat.features as feature}
|
|
|
+ <span class="rounded bg-white/5 px-2 py-0.5">{feature}</span>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- SPECIES -->
|
|
|
+<section class="py-14 sm:py-24">
|
|
|
+ <div class="mx-auto max-w-7xl px-4 sm:px-6">
|
|
|
+ <div class="reveal mb-10 text-center sm:mb-16">
|
|
|
+ <p class="font-heading mb-3 text-sm uppercase tracking-widest text-cyan-400">Target Species</p>
|
|
|
+ <h2 class="font-heading text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">What You'll Catch</h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="reveal flex flex-wrap justify-center gap-3 sm:gap-4">
|
|
|
+ {#each species as s}
|
|
|
+ <div class="rounded-full border border-white/5 bg-navy/60 px-4 py-2 transition-all hover:border-cyan-500/30 sm:px-5 sm:py-3">
|
|
|
+ <span class="text-sm font-medium text-white">{s.name}</span>
|
|
|
+ <span class="ml-1.5 hidden text-xs text-cyan-400/70 sm:inline">· {s.tag}</span>
|
|
|
+ </div>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- TRIPS & RATES -->
|
|
|
+<section id="trips" class="bg-navy py-14 sm:py-24">
|
|
|
+ <div class="mx-auto max-w-7xl px-4 sm:px-6">
|
|
|
+ <div class="reveal mb-10 text-center sm:mb-16">
|
|
|
+ <p class="font-heading mb-3 text-sm uppercase tracking-widest text-cyan-400">Trips & Rates</p>
|
|
|
+ <h2 class="font-heading text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">Choose Your Adventure</h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="grid gap-8 lg:grid-cols-2 lg:gap-12">
|
|
|
+ <!-- Inshore -->
|
|
|
+ <div class="reveal">
|
|
|
+ <h3 class="font-heading mb-4 flex items-center gap-2 text-xl uppercase tracking-wider text-cyan-400">
|
|
|
+ <span class="h-px w-8 bg-cyan-400/50"></span> Inshore
|
|
|
+ </h3>
|
|
|
+ <div class="space-y-3">
|
|
|
+ {#each inshoreTrips as trip}
|
|
|
+ <div class="rounded-lg border border-white/5 bg-deep/60 p-4 transition-all hover:border-cyan-500/30">
|
|
|
+ <div class="mb-1 flex items-center justify-between">
|
|
|
+ <h4 class="font-heading text-lg text-white">{trip.name}</h4>
|
|
|
+ <span class="font-heading text-xl text-cyan-400">${trip.price}</span>
|
|
|
+ </div>
|
|
|
+ <p class="mb-1 text-xs text-slate-500">{trip.duration}</p>
|
|
|
+ <p class="text-sm text-slate-400">{trip.desc}</p>
|
|
|
+ </div>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Offshore -->
|
|
|
+ <div class="reveal">
|
|
|
+ <h3 class="font-heading mb-4 flex items-center gap-2 text-xl uppercase tracking-wider text-cyan-400">
|
|
|
+ <span class="h-px w-8 bg-cyan-400/50"></span> Offshore
|
|
|
+ </h3>
|
|
|
+ <div class="space-y-3">
|
|
|
+ {#each offshoreTrips as trip}
|
|
|
+ <div class="rounded-lg border border-white/5 bg-deep/60 p-4 transition-all hover:border-cyan-500/30">
|
|
|
+ <div class="mb-1 flex items-center justify-between">
|
|
|
+ <h4 class="font-heading text-lg text-white">{trip.name}</h4>
|
|
|
+ <span class="font-heading text-xl text-cyan-400">${trip.price.toLocaleString()}</span>
|
|
|
+ </div>
|
|
|
+ <p class="mb-1 text-xs text-slate-500">{trip.duration}</p>
|
|
|
+ <p class="text-sm text-slate-400">{trip.desc}</p>
|
|
|
+ </div>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="reveal mt-10 text-center">
|
|
|
+ <p class="text-sm text-slate-400">All trips include captain, crew, fishing tackle, bait, ice & refreshments. Catch & release for all billfish. Custom trips available on request.</p>
|
|
|
+ <a href={WHATSAPP} target="_blank" rel="noopener noreferrer" class="mt-6 inline-flex items-center gap-2 rounded-lg bg-cyan-600 px-8 py-3.5 font-semibold text-white transition-all hover:bg-cyan-500 hover:shadow-lg hover:shadow-cyan-500/25">
|
|
|
+ <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" /><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.612.638l4.67-1.388A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.24 0-4.31-.726-5.993-1.957l-.418-.31-2.79.83.746-2.723-.34-.54A9.96 9.96 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" /></svg>
|
|
|
+ Book Your Trip
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- GALLERY -->
|
|
|
+<section id="gallery" class="py-14 sm:py-24">
|
|
|
+ <div class="mx-auto max-w-7xl px-4 sm:px-6">
|
|
|
+ <div class="reveal mb-10 text-center sm:mb-16">
|
|
|
+ <p class="font-heading mb-3 text-sm uppercase tracking-widest text-cyan-400">Photo Gallery</p>
|
|
|
+ <h2 class="font-heading text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">The Catches</h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Mobile: horizontal carousel -->
|
|
|
+ <div class="scrollbar-hide flex gap-3 overflow-x-auto snap-x snap-mandatory pb-4 md:hidden">
|
|
|
+ {#each gallery as item}
|
|
|
+ <div class="min-w-[72vw] flex-shrink-0 snap-center overflow-hidden rounded-lg">
|
|
|
+ {#if item.type === 'video'}
|
|
|
+ <video src={item.src} class="w-full rounded-lg" preload="metadata" controls playsinline></video>
|
|
|
+ {:else}
|
|
|
+ <button class="w-full" onclick={() => openLightbox(item.src)}>
|
|
|
+ <img src={item.src} alt={item.caption} class="w-full rounded-lg" loading="lazy" />
|
|
|
+ </button>
|
|
|
+ {/if}
|
|
|
+ </div>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Desktop: masonry grid -->
|
|
|
+ <div class="hidden gap-3 md:block md:columns-3 lg:columns-4">
|
|
|
+ {#each gallery as item}
|
|
|
+ <div class="gallery-item mb-3">
|
|
|
+ {#if item.type === 'video'}
|
|
|
+ <video
|
|
|
+ src={item.src}
|
|
|
+ class="w-full rounded-lg"
|
|
|
+ preload="metadata"
|
|
|
+ muted
|
|
|
+ loop
|
|
|
+ playsinline
|
|
|
+ onmouseenter={(e) => e.currentTarget.play()}
|
|
|
+ onmouseleave={(e) => {
|
|
|
+ e.currentTarget.pause();
|
|
|
+ e.currentTarget.currentTime = 0;
|
|
|
+ }}
|
|
|
+ ></video>
|
|
|
+ {:else}
|
|
|
+ <button class="w-full" onclick={() => openLightbox(item.src)}>
|
|
|
+ <img src={item.src} alt={item.caption} class="w-full" loading="lazy" />
|
|
|
+ </button>
|
|
|
+ {/if}
|
|
|
+ </div>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- CONTACT -->
|
|
|
+<section id="contact" class="bg-navy py-14 sm:py-24">
|
|
|
+ <div class="mx-auto max-w-7xl px-4 sm:px-6">
|
|
|
+ <div class="reveal mb-10 text-center sm:mb-16">
|
|
|
+ <p class="font-heading mb-3 text-sm uppercase tracking-widest text-cyan-400">Get in Touch</p>
|
|
|
+ <h2 class="font-heading text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">Book Your Trip</h2>
|
|
|
+ <p class="mx-auto mt-4 max-w-lg text-slate-400">Ready for the fishing trip of a lifetime? Reach out on WhatsApp for the fastest response — we'll get you on the water.</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="reveal mb-10 grid gap-4 sm:grid-cols-3">
|
|
|
+ <!-- WhatsApp -->
|
|
|
+ <a href={WHATSAPP} target="_blank" rel="noopener noreferrer" class="group flex flex-col items-center gap-3 rounded-xl border border-white/5 bg-deep/60 p-6 transition-all hover:border-green-500/30">
|
|
|
+ <div class="flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10 transition-colors group-hover:bg-green-500/20">
|
|
|
+ <svg class="h-7 w-7 text-green-400" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" /><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.612.638l4.67-1.388A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.24 0-4.31-.726-5.993-1.957l-.418-.31-2.79.83.746-2.723-.34-.54A9.96 9.96 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" /></svg>
|
|
|
+ </div>
|
|
|
+ <span class="font-medium text-white">WhatsApp</span>
|
|
|
+ <span class="text-sm text-slate-400">+506 8963-0901</span>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- Phone -->
|
|
|
+ <a href={PHONE} class="group flex flex-col items-center gap-3 rounded-xl border border-white/5 bg-deep/60 p-6 transition-all hover:border-cyan-500/30">
|
|
|
+ <div class="flex h-14 w-14 items-center justify-center rounded-full bg-cyan-500/10 transition-colors group-hover:bg-cyan-500/20">
|
|
|
+ <svg class="h-7 w-7 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
|
|
|
+ </div>
|
|
|
+ <span class="font-medium text-white">Call Us</span>
|
|
|
+ <span class="text-sm text-slate-400">+506 8963-0901</span>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- Location -->
|
|
|
+ <a href="https://maps.google.com/?q=Marina+Pez+Vela+Quepos+Costa+Rica" target="_blank" rel="noopener noreferrer" class="group flex flex-col items-center gap-3 rounded-xl border border-white/5 bg-deep/60 p-6 transition-all hover:border-cyan-500/30">
|
|
|
+ <div class="flex h-14 w-14 items-center justify-center rounded-full bg-cyan-500/10 transition-colors group-hover:bg-cyan-500/20">
|
|
|
+ <svg class="h-7 w-7 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
|
|
|
+ </div>
|
|
|
+ <span class="font-medium text-white">Location</span>
|
|
|
+ <span class="text-center text-sm text-slate-400">Marina Pez Vela, Quepos</span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Map -->
|
|
|
+ <div class="reveal overflow-hidden rounded-xl border border-white/5">
|
|
|
+ <iframe
|
|
|
+ src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3932.8!2d-84.16579!3d9.40833!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8fa17c8e66e5e3e7%3A0x4077b0e5e9d55b15!2sMarina%20Pez%20Vela!5e0!3m2!1sen!2scr!4v1711584000000"
|
|
|
+ width="100%"
|
|
|
+ height="350"
|
|
|
+ style="border:0"
|
|
|
+ allowfullscreen=""
|
|
|
+ loading="lazy"
|
|
|
+ referrerpolicy="no-referrer-when-downgrade"
|
|
|
+ title="Marina Pez Vela, Quepos"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- FOOTER -->
|
|
|
+<footer class="border-t border-white/5 bg-[#050d1a] py-10">
|
|
|
+ <div class="mx-auto max-w-7xl px-4 sm:px-6">
|
|
|
+ <div class="flex flex-col items-center justify-between gap-6 text-center sm:flex-row sm:text-left">
|
|
|
+ <div>
|
|
|
+ <p class="font-heading text-2xl font-bold tracking-wider text-white">GUNSLINGER</p>
|
|
|
+ <p class="mt-1 text-sm text-slate-500">Sportfishing CR · Quepos, Costa Rica</p>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center gap-4">
|
|
|
+ <a href={WHATSAPP} target="_blank" rel="noopener noreferrer" class="text-slate-400 transition-colors hover:text-green-400" aria-label="WhatsApp">
|
|
|
+ <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" /><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.612.638l4.67-1.388A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.24 0-4.31-.726-5.993-1.957l-.418-.31-2.79.83.746-2.723-.34-.54A9.96 9.96 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" /></svg>
|
|
|
+ </a>
|
|
|
+ <a href={PHONE} class="text-slate-400 transition-colors hover:text-cyan-400" aria-label="Phone">
|
|
|
+ <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-8 flex flex-col items-center justify-between gap-2 border-t border-white/5 pt-6 text-xs text-slate-600 sm:flex-row">
|
|
|
+ <p>© {new Date().getFullYear()} Gunslinger Sportfishing CR. All rights reserved.</p>
|
|
|
+ <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-slate-600 transition-colors hover:text-slate-400">Made by digitalmar.dev</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</footer>
|
|
|
+
|
|
|
+<!-- WhatsApp FAB -->
|
|
|
+<a
|
|
|
+ href={WHATSAPP}
|
|
|
+ target="_blank"
|
|
|
+ rel="noopener noreferrer"
|
|
|
+ class="fixed bottom-6 right-6 z-40 flex h-14 w-14 items-center justify-center rounded-full bg-green-500 shadow-lg shadow-green-500/30 transition-all hover:scale-110 hover:bg-green-400"
|
|
|
+ aria-label="WhatsApp"
|
|
|
+>
|
|
|
+ <svg class="h-7 w-7 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" /><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.612.638l4.67-1.388A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.24 0-4.31-.726-5.993-1.957l-.418-.31-2.79.83.746-2.723-.34-.54A9.96 9.96 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" /></svg>
|
|
|
+</a>
|
|
|
+
|
|
|
+<!-- LIGHTBOX -->
|
|
|
+{#if lightboxOpen}
|
|
|
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
|
+ <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/95" onclick={closeLightbox} onkeydown={() => {}}>
|
|
|
+ <button class="absolute right-4 top-4 p-2 text-white/70 hover:text-white" onclick={closeLightbox}>
|
|
|
+ <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12" /></svg>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button
|
|
|
+ class="absolute left-2 top-1/2 -translate-y-1/2 p-2 text-white/70 hover:text-white sm:left-4"
|
|
|
+ onclick={(e) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ prevImage();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7" /></svg>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
|
|
+ <img
|
|
|
+ src={imageGallery[lightboxIndex].src}
|
|
|
+ alt={imageGallery[lightboxIndex].caption}
|
|
|
+ class="max-h-[85vh] max-w-[90vw] rounded-lg object-contain"
|
|
|
+ onclick={(e) => e.stopPropagation()}
|
|
|
+ onkeydown={() => {}}
|
|
|
+ />
|
|
|
+
|
|
|
+ <button
|
|
|
+ class="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-white/70 hover:text-white sm:right-4"
|
|
|
+ onclick={(e) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ nextImage();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 5l7 7-7 7" /></svg>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <p class="absolute bottom-4 left-1/2 -translate-x-1/2 text-sm text-white/50">{lightboxIndex + 1} / {imageGallery.length}</p>
|
|
|
+ </div>
|
|
|
+{/if}
|
AusPrinzip
vor 3 Wochen
