From 029c08ce7a6e98d3208edf9791bd355ab0f0ac24 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 15 Jun 2026 09:21:26 +0000
Subject: [PATCH 1/2] Bob AI: Add auth page

---
 src/App.tsx               |   2 +
 src/components/Layout.tsx |   4 +-
 src/pages/AuthPage.tsx    | 137 ++++++++++++++++++++++++++++++++++++++
 src/routes.ts             |   1 +
 4 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/AuthPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 33d15f9..5286619 100644
--- a/src/App.tsx
+++ b/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>
   );
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index d1a765f..d807c8f 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Metrics",
     "href": "#metrics"
-  }
+  },
+  { name: "Auth", href: "/auth" },
+
 ];
 
   return (
diff --git a/src/pages/AuthPage.tsx b/src/pages/AuthPage.tsx
new file mode 100644
index 0000000..ecd9912
--- /dev/null
+++ b/src/pages/AuthPage.tsx
@@ -0,0 +1,137 @@
+import React, { useState } from "react";
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+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";
+import FooterMinimal from "@/components/sections/footer/FooterMinimal";
+
+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-screen bg-background flex flex-col relative overflow-hidden">
+      <RadialGradientBackground position="fixed" />
+      
+      <NavbarCentered
+        logo="Future Frame"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Contact Sales", href: "/contact" }}
+      />
+
+      <main className="flex-1 flex items-center justify-center p-4 relative z-10">
+        <Card className="w-full max-w-md 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>
+      </main>
+
+      <div className="relative z-10">
+        <FooterMinimal 
+          brand="Future Frame" 
+          copyright="© 2024 Future Frame Inc. All rights reserved."
+        />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index 362ecb5..f0699f9 100644
--- a/src/routes.ts
+++ b/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' },
 ];
-- 
2.49.1


From 754a7c8f290a16ae0a46e802a84328d4ea906c56 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 15 Jun 2026 09:24:26 +0000
Subject: [PATCH 2/2] Bob AI: Populate the newly-created page at
 src/pages/AuthPage.tsx wi

---
 src/pages/AuthPage.tsx | 26 ++++----------------------
 1 file changed, 4 insertions(+), 22 deletions(-)

diff --git a/src/pages/AuthPage.tsx b/src/pages/AuthPage.tsx
index ecd9912..0995bf7 100644
--- a/src/pages/AuthPage.tsx
+++ b/src/pages/AuthPage.tsx
@@ -1,6 +1,4 @@
 import React, { useState } from "react";
-import { routes } from "@/routes";
-import NavbarCentered from "@/components/ui/NavbarCentered";
 import RadialGradientBackground from "@/components/ui/RadialGradientBackground";
 import Card from "@/components/ui/Card";
 import Input from "@/components/ui/Input";
@@ -8,7 +6,6 @@ import Button from "@/components/ui/Button";
 import Separator from "@/components/ui/Separator";
 import SelectorButton from "@/components/ui/SelectorButton";
 import TextLink from "@/components/ui/TextLink";
-import FooterMinimal from "@/components/sections/footer/FooterMinimal";
 
 export default function AuthPage() {
   const [step, setStep] = useState<"initial" | "verify">("initial");
@@ -16,17 +13,11 @@ export default function AuthPage() {
   const [authMode, setAuthMode] = useState<"login" | "signup">("signup");
 
   return (
-    <div className="min-h-screen bg-background flex flex-col relative overflow-hidden">
+    <div className="min-h-svh bg-background flex flex-col relative overflow-hidden">
       <RadialGradientBackground position="fixed" />
       
-      <NavbarCentered
-        logo="Future Frame"
-        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "Contact Sales", href: "/contact" }}
-      />
-
-      <main className="flex-1 flex items-center justify-center p-4 relative z-10">
-        <Card className="w-full max-w-md p-8 flex flex-col gap-6 bg-card/80 backdrop-blur-xl border-border shadow-2xl">
+      <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">
@@ -81,9 +72,7 @@ export default function AuthPage() {
               </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"} 
+                {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"
                 />
@@ -124,13 +113,6 @@ export default function AuthPage() {
             </>
           )}
         </Card>
-      </main>
-
-      <div className="relative z-10">
-        <FooterMinimal 
-          brand="Future Frame" 
-          copyright="© 2024 Future Frame Inc. All rights reserved."
-        />
       </div>
     </div>
   );
-- 
2.49.1