From 20c30f166db25513055afd2429fac7a8e890b58f Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Fri, 7 Nov 2025 19:35:38 +0000
Subject: [PATCH] feat: move RealWorldExamples section to bottom

Position real-world examples near call-to-action areas.

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
---
 app/page.tsx                       |  2 +-
 components/features.tsx            | 14 ++---
 components/hero.tsx                | 34 ++++++++-----
 components/real-world-examples.tsx | 82 +-----------------------------
 4 files changed, 30 insertions(+), 102 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 3a48c02..3a783ba 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -10,10 +10,10 @@ export default function Home() {
   return (
     <main className="min-h-screen">
       <Hero />
-      <RealWorldExamples />
       <Features />
       <Philosophy />
       <HowItWorks />
+      <RealWorldExamples />
       <Network />
       <Footer />
     </main>
diff --git a/components/features.tsx b/components/features.tsx
index d4ebfea..7d17cc4 100644
--- a/components/features.tsx
+++ b/components/features.tsx
@@ -2,6 +2,13 @@ import { Card } from "@/components/ui/card"
 import { MessageSquare, FolderOpen, Shield, BarChart3, Coins, Lock } from "lucide-react"
 
 const features = [
+  {
+    icon: Coins,
+    title: "Shared Funds",
+    description: "Allocate and manage community resources through transparent, customizable controls.",
+    color: "text-primary",
+    bgColor: "bg-primary/10",
+  },
   {
     icon: MessageSquare,
     title: "Secure Messaging",
@@ -24,13 +31,6 @@ const features = [
     color: "text-accent",
     bgColor: "bg-accent/10",
   },
-  {
-    icon: Coins,
-    title: "Shared Funds",
-    description: "Allocate and manage community resources through transparent, multi-sig controls.",
-    color: "text-primary",
-    bgColor: "bg-primary/10",
-  },
   {
     icon: BarChart3,
     title: "Interactive Dashboards",
diff --git a/components/hero.tsx b/components/hero.tsx
index f2d1636..37d16c3 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -12,7 +12,7 @@ export function Hero() {
           <div className="mb-8 flex justify-center">
             <div className="relative">
               <div className="absolute inset-0 animate-pulse blur-2xl bg-primary/30" />
-              <div className="absolute -inset-4 animate-pulse blur-3xl bg-accent/20 glitter" />
+
               <div className="relative text-center">
                 <div className="text-xl font-semibold text-muted-foreground mb-2 sm:text-2xl">Welcome to</div>
                 <h1 className="text-5xl font-bold tracking-tight sm:text-6xl lg:text-8xl retro-shadow">
@@ -24,23 +24,31 @@ export function Hero() {
             </div>
           </div>
 
-          <div className="mx-auto max-w-3xl space-y-4">
-            <p className="text-2xl font-bold leading-relaxed text-primary sm:text-3xl text-balance">
+          <div className="mx-auto mb-8 max-w-3xl">
+            
+          </div>
+
+          <div className="mx-auto mt-16 mb-1 max-w-3xl">
+            <p className="text-2xl font-bold leading-relaxed text-foreground sm:text-3xl text-balance">
               Remember back when the internet was <span className="text-accent">cool</span>?
             </p>
+          </div>
 
-            
-
+          <div className="mx-auto max-w-3xl space-y-2">
             <p className="text-3xl font-bold leading-relaxed text-balance sm:text-3xl">
-              We may not have <em>my</em>space anymore, but we have{" "}
-              <span className="drop-shadow-[0_0_10px_oklch(0.72_0.19_45)] text-primary">(ou)r</span>
-              <span className="text-foreground">Space</span>
-            </p>
-            <p className="font-bold leading-relaxed text-balance text-2xl">
-              <span className="text-muted-foreground">(and it's </span>
-              <span className="text-secondary drop-shadow-[0_0_10px_oklch(0.72_0.19_45)]">online</span>
-              <span className="text-muted-foreground">)</span>
+              We may not have <em className="">{"My"}</em>space anymore, but we have
             </p>
+            <div className="flex items-end justify-center gap-2">
+              <p className="text-4xl font-bold leading-relaxed text-balance sm:text-4xl">
+                <span className="drop-shadow-[0_0_10px_oklch(0.72_0.19_45)] text-primary">(ou)r</span>
+                <span className="text-foreground">Space</span>
+              </p>
+              <p className="text-sm font-bold leading-relaxed text-balance">
+                <span className="text-muted-foreground">(and it's </span>
+                <span className="text-secondary drop-shadow-[0_0_10px_oklch(0.72_0.19_45)]">online</span>
+                <span className="text-muted-foreground">)</span>
+              </p>
+            </div>
           </div>
 
           <p className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-muted-foreground sm:text-xl">
diff --git a/components/real-world-examples.tsx b/components/real-world-examples.tsx
index 2cad61c..5f52d5e 100644
--- a/components/real-world-examples.tsx
+++ b/components/real-world-examples.tsx
@@ -1,57 +1,3 @@
-import { Card } from "@/components/ui/card"
-import { MapPin, Snowflake, Sprout, Users, Calendar, Coins } from "lucide-react"
-
-const examples = [
-  {
-    icon: MapPin,
-    title: "Litter Cleanup Bounties",
-    description:
-      "Map trash hotspots in your neighborhood, set bounties for cleanup tasks, track progress on an interactive dashboard, and reward community members who pitch in.",
-    color: "text-primary",
-    bgColor: "bg-primary/10",
-  },
-  {
-    icon: Snowflake,
-    title: "Snow Shoveling Co-op",
-    description:
-      "Elderly neighbors need help? Create a schedule, assign volunteers, track completed driveways, and manage community appreciation funds—all in your rspace.",
-    color: "text-secondary",
-    bgColor: "bg-secondary/10",
-  },
-  {
-    icon: Sprout,
-    title: "Lawn Care Exchange",
-    description:
-      "Trade services with neighbors: mow a lawn, earn credits for garden help. Track commitments, share equipment calendars, and build real community connections.",
-    color: "text-accent",
-    bgColor: "bg-accent/10",
-  },
-  {
-    icon: Users,
-    title: "Community Tool Library",
-    description:
-      "Share tools collectively. Schedule borrowing, track inventory, split maintenance costs through shared funds, and reduce waste by owning things together.",
-    color: "text-primary",
-    bgColor: "bg-primary/10",
-  },
-  {
-    icon: Calendar,
-    title: "Neighborhood Events",
-    description:
-      "Plan block parties, potlucks, or skill-sharing workshops. Poll for dates, coordinate food signups, and manage event budgets transparently.",
-    color: "text-secondary",
-    bgColor: "bg-secondary/10",
-  },
-  {
-    icon: Coins,
-    title: "Local Mutual Aid",
-    description:
-      "Pool resources for emergency support. Transparent fund management, democratic decision-making on aid distribution, all with zero-knowledge privacy.",
-    color: "text-accent",
-    bgColor: "bg-accent/10",
-  },
-]
-
 export function RealWorldExamples() {
   return (
     <section className="border-b-4 border-secondary bg-muted/30 py-24">
@@ -62,36 +8,10 @@ export function RealWorldExamples() {
           </h2>
           <p className="mt-6 text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
             rSpaces aren't just for chatting online—they're tools for making your{" "}
-            <span className="font-semibold text-foreground">real neighborhood</span> better. Here's how communities are
-            already using them:
+            <span className="font-semibold text-foreground">real neighborhood</span> better.
           </p>
         </div>
 
-        <div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          {examples.map((example, index) => {
-            const Icon = example.icon
-            return (
-              <Card
-                key={index}
-                className="group relative overflow-hidden border-2 border-border bg-card p-6 transition-all hover:border-primary hover:-translate-y-1 hover:retro-shadow-sm"
-              >
-                <div
-                  className={`absolute inset-0 ${example.bgColor} opacity-0 transition-opacity group-hover:opacity-100`}
-                />
-                <div className="relative">
-                  <div
-                    className={`mb-4 inline-flex rounded-lg ${example.bgColor} p-3 ${example.color} border-2 border-current`}
-                  >
-                    <Icon className="h-7 w-7" />
-                  </div>
-                  <h3 className="mb-3 text-xl font-bold text-card-foreground">{example.title}</h3>
-                  <p className="text-sm leading-relaxed text-muted-foreground">{example.description}</p>
-                </div>
-              </Card>
-            )
-          })}
-        </div>
-
         <div className="mt-16 text-center">
           <div className="inline-block rounded-lg border-2 border-accent bg-accent/10 px-6 py-4 backdrop-blur-sm retro-shadow-sm">
             <p className="text-lg font-semibold text-foreground">