vibeasite-templates/template-travel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: travel template (16 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:14:05 +00:00
parent 2d63eea816
commit 7a82adba43
1 changed files with 122 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Destinations.tsx
+122
View File
@@ -0,0 +1,122 @@
import { useState } from "react";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Slider } from "@/components/ui/slider";
import { MapPin, Star, ArrowRight, Filter } from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
const allDestinations = [
{ name: "Bali", country: "Indonesia", region: "Asia", type: "Beach", rating: "4.9", price: "\$899", gradient: "from-blue-600/60 to-cyan-500/40" },
{ name: "Santorini", country: "Greece", region: "Europe", type: "City", rating: "4.8", price: "\$1,299", gradient: "from-amber-600/60 to-orange-400/40" },
{ name: "Machu Picchu", country: "Peru", region: "Americas", type: "Mountain", rating: "4.9", price: "\$1,499", gradient: "from-emerald-600/60 to-teal-400/40" },
{ name: "Kyoto", country: "Japan", region: "Asia", type: "City", rating: "4.7", price: "\$1,199", gradient: "from-purple-600/60 to-violet-400/40" },
{ name: "Marrakech", country: "Morocco", region: "Africa", type: "Adventure", rating: "4.8", price: "\$799", gradient: "from-rose-600/60 to-pink-400/40" },
{ name: "Queenstown", country: "New Zealand", region: "Oceania", type: "Adventure", rating: "4.9", price: "\$1,599", gradient: "from-sky-600/60 to-indigo-400/40" },
];
export default function DestinationsPage() {
const [region, setRegion] = useState("all");
const [type, setType] = useState("all");
const filtered = allDestinations.filter((d) => {
if (region !== "all" && d.region !== region) return false;
if (type !== "all" && d.type !== type) return false;
return true;
});
return (
<div className="min-h-screen bg-background text-foreground antialiased">
<Header />
{/* ── HERO ── */}
<section className="pt-32 pb-16 bg-gradient-to-b from-slate-950 via-blue-950/30 to-slate-900">
<div className="mx-auto max-w-7xl px-6 text-center">
<Badge variant="secondary" className="mb-4 px-3 py-1 text-xs tracking-widest uppercase bg-blue-900/30 text-cyan-300 border-blue-700/30">Explore</Badge>
<h1 className="text-4xl md:text-5xl font-bold text-white animate-fade-up">Our Destinations</h1>
<p className="mt-3 text-slate-400 max-w-xl mx-auto">Discover breathtaking locations across every continent.</p>
</div>
</section>
{/* ── FILTERS ── */}
<section className="py-8 bg-slate-900 border-b border-slate-800">
<div className="mx-auto max-w-7xl px-6">
<div className="flex flex-wrap items-center gap-4">
<Filter className="h-4 w-4 text-slate-400" />
<Select value={region} onValueChange={setRegion}>
<SelectTrigger className="w-44 bg-slate-800 border-slate-700 text-white rounded-lg">
<SelectValue placeholder="Region" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Regions</SelectItem>
<SelectItem value="Asia">Asia</SelectItem>
<SelectItem value="Europe">Europe</SelectItem>
<SelectItem value="Americas">Americas</SelectItem>
<SelectItem value="Africa">Africa</SelectItem>
<SelectItem value="Oceania">Oceania</SelectItem>
</SelectContent>
</Select>
<Select value={type} onValueChange={setType}>
<SelectTrigger className="w-44 bg-slate-800 border-slate-700 text-white rounded-lg">
<SelectValue placeholder="Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Types</SelectItem>
<SelectItem value="Beach">Beach</SelectItem>
<SelectItem value="Mountain">Mountain</SelectItem>
<SelectItem value="City">City</SelectItem>
<SelectItem value="Adventure">Adventure</SelectItem>
</SelectContent>
</Select>
<span className="text-sm text-slate-500">{filtered.length} destinations found</span>
</div>
</div>
</section>
{/* ── GRID ── */}
<section className="py-16 bg-slate-900">
<div className="mx-auto max-w-7xl px-6">
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
{filtered.map((d, i) => (
<Card key={i} className="group overflow-hidden border-slate-800 bg-slate-950/50 hover:border-blue-700/50 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
<div className={`relative h-56 bg-gradient-to-br \${d.gradient} flex items-end p-5`}>
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors" />
<div className="relative z-10">
<div className="flex items-center gap-2 mb-2">
<Badge className="bg-white/20 text-white border-0 backdrop-blur text-xs">{d.country}</Badge>
<Badge className="bg-blue-600/30 text-blue-200 border-0 backdrop-blur text-xs">{d.type}</Badge>
</div>
<h3 className="text-xl font-bold text-white">{d.name}</h3>
</div>
</div>
<CardContent className="p-5">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-1 text-amber-400">
<Star className="h-4 w-4 fill-current" />
<span className="text-sm font-medium text-white">{d.rating}</span>
</div>
<div className="text-sm text-slate-400">from <span className="text-lg font-bold text-white">{d.price}</span></div>
</div>
<Button asChild className="w-full bg-blue-600 hover:bg-blue-500 text-white rounded-full active:scale-[0.98]">
<Link to="/destination/detail">View Details <ArrowRight className="ml-2 h-4 w-4" /></Link>
</Button>
</CardContent>
</Card>
))}
</div>
{filtered.length === 0 && (
<div className="text-center py-16">
<MapPin className="mx-auto h-12 w-12 text-slate-700 mb-4" />
<p className="text-slate-400">No destinations match your filters. Try adjusting your criteria.</p>
</div>
)}
</div>
</section>
<Footer />
</div>
);
}