How to add a new custom footer page

How to add a new custom page (e.g. /about-us)

1. Create a new route

Create a new file routes/AboutPage.tsx (or you can create a folder routes/Footer/AboutPage.tsx if you prefer grouping footer pages).

// routes/AboutPage.tsx
import React from 'react';
import Layout from '~/layouts/Default';

export default function AboutPage() {
  return (
    <Layout>
      <div className="container py-5">
        <h1>About Us</h1>
        <p>This is a custom page with your company information.</p>
      </div>
    </Layout>
  );
}

2. Register the route in vite.config.js

In your vite.config.ts, add the new route inside the defineRoutes(...) section:

route("/about-us", "routes/AboutPage.tsx");

If you're grouping it under routes/Footer/AboutPage.tsx, use:

route("/about-us", "routes/Footer/AboutPage.tsx"); q

3. Update the Footer.tsx component

Instead of using raw <a href>, use <Link> from react-router-dom.

Edit your Footer.tsx to use a real URL:

1. First, import the Link component:

import { Link } from "react-router-dom";

1. Then update the navigation link:

<Link className="nav-link" to="/about-us">
  About
</Link>

Repeat the same for other static pages if needed. This ensures full SPA navigation with proper React routing (no full page reloads).

---

📁 Optional: Organizing Footer Pages

If you plan to add more pages like FAQ, Returns, etc., keep them under routes/Footer/ and map them like this:

route("/faq", "routes/Footer/FaqPage.tsx");
route("/returns", "routes/Footer/ReturnsPage.tsx");
route("/delivery", "routes/Footer/DeliveryPage.tsx");