feat/chore: add setup and 2 stages (dmy, no logic, wip), bump

package.json

@@ -16,21 +16,21 @@
     "lucide-react": "^0.503.0",
     "next": "15.3.0",
     "next-themes": "^0.4.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "tailwind-merge": "^3.2.0",
     "tw-animate-css": "^1.2.8"
   },
   "devDependencies": {
-    "typescript": "^5",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
-    "eslint": "^9",
+    "typescript": "^5.8.3",
+    "@types/node": "^20.17.30",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@tailwindcss/postcss": "^4.1.4",
+    "tailwindcss": "^4.1.4",
+    "eslint": "^9.25.1",
     "eslint-config-next": "15.3.0",
-    "@eslint/eslintrc": "^3"
+    "@eslint/eslintrc": "^3.3.1"
   },
   "trustedDependencies": [
     "unrs-resolver"

src/app/setup/page.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import { useState } from "react"
+import StageOne from "@/components/setup/StageOne"
+import StageTwo from "@/components/setup/StageTwo"
+
+export default function Home() {
+  const [stage, setStage] = useState(1)
+
+  return (
+    <div className="flex flex-col items-center justify-center h-screen">
+      {stage === 1 && <StageOne setStage={setStage} />}
+      {stage === 2 && <StageTwo setStage={setStage} />}
+    </div>
+  )
+}

src/components/setup/StageOne.tsx

@@ -0,0 +1,36 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Key, Mail } from "lucide-react"
+
+interface StageOneProps {
+  setStage: (stage: number) => void
+}
+
+export default function Home({ setStage }: StageOneProps) {
+  return (
+    <Card className="w-96">
+      <CardHeader>
+        <div className="flex flex-col items-center justify-center gap-2">
+          <CardTitle className="flex items-center justify-center text-3xl font-bold">
+            <div className="flex items-center gap-2">
+              <Mail size={32} />
+              Mailseer
+            </div>
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <h1 className="text-2xl font-bold mb-3">Step One</h1>
+        <p className="text-sm text-muted-foreground">
+          Welcome to Mailseer! This is the first step of the setup process.
+        </p>
+        <p className="text-sm text-muted-foreground mt-4 mb-8">
+          We'll guide you through the installation process from here.
+        </p>
+        <Button className="w-full cursor-pointer" onClick={() => setStage(2)}>
+          Continue
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}

src/components/setup/StageTwo.tsx

@@ -0,0 +1,60 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Key, Mail } from "lucide-react"
+import { Input } from "../ui/input"
+import { Label } from "../ui/label"
+
+interface StageTwoProps {
+  setStage: (stage: number) => void
+}
+
+export default function Home({ setStage }: StageTwoProps) {
+  return (
+    <Card className="w-96">
+      <CardHeader>
+        <div className="flex flex-col items-center justify-center gap-2">
+          <CardTitle className="flex items-center justify-center text-3xl font-bold">
+            <div className="flex items-center gap-2">
+              <Mail size={32} />
+              Mailseer
+            </div>
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <h1 className="text-2xl font-bold mb-3">Step Two</h1>
+        <p className="text-sm text-muted-foreground">
+          Let's setup the first admin account.
+        </p>
+
+        <div className="flex flex-col gap-2 mt-6">
+          <Label className="mb-1">
+            <Mail size={16} />
+            Email
+          </Label>
+          <Input type="email" placeholder="Email" />
+        </div>
+
+        <div className="flex flex-col gap-2 mt-4">
+          <Label className="mb-1">
+            <Key size={16} />
+            Password
+          </Label>
+          <Input type="password" placeholder="Password" />
+        </div>
+
+        <div className="flex flex-col gap-2 mt-4 mb-8">
+          <Label className="mb-1">
+            <Key size={16} />
+            Confirm Password
+          </Label>
+          <Input type="password" placeholder="Confirm Password" />
+        </div>
+
+        <Button className="w-full cursor-pointer" onClick={() => setStage(3)}>
+          Continue
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}