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