Remove the placeholder fleet, and split the site into separate pages (#9)

Two changes shipped together.

The six invented vehicles are gone. cars.ts is now an empty array with a
commented template; everything reading it handles being empty, so no page
renders a hole. Adding the real fleet is filling the array back in.

The single scrolling page becomes six routes matching the old site's menu --
Home, About Us, Our Cars, Tariff, Blog, Contact -- plus a 404 page. The nav
marks the current page with a gold dot and collapses to a toggle on phones.

Fleet and Enquiry were written for one page; a car chosen on the fleet page
now travels as /contact?car=<name> so the choice survives the navigation.

scripts/spa-fallback.mjs copies dist/index.html to dist/404.html after every
build. GitHub Pages knows nothing about client-side routes, so without it a
direct visit to /about or a refresh on /cars returns Pages' own 404 and the
app never boots.

About and Blog carry TODO comments: their copy states only what the booking
flow actually does, rather than inventing a founding year or posts.

Author: niteeshkanna-sh

my-app/package-lock.json

@@ -5,13 +5,14 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "tsc -b && vite build && node scripts/spa-fallback.mjs",
     "lint": "oxlint",
     "preview": "vite preview"
   },
   "dependencies": {
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.3"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",

my-app/package.json

@@ -0,0 +1,24 @@
+/**
+ * GitHub Pages serves static files and knows nothing about client-side routes,
+ * so a direct visit to /about or a refresh on /cars returns its 404 page and
+ * the app never boots. Pages does, however, serve 404.html for any path it
+ * cannot match -- so an exact copy of index.html there loads the app, and the
+ * router resolves the URL as usual.
+ *
+ * Copied rather than symlinked: the Pages artifact upload does not follow
+ * symlinks. Written in Node rather than `cp` so the build works on Windows.
+ */
+import { copyFileSync, existsSync } from 'node:fs';
+import { join } from 'node:path';
+
+const dist = join(import.meta.dirname, '..', 'dist');
+const index = join(dist, 'index.html');
+const fallback = join(dist, '404.html');
+
+if (!existsSync(index)) {
+  console.error('spa-fallback: dist/index.html is missing; run the build first.');
+  process.exit(1);
+}
+
+copyFileSync(index, fallback);
+console.log('spa-fallback: wrote dist/404.html');

my-app/scripts/spa-fallback.mjs

@@ -1,29 +1,43 @@
-import { useState } from 'react';
+import { useEffect } from 'react';
+import { Routes, Route, useLocation } from 'react-router-dom';
 import { Header } from './components/Header';
-import { Hero } from './components/Hero';
-import { Fleet } from './components/Fleet';
-import { HowItWorks } from './components/HowItWorks';
-import { Enquiry } from './components/Enquiry';
 import { Footer } from './components/Footer';
+import { Home } from './pages/Home';
+import { About } from './pages/About';
+import { Cars } from './pages/Cars';
+import { Tariff } from './pages/Tariff';
+import { Blog } from './pages/Blog';
+import { Contact } from './pages/Contact';
+import { NotFound } from './pages/NotFound';
 
-function App() {
-  // Clicking "Enquire" on a car preselects it in the form below, so the
-  // choice is not lost on the way down the page.
-  const [selectedCar, setSelectedCar] = useState('');
-
-  function enquireAbout(car: string) {
-    setSelectedCar(car);
-    document.getElementById('enquire')?.scrollIntoView({ behavior: 'smooth' });
-  }
+/**
+ * A browser restores scroll position on navigation, which on a client-side
+ * router means a new page can open halfway down. Reset on every path change,
+ * but leave hash links alone so #anchors still work.
+ */
+function ScrollToTop() {
+  const { pathname, hash } = useLocation();
+  useEffect(() => {
+    if (!hash) window.scrollTo(0, 0);
+  }, [pathname, hash]);
+  return null;
+}
 
+function App() {
   return (
     <>
+      <ScrollToTop />
       <Header />
       <main>
-        <Hero />
-        <Fleet onEnquire={enquireAbout} />
-        <HowItWorks />
-        <Enquiry selectedCar={selectedCar} onCarChange={setSelectedCar} />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/cars" element={<Cars />} />
+          <Route path="/tariff" element={<Tariff />} />
+          <Route path="/blog" element={<Blog />} />
+          <Route path="/contact" element={<Contact />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
       </main>
       <Footer />
     </>

my-app/src/App.tsx

@@ -1,4 +1,5 @@
 import { useState, type FormEvent } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { submitEnquiry } from '../lib/enquiry';
 import { cars } from '../data/cars';
 
@@ -8,18 +9,18 @@ type Status =
   | { kind: 'sent'; enquiryNumber: string | null }
   | { kind: 'error'; message: string; fields?: Record<string, string> };
 
-interface EnquiryProps {
-  selectedCar: string;
-  onCarChange: (car: string) => void;
-}
-
 const field =
   'w-full rounded-xl border border-line bg-white px-3.5 py-2.5 text-ink outline-none transition placeholder:text-ink-faint focus:border-navy focus:ring-2 focus:ring-navy/15';
 const label = 'block text-sm font-medium text-ink-dim';
 
-export function Enquiry({ selectedCar, onCarChange }: EnquiryProps) {
+export function Enquiry() {
   const [status, setStatus] = useState<Status>({ kind: 'idle' });
 
+  // A car chosen on the fleet page arrives as ?car=..., so the choice
+  // survives the navigation here.
+  const [searchParams] = useSearchParams();
+  const [selectedCar, setSelectedCar] = useState(searchParams.get('car') ?? '');
+
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     setStatus({ kind: 'sending' });
@@ -136,6 +137,7 @@ export function Enquiry({ selectedCar, onCarChange }: EnquiryProps) {
             ) : null}
           </div>
 
+          {cars.length === 0 ? null : (
           <div>
             <label className={label} htmlFor="car">
               Car you're interested in
@@ -144,7 +146,7 @@ export function Enquiry({ selectedCar, onCarChange }: EnquiryProps) {
               id="car"
               name="car"
               value={selectedCar}
-              onChange={(e) => onCarChange(e.target.value)}
+              onChange={(e) => setSelectedCar(e.target.value)}
               className={`mt-1.5 ${field}`}
             >
               <option value="">No preference</option>
@@ -155,6 +157,7 @@ export function Enquiry({ selectedCar, onCarChange }: EnquiryProps) {
               ))}
             </select>
           </div>
+          )}
 
           <div className="grid gap-5 sm:grid-cols-2">
             <div>
@@ -183,7 +186,9 @@ export function Enquiry({ selectedCar, onCarChange }: EnquiryProps) {
 
           <div>
             <label className={label} htmlFor="message">
-              Anything else?
+              {cars.length === 0
+                ? 'What kind of car do you need?'
+                : 'Anything else?'}
             </label>
             <textarea id="message" name="message" rows={3} className={`mt-1.5 ${field}`} />
           </div>

my-app/src/components/Enquiry.tsx

@@ -1,15 +1,13 @@
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 import { cars, inr, type BodyType } from '../data/cars';
 
 type Filter = 'All' | BodyType;
 const filters: Filter[] = ['All', 'Hatchback', 'Sedan', 'SUV', 'MUV'];
 
-interface FleetProps {
-  onEnquire: (carLabel: string) => void;
-}
-
-export function Fleet({ onEnquire }: FleetProps) {
+export function Fleet() {
   const [filter, setFilter] = useState<Filter>('All');
+  const empty = cars.length === 0;
   const shown = filter === 'All' ? cars : cars.filter((c) => c.bodyType === filter);
 
   return (
@@ -20,10 +18,13 @@ export function Fleet({ onEnquire }: FleetProps) {
             Our fleet
           </h2>
           <p className="mt-2 max-w-lg text-ink-dim">
-            Rates shown are per day. Longer hires bring the daily rate down.
+            {empty
+              ? 'We are updating our vehicle listing. Call us or send an enquiry and we will tell you what is free for your dates.'
+              : 'Rates shown are per day. Longer hires bring the daily rate down.'}
           </p>
         </div>
 
+        {empty ? null : (
         <div className="flex flex-wrap gap-2" role="group" aria-label="Filter by body type">
           {filters.map((f) => {
             const active = f === filter;
@@ -44,8 +45,34 @@ export function Fleet({ onEnquire }: FleetProps) {
             );
           })}
         </div>
+        )}
       </div>
 
+      {empty ? (
+        <div className="mt-10 rounded-[14px] border border-line bg-white p-10 text-center shadow-[0_10px_30px_rgba(16,24,40,0.08)]">
+          <p className="text-lg font-semibold text-navy">
+            Ask us what's available
+          </p>
+          <p className="mx-auto mt-2 max-w-md text-ink-dim">
+            Our current vehicles are not listed here yet. Tell us your dates and
+            what you need, and we will come back with the options and the rate.
+          </p>
+          <div className="mt-6 flex flex-wrap justify-center gap-3">
+            <a
+              href="/contact"
+              className="rounded-xl bg-navy px-5 py-2.5 font-semibold text-white transition hover:bg-navy/90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gold"
+            >
+              Send an enquiry
+            </a>
+            <a
+              href="tel:+916374942976"
+              className="rounded-xl border border-line px-5 py-2.5 font-semibold text-ink-dim transition hover:border-navy/40 hover:text-navy"
+            >
+              Call +91 63749 42976
+            </a>
+          </div>
+        </div>
+      ) : (
       <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {shown.map((car) => {
           const label = `${car.brand} ${car.name}`;
@@ -124,18 +151,18 @@ export function Fleet({ onEnquire }: FleetProps) {
                   </p>
                 </div>
 
-                <button
-                  type="button"
-                  onClick={() => onEnquire(label)}
-                  className="mt-5 w-full rounded-xl bg-navy px-4 py-2.5 font-semibold text-white transition hover:bg-navy/90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gold"
+                <Link
+                  to={`/contact?car=${encodeURIComponent(label)}`}
+                  className="mt-5 block w-full rounded-xl bg-navy px-4 py-2.5 text-center font-semibold text-white transition hover:bg-navy/90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gold"
                 >
                   Enquire about this car
-                </button>
+                </Link>
               </div>
             </article>
           );
         })}
       </div>
+      )}
     </section>
   );
 }

my-app/src/components/Fleet.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom';
+
 export function Footer() {
   return (
     <footer className="bg-navy text-white/70">
@@ -42,19 +44,19 @@ export function Footer() {
           </h2>
           <ul className="mt-3 space-y-2 text-sm">
             <li>
-              <a href="#fleet" className="transition hover:text-gold">
+              <Link to="/cars" className="transition hover:text-gold">
                 Our fleet
-              </a>
+              </Link>
             </li>
             <li>
               <a href="#how" className="transition hover:text-gold">
                 How it works
               </a>
             </li>
             <li>
-              <a href="#enquire" className="transition hover:text-gold">
+              <Link to="/contact" className="transition hover:text-gold">
                 Enquire
-              </a>
+              </Link>
             </li>
           </ul>
         </div>