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>Community | 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 text-gray-300 hover:text-white">Learn</a>43 <a href="community.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium bg-blue-600 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">Finance Community</h1>75 <button class="px-4 py-2 bg-blue-600 rounded-md hover:bg-blue-700">+ New Post</button>76 </div>77 78 <!-- Featured Discussions -->79 <div class="mb-10">80 <h3 class="text-xl font-semibold mb-6">Featured Discussions</h3>81 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">82 <!-- Discussion 1 -->83 <div class="bg-gray-800 rounded-lg p-6 card-hover">84 <div class="flex items-center mb-4">85 <img src="http://static.photos/people/200x200/1" alt="User" class="h-10 w-10 rounded-full">86 <div class="ml-3">87 <p class="font-medium">Sarah Johnson</p>88 <p class="text-xs text-gray-400">Investing Expert • 5y</p>89 </div>90 </div>91 <h4 class="text-lg font-semibold mb-2">Market Outlook for Q2 2023</h4>92 <p class="text-gray-300 text-sm mb-4">93 Sharing my analysis on which sectors are poised for growth this quarter and potential risks to watch out for.94 </p>95 <div class="flex justify-between text-sm">96 <div class="flex space-x-4">97 <span class="flex items-center text-gray-400">98 <i data-feather="message-square" class="h-4 w-4 mr-1"></i>99 <span>42</span>100 </span>101 <span class="flex items-center text-gray-400">102 <i data-feather="thumbs-up" class="h-4 w-4 mr-1"></i>103 <span>128</span>104 </span>105 </div>106 <span class="text-gray-400">3d ago</span>107 </div>108 </div>109 110 <!-- Discussion 2 -->111 <div class="bg-gray-800 rounded-lg p-6 card-hover">112 <div class="flex items-center mb-4">113 <img src="http://static.photos/people/200x200/2" alt="User" class="h-10 w-10 rounded-full">114 <div class="ml-3">115 <p class="font-medium">Michael Chen</p>116 <p class="text-xs text-gray-400">Financial Planner • 8y</p>117 </div>118 </div>119 <h4 class="text-lg font-semibold mb-2">Retirement Planning Guide</h4>120 <p class="text-gray-300 text-sm mb-4">121 Step-by-step guide to setting up your retirement plan regardless of your current age or income level.122 </p>123 <div class="flex justify-between text-sm">124 <div class="flex space-x-4">125 <span class="flex items-center text-gray-400">126 <i data-feather="message-square" class="h-4 w-4 mr-1"></i>127 <span>36</span>128 </span>129 <span class="flex items-center text-gray-400">130 <i data-feather="thumbs-up" class="h-4 w-4 mr-1"></i>131 <span>94</span>132 </span>133 </div>134 <span class="text-gray-400">1w ago</span>135 </div>136 </div>137 138 <!-- Discussion 3 -->139 <div class="bg-gray-800 rounded-lg p-6 card-hover">140 <div class="flex items-center mb-4">141 <img src="http://static.photos/people/200x200/3" alt="User" class="h-10 w-10 rounded-full">142 <div class="ml-3">143 <p class="font-medium">David Wilson</p>144 <p class="text-xs text-gray-400">Day Trader • 3y</p>145 </div>146 </div>147 <h4 class="text-lg font-semibold mb-2">Crypto Market Analysis</h4>148 <p class="text-gray-300 text-sm mb-4">149 Recent trends in the crypto market and what indicators I'm watching for potential entry points.150 </p>151 <div class="flex justify-between text-sm">152 <div class="flex space-x-4">153 <span class="flex items-center text-gray-400">154 <i data-feather="message-square" class="h-4 w-4 mr-1"></i>155 <span>58</span>156 </span>157 <span class="flex items-center text-gray-400">158 <i data-feather="thumbs-up" class="h-4 w-4 mr-1"></i>159 <span>142</span>160 </span>161 </div>162 <span class="text-gray-400">2d ago</span>163 </div>164 </div>165 </div>166 </div>167 168 <!-- Latest Discussions -->169 <div class="mb-10">170 <div class="flex justify-between items-center mb-6">171 <h3 class="text-xl font-semibold">Latest Discussions</h3>172 <div class="flex space-x-2">173 <button class="px-3 py-1 bg-gray-700 rounded-md text-sm hover:bg-gray-600">Popular</button>174 <button class="px-3 py-1 bg-blue-600 rounded-md text-sm hover:bg-blue-700">Newest</button>175 </div>176 </div>177 <div class="bg-gray-800 rounded-lg p-6 card-hover">178 <div class="space-y-6">179 <!-- Discussion 1 -->180 <div class="pb-6 border-b border-gray-700">181 <div class="flex items-start">182 <img src="http://static.photos/people/200x200/4" alt="User" class="h-10 w-10 rounded-full">183 <div class="ml-4 flex-1">184 <div class="flex justify-between">185 <div>186 <h4 class="font-medium">Best index funds for long-term holding?</h4>187 <p class="text-sm text-gray-400 mt-1">Posted by <span class="text-blue-400">Emma Rodriguez</span> • Investing Enthusiast • 1y</p>188 </div>189 <span class="text-xs text-gray-400 ml-2">4h ago</span>190 </div>191 <p class="text-gray-300 text-sm mt-2">192 I'm looking to invest in index funds for retirement. Which ones have the best long-term track record with reasonable fees?193 </p>194 <div class="flex mt-3">195 <button class="flex items-center text-sm text-gray-400 hover:text-white mr-4">196 <i data-feather="message-square" class="h-4 w-4 mr-1"></i>197 <span>18</span>198 </button>199 <button class="flex items-center text-sm text-gray-400 hover:text-white mr-4">200 <i data-feather="thumbs-up" class="h-4 w-4 mr-1"></i>201 <span>42</span>202 </button>203 <button class="flex items-center text-sm text-blue-400 hover:text-blue-300">204 <i data-feather="bookmark" class="h-4 w-4 mr-1"></i>205 <span>Save</span>206 </button>207 </div>208 </div>209 </div>210 </div>211 212 <!-- Discussion 2 -->213 <div class="pb-6 border-b border-gray-700">214 <div class="flex items-start">215 <img src="http://static.photos/people/200x200/5" alt="User" class="h-10 w-10 rounded-full">216 <div class="ml-4 flex-1">217 <div class="flex justify-between">218 <div>219 <h4 class="font-medium">How much emergency fund is enough?</h4>220 <p class="text-sm text-gray-400 mt-1">Posted by <span class="text-blue-400">Robert Taylor</span> • Budgeting Beginner • 6m</p>221 </div>222 <span class="text-xs text-gray-400 ml-2">1d ago</span>223 </div>224 <p class="text-gray-300 text-sm mt-2">225 I've heard different advice about emergency funds - 3 months, 6 months, even a year of expenses. What's realistic?226 </p>227 <div class="flex mt-3">228 <button class="flex items-center text-sm text-gray-400 hover:text-white mr-4">229 <i data-feather="message-square" class="h-4 w-4 mr-1"></i>230 <span>24</span>231 </button>232 <button class="flex items-center text-sm text-gray-400 hover:text-white mr-4">233 <i data-feather="thumbs-up" class="h-4 w-4 mr-1"></i>234 <span>37</span>235 </button>236 <button class="flex items-center text-sm text-blue-400 hover:text-blue-300">237 <i data-feather="bookmark" class="h-4 w-4 mr-1"></i>238 <span>Save</span>239 </button>240 </div>241 </div>242 </div>243 </div>244 245 <!-- Discussion 3 -->246 <div>247 <div class="flex items-start">248 <img src="http://static.photos/people/200x200/6" alt="User" class="h-10 w-10 rounded-full">249 <div class="ml-4 flex-1">250 <div class="flex justify-between">251 <div>252 <h4 class="font-medium">First-time home buyer tips</h4>253 <p class="text-sm text-gray-400 mt-1">Posted by <span class="text-blue-400">Lisa Wong</span> • Real Estate Investor • 4y</p>254 </div>255 <span class="text-xs text-gray-400 ml-2">2d ago</span>256 </div>257 <p class="text-gray-300 text-sm mt-2">258 Sharing my experience buying my first home last year - what I wish I knew earlier and mistakes to avoid.259 </p>260 <div class="flex mt-3">261 <button class="flex items-center text-sm text-gray-400 hover:text-white mr-4">262 <i data-feather="message-square" class="h-4 w-4 mr-1"></i>263 <span>31</span>264 </button>265 <button class="flex items-center text-sm text-gray-400 hover:text-white mr-4">266 <i data-feather="thumbs-up" class="h-4 w-4 mr-1"></i>267 <span>89</span>268 </button>269 <button class="flex items-center text-sm text-blue-400 hover:text-blue-300">270 <i data-feather="bookmark" class="h-4 w-4 mr-1"></i>271 <span>Save</span>272 </button>273 </div>274 </div>275 </div>276 </div>277 </div>278 <div class="mt-6 text-center">279 <button class="px-4 py-2 bg-gray-700 rounded-md hover:bg-gray-600">Load More</button>280 </div>281 </div>282 </div>283 284 <!-- Top Contributors -->285 <div>286 <h3 class="text-xl font-semibold mb-6">Top Contributors</h3>287 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">288 <!-- Contributor 1 -->289 <div class="bg-gray-800 rounded-lg p-6 card-hover">290 <div class="flex flex-col items-center text-center">291 <img src="http://static.photos/people/200x200/7" alt="User" class="h-16 w-16 rounded-full mb-4">292 <h4 class="font-medium">Sarah Johnson</h4>293 <p class="text-sm text-gray-400 mb-2">Investing Expert • 5y</p>294 <div class="flex items-center text-yellow-400 mb-4">295 <i data-feather="star" class="h-4 w-4 fill-current"></i>296 <i data-feather="star" class="h-4 w-4 fill-current"></i>297 <i data-feather="star" class="h-4 w-4 fill-current"></i>298 <i data-feather="star" class="h-4 w-4 fill-current"></i>299 <i data-feather="star" class="h-4 w-4 fill-current"></i>300 </div>301 <p class="text-gray-300 text-sm mb-4">302 Specializes in long-term investment strategies and portfolio optimization.303 </p>304 <div class="flex space-x-2">305 <button class="px-3 py-1 bg-blue-600 rounded-md text-sm hover:bg-blue-700">Follow</button>306 <button class="px-3 py-1 bg-gray-700 rounded-md text-sm hover:bg-gray-600">Message</button>307 </div>308 </div>309 </div>310 311 <!-- Contributor 2 -->312 <div class="bg-gray-800 rounded-lg p-6 card-hover">313 <div class="flex flex-col items-center text-center">314 <img src="http://static.photos/people/200x200/8" alt="User" class="h-16 w-16 rounded-full mb-4">315 <h4 class="font-medium">Michael Chen</h4>316 <p class="text-sm text-gray-400 mb-2">Financial Planner • 8y</p>317 <div class="flex items-center text-yellow-400 mb-4">318 <i data-feather="star" class="h-4 w-4 fill-current"></i>319 <i data-feather="star" class="h-4 w-4 fill-current"></i>320 <i data-feather="star" class="h-4 w-4 fill-current"></i>321 <i data-feather="star" class="h-4 w-4 fill-current"></i>322 <i data-feather="star" class="h-4 w-4"></i>323 </div>324 <p class="text-gray-300 text-sm mb-4">325 Helps members with retirement planning, tax strategies, and wealth management.326 </p>327 <div class="flex space-x-2">328 <button class="px-3 py-1 bg-blue-600 rounded-md text-sm hover:bg-blue-700">Follow</button>329 <button class="px-3 py-1 bg-gray-700 rounded-md text-sm hover:bg-gray-600">Message</button>330 </div>331 </div>332 </div>333 334 <!-- Contributor 3 -->335 <div class="bg-gray-800 rounded-lg p-6 card-hover">336 <div class="flex flex-col items-center text-center">337 <img src="http://static.photos/people/200x200/9" alt="User" class="h-16 w-16 rounded-full mb-4">338 <h4 class="font-medium">David Wilson</h4>339 <p class="text-sm text-gray-400 mb-2">Day Trader • 3y</p>340 <div class="flex items-center text-yellow-400 mb-4">341 <i data-feather="star" class="h-4 w-4 fill-current"></i>342 <i data-feather="star" class="h-4 w-4 fill-current"></i>343 <i data-feather="star" class="h-4 w-4 fill-current"></i>344 <i data-feather="star" class="h-4 w-4 fill-current"></i>345 <i data-feather="star" class="h-4 w-4 fill-current"></i>346 </div>347 <p class="text-gray-300 text-sm mb-4">348 Shares technical analysis and short-term trading strategies for stocks and crypto.349 </p>350 <div class="flex space-x-2">351 <button class="px-3 py-1 bg-blue-600 rounded-md text-sm hover:bg-blue-700">Follow</button>352 <button class="px-3 py-1 bg-gray-700 rounded-md text-sm hover:bg-gray-600">Message</button>353 </div>354 </div>355 </div>356 </div>357 </div>358 </div>359 </div>360 361 <script>362 feather.replace();363 </script>364</body>365</html>