mirror of https://github.com/kortix-ai/suna.git
7 lines
19 KiB
JSON
7 lines
19 KiB
JSON
{
|
|
"files": {
|
|
"index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Welcome to Our Company</title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css\">\n <meta name=\"description\" content=\"Transform your business with our innovative solutions. We help businesses grow and achieve their goals through strategic consulting and digital transformation.\">\n</head>\n<body>\n <header>\n <nav>\n <div class=\"logo\">\n <i class=\"fas fa-rocket\"></i>\n InnovateX\n </div>\n <ul>\n <li><a href=\"#home\">Home</a></li>\n <li><a href=\"#services\">Services</a></li>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n </ul>\n </nav>\n </header>\n\n <main>\n <section id=\"hero\">\n <div class=\"hero-content\">\n <h1>Transform Your Business</h1>\n <p>Unlock your company's full potential with our innovative solutions and expert guidance. We help businesses like yours thrive in the digital age.</p>\n <div class=\"cta-buttons\">\n <button class=\"cta-button primary\">Get Started</button>\n <button class=\"cta-button secondary\">Learn More</button>\n </div>\n <div class=\"hero-stats\">\n <div class=\"stat\">\n <span class=\"stat-number\">500+</span>\n <span class=\"stat-label\">Clients Served</span>\n </div>\n <div class=\"stat\">\n <span class=\"stat-number\">95%</span>\n <span class=\"stat-label\">Success Rate</span>\n </div>\n <div class=\"stat\">\n <span class=\"stat-number\">10+</span>\n <span class=\"stat-label\">Years Experience</span>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"services\">\n <h2>Our Services</h2>\n <div class=\"services-grid\">\n <div class=\"service-card\">\n <i class=\"fas fa-chart-line\"></i>\n <h3>Business Strategy</h3>\n <p>Develop winning strategies to accelerate your business growth. Our expert consultants analyze market trends and create actionable plans.</p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check\"></i> Market Analysis</li>\n <li><i class=\"fas fa-check\"></i> Competitive Positioning</li>\n <li><i class=\"fas fa-check\"></i> Growth Planning</li>\n </ul>\n <a href=\"#\" class=\"learn-more\">Learn More <i class=\"fas fa-arrow-right\"></i></a>\n </div>\n <div class=\"service-card\">\n <i class=\"fas fa-laptop-code\"></i>\n <h3>Digital Transformation</h3>\n <p>Modernize your business with cutting-edge digital solutions. We help you embrace technology to improve efficiency and reach.</p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check\"></i> Process Automation</li>\n <li><i class=\"fas fa-check\"></i> Cloud Solutions</li>\n <li><i class=\"fas fa-check\"></i> Digital Integration</li>\n </ul>\n <a href=\"#\" class=\"learn-more\">Learn More <i class=\"fas fa-arrow-right\"></i></a>\n </div>\n <div class=\"service-card\">\n <i class=\"fas fa-bullhorn\"></i>\n <h3>Marketing Excellence</h3>\n <p>Boost your market presence with our comprehensive marketing solutions. We create strategies that connect with your audience.</p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check\"></i> Brand Development</li>\n <li><i class=\"fas fa-check\"></i> Digital Marketing</li>\n <li><i class=\"fas fa-check\"></i> Lead Generation</li>\n </ul>\n <a href=\"#\" class=\"learn-more\">Learn More <i class=\"fas fa-arrow-right\"></i></a>\n </div>\n </div>\n </section>\n\n <section id=\"about\">\n <div class=\"about-content\">\n <h2>Why Choose Us</h2>\n <div class=\"features-grid\">\n <div class=\"feature\">\n <i class=\"fas fa-users\"></i>\n <h3>Expert Team</h3>\n <p>Our team of seasoned professionals brings decades of combined experience.</p>\n </div>\n <div class=\"feature\">\n <i class=\"fas fa-trophy\"></i>\n <h3>Proven Results</h3>\n <p>We've helped hundreds of businesses achieve measurable growth.</p>\n </div>\n <div class=\"feature\">\n <i class=\"fas fa-handshake\"></i>\n <h3>Dedicated Support</h3>\n <p>We're committed to your success with 24/7 customer support.</p>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"contact\">\n <h2>Get In Touch</h2>\n <div class=\"contact-container\">\n <div class=\"contact-info\">\n <h3>Contact Information</h3>\n <div class=\"info-item\">\n <i class=\"fas fa-map-marker-alt\"></i>\n <p>123 Business Avenue, Suite 100<br>Innovation City, IC 12345</p>\n </div>\n <div class=\"info-item\">\n <i class=\"fas fa-phone\"></i>\n <p>+1 (555) 123-4567</p>\n </div>\n <div class=\"info-item\">\n <i class=\"fas fa-envelope\"></i>\n <p>contact@innovatex.com</p>\n </div>\n </div>\n <form id=\"contact-form\">\n <div class=\"form-group\">\n <input type=\"text\" placeholder=\"Your Name\" required>\n <input type=\"email\" placeholder=\"Your Email\" required>\n </div>\n <input type=\"text\" placeholder=\"Subject\" required>\n <textarea placeholder=\"Your Message\" required></textarea>\n <button type=\"submit\">Send Message <i class=\"fas fa-paper-plane\"></i></button>\n </form>\n </div>\n </section>\n </main>\n\n <footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>InnovateX</h4>\n <p>Transforming businesses through innovation and excellence.</p>\n <div class=\"social-links\">\n <a href=\"#\"><i class=\"fab fa-linkedin\"></i></a>\n <a href=\"#\"><i class=\"fab fa-twitter\"></i></a>\n <a href=\"#\"><i class=\"fab fa-facebook\"></i></a>\n <a href=\"#\"><i class=\"fab fa-instagram\"></i></a>\n </div>\n </div>\n <div class=\"footer-section\">\n <h4>Quick Links</h4>\n <ul>\n <li><a href=\"#home\">Home</a></li>\n <li><a href=\"#services\">Services</a></li>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n </ul>\n </div>\n <div class=\"footer-section\">\n <h4>Newsletter</h4>\n <form class=\"newsletter-form\">\n <input type=\"email\" placeholder=\"Enter your email\">\n <button type=\"submit\"><i class=\"fas fa-arrow-right\"></i></button>\n </form>\n </div>\n </div>\n <div class=\"footer-bottom\">\n <p>© 2024 InnovateX. All rights reserved.</p>\n </div>\n </footer>\n\n <script src=\"script.js\"></script>\n</body>\n</html>",
|
|
"styles.css": "/* Reset and base styles */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Arial', sans-serif;\n line-height: 1.6;\n color: #333;\n}\n\n/* Header and Navigation */\nheader {\n background-color: #fff;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: #2c3e50;\n}\n\nnav ul {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\nnav a {\n text-decoration: none;\n color: #2c3e50;\n font-weight: 500;\n transition: color 0.3s ease;\n position: relative;\n}\n\nnav a::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: -5px;\n left: 0;\n background-color: #3498db;\n transition: width 0.3s ease;\n}\n\nnav a:hover::after {\n width: 100%;\n}\n\nnav a:hover {\n color: #3498db;\n}\n\n/* Hero Section */\n#hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 0 1rem;\n background: linear-gradient(135deg, #3498db, #2c3e50);\n color: white;\n position: relative;\n overflow: hidden;\n}\n\n#hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><rect fill=\"rgba(255,255,255,0.1)\" x=\"0\" y=\"0\" width=\"100\" height=\"100\"/></svg>');\n opacity: 0.1;\n}\n\n#hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\n}\n\n#hero p {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n max-width: 600px;\n}\n\n.cta-button {\n padding: 1rem 2rem;\n font-size: 1.1rem;\n background-color: #e74c3c;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n}\n\n.cta-button:hover {\n background-color: #c0392b;\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n}\n\n/* Services Section */\n#services {\n padding: 5rem 1rem;\n background-color: #f9f9f9;\n}\n\n#services h2 {\n text-align: center;\n margin-bottom: 3rem;\n font-size: 2.5rem;\n position: relative;\n}\n\n#services h2::after {\n content: '';\n display: block;\n width: 50px;\n height: 3px;\n background-color: #3498db;\n margin: 1rem auto;\n}\n\n.services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 1rem;\n}\n\n.service-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 3px 10px rgba(0,0,0,0.1);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n}\n\n.service-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 3px;\n background: linear-gradient(to right, #3498db, #2c3e50);\n transform: scaleX(0);\n transition: transform 0.3s ease;\n}\n\n.service-card:hover::before {\n transform: scaleX(1);\n}\n\n.service-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 5px 20px rgba(0,0,0,0.15);\n}\n\n.service-card h3 {\n color: #2c3e50;\n margin-bottom: 1rem;\n font-size: 1.5rem;\n}\n\n/* Contact Section */\n#contact {\n padding: 5rem 1rem;\n background-color: white;\n}\n\n#contact h2 {\n text-align: center;\n margin-bottom: 3rem;\n font-size: 2.5rem;\n}\n\n#contact-form {\n max-width: 600px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n#contact-form input,\n#contact-form textarea {\n padding: 1rem;\n border: 1px solid #ddd;\n border-radius: 5px;\n font-size: 1rem;\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\n}\n\n#contact-form input:focus,\n#contact-form textarea:focus {\n outline: none;\n border-color: #3498db;\n box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);\n}\n\n#contact-form textarea {\n min-height: 150px;\n resize: vertical;\n}\n\n#contact-form button {\n padding: 1rem;\n background-color: #3498db;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1rem;\n transition: all 0.3s ease;\n}\n\n#contact-form button:hover {\n background-color: #2980b9;\n transform: translateY(-2px);\n}\n\n/* Error messages */\n.error-message {\n color: #e74c3c;\n font-size: 0.875rem;\n margin-top: 0.25rem;\n animation: fadeIn 0.3s ease;\n}\n\ninput.invalid,\ntextarea.invalid {\n border-color: #e74c3c;\n background-color: rgba(231, 76, 60, 0.05);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Footer */\nfooter {\n background-color: #2c3e50;\n color: white;\n text-align: center;\n padding: 2rem;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n nav {\n flex-direction: column;\n gap: 1rem;\n }\n \n nav ul {\n flex-direction: column;\n text-align: center;\n }\n \n #hero h1 {\n font-size: 2.5rem;\n }\n \n .services-grid {\n grid-template-columns: 1fr;\n }\n\n .service-card {\n margin: 0 1rem;\n }\n}\n\n/* Animations */\n.animate {\n animation: fadeInUp 0.6s ease forwards;\n}\n\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}",
|
|
"script.js": "// Wait for DOM to load\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scrolling for navigation links\n document.querySelectorAll('nav a').forEach(link => {\n link.addEventListener('click', (e) => {\n e.preventDefault();\n const targetId = link.getAttribute('href');\n const targetSection = document.querySelector(targetId);\n targetSection.scrollIntoView({ behavior: 'smooth' });\n });\n });\n\n // Dynamic navigation bar\n const header = document.querySelector('header');\n let lastScroll = 0;\n\n window.addEventListener('scroll', () => {\n const currentScroll = window.pageYOffset;\n\n // Add/remove background color based on scroll position\n if (currentScroll > 50) {\n header.style.backgroundColor = '#ffffff';\n header.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';\n } else {\n header.style.backgroundColor = 'transparent';\n header.style.boxShadow = 'none';\n }\n\n // Hide/show header based on scroll direction\n if (currentScroll > lastScroll && currentScroll > 100) {\n header.style.transform = 'translateY(-100%)';\n } else {\n header.style.transform = 'translateY(0)';\n }\n\n lastScroll = currentScroll;\n });\n\n // Form validation and submission\n const contactForm = document.getElementById('contact-form');\n if (contactForm) {\n contactForm.addEventListener('submit', (e) => {\n e.preventDefault();\n \n // Get form inputs\n const nameInput = contactForm.querySelector('input[type=\"text\"]');\n const emailInput = contactForm.querySelector('input[type=\"email\"]');\n const messageInput = contactForm.querySelector('textarea');\n\n // Basic validation\n let isValid = true;\n \n if (!nameInput.value.trim()) {\n markInvalid(nameInput, 'Please enter your name');\n isValid = false;\n } else {\n markValid(nameInput);\n }\n\n if (!isValidEmail(emailInput.value)) {\n markInvalid(emailInput, 'Please enter a valid email');\n isValid = false;\n } else {\n markValid(emailInput);\n }\n\n if (!messageInput.value.trim()) {\n markInvalid(messageInput, 'Please enter your message');\n isValid = false;\n } else {\n markValid(messageInput);\n }\n\n if (isValid) {\n // Here you would typically send the form data to a server\n alert('Thank you for your message! We will get back to you soon.');\n contactForm.reset();\n }\n });\n }\n\n // Animate services cards on scroll\n const observerOptions = {\n threshold: 0.2\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('animate');\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('.service-card').forEach(card => {\n observer.observe(card);\n });\n});\n\n// Helper functions\nfunction isValidEmail(email) {\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n return emailRegex.test(email);\n}\n\nfunction markInvalid(element, message) {\n element.classList.add('invalid');\n \n // Create or update error message\n let errorDiv = element.nextElementSibling;\n if (!errorDiv || !errorDiv.classList.contains('error-message')) {\n errorDiv = document.createElement('div');\n errorDiv.classList.add('error-message');\n element.parentNode.insertBefore(errorDiv, element.nextSibling);\n }\n errorDiv.textContent = message;\n}\n\nfunction markValid(element) {\n element.classList.remove('invalid');\n const errorDiv = element.nextElementSibling;\n if (errorDiv && errorDiv.classList.contains('error-message')) {\n errorDiv.remove();\n }\n}"
|
|
}
|
|
} |