304 lines
17 KiB
HTML
304 lines
17 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ t('Contact Kobelly | Web Design Brussels') }}{% endblock %}
|
|
|
|
{% block description %}{{ t('Contact Kobelly for professional website design in Brussels. Free consultation, transparent pricing, and ongoing support. Get your business online in 48 hours.') }}{% endblock %}
|
|
|
|
{% block keywords %}{{ t('website design, web development, small business, Belgium, Brussels, professional websites, affordable web design') }}{% endblock %}
|
|
|
|
{% block og_title %}{{ t('Contact Kobelly | Web Design Brussels') }}{% endblock %}
|
|
|
|
{% block og_description %}{{ t('Contact Kobelly for professional website design in Brussels. Free consultation, transparent pricing, and ongoing support. Get your business online in 48 hours.') }}{% endblock %}
|
|
|
|
{% block twitter_title %}{{ t('Contact Kobelly | Web Design Brussels') }}{% endblock %}
|
|
|
|
{% block twitter_description %}{{ t('Contact Kobelly for professional website design in Brussels. Free consultation, transparent pricing, and ongoing support. Get your business online in 48 hours.') }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section -->
|
|
<section class="contact-hero-section py-5">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6">
|
|
<div class="contact-hero-content">
|
|
<h1 class="display-3 fw-bold mb-4">{{ t('Ready to Start Your Project?') }}</h1>
|
|
<p class="lead mb-4">{{ t('Let\'s discuss how I can help your business grow online. I offer a free consultation to understand your needs and provide a customized solution.') }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 text-center">
|
|
<div class="contact-hero-visual">
|
|
<div class="contact-icon-wrapper">
|
|
<i class="fas fa-envelope-open-text contact-main-icon"></i>
|
|
<div class="contact-icon-glow"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section class="py-5 contact-section">
|
|
<div class="container">
|
|
<div class="row g-5">
|
|
<!-- Contact Form -->
|
|
<div class="col-lg-8">
|
|
<div class="card service-card fade-in-up contact-form-card">
|
|
<div class="card-body p-5">
|
|
<div class="contact-form-header text-center mb-5">
|
|
<div class="contact-form-icon-wrapper mb-3">
|
|
<i class="fas fa-paper-plane contact-form-icon"></i>
|
|
</div>
|
|
<h3 class="card-title fw-bold mb-3">{{ t('Send Me a Message') }}</h3>
|
|
<p class="text-muted">{{ t('Fill out the form below and I\'ll get back to you within 48 hours.') }}</p>
|
|
</div>
|
|
|
|
<form class="contact-form">
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" id="firstName" placeholder="{{ t('First Name') }}" required>
|
|
<label for="firstName">{{ t('First Name') }} *</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" id="lastName" placeholder="{{ t('Last Name') }}" required>
|
|
<label for="lastName">{{ t('Last Name') }} *</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-floating">
|
|
<input type="email" class="form-control" id="email" placeholder="{{ t('Email Address') }}" required>
|
|
<label for="email">{{ t('Email Address') }} *</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-floating">
|
|
<input type="tel" class="form-control" id="phone" placeholder="{{ t('Phone Number') }}">
|
|
<label for="phone">{{ t('Phone Number') }}</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" id="company" placeholder="{{ t('Company Name') }}">
|
|
<label for="company">{{ t('Company Name') }}</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-floating">
|
|
<select class="form-select" id="service" required>
|
|
<option value="">{{ t('Select a service...') }}</option>
|
|
<option value="website">{{ t('Website Design') }}</option>
|
|
<option value="ecommerce">{{ t('E-commerce Solutions') }}</option>
|
|
<option value="maintenance">{{ t('Maintenance & Support') }}</option>
|
|
</select>
|
|
<label for="service">{{ t('Service Interested In') }} *</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-floating">
|
|
<select class="form-select" id="budget">
|
|
<option value="">{{ t('Select budget range...') }}</option>
|
|
<option value="under-1000">{{ t('Under €1,000') }}</option>
|
|
<option value="1000-3000">{{ t('€1,000 - €3,000') }}</option>
|
|
<option value="3000-5000">{{ t('€3,000 - €5,000') }}</option>
|
|
<option value="5000-10000">{{ t('€5,000 - €10,000') }}</option>
|
|
<option value="over-10000">{{ t('Over €10,000') }}</option>
|
|
</select>
|
|
<label for="budget">{{ t('Project Budget') }}</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-floating">
|
|
<textarea class="form-control" id="message" style="height: 120px" placeholder="{{ t('Tell me about your project, goals, and requirements...') }}" required></textarea>
|
|
<label for="message">{{ t('Project Details') }} *</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="newsletter">
|
|
<label class="form-check-label" for="newsletter">
|
|
{{ t('Subscribe to my newsletter for web design tips and updates') }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 text-center">
|
|
<button type="submit" class="btn btn-primary btn-lg px-5 py-3 fw-bold contact-submit-btn">
|
|
<i class="fas fa-paper-plane me-2"></i>{{ t('Send Message') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Information -->
|
|
<div class="col-lg-4">
|
|
<div class="card service-card h-100 fade-in-up contact-info-card">
|
|
<div class="card-body p-5">
|
|
<div class="contact-info-header text-center mb-4">
|
|
<div class="contact-info-icon-wrapper mb-3">
|
|
<i class="fas fa-map-marker-alt contact-info-icon"></i>
|
|
</div>
|
|
<h3 class="card-title fw-bold mb-3">{{ t('Get in Touch') }}</h3>
|
|
</div>
|
|
|
|
<div class="contact-info-item mb-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="contact-info-icon-small me-3">
|
|
<i class="fas fa-envelope text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="fw-bold mb-1">{{ t('Email') }}</h6>
|
|
<a href="mailto:info@kobelly.com" class="text-decoration-none">info@kobelly.com</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-info-item mb-4">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="contact-info-icon-small me-3">
|
|
<i class="fas fa-phone text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="fw-bold mb-1">{{ t('Phone') }}</h6>
|
|
<a href="tel:+32486210707" class="text-decoration-none">{{ t('+32 486 21 07 07') }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-info-item mb-4">
|
|
<div class="d-flex align-items-start mb-3">
|
|
<div class="contact-info-icon-small me-3 mt-1">
|
|
<i class="fas fa-map-marker-alt text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="fw-bold mb-1">{{ t('Address') }}</h6>
|
|
<a href="https://maps.google.com/?q=Blijkheerstraat+92,+1755+Pajottegem,+Belgium" target="_blank" class="text-decoration-none">
|
|
<p class="mb-0">{{ t('Blijkheerstraat 92') }}<br>
|
|
{{ t('1755 Pajottegem, Belgium') }}<br>
|
|
{{ t('Vlaams-Brabant') }}</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-info-item mb-4">
|
|
<h6 class="fw-bold mb-3">{{ t('Follow Us') }}</h6>
|
|
<div class="social-links d-flex gap-3">
|
|
<a href="#" class="social-link"><i class="fab fa-facebook"></i></a>
|
|
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
|
|
<a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
|
|
<a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info contact-alert">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
<strong>{{ t('Free Consultation') }}</strong><br>
|
|
{{ t('We offer a free 30-minute consultation to discuss your project requirements and provide a customized quote.') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials Section -->
|
|
{{ testimonials.testimonials_section(
|
|
title=t('What My Clients Say'),
|
|
subtitle=t('Don\'t just take my word for it - hear from some of my satisfied clients.'),
|
|
t=t
|
|
) }}
|
|
|
|
<!-- Map Section -->
|
|
<section class="py-5 map-section">
|
|
<div class="container">
|
|
<div class="row text-center mb-5">
|
|
<div class="col-lg-8 mx-auto">
|
|
<h2 class="display-5 fw-bold mb-3">{{ t('Find Us') }}</h2>
|
|
<p class="lead text-muted">{{ t('Located in the heart of Brussels, serving clients across Belgium and Europe.') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="map-container fade-in-up">
|
|
<div id="map" style="width: 100%; height: 300px; border-radius: 15px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ Section -->
|
|
<section class="py-5 bg-light faq-section">
|
|
<div class="container">
|
|
<div class="row text-center mb-5">
|
|
<div class="col-lg-8 mx-auto">
|
|
<h2 class="display-5 fw-bold mb-3">{{ t('Frequently Asked Questions') }}</h2>
|
|
<p class="lead text-muted">{{ t('Find answers to common questions about our services and process.') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-lg-6">
|
|
<div class="card h-100 fade-in-up faq-card">
|
|
<div class="card-body p-4">
|
|
<div class="faq-icon-wrapper mb-3">
|
|
<i class="fas fa-clock text-primary faq-icon"></i>
|
|
</div>
|
|
<h5 class="card-title fw-bold mb-3">{{ t('How long does it take to build a website?') }}</h5>
|
|
<p class="card-text">{{ t('The timeline depends on the complexity of your project. A simple business website typically takes 2-4 weeks, while more complex e-commerce sites may take 6-8 weeks.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card h-100 fade-in-up faq-card">
|
|
<div class="card-body p-4">
|
|
<div class="faq-icon-wrapper mb-3">
|
|
<i class="fas fa-headset text-primary faq-icon"></i>
|
|
</div>
|
|
<h5 class="card-title fw-bold mb-3">{{ t('Do you provide ongoing support?') }}</h5>
|
|
<p class="card-text">{{ t('Yes! We offer various maintenance packages to keep your website secure, updated, and running smoothly. We also provide technical support and content updates.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card h-100 fade-in-up faq-card">
|
|
<div class="card-body p-4">
|
|
<div class="faq-icon-wrapper mb-3">
|
|
<i class="fas fa-euro-sign text-primary faq-icon"></i>
|
|
</div>
|
|
<h5 class="card-title fw-bold mb-3">{{ t('What is your pricing structure?') }}</h5>
|
|
<p class="card-text">{{ t('Our pricing is transparent and project-based. We provide detailed quotes after understanding your requirements. We offer flexible payment plans and competitive rates for small businesses.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card h-100 fade-in-up faq-card">
|
|
<div class="card-body p-4">
|
|
<div class="faq-icon-wrapper mb-3">
|
|
<i class="fas fa-building text-primary faq-icon"></i>
|
|
</div>
|
|
<h5 class="card-title fw-bold mb-3">{{ t('Do you work with small businesses?') }}</h5>
|
|
<p class="card-text">{{ t('Yes, we specialize in working with small businesses and entrepreneurs. We understand your unique needs and budget constraints.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
{{ components.cta_section(
|
|
title="Ready to Start Your Project?",
|
|
description="Let's discuss how I can help your business grow online.",
|
|
button_text="Get Free Consultation",
|
|
button_url="contact",
|
|
t=t
|
|
) }}
|
|
{% endblock %} |