Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="CodeGuardian provides AI-powered tools to detect bugs, vulnerabilities and code smells in your codebase. Improve code quality and security."> | |
| <title>CodeGuardian | AI-Powered Code Quality & Security</title> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛡️</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://cdnjs.cloudflare.com"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <script> | |
| // Enhanced dark mode with system preference and smooth transitions | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const darkModeToggle = document.getElementById('darkModeToggle'); | |
| const html = document.documentElement; | |
| // Check system preference first, then localStorage | |
| const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; | |
| const savedMode = localStorage.getItem('darkMode'); | |
| if (savedMode === 'true' || (savedMode === null && prefersDark)) { | |
| html.classList.add('dark'); | |
| if (darkModeToggle) darkModeToggle.checked = true; | |
| } | |
| // Watch for system preference changes | |
| window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { | |
| if (localStorage.getItem('darkMode') === null) { | |
| html.classList.toggle('dark', e.matches); | |
| } | |
| }); | |
| if (darkModeToggle) { | |
| darkModeToggle.addEventListener('change', function() { | |
| const isDark = this.checked; | |
| html.classList.toggle('dark', isDark); | |
| localStorage.setItem('darkMode', isDark); | |
| // Smooth transition for all color changes | |
| const duration = 300; | |
| const start = performance.now(); | |
| function fade(timestamp) { | |
| const progress = (timestamp - start) / duration; | |
| if (progress < 1) { | |
| requestAnimationFrame(fade); | |
| } | |
| } | |
| requestAnimationFrame(fade); | |
| }); | |
| } | |
| }); | |
| // Parallax effect | |
| window.addEventListener('scroll', function() { | |
| const scrollPosition = window.pageYOffset; | |
| const parallaxElements = document.querySelectorAll('.parallax'); | |
| parallaxElements.forEach(function(element) { | |
| element.style.backgroundPositionY = (scrollPosition * 0.7) + 'px'; | |
| }); | |
| }); | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#10B981', | |
| dark: '#1F2937', | |
| light: '#F9FAFB', | |
| danger: '#EF4444', | |
| warning: '#F59E0B' | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --font-inter: 'Inter', sans-serif; | |
| --primary: #4F46E5; | |
| --secondary: #10B981; | |
| --dark: #1F2937; | |
| --light: #F9FAFB; | |
| --danger: #EF4444; | |
| --warning: #F59E0B; | |
| } | |
| .dark { | |
| --primary: #818cf8; | |
| --secondary: #6ee7b7; | |
| --dark: #f3f4f6; | |
| --light: #1F2937; | |
| } | |
| body { | |
| font-family: var(--font-inter); | |
| transition: background-color 0.3s ease, color 0.3s ease; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); | |
| } | |
| 70% { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); | |
| } | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .step-card { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .step-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| z-index: 0; | |
| } | |
| .step-card:hover::before { | |
| opacity: 0.1; | |
| } | |
| .step-number { | |
| width: 50px; | |
| height: 50px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: white; | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| } | |
| .dark-toggle { | |
| position: relative; | |
| display: inline-block; | |
| width: 60px; | |
| height: 30px; | |
| } | |
| .dark-toggle input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #ccc; | |
| transition: .4s; | |
| border-radius: 30px; | |
| } | |
| .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 22px; | |
| width: 22px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .slider { | |
| background-color: var(--primary); | |
| } | |
| input:checked + .slider:before { | |
| transform: translateX(30px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-shield-alt text-primary text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-dark">CodeGuardian</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-primary text-dark inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Docs</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4"> | |
| <label class="dark-toggle"> | |
| <input type="checkbox" id="darkModeToggle"> | |
| <span class="slider"></span> | |
| </label> | |
| <button class="bg-primary hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> | |
| Elevate Your Code Quality & Security | |
| </h1> | |
| <p class="mt-6 max-w-3xl mx-auto text-xl"> | |
| AI-powered tools to detect bugs, vulnerabilities, and code smells before they reach production. | |
| </p> | |
| <div class="mt-10 flex justify-center space-x-4"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-primary bg-white hover:bg-gray-50"> | |
| Start Free Trial | |
| </a> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary bg-opacity-20 hover:bg-opacity-30"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- How It Works Section --> | |
| <div class="py-16 bg-white dark:bg-gray-800"> | |
| <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">Process</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-dark dark:text-white sm:text-4xl"> | |
| How CodeGuardian Works | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-300 lg:mx-auto"> | |
| Simple steps to better code quality and security. | |
| </p> | |
| </div> | |
| <div class="mt-16"> | |
| <div class="grid grid-cols-1 gap-8 md:grid-cols-3"> | |
| <!-- Step 1 --> | |
| <div class="step-card relative bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md transition duration-300 ease-in-out"> | |
| <div class="step-number">1</div> | |
| <h3 class="text-xl font-bold text-dark dark:text-white">Connect Your Repository</h3> | |
| <p class="mt-2 text-gray-600 dark:text-gray-300"> | |
| Link your GitHub, GitLab or Bitbucket account in just a few clicks. | |
| </p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="step-card relative bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md transition duration-300 ease-in-out"> | |
| <div class="step-number">2</div> | |
| <h3 class="text-xl font-bold text-dark dark:text-white">Automatic Analysis</h3> | |
| <p class="mt-2 text-gray-600 dark:text-gray-300"> | |
| Our AI scans your codebase for bugs, vulnerabilities and code smells. | |
| </p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="step-card relative bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md transition duration-300 ease-in-out"> | |
| <div class="step-number">3</div> | |
| <h3 class="text-xl font-bold text-dark dark:text-white">Get Actionable Insights</h3> | |
| <p class="mt-2 text-gray-600 dark:text-gray-300"> | |
| Receive detailed reports with prioritized fixes and automated solutions. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Section --> | |
| <div class="bg-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 gap-8 md:grid-cols-4"> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-primary">98%</div> | |
| <div class="text-gray-500 mt-2">Bug Detection Rate</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-secondary">10x</div> | |
| <div class="text-gray-500 mt-2">Faster Code Reviews</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-warning">500+</div> | |
| <div class="text-gray-500 mt-2">Security Rules</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-danger">24/7</div> | |
| <div class="text-gray-500 mt-2">Real-time Monitoring</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="py-16 bg-gray-50"> | |
| <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-dark sm:text-4xl"> | |
| Comprehensive Code Protection | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Our platform combines multiple analysis techniques to ensure your code is clean, secure, and performant. | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card relative bg-white p-8 rounded-lg shadow-md transition duration-300 ease-in-out"> | |
| <div class="absolute -top-6 left-6 bg-primary rounded-full p-3 text-white"> | |
| <i class="fas fa-bug text-xl"></i> | |
| </div> | |
| <h3 class="mt-4 text-xl font-bold text-dark">Bug Detection</h3> | |
| <p class="mt-2 text-gray-600"> | |
| Automatically identifies bugs and logic errors before they reach production, saving you time and headaches. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#" class="text-primary font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card relative bg-white p-8 rounded-lg shadow-md transition duration-300 ease-in-out"> | |
| <div class="absolute -top-6 left-6 bg-secondary rounded-full p-3 text-white"> | |
| <i class="fas fa-shield-alt text-xl"></i> | |
| </div> | |
| <h3 class="mt-4 text-xl font-bold text-dark">Security Scanning</h3> | |
| <p class="mt-2 text-gray-600"> | |
| Detects security vulnerabilities, including those listed in the OWASP Top 10, to protect your applications. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#" class="text-primary font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card relative bg-white p-8 rounded-lg shadow-md transition duration-300 ease-in-out"> | |
| <div class="absolute -top-6 left-6 bg-warning rounded-full p-3 text-white"> | |
| <i class="fas fa-code text-xl"></i> | |
| </div> | |
| <h3 class="mt-4 text-xl font-bold text-dark">Code Smells</h3> | |
| <p class="mt-2 text-gray-600"> | |
| Identifies bad practices and potential maintenance issues in your codebase to improve long-term quality. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#" class="text-primary font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card relative bg-white p-8 rounded-lg shadow-md transition duration-300 ease-in-out"> | |
| <div class="absolute -top-6 left-6 bg-danger rounded-full p-3 text-white"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <h3 class="mt-4 text-xl font-bold text-dark">AI-Powered Fixes</h3> | |
| <p class="mt-2 text-gray-600"> | |
| Provides intelligent suggestions to automatically fix detected issues with just one click. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#" class="text-primary font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card relative bg-white p-8 rounded-lg shadow-md transition duration-300 ease-in-out"> | |
| <div class="absolute -top-6 left-6 bg-primary rounded-full p-3 text-white"> | |
| <i class="fas fa-tachometer-alt text-xl"></i> | |
| </div> | |
| <h3 class="mt-4 text-xl font-bold text-dark">Performance Analysis</h3> | |
| <p class="mt-2 text-gray-600"> | |
| Identifies bottlenecks and helps optimize your code for better performance and scalability. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#" class="text-primary font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card relative bg-white p-8 rounded-lg shadow-md transition duration-300 ease-in-out"> | |
| <div class="absolute -top-6 left-6 bg-secondary rounded-full p-3 text-white"> | |
| <i class="fas fa-eye text-xl"></i> | |
| </div> | |
| <h3 class="mt-4 text-xl font-bold text-dark">Continuous Monitoring</h3> | |
| <p class="mt-2 text-gray-600"> | |
| Scans your code in real-time as you develop to catch issues early when they're easiest to fix. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#" class="text-primary font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Supported Languages --> | |
| <div class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Multi-Language Support</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-dark sm:text-4xl"> | |
| Works with Your Tech Stack | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| CodeGuardian supports all major programming languages and frameworks. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8"> | |
| <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50"> | |
| <i class="fab fa-js-square text-4xl text-yellow-400 mb-3"></i> | |
| <span class="font-medium">JavaScript</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50"> | |
| <i class="fab fa-python text-4xl text-blue-500 mb-3"></i> | |
| <span class="font-medium">Python</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50"> | |
| <i class="fab fa-java text-4xl text-red-500 mb-3"></i> | |
| <span class="font-medium">Java</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50"> | |
| <i class="fas fa-code text-4xl text-purple-500 mb-3"></i> | |
| <span class="font-medium">C#</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50"> | |
| <i class="fab fa-php text-4xl text-indigo-500 mb-3"></i> | |
| <span class="font-medium">PHP</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50"> | |
| <i class="fab fa-swift text-4xl text-orange-500 mb-3"></i> | |
| <span class="font-medium">Swift</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Demo Section --> | |
| <div class="bg-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"> | |
| <div class="mb-12 lg:mb-0"> | |
| <h2 class="text-3xl font-extrabold text-dark sm:text-4xl"> | |
| See CodeGuardian in Action | |
| </h2> | |
| <p class="mt-3 text-lg text-gray-500"> | |
| Our platform integrates seamlessly with your development workflow to provide real-time feedback and automated fixes. | |
| </p> | |
| <div class="mt-8"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-indigo-700"> | |
| Request Demo | |
| </a> | |
| </div> | |
| <div class="ml-3 inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Video | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="relative rounded-lg shadow-lg overflow-hidden"> | |
| <div class="bg-gray-800 p-4"> | |
| <div class="flex space-x-2"> | |
| <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> | |
| <div class="bg-gray-900 p-6 text-white font-mono text-sm"> | |
| <div class="flex"> | |
| <div class="text-gray-500 mr-4">1</div> | |
| <div><span class="text-purple-400">function</span> <span class="text-yellow-300">calculateTotal</span>(items) {</div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-gray-500 mr-4">2</div> | |
| <div class="ml-4"><span class="text-purple-400">let</span> total = <span class="text-green-400">0</span>;</div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-gray-500 mr-4">3</div> | |
| <div class="ml-4"><span class="text-purple-400">for</span> (<span class="text-purple-400">let</span> item <span class="text-purple-400">of</span> items) {</div> | |
| </div> | |
| <div class="flex bg-red-900 bg-opacity-30"> | |
| <div class="text-gray-500 mr-4">4</div> | |
| <div class="ml-8"><span class="text-red-400">// Warning: Potential SQL injection vulnerability</span></div> | |
| </div> | |
| <div class="flex bg-red-900 bg-opacity-30"> | |
| <div class="text-gray-500 mr-4">5</div> | |
| <div class="ml-8">total += item.price || <span class="text-green-400">0</span>;</div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-gray-500 mr-4">6</div> | |
| <div class="ml-4">}</div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-gray-500 mr-4">7</div> | |
| <div class="ml-4"><span class="text-purple-400">return</span> total;</div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-gray-500 mr-4">8</div> | |
| <div>}</div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-700"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-exclamation-triangle text-yellow-400 mr-2"></i> | |
| <span class="text-yellow-400">1 vulnerability found</span> | |
| </div> | |
| <div class="mt-2 flex items-center"> | |
| <i class="fas fa-lightbulb text-blue-400 mr-2"></i> | |
| <span>Suggested fix: Use parameterized queries</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pricing --> | |
| <div class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Pricing</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-dark sm:text-4xl"> | |
| Simple, Transparent Pricing | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Choose the plan that fits your team's needs. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Free Plan --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <div class="px-6 py-8"> | |
| <h3 class="text-2xl font-bold text-dark">Free</h3> | |
| <div class="mt-4"> | |
| <span class="text-4xl font-bold">$0</span> | |
| <span class="text-gray-500">/month</span> | |
| </div> | |
| <ul class="mt-6 space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Up to 3 users</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Basic code scanning</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>5 repositories</span> | |
| </li> | |
| </ul> | |
| <div class="mt-8"> | |
| <button class="w-full bg-gray-100 hover:bg-gray-200 text-dark py-3 px-4 rounded-md font-medium"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden border-2 border-primary"> | |
| <div class="bg-primary text-white text-center py-2"> | |
| <span class="font-medium">Most Popular</span> | |
| </div> | |
| <div class="px-6 py-8"> | |
| <h3 class="text-2xl font-bold text-dark">Pro</h3> | |
| <div class="mt-4"> | |
| <span class="text-4xl font-bold">$29</span> | |
| <span class="text-gray-500">/month</span> | |
| </div> | |
| <ul class="mt-6 space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Up to 10 users</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Advanced scanning</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Unlimited repositories</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Priority support</span> | |
| </li> | |
| </ul> | |
| <div class="mt-8"> | |
| <button class="w-full bg-primary hover:bg-indigo-700 text-white py-3 px-4 rounded-md font-medium"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <div class="px-6 py-8"> | |
| <h3 class="text-2xl font-bold text-dark">Enterprise</h3> | |
| <div class="mt-4"> | |
| <span class="text-4xl font-bold">Custom</span> | |
| </div> | |
| <ul class="mt-6 space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Unlimited users</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Enterprise-grade security</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>On-premises option</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Dedicated support</span> | |
| </li> | |
| </ul> | |
| <div class="mt-8"> | |
| <button class="w-full bg-gray-800 hover:bg-gray-900 text-white py-3 px-4 rounded-md font-medium"> | |
| Contact Sales | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="bg-gray-100 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Testimonials</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-dark sm:text-4xl"> | |
| Trusted by developers worldwide | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson"> | |
| <div> | |
| <h4 class="text-lg font-semibold">Sarah Johnson</h4> | |
| <p class="text-gray-500">Senior Developer @TechCorp</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "CodeGuardian has reduced our bug rate by 80% and cut our security review time in half. The AI-powered fixes are incredibly accurate." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen"> | |
| <div> | |
| <h4 class="text-lg font-semibold">Michael Chen</h4> | |
| <p class="text-gray-500">CTO @StartUpX</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "As a small team, we can't afford security mistakes. CodeGuardian gives us enterprise-grade protection without the enterprise price tag." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez"> | |
| <div> | |
| <h4 class="text-lg font-semibold">Emma Rodriguez</h4> | |
| <p class="text-gray-500">Lead Architect @GlobalBank</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "The performance analysis tools helped us identify bottlenecks we didn't even know existed. Our APIs are now 40% faster." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Integrations --> | |
| <div class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Integrations</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-dark sm:text-4xl"> | |
| Works with Your Favorite Tools | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Seamlessly integrate CodeGuardian into your existing workflow. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8"> | |
| <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50"> | |
| <img src="https://cdn.worldvectorlogo.com/logos/github-icon-1.svg" alt="GitHub" class="h-12 w-12 mb-3"> | |
| <span class="font-medium">GitHub</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50"> | |
| <img src="https://cdn.worldvectorlogo.com/logos/gitlab.svg" alt="GitLab" class="h-12 w-12 mb-3"> | |
| <span class="font-medium">GitLab</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50"> | |
| <img src="https://cdn.worldvectorlogo.com/logos/bitbucket.svg" alt="Bitbucket" class="h-12 w-12 mb-3"> | |
| <span class="font-medium">Bitbucket</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50"> | |
| <img src="https://cdn.worldvectorlogo.com/logos/jira-1.svg" alt="Jira" class="h-12 w-12 mb-3"> | |
| <span class="font-medium">Jira</span> | |
| </div> | |
| <div class="flex flex-col items-center p-6 rounded-lg hover:bg-gray-50"> | |
| <img src="https://cdn.worldvectorlogo.com/logos/slack-new-logo.svg" alt="Slack" class="h-12 w-12 mb-3"> | |
| <span class="font-medium">Slack</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-primary text-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> | |
| <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl"> | |
| <span class="block">Ready to improve your code quality?</span> | |
| <span class="block text-primary-200">Start your free 14-day trial today.</span> | |
| </h2> | |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50"> | |
| Get started | |
| </a> | |
| </div> | |
| <div class="ml-3 inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700"> | |
| Contact sales | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-gray-300"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Product</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Features</a></li> | |
| <li><a href="#" class="hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="hover:text-white">Integrations</a></li> | |
| <li><a href="#" class="hover:text-white">Changelog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="hover:text-white">API Reference</a></li> | |
| <li><a href="#" class="hover:text-white">Community</a></li> | |
| <li><a href="#" class="hover:text-white">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">About</a></li> | |
| <li><a href="#" class="hover:text-white">Careers</a></li> | |
| <li><a href="#" class="hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="hover:text-white">Terms</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-white"><i class="fab fa-github"></i></a> | |
| <a href="#" class="hover:text-white"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="hover:text-white"><i class="fab fa-discord"></i></a> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-sm">Subscribe to our newsletter</p> | |
| <form class="mt-2 space-y-2"> | |
| <input type="email" placeholder="Your email" required | |
| class="px-3 py-2 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-1 focus:ring-primary w-full"> | |
| <button type="submit" | |
| class="bg-primary text-white px-4 py-2 rounded-md hover:bg-indigo-700 w-full transition duration-300 ease-in-out transform hover:scale-105"> | |
| Subscribe | |
| </button> | |
| </form> | |
| <p class="mt-2 text-xs text-gray-500">We'll never share your email. Unsubscribe anytime.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between"> | |
| <p class="text-sm">© 2023 CodeGuardian. All rights reserved.</p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-sm hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-sm hover:text-white">Terms of Service</a> | |
| <a href="#" class="text-sm hover:text-white">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Enhanced mobile menu with animations | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]'); | |
| if (!mobileMenuButton) return; | |
| const mobileMenu = document.createElement('div'); | |
| mobileMenu.id = 'mobile-menu'; | |
| mobileMenu.className = 'hidden sm:hidden bg-white dark:bg-gray-800 shadow-lg transform transition-all duration-300 ease-in-out origin-top'; | |
| mobileMenu.innerHTML = ` | |
| <div class="px-2 pt-2 pb-3 space-y-1"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-dark dark:text-white bg-gray-100 dark:bg-gray-700">Home</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 dark:text-gray-300 hover:text-dark dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Features</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 dark:text-gray-300 hover:text-dark dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Pricing</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 dark:text-gray-300 hover:text-dark dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Docs</a> | |
| <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center px-5 space-x-4"> | |
| <label class="dark-toggle"> | |
| <input type="checkbox" id="mobileDarkModeToggle"> | |
| <span class="slider"></span> | |
| </label> | |
| <button class="bg-primary hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium w-full"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| document.querySelector('nav').appendChild(mobileMenu); | |
| // Sync mobile dark mode toggle with main one | |
| const mainToggle = document.getElementById('darkModeToggle'); | |
| const mobileToggle = document.getElementById('mobileDarkModeToggle'); | |
| if (mainToggle && mobileToggle) { | |
| mobileToggle.checked = mainToggle.checked; | |
| mobileToggle.addEventListener('change', () => { | |
| mainToggle.checked = mobileToggle.checked; | |
| mainToggle.dispatchEvent(new Event('change')); | |
| }); | |
| } | |
| mobileMenuButton.addEventListener('click', function() { | |
| const expanded = this.getAttribute('aria-expanded') === 'true' || false; | |
| this.setAttribute('aria-expanded', !expanded); | |
| if (!expanded) { | |
| mobileMenu.classList.remove('hidden'); | |
| mobileMenu.style.transform = 'scaleY(0)'; | |
| setTimeout(() => { | |
| mobileMenu.style.transform = 'scaleY(1)'; | |
| }, 10); | |
| } else { | |
| mobileMenu.style.transform = 'scaleY(0)'; | |
| setTimeout(() => { | |
| mobileMenu.classList.add('hidden'); | |
| }, 300); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=tutosutiles/codeguardian" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |