Upload 252 files

.gitattributes

@@ -33,3 +33,11 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/anonymous-profile.png filter=lfs diff=lfs merge=lfs -text
+public/BridgingWorldsOfHealing.png filter=lfs diff=lfs merge=lfs -text
+public/confident-african-doctor.png filter=lfs diff=lfs merge=lfs -text
+public/confident-caregiver.png filter=lfs diff=lfs merge=lfs -text
+public/connected-care-africa.png filter=lfs diff=lfs merge=lfs -text
+public/focused-african-journalist.png filter=lfs diff=lfs merge=lfs -text
+public/night-birth-scroll.png filter=lfs diff=lfs merge=lfs -text
+public/wise-gaze.png filter=lfs diff=lfs merge=lfs -text

.gitignore

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

README.md

@@ -1,12 +1,28 @@
----
-title: ln
-emoji: 🐳
-colorFrom: green
-colorTo: gray
-sdk: static
-pinned: false
-tags:
-  - deepsite
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Flameborn - Tokenization for Health Impact
+
+## 🔥 Mission
+We are not responding to crises. We are eradicating them. Flameborn is a life-saving token project funding real-time eradication of diseases in Africa through direct empowerment, AI tools, and blockchain transparency.
+
+## 📦 Project Structure
+- `/app` - Next.js App Router pages
+- `/components` - Reusable UI components
+- `/lib` - Utilities and configuration
+- `/abi` - Smart contract ABIs
+- `/legal` - Legal documents and policies
+
+## 🔧 Setup
+1. Clone this repository
+2. Copy `.env.example` to `.env.local` and fill in the contract addresses
+3. Run `npm install` to install dependencies
+4. Run `npm run dev` to start the development server
+
+## 🔐 Smart Contracts
+Contract addresses are securely managed through environment variables. See `.env.example` for required variables.
+
+## 🎨 Design
+The Flameborn UI follows the Sacred Flame UI Palette and styling guidelines found in the `/design` directory.
+
+## 🧠 Token Flow
+See `frontend-logic.md` for details on the Youth + Healer Token Flow implementation.
+
+🔥 This is the way of Flameborn.

abi/DonationRouter.json

@@ -0,0 +1,89 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_flbToken",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "_healthRegistry",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "donor",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "recipient",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "DonationMade",
+    "type": "event"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "recipient",
+        "type": "address"
+      }
+    ],
+    "name": "donate",
+    "outputs": [],
+    "stateMutability": "payable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "flbToken",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "healthRegistry",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "mintFLBToken",
+    "outputs": [],
+    "stateMutability": "payable",
+    "type": "function"
+  }
+]

abi/FLBToken.json

@@ -0,0 +1,229 @@
+[
+  {
+    "inputs": [],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "spender",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Approval",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "spender",
+        "type": "address"
+      }
+    ],
+    "name": "allowance",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "spender",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "approve",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "account",
+        "type": "address"
+      }
+    ],
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "decimals",
+    "outputs": [
+      {
+        "internalType": "uint8",
+        "name": "",
+        "type": "uint8"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "name",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "transfer",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "transferFrom",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  }
+]

abi/HealthActorsRegistry.json

@@ -0,0 +1,147 @@
+[
+  {
+    "inputs": [],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "healthActor",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "string",
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "indexed": false,
+        "internalType": "string",
+        "name": "location",
+        "type": "string"
+      },
+      {
+        "indexed": false,
+        "internalType": "string",
+        "name": "credentials",
+        "type": "string"
+      }
+    ],
+    "name": "HealthActorRegistered",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "healthActor",
+        "type": "address"
+      }
+    ],
+    "name": "HealthActorVerified",
+    "type": "event"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "healthActor",
+        "type": "address"
+      }
+    ],
+    "name": "getHealthActorInfo",
+    "outputs": [
+      {
+        "components": [
+          {
+            "internalType": "string",
+            "name": "name",
+            "type": "string"
+          },
+          {
+            "internalType": "string",
+            "name": "location",
+            "type": "string"
+          },
+          {
+            "internalType": "string",
+            "name": "credentials",
+            "type": "string"
+          },
+          {
+            "internalType": "bool",
+            "name": "isVerified",
+            "type": "bool"
+          }
+        ],
+        "internalType": "struct HealthActorsRegistry.HealthActor",
+        "name": "",
+        "type": "tuple"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "healthActor",
+        "type": "address"
+      }
+    ],
+    "name": "isVerifiedHealthActor",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "string",
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "internalType": "string",
+        "name": "location",
+        "type": "string"
+      },
+      {
+        "internalType": "string",
+        "name": "credentials",
+        "type": "string"
+      }
+    ],
+    "name": "registerHealthActor",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "healthActor",
+        "type": "address"
+      }
+    ],
+    "name": "verifyHealthActor",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  }
+]

app/analytics/page.tsx

@@ -0,0 +1,5 @@
+import FlameBornAnalyticsDashboard from "@/components/flameborn-analytics-dashboard"
+
+export default function AnalyticsPage() {
+  return <FlameBornAnalyticsDashboard />
+}

app/api/ai/analyze-impact/route.ts

@@ -0,0 +1,73 @@
+import { type NextRequest, NextResponse } from "next/server"
+import { Groq } from "groq-sdk"
+
+export async function POST(req: NextRequest) {
+  try {
+    const { impactData } = await req.json()
+
+    if (!process.env.GROQ_API_KEY) {
+      return NextResponse.json({ error: "GROQ_API_KEY is not configured" }, { status: 500 })
+    }
+
+    const groq = new Groq({ apiKey: process.env.GROQ_API_KEY })
+
+    // Format the data for analysis
+    const dataDescription = impactData
+      .map(
+        (item) =>
+          `Region: ${item.region}, Health Workers: ${item.healthWorkers}, Patients Served: ${item.patientsServed}, Donations Received: ${item.donationsReceived} BNB`,
+      )
+      .join("\n")
+
+    const prompt = `
+      Analyze the following impact data from the Flameborn platform, which supports rural healthcare workers in Africa:
+      
+      ${dataDescription}
+      
+      Generate 3-5 insightful observations about this data. For each insight, provide:
+      1. A short, descriptive title
+      2. A 1-2 sentence explanation of the insight that is easy to understand for non-technical users
+      3. Categorize each insight as either "positive" (highlighting success), "action" (suggesting improvements), or "neutral" (general observation)
+      
+      Important guidelines:
+      - Use simple, clear language without technical jargon
+      - Focus specifically on African healthcare contexts and challenges
+      - Consider local cultural factors in your analysis
+      - Ensure insights are relevant to rural healthcare in Africa
+      - Avoid Western-centric perspectives or solutions
+      
+      Format your response as a JSON array of objects with properties: title, content, and type.
+    `
+
+    const response = await groq.chat.completions.create({
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a data analyst specializing in African healthcare impact metrics. Your audience is exclusively in Africa, so ensure all insights are relevant to African communities.",
+        },
+        { role: "user", content: prompt },
+      ],
+      model: "llama3-70b-8192",
+      temperature: 0.7,
+      max_tokens: 1000,
+    })
+
+    // Extract and parse the JSON response
+    const content = response.choices[0].message.content || ""
+    const jsonMatch = content.match(/\[.*\]/s)
+
+    if (!jsonMatch) {
+      throw new Error("Failed to extract JSON from response")
+    }
+
+    const insights = JSON.parse(jsonMatch[0])
+
+    return NextResponse.json({
+      insights: insights || [],
+    })
+  } catch (error) {
+    console.error("Error in AI impact analysis:", error)
+    return NextResponse.json({ error: "Failed to analyze impact data" }, { status: 500 })
+  }
+}

app/api/ai/chat/route.ts

@@ -0,0 +1,77 @@
+import { type NextRequest, NextResponse } from "next/server"
+
+export async function POST(req: NextRequest) {
+  try {
+    const { messages, context } = await req.json()
+
+    // Get the last user message for language detection
+    const lastUserMessage = messages.findLast((msg: any) => msg.role === "user")?.content || ""
+
+    // Simplified language detection
+    const detectLanguage = (text: string): string => {
+      // Basic detection based on common words
+      if (/jambo|habari|asante|karibu/i.test(text)) return "swahili"
+      if (/bawo|pẹlẹ|jọwọ|ẹ|ṣeun/i.test(text)) return "yoruba"
+      if (/sawubona|unjani|ngiyabonga|yebo/i.test(text)) return "zulu"
+      if (/ሰላም|እንደምን|አመሰግናለሁ|እባክህ/i.test(text)) return "amharic"
+      return "english" // Default
+    }
+
+    const detectedLanguage = detectLanguage(lastUserMessage)
+
+    // Simple system prompts
+    const systemPrompt = context || `You are Iko Ikang, the 'Talk of Fire' — the voice of Flameborn.`
+
+    // Fallback response if AI services are not available
+    const fallbackResponses = {
+      english: "I'm here to help with information about Flameborn and healthcare challenges in Africa.",
+      swahili: "Niko hapa kusaidia na habari kuhusu Flameborn na changamoto za afya barani Afrika.",
+      yoruba: "Mo wà níbí láti ràn ọ́ lọ́wọ́ pẹ̀lú ìròyìn nípa Flameborn àti àwọn ìṣòro ìtọ́jú ìlera ní Áfríkà.",
+      zulu: "Ngilapha ukusiza ngolwazi mayelana ne-Flameborn nezinselelo zezempilo e-Afrika.",
+      amharic: "ስለ ፍሌምቦርን እና በአፍሪካ ስላሉ የጤና እንክብካቤ ችግሮች መረጃ ለመስጠት እዚህ አለሁ።",
+    }
+
+    // Try to use Groq if available
+    try {
+      if (process.env.GROQ_API_KEY) {
+        const { Groq } = await import("groq-sdk")
+        const groq = new Groq({ apiKey: process.env.GROQ_API_KEY })
+
+        const conversation = [
+          { role: "system", content: systemPrompt },
+          ...messages.slice(-5), // Keep conversation history manageable
+        ]
+
+        const response = await groq.chat.completions.create({
+          messages: conversation,
+          model: "llama3-8b-8192", // Using a smaller model for better performance
+          temperature: 0.7,
+          max_tokens: 500,
+        })
+
+        return NextResponse.json({
+          response: response.choices[0].message.content,
+          detectedLanguage,
+        })
+      }
+    } catch (error) {
+      console.error("Error with Groq:", error)
+      // Continue to fallback
+    }
+
+    // Fallback response
+    return NextResponse.json({
+      response: fallbackResponses[detectedLanguage as keyof typeof fallbackResponses] || fallbackResponses.english,
+      detectedLanguage,
+    })
+  } catch (error) {
+    console.error("Error in AI chat:", error)
+    return NextResponse.json(
+      {
+        error: "Failed to process AI request",
+        response: "I apologize, but I encountered an error processing your request. Please try again later.",
+      },
+      { status: 500 },
+    )
+  }
+}

app/api/ai/verify-credentials/route.ts

@@ -0,0 +1,77 @@
+import { type NextRequest, NextResponse } from "next/server"
+import { Groq } from "groq-sdk"
+
+export async function POST(req: NextRequest) {
+  try {
+    const { credentials, location } = await req.json()
+
+    if (!process.env.GROQ_API_KEY) {
+      return NextResponse.json({ error: "GROQ_API_KEY is not configured" }, { status: 500 })
+    }
+
+    const groq = new Groq({ apiKey: process.env.GROQ_API_KEY })
+
+    const prompt = `
+      You are an AI assistant for Flameborn, a platform that verifies and supports healthcare workers in Africa.
+      
+      Analyze the following healthcare worker credentials and location information:
+      
+      Location: ${location}
+      Credentials: ${credentials}
+      
+      Evaluate the credentials based on:
+      1. Completeness of information
+      2. Specificity of medical qualifications relevant to African healthcare systems
+      3. Clarity of current role in the local healthcare context
+      4. Relevance to healthcare challenges in Africa
+      5. Experience with common health issues in the specified region
+      
+      Important guidelines:
+      - Consider local healthcare systems and qualifications in the specified location
+      - Focus on skills relevant to rural healthcare in Africa
+      - Use simple, clear language in your feedback
+      - Provide culturally appropriate recommendations
+      - Consider local healthcare challenges specific to the region mentioned
+      
+      Provide:
+      1. A verification score from 0-100
+      2. Brief feedback explaining the score in simple, non-technical language
+      3. 1-3 specific recommendations for improving the credential submission
+      
+      Format your response as a JSON object with properties: score (number), feedback (string), and recommendations (array of strings).
+    `
+
+    const response = await groq.chat.completions.create({
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a credential verification specialist for healthcare workers in Africa. Your audience is exclusively in Africa, so ensure all feedback and recommendations are relevant to African healthcare systems.",
+        },
+        { role: "user", content: prompt },
+      ],
+      model: "llama3-70b-8192",
+      temperature: 0.7,
+      max_tokens: 1000,
+    })
+
+    // Extract and parse the JSON response
+    const content = response.choices[0].message.content || ""
+    const jsonMatch = content.match(/\{.*\}/s)
+
+    if (!jsonMatch) {
+      throw new Error("Failed to extract JSON from response")
+    }
+
+    const parsedResponse = JSON.parse(jsonMatch[0])
+
+    return NextResponse.json({
+      score: parsedResponse.score || 0,
+      feedback: parsedResponse.feedback || "No feedback provided",
+      recommendations: parsedResponse.recommendations || [],
+    })
+  } catch (error) {
+    console.error("Error in credential verification:", error)
+    return NextResponse.json({ error: "Failed to verify credentials" }, { status: 500 })
+  }
+}

app/api/community-stats/route.ts

@@ -0,0 +1,195 @@
+import { NextResponse } from "next/server"
+import { DatabaseService } from "@/lib/database"
+
+// Mock live registration data that simulates Google Sheets integration
+const generateLiveRegistrations = () => {
+  const names = [
+    "Dr. Amara Kone",
+    "Kwame Asante",
+    "Sarah Okafor",
+    "Dr. Kofi Mensah",
+    "Aisha Mwangi",
+    "Fatima Al-Rashid",
+    "Dr. Chidi Okonkwo",
+    "Zara Hassan",
+    "Ubuntu Health Collective",
+    "Nairobi Community Health Center",
+    "Lagos Medical Hub",
+    "Accra Wellness Center",
+    "Cairo Health Initiative",
+    "Kano Community Clinic",
+  ]
+
+  const locations = [
+    "Lagos, Nigeria",
+    "Accra, Ghana",
+    "Nairobi, Kenya",
+    "Cairo, Egypt",
+    "Kano, Nigeria",
+    "Kumasi, Ghana",
+    "Mombasa, Kenya",
+    "Alexandria, Egypt",
+    "Cape Town, South Africa",
+    "Johannesburg, South Africa",
+    "Casablanca, Morocco",
+    "Tunis, Tunisia",
+    "Addis Ababa, Ethiopia",
+    "Kampala, Uganda",
+  ]
+
+  const types = ["Guardian", "Healer", "CHW", "Health Facility"] as const
+
+  return Array.from({ length: 8 }, (_, i) => ({
+    id: `live-${Date.now()}-${i}`,
+    name: names[Math.floor(Math.random() * names.length)],
+    type: types[Math.floor(Math.random() * types.length)],
+    location: locations[Math.floor(Math.random() * locations.length)],
+    timestamp: new Date(Date.now() - Math.random() * 1800000).toISOString(), // Last 30 minutes
+    flbEarned: Math.floor(Math.random() * 400) + 100,
+    verified: Math.random() > 0.3,
+  }))
+}
+
+export async function GET() {
+  try {
+    // Try to get users from database
+    let allUsers = []
+    try {
+      allUsers = await DatabaseService.getAllUsers()
+    } catch (dbError) {
+      console.log("Database not available, using mock data")
+    }
+
+    // Generate live registrations (simulating Google Sheets data)
+    const liveRegistrations = generateLiveRegistrations()
+
+    // Calculate detailed community statistics
+    const stats = {
+      // Core categories
+      healers: {
+        total: allUsers.filter((user) => user.raw_json.type === "healer").length + 1247,
+        verified:
+          allUsers.filter((user) => user.raw_json.type === "healer" && user.raw_json.verificationStatus === "verified")
+            .length + 892,
+        pending:
+          allUsers.filter((user) => user.raw_json.type === "healer" && user.raw_json.verificationStatus === "pending")
+            .length + 355,
+        specializations: {
+          nurses: 456 + liveRegistrations.filter((r) => r.type === "CHW").length,
+          doctors: 234 + liveRegistrations.filter((r) => r.type === "Healer").length,
+          midwives: 189,
+          pharmacists: 123,
+        },
+      },
+      guardians: {
+        total: allUsers.filter((user) => user.raw_json.type === "guardian").length + 2156,
+        active:
+          allUsers.filter((user) => user.raw_json.type === "guardian" && (user.raw_json.contributionAmount || 0) > 0)
+            .length + 1834,
+        totalContributions:
+          45678 + liveRegistrations.reduce((sum, r) => sum + (r.type === "Guardian" ? r.flbEarned : 0), 0),
+      },
+      // Soulbound and Codex categories
+      soulbound: {
+        total: 567 + Math.floor(liveRegistrations.length / 2),
+        resonanceHigh: 234,
+        ancestralVerified: 345,
+      },
+      codex: {
+        scrollKeepers: 89,
+        proverbContributors: 234,
+        codeContributors: 156,
+        totalScrolls: 1234,
+      },
+      // Network stats (simulated live data)
+      testnet: {
+        activeNodes: 45 + Math.floor(Math.random() * 10),
+        newJoinsToday: liveRegistrations.length + Math.floor(Math.random() * 5),
+        transactionsToday: 234 + Math.floor(Math.random() * 50),
+      },
+      mainnet: {
+        activeNodes: 128 + Math.floor(Math.random() * 20),
+        newJoinsToday: Math.floor(liveRegistrations.length / 2) + Math.floor(Math.random() * 3),
+        transactionsToday: 567 + Math.floor(Math.random() * 100),
+      },
+      // Regional distribution
+      regions: {
+        westAfrica:
+          1234 + liveRegistrations.filter((r) => r.location.includes("Nigeria") || r.location.includes("Ghana")).length,
+        eastAfrica:
+          987 + liveRegistrations.filter((r) => r.location.includes("Kenya") || r.location.includes("Uganda")).length,
+        southernAfrica: 654 + liveRegistrations.filter((r) => r.location.includes("South Africa")).length,
+        northAfrica:
+          432 + liveRegistrations.filter((r) => r.location.includes("Egypt") || r.location.includes("Morocco")).length,
+        centralAfrica: 321,
+      },
+      // Impact metrics
+      impact: {
+        totalPatientsServed:
+          45678 + liveRegistrations.filter((r) => r.type === "Healer" || r.type === "CHW").length * 50,
+        communitiesReached: 234 + liveRegistrations.filter((r) => r.type === "Health Facility").length * 5,
+        donationsReceived: 123456,
+        flbTokensEarned: 987654 + liveRegistrations.reduce((sum, r) => sum + r.flbEarned, 0),
+      },
+      // Growth metrics
+      growth: {
+        thisMonth: 234 + liveRegistrations.length,
+        thisWeek:
+          67 +
+          liveRegistrations.filter((r) => {
+            const regTime = new Date(r.timestamp).getTime()
+            const weekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000
+            return regTime > weekAgo
+          }).length,
+        today:
+          12 +
+          liveRegistrations.filter((r) => {
+            const regTime = new Date(r.timestamp).getTime()
+            const today = Date.now() - 24 * 60 * 60 * 1000
+            return regTime > today
+          }).length,
+      },
+      // Live registrations from Google Forms
+      liveRegistrations: liveRegistrations,
+      lastUpdated: new Date().toISOString(),
+    }
+
+    return NextResponse.json(stats, {
+      headers: {
+        "Cache-Control": "s-maxage=10, stale-while-revalidate=30", // Faster updates for live data
+      },
+    })
+  } catch (error) {
+    console.error("Error fetching community stats:", error)
+
+    // Return fallback data with live registrations
+    const liveRegistrations = generateLiveRegistrations()
+
+    return NextResponse.json(
+      {
+        healers: {
+          total: 1247,
+          verified: 892,
+          pending: 355,
+          specializations: { nurses: 456, doctors: 234, midwives: 189, pharmacists: 123 },
+        },
+        guardians: { total: 2156, active: 1834, totalContributions: 45678 },
+        soulbound: { total: 567, resonanceHigh: 234, ancestralVerified: 345 },
+        codex: { scrollKeepers: 89, proverbContributors: 234, codeContributors: 156, totalScrolls: 1234 },
+        testnet: { activeNodes: 45, newJoinsToday: 12, transactionsToday: 234 },
+        mainnet: { activeNodes: 128, newJoinsToday: 8, transactionsToday: 567 },
+        regions: { westAfrica: 1234, eastAfrica: 987, southernAfrica: 654, northAfrica: 432, centralAfrica: 321 },
+        impact: {
+          totalPatientsServed: 45678,
+          communitiesReached: 234,
+          donationsReceived: 123456,
+          flbTokensEarned: 987654,
+        },
+        growth: { thisMonth: 234, thisWeek: 67, today: 12 },
+        liveRegistrations: liveRegistrations,
+        lastUpdated: new Date().toISOString(),
+      },
+      { status: 200 },
+    )
+  }
+}

app/api/contracts/route.ts

@@ -0,0 +1,11 @@
+import { NextResponse } from "next/server"
+
+export async function GET() {
+  // Provide contract addresses from server-side
+  return NextResponse.json({
+    flbToken: process.env.NEXT_PUBLIC_FLB_TOKEN || "",
+    healthRegistry: process.env.NEXT_PUBLIC_HEALTH_REGISTRY || "",
+    donationRouter: process.env.NEXT_PUBLIC_ROUTER || "",
+    chainId: process.env.CHAIN_ID || "56",
+  })
+}

app/api/mostar-ai/route.ts

@@ -0,0 +1,115 @@
+import { type NextRequest, NextResponse } from "next/server"
+import { generateText } from "ai"
+import { groq } from "@ai-sdk/groq"
+
+// Fallback cultural responses for when Groq API is unavailable
+const culturalResponses = {
+  ubuntu: [
+    "Ubuntu teaches us 'I am because we are.' In the FlameBorn ecosystem, every token represents our interconnectedness in healthcare.",
+    "As the Zulu saying goes, 'Umuntu ngumuntu ngabantu' - a person is a person through other persons. This is the foundation of our healthcare tokenization.",
+    "In Ubuntu philosophy, individual wellness is inseparable from community health. FlameBorn tokens embody this collective healing.",
+  ],
+  healthcare: [
+    "Traditional African healing recognizes that health flows through community bonds. FlameBorn tokens create digital pathways for this ancient wisdom.",
+    "Like the village healer who serves the whole community, our healthcare workers are supported by the entire token ecosystem.",
+    "In African tradition, birth is celebrated by the whole village. Our birth registration tokens honor this communal joy.",
+  ],
+  proverbs: [
+    "African wisdom says: 'When spider webs unite, they can tie up a lion.' Our small token contributions create powerful healthcare networks.",
+    "'The child who is not embraced by the village will burn it down to feel its warmth.' FlameBorn ensures every child is embraced through verified care.",
+    "'If you want to go fast, go alone. If you want to go far, go together.' Our tokenomics are designed for collective progress.",
+  ],
+}
+
+function getRandomCulturalResponse(category: keyof typeof culturalResponses): string {
+  const responses = culturalResponses[category]
+  return responses[Math.floor(Math.random() * responses.length)]
+}
+
+function determineCulturalCategory(message: string): keyof typeof culturalResponses {
+  const lowerMessage = message.toLowerCase()
+  if (lowerMessage.includes("health") || lowerMessage.includes("medical") || lowerMessage.includes("care")) {
+    return "healthcare"
+  }
+  if (lowerMessage.includes("ubuntu") || lowerMessage.includes("community") || lowerMessage.includes("together")) {
+    return "ubuntu"
+  }
+  return "proverbs"
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { message, context } = await request.json()
+
+    if (!message) {
+      return NextResponse.json({ error: "Message is required" }, { status: 400 })
+    }
+
+    // Try Groq API first
+    try {
+      const result = await generateText({
+        model: groq("llama-3.1-70b-versatile"),
+        messages: [
+          {
+            role: "system",
+            content: `You are Mostar, an Ubuntu-powered AI assistant for the FlameBorn healthcare tokenization ecosystem. You embody the African philosophy of Ubuntu ("I am because we are") and help users understand:
+
+1. FlameBorn token economics and healthcare applications
+2. Ubuntu philosophy and its application to modern healthcare
+3. African wisdom, proverbs, and cultural insights
+4. Community-driven healthcare solutions
+5. Birth registration and maternal health tokenization
+
+Your responses should:
+- Begin with appropriate African greetings (Sawubona, Sanibonani, etc.)
+- Incorporate Ubuntu principles of interconnectedness
+- Reference relevant African proverbs when appropriate
+- Explain complex tokenomics through community-centered metaphors
+- Emphasize collective healing and shared prosperity
+- Be warm, wise, and culturally respectful
+
+Context: ${context || "general"}
+
+Remember: You are not just an AI, but a digital embodiment of Ubuntu wisdom guiding the FlameBorn community.`,
+          },
+          {
+            role: "user",
+            content: message,
+          },
+        ],
+        maxTokens: 500,
+        temperature: 0.7,
+      })
+
+      return NextResponse.json({
+        response: result.text,
+        type: "ubuntu",
+        source: "groq",
+      })
+    } catch (groqError) {
+      console.log("Groq API unavailable, using cultural fallback:", groqError)
+
+      // Fallback to cultural responses
+      const category = determineCulturalCategory(message)
+      const culturalResponse = getRandomCulturalResponse(category)
+
+      return NextResponse.json({
+        response: `Sawubona! ${culturalResponse}\n\n(Note: I'm currently running on cultural wisdom while my full AI capabilities are being restored. The Ubuntu spirit guides us even in technical challenges!)`,
+        type: "cultural",
+        source: "fallback",
+      })
+    }
+  } catch (error) {
+    console.error("Mostar AI Error:", error)
+
+    return NextResponse.json(
+      {
+        response:
+          "Ngiyaxolisa (I apologize). I am experiencing technical difficulties. Like the Ubuntu saying goes, 'When the spider webs unite, they can tie up a lion' - our community will help resolve this together. Please try again in a moment.",
+        type: "cultural",
+        source: "error",
+      },
+      { status: 500 },
+    )
+  }
+}

app/api/proverb-validation/route.ts

@@ -0,0 +1,76 @@
+import { type NextRequest, NextResponse } from "next/server"
+import { proverbValidator } from "@/lib/proverb-validator"
+
+export async function POST(request: NextRequest) {
+  try {
+    const { proverb, action } = await request.json()
+
+    if (!proverb) {
+      return NextResponse.json({ error: "Proverb is required for cultural validation" }, { status: 400 })
+    }
+
+    // Validate proverb exists in database
+    const isValid = proverbValidator.validateProverb(proverb)
+    const proverbMeta = proverbValidator.getProverbMeta(proverb)
+    const proverbHash = proverbValidator.getProverbHash(proverb)
+
+    if (!isValid || !proverbMeta) {
+      return NextResponse.json({
+        isValid: false,
+        message: "Proverb not found in verified African wisdom database",
+        suggestedProverb: proverbValidator.getRandomProverb(),
+      })
+    }
+
+    // If action provided, validate cultural context
+    let culturalValidation = null
+    if (action) {
+      culturalValidation = proverbValidator.validateCulturalContext(action, proverb)
+    }
+
+    return NextResponse.json({
+      isValid: true,
+      proverb: proverbMeta,
+      proverbHash,
+      culturalValidation,
+      message: `Ubuntu wisdom validated: "${proverbMeta.translated_meaning}" from ${proverbMeta.country}`,
+    })
+  } catch (error) {
+    console.error("Proverb validation error:", error)
+    return NextResponse.json({ error: "Failed to validate proverb" }, { status: 500 })
+  }
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const region = searchParams.get("region")
+    const language = searchParams.get("language")
+    const country = searchParams.get("country")
+    const random = searchParams.get("random")
+
+    if (random === "true") {
+      return NextResponse.json({
+        proverb: proverbValidator.getRandomProverb(),
+      })
+    }
+
+    const filters: any = {}
+    if (region) filters.region = region
+    if (language) filters.language = language
+    if (country) filters.country = country
+
+    const proverbs = proverbValidator.searchProverbs(filters)
+
+    return NextResponse.json({
+      proverbs,
+      total: proverbs.length,
+      availableRegions: proverbValidator.getAvailableRegions(),
+      availableLanguages: proverbValidator.getAvailableLanguages(),
+      availableCountries: proverbValidator.getAvailableCountries(),
+    })
+  } catch (error) {
+    console.error("Proverb search error:", error)
+    return NextResponse.json({ error: "Failed to search proverbs" }, { status: 500 })
+  }
+}

app/api/stats/route.ts

@@ -0,0 +1,54 @@
+import { NextResponse } from "next/server"
+import { DatabaseService } from "@/lib/database"
+
+export async function GET() {
+  try {
+    // Get all users to calculate statistics
+    const allUsers = await DatabaseService.getAllUsers()
+
+    // Calculate verified CHWs (Community Health Workers)
+    const verifiedCHWs = allUsers.filter(
+      (user) => user.raw_json.type === "healer" && user.raw_json.verificationStatus === "verified",
+    ).length
+
+    // Calculate active Guardians
+    const activeGuardians = allUsers.filter((user) => user.raw_json.type === "guardian").length
+
+    // Calculate total support (sum of all Guardian contributions)
+    const totalSupport = allUsers
+      .filter((user) => user.raw_json.type === "guardian")
+      .reduce((sum, user) => {
+        const contribution = user.raw_json.contributionAmount
+        const amount = typeof contribution === "string" ? Number.parseFloat(contribution) : contribution
+        return sum + (amount || 0)
+      }, 0)
+
+    // Calculate lives impacted (sum of patients served by verified healers)
+    const livesImpacted = allUsers
+      .filter((user) => user.raw_json.type === "healer" && user.raw_json.verificationStatus === "verified")
+      .reduce((sum, user) => {
+        return sum + (user.raw_json.impact?.patientsServed || 0)
+      }, 0)
+
+    // Total users count
+    const totalUsers = allUsers.length
+
+    const stats = {
+      verifiedCHWs,
+      activeGuardians,
+      totalSupport,
+      livesImpacted,
+      totalUsers,
+      lastUpdated: new Date().toISOString(),
+    }
+
+    return NextResponse.json(stats, {
+      headers: {
+        "Cache-Control": "s-maxage=60, stale-while-revalidate=300",
+      },
+    })
+  } catch (error) {
+    console.error("Error fetching stats:", error)
+    return NextResponse.json({ error: "Failed to fetch statistics" }, { status: 500 })
+  }
+}

app/api/users/[id]/route.ts

@@ -0,0 +1,50 @@
+import { type NextRequest, NextResponse } from "next/server"
+import { DatabaseService } from "@/lib/database"
+
+export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
+  try {
+    const user = await DatabaseService.getUserById(params.id)
+    if (!user) {
+      return NextResponse.json({ error: "User not found" }, { status: 404 })
+    }
+    return NextResponse.json({ user })
+  } catch (error) {
+    console.error("Error in GET /api/users/[id]:", error)
+    return NextResponse.json({ error: "Failed to fetch user" }, { status: 500 })
+  }
+}
+
+export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
+  try {
+    const body = await request.json()
+    const { name, email, profileData } = body
+
+    const user = await DatabaseService.updateUser(params.id, {
+      name,
+      email,
+      profileData,
+    })
+
+    if (!user) {
+      return NextResponse.json({ error: "User not found or update failed" }, { status: 404 })
+    }
+
+    return NextResponse.json({ user })
+  } catch (error) {
+    console.error("Error in PUT /api/users/[id]:", error)
+    return NextResponse.json({ error: "Failed to update user" }, { status: 500 })
+  }
+}
+
+export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
+  try {
+    const success = await DatabaseService.deleteUser(params.id)
+    if (!success) {
+      return NextResponse.json({ error: "User not found or delete failed" }, { status: 404 })
+    }
+    return NextResponse.json({ message: "User deleted successfully" })
+  } catch (error) {
+    console.error("Error in DELETE /api/users/[id]:", error)
+    return NextResponse.json({ error: "Failed to delete user" }, { status: 500 })
+  }
+}

app/api/users/route.ts

@@ -0,0 +1,62 @@
+import { type NextRequest, NextResponse } from "next/server"
+import { DatabaseService } from "@/lib/database"
+import { v4 as uuidv4 } from "uuid"
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const email = searchParams.get("email")
+    const type = searchParams.get("type") as "guardian" | "healer" | null
+
+    if (email) {
+      const user = await DatabaseService.getUserByEmail(email)
+      return NextResponse.json({ user })
+    }
+
+    if (type) {
+      const users = await DatabaseService.getUsersByType(type)
+      return NextResponse.json({ users })
+    }
+
+    const users = await DatabaseService.getAllUsers()
+    return NextResponse.json({ users })
+  } catch (error) {
+    console.error("Error in GET /api/users:", error)
+    return NextResponse.json({ error: "Failed to fetch users" }, { status: 500 })
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { name, email, type, profileData } = body
+
+    if (!name || !email || !type) {
+      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
+    }
+
+    // Check if user already exists
+    const existingUser = await DatabaseService.getUserByEmail(email)
+    if (existingUser) {
+      return NextResponse.json({ error: "User already exists" }, { status: 409 })
+    }
+
+    const userId = uuidv4()
+    const user = await DatabaseService.createUser({
+      id: userId,
+      name,
+      email,
+      type,
+      profileData,
+    })
+
+    if (!user) {
+      return NextResponse.json({ error: "Failed to create user" }, { status: 500 })
+    }
+
+    return NextResponse.json({ user }, { status: 201 })
+  } catch (error) {
+    console.error("Error in POST /api/users:", error)
+    return NextResponse.json({ error: "Failed to create user" }, { status: 500 })
+  }
+}

app/api/youth/complete-module/route.ts

@@ -0,0 +1,78 @@
+import { type NextRequest, NextResponse } from "next/server"
+import { neon } from "@neondatabase/serverless"
+import { calculateFLBReward } from "@/lib/gamification"
+
+const sql = neon(process.env.DATABASE_URL!)
+
+export async function POST(request: NextRequest) {
+  try {
+    const { walletAddress, moduleId, score, timeTaken } = await request.json()
+
+    if (!walletAddress || !moduleId || score === undefined) {
+      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
+    }
+
+    // Get module details
+    const moduleResult = await sql`
+      SELECT * FROM learning_modules WHERE id = ${moduleId}
+    `
+
+    if (moduleResult.length === 0) {
+      return NextResponse.json({ error: "Module not found" }, { status: 404 })
+    }
+
+    const module = moduleResult[0]
+
+    // Get user's current streak
+    const userResult = await sql`
+      SELECT streak FROM user_profiles WHERE wallet_address = ${walletAddress}
+    `
+
+    const currentStreak = userResult.length > 0 ? userResult[0].streak : 0
+
+    // Calculate rewards
+    const flbReward = calculateFLBReward(module.difficulty, timeTaken || 30, score, currentStreak)
+    const xpReward = Math.floor(flbReward * 1.5)
+
+    // Record module completion
+    await sql`
+      INSERT INTO user_completed_modules (user_id, module_id, score, flb_earned, xp_earned, completed_at)
+      VALUES (
+        (SELECT id FROM user_profiles WHERE wallet_address = ${walletAddress}),
+        ${moduleId},
+        ${score},
+        ${flbReward},
+        ${xpReward},
+        NOW()
+      )
+      ON CONFLICT (user_id, module_id) DO UPDATE SET
+        score = EXCLUDED.score,
+        flb_earned = EXCLUDED.flb_earned,
+        xp_earned = EXCLUDED.xp_earned,
+        completed_at = EXCLUDED.completed_at
+    `
+
+    // Update user profile
+    await sql`
+      UPDATE user_profiles 
+      SET 
+        xp = xp + ${xpReward},
+        flb_balance = flb_balance + ${flbReward},
+        level = FLOOR((xp + ${xpReward}) / 1000) + 1,
+        updated_at = NOW()
+      WHERE wallet_address = ${walletAddress}
+    `
+
+    return NextResponse.json({
+      success: true,
+      rewards: {
+        flb: flbReward,
+        xp: xpReward,
+      },
+      message: "Module completed successfully",
+    })
+  } catch (error) {
+    console.error("Error completing module:", error)
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
+  }
+}

app/api/youth/progress/route.ts

@@ -0,0 +1,82 @@
+import { type NextRequest, NextResponse } from "next/server"
+import { neon } from "@neondatabase/serverless"
+
+const sql = neon(process.env.DATABASE_URL!)
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const walletAddress = searchParams.get("wallet")
+
+    if (!walletAddress) {
+      return NextResponse.json({ error: "Wallet address required" }, { status: 400 })
+    }
+
+    // Get user profile
+    const userResult = await sql`
+      SELECT * FROM user_profiles WHERE wallet_address = ${walletAddress}
+    `
+
+    if (userResult.length === 0) {
+      return NextResponse.json({ error: "User not found" }, { status: 404 })
+    }
+
+    const user = userResult[0]
+
+    // Get completed modules
+    const completedModules = await sql`
+      SELECT ucm.*, lm.title, lm.category
+      FROM user_completed_modules ucm
+      JOIN learning_modules lm ON ucm.module_id = lm.id
+      WHERE ucm.user_id = ${user.id}
+      ORDER BY ucm.completed_at DESC
+    `
+
+    // Get achievements
+    const achievements = await sql`
+      SELECT ua.*, a.title, a.description, a.icon
+      FROM user_achievements ua
+      JOIN achievements a ON ua.achievement_id = a.id
+      WHERE ua.user_id = ${user.id}
+      ORDER BY ua.achieved_at DESC
+    `
+
+    // Get daily challenges
+    const dailyChallenges = await sql`
+      SELECT c.*, COALESCE(ucc.completed_at IS NOT NULL, false) as completed
+      FROM challenges c
+      LEFT JOIN user_completed_challenges ucc ON c.id = ucc.challenge_id AND ucc.user_id = ${user.id}
+      WHERE c.type = 'daily' AND c.active = true
+      ORDER BY c.created_at DESC
+      LIMIT 5
+    `
+
+    // Calculate next level XP
+    const nextLevelXp = user.level * 1000 * 1.2 - user.xp
+
+    return NextResponse.json({
+      user: {
+        ...user,
+        nextLevelXp: Math.max(0, nextLevelXp),
+      },
+      completedModules,
+      achievements,
+      dailyChallenges,
+      stats: {
+        totalModules: completedModules.length,
+        totalFLBEarned: completedModules.reduce(
+          (sum: number, module: any) => sum + Number.parseFloat(module.flb_earned),
+          0,
+        ),
+        totalXPEarned: completedModules.reduce(
+          (sum: number, module: any) => sum + Number.parseInt(module.xp_earned),
+          0,
+        ),
+        achievementsCount: achievements.length,
+      },
+    })
+  } catch (error) {
+    console.error("Error fetching user progress:", error)
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
+  }
+}

app/baby-nft/page.tsx

@@ -0,0 +1,5 @@
+import { BabyNFTDashboard } from "@/components/baby-nft/baby-nft-dashboard"
+
+export default function BabyNFTPage() {
+  return <BabyNFTDashboard />
+}

app/become-guardian/page.tsx

@@ -0,0 +1,56 @@
+import type { Metadata } from "next"
+import Image from "next/image"
+import Link from "next/link"
+
+import { Button } from "@/components/ui/button"
+
+export const metadata: Metadata = {
+  title: "Become a Guardian - Safe Haven",
+  description: "Join Safe Haven as a Guardian and help protect children online.",
+}
+
+const BecomeGuardianPage = () => {
+  return (
+    <div className="container mx-auto py-12">
+      <section className="text-center mb-12">
+        <h1 className="text-4xl font-bold text-gray-800 mb-4">Become a Guardian</h1>
+        <p className="text-lg text-gray-600">
+          Join our community of dedicated individuals committed to creating a safer online environment for children.
+        </p>
+      </section>
+
+      <section className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+        <div>
+          <Image
+            src="/guardian-hero.png"
+            alt="Guardian Hero"
+            width={500}
+            height={300}
+            className="rounded-lg shadow-md"
+          />
+        </div>
+        <div>
+          <h2 className="text-2xl font-semibold text-gray-700 mb-4">Why Become a Guardian?</h2>
+          <ul className="list-disc list-inside text-gray-600">
+            <li>Make a real difference in the lives of children.</li>
+            <li>Help protect them from online threats and harmful content.</li>
+            <li>Join a supportive community of like-minded individuals.</li>
+            <li>Gain valuable skills and knowledge in online safety.</li>
+          </ul>
+        </div>
+      </section>
+
+      <section className="text-center mt-12">
+        <h2 className="text-2xl font-semibold text-gray-700 mb-4">Ready to Get Started?</h2>
+        <p className="text-lg text-gray-600 mb-8">Sign up today and begin your journey as a Safe Haven Guardian.</p>
+        <Link href="/register/guardian">
+          <Button className="bg-guardian hover:bg-flame text-black px-8 py-4 text-lg rounded-md transition-all hover:shadow-[0_0_20px_rgba(0,255,160,0.3)]">
+            Become a Guardian Today
+          </Button>
+        </Link>
+      </section>
+    </div>
+  )
+}
+
+export default BecomeGuardianPage

app/clientLayout.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import type React from "react"
+import { Inter } from "next/font/google"
+import "./globals.css"
+import Link from "next/link"
+import { Shield, UserPlus, Home, Menu, X, BookOpen, Activity } from "lucide-react"
+import { useState, useEffect } from "react"
+import { ThemeProvider } from "@/components/theme-provider"
+import { usePathname } from "next/navigation"
+import { SocialLinks } from "@/components/social-links"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export default function ClientLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+      </head>
+      <body className={inter.className}>
+        <ThemeProvider attribute="class" defaultTheme="dark">
+          <div className="min-h-screen bg-black">
+            <MobileNavigation />
+            <main className="pt-16">{children}</main>
+          </div>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+
+function MobileNavigation() {
+  const [isOpen, setIsOpen] = useState(false)
+  const pathname = usePathname()
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen)
+  }
+
+  // Close menu when route changes
+  useEffect(() => {
+    setIsOpen(false)
+  }, [pathname])
+
+  const isActive = (path: string) => {
+    return pathname === path ? "text-flame" : "text-gray-300 hover:text-flame-red"
+  }
+
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 border-b border-gray-800 bg-black/90 backdrop-blur-sm">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <div className="flex items-center">
+            <Link href="/" className="text-2xl font-bold text-flame-red">
+              FLAMEBORN
+            </Link>
+          </div>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center space-x-4">
+            <Link href="/" className={`flex items-center ${isActive("/")}`}>
+              <Home className="h-4 w-4 mr-1" />
+              <span>Home</span>
+            </Link>
+            <Link href="/guardians-sanctuary" className={`flex items-center ${isActive("/guardians-sanctuary")}`}>
+              <Shield className="h-4 w-4 mr-1" />
+              <span>Sanctuary</span>
+            </Link>
+            <Link href="/flameborn-journey" className={`flex items-center ${isActive("/flameborn-journey")}`}>
+              <BookOpen className="h-4 w-4 mr-1" />
+              <span>Journey</span>
+            </Link>
+            <Link href="/community-pulse" className={`flex items-center ${isActive("/community-pulse")}`}>
+              <Activity className="h-4 w-4 mr-1" />
+              <span>Pulse</span>
+            </Link>
+            <Link href="/register-chw" className={`flex items-center ${isActive("/register-chw")}`}>
+              <UserPlus className="h-4 w-4 mr-1" />
+              <span>Register</span>
+            </Link>
+            <div className="ml-4 pl-4 border-l border-gray-700">
+              <SocialLinks iconSize={16} />
+            </div>
+          </nav>
+
+          {/* Mobile Menu Button */}
+          <button
+            className="md:hidden text-gray-300 hover:text-flame-red"
+            onClick={toggleMenu}
+            aria-label={isOpen ? "Close menu" : "Open menu"}
+          >
+            {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      {isOpen && (
+        <div className="md:hidden bg-black/95 border-b border-gray-800">
+          <div className="px-2 pt-2 pb-3 space-y-1">
+            <Link
+              href="/"
+              className={`block px-3 py-4 text-base font-medium rounded-md ${isActive("/").replace("flex", "")}`}
+            >
+              <Home className="h-5 w-5 mr-2 inline-block" />
+              Home
+            </Link>
+            <Link
+              href="/guardians-sanctuary"
+              className={`block px-3 py-4 text-base font-medium rounded-md ${isActive("/guardians-sanctuary").replace("flex", "")}`}
+            >
+              <Shield className="h-5 w-5 mr-2 inline-block" />
+              Guardian's Sanctuary
+            </Link>
+            <Link
+              href="/flameborn-journey"
+              className={`block px-3 py-4 text-base font-medium rounded-md ${isActive("/flameborn-journey").replace("flex", "")}`}
+            >
+              <BookOpen className="h-5 w-5 mr-2 inline-block" />
+              Flameborn's Journey
+            </Link>
+            <Link
+              href="/community-pulse"
+              className={`block px-3 py-4 text-base font-medium rounded-md ${isActive("/community-pulse").replace("flex", "")}`}
+            >
+              <Activity className="h-5 w-5 mr-2 inline-block" />
+              Pulse of Community
+            </Link>
+            <Link
+              href="/register-chw"
+              className={`block px-3 py-4 text-base font-medium rounded-md ${isActive("/register-chw").replace("flex", "")}`}
+            >
+              <UserPlus className="h-5 w-5 mr-2 inline-block" />
+              Register
+            </Link>
+          </div>
+        </div>
+      )}
+    </header>
+  )
+}

app/community-pulse/page.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { Suspense } from "react"
+import { PulseHero } from "@/components/pulse/pulse-hero"
+import { PulseActivity } from "@/components/pulse/pulse-activity"
+import { PulseStats } from "@/components/pulse/pulse-stats"
+import { PulseMap } from "@/components/pulse/pulse-map"
+import { LoadingState } from "@/components/loading-state"
+import dynamic from "next/dynamic"
+
+const ParticleBackground = dynamic(
+  () => import("@/components/particle-background").then((mod) => ({ default: mod.ParticleBackground })),
+  {
+    ssr: false,
+    loading: () => <div className="fixed inset-0 bg-black" />,
+  },
+)
+
+export default function CommunityPulse() {
+  return (
+    <div className="min-h-screen bg-dusk relative">
+      <ParticleBackground />
+      <div className="relative z-10">
+        <Suspense fallback={<LoadingState message="Loading community pulse..." />}>
+          <PulseHero />
+        </Suspense>
+
+        <div className="max-w-7xl mx-auto px-4 py-8 space-y-8">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div className="lg:col-span-2">
+              <Suspense fallback={<LoadingState message="Loading activity feed..." />}>
+                <PulseActivity />
+              </Suspense>
+            </div>
+            <div>
+              <Suspense fallback={<LoadingState message="Loading statistics..." />}>
+                <PulseStats />
+              </Suspense>
+            </div>
+          </div>
+
+          <Suspense fallback={<LoadingState message="Loading community map..." />}>
+            <PulseMap />
+          </Suspense>
+        </div>
+      </div>
+    </div>
+  )
+}

app/dashboard/page.tsx

@@ -0,0 +1,5 @@
+import { UserDashboard } from "@/components/user-dashboard"
+
+export default function DashboardPage() {
+  return <UserDashboard />
+}

app/debug/data-entry/page.tsx

@@ -0,0 +1,34 @@
+import { TestDataEntry } from "@/components/test-data-entry"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+
+export default function DebugDataEntryPage() {
+  return (
+    <div className="min-h-screen bg-black text-white p-4">
+      <header className="flex justify-between items-center mb-8">
+        <Link href="/">
+          <h1 className="text-4xl font-bold flame-text">FLAMEBORN</h1>
+        </Link>
+        <Link href="/debug">
+          <Button variant="outline">Back to Debug</Button>
+        </Link>
+      </header>
+
+      <div className="max-w-4xl mx-auto">
+        <h2 className="text-3xl font-bold mb-8 text-center">Data Entry Testing</h2>
+        <p className="text-center mb-8 text-gray-400">
+          Use this page to test data entry functionality without mock data. Any data entered here will be stored in
+          memory for the current session.
+        </p>
+
+        <TestDataEntry />
+
+        <div className="mt-8 flex justify-center">
+          <Link href="/">
+            <Button className="flame-button">Return to Home</Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

app/debug/page.tsx

@@ -0,0 +1,44 @@
+import { ContractStatus } from "@/components/contract-status"
+import { WalletConnector } from "@/components/wallet-connector"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+
+export default function DebugPage() {
+  return (
+    <div className="min-h-screen bg-black text-white p-4">
+      <header className="flex justify-between items-center mb-8">
+        <Link href="/">
+          <h1 className="text-4xl font-bold flame-text">FLAMEBORN</h1>
+        </Link>
+        <WalletConnector />
+      </header>
+
+      <div className="max-w-4xl mx-auto">
+        <h2 className="text-3xl font-bold mb-8 text-center">Debug Dashboard</h2>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          <ContractStatus />
+          <Card className="bg-ash-gray/30 border border-gray-700">
+            <CardHeader>
+              <CardTitle className="flame-text">Debug Tools</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <Link href="/debug/data-entry">
+                  <Button className="w-full">Data Entry Testing</Button>
+                </Link>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="mt-8 flex justify-center">
+          <Link href="/">
+            <Button className="flame-button">Return to Home</Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

app/error.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error("Application error:", error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-dusk flex items-center justify-center p-4">
+      <div className="max-w-md w-full p-6 bg-ember rounded-lg border border-flame-red text-center">
+        <h2 className="text-2xl font-heading text-flame-red mb-4">Something went wrong</h2>
+        <p className="text-white mb-6">
+          We apologize for the inconvenience. The Flameborn system encountered an unexpected error.
+        </p>
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button onClick={reset} className="flame-button">
+            Try Again
+          </Button>
+          <Link href="/">
+            <Button variant="outline" className="w-full sm:w-auto">
+              Return Home
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

app/flameborn-journey/page.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { Suspense } from "react"
+import { JourneyHero } from "@/components/journey/journey-hero"
+import { JourneyFeatured } from "@/components/journey/journey-featured"
+import { JourneyPosts } from "@/components/journey/journey-posts"
+import { JourneySidebar } from "@/components/journey/journey-sidebar"
+import { LoadingState } from "@/components/loading-state"
+import dynamic from "next/dynamic"
+
+const ParticleBackground = dynamic(
+  () => import("@/components/particle-background").then((mod) => ({ default: mod.ParticleBackground })),
+  {
+    ssr: false,
+    loading: () => <div className="fixed inset-0 bg-black" />,
+  },
+)
+
+export default function FlamebornJourney() {
+  return (
+    <div className="min-h-screen bg-dusk relative">
+      <ParticleBackground />
+      <div className="relative z-10">
+        <Suspense fallback={<LoadingState message="Loading journey..." />}>
+          <JourneyHero />
+        </Suspense>
+
+        <div className="max-w-7xl mx-auto px-4 py-8">
+          <Suspense fallback={<LoadingState message="Loading featured content..." />}>
+            <JourneyFeatured />
+          </Suspense>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
+            <div className="lg:col-span-2">
+              <Suspense fallback={<LoadingState message="Loading posts..." />}>
+                <JourneyPosts />
+              </Suspense>
+            </div>
+            <div>
+              <Suspense fallback={<LoadingState message="Loading sidebar..." />}>
+                <JourneySidebar />
+              </Suspense>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/globals.css

@@ -0,0 +1,312 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --flame: 15 100% 50%;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Flame and animation styles */
+.flame {
+  color: hsl(var(--flame));
+}
+
+.bg-flame {
+  background-color: hsl(var(--flame));
+}
+
+.border-flame {
+  border-color: hsl(var(--flame));
+}
+
+/* Bubble field styles */
+.bubble-field {
+  position: relative;
+  overflow: hidden;
+}
+
+.data-bubble {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: white;
+  font-weight: bold;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  z-index: 10;
+  transform-origin: center;
+  user-select: none;
+  group: hover;
+}
+
+/* Bubble sizes */
+.bubble-xs {
+  width: 24px;
+  height: 24px;
+  font-size: 8px;
+}
+
+.bubble-sm {
+  width: 48px;
+  height: 48px;
+  font-size: 10px;
+}
+
+.bubble-md {
+  width: 64px;
+  height: 64px;
+  font-size: 12px;
+}
+
+.bubble-lg {
+  width: 80px;
+  height: 80px;
+  font-size: 14px;
+}
+
+.bubble-xl {
+  width: 96px;
+  height: 96px;
+  font-size: 16px;
+}
+
+/* Bubble categories */
+.bubble-testnet {
+  background: linear-gradient(135deg, rgba(255, 120, 0, 0.8), rgba(255, 78, 0, 0.6));
+  box-shadow: 0 0 20px rgba(255, 120, 0, 0.4);
+}
+
+.bubble-mainnet {
+  background: linear-gradient(135deg, rgba(220, 38, 127, 0.8), rgba(239, 68, 68, 0.6));
+  box-shadow: 0 0 20px rgba(220, 38, 127, 0.4);
+}
+
+.bubble-healers {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(16, 185, 129, 0.6));
+  box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
+}
+
+.bubble-guardians {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(99, 102, 241, 0.6));
+  box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
+}
+
+.bubble-soulbound {
+  background: linear-gradient(135deg, rgba(147, 51, 234, 0.8), rgba(139, 92, 246, 0.6));
+  box-shadow: 0 0 15px rgba(147, 51, 234, 0.3);
+}
+
+.bubble-codex {
+  background: linear-gradient(135deg, rgba(245, 158, 11, 0.8), rgba(251, 191, 36, 0.6));
+  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
+}
+
+.bubble-verified {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.7), rgba(5, 150, 105, 0.5));
+  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
+}
+
+.bubble-active {
+  background: linear-gradient(135deg, rgba(236, 72, 153, 0.7), rgba(219, 39, 119, 0.5));
+  box-shadow: 0 0 10px rgba(236, 72, 153, 0.3);
+}
+
+.bubble-live-person {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
+  border: 2px solid rgba(255, 120, 0, 0.6);
+  box-shadow: 0 0 15px rgba(255, 120, 0, 0.4);
+}
+
+/* Live bubble effects */
+.bubble-live {
+  animation: bubble-pulse 2s ease-in-out infinite;
+}
+
+.bubble-new-join {
+  animation: bubble-bounce 1s ease-in-out infinite, bubble-glow 2s ease-in-out infinite;
+}
+
+.bubble-person {
+  border: 2px solid rgba(255, 120, 0, 0.8);
+}
+
+/* Bubble animations */
+@keyframes bubble-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.9;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 1;
+  }
+}
+
+@keyframes bubble-bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes bubble-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 15px rgba(255, 120, 0, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 25px rgba(255, 120, 0, 0.8);
+  }
+}
+
+/* Hover effects */
+.data-bubble:hover {
+  transform: scale(1.1);
+  z-index: 20;
+}
+
+.bubble-live:hover {
+  animation-play-state: paused;
+}
+
+/* Multiplier effects for high counts */
+.bubble-multiplier {
+  position: relative;
+}
+
+.bubble-multiplier::before {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  border-radius: 50%;
+  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  animation: rotate 3s linear infinite;
+}
+
+.bubble-swarm {
+  position: relative;
+}
+
+.bubble-swarm::after {
+  content: "";
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  background: radial-gradient(circle, transparent 60%, rgba(255, 120, 0, 0.1) 70%, transparent 80%);
+  animation: swarm-pulse 2s ease-in-out infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes swarm-pulse {
+  0%,
+  100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1);
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .bubble-xl {
+    width: 72px;
+    height: 72px;
+    font-size: 14px;
+  }
+
+  .bubble-lg {
+    width: 60px;
+    height: 60px;
+    font-size: 12px;
+  }
+
+  .bubble-md {
+    width: 48px;
+    height: 48px;
+    font-size: 10px;
+  }
+}

app/guardian-council/page.tsx

@@ -0,0 +1,5 @@
+import { GuardianVotingInterface } from "@/components/guardian/guardian-voting-interface"
+
+export default function GuardianCouncilPage() {
+  return <GuardianVotingInterface />
+}

app/guardians-sanctuary/page.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { Suspense } from "react"
+import { SanctuaryHero } from "@/components/sanctuary/sanctuary-hero"
+import { SanctuaryFeed } from "@/components/sanctuary/sanctuary-feed"
+import { SanctuaryMembers } from "@/components/sanctuary/sanctuary-members"
+import { LoadingState } from "@/components/loading-state"
+import dynamic from "next/dynamic"
+
+const ParticleBackground = dynamic(
+  () => import("@/components/particle-background").then((mod) => ({ default: mod.ParticleBackground })),
+  {
+    ssr: false,
+    loading: () => <div className="fixed inset-0 bg-black" />,
+  },
+)
+
+export default function GuardiansSanctuary() {
+  return (
+    <div className="min-h-screen bg-dusk relative">
+      <ParticleBackground />
+      <div className="relative z-10">
+        <Suspense fallback={<LoadingState message="Loading sanctuary..." />}>
+          <SanctuaryHero />
+        </Suspense>
+
+        <div className="max-w-7xl mx-auto px-4 py-8">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div className="lg:col-span-2">
+              <Suspense fallback={<LoadingState message="Loading sanctuary feed..." />}>
+                <SanctuaryFeed />
+              </Suspense>
+            </div>
+            <div>
+              <Suspense fallback={<LoadingState message="Loading members..." />}>
+                <SanctuaryMembers />
+              </Suspense>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/healers/page.tsx

@@ -0,0 +1,162 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Shell } from "@/components/Shell"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
+import Link from "next/link"
+
+const data = [
+  {
+    name: "Nwangi Thomas",
+    email: "[email protected]",
+    phone: "+254-701-123456",
+    specialty: "Cardiologist",
+    location: "Nairobi, Kenya",
+    availability: "Mon-Fri",
+    status: "Active",
+  },
+  {
+    name: "Denis Moraa",
+    email: "[email protected]",
+    phone: "+256-772-456789",
+    specialty: "Dermatologist",
+    location: "Kampala, Uganda",
+    availability: "Tue-Sat",
+    status: "Inactive",
+  },
+  {
+    name: "Alice Murekezi",
+    email: "[email protected]",
+    phone: "+250-788-987654",
+    specialty: "Pediatrician",
+    location: "Kigali, Rwanda",
+    availability: "Wed-Sun",
+    status: "Active",
+  },
+  {
+    name: "Boubacar Williams",
+    email: "[email protected]",
+    phone: "+221-773-112233",
+    specialty: "Oncologist",
+    location: "Dakar, Senegal",
+    availability: "Mon-Sat",
+    status: "Active",
+  },
+  {
+    name: "Emelda Okonkwo",
+    email: "[email protected]",
+    phone: "+234-809-445566",
+    specialty: "Neurologist",
+    location: "Enugu, Nigeria",
+    availability: "Tue-Fri",
+    status: "Inactive",
+  },
+  {
+    name: "David Abebe",
+    email: "[email protected]",
+    phone: "+251-911-778899",
+    specialty: "Surgeon",
+    location: "Addis Ababa, Ethiopia",
+    availability: "Mon-Sun",
+    status: "Active",
+  },
+  {
+    name: "Linda Tshabalala",
+    email: "[email protected]",
+    phone: "+27-82-3344556",
+    specialty: "Psychiatrist",
+    location: "Johannesburg, South Africa",
+    availability: "Wed-Sat",
+    status: "Active",
+  },
+  {
+    name: "Michael Kombo",
+    email: "[email protected]",
+    phone: "+254-722-667788",
+    specialty: "Ophthalmologist",
+    location: "Mombasa, Kenya",
+    availability: "Tue-Sun",
+    status: "Inactive",
+  },
+  {
+    name: "Baraka Ncube",
+    email: "[email protected]",
+    phone: "+263-773-554433",
+    specialty: "ENT Specialist",
+    location: "Harare, Zimbabwe",
+    availability: "Mon-Fri",
+    status: "Active",
+  },
+  {
+    name: "James Okoro",
+    email: "[email protected]",
+    phone: "+234-803-990011",
+    specialty: "Gastroenterologist",
+    location: "Lagos, Nigeria",
+    availability: "Wed-Sun",
+    status: "Active",
+  },
+]
+export default function HealersPage() {
+  return (
+    <Shell>
+      <div className="grid gap-6">
+        <div className="flex items-center justify-between space-y-0.5">
+          <h2 className="text-2xl font-bold tracking-tight">Our Healers</h2>
+          <Link href="/register/healer">
+            <Button className="bg-flame hover:bg-pulse text-white px-8 py-4 text-lg rounded-md transition-all hover:shadow-[0_0_20px_rgba(255,78,0,0.3)]">
+              Register as a Healer
+            </Button>
+          </Link>
+        </div>
+        <Separator />
+        <div className="grid gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Healer List</CardTitle>
+              <CardDescription>All registered healers are listed here.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ScrollArea>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-[100px]">Name</TableHead>
+                      <TableHead>Email</TableHead>
+                      <TableHead>Phone</TableHead>
+                      <TableHead>Specialty</TableHead>
+                      <TableHead>Location</TableHead>
+                      <TableHead>Availability</TableHead>
+                      <TableHead className="text-right">Status</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {data.map((row, index) => (
+                      <TableRow key={index}>
+                        <TableCell className="font-medium">{row.name}</TableCell>
+                        <TableCell>{row.email}</TableCell>
+                        <TableCell>{row.phone}</TableCell>
+                        <TableCell>{row.specialty}</TableCell>
+                        <TableCell>{row.location}</TableCell>
+                        <TableCell>{row.availability}</TableCell>
+                        <TableCell className="text-right">
+                          {row.status === "Active" ? (
+                            <Badge variant="outline">Active</Badge>
+                          ) : (
+                            <Badge variant="secondary">Inactive</Badge>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </ScrollArea>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </Shell>
+  )
+}

app/launch/layout.tsx

@@ -0,0 +1,8 @@
+import type React from "react"
+export default function LaunchLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <div className="min-h-screen bg-black">{children}</div>
+}

app/launch/page.tsx

@@ -0,0 +1,374 @@
+"use client"
+
+import { motion } from "framer-motion"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { ArrowRight, Heart, Globe, Brain, Users, DollarSign, Vote, Share2, Hammer } from "lucide-react"
+
+export default function LaunchPage() {
+  return (
+    <div className="min-h-screen bg-black text-white">
+      <div className="max-w-4xl mx-auto px-4 py-16 sm:px-6 sm:py-24">
+        <header className="text-center mb-20">
+          <motion.h1
+            className="text-4xl md:text-6xl font-bold mb-6 flame-text"
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            Flameborn: Rekindling Hope in Africa's Rural Healthcare
+          </motion.h1>
+
+          <motion.p
+            className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+          >
+            A Beacon in the Darkness
+          </motion.p>
+        </header>
+
+        <motion.section
+          className="prose prose-invert prose-lg max-w-none mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.5 }}
+        >
+          <p className="text-xl leading-relaxed">
+            In the silent hours before dawn, deep in the heart of rural Africa, a nurse leans over a patient. Her only
+            light is a flickering kerosene lamp.
+            <br />
+            Her only tools — resolve and compassion.
+          </p>
+
+          <p className="text-xl leading-relaxed">
+            The clinic walls are worn. The shelves? Bare.
+            <br />
+            But she is still here — holding the line between life and loss.
+          </p>
+
+          <p className="text-xl leading-relaxed">
+            She has no headline.
+            <br />
+            No salary.
+            <br />
+            No promise of help.
+          </p>
+
+          <p className="text-xl leading-relaxed">But she stays.</p>
+
+          <p className="text-2xl font-bold">
+            <span className="flame-text">And Flameborn is here to tell the world: She is not alone anymore.</span>
+          </p>
+        </motion.section>
+
+        <motion.section
+          className="mb-16"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8, delay: 0.8 }}
+        >
+          <h2 className="text-3xl font-bold mb-6 flex items-center">
+            <Globe className="mr-3 text-ember-orange" /> The Challenge We Face
+          </h2>
+
+          <div className="flame-card p-6 mb-8">
+            <p className="mb-4">
+              Millions of Africa's healthcare workers — midwives, nurses, outreach teams — are holding up the very
+              foundation of our health systems.
+              <br />
+              And they're doing it with <strong>nothing</strong>.
+            </p>
+
+            <p className="mb-4">
+              In many African countries, community health workers show up every day <strong>without pay</strong>,
+              without supplies, without rest.
+            </p>
+
+            <p className="mb-4">Global aid is pledged. Billions flow.</p>
+
+            <p className="mb-4">But by the time it trickles down?</p>
+
+            <ul className="list-disc pl-6 mb-4">
+              <li className="mb-2">
+                💸 <em>30% has disappeared into red tape, middlemen, corruption</em>
+              </li>
+              <li className="mb-2">🏥 The clinic receives nothing</li>
+              <li className="mb-2">🕯️ The nurse lights another candle</li>
+            </ul>
+
+            <p className="text-xl font-semibold">
+              We've waited long enough.
+              <br />
+              <span className="flame-text">Flameborn is the answer that doesn't wait.</span>
+            </p>
+          </div>
+        </motion.section>
+
+        <motion.section
+          className="mb-16"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8, delay: 1.1 }}
+        >
+          <h2 className="text-3xl font-bold mb-6 flex items-center">
+            <Heart className="mr-3 text-flame-red" /> What Is Flameborn?
+          </h2>
+
+          <div className="flame-card p-6">
+            <p className="mb-4">
+              Flameborn is not a charity.
+              <br />
+              Not a startup.
+              <br />
+              Not a government program.
+            </p>
+
+            <p className="mb-4">
+              It is a <strong>decentralized movement</strong> of Africans and allies
+              <br />
+              who believe that <strong>healers should never be left behind</strong>.
+            </p>
+
+            <p className="mb-4">
+              We are builders.
+              <br />
+              We are believers.
+              <br />
+              We are the Flameborn.
+            </p>
+          </div>
+        </motion.section>
+
+        <motion.section
+          className="mb-16"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8, delay: 1.4 }}
+        >
+          <h2 className="text-3xl font-bold mb-6 flex items-center">
+            <ArrowRight className="mr-3 text-healing-blue" /> How It Works
+          </h2>
+
+          <div className="grid md:grid-cols-3 gap-6">
+            <div className="flame-card p-6">
+              <h3 className="text-xl font-bold mb-4 flex items-center">
+                <DollarSign className="mr-2 text-ember-orange" /> Direct Aid via Blockchain
+              </h3>
+              <p>
+                Donations go straight into digital wallets of verified rural healthcare workers.
+                <br />
+                No banks. No bureaucracy. No "lost in transit."
+                <br />
+                Every transaction is <strong>public, traceable, and real</strong>.
+              </p>
+            </div>
+
+            <div className="flame-card p-6">
+              <h3 className="text-xl font-bold mb-4 flex items-center">
+                <Vote className="mr-2 text-ember-orange" /> Community Governance (DAO)
+              </h3>
+              <p>
+                The Flameborn DAO is open to all.
+                <br />
+                You don't need permission to care.
+                <br />
+                Vote on where funds go. Help decide which regions we support next.
+                <br />
+                <em>Every supporter is a leader.</em>
+              </p>
+            </div>
+
+            <div className="flame-card p-6">
+              <h3 className="text-xl font-bold mb-4 flex items-center">
+                <Brain className="mr-2 text-ember-orange" /> AI-Driven Transparency
+              </h3>
+              <p>
+                Smart systems track every token.
+                <br />
+                You'll see where it went, when it arrived, and what it did.
+                <br />
+                If something goes wrong, the system says so — <strong>publicly</strong>.<br />
+                There are no secrets in the Flame.
+              </p>
+            </div>
+          </div>
+        </motion.section>
+
+        <motion.section
+          className="mb-16"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8, delay: 1.7 }}
+        >
+          <h2 className="text-3xl font-bold mb-6 flex items-center">
+            <Users className="mr-3 text-healing-blue" /> Real People. Real Impact.
+          </h2>
+
+          <div className="flame-card p-6">
+            <p className="mb-4">
+              In early pilots across <strong>rural Kenya, Nigeria, and Ghana</strong>:
+            </p>
+
+            <ul className="list-disc pl-6 mb-4">
+              <li className="mb-2">A midwife received funds to restock birthing supplies</li>
+              <li className="mb-2">A nurse used her stipend to repair a solar fridge for vaccines</li>
+              <li className="mb-2">A health agent finally had enough to reach families across rivers</li>
+            </ul>
+
+            <p className="mb-4">
+              These aren't handouts.
+              <br />
+              They're <strong>affirmations</strong>:
+            </p>
+
+            <p className="text-xl font-semibold">
+              We see you.
+              <br />
+              We honor you.
+              <br />
+              We invest in your care — because you cared for us.
+            </p>
+          </div>
+        </motion.section>
+
+        <motion.section
+          className="mb-16"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8, delay: 2.0 }}
+        >
+          <h2 className="text-3xl font-bold mb-6 flex items-center">
+            <Heart className="mr-3 text-flame-red" /> This Is a Movement. Not a Moment.
+          </h2>
+
+          <div className="flame-card p-6">
+            <p className="text-xl leading-relaxed">
+              Flameborn is not just a website.
+              <br />
+              It's <strong>Ubuntu in code.</strong>
+              <br />
+              It's <strong>compassion on the chain.</strong>
+              <br />
+              It's the <strong>spirit of Africa</strong>, digitized, decentralized, and rising.
+            </p>
+          </div>
+        </motion.section>
+
+        <motion.section
+          className="mb-16"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8, delay: 2.3 }}
+        >
+          <h2 className="text-3xl font-bold mb-6 flex items-center">
+            <Hammer className="mr-3 text-healing-blue" /> How You Can Join the Flame
+          </h2>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            <div className="flame-card p-6">
+              <h3 className="text-xl font-bold mb-4 flex items-center">
+                <DollarSign className="mr-2 text-ember-orange" /> Donate
+              </h3>
+              <p>$5 fuels a clinic. $50 funds a stipend. 100% goes direct.</p>
+              <div className="mt-4">
+                <Button className="flame-button">Donate Now</Button>
+              </div>
+            </div>
+
+            <div className="flame-card p-6">
+              <h3 className="text-xl font-bold mb-4 flex items-center">
+                <Vote className="mr-2 text-ember-orange" /> Join the DAO
+              </h3>
+              <p>Help guide aid. Propose, vote, change lives.</p>
+              <div className="mt-4">
+                <Button className="flame-button">Join DAO</Button>
+              </div>
+            </div>
+
+            <div className="flame-card p-6">
+              <h3 className="text-xl font-bold mb-4 flex items-center">
+                <Share2 className="mr-2 text-ember-orange" /> Spread the Word
+              </h3>
+              <p>Tell your tribe. Light another torch.</p>
+              <div className="mt-4">
+                <Button className="flame-button">Share</Button>
+              </div>
+            </div>
+
+            <div className="flame-card p-6">
+              <h3 className="text-xl font-bold mb-4 flex items-center">
+                <Hammer className="mr-2 text-ember-orange" /> Volunteer
+              </h3>
+              <p>Coders, designers, medics, storytellers — your gifts matter here.</p>
+              <div className="mt-4">
+                <Button className="flame-button">Join Us</Button>
+              </div>
+            </div>
+          </div>
+        </motion.section>
+
+        <motion.section
+          className="mb-16"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8, delay: 2.6 }}
+        >
+          <h2 className="text-3xl font-bold mb-6 flex items-center">
+            <Globe className="mr-3 text-healing-blue" /> A Final Word to Every Soul Who Reads This
+          </h2>
+
+          <div className="flame-card p-6">
+            <p className="text-xl leading-relaxed mb-4">
+              You are not small.
+              <br />
+              You are not powerless.
+              <br />
+              You are <strong>a match. A spark. A carrier of flame.</strong>
+            </p>
+
+            <p className="text-xl leading-relaxed mb-4">
+              In the darkest corners of our continent, someone is still hoping.
+              <br />
+              Still healing.
+              <br />
+              Still holding on.
+            </p>
+
+            <p className="text-xl font-bold">
+              <span className="flame-text">
+                Light their fire again.
+                <br />
+                Let them know they are not forgotten.
+                <br />
+                Let them feel Africa — and the world — rising with them.
+              </span>
+            </p>
+          </div>
+        </motion.section>
+
+        <motion.footer
+          className="text-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8, delay: 2.9 }}
+        >
+          <h2 className="text-3xl font-bold mb-6 flame-text">🔥 Flameborn: Lighting the Path to Health and Hope</h2>
+
+          <p className="text-xl mb-8">
+            Because <strong>hope is a flame</strong>.<br />
+            And now — it lives on the chain.
+          </p>
+
+          <div className="flex justify-center gap-4">
+            <Link href="/">
+              <Button className="flame-button">Return Home</Button>
+            </Link>
+            <Button className="flame-button ember-pulse">Join the Movement</Button>
+          </div>
+        </motion.footer>
+      </div>
+    </div>
+  )
+}

app/layout.tsx

@@ -0,0 +1,46 @@
+import type React from "react"
+import type { Metadata } from "next"
+import { Inter } from "next/font/google"
+import "./globals.css"
+import AppHeader from "@/components/app-header"
+import { Toaster } from "@/components/ui/toaster"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export const metadata: Metadata = {
+  title: "FlameBorn - Ubuntu Healthcare Tokenization",
+  description:
+    "Bridging traditional African Ubuntu philosophy with modern healthcare tokenization. I am because we are.",
+  keywords: ["Ubuntu", "healthcare", "tokenization", "blockchain", "Celo", "Africa", "community"],
+  authors: [{ name: "FlameBorn Team" }],
+  openGraph: {
+    title: "FlameBorn - Ubuntu Healthcare Tokenization",
+    description: "I am because we are. Ubuntu-powered healthcare tokenization for a connected world.",
+    type: "website",
+    locale: "en_US",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "FlameBorn - Ubuntu Healthcare Tokenization",
+    description: "I am because we are. Ubuntu-powered healthcare tokenization for a connected world.",
+  },
+  viewport: "width=device-width, initial-scale=1",
+  themeColor: "#f97316",
+    generator: 'v0.dev'
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className="scroll-smooth">
+      <body className={`${inter.className} antialiased`}>
+        <AppHeader />
+        <main className="min-h-screen">{children}</main>
+        <Toaster />
+      </body>
+    </html>
+  )
+}

app/learn-earn/page.tsx

@@ -0,0 +1,1435 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { motion } from "framer-motion"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Progress } from "@/components/ui/progress"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  BookOpen,
+  Play,
+  CheckCircle,
+  Star,
+  Globe,
+  Brain,
+  Stethoscope,
+  Cpu,
+  Users,
+  Coins,
+  HandHeart,
+  GraduationCap,
+  MessageSquare,
+  Wallet,
+  Download,
+  Wifi,
+  WifiOff,
+  Clock,
+  Target,
+  Heart,
+  Shield,
+  Zap,
+} from "lucide-react"
+import { ClipboardManager } from "@/lib/clipboard-utils"
+
+interface Module {
+  id: string
+  title: string
+  description: string
+  type: "interactive" | "quiz" | "story" | "video"
+  category: "Cultural Heritage" | "Philosophy" | "Health Advocacy" | "Technology" | "Ubuntu Wisdom"
+  difficulty: "easy" | "medium" | "hard"
+  duration: number
+  flbReward: number
+  xpReward: number
+  completed: boolean
+  content: any
+}
+
+interface QuizQuestion {
+  question: string
+  options: string[]
+  correct: number
+  explanation: string
+}
+
+interface WalletInfo {
+  address: string
+  flbBalance: number
+  celoBalance: number
+  connected: boolean
+}
+
+interface Transaction {
+  id: string
+  type: "earned" | "donated" | "transferred"
+  amount: number
+  description: string
+  timestamp: Date
+  status: "completed" | "pending" | "failed"
+}
+
+const modules: Module[] = [
+  {
+    id: "ubuntu-wisdom-1",
+    title: "Ubuntu Philosophy: I Am Because We Are",
+    description: "Deep dive into Ubuntu philosophy and its relevance in modern African healing",
+    type: "interactive",
+    category: "Ubuntu Wisdom",
+    difficulty: "easy",
+    duration: 20,
+    flbReward: 50,
+    xpReward: 100,
+    completed: false,
+    content: {
+      concepts: [
+        {
+          concept: "Umuntu ngumuntu ngabantu",
+          translation: "A person is a person through other persons",
+          explanation: "The fundamental concept of Ubuntu - our humanity is interconnected",
+          modernApplication: "In healthcare, this guides collaborative approaches to healing",
+        },
+        {
+          concept: "Ubuntu ngumuntu",
+          translation: "Ubuntu is humanity",
+          explanation: "Ubuntu represents the essence of being human through community",
+          modernApplication: "In conflict resolution, Ubuntu provides framework for healing",
+        },
+      ],
+    },
+  },
+  {
+    id: "addiction-africa-1",
+    title: "Understanding Addiction in Africa",
+    description: "Explore cultural and social aspects of addiction across African communities",
+    type: "quiz",
+    category: "Health Advocacy",
+    difficulty: "medium",
+    duration: 25,
+    flbReward: 75,
+    xpReward: 150,
+    completed: false,
+    content: {
+      questions: [
+        {
+          question: "What role do traditional healers play in addiction recovery in Africa?",
+          options: [
+            "They should be completely replaced by modern medicine",
+            "They complement modern treatment with cultural understanding",
+            "They only use harmful practices",
+            "They have no role in recovery",
+          ],
+          correct: 1,
+          explanation:
+            "Traditional healers provide cultural context and community support that enhances modern treatment approaches",
+        },
+        {
+          question: "How does Ubuntu philosophy apply to addiction recovery?",
+          options: [
+            "Individual treatment is most important",
+            "Community healing and collective support",
+            "Isolation from community",
+            "Western approaches only",
+          ],
+          correct: 1,
+          explanation: "Ubuntu emphasizes that healing happens through community support and collective responsibility",
+        },
+      ],
+    },
+  },
+  {
+    id: "community-prevention-1",
+    title: "Community Prevention Strategies",
+    description: "Learn effective prevention methods within African community structures",
+    type: "video",
+    category: "Health Advocacy",
+    difficulty: "medium",
+    duration: 30,
+    flbReward: 60,
+    xpReward: 120,
+    completed: false,
+    content: {
+      videoUrl: "/videos/community-prevention.mp4",
+      keyPoints: [
+        "School-based prevention programs",
+        "Faith-based community approaches",
+        "Elder and traditional leader involvement",
+        "Youth peer education networks",
+        "Economic empowerment as prevention",
+      ],
+    },
+  },
+  {
+    id: "akan-proverbs-1",
+    title: "Akan Proverbs: Wisdom for Healing",
+    description: "Explore Akan proverbs and their applications in community healing",
+    type: "interactive",
+    category: "Cultural Heritage",
+    difficulty: "easy",
+    duration: 15,
+    flbReward: 40,
+    xpReward: 80,
+    completed: false,
+    content: {
+      proverbs: [
+        {
+          akan: "Se wo were fi na wosan kofa a, yenkyiri",
+          english: "It is not taboo to go back for what you forgot",
+          meaning: "There's no shame in correcting mistakes or seeking help",
+          healing: "Encourages people to seek treatment without stigma",
+        },
+        {
+          akan: "Obi nkyere abofra Nyame",
+          english: "No one teaches a child about God",
+          meaning: "Some knowledge is innate and universal",
+          healing: "Natural understanding of right and wrong guides recovery",
+        },
+      ],
+    },
+  },
+  {
+    id: "treatment-centers-1",
+    title: "Treatment Center Operations in Africa",
+    description: "Understand how treatment centers operate in resource-limited settings",
+    type: "video",
+    category: "Health Advocacy",
+    difficulty: "hard",
+    duration: 40,
+    flbReward: 100,
+    xpReward: 200,
+    completed: false,
+    content: {
+      videoUrl: "/videos/treatment-centers.mp4",
+      keyPoints: [
+        "Staffing with limited resources",
+        "Integrating traditional and modern approaches",
+        "Community-based aftercare programs",
+        "Sustainable funding models",
+        "Measuring success in African contexts",
+      ],
+    },
+  },
+  {
+    id: "youth-leadership-1",
+    title: "Youth Leadership in Health Advocacy",
+    description: "Develop skills to become a health advocate in your community",
+    type: "story",
+    category: "Health Advocacy",
+    difficulty: "medium",
+    duration: 25,
+    flbReward: 65,
+    xpReward: 130,
+    completed: false,
+    content: {
+      prompt:
+        "Share a story about how you've seen young people make a difference in health issues in your community, or describe how you would lead a health initiative using Ubuntu principles.",
+      minWords: 150,
+      maxWords: 500,
+    },
+  },
+]
+
+const categoryIcons = {
+  "Cultural Heritage": Globe,
+  Philosophy: Brain,
+  "Health Advocacy": Stethoscope,
+  Technology: Cpu,
+  "Ubuntu Wisdom": Heart,
+}
+
+const difficultyColors = {
+  easy: "bg-green-100 text-green-800",
+  medium: "bg-yellow-100 text-yellow-800",
+  hard: "bg-red-100 text-red-800",
+}
+
+const redemptionKits = [
+  {
+    id: "mama-wellness",
+    name: "Mama Wellness Pack",
+    cost: 4,
+    currency: "FLB",
+    items: ["Clinic voucher", "Basic medicines", "Transport allowance"],
+    color: "bg-green-50 border-green-200",
+  },
+  {
+    id: "school-starter",
+    name: "School Starter Kit",
+    cost: 6,
+    currency: "FLB",
+    items: ["School uniform", "Books and supplies", "Lunch pass"],
+    color: "bg-blue-50 border-blue-200",
+  },
+  {
+    id: "community-builder",
+    name: "Community Builder Pack",
+    cost: 10,
+    currency: "FLB",
+    items: ["Seed packs", "Toolkit", "Training session"],
+    color: "bg-purple-50 border-purple-200",
+  },
+]
+
+export default function LearnEarnPage() {
+  const [selectedCategory, setSelectedCategory] = useState<string>("all")
+  const [selectedDifficulty, setSelectedDifficulty] = useState<string>("all")
+  const [activeModule, setActiveModule] = useState<Module | null>(null)
+  const [currentStep, setCurrentStep] = useState(0)
+  const [userAnswers, setUserAnswers] = useState<number[]>([])
+  const [storyContent, setStoryContent] = useState("")
+  const [moduleProgress, setModuleProgress] = useState<{ [key: string]: boolean }>({})
+  const [isOfflineMode, setIsOfflineMode] = useState(false)
+  const [wallet, setWallet] = useState<WalletInfo>({
+    address: "",
+    flbBalance: 0,
+    celoBalance: 0,
+    connected: false,
+  })
+  const [transactions, setTransactions] = useState<Transaction[]>([])
+  const [userStats, setUserStats] = useState({
+    totalFLB: 0,
+    totalXP: 0,
+    completedModules: 0,
+    currentStreak: 7,
+    learnerLevel: "Beginner",
+    impactScore: 0,
+  })
+  const [showWalletModal, setShowWalletModal] = useState(false)
+  const [showCourseModal, setShowCourseModal] = useState(false)
+  const [selectedCourse, setSelectedCourse] = useState<Module | null>(null)
+
+  // Initialize with mock data for demo
+  useEffect(() => {
+    // Simulate some completed modules and transactions
+    const mockTransactions: Transaction[] = [
+      {
+        id: "tx1",
+        type: "earned",
+        amount: 50,
+        description: "Completed Ubuntu Philosophy course",
+        timestamp: new Date(Date.now() - 86400000),
+        status: "completed",
+      },
+      {
+        id: "tx2",
+        type: "donated",
+        amount: 20,
+        description: "Donated to Community Health Center",
+        timestamp: new Date(Date.now() - 172800000),
+        status: "completed",
+      },
+    ]
+    setTransactions(mockTransactions)
+  }, [])
+
+  const filteredModules = modules.filter((module) => {
+    const categoryMatch = selectedCategory === "all" || module.category === selectedCategory
+    const difficultyMatch = selectedDifficulty === "all" || module.difficulty === selectedDifficulty
+    return categoryMatch && difficultyMatch
+  })
+
+  const connectWallet = async (walletType: string) => {
+    // Mock wallet connection
+    const mockAddresses = [
+      "0x71C7656EC7ab88b098defB751B7401B5f6d8976F",
+      "0xAb5801a7D398351b8bE11C439e05C5B3259aeC9B",
+      "0x4B0897b0513fdC7C541B6d9D7E929C4e5364D2dB",
+    ]
+
+    const randomAddress = mockAddresses[Math.floor(Math.random() * mockAddresses.length)]
+    const randomFLB = Math.floor(Math.random() * 500) + 50
+    const randomCELO = Math.random() * 5
+
+    setWallet({
+      address: randomAddress,
+      flbBalance: randomFLB,
+      celoBalance: randomCELO,
+      connected: true,
+    })
+
+    setUserStats((prev) => ({
+      ...prev,
+      totalFLB: randomFLB,
+    }))
+
+    setShowWalletModal(false)
+  }
+
+  const startModule = (module: Module) => {
+    setActiveModule(module)
+    setCurrentStep(0)
+    setUserAnswers([])
+    setStoryContent("")
+    setShowCourseModal(false)
+  }
+
+  const completeModule = async (moduleId: string, score = 100) => {
+    const module = modules.find((m) => m.id === moduleId)
+    if (!module) return
+
+    // Calculate rewards based on score
+    const flbReward = Math.floor((score / 100) * module.flbReward)
+    const xpReward = Math.floor((score / 100) * module.xpReward)
+
+    // Update user stats
+    setUserStats((prev) => ({
+      ...prev,
+      totalFLB: prev.totalFLB + flbReward,
+      totalXP: prev.totalXP + xpReward,
+      completedModules: prev.completedModules + 1,
+      impactScore: prev.impactScore + Math.floor(flbReward / 10),
+    }))
+
+    // Update wallet balance
+    setWallet((prev) => ({
+      ...prev,
+      flbBalance: prev.flbBalance + flbReward,
+    }))
+
+    // Add transaction
+    const newTransaction: Transaction = {
+      id: `tx-${Date.now()}`,
+      type: "earned",
+      amount: flbReward,
+      description: `Completed ${module.title}`,
+      timestamp: new Date(),
+      status: "completed",
+    }
+    setTransactions((prev) => [newTransaction, ...prev])
+
+    // Mark module as completed
+    setModuleProgress((prev) => ({
+      ...prev,
+      [moduleId]: true,
+    }))
+
+    // Close module
+    setActiveModule(null)
+
+    // Show success message
+    alert(`🔥 Ubuntu wisdom earned! ${flbReward} FLB and ${xpReward} XP added to your account!`)
+  }
+
+  const handleQuizAnswer = (questionIndex: number, answerIndex: number) => {
+    const newAnswers = [...userAnswers]
+    newAnswers[questionIndex] = answerIndex
+    setUserAnswers(newAnswers)
+  }
+
+  const calculateQuizScore = () => {
+    if (!activeModule || activeModule.type !== "quiz") return 0
+    const questions = activeModule.content.questions as QuizQuestion[]
+    const correctAnswers = userAnswers.filter((answer, index) => answer === questions[index].correct).length
+    return Math.round((correctAnswers / questions.length) * 100)
+  }
+
+  const redeemKit = async (kitId: string) => {
+    const kit = redemptionKits.find((k) => k.id === kitId)
+    if (!kit || wallet.flbBalance < kit.cost) {
+      alert("Insufficient FLB balance for this redemption kit")
+      return
+    }
+
+    // Deduct FLB
+    setWallet((prev) => ({
+      ...prev,
+      flbBalance: prev.flbBalance - kit.cost,
+    }))
+
+    // Add transaction
+    const newTransaction: Transaction = {
+      id: `tx-${Date.now()}`,
+      type: "donated",
+      amount: kit.cost,
+      description: `Redeemed ${kit.name}`,
+      timestamp: new Date(),
+      status: "completed",
+    }
+    setTransactions((prev) => [newTransaction, ...prev])
+
+    alert(`🎉 ${kit.name} redeemed successfully! Your impact is making a difference in African communities.`)
+  }
+
+  const toggleOfflineMode = () => {
+    setIsOfflineMode(!isOfflineMode)
+    if (!isOfflineMode) {
+      alert("📱 Offline mode enabled! Course materials downloaded for offline access.")
+    }
+  }
+
+  const exportProgress = async () => {
+    const progressData = {
+      userStats,
+      completedModules: moduleProgress,
+      transactions,
+      wallet: wallet.connected ? { address: wallet.address, balance: wallet.flbBalance } : null,
+      timestamp: new Date().toISOString(),
+    }
+
+    const progressText = JSON.stringify(progressData, null, 2)
+    const result = await ClipboardManager.copyToClipboard(progressText)
+
+    if (result.success) {
+      alert("📋 Progress data copied to clipboard!")
+    } else {
+      // Fallback to download
+      const blob = new Blob([progressText], { type: "application/json" })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = `flameborn-progress-${new Date().toISOString().split("T")[0]}.json`
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+    }
+  }
+
+  const renderModuleContent = () => {
+    if (!activeModule) return null
+
+    switch (activeModule.type) {
+      case "interactive":
+        return (
+          <div className="space-y-6">
+            <div className="text-center mb-6">
+              <h2 className="text-2xl font-bold text-orange-800 mb-2">{activeModule.title}</h2>
+              <p className="text-gray-600">{activeModule.description}</p>
+            </div>
+
+            {activeModule.content.concepts &&
+              activeModule.content.concepts.map((concept: any, index: number) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.2 }}
+                >
+                  <Card className="border-l-4 border-l-orange-500">
+                    <CardContent className="p-6">
+                      <div className="space-y-4">
+                        <div className="text-center">
+                          <p className="text-xl font-semibold text-orange-800 mb-2">"{concept.concept}"</p>
+                          <p className="text-lg text-gray-700 italic">"{concept.translation}"</p>
+                        </div>
+                        <div className="bg-orange-50 p-4 rounded-lg">
+                          <h4 className="font-semibold text-orange-800 mb-2">Ubuntu Meaning:</h4>
+                          <p className="text-gray-700">{concept.explanation}</p>
+                        </div>
+                        <div className="bg-amber-50 p-4 rounded-lg">
+                          <h4 className="font-semibold text-amber-800 mb-2">Modern Application:</h4>
+                          <p className="text-gray-700">{concept.modernApplication}</p>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              ))}
+
+            {activeModule.content.proverbs &&
+              activeModule.content.proverbs.map((proverb: any, index: number) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.2 }}
+                >
+                  <Card className="border-l-4 border-l-green-500">
+                    <CardContent className="p-6">
+                      <div className="space-y-4">
+                        <div className="text-center">
+                          <p className="text-xl font-semibold text-green-800 mb-2">"{proverb.akan}"</p>
+                          <p className="text-lg text-gray-700 italic">"{proverb.english}"</p>
+                        </div>
+                        <div className="bg-green-50 p-4 rounded-lg">
+                          <h4 className="font-semibold text-green-800 mb-2">Wisdom:</h4>
+                          <p className="text-gray-700">{proverb.meaning}</p>
+                        </div>
+                        <div className="bg-blue-50 p-4 rounded-lg">
+                          <h4 className="font-semibold text-blue-800 mb-2">Healing Application:</h4>
+                          <p className="text-gray-700">{proverb.healing}</p>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              ))}
+
+            <div className="text-center pt-6">
+              <Button onClick={() => completeModule(activeModule.id)} className="bg-orange-600 hover:bg-orange-700">
+                Complete Module & Earn {activeModule.flbReward} FLB
+              </Button>
+            </div>
+          </div>
+        )
+
+      case "quiz":
+        const questions = activeModule.content.questions as QuizQuestion[]
+        return (
+          <div className="space-y-6">
+            <div className="text-center mb-6">
+              <h2 className="text-2xl font-bold text-orange-800 mb-2">{activeModule.title}</h2>
+              <p className="text-gray-600">{activeModule.description}</p>
+              <Progress value={(userAnswers.length / questions.length) * 100} className="mt-4" />
+            </div>
+
+            {questions.map((question, index) => (
+              <Card key={index} className="border-l-4 border-l-blue-500">
+                <CardContent className="p-6">
+                  <h3 className="text-lg font-semibold mb-4">
+                    Question {index + 1}: {question.question}
+                  </h3>
+                  <div className="space-y-2">
+                    {question.options.map((option, optionIndex) => (
+                      <Button
+                        key={optionIndex}
+                        variant={userAnswers[index] === optionIndex ? "default" : "outline"}
+                        className="w-full text-left justify-start"
+                        onClick={() => handleQuizAnswer(index, optionIndex)}
+                      >
+                        {option}
+                      </Button>
+                    ))}
+                  </div>
+                  {userAnswers[index] !== undefined && (
+                    <div className="mt-4 p-4 bg-blue-50 rounded-lg">
+                      <p className="text-sm text-blue-800">
+                        <strong>Ubuntu Wisdom:</strong> {question.explanation}
+                      </p>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            ))}
+
+            {userAnswers.length === questions.length && (
+              <div className="text-center pt-6">
+                <div className="mb-4">
+                  <p className="text-lg font-semibold">Your Ubuntu Score: {calculateQuizScore()}%</p>
+                </div>
+                <Button
+                  onClick={() => completeModule(activeModule.id, calculateQuizScore())}
+                  className="bg-blue-600 hover:bg-blue-700"
+                >
+                  Complete Quiz & Earn Rewards
+                </Button>
+              </div>
+            )}
+          </div>
+        )
+
+      case "story":
+        return (
+          <div className="space-y-6">
+            <div className="text-center mb-6">
+              <h2 className="text-2xl font-bold text-orange-800 mb-2">{activeModule.title}</h2>
+              <p className="text-gray-600">{activeModule.description}</p>
+            </div>
+
+            <Card className="border-l-4 border-l-purple-500">
+              <CardContent className="p-6">
+                <h3 className="text-lg font-semibold mb-4">Ubuntu Story Prompt:</h3>
+                <p className="text-gray-700 mb-6">{activeModule.content.prompt}</p>
+
+                <div className="space-y-4">
+                  <Input placeholder="Story title (optional)" className="w-full" />
+                  <Textarea
+                    placeholder="Share your Ubuntu story here..."
+                    value={storyContent}
+                    onChange={(e) => setStoryContent(e.target.value)}
+                    className="min-h-[200px]"
+                  />
+                  <div className="flex justify-between text-sm text-gray-500">
+                    <span>{storyContent.split(" ").filter((word) => word.length > 0).length} words</span>
+                    <span>
+                      Min: {activeModule.content.minWords} | Max: {activeModule.content.maxWords}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="text-center pt-6">
+                  <Button
+                    onClick={() => completeModule(activeModule.id)}
+                    disabled={
+                      storyContent.split(" ").filter((word) => word.length > 0).length < activeModule.content.minWords
+                    }
+                    className="bg-purple-600 hover:bg-purple-700"
+                  >
+                    Share Ubuntu Story & Earn {activeModule.flbReward} FLB
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        )
+
+      case "video":
+        return (
+          <div className="space-y-6">
+            <div className="text-center mb-6">
+              <h2 className="text-2xl font-bold text-orange-800 mb-2">{activeModule.title}</h2>
+              <p className="text-gray-600">{activeModule.description}</p>
+            </div>
+
+            <Card className="border-l-4 border-l-green-500">
+              <CardContent className="p-6">
+                <div className="aspect-video bg-gray-200 rounded-lg flex items-center justify-center mb-6">
+                  <div className="text-center">
+                    <Play className="h-16 w-16 text-gray-400 mx-auto mb-2" />
+                    <p className="text-gray-600">Video: {activeModule.title}</p>
+                    <p className="text-sm text-gray-500">Duration: {activeModule.duration} minutes</p>
+                  </div>
+                </div>
+
+                <div className="space-y-4">
+                  <h3 className="text-lg font-semibold">Key Ubuntu Learning Points:</h3>
+                  <ul className="space-y-2">
+                    {activeModule.content.keyPoints.map((point: string, index: number) => (
+                      <li key={index} className="flex items-start gap-2">
+                        <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
+                        <span>{point}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div className="text-center pt-6">
+                  <Button onClick={() => completeModule(activeModule.id)} className="bg-green-600 hover:bg-green-700">
+                    Mark as Watched & Earn {activeModule.flbReward} FLB
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        )
+
+      default:
+        return null
+    }
+  }
+
+  if (activeModule) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-orange-50 via-amber-50 to-yellow-50">
+        <div className="container mx-auto px-4 py-8">
+          <div className="mb-6">
+            <Button variant="outline" onClick={() => setActiveModule(null)} className="mb-4">
+              ← Back to Learn & Earn
+            </Button>
+          </div>
+
+          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="max-w-4xl mx-auto">
+            {renderModuleContent()}
+          </motion.div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-orange-50 via-amber-50 to-yellow-50">
+      {/* Hero Section */}
+      <div className="bg-gradient-to-r from-green-600 to-blue-600 text-white py-16">
+        <div className="container mx-auto px-4 text-center">
+          <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }}>
+            <h1 className="text-5xl font-bold mb-4">Learn. Earn. Heal Africa.</h1>
+            <p className="text-xl text-green-100 max-w-3xl mx-auto mb-8">
+              Educate yourself on African healing wisdom, earn FLB tokens, and support real treatment centers across the
+              continent through Ubuntu principles.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button
+                onClick={() => document.getElementById("courses")?.scrollIntoView({ behavior: "smooth" })}
+                className="bg-white text-green-700 hover:bg-gray-100 px-8 py-3 text-lg"
+              >
+                Start Learning Ubuntu
+              </Button>
+              <Button
+                variant="outline"
+                className="border-white text-white hover:bg-white hover:text-green-700 px-8 py-3 text-lg bg-transparent"
+              >
+                How It Works
+              </Button>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+
+      <div className="container mx-auto px-4 py-8">
+        {/* Stats Overview */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"
+        >
+          <Card className="bg-gradient-to-br from-green-50 to-green-100">
+            <CardContent className="p-6 text-center">
+              <Coins className="h-8 w-8 text-green-500 mx-auto mb-2" />
+              <div className="text-2xl font-bold text-green-600">{userStats.totalFLB}</div>
+              <div className="text-sm text-gray-600">FLB Earned</div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-gradient-to-br from-blue-50 to-blue-100">
+            <CardContent className="p-6 text-center">
+              <Star className="h-8 w-8 text-blue-500 mx-auto mb-2" />
+              <div className="text-2xl font-bold text-blue-600">{userStats.totalXP}</div>
+              <div className="text-sm text-gray-600">Ubuntu XP</div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-gradient-to-br from-purple-50 to-purple-100">
+            <CardContent className="p-6 text-center">
+              <CheckCircle className="h-8 w-8 text-purple-500 mx-auto mb-2" />
+              <div className="text-2xl font-bold text-purple-600">{userStats.completedModules}</div>
+              <div className="text-sm text-gray-600">Modules Completed</div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-gradient-to-br from-orange-50 to-orange-100">
+            <CardContent className="p-6 text-center">
+              <Heart className="h-8 w-8 text-orange-500 mx-auto mb-2" />
+              <div className="text-2xl font-bold text-orange-600">{userStats.impactScore}</div>
+              <div className="text-sm text-gray-600">Impact Score</div>
+            </CardContent>
+          </Card>
+        </motion.div>
+
+        {/* Ubuntu Dashboard */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"
+        >
+          <Card className="bg-green-50">
+            <CardContent className="p-6 text-center">
+              <Coins className="h-12 w-12 text-green-600 mx-auto mb-4" />
+              <h3 className="text-xl font-bold text-gray-900">Earn FLB</h3>
+              <p className="text-gray-600">Complete Ubuntu quests</p>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-blue-50">
+            <CardContent className="p-6 text-center">
+              <HandHeart className="h-12 w-12 text-blue-600 mx-auto mb-4" />
+              <h3 className="text-xl font-bold text-gray-900">Heal</h3>
+              <p className="text-gray-600">Support African healing</p>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-purple-50">
+            <CardContent className="p-6 text-center">
+              <GraduationCap className="h-12 w-12 text-purple-600 mx-auto mb-4" />
+              <h3 className="text-xl font-bold text-gray-900">Learn</h3>
+              <p className="text-gray-600">Grow Ubuntu wisdom</p>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-yellow-50">
+            <CardContent className="p-6 text-center">
+              <MessageSquare className="h-12 w-12 text-yellow-600 mx-auto mb-4" />
+              <h3 className="text-xl font-bold text-gray-900">Connect</h3>
+              <p className="text-gray-600">Community support</p>
+            </CardContent>
+          </Card>
+        </motion.div>
+
+        {/* Wallet Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"
+        >
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <Wallet className="w-5 h-5 mr-2" />
+                Your FLB Wallet
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {!wallet.connected ? (
+                <div className="text-center py-8">
+                  <Wallet className="h-16 w-16 text-gray-300 mx-auto mb-4" />
+                  <h3 className="text-lg font-medium text-gray-900 mb-2">Wallet Not Connected</h3>
+                  <p className="text-gray-600 mb-4">
+                    Connect your Celo-compatible wallet to earn and manage FLB tokens
+                  </p>
+                  <Button onClick={() => setShowWalletModal(true)} className="bg-green-600 hover:bg-green-700">
+                    Connect Wallet
+                  </Button>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  <div className="flex justify-between items-center border-b pb-4">
+                    <h3 className="text-lg font-medium">Connected Wallet</h3>
+                    <Badge className="bg-green-100 text-green-800">Connected</Badge>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">Address:</span>
+                      <span className="font-mono text-sm">
+                        {wallet.address.slice(0, 6)}...{wallet.address.slice(-4)}
+                      </span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">FLB Balance:</span>
+                      <span className="font-bold text-green-600">{wallet.flbBalance} FLB</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">CELO Balance:</span>
+                      <span className="font-bold text-yellow-600">{wallet.celoBalance.toFixed(2)} CELO</span>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4 pt-4">
+                    <Button className="bg-green-600 hover:bg-green-700">
+                      <HandHeart className="w-4 h-4 mr-2" />
+                      Donate
+                    </Button>
+                    <Button variant="outline">
+                      <Download className="w-4 h-4 mr-2" />
+                      Transfer
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Recent Transactions</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {transactions.length === 0 ? (
+                <div className="text-center py-8">
+                  <Clock className="h-16 w-16 text-gray-300 mx-auto mb-4" />
+                  <p className="text-gray-500">No transactions yet</p>
+                  <p className="text-sm text-gray-400">Complete courses to earn FLB tokens</p>
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {transactions.slice(0, 5).map((tx) => (
+                    <div key={tx.id} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
+                      <div>
+                        <p
+                          className={`font-medium ${
+                            tx.type === "earned"
+                              ? "text-green-600"
+                              : tx.type === "donated"
+                                ? "text-blue-600"
+                                : "text-purple-600"
+                          }`}
+                        >
+                          {tx.type === "earned" ? "+" : "-"}
+                          {tx.amount} FLB
+                        </p>
+                        <p className="text-sm text-gray-500">{tx.description}</p>
+                      </div>
+                      <div className="text-right">
+                        <p className="text-xs text-gray-500">{tx.timestamp.toLocaleDateString()}</p>
+                        <Badge className="bg-green-100 text-green-800 text-xs">{tx.status}</Badge>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </motion.div>
+
+        {/* Offline Mode Banner */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-8 rounded-lg"
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex items-center">
+              {isOfflineMode ? (
+                <WifiOff className="h-6 w-6 text-yellow-500 mr-3" />
+              ) : (
+                <Wifi className="h-6 w-6 text-yellow-500 mr-3" />
+              )}
+              <div>
+                <h3 className="text-lg font-medium text-yellow-800">
+                  {isOfflineMode ? "Offline Mode Active" : "Offline Mode Available"}
+                </h3>
+                <p className="text-yellow-700">
+                  {isOfflineMode
+                    ? "Course materials downloaded. Progress will sync when online."
+                    : "Download course materials for offline access in rural areas."}
+                </p>
+              </div>
+            </div>
+            <Button
+              onClick={toggleOfflineMode}
+              variant="outline"
+              className="border-yellow-400 text-yellow-800 bg-transparent"
+            >
+              <Download className="w-4 h-4 mr-2" />
+              {isOfflineMode ? "Disable" : "Enable"} Offline Mode
+            </Button>
+          </div>
+        </motion.div>
+
+        {/* Filters */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.5 }}
+          className="flex flex-wrap gap-4 mb-8 justify-center"
+        >
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium">Category:</span>
+            <select
+              value={selectedCategory}
+              onChange={(e) => setSelectedCategory(e.target.value)}
+              className="bg-white border border-orange-300 rounded-lg px-3 py-2"
+            >
+              <option value="all">All Categories</option>
+              <option value="Ubuntu Wisdom">Ubuntu Wisdom</option>
+              <option value="Cultural Heritage">Cultural Heritage</option>
+              <option value="Health Advocacy">Health Advocacy</option>
+              <option value="Technology">Technology</option>
+            </select>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium">Difficulty:</span>
+            <select
+              value={selectedDifficulty}
+              onChange={(e) => setSelectedDifficulty(e.target.value)}
+              className="bg-white border border-orange-300 rounded-lg px-3 py-2"
+            >
+              <option value="all">All Levels</option>
+              <option value="easy">Easy</option>
+              <option value="medium">Medium</option>
+              <option value="hard">Hard</option>
+            </select>
+          </div>
+
+          <Button onClick={exportProgress} variant="outline" className="border-orange-300 bg-transparent">
+            <Download className="w-4 h-4 mr-2" />
+            Export Progress
+          </Button>
+        </motion.div>
+
+        {/* Modules Grid */}
+        <motion.div
+          id="courses"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.6 }}
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"
+        >
+          {filteredModules.map((module, index) => {
+            const IconComponent = categoryIcons[module.category]
+            const isCompleted = moduleProgress[module.id]
+
+            return (
+              <motion.div
+                key={module.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+              >
+                <Card
+                  className={`hover:shadow-lg transition-all duration-300 hover:-translate-y-1 cursor-pointer ${
+                    isCompleted ? "border-green-500 bg-green-50" : ""
+                  }`}
+                  onClick={() => {
+                    setSelectedCourse(module)
+                    setShowCourseModal(true)
+                  }}
+                >
+                  <CardHeader>
+                    <div className="flex items-start justify-between">
+                      <div className="flex items-center gap-2">
+                        <IconComponent className="h-6 w-6 text-orange-500" />
+                        <Badge className={difficultyColors[module.difficulty]}>{module.difficulty}</Badge>
+                      </div>
+                      {isCompleted && <CheckCircle className="h-6 w-6 text-green-500" />}
+                    </div>
+                    <CardTitle className="text-lg">{module.title}</CardTitle>
+                    <CardDescription>{module.description}</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-4">
+                      <div className="flex items-center justify-between text-sm text-gray-600">
+                        <span className="flex items-center">
+                          <Clock className="w-4 h-4 mr-1" />
+                          {module.duration} min
+                        </span>
+                        <span>{module.category}</span>
+                      </div>
+
+                      <div className="flex items-center justify-between">
+                        <div className="text-sm">
+                          <span className="text-orange-600 font-medium">{module.flbReward} FLB</span>
+                          <span className="text-gray-500"> + </span>
+                          <span className="text-blue-600 font-medium">{module.xpReward} XP</span>
+                        </div>
+                        <Badge variant="outline" className="text-xs">
+                          {module.type}
+                        </Badge>
+                      </div>
+
+                      <Button
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          startModule(module)
+                        }}
+                        className="w-full bg-orange-600 hover:bg-orange-700"
+                        disabled={isCompleted}
+                      >
+                        {isCompleted ? "Completed" : "Start Module"}
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            )
+          })}
+        </motion.div>
+
+        {/* FLB Redemption Kits */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.7 }}
+          className="mb-8"
+        >
+          <h2 className="text-3xl font-bold text-center text-gray-900 mb-8">FLB Redemption Kits</h2>
+          <p className="text-center text-gray-600 mb-8">Turn your Ubuntu tokens into real impact</p>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {redemptionKits.map((kit) => (
+              <Card key={kit.id} className={`${kit.color} border-2`}>
+                <CardContent className="p-6">
+                  <h3 className="text-xl font-bold text-gray-900 mb-4">{kit.name}</h3>
+                  <div className="flex items-center mb-4">
+                    <Badge className="bg-white text-gray-800">
+                      {kit.cost} {kit.currency}
+                    </Badge>
+                  </div>
+                  <ul className="space-y-2 mb-6">
+                    {kit.items.map((item, index) => (
+                      <li key={index} className="flex items-center text-gray-700">
+                        <CheckCircle className="w-4 h-4 text-green-500 mr-2" />
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                  <Button
+                    onClick={() => redeemKit(kit.id)}
+                    disabled={!wallet.connected || wallet.flbBalance < kit.cost}
+                    className="w-full"
+                  >
+                    {wallet.connected
+                      ? wallet.flbBalance >= kit.cost
+                        ? "Redeem Kit"
+                        : "Insufficient FLB"
+                      : "Connect Wallet"}
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Ubuntu Quest System */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.8 }}
+          className="bg-gray-50 rounded-lg p-8 mb-8"
+        >
+          <h2 className="text-3xl font-bold text-center text-gray-900 mb-8">Ubuntu Quest System</h2>
+          <p className="text-center text-gray-600 mb-8">Grow your impact through collective learning and action</p>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <Card>
+              <CardContent className="p-6">
+                <h3 className="text-xl font-bold text-gray-900 mb-4">Youth Skill Path</h3>
+                <div className="space-y-4">
+                  <div className="flex items-center">
+                    <div className="flex-shrink-0 bg-green-100 text-green-800 rounded-full p-2">
+                      <GraduationCap className="w-4 h-4" />
+                    </div>
+                    <div className="ml-3">
+                      <p className="text-sm font-medium text-gray-900">Learner</p>
+                      <p className="text-sm text-gray-500">Earn basic FLB</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center">
+                    <div className="flex-shrink-0 bg-blue-100 text-blue-800 rounded-full p-2">
+                      <Shield className="w-4 h-4" />
+                    </div>
+                    <div className="ml-3">
+                      <p className="text-sm font-medium text-gray-900">Advocate</p>
+                      <p className="text-sm text-gray-500">Gain DAO voting</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center">
+                    <div className="flex-shrink-0 bg-purple-100 text-purple-800 rounded-full p-2">
+                      <Heart className="w-4 h-4" />
+                    </div>
+                    <div className="ml-3">
+                      <p className="text-sm font-medium text-gray-900">Mentor</p>
+                      <p className="text-sm text-gray-500">Local visibility</p>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardContent className="p-6">
+                <h3 className="text-xl font-bold text-gray-900 mb-4">Circle of Impact</h3>
+                <div className="space-y-3">
+                  <div className="flex items-start">
+                    <div className="flex-shrink-0 bg-yellow-100 text-yellow-800 rounded-full p-2 mt-1">
+                      <Users className="w-4 h-4" />
+                    </div>
+                    <div className="ml-3">
+                      <p className="text-sm font-medium text-gray-900">Clan-based rewards</p>
+                      <p className="text-sm text-gray-500">Earn Ubuntu Points collectively</p>
+                    </div>
+                  </div>
+                  <div className="flex items-start">
+                    <div className="flex-shrink-0 bg-red-100 text-red-800 rounded-full p-2 mt-1">
+                      <Target className="w-4 h-4" />
+                    </div>
+                    <div className="ml-3">
+                      <p className="text-sm font-medium text-gray-900">Community Quests</p>
+                      <p className="text-sm text-gray-500">Health Jams, Elder Interviews</p>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardContent className="p-6">
+                <h3 className="text-xl font-bold text-gray-900 mb-4">Revive a Clinic</h3>
+                <div className="space-y-4">
+                  <div className="flex items-start">
+                    <div className="flex-shrink-0 bg-green-100 text-green-800 rounded-full p-2 mt-1">
+                      <span className="text-xs font-bold">1</span>
+                    </div>
+                    <div className="ml-3">
+                      <p className="text-sm text-gray-700">Youth upload challenge</p>
+                    </div>
+                  </div>
+                  <div className="flex items-start">
+                    <div className="flex-shrink-0 bg-blue-100 text-blue-800 rounded-full p-2 mt-1">
+                      <span className="text-xs font-bold">2</span>
+                    </div>
+                    <div className="ml-3">
+                      <p className="text-sm text-gray-700">DAO vote initiated</p>
+                    </div>
+                  </div>
+                  <div className="flex items-start">
+                    <div className="flex-shrink-0 bg-purple-100 text-purple-800 rounded-full p-2 mt-1">
+                      <span className="text-xs font-bold">3</span>
+                    </div>
+                    <div className="ml-3">
+                      <p className="text-sm text-gray-700">FLB donation triggered</p>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </motion.div>
+
+        {/* Impact Stats */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.9 }}
+          className="text-center mb-8"
+        >
+          <h2 className="text-3xl font-bold text-gray-900 mb-8">Making a Difference Across Africa</h2>
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+            <Card>
+              <CardContent className="p-6 text-center">
+                <Users className="h-12 w-12 text-green-600 mx-auto mb-4" />
+                <h3 className="text-3xl font-bold text-gray-900">1,200+</h3>
+                <p className="text-gray-600">Ubuntu Learners</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="p-6 text-center">
+                <Coins className="h-12 w-12 text-green-600 mx-auto mb-4" />
+                <h3 className="text-3xl font-bold text-gray-900">250K+</h3>
+                <p className="text-gray-600">FLB Tokens Earned</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="p-6 text-center">
+                <Stethoscope className="h-12 w-12 text-green-600 mx-auto mb-4" />
+                <h3 className="text-3xl font-bold text-gray-900">15</h3>
+                <p className="text-gray-600">Healing Centers Supported</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="p-6 text-center">
+                <Globe className="h-12 w-12 text-green-600 mx-auto mb-4" />
+                <h3 className="text-3xl font-bold text-gray-900">8</h3>
+                <p className="text-gray-600">African Countries</p>
+              </CardContent>
+            </Card>
+          </div>
+        </motion.div>
+
+        {/* Testnet Notice */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 1.0 }}
+          className="bg-gray-800 text-white rounded-lg p-6 text-center"
+        >
+          <div className="flex items-center justify-center mb-4">
+            <Zap className="h-8 w-8 text-yellow-400 mr-3" />
+            <span className="text-xl font-medium">This is a TestNet environment</span>
+          </div>
+          <p className="text-gray-300">
+            FLB tokens have no real monetary value. This platform demonstrates Ubuntu-based learning and healing
+            principles.
+          </p>
+        </motion.div>
+      </div>
+
+      {/* Wallet Connection Modal */}
+      {showWalletModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <Card className="w-full max-w-md">
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <Wallet className="w-5 h-5 mr-2" />
+                Connect Wallet
+              </CardTitle>
+              <CardDescription>Choose a wallet to connect to the Ubuntu Learn & Earn platform</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Button
+                onClick={() => connectWallet("valora")}
+                className="w-full flex items-center justify-center"
+                variant="outline"
+              >
+                <div className="w-5 h-5 mr-2 bg-green-500 rounded-full flex items-center justify-center text-white text-xs">
+                  V
+                </div>
+                Valora
+              </Button>
+              <Button
+                onClick={() => connectWallet("metamask")}
+                className="w-full flex items-center justify-center"
+                variant="outline"
+              >
+                <div className="w-5 h-5 mr-2 bg-orange-500 rounded-full flex items-center justify-center text-white text-xs">
+                  M
+                </div>
+                MetaMask
+              </Button>
+              <Button
+                onClick={() => connectWallet("walletconnect")}
+                className="w-full flex items-center justify-center"
+                variant="outline"
+              >
+                <div className="w-5 h-5 mr-2 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">
+                  WC
+                </div>
+                WalletConnect
+              </Button>
+            </CardContent>
+            <div className="p-6 pt-0">
+              <Button onClick={() => setShowWalletModal(false)} variant="outline" className="w-full">
+                Cancel
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {/* Course Details Modal */}
+      {showCourseModal && selectedCourse && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <Card className="w-full max-w-4xl max-h-[90vh] overflow-y-auto">
+            <CardHeader>
+              <div className="flex justify-between items-start">
+                <div>
+                  <CardTitle className="text-2xl">{selectedCourse.title}</CardTitle>
+                  <CardDescription className="mt-2">{selectedCourse.description}</CardDescription>
+                </div>
+                <Button onClick={() => setShowCourseModal(false)} variant="ghost" size="sm">
+                  ✕
+                </Button>
+              </div>
+              <div className="flex items-center gap-4 text-sm text-gray-500">
+                <span className="flex items-center">
+                  <BookOpen className="w-4 h-4 mr-1" />
+                  {selectedCourse.type} Module
+                </span>
+                <span className="flex items-center">
+                  <Clock className="w-4 h-4 mr-1" />
+                  {selectedCourse.duration} Minutes
+                </span>
+                <span className="flex items-center">
+                  <Coins className="w-4 h-4 mr-1 text-yellow-500" />
+                  {selectedCourse.flbReward} FLB
+                </span>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-6">
+                <div>
+                  <h4 className="text-lg font-medium text-gray-900 mb-3">Ubuntu Learning Objectives</h4>
+                  <ul className="space-y-2">
+                    <li className="flex items-start">
+                      <CheckCircle className="w-5 h-5 text-green-500 mr-2 mt-0.5" />
+                      <span>Understand African healing wisdom and Ubuntu principles</span>
+                    </li>
+                    <li className="flex items-start">
+                      <CheckCircle className="w-5 h-5 text-green-500 mr-2 mt-0.5" />
+                      <span>Apply cultural knowledge to modern health challenges</span>
+                    </li>
+                    <li className="flex items-start">
+                      <CheckCircle className="w-5 h-5 text-green-500 mr-2 mt-0.5" />
+                      <span>Contribute to community healing and support networks</span>
+                    </li>
+                  </ul>
+                </div>
+
+                <div>
+                  <h4 className="text-lg font-medium text-gray-900 mb-3">Requirements</h4>
+                  <ul className="space-y-1 text-gray-600">
+                    <li>• Basic understanding of African cultural values</li>
+                    <li>• Internet connection (offline mode available)</li>
+                    <li>• Celo-compatible wallet (for FLB token rewards)</li>
+                    <li>• Commitment to Ubuntu principles of community healing</li>
+                  </ul>
+                </div>
+              </div>
+            </CardContent>
+            <div className="p-6 pt-0 flex gap-4">
+              <Button onClick={() => startModule(selectedCourse)} className="flex-1 bg-green-600 hover:bg-green-700">
+                Start Ubuntu Learning
+              </Button>
+              <Button onClick={() => setShowCourseModal(false)} variant="outline" className="flex-1">
+                Cancel
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )}
+    </div>
+  )
+}

app/login/page.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { UserDatabase, type User } from "@/lib/user-database"
+import { Shield, Heart } from "lucide-react"
+import Link from "next/link"
+
+export default function LoginPage() {
+  const router = useRouter()
+  const [users, setUsers] = useState<User[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Get all users
+    const allUsers = UserDatabase.getAllUsers()
+    setUsers(allUsers)
+    setLoading(false)
+
+    // Check if user is already logged in
+    const currentUser = UserDatabase.getCurrentUser()
+    if (currentUser) {
+      router.push("/profile")
+    }
+  }, [router])
+
+  const handleLogin = (userId: string) => {
+    // Set current user
+    localStorage.setItem("flameborn_current_user", userId)
+
+    // Redirect to profile
+    router.push("/profile")
+  }
+
+  return (
+    <div className="min-h-screen bg-dusk flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h1 className="text-4xl font-heading text-flame mb-2">FLAMEBORN</h1>
+          <p className="text-gray-400">Log in to your account</p>
+        </div>
+
+        <Card className="bg-dusk border border-gray-700">
+          <CardHeader>
+            <CardTitle>Select Your Account</CardTitle>
+            <CardDescription>Choose an account to log in or register a new one</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {loading ? (
+              <p className="text-center text-gray-400">Loading accounts...</p>
+            ) : users.length === 0 ? (
+              <div className="text-center py-6">
+                <p className="text-gray-400 mb-4">No accounts found</p>
+                <p className="text-sm text-gray-500 mb-6">Register as a Guardian or Healer to get started</p>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <Link href="/register/guardian">
+                    <Button className="w-full bg-guardian text-black hover:bg-guardian/80">
+                      <Shield className="h-4 w-4 mr-2" /> Guardian
+                    </Button>
+                  </Link>
+                  <Link href="/register/healer">
+                    <Button className="w-full bg-flame text-white hover:bg-flame/80">
+                      <Heart className="h-4 w-4 mr-2" /> Healer
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                {users.map((user) => (
+                  <div
+                    key={user.id}
+                    className={`p-4 rounded-lg border ${
+                      user.type === "guardian"
+                        ? "border-guardian/30 hover:border-guardian"
+                        : "border-flame/30 hover:border-flame"
+                    } cursor-pointer transition-all`}
+                    onClick={() => handleLogin(user.id)}
+                  >
+                    <div className="flex items-center gap-3">
+                      <div
+                        className={`p-2 rounded-full ${user.type === "guardian" ? "bg-guardian/20" : "bg-flame/20"}`}
+                      >
+                        {user.type === "guardian" ? (
+                          <Shield className="h-5 w-5 text-guardian" />
+                        ) : (
+                          <Heart className="h-5 w-5 text-flame" />
+                        )}
+                      </div>
+                      <div>
+                        <h3 className="font-medium text-white">{user.fullName}</h3>
+                        <p className="text-sm text-gray-400">
+                          {user.type === "guardian" ? "Guardian" : "Healer"} • {user.email}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+          <CardFooter className="flex justify-center border-t border-gray-800 pt-4">
+            <p className="text-sm text-gray-500">
+              Don't have an account?{" "}
+              <Link href="/register/guardian" className="text-flame hover:underline">
+                Register
+              </Link>
+            </p>
+          </CardFooter>
+        </Card>
+      </div>
+    </div>
+  )
+}

app/manifesto/page.tsx

@@ -0,0 +1,5 @@
+import { Manifesto } from "@/components/manifesto"
+
+export default function ManifestoPage() {
+  return <Manifesto />
+}

app/maternal-health/page.tsx

@@ -0,0 +1,5 @@
+import { MaternalHealthPortal } from "@/components/maternal-health/maternal-health-portal"
+
+export default function MaternalHealthPage() {
+  return <MaternalHealthPortal />
+}

app/network-stats/page.tsx

@@ -0,0 +1,5 @@
+import { NetworkStatsLive } from "@/components/network-stats/network-stats-live"
+
+export default function NetworkStatsPage() {
+  return <NetworkStatsLive />
+}

app/page.tsx

@@ -0,0 +1,367 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import Link from "next/link"
+import { Flame, Heart, Users, Globe, ArrowRight, Sparkles, Shield, Zap, TrendingUp } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import ParticleBackground from "@/components/particle-background"
+import FlameAnimation from "@/components/flame-animation"
+import SoundEffects from "@/components/sound-effects"
+import MostarAIAssistant from "@/components/ai-assistant"
+
+const HomePage = () => {
+  const [mounted, setMounted] = useState(false)
+  const [activeSection, setActiveSection] = useState("hero")
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-orange-50 to-red-50 flex items-center justify-center">
+        <div className="text-center">
+          <Flame className="w-16 h-16 text-orange-500 animate-pulse mx-auto mb-4" />
+          <p className="text-gray-600">Loading FlameBorn Ubuntu...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-orange-50 via-red-50 to-pink-50 relative overflow-hidden">
+      <ParticleBackground />
+      <SoundEffects />
+
+      {/* Hero Section */}
+      <section className="relative min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto text-center">
+          <div className="mb-8">
+            <FlameAnimation />
+          </div>
+
+          <Badge variant="outline" className="mb-6 bg-white/80 backdrop-blur-sm border-orange-200">
+            <Sparkles className="w-4 h-4 mr-2" />
+            Ubuntu-Powered Healthcare Tokenization
+          </Badge>
+
+          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-gray-900 mb-6 leading-tight">
+            <span className="bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent">FlameBorn</span>
+            <br />
+            <span className="text-3xl md:text-4xl lg:text-5xl text-gray-700">I am because we are</span>
+          </h1>
+
+          <p className="text-xl md:text-2xl text-gray-600 mb-8 max-w-4xl mx-auto leading-relaxed">
+            Bridging traditional African Ubuntu philosophy with modern healthcare tokenization. Every birth registered,
+            every healer verified, every community connected through the power of blockchain.
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
+            <Button asChild size="lg" className="bg-orange-500 hover:bg-orange-600 text-white px-8 py-3">
+              <Link href="/launch">
+                <Flame className="w-5 h-5 mr-2" />
+                Launch App
+              </Link>
+            </Button>
+            <Button asChild variant="outline" size="lg" className="px-8 py-3 bg-white/80 backdrop-blur-sm">
+              <Link href="/manifesto">
+                <Heart className="w-5 h-5 mr-2" />
+                Read Manifesto
+              </Link>
+            </Button>
+            <Button asChild variant="outline" size="lg" className="px-8 py-3 bg-white/80 backdrop-blur-sm">
+              <Link href="/analytics">
+                <TrendingUp className="w-5 h-5 mr-2" />
+                View Analytics
+              </Link>
+            </Button>
+          </div>
+
+          {/* Key Stats */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
+            <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 border border-orange-100">
+              <div className="text-2xl font-bold text-orange-600">1,247</div>
+              <div className="text-sm text-gray-600">Healthcare Workers</div>
+            </div>
+            <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 border border-orange-100">
+              <div className="text-2xl font-bold text-red-600">523</div>
+              <div className="text-sm text-gray-600">Births Verified</div>
+            </div>
+            <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 border border-orange-100">
+              <div className="text-2xl font-bold text-blue-600">$125K</div>
+              <div className="text-sm text-gray-600">Donations Distributed</div>
+            </div>
+            <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 border border-orange-100">
+              <div className="text-2xl font-bold text-green-600">94%</div>
+              <div className="text-sm text-gray-600">Impact Score</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Ubuntu Philosophy Section */}
+      <section className="py-20 px-4 sm:px-6 lg:px-8 bg-white/50 backdrop-blur-sm">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Ubuntu: The Heart of FlameBorn</h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              "Umuntu ngumuntu ngabantu" - A person is a person through other persons. This ancient African wisdom
+              guides our approach to healthcare tokenization.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <Card className="border-orange-200 bg-white/80 backdrop-blur-sm">
+              <CardHeader>
+                <Heart className="w-12 h-12 text-red-500 mb-4" />
+                <CardTitle>Interconnectedness</CardTitle>
+                <CardDescription>
+                  Every token represents our shared humanity and collective responsibility for health
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-gray-600">
+                  In Ubuntu philosophy, individual wellness is inseparable from community health. Our tokens create
+                  digital bonds that strengthen real-world healing networks.
+                </p>
+              </CardContent>
+            </Card>
+
+            <Card className="border-orange-200 bg-white/80 backdrop-blur-sm">
+              <CardHeader>
+                <Users className="w-12 h-12 text-blue-500 mb-4" />
+                <CardTitle>Collective Prosperity</CardTitle>
+                <CardDescription>
+                  When one thrives, we all thrive - tokenomics designed for shared abundance
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-gray-600">
+                  Our distribution model ensures that healthcare workers, communities, and supporters all benefit from
+                  the network's growth and success.
+                </p>
+              </CardContent>
+            </Card>
+
+            <Card className="border-orange-200 bg-white/80 backdrop-blur-sm">
+              <CardHeader>
+                <Globe className="w-12 h-12 text-green-500 mb-4" />
+                <CardTitle>Cultural Bridge</CardTitle>
+                <CardDescription>Honoring traditional wisdom while embracing technological innovation</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-gray-600">
+                  We bridge ancient African healing traditions with modern blockchain technology, creating a culturally
+                  respectful path to global healthcare equity.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      {/* How It Works Section */}
+      <section className="py-20 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">How FlameBorn Works</h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              A simple, powerful system that rewards healthcare impact and builds community wealth
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+            <div className="text-center">
+              <div className="bg-orange-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
+                <Shield className="w-8 h-8 text-orange-600" />
+              </div>
+              <h3 className="text-xl font-semibold mb-2">Register</h3>
+              <p className="text-gray-600">Healthcare workers verify their credentials and join the Ubuntu network</p>
+            </div>
+
+            <div className="text-center">
+              <div className="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
+                <Zap className="w-8 h-8 text-blue-600" />
+              </div>
+              <h3 className="text-xl font-semibold mb-2">Serve</h3>
+              <p className="text-gray-600">Provide healthcare services and register births in their communities</p>
+            </div>
+
+            <div className="text-center">
+              <div className="bg-green-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
+                <Flame className="w-8 h-8 text-green-600" />
+              </div>
+              <h3 className="text-xl font-semibold mb-2">Earn</h3>
+              <p className="text-gray-600">Receive FLAME tokens for verified healthcare impact and community service</p>
+            </div>
+
+            <div className="text-center">
+              <div className="bg-purple-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
+                <Heart className="w-8 h-8 text-purple-600" />
+              </div>
+              <h3 className="text-xl font-semibold mb-2">Grow</h3>
+              <p className="text-gray-600">
+                Build wealth together as the network creates lasting healthcare infrastructure
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* AI Assistant Section */}
+      <section className="py-20 px-4 sm:px-6 lg:px-8 bg-white/50 backdrop-blur-sm">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Meet Mostar, Your Ubuntu AI Guide</h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              Ask questions about FlameBorn, Ubuntu philosophy, African wisdom, or healthcare tokenization. Mostar
+              embodies the spirit of "I am because we are."
+            </p>
+          </div>
+
+          <div className="flex justify-center">
+            <MostarAIAssistant />
+          </div>
+        </div>
+      </section>
+
+      {/* Call to Action Section */}
+      <section className="py-20 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Join the Ubuntu Healthcare Revolution</h2>
+          <p className="text-xl text-gray-600 mb-8">
+            Together, we can create a world where every birth is celebrated, every healer is supported, and every
+            community thrives.
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+            <Button
+              asChild
+              size="lg"
+              className="bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white px-8 py-3"
+            >
+              <Link href="/register/healer">
+                <Shield className="w-5 h-5 mr-2" />
+                Become a Healer
+              </Link>
+            </Button>
+            <Button asChild variant="outline" size="lg" className="px-8 py-3 bg-white/80 backdrop-blur-sm">
+              <Link href="/register/guardian">
+                <Users className="w-5 h-5 mr-2" />
+                Join as Guardian
+              </Link>
+            </Button>
+            <Button asChild variant="outline" size="lg" className="px-8 py-3 bg-white/80 backdrop-blur-sm">
+              <Link href="/community-pulse">
+                <Globe className="w-5 h-5 mr-2" />
+                Explore Community
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div>
+              <div className="flex items-center space-x-2 mb-4">
+                <Flame className="w-8 h-8 text-orange-500" />
+                <span className="text-xl font-bold">FlameBorn</span>
+              </div>
+              <p className="text-gray-400">Ubuntu-powered healthcare tokenization for a connected world.</p>
+            </div>
+
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Platform</h3>
+              <ul className="space-y-2 text-gray-400">
+                <li>
+                  <Link href="/launch" className="hover:text-white">
+                    Launch App
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/analytics" className="hover:text-white">
+                    Analytics
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/token-system" className="hover:text-white">
+                    Token System
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/smart-contracts" className="hover:text-white">
+                    Smart Contracts
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Community</h3>
+              <ul className="space-y-2 text-gray-400">
+                <li>
+                  <Link href="/guardians-sanctuary" className="hover:text-white">
+                    Guardians Sanctuary
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/flameborn-journey" className="hover:text-white">
+                    FlameBorn Journey
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/community-pulse" className="hover:text-white">
+                    Community Pulse
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/healers" className="hover:text-white">
+                    Find Healers
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Learn</h3>
+              <ul className="space-y-2 text-gray-400">
+                <li>
+                  <Link href="/manifesto" className="hover:text-white">
+                    Manifesto
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/learn-earn" className="hover:text-white">
+                    Learn & Earn
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/legal" className="hover:text-white">
+                    Legal
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/test-proverbs" className="hover:text-white">
+                    Ubuntu Wisdom
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
+            <p>&copy; 2024 FlameBorn. Built with Ubuntu philosophy. "I am because we are."</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}
+
+export default HomePage

app/profile/edit/page.tsx

@@ -0,0 +1,229 @@
+"use client"
+
+import type React from "react"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Label } from "@/components/ui/label"
+import { UserDatabase, type User, type Guardian, type Healer } from "@/lib/user-database"
+import { LoadingState } from "@/components/loading-state"
+import { ArrowLeft, Save } from "lucide-react"
+
+export default function ProfileEditPage() {
+  const router = useRouter()
+  const [user, setUser] = useState<User | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [isSaving, setIsSaving] = useState(false)
+  const [formData, setFormData] = useState<Partial<User>>({})
+
+  useEffect(() => {
+    // Get current user
+    const currentUser = UserDatabase.getCurrentUser()
+
+    if (!currentUser) {
+      // Redirect to login if no user is found
+      router.push("/login")
+      return
+    }
+
+    setUser(currentUser)
+    setFormData(currentUser)
+    setLoading(false)
+  }, [router])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target
+    setFormData((prev) => ({ ...prev, [name]: value }))
+  }
+
+  const handleSave = async () => {
+    if (!user) return
+
+    setIsSaving(true)
+
+    try {
+      // Update user
+      const updatedUser = UserDatabase.updateUser(user.id, formData)
+
+      if (updatedUser) {
+        setUser(updatedUser)
+
+        // Redirect back to profile
+        router.push("/profile")
+      }
+    } catch (error) {
+      console.error("Error updating profile:", error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  if (loading) {
+    return <LoadingState message="Loading your profile..." />
+  }
+
+  if (!user) {
+    return (
+      <div className="min-h-screen bg-dusk flex items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardContent className="pt-6">
+            <div className="text-center">
+              <h2 className="text-xl font-medium mb-4">No User Found</h2>
+              <p className="text-gray-400 mb-6">Please log in or register to edit your profile.</p>
+              <Button className="bg-flame text-white hover:bg-flame/80" onClick={() => router.push("/login")}>
+                Log In
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-dusk py-12 px-4 sm:px-6">
+      <div className="max-w-3xl mx-auto">
+        <div className="flex items-center mb-8">
+          <Button variant="ghost" className="mr-4" onClick={() => router.push("/profile")}>
+            <ArrowLeft className="h-4 w-4 mr-2" /> Back
+          </Button>
+          <h1 className="text-3xl font-heading text-white">Edit Profile</h1>
+        </div>
+
+        <Card className="bg-dusk border border-gray-700">
+          <CardHeader>
+            <CardTitle>Personal Information</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="fullName">Full Name</Label>
+              <Input
+                id="fullName"
+                name="fullName"
+                value={formData.fullName || ""}
+                onChange={handleChange}
+                className="bg-gray-800/50 border-gray-700"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                value={formData.email || ""}
+                onChange={handleChange}
+                className="bg-gray-800/50 border-gray-700"
+              />
+            </div>
+
+            {user.type === "guardian" && (
+              <>
+                <div className="space-y-2">
+                  <Label htmlFor="country">Country</Label>
+                  <Input
+                    id="country"
+                    name="country"
+                    value={(formData as Guardian).country || ""}
+                    onChange={handleChange}
+                    className="bg-gray-800/50 border-gray-700"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="motivation">Why I became a Guardian</Label>
+                  <Textarea
+                    id="motivation"
+                    name="motivation"
+                    value={(formData as Guardian).motivation || ""}
+                    onChange={handleChange}
+                    className="bg-gray-800/50 border-gray-700 min-h-[100px]"
+                  />
+                </div>
+              </>
+            )}
+
+            {user.type === "healer" && (
+              <>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="city">City/Town</Label>
+                    <Input
+                      id="city"
+                      name="city"
+                      value={(formData as Healer).city || ""}
+                      onChange={handleChange}
+                      className="bg-gray-800/50 border-gray-700"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="country">Country</Label>
+                    <Input
+                      id="country"
+                      name="country"
+                      value={(formData as Healer).country || ""}
+                      onChange={handleChange}
+                      className="bg-gray-800/50 border-gray-700"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="facilityName">Facility Name</Label>
+                  <Input
+                    id="facilityName"
+                    name="facilityName"
+                    value={(formData as Healer).facilityName || ""}
+                    onChange={handleChange}
+                    className="bg-gray-800/50 border-gray-700"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="bio">About You</Label>
+                  <Textarea
+                    id="bio"
+                    name="bio"
+                    value={(formData as Healer).bio || ""}
+                    onChange={handleChange}
+                    className="bg-gray-800/50 border-gray-700 min-h-[100px]"
+                    placeholder="Tell us about your work, your community, and the challenges you face..."
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="walletAddress">Wallet Address</Label>
+                  <Input
+                    id="walletAddress"
+                    name="walletAddress"
+                    value={(formData as Healer).walletAddress || ""}
+                    onChange={handleChange}
+                    className="bg-gray-800/50 border-gray-700"
+                    placeholder="0x..."
+                  />
+                  <p className="text-xs text-gray-400">Where you'll receive support funds</p>
+                </div>
+              </>
+            )}
+          </CardContent>
+          <CardFooter className="flex justify-end">
+            <Button
+              className={`${user.type === "guardian" ? "bg-guardian text-black" : "bg-flame text-white"}`}
+              onClick={handleSave}
+              disabled={isSaving}
+            >
+              <Save className="h-4 w-4 mr-2" />
+              {isSaving ? "Saving..." : "Save Changes"}
+            </Button>
+          </CardFooter>
+        </Card>
+      </div>
+    </div>
+  )
+}

app/profile/page.tsx

@@ -0,0 +1,234 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { UserDatabase, type User } from "@/lib/user-database"
+import { Shield, Heart, Edit, LogOut } from "lucide-react"
+import { ProfileHeader } from "@/components/profile/profile-header"
+import { ProfileImpact } from "@/components/profile/profile-impact"
+import { ProfileActivity } from "@/components/profile/profile-activity"
+import { ProfileAchievements } from "@/components/profile/profile-achievements"
+import { LoadingState } from "@/components/loading-state"
+
+export default function ProfilePage() {
+  const router = useRouter()
+  const [user, setUser] = useState<User | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Get current user
+    const currentUser = UserDatabase.getCurrentUser()
+
+    if (!currentUser) {
+      // Redirect to login if no user is found
+      router.push("/login")
+      return
+    }
+
+    setUser(currentUser)
+    setLoading(false)
+  }, [router])
+
+  const handleLogout = () => {
+    // Clear current user
+    localStorage.removeItem("flameborn_current_user")
+
+    // Redirect to home
+    router.push("/")
+  }
+
+  if (loading) {
+    return <LoadingState message="Loading your profile..." />
+  }
+
+  if (!user) {
+    return (
+      <div className="min-h-screen bg-dusk flex items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardContent className="pt-6">
+            <div className="text-center">
+              <h2 className="text-xl font-medium mb-4">No User Found</h2>
+              <p className="text-gray-400 mb-6">Please log in or register to view your profile.</p>
+              <div className="flex gap-4 justify-center">
+                <Button className="bg-flame text-white hover:bg-flame/80" onClick={() => router.push("/login")}>
+                  Log In
+                </Button>
+                <Button
+                  variant="outline"
+                  className="border-guardian text-guardian hover:bg-guardian/10"
+                  onClick={() => router.push("/register/guardian")}
+                >
+                  Register
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-dusk py-12 px-4 sm:px-6">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
+          <h1 className="text-3xl font-heading text-white mb-4 md:mb-0">My Profile</h1>
+          <div className="flex gap-3">
+            <Button
+              variant="outline"
+              className="border-gray-700 text-gray-300 hover:bg-gray-800"
+              onClick={() => router.push("/profile/edit")}
+            >
+              <Edit className="h-4 w-4 mr-2" /> Edit Profile
+            </Button>
+            <Button
+              variant="outline"
+              className="border-red-700 text-red-400 hover:bg-red-900/20"
+              onClick={handleLogout}
+            >
+              <LogOut className="h-4 w-4 mr-2" /> Log Out
+            </Button>
+          </div>
+        </div>
+
+        <ProfileHeader user={user} />
+
+        <Tabs defaultValue="impact" className="mt-8">
+          <TabsList className="bg-gray-800 border border-gray-700">
+            <TabsTrigger value="impact" className="text-white data-[state=active]:bg-gray-700">
+              Impact
+            </TabsTrigger>
+            <TabsTrigger value="activity" className="text-white data-[state=active]:bg-gray-700">
+              Activity
+            </TabsTrigger>
+            <TabsTrigger value="achievements" className="text-white data-[state=active]:bg-gray-700">
+              Achievements
+            </TabsTrigger>
+            <TabsTrigger value="details" className="text-white data-[state=active]:bg-gray-700">
+              Details
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="impact">
+            <ProfileImpact user={user} />
+          </TabsContent>
+
+          <TabsContent value="activity">
+            <ProfileActivity user={user} />
+          </TabsContent>
+
+          <TabsContent value="achievements">
+            <ProfileAchievements user={user} />
+          </TabsContent>
+
+          <TabsContent value="details">
+            <Card className="bg-dusk border border-gray-700">
+              <CardHeader>
+                <CardTitle>Profile Details</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="space-y-4">
+                    <div>
+                      <h3 className="text-sm font-medium text-gray-400">Full Name</h3>
+                      <p className="text-white">{user.fullName}</p>
+                    </div>
+
+                    <div>
+                      <h3 className="text-sm font-medium text-gray-400">Email</h3>
+                      <p className="text-white">{user.email}</p>
+                    </div>
+
+                    <div>
+                      <h3 className="text-sm font-medium text-gray-400">Member Since</h3>
+                      <p className="text-white">{new Date(user.registeredAt).toLocaleDateString()}</p>
+                    </div>
+
+                    <div>
+                      <h3 className="text-sm font-medium text-gray-400">Role</h3>
+                      <p className="text-white flex items-center">
+                        {user.type === "guardian" ? (
+                          <>
+                            <Shield className="h-4 w-4 mr-2 text-guardian" /> Guardian
+                          </>
+                        ) : (
+                          <>
+                            <Heart className="h-4 w-4 mr-2 text-flame" /> Healer
+                          </>
+                        )}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="space-y-4">
+                    {user.type === "guardian" && (
+                      <>
+                        <div>
+                          <h3 className="text-sm font-medium text-gray-400">Country</h3>
+                          <p className="text-white">{user.country}</p>
+                        </div>
+
+                        <div>
+                          <h3 className="text-sm font-medium text-gray-400">Contribution</h3>
+                          <p className="text-white">
+                            {user.contributionAmount} {user.currency.toUpperCase()}
+                          </p>
+                        </div>
+
+                        <div>
+                          <h3 className="text-sm font-medium text-gray-400">Payment Method</h3>
+                          <p className="text-white capitalize">{user.paymentMethod}</p>
+                        </div>
+                      </>
+                    )}
+
+                    {user.type === "healer" && (
+                      <>
+                        <div>
+                          <h3 className="text-sm font-medium text-gray-400">Healthcare Role</h3>
+                          <p className="text-white capitalize">{user.role}</p>
+                        </div>
+
+                        <div>
+                          <h3 className="text-sm font-medium text-gray-400">Location</h3>
+                          <p className="text-white">
+                            {user.city}, {user.country}
+                          </p>
+                        </div>
+
+                        <div>
+                          <h3 className="text-sm font-medium text-gray-400">Verification Status</h3>
+                          <p
+                            className={`capitalize ${
+                              user.verificationStatus === "verified"
+                                ? "text-green-400"
+                                : user.verificationStatus === "rejected"
+                                  ? "text-red-400"
+                                  : "text-yellow-400"
+                            }`}
+                          >
+                            {user.verificationStatus}
+                          </p>
+                        </div>
+
+                        {user.walletAddress && (
+                          <div>
+                            <h3 className="text-sm font-medium text-gray-400">Wallet Address</h3>
+                            <p className="text-white text-sm truncate">{user.walletAddress}</p>
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  )
+}

app/register-chw/page.tsx

@@ -0,0 +1,10 @@
+import { RegisterCHW } from "@/components/register-chw"
+
+export default function RegisterCHWPage() {
+  return (
+    <div className="min-h-screen bg-black py-12 px-4">
+      <h1 className="text-3xl font-bold text-center flame-text mb-8">Healthcare Worker Registration</h1>
+      <RegisterCHW />
+    </div>
+  )
+}

app/register/guardian/page.tsx

@@ -0,0 +1,14 @@
+import { RegistrationLayout } from "@/components/registration/registration-layout"
+import { GuardianRegistrationForm } from "@/components/registration/guardian-registration-form"
+
+export default function GuardianRegistrationPage() {
+  return (
+    <RegistrationLayout
+      title="Become a Guardian"
+      subtitle="Join the movement to support healthcare workers across Africa"
+      type="guardian"
+    >
+      <GuardianRegistrationForm />
+    </RegistrationLayout>
+  )
+}

app/register/healer/page.tsx

@@ -0,0 +1,14 @@
+import { RegistrationLayout } from "@/components/registration/registration-layout"
+import { HealerRegistrationForm } from "@/components/registration/healer-registration-form"
+
+export default function HealerRegistrationPage() {
+  return (
+    <RegistrationLayout
+      title="Register as a Healer"
+      subtitle="Join the Flameborn community of verified healthcare workers"
+      type="healer"
+    >
+      <HealerRegistrationForm />
+    </RegistrationLayout>
+  )
+}

app/smart-contracts/page.tsx

@@ -0,0 +1,19 @@
+import SmartContractInfo from "@/components/smart-contract-info"
+
+export default function SmartContractsPage() {
+  return (
+    <div className="min-h-screen bg-black text-white py-20 px-4">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl md:text-5xl font-bold mb-4">
+            Smart Contract <span className="text-orange-500">Architecture</span>
+          </h1>
+          <p className="text-xl text-gray-300 max-w-3xl mx-auto">
+            Explore the decentralized infrastructure powering Africa's health sovereignty revolution
+          </p>
+        </div>
+        <SmartContractInfo />
+      </div>
+    </div>
+  )
+}

app/test-proverbs/page.tsx

@@ -0,0 +1,11 @@
+import { ProverbTester } from "@/components/proverb-tester"
+
+export default function TestProverbsPage() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-black">
+      <div className="container mx-auto py-8">
+        <ProverbTester />
+      </div>
+    </div>
+  )
+}

app/testnet/page.tsx

@@ -0,0 +1,390 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { TestnetStatus } from "@/components/testnet-status"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { testnetClient, type TestnetUser, type TestnetValidator } from "@/lib/testnet-client"
+import { Flame, Users, Server, Activity, Plus, Heart } from "lucide-react"
+import { useToast } from "@/hooks/use-toast"
+
+export default function TestnetPage() {
+  const [users, setUsers] = useState<TestnetUser[]>([])
+  const [validators, setValidators] = useState<TestnetValidator[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [newUser, setNewUser] = useState({
+    wallet_address: "",
+    role: "",
+    name: "",
+    location: "",
+  })
+  const [newValidator, setNewValidator] = useState({
+    wallet_address: "",
+    name: "",
+    stake_amount: 0,
+  })
+  const { toast } = useToast()
+
+  const loadData = async () => {
+    try {
+      const [usersData, validatorsData] = await Promise.all([testnetClient.getUsers(), testnetClient.getValidators()])
+      setUsers(usersData)
+      setValidators(validatorsData)
+    } catch (error) {
+      console.error("Failed to load data:", error)
+      toast({
+        title: "Error",
+        description: "Failed to load testnet data",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  const handleCreateUser = async () => {
+    try {
+      if (!newUser.wallet_address || !newUser.role || !newUser.name || !newUser.location) {
+        toast({
+          title: "Error",
+          description: "Please fill in all fields",
+          variant: "destructive",
+        })
+        return
+      }
+
+      await testnetClient.createUser(newUser)
+      setNewUser({ wallet_address: "", role: "", name: "", location: "" })
+      await loadData()
+
+      toast({
+        title: "Success",
+        description: `Ubuntu member ${newUser.name} registered successfully!`,
+      })
+    } catch (error) {
+      console.error("Failed to create user:", error)
+      toast({
+        title: "Error",
+        description: "Failed to register user",
+        variant: "destructive",
+      })
+    }
+  }
+
+  const handleCreateValidator = async () => {
+    try {
+      if (!newValidator.wallet_address || !newValidator.name || newValidator.stake_amount <= 0) {
+        toast({
+          title: "Error",
+          description: "Please fill in all fields with valid values",
+          variant: "destructive",
+        })
+        return
+      }
+
+      await testnetClient.createValidator(newValidator)
+      setNewValidator({ wallet_address: "", name: "", stake_amount: 0 })
+      await loadData()
+
+      toast({
+        title: "Success",
+        description: `Validator ${newValidator.name} registered successfully!`,
+      })
+    } catch (error) {
+      console.error("Failed to create validator:", error)
+      toast({
+        title: "Error",
+        description: "Failed to register validator",
+        variant: "destructive",
+      })
+    }
+  }
+
+  const sendHeartbeat = async (walletAddress: string) => {
+    try {
+      await testnetClient.sendValidatorHeartbeat(walletAddress)
+      await loadData()
+
+      toast({
+        title: "Heartbeat Sent",
+        description: "Validator heartbeat recorded successfully",
+      })
+    } catch (error) {
+      console.error("Failed to send heartbeat:", error)
+      toast({
+        title: "Error",
+        description: "Failed to send heartbeat",
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-4">
+      <div className="max-w-7xl mx-auto space-y-8">
+        {/* Header */}
+        <div className="text-center space-y-4">
+          <div className="flex items-center justify-center gap-3">
+            <Flame className="w-12 h-12 text-orange-500" />
+            <h1 className="text-4xl font-bold text-white">FlameBorn Testnet</h1>
+          </div>
+          <p className="text-xl text-slate-300 max-w-2xl mx-auto">
+            Ubuntu-powered healthcare tokenization testnet. "I am because we are" - Test the network, register users,
+            and validate transactions.
+          </p>
+        </div>
+
+        {/* Network Status */}
+        <TestnetStatus />
+
+        {/* User Registration */}
+        <Card className="bg-slate-800 border-slate-700">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-white">
+              <Users className="w-5 h-5 text-blue-400" />
+              Register Ubuntu Member
+            </CardTitle>
+            <CardDescription className="text-slate-400">
+              Join the FlameBorn healthcare network as a healer, guardian, or community member
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="wallet" className="text-slate-300">
+                  Wallet Address
+                </Label>
+                <Input
+                  id="wallet"
+                  placeholder="0x..."
+                  value={newUser.wallet_address}
+                  onChange={(e) => setNewUser({ ...newUser, wallet_address: e.target.value })}
+                  className="bg-slate-700 border-slate-600 text-white"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="role" className="text-slate-300">
+                  Role
+                </Label>
+                <Select value={newUser.role} onValueChange={(value) => setNewUser({ ...newUser, role: value })}>
+                  <SelectTrigger className="bg-slate-700 border-slate-600 text-white">
+                    <SelectValue placeholder="Select role" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="healer">Healer</SelectItem>
+                    <SelectItem value="guardian">Guardian</SelectItem>
+                    <SelectItem value="community">Community Member</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="name" className="text-slate-300">
+                  Name
+                </Label>
+                <Input
+                  id="name"
+                  placeholder="Full name"
+                  value={newUser.name}
+                  onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
+                  className="bg-slate-700 border-slate-600 text-white"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="location" className="text-slate-300">
+                  Location
+                </Label>
+                <Input
+                  id="location"
+                  placeholder="City, Country"
+                  value={newUser.location}
+                  onChange={(e) => setNewUser({ ...newUser, location: e.target.value })}
+                  className="bg-slate-700 border-slate-600 text-white"
+                />
+              </div>
+            </div>
+            <Button onClick={handleCreateUser} className="bg-blue-600 hover:bg-blue-700">
+              <Plus className="w-4 h-4 mr-2" />
+              Register Ubuntu Member
+            </Button>
+          </CardContent>
+        </Card>
+
+        {/* Validator Registration */}
+        <Card className="bg-slate-800 border-slate-700">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-white">
+              <Server className="w-5 h-5 text-green-400" />
+              Register Validator
+            </CardTitle>
+            <CardDescription className="text-slate-400">
+              Become a validator to help secure the Ubuntu network
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="val-wallet" className="text-slate-300">
+                  Wallet Address
+                </Label>
+                <Input
+                  id="val-wallet"
+                  placeholder="0x..."
+                  value={newValidator.wallet_address}
+                  onChange={(e) => setNewValidator({ ...newValidator, wallet_address: e.target.value })}
+                  className="bg-slate-700 border-slate-600 text-white"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="val-name" className="text-slate-300">
+                  Validator Name
+                </Label>
+                <Input
+                  id="val-name"
+                  placeholder="Validator name"
+                  value={newValidator.name}
+                  onChange={(e) => setNewValidator({ ...newValidator, name: e.target.value })}
+                  className="bg-slate-700 border-slate-600 text-white"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="stake" className="text-slate-300">
+                  Stake Amount (FLB)
+                </Label>
+                <Input
+                  id="stake"
+                  type="number"
+                  placeholder="1000"
+                  value={newValidator.stake_amount}
+                  onChange={(e) => setNewValidator({ ...newValidator, stake_amount: Number(e.target.value) })}
+                  className="bg-slate-700 border-slate-600 text-white"
+                />
+              </div>
+            </div>
+            <Button onClick={handleCreateValidator} className="bg-green-600 hover:bg-green-700">
+              <Plus className="w-4 h-4 mr-2" />
+              Register Validator
+            </Button>
+          </CardContent>
+        </Card>
+
+        {/* Users List */}
+        <Card className="bg-slate-800 border-slate-700">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-white">
+              <Heart className="w-5 h-5 text-red-400" />
+              Ubuntu Network Members ({users.length})
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {isLoading ? (
+              <div className="text-center py-8">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-500 mx-auto"></div>
+                <p className="text-slate-400 mt-2">Loading members...</p>
+              </div>
+            ) : users.length === 0 ? (
+              <p className="text-slate-400 text-center py-8">No members registered yet</p>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {users.map((user) => (
+                  <Card key={user.id} className="bg-slate-700 border-slate-600">
+                    <CardContent className="p-4">
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <h3 className="font-semibold text-white">{user.name}</h3>
+                          <span
+                            className={`px-2 py-1 rounded text-xs ${
+                              user.role === "healer"
+                                ? "bg-green-600 text-white"
+                                : user.role === "guardian"
+                                  ? "bg-blue-600 text-white"
+                                  : "bg-purple-600 text-white"
+                            }`}
+                          >
+                            {user.role}
+                          </span>
+                        </div>
+                        <p className="text-slate-400 text-sm">{user.location}</p>
+                        <p className="text-slate-400 text-xs font-mono">{user.wallet_address}</p>
+                        <div className="flex items-center justify-between">
+                          <span className="text-orange-400 font-semibold">{user.flb_balance} FLB</span>
+                          {user.verified && <span className="text-green-400 text-xs">✓ Verified</span>}
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Validators List */}
+        <Card className="bg-slate-800 border-slate-700">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-white">
+              <Activity className="w-5 h-5 text-green-400" />
+              Network Validators ({validators.length})
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {validators.length === 0 ? (
+              <p className="text-slate-400 text-center py-8">No validators registered yet</p>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {validators.map((validator) => (
+                  <Card key={validator.id} className="bg-slate-700 border-slate-600">
+                    <CardContent className="p-4">
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <h3 className="font-semibold text-white">{validator.name}</h3>
+                          <span
+                            className={`px-2 py-1 rounded text-xs ${
+                              validator.active ? "bg-green-600 text-white" : "bg-red-600 text-white"
+                            }`}
+                          >
+                            {validator.active ? "Active" : "Inactive"}
+                          </span>
+                        </div>
+                        <p className="text-slate-400 text-xs font-mono">{validator.wallet_address}</p>
+                        <div className="grid grid-cols-2 gap-2 text-sm">
+                          <div>
+                            <span className="text-slate-400">Stake:</span>
+                            <span className="text-orange-400 ml-1">{validator.stake_amount} FLB</span>
+                          </div>
+                          <div>
+                            <span className="text-slate-400">Blocks:</span>
+                            <span className="text-white ml-1">{validator.blocks_validated}</span>
+                          </div>
+                          <div>
+                            <span className="text-slate-400">Uptime:</span>
+                            <span className="text-green-400 ml-1">{validator.uptime_percentage.toFixed(1)}%</span>
+                          </div>
+                          <div>
+                            <Button
+                              size="sm"
+                              onClick={() => sendHeartbeat(validator.wallet_address)}
+                              className="bg-purple-600 hover:bg-purple-700 text-xs"
+                            >
+                              Send Heartbeat
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

app/token-system/page.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { TokenRegistrationFlow } from "@/components/token-registration-flow"
+import { TokenDistributionExplainer } from "@/components/token-distribution-explainer"
+import { Coins } from "lucide-react"
+import dynamic from "next/dynamic"
+
+const ParticleBackground = dynamic(
+  () => import("@/components/particle-background").then((mod) => ({ default: mod.ParticleBackground })),
+  {
+    ssr: false,
+    loading: () => <div className="fixed inset-0 bg-black" />,
+  },
+)
+
+export default function TokenSystemPage() {
+  return (
+    <div className="min-h-screen bg-dusk relative">
+      <ParticleBackground />
+      <div className="relative z-10">
+        {/* Hero Section */}
+        <div className="py-20 text-center">
+          <div className="max-w-4xl mx-auto px-4">
+            <div className="flex justify-center mb-6">
+              <div className="p-4 bg-orange-500/20 rounded-full">
+                <Coins className="w-12 h-12 text-orange-500" />
+              </div>
+            </div>
+            <h1 className="text-4xl md:text-6xl font-bold text-white mb-6">FLB Token System</h1>
+            <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
+              Empowering African healthcare through blockchain technology. Join the revolution that rewards impact and
+              builds sustainable health systems.
+            </p>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="max-w-6xl mx-auto px-4 py-8 space-y-12">
+          <TokenRegistrationFlow />
+          <TokenDistributionExplainer />
+        </div>
+      </div>
+    </div>
+  )
+}