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() {
Build Discord bots with minimal boilerplate and intuitive APIs
+Type-safe, modular architecture that scales with your project
+Efficient caching and event handling for bots of any size
+