vintech-showcase.php

<?php
$page_title = "VinTech Design Showcase";
$extra_css = ['vintech-style.css', 'charity.css', 'shop.css'];
include 'includes/header.php';
?>

<style>
.showcase-section {
    padding: 80px 0;
    border-bottom: 1px solid #f0f0f0;
}

.showcase-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 60px;
    color: var(--text-primary);
}

.component-demo {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: var(--shadow-md);
    margin-bottom: 30px;
}

.demo-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vintech-primary);
    margin-bottom: 20px;
    text-align: center;
}

.color-palette {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.color-item {
    text-align: center;
}

.color-box {
    width: 100%;
    height: 80px;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}

.buttons-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 30px 0;
}

.cards-demo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

.demo-card {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.demo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
</style>

<!-- Hero Section -->
<section class="vintech-hero">
    <div class="container">
        <div class="row align-items-center min-vh-80">
            <div class="col-lg-6">
                <div class="hero-content">
                    <div class="vintech-badge mb-3">Design System</div>
                    <h1 class="hero-title">VinTech <span class="gradient-text">Design System</span></h1>
                    <p class="hero-description">
                        Hệ thống thiết kế hiện đại và chuyên nghiệp cho nền tảng CONVOI. 
                        Tập trung vào trải nghiệm người dùng và tính nhất quán trong thiết kế.
                    </p>
                    <div class="hero-actions">
                        <a href="#components" class="vintech-btn-primary">
                            <i class="fas fa-eye me-2"></i>Xem Components
                        </a>
                        <a href="#colors" class="vintech-btn-outline">
                            <i class="fas fa-palette me-2"></i>Bảng màu
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-image-container">
                    <div class="floating-card">
                        <div class="p-4">
                            <div class="d-flex align-items-center mb-3">
                                <div class="vintech-icon me-3">
                                    <i class="fas fa-magic"></i>
                                </div>
                                <div>
                                    <h5 class="mb-0">VinTech Design</h5>
                                    <small class="text-muted">Modern & Professional</small>
                                </div>
                            </div>
                            <div class="progress mb-3" style="height: 8px;">
                                <div class="progress-bar bg-gradient" style="width: 85%"></div>
                            </div>
                            <div class="row g-2">
                                <div class="col-4">
                                    <div class="text-center">
                                        <div class="h6 mb-0">98%</div>
                                        <small class="text-muted">Quality</small>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="text-center">
                                        <div class="h6 mb-0">95%</div>
                                        <small class="text-muted">Performance</small>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="text-center">
                                        <div class="h6 mb-0">100%</div>
                                        <small class="text-muted">Modern</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Color Palette -->
<section id="colors" class="showcase-section">
    <div class="container">
        <h2 class="showcase-title">Bảng Màu VinTech</h2>
        <div class="component-demo">
            <div class="color-palette">
                <div class="color-item">
                    <div class="color-box" style="background: var(--vintech-primary);"></div>
                    <h6>Primary</h6>
                    <small class="text-muted">#2d5a27</small>
                </div>
                <div class="color-item">
                    <div class="color-box" style="background: var(--vintech-secondary);"></div>
                    <h6>Secondary</h6>
                    <small class="text-muted">#4a7c59</small>
                </div>
                <div class="color-item">
                    <div class="color-box" style="background: var(--vintech-accent);"></div>
                    <h6>Accent</h6>
                    <small class="text-muted">#6fbb6b</small>
                </div>
                <div class="color-item">
                    <div class="color-box" style="background: var(--text-primary);"></div>
                    <h6>Text Primary</h6>
                    <small class="text-muted">#2c3e50</small>
                </div>
                <div class="color-item">
                    <div class="color-box" style="background: var(--text-secondary);"></div>
                    <h6>Text Secondary</h6>
                    <small class="text-muted">#718096</small>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Buttons -->
<section id="buttons" class="showcase-section bg-light">
    <div class="container">
        <h2 class="showcase-title">Buttons</h2>
        <div class="component-demo">
            <h4 class="demo-title">VinTech Buttons</h4>
            <div class="buttons-demo">
                <button class="vintech-btn-primary">Primary Button</button>
                <button class="vintech-btn-secondary">Secondary Button</button>
                <button class="vintech-btn-outline">Outline Button</button>
                <button class="vintech-btn-small">Small Button</button>
                <button class="vintech-btn-primary btn-lg">Large Button</button>
            </div>
        </div>
    </div>
</section>

<!-- Cards -->
<section id="cards" class="showcase-section">
    <div class="container">
        <h2 class="showcase-title">Cards & Components</h2>
        <div class="cards-demo">
            <div class="vintech-stat-card stat-primary">
                <div class="stat-icon">
                    <i class="fas fa-users"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-number">1,234</div>
                    <div class="stat-label">Active Users</div>
                </div>
                <div class="stat-animation"></div>
            </div>
            
            <div class="vintech-feature-card">
                <div class="feature-icon">
                    <i class="fas fa-rocket"></i>
                </div>
                <div class="feature-content">
                    <h5 class="feature-title">High Performance</h5>
                    <p class="feature-description">Optimized for speed and efficiency</p>
                </div>
            </div>
            
            <div class="demo-card">
                <div class="d-flex align-items-center mb-3">
                    <div class="vintech-icon me-3">
                        <i class="fas fa-heart"></i>
                    </div>
                    <div>
                        <h5 class="mb-0">Charity Event</h5>
                        <div class="vintech-badge">VinTech Platform</div>
                    </div>
                </div>
                <p class="text-muted">Join our charity event to help the community</p>
                <button class="vintech-btn-outline w-100">Learn More</button>
            </div>
        </div>
    </div>
</section>

<!-- Typography -->
<section id="typography" class="showcase-section bg-light">
    <div class="container">
        <h2 class="showcase-title">Typography</h2>
        <div class="component-demo">
            <h1 class="mb-3">Heading 1 - VinTech Design</h1>
            <h2 class="mb-3">Heading 2 - Modern Typography</h2>
            <h3 class="mb-3">Heading 3 - Professional Look</h3>
            <h4 class="mb-3">Heading 4 - Clean and Clear</h4>
            <p class="lead">Lead paragraph - This is a lead paragraph that stands out from regular text.</p>
            <p>Regular paragraph - This is regular body text that provides information in a clear and readable format. The typography system ensures consistent spacing and readability across all text elements.</p>
            <small class="text-muted">Small text - Additional information or captions</small>
        </div>
    </div>
</section>

<!-- Navigation Examples -->
<section id="navigation" class="showcase-section">
    <div class="container">
        <h2 class="showcase-title">Navigation & Forms</h2>
        <div class="component-demo">
            <h4 class="demo-title">VinTech Navigation</h4>
            <nav class="vintech-nav-demo">
                <div class="d-flex align-items-center">
                    <div class="vintech-logo me-4">
                        <div class="logo-icon">
                            <i class="fas fa-heart"></i>
                        </div>
                        <span class="logo-text">CONVOI</span>
                        <div class="vintech-badge">VinTech</div>
                    </div>
                    <div class="nav-links">
                        <a href="#" class="nav-link active">Trang chủ</a>
                        <a href="#" class="nav-link">Thiện nguyện</a>
                        <a href="#" class="nav-link">Cửa hàng</a>
                        <a href="#" class="nav-link">Liên hệ</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</section>

<style>
.vintech-nav-demo {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 20px 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.vintech-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--vintech-primary), var(--vintech-accent));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.nav-links {
    display: flex;
    gap: 30px;
    margin-left: auto;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--vintech-primary);
    background: rgba(47, 90, 39, 0.1);
}

@media (max-width: 768px) {
    .vintech-nav-demo .d-flex {
        flex-direction: column;
        gap: 20px;
    }
    
    .nav-links {
        margin-left: 0;
        justify-content: center;
    }
}
</style>

<?php include 'includes/footer.php'; ?>