Initialized repository for project MycoFi website
Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
This commit is contained in:
v0
commit
00d8ccb4fc
|
|
@ -0,0 +1,27 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
# MycoFi website
|
||||
|
||||
*Automatically synced with your [v0.app](https://v0.app) deployments*
|
||||
|
||||
[](https://vercel.com/jeff-emmetts-projects/v0-myco-fi-website)
|
||||
[](https://v0.app/chat/projects/3E0ktWenMaD)
|
||||
|
||||
## Overview
|
||||
|
||||
This repository will stay in sync with your deployed chats on [v0.app](https://v0.app).
|
||||
Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app).
|
||||
|
||||
## Deployment
|
||||
|
||||
Your project is live at:
|
||||
|
||||
**[https://vercel.com/jeff-emmetts-projects/v0-myco-fi-website](https://vercel.com/jeff-emmetts-projects/v0-myco-fi-website)**
|
||||
|
||||
## Build your app
|
||||
|
||||
Continue building your app on:
|
||||
|
||||
**[https://v0.app/chat/projects/3E0ktWenMaD](https://v0.app/chat/projects/3E0ktWenMaD)**
|
||||
|
||||
## How It Works
|
||||
|
||||
1. Create and modify your project using [v0.app](https://v0.app)
|
||||
2. Deploy your chats from the v0 interface
|
||||
3. Changes are automatically pushed to this repository
|
||||
4. Vercel deploys the latest version from this repository
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
: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.2 0.03 155);
|
||||
--card: oklch(0.99 0.005 145);
|
||||
--card-foreground: oklch(0.2 0.03 155);
|
||||
--popover: oklch(0.99 0.005 145);
|
||||
--popover-foreground: oklch(0.2 0.03 155);
|
||||
/* Primary: Vibrant emerald green (living mycelium) */
|
||||
--primary: oklch(0.55 0.18 155);
|
||||
--primary-foreground: oklch(0.99 0.005 145);
|
||||
/* Secondary: Deep forest green (mature growth) */
|
||||
--secondary: oklch(0.45 0.12 145);
|
||||
--secondary-foreground: oklch(0.99 0.005 145);
|
||||
--muted: oklch(0.92 0.02 145);
|
||||
--muted-foreground: oklch(0.5 0.03 155);
|
||||
/* Accent: Bright lime green (new growth) */
|
||||
--accent: oklch(0.72 0.2 135);
|
||||
--accent-foreground: oklch(0.2 0.03 155);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.99 0.005 145);
|
||||
--border: oklch(0.85 0.03 145);
|
||||
--input: oklch(0.85 0.03 145);
|
||||
--ring: oklch(0.55 0.18 155);
|
||||
--chart-1: oklch(0.55 0.18 155);
|
||||
--chart-2: oklch(0.72 0.2 135);
|
||||
--chart-3: oklch(0.45 0.12 145);
|
||||
--chart-4: oklch(0.65 0.16 165);
|
||||
--chart-5: oklch(0.6 0.14 140);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.98 0.01 145);
|
||||
--sidebar-foreground: oklch(0.2 0.03 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.2 0.03 155);
|
||||
--sidebar-border: oklch(0.85 0.03 145);
|
||||
--sidebar-ring: oklch(0.55 0.18 155);
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Dark mode with deep forest and bioluminescent green tones */
|
||||
--background: oklch(0.15 0.03 155);
|
||||
--foreground: oklch(0.95 0.01 145);
|
||||
--card: oklch(0.18 0.03 155);
|
||||
--card-foreground: oklch(0.95 0.01 145);
|
||||
--popover: oklch(0.18 0.03 155);
|
||||
--popover-foreground: oklch(0.95 0.01 145);
|
||||
--primary: oklch(0.65 0.2 145);
|
||||
--primary-foreground: oklch(0.15 0.03 155);
|
||||
--secondary: oklch(0.55 0.15 155);
|
||||
--secondary-foreground: oklch(0.95 0.01 145);
|
||||
--muted: oklch(0.25 0.03 155);
|
||||
--muted-foreground: oklch(0.65 0.02 145);
|
||||
--accent: oklch(0.75 0.22 135);
|
||||
--accent-foreground: oklch(0.15 0.03 155);
|
||||
--destructive: oklch(0.396 0.141 25.723);
|
||||
--destructive-foreground: oklch(0.95 0.01 145);
|
||||
--border: oklch(0.25 0.03 155);
|
||||
--input: oklch(0.25 0.03 155);
|
||||
--ring: oklch(0.65 0.2 145);
|
||||
--chart-1: oklch(0.65 0.2 145);
|
||||
--chart-2: oklch(0.75 0.22 135);
|
||||
--chart-3: oklch(0.55 0.15 155);
|
||||
--chart-4: oklch(0.7 0.18 165);
|
||||
--chart-5: oklch(0.6 0.16 140);
|
||||
--sidebar: oklch(0.18 0.03 155);
|
||||
--sidebar-foreground: oklch(0.95 0.01 145);
|
||||
--sidebar-primary: oklch(0.65 0.2 145);
|
||||
--sidebar-primary-foreground: oklch(0.15 0.03 155);
|
||||
--sidebar-accent: oklch(0.25 0.03 155);
|
||||
--sidebar-accent-foreground: oklch(0.95 0.01 145);
|
||||
--sidebar-border: oklch(0.25 0.03 155);
|
||||
--sidebar-ring: oklch(0.65 0.2 145);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
/* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import type React from "react"
|
||||
import type { Metadata } from "next"
|
||||
import { GeistSans } from "geist/font/sans"
|
||||
import { Crimson_Text } from "next/font/google"
|
||||
import { Analytics } from "@vercel/analytics/next"
|
||||
import { Suspense } from "react"
|
||||
import "./globals.css"
|
||||
|
||||
const crimsonText = Crimson_Text({
|
||||
weight: ["400", "600", "700"],
|
||||
subsets: ["latin"],
|
||||
variable: "--font-crimson",
|
||||
})
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "MycoFi - Mycoeconomics & Permaculture Currencies",
|
||||
description:
|
||||
"Exploring regenerative economic systems inspired by mycelial networks and nature's resource allocation algorithms",
|
||||
generator: "v0.app",
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`font-sans ${GeistSans.variable} ${crimsonText.variable}`}>
|
||||
<Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
|
||||
<Analytics />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { Header } from "@/components/header"
|
||||
import { HeroSection } from "@/components/hero-section"
|
||||
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 { CTASection } from "@/components/cta-section"
|
||||
import { Footer } from "@/components/footer"
|
||||
import { HyphalCanvas } from "@/components/hyphal-canvas"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<HyphalCanvas />
|
||||
<Header />
|
||||
<main className="flex-1 relative z-10">
|
||||
<HeroSection />
|
||||
<MycoFiIntro />
|
||||
<BookShowcase />
|
||||
<ContentSection />
|
||||
<ImageGallery />
|
||||
<CTASection />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": true,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "app/globals.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"iconLibrary": "lucide"
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import Image from "next/image"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export function BookShowcase() {
|
||||
return (
|
||||
<section className="relative py-24 overflow-hidden">
|
||||
{/* Background pattern */}
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<Image src="/images/mycelial-network-green.png" alt="" fill className="object-cover" />
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
|
||||
{/* Book Cover */}
|
||||
<div className="relative">
|
||||
<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"
|
||||
alt="Exploring MycoFi: Mycelial Design Patterns for Web3 and Beyond - Book Cover"
|
||||
fill
|
||||
className="object-contain relative z-10 drop-shadow-2xl"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Book Info */}
|
||||
<div className="space-y-6">
|
||||
<div className="inline-block px-4 py-2 bg-primary/10 rounded-full">
|
||||
<span className="text-sm font-medium text-primary">New Release</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-balance">Exploring MycoFi</h2>
|
||||
<p className="text-xl text-muted-foreground leading-relaxed">
|
||||
Mycelial Design Patterns for Web3 and Beyond
|
||||
</p>
|
||||
<p className="text-lg leading-relaxed">
|
||||
Discover how nature's most sophisticated network architecture can inspire the next generation of
|
||||
decentralized systems. This book explores the intersection of mycology, economics, and Web3 technology.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 pt-4">
|
||||
<Button size="lg" asChild>
|
||||
<a href="https://book.mycofi.earth" target="_blank" rel="noopener noreferrer">
|
||||
Read the Book
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<a href="#buy-book">Buy the Book</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import Image from "next/image"
|
||||
|
||||
export function ContentSection() {
|
||||
return (
|
||||
<section className="py-20 bg-muted/30 relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-[0.03] pointer-events-none">
|
||||
<Image src="/images/mycelial-network-blue.png" alt="" fill className="object-cover" />
|
||||
</div>
|
||||
|
||||
<div className="container relative z-10">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="text-center mb-16">
|
||||
<h2
|
||||
className="text-4xl md:text-5xl font-bold mb-4 text-balance"
|
||||
style={{ fontFamily: "var(--font-crimson)" }}
|
||||
>
|
||||
From Monoculture to <span className="text-primary">Permaculture</span> Currencies
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto text-balance">
|
||||
Emulating nature's evolutionary resource allocation algorithms in economic systems design
|
||||
</p>
|
||||
</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">
|
||||
The Problem
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-4" style={{ fontFamily: "var(--font-crimson)" }}>
|
||||
Currency Monocultures
|
||||
</h3>
|
||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||||
Modern economics emerged alongside imperialist expansion, imposing monocultures of colonizing
|
||||
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.
|
||||
</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
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-4" 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.
|
||||
</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.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</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
|
||||
</div>
|
||||
<h3 className="text-3xl font-bold mb-4" style={{ fontFamily: "var(--font-crimson)" }}>
|
||||
Learning from Fungi
|
||||
</h3>
|
||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||||
Since the dawn of life on Earth, fungi have played a pivotal role in the networked redistribution of
|
||||
life-sustaining resources on a global scale.
|
||||
</p>
|
||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||||
Mother trees intelligently redistribute their photosynthesized sustenance among their kin through
|
||||
underground mycelial networks—a living example of resource sharing and collective care.
|
||||
</p>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
Everything alive today owes a debt of gratitude to the upward trophic flows of energy resulting from
|
||||
mycelial economies over time immemorial.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative h-64 md:h-96 rounded-lg overflow-hidden">
|
||||
<Image
|
||||
src="/mycelial-network-underground-fungal-threads-connec.jpg"
|
||||
alt="Mycelial network illustration"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</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">
|
||||
The Current Reality
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-4" style={{ fontFamily: "var(--font-crimson)" }}>
|
||||
Society is Trippin Balls
|
||||
</h3>
|
||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||||
Our collective hallucination of infinite growth on a finite planet has us chasing extractive
|
||||
capitalism down a rabbit hole of ecological collapse.
|
||||
</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>
|
||||
</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">
|
||||
The Emerging Future
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-4" 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>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import Link from "next/link"
|
||||
import { BookOpen, ExternalLink, ShoppingBag } from "lucide-react"
|
||||
|
||||
export function CTASection() {
|
||||
return (
|
||||
<section className="py-20">
|
||||
<div className="container">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<div className="text-center mb-12">
|
||||
<h2
|
||||
className="text-4xl md:text-5xl font-bold mb-4 text-balance"
|
||||
style={{ fontFamily: "var(--font-crimson)" }}
|
||||
>
|
||||
Explore the Myco-Economic Future
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground text-balance">
|
||||
Dive deeper into regenerative economics and permaculture currencies
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<Link href="https://book.mycofi.earth" target="_blank" className="group">
|
||||
<div className="h-full p-6 rounded-lg border-2 border-border hover:border-primary transition-all hover:shadow-lg bg-card">
|
||||
<div className="mb-4 inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
|
||||
<BookOpen className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-2">The Book</h3>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
Read the full exploration of mycoeconomics and regenerative systems
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-primary">
|
||||
Read Now <ExternalLink className="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="https://shop.mycofi.earth" target="_blank" className="group">
|
||||
<div className="h-full p-6 rounded-lg border-2 border-border hover:border-secondary transition-all hover:shadow-lg bg-card">
|
||||
<div className="mb-4 inline-flex items-center justify-center w-12 h-12 rounded-full bg-secondary/10 text-secondary group-hover:bg-secondary group-hover:text-secondary-foreground transition-colors">
|
||||
<ShoppingBag className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-2">The Shop</h3>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
Support the movement with books, resources, and more
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-secondary">
|
||||
Visit Shop <ExternalLink className="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="https://links.mycofi.earth" target="_blank" className="group">
|
||||
<div className="h-full p-6 rounded-lg border-2 border-border hover:border-accent transition-all hover:shadow-lg bg-card">
|
||||
<div className="mb-4 inline-flex items-center justify-center w-12 h-12 rounded-full bg-accent/10 text-accent group-hover:bg-accent group-hover:text-accent-foreground transition-colors">
|
||||
<ExternalLink className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-2">All Links</h3>
|
||||
<p className="text-sm text-muted-foreground mb-4">Connect with the MycoFi community across platforms</p>
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-accent">
|
||||
View Links <ExternalLink className="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import Link from "next/link"
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-border bg-muted/30">
|
||||
<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)" }}>
|
||||
MycoFi
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground 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>
|
||||
<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"
|
||||
>
|
||||
The Book
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="https://allthingsdecent.substack.com/p/mycoeconomics-and-permaculture-currencies"
|
||||
target="_blank"
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Substack Article
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="https://shop.mycofi.earth"
|
||||
target="_blank"
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Shop
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3">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"
|
||||
>
|
||||
All Links
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 pt-8 border-t border-border text-center text-sm text-muted-foreground">
|
||||
<p>© {new Date().getFullYear()} MycoFi. Building regenerative futures together.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
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="text-2xl font-bold tracking-tight text-primary" style={{ fontFamily: "var(--font-crimson)" }}>
|
||||
MycoFi
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<Link
|
||||
href="https://links.mycofi.earth"
|
||||
target="_blank"
|
||||
className="text-sm font-medium text-foreground/80 hover:text-foreground transition-colors"
|
||||
>
|
||||
LinkTree
|
||||
</Link>
|
||||
<Link
|
||||
href="https://shop.mycofi.earth"
|
||||
target="_blank"
|
||||
className="text-sm font-medium text-foreground/80 hover:text-foreground transition-colors"
|
||||
>
|
||||
Shop
|
||||
</Link>
|
||||
<Link
|
||||
href="https://book.mycofi.earth"
|
||||
target="_blank"
|
||||
className="text-sm font-medium text-foreground/80 hover:text-foreground transition-colors"
|
||||
>
|
||||
Read the Book
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<Button asChild className="hidden md:inline-flex">
|
||||
<Link href="#buy-book" target="_blank">
|
||||
Buy the Book
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Button asChild variant="outline" className="md:hidden bg-transparent">
|
||||
<Link href="https://links.mycofi.earth" target="_blank">
|
||||
Links
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
import { Button } from "@/components/ui/button"
|
||||
import Link from "next/link"
|
||||
import { Network, Sprout, Users } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
|
||||
export function HeroSection() {
|
||||
return (
|
||||
<section className="relative overflow-hidden py-20 md:py-32">
|
||||
<div className="absolute inset-0 -z-10 opacity-[0.08]">
|
||||
<Image src="/images/mushroom-forest.png" alt="" fill className="object-cover" />
|
||||
</div>
|
||||
<div className="absolute inset-0 -z-10 opacity-30">
|
||||
<div className="absolute top-20 left-10 w-72 h-72 bg-primary/20 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-20 right-10 w-96 h-96 bg-secondary/20 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="container">
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<div className="mb-6 inline-flex items-center gap-2 rounded-full bg-muted px-4 py-2 text-sm text-muted-foreground">
|
||||
<Sprout className="h-4 w-4 text-secondary" />
|
||||
<span>Regenerative Economics for a Living Future</span>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Feature icons */}
|
||||
<div className="mt-20 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
|
||||
<div className="flex flex-col items-center text-center gap-3">
|
||||
<div className="rounded-full bg-primary/10 p-4">
|
||||
<Network className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg">Interconnected</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Like mycelial networks, economic systems thrive through connection
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center gap-3">
|
||||
<div className="rounded-full bg-secondary/10 p-4">
|
||||
<Sprout className="h-8 w-8 text-secondary" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg">Regenerative</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Building systems that restore and enhance rather than extract
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center gap-3">
|
||||
<div className="rounded-full bg-accent/10 p-4">
|
||||
<Users className="h-8 w-8 text-accent" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg">Cooperative</h3>
|
||||
<p className="text-sm text-muted-foreground">Mutual aid and solidarity over competition and extraction</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,304 @@
|
|||
"use client"
|
||||
|
||||
import { useEffect, useRef } from "react"
|
||||
|
||||
interface HyphalNode {
|
||||
x: number
|
||||
y: number
|
||||
vx: number
|
||||
vy: number
|
||||
age: number
|
||||
maxAge: number
|
||||
branches: HyphalNode[]
|
||||
parent: HyphalNode | null
|
||||
angle: number
|
||||
angleChangeRate: number
|
||||
connections: HyphalNode[]
|
||||
opacity: number
|
||||
isPersistent: boolean
|
||||
}
|
||||
|
||||
export function HyphalCanvas() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
const nodesRef = useRef<HyphalNode[]>([])
|
||||
const mouseRef = useRef({ x: 0, y: 0, isMoving: false })
|
||||
const animationRef = useRef<number>()
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
|
||||
const ctx = canvas.getContext("2d")
|
||||
if (!ctx) return
|
||||
|
||||
const resizeCanvas = () => {
|
||||
canvas.width = window.innerWidth
|
||||
canvas.height = window.innerHeight
|
||||
}
|
||||
resizeCanvas()
|
||||
window.addEventListener("resize", resizeCanvas)
|
||||
|
||||
let mouseMoveTimeout: NodeJS.Timeout
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
mouseRef.current = { x: e.clientX, y: e.clientY, isMoving: true }
|
||||
clearTimeout(mouseMoveTimeout)
|
||||
mouseMoveTimeout = setTimeout(() => {
|
||||
mouseRef.current.isMoving = false
|
||||
}, 100)
|
||||
}
|
||||
window.addEventListener("mousemove", handleMouseMove)
|
||||
|
||||
const createNode = (x: number, y: number, parent: HyphalNode | null = null): HyphalNode => {
|
||||
const angle = parent ? parent.angle + (Math.random() - 0.5) * 1.2 : Math.random() * Math.PI * 2
|
||||
const speed = parent ? 1.5 + Math.random() * 1 : 2 + Math.random() * 2
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
vx: Math.cos(angle) * speed,
|
||||
vy: Math.sin(angle) * speed,
|
||||
age: 0,
|
||||
maxAge: 80 + Math.random() * 60,
|
||||
branches: [],
|
||||
parent,
|
||||
angle,
|
||||
angleChangeRate: (Math.random() - 0.5) * 0.2,
|
||||
connections: [],
|
||||
opacity: 1,
|
||||
isPersistent: false,
|
||||
}
|
||||
}
|
||||
|
||||
const findNearbyPersistentNodes = (x: number, y: number, radius: number): HyphalNode[] => {
|
||||
return nodesRef.current.filter((node) => {
|
||||
if (!node.isPersistent) return false
|
||||
const dx = node.x - x
|
||||
const dy = node.y - y
|
||||
const distance = Math.sqrt(dx * dx + dy * dy)
|
||||
return distance < radius
|
||||
})
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
for (let j = i + 1; j < nodesRef.current.length; j++) {
|
||||
const other = nodesRef.current[j]
|
||||
if (other === node.parent || node === other.parent) continue
|
||||
|
||||
const otherMaturityFactor = other.age / other.maxAge
|
||||
const otherMaxConnections = other.isPersistent ? 7 : otherMaturityFactor > 0.6 ? 4 : 2
|
||||
|
||||
if (other.age < 20 || other.connections.length >= otherMaxConnections) continue
|
||||
|
||||
const dx = other.x - node.x
|
||||
const dy = other.y - node.y
|
||||
const distance = Math.sqrt(dx * dx + dy * dy)
|
||||
|
||||
if (distance < connectionDistance && Math.random() > connectionProbability) {
|
||||
if (!node.connections.includes(other)) {
|
||||
node.connections.push(other)
|
||||
other.connections.push(node)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const drawBranchingConnection = (
|
||||
ctx: CanvasRenderingContext2D,
|
||||
x1: number,
|
||||
y1: number,
|
||||
x2: number,
|
||||
y2: number,
|
||||
opacity: number,
|
||||
) => {
|
||||
const dx = x2 - x1
|
||||
const dy = y2 - y1
|
||||
const distance = Math.sqrt(dx * dx + dy * dy)
|
||||
|
||||
// For short distances, draw straight line
|
||||
if (distance < 30) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x1, y1)
|
||||
ctx.lineTo(x2, y2)
|
||||
ctx.stroke()
|
||||
return
|
||||
}
|
||||
|
||||
// Create branching path with 1-2 intermediate points
|
||||
const numBranches = distance > 60 ? 2 : 1
|
||||
const points = [{ x: x1, y: y1 }]
|
||||
|
||||
for (let i = 0; i < numBranches; i++) {
|
||||
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
|
||||
points.push({
|
||||
x: midX + perpX * offset,
|
||||
y: midY + perpY * offset,
|
||||
})
|
||||
}
|
||||
|
||||
points.push({ x: x2, y: y2 })
|
||||
|
||||
// Draw smooth curve through points
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(points[0].x, points[0].y)
|
||||
|
||||
for (let i = 1; i < points.length - 1; i++) {
|
||||
const xc = (points[i].x + points[i + 1].x) / 2
|
||||
const yc = (points[i].y + points[i + 1].y) / 2
|
||||
ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc)
|
||||
}
|
||||
|
||||
ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y)
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
const animate = () => {
|
||||
ctx.fillStyle = "rgba(250, 248, 245, 0.08)"
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
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)
|
||||
|
||||
for (let i = 0; i < burstCount; i++) {
|
||||
const node = createNode(mouseRef.current.x, mouseRef.current.y)
|
||||
nodesRef.current.push(node)
|
||||
|
||||
if (nearbyPersistent.length > 0) {
|
||||
const connectCount = Math.min(3, nearbyPersistent.length)
|
||||
for (let j = 0; j < connectCount; j++) {
|
||||
const target = nearbyPersistent[Math.floor(Math.random() * nearbyPersistent.length)]
|
||||
if (!node.connections.includes(target)) {
|
||||
node.connections.push(target)
|
||||
target.connections.push(node)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (Math.random() > 0.85) {
|
||||
createMeshConnections()
|
||||
}
|
||||
|
||||
nodesRef.current = nodesRef.current.filter((node) => {
|
||||
node.age++
|
||||
|
||||
if (!node.isPersistent) {
|
||||
node.angle += node.angleChangeRate
|
||||
if (Math.random() > 0.92) {
|
||||
node.angleChangeRate = (Math.random() - 0.5) * 0.25
|
||||
}
|
||||
if (Math.random() > 0.96) {
|
||||
node.angle += (Math.random() - 0.5) * 0.8
|
||||
}
|
||||
|
||||
const speed = Math.sqrt(node.vx * node.vx + node.vy * node.vy)
|
||||
node.vx = Math.cos(node.angle) * speed
|
||||
node.vy = Math.sin(node.angle) * speed
|
||||
|
||||
node.x += node.vx
|
||||
node.y += node.vy
|
||||
|
||||
node.vx *= 0.96
|
||||
node.vy *= 0.96
|
||||
}
|
||||
|
||||
const ageFactor = node.age / node.maxAge
|
||||
if (node.isPersistent) {
|
||||
node.opacity = 0.15
|
||||
} else if (ageFactor >= 1) {
|
||||
node.isPersistent = true
|
||||
node.opacity = 0.15
|
||||
node.vx = 0
|
||||
node.vy = 0
|
||||
} else {
|
||||
node.opacity = Math.max(0.15, 1 - ageFactor * 0.85)
|
||||
}
|
||||
|
||||
if (
|
||||
node.age > 8 &&
|
||||
node.age < node.maxAge - 30 &&
|
||||
Math.random() > 0.92 &&
|
||||
node.branches.length < 4 &&
|
||||
!node.isPersistent
|
||||
) {
|
||||
const branch = createNode(node.x, node.y, node)
|
||||
node.branches.push(branch)
|
||||
nodesRef.current.push(branch)
|
||||
}
|
||||
|
||||
if (node.parent) {
|
||||
const gradient = ctx.createLinearGradient(node.parent.x, node.parent.y, node.x, node.y)
|
||||
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})`)
|
||||
|
||||
ctx.strokeStyle = gradient
|
||||
ctx.lineWidth = 2.5 + Math.random() * 1.5
|
||||
ctx.lineCap = "round"
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.parent.x, node.parent.y)
|
||||
ctx.lineTo(node.x, node.y)
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
node.connections.forEach((connected) => {
|
||||
if (nodesRef.current.includes(connected)) {
|
||||
const avgOpacity = ((node.opacity + connected.opacity) / 2) * 0.35
|
||||
ctx.strokeStyle = `rgba(120, 120, 120, ${avgOpacity})`
|
||||
ctx.lineWidth = 1.5
|
||||
ctx.lineCap = "round"
|
||||
drawBranchingConnection(ctx, node.x, node.y, connected.x, connected.y, avgOpacity)
|
||||
}
|
||||
})
|
||||
|
||||
ctx.fillStyle = `rgba(120, 120, 120, ${node.opacity * 0.7})`
|
||||
ctx.beginPath()
|
||||
ctx.arc(node.x, node.y, 2.5, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
|
||||
return node.isPersistent || node.age < node.maxAge
|
||||
})
|
||||
|
||||
if (nodesRef.current.length > 800) {
|
||||
const persistentNodes = nodesRef.current.filter((n) => n.isPersistent)
|
||||
const activeNodes = nodesRef.current.filter((n) => !n.isPersistent)
|
||||
if (persistentNodes.length > 500) {
|
||||
nodesRef.current = [...persistentNodes.slice(-400), ...activeNodes]
|
||||
}
|
||||
}
|
||||
|
||||
animationRef.current = requestAnimationFrame(animate)
|
||||
}
|
||||
|
||||
animate()
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", resizeCanvas)
|
||||
window.removeEventListener("mousemove", handleMouseMove)
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return <canvas ref={canvasRef} className="fixed inset-0 pointer-events-none z-10" style={{ opacity: 0.6 }} />
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
import Image from "next/image"
|
||||
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Sparkles } from "lucide-react"
|
||||
|
||||
export function MycoFiIntro() {
|
||||
return (
|
||||
<section className="py-16 bg-background relative overflow-hidden">
|
||||
{/* Hyphal thread pattern background */}
|
||||
<div className="absolute inset-0 opacity-5 pointer-events-none">
|
||||
<svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="hyphal-pattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
|
||||
<path
|
||||
d="M10,50 Q30,20 50,50 T90,50 M20,30 Q40,60 60,30 T100,30 M5,70 Q25,90 45,70 T85,70"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
fill="none"
|
||||
className="text-primary"
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#hyphal-pattern)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="container relative z-10">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<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">
|
||||
<div className="rounded-full bg-primary/10 p-3 mt-1">
|
||||
<Sparkles className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h2
|
||||
className="text-3xl md:text-4xl font-bold mb-4 text-balance"
|
||||
style={{ fontFamily: "var(--font-crimson)" }}
|
||||
>
|
||||
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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import {
|
||||
ThemeProvider as NextThemesProvider,
|
||||
type ThemeProviderProps,
|
||||
} from 'next-themes'
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import * as React from 'react'
|
||||
import { Slot } from '@radix-ui/react-slot'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
||||
destructive:
|
||||
'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
||||
outline:
|
||||
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
|
||||
secondary:
|
||||
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||
ghost:
|
||||
'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
||||
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
|
||||
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
|
||||
icon: 'size-9',
|
||||
'icon-sm': 'size-8',
|
||||
'icon-lg': 'size-10',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<'button'> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : 'button'
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import * as React from 'react'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn('leading-none font-semibold', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn('text-muted-foreground text-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn('px-6', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { clsx, type ClassValue } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
},
|
||||
typescript: {
|
||||
ignoreBuildErrors: true,
|
||||
},
|
||||
images: {
|
||||
unoptimized: true,
|
||||
},
|
||||
}
|
||||
|
||||
export default nextConfig
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
{
|
||||
"name": "my-v0-project",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "next build",
|
||||
"dev": "next dev",
|
||||
"lint": "next lint",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^3.10.0",
|
||||
"@radix-ui/react-accordion": "1.2.2",
|
||||
"@radix-ui/react-alert-dialog": "1.1.4",
|
||||
"@radix-ui/react-aspect-ratio": "1.1.1",
|
||||
"@radix-ui/react-avatar": "1.1.2",
|
||||
"@radix-ui/react-checkbox": "1.1.3",
|
||||
"@radix-ui/react-collapsible": "1.1.2",
|
||||
"@radix-ui/react-context-menu": "2.2.4",
|
||||
"@radix-ui/react-dialog": "1.1.4",
|
||||
"@radix-ui/react-dropdown-menu": "2.1.4",
|
||||
"@radix-ui/react-hover-card": "1.1.4",
|
||||
"@radix-ui/react-label": "2.1.1",
|
||||
"@radix-ui/react-menubar": "1.1.4",
|
||||
"@radix-ui/react-navigation-menu": "1.2.3",
|
||||
"@radix-ui/react-popover": "1.1.4",
|
||||
"@radix-ui/react-progress": "1.1.1",
|
||||
"@radix-ui/react-radio-group": "1.2.2",
|
||||
"@radix-ui/react-scroll-area": "1.2.2",
|
||||
"@radix-ui/react-select": "2.1.4",
|
||||
"@radix-ui/react-separator": "1.1.1",
|
||||
"@radix-ui/react-slider": "1.2.2",
|
||||
"@radix-ui/react-slot": "1.1.1",
|
||||
"@radix-ui/react-switch": "1.1.2",
|
||||
"@radix-ui/react-tabs": "1.1.2",
|
||||
"@radix-ui/react-toast": "1.2.4",
|
||||
"@radix-ui/react-toggle": "1.1.1",
|
||||
"@radix-ui/react-toggle-group": "1.1.1",
|
||||
"@radix-ui/react-tooltip": "1.1.6",
|
||||
"@vercel/analytics": "latest",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "1.0.4",
|
||||
"date-fns": "4.1.0",
|
||||
"embla-carousel-react": "8.5.1",
|
||||
"geist": "latest",
|
||||
"input-otp": "1.4.1",
|
||||
"lucide-react": "^0.454.0",
|
||||
"next": "15.2.4",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^19",
|
||||
"react-day-picker": "9.8.0",
|
||||
"react-dom": "^19",
|
||||
"react-hook-form": "^7.60.0",
|
||||
"react-resizable-panels": "^2.1.7",
|
||||
"recharts": "2.15.4",
|
||||
"sonner": "^1.7.4",
|
||||
"tailwind-merge": "^2.5.5",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"vaul": "^0.9.9",
|
||||
"zod": "3.25.67"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.9",
|
||||
"@types/node": "^22",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"postcss": "^8.5",
|
||||
"tailwindcss": "^4.1.9",
|
||||
"tw-animate-css": "1.3.3",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('postcss-load-config').Config} */
|
||||
const config = {
|
||||
plugins: {
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 568 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -0,0 +1,125 @@
|
|||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.145 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.145 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.985 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.396 0.141 25.723);
|
||||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||
--border: oklch(0.269 0 0);
|
||||
--input: oklch(0.269 0 0);
|
||||
--ring: oklch(0.439 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(0.269 0 0);
|
||||
--sidebar-ring: oklch(0.439 0 0);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"target": "ES6",
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Reference in New Issue