update my frontend design kinna V1 changing it soon. tested and confirm Api working

Author: RabbitDaCoder

client/package-lock.json

@@ -10,17 +10,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.10",
+    "@tailwindcss/vite": "^4.1.12",
     "@tanstack/react-query": "^5.80.7",
     "@tanstack/react-router": "^1.121.21",
     "@tanstack/react-router-devtools": "^1.121.21",
     "axios": "^1.10.0",
+    "framer-motion": "^12.23.12",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.6.2",
     "react-toastify": "^11.0.3",
-    "tailwindcss": "^4.1.10",
+    "tailwindcss": "^4.1.12",
     "zustand": "^5.0.5"
   },
   "devDependencies": {

client/package.json

@@ -1,22 +1,21 @@
-import { Link, Outlet } from "@tanstack/react-router";
+import { Outlet, ScrollRestoration } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
-import "./App.css";
+import "./index.css";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
 
 function App() {
   return (
-    <>
-      <div className="p-2 flex gap-2">
-        <Link to="/" className="[&.active]:font-bold">
-          Home
-        </Link>{" "}
-        <Link to="/contact" className="[&.active]:font-bold">
-          conatct
-        </Link>
-      </div>
-      <hr />
-      <Outlet />
-      <TanStackRouterDevtools />
-    </>
+    <div className="min-h-dvh flex flex-col bg-white text-neutral-900">
+      <Header />
+      <main className="flex-1">
+        <Outlet />
+      </main>
+      <Footer />
+      <ScrollRestoration />
+
+      <TanStackRouterDevtools position="bottom-left" />
+    </div>
   );
 }
 

client/src/App.css

@@ -0,0 +1,12 @@
+const Footer = () => {
+  return (
+    <footer className="border-t border-black/10">
+      <div className="container mx-auto px-4 py-10 text-sm text-neutral-600 flex flex-col md:flex-row gap-4 md:items-center md:justify-between">
+        <p>© {new Date().getFullYear()} Aegis Express Logistics</p>
+        <p className="opacity-80">Fast. Transparent. Global.</p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

client/src/App.tsx

@@ -0,0 +1,56 @@
+import { Link, useRouterState } from "@tanstack/react-router";
+const Header = () => {
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  return (
+    <header className="sticky top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-white/60 border-b border-black/10">
+      <div className="container mx-auto px-4 h-16 flex items-center justify-between">
+        <Link to="/" className="font-extrabold tracking-tight text-2xl">
+          Aegis<span className="text-primary">Express</span>
+        </Link>
+        <nav className="hidden md:flex items-center gap-6">
+          <NavLink to="/" label="Home" active={pathname === "/"} />
+          <NavLink
+            to="/about"
+            label="About"
+            active={pathname.startsWith("/about")}
+          />
+          <NavLink
+            to="/blogs/"
+            label="Blogs"
+            active={pathname.startsWith("/blogs")}
+          />
+          <NavLink
+            to="/track/"
+            label="Track"
+            active={pathname.startsWith("/track")}
+          />
+          <NavLink
+            to="/contact"
+            label="Contact"
+            active={pathname.startsWith("/contact")}
+          />
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+function NavLink({
+  to,
+  label,
+  active,
+}: {
+  to: string;
+  label: string;
+  active: boolean;
+}) {
+  return (
+    <Link
+      to={to as string}
+      className={`text-sm font-medium hover:opacity-80 transition-opacity ${active ? "text-primary" : "text-neutral-700"}`}
+    >
+      {label}
+    </Link>
+  );
+}
+export default Header;

client/src/components/Footer.tsx

@@ -1,68 +1,38 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@import "tailwindcss";
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+@theme {
+  --color-primary: #111827; /* near-black accent */
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+.container {
+  @apply max-w-7xl;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+/* Primitives */
+.input {
+  @apply w-full rounded-xl border border-black/10 px-4 py-2 outline-none focus:ring-2 focus:ring-primary/20;
 }
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+.btn-primary {
+  @apply inline-flex items-center justify-center rounded-xl bg-primary px-5 py-2 font-semibold text-white shadow-sm active:scale-[0.99];
 }
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+.btn-outline {
+  @apply inline-flex items-center justify-center rounded-xl border border-black/15 px-5 py-2 font-semibold text-neutral-900 hover:bg-black/5;
+}
+.card {
+  @apply rounded-2xl border border-black/10 p-5 shadow-sm bg-white;
 }
-button:hover {
-  border-color: #646cff;
+.badge {
+  @apply inline-flex items-center rounded-full border border-black/10 px-2.5 py-1 text-xs font-medium;
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+.link {
+  @apply text-primary underline underline-offset-4;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+/* Smooth scrolling & text rendering */
+html {
+  scroll-behavior: smooth;
+}
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
 }

client/src/components/Header.tsx

@@ -1,6 +1,11 @@
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
+import {
+  QueryClient,
+  QueryClientProvider,
+  HydrationBoundary,
+} from "@tanstack/react-query";
 
 // Import the generated route tree
 import { routeTree } from "./routeTree.gen";
@@ -15,13 +20,27 @@ declare module "@tanstack/react-router" {
   }
 }
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60, // 1 min
+      gcTime: 1000 * 60 * 5,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
 // Render the app
 const rootElement = document.getElementById("root")!;
 if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <StrictMode>
-      <RouterProvider router={router} />
+      <QueryClientProvider client={queryClient}>
+        {/* If you SSR later, hydrate here */}
+        <HydrationBoundary>
+          <RouterProvider router={router} />
+        </HydrationBoundary>
+      </QueryClientProvider>
     </StrictMode>
   );
 }

client/src/components/component.file.example.tsx

@@ -0,0 +1,14 @@
+const About = () => {
+  return (
+    <section className="container mx-auto px-4 py-16">
+      <h1 className="text-4xl font-bold tracking-tight">About Aegis Express</h1>
+      <p className="mt-4 max-w-3xl text-balance text-neutral-600">
+        We provide fast, reliable, and transparent logistics across the globe.
+        Our platform offers real‑time tracking, seamless documentation, and
+        delightful customer experience.
+      </p>
+    </section>
+  );
+};
+
+export default About;