Merge pull request #6 from darrenhinde/workflow-test

PR agent

.github/workflows/opencode.yml

@@ -26,4 +26,4 @@ jobs:
         env:
           ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
         with:
-          model: claude-3-5-sonnet-20241022
+          model: anthropic/claude-sonnet-4-20250514

.opencode/agent/reviewer.md

@@ -25,6 +25,7 @@ Responsibilities:
 - Check alignment with naming conventions and modular patterns
 - Identify and flag potential security vulnerabilities (e.g., XSS, injection, insecure dependencies)
 - Flag potential performance and maintainability issues
+- First sentence should be Start with "Reviewing..., what would you devs do if I didn't check up on you?"
 
 Workflow:
 

src/main.js

@@ -1,35 +1,319 @@
 import './style.css'
 
 document.querySelector('#app').innerHTML = `
-  <div class="container">
-    <div class="logo">🤖 OpenCode Agents</div>
-    <div class="tagline">Intelligent AI Agents for Development</div>
-    <div class="description">
-      Powerful AI agents designed to assist with software development, code review, testing, and documentation. 
-      Built to enhance developer productivity and streamline development workflows.
+  <header class="header">
+    <nav class="nav">
+      <div class="nav-brand">
+        <span class="nav-logo">🤖</span>
+        <span class="nav-title">OpenCode Agents</span>
+      </div>
+      <ul class="nav-menu">
+        <li><a href="#features">Features</a></li>
+        <li><a href="#pricing">Pricing</a></li>
+        <li><a href="#docs">Docs</a></li>
+        <li><a href="#contact">Contact</a></li>
+      </ul>
+      <button class="nav-cta">Get Started</button>
+    </nav>
+  </header>
+
+  <main>
+    <section class="hero">
+      <div class="hero-content">
+        <h1 class="hero-title">
+          Supercharge Your Development<br>
+          <span class="hero-highlight">with AI Agents</span>
+        </h1>
+        <p class="hero-subtitle">
+          Transform your coding workflow with intelligent AI agents that understand your codebase,
+          write tests, generate documentation, and accelerate development by 3x.
+        </p>
+        <div class="hero-stats">
+          <div class="stat">
+            <div class="stat-number">10K+</div>
+            <div class="stat-label">Developers</div>
+          </div>
+          <div class="stat">
+            <div class="stat-number">500K+</div>
+            <div class="stat-label">Lines of Code</div>
+          </div>
+          <div class="stat">
+            <div class="stat-number">99.9%</div>
+            <div class="stat-label">Uptime</div>
+          </div>
+        </div>
+        <div class="hero-actions">
+          <button class="cta-button primary" id="get-started">Start Free Trial</button>
+          <button class="cta-button secondary" id="watch-demo">Watch Demo</button>
+        </div>
+        <div class="hero-trust">
+          <span class="trust-text">Trusted by teams at</span>
+          <div class="trust-logos">
+            <span class="trust-logo">🏢 TechCorp</span>
+            <span class="trust-logo">🚀 StartupXYZ</span>
+            <span class="trust-logo">💡 InnovateLab</span>
+          </div>
+        </div>
+      </div>
+      <div class="hero-visual">
+        <div class="code-preview">
+          <div class="code-line">function analyzeCode(codebase) {</div>
+          <div class="code-line indent">  const patterns = AI.analyze(codebase);</div>
+          <div class="code-line indent">  const suggestions = AI.optimize(patterns);</div>
+          <div class="code-line indent">  return suggestions;</div>
+          <div class="code-line">}</div>
+        </div>
+      </div>
+    </section>
+
+    <section id="features" class="features-section">
+      <div class="section-header">
+        <h2>Powerful Features for Modern Development</h2>
+        <p>Everything you need to build better software, faster</p>
+      </div>
+
+      <div class="features-grid">
+        <div class="feature-card">
+          <div class="feature-icon">🔍</div>
+          <h3>Smart Code Analysis</h3>
+          <p>Advanced AI analyzes your entire codebase to identify patterns, potential bugs, and optimization opportunities in real-time.</p>
+          <ul class="feature-benefits">
+            <li>Pattern recognition across languages</li>
+            <li>Security vulnerability detection</li>
+            <li>Performance bottleneck identification</li>
+          </ul>
+        </div>
+
+        <div class="feature-card">
+          <div class="feature-icon">🧪</div>
+          <h3>Automated Testing</h3>
+          <p>Generate comprehensive test suites automatically with AI-powered test case creation and TDD workflow support.</p>
+          <ul class="feature-benefits">
+            <li>Unit, integration, and E2E tests</li>
+            <li>Edge case coverage</li>
+            <li>Test maintenance automation</li>
+          </ul>
+        </div>
+
+        <div class="feature-card">
+          <div class="feature-icon">📝</div>
+          <h3>Intelligent Documentation</h3>
+          <p>Create, maintain, and update documentation automatically as your code evolves with contextual understanding.</p>
+          <ul class="feature-benefits">
+            <li>API documentation generation</li>
+            <li>Code comment suggestions</li>
+            <li>README and changelog updates</li>
+          </ul>
+        </div>
+
+        <div class="feature-card">
+          <div class="feature-icon">🔄</div>
+          <h3>Code Refactoring</h3>
+          <p>AI-powered refactoring suggestions to improve code quality, maintainability, and follow best practices.</p>
+          <ul class="feature-benefits">
+            <li>Automated code improvements</li>
+            <li>Design pattern suggestions</li>
+            <li>Legacy code modernization</li>
+          </ul>
+        </div>
+
+        <div class="feature-card">
+          <div class="feature-icon">🤝</div>
+          <h3>Team Collaboration</h3>
+          <p>Seamlessly integrate with your existing workflow and collaborate with team members through shared AI insights.</p>
+          <ul class="feature-benefits">
+            <li>Git integration</li>
+            <li>Team code reviews</li>
+            <li>Knowledge sharing</li>
+          </ul>
+        </div>
+
+        <div class="feature-card">
+          <div class="feature-icon">⚡</div>
+          <h3>Performance Optimization</h3>
+          <p>Identify and fix performance issues automatically with AI-driven optimization recommendations.</p>
+          <ul class="feature-benefits">
+            <li>Memory optimization</li>
+            <li>Query optimization</li>
+            <li>Load time improvements</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <section class="testimonials">
+      <div class="section-header">
+        <h2>Loved by Developers Worldwide</h2>
+        <p>See what our community is saying</p>
+      </div>
+
+      <div class="testimonials-grid">
+        <div class="testimonial-card">
+          <div class="testimonial-content">
+            "OpenCode Agents reduced our development time by 60% and improved code quality dramatically."
+          </div>
+          <div class="testimonial-author">
+            <div class="author-avatar">👨‍💻</div>
+            <div class="author-info">
+              <div class="author-name">Sarah Chen</div>
+              <div class="author-role">Senior Developer, TechCorp</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="testimonial-card">
+          <div class="testimonial-content">
+            "The AI suggestions are incredibly accurate. It's like having an expert pair programmer available 24/7."
+          </div>
+          <div class="testimonial-author">
+            <div class="author-avatar">👩‍💼</div>
+            <div class="author-info">
+              <div class="author-name">Mike Rodriguez</div>
+              <div class="author-role">Lead Engineer, StartupXYZ</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="testimonial-card">
+          <div class="testimonial-content">
+            "Documentation that stays up-to-date automatically? Game changer for our open source projects."
+          </div>
+          <div class="testimonial-author">
+            <div class="author-avatar">🧑‍🔬</div>
+            <div class="author-info">
+              <div class="author-name">Dr. Emily Watson</div>
+              <div class="author-role">Research Scientist, InnovateLab</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <div class="footer-content">
+      <div class="footer-section">
+        <h4>🤖 OpenCode Agents</h4>
+        <p>Empowering developers with intelligent AI assistance for better software development.</p>
+      </div>
+
+      <div class="footer-section">
+        <h4>Product</h4>
+        <ul>
+          <li><a href="#features">Features</a></li>
+          <li><a href="#pricing">Pricing</a></li>
+          <li><a href="#docs">Documentation</a></li>
+          <li><a href="#api">API</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-section">
+        <h4>Company</h4>
+        <ul>
+          <li><a href="#about">About</a></li>
+          <li><a href="#blog">Blog</a></li>
+          <li><a href="#careers">Careers</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-section">
+        <h4>Support</h4>
+        <ul>
+          <li><a href="#help">Help Center</a></li>
+          <li><a href="#community">Community</a></li>
+          <li><a href="#status">Status</a></li>
+          <li><a href="#feedback">Feedback</a></li>
+        </ul>
+      </div>
     </div>
-    <button class="cta-button" id="get-started">Get Started</button>
-    
-    <div class="features">
-      <div class="feature">
-        <div class="feature-icon">🔍</div>
-        <h3>Code Analysis</h3>
-        <p>Advanced pattern analysis and codebase understanding to help you write better code.</p>
-      </div>
-      <div class="feature">
-        <div class="feature-icon">🧪</div>
-        <h3>Test Generation</h3>
-        <p>Automated test creation and TDD support to ensure code quality and reliability.</p>
-      </div>
-      <div class="feature">
-        <div class="feature-icon">📝</div>
-        <h3>Documentation</h3>
-        <p>Intelligent documentation generation and maintenance for your projects.</p>
+
+    <div class="footer-bottom">
+      <p>&copy; 2024 OpenCode Agents. All rights reserved.</p>
+      <div class="footer-links">
+        <a href="#privacy">Privacy Policy</a>
+        <a href="#terms">Terms of Service</a>
       </div>
     </div>
-  </div>
+  </footer>
 `
 
+// Event listeners for interactive elements
 document.querySelector('#get-started').addEventListener('click', () => {
-  alert('Welcome to OpenCode Agents! 🚀')
-})
+  // Smooth scroll to features section
+  document.querySelector('#features').scrollIntoView({
+    behavior: 'smooth'
+  });
+});
+
+document.querySelector('#watch-demo').addEventListener('click', () => {
+  alert('🎬 Demo video coming soon! In the meantime, explore our features below.');
+});
+
+// Navigation smooth scrolling
+document.querySelectorAll('.nav-menu a').forEach(link => {
+  link.addEventListener('click', (e) => {
+    e.preventDefault();
+    const targetId = link.getAttribute('href');
+    const targetSection = document.querySelector(targetId);
+    if (targetSection) {
+      targetSection.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  });
+});
+
+// Header scroll effect
+let lastScrollTop = 0;
+const header = document.querySelector('.header');
+
+window.addEventListener('scroll', () => {
+  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+  if (scrollTop > lastScrollTop && scrollTop > 100) {
+    // Scrolling down
+    header.style.transform = 'translateY(-100%)';
+  } else {
+    // Scrolling up
+    header.style.transform = 'translateY(0)';
+  }
+
+  lastScrollTop = scrollTop;
+});
+
+// Add intersection observer for animations
+const observerOptions = {
+  threshold: 0.1,
+  rootMargin: '0px 0px -50px 0px'
+};
+
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      entry.target.style.opacity = '1';
+      entry.target.style.transform = 'translateY(0)';
+    }
+  });
+}, observerOptions);
+
+// Observe feature cards and testimonial cards
+document.querySelectorAll('.feature-card, .testimonial-card').forEach(card => {
+  card.style.opacity = '0';
+  card.style.transform = 'translateY(30px)';
+  card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+  observer.observe(card);
+});
+
+// Add loading animation for hero content
+document.addEventListener('DOMContentLoaded', () => {
+  const heroContent = document.querySelector('.hero-content');
+  heroContent.style.opacity = '0';
+  heroContent.style.transform = 'translateY(30px)';
+
+  setTimeout(() => {
+    heroContent.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
+    heroContent.style.opacity = '1';
+    heroContent.style.transform = 'translateY(0)';
+  }, 300);
+});

src/style.css

@@ -1,3 +1,4 @@
+/* Reset and Base Styles */
 * {
     margin: 0;
     padding: 0;
@@ -5,111 +6,580 @@
 }
 
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     line-height: 1.6;
-    color: #333;
+    color: #1a1a1a;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    overflow-x: hidden;
 }
 
-.container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 2rem;
-    text-align: center;
+/* Header Styles */
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
     background: rgba(255, 255, 255, 0.95);
-    border-radius: 20px;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    z-index: 1000;
+    transition: all 0.3s ease;
 }
 
-.logo {
-    font-size: 3rem;
-    font-weight: bold;
-    color: #764ba2;
-    margin-bottom: 1rem;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+.nav {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
-.tagline {
+.nav-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
     font-size: 1.5rem;
+    font-weight: 700;
+    color: #764ba2;
+}
+
+.nav-logo {
+    font-size: 1.8rem;
+}
+
+.nav-title {
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.nav-menu {
+    display: flex;
+    list-style: none;
+    gap: 2rem;
+}
+
+.nav-menu a {
+    text-decoration: none;
     color: #666;
-    margin-bottom: 2rem;
-    font-weight: 300;
+    font-weight: 500;
+    transition: color 0.3s ease;
 }
 
-.description {
-    font-size: 1.1rem;
-    color: #555;
-    margin-bottom: 2.5rem;
-    max-width: 600px;
-    margin-left: auto;
-    margin-right: auto;
+.nav-menu a:hover {
+    color: #764ba2;
 }
 
-.cta-button {
-    display: inline-block;
+.nav-cta {
     background: linear-gradient(45deg, #667eea, #764ba2);
     color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 25px;
+    border: none;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.nav-cta:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+}
+
+/* Main Content */
+main {
+    margin-top: 80px;
+}
+
+/* Hero Section */
+.hero {
+    min-height: 90vh;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 4rem 2rem;
+}
+
+.hero-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.hero-title {
+    font-size: 3.5rem;
+    font-weight: 800;
+    line-height: 1.1;
+    color: white;
+}
+
+.hero-highlight {
+    background: linear-gradient(45deg, #ffd89b, #19547b);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-subtitle {
+    font-size: 1.25rem;
+    color: rgba(255, 255, 255, 0.9);
+    max-width: 500px;
+    line-height: 1.6;
+}
+
+.hero-stats {
+    display: flex;
+    gap: 3rem;
+    margin: 2rem 0;
+}
+
+.stat {
+    text-align: center;
+}
+
+.stat-number {
+    font-size: 2.5rem;
+    font-weight: 800;
+    color: white;
+    display: block;
+}
+
+.stat-label {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.8);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-top: 0.5rem;
+}
+
+.hero-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.cta-button {
     padding: 1rem 2rem;
-    text-decoration: none;
     border-radius: 50px;
     font-weight: 600;
     font-size: 1.1rem;
-    transition: all 0.3s ease;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     border: none;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    display: inline-block;
+    text-align: center;
 }
 
-.cta-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
+.cta-button.primary {
+    background: linear-gradient(45deg, #ffd89b, #19547b);
+    color: white;
+    box-shadow: 0 10px 30px rgba(255, 216, 155, 0.3);
 }
 
-.features {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+.cta-button.primary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 20px 40px rgba(255, 216, 155, 0.4);
+}
+
+.cta-button.secondary {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(10px);
+}
+
+.cta-button.secondary:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+.hero-trust {
+    margin-top: 2rem;
+    padding-top: 2rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.trust-text {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+    display: block;
+}
+
+.trust-logos {
+    display: flex;
     gap: 2rem;
-    margin-top: 3rem;
+    flex-wrap: wrap;
 }
 
-.feature {
-    padding: 1.5rem;
-    background: rgba(255, 255, 255, 0.8);
+.trust-logo {
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.hero-visual {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.code-preview {
+    background: rgba(0, 0, 0, 0.8);
     border-radius: 15px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 2rem;
+    font-family: 'Fira Code', monospace;
+    font-size: 1.1rem;
+    line-height: 1.6;
+    color: #e6e6e6;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    animation: codeGlow 2s ease-in-out infinite alternate;
 }
 
-.feature-icon {
+.code-line {
+    margin-bottom: 0.5rem;
+}
+
+.code-line.indent {
+    margin-left: 2rem;
+}
+
+@keyframes codeGlow {
+    from {
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    }
+    to {
+        box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
+    }
+}
+
+/* Features Section */
+.features-section {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 6rem 2rem;
+    backdrop-filter: blur(10px);
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 4rem;
+}
+
+.section-header h2 {
     font-size: 2.5rem;
+    font-weight: 700;
+    color: #1a1a1a;
     margin-bottom: 1rem;
 }
 
-.feature h3 {
+.section-header p {
+    font-size: 1.2rem;
+    color: #666;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.feature-card {
+    background: white;
+    padding: 2rem;
+    border-radius: 20px;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.feature-card:hover::before {
+    transform: scaleX(1);
+}
+
+.feature-icon {
+    font-size: 3rem;
+    margin-bottom: 1.5rem;
+    display: block;
+}
+
+.feature-card h3 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #1a1a1a;
+    margin-bottom: 1rem;
+}
+
+.feature-card p {
+    color: #666;
+    margin-bottom: 1.5rem;
+    line-height: 1.6;
+}
+
+.feature-benefits {
+    list-style: none;
+    padding: 0;
+}
+
+.feature-benefits li {
+    color: #555;
     margin-bottom: 0.5rem;
-    color: #764ba2;
+    padding-left: 1.5rem;
+    position: relative;
 }
 
-.feature p {
+.feature-benefits li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: #667eea;
+    font-weight: bold;
+}
+
+/* Testimonials Section */
+.testimonials {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    padding: 6rem 2rem;
+}
+
+.testimonials-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.testimonial-card {
+    background: white;
+    padding: 2rem;
+    border-radius: 15px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.testimonial-content {
+    font-size: 1.1rem;
+    color: #555;
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+    font-style: italic;
+}
+
+.testimonial-author {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.author-avatar {
+    font-size: 2rem;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.author-info {
+    flex: 1;
+}
+
+.author-name {
+    font-weight: 600;
+    color: #1a1a1a;
+}
+
+.author-role {
+    font-size: 0.9rem;
     color: #666;
-    font-size: 0.95rem;
+}
+
+/* Footer */
+.footer {
+    background: #1a1a1a;
+    color: white;
+    padding: 4rem 2rem 2rem;
+}
+
+.footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr 1fr;
+    gap: 3rem;
+    margin-bottom: 2rem;
+}
+
+.footer-section h4 {
+    color: white;
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
+}
+
+.footer-section p {
+    color: #ccc;
+    line-height: 1.6;
+    margin-bottom: 1rem;
+}
+
+.footer-section ul {
+    list-style: none;
+}
+
+.footer-section ul li {
+    margin-bottom: 0.5rem;
+}
+
+.footer-section ul li a {
+    color: #ccc;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-section ul li a:hover {
+    color: #667eea;
+}
+
+.footer-bottom {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding-top: 2rem;
+    border-top: 1px solid #333;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.footer-bottom p {
+    color: #ccc;
+    font-size: 0.9rem;
+}
+
+.footer-links {
+    display: flex;
+    gap: 2rem;
+}
+
+.footer-links a {
+    color: #ccc;
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: color 0.3s ease;
+}
+
+.footer-links a:hover {
+    color: #667eea;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .hero {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+        text-align: center;
+    }
+
+    .hero-stats {
+        justify-content: center;
+    }
+
+    .footer-content {
+        grid-template-columns: 1fr 1fr;
+        gap: 2rem;
+    }
 }
 
 @media (max-width: 768px) {
-    .container {
-        margin: 1rem;
-        padding: 1.5rem;
+    .nav {
+        padding: 1rem;
     }
-    
-    .logo {
-        font-size: 2rem;
+
+    .nav-menu {
+        display: none;
     }
-    
-    .tagline {
-        font-size: 1.2rem;
+
+    .hero {
+        padding: 2rem 1rem;
+    }
+
+    .hero-title {
+        font-size: 2.5rem;
+    }
+
+    .hero-stats {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .testimonials-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .footer-content {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+
+    .footer-bottom {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .footer-links {
+        justify-content: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero-actions {
+        flex-direction: column;
+    }
+
+    .cta-button {
+        width: 100%;
+    }
+
+    .trust-logos {
+        justify-content: center;
     }
 }