feat: start agreement page

web/src/App.tsx

@@ -12,6 +12,10 @@ const router = createBrowserRouter([
     path: "/",
     element: <IndexPage />,
   },
+  {
+    path: "/agreement",
+    element: <IndexPage />,
+  },
   {
     path: "/login",
     element: <LoginPage />,

web/src/pages/Agreement/index.tsx

@@ -0,0 +1,45 @@
+import { type FC } from "react";
+
+import overlay from "@/assets/overlay.jpg";
+import { Card, CardContent } from "@/components/ui/card";
+import AccountList from "@/feature/AccountList";
+
+const AgreementPage: FC = () => {
+  return (
+    <div
+      className="relative min-h-screen bg-cover bg-center bg-white"
+      style={{ backgroundImage: `url(${overlay})` }}
+    >
+      <div className="relative z-10 flex items-center justify-center min-h-screen">
+        <Card className="sm:w-[700px] sm:min-w-[700px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/90 backdrop-blur-md">
+          <div className="flex sm:flex-row flex-col sm:items-start items-center pt-16 sm:pt-0">
+            <div className="flex flex-col items-center flex-5/6">
+              <img
+                src="/icon.png"
+                alt="icon"
+                className="w-16 h-16 mb-4 mt-2 sm:mt-6"
+              />
+
+              <div className="px-4 sm:mt-4 mt-8">
+                <h2 className="text-2xl font-bold text-gray-800 text-left w-full">
+                  Select Account
+                </h2>
+                <h4 className="text-base mb-3 text-gray-400 text-left">
+                  Choose one of the accounts below in order to proceed to home
+                  lab services and tools.
+                </h4>
+              </div>
+            </div>
+
+            {/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
+            <CardContent className="w-full space-y-4">
+              <AccountList />
+            </CardContent>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default AgreementPage;