Kvphanikumar/self-learning-synapse-surfer
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>Core Capabilities | Synapse Surfer</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</head>11<body class="bg-gray-900 text-white min-h-screen flex flex-col">12 <custom-navbar></custom-navbar>13 14 <main class="flex-grow container mx-auto px-4 py-12">15 <div class="max-w-6xl mx-auto">16 <h1 class="text-4xl font-bold mb-8">Core Capabilities</h1>17 18 <div class="grid md:grid-cols-3 gap-8 mb-12">19 <div class="bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6 border border-gray-700 hover:border-blue-400 transition-all">20 <i data-feather="message-square" class="w-12 h-12 mb-4 text-blue-400"></i>21 <h2 class="text-2xl font-semibold mb-3">Advanced Chat</h2>22 <p class="text-gray-400">Natural language conversations with contextual understanding and memory across sessions.</p>23 </div>24 25 <div class="bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6 border border-gray-700 hover:border-purple-400 transition-all">26 <i data-feather="code" class="w-12 h-12 mb-4 text-purple-400"></i>27 <h2 class="text-2xl font-semibold mb-3">Code Generation</h2>28 <p class="text-gray-400">Generate, debug, and optimize code in multiple programming languages.</p>29 </div>30 31 <div class="bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6 border border-gray-700 hover:border-green-400 transition-all">32 <i data-feather="zap" class="w-12 h-12 mb-4 text-green-400"></i>33 <h2 class="text-2xl font-semibold mb-3">Task Automation</h2>34 <p class="text-gray-400">Automate repetitive tasks across applications and workflows.</p>35 </div>36 </div>37 38 <div class="bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-8 border border-gray-700 mb-12">39 <h2 class="text-3xl font-bold mb-6">Specializations</h2>40 <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">41 <div class="bg-gray-700 p-4 rounded-lg hover:bg-gray-600 transition-all">42 <i data-feather="trending-up" class="w-8 h-8 mb-2 text-blue-400"></i>43 <h3 class="text-xl font-semibold">Stock Analysis</h3>44 <p class="text-sm text-gray-400">Real-time market prediction and portfolio optimization</p>45 </div>46 <div class="bg-gray-700 p-4 rounded-lg hover:bg-gray-600 transition-all">47 <i data-feather="cpu" class="w-8 h-8 mb-2 text-purple-400"></i>48 <h3 class="text-xl font-semibold">Gaming</h3>49 <p class="text-sm text-gray-400">Strategy optimization and cheat detection</p>50 </div>51 <div class="bg-gray-700 p-4 rounded-lg hover:bg-gray-600 transition-all">52 <i data-feather="layout" class="w-8 h-8 mb-2 text-green-400"></i>53 <h3 class="text-xl font-semibold">Designing</h3>54 <p class="text-sm text-gray-400">Auto-generated layouts and style recommendations</p>55 </div>56 <div class="bg-gray-700 p-4 rounded-lg hover:bg-gray-600 transition-all">57 <i data-feather="shield" class="w-8 h-8 mb-2 text-red-400"></i>58 <h3 class="text-xl font-semibold">Security</h3>59 <p class="text-sm text-gray-400">Threat detection and vulnerability assessment</p>60 </div>61 </div>62 </div>63 </div>64 </main>65 66 <custom-footer></custom-footer>67 68 <script src="components/navbar.js"></script>69 <script src="components/footer.js"></script>70 <script src="script.js"></script>71 <script>feather.replace();</script>72</body>73</html>