Initial commit with OG metadata

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2025-12-22 22:24:23 +01:00
commit cdcbf00eaa
33 changed files with 4522 additions and 0 deletions

27
.gitignore vendored Normal file
View File

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

13
Dockerfile Normal file
View File

@ -0,0 +1,13 @@
FROM node:20-alpine AS builder
WORKDIR /app
RUN corepack enable && corepack prepare pnpm@latest --activate
COPY package.json pnpm-lock.yaml* package-lock.json* ./
RUN if [ -f pnpm-lock.yaml ]; then pnpm install --frozen-lockfile; elif [ -f package-lock.json ]; then npm ci; else npm install; fi
COPY . .
RUN if [ -f pnpm-lock.yaml ]; then pnpm build; else npm run build; fi
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/out /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

30
README.md Normal file
View File

@ -0,0 +1,30 @@
# Psychedelic post-capitalist website
*Automatically synced with your [v0.app](https://v0.app) deployments*
[![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/jeff-emmetts-projects/v0-psychedelic-post-capitalist-website)
[![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/sccu5k8iTQQ)
## 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-psychedelic-post-capitalist-website](https://vercel.com/jeff-emmetts-projects/v0-psychedelic-post-capitalist-website)**
## Build your app
Continue building your app on:
**[https://v0.app/chat/projects/sccu5k8iTQQ](https://v0.app/chat/projects/sccu5k8iTQQ)**
## 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

193
app/globals.css Normal file
View File

@ -0,0 +1,193 @@
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
:root {
/* Updated color palette for psychedelic post-capitalist theme */
--background: #fefce8; /* Soft, warm background */
--foreground: #374151; /* Main text color */
--card: #ffffff; /* Card background for content sections */
--card-foreground: #374151; /* Text color on cards */
--popover: rgba(255, 255, 255, 0.9); /* Light popover background */
--popover-foreground: #374151; /* Text color on popovers */
--primary: #d97706; /* Primary amber color */
--primary-foreground: #ffffff; /* Text color on primary buttons */
--secondary: #6366f1; /* Accent indigo color */
--secondary-foreground: #ffffff; /* Text color on secondary buttons */
--muted: #f8fafc; /* Muted background for less prominent sections */
--muted-foreground: #374151; /* Text color for muted sections */
--accent: #6366f1; /* Accent color for key elements */
--accent-foreground: #ffffff; /* Text color on accent elements */
--destructive: #ea580c; /* Color for destructive actions */
--destructive-foreground: #ffffff; /* Text color on destructive actions */
--border: #d97706; /* Border color for sections */
--input: #ffffff; /* Input field background */
--ring: rgba(255, 255, 255, 0.3); /* Ring color for focus states */
--chart-1: #d97706; /* Color for first chart element */
--chart-2: #6366f1; /* Color for second chart element */
--chart-3: #4b5563; /* Color for third chart element */
--chart-4: #ea580c; /* Color for fourth chart element */
--chart-5: #f97316; /* Color for fifth chart element */
--radius: 0.5rem; /* Corner rounding for cards and buttons */
--sidebar: #fefce8; /* Sidebar background */
--sidebar-foreground: #374151; /* Text color in sidebar */
--sidebar-primary: #d97706; /* Primary color in sidebar */
--sidebar-primary-foreground: #ffffff; /* Text color for primary in sidebar */
--sidebar-accent: #6366f1; /* Accent color for sidebar elements */
--sidebar-accent-foreground: #ffffff; /* Text color for sidebar accents */
--sidebar-border: #d97706; /* Border for sidebar elements */
--sidebar-ring: rgba(255, 255, 255, 0.5); /* Ring for sidebar focus states */
}
.dark {
/* Updated dark mode colors to maintain psychedelic theme */
--background: #1a1a1a;
--foreground: #fefce8;
--card: #2a2a2a;
--card-foreground: #fefce8;
--popover: rgba(42, 42, 42, 0.95);
--popover-foreground: #fefce8;
--primary: #f59e0b;
--primary-foreground: #1a1a1a;
--secondary: #8b5cf6;
--secondary-foreground: #ffffff;
--muted: #2a2a2a;
--muted-foreground: #a1a1aa;
--accent: #8b5cf6;
--accent-foreground: #ffffff;
--destructive: #f97316;
--destructive-foreground: #ffffff;
--border: #f59e0b;
--input: #2a2a2a;
--ring: rgba(245, 158, 11, 0.3);
--chart-1: #f59e0b;
--chart-2: #8b5cf6;
--chart-3: #6b7280;
--chart-4: #f97316;
--chart-5: #fb923c;
--sidebar: #1a1a1a;
--sidebar-foreground: #fefce8;
--sidebar-primary: #f59e0b;
--sidebar-primary-foreground: #1a1a1a;
--sidebar-accent: #8b5cf6;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #f59e0b;
--sidebar-ring: rgba(245, 158, 11, 0.5);
}
@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;
}
}
/* Added custom psychedelic animations and effects */
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
@keyframes pulse-glow {
0%,
100% {
box-shadow: 0 0 20px rgba(217, 119, 6, 0.3);
}
50% {
box-shadow: 0 0 40px rgba(217, 119, 6, 0.6);
}
}
@keyframes mycelial-growth {
0% {
transform: scale(1) rotate(0deg);
opacity: 0.7;
}
50% {
transform: scale(1.05) rotate(2deg);
opacity: 1;
}
100% {
transform: scale(1) rotate(0deg);
opacity: 0.7;
}
}
.float-animation {
animation: float 6s ease-in-out infinite;
}
.pulse-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
.mycelial-growth {
animation: mycelial-growth 8s ease-in-out infinite;
}
.trippy-gradient {
background: linear-gradient(45deg, #d97706, #6366f1, #ea580c, #f59e0b);
background-size: 400% 400%;
animation: gradient-shift 15s ease infinite;
}
@keyframes gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

57
app/layout.tsx Normal file
View File

@ -0,0 +1,57 @@
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import { Suspense } from "react"
import "./globals.css"
export const metadata: Metadata = {
metadataBase: new URL("https://trippinballs.lol"),
title: "TrippinBalls.lol - Post-Capitalist Alternatives",
description:
"Exploring mycoeconomics, permaculture currencies, and post-capitalist alternatives to neoliberalism. Society is trippin balls on extraction - let's find better ways.",
generator: "v0.app",
keywords: "mycoeconomics, permaculture, post-capitalism, alternative economics, mutual aid, degrowth, commons",
openGraph: {
type: "website",
locale: "en_US",
url: "https://trippinballs.lol",
title: "TrippinBalls.lol - Post-Capitalist Alternatives",
description: "Exploring mycoeconomics and post-capitalist alternatives to neoliberalism",
siteName: "TrippinBalls.lol",
images: [
{
url: "/og-image.jpg",
width: 1200,
height: 630,
alt: "TrippinBalls.lol - Post-Capitalist Alternatives",
},
],
},
twitter: {
card: "summary_large_image",
title: "TrippinBalls.lol - Post-Capitalist Alternatives",
description:
"Exploring mycoeconomics, permaculture currencies, and post-capitalist alternatives to neoliberalism. Society is trippin balls on extraction - let's find better ways.",
images: ["/og-image.jpg"],
},
icons: {
icon: "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔮</text></svg>",
},
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en">
<body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
<Suspense fallback={null}>{children}</Suspense>
<Analytics />
</body>
</html>
)
}

23
app/page.tsx Normal file
View File

@ -0,0 +1,23 @@
import { HeroSection } from "@/components/hero-section"
import { MycoeconomicsSection } from "@/components/mycoeconomics-section"
import { AlternativesSection } from "@/components/alternatives-section"
import { CritiqueSection } from "@/components/critique-section"
import { PostAppitalismSection } from "@/components/post-appitalism-section"
import { ActionSection } from "@/components/action-section"
import { NewsletterSignup } from "@/components/newsletter-signup"
import { Navigation } from "@/components/navigation"
export default function HomePage() {
return (
<main className="min-h-screen">
<Navigation />
<HeroSection />
<CritiqueSection />
<MycoeconomicsSection />
<AlternativesSection />
<PostAppitalismSection />
<ActionSection />
<NewsletterSignup />
</main>
)
}

21
components.json Normal file
View File

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

View File

@ -0,0 +1,73 @@
"use client"
import { Button } from "@/components/ui/button"
import { BookOpen, Users, Sprout, MessageCircle } from "lucide-react"
export function ActionSection() {
const actions = [
{
icon: <BookOpen className="h-6 w-6" />,
title: "Learn & Research",
description: "Dive deeper into alternative economic models and post-capitalist theory.",
action: "Explore Resources",
},
{
icon: <Users className="h-6 w-6" />,
title: "Build Community",
description: "Connect with others working on economic alternatives in your area.",
action: "Find Groups",
},
{
icon: <Sprout className="h-6 w-6" />,
title: "Start Small",
description: "Begin implementing alternative practices in your daily life and community.",
action: "Take Action",
},
{
icon: <MessageCircle className="h-6 w-6" />,
title: "Spread Awareness",
description: "Share these ideas and help others understand that alternatives exist.",
action: "Share Ideas",
},
]
return (
<section id="action" className="py-12">
<div className="container mx-auto px-4">
<div className="p-8 text-center">
<h3 className="text-3xl font-bold mb-4">Join the Mycommunity</h3>
<p className="text-lg text-muted-foreground mb-6 max-w-2xl mx-auto leading-relaxed">
{"The transition to post-capitalist alternatives starts with each of us. "}
{
"Connect with others exploring myco-economic alternatives for economies of care through mutual solidarity."
}
</p>
<div className="flex justify-center">
<Button
size="lg"
className="pulse-glow"
onClick={() => window.open("https://discord.gg/DegMn5xMCC", "_blank")}
>
🍄 Join Discord Community
</Button>
</div>
</div>
<footer className="mt-16 pt-8 border-t border-primary/20 text-center">
<p className="text-muted-foreground">
{"Built with 🍄 for the mycelial revolution • "}
<span className="text-primary font-semibold">TrippinBalls.lol</span>
{" • Exploring post-capitalist & "}
<a
href="https://post-appitalism.app"
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline font-semibold"
>
post-appitalist futures
</a>
</p>
</footer>
</div>
</section>
)
}

View File

@ -0,0 +1,88 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Coins, Vote, Cpu, Heart } from "lucide-react"
export function AlternativesSection() {
const alternatives = [
{
icon: <Coins className="h-8 w-8 text-secondary" />,
title: "Permaculture Currencies",
description:
"Local exchange systems that value ecological regeneration, care work, and community resilience over profit extraction.",
examples: ["Community Land Trusts", "Time Banking", "Mutual Credit Systems", "Gift Economies"],
},
{
icon: <Vote className="h-8 w-8 text-secondary" />,
title: "Participatory Democracy",
description:
"Decision-making systems that give communities direct control over resources and policies affecting their lives.",
examples: ["Consensus Building", "Sociocracy", "Liquid Democracy", "Community Assemblies"],
},
{
icon: <Cpu className="h-8 w-8 text-secondary" />,
title: "Cooperative Technology",
description:
"Platform cooperatives and decentralized technologies that serve communities rather than extractive corporations.",
examples: ["Platform Co-ops", "Mesh Networks", "Open Source Tools", "Distributed Governance"],
},
{
icon: <Heart className="h-8 w-8 text-secondary" />,
title: "Care-Centered Economics",
description:
"Economic models that prioritize care work, emotional labor, and the reproduction of life over capital accumulation.",
examples: ["Universal Basic Services", "Care Income", "Commons Management", "Solidarity Economy"],
},
]
return (
<section id="alternatives" className="py-20 bg-muted/30">
<div className="container mx-auto px-4">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">
{"Post-Capitalist "}
<span className="text-secondary">Alternatives</span>
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
{"These aren't utopian dreams — they're practical alternatives being implemented "}
{'by communities worldwide who refuse to accept that "there is no alternative."'}
</p>
</div>
<div className="grid lg:grid-cols-2 gap-8">
{alternatives.map((alternative, index) => (
<Card key={index} className="border-secondary/20 hover:border-secondary/40 transition-all duration-300">
<CardHeader>
<div className="flex items-center gap-4 mb-4">
{alternative.icon}
<CardTitle className="text-xl">{alternative.title}</CardTitle>
</div>
<p className="text-muted-foreground leading-relaxed">{alternative.description}</p>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{alternative.examples.map((example, exampleIndex) => (
<Badge
key={exampleIndex}
variant="secondary"
className="bg-secondary/10 text-secondary border-secondary/20"
>
{example}
</Badge>
))}
</div>
</CardContent>
</Card>
))}
</div>
<div className="mt-16 text-center">
<blockquote className="text-2xl md:text-3xl font-medium text-secondary italic max-w-4xl mx-auto text-balance">
{'"We are in urgent need of new economic models that can facilitate managed degrowth '}
{'and support localized production in the real economy."'}
</blockquote>
<cite className="text-muted-foreground mt-4 block"> From Mycoeconomics and Permaculture Currencies</cite>
</div>
</div>
</section>
)
}

View File

@ -0,0 +1,73 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertTriangle, TrendingDown, Users, Globe } from "lucide-react"
export function CritiqueSection() {
const problems = [
{
icon: <AlertTriangle className="h-8 w-8 text-destructive" />,
title: "Economic Extraction",
description:
"Neoliberal capitalism prioritizes profit extraction over human and ecological wellbeing, creating unsustainable wealth concentration.",
},
{
icon: <Users className="h-8 w-8 text-destructive" />,
title: "Systemic Oppression",
description:
"Current systems perpetuate inequality and marginalize communities, especially minorities and indigenous peoples.",
},
{
icon: <Globe className="h-8 w-8 text-destructive" />,
title: "Imperial Colonialism",
description:
"Modern economic systems continue colonial patterns of resource extraction and cultural domination on a global scale.",
},
{
icon: <TrendingDown className="h-8 w-8 text-destructive" />,
title: "Ecological Collapse",
description:
"The endless growth paradigm is destroying Earth's life-supporting ecosystems at an unprecedented rate.",
},
]
return (
<section id="critique" className="py-12 bg-muted/30">
<div className="container mx-auto px-4">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">
{"The Current System is "}
<span className="text-destructive">Broken</span>
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
{"We're living in a system designed for extraction, not regeneration. "}
{"It's time to acknowledge the fundamental flaws and imagine something better."}
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{problems.map((problem, index) => (
<Card
key={index}
className="border-destructive/20 hover:border-destructive/40 transition-colors duration-300"
>
<CardHeader className="text-center">
<div className="mx-auto mb-4">{problem.icon}</div>
<CardTitle className="text-xl">{problem.title}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-muted-foreground text-center leading-relaxed">{problem.description}</p>
</CardContent>
</Card>
))}
</div>
<div className="mt-16 text-center">
<blockquote className="text-2xl md:text-3xl font-medium text-primary italic max-w-4xl mx-auto text-balance">
{'"There is no such thing as society" is just a false egregore that those in power would have us believe, '}
{"in order to consolidate power in Westphalian state monoliths."}
</blockquote>
<cite className="text-muted-foreground mt-4 block"> Jeff Emmett, Mycoeconomics</cite>
</div>
</div>
</section>
)
}

View File

@ -0,0 +1,64 @@
"use client"
import { Button } from "@/components/ui/button"
import { ArrowDown, Sparkles } from "lucide-react"
export function HeroSection() {
return (
<section className="min-h-screen flex items-center justify-center relative overflow-hidden">
{/* Animated Background */}
<div className="absolute inset-0 trippy-gradient opacity-20"></div>
{/* Floating Elements */}
<div className="absolute top-20 left-10 text-6xl opacity-30 float-animation">🍄</div>
<div className="absolute top-40 right-20 text-4xl opacity-40 float-animation" style={{ animationDelay: "2s" }}>
🌱
</div>
<div className="absolute bottom-40 left-20 text-5xl opacity-35 float-animation" style={{ animationDelay: "4s" }}>
🌿
</div>
<div className="absolute bottom-20 right-10 text-3xl opacity-30 float-animation" style={{ animationDelay: "1s" }}>
</div>
<div className="container mx-auto px-4 text-center relative z-10">
<div className="max-w-4xl mx-auto">
<h1 className="text-6xl md:text-8xl font-bold mb-6 text-balance">
<span className="text-primary">Society</span> is{" "}
<span className="text-secondary mycelial-growth">Trippin Balls</span>
</h1>
<p className="text-xl md:text-2xl mb-8 text-muted-foreground text-pretty leading-relaxed">
{"On a system predicated on economic extraction, oppression, and endless growth. "}
{"Time to explore "}
<span className="text-primary font-semibold">post-capitalist alternatives</span>
{" inspired by nature's wisdom."}
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
<Button
size="lg"
className="pulse-glow text-lg px-8 py-4"
onClick={() => window.open("https://post-appitalism.app", "_blank")}
>
<Sparkles className="mr-2 h-5 w-5" />
Explore Alternatives
</Button>
<Button
variant="outline"
size="lg"
className="text-lg px-8 py-4 border-primary text-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
onClick={() => window.open("https://mycofi.earth", "_blank")}
>
Learn Mycoeconomics
</Button>
</div>
<div className="animate-bounce">
<ArrowDown className="h-8 w-8 mx-auto text-primary" />
</div>
</div>
</div>
</section>
)
}

View File

@ -0,0 +1,102 @@
"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Network, Recycle, TreePine, Zap } from "lucide-react"
export function MycoeconomicsSection() {
const principles = [
{
icon: <Network className="h-8 w-8 text-primary" />,
title: "Networked Distribution",
description:
"Like mycelial networks, economic systems should facilitate resource sharing and mutual support across interconnected communities.",
},
{
icon: <Recycle className="h-8 w-8 text-primary" />,
title: "Regenerative Cycles",
description:
"Emulate nature's circular processes where waste becomes input, creating sustainable and regenerative economic flows.",
},
{
icon: <TreePine className="h-8 w-8 text-primary" />,
title: "Ecological Wisdom",
description:
"Learn from forest ecosystems where cooperation and mutual aid are more dominant than competition for survival.",
},
{
icon: <Zap className="h-8 w-8 text-primary" />,
title: "Adaptive Resilience",
description:
"Build economic systems that can adapt and respond to changing conditions, like fungi responding to environmental shifts.",
},
]
return (
<section id="mycoeconomics" className="py-16 bg-muted/50 border-y border-primary/30 shadow-lg">
<div className="container mx-auto px-4">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">
<span className="text-primary">Mycoeconomics</span>
{": Nature's Blueprint"}
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
{"Fungi have been Earth's master economists for millions of years, "}
{"creating networks of mutual aid and resource distribution. "}
{"What if we designed our economies like mycelial networks?"}
</p>
</div>
<div className="grid md:grid-cols-2 gap-8 mb-16">
{principles.map((principle, index) => (
<Card
key={index}
className="border-primary/20 hover:border-primary/40 transition-all duration-300 mycelial-growth"
>
<CardHeader>
<div className="flex items-center gap-4">
{principle.icon}
<CardTitle className="text-xl">{principle.title}</CardTitle>
</div>
</CardHeader>
<CardContent>
<p className="text-muted-foreground leading-relaxed">{principle.description}</p>
</CardContent>
</Card>
))}
</div>
<div className="bg-card border border-primary/20 rounded-lg p-8">
<h3 className="text-2xl font-bold mb-4 text-primary">The Mycelial Revolution</h3>
<p className="text-lg text-muted-foreground mb-6 leading-relaxed">
{"Just as fungi decompose dead matter to create new life, we can decompose failing neoliberal systems "}
{
"and upcycle their nutrients into regenerative alternatives. The revolution is — and has always been — mycelial."
}
</p>
<div className="flex flex-col sm:flex-row gap-4">
<Button
size="lg"
onClick={() =>
window.open(
"https://allthingsdecent.substack.com/p/mycoeconomics-and-permaculture-currencies",
"_blank",
)
}
>
Read the Full Essay
</Button>
<Button
variant="outline"
size="lg"
className="border-primary text-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
onClick={() => window.open("https://book.mycofi.earth/", "_blank")}
>
Explore MycoFi
</Button>
</div>
</div>
</div>
</section>
)
}

62
components/navigation.tsx Normal file
View File

@ -0,0 +1,62 @@
"use client"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Menu, X } from "lucide-react"
export function Navigation() {
const [isOpen, setIsOpen] = useState(false)
const navItems = [
{ href: "#critique", label: "The Problem" },
{ href: "#mycoeconomics", label: "Mycoeconomics" },
{ href: "#alternatives", label: "Alternatives" },
{ href: "#action", label: "Take Action" },
]
return (
<nav className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-primary/20">
<div className="container mx-auto px-4 py-4">
<div className="flex items-center justify-between">
<div className="text-2xl font-bold text-primary">🍄 TrippinBalls.lol</div>
{/* Desktop Navigation */}
<div className="hidden md:flex items-center space-x-6">
{navItems.map((item) => (
<a
key={item.href}
href={item.href}
className="text-foreground hover:text-primary transition-colors duration-200"
>
{item.label}
</a>
))}
</div>
{/* Mobile Menu Button */}
<Button variant="ghost" size="icon" className="md:hidden" onClick={() => setIsOpen(!isOpen)}>
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</Button>
</div>
{/* Mobile Navigation */}
{isOpen && (
<div className="md:hidden mt-4 pb-4 border-t border-primary/20">
<div className="flex flex-col space-y-4 pt-4">
{navItems.map((item) => (
<a
key={item.href}
href={item.href}
className="text-foreground hover:text-primary transition-colors duration-200"
onClick={() => setIsOpen(false)}
>
{item.label}
</a>
))}
</div>
</div>
)}
</div>
</nav>
)
}

View File

@ -0,0 +1,95 @@
"use client"
import { useState } from "react"
const LISTMONK_URL = "https://newsletter.jeffemmett.com"
const LIST_UUID = "df598d1a-4bed-4a8b-8c36-a5a6346febf0" // Trippin list
export function NewsletterSignup() {
const [email, setEmail] = useState("")
const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
const [message, setMessage] = useState("")
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
if (!email) return
setStatus("loading")
try {
const response = await fetch(`${LISTMONK_URL}/api/public/subscription`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email: email,
list_uuids: [LIST_UUID],
name: "",
}),
})
if (response.ok) {
setStatus("success")
setMessage("Check your email to confirm your subscription!")
setEmail("")
} else {
throw new Error("Subscription failed")
}
} catch {
setStatus("error")
setMessage("Something went wrong. Please try again.")
}
}
return (
<section className="py-16 bg-gradient-to-b from-background to-muted/30">
<div className="container mx-auto px-4">
<div className="max-w-xl mx-auto text-center space-y-6">
<div className="space-y-2">
<h2 className="text-2xl font-bold">
Keep Trippin'
</h2>
<p className="text-muted-foreground">
Subscribe for updates on psychedelic exploration
and consciousness expansion.
</p>
</div>
{status === "success" ? (
<div className="p-4 rounded-lg bg-green-500/10 border border-green-500/20 text-green-600 dark:text-green-400">
{message}
</div>
) : (
<form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3">
<input
type="email"
placeholder="your@email.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="flex-1 px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary/50"
/>
<button
type="submit"
disabled={status === "loading"}
className="px-6 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 transition-colors"
>
{status === "loading" ? "Subscribing..." : "Subscribe"}
</button>
</form>
)}
{status === "error" && (
<p className="text-sm text-red-500">{message}</p>
)}
<p className="text-xs text-muted-foreground">
No spam, unsubscribe anytime. We respect your privacy.
</p>
</div>
</div>
</section>
)
}

View File

@ -0,0 +1,117 @@
import { Button } from "@/components/ui/button"
import { ArrowRight, Network, Shield, Users } from "lucide-react"
export function PostAppitalismSection() {
return (
<section className="py-16 px-4 bg-muted/50 border-y border-primary/30 shadow-lg">
<div className="container mx-auto max-w-6xl">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-3 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
Post-Appitalism
</h2>
<h3 className="text-2xl md:text-3xl font-semibold mb-6 text-muted-foreground">Decomposing the App Silo</h3>
{/* </CHANGE> */}
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Post-capitalism brings about new opportunities to think beyond the traditional business model of the app
silo. Welcome to Post-Appitalism.
</p>
</div>
<div className="grid md:grid-cols-2 gap-12 items-center mb-16">
<div className="space-y-6">
<div className="prose prose-lg">
<p className="text-lg leading-relaxed">
Just as mycelium decomposes dead matter to create fertile soil for new growth, we are witnessing the{" "}
<span className="text-primary font-semibold">composting of capitalism</span> and the{" "}
<span className="text-secondary font-semibold">decomposition of app silos</span>.
</p>
<p className="text-lg leading-relaxed">
This isn't just metaphor—it's a technological reality unfolding before us. The centralized platforms
that extract our data, attention, and agency are beginning to break down, creating the conditions for
something radically new.
</p>
</div>
</div>
<div className="bg-card border border-primary/20 rounded-lg p-8 shadow-lg">
<h3 className="text-2xl font-bold mb-6 text-primary">The Decomposition Process</h3>
<div className="space-y-4">
<div className="flex items-start gap-3">
<div className="w-2 h-2 rounded-full bg-primary mt-2 flex-shrink-0" />
<p className="text-muted-foreground">Extractive platforms and institutions losing legitimacy and trust</p>
</div>
<div className="flex items-start gap-3">
<div className="w-2 h-2 rounded-full bg-primary mt-2 flex-shrink-0" />
<p className="text-muted-foreground">Open, distributed protocols emerging as viable alternatives </p>
</div>
<div className="flex items-start gap-3">
<div className="w-2 h-2 rounded-full bg-primary mt-2 flex-shrink-0" />
<p className="text-muted-foreground">Forming new substrates for collaborative coordination </p>
</div>
<div className="flex items-start gap-3">
<div className="w-2 h-2 rounded-full bg-primary mt-2 flex-shrink-0" />
<p className="text-muted-foreground">{"Individuals and collectives reclaiming digital sovereignty"}</p>
</div>
</div>
</div>
</div>
<div className="mb-16">
<h3 className="text-3xl font-bold mb-8 text-center">The Post-Appitalist Future</h3>
<div className="grid md:grid-cols-3 gap-8">
<div className="bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg p-6 border border-primary/20">
<div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-4">
<Shield className="w-6 h-6 text-primary" />
</div>
<h4 className="text-xl font-bold mb-3">Localized, Secure Data</h4>
<p className="text-muted-foreground leading-relaxed">
Your data lives where you liveunder your control, encrypted, and sovereign. No more extraction by
distant platforms.
</p>
</div>
<div className="bg-gradient-to-br from-secondary/10 to-secondary/5 rounded-lg p-6 border border-secondary/20">
<div className="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mb-4">
<Users className="w-6 h-6 text-secondary" />
</div>
<h4 className="text-xl font-bold mb-3">Collaborative Democracy</h4>
<p className="text-muted-foreground leading-relaxed">
Decision-making tools that enable genuine participation, from local communities to global coordination
networks.
</p>
</div>
<div className="bg-gradient-to-br from-accent/10 to-accent/5 rounded-lg p-6 border border-accent/20">
<div className="w-12 h-12 rounded-full bg-accent/20 flex items-center justify-center mb-4">
<Network className="w-6 h-6 text-accent" />
</div>
<h4 className="text-xl font-bold mb-3">Composable Tooling</h4>
<p className="text-muted-foreground leading-relaxed">
Interoperable economic and computational tools that work together like mycelial networksdistributed,
resilient, regenerative.
</p>
</div>
</div>
</div>
<div className="bg-gradient-to-r from-primary/10 via-secondary/10 to-accent/10 rounded-lg p-8 text-center border border-primary/20">
<p className="text-xl mb-6 leading-relaxed max-w-3xl mx-auto">
The infrastructure for post-appitalism is being built right now. The question isn't whether it's
possibleit's whether we'll participate in shaping it.
</p>
<Button size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold" asChild>
<a
href="https://post-appitalism.app"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2"
>
Explore Post-Appitalism
<ArrowRight className="w-5 h-5" />
</a>
</Button>
</div>
</div>
</section>
)
}

View File

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

46
components/ui/badge.tsx Normal file
View File

@ -0,0 +1,46 @@
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 badgeVariants = cva(
'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden',
{
variants: {
variant: {
default:
'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
secondary:
'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
destructive:
'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
outline:
'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
},
},
defaultVariants: {
variant: 'default',
},
},
)
function Badge({
className,
variant,
asChild = false,
...props
}: React.ComponentProps<'span'> &
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot : 'span'
return (
<Comp
data-slot="badge"
className={cn(badgeVariants({ variant }), className)}
{...props}
/>
)
}
export { Badge, badgeVariants }

59
components/ui/button.tsx Normal file
View File

@ -0,0 +1,59 @@
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 shadow-xs hover:bg-primary/90',
destructive:
'bg-destructive text-white shadow-xs 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 shadow-xs 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',
},
},
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 }

92
components/ui/card.tsx Normal file
View File

@ -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-1.5 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,
}

6
lib/utils.ts Normal file
View File

@ -0,0 +1,6 @@
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}

15
next.config.mjs Normal file
View File

@ -0,0 +1,15 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
eslint: {
ignoreDuringBuilds: true,
},
typescript: {
ignoreBuildErrors: true,
},
images: {
unoptimized: true,
},
}
export default nextConfig

15
nginx.conf Normal file
View File

@ -0,0 +1,15 @@
server {
listen 80;
server_name _;
root /usr/share/nginx/html;
index index.html index.htm;
location / {
try_files $uri $uri/ $uri.html =404;
}
error_page 404 /404.html;
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
}

74
package.json Normal file
View File

@ -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": "latest",
"@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": "14.2.16",
"next-themes": "latest",
"react": "^18",
"react-day-picker": "9.8.0",
"react-dom": "^18",
"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": "^18",
"@types/react-dom": "^18",
"postcss": "^8.5",
"tailwindcss": "^4.1.9",
"tw-animate-css": "1.3.3",
"typescript": "^5"
}
}

3004
pnpm-lock.yaml Normal file

File diff suppressed because it is too large Load Diff

8
postcss.config.mjs Normal file
View File

@ -0,0 +1,8 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
'@tailwindcss/postcss': {},
},
}
export default config

BIN
public/og-image.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/placeholder-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 568 B

View File

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

BIN
public/placeholder-user.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
public/placeholder.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

1
public/placeholder.svg Normal file
View File

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

125
styles/globals.css Normal file
View File

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

27
tsconfig.json Normal file
View File

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