feat: add Mycopunk link & image, fix alignment

Center footer and content with proper centering and padding.

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>

app/page.tsx

@@ -4,6 +4,7 @@ import { MycoFiIntro } from "@/components/mycofi-intro"
 import { BookShowcase } from "@/components/book-showcase"
 import { ImageGallery } from "@/components/image-gallery"
 import { ContentSection } from "@/components/content-section"
+import { MycopunkSection } from "@/components/mycopunk-section"
 import { CTASection } from "@/components/cta-section"
 import { Footer } from "@/components/footer"
 import { HyphalCanvas } from "@/components/hyphal-canvas"
@@ -19,6 +20,7 @@ export default function Home() {
         <BookShowcase />
         <ContentSection />
         <ImageGallery />
+        <MycopunkSection />
         <CTASection />
       </main>
       <Footer className="z-20" />

components/footer.tsx

@@ -4,7 +4,7 @@ import { Sprout } from "lucide-react"
 export function Footer() {
   return (
     <footer className="border-t border-border bg-white relative z-20">
-      <div className="container py-12">
+      <div className="container mx-auto px-4 py-12">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           <div className="md:col-span-2">
             <div
@@ -68,6 +68,15 @@ export function Footer() {
                   All Links
                 </Link>
               </li>
+              <li>
+                <Link
+                  href="https://mycopunks.gitbook.io/mycopunk-principles"
+                  target="_blank"
+                  className="text-black !opacity-100 hover:text-primary transition-colors"
+                >
+                  Mycopunk Principles
+                </Link>
+              </li>
             </ul>
           </div>
         </div>

components/mycopunk-section.tsx

@@ -0,0 +1,51 @@
+import Image from "next/image"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+
+export function MycopunkSection() {
+  return (
+    <section className="py-20 bg-gradient-to-b from-background to-muted/30">
+      <div className="container mx-auto px-4">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-12">
+            <h2
+              className="text-3xl md:text-4xl font-bold mb-4 text-balance"
+              style={{ fontFamily: "var(--font-crimson)" }}
+            >
+              Born from <span className="text-primary">Mycopunk</span>
+            </h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-balance">
+              MycoFi emerged from the Mycopunk movement—a regenerative, networked approach to building resilient systems
+              inspired by fungal wisdom.
+            </p>
+          </div>
+
+          <Card className="overflow-hidden border-2 hover:border-primary/50 transition-colors">
+            <CardContent className="p-0">
+              <div className="relative w-full aspect-video">
+                <Image
+                  src="/images/mycopunk-principles.png"
+                  alt="Mycopunk Principles: Regenerative, Redistributive, Networked, Humble, Sneaky AF, Anti-Fragile, Fractal, Mutualist, Emergent, Polycentric, Dynamic, Optimistic, Ubiquitous"
+                  fill
+                  className="object-contain"
+                />
+              </div>
+              <div className="p-8 text-center">
+                <p className="text-muted-foreground mb-6 leading-relaxed">
+                  These principles guide our exploration of regenerative economic systems—from the humble mycelial
+                  networks beneath our feet to the emergent possibilities of decentralized coordination.
+                </p>
+                <Button asChild size="lg" variant="secondary">
+                  <Link href="https://mycopunks.gitbook.io/mycopunk-principles" target="_blank">
+                    Explore the Principles
+                  </Link>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  )
+}