first pass at navbar (#3)

.vscode/settings.json

@@ -1,6 +1,8 @@
 {
 	"cSpell.words": [
-		"frontmatter"
+    "frontmatter",
+    "Roboto",
+    "tailwindcss"
   ],
   "workbench.colorCustomizations": {
     "activityBar.activeBackground": "#4b2c8d",

gatsby-config.ts

@@ -10,7 +10,12 @@ const config: GatsbyConfig = {
   // Learn more at: https://gatsby.dev/graphql-typegen
   graphqlTypegen: true,
   plugins: [
-    // "gatsby-plugin-postcss",
+    {
+      resolve: "gatsby-plugin-postcss",
+      options: {
+        postCssPlugins: [require("postcss-import"), require("tailwindcss"), require("autoprefixer")],
+      }
+    },
     {
       resolve: "gatsby-plugin-google-gtag",
       options: {

package.json

@@ -23,6 +23,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
     "@mdx-js/react": "^2.3.0",
     "eslint": "^8.47.0",
     "gatsby": "^5.10.0",
@@ -63,6 +65,7 @@
     "gatsby-plugin-postcss": "^6.8.0",
     "install-peerdeps": "^3.0.3",
     "postcss": "^8.4.21",
+    "postcss-import": "^15.1.0",
     "prettier": "^3.0.3",
     "prop-types": "^15.8.1",
     "tailwindcss": "^3.3.0",

postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    "postcss-import": {},
     tailwindcss: {},
     autoprefixer: {},
   },

src/components/Layout.tsx

@@ -1,18 +1,20 @@
 import React, { Children, PropsWithChildren, ReactNode } from "react";
+import Navbar from "./layout/Navbar";
+import { WindowLocation } from "@reach/router";
 
 export const Layout = ({
   location,
   title,
   children,
 }: {
-  location: string;
+  location: WindowLocation<unknown>;
   title: string;
   children: ReactNode;
 }) => {
   return (
-    <div className="site">
-      <h1>LaunchWare</h1>
-      {children}
-    </div>
+    <>
+      <Navbar />
+      <div className="site">{children}</div>
+    </>
   );
 };

src/components/layout/Navbar.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { Disclosure } from '@headlessui/react'
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
+
+import "../../css/index.css"
+import "./css/navbar.css";
+
+import { LaunchWareLogo } from '../LaunchWareLogo'
+import { Link } from 'gatsby';
+
+function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Navbar() {
+  return (
+    <Disclosure as="nav" className="primary-nav">
+      {({ open }) => (
+        <>
+          <div className="primary-nav_container">
+            <div className="primary-nav_mobile-button-container">
+              <div className="primary-nav_mobile-button">
+                {/* Mobile menu button */}
+                <Disclosure.Button className="primary-nav_mobile-button-disclosure">
+                  <span className="primary-nav_mobile-button-spacer" />
+                  <span className="primary-nav_mobile-button-accessible-message">Open main menu</span>
+                  {open ? (
+                    <XMarkIcon className="primary-nav_mobile-button-icon" aria-hidden="true" />
+                  ) : (
+                    <Bars3Icon className="primary-nav_mobile-button-icon" aria-hidden="true" />
+                  )}
+                </Disclosure.Button>
+              </div>
+              <div className="primary-nav-container__desktop">
+                <div className="primary-nav_logo">
+                  <Link to="/">
+                    <LaunchWareLogo />
+                  </Link>
+                </div>
+                <div className="menu__desktop">
+                  {/* Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
+                  <a
+                    href="#"
+                    className="menu-item__desktop"
+                  >
+                    Services
+                  </a>
+                  <a
+                    href="#"
+                    className="menu-item__desktop"
+                  >
+                    About
+                  </a>
+                  <a href="#" className="menu-item__desktop menu-item__desktop-button button">Book Launch Call</a>
+
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <Disclosure.Panel className="sm:hidden">
+            <div className="primary-nav_disclosure-panel">
+              {/* Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" */}
+              <Disclosure.Button
+                as="a"
+                href="#"
+                className="primary-nav_disclosure-panel-item"
+              >
+                Services
+              </Disclosure.Button>
+              <Disclosure.Button
+                as="a"
+                href="#"
+                className="primary-nav_disclosure-panel-item"
+              >
+                About
+              </Disclosure.Button>
+
+              <Disclosure.Button
+                href="#"
+                as="a"
+                className="primary-nav_disclosure-panel-item menu-item__desktop menu-item__mobile-button button">
+                Book Launch Call
+              </Disclosure.Button>
+            </div>
+          </Disclosure.Panel>
+        </>
+      )
+      }
+    </Disclosure >
+  )
+}

src/components/layout/css/navbar.css

@@ -0,0 +1,63 @@
+.primary-nav {
+  @apply bg-white text-launch-black-90;
+}
+
+.primary-nav_mobile-button {
+  @apply absolute inset-y-0 right-0 flex items-center sm:hidden;
+}
+
+.primary-nav_mobile-button-container {
+  @apply relative flex h-16 justify-between
+}
+
+.primary-nav_mobile-button-disclosure {
+  @apply relative inline-flex items-center justify-center px-2;
+}
+
+.primary-nav_mobile-button-icon {
+  @apply block h-6 w-6;
+}
+
+.primary-nav_mobile-button-spacer {
+  @apply absolute -inset-0.5;
+}
+
+.primary-nav_mobile-button-accessible-message {
+  @apply sr-only;
+}
+
+.menu__desktop {
+  @apply ml-6 hidden md:flex sm:space-x-8 mx-4 my-4 items-center;
+}
+
+.menu-item__desktop {
+  @apply hover:text-launch-orange;
+}
+
+.primary-nav_logo {
+  @apply flex flex-shrink-0 items-center;
+}
+
+.primary-nav_container {
+  @apply mx-auto max-w-7xl pad-container;
+}
+
+.primary-nav-container__desktop {
+  @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;
+}
+
+.primary-nav_disclosure-panel-item {
+  @apply block border-l-4 border-transparent py-2 pl-3 pr-4 text-base;
+}
+
+.menu-item__mobile-button {
+  @apply mx-2 text-center;
+}

src/css/buttons.css

@@ -0,0 +1,3 @@
+.button {
+  @apply bg-launch-orange text-white font-bold py-1 px-3 rounded-md hover:text-launch-orange hover:bg-white border-launch-orange border-x-2 border-y-2;
+}

src/css/index.css

@@ -1,13 +1,35 @@
+@import "./buttons.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-body {
-  @apply bg-gray-200;
+@layer utilities {
+  .pad-container {
+    @apply px-2 sm:px-10;
+  }
 }
 
-a {
-  @apply text-cyan-800;
+@font-face {
+  font-family: "Inter";
+  src: url("../assets/fonts/Inter-Regular.ttf");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("../assets/fonts/Inter-SemiBold.ttf");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("../assets/fonts/Inter-Bold.ttf");
+  font-weight: 700;
+}
+
+body {
+  @apply font-inter;
 }
 
 .coming-soon-notice {

src/pages/index.tsx

@@ -3,16 +3,19 @@ import { LaunchWareLogo } from "../components/LaunchWareLogo";
 import { PageProps } from "gatsby";
 
 import "../css/index.css";
+import { Layout } from "../components/Layout";
 
 const IndexPage = (pageProps: PageProps) => {
   return (
-    <div className="coming-soon-notice">
-      <div className="content-container">
-        <LaunchWareLogo />
-        <h1>Coming Soon</h1>
-        <a href="/blog">Archive Blog Content</a>
+    <Layout location={pageProps.location} title="Home">
+      <div className="coming-soon-notice">
+        <div className="content-container">
+          <LaunchWareLogo />
+          <h1>Coming Soon</h1>
+          <a href="/blog">Archive Blog Content</a>
+        </div>
       </div>
-    </div>
+    </Layout>
   );
 };
 

tailwind.config.ts

@@ -1,3 +1,5 @@
+const { fontFamily } = require('tailwindcss/defaultTheme')
+
 export default {
   purge: [],
   darkMode: false,
@@ -7,18 +9,19 @@ export default {
   ],
   theme: {
     extend: {
-      backgroundColor: {
-        white: "#ffffff",
-      },
-      textColor: {
-        primary: "#2ccbc0",
-        secondary: "#6930c3",
+      fontFamily: {
+        "inter": ["Inter", "Roboto", "sans-serif", ...fontFamily.sans]
       },
-      borderColor: {
-        primary: "#2ccbc0",
-        secondary: "#6930c3",
+      colors: {
+        white: "#ffffff",
+        "launch-orange": "#F06449",
+        "launch-black-90": "#41393C",
+        "launch-black-80": "#554D50",
+        "launch-black-70": "#696164",
+        "launch-black-60": "#7D7779",
+        "launch-black-50": "#918B8E",
       },
-    },
+    }
   },
   variants: {
     extend: {},

yarn.lock

@@ -1565,6 +1565,18 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
+"@headlessui/react@^1.7.17":
+  version "1.7.17"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
+  integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==
+  dependencies:
+    client-only "^0.0.1"
+
+"@heroicons/react@^2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.18.tgz#f80301907c243df03c7e9fd76c0286e95361f7c1"
+  integrity sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==
+
 "@humanwhocodes/config-array@^0.11.11":
   version "0.11.11"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844"
@@ -4005,6 +4017,11 @@ cli-width@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
+client-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 clipboardy@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290"