From d169adbf3c1de2c739c311291af3792056533438 Mon Sep 17 00:00:00 2001
From: "Jaron (aider)" <jaron@fishhat.dev>
Date: Sat, 22 Feb 2025 23:26:41 -0600
Subject: [PATCH] feat: Add three-pillar section with responsive design and
 hover effects

---
 website/src/app/page.module.css | 67 +++++++++++++++++++++++++++++++++
 website/src/app/page.tsx        | 17 +++++++++
 2 files changed, 84 insertions(+)

diff --git a/website/src/app/page.module.css b/website/src/app/page.module.css
index 9008a44..b09f29e 100644
--- a/website/src/app/page.module.css
+++ b/website/src/app/page.module.css
@@ -153,3 +153,70 @@
 .codeBlock code:focus-within {
   background: var(--gray-alpha-200);
 }
+
+.pillars {
+    padding: 6rem 15em;
+    background: var(--gray-alpha-100);
+    min-height: 50vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.pillarContainer {
+    display: flex;
+    gap: 4rem;
+    justify-content: center;
+    width: 100%;
+    max-width: 1200px;
+}
+
+.pillar {
+    flex: 1;
+    text-align: center;
+    padding: 2rem;
+    background: var(--gray-alpha-100);
+    border-radius: 12px;
+    border: 1px solid var(--gray-alpha-200);
+    transition: transform 0.2s ease-in-out;
+}
+
+.pillar:hover {
+    transform: translateY(-5px);
+}
+
+.pillarIcon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+
+.pillar h2 {
+    color: #ff0080;
+    margin: 0.5rem 0;
+    font-size: 1.5rem;
+}
+
+.pillar p {
+    color: #fff;
+    opacity: 0.8;
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+@media (max-width: 1200px) {
+    .pillars {
+        padding: 4rem 2rem;
+    }
+    
+    .pillarContainer {
+        flex-direction: column;
+        gap: 2rem;
+    }
+    
+    .pillar {
+        max-width: 400px;
+        margin: 0 auto;
+    }
+}
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
index e32d0fe..e5a73d1 100644
--- a/website/src/app/page.tsx
+++ b/website/src/app/page.tsx
@@ -30,6 +30,23 @@ export default function Home() {
                 </div>
 
                 <div className={styles.pillars}>
+                    <div className={styles.pillarContainer}>
+                        <div className={styles.pillar}>
+                            <div className={styles.pillarIcon}>⚡</div>
+                            <h2>Simple</h2>
+                            <p>Build Discord bots with minimal boilerplate and intuitive APIs</p>
+                        </div>
+                        <div className={styles.pillar}>
+                            <div className={styles.pillarIcon}>🔧</div>
+                            <h2>Maintainable</h2>
+                            <p>Type-safe, modular architecture that scales with your project</p>
+                        </div>
+                        <div className={styles.pillar}>
+                            <div className={styles.pillarIcon}>📈</div>
+                            <h2>Scalable</h2>
+                            <p>Efficient caching and event handling for bots of any size</p>
+                        </div>
+                    </div>
                 </div>
             </main>
         </div>