src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import AuthPage from "@/pages/AuthPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/auth" element={<AuthPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Metrics",
     "href": "#metrics"
-  }
+  },
+  { name: "Auth", href: "/auth" },
+
 ];
 
   return (

src/pages/AuthPage.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import RadialGradientBackground from "@/components/ui/RadialGradientBackground";
+import Card from "@/components/ui/Card";
+import Input from "@/components/ui/Input";
+import Button from "@/components/ui/Button";
+import Separator from "@/components/ui/Separator";
+import SelectorButton from "@/components/ui/SelectorButton";
+import TextLink from "@/components/ui/TextLink";
+
+export default function AuthPage() {
+  const [step, setStep] = useState<"initial" | "verify">("initial");
+  const [role, setRole] = useState<string>("buyer");
+  const [authMode, setAuthMode] = useState<"login" | "signup">("signup");
+
+  return (
+    <div className="min-h-svh bg-background flex flex-col relative overflow-hidden">
+      <RadialGradientBackground position="fixed" />
+      
+      <div className="flex-1 flex items-center justify-center p-4 relative z-10">
+        <Card className="w-full max-w-content-width p-8 flex flex-col gap-6 bg-card/80 backdrop-blur-xl border-border shadow-2xl">
+          {step === "initial" ? (
+            <>
+              <div className="text-center space-y-2">
+                <h1 className="text-2xl font-bold text-foreground">
+                  {authMode === "signup" ? "Create an account" : "Welcome back"}
+                </h1>
+                <p className="text-muted-foreground text-sm">
+                  {authMode === "signup" 
+                    ? "Join Future Frame to start building or buying." 
+                    : "Enter your details to access your account."}
+                </p>
+              </div>
+
+              {authMode === "signup" && (
+                <div className="space-y-3">
+                  <label className="text-sm font-medium text-foreground">I am a:</label>
+                  <SelectorButton
+                    options={[
+                      { value: "buyer", label: "Buyer" },
+                      { value: "developer", label: "Developer" }
+                    ]}
+                    activeValue={role}
+                    onValueChange={setRole}
+                    className="w-full"
+                  />
+                </div>
+              )}
+
+              <div className="space-y-4">
+                <Input 
+                  type="text" 
+                  placeholder="Email or Phone Number" 
+                  className="w-full bg-background border-border text-foreground"
+                />
+                <Button 
+                  text="Continue" 
+                  variant="primary" 
+                  className="w-full justify-center"
+                  onClick={() => setStep("verify")} 
+                />
+              </div>
+
+              <div className="flex items-center gap-4">
+                <Separator className="flex-1" />
+                <span className="text-xs text-muted-foreground uppercase tracking-wider">Or continue with</span>
+                <Separator className="flex-1" />
+              </div>
+
+              <div className="space-y-3">
+                <Button text="Google" variant="secondary" className="w-full justify-center" />
+                <Button text="GitHub" variant="secondary" className="w-full justify-center" />
+              </div>
+
+              <div className="text-center text-sm text-muted-foreground mt-4">
+                {authMode === "signup" ? "Already have an account?" : "Don't have an account? "} <TextLink text={authMode ==="signup" ? "Log in" : "Sign up"} 
+                  onClick={() => setAuthMode(authMode === "signup" ? "login" : "signup")}
+                  className="text-foreground font-medium cursor-pointer"
+                />
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="text-center space-y-2">
+                <h1 className="text-2xl font-bold text-foreground">Check your device</h1>
+                <p className="text-muted-foreground text-sm">
+                  We sent a 6-digit verification code to your contact method.
+                </p>
+              </div>
+
+              <div className="space-y-4 mt-4">
+                <Input 
+                  type="text" 
+                  placeholder="000000" 
+                  className="w-full text-center text-2xl tracking-widest bg-background border-border text-foreground"
+                  maxLength={6}
+                />
+                <Button 
+                  text="Verify & Proceed" 
+                  variant="primary" 
+                  className="w-full justify-center"
+                  onClick={() => alert("Verified!")} 
+                />
+              </div>
+
+              <div className="text-center mt-6 space-y-2">
+                <p className="text-sm text-muted-foreground">Code expires in <span className="text-foreground font-mono">04:59</span></p>
+                <TextLink 
+                  text="Back to login" 
+                  onClick={() => setStep("initial")}
+                  className="text-sm text-muted-foreground hover:text-foreground cursor-pointer"
+                />
+              </div>
+            </>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/auth', label: 'Auth', pageFile: 'AuthPage' },
 ];