From ef6bbda27bb89cebed4a772a2c9af5a38d02eecb Mon Sep 17 00:00:00 2001
From: Sewmina <sewmina7@gmail.com>
Date: Wed, 5 Nov 2025 22:33:29 +0530
Subject: [PATCH] init

---
 app/appointment/page.tsx    | 183 ++++++++++++++++++++++++++++++++++++
 app/components/Header.tsx   |  70 ++++++++++++++
 app/globals.css             |  75 +++++++++++++--
 app/layout.tsx              |   6 +-
 app/page.tsx                | 160 ++++++++++++++++++++-----------
 public/100kmphlogo.png      | Bin 0 -> 5195 bytes
 public/logo-placeholder.svg |  18 ++++
 7 files changed, 443 insertions(+), 69 deletions(-)
 create mode 100644 app/appointment/page.tsx
 create mode 100644 app/components/Header.tsx
 create mode 100644 public/100kmphlogo.png
 create mode 100644 public/logo-placeholder.svg

diff --git a/app/appointment/page.tsx b/app/appointment/page.tsx
new file mode 100644
index 0000000..5bc1f78
--- /dev/null
+++ b/app/appointment/page.tsx
@@ -0,0 +1,183 @@
+import Link from 'next/link';
+
+export default function AppointmentPage() {
+  return (
+    <div className="relative min-h-screen bg-black tech-grid scanlines">
+      {/* Animated background elements */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse"></div>
+        <div className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse delay-1000"></div>
+      </div>
+
+      <div className="relative mx-auto max-w-4xl px-4 py-12">
+        <div className="relative rounded-lg border-2 border-white/30 bg-black/80 backdrop-blur-sm p-8 neon-border-glow">
+          <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-transparent"></div>
+          <div className="relative">
+            <div className="mb-6 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="h-2 w-2 rounded-full bg-white animate-pulse"></div>
+                <h1 className="text-3xl font-bold text-white uppercase tracking-wider neon-glow">
+                  Book a New Appointment
+                </h1>
+              </div>
+              <Link
+                href="/"
+                className="text-sm font-medium text-white/60 hover:text-white transition-colors font-mono uppercase tracking-wider border border-white/20 px-3 py-1 rounded hover:border-white/40 hover:bg-white/10"
+              >
+                ← Back to Home
+              </Link>
+            </div>
+
+            <p className="mb-8 text-white/70 font-mono">
+              FILL OUT THE FORM BELOW TO SCHEDULE A SERVICE APPOINTMENT FOR YOUR VEHICLE.
+            </p>
+
+            {/* Appointment Form */}
+            <form className="space-y-6">
+              <div className="grid gap-6 sm:grid-cols-2">
+                <div>
+                  <label
+                    htmlFor="vehicleNumber"
+                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
+                  >
+                    Vehicle Number <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    id="vehicleNumber"
+                    type="text"
+                    placeholder="ABC-1234"
+                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label
+                    htmlFor="vehicleMake"
+                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
+                  >
+                    Vehicle Make <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    id="vehicleMake"
+                    type="text"
+                    placeholder="Honda, Toyota"
+                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label
+                    htmlFor="vehicleModel"
+                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
+                  >
+                    Vehicle Model <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    id="vehicleModel"
+                    type="text"
+                    placeholder="Civic, Camry"
+                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label
+                    htmlFor="serviceType"
+                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
+                  >
+                    Service Type <span className="text-red-500">*</span>
+                  </label>
+                  <select
+                    id="serviceType"
+                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all [&>option]:bg-black [&>option]:text-white"
+                    required
+                  >
+                    <option value="">SELECT SERVICE TYPE</option>
+                    <option value="regular">Regular Service</option>
+                    <option value="repair">Repair</option>
+                    <option value="inspection">Inspection</option>
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label
+                    htmlFor="preferredDate"
+                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
+                  >
+                    Preferred Date <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    id="preferredDate"
+                    type="date"
+                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all [&::-webkit-calendar-picker-indicator]:invert [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label
+                    htmlFor="preferredTime"
+                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
+                  >
+                    Preferred Time <span className="text-red-500">*</span>
+                  </label>
+                  <select
+                    id="preferredTime"
+                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all [&>option]:bg-black [&>option]:text-white"
+                    required
+                  >
+                    <option value="">SELECT TIME</option>
+                    <option value="09:00">09:00 AM</option>
+                    <option value="10:00">10:00 AM</option>
+                    <option value="11:00">11:00 AM</option>
+                    <option value="12:00">12:00 PM</option>
+                    <option value="13:00">13:00 PM</option>
+                    <option value="14:00">14:00 PM</option>
+                    <option value="15:00">15:00 PM</option>
+                    <option value="16:00">16:00 PM</option>
+                    <option value="17:00">17:00 PM</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label
+                  htmlFor="additionalNotes"
+                  className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
+                >
+                  Additional Notes
+                </label>
+                <textarea
+                  id="additionalNotes"
+                  rows={4}
+                  placeholder="ANY SPECIFIC REQUIREMENTS OR ISSUES..."
+                  className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
+                />
+              </div>
+
+              <div className="flex gap-4 pt-4">
+                <Link
+                  href="/"
+                  className="flex-1 rounded-lg border-2 border-white/30 bg-black/50 px-6 py-3 text-center font-medium uppercase tracking-wider text-white transition-all hover:bg-white/10 hover:border-white/50 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)]"
+                >
+                  Cancel
+                </Link>
+                <button
+                  type="submit"
+                  className="flex-1 rounded-lg border-2 border-white/30 bg-white/5 px-6 py-3 font-bold uppercase tracking-wider text-white transition-all hover:bg-white/10 hover:border-white/50 hover:text-gray-200 hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] focus:outline-none focus:ring-2 focus:ring-white/30"
+                >
+                  Book Appointment
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
new file mode 100644
index 0000000..c98818a
--- /dev/null
+++ b/app/components/Header.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export default function Header() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  return (
+    <header className="relative w-full border-b border-white/20 bg-black/95 backdrop-blur-sm">
+      <div className="absolute inset-0 tech-grid opacity-20"></div>
+      <div className="relative mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+        {/* Logo */}
+        <Link href="/" className="flex items-center group">
+          <div className="relative">
+            <Image
+              src="/100kmphlogo.png"
+              alt="100kmph Logo"
+              width={100}
+              height={100}
+              className="rounded"
+              priority
+            />
+            <div className="absolute inset-0 rounded bg-white/10 blur-md group-hover:bg-white/20 transition-all"></div>
+          </div>
+        </Link>
+
+        {/* Right side: Profile Icon and Login/Logout */}
+        <div className="flex items-center gap-4">
+          {/* Profile Icon */}
+          <button
+            onClick={() => {
+              // Navigate to profile page
+              if (isLoggedIn) {
+                // TODO: Navigate to profile page
+              }
+            }}
+            className="flex h-10 w-10 items-center justify-center rounded-lg border border-white/20 bg-black/50 text-white transition-all hover:border-white/40 hover:bg-white/10 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)]"
+            aria-label="Profile"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+              className="h-6 w-6"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+              />
+            </svg>
+          </button>
+
+          {/* Login/Logout Button */}
+          <button
+            onClick={() => setIsLoggedIn(!isLoggedIn)}
+            className="rounded-lg border border-white/30 bg-white/5 px-4 py-2 text-sm font-medium text-white transition-all hover:bg-white/10 hover:border-white/50 hover:shadow-[0_0_15px_rgba(255,255,255,0.4)] hover:text-gray-200"
+          >
+            {isLoggedIn ? 'Logout' : 'Login'}
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}
+
diff --git a/app/globals.css b/app/globals.css
index a2dc41e..1c661dc 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,8 +1,15 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #000000;
+  --foreground: #ffffff;
+  --neon-white: #ffffff;
+  --white-shade-1: #ffffff;
+  --white-shade-2: #e5e5e5;
+  --white-shade-3: #cccccc;
+  --dark-bg: #0a0a0a;
+  --dark-surface: #111111;
+  --dark-border: #1a1a1a;
 }
 
 @theme inline {
@@ -12,15 +19,63 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+  overflow-x: hidden;
+}
+
+/* Tech grid background pattern */
+.tech-grid {
+  background-image: 
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+}
+
+/* Neon glow effects */
+.neon-glow {
+  text-shadow: 
+    0 0 10px rgba(255, 255, 255, 0.8),
+    0 0 20px rgba(255, 255, 255, 0.6),
+    0 0 30px rgba(255, 255, 255, 0.4);
+}
+
+.neon-border {
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 0 10px rgba(255, 255, 255, 0.2),
+    inset 0 0 10px rgba(255, 255, 255, 0.05);
+}
+
+.neon-border-glow {
+  box-shadow: 
+    0 0 15px rgba(255, 255, 255, 0.3),
+    0 0 30px rgba(255, 255, 255, 0.2),
+    inset 0 0 15px rgba(255, 255, 255, 0.05);
+}
+
+/* Scanline effect */
+.scanlines::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.15),
+    rgba(0, 0, 0, 0.15) 1px,
+    transparent 1px,
+    transparent 2px
+  );
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Animation delays */
+.delay-1000 {
+  animation-delay: 1s;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index f7fa87e..fa19208 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Header from "./components/Header";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,8 +14,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "100kmph - Vehicle Service Center",
+  description: "Quick and easy access to vehicle service status and appointments",
 };
 
 export default function RootLayout({
@@ -27,6 +28,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        <Header />
         {children}
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index 295f8fd..6478299 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,65 +1,111 @@
-import Image from "next/image";
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import Image from 'next/image';
 
 export default function Home() {
+  const [vehicleNumber, setVehicleNumber] = useState('');
+  const router = useRouter();
+
+  const handleGuestLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (vehicleNumber.trim()) {
+      // TODO: Handle guest login logic
+      // For now, just show an alert or navigate to status page
+      console.log('Checking status for vehicle:', vehicleNumber);
+      // You can navigate to a status page here
+      // router.push(`/status/${vehicleNumber}`);
+    }
+  };
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+    <div className="relative min-h-screen bg-black tech-grid scanlines">
+      {/* Animated background elements */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse"></div>
+        <div className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse delay-1000"></div>
+      </div>
+
+      <div className="relative mx-auto flex min-h-[calc(100vh-80px)] max-w-4xl flex-col items-center justify-center px-4 py-12">
+        {/* Main Content */}
+        <div className="w-full max-w-md space-y-8">
+          {/* Welcome Section */}
+          <div className="text-center">
+            <div className="mb-8 flex justify-center">
+              <div className="relative">
+                <Image
+                  src="/100kmphlogo.png"
+                  alt="100kmph Logo"
+                  width={200}
+                  height={200}
+                  className="rounded"
+                  priority
+                />
+                <div className="absolute inset-0 rounded bg-white/10 blur-xl"></div>
+              </div>
+            </div>
+            <p className="text-lg text-white/70 font-mono">
+              CHECK YOUR VEHICLE SERVICE STATUS OR BOOK A NEW APPOINTMENT
+            </p>
+          </div>
+
+          {/* Guest Login Card */}
+          <div className="relative rounded-lg border-2 border-white/30 bg-black/80 backdrop-blur-sm p-8 neon-border-glow">
+            <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-transparent"></div>
+            <div className="relative">
+              <div className="mb-2 flex items-center gap-2">
+                <div className="h-2 w-2 rounded-full bg-white animate-pulse"></div>
+                <h2 className="text-2xl font-bold text-white uppercase tracking-wider">
+                  Guest Login
+                </h2>
+              </div>
+              <p className="mb-6 text-sm text-white/60 font-mono">
+                ENTER YOUR VEHICLE NUMBER TO CHECK SERVICE STATUS
+              </p>
+              
+              <form onSubmit={handleGuestLogin} className="space-y-4">
+                <div>
+                  <label
+                    htmlFor="vehicleNumber"
+                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
+                  >
+                    Vehicle Number
+                  </label>
+                  <input
+                    id="vehicleNumber"
+                    type="text"
+                    value={vehicleNumber}
+                    onChange={(e) => setVehicleNumber(e.target.value.toUpperCase())}
+                    placeholder="ABC-1234"
+                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 text-lg font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
+                    required
+                  />
+                </div>
+                
+                <button
+                  type="submit"
+                  className="w-full rounded-lg border-2 border-white/30 bg-white/5 px-6 py-3 text-lg font-bold uppercase tracking-wider text-white transition-all hover:bg-white/10 hover:border-white/50 hover:text-gray-200 hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] focus:outline-none focus:ring-2 focus:ring-white/30"
+                >
+                  Login
+                </button>
+              </form>
+            </div>
+          </div>
+
+          {/* New Appointment Button */}
+          <div className="text-center">
+            <p className="mb-4 text-sm text-white/50 font-mono uppercase">or</p>
+            <Link
+              href="/appointment"
+              className="inline-block w-full rounded-lg border-2 border-white/30 bg-black/50 px-6 py-3 text-lg font-bold uppercase tracking-wider text-white transition-all hover:bg-white/10 hover:border-white/50 hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] focus:outline-none focus:ring-2 focus:ring-white/30"
             >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
+              Make a New Appointment
+            </Link>
+          </div>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
+      </div>
     </div>
   );
 }
diff --git a/public/100kmphlogo.png b/public/100kmphlogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..dcf39e418d524b884c9c8decd1527c8a40e00f40
GIT binary patch
literal 5195
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
ZW<b8cZY06x*1yyPLrqy5RHJAG`wtF?YGMEY

literal 0
HcmV?d00001

diff --git a/public/logo-placeholder.svg b/public/logo-placeholder.svg
new file mode 100644
index 0000000..3f5ba6d
--- /dev/null
+++ b/public/logo-placeholder.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40">
+  <defs>
+    <linearGradient id="neonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#00ffff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#0099ff;stop-opacity:1" />
+    </linearGradient>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  <rect width="120" height="40" rx="4" fill="#000000" stroke="url(#neonGradient)" stroke-width="1"/>
+  <text x="60" y="26" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="url(#neonGradient)" text-anchor="middle" filter="url(#glow)">100kmph</text>
+</svg>
+