Cleaned up hero section + started on header

2023-02-27 22:25:06 -06:00
parent a7e3391e3a
commit c6af9dddb0
12 changed files with 3517 additions and 587 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -18,9 +18,11 @@
    "@trpc/next": "^10.9.0",
    "@trpc/react-query": "^10.9.0",
    "@trpc/server": "^10.9.0",
+    "class-variance-authority": "^0.4.0",
    "next": "13.1.6",
    "next-auth": "^4.19.0",
    "react": "18.2.0",
+    "react-aria": "^3.23.0",
    "react-dom": "18.2.0",
    "superjson": "1.9.1",
    "zod": "^3.20.2"
--- a/public/grid.svg
+++ b/public/grid.svg
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,10 +1,35 @@
-const Button = () => {
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+const button = cva(
+  [
+    "w-fit rounded-full border-8 border-quaternary bg-secondary px-14 py-4 text-2xl font-medium text-quaternary shadow-solid transition-all",
+    "hover:bg-secondary-600 hover:border-quaternary-600 hover:text-quaternary-600 hover:shadow-solid-lowered",
+    "active:bg-secondary-700 active:border-quaternary-700 active:text-quaternary-700 active:shadow-solid-lowest",
+    "disabled:bg-fg-400/10 disabled:text-fg-600/30 disabled:border-fg-600/10 disabled:shadow-none",
+    "focus-visible:outline focus-visible:outline-fg focus-visible:outline-8 focus-visible:outline-offset-2",
+  ],
+  {
+    variants: {
+      size: {
+        default: "text-2xl px-14 py-4",
+        small: "text-lg px-10 py-3",
+      },
+    },
+  }
+);
+
+interface Props {
+  children: React.ReactNode;
+  onClick?: () => void;
+  variant?: VariantProps<typeof button>;
+}
+
+const Button: React.FC<Props> = ({ children, onClick, variant }) => {
  return (
-    <div className="w-fit rounded-full border-8 border-quaternary bg-secondary">
-      <p className="px-14 py-4 text-2xl font-medium text-quaternary">
-        Get Started
-      </p>
-    </div>
+    <button className={button(variant)} onClick={onClick}>
+      {children}
+    </button>
  );
 };

--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -0,0 +1,44 @@
+import { useState, useEffect } from "react";
+import Button from "@components/Button";
+
+const Header: React.FC = () => {
+  const [isLargeBar, setIsLargeBar] = useState(true);
+
+  // Scroll Listener
+  useEffect(() => {
+    const listenScrollEvent = () => {
+      const threshold = 10;
+      setIsLargeBar(
+        document.body.scrollTop < threshold &&
+          document.documentElement.scrollTop < threshold
+      );
+    };
+
+    window.addEventListener("scroll", listenScrollEvent);
+    return () => {
+      window.removeEventListener("scroll", listenScrollEvent);
+    };
+  });
+
+  return (
+    <header
+      className={`sticky top-0 z-50 w-full backdrop-blur-lg backdrop-filter transition-all duration-300 ease-in-out ${
+        isLargeBar ? "py-8" : "py-4 shadow"
+      }`}
+    >
+      <nav className="container flex flex-row justify-between gap-x-4">
+        <a href="#intro" className="flex flex-row gap-x-3">
+          <h3 className="hidden sm:block">Parallel</h3>
+        </a>
+        <div className="flex flex-row items-center gap-x-8 sm:gap-x-16">
+          <a href="#about">About</a>
+          <a href="#faq">FAQ</a>
+          <a href="#roadmap">Roadmap</a>
+        </div>
+        <Button variant={{ size: "small" }}>Sign Up</Button>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -0,0 +1,39 @@
+import { Murecho } from "@next/font/google";
+import { useRouter } from "next/router";
+import { cva } from "class-variance-authority";
+import Header from "@components/Header";
+
+const murecho = Murecho({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  display: "swap",
+  variable: "--font-murecho",
+});
+
+const layout = cva([`${murecho.variable} font-sans`], {
+  variants: {
+    // page: {
+    //   home: "",
+    //   app: "",
+    // },
+  },
+});
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const Layout: React.FC<Props> = ({ children }) => {
+  const router = useRouter();
+
+  const isOnHomePage = router.pathname === "/";
+
+  return (
+    <main className={layout()}>
+      <Header />
+      {children}
+    </main>
+  );
+};
+
+export default Layout;
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,18 +1,12 @@
 import { type AppType } from "next/app";
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
-import { Murecho } from "@next/font/google";
+import { SSRProvider } from "react-aria";
 import Head from "next/head";
 import { api } from "../utils/api";

-import "../styles/globals.css";
-
-const murecho = Murecho({
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700"],
-  display: "swap",
-  variable: "--font-murecho",
-});
+import "@styles/globals.css";
+import Layout from "@components/Layout";

 const MyApp: AppType<{ session: Session | null }> = ({
  Component,
@@ -25,11 +19,13 @@ const MyApp: AppType<{ session: Session | null }> = ({
        <meta name="description" content="============" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
-      <div className={`${murecho.variable} font-sans`}>
+      <SSRProvider>
        <SessionProvider session={session}>
-          <Component {...pageProps} />
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
        </SessionProvider>
-      </div>
+      </SSRProvider>
    </>
  );
 };
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,4 @@
 import { type NextPage } from "next";
-import Image from "next/image";
-import Grid from "../../public/grid.svg";
 import Button from "../components/Button";

 const Home: NextPage = () => {
@@ -16,25 +14,18 @@ export default Home;

 function Hero() {
  return (
-    <div className="absolute top-0 right-0 left-0">
-      <div className="custom-radial-bg relative z-0 flex items-center">
-        <Image
-          src={Grid}
-          alt="background grid"
-          className="absolute inset-0 -z-10"
-        />
-        <div className="container">
-          <h1 className="text-5xl font-bold leading-tight text-primary">
-            Collaborate with experts.
-            <br />
-            Educate the world.
-          </h1>
-          <p className="mt-6 mb-16 text-3xl font-bold">
-            Get connected with Parallel
-          </p>
-          <Button />
-        </div>
+    <section className="custom-home-bg">
+      <div className="container">
+        <h1 className="text-5xl font-bold leading-tight text-primary drop-shadow-blur">
+          Collaborate with experts.
+          <br />
+          Educate the world.
+        </h1>
+        <p className="mt-6 mb-16 text-3xl font-bold drop-shadow-blur">
+          Get connected with Parallel
+        </p>
+        <Button>Get Started</Button>
      </div>
-    </div>
+    </section>
  );
 }
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -13,23 +13,25 @@ a {
  @apply text-lg;
 }

-.custom-radial-bg {
-  min-height: 100vh;
-  overflow-x: clip;
+.custom-home-bg {
+  @apply relative z-0 flex min-h-screen items-center overflow-x-clip;
 }

-.custom-radial-bg::before {
+.custom-home-bg::before {
+  @apply absolute -z-10 aspect-square;
  content: "";
-  position: absolute;
-  z-index: -10;
-  top: 0;
-  left: 0;
-  width: 140vh;
-  transform: translate(66%, -33%);
-  aspect-ratio: 1 / 1;
+  top: -100vmin;
+  right: -50vmin;
+  width: 200vmin;
  background: radial-gradient(
    circle farthest-side at center,
    #deb887 0%,
    #00000000 100%
  );
 }
+
+.custom-home-bg::after {
+  @apply absolute inset-0 -z-10 object-cover;
+  content: "";
+  background-image: url("/grid.svg");
+}
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -7,91 +7,99 @@ module.exports = {
      padding: "1.5rem",
    },
    // screens: {},
-    colors: {
-      fg: {
-        DEFAULT: "#A3A395",
-        100: "#ededea",
-        200: "#dadad5",
-        300: "#c8c8bf",
-        400: "#b5b5aa",
-        500: "#a3a395",
-        600: "#828277",
-        700: "#626259",
-        800: "#41413c",
-        900: "#21211e",
-      },
-      bg: {
-        DEFAULT: "#303030",
-        100: "#d6d6d6",
-        200: "#acacac",
-        300: "#838383",
-        400: "#595959",
-        500: "#303030",
-        600: "#262626",
-        700: "#1d1d1d",
-        800: "#131313",
-        900: "#0a0a0a",
-      },
-      primary: {
-        DEFAULT: "#DEB887",
-        100: "#f8f1e7",
-        200: "#f2e3cf",
-        300: "#ebd4b7",
-        400: "#e5c69f",
-        500: "#deb887",
-        600: "#b2936c",
-        700: "#856e51",
-        800: "#594a36",
-        900: "#2c251b",
-      },
-      secondary: {
-        DEFAULT: "#AF7E7F",
-        100: "#efe5e5",
-        200: "#dfcbcc",
-        300: "#cfb2b2",
-        400: "#bf9899",
-        500: "#af7e7f",
-        600: "#8c6566",
-        700: "#694c4c",
-        800: "#463233",
-        900: "#231919",
-      },
-      tertiary: {
-        DEFAULT: "#B35443",
-        100: "#f0ddd9",
-        200: "#e1bbb4",
-        300: "#d1988e",
-        400: "#c27669",
-        500: "#b35443",
-        600: "#8f4336",
-        700: "#6b3228",
-        800: "#48221b",
-        900: "#24110d",
-      },
-      quaternary: {
-        DEFAULT: "#483E41",
-        100: "#dad8d9",
-        200: "#b6b2b3",
-        300: "#918b8d",
-        400: "#6d6567",
-        500: "#483e41",
-        600: "#3a3234",
-        700: "#2b2527",
-        800: "#1d191a",
-        900: "#0e0c0d",
-      },
-      success: "#ACD161",
-      error: "#E24536",
-      warning: "#EDC25E",
-    },
    extend: {
+      colors: {
+        fg: {
+          DEFAULT: "#A3A395",
+          100: "#ededea",
+          200: "#dadad5",
+          300: "#c8c8bf",
+          400: "#b5b5aa",
+          500: "#a3a395",
+          600: "#828277",
+          700: "#626259",
+          800: "#41413c",
+          900: "#21211e",
+        },
+        bg: {
+          DEFAULT: "#303030",
+          100: "#d6d6d6",
+          200: "#acacac",
+          300: "#838383",
+          400: "#595959",
+          500: "#303030",
+          600: "#262626",
+          700: "#1d1d1d",
+          800: "#131313",
+          900: "#0a0a0a",
+        },
+        primary: {
+          DEFAULT: "#DEB887",
+          100: "#f8f1e7",
+          200: "#f2e3cf",
+          300: "#ebd4b7",
+          400: "#e5c69f",
+          500: "#deb887",
+          600: "#b2936c",
+          700: "#856e51",
+          800: "#594a36",
+          900: "#2c251b",
+        },
+        secondary: {
+          DEFAULT: "#AF7E7F",
+          100: "#efe5e5",
+          200: "#dfcbcc",
+          300: "#cfb2b2",
+          400: "#B98D8D",
+          500: "#af7e7f",
+          600: "#8F6869",
+          700: "#694c4c",
+          800: "#463233",
+          900: "#231919",
+        },
+        tertiary: {
+          DEFAULT: "#B35443",
+          100: "#f0ddd9",
+          200: "#e1bbb4",
+          300: "#d1988e",
+          400: "#c27669",
+          500: "#b35443",
+          600: "#8f4336",
+          700: "#6b3228",
+          800: "#48221b",
+          900: "#24110d",
+        },
+        quaternary: {
+          DEFAULT: "#483E41",
+          100: "#90898B",
+          200: "#787072",
+          300: "#655D5F",
+          400: "#52484B",
+          500: "#483e41",
+          600: "#42393C",
+          700: "#3a3234",
+          800: "#2b2527",
+          900: "#1d191a",
+        },
+        success: "#ACD161",
+        error: "#E24536",
+        warning: "#EDC25E",
+      },
      fontFamily: {
        sans: ["var(--font-murecho)"],
      },
      backgroundImage: {
        radial:
          "radial-gradient(circle farthest-side at center, #deb887 0%, #00000000 100%)",
-        //   grid: `url('./public/grid.svg')`,
+      },
+      boxShadow: {
+        solid: "12px 24px 0px rgba(0, 0, 0, 0.2)",
+        "solid-lowered": "10px 20px 0px rgba(0, 0, 0, 0.2)",
+        "solid-lowest": "2px 4px 0px rgba(0, 0, 0, 0.2)",
+        "solid-raised": "14px 28px 0px rgba(0, 0, 0, 0.2)",
+      },
+      dropShadow: {
+        blur: "0 0 5px #303030",
      },
    },
  },
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,16 @@
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
-    "noUncheckedIndexedAccess": true
+    "noUncheckedIndexedAccess": true,
+    "baseUrl": "src",
+    "paths": {
+      "@components/*": ["components/*"],
+      "@constants/*": ["constants/*"],
+      "@pages/*": ["pages/*"],
+      "@server/*": ["server/*"],
+      "@styles/*": ["styles/*"],
+      "@utils/*": ["utils/*"]
+    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
  "exclude": ["node_modules"]