suna/backend/agent/workspace/index.html

233 lines
9.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Innovative Solutions | Transform Your Business</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<div class="logo">
<h1>InnovateTech</h1>
</div>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#benefits">Benefits</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact" class="cta-button">Get Started</a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<header class="hero">
<div class="container">
<div class="hero-content">
<h1>Transform Your Business with Smart Solutions</h1>
<p>Empower your company with cutting-edge technology and innovative strategies that drive growth.</p>
<div class="cta-buttons">
<a href="#contact" class="primary-button">Start Free Trial</a>
<a href="#demo" class="secondary-button">Watch Demo</a>
</div>
</div>
<div class="hero-image">
<img src="https://via.placeholder.com/600x400" alt="Business Innovation">
</div>
</div>
</header>
<!-- Features Section -->
<section id="features" class="features">
<div class="container">
<h2>Why Choose Us</h2>
<div class="features-grid">
<div class="feature-card">
<i class="fas fa-rocket"></i>
<h3>Fast Implementation</h3>
<p>Get up and running quickly with our streamlined onboarding process.</p>
</div>
<div class="feature-card">
<i class="fas fa-shield-alt"></i>
<h3>Secure & Reliable</h3>
<p>Enterprise-grade security to protect your valuable business data.</p>
</div>
<div class="feature-card">
<i class="fas fa-chart-line"></i>
<h3>Scalable Solution</h3>
<p>Grow your business with a platform that scales with your needs.</p>
</div>
<div class="feature-card">
<i class="fas fa-headset"></i>
<h3>24/7 Support</h3>
<p>Round-the-clock support to help you succeed.</p>
</div>
</div>
</div>
</section>
<!-- Benefits Section -->
<section id="benefits" class="benefits">
<div class="container">
<h2>Benefits That Drive Success</h2>
<div class="benefits-container">
<div class="benefit-content">
<h3>Increase Productivity</h3>
<p>Streamline your workflows and boost team efficiency by up to 50%.</p>
<ul>
<li>Automated task management</li>
<li>Real-time collaboration tools</li>
<li>Integrated communication systems</li>
</ul>
</div>
<div class="benefit-image">
<img src="https://via.placeholder.com/500x300" alt="Productivity Benefits">
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="testimonials">
<div class="container">
<h2>What Our Clients Say</h2>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="testimonial-content">
<p>"This solution has transformed how we operate. Our productivity has increased by 200% since implementation."</p>
<div class="testimonial-author">
<img src="https://via.placeholder.com/60x60" alt="John Smith">
<div>
<h4>John Smith</h4>
<p>CEO, Tech Solutions Inc.</p>
</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-content">
<p>"The best investment we've made for our business. Customer support is outstanding!"</p>
<div class="testimonial-author">
<img src="https://via.placeholder.com/60x60" alt="Sarah Johnson">
<div>
<h4>Sarah Johnson</h4>
<p>Operations Director, Global Corp</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="pricing">
<div class="container">
<h2>Simple, Transparent Pricing</h2>
<div class="pricing-grid">
<div class="pricing-card">
<h3>Starter</h3>
<div class="price">$29<span>/month</span></div>
<ul>
<li>Up to 5 users</li>
<li>Basic features</li>
<li>Email support</li>
<li>2GB storage</li>
</ul>
<a href="#contact" class="pricing-button">Get Started</a>
</div>
<div class="pricing-card featured">
<h3>Professional</h3>
<div class="price">$99<span>/month</span></div>
<ul>
<li>Up to 20 users</li>
<li>Advanced features</li>
<li>Priority support</li>
<li>10GB storage</li>
</ul>
<a href="#contact" class="pricing-button">Get Started</a>
</div>
<div class="pricing-card">
<h3>Enterprise</h3>
<div class="price">Custom</div>
<ul>
<li>Unlimited users</li>
<li>All features</li>
<li>24/7 support</li>
<li>Unlimited storage</li>
</ul>
<a href="#contact" class="pricing-button">Contact Us</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<h2>Ready to Get Started?</h2>
<div class="contact-container">
<form id="contact-form" class="contact-form">
<div class="form-group">
<input type="text" id="name" name="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<input type="email" id="email" name="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="text" id="company" name="company" placeholder="Company Name">
</div>
<div class="form-group">
<textarea id="message" name="message" placeholder="Your Message" required></textarea>
</div>
<button type="submit" class="submit-button">Get Started</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>InnovateTech</h3>
<p>Transforming businesses with innovative solutions.</p>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#benefits">Benefits</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Contact</h4>
<p>Email: info@innovatetech.com</p>
<p>Phone: (555) 123-4567</p>
</div>
<div class="footer-section">
<h4>Follow Us</h4>
<div class="social-links">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2024 InnovateTech. All rights reserved.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>