Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contact Us - DynamicPricing AI</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <custom-header></custom-header> | |
| <main> | |
| <!-- Contact Hero --> | |
| <section class="py-20 bg-gradient-to-r from-blue-600 to-indigo-700 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Get in Touch</h1> | |
| <p class="text-xl max-w-3xl mx-auto">Ready to transform your pricing strategy? Our team of experts is here to help you get started.</p> | |
| </div> | |
| </section> | |
| <!-- Contact Content --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <!-- Contact Form --> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <h2 class="text-2xl font-bold mb-6">Schedule a Demo</h2> | |
| <form id="contactForm" class="space-y-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-blue-500 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 mb-2">Work Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="company" class="block text-gray-700 mb-2">Company</label> | |
| <input type="text" id="company" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="role" class="block text-gray-700 mb-2">Role</label> | |
| <select id="role" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <option value="">Select your role</option> | |
| <option value="executive">Executive (C-Suite, VP)</option> | |
| <option value="manager">Manager</option> | |
| <option value="analyst">Analyst</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-700 mb-2">How can we help?</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-6 rounded-lg transition duration-300">Request Demo</button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Contact Information --> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg h-full"> | |
| <h2 class="text-2xl font-bold mb-6">Contact Information</h2> | |
| <div class="space-y-8"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="map-pin" class="text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-1">Our Office</h3> | |
| <p class="text-gray-600">555 Market Street, Suite 1000<br>San Francisco, CA 94105</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="phone" class="text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-1">Phone</h3> | |
| <p class="text-gray-600">+1 (555) 123-4567</p> | |
| <p class="text-gray-600">Mon-Fri, 9am-5pm PST</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="mail" class="text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-1">Email</h3> | |
| <p class="text-gray-600">info@dynamicpricing.ai</p> | |
| <p class="text-gray-600">support@dynamicpricing.ai</p> | |
| </div> | |
| </div> | |
| <div class="pt-6"> | |
| <h3 class="font-bold text-lg mb-4">What to Expect</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>30-minute consultation with a pricing expert</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Customized demo of our platform</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Personalized ROI analysis for your business</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently Asked Questions</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Everything you need to know about our pricing solutions.</p> | |
| </div> | |
| <div class="max-w-3xl mx-auto space-y-6"> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h3 class="font-bold text-lg mb-2">How quickly can we implement your solution?</h3> | |
| <p class="text-gray-600">Most clients are up and running within 4-6 weeks. Our implementation process includes data integration, model training, and testing phases.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h3 class="font-bold text-lg mb-2">What data do you need from us?</h3> | |
| <p class="text-gray-600">We integrate with your existing POS systems, inventory management, CRM, and competitor data sources. Our team works with your IT department to ensure seamless data flow.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h3 class="font-bold text-lg mb-2">How do you ensure our prices remain competitive?</h3> | |
| <p class="text-gray-600">Our AI continuously monitors competitor pricing across multiple channels and automatically adjusts your prices to maintain optimal positioning based on your strategic goals.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h3 class="font-bold text-lg mb-2">What kind of ROI can we expect?</h3> | |
| <p class="text-gray-600">Most clients see 10-25% improvement in profit margins within the first quarter, with additional gains as the system learns and optimizes over time.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/header.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| // Form submission handling | |
| document.getElementById('contactForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // In a real application, you would send the form data to your server here | |
| // For this demo, we'll just show an alert | |
| alert('Thank you for your interest! Our team will contact you within 24 hours to schedule your demo.'); | |
| // Reset the form | |
| this.reset(); | |
| }); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |