From bc56296f1d4457446eb92ab836515db2f0eb18e0 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 22 Jun 2026 07:36:17 +0000
Subject: [PATCH 1/2] Bob AI: Add register page

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

diff --git a/src/App.tsx b/src/App.tsx
index 33d15f9..26dd1aa 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 RegisterPage from "@/pages/RegisterPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/register" element={<RegisterPage />} />
       </Route>
     </Routes>
   );
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 68475b0..b0e6dc9 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -27,7 +27,9 @@ export default function Layout() {
   },
   {
     "name": "Testimonials",    "href": "#testimonials"
-  }
+  },
+  { name: "Register", href: "/register" },
+
 ];
 
   return (
diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
new file mode 100644
index 0000000..786e892
--- /dev/null
+++ b/src/pages/RegisterPage.tsx
@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import Input from "@/components/ui/Input";
+import Label from "@/components/ui/Label";
+import Button from "@/components/ui/Button";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function RegisterPage() {
+  const [step, setStep] = useState(1);
+  const [formData, setFormData] = useState({
+    companyName: "",
+    email: "",
+    password: "",
+    theme: "light",
+  });
+
+  const handleNext = () => setStep((s) => Math.min(s + 1, 3));
+  const handlePrev = () => setStep((s) => Math.max(s - 1, 1));
+  const handleSubmit = () => {
+    console.log("Firebase Registration Data:", formData);
+    alert("登録が完了しました！ (Registration Complete)");
+  };
+
+  return (
+    <div className="min-h-screen bg-background text-foreground flex flex-col">
+      <NavbarCentered
+        logo="蟹江電機"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "ログイン", href: "/login" }}
+      />
+
+      <main className="flex-grow flex items-center justify-center p-6">
+        <div className="w-full max-w-md bg-card text-card-foreground p-8 rounded-xl border border-border shadow-sm">
+          <h1 className="text-2xl font-bold mb-6 text-center">新規アカウント登録</h1>
+
+          <div className="flex justify-between mb-8 gap-2">
+            {[1, 2, 3].map((i) => (
+              <div
+                key={i}
+                className={`flex-1 h-2 rounded-full transition-colors ${
+                  step >= i ? "bg-primary-cta" : "bg-muted"
+                }`}
+              />
+            ))}
+          </div>
+
+          {step === 1 && (
+            <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4">
+              <h2 className="text-lg font-semibold mb-4">ステップ 1: 企業情報 (テナント)</h2>
+              <div>
+                <Label className="mb-2 block">企業名</Label>
+                <Input
+                  value={formData.companyName}
+                  onChange={(e) => setFormData({ ...formData, companyName: e.target.value })}
+                  placeholder="株式会社蟹江電機"
+                />
+              </div>
+              <div className="pt-4">
+                <Button text="次へ" onClick={handleNext} className="w-full justify-center" />
+              </div>
+            </div>
+          )}
+
+          {step === 2 && (
+            <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4">
+              <h2 className="text-lg font-semibold mb-4">ステップ 2: 管理者情報</h2>
+              <div>
+                <Label className="mb-2 block">メールアドレス</Label>
+                <Input
+                  type="email"
+                  value={formData.email}
+                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                  placeholder="admin@example.com"
+                />
+              </div>
+              <div>
+                <Label className="mb-2 block">パスワード</Label>
+                <Input
+                  type="password"
+                  value={formData.password}
+                  onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                  placeholder="••••••••"
+                />
+              </div>
+              <div className="pt-4 flex gap-4">
+                <Button text="戻る" variant="secondary" onClick={handlePrev} className="w-1/2 justify-center" />
+                <Button text="次へ" onClick={handleNext} className="w-1/2 justify-center" />
+              </div>
+            </div>
+          )}
+
+          {step === 3 && (
+            <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4">
+              <h2 className="text-lg font-semibold mb-4">ステップ 3: テーマ選択</h2>
+              <div className="grid grid-cols-2 gap-4">
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => setFormData({ ...formData, theme: "light" })}
+                  className={`p-4 border rounded-lg text-center cursor-pointer transition-all ${
+                    formData.theme === "light" ? "border-primary-cta bg-primary-cta/10" : "border-border hover:bg-muted/50"
+                  }`}
+                >
+                  ライトモード
+                </div>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => setFormData({ ...formData, theme: "dark" })}
+                  className={`p-4 border rounded-lg text-center cursor-pointer transition-all ${
+                    formData.theme === "dark" ? "border-primary-cta bg-primary-cta/10" : "border-border hover:bg-muted/50"
+                  }`}
+                >
+                  ダークモード
+                </div>
+              </div>
+              <div className="pt-4 flex gap-4">
+                <Button text="戻る" variant="secondary" onClick={handlePrev} className="w-1/2 justify-center" />
+                <Button text="登録する" onClick={handleSubmit} className="w-1/2 justify-center" />
+              </div>
+            </div>
+          )}
+        </div>
+      </main>
+
+      <FooterSimple
+        brand="蟹江電機"
+        copyright="© 2024 Kanie Electric. All rights reserved."
+        columns={[]}
+        links={[]}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index 362ecb5..558b72e 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: '/register', label: 'Register', pageFile: 'RegisterPage' },
 ];
-- 
2.49.1


From e3b65d566843f53c40361e9b3d77a104412fe1c4 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 22 Jun 2026 07:38:10 +0000
Subject: [PATCH 2/2] Bob AI: Populate the newly-created page at
 src/pages/RegisterPage.ts

---
 src/pages/RegisterPage.tsx | 169 ++++++++++++++++++++++---------------
 1 file changed, 101 insertions(+), 68 deletions(-)

diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
index 786e892..0e4de9a 100644
--- a/src/pages/RegisterPage.tsx
+++ b/src/pages/RegisterPage.tsx
@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 import { routes } from "@/routes";
-import NavbarCentered from "@/components/ui/NavbarCentered";
 import Input from "@/components/ui/Input";
 import Label from "@/components/ui/Label";
 import Button from "@/components/ui/Button";
-import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Check } from "lucide-react";
 
 export default function RegisterPage() {
   const [step, setStep] = useState(1);
@@ -17,54 +16,58 @@ export default function RegisterPage() {
 
   const handleNext = () => setStep((s) => Math.min(s + 1, 3));
   const handlePrev = () => setStep((s) => Math.max(s - 1, 1));
-  const handleSubmit = () => {
-    console.log("Firebase Registration Data:", formData);
-    alert("登録が完了しました！ (Registration Complete)");
+  const handleRegister = () => {
+    console.log("Mock Firebase Submission:"); console.log("-> Writing to 'tenant' collection:", { companyName: formData.companyName, theme: formData.theme }); console.log("-> Writing to 'registration' collection:", { email: formData.email, password: formData.password }); alert("登録が完了しました！ (Registration Complete)");
   };
 
+  const steps = [
+    { id: 1, label: "基本情報" },
+    { id: 2, label: "テーマ選択" },
+    { id: 3, label: "完了" },
+  ];
+
   return (
-    <div className="min-h-screen bg-background text-foreground flex flex-col">
-      <NavbarCentered
-        logo="蟹江電機"
-        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "ログイン", href: "/login" }}
-      />
-
+    <div className="min-h-svh bg-background text-foreground flex flex-col">
       <main className="flex-grow flex items-center justify-center p-6">
-        <div className="w-full max-w-md bg-card text-card-foreground p-8 rounded-xl border border-border shadow-sm">
-          <h1 className="text-2xl font-bold mb-6 text-center">新規アカウント登録</h1>
+        <div className="w-full max-w-content-width bg-card text-foreground p-8 rounded-xl border border-foreground/10 shadow-sm card">
+          <h1 className="text-2xl font-bold text-center">新規アカウント登録</h1>
 
-          <div className="flex justify-between mb-8 gap-2">
-            {[1, 2, 3].map((i) => (
-              <div
-                key={i}
-                className={`flex-1 h-2 rounded-full transition-colors ${
-                  step >= i ? "bg-primary-cta" : "bg-muted"
-                }`}
-              />
+          {/* Stepper UI */}
+          <div className="flex items-center justify-between relative">
+            <div className="absolute left-0 top-5 -translate-y-1/2 w-full h-1 bg-foreground/10 -z-10 rounded-full"></div>
+            <div 
+              className="absolute left-0 top-5 -translate-y-1/2 h-1 bg-primary-cta -z-10 rounded-full transition-all duration-500 ease-in-out"
+              style={{ width: `${((step - 1) / 2) * 100}%` }}
+            ></div>
+            
+            {steps.map((s) => (
+              <div key={s.id} className="flex flex-col items-center gap-3 bg-card px-2">
+                <div
+                  className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold transition-colors duration-300 ${ step >= s.id ?"bg-primary-cta text-primary-cta-text"
+                      : "bg-card text-foreground/50 border-2 border-foreground/10"
+                  }`}
+                >
+                  {step > s.id ? <Check className="w-5 h-5" /> : s.id}
+                </div>
+                <span className={`text-xs font-medium ${step >= s.id ?"text-foreground" : "text-foreground/50"}`}>
+                  {s.label}
+                </span>
+              </div>
             ))}
           </div>
 
+          {/* Step 1: Basic Info */}
           {step === 1 && (
-            <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4">
-              <h2 className="text-lg font-semibold mb-4">ステップ 1: 企業情報 (テナント)</h2>
+            <div className="space-y-5 animate-in fade-in slide-in-from-bottom-4 duration-500">
+              <h2 className="text-lg font-semibold mb-4">ステップ 1: 基本情報</h2>
               <div>
-                <Label className="mb-2 block">企業名</Label>
+                <Label className="mb-2 block">企業名 (テナント)</Label>
                 <Input
                   value={formData.companyName}
                   onChange={(e) => setFormData({ ...formData, companyName: e.target.value })}
                   placeholder="株式会社蟹江電機"
                 />
               </div>
-              <div className="pt-4">
-                <Button text="次へ" onClick={handleNext} className="w-full justify-center" />
-              </div>
-            </div>
-          )}
-
-          {step === 2 && (
-            <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4">
-              <h2 className="text-lg font-semibold mb-4">ステップ 2: 管理者情報</h2>
               <div>
                 <Label className="mb-2 block">メールアドレス</Label>
                 <Input
@@ -83,53 +86,83 @@ export default function RegisterPage() {
                   placeholder="••••••••"
                 />
               </div>
-              <div className="pt-4 flex gap-4">
-                <Button text="戻る" variant="secondary" onClick={handlePrev} className="w-1/2 justify-center" />
-                <Button text="次へ" onClick={handleNext} className="w-1/2 justify-center" />
+              <div className="pt-6">
+                <Button text="次へ" onClick={handleNext} animate={false} className="w-full" />
               </div>
             </div>
           )}
 
-          {step === 3 && (
-            <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4">
-              <h2 className="text-lg font-semibold mb-4">ステップ 3: テーマ選択</h2>
-              <div className="grid grid-cols-2 gap-4">
-                <div
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => setFormData({ ...formData, theme: "light" })}
-                  className={`p-4 border rounded-lg text-center cursor-pointer transition-all ${
-                    formData.theme === "light" ? "border-primary-cta bg-primary-cta/10" : "border-border hover:bg-muted/50"
-                  }`}
-                >
-                  ライトモード
+          {/* Step 2: Theme Selection */}
+          {step === 2 && (
+            <div className="space-y-5 animate-in fade-in slide-in-from-bottom-4 duration-500">
+              <h2 className="text-lg font-semibold mb-4">ステップ 2: テーマ選択</h2>
+              <div className="grid grid-cols-3 gap-4">
+                {["light", "dark", "system"].map((t) => (
+                  <div
+                    key={t}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setFormData({ ...formData, theme: t })}
+                    className={`p-4 border rounded-lg text-center cursor-pointer transition-all ${ formData.theme === t ?"border-primary-cta bg-primary-cta/10 text-primary-cta"
+                        : "border-foreground/10 hover:bg-foreground/5 text-foreground"
+                    }`}
+                  >
+                    <div className="font-medium capitalize">
+                      {t === "light" ? "ライト" : t === "dark" ? "ダーク" : "システム"}
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div className="pt-6 flex gap-4">
+                <div className="w-1/2">
+                  <Button text="戻る" variant="secondary" onClick={handlePrev} animate={false} className="w-full" />
                 </div>
-                <div
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => setFormData({ ...formData, theme: "dark" })}
-                  className={`p-4 border rounded-lg text-center cursor-pointer transition-all ${
-                    formData.theme === "dark" ? "border-primary-cta bg-primary-cta/10" : "border-border hover:bg-muted/50"
-                  }`}
-                >
-                  ダークモード
+                <div className="w-1/2">
+                  <Button text="次へ" onClick={handleNext} animate={false} className="w-full" />
                 </div>
               </div>
-              <div className="pt-4 flex gap-4">
-                <Button text="戻る" variant="secondary" onClick={handlePrev} className="w-1/2 justify-center" />
-                <Button text="登録する" onClick={handleSubmit} className="w-1/2 justify-center" />
+            </div>
+          )}
+
+          {/* Step 3: Complete */}
+          {step === 3 && (
+            <div className="space-y-5 animate-in fade-in slide-in-from-bottom-4 duration-500 text-center">
+              <div className="w-16 h-16 bg-primary-cta/10 text-primary-cta rounded-full flex items-center justify-center mx-auto mb-4">
+                <Check className="w-8 h-8" />
+              </div>
+              <h2 className="text-xl font-semibold mb-2">準備が完了しました</h2>
+              <p className="text-sm text-foreground/60 mb-6">
+                以下の内容でテナントと管理者アカウントを作成します。
+              </p>
+              
+              <div className="bg-foreground/5 p-4 rounded-lg text-left space-y-2 text-sm mb-8 border border-foreground/10">
+                <div className="flex justify-between">
+                  <span className="text-foreground/60">企業名:</span>
+                  <span className="font-medium">{formData.companyName || "未入力"}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-foreground/60">メール:</span>
+                  <span className="font-medium">{formData.email || "未入力"}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-foreground/60">テーマ:</span>
+                  <span className="font-medium capitalize">{formData.theme}</span>
+                </div>
+              </div>
+
+              <div className="pt-2 flex gap-4">
+                <div className="w-1/2">
+                  <Button text="戻る" variant="secondary" onClick={handlePrev} animate={false} className="w-full" />
+                </div>
+                <div className="w-1/2">
+                  <Button text="登録する" onClick={handleRegister} animate={false} className="w-full" />
+                </div>
               </div>
             </div>
           )}
         </div>
       </main>
 
-      <FooterSimple
-        brand="蟹江電機"
-        copyright="© 2024 Kanie Electric. All rights reserved."
-        columns={[]}
-        links={[]}
-      />
     </div>
   );
 }
\ No newline at end of file
-- 
2.49.1