Initial commit: Complete multilingual website with translation system
This commit is contained in:
262
templates/services.html
Normal file
262
templates/services.html
Normal file
@@ -0,0 +1,262 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user