Initial commit: Complete multilingual website with translation system
This commit is contained in:
294
templates/about.html
Normal file
294
templates/about.html
Normal file
@@ -0,0 +1,294 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ t('About Kobe Amerijckx | Web Designer Brussels') }}{% endblock %}
|
||||
|
||||
{% block description %}{{ t('Meet Kobe Amerijckx, professional web designer in Brussels. 10+ years experience creating stunning websites for small businesses. Free consultation available.') }}{% endblock %}
|
||||
|
||||
{% block keywords %}{{ t('website design, web development, small business, Belgium, Brussels, professional websites, affordable web design') }}{% endblock %}
|
||||
|
||||
{% block og_title %}{{ t('About Kobe Amerijckx | Web Designer Brussels') }}{% endblock %}
|
||||
|
||||
{% block og_description %}{{ t('Meet Kobe Amerijckx, professional web designer in Brussels. 10+ years experience creating stunning websites for small businesses. Free consultation available.') }}{% endblock %}
|
||||
|
||||
{% block twitter_title %}{{ t('About Kobe Amerijckx | Web Designer Brussels') }}{% endblock %}
|
||||
|
||||
{% block twitter_description %}{{ t('Meet Kobe Amerijckx, professional web designer in Brussels. 10+ years experience creating stunning websites for small businesses. Free consultation available.') }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Hero Section -->
|
||||
{{ hero.hero_section(
|
||||
title="About Kobelly",
|
||||
subtitle="Hi, I'm Kobe Amerijckx, the founder and developer behind Kobelly Web Solutions. I'm passionate about helping small businesses succeed online with professional, affordable web solutions.",
|
||||
icon_class="fas fa-user-tie",
|
||||
stats=[
|
||||
{"value": "8+", "label": "Years Experience"},
|
||||
{"value": "15,000+", "label": "Hours Coded"},
|
||||
{"value": "100%", "label": "Committed"}
|
||||
],
|
||||
t=t
|
||||
) }}
|
||||
|
||||
<!-- Our Story Section -->
|
||||
<section class="py-5 story-section">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-5">
|
||||
<div class="col-lg-6">
|
||||
<div class="story-content">
|
||||
<div class="section-badge mb-3">
|
||||
<span class="badge bg-primary-subtle text-primary px-3 py-2">{{ t('My Story') }}</span>
|
||||
</div>
|
||||
<h2 class="display-5 fw-bold mb-4">{{ t('Building Digital Success Stories') }}</h2>
|
||||
<p class="lead mb-4">{{ t('Founded with a mission to democratize professional web development, Kobelly was born from my belief that every business deserves a stunning online presence.') }}</p>
|
||||
<p class="mb-4">{{ t("I understand the challenges that small businesses face in today's digital landscape. High costs, complex processes, and lack of ongoing support often prevent entrepreneurs from getting the website they need to grow their business.") }}</p>
|
||||
<p class="mb-4">{{ t("That's why I've created a service that combines professional quality with affordable pricing, transparent communication, and ongoing support. I don't just build websites – I build partnerships that help your business thrive.") }}</p>
|
||||
|
||||
<div class="story-features mt-5">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<div class="story-feature">
|
||||
<i class="fas fa-check-circle text-success me-2"></i>
|
||||
<span>{{ t('Professional Quality') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="story-feature">
|
||||
<i class="fas fa-check-circle text-success me-2"></i>
|
||||
<span>{{ t('Affordable Pricing') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="story-feature">
|
||||
<i class="fas fa-check-circle text-success me-2"></i>
|
||||
<span>{{ t('Transparent Communication') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="story-feature">
|
||||
<i class="fas fa-check-circle text-success me-2"></i>
|
||||
<span>{{ t('Ongoing Support') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="mission-card">
|
||||
<div class="mission-icon-wrapper mb-4">
|
||||
<i class="fas fa-rocket mission-icon"></i>
|
||||
</div>
|
||||
<h3 class="fw-bold mb-3">{{ t('My Mission') }}</h3>
|
||||
<p class="lead text-muted">{{ t('To empower small businesses with professional, affordable web solutions that drive growth and success in the digital world.') }}</p>
|
||||
<div class="mission-stats mt-4">
|
||||
<div class="row text-center">
|
||||
<div class="col-6">
|
||||
<div class="mission-stat">
|
||||
<h4 class="text-primary fw-bold">100%</h4>
|
||||
<small class="text-muted">{{ t('Client Satisfaction') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="mission-stat">
|
||||
<h4 class="text-primary fw-bold">48h</h4>
|
||||
<small class="text-muted">{{ t('Response Time') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Values Section -->
|
||||
<section class="py-5 values-section">
|
||||
<div class="container">
|
||||
<div class="row text-center mb-5">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="section-badge mb-3">
|
||||
<span class="badge bg-primary-subtle text-primary px-3 py-2">{{ t('My Values') }}</span>
|
||||
</div>
|
||||
<h2 class="display-5 fw-bold mb-3">{{ t('The Principles That Guide Me') }}</h2>
|
||||
<p class="lead text-muted">{{ t('These core values shape everything I do and every decision I make.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4">
|
||||
<div class="value-card fade-in-up">
|
||||
<div class="value-icon-wrapper mb-4">
|
||||
<i class="fas fa-heart value-icon"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">{{ t('Passion') }}</h4>
|
||||
<p class="text-muted">{{ t("I'm passionate about web design and helping businesses succeed. Every project is approached with enthusiasm and dedication.") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="value-card fade-in-up">
|
||||
<div class="value-icon-wrapper mb-4">
|
||||
<i class="fas fa-handshake value-icon"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">{{ t('Integrity') }}</h4>
|
||||
<p class="text-muted">{{ t('I believe in honest, transparent communication and always deliver what I promise. Your success is my success.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="value-card fade-in-up">
|
||||
<div class="value-icon-wrapper mb-4">
|
||||
<i class="fas fa-lightbulb value-icon"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">{{ t('Innovation') }}</h4>
|
||||
<p class="text-muted">{{ t('I stay current with the latest web technologies and design trends to ensure your website stands out from the competition.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Me Section -->
|
||||
<section class="py-5 about-me-section">
|
||||
<div class="container">
|
||||
<div class="row text-center mb-5">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="section-badge mb-3">
|
||||
<span class="badge bg-primary-subtle text-primary px-3 py-2">{{ t('About Me') }}</span>
|
||||
</div>
|
||||
<h2 class="display-5 fw-bold mb-3">{{ t("Meet Kobe Amerijckx") }}</h2>
|
||||
<p class="lead text-muted">{{ t("I'm the sole developer behind Kobelly, dedicated to creating exceptional websites for small businesses.") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="about-me-card fade-in-up">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-4 text-center">
|
||||
<div class="about-me-avatar mb-4">
|
||||
<div class="avatar-wrapper">
|
||||
<i class="fas fa-user-tie avatar-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<h4 class="fw-bold mb-3">{{ t('Your Dedicated Web Developer') }}</h4>
|
||||
<p class="text-muted mb-4">{{ t('With over 10 years of experience in web development, I specialize in creating fast, responsive, and user-friendly websites that help small businesses grow online.') }}</p>
|
||||
<p class="text-muted mb-4">{{ t('I handle every aspect of your project personally - from initial consultation to design, development, and ongoing support. This ensures consistent quality and direct communication throughout the entire process.') }}</p>
|
||||
|
||||
<div class="about-me-skills mb-4">
|
||||
<h6 class="fw-bold mb-3">{{ t('My Expertise:') }}</h6>
|
||||
<div class="row g-2">
|
||||
<div class="col-md-6">
|
||||
<div class="skill-item">
|
||||
<i class="fas fa-check text-success me-2"></i>
|
||||
<span>{{ t('Responsive Web Design') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="skill-item">
|
||||
<i class="fas fa-check text-success me-2"></i>
|
||||
<span>{{ t('E-commerce Development') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="skill-item">
|
||||
<i class="fas fa-check text-success me-2"></i>
|
||||
<span>{{ t('SEO Optimization') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="skill-item">
|
||||
<i class="fas fa-check text-success me-2"></i>
|
||||
<span>{{ t('Website Maintenance') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-me-contact">
|
||||
<h6 class="fw-bold mb-3">{{ t("Let's Connect:") }}</h6>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
|
||||
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
|
||||
<a href="#" class="social-link"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us Section -->
|
||||
<section class="py-5 why-choose-section">
|
||||
<div class="container">
|
||||
<div class="row text-center mb-5">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="section-badge mb-3">
|
||||
<span class="badge bg-primary-subtle text-primary px-3 py-2">{{ t('Why Choose Me') }}</span>
|
||||
</div>
|
||||
<h2 class="display-5 fw-bold mb-3">{{ t('What Makes Me Different') }}</h2>
|
||||
<p class="lead text-muted">{{ t("I'm not just another web developer. Here's what sets me apart.") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-6">
|
||||
<div class="feature-item fade-in-up">
|
||||
<div class="feature-icon-wrapper">
|
||||
<i class="fas fa-dollar-sign feature-icon"></i>
|
||||
</div>
|
||||
<div class="feature-content">
|
||||
<h5 class="fw-bold mb-2">{{ t('Affordable Pricing') }}</h5>
|
||||
<p class="text-muted mb-0">{{ t('I offer competitive pricing without compromising on quality. My packages are designed to fit small business budgets.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="feature-item fade-in-up">
|
||||
<div class="feature-icon-wrapper">
|
||||
<i class="fas fa-clock feature-icon"></i>
|
||||
</div>
|
||||
<div class="feature-content">
|
||||
<h5 class="fw-bold mb-2">{{ t('Fast Turnaround') }}</h5>
|
||||
<p class="text-muted mb-0">{{ t('I understand that time is money. I deliver projects on time and keep you updated throughout the process.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="feature-item fade-in-up">
|
||||
<div class="feature-icon-wrapper">
|
||||
<i class="fas fa-comments feature-icon"></i>
|
||||
</div>
|
||||
<div class="feature-content">
|
||||
<h5 class="fw-bold mb-2">{{ t('Direct Communication') }}</h5>
|
||||
<p class="text-muted mb-0">{{ t('You work directly with me - no account managers or middlemen. I believe in transparent communication.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="feature-item fade-in-up">
|
||||
<div class="feature-icon-wrapper">
|
||||
<i class="fas fa-headset feature-icon"></i>
|
||||
</div>
|
||||
<div class="feature-content">
|
||||
<h5 class="fw-bold mb-2">{{ t('Personal Support') }}</h5>
|
||||
<p class="text-muted mb-0">{{ t("Our relationship doesn't end when your website launches. I provide ongoing support and maintenance.") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
{{ components.cta_section(
|
||||
title="Ready to Work Together?",
|
||||
description="Let's discuss your project and see how I can help your business grow online.",
|
||||
button_text="Get Started Today",
|
||||
button_url="contact",
|
||||
t=t
|
||||
) }}
|
||||
{% endblock %}
|
||||
192
templates/base.html
Normal file
192
templates/base.html
Normal file
@@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ get_current_language() }}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<title>{% block title %}{{ t('Kobelly Web Solutions') }}{% endblock %}</title>
|
||||
<meta name="description" content="{% block description %}{{ t('Professional website design for small businesses in Belgium. Fast, affordable websites that help you get found online.') }}{% endblock %}">
|
||||
<meta name="keywords" content="{% block keywords %}{{ t('website design, web development, small business, Belgium, Brussels, professional websites, affordable web design') }}{% endblock %}">
|
||||
<meta name="author" content="Kobe Amerijckx">
|
||||
<meta name="robots" content="index, follow">
|
||||
|
||||
<!-- Open Graph Meta Tags -->
|
||||
<meta property="og:title" content="{% block og_title %}{{ t('Kobelly Web Solutions') }}{% endblock %}">
|
||||
<meta property="og:description" content="{% block og_description %}{{ t('Professional website design for small businesses in Belgium. Fast, affordable websites that help you get found online.') }}{% endblock %}">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="{{ request.url }}">
|
||||
<meta property="og:image" content="{{ url_for('static', filename='images/og-image.jpg', _external=True) }}">
|
||||
<meta property="og:site_name" content="Kobelly Web Solutions">
|
||||
<meta property="og:locale" content="{{ get_current_language() }}">
|
||||
|
||||
<!-- Twitter Card Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="{% block twitter_title %}{{ t('Kobelly Web Solutions') }}{% endblock %}">
|
||||
<meta name="twitter:description" content="{% block twitter_description %}{{ t('Professional website design for small businesses in Belgium. Fast, affordable websites that help you get found online.') }}{% endblock %}">
|
||||
<meta name="twitter:image" content="{{ url_for('static', filename='images/og-image.jpg', _external=True) }}">
|
||||
<meta name="twitter:creator" content="@kobelly">
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="{{ request.url }}">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
|
||||
|
||||
<!-- Structured Data (JSON-LD) -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
"name": "Kobelly Web Solutions",
|
||||
"description": "{{ t('Professional website design for small businesses in Belgium. Fast, affordable websites that help you get found online.') }}",
|
||||
"url": "{{ request.url_root }}",
|
||||
"telephone": "+32 486 21 07 07",
|
||||
"email": "info@kobelly.com",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "Blijkheerstraat 92",
|
||||
"addressLocality": "Pajottegem",
|
||||
"addressCountry": "BE",
|
||||
"addressRegion": "Vlaams-Brabant",
|
||||
"postalCode": "1755"
|
||||
},
|
||||
"geo": {
|
||||
"@type": "GeoCoordinates",
|
||||
"latitude": "50.8503",
|
||||
"longitude": "4.3517"
|
||||
},
|
||||
"openingHours": "Mo-Fr 09:00-18:00",
|
||||
"priceRange": "€€",
|
||||
"currenciesAccepted": "EUR",
|
||||
"paymentAccepted": "Cash, Credit Card, Bank Transfer",
|
||||
"areaServed": ["Belgium", "Europe"],
|
||||
"serviceType": ["Website Design", "Web Development", "E-commerce Solutions"],
|
||||
"founder": {
|
||||
"@type": "Person",
|
||||
"name": "Kobe Amerijckx",
|
||||
"jobTitle": "Web Developer",
|
||||
"description": "Professional web developer specializing in small business websites"
|
||||
},
|
||||
"sameAs": [
|
||||
"https://www.linkedin.com/company/kobelly",
|
||||
"https://www.facebook.com/kobelly",
|
||||
"https://twitter.com/kobelly"
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
{# Import components macros #}
|
||||
{% import 'components/cta_section.html' as components %}
|
||||
{% import 'components/testimonials_section.html' as testimonials %}
|
||||
{% import 'components/hero_section.html' as hero %}
|
||||
{% import 'components/stats_section.html' as stats %}
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{{ url_for('index') }}">
|
||||
<i class="fas fa-code me-2"></i>{{ t('Kobelly') }}
|
||||
</a>
|
||||
<div class="d-flex ms-auto align-items-center flex-row">
|
||||
<!-- Dark/Light Mode Toggle: Always visible in navbar -->
|
||||
<button class="btn-toggle-dark d-lg-none me-2" id="theme-toggle" title="Toggle light/dark mode">
|
||||
<i class="fas fa-moon" id="theme-icon"></i>
|
||||
</button>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('index') }}">{{ t('Home') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('services') }}">{{ t('Services') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('about') }}">{{ t('About') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('portfolio') }}">{{ t('Portfolio') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('contact') }}">{{ t('Contact') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Language Selector -->
|
||||
<div class="language-selector me-2">
|
||||
<button class="btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||||
<i class="fas fa-globe me-1"></i>
|
||||
{% if get_current_language() == 'en' %}English
|
||||
{% elif get_current_language() == 'de' %}Deutsch
|
||||
{% elif get_current_language() == 'fr' %}Français
|
||||
{% elif get_current_language() == 'nl' %}Nederlands
|
||||
{% else %}🇬🇧 English{% endif %}
|
||||
</button>
|
||||
<ul class="dropdown-menu language-dropdown">
|
||||
<li><a class="dropdown-item" href="{{ url_for('set_language_route', language='en') }}">🇬🇧 English</a></li>
|
||||
<li><a class="dropdown-item" href="{{ url_for('set_language_route', language='nl') }}">🇳🇱 Nederlands</a></li>
|
||||
<li><a class="dropdown-item" href="{{ url_for('set_language_route', language='fr') }}">🇫🇷 Français</a></li>
|
||||
<li><a class="dropdown-item" href="{{ url_for('set_language_route', language='de') }}">🇩🇪 Deutsch</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Dark/Light Mode Toggle: visible on desktop only -->
|
||||
<div class="d-none d-lg-block">
|
||||
<button class="btn-toggle-dark ms-2" id="theme-toggle-desktop" title="Toggle light/dark mode">
|
||||
<i class="fas fa-moon" id="theme-icon-desktop"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h5>{{ t('Kobelly Web Solutions') }}</h5>
|
||||
<p>{{ t('Creating professional websites for small businesses and entrepreneurs.') }}</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5>{{ t('Services') }}</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>{{ t('Website Design') }}</li>
|
||||
<li>{{ t('E-commerce Solutions') }}</li>
|
||||
<li>{{ t('Maintenance & Support') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5>{{ t('Contact') }}</h5>
|
||||
<p>
|
||||
<i class="fas fa-envelope me-2"></i><a href="mailto:info@kobelly.com" class="text-decoration-none">{{ t('info@kobelly.com') }}</a><br>
|
||||
<i class="fas fa-phone me-2"></i><a href="tel:+32486210707" class="text-decoration-none">{{ t('+32 486 21 07 07') }}</a><br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div class="text-center">
|
||||
<p>© {{ current_year }} {{ t('Kobelly Web Solutions. All rights reserved.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
16
templates/components/cta_section.html
Normal file
16
templates/components/cta_section.html
Normal file
@@ -0,0 +1,16 @@
|
||||
{% macro cta_section(title, description, button_text, button_url, t) %}
|
||||
<section class="py-5 bg-primary text-white cta-section">
|
||||
<div class="cta-bg-animation">
|
||||
<div class="cta-particle cta-particle-1"></div>
|
||||
<div class="cta-particle cta-particle-2"></div>
|
||||
<div class="cta-particle cta-particle-3"></div>
|
||||
<div class="cta-particle cta-particle-4"></div>
|
||||
<div class="cta-particle cta-particle-5"></div>
|
||||
</div>
|
||||
<div class="container text-center position-relative" style="z-index: 2;">
|
||||
<h2 class="display-5 fw-bold mb-4">{{ t(title) }}</h2>
|
||||
<p class="lead mb-4">{{ t(description) }}</p>
|
||||
<a href="{{ url_for(button_url) }}" class="btn btn-light btn-lg cta-btn">{{ t(button_text) }}</a>
|
||||
</div>
|
||||
</section>
|
||||
{% endmacro %}
|
||||
27
templates/components/hero_section.html
Normal file
27
templates/components/hero_section.html
Normal file
@@ -0,0 +1,27 @@
|
||||
{% import 'components/stats_section.html' as stats_component %}
|
||||
|
||||
{% macro hero_section(title, subtitle, icon_class="fas fa-star", stats=None, t=t) %}
|
||||
<section class="hero-section py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="hero-content">
|
||||
<h1 class="display-3 fw-bold mb-4">{{ t(title) }}</h1>
|
||||
<p class="lead mb-4">{{ t(subtitle) }}</p>
|
||||
{% if stats %}
|
||||
{{ stats_component.stats_section(stats, t) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 text-center">
|
||||
<div class="hero-visual">
|
||||
<div class="hero-icon-wrapper">
|
||||
<i class="{{ icon_class }} hero-main-icon"></i>
|
||||
<div class="hero-icon-glow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endmacro %}
|
||||
14
templates/components/stats_section.html
Normal file
14
templates/components/stats_section.html
Normal file
@@ -0,0 +1,14 @@
|
||||
{% macro stats_section(stats, t=t) %}
|
||||
<div class="hero-stats mb-4">
|
||||
<div class="row text-center">
|
||||
{% for stat in stats %}
|
||||
<div class="col-4">
|
||||
<div class="stat-item">
|
||||
<h3 class="text-white fw-bold mb-1">{{ stat.value }}</h3>
|
||||
<small class="text-light">{{ t(stat.label) }}</small>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
69
templates/components/testimonials_section.html
Normal file
69
templates/components/testimonials_section.html
Normal file
@@ -0,0 +1,69 @@
|
||||
{% macro testimonials_section(title="What My Clients Say", subtitle="Don't just take my word for it - hear from some of my satisfied clients.", t=t) %}
|
||||
<section class="py-5 bg-light testimonials-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">{{ title }}</h2>
|
||||
<p class="lead text-muted">{{ subtitle }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100 fade-in-up testimonial-card">
|
||||
<div class="card-body p-4">
|
||||
<div class="testimonial-rating mb-3">
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
</div>
|
||||
<p class="card-text mb-3">{{ t('"Got my website in 2 days! Now I get 15 new customers every week from online orders. Best €299 I ever spent for my bakery."') }}</p>
|
||||
<div class="testimonial-author">
|
||||
<strong>{{ t('Maria Van Damme') }}</strong><br>
|
||||
<small class="text-muted">{{ t('Bakery Owner') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100 fade-in-up testimonial-card">
|
||||
<div class="card-body p-4">
|
||||
<div class="testimonial-rating mb-3">
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
</div>
|
||||
<p class="card-text mb-3">{{ t('"My perfume shop website brings in 30% more customers. People find me on Google and call to ask about my products. Website paid for itself in the first month!"') }}</p>
|
||||
<div class="testimonial-author">
|
||||
<strong>{{ t('Anna De Vries') }}</strong><br>
|
||||
<small class="text-muted">{{ t('Perfume Shop Owner') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100 fade-in-up testimonial-card">
|
||||
<div class="card-body p-4">
|
||||
<div class="testimonial-rating mb-3">
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
</div>
|
||||
<p class="card-text mb-3">{{ t('"Kobe made everything so simple. One phone call, told him about my restaurant, and 48 hours later I had a beautiful website. Now customers can see my menu and call to make reservations."') }}</p>
|
||||
<div class="testimonial-author">
|
||||
<strong>{{ t('Piet Janssens') }}</strong><br>
|
||||
<small class="text-muted">{{ t('Restaurant Owner') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endmacro %}
|
||||
304
templates/contact.html
Normal file
304
templates/contact.html
Normal file
@@ -0,0 +1,304 @@
|
||||
{% 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 %}
|
||||
354
templates/index.html
Normal file
354
templates/index.html
Normal file
@@ -0,0 +1,354 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ t('Professional Website Design Brussels | Kobelly Web Solutions') }}{% endblock %}
|
||||
|
||||
{% block description %}{{ t('Professional website design for small businesses in Belgium. Fast, affordable websites that help you get found online.') }}{% endblock %}
|
||||
|
||||
{% block keywords %}{{ t('website design, web development, small business, Belgium, Brussels, professional websites, affordable web design') }}{% endblock %}
|
||||
|
||||
{% block og_title %}{{ t('Professional Website Design Brussels | Kobelly Web Solutions') }}{% endblock %}
|
||||
|
||||
{% block og_description %}{{ t('Professional website design for small businesses in Belgium. Fast, affordable websites that help you get found online.') }}{% endblock %}
|
||||
|
||||
{% block twitter_title %}{{ t('Professional Website Design Brussels | Kobelly Web Solutions') }}{% endblock %}
|
||||
|
||||
{% block twitter_description %}{{ t('Professional website design for small businesses in Belgium. Fast, affordable websites that help you get found online.') }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="hero-animation-container">
|
||||
<!-- Floating tech elements -->
|
||||
<div class="floating-element"><i class="fas fa-code"></i></div>
|
||||
<div class="floating-element"><i class="fas fa-database"></i></div>
|
||||
<div class="floating-element"><i class="fas fa-server"></i></div>
|
||||
<div class="floating-element"><i class="fas fa-cloud"></i></div>
|
||||
<div class="floating-element"><i class="fas fa-shield-alt"></i></div>
|
||||
<div class="floating-element"><i class="fas fa-network-wired"></i></div>
|
||||
<div class="floating-element"><i class="fas fa-microchip"></i></div>
|
||||
<div class="floating-element"><i class="fas fa-laptop-code"></i></div>
|
||||
|
||||
<!-- Code particles -->
|
||||
<div class="code-particle"></></div>
|
||||
<div class="code-particle">{ }</div>
|
||||
<div class="code-particle">[ ]</div>
|
||||
<div class="code-particle"></></div>
|
||||
</div>
|
||||
|
||||
<div class="container hero-content">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="hero-text-content">
|
||||
<h1 class="display-4 fw-bold mb-4 hero-title">{{ t('Get Your Business Online in 48 Hours') }}</h1>
|
||||
<p class="lead mb-4 hero-description">{{ t('Professional websites for small businesses. Fast, affordable, and designed to bring you customers. No technical knowledge needed - I handle everything.') }}</p>
|
||||
{{ stats.stats_section([
|
||||
{"value": "48h", "label": "Delivery Time"},
|
||||
{"value": "€299", "label": "Starting Price"},
|
||||
{"value": "100%", "label": "Satisfaction"}
|
||||
], t) }}
|
||||
<div class="d-flex gap-3 hero-buttons">
|
||||
<a href="{{ url_for('contact') }}" class="btn btn-light btn-lg px-4 py-3 fw-bold">{{ t('Get Your Website') }}</a>
|
||||
<a href="{{ url_for('services') }}" class="btn btn-outline-light btn-lg px-4 py-3">{{ t('See Packages') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 text-center">
|
||||
<div class="hero-visual">
|
||||
<div class="hero-icon-wrapper">
|
||||
<i class="fas fa-rocket hero-main-icon"></i>
|
||||
<div class="hero-icon-glow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Urgency Section -->
|
||||
<section class="py-4 bg-primary bg-opacity-10">
|
||||
<div class="container">
|
||||
<div class="row text-center">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="d-flex align-items-center justify-content-center gap-5 flex-wrap">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="fas fa-search text-primary fs-4"></i>
|
||||
<span class="fw-bold text-white">{{ t('75% of customers research businesses online before visiting') }}</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="fas fa-chart-line text-primary fs-4"></i>
|
||||
<span class="fw-bold text-white">{{ t('Your competitors are already online') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="py-5 bg-light features-section">
|
||||
<div class="container">
|
||||
<div class="row text-center mb-5">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="section-header">
|
||||
<h2 class="display-5 fw-bold mb-3">{{ t('Why Choose Kobelly?') }}</h2>
|
||||
<p class="lead text-muted">{{ t('I make getting online simple and affordable for small businesses like yours.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 feature-card text-center p-4 fade-in-up">
|
||||
<div class="card-body">
|
||||
<div class="feature-icon-wrapper mb-4">
|
||||
<i class="fas fa-clock text-primary feature-icon"></i>
|
||||
</div>
|
||||
<h5 class="card-title fw-bold mb-3">{{ t('Fast Delivery') }}</h5>
|
||||
<p class="card-text">{{ t('Your website ready in 48 hours. No waiting weeks or months - get online fast and start getting customers.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 feature-card text-center p-4 fade-in-up">
|
||||
<div class="card-body">
|
||||
<div class="feature-icon-wrapper mb-4">
|
||||
<i class="fas fa-euro-sign text-primary feature-icon"></i>
|
||||
</div>
|
||||
<h5 class="card-title fw-bold mb-3">{{ t('Affordable Pricing') }}</h5>
|
||||
<p class="card-text">{{ t('Starting at €299. Small monthly hosting fee keeps your website online. No hidden costs or surprises.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 feature-card text-center p-4 fade-in-up">
|
||||
<div class="card-body">
|
||||
<div class="feature-icon-wrapper mb-4">
|
||||
<i class="fas fa-handshake text-primary feature-icon"></i>
|
||||
</div>
|
||||
<h5 class="card-title fw-bold mb-3">{{ t('Personal Service') }}</h5>
|
||||
<p class="card-text">{{ t('Work directly with me - no account managers or middlemen. I understand your business and your needs.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Expertise Section -->
|
||||
<section class="py-5 expertise-section">
|
||||
<div class="container">
|
||||
<div class="row text-center mb-5">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="section-header">
|
||||
<h2 class="display-5 fw-bold mb-3">{{ t('What I Do for Your Business') }}</h2>
|
||||
<p class="lead text-muted">{{ t('I help small businesses get online and start getting customers.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-6">
|
||||
<div class="card expertise-card h-100 fade-in-up">
|
||||
<div class="card-body p-5">
|
||||
<div class="expertise-header mb-4">
|
||||
<div class="expertise-icon-wrapper mb-3">
|
||||
<i class="fas fa-store text-primary expertise-icon"></i>
|
||||
</div>
|
||||
<h4 class="card-title fw-bold mb-0">{{ t('Business Websites') }}</h4>
|
||||
</div>
|
||||
<p class="card-text mb-4">{{ t('Professional websites that showcase your business and help customers find you online.') }}</p>
|
||||
<ul class="list-unstyled expertise-features">
|
||||
<li class="expertise-feature"><i class="fas fa-check-circle text-success me-3"></i>{{ t('Show your products/services') }}</li>
|
||||
<li class="expertise-feature"><i class="fas fa-check-circle text-success me-3"></i>{{ t('Contact information & location') }}</li>
|
||||
<li class="expertise-feature"><i class="fas fa-check-circle text-success me-3"></i>{{ t('Customer testimonials') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card expertise-card h-100 fade-in-up">
|
||||
<div class="card-body p-5">
|
||||
<div class="expertise-header mb-4">
|
||||
<div class="expertise-icon-wrapper mb-3">
|
||||
<i class="fas fa-shopping-cart text-primary expertise-icon"></i>
|
||||
</div>
|
||||
<h4 class="card-title fw-bold mb-0">{{ t('Online Stores') }}</h4>
|
||||
</div>
|
||||
<p class="card-text mb-4">{{ t('Sell your products online 24/7. Accept payments, manage orders, and grow your sales.') }}</p>
|
||||
<ul class="list-unstyled expertise-features">
|
||||
<li class="expertise-feature"><i class="fas fa-check-circle text-success me-3"></i>{{ t('Secure payment processing') }}</li>
|
||||
<li class="expertise-feature"><i class="fas fa-check-circle text-success me-3"></i>{{ t('Product catalog management') }}</li>
|
||||
<li class="expertise-feature"><i class="fas fa-check-circle text-success me-3"></i>{{ t('Order tracking system') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-5">
|
||||
<a href="{{ url_for('services') }}" class="btn btn-primary btn-lg px-5 py-3 fw-bold">{{ t('See My Packages') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Local SEO 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 mb-3">{{ t('Get Found by Local Customers') }}</h2>
|
||||
<p class="lead text-muted">{{ t('Your website helps customers in your area find and choose your business.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-start gap-3">
|
||||
<div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; min-width: 50px;">
|
||||
<i class="fas fa-map-marker-alt text-white fs-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="fw-bold mb-2">{{ t('Show Up in Google Maps') }}</h5>
|
||||
<p class="text-muted mb-0">{{ t('When people search for businesses like yours in your area, your website helps you appear in local search results.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-start gap-3">
|
||||
<div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; min-width: 50px;">
|
||||
<i class="fas fa-star text-white fs-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="fw-bold mb-2">{{ t('Get Reviews & Ratings') }}</h5>
|
||||
<p class="text-muted mb-0">{{ t('Customers can leave reviews on your website and Google, helping other customers choose your business.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-start gap-3">
|
||||
<div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; min-width: 50px;">
|
||||
<i class="fas fa-clock text-white fs-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="fw-bold mb-2">{{ t('Open 24/7 Online') }}</h5>
|
||||
<p class="text-muted mb-0">{{ t('Your website works for you even when you\'re closed. Customers can see your products, prices, and contact info anytime.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-start gap-3">
|
||||
<div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; min-width: 50px;">
|
||||
<i class="fas fa-phone text-white fs-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="fw-bold mb-2">{{ t('Easy Contact & Directions') }}</h5>
|
||||
<p class="text-muted mb-0">{{ t('Customers can easily find your phone number, address, and get directions to your business.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Website vs No Website Comparison -->
|
||||
<section class="py-5">
|
||||
<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('What Happens Without a Website?') }}</h2>
|
||||
<p class="lead text-muted">{{ t('See the difference a website makes for your business.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 border-danger border-2">
|
||||
<div class="card-header bg-danger bg-opacity-10 text-center py-3">
|
||||
<h4 class="fw-bold text-danger mb-0">{{ t('Without a Website') }}</h4>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-3 d-flex align-items-start">
|
||||
<i class="fas fa-times-circle text-danger me-3 mt-1"></i>
|
||||
<span>{{ t('Customer calls, you\'re closed, they call your competitor') }}</span>
|
||||
</li>
|
||||
<li class="mb-3 d-flex align-items-start">
|
||||
<i class="fas fa-times-circle text-danger me-3 mt-1"></i>
|
||||
<span>{{ t('People can\'t find your business on Google') }}</span>
|
||||
</li>
|
||||
<li class="mb-3 d-flex align-items-start">
|
||||
<i class="fas fa-times-circle text-danger me-3 mt-1"></i>
|
||||
<span>{{ t('No way to show your products or services online') }}</span>
|
||||
</li>
|
||||
<li class="mb-3 d-flex align-items-start">
|
||||
<i class="fas fa-times-circle text-danger me-3 mt-1"></i>
|
||||
<span>{{ t('Customers can\'t leave reviews or recommendations') }}</span>
|
||||
</li>
|
||||
<li class="mb-3 d-flex align-items-start">
|
||||
<i class="fas fa-times-circle text-danger me-3 mt-1"></i>
|
||||
<span>{{ t('Your competitors get all the online customers') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 border-success border-2">
|
||||
<div class="card-header bg-success bg-opacity-10 text-center py-3">
|
||||
<h4 class="fw-bold text-success mb-0">{{ t('With a Website') }}</h4>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-3 d-flex align-items-start">
|
||||
<i class="fas fa-check-circle text-success me-3 mt-1"></i>
|
||||
<span>{{ t('Customers can see your business even when you\'re closed') }}</span>
|
||||
</li>
|
||||
<li class="mb-3 d-flex align-items-start">
|
||||
<i class="fas fa-check-circle text-success me-3 mt-1"></i>
|
||||
<span>{{ t('Show up in Google search results and Maps') }}</span>
|
||||
</li>
|
||||
<li class="mb-3 d-flex align-items-start">
|
||||
<i class="fas fa-check-circle text-success me-3 mt-1"></i>
|
||||
<span>{{ t('Display your products, services, and prices 24/7') }}</span>
|
||||
</li>
|
||||
<li class="mb-3 d-flex align-items-start">
|
||||
<i class="fas fa-check-circle text-success me-3 mt-1"></i>
|
||||
<span>{{ t('Customers can leave reviews and recommend you') }}</span>
|
||||
</li>
|
||||
<li class="mb-3 d-flex align-items-start">
|
||||
<i class="fas fa-check-circle text-success me-3 mt-1"></i>
|
||||
<span>{{ t('Get customers that would have gone to competitors') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
{{ components.cta_section(
|
||||
title="Ready to Get Your Business Online?",
|
||||
description="Let's talk about your website. Free consultation, no obligation.",
|
||||
button_text="Get Started Today",
|
||||
button_url="contact",
|
||||
t=t
|
||||
) }}
|
||||
{% endblock %}
|
||||
364
templates/portfolio.html
Normal file
364
templates/portfolio.html
Normal file
@@ -0,0 +1,364 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ t('Portfolio | Web Design Projects Brussels') }}{% endblock %}
|
||||
|
||||
{% block description %}{{ t('View my web design portfolio featuring business websites, e-commerce sites, and custom web solutions. Professional web design projects completed in Brussels.') }}{% endblock %}
|
||||
|
||||
{% block keywords %}{{ t('website design, web development, small business, Belgium, Brussels, professional websites, affordable web design') }}{% endblock %}
|
||||
|
||||
{% block og_title %}{{ t('Portfolio | Web Design Projects Brussels') }}{% endblock %}
|
||||
|
||||
{% block og_description %}{{ t('View my web design portfolio featuring business websites, e-commerce sites, and custom web solutions. Professional web design projects completed in Brussels.') }}{% endblock %}
|
||||
|
||||
{% block twitter_title %}{{ t('Portfolio | Web Design Projects Brussels') }}{% endblock %}
|
||||
|
||||
{% block twitter_description %}{{ t('View my web design portfolio featuring business websites, e-commerce sites, and custom web solutions. Professional web design projects completed in Brussels.') }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Hero Section -->
|
||||
{{ hero.hero_section(
|
||||
title="Design Showcase",
|
||||
subtitle="Explore different design styles and themes. Click on any design to see how your website could look with these modern, professional styles.",
|
||||
icon_class="fas fa-palette",
|
||||
stats=[
|
||||
{"value": "8+", "label": "Years Experience"},
|
||||
{"value": "15,000+", "label": "Hours Coded"},
|
||||
{"value": "100%", "label": "Committed"}
|
||||
],
|
||||
t=t
|
||||
) }}
|
||||
|
||||
<!-- Design Showcase Section -->
|
||||
<section class="design-showcase py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<h2 class="display-5 fw-bold mb-3">{{ t('Interactive Design Themes') }}</h2>
|
||||
<p class="lead text-muted">{{ t('Click on any design below to preview how your website could look. Each theme demonstrates different styles, colors, and layouts.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Design Grid -->
|
||||
<div class="row g-4">
|
||||
<!-- Modern Minimal -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="design-card" data-theme="modern-minimal">
|
||||
<div class="design-preview">
|
||||
<div class="design-header">
|
||||
<div class="design-nav">
|
||||
<div class="nav-dot"></div>
|
||||
<div class="nav-dot"></div>
|
||||
<div class="nav-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-content">
|
||||
<div class="design-hero">
|
||||
<div class="design-title"></div>
|
||||
<div class="design-subtitle"></div>
|
||||
</div>
|
||||
<div class="design-features">
|
||||
<div class="feature-line"></div>
|
||||
<div class="feature-line"></div>
|
||||
<div class="feature-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-info">
|
||||
<h4 class="design-name">{{ t('Modern Minimal') }}</h4>
|
||||
<p class="design-description">{{ t('Clean, spacious design with subtle animations and modern typography.') }}</p>
|
||||
<div class="design-tags">
|
||||
<span class="tag">Clean</span>
|
||||
<span class="tag">Modern</span>
|
||||
<span class="tag">Minimal</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bold & Vibrant -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="design-card" data-theme="bold-vibrant">
|
||||
<div class="design-preview">
|
||||
<div class="design-header">
|
||||
<div class="design-nav">
|
||||
<div class="nav-dot"></div>
|
||||
<div class="nav-dot"></div>
|
||||
<div class="nav-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-content">
|
||||
<div class="design-hero">
|
||||
<div class="design-title"></div>
|
||||
<div class="design-subtitle"></div>
|
||||
</div>
|
||||
<div class="design-features">
|
||||
<div class="feature-line"></div>
|
||||
<div class="feature-line"></div>
|
||||
<div class="feature-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-info">
|
||||
<h4 class="design-name">{{ t('Bold & Vibrant') }}</h4>
|
||||
<p class="design-description">{{ t('Eye-catching design with bold colors and dynamic elements.') }}</p>
|
||||
<div class="design-tags">
|
||||
<span class="tag">Bold</span>
|
||||
<span class="tag">Colorful</span>
|
||||
<span class="tag">Dynamic</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Elegant Professional -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="design-card" data-theme="elegant-professional">
|
||||
<div class="design-preview">
|
||||
<div class="design-header">
|
||||
<div class="design-nav">
|
||||
<div class="nav-dot"></div>
|
||||
<div class="nav-dot"></div>
|
||||
<div class="nav-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-content">
|
||||
<div class="design-hero">
|
||||
<div class="design-title"></div>
|
||||
<div class="design-subtitle"></div>
|
||||
</div>
|
||||
<div class="design-features">
|
||||
<div class="feature-line"></div>
|
||||
<div class="feature-line"></div>
|
||||
<div class="feature-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-info">
|
||||
<h4 class="design-name">{{ t('Elegant Professional') }}</h4>
|
||||
<p class="design-description">{{ t('Sophisticated design with premium styling and professional appeal.') }}</p>
|
||||
<div class="design-tags">
|
||||
<span class="tag">Elegant</span>
|
||||
<span class="tag">Professional</span>
|
||||
<span class="tag">Premium</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tech Startup -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="design-card" data-theme="tech-startup">
|
||||
<div class="design-preview">
|
||||
<div class="design-header">
|
||||
<div class="design-nav">
|
||||
<div class="nav-dot"></div>
|
||||
<div class="nav-dot"></div>
|
||||
<div class="nav-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-content">
|
||||
<div class="design-hero">
|
||||
<div class="design-title"></div>
|
||||
<div class="design-subtitle"></div>
|
||||
</div>
|
||||
<div class="design-features">
|
||||
<div class="feature-line"></div>
|
||||
<div class="feature-line"></div>
|
||||
<div class="feature-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-info">
|
||||
<h4 class="design-name">{{ t('Tech Startup') }}</h4>
|
||||
<p class="design-description">{{ t('Modern tech-focused design with innovative layouts and animations.') }}</p>
|
||||
<div class="design-tags">
|
||||
<span class="tag">Tech</span>
|
||||
<span class="tag">Innovative</span>
|
||||
<span class="tag">Modern</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Creative Agency -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="design-card" data-theme="creative-agency">
|
||||
<div class="design-preview">
|
||||
<div class="design-header">
|
||||
<div class="design-nav">
|
||||
<div class="nav-dot"></div>
|
||||
<div class="nav-dot"></div>
|
||||
<div class="nav-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-content">
|
||||
<div class="design-hero">
|
||||
<div class="design-title"></div>
|
||||
<div class="design-subtitle"></div>
|
||||
</div>
|
||||
<div class="design-features">
|
||||
<div class="feature-line"></div>
|
||||
<div class="feature-line"></div>
|
||||
<div class="feature-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-info">
|
||||
<h4 class="design-name">{{ t('Creative Agency') }}</h4>
|
||||
<p class="design-description">{{ t('Artistic design with creative layouts and expressive visual elements.') }}</p>
|
||||
<div class="design-tags">
|
||||
<span class="tag">Creative</span>
|
||||
<span class="tag">Artistic</span>
|
||||
<span class="tag">Expressive</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- E-commerce -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="design-card" data-theme="ecommerce">
|
||||
<div class="design-preview">
|
||||
<div class="design-header">
|
||||
<div class="design-nav">
|
||||
<div class="nav-dot"></div>
|
||||
<div class="nav-dot"></div>
|
||||
<div class="nav-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-content">
|
||||
<div class="design-hero">
|
||||
<div class="design-title"></div>
|
||||
<div class="design-subtitle"></div>
|
||||
</div>
|
||||
<div class="design-features">
|
||||
<div class="feature-line"></div>
|
||||
<div class="feature-line"></div>
|
||||
<div class="feature-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-info">
|
||||
<h4 class="design-name">{{ t('E-commerce') }}</h4>
|
||||
<p class="design-description">{{ t('Optimized design for online stores with product-focused layouts.') }}</p>
|
||||
<div class="design-tags">
|
||||
<span class="tag">E-commerce</span>
|
||||
<span class="tag">Product-focused</span>
|
||||
<span class="tag">Optimized</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Theme Preview Section -->
|
||||
<div class="row mt-5">
|
||||
<div class="col-12">
|
||||
<div class="theme-preview-container" id="theme-preview">
|
||||
<div class="theme-preview-header text-center mb-4">
|
||||
<h3 class="fw-bold">{{ t('Live Preview') }}</h3>
|
||||
<p class="text-muted">{{ t('Click on any design above to see a live preview of how your website could look.') }}</p>
|
||||
<button class="btn btn-outline-primary" id="reset-theme">{{ t('Reset to Default') }}</button>
|
||||
</div>
|
||||
<div class="theme-preview-content">
|
||||
<div class="mini-website" id="mini-website">
|
||||
<!-- Mini Website Header -->
|
||||
<header class="mini-header">
|
||||
<nav class="mini-nav">
|
||||
<div class="mini-brand">
|
||||
<i class="fas fa-code me-2"></i>
|
||||
<span>YourBrand</span>
|
||||
</div>
|
||||
<ul class="mini-menu">
|
||||
<li><a href="#" class="mini-nav-link">Home</a></li>
|
||||
<li><a href="#" class="mini-nav-link">Services</a></li>
|
||||
<li><a href="#" class="mini-nav-link">About</a></li>
|
||||
<li><a href="#" class="mini-nav-link">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Mini Website Hero -->
|
||||
<section class="mini-hero">
|
||||
<div class="mini-hero-content">
|
||||
<h1 class="mini-hero-title">Welcome to Your Business</h1>
|
||||
<p class="mini-hero-subtitle">Professional solutions for your success</p>
|
||||
<div class="mini-hero-buttons">
|
||||
<button class="mini-btn mini-btn-primary">Get Started</button>
|
||||
<button class="mini-btn mini-btn-secondary">Learn More</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mini Website Features -->
|
||||
<section class="mini-features">
|
||||
<div class="mini-feature">
|
||||
<div class="mini-feature-icon">
|
||||
<i class="fas fa-rocket"></i>
|
||||
</div>
|
||||
<h3 class="mini-feature-title">Fast & Reliable</h3>
|
||||
<p class="mini-feature-text">Lightning-fast performance and reliable service.</p>
|
||||
</div>
|
||||
<div class="mini-feature">
|
||||
<div class="mini-feature-icon">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
</div>
|
||||
<h3 class="mini-feature-title">Secure & Safe</h3>
|
||||
<p class="mini-feature-text">Your data is protected with industry-leading security.</p>
|
||||
</div>
|
||||
<div class="mini-feature">
|
||||
<div class="mini-feature-icon">
|
||||
<i class="fas fa-headset"></i>
|
||||
</div>
|
||||
<h3 class="mini-feature-title">24/7 Support</h3>
|
||||
<p class="mini-feature-text">Round-the-clock support when you need it most.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mini Website CTA -->
|
||||
<section class="mini-cta">
|
||||
<div class="mini-cta-content">
|
||||
<h2 class="mini-cta-title">Ready to Get Started?</h2>
|
||||
<p class="mini-cta-text">Join thousands of satisfied customers today.</p>
|
||||
<button class="mini-btn mini-btn-primary">Contact Us</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mini Website Footer -->
|
||||
<footer class="mini-footer">
|
||||
<div class="mini-footer-content">
|
||||
<div class="mini-footer-brand">
|
||||
<i class="fas fa-code me-2"></i>
|
||||
<span>YourBrand</span>
|
||||
</div>
|
||||
<div class="mini-footer-links">
|
||||
<a href="#" class="mini-footer-link">Privacy</a>
|
||||
<a href="#" class="mini-footer-link">Terms</a>
|
||||
<a href="#" class="mini-footer-link">Support</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</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 the businesses I\'ve helped.'),
|
||||
t=t
|
||||
) }}
|
||||
|
||||
<!-- Call to Action -->
|
||||
{{ components.cta_section(
|
||||
title="Ready to Start Your Project?",
|
||||
description="Let's discuss your project and create something amazing together. I offer a free consultation to understand your needs and provide a customized solution.",
|
||||
button_text="Get Started",
|
||||
button_url="contact",
|
||||
t=t
|
||||
) }}
|
||||
{% endblock %}
|
||||
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