| | <!DOCTYPE html> |
| | <html lang="en" class="dark"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>CodeGenius AI - Smart Coding Companion</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script> |
| | tailwind.config = { |
| | theme: { |
| | extend: { |
| | colors: { |
| | primary: '#6366f1', |
| | secondary: '#8b5cf6', |
| | dark: '#0f172a', |
| | light: '#f8fafc' |
| | } |
| | } |
| | } |
| | } |
| | </script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap'); |
| | body { |
| | font-family: 'Fira Code', monospace; |
| | } |
| | .code-editor { |
| | background-color: #1e293b; |
| | border-radius: 0.75rem; |
| | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| | } |
| | .gradient-text { |
| | background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%); |
| | -webkit-background-clip: text; |
| | background-clip: text; |
| | color: transparent; |
| | } |
| | .vanta-container { |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | z-index: -1; |
| | } |
| | .feature-card:hover { |
| | transform: translateY(-5px); |
| | transition: all 0.3s ease; |
| | } |
| | .glow { |
| | box-shadow: 0 0 15px rgba(139, 92, 246, 0.5); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-dark text-light min-h-screen"> |
| | <div id="vanta-bg" class="vanta-container"></div> |
| | |
| | |
| | <nav class="bg-dark/80 backdrop-blur-md border-b border-gray-800 fixed w-full z-50"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="flex items-center justify-between h-16"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 flex items-center"> |
| | <i data-feather="code" class="text-primary h-6 w-6"></i> |
| | <span class="ml-2 text-xl font-bold gradient-text">CodeGenius AI</span> |
| | </div> |
| | </div> |
| | <div class="hidden md:block"> |
| | <div class="ml-10 flex items-baseline space-x-4"> |
| | <a href="#" class="text-primary px-3 py-2 rounded-md text-sm font-medium">Home</a> |
| | <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Features</a> |
| | <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Pricing</a> |
| | <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Docs</a> |
| | <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a> |
| | </div> |
| | </div> |
| | <div class="hidden md:block"> |
| | <div class="ml-4 flex items-center md:ml-6"> |
| | <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> |
| | <i data-feather="log-in" class="mr-2 h-4 w-4"></i> Sign In |
| | </button> |
| | </div> |
| | </div> |
| | <div class="-mr-2 flex md:hidden"> |
| | <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"> |
| | <i data-feather="menu"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <div class="relative pt-32 pb-20 px-4 sm:px-6 lg:pt-40 lg:pb-28 lg:px-8"> |
| | <div class="max-w-7xl mx-auto"> |
| | <div class="text-center"> |
| | <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl"> |
| | <span class="block">AI-Powered</span> |
| | <span class="block gradient-text">Coding Companion</span> |
| | </h1> |
| | <p class="mt-3 max-w-md mx-auto text-base text-gray-300 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"> |
| | Supercharge your development workflow with our AI-powered tools that detect bugs, fix code, explain logic, and generate documentation automatically. |
| | </p> |
| | <div class="mt-10 sm:flex sm:justify-center"> |
| | <div class="rounded-md shadow"> |
| | <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 md:py-4 md:text-lg md:px-10"> |
| | Get Started |
| | </a> |
| | </div> |
| | <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3"> |
| | <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> |
| | Live Demo |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="py-12 bg-dark/50 backdrop-blur-sm"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="lg:text-center"> |
| | <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Features</h2> |
| | <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
| | Everything you need to code smarter |
| | </p> |
| | </div> |
| |
|
| | <div class="mt-10"> |
| | <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> |
| | |
| | <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary"> |
| | <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4"> |
| | <i data-feather="bug"></i> |
| | </div> |
| | <h3 class="text-lg font-medium text-white mb-2">AI Bug Detector</h3> |
| | <p class="text-gray-300"> |
| | Real-time scanning and detection of bugs, errors, and vulnerabilities in your code with detailed reports. |
| | </p> |
| | </div> |
| |
|
| | |
| | <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary"> |
| | <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4"> |
| | <i data-feather="check-circle"></i> |
| | </div> |
| | <h3 class="text-lg font-medium text-white mb-2">AI Bug Fixer</h3> |
| | <p class="text-gray-300"> |
| | Automated suggestions and fixes for identified bugs, with options to apply changes instantly. |
| | </p> |
| | </div> |
| |
|
| | |
| | <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary"> |
| | <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4"> |
| | <i data-feather="book-open"></i> |
| | </div> |
| | <h3 class="text-lg font-medium text-white mb-2">AI Code Explainer</h3> |
| | <p class="text-gray-300"> |
| | In-depth breakdowns of complex code segments, simplifying logic and functionality for better understanding. |
| | </p> |
| | </div> |
| |
|
| | |
| | <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary"> |
| | <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4"> |
| | <i data-feather="file-text"></i> |
| | </div> |
| | <h3 class="text-lg font-medium text-white mb-2">AI Documentation Maker</h3> |
| | <p class="text-gray-300"> |
| | Auto-generates comprehensive, well-structured documentation for projects in various formats. |
| | </p> |
| | </div> |
| |
|
| | |
| | <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary"> |
| | <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4"> |
| | <i data-feather="message-square"></i> |
| | </div> |
| | <h3 class="text-lg font-medium text-white mb-2">AI Auto-Commentor</h3> |
| | <p class="text-gray-300"> |
| | Intelligently adds descriptive comments to code, improving readability and maintainability. |
| | </p> |
| | </div> |
| |
|
| | |
| | <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary"> |
| | <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4"> |
| | <i data-feather="users"></i> |
| | </div> |
| | <h3 class="text-lg font-medium text-white mb-2">Real-time Collaboration</h3> |
| | <p class="text-gray-300"> |
| | Work together with your team in real-time with built-in collaboration tools and version control. |
| | </p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
| | <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="code-editor p-4 glow lg:col-span-1"> |
| | <div class="flex items-center justify-between mb-4"> |
| | <div class="flex items-center"> |
| | <div class="flex space-x-2 mr-4"> |
| | <div class="w-3 h-3 rounded-full bg-red-500"></div> |
| | <div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
| | <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| | </div> |
| | <div class="text-sm text-gray-400">input.js</div> |
| | </div> |
| | <div class="flex space-x-2"> |
| | <button onclick="downloadCode()" class="text-gray-400 hover:text-white p-1"> |
| | <i data-feather="download" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | <div id="codeEditor" class="w-full h-80 bg-gray-900 text-gray-100 font-mono text-sm p-4 rounded overflow-auto focus:outline-none focus:ring-2 focus:ring-primary" contenteditable="true" spellcheck="false"> |
| | <span class="text-purple-400">function</span> <span class="text-yellow-300">calculateTotal</span>(<span class="text-blue-400">items</span>) { |
| | <span class="text-green-400">if</span> (!Array.isArray(<span class="text-blue-400">items</span>)) { |
| | <span class="text-green-400">throw</span> <span class="text-purple-400">new</span> <span class="text-blue-400">Error</span>(<span class="text-orange-300">'Items must be an array'</span>); |
| | } |
| |
|
| | <span class="text-purple-400">let</span> total = <span class="text-blue-400">0</span>; |
| | <span class="text-blue-400">items</span>.forEach(<span class="text-blue-400">item</span> => { |
| | <span class="text-purple-400">const</span> price = <span class="text-blue-400">Number</span>(<span class="text-blue-400">item</span>.price) || <span class="text-blue-400">0</span>; |
| | total += price * (<span class="text-blue-400">item</span>.quantity || <span class="text-blue-400">1</span>); |
| | }); |
| |
|
| | <span class="text-green-400">return</span> total; |
| | }</div> |
| | <div class="grid grid-cols-2 gap-3 mt-4"> |
| | <button onclick="explainCode()" class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl"> |
| | <i data-feather="book-open" class="mr-2 w-4 h-4"></i> Explain |
| | </button> |
| | <button onclick="commentCode()" class="bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl"> |
| | <i data-feather="message-square" class="mr-2 w-4 h-4"></i> Comment |
| | </button> |
| | <button onclick="analyzeCode()" class="bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl"> |
| | <i data-feather="bug" class="mr-2 w-4 h-4"></i> Find Bugs |
| | </button> |
| | <button onclick="documentCode()" class="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl"> |
| | <i data-feather="file-text" class="mr-2 w-4 h-4"></i> Document |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="code-editor p-4 glow lg:col-span-1"> |
| | <div class="flex items-center mb-4"> |
| | <div class="flex space-x-2 mr-4"> |
| | <div class="w-3 h-3 rounded-full bg-red-500"></div> |
| | <div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
| | <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| | </div> |
| | <div class="text-sm text-gray-400">Bug Analysis</div> |
| | </div> |
| | <div id="bugTerminal" class="w-full h-64 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-y-auto"> |
| | <div class="text-green-400">$ Waiting for code analysis...</div> |
| | </div> |
| | <div class="mt-4 p-3 bg-gray-800 rounded text-sm text-gray-300"> |
| | <div class="flex items-start"> |
| | <i data-feather="info" class="text-blue-400 mr-2 mt-0.5 flex-shrink-0"></i> |
| | <div> |
| | <span class="font-medium">AI Insights:</span> The analyzer will detect potential bugs, security issues, and optimization opportunities. |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="code-editor p-4 glow lg:col-span-1"> |
| | <div class="flex items-center mb-4"> |
| | <div class="flex space-x-2 mr-4"> |
| | <div class="w-3 h-3 rounded-full bg-red-500"></div> |
| | <div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
| | <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| | </div> |
| | <div class="text-sm text-gray-400">fixed.js</div> |
| | </div> |
| | <pre id="fixedCode" class="text-gray-300 text-sm font-mono h-64 overflow-auto bg-gray-800 p-4 rounded"> |
| | <span class="text-gray-500">// Fixed code will appear here after analysis</span></pre> |
| | <button onclick="applyFix()" class="mt-4 w-full bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl"> |
| | <i data-feather="check-circle" class="mr-2"></i> Apply Fix |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | function analyzeCode() { |
| | const code = document.getElementById('codeInput').value; |
| | const bugTerminal = document.getElementById('bugTerminal'); |
| | |
| | // Clear terminal |
| | bugTerminal.innerHTML = '<div class="text-green-400">$ Analyzing code...</div>'; |
| | |
| | // Simulate AI analysis |
| | setTimeout(() => { |
| | bugTerminal.innerHTML = ` |
| | <div class="text-green-400">$ Code analysis complete</div> |
| | <div class="text-yellow-400">$ Found 2 potential issues:</div> |
| | <div class="mt-2"> |
| | <div class="text-red-400">1. Line 3: Missing input validation for 'items' array elements</div> |
| | <div class="text-gray-400 ml-4">- Items should be validated for required properties (price, quantity)</div> |
| | </div> |
| | <div class="mt-2"> |
| | <div class="text-red-400">2. Line 7: Potential floating point precision issue</div> |
| | <div class="text-gray-400 ml-4">- Consider using toFixed(2) for currency calculations</div> |
| | </div> |
| | <div class="mt-4 text-green-400">$ Suggested fixes available</div> |
| | `; |
| | |
| | // Update fixed code |
| | document.getElementById('fixedCode').innerHTML = ` |
| | <span class="text-purple-400">function</span> <span class="text-yellow-300">calculateTotal</span>(items) { |
| | <span class="text-green-400">if</span> (!Array.isArray(items)) { |
| | <span class="text-green-400">throw</span> <span class="text-purple-400">new</span> <span class="text-blue-400">Error</span>(<span class="text-orange-300">'Items must be an array'</span>); |
| | } |
| | |
| | <span class="text-purple-400">let</span> total = <span class="text-blue-400">0</span>; |
| | items.forEach(item => { |
| | <span class="text-green-400">if</span> (!item.price || !item.quantity) { |
| | <span class="text-green-400">throw</span> <span class="text-purple-400">new</span> <span class="text-blue-400">Error</span>(<span class="text-orange-300">'Items must have price and quantity'</span>); |
| | } |
| | <span class="text-purple-400">const</span> price = <span class="text-blue-400">Number</span>(item.price) || <span class="text-blue-400">0</span>; |
| | total += <span class="text-blue-400">Number</span>((price * (item.quantity || <span class="text-blue-400">1</span>)).toFixed(<span class="text-blue-400">2</span>)); |
| | }); |
| | |
| | <span class="text-green-400">return</span> total; |
| | }`; |
| | }, 1500); |
| | } |
| | |
| | function applyFix() { |
| | const fixedCode = document.getElementById('fixedCode').textContent; |
| | document.getElementById('codeInput').value = fixedCode; |
| | |
| | const bugTerminal = document.getElementById('bugTerminal'); |
| | bugTerminal.innerHTML = ` |
| | <div class="text-green-400">$ Fix applied successfully!</div> |
| | <div class="text-gray-400 mt-2">Original code has been replaced with the fixed version.</div> |
| | <div class="text-green-400 mt-4">$ Ready for new analysis</div> |
| | `; |
| | } |
| | </script> |
| | |
| | <div class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-800/50 rounded-lg"> |
| | <div class="text-center mb-12"> |
| | <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> |
| | <span class="gradient-text">Code Explanation</span> |
| | </h2> |
| | <p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300"> |
| | Our AI breaks down your code line by line for better understanding and learning. |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| | <div class="code-editor p-4"> |
| | <div class="flex items-center mb-4"> |
| | <div class="text-sm text-gray-400">Code Breakdown</div> |
| | </div> |
| | <div id="codeExplanation" class="text-gray-300 text-sm font-mono space-y-4"> |
| | <div> |
| | <div class="text-primary font-medium">Function Declaration:</div> |
| | <div class="text-gray-400 ml-4">Defines a function named 'calculateTotal' that takes an 'items' parameter</div> |
| | </div> |
| | <div> |
| | <div class="text-primary font-medium">Input Validation:</div> |
| | <div class="text-gray-400 ml-4">Checks if 'items' is an array, throws error if not</div> |
| | </div> |
| | <div> |
| | <div class="text-primary font-medium">Total Calculation:</div> |
| | <div class="text-gray-400 ml-4">Iterates through items array, converts prices to numbers, handles missing quantities</div> |
| | </div> |
| | <div> |
| | <div class="text-primary font-medium">Return Value:</div> |
| | <div class="text-gray-400 ml-4">Returns the calculated total after processing all items</div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="code-editor p-4"> |
| | <div class="flex items-center mb-4"> |
| | <div class="text-sm text-gray-400">Optimization Tips</div> |
| | </div> |
| | <div class="text-gray-300 text-sm font-mono space-y-4"> |
| | <div class="flex items-start"> |
| | <i data-feather="zap" class="text-yellow-400 mr-2 mt-0.5 flex-shrink-0"></i> |
| | <div> |
| | <div class="font-medium">Use reduce() instead of forEach:</div> |
| | <div class="text-gray-400">Could make the total calculation more concise</div> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <i data-feather="alert-triangle" class="text-red-400 mr-2 mt-0.5 flex-shrink-0"></i> |
| | <div> |
| | <div class="font-medium">Watch for floating point math:</div> |
| | <div class="text-gray-400">Currency calculations should use fixed decimal places</div> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <i data-feather="code" class="text-blue-400 mr-2 mt-0.5 flex-shrink-0"></i> |
| | <div> |
| | <div class="font-medium">Add TypeScript:</div> |
| | <div class="text-gray-400">Would catch type issues at compile time</div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-gradient-to-r from-primary/20 to-secondary/20 py-16 px-4 sm:px-6 lg:px-8"> |
| | <div class="max-w-3xl mx-auto text-center"> |
| | <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> |
| | Ready to revolutionize your coding workflow? |
| | </h2> |
| | <p class="mt-3 text-xl text-gray-300"> |
| | Join thousands of developers who are coding smarter with AI assistance. |
| | </p> |
| | <div class="mt-10 sm:flex sm:justify-center"> |
| | <div class="rounded-md shadow"> |
| | <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 md:py-4 md:text-lg md:px-10"> |
| | Start free trial |
| | </a> |
| | </div> |
| | <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3"> |
| | <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> |
| | See pricing |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <footer class="bg-gray-900/80 backdrop-blur-md border-t border-gray-800 mt-20"> |
| | <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
| | <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| | <div> |
| | <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3> |
| | <ul class="mt-4 space-y-4"> |
| | <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li> |
| | <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li> |
| | <li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li> |
| | <li><a href="#" class="text-base text-gray-300 hover:text-white">Integrations</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3> |
| | <ul class="mt-4 space-y-4"> |
| | <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li> |
| | <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li> |
| | <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> |
| | <li><a href="#" class="text-base text-gray-300 hover:text-white">Support</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> |
| | <ul class="mt-4 space-y-4"> |
| | <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li |
| | </body> |
| | </html> |
