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