Add theme toggle, hero snippet, and reorganize homepage components

- Set up next-themes with a light/dark toggle in the header and move all sections onto theme tokens; dark mode stays pure black - Replace the hero terminal line with the AI Elements Snippet component - Restructure components into layout/, sections/, and shared/ with site-wide config in lib/site.ts Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-18 09:29:12 -04:00
parent a40edbffa9
commit 07a99b441c
28 changed files with 812 additions and 437 deletions
@@ -0,0 +1,63 @@
+import { RiGithubFill, RiTwitterXFill } from '@remixicon/react';
+
+import { Brand } from '@/components/shared/brand';
+import { Container } from '@/components/shared/container';
+import { footerColumns, siteConfig } from '@/lib/site';
+
+const socialLinks = [
+  { label: 'GitHub', href: siteConfig.links.github, Icon: RiGithubFill },
+  { label: 'X (Twitter)', href: siteConfig.links.twitter, Icon: RiTwitterXFill },
+];
+
+export function SiteFooter() {
+  return (
+    <footer className="border-t border-border">
+      <Container className="py-16">
+        <div className="grid gap-10 md:grid-cols-[1.5fr_repeat(4,1fr)]">
+          <div>
+            <Brand />
+            <p className="mt-4 max-w-xs text-sm text-foreground/45">
+              {siteConfig.tagline}
+            </p>
+          </div>
+          {footerColumns.map((column) => (
+            <div key={column.heading}>
+              <h4 className="text-sm font-medium text-foreground/80">
+                {column.heading}
+              </h4>
+              <ul className="mt-4 space-y-3">
+                {column.links.map((link) => (
+                  <li key={link.label}>
+                    <a
+                      href={link.href}
+                      className="text-sm text-foreground/45 transition-colors hover:text-foreground"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="mt-14 flex flex-col items-start justify-between gap-4 border-t border-border pt-8 text-sm text-foreground/40 sm:flex-row sm:items-center">
+          <span>
+            © {new Date().getFullYear()} {siteConfig.name}, Inc. All rights reserved.
+          </span>
+          <div className="flex items-center gap-2">
+            {socialLinks.map(({ label, href, Icon }) => (
+              <a
+                key={label}
+                href={href}
+                aria-label={label}
+                className="inline-flex size-8 items-center justify-center rounded-md text-foreground/45 transition-colors hover:bg-foreground/5 hover:text-foreground"
+              >
+                <Icon className="size-4" aria-hidden="true" />
+              </a>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </footer>
+  );
+}