i want a website for my digital service company called Sonate code, a society works in IA, mobile app and web application
2b3e12f verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sonate Code - Digital Solutions in AI & Development</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366F1', | |
| secondary: '#10B981' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="relative py-20 bg-gradient-to-r from-primary to-secondary"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">Crafting Digital Symphonies</h1> | |
| <p class="text-xl text-gray-100 mb-8">We compose innovative solutions in AI, mobile, and web applications that harmonize with your business needs.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#contact" class="bg-white text-primary px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">Get Started</a> | |
| <a href="#services" class="border-2 border-white text-white px-8 py-3 rounded-lg font-medium hover:bg-white hover:text-primary transition duration-300">Our Services</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="http://static.photos/technology/1024x576/42" alt="AI Technology" class="rounded-lg shadow-2xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Digital Solutions</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">We offer comprehensive services to transform your digital presence</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> | |
| <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="cpu" class="text-primary" width="28" height="28"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Artificial Intelligence</h3> | |
| <p class="text-gray-600">Custom AI solutions including machine learning, computer vision, and natural language processing.</p> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> | |
| <div class="w-16 h-16 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="smartphone" class="text-secondary" width="28" height="28"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Mobile Applications</h3> | |
| <p class="text-gray-600">Native and cross-platform mobile apps for iOS and Android with premium user experience.</p> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> | |
| <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="globe" class="text-primary" width="28" height="28"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Web Applications</h3> | |
| <p class="text-gray-600">Modern, responsive web applications with cutting-edge technologies and frameworks.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> | |
| <img src="http://static.photos/workspace/1024x576/23" alt="Our Team" class="rounded-lg shadow-xl"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">About Sonate Code</h2> | |
| <p class="text-gray-600 mb-6">Founded in 2015, Sonate Code is a digital service company specializing in creating harmonious technology solutions that blend innovation with practicality.</p> | |
| <p class="text-gray-600 mb-8">Our team of passionate developers, designers, and data scientists work in concert to deliver solutions that elevate your business to new heights.</p> | |
| <a href="#contact" class="bg-primary text-white px-8 py-3 rounded-lg font-medium hover:bg-primary-600 transition duration-300">Learn More</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Showcase --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Digital Masterpieces</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Explore some of our recent projects that created value for our clients</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition duration-300"> | |
| <img src="http://static.photos/technology/640x360/1" alt="AI Project" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">AI-Powered Analytics</h3> | |
| <p class="text-gray-600 mb-4">Predictive analytics platform for retail industry</p> | |
| <span class="inline-block bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-sm">Artificial Intelligence</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition duration-300"> | |
| <img src="http://static.photos/office/640x360/2" alt="Mobile App" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Employee Management App</h3> | |
| <p class="text-gray-600 mb-4">Cross-platform solution for workforce management</p> | |
| <span class="inline-block bg-secondary bg-opacity-10 text-secondary px-3 py-1 rounded-full text-sm">Mobile Application</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition duration-300"> | |
| <img src="http://static.photos/workspace/640x360/3" alt="Web App" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">E-commerce Platform</h3> | |
| <p class="text-gray-600 mb-4">Custom shopping experience with AI recommendations</p> | |
| <span class="inline-block bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-sm">Web Application</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gradient-to-r from-primary to-secondary"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Ready to Start Your Project?</h2> | |
| <p class="text-xl text-gray-100 max-w-2xl mx-auto">Let's compose something extraordinary together</p> | |
| </div> | |
| <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-2xl p-8"> | |
| <form class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 mb-2">Full Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="service" class="block text-gray-700 mb-2">Service Interest</label> | |
| <select id="service" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option value="">Select a service</option> | |
| <option value="ai">Artificial Intelligence</option> | |
| <option value="mobile">Mobile Applications</option> | |
| <option value="web">Web Applications</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-700 mb-2">Project Details</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-primary-600 transition duration-300">Submit Request</button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |