feat: implement web auth flow UI and interactions

web/next-env.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
 
-// This file is automatically used by Next.js
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

web/src/app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,13 @@
+import { AuthLayout } from "@/components/layout/AuthLayout";
+import { ForgotPasswordForm } from "@/components/feature/auth/ForgotPasswordForm";
+
+export default function ForgotPasswordPage() {
+    return (
+        <AuthLayout
+            title="Forgot Password"
+            subtitle="Enter your email address and we will send you a reset link."
+        >
+            <ForgotPasswordForm />
+        </AuthLayout>
+    );
+}

web/src/app/(auth)/login/page.tsx

@@ -0,0 +1,13 @@
+    import { AuthLayout } from "@/components/layout/AuthLayout";
+import { LoginForm } from "@/components/feature/auth/LoginForm";
+
+export default function LoginPage() {
+    return (
+        <AuthLayout
+            title="Log In"
+            subtitle="Access your NEPH account to manage your emergency information."
+        >
+            <LoginForm />
+        </AuthLayout>
+    );
+}

web/src/app/(auth)/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { AuthLayout } from "@/components/layout/AuthLayout";
+import { PrimaryButton } from "@/components/ui/buttons/PrimaryButton";
+import { SecondaryButton } from "@/components/ui/buttons/SecondaryButton";
+import { HelperText } from "@/components/ui/display/HelperText";
+
+export default function WelcomePage() {
+    const router = useRouter();
+    const [guestInfo, setGuestInfo] = React.useState("");
+
+    const handleGuestMode = () => {
+        setGuestInfo(
+            "Guest mode will be available in a later version. Please log in or create an account for now."
+        );
+    };
+
+    return (
+        <AuthLayout
+            title="Welcome"
+            subtitle="Prepare, connect, and stay ready with your neighborhood emergency hub."
+        >
+            <div className="flex flex-col gap-3">
+                <PrimaryButton
+                    onClick={() => {
+                        setGuestInfo("");
+                        router.push("/login");
+                    }}
+                >
+                    Log In
+                </PrimaryButton>
+
+                <SecondaryButton
+                    onClick={() => {
+                        setGuestInfo("");
+                        router.push("/signup");
+                    }}
+                >
+                    Create Account
+                </SecondaryButton>
+
+                <button
+                    type="button"
+                    onClick={handleGuestMode}
+                    className="rounded-[10px] border border-dashed border-[#E7E7EA] px-4 py-3 text-sm font-medium text-[#737380] transition-colors hover:bg-white"
+                >
+                    Continue as Guest
+                </button>
+            </div>
+
+            <div className="mt-5 text-center">
+                <HelperText>
+                    {guestInfo ||
+                        "Guest mode is currently a placeholder in this MVP."}
+                </HelperText>
+            </div>
+        </AuthLayout>
+    );
+}

web/src/app/(auth)/signup/page.tsx

@@ -0,0 +1,13 @@
+import { AuthLayout } from "@/components/layout/AuthLayout";
+import { SignupForm } from "@/components/feature/auth/SignupForm";
+
+export default function SignupPage() {
+    return (
+        <AuthLayout
+            title="Create Account"
+            subtitle="Set up your account and get ready before emergencies happen."
+        >
+            <SignupForm />
+        </AuthLayout>
+    );
+}

web/src/app/(auth)/verify-email/page.tsx

@@ -0,0 +1,13 @@
+import { AuthLayout } from "@/components/layout/AuthLayout";
+import { VerifyEmailForm } from "@/components/feature/auth/VerifyEmailForm";
+
+export default function VerifyEmailPage() {
+    return (
+        <AuthLayout
+            title="Verify Email"
+            subtitle="Enter the 6-digit verification code sent to your email address."
+        >
+            <VerifyEmailForm />
+        </AuthLayout>
+    );
+}

web/src/app/privacy-policy/page.tsx

@@ -0,0 +1,79 @@
+import Link from "next/link";
+import { PageContainer } from "@/components/layout/PageContainer";
+import { SectionCard } from "@/components/ui/display/SectionCard";
+import { SectionHeader } from "@/components/ui/display/SectionHeader";
+
+export default function PrivacyPolicyPage() {
+    return (
+        <div className="min-h-screen bg-[#F8F8F9] py-10">
+            <PageContainer>
+                <div className="mx-auto max-w-3xl">
+                    <Link
+                        href="/signup"
+                        className="text-sm font-medium text-[#D84A4A] hover:underline"
+                    >
+                        ← Back to Sign Up
+                    </Link>
+
+                    <SectionCard className="mt-4">
+                        <SectionHeader
+                            title="Privacy Policy"
+                            subtitle="Last updated: March 2026"
+                        />
+
+                        <div className="space-y-5 text-sm leading-7 text-[#2B2B33]">
+                            <p>
+                                This page is a placeholder Privacy Policy for the NEPH MVP.
+                                It describes how user-provided information may be handled
+                                within the project’s early development scope.
+                            </p>
+
+                            <div>
+                                <h3 className="text-base font-semibold">
+                                    1. Information collected
+                                </h3>
+                                <p className="mt-2">
+                                    NEPH may collect information such as name, email,
+                                    phone number, and emergency-related profile details
+                                    entered by the user.
+                                </p>
+                            </div>
+
+                            <div>
+                                <h3 className="text-base font-semibold">
+                                    2. Purpose of use
+                                </h3>
+                                <p className="mt-2">
+                                    This information is used to support account creation,
+                                    emergency preparedness features, and user coordination
+                                    flows within the MVP.
+                                </p>
+                            </div>
+
+                            <div>
+                                <h3 className="text-base font-semibold">
+                                    3. Data protection
+                                </h3>
+                                <p className="mt-2">
+                                    As an academic MVP, NEPH is still under development.
+                                    Full production-grade privacy safeguards may not yet be
+                                    fully implemented.
+                                </p>
+                            </div>
+
+                            <div>
+                                <h3 className="text-base font-semibold">
+                                    4. Policy updates
+                                </h3>
+                                <p className="mt-2">
+                                    This privacy policy may be updated in later project
+                                    phases as the platform and backend capabilities evolve.
+                                </p>
+                            </div>
+                        </div>
+                    </SectionCard>
+                </div>
+            </PageContainer>
+        </div>
+    );
+}

web/src/app/terms-of-service/page.tsx

@@ -0,0 +1,79 @@
+import Link from "next/link";
+import { PageContainer } from "@/components/layout/PageContainer";
+import { SectionCard } from "@/components/ui/display/SectionCard";
+import { SectionHeader } from "@/components/ui/display/SectionHeader";
+
+export default function TermsOfServicePage() {
+    return (
+        <div className="min-h-screen bg-[#F8F8F9] py-10">
+            <PageContainer>
+                <div className="mx-auto max-w-3xl">
+                    <Link
+                        href="/signup"
+                        className="text-sm font-medium text-[#D84A4A] hover:underline"
+                    >
+                        ← Back to Sign Up
+                    </Link>
+
+                    <SectionCard className="mt-4">
+                        <SectionHeader
+                            title="Terms of Service"
+                            subtitle="Last updated: March 2026"
+                        />
+
+                        <div className="space-y-5 text-sm leading-7 text-[#2B2B33]">
+                            <p>
+                                This page is a placeholder Terms of Service for the
+                                NEPH MVP. It explains the general expectations for using
+                                the platform during the early development phase.
+                            </p>
+
+                            <div>
+                                <h3 className="text-base font-semibold">
+                                    1. Use of the platform
+                                </h3>
+                                <p className="mt-2">
+                                    NEPH is intended to support emergency preparedness and
+                                    neighborhood coordination. Users should provide
+                                    accurate information and use the platform responsibly.
+                                </p>
+                            </div>
+
+                            <div>
+                                <h3 className="text-base font-semibold">
+                                    2. Account responsibility
+                                </h3>
+                                <p className="mt-2">
+                                    Users are responsible for maintaining the accuracy of
+                                    their account information and keeping their credentials
+                                    secure.
+                                </p>
+                            </div>
+
+                            <div>
+                                <h3 className="text-base font-semibold">
+                                    3. Platform limitations
+                                </h3>
+                                <p className="mt-2">
+                                    NEPH is an academic MVP and may not include full
+                                    production-grade guarantees, legal protections, or
+                                    emergency service integration at this stage.
+                                </p>
+                            </div>
+
+                            <div>
+                                <h3 className="text-base font-semibold">
+                                    4. Future updates
+                                </h3>
+                                <p className="mt-2">
+                                    These terms may be revised as the project evolves and
+                                    more complete platform policies are defined.
+                                </p>
+                            </div>
+                        </div>
+                    </SectionCard>
+                </div>
+            </PageContainer>
+        </div>
+    );
+}

web/src/components/feature/auth/AuthFooterLinks.tsx

@@ -0,0 +1,54 @@
+import Link from "next/link";
+import { HelperText } from "@/components/ui/display/HelperText";
+
+type AuthFooterLinksProps = {
+    mode: "login" | "signup" | "verify-email";
+};
+
+export function AuthFooterLinks({ mode }: AuthFooterLinksProps) {
+    if (mode === "login") {
+        return (
+            <div className="text-center">
+                <HelperText className="leading-6">
+                    Don&apos;t have an account?{" "}
+                    <Link
+                        href="/signup"
+                        className="font-semibold text-[#D84A4A] hover:underline"
+                    >
+                        Create one
+                    </Link>
+                </HelperText>
+            </div>
+        );
+    }
+
+    if (mode === "signup") {
+        return (
+            <div className="text-center">
+                <HelperText className="leading-6">
+                    Already have an account?{" "}
+                    <Link
+                        href="/login"
+                        className="font-semibold text-[#D84A4A] hover:underline"
+                    >
+                        Log in
+                    </Link>
+                </HelperText>
+            </div>
+        );
+    }
+
+return (
+    <div className="text-center">
+        <HelperText className="leading-6">
+            Wrong email address?{" "}
+            <Link
+                href="/signup?restore=1"
+                className="font-semibold text-[#D84A4A] hover:underline"
+            >
+                Go back
+            </Link>
+        </HelperText>
+    </div>
+);
+}