{% 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 %}