jeffemmett
/
mycofi-earth-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
v0 2025-10-08 20:24:13 +00:00
parent d412dc2d05
commit 3d738d5eb7
13 changed files with 282 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/globals.css
View File

@ -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);
}

3
app/layout.tsx
View File

@ -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({

2
components/book-showcase.tsx
View File

@ -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"

133
components/content-section.tsx
View File

@ -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">
<CardContent className="p-8">
<div className="mb-4">
<div className="inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm font-medium text-primary mb-4">
<Card className="border-2 hover:border-primary/50 transition-colors relative overflow-hidden">
<div className="absolute inset-0 opacity-40 pointer-events-none">
<Image src="/images/fractal-mushroom.png" alt="" fill className="object-cover" />
</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">
<CardContent className="p-8">
<div className="mb-4">
<div className="inline-block rounded-lg bg-secondary/10 px-3 py-1 text-sm font-medium text-secondary mb-4">
The Solution
<Card className="border-2 hover:border-secondary/50 transition-colors relative overflow-hidden">
<div className="absolute inset-0 opacity-40 pointer-events-none">
<Image src="/images/mycelial-network-green.png" alt="" fill className="object-cover" />
</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-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
economic systems based on cooperation and mutual aid.
Like mycelial networks that redistribute a plethora of resources through underground connections, we
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
model we can learn from and adapt for our future.
By enabling the localized production of alternative currencies, purpose-driven groups of people can
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">
<CardContent className="p-8">
<div className="mb-4">
<div className="inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm font-medium text-primary mb-4">
<Card className="border-2 hover:border-primary/50 transition-colors relative overflow-hidden">
<div className="absolute inset-0 opacity-45 pointer-events-none">
<Image src="/images/mushroom-forest.png" alt="" fill className="object-cover" />
</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
href="https://trippinballs.lol"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center text-primary hover:text-primary/80 font-medium transition-colors"
>
Explore the trip →
</a>
<div className="mt-auto flex justify-center">
<Button asChild variant="secondary" className="bg-rose-500 text-white !opacity-100 hover:bg-rose-400">
<a href="https://trippinballs.lol" target="_blank" rel="noopener noreferrer">
Don't Be Trippin' →
</a>
</Button>
</div>
</CardContent>
</Card>
<Card className="border-2 hover:border-secondary/50 transition-colors bg-gradient-to-br from-card to-secondary/5">
<CardContent className="p-8">
<div className="mb-4">
<div className="inline-block rounded-lg bg-secondary/10 px-3 py-1 text-sm font-medium text-secondary mb-4">
<Card className="border-2 hover:border-secondary/50 transition-colors relative overflow-hidden">
<div className="absolute inset-0 opacity-45 pointer-events-none">
<Image src="/images/dreamy-mushrooms.png" alt="" fill className="object-cover" />
</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">
Beyond post-capitalism lies post-appitalism—where decentralized applications enable regenerative
economies, mutual aid networks, and collective flourishing.
<p className="text-muted-foreground leading-relaxed mb-6">
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.
</p>
<a
href="https://post-appitalism.app"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center text-secondary hover:text-secondary/80 font-medium transition-colors"
>
Enter the future →
</a>
<div className="mt-auto flex justify-center">
<Button
asChild
variant="secondary"
className="bg-emerald-700 text-white !opacity-100 hover:bg-emerald-600"
>
<a href="https://post-appitalism.app" target="_blank" rel="noopener noreferrer">
Enter the future →
</a>
</Button>
</div>
</CardContent>
</Card>
</div>

2
components/cta-section.tsx
View File

@ -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

25
components/footer.tsx
View File

@ -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>

12
components/header.tsx
View File

@ -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">
<Link href="/" className="flex items-center gap-2">
<div className="container flex h-16 items-center justify-between px-4">
<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>

53
components/hero-section.tsx
View File

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

80
components/hyphal-canvas.tsx
View File

@ -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})`)
gradient.addColorStop(1, `rgba(120, 120, 120, ${nodeOpacity})`)
const gradient = ctx.createLinearGradient(node.parent.x, node.parent.y, node.x, node.y)
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()

109
components/image-gallery.tsx
View File

@ -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>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-6xl mx-auto">
<div className="relative aspect-square rounded-lg overflow-hidden">
<Image
src="/images/mushroom-gills.jpg"
alt="Macro view of mushroom gills showing natural hyphal patterns"
fill
className="object-cover hover:scale-105 transition-transform duration-300"
/>
</div>
<div className="relative aspect-square rounded-lg overflow-hidden">
<Image
src="/images/dreamy-mushrooms.png"
alt="Ethereal mushrooms in golden light"
fill
className="object-cover hover:scale-105 transition-transform duration-300"
/>
</div>
<div className="relative aspect-square rounded-lg overflow-hidden">
<Image
src="/images/mycelial-network-blue.png"
alt="Digital visualization of mycelial network connections"
fill
className="object-cover hover:scale-105 transition-transform duration-300"
/>
</div>
<div className="relative aspect-square rounded-lg overflow-hidden">
<Image
src="/images/fractal-mushroom.png"
alt="Fractal art inspired by mushroom growth patterns"
fill
className="object-cover hover:scale-105 transition-transform duration-300"
/>
</div>
<div className="relative aspect-square rounded-lg overflow-hidden">
<Image
src="/images/mushroom-forest.png"
alt="Psychedelic mushroom forest with interconnected mycelial roots"
fill
className="object-cover hover:scale-105 transition-transform duration-300"
/>
</div>
<div className="relative aspect-square rounded-lg overflow-hidden">
<Image
src="/images/always-has-been.png"
alt="The revolution will be mycelial - always has been"
fill
className="object-cover hover:scale-105 transition-transform duration-300"
/>
</div>
<h2 className="text-3xl md:text-4xl font-bold text-center mb-4">The Mycelial Vision</h2>
<p className="text-center text-lg mb-12 max-w-3xl mx-auto">
Exploring the intersection of natural systems, regenerative economics, and decentralized coordination
</p>
<div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<Card className="overflow-hidden">
<CardHeader>
<CardTitle className="text-2xl text-secondary">Compost Capitalism</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="leading-relaxed">
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.
</p>
<div className="pt-4">
<Button asChild variant="secondary" className="w-full">
<a
href="https://compostcapitalism.xyz"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center gap-2"
>
Compost Capitalism
<ExternalLink className="h-4 w-4" />
</a>
</Button>
</div>
</CardContent>
</Card>
<Card className="overflow-hidden">
<CardHeader>
<CardTitle className="text-2xl text-secondary">Psilocybernetics</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="leading-relaxed">
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.
</p>
<div className="pt-4">
<Button asChild variant="secondary" className="w-full">
<a
href="https://jeffemmett.com/presentations#psilocybernetics"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center gap-2"
>
Explore Psilocybernetics
<ExternalLink className="h-4 w-4" />
</a>
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
</section>

26
components/mycofi-intro.tsx
View File

@ -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>

BIN
public/images/exploring-mycofi-cover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 756 KiB

BIN
public/mycofi-logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB