[rewrite] Added first steps for authentication

frontend/src/pages/home/index.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Label } from "@/components/ui/label";
+
+export default function MainPage() {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [username, setUsername] = useState("");
+
+	return (
+		<div className="flex min-h-screen flex-col items-center justify-center bg-gray-100 p-6">
+			{/* Showcase Section */}
+			<section className="mb-8 w-full max-w-4xl text-center">
+				<h1 className="mb-4 text-4xl font-bold">Welcome to Our Platform</h1>
+				<p className="mb-6 text-gray-600">
+					A place where you can explore, connect, and engage. Sign up or log in
+					to get started.
+				</p>
+				<Button className="px-6 py-2">Learn More</Button>
+			</section>
+
+			{/* Authentication Section */}
+			<Card className="w-full max-w-md">
+				<CardHeader>
+					<CardTitle>Join Us</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<Tabs defaultValue="login" className="w-full">
+						<TabsList className="grid w-full grid-cols-2">
+							<TabsTrigger value="login">Login</TabsTrigger>
+							<TabsTrigger value="register">Register</TabsTrigger>
+						</TabsList>
+
+						{/* Login Tab */}
+						<TabsContent value="login">
+							<form className="space-y-4">
+								<div>
+									<Label>Email</Label>
+									<Input
+										type="email"
+										value={email}
+										onChange={(e) => setEmail(e.target.value)}
+										placeholder="Enter your email"
+									/>
+								</div>
+								<div>
+									<Label>Password</Label>
+									<Input
+										type="password"
+										value={password}
+										onChange={(e) => setPassword(e.target.value)}
+										placeholder="Enter your password"
+									/>
+								</div>
+								<Button className="w-full">Login</Button>
+							</form>
+						</TabsContent>
+
+						{/* Register Tab */}
+						<TabsContent value="register">
+							<form className="space-y-4">
+								<div>
+									<Label>Username</Label>
+									<Input
+										type="text"
+										value={username}
+										onChange={(e) => setUsername(e.target.value)}
+										placeholder="Choose a username"
+									/>
+								</div>
+								<div>
+									<Label>Email</Label>
+									<Input
+										type="email"
+										value={email}
+										onChange={(e) => setEmail(e.target.value)}
+										placeholder="Enter your email"
+									/>
+								</div>
+								<div>
+									<Label>Password</Label>
+									<Input
+										type="password"
+										value={password}
+										onChange={(e) => setPassword(e.target.value)}
+										placeholder="Create a password"
+									/>
+								</div>
+								<Button className="w-full">Register</Button>
+							</form>
+						</TabsContent>
+					</Tabs>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}