Seed: travel template (16 files)

src/pages/DestinationDetail.tsx

@@ -42,7 +42,7 @@ export default function DestinationDetailPage() {
 
   const handleBook = async () => {
     try {
-      await createBooking({ destination: "Bali", price: "\$899", type: "trip" });
+      await createBooking({ destination: "Bali", price: "$899", type: "trip" });
       toast.success("Booking request submitted! Our team will contact you within 24 hours.");
     } catch (err) {
       toast.error("Could not submit booking. Please try again.");
@@ -73,7 +73,7 @@ export default function DestinationDetailPage() {
         <div className="mx-auto max-w-7xl px-6">
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
             {gallery.map((g, i) => (
-              <button key={i} onClick={() => setLightbox(i)} className={`relative h-48 md:h-56 rounded-xl bg-gradient-to-br \${g.gradient} overflow-hidden group cursor-pointer`}>
+              <button key={i} onClick={() => setLightbox(i)} className={`relative h-48 md:h-56 rounded-xl bg-gradient-to-br ${g.gradient} overflow-hidden group cursor-pointer`}>
                 <div className="absolute inset-0 bg-black/30 group-hover:bg-black/10 transition-colors flex items-end p-4">
                   <span className="text-xs text-white/80 font-medium">{g.label}</span>
                 </div>
@@ -88,7 +88,7 @@ export default function DestinationDetailPage() {
         <div className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center">
           <button onClick={() => setLightbox(null)} className="absolute top-6 right-6 text-white/60 hover:text-white"><X className="h-6 w-6" /></button>
           <button onClick={() => setLightbox((lightbox - 1 + gallery.length) % gallery.length)} className="absolute left-6 text-white/60 hover:text-white"><ChevronLeft className="h-8 w-8" /></button>
-          <div className={`w-[80vw] h-[60vh] rounded-2xl bg-gradient-to-br \${gallery[lightbox].gradient} flex items-center justify-center`}>
+          <div className={`w-[80vw] h-[60vh] rounded-2xl bg-gradient-to-br ${gallery[lightbox].gradient} flex items-center justify-center`}>
             <span className="text-white/60 text-lg">{gallery[lightbox].label}</span>
           </div>
           <button onClick={() => setLightbox((lightbox + 1) % gallery.length)} className="absolute right-6 text-white/60 hover:text-white"><ChevronRight className="h-8 w-8" /></button>
@@ -118,7 +118,7 @@ export default function DestinationDetailPage() {
               <h2 className="text-2xl font-bold text-white mb-4 animate-fade-up">Sample Itinerary</h2>
               <Accordion type="single" collapsible className="space-y-2 stagger">
                 {itinerary.map((item, i) => (
-                  <AccordionItem key={i} value={`day-\${i}`} className="border border-slate-800 rounded-lg overflow-hidden bg-slate-950/50 px-4">
+                  <AccordionItem key={i} value={`day-${i}`} className="border border-slate-800 rounded-lg overflow-hidden bg-slate-950/50 px-4">
                     <AccordionTrigger className="text-white hover:text-cyan-400 hover:no-underline py-4">
                       <span className="flex items-center gap-3">
                         <Badge className="bg-blue-600/20 text-blue-300 border-blue-700/30 text-xs">{item.day}</Badge>
@@ -155,7 +155,7 @@ export default function DestinationDetailPage() {
             <Card className="border-slate-800 backdrop-blur-sm bg-card/80 sticky top-24">
               <CardContent className="p-6">
                 <div className="text-sm text-slate-500 mb-1">Starting from</div>
-                <div className="text-3xl font-bold text-white mb-1">\$899</div>
+                <div className="text-3xl font-bold text-white mb-1">$899</div>
                 <div className="text-sm text-slate-500 mb-6">per person</div>
                 <h4 className="text-sm font-semibold text-white mb-3">Package Includes</h4>
                 <ul className="space-y-2 mb-6">