fix: ensure footer has maximum contrast and visibility

Replace transparent footer with solid white and change badge background for better opacity.

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

app/globals.css

@@ -6,11 +6,11 @@
 :root {
   /* Updated to vibrant green color palette inspired by mycelial networks, forest growth, and living ecosystems */
   --background: oklch(0.98 0.01 145);
-  --foreground: oklch(0.15 0.04 155);
+  --foreground: oklch(0.08 0.02 155);
   --card: oklch(0.99 0.005 145);
-  --card-foreground: oklch(0.15 0.04 155);
+  --card-foreground: oklch(0.08 0.02 155);
   --popover: oklch(0.99 0.005 145);
-  --popover-foreground: oklch(0.15 0.04 155);
+  --popover-foreground: oklch(0.08 0.02 155);
   /* Primary: Vibrant emerald green (living mycelium) */
   --primary: oklch(0.55 0.18 155);
   --primary-foreground: oklch(0.99 0.005 145);
@@ -21,7 +21,7 @@
   --muted-foreground: oklch(0.35 0.04 155);
   /* Accent: Bright lime green (new growth) */
   --accent: oklch(0.72 0.2 135);
-  --accent-foreground: oklch(0.15 0.04 155);
+  --accent-foreground: oklch(0.08 0.02 155);
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.99 0.005 145);
   --border: oklch(0.85 0.03 145);
@@ -34,11 +34,11 @@
   --chart-5: oklch(0.6 0.14 140);
   --radius: 0.625rem;
   --sidebar: oklch(0.98 0.01 145);
-  --sidebar-foreground: oklch(0.15 0.04 155);
+  --sidebar-foreground: oklch(0.08 0.02 155);
   --sidebar-primary: oklch(0.55 0.18 155);
   --sidebar-primary-foreground: oklch(0.99 0.005 145);
   --sidebar-accent: oklch(0.92 0.02 145);
-  --sidebar-accent-foreground: oklch(0.15 0.04 155);
+  --sidebar-accent-foreground: oklch(0.08 0.02 155);
   --sidebar-border: oklch(0.85 0.03 145);
   --sidebar-ring: oklch(0.55 0.18 155);
 }

app/layout.tsx

@@ -17,6 +17,9 @@ export const metadata: Metadata = {
   description:
     "Exploring regenerative economic systems inspired by mycelial networks and nature's resource allocation algorithms",
   generator: "v0.app",
+  icons: {
+    icon: "/mycofi-logo.jpg",
+  },
 }
 
 export default function RootLayout({

components/book-showcase.tsx

@@ -16,7 +16,7 @@ export function BookShowcase() {
             <div className="relative aspect-[3/4] max-w-md mx-auto">
               <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-accent/20 rounded-lg blur-2xl transform scale-105" />
               <Image
-                src="/images/book-cover.png"
+                src="/images/exploring-mycofi-cover.png"
                 alt="Exploring MycoFi: Mycelial Design Patterns for Web3 and Beyond - Book Cover"
                 fill
                 className="object-contain relative z-10 drop-shadow-2xl"

components/content-section.tsx

@@ -1,4 +1,5 @@
 import { Card, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
 import Image from "next/image"
 
 export function ContentSection() {
@@ -23,14 +24,18 @@ export function ContentSection() {
           </div>
 
           <div className="grid md:grid-cols-2 gap-8 mb-12">
-            <Card className="border-2 hover:border-primary/50 transition-colors">
+            <Card className="border-2 hover:border-primary/50 transition-colors relative overflow-hidden">
-              <CardContent className="p-8">
+              <div className="absolute inset-0 opacity-40 pointer-events-none">
-                <div className="mb-4">
+                <Image src="/images/fractal-mushroom.png" alt="" fill className="object-cover" />
-                  <div className="inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm font-medium text-primary mb-4">
+              </div>
+              <div className="absolute inset-0 bg-gradient-to-br from-background/85 to-background/70 pointer-events-none" />
+              <CardContent className="p-8 relative z-10">
+                <div className="mb-4 text-center">
+                  <div className="inline-block rounded-lg bg-red-600/20 px-4 py-2 text-base font-semibold text-red-600 mb-4">
                     The Problem
                   </div>
                 </div>
-                <h3 className="text-2xl font-bold mb-4" style={{ fontFamily: "var(--font-crimson)" }}>
+                <h3 className="text-lg font-semibold mb-4 text-center" style={{ fontFamily: "var(--font-crimson)" }}>
                   Currency Monocultures
                 </h3>
                 <p className="text-muted-foreground leading-relaxed mb-4">
@@ -38,40 +43,60 @@ export function ContentSection() {
                   currencies that undermine collective health and indigenous wisdom.
                 </p>
                 <p className="text-muted-foreground leading-relaxed">
-                  The myth of "homo economicus" and the rational actor prioritizes individual gain over collective
+                  {
-                  wellbeing, threatening our continued existence on this planet.
+                    "By collapsing all value into the singular unit of bank-issued money, capitalism erodes all other sources of value. The immeasurable wealth provided by social and environmental benefits is extracted into dollars by the unyielding logic of profit-maximization."
+                  }
                 </p>
               </CardContent>
             </Card>
 
-            <Card className="border-2 hover:border-secondary/50 transition-colors">
+            <Card className="border-2 hover:border-secondary/50 transition-colors relative overflow-hidden">
-              <CardContent className="p-8">
+              <div className="absolute inset-0 opacity-40 pointer-events-none">
-                <div className="mb-4">
+                <Image src="/images/mycelial-network-green.png" alt="" fill className="object-cover" />
-                  <div className="inline-block rounded-lg bg-secondary/10 px-3 py-1 text-sm font-medium text-secondary mb-4">
+              </div>
-                    The Solution
+              <div className="absolute inset-0 bg-gradient-to-br from-background/85 to-background/70 pointer-events-none" />
+              <CardContent className="p-8 relative z-10">
+                <div className="mb-4 text-center">
+                  <div className="inline-block rounded-lg bg-secondary/20 px-4 py-2 text-base font-semibold text-secondary mb-4">
+                    The Opportunity
                   </div>
                 </div>
-                <h3 className="text-2xl font-bold mb-4" style={{ fontFamily: "var(--font-crimson)" }}>
+                <h3 className="text-lg font-semibold mb-4 text-center" style={{ fontFamily: "var(--font-crimson)" }}>
                   Permaculture Currencies
                 </h3>
                 <p className="text-muted-foreground leading-relaxed mb-4">
-                  Like mycelial networks that redistribute resources through underground connections, we can design
+                  Like mycelial networks that redistribute a plethora of resources through underground connections, we
-                  economic systems based on cooperation and mutual aid.
+                  can design multi-dimensional economic systems capable of representing multiple localized forms of
+                  value.
                 </p>
+                <p className="text-muted-foreground leading-relaxed mb-4">{""}</p>
                 <p className="text-muted-foreground leading-relaxed">
-                  Indigenous peoples lived within egalitarian networks ensuring no one's basic needs went unfulfilled—a
+                  By enabling the localized production of alternative currencies, purpose-driven groups of people can
-                  model we can learn from and adapt for our future.
+                  recognize commitments of care and societal regeneration, participating in economies based on
+                  cooperation and mutual aid.
                 </p>
               </CardContent>
             </Card>
           </div>
 
+          <div className="flex justify-center mb-12">
+            <Button asChild size="lg" className="bg-emerald-700 text-white !opacity-100 hover:bg-emerald-600">
+              <a
+                href="https://mycofi.substack.com/p/from-monoculture-to-permaculture"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Read more about Permaculture Currencies →
+              </a>
+            </Button>
+          </div>
+
           <Card className="border-2 bg-card">
             <CardContent className="p-8 md:p-12">
               <div className="grid md:grid-cols-2 gap-8 items-center">
                 <div>
                   <div className="inline-block rounded-lg bg-accent/10 px-3 py-1 text-sm font-medium text-accent mb-4">
-                    Nature's Wisdom
+                    Listening to Nature's Wisdom
                   </div>
                   <h3 className="text-3xl font-bold mb-4" style={{ fontFamily: "var(--font-crimson)" }}>
                     Learning from Fungi
@@ -102,53 +127,63 @@ export function ContentSection() {
           </Card>
 
           <div className="mt-12 grid md:grid-cols-2 gap-8">
-            <Card className="border-2 hover:border-primary/50 transition-colors bg-gradient-to-br from-card to-muted/20">
+            <Card className="border-2 hover:border-primary/50 transition-colors relative overflow-hidden">
-              <CardContent className="p-8">
+              <div className="absolute inset-0 opacity-45 pointer-events-none">
-                <div className="mb-4">
+                <Image src="/images/mushroom-forest.png" alt="" fill className="object-cover" />
-                  <div className="inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm font-medium text-primary mb-4">
+              </div>
+              <div className="absolute inset-0 bg-gradient-to-br from-background/80 to-background/65 pointer-events-none" />
+              <CardContent className="p-8 relative z-10 flex flex-col">
+                <div className="mb-4 text-center">
+                  <div className="inline-block rounded-lg bg-red-600/20 px-4 py-2 text-base font-semibold text-red-600 mb-4">
                     The Current Reality
                   </div>
                 </div>
-                <h3 className="text-2xl font-bold mb-4" style={{ fontFamily: "var(--font-crimson)" }}>
+                <h3 className="text-lg font-semibold mb-4 text-center" style={{ fontFamily: "var(--font-crimson)" }}>
                   Society is Trippin Balls
                 </h3>
-                <p className="text-muted-foreground leading-relaxed mb-4">
+                <p className="text-muted-foreground leading-relaxed mb-6">
                   Our collective hallucination of infinite growth on a finite planet has us chasing extractive
-                  capitalism down a rabbit hole of ecological collapse.
+                  capitalism down a rabbit hole of ecological collapse. Envisioning the end of the world before the end
+                  of capitalism is a societal-scale bad trip.
                 </p>
-                <a
+                <div className="mt-auto flex justify-center">
-                  href="https://trippinballs.lol"
+                  <Button asChild variant="secondary" className="bg-rose-500 text-white !opacity-100 hover:bg-rose-400">
-                  target="_blank"
+                    <a href="https://trippinballs.lol" target="_blank" rel="noopener noreferrer">
-                  rel="noopener noreferrer"
+                      Don't Be Trippin' →
-                  className="inline-flex items-center text-primary hover:text-primary/80 font-medium transition-colors"
+                    </a>
-                >
+                  </Button>
-                  Explore the trip →
+                </div>
-                </a>
               </CardContent>
             </Card>
 
-            <Card className="border-2 hover:border-secondary/50 transition-colors bg-gradient-to-br from-card to-secondary/5">
+            <Card className="border-2 hover:border-secondary/50 transition-colors relative overflow-hidden">
-              <CardContent className="p-8">
+              <div className="absolute inset-0 opacity-45 pointer-events-none">
-                <div className="mb-4">
+                <Image src="/images/dreamy-mushrooms.png" alt="" fill className="object-cover" />
-                  <div className="inline-block rounded-lg bg-secondary/10 px-3 py-1 text-sm font-medium text-secondary mb-4">
+              </div>
+              <div className="absolute inset-0 bg-gradient-to-br from-background/80 to-background/65 pointer-events-none" />
+              <CardContent className="p-8 relative z-10 flex flex-col">
+                <div className="mb-4 text-center">
+                  <div className="inline-block rounded-lg bg-secondary/20 px-4 py-2 text-base font-semibold text-secondary mb-4">
                     The Emerging Future
                   </div>
                 </div>
-                <h3 className="text-2xl font-bold mb-4" style={{ fontFamily: "var(--font-crimson)" }}>
+                <h3 className="text-lg font-semibold mb-4 text-center" style={{ fontFamily: "var(--font-crimson)" }}>
                   Post-Appitalism Awaits
                 </h3>
-                <p className="text-muted-foreground leading-relaxed mb-4">
+                <p className="text-muted-foreground leading-relaxed mb-6">
-                  Beyond post-capitalism lies post-appitalism—where decentralized applications enable regenerative
+                  A key part of post-capitalism is post-APPitalism—where decentralized applications dissolve the silos of traditional app models (premised on capitalist value extraction) to enable new technologies for collective flourishing.
-                  economies, mutual aid networks, and collective flourishing.
                 </p>
-                <a
+                <div className="mt-auto flex justify-center">
-                  href="https://post-appitalism.app"
+                  <Button
-                  target="_blank"
+                    asChild
-                  rel="noopener noreferrer"
+                    variant="secondary"
-                  className="inline-flex items-center text-secondary hover:text-secondary/80 font-medium transition-colors"
+                    className="bg-emerald-700 text-white !opacity-100 hover:bg-emerald-600"
-                >
+                  >
-                  Enter the future →
+                    <a href="https://post-appitalism.app" target="_blank" rel="noopener noreferrer">
-                </a>
+                      Enter the future →
+                    </a>
+                  </Button>
+                </div>
               </CardContent>
             </Card>
           </div>

components/cta-section.tsx

@@ -11,7 +11,7 @@ export function CTASection() {
               className="text-4xl md:text-5xl font-bold mb-4 text-balance"
               style={{ fontFamily: "var(--font-crimson)" }}
             >
-              Explore the Myco-Economic Future
+              Welcome to the Myco-Economic Future
             </h2>
             <p className="text-lg text-muted-foreground text-balance">
               Dive deeper into regenerative economics and permaculture currencies

components/footer.tsx

@@ -3,31 +3,34 @@ import { Sprout } from "lucide-react"
 
 export function Footer() {
   return (
-    <footer className="border-t border-border bg-muted/30">
+    <footer className="border-t border-border bg-white">
       <div className="container py-12">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           <div className="md:col-span-2">
-            <div className="text-2xl font-bold mb-3 text-primary" style={{ fontFamily: "var(--font-crimson)" }}>
+            <div
+              className="text-2xl font-bold mb-3 text-primary !opacity-100"
+              style={{ fontFamily: "var(--font-crimson)" }}
+            >
               MycoFi
             </div>
-            <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-muted px-4 py-2 text-sm text-muted-foreground">
+            <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-emerald-50 px-4 py-2 text-sm text-black !opacity-100">
               <Sprout className="h-4 w-4 text-secondary" />
               <span>Regenerative Economics for a Living Future</span>
             </div>
-            <p className="text-sm text-muted-foreground max-w-md leading-relaxed">
+            <p className="text-sm text-black !opacity-100 max-w-md leading-relaxed">
               Exploring regenerative economic systems inspired by mycelial networks and nature's resource allocation
               algorithms.
             </p>
           </div>
 
           <div>
-            <h3 className="font-semibold mb-3">Resources</h3>
+            <h3 className="font-semibold mb-3 text-black !opacity-100">Resources</h3>
             <ul className="space-y-2 text-sm">
               <li>
                 <Link
                   href="https://book.mycofi.earth"
                   target="_blank"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
+                  className="text-black !opacity-100 hover:text-primary transition-colors"
                 >
                   The Book
                 </Link>
@@ -36,7 +39,7 @@ export function Footer() {
                 <Link
                   href="https://allthingsdecent.substack.com/p/mycoeconomics-and-permaculture-currencies"
                   target="_blank"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
+                  className="text-black !opacity-100 hover:text-primary transition-colors"
                 >
                   Substack Article
                 </Link>
@@ -45,7 +48,7 @@ export function Footer() {
                 <Link
                   href="https://shop.mycofi.earth"
                   target="_blank"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
+                  className="text-black !opacity-100 hover:text-primary transition-colors"
                 >
                   Shop
                 </Link>
@@ -54,13 +57,13 @@ export function Footer() {
           </div>
 
           <div>
-            <h3 className="font-semibold mb-3">Connect</h3>
+            <h3 className="font-semibold mb-3 text-black !opacity-100">Connect</h3>
             <ul className="space-y-2 text-sm">
               <li>
                 <Link
                   href="https://links.mycofi.earth"
                   target="_blank"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
+                  className="text-black !opacity-100 hover:text-primary transition-colors"
                 >
                   All Links
                 </Link>
@@ -69,7 +72,7 @@ export function Footer() {
           </div>
         </div>
 
-        <div className="mt-12 pt-8 border-t border-border text-center text-sm text-muted-foreground">
+        <div className="mt-12 pt-8 border-t border-border text-center text-sm text-black !opacity-100">
           <p>© {new Date().getFullYear()} MycoFi. Building regenerative futures together.</p>
         </div>
       </div>

components/header.tsx

@@ -1,11 +1,19 @@
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
+import Image from "next/image"
 
 export function Header() {
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-16 items-center justify-between">
+      <div className="container flex h-16 items-center justify-between px-4">
-        <Link href="/" className="flex items-center gap-2">
+        <Link href="/" className="flex items-center gap-3">
+          <Image
+            src="/mycofi-logo.jpg"
+            alt="MycoFi Logo"
+            width={40}
+            height={40}
+            className="transition-transform hover:scale-110"
+          />
           <div className="text-2xl font-bold tracking-tight text-primary" style={{ fontFamily: "var(--font-crimson)" }}>
             MycoFi
           </div>

components/hero-section.tsx

@@ -15,33 +15,36 @@ export function HeroSection() {
       </div>
 
       <div className="container">
-        <div className="mx-auto max-w-4xl text-center">
+        <div className="mx-auto max-w-6xl">
-          <h1
+          {/* Text content */}
-            className="mb-6 text-5xl md:text-7xl font-bold tracking-tight text-balance"
+          <div className="text-center">
-            style={{ fontFamily: "var(--font-crimson)" }}
+            <h1
-          >
+              className="mb-6 text-4xl md:text-6xl font-bold tracking-tight text-balance"
-            Exploring <span className="text-primary">MycoFi</span>: Mycelial Design Patterns for Web3 & Beyond
+              style={{ fontFamily: "var(--font-crimson)" }}
-          </h1>
+            >
+              Exploring <span className="text-primary">MycoFi</span>: Mycelial Design Patterns for Web3 & Beyond
+            </h1>
 
-          <p className="mb-8 text-lg md:text-xl text-muted-foreground text-balance leading-relaxed max-w-3xl mx-auto">
+            <p className="mb-8 text-lg md:text-xl text-muted-foreground text-balance leading-relaxed max-w-3xl mx-auto">
-            Exploring economic systems inspired by mycelial networks—where cooperation, redistribution, and mutual aid
+              Exploring economic systems inspired by mycelial networks—where cooperation, redistribution, and mutual aid
-            create resilient, regenerative communities.
+              create resilient, regenerative communities.
-          </p>
+            </p>
 
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <Button asChild size="lg" className="text-base">
+              <Button asChild size="lg" className="text-base">
-              <Link href="https://book.mycofi.earth" target="_blank">
+                <Link href="https://book.mycofi.earth" target="_blank">
-                Read the Book
+                  Read the Book
-              </Link>
+                </Link>
-            </Button>
+              </Button>
-            <Button asChild size="lg" variant="outline" className="text-base bg-transparent">
+              <Button asChild size="lg" variant="outline" className="text-base bg-transparent">
-              <Link
+                <Link
-                href="https://allthingsdecent.substack.com/p/mycoeconomics-and-permaculture-currencies"
+                  href="https://allthingsdecent.substack.com/p/mycoeconomics-and-permaculture-currencies"
-                target="_blank"
+                  target="_blank"
-              >
+                >
-                Learn More
+                  Learn More
-              </Link>
+                </Link>
-            </Button>
+              </Button>
+            </div>
           </div>
         </div>
 

components/hyphal-canvas.tsx

@@ -16,6 +16,8 @@ interface HyphalNode {
   connections: HyphalNode[]
   opacity: number
   isPersistent: boolean
+  createdAt: number
+  connectionDensity: number
 }
 
 export function HyphalCanvas() {
@@ -24,6 +26,17 @@ export function HyphalCanvas() {
   const mouseRef = useRef({ x: 0, y: 0, isMoving: false })
   const animationRef = useRef<number>()
 
+  const getDensityColor = (density: number, opacity: number): string => {
+    // Map density (0-10+) to hue (0-300 degrees)
+    // Low density = red/orange (0-60), high density = blue/violet (240-300)
+    const normalizedDensity = Math.min(density / 10, 1)
+    const hue = normalizedDensity * 300
+    // Muted colors: lower saturation (40-50%) and medium lightness (50-60%)
+    const saturation = 40 + normalizedDensity * 10
+    const lightness = 50 + normalizedDensity * 10
+    return `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`
+  }
+
   useEffect(() => {
     const canvas = canvasRef.current
     if (!canvas) return
@@ -65,6 +78,8 @@ export function HyphalCanvas() {
         connections: [],
         opacity: 1,
         isPersistent: false,
+        createdAt: Date.now(),
+        connectionDensity: 0,
       }
     }
 
@@ -81,10 +96,8 @@ export function HyphalCanvas() {
     const createMeshConnections = () => {
       nodesRef.current.forEach((node, i) => {
         const maturityFactor = node.age / node.maxAge
-        // Reduced max connections from 6/3 to 4/2
         const maxConnections = node.isPersistent ? 7 : maturityFactor > 0.6 ? 4 : 2
         const connectionDistance = maturityFactor > 0.6 ? 80 : 50
-        // Increased probability threshold to reduce connections
         const connectionProbability = maturityFactor > 0.6 ? 0.97 : 0.99
 
         if (node.age < 20 || node.connections.length >= maxConnections) return
@@ -119,12 +132,18 @@ export function HyphalCanvas() {
       x2: number,
       y2: number,
       opacity: number,
+      color: string,
+      fragmentationFactor: number,
     ) => {
       const dx = x2 - x1
       const dy = y2 - y1
       const distance = Math.sqrt(dx * dx + dy * dy)
 
-      // For short distances, draw straight line
+      if (fragmentationFactor > 0.5 && Math.random() > fragmentationFactor) {
+        // Skip drawing some connections to create fragmentation effect
+        return
+      }
+
       if (distance < 30) {
         ctx.beginPath()
         ctx.moveTo(x1, y1)
@@ -133,7 +152,6 @@ export function HyphalCanvas() {
         return
       }
 
-      // Create branching path with 1-2 intermediate points
       const numBranches = distance > 60 ? 2 : 1
       const points = [{ x: x1, y: y1 }]
 
@@ -141,7 +159,6 @@ export function HyphalCanvas() {
         const t = (i + 1) / (numBranches + 1)
         const midX = x1 + dx * t
         const midY = y1 + dy * t
-        // Add perpendicular offset for organic branching
         const perpX = -dy / distance
         const perpY = dx / distance
         const offset = (Math.random() - 0.5) * distance * 0.3
@@ -153,7 +170,6 @@ export function HyphalCanvas() {
 
       points.push({ x: x2, y: y2 })
 
-      // Draw smooth curve through points
       ctx.beginPath()
       ctx.moveTo(points[0].x, points[0].y)
 
@@ -171,6 +187,8 @@ export function HyphalCanvas() {
       ctx.fillStyle = "rgba(250, 248, 245, 0.08)"
       ctx.fillRect(0, 0, canvas.width, canvas.height)
 
+      const currentTime = Date.now()
+
       if (mouseRef.current.isMoving && Math.random() > 0.65) {
         const burstCount = Math.floor(Math.random() * 2) + 1
         const nearbyPersistent = findNearbyPersistentNodes(mouseRef.current.x, mouseRef.current.y, 100)
@@ -196,9 +214,17 @@ export function HyphalCanvas() {
         createMeshConnections()
       }
 
+      nodesRef.current.forEach((node) => {
+        node.connectionDensity = node.connections.length
+      })
+
       nodesRef.current = nodesRef.current.filter((node) => {
         node.age++
 
+        const timeSinceCreation = currentTime - node.createdAt
+        const fadeOutDuration = 30000 // 30 seconds
+        const fadeOutFactor = Math.min(timeSinceCreation / fadeOutDuration, 1)
+
         if (!node.isPersistent) {
           node.angle += node.angleChangeRate
           if (Math.random() > 0.92) {
@@ -221,14 +247,18 @@ export function HyphalCanvas() {
 
         const ageFactor = node.age / node.maxAge
         if (node.isPersistent) {
-          node.opacity = 0.15
+          node.opacity = Math.max(0, 0.15 * (1 - fadeOutFactor))
         } else if (ageFactor >= 1) {
           node.isPersistent = true
-          node.opacity = 0.15
+          node.opacity = 0.15 * (1 - fadeOutFactor)
           node.vx = 0
           node.vy = 0
         } else {
-          node.opacity = Math.max(0.15, 1 - ageFactor * 0.85)
+          node.opacity = Math.max(0, (1 - ageFactor * 0.85) * (1 - fadeOutFactor * 0.5))
+        }
+
+        if (fadeOutFactor >= 1) {
+          return false
         }
 
         if (
@@ -244,12 +274,14 @@ export function HyphalCanvas() {
         }
 
         if (node.parent) {
-          const gradient = ctx.createLinearGradient(node.parent.x, node.parent.y, node.x, node.y)
+          const avgDensity = (node.connectionDensity + node.parent.connectionDensity) / 2
           const parentOpacity = node.parent.opacity * 0.5
           const nodeOpacity = node.opacity * 0.5
-          gradient.addColorStop(0, `rgba(120, 120, 120, ${parentOpacity})`)
+
-          gradient.addColorStop(0.5, `rgba(120, 120, 120, ${(parentOpacity + nodeOpacity) / 2})`)
+          const gradient = ctx.createLinearGradient(node.parent.x, node.parent.y, node.x, node.y)
-          gradient.addColorStop(1, `rgba(120, 120, 120, ${nodeOpacity})`)
+          gradient.addColorStop(0, getDensityColor(node.parent.connectionDensity, parentOpacity))
+          gradient.addColorStop(0.5, getDensityColor(avgDensity, (parentOpacity + nodeOpacity) / 2))
+          gradient.addColorStop(1, getDensityColor(node.connectionDensity, nodeOpacity))
 
           ctx.strokeStyle = gradient
           ctx.lineWidth = 2.5 + Math.random() * 1.5
@@ -262,15 +294,31 @@ export function HyphalCanvas() {
 
         node.connections.forEach((connected) => {
           if (nodesRef.current.includes(connected)) {
+            const avgDensity = (node.connectionDensity + connected.connectionDensity) / 2
             const avgOpacity = ((node.opacity + connected.opacity) / 2) * 0.35
-            ctx.strokeStyle = `rgba(120, 120, 120, ${avgOpacity})`
+
+            // Calculate fragmentation based on time
+            const nodeFragmentation = Math.min((currentTime - node.createdAt) / fadeOutDuration, 1)
+            const connectedFragmentation = Math.min((currentTime - connected.createdAt) / fadeOutDuration, 1)
+            const avgFragmentation = (nodeFragmentation + connectedFragmentation) / 2
+
+            ctx.strokeStyle = getDensityColor(avgDensity, avgOpacity)
             ctx.lineWidth = 1.5
             ctx.lineCap = "round"
-            drawBranchingConnection(ctx, node.x, node.y, connected.x, connected.y, avgOpacity)
+            drawBranchingConnection(
+              ctx,
+              node.x,
+              node.y,
+              connected.x,
+              connected.y,
+              avgOpacity,
+              ctx.strokeStyle,
+              avgFragmentation,
+            )
           }
         })
 
-        ctx.fillStyle = `rgba(120, 120, 120, ${node.opacity * 0.7})`
+        ctx.fillStyle = getDensityColor(node.connectionDensity, node.opacity * 0.7)
         ctx.beginPath()
         ctx.arc(node.x, node.y, 2.5, 0, Math.PI * 2)
         ctx.fill()

components/image-gallery.tsx

@@ -1,59 +1,66 @@
-import Image from "next/image"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { ExternalLink } from "lucide-react"
 
 export function ImageGallery() {
   return (
     <section className="py-16 bg-muted/30">
       <div className="container mx-auto px-4">
-        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">The Mycelial Vision</h2>
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">The Mycelial Vision</h2>
-        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-6xl mx-auto">
+        <p className="text-center text-lg mb-12 max-w-3xl mx-auto">
-          <div className="relative aspect-square rounded-lg overflow-hidden">
+          Exploring the intersection of natural systems, regenerative economics, and decentralized coordination
-            <Image
+        </p>
-              src="/images/mushroom-gills.jpg"
+
-              alt="Macro view of mushroom gills showing natural hyphal patterns"
+        <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
-              fill
+          <Card className="overflow-hidden">
-              className="object-cover hover:scale-105 transition-transform duration-300"
+            <CardHeader>
-            />
+              <CardTitle className="text-2xl text-secondary">Compost Capitalism</CardTitle>
-          </div>
+            </CardHeader>
-          <div className="relative aspect-square rounded-lg overflow-hidden">
+            <CardContent className="space-y-4">
-            <Image
+              <p className="leading-relaxed">
-              src="/images/dreamy-mushrooms.png"
+                Just as mycelium breaks down dead matter to create fertile soil, we can transform dying economic structures into nourishment for new regenerative systems. Composting capitalism invokes the cycles of decay and renewal inherent in natural ecosystems, recognizing that institutional senescence and the end of extractive systems creates the conditions for regenerative abundance.
-              alt="Ethereal mushrooms in golden light"
+              </p>
-              fill
+              
-              className="object-cover hover:scale-105 transition-transform duration-300"
+              <div className="pt-4">
-            />
+                <Button asChild variant="secondary" className="w-full">
-          </div>
+                  <a
-          <div className="relative aspect-square rounded-lg overflow-hidden">
+                    href="https://compostcapitalism.xyz"
-            <Image
+                    target="_blank"
-              src="/images/mycelial-network-blue.png"
+                    rel="noopener noreferrer"
-              alt="Digital visualization of mycelial network connections"
+                    className="flex items-center justify-center gap-2"
-              fill
+                  >
-              className="object-cover hover:scale-105 transition-transform duration-300"
+                    Compost Capitalism
-            />
+                    <ExternalLink className="h-4 w-4" />
-          </div>
+                  </a>
-          <div className="relative aspect-square rounded-lg overflow-hidden">
+                </Button>
-            <Image
+              </div>
-              src="/images/fractal-mushroom.png"
+            </CardContent>
-              alt="Fractal art inspired by mushroom growth patterns"
+          </Card>
-              fill
+
-              className="object-cover hover:scale-105 transition-transform duration-300"
+          <Card className="overflow-hidden">
-            />
+            <CardHeader>
-          </div>
+              <CardTitle className="text-2xl text-secondary">Psilocybernetics</CardTitle>
-          <div className="relative aspect-square rounded-lg overflow-hidden">
+            </CardHeader>
-            <Image
+            <CardContent className="space-y-4">
-              src="/images/mushroom-forest.png"
+              <p className="leading-relaxed">
-              alt="Psychedelic mushroom forest with interconnected mycelial roots"
+                Psilocybernetics explores how mycelial wisdom and cybernetic systems thinking converge to create new models of collective coordination. Like mycelial networks that process distributed information, we can design systems that enhance collective intelligence and distributed decision-making with new forms of economy, democracy, and technology.          
-              fill
+              </p>
-              className="object-cover hover:scale-105 transition-transform duration-300"
+              
-            />
+              <div className="pt-4">
-          </div>
+                <Button asChild variant="secondary" className="w-full">
-          <div className="relative aspect-square rounded-lg overflow-hidden">
+                  <a
-            <Image
+                    href="https://jeffemmett.com/presentations#psilocybernetics"
-              src="/images/always-has-been.png"
+                    target="_blank"
-              alt="The revolution will be mycelial - always has been"
+                    rel="noopener noreferrer"
-              fill
+                    className="flex items-center justify-center gap-2"
-              className="object-cover hover:scale-105 transition-transform duration-300"
+                  >
-            />
+                    Explore Psilocybernetics
-          </div>
+                    <ExternalLink className="h-4 w-4" />
+                  </a>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
         </div>
       </div>
     </section>

components/mycofi-intro.tsx

@@ -23,7 +23,7 @@ export function MycoFiIntro() {
       </div>
 
       <div className="container relative z-10">
-        <div className="mx-auto max-w-4xl">
+        <div className="mx-auto max-w-5xl">
           <Card className="border-2 border-primary/20 bg-gradient-to-br from-background via-primary/5 to-secondary/5 shadow-lg">
             <CardContent className="p-8 md:p-12">
               <div className="flex items-start gap-4 mb-6">
@@ -37,20 +37,20 @@ export function MycoFiIntro() {
                   >
                     What is MycoFi?
                   </h2>
-                  <p className="text-lg text-muted-foreground leading-relaxed mb-4">
-                    <strong className="text-foreground">MycoFi</strong> (Mycelial Finance) is an exploration of{" "}
-                    <strong className="text-foreground">mycoeconomics</strong>—economic systems inspired by the
-                    intelligence of fungal networks. Just as mycelium redistributes nutrients through underground
-                    connections, MycoFi envisions decentralized financial systems built on cooperation, mutual aid, and
-                    regenerative principles.
-                  </p>
-                  <p className="text-lg text-muted-foreground leading-relaxed">
-                    By emulating nature's evolutionary resource allocation algorithms, we can design Web3 protocols and
-                    economic structures that prioritize collective wellbeing over extractive growth—moving from currency
-                    monocultures to diverse, resilient permaculture currencies.
-                  </p>
                 </div>
               </div>
+              <p className="text-lg text-muted-foreground leading-relaxed mb-4">
+                <strong className="text-foreground">MycoFi</strong> (Mycelial Finance) is an exploration of{" "}
+                <strong className="text-foreground">mycoeconomics</strong>—economic systems inspired by the intelligence
+                of fungal networks. Just as mycelium redistributes nutrients through underground connections, MycoFi
+                envisions decentralized financial systems built on cooperation, mutual aid, and regenerative principles.
+              </p>
+              <p className="text-lg text-muted-foreground leading-relaxed">
+                By emulating nature's evolutionary resource allocation algorithms, we can design Web3 protocols and
+                economic structures that prioritize collective wellbeing over extractive growth—moving from currency
+                monocultures to diverse, resilient permaculture currencies.
+              </p>
+              {/* </CHANGE> */}
             </CardContent>
           </Card>
         </div>