Update

5 files changed, 121 insertions, 43 deletions

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 7dc64fd..8d2d6db 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -2,7 +2,7 @@ import classNames from "classnames";
 import React from "react";
 
 type ButtonType = {
-  buttonText: string;
+  children?: React.ReactNode;
   rounded?: "none" | "md" | "full";
   size?: "sm" | "md" | "lg";
   color?:
@@ -18,7 +18,7 @@ type ButtonType = {
 };
 
 const Button = ({
-  buttonText = "Enabled",
+  children,
   rounded = "none",
   size = "md",
   color = "cyan",
@@ -27,7 +27,7 @@ const Button = ({
   return (
     <button
       className={classNames(
-        "border-black border-2",
+        "border-black border-2 text-black",
 
         {
           "bg-violet-200 hover:bg-violet-300 active:bg-violet-400":
@@ -70,7 +70,7 @@ const Button = ({
       )}
       disabled={disabled}
     >
-      {buttonText}
+      {children}
     </button>
   );
 };
diff --git a/src/components/Frame.tsx b/src/components/Frame.tsx
new file mode 100644
index 0000000..4a7ee54
--- /dev/null
+++ b/src/components/Frame.tsx
@@ -0,0 +1,37 @@
+import React, { ReactElement } from "react";
+import Button from "./Button";
+import classNames from "classnames";
+
+type FrameType = {
+  children?: ReactElement | ReactElement[];
+  rainbow?: boolean;
+  width?: "fit" | "full" | "1/2" | "1/3";
+};
+
+const dimensionClasses = ["px-8", "py-4", "dark:bg-slate-950", "border-4"];
+
+const lightModeClasses = [
+  "bg-white",
+  "text-black",
+  "border-black",
+  "shadow-neoblack",
+];
+
+const darkModeClasses = [
+  "bg-slate-950",
+  "text-white",
+  "border-white",
+  "shadow-neowhite",
+].map((className) => `dark:${className}`);
+
+const classes = [...dimensionClasses, ...lightModeClasses, ...darkModeClasses];
+
+const Frame = ({ rainbow, children, width }: FrameType) => {
+  const s = rainbow
+    ? classes.filter((c) => !c.includes("shadow")).concat("shadow-rainbow")
+    : classes;
+  const cls = [...s, `w-${width}`].join(" ");
+  return <div className={cls}>{children}</div>;
+};
+
+export default Frame;
diff --git a/src/css/custom.css b/src/css/custom.css
index f7a3179..04040e8 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -7,26 +7,31 @@
 @import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@900&family=Ubuntu&display=swap');
 @tailwind base;
 
-@layer base {
-  code {
-  }
-}
-
 @tailwind components;
 @tailwind utilities;
 
 body {
-  /* background-color: theme('colors.background'); */
+  background-color: theme('colors.lightbackground');
+}
+
+[data-theme='dark'] body {
+  background-color: theme('colors.darkbackground');
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Lexend Mega', sans-serif;
 }
 
+.underline {
+  text-decoration-skip-ink: none !important;
+  text-underline-offset: 2rem;
+}
+
 p, li {
   font-family: 'Ubuntu', sans-serif;
 }
 
+
 /* .navbar {
   flex: auto;
   border: 0;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2311302..8feca7c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -7,37 +7,42 @@ import HomepageFeatures from "@site/src/components/HomepageFeatures";
 import CodeBlock from "@theme/CodeBlock";
 
 import styles from "./index.module.css";
-import Dialog from "../components/Dialog";
+import Frame from "../components/Frame";
+import Button from "../components/Button";
+
+const dynC = (className: string, color: string) =>
+  `dark:${className}-dark${color} ${className}-light${color}`;
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header
-      className={clsx("bg-transparent  hero hero--primary", styles.heroBanner)}
-    >
-      <div className="dark:text-white text-black container">
-        <div className="px-8 py-8 grid place-content-center space-y-4">
-          <h1 className="hero__title">
-            Don't fear shipping
-            <br />{" "}
-            <span className="dark:text-primary text-secondary underline decoration-wavy ">
-              your prototype.
-            </span>
-          </h1>
-          <div className={styles.buttons}></div>
-          <p className="text-2xl py-8 mx-auto w-2/3">
-            Deliver your prototype in no time, then joyfully refactor when
-            needed.{" "}
-            <strong>NeoHaskell prioritizes programmer happiness.</strong>
-          </p>
-          <div className="mx-auto p-5">
-            <Link to="/docs/intro">
-              <button className=" border-black border-2 p-2.5 bg-accent hover:bg-secondary hover:shadow-[3px_2px_0px_black] text-black hover:text-white active:bg-secondary rounded-full dark:border-white dark:shadow[3px_2px_0px_rgba(255,255,255,1)] ">
-                <h2 className="mx-4 my-2">Get Started!</h2>
-              </button>
-            </Link>
+    <header className={`${dynC("text", "text")} container grid text-center`}>
+      <div className="px-8 my-24 place-content-center">
+        <div className="flex mb-10 items-center">
+          <div className="flex flex-col gap-24">
+            <h1 className="text-7xl">
+              Don't fear shipping
+              <br />{" "}
+              <span className="dark:text-darkprimary text-lightsecondary underline decoration-wavy">
+                the MVP.
+              </span>
+            </h1>
+            <Frame rainbow>
+              <p className="text-2xl justify-normal my-10 mx-auto w-2/3">
+                From your head to the world in no time, without the fear of
+                future refactors.{" "}
+                <strong>NeoHaskell scales with your product.</strong>
+              </p>
+            </Frame>
           </div>
         </div>
+        <div className="mx-auto p-5">
+          <Link to="/docs/intro">
+            <Button color="yellow" rounded="full" size="lg">
+              <h2 className="mx-4 my-2">Get Started!</h2>
+            </Button>
+          </Link>
+        </div>
       </div>
     </header>
   );
@@ -46,11 +51,13 @@ function HomepageHeader() {
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <div className="bg-yellow-50 dark:bg-slate-950">
+    <div className="container">
       <Layout description={`${siteConfig.tagline}`}>
         <HomepageHeader />
         <div className="container grid grid-cols-1 gap-4">
-          <Dialog message="This is a dialog" width="full" />
+          <Frame width="full">
+            <h2 className="text-3xl font-bold">Hello, World!</h2>
+          </Frame>
           <div className="place-content-left">
             <CodeBlock language="haskell" title="src/Main.hs" showLineNumbers>
               {`module Main where
diff --git a/tailwind.config.js b/tailwind.config.js
index d625db3..8251c04 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,16 +1,45 @@
 /** @type {import('tailwindcss').Config} */
+const colors = require("tailwindcss/colors");
+
+const lightColors = {
+  text: colors.black,
+  background: colors.yellow[50],
+  primary: "#7df9ff",
+  secondary: "#9723c9",
+  accent: "#fffF00",
+};
+
+const light = Object.keys(lightColors).reduce((acc, key) => {
+  acc[`light${key}`] = lightColors[key];
+  return acc;
+}, {});
+
+const darkColors = {
+  text: colors.white,
+  background: colors.slate[900],
+  primary: "#7df9ff",
+  secondary: "#9723c9",
+  accent: "#fffF00",
+};
+
+const dark = Object.keys(darkColors).reduce((acc, key) => {
+  acc[`dark${key}`] = darkColors[key];
+  return acc;
+}, {});
+
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx,mdx}"],
   darkMode: ["class", '[data-theme="dark"]'],
   theme: {
     extend: {
+      boxShadow: {
+        neoblack: "8px 8px 0px rgba(0,0,0,1)",
+        neowhite: "8px 8px 0px rgba(255,0,0,1)",
+        rainbow: `8px 8px 0px ${colors.cyan["400"]}, 16px 16px 0px ${colors.yellow["400"]}, 24px 24px 0px ${colors.violet["400"]}`,
+      },
       colors: {
-        text: "#000000",
-        background: "#E3DFF2",
-        primary: "#7df9ff",
-        secondary: "#9723c9",
-        accent: "#fffF00",
-        darkBg: "#444950",
+        ...light,
+        ...dark,
       },
     },
   },