get content in for footer - minimal styling

src/components/layout/Footer.tsx

@@ -0,0 +1,72 @@
+import React from "react"
+import "./css/footer.css"
+import { LaunchWareLogoLight } from "./LaunchWareLogoLight"
+import { Link } from "gatsby"
+
+const Footer = () => {
+  return (
+    <footer className="footer">
+      <div className="footer_container">
+        <div className="footer_logo-container">
+          <LaunchWareLogoLight className="footer_logo" />
+        </div>
+        <div className="footer_grid">
+          <nav className="footer_group">
+            <h3 className="footer_headline">How we serve</h3>
+            <ul className="footer_link-list">
+              <li>
+                <Link to="/services">Services</Link>
+              </li>
+              <li>
+                <Link to="/capabilities">Capabilities</Link>
+              </li>
+              <li>
+                <Link to="/case-studies">Case Studies</Link>
+              </li>
+              <li>
+                <a href="#">Book Your Launch Call</a>
+              </li>
+            </ul>
+          </nav>
+
+          <nav className="footer_group">
+            <h3 className="footer_headline">Who we are</h3>
+            <ul className="footer_link-list">
+              <li>
+                <Link to="/about">About</Link>
+              </li>
+              <li>
+                <Link to="/careers">Careers</Link>
+              </li>
+              <li>
+                <Link to="/blog">Insight</Link>
+              </li>
+              <li>
+                <a href="#">Book Your Launch Call</a>
+              </li>
+            </ul>
+          </nav>
+
+          <div className="footer_group">
+            <h3 className="footer_headline">Connect</h3>
+            <p><a href="tel:50855555555">Change Phone Number</a></p>
+            <p><a href="mailto:[email protected]">[email protected]</a></p>
+            <ul className="footer_social-list">
+              <li></li>
+            </ul>
+          </div>
+
+          <form className="footer_group">
+            <h3 className="footer_headline">Stay in our orbit</h3>
+            <input type="email" placeholder="Email" />
+            <input type="submit" className="button button__full-width" value="Submit" data-lpignore="true" />
+            <p>By submitting this form, you confirm that you have read and agree to the Terms & Conditions.</p>
+          </form>
+        </div>
+        <p className="footer_copyright-notice">&copy; {new Date().getFullYear()} LaunchWare. All rights reserved.</p>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

src/components/LaunchWareLogo.tsx → src/components/layout/LaunchWareLogo.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 
-export const LaunchWareLogo = () => {
+export const LaunchWareLogo = ({ className = "" }: { className?: string }) => {
   return (
     <svg
       width="161"
       height="14"
       viewBox="0 0 161 14"
-      fill="none"
+      fill="white"
+      className={`logo ${className}`}
       xmlns="http://www.w3.org/2000/svg"
     >
       <g clip-path="url(#clip0_249_454)">

src/components/layout/LaunchWareLogoLight.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+export const LaunchWareLogoLight = ({ className = "" }: { className?: string }) => (
+  <svg className={`${className}`} width="161" height="14" viewBox="0 0 161 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_249_1101)">
+      <g clip-path="url(#clip1_249_1101)">
+        <path d="M3.78067 10.6894H9.69547L8.70614 13.8837H0V0.110352H3.78067V10.6962V10.6894Z" fill="white" />
+        <path d="M41.5452 0.110352V9.29485C41.5452 12.97 39.7715 14.0004 35.6092 14.0004C29.9417 14.0004 29.334 12.6059 29.334 9.29485V0.110352H33.1147V9.21928C33.1147 10.7787 34.0192 10.7993 35.6092 10.7993C37.1992 10.7993 37.7645 10.6687 37.7645 9.05441V0.110352H41.5452Z" fill="white" />
+        <path d="M49.9047 13.8905H46.124V0.110352H52.5123L56.5756 10.6962H56.724L56.4979 0.110352H60.2786V13.8905H53.8338L49.827 3.30466H49.6715L49.8976 13.8905H49.9047Z" fill="white" />
+        <path d="M77.0481 8.66928V9.07458C77.0481 10.579 77.0269 11.9392 75.7408 12.9833C74.4546 14.0137 72.8858 13.9931 71.2393 13.9931C67.3809 13.9931 64.5684 13.8077 64.5684 8.7792V5.21394C64.5684 0.65947 67.0841 0 71.2393 0C75.133 0 76.9492 0.384691 77.0198 4.52012V5.05594H73.1261V4.52012C72.9918 3.29048 72.1014 3.19431 70.8224 3.19431C68.667 3.19431 68.4621 3.84004 68.4621 5.80471V7.95486C68.4621 10.0088 68.554 10.7988 70.8224 10.7988C72.3912 10.7988 73.1473 10.6889 73.1473 9.07458V8.66928H77.041H77.0481Z" fill="white" />
+        <path d="M93.7605 13.8905H89.9798V8.49112H85.0473V13.8905H81.2666V0.110352H85.0473V5.28994H89.9798V0.110352H93.7605V13.8905Z" fill="white" />
+        <path d="M113.781 13.8905H111.343L107.64 1.49112H107.604L103.845 13.8905H101.442L97.0962 0.110352H98.7427L102.594 12.6952H102.629L106.445 0.110352H108.813L112.593 12.6952H112.636L116.579 0.110352H118.24L113.781 13.8905Z" fill="white" />
+        <path d="M153.495 6.1761H160.675V7.4607H153.495V12.5166H161V13.8905H151.891V0.110352H161V1.49112H153.495V6.1761Z" fill="white" />
+        <path d="M144.421 7.75612V7.7149C146.669 7.44012 146.895 6.01127 146.895 4.07407C146.895 0.934722 145.559 0.103516 142.492 0.103516H135.956V13.8837H137.56V1.49115H142.506C145.036 1.49115 145.284 2.15062 145.284 3.91608C145.284 6.19674 144.98 6.92491 142.506 7.00047H136.358V8.37437H142.718C144.662 8.37437 145.1 9.21932 145.1 10.9642V13.8837H146.711V10.2291C146.711 8.73845 146.011 7.85916 144.421 7.74925V7.75612Z" fill="white" />
+        <path d="M126.868 0.110352H124.592L119.434 13.8905H121.115L125.765 1.39494L128.91 9.70702H124.769L124.394 10.9847H129.398L130.493 13.8905H132.154L126.868 0.110352Z" fill="white" />
+        <path d="M22.0836 0.110352H16.3384L12.0913 13.8905H16.0204L19.2498 2.86501H19.2922L21.0448 8.82772H19.0732L18.317 11.39H21.8009L22.5429 13.8905H26.3943L22.0836 0.110352Z" fill="white" />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="clip0_249_1101">
+        <rect width="161" height="14" fill="white" />
+      </clipPath>
+      <clipPath id="clip1_249_1101">
+        <rect width="161" height="14" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)

src/components/Layout.tsx → src/components/layout/Layout.tsx

@@ -1,5 +1,7 @@
 import React, { Children, PropsWithChildren, ReactNode } from "react";
-import Navbar from "./layout/Navbar";
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+
 import { WindowLocation } from "@reach/router";
 
 export const Layout = ({
@@ -15,6 +17,7 @@ export const Layout = ({
     <>
       <Navbar />
       <div className="site">{children}</div>
+      <Footer />
     </>
   );
 };

src/components/layout/Navbar.tsx

@@ -5,7 +5,7 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 import "../../css/index.css"
 import "./css/navbar.css";
 
-import { LaunchWareLogo } from '../LaunchWareLogo'
+import { LaunchWareLogo } from './LaunchWareLogo'
 import { Link } from 'gatsby';
 
 function classNames(...classes: string[]) {

src/components/layout/css/footer.css

@@ -0,0 +1,19 @@
+.footer {
+  @apply bg-launch-black pt-20 pb-4 text-launch-black-10;
+}
+
+.footer_container {
+  @apply pad-container;
+}
+
+.footer_headline {
+  @apply font-semibold;
+}
+
+.footer_logo {
+  @apply block mb-12;
+}
+
+.footer_copyright-notice {
+  @apply text-launch-black-30 ;
+}

src/components/layout/css/navbar.css

@@ -46,10 +46,6 @@
   @apply flex flex-1 items-center justify-start sm:items-stretch sm:justify-between;
 }
 
-.primary-nav-container__desktop {
-  @apply pl-6;
-}
-
 .primary-nav_disclosure-panel {
   @apply space-y-1 pb-4 shadow-md;
 }

src/css/index.css

@@ -6,7 +6,7 @@
 
 @layer utilities {
   .pad-container {
-    @apply px-2 sm:px-10;
+    @apply px-2 sm:px-10 max-w-7xl;
   }
 }
 

src/pages/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { LaunchWareLogo } from "../components/LaunchWareLogo";
+import { LaunchWareLogo } from "../components/layout/LaunchWareLogo";
 import { PageProps } from "gatsby";
 
 import "../css/index.css";
-import { Layout } from "../components/Layout";
+import { Layout } from "../components/layout/Layout";
 
 const IndexPage = (pageProps: PageProps) => {
   return (

src/templates/BlogPost.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Link, graphql, PageProps, HeadFC, HeadProps } from "gatsby";
 
-import { Layout } from "../components/Layout";
+import { Layout } from "../components/layout/Layout";
 // import Seo from "../components/seo";
 
 const BlogPostTemplate = ({ data, location }: PageProps<Queries.BlogPostBySlugQuery>) => {

tailwind.config.ts

@@ -15,11 +15,14 @@ export default {
       colors: {
         white: "#ffffff",
         "launch-orange": "#F06449",
+        "launch-black": "#2D2327",
         "launch-black-90": "#41393C",
         "launch-black-80": "#554D50",
         "launch-black-70": "#696164",
         "launch-black-60": "#7D7779",
         "launch-black-50": "#918B8E",
+        "launch-black-30": "#B9B5B7",
+        "launch-black-10": "#E2E0E1",
       },
     }
   },