feat: add Mycelial Mentions section with resource links

Create new component and style it; add to main page.

#VERCEL_SKIP

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

app/globals.css

@@ -45,6 +45,7 @@
   --section-decay: oklch(0.88 0.035 45);
   --section-growth: oklch(0.9 0.04 85);
   --section-network: oklch(0.93 0.025 52);
+  --section-mentions: oklch(0.91 0.03 70);
 }
 
 .dark {
@@ -88,6 +89,7 @@
   --section-decay: oklch(0.21 0.038 44);
   --section-growth: oklch(0.23 0.04 75);
   --section-network: oklch(0.22 0.035 48);
+  --section-mentions: oklch(0.2 0.038 65);
 }
 
 @theme inline {
@@ -135,6 +137,7 @@
   --color-section-decay: var(--section-decay);
   --color-section-growth: var(--section-growth);
   --color-section-network: var(--section-network);
+  --color-section-mentions: var(--section-mentions);
 }
 
 @layer base {

app/page.tsx

@@ -3,6 +3,7 @@ import { MushroomMetaphor } from "@/components/mushroom-metaphor"
 import { ZombifiedInstitutions } from "@/components/zombified-institutions"
 import { ResourcesForChange } from "@/components/resources-for-change"
 import { NetworkLinks } from "@/components/network-links"
+import { MycelialMentions } from "@/components/mycelial-mentions"
 import { Footer } from "@/components/footer"
 
 export default function Home() {
@@ -13,6 +14,7 @@ export default function Home() {
       <ZombifiedInstitutions />
       <ResourcesForChange />
       <NetworkLinks />
+      <MycelialMentions />
       <Footer />
     </main>
   )

components/mycelial-mentions.tsx

@@ -0,0 +1,131 @@
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { ExternalLink, Music, BookOpen, Users, Coins, Sprout } from "lucide-react"
+
+export function MycelialMentions() {
+  return (
+    <section className="py-24 bg-[var(--color-section-mentions)]">
+      <div className="container mx-auto px-4">
+        <div className="max-w-6xl mx-auto space-y-12">
+          <div className="text-center space-y-4">
+            <h2 className="text-4xl md:text-5xl font-bold text-balance">Mycelial Mentions</h2>
+            <p className="text-xl text-muted-foreground text-balance leading-relaxed">
+              Threads in the network—resources, projects, and ideas that nourish the regenerative ecosystem.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <Card className="p-6 space-y-4 hover:shadow-lg transition-shadow">
+              <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
+                <Music className="w-6 h-6 text-primary" />
+              </div>
+              <h3 className="text-xl font-bold text-center">Soul Speaks Soil</h3>
+              <p className="text-muted-foreground text-sm leading-relaxed text-center">
+                A podcast exploring the wisdom of soil, regeneration, and our relationship with the living earth.
+              </p>
+              <div className="flex gap-2">
+                <Button asChild variant="outline" className="flex-1 bg-transparent">
+                  <a href="https://www.instagram.com/soulspeakssoil/?hl=en" target="_blank" rel="noopener noreferrer">
+                    Instagram
+                    <ExternalLink className="ml-2 w-3 h-3" />
+                  </a>
+                </Button>
+                <Button asChild variant="outline" className="flex-1 bg-transparent">
+                  <a
+                    href="https://open.spotify.com/show/2bcCN0mtNSKMLG3x5c9lOh"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Spotify
+                    <ExternalLink className="ml-2 w-3 h-3" />
+                  </a>
+                </Button>
+              </div>
+            </Card>
+
+            <Card className="p-6 space-y-4 hover:shadow-lg transition-shadow">
+              <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
+                <BookOpen className="w-6 h-6 text-primary" />
+              </div>
+              <h3 className="text-xl font-bold text-center">Radical Mycology</h3>
+              <p className="text-muted-foreground text-sm leading-relaxed text-center">
+                A movement and treatise on seeing and working with fungi to heal ourselves and our planet.
+              </p>
+              <div className="flex gap-2">
+                <Button asChild variant="outline" className="flex-1 bg-transparent">
+                  <a href="https://radicalmycology.com" target="_blank" rel="noopener noreferrer">
+                    Website
+                    <ExternalLink className="ml-2 w-3 h-3" />
+                  </a>
+                </Button>
+                <Button asChild variant="outline" className="flex-1 bg-transparent">
+                  <a
+                    href="https://chthaeus.com/products/radical-mycology-a-treatise-on-seeing-working-with-fungi"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Book
+                    <ExternalLink className="ml-2 w-3 h-3" />
+                  </a>
+                </Button>
+              </div>
+            </Card>
+
+            <Card className="p-6 space-y-4 hover:shadow-lg transition-shadow">
+              <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
+                <Users className="w-6 h-6 text-primary" />
+              </div>
+              <h3 className="text-xl font-bold text-center">Commitment Pooling</h3>
+              <p className="text-muted-foreground text-sm leading-relaxed text-center">
+                A mechanism for communities to pool commitments and resources for collective action and mutual support.
+              </p>
+              <Button asChild variant="outline" className="w-full bg-transparent">
+                <a
+                  href="https://www.grassrootseconomics.org/commitment-pooling"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Learn More
+                  <ExternalLink className="ml-2 w-4 h-4" />
+                </a>
+              </Button>
+            </Card>
+
+            <Card className="p-6 space-y-4 hover:shadow-lg transition-shadow">
+              <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
+                <Coins className="w-6 h-6 text-primary" />
+              </div>
+              <h3 className="text-xl font-bold text-center">Collaborative Finance</h3>
+              <p className="text-muted-foreground text-sm leading-relaxed text-center">
+                Resources and tools for building financial systems based on cooperation, not competition.
+              </p>
+              <Button asChild variant="outline" className="w-full bg-transparent">
+                <a href="https://cofi.informal.systems/resources" target="_blank" rel="noopener noreferrer">
+                  Explore Resources
+                  <ExternalLink className="ml-2 w-4 h-4" />
+                </a>
+              </Button>
+            </Card>
+
+            <Card className="p-6 space-y-4 hover:shadow-lg transition-shadow">
+              <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
+                <Sprout className="w-6 h-6 text-primary" />
+              </div>
+              <h3 className="text-xl font-bold text-center">MycoFi</h3>
+              <p className="text-muted-foreground text-sm leading-relaxed text-center">
+                Mycelial finance—reimagining economic systems through the lens of fungal networks and regenerative
+                principles.
+              </p>
+              <Button asChild variant="outline" className="w-full bg-transparent">
+                <a href="https://mycofi.earth" target="_blank" rel="noopener noreferrer">
+                  Visit MycoFi
+                  <ExternalLink className="ml-2 w-4 h-4" />
+                </a>
+              </Button>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}