[feat] implements the footer

package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@calblueprint/prettier-config": "^0.0.1",
-    "@hookform/resolvers": "^3.3.4",
+    "@hookform/resolvers": "^3.4.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@supabase/supabase-js": "^2.36.0",
     "@types/node": "20.6.3",
@@ -33,7 +33,7 @@
     "react-select-async-paginate": "^0.7.3",
     "styled-components": "^6.0.8",
     "validator": "^13.11.0",
-    "zod": "^3.22.4"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@calblueprint/eslint-config-react": "^0.0.3",

src/app/onboarding-complete/page.tsx

@@ -7,7 +7,7 @@ import CONFIG from '@/lib/configs';
 import COLORS from '@/styles/colors';
 import { CenteringDiv, Flex, SmallCard } from '@/styles/containers';
 import { H2Centered, P } from '@/styles/text';
-import IJPLogo from '~/public/images/ijp_logo_blue.webp';
+import IJPLogo from '~/public/images/ijp-logo-blue.webp';
 
 export default function Page() {
   return (

src/app/page.tsx

@@ -3,6 +3,7 @@
 import { useMemo } from 'react';
 import Image from 'next/image';
 import { LinkButton } from '@/components/Buttons';
+import Footer from '@/components/Footer';
 import CONFIG from '@/lib/configs';
 import COLORS from '@/styles/colors';
 import { H2, H3, H4 } from '@/styles/text';
@@ -170,6 +171,7 @@ export default function Home() {
           />
         </Styles.ImageWrapper>
       </Styles.MissionValuesContainer>
+      <Footer />
     </Styles.PageContainer>
   );
 }

src/components/Footer/index.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import CONFIG from '@/lib/configs';
+import { IconType } from '@/lib/icons';
+import { Flex } from '@/styles/containers';
+import { P } from '@/styles/text';
+import IJPLogoWhite from '~/public/images/ijp-logo-white.webp';
+import Icon from '../Icon';
+import * as Styles from './styles';
+
+type SocialLink = {
+  href: string;
+  type: IconType;
+};
+
+const socialLinks: SocialLink[] = [
+  { href: CONFIG.facebook, type: 'facebook' },
+  { href: CONFIG.xTwitter, type: 'x' },
+  { href: CONFIG.linkedin, type: 'linkedin' },
+  { href: CONFIG.instagram, type: 'instagram' },
+];
+
+export default function Footer() {
+  return (
+    <Styles.Footer>
+      <Flex $justify="between">
+        <Styles.FooterSection>
+          <Image
+            alt="footer image"
+            src={IJPLogoWhite}
+            placeholder="blur"
+            blurDataURL={IJPLogoWhite.src}
+            quality={100}
+            width={168}
+            height={66}
+          />
+          <Styles.HorizontalLine $width="10rem" />
+
+          <P $color="white">
+            2727 Camino del Rio South, Suite 320 <br /> San Diego, CA 92108
+          </P>
+          <P $color="white">©2024 by ABA Immigration Justice Project</P>
+        </Styles.FooterSection>
+        <Flex $gap="50px" $w="auto">
+          <Styles.FooterSection>
+            <Styles.Header>Resources</Styles.Header>
+            <Styles.HorizontalLine />
+            <Styles.FooterLink $color="white" href={CONFIG.ABA}>
+              ABA Website
+            </Styles.FooterLink>
+            <Styles.FooterLink $color="white" href={CONFIG.ABAComissions}>
+              ABA Commission
+              <br />
+              on Immigration
+            </Styles.FooterLink>
+            <Styles.FooterLink $color="white" href={CONFIG.IJP}>
+              ABA IJP Website
+            </Styles.FooterLink>
+          </Styles.FooterSection>
+          <Styles.FooterSection>
+            <Styles.Header>Contact Us</Styles.Header>
+            <Styles.HorizontalLine />
+            <P $color="white">Email: [email protected]</P>
+            <P $color="white">Phone: (619) 255-8829</P>
+            <P $color="white">Office Phone: (619) 255-8810</P>
+            <Flex $gap="10px">
+              {socialLinks.map(({ href, type }) => (
+                <Link key={type} href={href}>
+                  <Icon type={type} />
+                </Link>
+              ))}
+            </Flex>
+          </Styles.FooterSection>
+        </Flex>
+      </Flex>
+      <Flex $direction="row" $py="40px">
+        <Styles.FooterLink $color="white" href={CONFIG.blueprint}>
+          Made by Cal Blueprint
+          <Icon type="blueprint" />
+        </Styles.FooterLink>
+      </Flex>
+    </Styles.Footer>
+  );
+}

src/components/Footer/styles.tsx

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import COLORS from '@/styles/colors';
+import { sans } from '@/styles/fonts';
+import { LinkColored } from '@/styles/text';
+
+export const Footer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${COLORS.blueMid};
+  min-height: 290px;
+  padding: 40px 100px 0px 100px;
+`;
+
+export const FooterSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const FooterLink = styled(LinkColored)`
+  text-decoration: none;
+  font-size: 0.9375rem;
+  font-weight: 400px;
+  gap: 10px;
+  display: flex;
+  align-items: center;
+`;
+
+export const Header = styled.p`
+  ${sans.style}
+  font-size: 1.25rem;
+  color: white;
+  font-weight: 500;
+`;
+
+export const HorizontalLine = styled.hr<{ $width?: string }>`
+  color: white;
+  margin-bottom: 10px;
+  width: ${({ $width }) => $width || '2.5rem'};
+`;

src/components/OnboardingManager.tsx

@@ -7,7 +7,7 @@ import CONFIG from '@/lib/configs';
 import { useAuth } from '@/utils/AuthProvider';
 import { useGuardedOnboarding, useOnboardingNavigation } from '@/utils/hooks';
 import { useProfile } from '@/utils/ProfileProvider';
-import IJPLogoBlue from '~/public/images/ijp_logo_blue.webp';
+import IJPLogoBlue from '~/public/images/ijp-logo-blue.webp';
 import { UnstyledButton } from './Buttons';
 import ProgressBar from './ProgressBar';
 

src/lib/configs.ts

@@ -1,11 +1,22 @@
 const CONFIG = {
+  pageSize: 20,
   homepage: '/',
   onboardingHome: '/onboarding/roles',
-  pageSize: 20,
   settings: '/settings',
   cases: '/cases',
   lca: '/limited-case-assignments',
   languageSupport: '/language-support',
+  // social media links
+  facebook: 'https://www.facebook.com/ImmigrationJusticeProjectOfSanDiego/',
+  xTwitter: 'https://twitter.com/ijpsandiego?lang=en',
+  linkedin: 'https://www.linkedin.com/company/immigration-justice-project/',
+  instagram: 'https://www.instagram.com/ijp.sandiego/',
+  // website links
+  ABA: 'https://www.americanbar.org/',
+  ABAComissions:
+    'https://www.americanbar.org/groups/public_interest/immigration/',
+  IJP: 'https://www.americanbar.org/groups/public_interest/immigration/projects_initiatives/immigration-justice-project/',
+  blueprint: 'https://calblueprint.org/',
 };
 
 export default CONFIG;