Added Home Page Content and Mock Grid

js/index.html

@@ -16,6 +16,9 @@
       content="PatChats - Patina Network monthly networking program."
     />
     <meta name="author" content="Patina Network" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet" />
     <meta
       name="keywords"
       content="patina, patchat, patchats, patina patchats, patchats patina"

js/src/app/layouts/PublicLayout.tsx

@@ -1,5 +1,5 @@
 import { PublicNavbar } from "@/app/layouts/PublicNavbar";
-import { AppShell, Container } from "@mantine/core";
+import { AppShell } from "@mantine/core";
 import { Outlet } from "react-router-dom";
 
 /** Chrome for public (unauthenticated) pages, e.g. landing and login. */
@@ -12,9 +12,7 @@ export function PublicLayout() {
         <PublicNavbar />
       </AppShell.Header>
       <AppShell.Main>
-        <Container py="xl" size="sm">
-          <Outlet />
-        </Container>
+        <Outlet />
       </AppShell.Main>
     </AppShell>
   );

js/src/features/home/Home.page.tsx

@@ -1,20 +1,63 @@
-import { Anchor, Stack, Text, Title } from "@mantine/core";
-import { Link } from "react-router-dom";
+import { Flex, List, Mark, Stack, Text } from "@mantine/core";
 
 /** Public landing page. */
 export default function HomePage() {
   return (
-    <Stack>
-      <Title order={1}>PatChats</Title>
-      <Text>
-        Monthly one-on-one coffee chat pairings for the Patina Network.
-      </Text>
-      <Anchor component={Link} to="/sign-up">
-        Complete the signup form
-      </Anchor>
-      <Anchor component={Link} to="/sample">
-        Go to the app
-      </Anchor>
-    </Stack>
+    <Flex
+      gap="xl"
+      align="stretch"
+      py="xl"
+      style={{ paddingLeft: 250, paddingRight: 150 }}
+    >
+      <Stack style={{ width: 400, flexShrink: 0 }}>
+        <Text size="28px" lh={1.25}>
+          PatChats is a program where every month you will get matched with
+          another Patina member and have a 30 minute video call or coffee chat!
+        </Text>
+        <List spacing="md" style={{ fontSize: "16px", lineHeight: 1.25 }}>
+          <List.Item>
+            At the end, share your socials and take a fun selfie or screenshot
+            to share on the <Mark color="patina">#pat-chats</Mark> channel on
+            our Discord!
+          </List.Item>
+          <List.Item>
+            Connect with other members within the Patina network to learn more
+            about each other and share our diverse backgrounds, professional
+            journeys, and career insights.
+          </List.Item>
+          <List.Item>
+            Our goal is to foster a more positive, tight-knit community where we
+            can support one another in reaching our life and career aspirations
+            and have some fun while we&apos;re at it!
+          </List.Item>
+        </List>
+      </Stack>
+      <div
+        style={{
+          flex: 1,
+          display: "grid",
+          gridTemplateColumns: "repeat(4, 1fr)",
+          gridTemplateRows: "repeat(4, 1fr)",
+          gap: "8px",
+          paddingLeft: 32,
+          minHeight: 0,
+        }}
+      >
+        <div
+          style={{ gridArea: "span 2 / span 2", border: "1px solid gray" }}
+        />
+        <div style={{ border: "1px solid gray" }} />
+        <div style={{ gridColumn: "4", border: "1px solid gray" }} />
+        <div style={{ border: "1px solid gray" }} />
+        <div style={{ border: "1px solid gray" }} />
+        <div style={{ border: "1px solid gray" }} />
+        <div style={{ border: "1px solid gray" }} />
+        <div
+          style={{ gridArea: "span 2 / span 2", border: "1px solid gray" }}
+        />
+        <div style={{ gridColumn: "1", border: "1px solid gray" }} />
+        <div style={{ gridColumn: "2", border: "1px solid gray" }} />
+      </div>
+    </Flex>
   );
 }

js/src/features/sign-up/SignUp.page.tsx

@@ -1,13 +1,15 @@
 import { IntroText } from "@/features/sign-up/components/IntroText";
 import { SignUpForm } from "@/features/sign-up/components/SignUpForm";
-import { Stack, Title } from "@mantine/core";
+import { Container, Stack, Title } from "@mantine/core";
 
 export function SignUpPage() {
   return (
-    <Stack gap="xl">
-      <Title order={2}>PatChats Sign Up Form</Title>
-      <IntroText />
-      <SignUpForm />
-    </Stack>
+    <Container py="xl" size="sm">
+      <Stack gap="xl">
+        <Title order={2}>PatChats Sign Up Form</Title>
+        <IntroText />
+        <SignUpForm />
+      </Stack>
+    </Container>
   );
 }

js/src/features/sign-up/components/IntroText.tsx

@@ -4,22 +4,6 @@ export function IntroText() {
   return (
     <>
       <Text size="lg">
-        Hi everyone! Would you like to get to know other members of the Patina
-        community better?
-        <br />
-        <br />
-        PatChats is a program where every month you will get matched with
-        another Patina member, and find a time between the two of you to have a
-        30 minute video call or coffee chat! At the end, share your socials and
-        take a fun selfie or screenshot to share on the #pat-chats channel on
-        our Discord! <br />
-        <br />
-        Connect with other members within the Patina network to learn more about
-        each other and share our diverse backgrounds, professional journeys, and
-        career insights. Our goal is to foster a more positive, tight-knit
-        community where we can support one another in reaching our life and
-        career aspirations and have some fun while we're at it! <br />
-        <br />
         Sign up here to be included in next month's cycle. We currently have 80
         people signed up and looking to keep it growing!
       </Text>