Initial commit: Complete multilingual website with translation system
This commit is contained in:
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 %}
|
||||
Reference in New Issue
Block a user