ShuHashe/congoconnect-prodirectory
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>CongoConnect ProDirectory - Annuaire professionnel RDC</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 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>12 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />13 <style>14 .hero-bg {15 background: linear-gradient(135deg, rgba(0,91,187,0.9) 0%, rgba(0,153,255,0.8) 100%);16 }17 .search-shadow {18 box-shadow: 0 10px 30px rgba(0, 91, 187, 0.2);19 }20 .category-card:hover {21 transform: translateY(-5px);22 transition: all 0.3s ease;23 }24 #map {25 height: 400px;26 border-radius: 1rem;27 }28 </style>29</head>30<body class="font-sans antialiased text-gray-800">31 <!-- Navigation -->32 <nav class="bg-white shadow-md py-4 px-6">33 <div class="max-w-7xl mx-auto flex justify-between items-center">34 <div class="flex items-center space-x-2">35 <div class="bg-blue-600 text-white p-2 rounded-lg">36 <i data-feather="map"></i>37 </div>38 <h1 class="text-xl font-bold text-blue-600">CongoConnect</h1>39 </div>40 <div class="hidden md:flex space-x-8">41 <a href="index.html" class="text-blue-600 font-medium">Accueil</a>42 <a href="search.html" class="text-gray-600 hover:text-blue-600">Entreprises</a>43 <a href="categories.html" class="text-gray-600 hover:text-blue-600">Catégories</a>44 <a href="#" class="text-gray-600 hover:text-blue-600">Villes</a>45 <a href="#" class="text-gray-600 hover:text-blue-600">Contact</a>46 </div>47<div class="flex items-center space-x-4">48 <button class="hidden md:block bg-blue-50 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-100 transition">49 Connexion50 </button>51 <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">52 Ajouter mon entreprise53 </button>54 </div>55 <button class="md:hidden text-gray-600">56 <i data-feather="menu"></i>57 </button>58 </div>59 </nav>60 61 <!-- Hero Section -->62 <div class="hero-bg text-white py-20 px-6">63 <div class="max-w-7xl mx-auto text-center">64 <h1 class="text-4xl md:text-5xl font-bold mb-6">Trouvez l'entreprise parfaite en RDC</h1>65 <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">L'annuaire professionnel le plus complet de la République Démocratique du Congo</p>66 67 <!-- Search Bar -->68 <div class="max-w-4xl mx-auto bg-white rounded-lg p-2 search-shadow">69 <div class="flex flex-col md:flex-row">70 <div class="flex-1 p-2">71 <div class="relative">72 <input type="text" placeholder="Que recherchez-vous ? (restaurant, école, médecin...)" 73 class="w-full p-4 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700">74 <div class="absolute right-3 top-4 text-gray-400">75 <i data-feather="search"></i>76 </div>77 </div>78 </div>79 <div class="flex-1 p-2">80 <div class="relative">81 <input type="text" placeholder="Où ? (Kinshasa, Lubumbashi, Goma...)" 82 class="w-full p-4 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700">83 <div class="absolute right-3 top-4 text-gray-400">84 <i data-feather="map-pin"></i>85 </div>86 </div>87 </div>88 <div class="p-2">89 <button class="bg-blue-600 hover:bg-blue-700 text-white w-full h-full px-6 py-4 rounded-lg font-medium transition">90 Rechercher91 </button>92 </div>93 </div>94 </div>95 </div>96 </div>97 98 <!-- Popular Categories -->99 <div class="max-w-7xl mx-auto py-16 px-6">100 <h2 class="text-3xl font-bold text-center mb-12">Parcourir par catégories</h2>101 <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">102 <!-- Category 1 -->103 <div class="category-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">104 <div class="p-6 flex flex-col items-center text-center">105 <div class="bg-blue-100 p-4 rounded-full mb-4">106 <i data-feather="briefcase" class="text-blue-600 w-6 h-6"></i>107 </div>108 <h3 class="font-bold text-lg mb-2">Entreprises</h3>109 <p class="text-gray-600 text-sm">1200+ sociétés</p>110 </div>111 </div>112 113 <!-- Category 2 -->114 <div class="category-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">115 <div class="p-6 flex flex-col items-center text-center">116 <div class="bg-green-100 p-4 rounded-full mb-4">117 <i data-feather="home" class="text-green-600 w-6 h-6"></i>118 </div>119 <h3 class="font-bold text-lg mb-2">Immobilier</h3>120 <p class="text-gray-600 text-sm">850+ agences</p>121 </div>122 </div>123 124 <!-- Category 3 -->125 <div class="category-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">126 <div class="p-6 flex flex-col items-center text-center">127 <div class="bg-red-100 p-4 rounded-full mb-4">128 <i data-feather="heart" class="text-red-600 w-6 h-6"></i>129 </div>130 <h3 class="font-bold text-lg mb-2">Santé</h3>131 <p class="text-gray-600 text-sm">1500+ établissements</p>132 </div>133 </div>134 135 <!-- Category 4 -->136 <div class="category-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">137 <div class="p-6 flex flex-col items-center text-center">138 <div class="bg-yellow-100 p-4 rounded-full mb-4">139 <i data-feather="book" class="text-yellow-600 w-6 h-6"></i>140 </div>141 <h3 class="font-bold text-lg mb-2">Éducation</h3>142 <p class="text-gray-600 text-sm">2000+ écoles</p>143 </div>144 </div>145 146 <!-- Category 5 -->147 <div class="category-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">148 <div class="p-6 flex flex-col items-center text-center">149 <div class="bg-purple-100 p-4 rounded-full mb-4">150 <i data-feather="shopping-cart" class="text-purple-600 w-6 h-6"></i>151 </div>152 <h3 class="font-bold text-lg mb-2">Commerce</h3>153 <p class="text-gray-600 text-sm">3000+ boutiques</p>154 </div>155 </div>156 157 <!-- Category 6 -->158 <div class="category-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">159 <div class="p-6 flex flex-col items-center text-center">160 <div class="bg-pink-100 p-4 rounded-full mb-4">161 <i data-feather="utensils" class="text-pink-600 w-6 h-6"></i>162 </div>163 <h3 class="font-bold text-lg mb-2">Restauration</h3>164 <p class="text-gray-600 text-sm">1200+ restaurants</p>165 </div>166 </div>167 </div>168 </div>169 170 <!-- Featured Businesses -->171 <div class="bg-gray-50 py-16 px-6">172 <div class="max-w-7xl mx-auto">173 <div class="flex justify-between items-center mb-12">174 <h2 class="text-3xl font-bold">Entreprises à découvrir</h2>175 <a href="#" class="text-blue-600 hover:underline flex items-center">176 Voir tout <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>177 </a>178 </div>179 180 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">181 <!-- Business 1 -->182 <div class="bg-white rounded-xl shadow-md overflow-hidden">183 <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/business/640x360/1')"></div>184 <div class="p-6">185 <div class="flex items-center mb-4">186 <div class="bg-white p-1 rounded-full shadow-md -mt-10">187 <img src="http://static.photos/logo/200x200/1" class="w-16 h-16 rounded-full object-cover border-2 border-white">188 </div>189 <div class="ml-4">190 <h3 class="font-bold text-lg">Banque Commerciale du Congo</h3>191 <div class="flex items-center text-yellow-400">192 <i data-feather="star" class="w-4 h-4 fill-current"></i>193 <i data-feather="star" class="w-4 h-4 fill-current"></i>194 <i data-feather="star" class="w-4 h-4 fill-current"></i>195 <i data-feather="star" class="w-4 h-4 fill-current"></i>196 <i data-feather="star" class="w-4 h-4 fill-current"></i>197 <span class="text-gray-600 ml-2 text-sm">(42 avis)</span>198 </div>199 </div>200 </div>201 <p class="text-gray-600 mb-4">Banque leader en RDC avec plus de 50 agences à travers le pays. Services bancaires pour particuliers et entreprises.</p>202 <div class="flex justify-between items-center">203 <div class="flex items-center text-gray-500">204 <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>205 <span class="text-sm">Gombe, Kinshasa</span>206 </div>207 <button class="text-blue-600 hover:text-blue-700 text-sm font-medium">208 Voir détails209 </button>210 </div>211 </div>212 </div>213 214 <!-- Business 2 -->215 <div class="bg-white rounded-xl shadow-md overflow-hidden">216 <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/hospital/640x360/2')"></div>217 <div class="p-6">218 <div class="flex items-center mb-4">219 <div class="bg-white p-1 rounded-full shadow-md -mt-10">220 <img src="http://static.photos/logo/200x200/2" class="w-16 h-16 rounded-full object-cover border-2 border-white">221 </div>222 <div class="ml-4">223 <h3 class="font-bold text-lg">Clinique Ngaliema</h3>224 <div class="flex items-center text-yellow-400">225 <i data-feather="star" class="w-4 h-4 fill-current"></i>226 <i data-feather="star" class="w-4 h-4 fill-current"></i>227 <i data-feather="star" class="w-4 h-4 fill-current"></i>228 <i data-feather="star" class="w-4 h-4 fill-current"></i>229 <i data-feather="star" class="w-4 h-4"></i>230 <span class="text-gray-600 ml-2 text-sm">(36 avis)</span>231 </div>232 </div>233 </div>234 <p class="text-gray-600 mb-4">Centre médical moderne offrant des soins spécialisés en cardiologie, pédiatrie et médecine interne.</p>235 <div class="flex justify-between items-center">236 <div class="flex items-center text-gray-500">237 <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>238 <span class="text-sm">Ngaliema, Kinshasa</span>239 </div>240 <button class="text-blue-600 hover:text-blue-700 text-sm font-medium">241 Voir détails242 </button>243 </div>244 </div>245 </div>246 247 <!-- Business 3 -->248 <div class="bg-white rounded-xl shadow-md overflow-hidden">249 <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/school/640x360/3')"></div>250 <div class="p-6">251 <div class="flex items-center mb-4">252 <div class="bg-white p-1 rounded-full shadow-md -mt-10">253 <img src="http://static.photos/logo/200x200/3" class="w-16 h-16 rounded-full object-cover border-2 border-white">254 </div>255 <div class="ml-4">256 <h3 class="font-bold text-lg">Complexe Scolaire La Référence</h3>257 <div class="flex items-center text-yellow-400">258 <i data-feather="star" class="w-4 h-4 fill-current"></i>259 <i data-feather="star" class="w-4 h-4 fill-current"></i>260 <i data-feather="star" class="w-4 h-4 fill-current"></i>261 <i data-feather="star" class="w-4 h-4 fill-current"></i>262 <i data-feather="star" class="w-4 h-4 fill-current"></i>263 <span class="text-gray-600 ml-2 text-sm">(28 avis)</span>264 </div>265 </div>266 </div>267 <p class="text-gray-600 mb-4">École privée offrant un enseignement de qualité de la maternelle au secondaire. Programme national et international.</p>268 <div class="flex justify-between items-center">269 <div class="flex items-center text-gray-500">270 <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>271 <span class="text-sm">Lemba, Kinshasa</span>272 </div>273 <button class="text-blue-600 hover:text-blue-700 text-sm font-medium">274 Voir détails275 </button>276 </div>277 </div>278 </div>279 </div>280 </div>281 </div>282 283 <!-- Map Section -->284 <div class="max-w-7xl mx-auto py-16 px-6">285 <h2 class="text-3xl font-bold text-center mb-12">Entreprises près de vous</h2>286 <div id="map" class="mb-8"></div>287 <div class="text-center">288 <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition inline-flex items-center">289 <i data-feather="map" class="mr-2 w-4 h-4"></i>290 Voir toutes les entreprises sur la carte291 </button>292 </div>293 </div>294 295 <!-- Business Type Section -->296 <div class="bg-blue-600 text-white py-16 px-6">297 <div class="max-w-7xl mx-auto">298 <h2 class="text-3xl font-bold text-center mb-12">Ajoutez votre entreprise</h2>299 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">300 <div class="text-center p-6 bg-blue-700 rounded-xl">301 <div class="bg-blue-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">302 <i data-feather="briefcase" class="w-6 h-6"></i>303 </div>304 <h3 class="font-bold text-xl mb-3">Entreprise privée</h3>305 <p class="mb-4">Augmentez votre visibilité et attirez plus de clients</p>306 <button class="bg-white text-blue-600 hover:bg-gray-100 px-4 py-2 rounded-lg font-medium transition">307 S'inscrire308 </button>309 </div>310 311 <div class="text-center p-6 bg-blue-700 rounded-xl">312 <div class="bg-blue-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">313 <i data-feather="home" class="w-6 h-6"></i>314 </div>315 <h3 class="font-bold text-xl mb-3">Institution publique</h3>316 <p class="mb-4">Facilitez l'accès à vos services pour les citoyens</p>317 <button class="bg-white text-blue-600 hover:bg-gray-100 px-4 py-2 rounded-lg font-medium transition">318 S'inscrire319 </button>320 </div>321 322 <div class="text-center p-6 bg-blue-700 rounded-xl">323 <div class="bg-blue-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">324 <i data-feather="cross" class="w-6 h-6"></i>325 </div>326 <h3 class="font-bold text-xl mb-3">Organisation confessionnelle</h3>327 <p class="mb-4">Partagez vos activités et services avec la communauté</p>328 <button class="bg-white text-blue-600 hover:bg-gray-100 px-4 py-2 rounded-lg font-medium transition">329 S'inscrire330 </button>331 </div>332 </div>333 </div>334 </div>335 336 <!-- Testimonials -->337 <div class="max-w-7xl mx-auto py-16 px-6">338 <h2 class="text-3xl font-bold text-center mb-12">Ce que disent nos utilisateurs</h2>339 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">340 <div class="bg-white p-6 rounded-xl shadow-md">341 <div class="flex items-center mb-4">342 <img src="http://static.photos/people/200x200/1" class="w-12 h-12 rounded-full object-cover mr-4">343 <div>344 <h4 class="font-bold">Jean Kabasele</h4>345 <p class="text-gray-600 text-sm">Entrepreneur, Kinshasa</p>346 </div>347 </div>348 <p class="text-gray-700 mb-4">"Grâce à CongoConnect, j'ai trouvé des fournisseurs fiables pour mon entreprise. La plateforme est très intuitive et complète."</p>349 <div class="flex text-yellow-400">350 <i data-feather="star" class="w-4 h-4 fill-current"></i>351 <i data-feather="star" class="w-4 h-4 fill-current"></i>352 <i data-feather="star" class="w-4 h-4 fill-current"></i>353 <i data-feather="star" class="w-4 h-4 fill-current"></i>354 <i data-feather="star" class="w-4 h-4 fill-current"></i>355 </div>356 </div>357 358 <div class="bg-white p-6 rounded-xl shadow-md">359 <div class="flex items-center mb-4">360 <img src="http://static.photos/people/200x200/2" class="w-12 h-12 rounded-full object-cover mr-4">361 <div>362 <h4 class="font-bold">Sophie Mbuji</h4>363 <p class="text-gray-600 text-sm">Mère au foyer, Lubumbashi</p>364 </div>365 </div>366 <p class="text-gray-700 mb-4">"J'ai trouvé une excellente école pour mes enfants grâce aux avis et détails fournis sur la plateforme. Merci CongoConnect!"</p>367 <div class="flex text-yellow-400">368 <i data-feather="star" class="w-4 h-4 fill-current"></i>369 <i data-feather="star" class="w-4 h-4 fill-current"></i>370 <i data-feather="star" class="w-4 h-4 fill-current"></i>371 <i data-feather="star" class="w-4 h-4 fill-current"></i>372 <i data-feather="star" class="w-4 h-4"></i>373 </div>374 </div>375 376 <div class="bg-white p-6 rounded-xl shadow-md">377 <div class="flex items-center mb-4">378 <img src="http://static.photos/people/200x200/3" class="w-12 h-12 rounded-full object-cover mr-4">379 <div>380 <h4 class="font-bold">Dr. Pascal Mbuyi</h4>381 <p class="text-gray-600 text-sm">Médecin, Goma</p>382 </div>383 </div>384 <p class="text-gray-700 mb-4">"En tant que professionnel de santé, avoir ma clinique sur CongoConnect m'a permis d'augmenter ma clientèle de 30% en 3 mois."</p>385 <div class="flex text-yellow-400">386 <i data-feather="star" class="w-4 h-4 fill-current"></i>387 <i data-feather="star" class="w-4 h-4 fill-current"></i>388 <i data-feather="star" class="w-4 h-4 fill-current"></i>389 <i data-feather="star" class="w-4 h-4 fill-current"></i>390 <i data-feather="star" class="w-4 h-4 fill-current"></i>391 </div>392 </div>393 </div>394 </div>395 396 <!-- CTA Section -->397 <div class="bg-gray-50 py-16 px-6">398 <div class="max-w-3xl mx-auto text-center">399 <h2 class="text-3xl font-bold mb-6">Votre entreprise mérite d'être vue</h2>400 <p class="text-xl mb-8">Inscrivez votre établissement dès maintenant et augmentez votre visibilité auprès de milliers de clients potentiels</p>401 <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-medium text-lg transition inline-flex items-center">402 <i data-feather="plus" class="mr-2 w-5 h-5"></i>403 Ajouter mon entreprise gratuitement404 </button>405 </div>406 </div>407 408 <!-- Footer -->409 <footer class="bg-gray-900 text-white py-12 px-6">410 <div class="max-w-7xl mx-auto">411 <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">412 <div>413 <div class="flex items-center space-x-2 mb-4">414 <div class="bg-blue-600 text-white p-2 rounded-lg">415 <i data-feather="map"></i>416 </div>417 <h3 class="text-xl font-bold">CongoConnect</h3>418 </div>419 <p class="text-gray-400">L'annuaire professionnel le plus complet de la République Démocratique du Congo.</p>420 </div>421 422 <div>423 <h4 class="font-bold text-lg mb-4">Navigation</h4>424 <ul class="space-y-2">425 <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>426 <li><a href="#" class="text-gray-400 hover:text-white transition">Entreprises</a></li>427 <li><a href="#" class="text-gray-400 hover:text-white transition">Catégories</a></li>428 <li><a href="#" class="text-gray-400 hover:text-white transition">Villes</a></li>429 <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>430 </ul>431 </div>432 433 <div>434 <h4 class="font-bold text-lg mb-4">Entreprises</h4>435 <ul class="space-y-2">436 <li><a href="#" class="text-gray-400 hover:text-white transition">Ajouter mon entreprise</a></li>437 <li><a href="#" class="text-gray-400 hover:text-white transition">Tableau de bord</a></li>438 <li><a href="#" class="text-gray-400 hover:text-white transition">Abonnements</a></li>439 <li><a href="#" class="text-gray-400 hover:text-white transition">Guide d'utilisation</a></li>440 </ul>441 </div>442 443 <div>444 <h4 class="font-bold text-lg mb-4">Nous contacter</h4>445 <ul class="space-y-2">446 <li class="flex items-center text-gray-400">447 <i data-feather="mail" class="w-4 h-4 mr-2"></i>448 contact@congoconnect.cd449 </li>450 <li class="flex items-center text-gray-400">451 <i data-feather="phone" class="w-4 h-4 mr-2"></i>452 +243 81 234 5678453 </li>454 <li class="flex items-center text-gray-400">455 <i data-feather="map-pin" class="w-4 h-4 mr-2"></i>456 Gombe, Kinshasa, RDC457 </li>458 </ul>459 <div class="flex space-x-4 mt-4">460 <a href="#" class="text-gray-400 hover:text-white transition">461 <i data-feather="facebook" class="w-5 h-5"></i>462 </a>463 <a href="#" class="text-gray-400 hover:text-white transition">464 <i data-feather="twitter" class="w-5 h-5"></i>465 </a>466 <a href="#" class="text-gray-400 hover:text-white transition">467 <i data-feather="instagram" class="w-5 h-5"></i>468 </a>469 <a href="#" class="text-gray-400 hover:text-white transition">470 <i data-feather="linkedin" class="w-5 h-5"></i>471 </a>472 </div>473 </div>474 </div>475 476 <div class="border-t border-gray-800 pt-8">477 <div class="flex flex-col md:flex-row justify-between items-center">478 <p class="text-gray-400 text-sm">© 2023 CongoConnect. Tous droits réservés.</p>479 <div class="flex space-x-6 mt-4 md:mt-0">480 <a href="#" class="text-gray-400 hover:text-white text-sm">Conditions d'utilisation</a>481 <a href="#" class="text-gray-400 hover:text-white text-sm">Politique de confidentialité</a>482 <a href="#" class="text-gray-400 hover:text-white text-sm">Mentions légales</a>483 </div>484 </div>485 </div>486 </div>487 </footer>488 489 <script>490 // Initialize map491 document.addEventListener('DOMContentLoaded', function() {492 // Initialize Leaflet map493 const map = L.map('map').setView([-4.0383, 21.7587], 6); // Center on DRC494 495 // Add tile layer496 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {497 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'498 }).addTo(map);499 500 // Add some sample markers501 const cities = [502 {name: "Kinshasa", coords: [-4.4419, 15.2663]},503 {name: "Lubumbashi", coords: [-11.6646, 27.4796]},504 {name: "Mbuji-Mayi", coords: [-6.1360, 23.5898]},505 {name: "Kananga", coords: [-5.8962, 22.4168]},506 {name: "Kisangani", coords: [0.5167, 25.2000]},507 {name: "Goma", coords: [-1.6792, 29.2349]},508 {name: "Bukavu", coords: [-2.5000, 28.8667]},509 {name: "Matadi", coords: [-5.8167, 13.4833]}510 ];511 512 cities.forEach(city => {513 L.marker(city.coords).addTo(map)514 .bindPopup(`<b>${city.name}</b><br>${Math.floor(Math.random() * 100) + 50} entreprises`);515 });516 });517 518 // Initialize feather icons519 feather.replace();520 </script>521</body>522</html>523