|
@@ -59,18 +59,38 @@
|
|
|
|
|
|
|
|
const techniques = ['Inshore', 'Offshore', 'Light Tackle', 'Casting', 'Trolling', 'Fly Fishing', 'Deep Fishing', 'Bottom Fishing'];
|
|
const techniques = ['Inshore', 'Offshore', 'Light Tackle', 'Casting', 'Trolling', 'Fly Fishing', 'Deep Fishing', 'Bottom Fishing'];
|
|
|
|
|
|
|
|
- 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' }
|
|
|
|
|
- ];
|
|
|
|
|
|
|
+ let selectedBoat = $state(0);
|
|
|
|
|
|
|
|
- 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 boats = [
|
|
|
|
|
+ {
|
|
|
|
|
+ name: 'Gunslinger',
|
|
|
|
|
+ inshore: [
|
|
|
|
|
+ { name: 'Snorkeling & Dolphins', price: 350, desc: 'Dolphin encounters and snorkeling in crystal-clear waters' },
|
|
|
|
|
+ { name: '4 Hours Fishing', price: 500, desc: 'Extended inshore session with more action' },
|
|
|
|
|
+ { name: 'Half Day', price: 650, desc: 'Our most popular — plenty of time for variety' },
|
|
|
|
|
+ { name: '¾ Day', price: 750, desc: 'Explore multiple spots for the best bites' },
|
|
|
|
|
+ { name: 'Full Day', price: 850, desc: 'The ultimate inshore experience, dawn to dusk' }
|
|
|
|
|
+ ],
|
|
|
|
|
+ offshore: [
|
|
|
|
|
+ { name: '¾ Day', price: 850, desc: 'Extended time on the open Pacific' },
|
|
|
|
|
+ { name: 'Full Day', price: 1050, desc: 'All day offshore — maximize your chances' }
|
|
|
|
|
+ ]
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: 'Gunslinger II',
|
|
|
|
|
+ inshore: [
|
|
|
|
|
+ { name: 'Recreational', price: 350, desc: 'Quick taste of Costa Rica fishing — perfect for beginners' },
|
|
|
|
|
+ { name: '4 Hours Tour', price: 500, desc: 'Extended inshore session with more action' },
|
|
|
|
|
+ { name: 'Half Day', price: 750, desc: 'Our most popular — plenty of time for variety' },
|
|
|
|
|
+ { name: '¾ Day', price: 850, desc: 'Explore multiple spots for the best bites' },
|
|
|
|
|
+ { name: 'Full Day', price: 950, desc: 'The ultimate inshore experience, dawn to dusk' }
|
|
|
|
|
+ ],
|
|
|
|
|
+ offshore: [
|
|
|
|
|
+ { name: 'Half Day', price: 800, desc: 'Chase sailfish, mahi-mahi and more offshore' },
|
|
|
|
|
+ { name: '¾ Day', price: 950, desc: 'Extended time on the open Pacific' },
|
|
|
|
|
+ { name: 'Full Day', price: 1050, desc: 'All day offshore — maximize your chances' }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
];
|
|
];
|
|
|
|
|
|
|
|
const gallery = [
|
|
const gallery = [
|
|
@@ -341,6 +361,20 @@
|
|
|
<h2 class="font-heading text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">Choose Your Adventure</h2>
|
|
<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>
|
|
|
|
|
|
|
|
|
|
+ <!-- Boat tabs -->
|
|
|
|
|
+ <div class="reveal mb-8 flex justify-center">
|
|
|
|
|
+ <div class="inline-flex rounded-lg border border-white/10 bg-deep/60 p-1">
|
|
|
|
|
+ {#each boats as boat, i}
|
|
|
|
|
+ <button
|
|
|
|
|
+ onclick={() => (selectedBoat = i)}
|
|
|
|
|
+ class="font-heading rounded-md px-6 py-2.5 text-sm uppercase tracking-wider transition-all {selectedBoat === i ? 'bg-cyan-600 text-white shadow-lg shadow-cyan-500/20' : 'text-slate-400 hover:text-white'}"
|
|
|
|
|
+ >
|
|
|
|
|
+ {boat.name}
|
|
|
|
|
+ </button>
|
|
|
|
|
+ {/each}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
<div class="grid gap-8 lg:grid-cols-2 lg:gap-12">
|
|
<div class="grid gap-8 lg:grid-cols-2 lg:gap-12">
|
|
|
<!-- Inshore -->
|
|
<!-- Inshore -->
|
|
|
<div class="reveal">
|
|
<div class="reveal">
|
|
@@ -348,13 +382,12 @@
|
|
|
<span class="h-px w-8 bg-cyan-400/50"></span> Inshore
|
|
<span class="h-px w-8 bg-cyan-400/50"></span> Inshore
|
|
|
</h3>
|
|
</h3>
|
|
|
<div class="space-y-3">
|
|
<div class="space-y-3">
|
|
|
- {#each inshoreTrips as trip}
|
|
|
|
|
|
|
+ {#each boats[selectedBoat].inshore as trip}
|
|
|
<div class="rounded-lg border border-white/5 bg-deep/60 p-4 transition-all hover:border-cyan-500/30">
|
|
<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">
|
|
<div class="mb-1 flex items-center justify-between">
|
|
|
<h4 class="font-heading text-lg text-white">{trip.name}</h4>
|
|
<h4 class="font-heading text-lg text-white">{trip.name}</h4>
|
|
|
- <span class="font-heading text-xl text-cyan-400">${trip.price}</span>
|
|
|
|
|
|
|
+ <span class="font-heading text-xl text-cyan-400">${trip.price.toLocaleString()}</span>
|
|
|
</div>
|
|
</div>
|
|
|
- <p class="mb-1 text-xs text-slate-500">{trip.duration}</p>
|
|
|
|
|
<p class="text-sm text-slate-400">{trip.desc}</p>
|
|
<p class="text-sm text-slate-400">{trip.desc}</p>
|
|
|
</div>
|
|
</div>
|
|
|
{/each}
|
|
{/each}
|
|
@@ -367,13 +400,12 @@
|
|
|
<span class="h-px w-8 bg-cyan-400/50"></span> Offshore
|
|
<span class="h-px w-8 bg-cyan-400/50"></span> Offshore
|
|
|
</h3>
|
|
</h3>
|
|
|
<div class="space-y-3">
|
|
<div class="space-y-3">
|
|
|
- {#each offshoreTrips as trip}
|
|
|
|
|
|
|
+ {#each boats[selectedBoat].offshore as trip}
|
|
|
<div class="rounded-lg border border-white/5 bg-deep/60 p-4 transition-all hover:border-cyan-500/30">
|
|
<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">
|
|
<div class="mb-1 flex items-center justify-between">
|
|
|
<h4 class="font-heading text-lg text-white">{trip.name}</h4>
|
|
<h4 class="font-heading text-lg text-white">{trip.name}</h4>
|
|
|
<span class="font-heading text-xl text-cyan-400">${trip.price.toLocaleString()}</span>
|
|
<span class="font-heading text-xl text-cyan-400">${trip.price.toLocaleString()}</span>
|
|
|
</div>
|
|
</div>
|
|
|
- <p class="mb-1 text-xs text-slate-500">{trip.duration}</p>
|
|
|
|
|
<p class="text-sm text-slate-400">{trip.desc}</p>
|
|
<p class="text-sm text-slate-400">{trip.desc}</p>
|
|
|
</div>
|
|
</div>
|
|
|
{/each}
|
|
{/each}
|
|
@@ -382,7 +414,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="reveal mt-10 text-center">
|
|
<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>
|
|
|
|
|
|
|
+ <p class="text-sm text-slate-400">All trips include captain, crew, fishing tackle, bait, ice, drinks & fruit. 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">
|
|
<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>
|
|
<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
|
|
Book Your Trip
|