Website tweaks and new logo

website/src/app/layout.tsx

@@ -21,7 +21,7 @@ export const metadata: Metadata = {
         description: 'Unicord is a simple, type-safe, and modular framework for building Discord bots in TypeScript.',
         images: [
             {
-                url: '/unicord.png',
+                url: 'https://unicord.hat.fish/unicord.png',
                 width: 1024,
                 height: 1024,
                 alt: 'Unicord logo'

website/src/app/page.module.css

@@ -267,58 +267,6 @@
     line-height: 1.6;
 }
 
-@media (max-width: 1200px) {
-    .pillars {
-        padding: 4rem 2rem;
-    }
-
-    .pillarContainer {
-        flex-direction: column;
-        gap: 2rem;
-    }
-
-    .pillar {
-        max-width: 400px;
-        margin: 0 auto;
-    }
-
-    .hydrationSection {
-        padding: 4rem 2rem;
-    }
-
-    .hydrationContainer {
-        flex-direction: column;
-        gap: 2rem;
-    }
-
-    .hydrationCode {
-        width: 100%;
-    }
-
-    .hydrationText {
-        width: 100%;
-        padding: 1rem;
-    }
-
-    .typeSection {
-        padding: 4rem 2rem;
-    }
-
-    .typeContainer {
-        flex-direction: column;
-        gap: 2rem;
-    }
-
-    .typeCode {
-        width: 100%;
-    }
-
-    .typeText {
-        width: 100%;
-        padding: 1rem;
-    }
-}
-
 .typeSection {
     padding: 6rem 12em;
     min-height: 50vh;
@@ -456,7 +404,70 @@
     background: var(--gray-alpha-200);
 }
 
+
 @media (max-width: 1200px) {
+    .hero {
+        padding: 0 2rem;
+        height: calc(100vh - 4rem);
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .hero .codeExample, .hero::after {
+        display: none;
+    }
+
+    .pillars {
+        padding: 4rem 2rem;
+    }
+
+    .pillarContainer {
+        flex-direction: column;
+        gap: 2rem;
+    }
+
+    .pillar {
+        max-width: 400px;
+        margin: 0 auto;
+    }
+
+    .hydrationSection {
+        padding: 4rem 2rem;
+    }
+
+    .hydrationContainer {
+        flex-direction: column-reverse;
+        gap: 2rem;
+    }
+
+    .hydrationCode {
+        width: 100%;
+    }
+
+    .hydrationText {
+        width: 100%;
+        padding: 1rem;
+    }
+
+    .typeSection {
+        padding: 4rem 2rem;
+    }
+
+    .typeContainer {
+        flex-direction: column;
+        gap: 2rem;
+    }
+
+    .typeCode {
+        width: 100%;
+    }
+
+    .typeText {
+        width: 100%;
+        padding: 1rem;
+    }
+
     .installSection {
         padding: 4rem 2rem;
     }

website/src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import styles from "./page.module.css";
 import dynamic from 'next/dynamic';
 
@@ -12,6 +12,22 @@ import { simpleExample, hydrationExample, typeCoercionExample } from '../compone
 
 export default function Home() {
     const [activeTab, setActiveTab] = useState('npm');
+    const [windowWidth, setWindowWidth] = useState(1200);
+  
+    useEffect(() => {
+        setWindowWidth(window.innerWidth);
+
+      const handleResize = () => {
+        setWindowWidth(window.innerWidth);
+      };
+  
+      window.addEventListener('resize', handleResize);
+  
+      return () => {
+        window.removeEventListener('resize', handleResize);
+      };
+    }, []);
+    
     return (
         <div className={[styles.page, styles.pageWithHeader].join(" ")}>
             <header className={styles.header}>
@@ -21,7 +37,7 @@ export default function Home() {
                 </div>
                 <nav className={styles.nav}>
                     {/* <a href="/docs" className={styles.navLink}>Docs</a> */}
-                    <a href="https://github.com/jaronpate/unicord" target='_blank' className={styles.navLink}>Source</a>
+                    <a href="https://github.com/jaronpate/unicord" className={styles.navLink}>Source</a>
                     <a href="https://discord.gg/6kFfqa5bde" target='_blank' className={styles.navLink}>Discord</a>
                 </nav>
             </header>
@@ -32,11 +48,11 @@ export default function Home() {
                             Welcome to <span className={styles.logoMarkSpan}>uni</span>cord
                         </h1>
                         <p className={styles.description}>
-                            Finally a simpler way to build Discord bots.{" "}
+                            Build good bots fast.
                         </p>
                     </div>
                     <div className={styles.codeExample}>
-                        <CodeExample code={simpleExample} noScroll={true} />
+                        <CodeExample code={simpleExample} noScroll={false} />
                     </div>
                 </div>
 
@@ -63,7 +79,7 @@ export default function Home() {
                 <div className={styles.hydrationSection}>
                     <div className={styles.hydrationContainer}>
                         <div className={styles.hydrationCode}>
-                            <CodeExample code={hydrationExample} height={245} noScroll={true} />
+                            <CodeExample code={hydrationExample} height={260} noScroll={windowWidth < 1200 ? false : true} />
                         </div>
                         <div className={styles.hydrationText}>
                             <h2>Smart Hydration</h2>
@@ -94,7 +110,7 @@ export default function Home() {
                             </p>
                         </div>
                         <div className={styles.typeCode}>
-                            <CodeExample code={typeCoercionExample} height={370} noScroll={true} />
+                            <CodeExample code={typeCoercionExample} height={370} noScroll={windowWidth < 1200 ? false : true} />
                         </div>
                     </div>
                 </div>