262 lines
15 KiB
HTML
262 lines
15 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ t('Website Design Services Brussels | Kobelly') }}{% endblock %}
|
|
|
|
{% block description %}{{ t('Professional website design services in Brussels. Custom websites for small businesses starting at €299. Fast delivery, ongoing support, and proven results.') }}{% endblock %}
|
|
|
|
{% block keywords %}{{ t('website design, web development, small business, Belgium, Brussels, professional websites, affordable web design') }}{% endblock %}
|
|
|
|
{% block og_title %}{{ t('Website Design Services Brussels | Kobelly') }}{% endblock %}
|
|
|
|
{% block og_description %}{{ t('Professional website design services in Brussels. Custom websites for small businesses starting at €299. Fast delivery, ongoing support, and proven results.') }}{% endblock %}
|
|
|
|
{% block twitter_title %}{{ t('Website Design Services Brussels | Kobelly') }}{% endblock %}
|
|
|
|
{% block twitter_description %}{{ t('Professional website design services in Brussels. Custom websites for small businesses starting at €299. Fast delivery, ongoing support, and proven results.') }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section -->
|
|
<section class="services-hero-section py-5">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6">
|
|
<div class="services-hero-content">
|
|
<h1 class="display-3 fw-bold mb-4">{{ t('Professional Web Solutions') }}</h1>
|
|
<p class="lead mb-4">{{ t('Comprehensive web services designed to help your business succeed online. From custom design to e-commerce solutions, I provide everything you need to establish a strong digital presence.') }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 text-center">
|
|
<div class="services-hero-visual">
|
|
<div class="services-icon-wrapper">
|
|
<i class="fas fa-cogs services-main-icon"></i>
|
|
<div class="services-icon-glow"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section class="py-5">
|
|
<div class="container">
|
|
<div class="row g-5">
|
|
<!-- Website Design -->
|
|
<div class="col-lg-4">
|
|
<div class="card service-card h-100 fade-in-up d-flex flex-column service-card-enhanced">
|
|
<div class="card-body p-5 d-flex flex-column">
|
|
<div class="service-header text-center mb-4">
|
|
<div class="service-icon-wrapper mb-3">
|
|
<i class="fas fa-palette text-primary service-icon" style="font-size: 3.5rem;"></i>
|
|
</div>
|
|
<h3 class="card-title fw-bold mb-3">{{ t('Website Design') }}</h3>
|
|
</div>
|
|
|
|
<p class="card-text text-center mb-4">{{ t('Custom, professional website design that perfectly represents your brand and engages your target audience.') }}</p>
|
|
|
|
<div class="service-features mb-4">
|
|
<h6 class="fw-bold text-primary mb-3">{{ t('What\'s Included:') }}</h6>
|
|
<ul class="list-unstyled service-feature-list">
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Responsive design') }}</span>
|
|
</li>
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Modern UI/UX') }}</span>
|
|
</li>
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Optimized structure') }}</span>
|
|
</li>
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Fast loading times') }}</span>
|
|
</li>
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Cross-browser compatibility') }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="service-footer mt-auto">
|
|
<div class="text-center">
|
|
<a href="{{ url_for('contact') }}" class="btn btn-primary btn-lg w-100">{{ t('Get Quote') }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- E-commerce Solutions -->
|
|
<div class="col-lg-4">
|
|
<div class="card service-card h-100 fade-in-up d-flex flex-column service-card-enhanced">
|
|
<div class="card-body p-5 d-flex flex-column">
|
|
<div class="service-header text-center mb-4">
|
|
<div class="service-icon-wrapper mb-3">
|
|
<i class="fas fa-shopping-cart text-primary service-icon" style="font-size: 3.5rem;"></i>
|
|
</div>
|
|
<h3 class="card-title fw-bold mb-3">{{ t('E-commerce Solutions') }}</h3>
|
|
</div>
|
|
|
|
<p class="card-text text-center mb-4">{{ t('Complete online store setup with secure payment processing, inventory management, and customer tracking.') }}</p>
|
|
|
|
<div class="service-features mb-4">
|
|
<h6 class="fw-bold text-primary mb-3">{{ t('What\'s Included:') }}</h6>
|
|
<ul class="list-unstyled service-feature-list">
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Online store setup') }}</span>
|
|
</li>
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Payment integration') }}</span>
|
|
</li>
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Inventory management') }}</span>
|
|
</li>
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Order processing') }}</span>
|
|
</li>
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Customer accounts') }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="service-footer mt-auto">
|
|
<div class="text-center">
|
|
<a href="{{ url_for('contact') }}" class="btn btn-primary btn-lg w-100">{{ t('Get Quote') }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Maintenance & Support -->
|
|
<div class="col-lg-4">
|
|
<div class="card service-card h-100 fade-in-up d-flex flex-column service-card-enhanced">
|
|
<div class="card-body p-5 d-flex flex-column">
|
|
<div class="service-header text-center mb-4">
|
|
<div class="service-icon-wrapper mb-3">
|
|
<i class="fas fa-headset text-primary service-icon" style="font-size: 3.5rem;"></i>
|
|
</div>
|
|
<h3 class="card-title fw-bold mb-3">{{ t('Maintenance & Support') }}</h3>
|
|
</div>
|
|
|
|
<p class="card-text text-center mb-4">{{ t('Ongoing website maintenance, updates, and technical support to keep your site running smoothly.') }}</p>
|
|
|
|
<div class="service-features mb-4">
|
|
<h6 class="fw-bold text-primary mb-3">{{ t('What\'s Included:') }}</h6>
|
|
<ul class="list-unstyled service-feature-list">
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Regular security updates') }}</span>
|
|
</li>
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Performance monitoring') }}</span>
|
|
</li>
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Backup management') }}</span>
|
|
</li>
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Content updates') }}</span>
|
|
</li>
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Technical support') }}</span>
|
|
</li>
|
|
<li class="service-feature-item mb-3">
|
|
<i class="fas fa-check-circle text-success me-3"></i>
|
|
<span>{{ t('Monthly reports') }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="service-footer mt-auto">
|
|
<div class="text-center">
|
|
<a href="{{ url_for('contact') }}" class="btn btn-primary btn-lg w-100">{{ t('Get Quote') }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Process Section -->
|
|
<section class="py-5 bg-light">
|
|
<div class="container">
|
|
<div class="row text-center mb-5">
|
|
<div class="col-lg-8 mx-auto">
|
|
<h2 class="display-5 fw-bold">{{ t('How It Works') }}</h2>
|
|
<p class="lead text-muted">{{ t('Getting your business online is easier than you think.') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 position-relative">
|
|
<!-- Connecting line for desktop -->
|
|
<div class="d-none d-md-block process-connecting-line"></div>
|
|
|
|
<div class="col-md-4 position-relative" style="z-index: 2;">
|
|
<div class="text-center process-step">
|
|
<div class="process-icon-wrapper mb-4">
|
|
<div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center process-icon" style="width: 80px; height: 80px; box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);" data-step="1">
|
|
<i class="fas fa-phone" style="font-size: 1.8rem;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="process-content">
|
|
<h5 class="fw-bold mb-3">{{ t('Tell Me About Your Business') }}</h5>
|
|
<p class="text-muted mb-0">{{ t('One 15-minute call. I ask about your business, you tell me what you need.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 position-relative" style="z-index: 2;">
|
|
<div class="text-center process-step">
|
|
<div class="process-icon-wrapper mb-4">
|
|
<div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center process-icon" style="width: 80px; height: 80px; box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);" data-step="2">
|
|
<i class="fas fa-laptop-code" style="font-size: 1.8rem;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="process-content">
|
|
<h5 class="fw-bold mb-3">{{ t('I Build Your Website') }}</h5>
|
|
<p class="text-muted mb-0">{{ t('I create your website quickly. Simple sites in 48 hours, more complex ones take a bit longer.') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 position-relative" style="z-index: 2;">
|
|
<div class="text-center process-step">
|
|
<div class="process-icon-wrapper mb-4">
|
|
<div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center process-icon" style="width: 80px; height: 80px; box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);" data-step="3">
|
|
<i class="fas fa-users" style="font-size: 1.8rem;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="process-content">
|
|
<h5 class="fw-bold mb-3">{{ t('Start Getting Customers') }}</h5>
|
|
<p class="text-muted mb-0">{{ t('Your website goes live. Customers find you online and start calling or visiting.') }}</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 %} |