Build Home Page

public-website/.env.template

@@ -0,0 +1 @@
+FONTAWESOME_AUTH_TOKEN=

public-website/.gitignore

@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.template
 
 # vercel
 .vercel

public-website/.npmrc

@@ -0,0 +1,3 @@
+@awesome.me:registry=https://npm.fontawesome.com/
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FONTAWESOME_AUTH_TOKEN}

public-website/README.md

@@ -3,8 +3,9 @@ This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-
 ## Getting Started
 
 1. Ensure you're authenticated with NPM, and have at least "read" access to the `@bayareametro` NPM organization's packages
-2. Install dependencies (preferably with `bun`)
-3. Run the development server: `bun dev`
+2. Create a `.env` file from the `.env.template` file, and complete the values within the `.env` file.
+3. Install dependencies (preferably with `bun`)
+4. Run the development server: `bun dev`
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 

public-website/app/(public)/layout.module.css

@@ -0,0 +1,3 @@
+.extraFooterLine {
+    color: #80979F;
+}

public-website/app/(public)/layout.tsx

@@ -0,0 +1,38 @@
+import { LegalFooter as LegalFooterPrimitives } from "@bayareametro/mtc-ui";
+import { LegalFooter } from "@/components/legal-footer";
+import { StandardFooter } from "@/components/standard-footer";
+import { Header } from "@/components/header";
+import { version } from "@/components/legal-footer/version";
+import styles from "./layout.module.css";
+
+export default function PublicLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <LegalFooterPrimitives.BackToTopLocation />
+      <Header />
+      {children}
+      <StandardFooter>
+        <LegalFooter
+          links={[
+            {
+              href: "#",
+              text: "Project Documentation",
+            },
+            {
+              href: "#",
+              text: "Open Issues",
+            },
+            {
+              href: "#",
+              text: "Submit an Issue",
+            },
+          ]}
+        >
+          <span className={styles.extraFooterLine}>
+            Version {version.code} ({version.date})
+          </span>
+        </LegalFooter>
+      </StandardFooter>
+    </>
+  );
+}

public-website/app/(public)/page.module.css

@@ -0,0 +1,86 @@
+.heroSection {
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    row-gap: 32px;
+    height: calc(100vh - var(--utility-header-height));
+    padding: 56px 142px;
+}
+
+.arrowDown {
+    position: absolute;
+    bottom: 56px;
+    color: #009EDD;
+}
+.backgroundImage {
+    z-index: -1;
+    object-fit: cover;
+}
+
+.logos {
+    column-gap: 24px;
+}
+
+.text {
+    row-gap: 16px;
+}
+
+.title {
+    text-align: center;
+    color: var(--dv-medium-blue);
+    margin-bottom: 0;
+}
+
+.subtitle {
+    text-align: center;
+    color: var(--dv-midnight-blue);
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.aboutSection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    scroll-margin-top: var(--utility-header-height);
+}
+
+.aboutSectionContent {
+    max-width: 1440px;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 72px 142px;
+    column-gap: 72px;
+}
+
+.aboutSectionLeftContent {
+    gap: 16px;
+    max-width: 1440px;
+}
+
+.aboutSectionLearnMoreLinkIcon {
+    transition: transform 0.3s ease-in-out;
+}
+
+.aboutSectionLearnMoreLink {
+    &:hover {
+        .aboutSectionLearnMoreLinkIcon {
+            transform: translateX(4px);
+        }
+    }
+}
+
+.poweredBySection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--dv-white);
+}
+
+.poweredBySectionContent {
+    max-width: 1440px;
+    padding: 64px 142px;
+    row-gap: 40px;
+}

public-website/app/(public)/page.tsx

@@ -0,0 +1,203 @@
+import {
+  AbagIcon,
+  createHashLink,
+  ExternalLink,
+  HStack,
+  Link,
+  MtcIcon,
+  Typography,
+  VStack,
+} from "@bayareametro/mtc-ui";
+import NextLink from "next/link";
+import Image from "next/image";
+import styles from "./page.module.css";
+import backgroundImage from "./background.png";
+import aboutImage from "./about.png";
+import { SpecialFeatureCard } from "@/components/special-feature-card";
+import vitalSignsImage from "./vital-signs.png";
+import { CSSProperties } from "react";
+import { AnimatedArrow } from "@/components/animated-arrow";
+
+const [AboutSection, ScrollToAboutSectionLink] = createHashLink("about");
+
+export default function Home() {
+  return (
+    <VStack>
+      <VStack className={styles.heroSection}>
+        <Image
+          src={backgroundImage}
+          className={styles.backgroundImage}
+          priority
+          alt="Bay Area Spatial Information System"
+          fill
+        />
+        <HStack className={styles.logos}>
+          <AbagIcon
+            title="Association of Bay Area Governments"
+            desc="Association of Bay Area Governments logo"
+            color="var(--dv-midnight-blue)"
+            width={96}
+          />
+          <MtcIcon
+            title="Metropolitan Transportation Commission"
+            desc="Metropolitan Transportation Commission logo"
+            color="var(--dv-midnight-blue)"
+            width={96}
+          />
+        </HStack>
+        <VStack className={styles.text}>
+          <Typography as="h1" variant="display2" className={styles.title}>
+            Bay Area Spatial Information System
+          </Typography>
+          <Typography as="h2" variant="h2" className={styles.subtitle}>
+            Building a Digital Landscape for Regional Planning in the Bay Area
+          </Typography>
+        </VStack>
+        <ScrollToAboutSectionLink className={styles.arrowDown}>
+          <AnimatedArrow />
+        </ScrollToAboutSectionLink>
+      </VStack>
+      <AboutSection className={styles.aboutSection}>
+        <HStack className={styles.aboutSectionContent}>
+          <VStack className={styles.aboutSectionLeftContent}>
+            <Typography as="h2" variant="h2">
+              About BASIS
+            </Typography>
+            <VStack style={{ rowGap: "24px", alignItems: "flex-start" }}>
+              <Image src={aboutImage} alt="About BASIS" style={{ width: "100%", height: "auto" }} />
+              <Typography as="p" variant="paragraph2">
+                The Bay Area Spatial Information System (BASIS) was created to give public agencies
+                and planning professionals a reliable foundation for data-informed decision-making.
+                Developed by the Association of Bay Area Governments (ABAG) and the Metropolitan
+                Transportation Commission (MTC), BASIS reflects a regional effort to improve access
+                to critical spatial information.
+              </Typography>
+              <Typography as="p" variant="paragraph2">
+                As a centralized platform, BASIS is built to reduce duplication, promote
+                transparency and help jurisdictions work together toward shared goals. It offers
+                curated datasets submitted by local governments and standardized by ABAG and MTC to
+                support coordinated planning at every scale.
+              </Typography>
+              <Typography as="p" variant="paragraph2">
+                BASIS is part of a larger commitment to modernize how we share data, build tools and
+                respond to regional challenges in housing, transportation, environmental resilience
+                and equity.
+              </Typography>
+              <Link
+                as={NextLink}
+                href="/"
+                className={styles.aboutSectionLearnMoreLink}
+                RightAdornment="circle-arrow-right"
+                RightAdornmentProps={
+                  {
+                    className: styles.aboutSectionLearnMoreLinkIcon,
+                    color: "#009EDD",
+                  } as unknown as undefined // TODO: fix type in component lib
+                }
+              >
+                Learn more
+              </Link>
+            </VStack>
+          </VStack>
+          <SpecialFeatureCard
+            style={
+              {
+                "--dv-card-border-color": "var(--dv-white)",
+                position: "sticky",
+                top: "calc(var(--utility-header-height) + 24px)",
+                minWidth: 345,
+                maxWidth: 345,
+              } as CSSProperties
+            }
+            orientation="vertical"
+            image={{ src: vitalSignsImage, alt: "Vital Signs" }}
+            heading="Vital Signs"
+            body="Vital Signs is an interactive platform from MTC that tracks key data on transportation, land use, economy, and the environment in the Bay Area. It provides visualizations and analysis to help policymakers, researchers, and the public understand regional trends and inform planning decisions."
+          >
+            <Link
+              as={NextLink}
+              href="https://vitalsigns.mtc.ca.gov"
+              RightAdornment="circle-arrow-right"
+              RightAdornmentProps={
+                {
+                  color: "#009EDD",
+                } as unknown as undefined // TODO: fix type in component lib
+              }
+            >
+              Learn more
+            </Link>
+          </SpecialFeatureCard>
+        </HStack>
+      </AboutSection>
+      <section className={styles.poweredBySection}>
+        <VStack className={styles.poweredBySectionContent}>
+          <Typography as="h4" variant="h4" style={{ textAlign: "center" }}>
+            Powered by BASIS
+          </Typography>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "24px" }}>
+            <SpecialFeatureCard
+              orientation="vertical"
+              image={{ src: vitalSignsImage, alt: "Vital Signs" }}
+              heading="Transit Oriented Communities Compliance Portal"
+              body=""
+            >
+              <ExternalLink as={NextLink} href="https://toc.mtcanalytics.org">
+                toc.mtcanalytics.org
+              </ExternalLink>
+            </SpecialFeatureCard>
+            <SpecialFeatureCard
+              orientation="vertical"
+              image={{ src: vitalSignsImage, alt: "Vital Signs" }}
+              heading="Regional Transit Capital Inventory Portal"
+              body=""
+            >
+              <ExternalLink as={NextLink} href="https://rtci.bayareametro.gov">
+                rtci.bayareametro.gov
+              </ExternalLink>
+            </SpecialFeatureCard>
+            <SpecialFeatureCard
+              orientation="vertical"
+              image={{ src: vitalSignsImage, alt: "Vital Signs" }}
+              heading="Housing and Land Use Viewer"
+              body=""
+            >
+              <ExternalLink as={NextLink} href="https://housing.abag.ca.gov">
+                housing.abag.ca.gov
+              </ExternalLink>
+            </SpecialFeatureCard>
+            <SpecialFeatureCard
+              orientation="vertical"
+              image={{ src: vitalSignsImage, alt: "Vital Signs" }}
+              heading="Lorem Ipsum Product Integration Network"
+              body=""
+            >
+              <ExternalLink as={NextLink} href="https://toc.mtcanalytics.org">
+                toc.mtcanalytics.org
+              </ExternalLink>
+            </SpecialFeatureCard>
+            <SpecialFeatureCard
+              orientation="vertical"
+              image={{ src: vitalSignsImage, alt: "Vital Signs" }}
+              heading="Ipsum Lorem Central Configuration Strategy Portal"
+              body=""
+            >
+              <ExternalLink as={NextLink} href="https://ipsumcentralstrategy.org">
+                ipsumcentralstrategy.org
+              </ExternalLink>
+            </SpecialFeatureCard>
+            <SpecialFeatureCard
+              orientation="vertical"
+              image={{ src: vitalSignsImage, alt: "Vital Signs" }}
+              heading="Lorem Ipsum Legacy Tactics Administration System"
+              body=""
+            >
+              <ExternalLink as={NextLink} href="https://lorem.ipsumlegacy.org">
+                lorem.ipsumlegacy.org
+              </ExternalLink>
+            </SpecialFeatureCard>
+          </div>
+        </VStack>
+      </section>
+    </VStack>
+  );
+}

public-website/app/[...fallback]/route.ts

@@ -0,0 +1,3 @@
+import { redirect } from "next/navigation";
+
+export const GET = () => redirect("/");

public-website/app/fontawesome.ts

@@ -0,0 +1,11 @@
+import "@fortawesome/fontawesome-svg-core/styles.css";
+
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { fal } from "@fortawesome/pro-light-svg-icons";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { config } from "@fortawesome/fontawesome-svg-core";
+
+config.autoAddCss = false;
+
+library.add(fab, fas, fal);

public-website/app/layout.module.css

@@ -0,0 +1,4 @@
+.body {
+    --utility-header-height: 80px;
+    --dv-body-bg: var(--dv-midnight-blue-10);
+}