hridayl/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>Learn | FinFusion</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://unpkg.com/feather-icons"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');12 body {13 font-family: 'Inter', sans-serif;14 }15 .gradient-text {16 background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%);17 -webkit-background-clip: text;18 background-clip: text;19 color: transparent;20 }21 .card-hover:hover {22 transform: translateY(-5px);23 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);24 }25 </style>26</head>27<body class="bg-gray-900 text-white">28 <!-- Navigation -->29 <nav class="bg-gray-800 bg-opacity-80 backdrop-blur-md fixed w-full z-10">30 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">31 <div class="flex items-center justify-between h-16">32 <div class="flex items-center">33 <div class="flex-shrink-0 flex items-center">34 <i data-feather="dollar-sign" class="text-blue-400 h-8 w-8"></i>35 <span class="ml-2 text-xl font-bold gradient-text">FinFusion</span>36 </div>37 <div class="hidden md:block">38 <div class="ml-10 flex items-baseline space-x-4">39 <a href="dashboard.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Dashboard</a>40 <a href="invest.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Invest</a>41 <a href="payments.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Payments</a>42 <a href="learn.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium bg-blue-600 text-white">Learn</a>43 <a href="community.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Community</a>44 </div>45 </div>46 </div>47 <div class="hidden md:block">48 <div class="ml-4 flex items-center md:ml-6">49 <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">50 <i data-feather="bell"></i>51 </button>52 <div class="ml-3 relative">53 <div>54 <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none" id="user-menu">55 <img class="h-8 w-8 rounded-full" src="http://static.photos/finance/200x200/42" alt="">56 </button>57 </div>58 </div>59 </div>60 </div>61 <div class="-mr-2 flex md:hidden">62 <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">63 <i data-feather="menu"></i>64 </button>65 </div>66 </div>67 </div>68 </nav>69 70 <!-- Main Content -->71 <div class="pt-24 pb-10 px-4 sm:px-6 lg:px-8">72 <div class="max-w-7xl mx-auto">73 <div class="flex justify-between items-center mb-8">74 <h1 class="text-3xl font-bold">Learn & Earn</h1>75 <div class="flex items-center space-x-2">76 <div class="p-2 bg-yellow-500 bg-opacity-20 rounded-full">77 <i data-feather="award" class="text-yellow-400"></i>78 </div>79 <span class="font-bold">1,250 Points</span>80 </div>81 </div>82 83 <!-- Categories -->84 <div class="mb-10">85 <h3 class="text-xl font-semibold mb-6">Categories</h3>86 <div class="grid grid-cols-2 md:grid-cols-4 gap-4">87 <button class="bg-gray-800 rounded-lg p-4 flex flex-col items-center card-hover">88 <div class="p-3 rounded-full bg-blue-500 bg-opacity-20 mb-2">89 <i data-feather="trending-up" class="text-blue-400"></i>90 </div>91 <span class="text-sm">Investing</span>92 </button>93 <button class="bg-gray-800 rounded-lg p-4 flex flex-col items-center card-hover">94 <div class="p-3 rounded-full bg-purple-500 bg-opacity-20 mb-2">95 <i data-feather="dollar-sign" class="text-purple-400"></i>96 </div>97 <span class="text-sm">Budgeting</span>98 </button>99 <button class="bg-gray-800 rounded-lg p-4 flex flex-col items-center card-hover">100 <div class="p-3 rounded-full bg-green-500 bg-opacity-20 mb-2">101 <i data-feather="credit-card" class="text-green-400"></i>102 </div>103 <span class="text-sm">Credit</span>104 </button>105 <button class="bg-gray-800 rounded-lg p-4 flex flex-col items-center card-hover">106 <div class="p-3 rounded-full bg-yellow-500 bg-opacity-20 mb-2">107 <i data-feather="home" class="text-yellow-400"></i>108 </div>109 <span class="text-sm">Real Estate</span>110 </button>111 </div>112 </div>113 114 <!-- Popular Courses -->115 <div class="mb-10">116 <div class="flex justify-between items-center mb-6">117 <h3 class="text-xl font-semibold">Popular Courses</h3>118 <button class="text-blue-400 hover:text-blue-300 text-sm">View All</button>119 </div>120 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">121 <!-- Course 1 -->122 <div class="bg-gray-800 rounded-lg overflow-hidden card-hover">123 <img src="http://static.photos/finance/640x360/5" alt="Stock Market" class="w-full h-40 object-cover">124 <div class="p-6">125 <div class="flex justify-between items-start">126 <div>127 <h4 class="text-lg font-semibold">Stock Market Basics</h4>128 <p class="text-gray-400 text-sm mt-1">Beginner • 2h 15m</p>129 </div>130 <span class="px-2 py-1 bg-blue-900 bg-opacity-50 text-blue-400 text-xs rounded-full">50 PTS</span>131 </div>132 <p class="text-gray-300 text-sm mt-3">133 Learn the fundamentals of stock market investing and how to build your first portfolio.134 </p>135 <div class="flex justify-between items-center mt-4">136 <div class="flex items-center">137 <img src="http://static.photos/people/200x200/6" alt="Instructor" class="h-6 w-6 rounded-full">138 <span class="ml-2 text-sm">John Smith</span>139 </div>140 <button class="px-3 py-1 bg-blue-600 rounded-md text-sm hover:bg-blue-700">Start</button>141 </div>142 </div>143 </div>144 145 <!-- Course 2 -->146 <div class="bg-gray-800 rounded-lg overflow-hidden card-hover">147 <img src="http://static.photos/finance/640x360/7" alt="Crypto" class="w-full h-40 object-cover">148 <div class="p-6">149 <div class="flex justify-between items-start">150 <div>151 <h4 class="text-lg font-semibold">Crypto 101</h4>152 <p class="text-gray-400 text-sm mt-1">Beginner • 1h 30m</p>153 </div>154 <span class="px-2 py-1 bg-purple-900 bg-opacity-50 text-purple-400 text-xs rounded-full">40 PTS</span>155 </div>156 <p class="text-gray-300 text-sm mt-3">157 Understand blockchain technology and how to safely invest in cryptocurrencies.158 </p>159 <div class="flex justify-between items-center mt-4">160 <div class="flex items-center">161 <img src="http://static.photos/people/200x200/8" alt="Instructor" class="h-6 w-6 rounded-full">162 <span class="ml-2 text-sm">Sarah Lee</span>163 </div>164 <button class="px-3 py-1 bg-blue-600 rounded-md text-sm hover:bg-blue-700">Start</button>165 </div>166 </div>167 </div>168 169 <!-- Course 3 -->170 <div class="bg-gray-800 rounded-lg overflow-hidden card-hover">171 <img src="http://static.photos/finance/640x360/9" alt="Budgeting" class="w-full h-40 object-cover">172 <div class="p-6">173 <div class="flex justify-between items-start">174 <div>175 <h4 class="text-lg font-semibold">Smart Budgeting</h4>176 <p class="text-gray-400 text-sm mt-1">Beginner • 1h 45m</p>177 </div>178 <span class="px-2 py-1 bg-green-900 bg-opacity-50 text-green-400 text-xs rounded-full">35 PTS</span>179 </div>180 <p class="text-gray-300 text-sm mt-3">181 Master the art of budgeting and take control of your personal finances.182 </p>183 <div class="flex justify-between items-center mt-4">184 <div class="flex items-center">185 <img src="http://static.photos/people/200x200/10" alt="Instructor" class="h-6 w-6 rounded-full">186 <span class="ml-2 text-sm">Michael Chen</span>187 </div>188 <button class="px-3 py-1 bg-blue-600 rounded-md text-sm hover:bg-blue-700">Start</button>189 </div>190 </div>191 </div>192 </div>193 </div>194 195 <!-- Learning Paths -->196 <div class="mb-10">197 <div class="flex justify-between items-center mb-6">198 <h3 class="text-xl font-semibold">Learning Paths</h3>199 <button class="text-blue-400 hover:text-blue-300 text-sm">View All</button>200 </div>201 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">202 <!-- Path 1 -->203 <div class="bg-gray-800 rounded-lg p-6 card-hover">204 <div class="flex items-start">205 <div class="p-3 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 mr-4">206 <i data-feather="award" class="text-white"></i>207 </div>208 <div>209 <h4 class="text-lg font-semibold">Beginner Investor</h4>210 <p class="text-gray-300 text-sm mt-2">211 Complete this path to learn the fundamentals of investing and earn 200 points.212 </p>213 <div class="mt-4">214 <div class="flex justify-between text-sm mb-1">215 <span>Progress</span>216 <span>2/5 courses</span>217 </div>218 <div class="w-full bg-gray-700 rounded-full h-2">219 <div class="bg-blue-500 h-2 rounded-full" style="width: 40%"></div>220 </div>221 </div>222 <button class="mt-4 w-full py-2 bg-blue-600 rounded-md hover:bg-blue-700">Continue</button>223 </div>224 </div>225 </div>226 227 <!-- Path 2 -->228 <div class="bg-gray-800 rounded-lg p-6 card-hover">229 <div class="flex items-start">230 <div class="p-3 rounded-full bg-gradient-to-r from-green-500 to-blue-600 mr-4">231 <i data-feather="dollar-sign" class="text-white"></i>232 </div>233 <div>234 <h4 class="text-lg font-semibold">Financial Freedom</h4>235 <p class="text-gray-300 text-sm mt-2">236 Learn how to manage your money and build wealth over time. Earn 300 points.237 </p>238 <div class="mt-4">239 <div class="flex justify-between text-sm mb-1">240 <span>Progress</span>241 <span>1/6 courses</span>242 </div>243 <div class="w-full bg-gray-700 rounded-full h-2">244 <div class="bg-green-500 h-2 rounded-full" style="width: 16%"></div>245 </div>246 </div>247 <button class="mt-4 w-full py-2 bg-blue-600 rounded-md hover:bg-blue-700">Continue</button>248 </div>249 </div>250 </div>251 </div>252 </div>253 254 <!-- Community Discussions -->255 <div>256 <div class="flex justify-between items-center mb-6">257 <h3 class="text-xl font-semibold">Community Discussions</h3>258 <button class="text-blue-400 hover:text-blue-300 text-sm">View All</button>259 </div>260 <div class="bg-gray-800 rounded-lg p-6 card-hover">261 <div class="space-y-6">262 <!-- Discussion 1 -->263 <div>264 <div class="flex items-start">265 <img src="http://static.photos/people/200x200/11" alt="User" class="h-10 w-10 rounded-full">266 <div class="ml-4">267 <div class="flex justify-between">268 <h4 class="font-medium">What's the best way to start investing with $1,000?</h4>269 <span class="text-xs text-gray-400 ml-2">3h ago</span>270 </div>271 <p class="text-sm text-gray-300 mt-1">272 I'm new to investing and want to get started with $1,000. Any advice on where to begin?273 </p>274 <div class="flex mt-2">275 <button class="flex items-center text-sm text-gray-400 hover:text-white mr-4">276 <i data-feather="message-square" class="h-4 w-4 mr-1"></i>277 <span>24</span>278 </button>279 <button class="flex items-center text-sm text-gray-400 hover:text-white">280 <i data-feather="thumbs-up" class="h-4 w-4 mr-1"></i>281 <span>42</span>282 </button>283 </div>284 </div>285 </div>286 </div>287 288 <!-- Discussion 2 -->289 <div>290 <div class="flex items-start">291 <img src="http://static.photos/people/200x200/12" alt="User" class="h-10 w-10 rounded-full">292 <div class="ml-4">293 <div class="flex justify-between">294 <h4 class="font-medium">How do you track your expenses effectively?</h4>295 <span class="text-xs text-gray-400 ml-2">1d ago</span>296 </div>297 <p class="text-sm text-gray-300 mt-1">298 Looking for recommendations on expense tracking apps or methods that have worked for you.299 </p>300 <div class="flex mt-2">301 <button class="flex items-center text-sm text-gray-400 hover:text-white mr-4">302 <i data-feather="message-square" class="h-4 w-4 mr-1"></i>303 <span>18</span>304 </button>305 <button class="flex items-center text-sm text-gray-400 hover:text-white">306 <i data-feather="thumbs-up" class="h-4 w-4 mr-1"></i>307 <span>36</span>308 </button>309 </div>310 </div>311 </div>312 </div>313 </div>314 <div class="mt-6">315 <div class="flex">316 <img src="http://static.photos/people/200x200/42" alt="User" class="h-10 w-10 rounded-full">317 <div class="ml-4 flex-1">318 <textarea class="w-full bg-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500" placeholder="Ask a question or share your thoughts..."></textarea>319 <div class="flex justify-between mt-2">320 <div class="flex space-x-2">321 <button class="p-1 text-gray-400 hover:text-white">322 <i data-feather="image"></i>323 </button>324 <button class="p-1 text-gray-400 hover:text-white">325 <i data-feather="link"></i>326 </button>327 </div>328 <button class="px-3 py-1 bg-blue-600 rounded-md text-sm hover:bg-blue-700">Post</button>329 </div>330 </div>331 </div>332 </div>333 </div>334 </div>335 </div>336 </div>337 338 <script>339 feather.replace();340 </script>341</body>342</html>