init

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>
+  );
+}
+

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>
+  );
+}
+

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;
 }

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>

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>
   );
 }

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>
+