style: remove gradient from "Join" section

Update className to transparent background, keep padding.

#VERCEL_SKIP

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

app/page.tsx

@@ -2,6 +2,7 @@ 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 { Navigation } from "@/components/navigation"
 
@@ -13,6 +14,7 @@ export default function HomePage() {
       <CritiqueSection />
       <MycoeconomicsSection />
       <AlternativesSection />
+      <PostAppitalismSection />
       <ActionSection />
     </main>
   )

components/action-section.tsx

@@ -1,6 +1,4 @@
 "use client"
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { BookOpen, Users, Sprout, MessageCircle } from "lucide-react"
 
@@ -33,51 +31,17 @@ export function ActionSection() {
   ]
 
   return (
-    <section id="action" className="py-20">
+    <section id="action" className="py-12">
       <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">
-            {"Ready to "}
-            <span className="text-primary">Take Action</span>
-            {"?"}
-          </h2>
-          <p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
-            {"The transition to post-capitalist alternatives starts with each of us. "}
-            {"Here's how you can begin contributing to the mycelial revolution."}
-          </p>
-        </div>
-
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
-          {actions.map((action, index) => (
-            <Card
-              key={index}
-              className="text-center border-primary/20 hover:border-primary/40 transition-all duration-300 hover:scale-105"
-            >
-              <CardHeader>
-                <div className="mx-auto mb-4 p-3 bg-primary/10 rounded-full w-fit">{action.icon}</div>
-                <CardTitle className="text-lg">{action.title}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-muted-foreground mb-4 leading-relaxed">{action.description}</p>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="border-primary text-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
-                >
-                  {action.action}
-                </Button>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-
-        <div className="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-lg p-8 text-center">
+        <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">
-            {"Connect with others exploring post-capitalist alternatives. "}
-            {"Together, we can grow the mycelial networks of mutual aid and solidarity."}
+            {"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 flex-col sm:flex-row gap-4 justify-center">
+          <div className="flex justify-center">
             <Button
               size="lg"
               className="pulse-glow"
@@ -85,14 +49,6 @@ export function ActionSection() {
             >
               🍄 Join Discord Community
             </Button>
-            <Button
-              variant="outline"
-              size="lg"
-              className="border-secondary text-secondary hover:bg-secondary hover:text-secondary-foreground bg-transparent"
-              onClick={() => window.open("https://allthingsdecent.substack.com/", "_blank")}
-            >
-              Subscribe to Newsletter
-            </Button>
           </div>
         </div>
 
@@ -100,7 +56,15 @@ export function ActionSection() {
           <p className="text-muted-foreground">
             {"Built with 🍄 for the mycelial revolution • "}
             <span className="text-primary font-semibold">TrippinBalls.lol</span>
-            {" • Exploring post-capitalist futures"}
+            {" • 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>

components/critique-section.tsx

@@ -30,7 +30,7 @@ export function CritiqueSection() {
   ]
 
   return (
-    <section id="critique" className="py-20 bg-muted/30">
+    <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">

components/hero-section.tsx

@@ -39,7 +39,7 @@ export function HeroSection() {
             <Button
               size="lg"
               className="pulse-glow text-lg px-8 py-4"
-              onClick={() => document.getElementById("critique")?.scrollIntoView({ behavior: "smooth" })}
+              onClick={() => window.open("https://post-appitalism.app", "_blank")}
             >
               <Sparkles className="mr-2 h-5 w-5" />
               Explore Alternatives
@@ -48,7 +48,7 @@ export function HeroSection() {
               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={() => document.getElementById("mycoeconomics")?.scrollIntoView({ behavior: "smooth" })}
+              onClick={() => window.open("https://mycofi.earth", "_blank")}
             >
               Learn Mycoeconomics
             </Button>

components/mycoeconomics-section.tsx

@@ -33,7 +33,7 @@ export function MycoeconomicsSection() {
   ]
 
   return (
-    <section id="mycoeconomics" className="py-20">
+    <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">

components/post-appitalism-section.tsx

@@ -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 live—under 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 networks—distributed,
+                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
+            possible—it'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>
+  )
+}