Style a bit

1 files changed, 27 insertions, 25 deletions

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1448b3b..6ee548c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -9,6 +9,7 @@ import CodeBlock from "@theme/CodeBlock";
 import styles from "./index.module.css";
 import Frame from "../components/Frame";
 import Button from "../components/Button";
+import CodeFrame from "../components/CodeFrame";
 
 const dynC = (className: string, color: string) =>
   `dark:${className}-dark${color} ${className}-light${color}`;
@@ -20,28 +21,30 @@ function HomepageHeader() {
       <div className="px-8 my-24">
         <div className="mb-10">
           <div className="">
-            <h1 className="md:leading-snug text-center leading-normal mb-20 md:text-7xl text-5xl">
-              Don't fear shipping{" "}
-              <span className="dark:text-darkprimary text-lightsecondary underline decoration-wavy">
+            <h1 className="text-center tracking-supatight leading-relaxed lg:text-7xl md:text-6xl sm:text-5xl text-3xl">
+              Don't fear shipping
+              <br />
+              <span className="dark:text-darkprimary text-lightsecondary underline decoration-wavy underline-offset-8">
                 the MVP.
               </span>
             </h1>
-            <Frame rainbow>
-              <p className="text-center text-2xl justify-normal my-10 mx-auto md: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="text-center 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>
+      <div className="mx-auto mb-4 md:w-1/2">
+        <Frame rainbow>
+          <p className="text-center md:text-2xl sm:text-xl text-lg justify-normal my-10 mx-auto md: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 className="relative text-center mx-auto my-24">
+        <Link to="/docs/intro">
+          <Button color="yellow" rounded="full" size="lg">
+            <h2 className="mx-4 my-2 text-2xl">Get Started!</h2>
+          </Button>
+        </Link>
       </div>
     </header>
   );
@@ -54,17 +57,16 @@ export default function Home(): JSX.Element {
       <Layout description={`${siteConfig.tagline}`}>
         <HomepageHeader />
         <div className="container grid grid-cols-1 gap-4">
-          <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
+          <CodeFrame
+            language="haskell"
+            shadowClass="shadow-neocyan"
+            width="full"
+          >
+            {`module Main where
 
 main :: IO ()
 main = putStrLn "Hello, World!"`}
-            </CodeBlock>
-          </div>
+          </CodeFrame>
 
           <p className="text-red-500 font-extrabold text-5xl">
             If you're reading this, you probably found it by accident. This is a