dilon656/problemsolver-hub

1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>ProblemSolver Hub | Community Problem-Solving Platform</title>7    <link rel="stylesheet" href="style.css">8    <script src="https://cdn.tailwindcss.com"></script>9    <script src="https://unpkg.com/feather-icons"></script>10    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11    <script>12        tailwind.config = {13            darkMode: 'class',14            theme: {15                extend: {16                    colors: {17                        primary: {18                            500: '#3B82F6',19                        }20                    }21                }22            }23        }24    </script>25</head>26<body class="bg-gray-900 text-white min-h-screen">27    <custom-navbar></custom-navbar>28    29    <main class="container mx-auto px-4 py-8">30        <section class="mb-12">31            <div class="text-center">32                <h1 class="text-4xl font-bold mb-4">Solve Community Challenges Together</h1>33                <p class="text-xl text-gray-300 max-w-2xl mx-auto">Post problems, offer solutions, and make your community better.</p>34                <div class="mt-8">35                    <a href="/post-problem" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-full inline-flex items-center mr-4 transition-colors">36                        <i data-feather="plus" class="mr-2"></i> Post a Problem37                    </a>38                    <a href="/browse" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-full inline-flex items-center transition-colors">39                        <i data-feather="search" class="mr-2"></i> Browse Challenges40                    </a>41                </div>42            </div>43        </section>44 45        <section class="mb-12">46            <h2 class="text-2xl font-bold mb-6">Recent Challenges</h2>47            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">48                <!-- Problem Card 1 -->49                <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">50                    <img src="http://static.photos/technology/640x360/1" alt="Problem image" class="w-full h-48 object-cover">51                    <div class="p-6">52                        <h3 class="text-xl font-semibold mb-2">Road Repair Needed</h3>53                        <p class="text-gray-300 mb-4">The main road in our neighborhood has dangerous potholes that need urgent repair.</p>54                        <div class="flex justify-between items-center">55                            <span class="text-sm text-gray-400">Lusaka, Zambia</span>56                            <div class="flex items-center">57                                <i data-feather="message-square" class="mr-1 text-gray-400"></i>58                                <span class="text-sm text-gray-400 ml-1">12</span>59                            </div>60                        </div>61                    </div>62                </div>63 64                <!-- Problem Card 2 -->65                <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">66                    <img src="http://static.photos/construction/640x360/2" alt="Problem image" class="w-full h-48 object-cover">67                    <div class="p-6">68                        <h3 class="text-xl font-semibold mb-2">Community Water Access</h3>69                        <p class="text-gray-300 mb-4">Our community has limited access to clean water. Looking for sustainable solutions.</p>70                        <div class="flex justify-between items-center">71                            <span class="text-sm text-gray-400">Ndola, Zambia</span>72                            <div class="flex items-center">73                                <i data-feather="message-square" class="mr-1 text-gray-400"></i>74                                <span class="text-sm text-gray-400 ml-1">8</span>75                            </div>76                        </div>77                    </div>78                </div>79 80                <!-- Problem Card 3 -->81                <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">82                    <img src="http://static.photos/education/640x360/3" alt="Problem image" class="w-full h-48 object-cover">83                    <div class="p-6">84                        <h3 class="text-xl font-semibold mb-2">School Supplies Needed</h3>85                        <p class="text-gray-300 mb-4">Local school lacks basic supplies for students. Looking for donations or sponsors.</p>86                        <div class="flex justify-between items-center">87                            <span class="text-sm text-gray-400">Livingstone, Zambia</span>88                            <div class="flex items-center">89                                <i data-feather="message-square" class="mr-1 text-gray-400"></i>90                                <span class="text-sm text-gray-400 ml-1">15</span>91                            </div>92                        </div>93                    </div>94                </div>95            </div>96        </section>97    </main>98 99    <custom-footer></custom-footer>100 101    <script src="components/navbar.js"></script>102    <script src="components/footer.js"></script>103    <script src="script.js"></script>104    <script>105        feather.replace();106    </script>107<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>108</body>109</html>