Darren Hinde
GitHub
commit
0d97547656
4 changed files with 849 additions and 94 deletions
2
.github/workflows/opencode.yml
vendored
2
.github/workflows/opencode.yml
vendored
|
|
@ -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
|
||||
|
|
@ -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:
|
||||
|
||||
|
|
|
|||
334
src/main.js
334
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.
|
||||
</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>
|
||||
<header class="header">
|
||||
<nav class="nav">
|
||||
<div class="nav-brand">
|
||||
<span class="nav-logo">🤖</span>
|
||||
<span class="nav-title">OpenCode Agents</span>
|
||||
</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>
|
||||
<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="feature">
|
||||
<div class="feature-icon">📝</div>
|
||||
<h3>Documentation</h3>
|
||||
<p>Intelligent documentation generation and maintenance for your projects.</p>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 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>
|
||||
</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);
|
||||
});
|
||||
606
src/style.css
606
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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue