Write longer content, split Header and Footer components

namesakefyi · May 27, 2024 · 6acb445 · 6acb445
1 parent 77891b3
commit 6acb445
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 108 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -2,11 +2,10 @@ import { defineConfig } from "astro/config";
 import sitemap from "@astrojs/sitemap";
 import react from "@astrojs/react";
 
-// https://astro.build/config
 export default defineConfig({
   site: "https://namesake.fyi",
   integrations: [sitemap(), react()],
   devToolbar: {
-    enabled: false
-  }
-});
+    enabled: false,
+  },
+});
diff --git a/package.json b/package.json
@@ -26,7 +26,6 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.44.0",
-    "@types/node": "^20.12.12",
     "@typescript-eslint/parser": "^7.10.0",
     "eslint": "^8.57.0",
     "eslint-plugin-astro": "^1.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Logo.astro b/src/components/Logo.astro
@@ -52,7 +52,7 @@
 
 <style>
   .logo {
-    height: var(--step-2);
+    height: var(--step-0);
     width: auto;
   }
 </style>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -4,6 +4,8 @@ import "../styles/theme.css";
 import "../styles/base.css";
 
 import { ViewTransitions } from "astro:transitions";
+import { join } from "node:path";
+import { AstroFont } from "astro-font";
 
 export interface Props {
   title: string;

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,135 +1,99 @@
 ---
 import { Image } from "astro:assets";
-import Logo from "../components/Logo.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
-import {
-  RiArrowRightLine,
-  RiInstagramLine,
-  RiLinkedinLine,
-} from "react-icons/ri";
+import { RiArrowRightLine } from "react-icons/ri";
 import idImage from "../images/id.png";
-
-const year = new Date().getFullYear();
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
 ---
 
 <BaseLayout
   title="Namesake"
   description="Namesake streamlines the legal name and gender marker change process for trans, nonbinary, and gender expansive folks."
 >
+  <Header />
   <main>
-    <a href="/" aria-label="Namesake homepage"><Logo /></a>
-    <div class="hero">
-      <div class="contents">
-        <h1>Be seen for who you&nbsp;are.</h1>
-        <p class="subhead">
-          Namesake streamlines the legal name and gender marker change process
-          for trans, non-binary, and gender expansive folks. Launching in
-          Massachusetts this Summer.
-        </p>
-        <form>
-          <input type="email" placeholder="Your email" required />
-          <button type="submit">Subscribe <RiArrowRightLine /></button>
-        </form>
-      </div>
-      <Image
-        src={idImage}
-        alt="A snail on top of a Massachusetts ID card"
-        width={400}
-        densities={[1, 2]}
-      />
+    <h1>Be seen for who you&nbsp;are.</h1>
+    <div class="subhead">
+      <p>
+        <strong>Legally changing name and gender is a challenge.</strong> You have
+        to navigate the courts, fill out dense paperwork, and tackle steps in a specific
+        and poorly-communicated order. For some, the process can take years to complete.
+        And you have to do it all while navigating big emotions around what it means
+        to embrace a new identity.
+      </p>
+      <p>
+        We’ve been through this process ourselves, and <strong
+          >we think it can be better</strong
+        >. We built Namesake to help you navigate the process, step by step,
+        with community support along the way.
+      </p>
+      <p>
+        We’re finishing up the app right now and we plan to launch this Summer,
+        starting in Massachusetts.
+      </p>
+      <p>
+        Rigid systems weren't built for us, but we’ll figure them out together.
+      </p>
     </div>
+    <form>
+      <p>Get notified when we launch:</p>
+      <div class="input-group">
+        <input type="email" name="email" placeholder="Your email" required />
+        <button type="submit">Subscribe <RiArrowRightLine /></button>
+      </div>
+    </form>
   </main>
-  <footer>
-    <span class="copyright"
-      >&copy; 2022&hairsp;&ndash;&hairsp;{year} Namesake</span
-    >
-    <div class="social">
-      <a
-        href="https://www.instagram.com/joinnamesake/"
-        aria-label="View Namesake on Instagram"
-        title="View Namesake on Instagram"><RiInstagramLine size="24px" /></a
-      >
-      <a
-        href="https://www.linkedin.com/company/namesake-collaborative/"
-        aria-label="View Namesake on LinkedIn"
-        title="View Namesake on LinkedIn"><RiLinkedinLine size="24px" /></a
-      >
-    </div>
-  </footer>
+  <Footer />
 </BaseLayout>
 
 <style lang="scss">
-  main,
-  footer {
-    padding: var(--space-xl);
-    width: 100%;
-    margin-inline: auto;
-  }
-
   main {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    padding-block-end: 0;
-  }
-
-  .hero {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    gap: var(--space-2xl);
-    padding-block: var(--space-3xl);
-
-    img {
-      mix-blend-mode: multiply;
-      height: auto;
-      max-width: 100%;
-      margin-left: -20px;
-    }
+    padding: var(--space-2xl) var(--space-l);
+    width: 100%;
+    margin-inline: auto;
   }
 
   h1 {
     text-wrap: balance;
-    margin-block-end: var(--space-l);
+    margin-block-end: var(--space-xl);
     line-height: 0.9;
   }
 
-  footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-block-start: 0;
-  }
+  .subhead p {
+    max-width: 54ch;
 
-  .copyright {
-    font-size: var(--step--1);
+    & + p {
+      margin-top: var(--space-m);
+    }
   }
 
-  .social {
-    display: flex;
-    gap: var(--space-s);
-  }
+  form {
+    margin-block-start: var(--space-xl);
+    border: 1px solid var(--gray-12);
+    padding: var(--space-m);
 
-  .subhead {
-    font-size: var(--step-1);
-    max-width: 60ch;
-    text-wrap: balance;
+    @media (width < 540px) {
+      width: 100%;
+    }
   }
 
-  form {
-    // display: flex;
-    display: none; // Until fully implemented
+  .input-group {
+    display: flex;
     gap: var(--space-xs);
-    margin-block-start: var(--space-l);
+    margin-block-start: var(--space-s);
   }
 
   input {
     border: none;
     border-bottom: 2px solid var(--gray-12);
     background: transparent;
     padding: 0;
+    flex: 1;
 
     &::placeholder {
       color: var(--gray-a9);
@@ -153,5 +117,10 @@ const year = new Date().getFullYear();
         color: var(--pink-6);
       }
     }
+
+    &:focus-visible {
+      background: var(--gray-12);
+      color: var(--pink-6);
+    }
   }
 </style>
diff --git a/src/styles/base.css b/src/styles/base.css
@@ -14,7 +14,7 @@ body {
   font-size: var(--step-0);
   line-height: var(--line-height-body);
   font-synthesis: none;
-  font-family: "trade-gothic-next", sans-serif;
+  font-family: var(--font-sans);
   font-weight: 400;
   font-style: normal;
   letter-spacing: var(--letter-spacing-condensed);
@@ -26,7 +26,7 @@ body {
 }
 
 h1, h2, h3 {
-  font-family: "rocky-condensed", serif;
+  font-family: var(--font-serif);
   font-weight: 500;
   font-style: normal;
 }

diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -34,4 +34,8 @@
 
   /* Radii */
   --radius-sm: 2px;
+
+  /* Fonts */
+  --font-serif: "rocky-condensed", serif;
+  --font-sans: Arial, sans-serif;
 }