diff --git a/.github/workflows/opencode.yml b/.github/workflows/opencode.yml index c796982..7204c3c 100644 --- a/.github/workflows/opencode.yml +++ b/.github/workflows/opencode.yml @@ -26,4 +26,4 @@ jobs: env: ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }} with: - model: claude-3-5-sonnet-20241022 \ No newline at end of file + model: anthropic/claude-sonnet-4-20250514 \ No newline at end of file diff --git a/.opencode/agent/reviewer.md b/.opencode/agent/reviewer.md index 0b3eee9..8be7ac4 100644 --- a/.opencode/agent/reviewer.md +++ b/.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: diff --git a/src/main.js b/src/main.js index 97d06c1..98e597f 100644 --- a/src/main.js +++ b/src/main.js @@ -1,35 +1,319 @@ import './style.css' document.querySelector('#app').innerHTML = ` -
- -
Intelligent AI Agents for Development
-
- Powerful AI agents designed to assist with software development, code review, testing, and documentation. - Built to enhance developer productivity and streamline development workflows. -
- - -
-
-
๐Ÿ”
-

Code Analysis

-

Advanced pattern analysis and codebase understanding to help you write better code.

+
+ +
+ +
+
+
+

+ Supercharge Your Development
+ with AI Agents +

+

+ Transform your coding workflow with intelligent AI agents that understand your codebase, + write tests, generate documentation, and accelerate development by 3x. +

+
+
+
10K+
+
Developers
+
+
+
500K+
+
Lines of Code
+
+
+
99.9%
+
Uptime
+
+
+
+ + +
+
+ Trusted by teams at +
+ + + +
+
-
-
๐Ÿ“
-

Documentation

-

Intelligent documentation generation and maintenance for your projects.

+
+
+
function analyzeCode(codebase) {
+
const patterns = AI.analyze(codebase);
+
const suggestions = AI.optimize(patterns);
+
return suggestions;
+
}
+
+
+
+ +
+
+

Powerful Features for Modern Development

+

Everything you need to build better software, faster

+
+ +
+
+
๐Ÿ”
+

Smart Code Analysis

+

Advanced AI analyzes your entire codebase to identify patterns, potential bugs, and optimization opportunities in real-time.

+
    +
  • Pattern recognition across languages
    • +
  • Security vulnerability detection
    • +
  • Performance bottleneck identification
    • +
+
+ +
+
๐Ÿงช
+

Automated Testing

+

Generate comprehensive test suites automatically with AI-powered test case creation and TDD workflow support.

+
    +
  • Unit, integration, and E2E tests
    • +
  • Edge case coverage
    • +
  • Test maintenance automation
    • +
+
+ +
+
๐Ÿ“
+

Intelligent Documentation

+

Create, maintain, and update documentation automatically as your code evolves with contextual understanding.

+
    +
  • API documentation generation
    • +
  • Code comment suggestions
    • +
  • README and changelog updates
    • +
+
+ +
+
๐Ÿ”„
+

Code Refactoring

+

AI-powered refactoring suggestions to improve code quality, maintainability, and follow best practices.

+
    +
  • Automated code improvements
    • +
  • Design pattern suggestions
    • +
  • Legacy code modernization
    • +
+
+ +
+
๐Ÿค
+

Team Collaboration

+

Seamlessly integrate with your existing workflow and collaborate with team members through shared AI insights.

+
    +
  • Git integration
    • +
  • Team code reviews
    • +
  • Knowledge sharing
    • +
+
+ +
+
โšก
+

Performance Optimization

+

Identify and fix performance issues automatically with AI-driven optimization recommendations.

+
    +
  • Memory optimization
    • +
  • Query optimization
    • +
  • Load time improvements
    • +
+
+
+
+ +
+
+

Loved by Developers Worldwide

+

See what our community is saying

+
+ +
+
+
+ "OpenCode Agents reduced our development time by 60% and improved code quality dramatically." +
+
+
๐Ÿ‘จโ€๐Ÿ’ป
+
+
Sarah Chen
+
Senior Developer, TechCorp
+
+
+
+ +
+
+ "The AI suggestions are incredibly accurate. It's like having an expert pair programmer available 24/7." +
+
+
๐Ÿ‘ฉโ€๐Ÿ’ผ
+
+
Mike Rodriguez
+
Lead Engineer, StartupXYZ
+
+
+
+ +
+
+ "Documentation that stays up-to-date automatically? Game changer for our open source projects." +
+
+
๐Ÿง‘โ€๐Ÿ”ฌ
+
+
Dr. Emily Watson
+
Research Scientist, InnovateLab
+
+
+
+
+
+
+ +
+ +
+

© 2024 OpenCode Agents. All rights reserved.

+
+ Privacy Policy + Terms of Service +
+
+ ` +// Event listeners for interactive elements document.querySelector('#get-started').addEventListener('click', () => { - alert('Welcome to OpenCode Agents! ๐Ÿš€') -}) \ No newline at end of file + // 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); +}); \ No newline at end of file diff --git a/src/style.css b/src/style.css index 727e2fd..5cbb9cd 100644 --- a/src/style.css +++ b/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; + overflow-x: hidden; +} + +/* Header Styles */ +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + z-index: 1000; + transition: all 0.3s ease; +} + +.nav { + max-width: 1200px; + margin: 0 auto; + padding: 1rem 2rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.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; + font-weight: 500; + transition: color 0.3s ease; +} + +.nav-menu a:hover { + color: #764ba2; +} + +.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; + border-radius: 50px; + font-weight: 600; + font-size: 1.1rem; + cursor: pointer; + border: none; + transition: all 0.3s ease; + text-decoration: none; + display: inline-block; + text-align: center; +} + +.cta-button.primary { + background: linear-gradient(45deg, #ffd89b, #19547b); + color: white; + box-shadow: 0 10px 30px rgba(255, 216, 155, 0.3); +} + +.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; + flex-wrap: wrap; +} + +.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; } -.container { - max-width: 800px; - margin: 0 auto; +.code-preview { + background: rgba(0, 0, 0, 0.8); + border-radius: 15px; padding: 2rem; - text-align: center; + 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; +} + +.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); - border-radius: 20px; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + padding: 6rem 2rem; backdrop-filter: blur(10px); } -.logo { - font-size: 3rem; - font-weight: bold; - color: #764ba2; +.section-header { + text-align: center; + margin-bottom: 4rem; +} + +.section-header h2 { + font-size: 2.5rem; + font-weight: 700; + color: #1a1a1a; margin-bottom: 1rem; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } -.tagline { - font-size: 1.5rem; +.section-header p { + font-size: 1.2rem; color: #666; - margin-bottom: 2rem; - font-weight: 300; -} - -.description { - font-size: 1.1rem; - color: #555; - margin-bottom: 2.5rem; max-width: 600px; - margin-left: auto; - margin-right: auto; + margin: 0 auto; } -.cta-button { - display: inline-block; - background: linear-gradient(45deg, #667eea, #764ba2); - color: white; - 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; -} - -.cta-button:hover { - transform: translateY(-2px); - box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); -} - -.features { +.features-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; - margin-top: 3rem; + max-width: 1200px; + margin: 0 auto; } -.feature { - padding: 1.5rem; - background: rgba(255, 255, 255, 0.8); - border-radius: 15px; - border: 1px solid rgba(255, 255, 255, 0.2); +.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: 2.5rem; + 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 h3 { - margin-bottom: 0.5rem; - color: #764ba2; +.feature-card p { + color: #666; + margin-bottom: 1.5rem; + line-height: 1.6; } -.feature p { +.feature-benefits { + list-style: none; + padding: 0; +} + +.feature-benefits li { + color: #555; + margin-bottom: 0.5rem; + padding-left: 1.5rem; + position: relative; +} + +.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; } } \ No newline at end of file