Initial Gunslinger Sportfishing CR website

SvelteKit + Tailwind v4 static site for sport fishing charters in Quepos, Costa Rica.
Video hero on mobile, image hero on desktop. Fleet, pricing, gallery, contact sections.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.claude/CLAUDE.md

@@ -0,0 +1,50 @@
+# Gunslinger Sportfishing CR
+
+## Customer
+- **Contact:** KVS (WhatsApp display: "KVS 🎣🍀")
+- **Phone:** +506 8963-0901
+- **Business:** Gunslinger Sportfishing CR
+- **Location:** Marina Pez Vela, Quepos + Antiguo Muelle de Quepos, Costa Rica
+- **Language:** Spanish (native), English content needed (US tourist clientele)
+- **First contact:** 2026-03-27
+- **Status:** demo_building, handoff active
+
+## Business Details
+Sport fishing charter operation in Quepos, Central Pacific Costa Rica. Targets primarily US tourists. Two boats, diverse species, inshore + offshore.
+
+### Fleet
+| Boat | Brand | Length | Year | Engine | Capacity | Notes |
+|------|-------|--------|------|--------|----------|-------|
+| Gunslinger | Clear Water | 25 ft | 2007 (restored 2025) | Suzuki 200 HP | 4-5 pax | Toilet, outriggers |
+| (unnamed) | Grady-White | 25.3 ft | 2022 | 2x Suzuki 200 HP (44 knots max) | 8 pax | Radar, 3 navigators, VHF radio, 2 fishfinders, toilet, freshwater, live well |
+
+### Tour Pricing (USD)
+**Inshore:**
+| Tour | Price |
+|------|-------|
+| Recreativo | $350 |
+| 3 Hours | $500 |
+| Half Day | $650 |
+| 3/4 Day | $800 |
+| Full Day | $950 |
+
+**Offshore:**
+| Tour | Price |
+|------|-------|
+| Half Day | $700 |
+| 3/4 Day | $850 |
+| Full Day | $1,000 |
+
+### Fishing Techniques
+Live bait, light tackle, casting, trolling, fly fishing, deep fishing, bottom fishing
+
+### Species Caught (confirmed from photos)
+**Inshore:** Roosterfish (signature catch, many photos), snook, red snapper, tripletail, grouper, corvina, jack crevalle
+**Offshore:** Sailfish (catch & release), mahi-mahi, Spanish mackerel, hammerhead shark
+
+## Notes
+- Very similar business to existing client Javier / sportfishingcortez.com (also Quepos sport fishing)
+- Customer provided extensive material: ~36 fishing photos, ~11 boat photos, 3 logo variants
+- No horizontal boat photos available (customer confirmed)
+- Customer is also building a Facebook page simultaneously
+- All photos are portrait orientation (typical WhatsApp sends)

website/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.svelte-kit/

website/package.json

@@ -0,0 +1,21 @@
+{
+	"name": "gunslinger-sportfishing",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^3.0.10",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/vite": "^4.2.1",
+		"svelte": "^5.51.0",
+		"tailwindcss": "^4.2.1",
+		"vite": "^7.3.1"
+	}
+}

website/src/app.css

@@ -0,0 +1,67 @@
+@import 'tailwindcss';
+
+@theme {
+	--font-sans: 'Inter', sans-serif;
+	--font-heading: 'Oswald', sans-serif;
+	--color-deep: #081425;
+	--color-navy: #0f2440;
+}
+
+@layer base {
+	html {
+		scroll-behavior: smooth;
+	}
+	body {
+		background: var(--color-deep);
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+	h1, h2, h3, h4, h5, h6 {
+		font-family: var(--font-heading);
+	}
+}
+
+@layer components {
+	.min-h-screen-ios {
+		height: 100vh;
+		height: 100svh;
+		max-height: 100vh;
+		max-height: 100svh;
+	}
+
+	.reveal {
+		opacity: 0;
+		transform: translateY(30px);
+		transition: opacity 0.7s ease, transform 0.7s ease;
+	}
+	.reveal.visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.gallery-item {
+		break-inside: avoid;
+		overflow: hidden;
+		border-radius: 0.5rem;
+		cursor: pointer;
+	}
+	.gallery-item img,
+	.gallery-item video {
+		width: 100%;
+		height: auto;
+		display: block;
+		transition: transform 0.5s ease;
+	}
+	.gallery-item:hover img,
+	.gallery-item:hover video {
+		transform: scale(1.05);
+	}
+
+	.scrollbar-hide {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+	.scrollbar-hide::-webkit-scrollbar {
+		display: none;
+	}
+}

website/src/app.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="description" content="Premier sport fishing charters in Quepos, Costa Rica. Chase roosterfish, sailfish, snook, mahi-mahi and more aboard our two boats. Book on WhatsApp today!" />
+		<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎣</text></svg>" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Oswald:wght@400;500;600;700&display=swap" rel="stylesheet" />
+		<title>Gunslinger Sportfishing CR | Fishing Charters in Quepos, Costa Rica</title>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

website/src/routes/+layout.js

@@ -0,0 +1 @@
+export const prerender = true;

website/src/routes/+layout.svelte

@@ -0,0 +1,6 @@
+<script>
+	import '../app.css';
+	let { children } = $props();
+</script>
+
+{@render children()}

website/src/routes/+page.svelte

@@ -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>&copy; {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}

website/svelte.config.js

@@ -0,0 +1,16 @@
+import adapter from '@sveltejs/adapter-static';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			pages: 'dist',
+			assets: 'dist',
+			fallback: undefined,
+			precompress: false,
+			strict: true
+		})
+	}
+};
+
+export default config;

website/vite.config.js

@@ -0,0 +1,7 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()]
+});