CptlSaint/undefined
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>All Projects - AfroCapital Bridge</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10</head>11<body class="bg-gray-50">12 <!-- Navbar (same as index.html) -->13 <nav class="bg-white shadow-sm">14 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">15 <div class="flex justify-between h-16">16 <div class="flex items-center">17 <div class="flex-shrink-0 flex items-center">18 <i data-feather="globe" class="h-8 w-8 text-blue-600"></i>19 <span class="ml-2 text-xl font-bold text-blue-700">AfroCapital Bridge</span>20 </div>21 </div>22 <div class="hidden sm:ml-6 sm:flex sm:space-x-8">23 <a href="index.html" 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">Home</a>24 <a href="projects.html" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Invest</a>25 <a href="projects.html" 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>26 <a href="about.html" 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">About</a>27 <a href="contact.html" 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">Contact</a>28 </div>29 <div class="hidden sm:ml-6 sm:flex sm:items-center">30 <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Sign In</button>31 </div>32 <div class="-mr-2 flex items-center sm:hidden">33 <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-blue-500" aria-controls="mobile-menu" aria-expanded="false">34 <span class="sr-only">Open main menu</span>35 <i data-feather="menu" class="block h-6 w-6"></i>36 </button>37 </div>38 </div>39 </div>40 </nav>41 42 <!-- Project Filters -->43 <div class="bg-white py-8">44 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">45 <div class="flex flex-col md:flex-row md:items-center md:justify-between">46 <h1 class="text-2xl font-bold text-gray-900">All Investment Opportunities</h1>47 <div class="mt-4 md:mt-0 flex space-x-4">48 <select class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">49 <option>All Sectors</option>50 <option>Renewable Energy</option>51 <option>Agribusiness</option>52 <option>Affordable Housing</option>53 <option>Healthcare</option>54 <option>Education</option>55 </select>56 <select class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">57 <option>All Risk Levels</option>58 <option>Low Risk</option>59 <option>Medium Risk</option>60 <option>High Risk</option>61 </select>62 <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">63 Apply Filters64 </button>65 </div>66 </div>67 </div>68 </div>69 70 <!-- Project Grid -->71 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">72 <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">73 <!-- Repeat this block for each project -->74 <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out hover:shadow-lg">75 <div class="relative pb-48 overflow-hidden">76 <img class="absolute inset-0 h-full w-full object-cover" src="http://static.photos/technology/640x360/10" alt="Project image">77 <div class="absolute top-4 right-4">78 <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">79 Renewable Energy80 </span>81 </div>82 </div>83 <div class="p-6">84 <div class="flex items-center">85 <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">Medium Risk</span>86 <span class="ml-2 text-sm text-gray-500">Kenya</span>87 </div>88 <h3 class="mt-3 text-xl font-semibold text-gray-900">89 Nairobi Solar Farm Expansion90 </h3>91 <p class="mt-3 text-base text-gray-500">92 5MW solar farm expansion serving 10,000 households with clean energy.93 </p>94 <div class="mt-6">95 <div class="flex justify-between text-sm text-gray-500">96 <span>Target: $2,000,000</span>97 <span>65% funded</span>98 </div>99 <div class="mt-2 w-full bg-gray-200 rounded-full h-2.5">100 <div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div>101 </div>102 </div>103 <div class="mt-6 flex justify-between items-center">104 <span class="text-lg font-semibold text-gray-900">14% IRR</span>105 <a href="project-detail.html" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">106 View Details107 </a>108 </div>109 </div>110 </div>111 <!-- End project block -->112 113 <!-- Additional 5 more project blocks would go here with different data -->114 115 </div>116 117 <!-- Pagination -->118 <div class="mt-12 flex justify-center">119 <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">120 <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">121 <span class="sr-only">Previous</span>122 <i data-feather="chevron-left" class="h-5 w-5"></i>123 </a>124 <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">125 1126 </a>127 <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">128 2129 </a>130 <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">131 3132 </a>133 <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">134 <span class="sr-only">Next</span>135 <i data-feather="chevron-right" class="h-5 w-5"></i>136 </a>137 </nav>138 </div>139 </div>140 141 <!-- Footer (same as index.html) -->142 <footer class="bg-gray-800">143 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">144 <div class="grid grid-cols-2 gap-8 md:grid-cols-4">145 <div>146 <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Invest</h3>147 <ul class="mt-4 space-y-4">148 <li><a href="projects.html" class="text-base text-gray-400 hover:text-white">All Projects</a></li>149 <li><a href="#" class="text-base text-gray-400 hover:text-white">Featured</a></li>150 <li><a href="#" class="text-base text-gray-400 hover:text-white">New Listings</a></li>151 <li><a href="#" class="text-base text-gray-400 hover:text-white">Nearly Funded</a></li>152 </ul>153 </div>154 <div>155 <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Resources</h3>156 <ul class="mt-4 space-y-4">157 <li><a href="#" class="text-base text-gray-400 hover:text-white">How It Works</a></li>158 <li><a href="#" class="text-base text-gray-400 hover:text-white">Risk Management</a></li>159 <li><a href="#" class="text-base text-gray-400 hover:text-white">ROI Calculator</a></li>160 <li><a href="#" class="text-base text-gray-400 hover:text-white">FAQ</a></li>161 </ul>162 </div>163 <div>164 <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3>165 <ul class="mt-4 space-y-4">166 <li><a href="about.html" class="text-base text-gray-400 hover:text-white">About Us</a></li>167 <li><a href="#" class="text-base text-gray-400 hover:text-white">Our Team</a></li>168 <li><a href="#" class="text-base text-gray-400 hover:text-white">Partners</a></li>169 <li><a href="contact.html" class="text-base text-gray-400 hover:text-white">Contact</a></li>170 </ul>171 </div>172 <div>173 <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3>174 <ul class="mt-4 space-y-4">175 <li class="flex">176 <a href="#" class="text-gray-400 hover:text-white">177 <i data-feather="facebook" class="h-6 w-6"></i>178 </a>179 <a href="#" class="ml-6 text-gray-400 hover:text-white">180 <i data-feather="twitter" class="h-6 w-6"></i>181 </a>182 <a href="#" class="ml-6 text-gray-400 hover:text-white">183 <i data-feather="linkedin" class="h-6 w-6"></i>184 </a>185 <a href="#" class="ml-6 text-gray-400 hover:text-white">186 <i data-feather="instagram" class="h-6 w-6"></i>187 </a>188 </li>189 <li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li>190 <li><a href="#" class="text-base text-gray-400 hover:text-white">Newsletter</a></li>191 <li><a href="#" class="text-base text-gray-400 hover:text-white">Events</a></li>192 </ul>193 </div>194 </div>195 <div class="mt-12 border-t border-gray-700 pt-8">196 <p class="text-base text-gray-400 text-center">197 © 2023 AfroCapital Bridge. All rights reserved.198 </p>199 </div>200 </div>201 </footer>202 203 <script>204 feather.replace();205 </script>206</body>207</html>