| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CivicVC | Society-First Venture Networks</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'); |
| |
| :root { |
| --primary: #4F46E5; |
| --secondary: #10B981; |
| --dark: #1F2937; |
| --light: #F9FAFB; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: var(--light); |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, rgba(79,70,229,0.1) 0%, rgba(16,185,129,0.1) 100%); |
| } |
| |
| .impact-card: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); |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| .nav-link::after { |
| content: ''; |
| display: block; |
| width: 0; |
| height: 2px; |
| background: var(--primary); |
| transition: width .3s; |
| } |
| |
| .dao-badge { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { |
| box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); |
| } |
| 70% { |
| box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); |
| } |
| 100% { |
| box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); |
| } |
| } |
| |
| .stat-card { |
| transition: all 0.3s ease; |
| } |
| |
| .stat-card:hover { |
| background-color: white; |
| transform: scale(1.05); |
| } |
| </style> |
| </head> |
| <body class="antialiased"> |
| |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> |
| <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 items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-hand-holding-heart text-indigo-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-gray-900">Civic<span class="text-indigo-600">VC</span></span> |
| </div> |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
| <a href="#" class="nav-link 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="nav-link 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">Invest</a> |
| <a href="#" class="nav-link 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">Startups</a> |
| <a href="#" class="nav-link 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">Impact</a> |
| <a href="#" class="nav-link 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">Community</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-wallet mr-2"></i> Connect Wallet |
| </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> |
|
|
| |
| <div class="gradient-bg"> |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <span class="dao-badge inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-emerald-100 text-emerald-800 mb-4"> |
| <i class="fas fa-project-diagram mr-1"></i> DAO-powered |
| </span> |
| <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl"> |
| <span class="block">Invest in the future</span> |
| <span class="block text-indigo-600">your community deserves</span> |
| </h1> |
| <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"> |
| CivicVC pools capital from citizens like you to fund high-impact startups that create jobs, fight climate change, and strengthen local ecosystems. |
| </p> |
| <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8"> |
| <div class="rounded-md shadow"> |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"> |
| Start Investing |
| </a> |
| </div> |
| <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3"> |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> |
| Learn More |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white py-12"> |
| <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">Community Impact</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Redefining investment returns |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| We measure success by more than just financial returns |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4"> |
| <div class="stat-card bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> |
| <i class="fas fa-users text-white text-xl"></i> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <dt class="text-sm font-medium text-gray-500 truncate"> |
| Jobs Created |
| </dt> |
| <dd class="flex items-baseline"> |
| <div class="text-2xl font-semibold text-gray-900"> |
| 2,458+ |
| </div> |
| </dd> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="stat-card bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-emerald-500 rounded-md p-3"> |
| <i class="fas fa-leaf text-white text-xl"></i> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <dt class="text-sm font-medium text-gray-500 truncate"> |
| CO₂ Reduced (tons) |
| </dt> |
| <dd class="flex items-baseline"> |
| <div class="text-2xl font-semibold text-gray-900"> |
| 15,200+ |
| </div> |
| </dd> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="stat-card bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-amber-500 rounded-md p-3"> |
| <i class="fas fa-graduation-cap text-white text-xl"></i> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <dt class="text-sm font-medium text-gray-500 truncate"> |
| Educational Programs |
| </dt> |
| <dd class="flex items-baseline"> |
| <div class="text-2xl font-semibold text-gray-900"> |
| 87 |
| </div> |
| </dd> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="stat-card bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> |
| <i class="fas fa-hand-holding-usd text-white text-xl"></i> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <dt class="text-sm font-medium text-gray-500 truncate"> |
| Community Investors |
| </dt> |
| <dd class="flex items-baseline"> |
| <div class="text-2xl font-semibold text-gray-900"> |
| 12,409 |
| </div> |
| </dd> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="gradient-bg py-16"> |
| <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">Process</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| How CivicVC Works |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| A simple three-step process to create impact together |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> |
| <div class="relative"> |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| <span class="text-xl font-bold">1</span> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Pool Your Capital</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Contribute as little as $100 to join our investment pool. Students, retirees, and everyone in between can participate. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="relative"> |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| <span class="text-xl font-bold">2</span> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Vote on Startups</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Our community evaluates and votes on startups that promise both financial returns and measurable social impact. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="relative"> |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| <span class="text-xl font-bold">3</span> |
| </div> |
| <div class="ml-16"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Track Your Impact</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Receive quarterly reports on both financial performance and the social/environmental impact of your investments. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white py-16"> |
| <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">Current Opportunities</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Featured Startups |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| Community-vetted ventures creating measurable impact |
| </p> |
| </div> |
|
|
| <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> |
| |
| <div class="impact-card group bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
| <div class="relative pb-48 overflow-hidden"> |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Solar panels"> |
| <div class="absolute top-4 right-4 bg-emerald-500 text-white text-xs font-bold px-2 py-1 rounded-full"> |
| <i class="fas fa-leaf mr-1"></i> Climate |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center"> |
| <span class="inline-block px-2 py-1 leading-none bg-indigo-100 text-indigo-800 rounded-full font-semibold uppercase tracking-wide text-xs">Series A</span> |
| <div class="ml-2 text-xs text-gray-600 font-semibold">$1.2M raised / $2M goal</div> |
| </div> |
| <h3 class="mt-2 font-bold text-xl text-gray-900">SunHarvest Energy</h3> |
| <p class="mt-2 text-gray-600">Affordable solar solutions for underserved communities with job training programs.</p> |
| <div class="mt-4 flex items-center"> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 60%"></div> |
| </div> |
| <span class="ml-2 text-sm font-medium text-gray-700">60%</span> |
| </div> |
| <div class="mt-6 flex items-center justify-between"> |
| <span class="flex items-center text-sm text-gray-500"> |
| <i class="fas fa-map-marker-alt mr-1"></i> Detroit, MI |
| </span> |
| <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm rounded-md transition-colors"> |
| View Details |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="impact-card group bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
| <div class="relative pb-48 overflow-hidden"> |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Education"> |
| <div class="absolute top-4 right-4 bg-amber-500 text-white text-xs font-bold px-2 py-1 rounded-full"> |
| <i class="fas fa-graduation-cap mr-1"></i> Education |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center"> |
| <span class="inline-block px-2 py-1 leading-none bg-purple-100 text-purple-800 rounded-full font-semibold uppercase tracking-wide text-xs">Seed</span> |
| <div class="ml-2 text-xs text-gray-600 font-semibold">$450K raised / $750K goal</div> |
| </div> |
| <h3 class="mt-2 font-bold text-xl text-gray-900">CodeRoot Academy</h3> |
| <p class="mt-2 text-gray-600">Coding bootcamp for at-risk youth with guaranteed internships at partner companies.</p> |
| <div class="mt-4 flex items-center"> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 45%"></div> |
| </div> |
| <span class="ml-2 text-sm font-medium text-gray-700">45%</span> |
| </div> |
| <div class="mt-6 flex items-center justify-between"> |
| <span class="flex items-center text-sm text-gray-500"> |
| <i class="fas fa-map-marker-alt mr-1"></i> Atlanta, GA |
| </span> |
| <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm rounded-md transition-colors"> |
| View Details |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="impact-card group bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
| <div class="relative pb-48 overflow-hidden"> |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1575505586569-646b2ca898fc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Agriculture"> |
| <div class="absolute top-4 right-4 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full"> |
| <i class="fas fa-tractor mr-1"></i> Agriculture |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center"> |
| <span class="inline-block px-2 py-1 leading-none bg-yellow-100 text-yellow-800 rounded-full font-semibold uppercase tracking-wide text-xs">Pre-Seed</span> |
| <div class="ml-2 text-xs text-gray-600 font-semibold">$180K raised / $300K goal</div> |
| </div> |
| <h3 class="mt-2 font-bold text-xl text-gray-900">Urban Greens Co-op</h3> |
| <p class="mt-2 text-gray-600">Vertical farming cooperative creating living-wage jobs in food deserts.</p> |
| <div class="mt-4 flex items-center"> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 30%"></div> |
| </div> |
| <span class="ml-2 text-sm font-medium text-gray-700">30%</span> |
| </div> |
| <div class="mt-6 flex items-center justify-between"> |
| <span class="flex items-center text-sm text-gray-500"> |
| <i class="fas fa-map-marker-alt mr-1"></i> Chicago, IL |
| </span> |
| <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm rounded-md transition-colors"> |
| View Details |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-10 text-center"> |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"> |
| Browse All Opportunities |
| <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="gradient-bg py-16"> |
| <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">Community Voices</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| What Our Members Say |
| </p> |
| </div> |
|
|
| <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-3"> |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson"> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Sarah Johnson</div> |
| <div class="text-sm text-gray-500">Teacher, Portland</div> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <p class="text-gray-600 italic">"As a public school teacher, I never thought I could be an investor. CivicVC let me start with just $200 and now I'm helping fund educational tech that my students will benefit from."</p> |
| </div> |
| <div class="mt-4 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> |
|
|
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="James Wilson"> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">James Wilson</div> |
| <div class="text-sm text-gray-500">Retired Engineer, Austin</div> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <p class="text-gray-600 italic">"After retiring, I wanted my savings to make a difference. The climate startups I've invested through CivicVC give me better returns than my old mutual funds while actually helping the planet."</p> |
| </div> |
| <div class="mt-4 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> |
|
|
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Maria Garcia"> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Maria Garcia</div> |
| <div class="text-sm text-gray-500">College Student, Miami</div> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <p class="text-gray-600 italic">"I invest $50 from each paycheck. It's amazing to see how my small contributions add up with others to fund startups that create jobs in my community. This is the future of investing!"</p> |
| </div> |
| <div class="mt-4 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> |
|
|
| |
| <div class="bg-indigo-700"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> |
| <span class="block">Ready to invest in your community?</span> |
| <span class="block text-indigo-200">Join CivicVC today.</span> |
| </h2> |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
| <div class="inline-flex rounded-md shadow"> |
| <a href="#" class="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"> |
| Get Started |
| <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| <div class="ml-3 inline-flex rounded-md shadow"> |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70"> |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <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-300 tracking-wider uppercase">About</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Our Mission</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Team</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Impact Reports</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Invest</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">How It Works</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Startups</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Pricing</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">FAQ</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Resources</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Guides</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Webinars</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Help Center</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Contact Us</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Community</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Events</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Press</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between"> |
| <div class="flex space-x-6 md:order-2"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-linkedin"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-discord"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-medium"></i> |
| </a> |
| </div> |
| <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1"> |
| © 2023 CivicVC. All rights reserved. |
| </p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const impactCards = document.querySelectorAll('.impact-card'); |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.opacity = '1'; |
| entry.target.style.transform = 'translateY(0)'; |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| impactCards.forEach(card => { |
| card.style.opacity = '0'; |
| card.style.transform = 'translateY(20px)'; |
| card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; |
| observer.observe(card); |
| }); |
| |
| |
| const connectWalletBtn = document.querySelector('button.bg-indigo-600'); |
| if (connectWalletBtn) { |
| connectWalletBtn.addEventListener('click', function() { |
| alert('Wallet connection functionality would be implemented here with Web3.js or similar library'); |
| }); |
| } |
| |
| |
| const viewDetailsBtns = document.querySelectorAll('button.bg-indigo-600.text-sm'); |
| viewDetailsBtns.forEach(btn => { |
| btn.addEventListener('click', function() { |
| alert('Startup details modal would open here'); |
| }); |
| }); |
| }); |
| </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/civicvc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
