feat: add footer to LandingPage

Nerdware-LLC · Mar 14, 2024 · 8673ac4 · 8673ac4
1 parent 365d14a
commit 8673ac4
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
@@ -6,6 +6,7 @@ import Text, { typographyClasses } from "@mui/material/Typography";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { THEMES } from "@/app/ThemeProvider/themes";
 import { PhoneShapedContainer, containerClassNames } from "@/components/Containers";
+import { LegalLinks } from "@/components/Navigation/LegalLinks";
 import { NON_BREAKING_SPACE_CHAR } from "@/components/Text";
 import demoDesktopDashboardImageSrc from "@/images/demo_desktop_dashboard.webp";
 import demoDesktopDataGridImageSrc from "@/images/demo_desktop_workorders_datagrid.webp";
@@ -70,6 +71,10 @@ export const LandingPage = () => {
         </Text>
         <Button onClick={goToProducts}>Learn More</Button>
       </div>
+      <div className={landingPageClassNames.footerRoot}>
+        <LegalLinks useLongLabels />
+        <Text variant="body2">Fixit is a product of Nerdware, LLC ©</Text>
+      </div>
     </StyledDiv>
   );
 };
@@ -89,13 +94,13 @@ const StyledDiv = styled("div")(({ theme: { palette, variables, breakpoints } })
   gap: "1rem",
   padding: "0 2rem 3rem 2rem",
 
-  gridTemplateRows: "66vh minmax(0, 66vh) minmax(0, 66vh) minmax(0, 66vh)",
+  gridTemplateRows: "66vh minmax(0, 66vh) minmax(0, 66vh) minmax(0, 66vh) 8rem",
   gridTemplateColumns: "minmax(0, 1fr)",
 
   [breakpoints.up(600)]: {
     padding: "2rem",
     gap: "2rem",
-    gridTemplateRows: "repeat(auto-fit, 75vh)",
+    gridTemplateRows: "repeat(2, 75vh) 9rem",
     gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
   },
 
@@ -255,4 +260,36 @@ const StyledDiv = styled("div")(({ theme: { palette, variables, breakpoints } })
     objectFit: "contain",
     ...(palette.mode === "light" && { filter: "invert(25%) brightness(3)" }),
   },
+
+  // FOOTER
+  [`& > .${landingPageClassNames.footerRoot}`]: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: "100vw",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "1.5rem",
+    padding: "2rem",
+    borderTop: `1px solid ${palette.divider}`,
+    boxShadow: `0 0 0.5rem ${palette.divider}`,
+
+    [breakpoints.down(600)]: {
+      padding: "1.25rem 1.5rem 1.5rem 1.5rem",
+      flexDirection: "row",
+      justifyContent: "space-evenly",
+      gap: 0,
+      textAlign: "center",
+      "& > div": {
+        flexDirection: "column",
+        alignItems: "flex-start",
+        "& > hr": {
+          display: "none",
+        },
+      },
+    },
+  },
 }));
diff --git a/src/pages/LandingPage/classNames.ts b/src/pages/LandingPage/classNames.ts
@@ -4,4 +4,5 @@
 export const landingPageClassNames = {
   textContainer: "landing-page__text-container",
   graphicsContainer: "landing-page__graphics-container",
+  footerRoot: "landing-page__footer-root",
 } as const;