{% 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">&lt;/&gt;</div>
        <div class="code-particle">{ }</div>
        <div class="code-particle">[ ]</div>
        <div class="code-particle">&lt;/&gt;</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 %}