Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CommunityOS - Decentralized Digital Governance</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-network-wired text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">CommunityOS</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Governance</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Resources</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> | |
| <i class="fas fa-user-plus mr-2"></i> Join Community | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> | |
| Empower Your Community | |
| </h1> | |
| <p class="mt-6 max-w-2xl mx-auto text-xl text-indigo-100"> | |
| A decentralized governance platform enabling communities to self-organize, make decisions, and allocate resources democratically. | |
| </p> | |
| <div class="mt-10 flex justify-center space-x-4"> | |
| <a href="#" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-indigo-50 md:py-4 md:text-lg md:px-10"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo | |
| </a> | |
| <a href="#" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-800 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> | |
| <i class="fas fa-book mr-2"></i> Learn More | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Decentralized Governance</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| The Future of Civic Engagement | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| CommunityOS transforms how communities govern themselves through transparent, participatory democracy. | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Feature 1 --> | |
| <div class="card-hover bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-vote-yea text-xl"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Participatory Voting</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Secure, transparent voting on community issues with blockchain-backed verification. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="card-hover bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-project-diagram text-xl"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Project Funding</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Community-driven budgeting and resource allocation for local initiatives. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="card-hover bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-comments-dollar text-xl"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Value Flow</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Micro-contributions fund local needs while sustaining the platform's growth. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="card-hover bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-users-cog text-xl"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Community Moderation</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Distributed moderation system where active participants earn governance rights. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="card-hover bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-shield-alt text-xl"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Transparent Governance</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| All decisions and fund allocations are recorded immutably on the blockchain. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="card-hover bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-network-wired text-xl"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Decentralized Infrastructure</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Powered by the Palo Alto server network for resilience and local control. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- How It Works Section --> | |
| <div class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| The CommunityOS Governance Model | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| A revolutionary approach to civic participation and local decision-making. | |
| </p> | |
| </div> | |
| <div class="mt-16"> | |
| <div class="lg:grid lg:grid-cols-3 lg:gap-8"> | |
| <!-- Step 1 --> | |
| <div class="mb-12 lg:mb-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mx-auto"> | |
| <span class="text-xl font-bold">1</span> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900 text-center">Community Formation</h3> | |
| <p class="mt-2 text-base text-gray-500 text-center"> | |
| Local citizens form digital communities around shared interests or geographic areas. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="mb-12 lg:mb-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mx-auto"> | |
| <span class="text-xl font-bold">2</span> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900 text-center">Proposal Submission</h3> | |
| <p class="mt-2 text-base text-gray-500 text-center"> | |
| Members submit proposals for community improvements, projects, or policy changes. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="mb-12 lg:mb-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mx-auto"> | |
| <span class="text-xl font-bold">3</span> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900 text-center">Democratic Decision</h3> | |
| <p class="mt-2 text-base text-gray-500 text-center"> | |
| The community votes on proposals using quadratic voting for fair representation. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:grid lg:grid-cols-3 lg:gap-8 mt-12"> | |
| <!-- Step 4 --> | |
| <div class="mb-12 lg:mb-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mx-auto"> | |
| <span class="text-xl font-bold">4</span> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900 text-center">Resource Allocation</h3> | |
| <p class="mt-2 text-base text-gray-500 text-center"> | |
| Approved proposals receive funding from the community treasury. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 5 --> | |
| <div class="mb-12 lg:mb-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mx-auto"> | |
| <span class="text-xl font-bold">5</span> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900 text-center">Implementation</h3> | |
| <p class="mt-2 text-base text-gray-500 text-center"> | |
| Community members or selected teams execute approved projects. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 6 --> | |
| <div class="mb-12 lg:mb-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mx-auto"> | |
| <span class="text-xl font-bold">6</span> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900 text-center">Impact Assessment</h3> | |
| <p class="mt-2 text-base text-gray-500 text-center"> | |
| The community evaluates outcomes and iterates on the process. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Active Proposals Section --> | |
| <div class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Active Community Proposals | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Participate in shaping your community's future | |
| </p> | |
| </div> | |
| <div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Proposal 1 --> | |
| <div class="card-hover bg-white rounded-lg shadow-md overflow-hidden border border-gray-200"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-full"> | |
| <i class="fas fa-tree text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Urban Green Spaces</h3> | |
| <p class="mt-1 text-sm text-gray-500">Proposed by Sarah J.</p> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-600"> | |
| Allocate $15,000 to develop three new pocket parks in under-served neighborhoods. | |
| </p> | |
| <div class="mt-6"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>For: 68%</span> | |
| <span>Against: 32%</span> | |
| </div> | |
| <div class="mt-2 w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 68%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Ends in 2 days</span> | |
| <button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700"> | |
| Vote Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Proposal 2 --> | |
| <div class="card-hover bg-white rounded-lg shadow-md overflow-hidden border border-gray-200"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-full"> | |
| <i class="fas fa-bus text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Extended Bus Service</h3> | |
| <p class="mt-1 text-sm text-gray-500">Proposed by Transit Collective</p> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-600"> | |
| Fund extended weekend bus service on Route 42 for 6-month trial period ($8,500). | |
| </p> | |
| <div class="mt-6"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>For: 52%</span> | |
| <span>Against: 48%</span> | |
| </div> | |
| <div class="mt-2 w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 52%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Ends in 5 days</span> | |
| <button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700"> | |
| Vote Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Proposal 3 --> | |
| <div class="card-hover bg-white rounded-lg shadow-md overflow-hidden border border-gray-200"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-full"> | |
| <i class="fas fa-laptop-code text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Digital Literacy Program</h3> | |
| <p class="mt-1 text-sm text-gray-500">Proposed by Tech for All</p> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-600"> | |
| $12,000 for free digital skills workshops at community centers for seniors. | |
| </p> | |
| <div class="mt-6"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>For: 81%</span> | |
| <span>Against: 19%</span> | |
| </div> | |
| <div class="mt-2 w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 81%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Ends tomorrow</span> | |
| <button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700"> | |
| Vote Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center justify-center"> | |
| View all active proposals | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Community Stats --> | |
| <div class="gradient-bg text-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold sm:text-4xl"> | |
| Community Impact by the Numbers | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-indigo-100 mx-auto"> | |
| See how decentralized governance is transforming communities worldwide | |
| </p> | |
| </div> | |
| <div class="mt-16 grid grid-cols-2 gap-8 md:grid-cols-4"> | |
| <!-- Stat 1 --> | |
| <div class="text-center"> | |
| <div class="text-4xl font-extrabold">142</div> | |
| <div class="mt-2 text-sm font-medium text-indigo-200">ACTIVE COMMUNITIES</div> | |
| </div> | |
| <!-- Stat 2 --> | |
| <div class="text-center"> | |
| <div class="text-4xl font-extrabold">3.2K</div> | |
| <div class="mt-2 text-sm font-medium text-indigo-200">PROPOSALS VOTED ON</div> | |
| </div> | |
| <!-- Stat 3 --> | |
| <div class="text-center"> | |
| <div class="text-4xl font-extrabold">$1.8M</div> | |
| <div class="mt-2 text-sm font-medium text-indigo-200">COMMUNITY FUNDS ALLOCATED</div> | |
| </div> | |
| <!-- Stat 4 --> | |
| <div class="text-center"> | |
| <div class="text-4xl font-extrabold">89%</div> | |
| <div class="mt-2 text-sm font-medium text-indigo-200">SATISFACTION RATE</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Voices from the Community | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Hear what participants say about decentralized governance | |
| </p> | |
| </div> | |
| <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="card-hover bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Maria Rodriguez</h3> | |
| <p class="text-indigo-600">Community Leader, Barrio Nuevo</p> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-600"> | |
| "For the first time, our neighborhood has real control over local improvements. We funded a playground that the city had ignored for years." | |
| </p> | |
| <div class="mt-6 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="card-hover bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">James Wilson</h3> | |
| <p class="text-indigo-600">Small Business Owner</p> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-600"> | |
| "The transparency of CommunityOS gave me confidence to contribute to local projects. I can see exactly where my money goes and how it benefits everyone." | |
| </p> | |
| <div class="mt-6 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="card-hover bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Aisha Johnson</h3> | |
| <p class="text-indigo-600">Youth Program Coordinator</p> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-600"> | |
| "Our after-school coding program was just an idea until the community voted to fund it. Now we're teaching 50 kids valuable tech skills." | |
| </p> | |
| <div class="mt-6 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-indigo-700"> | |
| <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="block">Ready to transform your community?</span> | |
| <span class="block">Start your decentralized governance journey today.</span> | |
| </h2> | |
| <p class="mt-4 text-lg leading-6 text-indigo-200"> | |
| Join thousands of communities taking control of their future through participatory democracy. | |
| </p> | |
| <a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto"> | |
| <i class="fas fa-rocket mr-2"></i> Launch Your Community | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Community Governance</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Participatory Budgeting</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Local Decision Making</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Case Studies</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Governance Models</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Team</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3> | |
| <div class="mt-4 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-gray-300 text-sm"> | |
| Powered by the Palo Alto server network | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8"> | |
| <p class="text-base text-gray-400 text-center"> | |
| © 2023 CommunityOS. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for the voting buttons | |
| document.querySelectorAll('button').forEach(button => { | |
| if (button.textContent.includes('Vote Now')) { | |
| button.addEventListener('mouseenter', () => { | |
| button.classList.add('pulse'); | |
| }); | |
| button.addEventListener('mouseleave', () => { | |
| button.classList.remove('pulse'); | |
| }); | |
| } | |
| }); | |
| // Mobile menu toggle functionality would go here | |
| // This is just a placeholder for the actual implementation | |
| const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| console.log('Mobile menu toggled - implement this functionality'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/communityos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |