190 lines
11 KiB
Plaintext
190 lines
11 KiB
Plaintext
<!-- Contact page content starts here -->
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 dark:from-gray-900 dark:via-blue-900 dark:to-purple-900 hero-section-compact">
|
|
<div class="absolute inset-0 bg-black opacity-50 dark:opacity-70"></div>
|
|
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h1 class="text-5xl md:text-6xl font-bold text-white mb-6">
|
|
<%- __('contact.hero.title') %>
|
|
</h1>
|
|
<p class="text-xl text-gray-300 dark:text-gray-200 max-w-3xl mx-auto">
|
|
<%- __('contact.hero.subtitle') %>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section class="py-20 bg-white dark:bg-gray-900">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
<!-- Contact Form -->
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">
|
|
<%- __('contact.form.title') %>
|
|
</h2>
|
|
<form id="contact-form" class="space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
<%- __('contact.form.name') %>
|
|
</label>
|
|
<input type="text" name="name" required class="form-input w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
<%- __('contact.form.email') %>
|
|
</label>
|
|
<input type="email" name="email" required class="form-input w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
<%- __('contact.form.phone') %>
|
|
</label>
|
|
<input type="tel" name="phone" class="form-input w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
<%- __('contact.form.service.title') %>
|
|
</label>
|
|
<select name="serviceInterest" class="form-input w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
|
|
<option value=""><%- __('contact.form.service.select') %></option>
|
|
<option value="web-development"><%- __('contact.form.service.web') %></option>
|
|
<option value="mobile-app"><%- __('contact.form.service.mobile') %></option>
|
|
<option value="ui-ux-design"><%- __('contact.form.service.design') %></option>
|
|
<option value="branding"><%- __('contact.form.service.branding') %></option>
|
|
<option value="consulting"><%- __('contact.form.service.consulting') %></option>
|
|
<option value="other"><%- __('contact.form.service.other') %></option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
<%- __('contact.form.message') %>
|
|
</label>
|
|
<textarea name="message" rows="5" required class="form-input w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-gray-700 dark:text-white"></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full btn-primary bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold py-3 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105">
|
|
<%- __('contact.form.submit') %>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Contact Info -->
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">
|
|
<%- __('contact.info.title') %>
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Phone -->
|
|
<div class="flex items-start">
|
|
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
|
|
<i class="fas fa-phone text-blue-600 dark:text-blue-400"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
|
<%- __('contact.phone.title') %>
|
|
</h3>
|
|
<p class="text-gray-600 dark:text-gray-300">
|
|
<%- __('contact.phone.number') %>
|
|
</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
<%- __('contact.phone.hours') %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div class="flex items-start">
|
|
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
|
|
<i class="fas fa-envelope text-purple-600 dark:text-purple-400"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
|
<%- __('contact.email.title') %>
|
|
</h3>
|
|
<p class="text-gray-600 dark:text-gray-300">
|
|
<%- __('contact.email.address') %>
|
|
</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
<%- __('contact.email.response') %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Telegram -->
|
|
<div class="flex items-start">
|
|
<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
|
|
<i class="fab fa-telegram text-green-600 dark:text-green-400"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
|
<%- __('contact.telegram.title') %>
|
|
</h3>
|
|
<p class="text-gray-600 dark:text-gray-300">
|
|
@smartsoltech
|
|
</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
<%- __('contact.telegram.subtitle') %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address -->
|
|
<div class="flex items-start">
|
|
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
|
|
<i class="fas fa-map-marker-alt text-gray-600 dark:text-gray-400"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
|
<%- __('contact.address.title') %>
|
|
</h3>
|
|
<p class="text-gray-600 dark:text-gray-300">
|
|
<%- __('contact.address.line1') %><br>
|
|
<%- __('contact.address.line2') %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact page content ends here -->
|
|
|
|
<script>
|
|
// Theme initialization
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const theme = localStorage.getItem('theme') || 'light';
|
|
document.documentElement.className = theme === 'dark' ? 'dark' : '';
|
|
});
|
|
|
|
// Contact form handler
|
|
document.getElementById('contact-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const formData = new FormData(this);
|
|
|
|
fetch('/contact', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert('<%- __("contact.form.success") %>');
|
|
this.reset();
|
|
} else {
|
|
alert('<%- __("contact.form.error") %>');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('<%- __("contact.form.error") %>');
|
|
});
|
|
});
|
|
</script> |