add in account instructions component

Author: ItsEricSun

apps/frontend/src/app.tsx

@@ -11,6 +11,8 @@ import { AuthProvider } from '@components/AuthProvider';
 import { ProtectedRoute } from '@components/ProtectedRoute';
 import { AdminRoute } from '@components/AdminRoute';
 import { LoginPage } from '@containers/auth/LoginPage';
+import { Modal1Page } from '@containers/auth/Modal1Page';
+import { Modal2Page } from '@containers/auth/Modal2Page';
 import { DashboardPage } from '@containers/dashboard/DashboardPage';
 import { DonorStatsChart } from '@components/DonorStatsChart';
 
@@ -24,6 +26,14 @@ const router = createBrowserRouter([
     path: '/login',
     element: <LoginPage />,
   },
+  {
+    path: '/modal1',
+    element: <Modal1Page />,
+  },
+  {
+    path: '/modal2',
+    element: <Modal2Page />,
+  },
   {
     path: '/dashboard',
     element: <ProtectedRoute />,

apps/frontend/src/assets/fcc-logo.png

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Card, CardContent } from '../ui/card';
+import { Button } from '../ui/button';
+import fccLogo from '../../assets/fcc-logo.png';
+
+interface HeaderDetailModalProps {
+  heading: string;
+  details: string;
+  onSignInClick?: () => void;
+}
+
+export const HeaderDetailModal: React.FC<HeaderDetailModalProps> = ({
+  heading,
+  details,
+  onSignInClick,
+}) => {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <Card className="w-full max-w-[420px] bg-white shadow-2xl ring-0 rounded-[30px] px-5">
+        <CardContent className="flex flex-col items-center gap-3 py-24 px-8 text-center">
+          <img src={fccLogo} alt="FCC logo" className="w-[145px] h-[145px]" />
+          <h1 className="text-2xl font-semibold text-[#0c7962]">{heading}</h1>
+          <p className="w-full text-base text-neutral-500 text-left whitespace-pre-line leading-tight">
+            {details}
+          </p>
+          <Button
+            variant="success"
+            onClick={onSignInClick}
+            className="w-full h-12 text-base rounded-[50px] mt-5"
+          >
+            Sign in
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

apps/frontend/src/assets/green-boston-background.png

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { HeaderDetailModal } from '@components/HeaderDetailModal/HeaderDetailModal';
+import bostonBg from '../../assets/green-boston-background.png';
+
+export const Modal1Page: React.FC = () => {
+  const navigate = useNavigate();
+
+  const handleSignIn = () => {
+    navigate('/');
+  };
+
+  return (
+    <div
+      className="relative min-h-screen w-full bg-cover bg-center bg-no-repeat"
+      style={{ backgroundImage: `url(${bostonBg})` }}
+    >
+      <HeaderDetailModal
+        heading="Check your email"
+        details="Instructions have been sent to your inbox."
+        onSignInClick={handleSignIn}
+      />
+    </div>
+  );
+};

apps/frontend/src/components/HeaderDetailModal/HeaderDetailModal.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { HeaderDetailModal } from '@components/HeaderDetailModal/HeaderDetailModal';
+import bostonBg from '../../assets/green-boston-background.png';
+
+export const Modal2Page: React.FC = () => {
+  const navigate = useNavigate();
+
+  const handleSignIn = () => {
+    navigate('/');
+  };
+
+  return (
+    <div
+      className="relative min-h-screen w-full bg-cover bg-center bg-no-repeat"
+      style={{ backgroundImage: `url(${bostonBg})` }}
+    >
+      <HeaderDetailModal
+        heading="Welcome!"
+        details={
+          'Your account has been successfully created.\n\nPlease wait for confirmation that your account has been verified by an admin.'
+        }
+        onSignInClick={handleSignIn}
+      />
+    </div>
+  );
+};