feat: basic setup for web with tailwind and routing

web/src/pages/Login/index.tsx

@@ -0,0 +1,72 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Mail, Lock, LogIn } from "lucide-react";
+import { Link } from "react-router-dom";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import overlay from "@/assets/overlay.jpg";
+
+export default function LoginPage() {
+  return (
+    <div
+      className="relative min-h-screen bg-cover bg-center"
+      style={{ backgroundImage: overlay }}
+    >
+      <div className="absolute inset-0 bg-black bg-opacity-60"></div>
+
+      <div className="relative z-10 flex items-center justify-center min-h-screen p-4">
+        <Card className="w-full max-w-md sm:max-w-full sm:h-full sm:rounded-none p-6 shadow-lg bg-white/90 backdrop-blur-md">
+          <div className="flex flex-col items-center">
+            <LogIn className="w-8 h-8 text-gray-700 mb-4" />
+            <h2 className="text-2xl font-bold mb-6 text-gray-800">Login</h2>
+
+            <CardContent className="w-full space-y-4">
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Email
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="you@example.com"
+                    className="pl-10"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label
+                  htmlFor="password"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Password
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                  <Input
+                    id="password"
+                    type="password"
+                    placeholder="••••••••"
+                    className="pl-10"
+                  />
+                </div>
+              </div>
+
+              <Button className="w-full mt-2">Log In</Button>
+              <div className="text-sm text-center text-gray-600">
+                Don’t have an account?{" "}
+                <Link to="/register" className="text-blue-600 hover:underline">
+                  Register
+                </Link>
+              </div>
+            </CardContent>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}