diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..e39f9bc --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,73 @@ + +body { + font-family: 'system-ui', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + background-color: #F8F9FA; +} + +.navbar { + box-shadow: 0 2px 4px rgba(0,0,0,.05); +} + +.hero { + background: linear-gradient(135deg, #0D6EFD, #0dcaf0); + color: white; + padding: 6rem 0; + text-align: center; +} + +.hero h1 { + font-weight: 700; + font-size: 3.5rem; +} + +.hero p { + font-size: 1.25rem; + margin-bottom: 2rem; +} + +.btn-primary { + background-color: #0D6EFD; + border-color: #0D6EFD; + border-radius: 0.5rem; + padding: 0.75rem 1.5rem; + font-weight: 500; +} + +.section { + padding: 4rem 0; +} + +.feature-icon { + font-size: 3rem; + color: #0D6EFD; +} + +.card { + border: none; + border-radius: 0.5rem; + box-shadow: 0 4px 8px rgba(0,0,0,.05); + transition: transform .2s; +} + +.card:hover { + transform: translateY(-5px); +} + +#contact { + background-color: #FFFFFF; +} + +.footer { + background-color: #343A40; + color: white; + padding: 2rem 0; +} + +.footer a { + color: #adb5bd; + text-decoration: none; +} + +.footer a:hover { + color: white; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..bc96fdc --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,44 @@ + +document.addEventListener('DOMContentLoaded', function () { + const contactForm = document.getElementById('contactForm'); + if (contactForm) { + contactForm.addEventListener('submit', function (e) { + e.preventDefault(); + const form = e.target; + const formData = new FormData(form); + const alertContainer = document.getElementById('form-alerts'); + + alertContainer.innerHTML = ''; + + fetch('contact.php', { + method: 'POST', + body: formData + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + showAlert('success', 'Message sent successfully! We will get back to you shortly.'); + form.reset(); + } else { + showAlert('danger', 'An error occurred: ' + (data.error || 'Please try again.')); + } + }) + .catch(error => { + showAlert('danger', 'A network error occurred. Please try again.'); + console.error('Error:', error); + }); + }); + } + + function showAlert(type, message) { + const alertContainer = document.getElementById('form-alerts'); + const wrapper = document.createElement('div'); + wrapper.innerHTML = [ + `