@amelharrak/eldo-ui 1.0.1

package/src/scss/pages/_landing.scss

@@ -0,0 +1,1828 @@
+// Modern Landing Page Styles
+@use "sass:color";
+
+.landing-page {
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background: #ffffff;
+    color: #1e293b;
+
+    // ===== Navigation =====
+    .navbar {
+        padding: 0;
+        backdrop-filter: blur(10px);
+        background: rgba(255, 255, 255, 0.98) !important;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+        .container {
+            padding-top: 0.75rem;
+            padding-bottom: 0.75rem;
+        }
+
+        .navbar-brand {
+            font-size: 1.25rem;
+            color: #1e293b;
+            font-weight: 700;
+
+            .logo-icon {
+                width: 40px;
+                height: 40px;
+                background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                border-radius: 10px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: white;
+                font-size: 1.25rem;
+            }
+        }
+
+        .navbar-toggler {
+            &:focus {
+                box-shadow: none;
+            }
+        }
+
+        .navbar-nav {
+            gap: 0.5rem;
+
+            .nav-link {
+                color: #64748b;
+                font-weight: 500;
+                padding: 0.5rem 1rem;
+                transition: all 0.2s;
+                border-radius: 8px;
+
+                &:hover {
+                    color: #6366f1;
+                    background: #f8fafc;
+                }
+
+                &.active {
+                    color: #6366f1;
+                    background: #ede9fe;
+                }
+            }
+        }
+
+        .btn-link {
+            font-weight: 500;
+            padding: 0.5rem 1rem;
+            transition: all 0.2s;
+            border-radius: 8px;
+
+            &:hover {
+                background: #f8fafc;
+            }
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+            border: none;
+            padding: 0.5rem 1.5rem;
+            font-weight: 600;
+            border-radius: 8px;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
+
+            &:hover {
+                transform: translateY(-3px);
+                box-shadow: 0 12px 28px rgba(99, 102, 241, 0.35);
+                background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
+            }
+
+            &:active {
+                transform: translateY(-1px);
+            }
+        }
+
+        // Desktop styles - force horizontal layout
+        @media (min-width: 992px) {
+            .navbar-collapse {
+                display: flex !important;
+                flex-basis: auto;
+            }
+
+            .navbar-toggler {
+                display: none !important;
+            }
+
+            .navbar-nav {
+                flex-direction: row !important;
+            }
+        }
+
+        // Mobile styles
+        @media (max-width: 991px) {
+            .navbar-collapse {
+                margin-top: 1rem;
+                padding: 1rem;
+                background: #f8fafc;
+                border-radius: 12px;
+
+                .navbar-nav {
+                    gap: 0.25rem;
+                }
+
+                .nav-link {
+                    padding: 0.75rem 1rem;
+                }
+            }
+        }
+    }
+
+    // ===== Hero Section =====
+    .hero-section {
+        position: relative;
+        overflow: hidden;
+
+        .hero-gradient {
+            position: absolute;
+            top: -50%;
+            right: -20%;
+            width: 1000px;
+            height: 1000px;
+            background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
+            pointer-events: none;
+        }
+
+        .badge-pill {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
+            color: #6366f1;
+            padding: 0.5rem 1rem;
+            border-radius: 50px;
+            font-weight: 600;
+            font-size: 0.875rem;
+        }
+
+        .hero-title {
+            font-size: clamp(2.5rem, 5vw, 4rem);
+            font-weight: 800;
+            line-height: 1.1;
+            letter-spacing: -0.02em;
+            color: #0f172a;
+
+            .gradient-text {
+                background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
+                font-weight: 900;
+            }
+        }
+
+        .hero-subtitle {
+            font-size: 1.25rem;
+            line-height: 1.7;
+            color: #64748b;
+            max-width: 600px;
+        }
+
+        .install-command {
+            display: inline-flex;
+            align-items: center;
+            gap: 1rem;
+            background: #0f172a;
+            color: #e2e8f0;
+            padding: 1rem 1.5rem;
+            border-radius: 12px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.9rem;
+
+            code {
+                color: #e2e8f0;
+            }
+
+            .copy-btn {
+                background: rgba(255, 255, 255, 0.1);
+                border: none;
+                color: #94a3b8;
+                padding: 0.5rem;
+                border-radius: 6px;
+                cursor: pointer;
+                transition: all 0.2s;
+
+                &:hover {
+                    background: rgba(255, 255, 255, 0.2);
+                    color: white;
+                }
+            }
+        }
+
+        .hero-visual {
+            position: relative;
+
+            .component-preview-card {
+                background: white;
+                border-radius: 20px;
+                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+                overflow: hidden;
+                border: 1px solid #e2e8f0;
+
+                .card-header {
+                    background: #f8fafc;
+                    padding: 1rem 1.5rem;
+                    border-bottom: 1px solid #e2e8f0;
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+
+                    .dots {
+                        display: flex;
+                        gap: 0.5rem;
+
+                        span {
+                            width: 12px;
+                            height: 12px;
+                            border-radius: 50%;
+                            background: #cbd5e1;
+
+                            &:nth-child(1) {
+                                background: #ef4444;
+                            }
+
+                            &:nth-child(2) {
+                                background: #f59e0b;
+                            }
+
+                            &:nth-child(3) {
+                                background: #10b981;
+                            }
+                        }
+                    }
+
+                    .header-title {
+                        font-size: 0.875rem;
+                        color: #64748b;
+                        font-weight: 500;
+                    }
+                }
+
+                .card-body {
+                    padding: 2rem;
+
+                    // Bar Chart Styles
+                    .chart-container {
+                        height: 200px;
+                        display: flex;
+                        align-items: flex-end;
+                        justify-content: center;
+
+                        .chart-bars {
+                            display: flex;
+                            align-items: flex-end;
+                            gap: 1.5rem;
+                            height: 100%;
+                            width: 100%;
+                            justify-content: space-around;
+                        }
+
+                        .chart-bar {
+                            flex: 1;
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            justify-content: flex-end;
+                            gap: 0.5rem;
+
+                            .bar-fill {
+                                width: 100%;
+                                background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                                border-radius: 8px 8px 0 0;
+                                height: 100%;
+                                transition: all 0.3s;
+
+                                &:hover {
+                                    opacity: 0.8;
+                                }
+                            }
+
+                            .bar-label {
+                                font-size: 0.75rem;
+                                color: #64748b;
+                                font-weight: 500;
+                            }
+                        }
+                    }
+
+                    .avatar-circle {
+                        width: 48px;
+                        height: 48px;
+                        border-radius: 50%;
+                        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        color: white;
+                        font-size: 1.5rem;
+                    }
+                }
+            }
+
+            .floating-stat-card {
+                position: absolute;
+                bottom: 2rem;
+                right: -2rem;
+                background: white;
+                padding: 1.5rem;
+                border-radius: 16px;
+                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+                border: 1px solid #e2e8f0;
+
+                .stat-icon {
+                    width: 48px;
+                    height: 48px;
+                    border-radius: 12px;
+                    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    font-size: 1.5rem;
+                }
+
+                .stat-value {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    color: #0f172a;
+                }
+
+                .stat-label {
+                    font-size: 0.875rem;
+                    color: #64748b;
+                }
+            }
+        }
+    }
+
+    // ===== Stats Section =====
+    .stats-section {
+        padding: 3rem 0;
+        background: #ffffff;
+
+        .stat-card {
+            background: white;
+            border: 1px solid #e2e8f0;
+            border-radius: 16px;
+            padding: 2rem 1.5rem;
+            transition: all 0.3s ease;
+            height: 100%;
+
+            &:hover {
+                border-color: #cbd5e1;
+                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
+                transform: translateY(-2px);
+            }
+        }
+
+        .stat-item {
+            text-align: center;
+
+            .stat-icon-badge {
+                width: 56px;
+                height: 56px;
+                margin: 0 auto 1rem;
+                background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: white;
+                font-size: 1.5rem;
+            }
+
+            .stat-number {
+                font-size: 2.5rem;
+                font-weight: 800;
+                color: #0f172a;
+                line-height: 1;
+                margin-bottom: 0.5rem;
+            }
+
+            .stat-description {
+                font-size: 0.875rem;
+                color: #64748b;
+                font-weight: 500;
+            }
+        }
+    }
+
+    // ===== Features Section =====
+    .features-section {
+        padding: 6rem 0;
+
+        .section-badge {
+            display: inline-block;
+            background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
+            color: #6366f1;
+            padding: 0.5rem 1rem;
+            border-radius: 50px;
+            font-weight: 600;
+            font-size: 0.875rem;
+        }
+
+        .section-title {
+            font-size: clamp(2rem, 4vw, 3rem);
+            font-weight: 800;
+            color: #0f172a;
+            letter-spacing: -0.02em;
+        }
+
+        .section-subtitle {
+            font-size: 1.125rem;
+            color: #64748b;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+
+        .feature-card {
+            padding: 2rem;
+            border-radius: 16px;
+            background: white;
+            border: 1px solid #e2e8f0;
+            transition: all 0.3s;
+            height: 100%;
+
+            &:hover {
+                transform: translateY(-4px);
+                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+                border-color: #c7d2fe;
+            }
+
+            .feature-icon {
+                width: 56px;
+                height: 56px;
+                border-radius: 12px;
+                background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: white;
+                font-size: 1.75rem;
+                margin-bottom: 1.5rem;
+            }
+
+            .feature-title {
+                font-size: 1.25rem;
+                font-weight: 700;
+                color: #0f172a;
+                margin-bottom: 0.75rem;
+            }
+
+            .feature-description {
+                color: #64748b;
+                line-height: 1.6;
+                margin: 0;
+            }
+        }
+    }
+
+    // ===== Components Section =====
+    .components-section {
+        padding: 6rem 0;
+        background: #f8fafc;
+
+        .component-card {
+            background: white;
+            border-radius: 16px;
+            overflow: hidden;
+            border: 1px solid #e2e8f0;
+            transition: all 0.3s ease;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+
+            &:hover {
+                transform: translateY(-4px);
+                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+                border-color: #c7d2fe;
+            }
+
+            .component-header {
+                padding: 1.5rem;
+                display: flex;
+                align-items: flex-start;
+                gap: 1rem;
+                border-bottom: 1px solid #e2e8f0;
+
+                .component-icon {
+                    width: 48px;
+                    height: 48px;
+                    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                    border-radius: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    font-size: 1.25rem;
+                    flex-shrink: 0;
+                }
+
+                .component-title {
+                    font-size: 1.125rem;
+                    font-weight: 700;
+                    color: #0f172a;
+                    margin-bottom: 0.25rem;
+                }
+
+                .component-description {
+                    color: #64748b;
+                    margin: 0;
+                    font-size: 0.875rem;
+                    line-height: 1.5;
+                }
+            }
+
+            .component-preview {
+                padding: 2rem;
+                background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+
+                // Subtle pattern overlay
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background-image: radial-gradient(circle at 1px 1px, rgba(99, 102, 241, 0.03) 1px, transparent 0);
+                    background-size: 20px 20px;
+                    pointer-events: none;
+                }
+
+                >* {
+                    position: relative;
+                    z-index: 1;
+                    width: 100%;
+                }
+            }
+
+            // Legacy support for old component-info class
+            .component-info {
+                padding: 1.5rem;
+
+                h4 {
+                    font-size: 1.125rem;
+                    font-weight: 700;
+                    color: #0f172a;
+                    margin-bottom: 0.5rem;
+                }
+
+                p {
+                    color: #64748b;
+                    margin: 0;
+                    font-size: 0.875rem;
+                }
+            }
+        }
+    }
+
+    // ===== Code Section =====
+    .code-section {
+        padding: 6rem 0;
+
+        .feature-list {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+
+            .feature-list-item {
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+                font-size: 1rem;
+                color: #475569;
+
+                i {
+                    font-size: 1.25rem;
+                }
+            }
+        }
+
+        .code-example-card {
+            background: #0f172a;
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+            .code-header {
+                background: #1e293b;
+                padding: 1rem 1.5rem;
+                display: flex;
+                align-items: center;
+                gap: 1rem;
+
+                .dots {
+                    display: flex;
+                    gap: 0.5rem;
+
+                    span {
+                        width: 12px;
+                        height: 12px;
+                        border-radius: 50%;
+                        background: #334155;
+
+                        &:nth-child(1) {
+                            background: #ef4444;
+                        }
+
+                        &:nth-child(2) {
+                            background: #f59e0b;
+                        }
+
+                        &:nth-child(3) {
+                            background: #10b981;
+                        }
+                    }
+                }
+
+                .code-title {
+                    font-size: 0.875rem;
+                    color: #94a3b8;
+                    font-family: 'JetBrains Mono', monospace;
+                }
+            }
+
+            .code-body {
+                padding: 2rem;
+
+                pre {
+                    margin: 0;
+
+                    code {
+                        font-family: 'JetBrains Mono', monospace;
+                        font-size: 0.875rem;
+                        line-height: 1.7;
+                        color: #e2e8f0;
+                    }
+                }
+            }
+        }
+    }
+
+    // ===== CTA Section =====
+    .cta-section {
+        padding: 6rem 0;
+        position: relative;
+
+        .cta-card {
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+            padding: 4rem;
+            border-radius: 24px;
+            color: white;
+            position: relative;
+            overflow: hidden;
+
+            // Background pattern
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-image:
+                    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
+                    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
+                pointer-events: none;
+            }
+
+            .cta-title {
+                font-size: clamp(1.75rem, 3vw, 2.5rem);
+                font-weight: 800;
+                color: white;
+                position: relative;
+                z-index: 1;
+            }
+
+            .cta-subtitle {
+                font-size: 1.125rem;
+                color: rgba(255, 255, 255, 0.9);
+                position: relative;
+                z-index: 1;
+            }
+
+            .btn-light {
+                background: white;
+                color: #6366f1;
+                font-weight: 600;
+                padding: 0.875rem 2rem;
+                border-radius: 10px;
+                transition: all 0.3s ease;
+                position: relative;
+                z-index: 1;
+                box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
+
+                &:hover {
+                    transform: translateY(-3px);
+                    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
+                    background: #f8fafc;
+                }
+            }
+        }
+    }
+
+    // ===== Footer =====
+    .footer {
+        padding: 4rem 0 2rem;
+        background: #0f172a;
+        color: #94a3b8;
+
+        .logo-icon {
+            width: 40px;
+            height: 40px;
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.25rem;
+        }
+
+        .social-links {
+            display: flex;
+            gap: 1rem;
+            margin-top: 1rem;
+
+            a {
+                width: 40px;
+                height: 40px;
+                border-radius: 8px;
+                background: rgba(255, 255, 255, 0.05);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #94a3b8;
+                transition: all 0.2s;
+
+                &:hover {
+                    background: rgba(99, 102, 241, 0.2);
+                    color: #6366f1;
+                }
+            }
+        }
+
+        .footer-title {
+            font-weight: 700;
+            color: white;
+            margin-bottom: 1rem;
+            font-size: 0.875rem;
+        }
+
+        .footer-links {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+
+            li {
+                margin-bottom: 0.75rem;
+
+                a {
+                    color: #94a3b8;
+                    text-decoration: none;
+                    font-size: 0.875rem;
+                    transition: color 0.2s;
+
+                    &:hover {
+                        color: #6366f1;
+                    }
+                }
+            }
+        }
+
+        .footer-bottom {
+            margin-top: 3rem;
+            padding-top: 2rem;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            text-align: center;
+        }
+    }
+
+    // ===== Utilities =====
+    .btn {
+        border-radius: 8px;
+        font-weight: 600;
+        transition: all 0.2s;
+
+        &:hover {
+            transform: translateY(-2px);
+        }
+    }
+
+    .btn-primary {
+        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+        border: none;
+
+        &:hover {
+            box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
+        }
+    }
+
+    .btn-outline-primary {
+        border: 2px solid #6366f1;
+        color: #6366f1;
+        background: transparent;
+
+        &:hover {
+            background: #6366f1;
+            color: white;
+        }
+    }
+}    // ===== Configuration Section =====
+    .configuration-section {
+        padding: 6rem 0;
+        background: #f8fafc;
+
+        .config-card {
+            background: white;
+            border-radius: 16px;
+            padding: 2rem;
+            border: 1px solid #e2e8f0;
+            transition: all 0.3s ease;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+
+            &:hover {
+                transform: translateY(-4px);
+                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+                border-color: #c7d2fe;
+            }
+
+            .config-header {
+                display: flex;
+                align-items: flex-start;
+                gap: 1rem;
+                margin-bottom: 1.5rem;
+
+                .config-icon {
+                    width: 48px;
+                    height: 48px;
+                    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                    border-radius: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    font-size: 1.25rem;
+                    flex-shrink: 0;
+                }
+
+                .config-title {
+                    font-size: 1.25rem;
+                    font-weight: 700;
+                    color: #0f172a;
+                    margin-bottom: 0.25rem;
+                }
+
+                .config-description {
+                    color: #64748b;
+                    margin: 0;
+                    font-size: 0.875rem;
+                }
+            }
+
+            .config-code {
+                flex: 1;
+                background: #0f172a;
+                border-radius: 12px;
+                padding: 1.5rem;
+                margin-bottom: 1.5rem;
+                overflow-x: auto;
+
+                pre {
+                    margin: 0;
+
+                    code {
+                        font-family: 'JetBrains Mono', monospace;
+                        font-size: 0.875rem;
+                        line-height: 1.7;
+                        color: #e2e8f0;
+                    }
+                }
+            }
+
+            .config-features {
+                display: flex;
+                flex-direction: column;
+                gap: 0.75rem;
+
+                .feature-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    font-size: 0.875rem;
+                    color: #475569;
+
+                    i {
+                        font-size: 1rem;
+                    }
+                }
+            }
+        }
+
+        .config-option {
+            text-align: center;
+            padding: 2rem 1.5rem;
+            background: white;
+            border-radius: 12px;
+            border: 1px solid #e2e8f0;
+            transition: all 0.3s ease;
+
+            &:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+                border-color: #c7d2fe;
+            }
+
+            .option-icon {
+                width: 56px;
+                height: 56px;
+                background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+                border-radius: 12px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin: 0 auto 1rem;
+                color: #6366f1;
+                font-size: 1.5rem;
+            }
+
+            .option-title {
+                font-size: 1.125rem;
+                font-weight: 700;
+                color: #0f172a;
+                margin-bottom: 0.5rem;
+            }
+
+            .option-description {
+                color: #64748b;
+                margin: 0;
+                font-size: 0.875rem;
+                line-height: 1.5;
+            }
+        }
+    }    // ===== Interactive Setup Section =====
+    .setup-section {
+        padding: 6rem 0;
+        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+
+        .setup-card {
+            background: white;
+            border-radius: 20px;
+            padding: 3rem;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e2e8f0;
+        }
+
+        .setup-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+            padding-bottom: 1.5rem;
+            border-bottom: 2px solid #e2e8f0;
+
+            .setup-title {
+                font-size: 1.5rem;
+                font-weight: 800;
+                color: #0f172a;
+                margin: 0;
+            }
+
+            .setup-actions {
+                display: flex;
+                gap: 0.75rem;
+            }
+        }
+
+        .components-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 2rem;
+
+            .component-checkbox {
+                input[type="checkbox"] {
+                    display: none;
+
+                    &:checked+label {
+                        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                        color: white;
+                        border-color: #6366f1;
+
+                        .comp-size {
+                            color: rgba(255, 255, 255, 0.9);
+                        }
+
+                        &::before {
+                            content: '✓ ';
+                            font-weight: bold;
+                        }
+                    }
+                }
+
+                label {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 1rem 1.25rem;
+                    border: 2px solid #e2e8f0;
+                    border-radius: 12px;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                    background: white;
+
+                    &:hover {
+                        border-color: #6366f1;
+                        transform: translateY(-2px);
+                        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
+                    }
+
+                    .comp-name {
+                        font-weight: 600;
+                        font-size: 0.9375rem;
+                    }
+
+                    .comp-size {
+                        font-size: 0.8125rem;
+                        color: #64748b;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+
+        .bundle-summary {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1.5rem;
+            padding: 2rem;
+            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+            border-radius: 12px;
+            margin-bottom: 2rem;
+
+            .summary-item {
+                text-align: center;
+
+                .summary-label {
+                    display: block;
+                    font-size: 0.875rem;
+                    color: #64748b;
+                    margin-bottom: 0.5rem;
+                }
+
+                .summary-value {
+                    display: block;
+                    font-size: 1.75rem;
+                    font-weight: 800;
+                    color: #0f172a;
+                }
+            }
+        }
+
+        .bundle-progress {
+            margin-bottom: 2rem;
+
+            .progress-label {
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 0.5rem;
+                font-weight: 600;
+                color: #0f172a;
+            }
+
+            .progress {
+                border-radius: 8px;
+                background: #e2e8f0;
+                overflow: hidden;
+
+                .progress-bar {
+                    transition: width 0.5s ease, background-color 0.3s ease;
+                }
+            }
+
+            .progress-hint {
+                margin-top: 0.5rem;
+                text-align: right;
+            }
+        }
+
+        .generated-code {
+            background: #0f172a;
+            border-radius: 12px;
+            overflow: hidden;
+            margin-bottom: 2rem;
+
+            .code-tabs {
+                display: flex;
+                background: #1e293b;
+                border-bottom: 1px solid #334155;
+
+                .code-tab {
+                    flex: 1;
+                    padding: 1rem;
+                    background: transparent;
+                    border: none;
+                    color: #94a3b8;
+                    font-weight: 600;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                    border-bottom: 3px solid transparent;
+
+                    &:hover {
+                        color: #e2e8f0;
+                        background: rgba(99, 102, 241, 0.1);
+                    }
+
+                    &.active {
+                        color: #6366f1;
+                        border-bottom-color: #6366f1;
+                        background: rgba(99, 102, 241, 0.05);
+                    }
+                }
+            }
+
+            .code-content {
+                position: relative;
+
+                .code-panel {
+                    display: none;
+
+                    &.active {
+                        display: block;
+                    }
+
+                    .code-header {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        padding: 1rem 1.5rem;
+                        background: #1e293b;
+                        color: #94a3b8;
+                        font-size: 0.875rem;
+
+                        .btn-copy {
+                            background: transparent;
+                            border: 1px solid #334155;
+                            color: #94a3b8;
+                            padding: 0.375rem 0.75rem;
+                            border-radius: 6px;
+                            cursor: pointer;
+                            transition: all 0.3s ease;
+                            font-size: 0.8125rem;
+
+                            &:hover {
+                                background: #334155;
+                                color: white;
+                            }
+
+                            &.btn-success {
+                                background: #10b981;
+                                border-color: #10b981;
+                                color: white;
+                            }
+                        }
+                    }
+
+                    pre {
+                        margin: 0;
+                        padding: 1.5rem;
+                        background: #0f172a;
+                        overflow-x: auto;
+
+                        code {
+                            font-family: 'JetBrains Mono', monospace;
+                            font-size: 0.875rem;
+                            line-height: 1.7;
+                            color: #e2e8f0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // Responsive adjustments
+    @media (max-width: 768px) {
+        .setup-section {
+            .setup-card {
+                padding: 2rem 1.5rem;
+            }
+
+            .components-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .bundle-summary {
+                grid-template-columns: 1fr;
+                gap: 1rem;
+            }
+
+            .setup-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 1rem;
+            }
+        }
+    }    // ===== Enhanced Features Section =====
+    .features-section {
+        padding: 6rem 0;
+        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 1200px;
+            height: 1200px;
+            background: radial-gradient(circle, rgba(99, 102, 241, 0.03) 0%, transparent 70%);
+            pointer-events: none;
+        }
+
+        .feature-card {
+            background: white;
+            border-radius: 20px;
+            padding: 2.5rem;
+            border: 1px solid #e2e8f0;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            overflow: hidden;
+
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                height: 4px;
+                background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
+                transform: scaleX(0);
+                transform-origin: left;
+                transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            }
+
+            &:hover {
+                transform: translateY(-8px);
+                box-shadow: 0 20px 60px rgba(99, 102, 241, 0.15);
+                border-color: #c7d2fe;
+
+                &::before {
+                    transform: scaleX(1);
+                }
+
+                .feature-icon-wrapper {
+                    transform: scale(1.1) rotate(5deg);
+
+                    .feature-glow {
+                        opacity: 1;
+                        transform: scale(1.5);
+                    }
+                }
+
+                .feature-icon {
+                    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                    color: white;
+                }
+            }
+
+            .feature-icon-wrapper {
+                position: relative;
+                width: 80px;
+                height: 80px;
+                margin-bottom: 1.5rem;
+                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+
+                .feature-icon {
+                    width: 80px;
+                    height: 80px;
+                    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+                    border-radius: 20px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 2rem;
+                    color: #6366f1;
+                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+                    position: relative;
+                    z-index: 2;
+                    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
+                }
+
+                .feature-glow {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%) scale(1);
+                    width: 100%;
+                    height: 100%;
+                    background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
+                    border-radius: 50%;
+                    opacity: 0;
+                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+                    z-index: 1;
+                }
+            }
+
+            .feature-title {
+                font-size: 1.375rem;
+                font-weight: 800;
+                color: #0f172a;
+                margin-bottom: 1rem;
+                line-height: 1.3;
+            }
+
+            .feature-description {
+                color: #64748b;
+                line-height: 1.7;
+                margin-bottom: 1.5rem;
+                flex: 1;
+                font-size: 0.9375rem;
+            }
+
+            .feature-stats {
+                .stat-badge {
+                    display: inline-flex;
+                    align-items: center;
+                    padding: 0.5rem 1rem;
+                    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+                    border: 1px solid #bae6fd;
+                    border-radius: 8px;
+                    font-size: 0.8125rem;
+                    font-weight: 700;
+                    color: #0369a1;
+                    letter-spacing: 0.025em;
+                }
+            }
+        }
+    }
+
+    // Responsive adjustments
+    @media (max-width: 768px) {
+        .features-section {
+            padding: 4rem 0;
+
+            .feature-card {
+                padding: 2rem;
+
+                .feature-icon-wrapper {
+                    width: 64px;
+                    height: 64px;
+
+                    .feature-icon {
+                        width: 64px;
+                        height: 64px;
+                        font-size: 1.5rem;
+                        border-radius: 16px;
+                    }
+                }
+
+                .feature-title {
+                    font-size: 1.25rem;
+                }
+            }
+        }
+    }    // ===== Enhanced Hero Section =====
+    .hero-section {
+        padding: 8rem 0 6rem;
+        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+        position: relative;
+        overflow: hidden;
+
+        .version-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 1rem;
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+            border: 1px solid #bae6fd;
+            border-radius: 50px;
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: #0369a1;
+
+            i {
+                color: #0284c7;
+            }
+
+            .badge-separator {
+                color: #7dd3fc;
+            }
+        }
+
+        .hero-title {
+            font-size: clamp(2.5rem, 5vw, 4rem);
+            font-weight: 900;
+            line-height: 1.1;
+            color: #0f172a;
+            letter-spacing: -0.02em;
+        }
+
+        .hero-subtitle {
+            font-size: 1.25rem;
+            line-height: 1.7;
+            color: #64748b;
+            max-width: 540px;
+
+            strong {
+                color: #6366f1;
+                font-weight: 700;
+            }
+        }
+
+        .install-command-enhanced {
+            background: #0f172a;
+            border-radius: 12px;
+            padding: 1rem;
+            border: 1px solid #1e293b;
+
+            .command-label {
+                font-size: 0.75rem;
+                text-transform: uppercase;
+                letter-spacing: 0.05em;
+                color: #94a3b8;
+                margin-bottom: 0.5rem;
+                font-weight: 600;
+            }
+
+            .command-wrapper {
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+
+                code {
+                    flex: 1;
+                    font-family: 'JetBrains Mono', monospace;
+                    font-size: 0.9375rem;
+                    color: #e2e8f0;
+                    background: transparent;
+                    padding: 0;
+                }
+
+                .copy-btn-enhanced {
+                    background: #1e293b;
+                    border: 1px solid #334155;
+                    color: #94a3b8;
+                    padding: 0.5rem 0.75rem;
+                    border-radius: 6px;
+                    cursor: pointer;
+                    transition: all 0.2s;
+
+                    &:hover {
+                        background: #334155;
+                        color: white;
+                    }
+
+                    &.copied {
+                        background: #10b981;
+                        border-color: #10b981;
+                        color: white;
+                    }
+                }
+            }
+        }
+
+        .component-preview-card {
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e2e8f0;
+            overflow: hidden;
+
+            .card-header {
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+                padding: 1rem 1.25rem;
+                background: #f8fafc;
+                border-bottom: 1px solid #e2e8f0;
+
+                .dots {
+                    display: flex;
+                    gap: 0.5rem;
+
+                    span {
+                        width: 12px;
+                        height: 12px;
+                        border-radius: 50%;
+                        background: #cbd5e1;
+
+                        &:nth-child(1) {
+                            background: #ef4444;
+                        }
+
+                        &:nth-child(2) {
+                            background: #f59e0b;
+                        }
+
+                        &:nth-child(3) {
+                            background: #10b981;
+                        }
+                    }
+                }
+
+                .file-name {
+                    font-size: 0.875rem;
+                    color: #64748b;
+                    font-weight: 500;
+                }
+            }
+
+            .code-content {
+                padding: 1.5rem;
+                background: #0f172a;
+
+                pre {
+                    margin: 0;
+
+                    code {
+                        font-family: 'JetBrains Mono', monospace;
+                        font-size: 0.875rem;
+                        line-height: 1.7;
+                        color: #e2e8f0;
+                    }
+                }
+            }
+        }
+
+        .floating-element {
+            position: absolute;
+            animation: float 6s ease-in-out infinite;
+
+            &.element-1 {
+                top: 10%;
+                right: 10%;
+                animation-delay: 0s;
+
+                .mini-card {
+                    width: 80px;
+                    height: 60px;
+                    background: white;
+                    border-radius: 8px;
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+                    padding: 0.5rem;
+
+                    .mini-header {
+                        width: 100%;
+                        height: 8px;
+                        background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
+                        border-radius: 4px;
+                        margin-bottom: 0.5rem;
+                    }
+
+                    .mini-body {
+                        width: 100%;
+                        height: 20px;
+                        background: #f1f5f9;
+                        border-radius: 4px;
+                    }
+                }
+            }
+
+            &.element-2 {
+                bottom: 20%;
+                right: 5%;
+                animation-delay: 2s;
+
+                .mini-badge {
+                    padding: 0.5rem 1rem;
+                    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+                    color: white;
+                    border-radius: 50px;
+                    font-weight: 700;
+                    font-size: 0.875rem;
+                    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+                }
+            }
+
+            &.element-3 {
+                top: 50%;
+                right: 15%;
+                animation-delay: 4s;
+
+                .mini-icon {
+                    width: 50px;
+                    height: 50px;
+                    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+                    border-radius: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    font-size: 1.5rem;
+                    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+                }
+            }
+        }
+
+        @keyframes float {
+
+            0%,
+            100% {
+                transform: translateY(0px);
+            }
+
+            50% {
+                transform: translateY(-20px);
+            }
+        }
+    }
+
+    // ===== Stats Bar Section =====
+    .stats-bar-section {
+        padding: 4rem 0;
+        background: white;
+        border-top: 1px solid #e2e8f0;
+        border-bottom: 1px solid #e2e8f0;
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 2rem;
+
+            .stat-item {
+                display: flex;
+                align-items: center;
+                gap: 1rem;
+                padding: 1.5rem;
+                background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+                border-radius: 12px;
+                border: 1px solid #e2e8f0;
+                transition: all 0.3s;
+
+                &:hover {
+                    transform: translateY(-4px);
+                    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+                }
+
+                .stat-icon {
+                    width: 50px;
+                    height: 50px;
+                    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                    border-radius: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    font-size: 1.5rem;
+                    flex-shrink: 0;
+                }
+
+                .stat-content {
+                    .stat-value {
+                        font-size: 2rem;
+                        font-weight: 900;
+                        color: #0f172a;
+                        line-height: 1;
+                        margin-bottom: 0.25rem;
+                    }
+
+                    .stat-label {
+                        font-size: 0.875rem;
+                        color: #64748b;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+    }
+
+    // ===== Quick Start Section =====
+    .quick-start-section {
+        padding: 6rem 0;
+        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+
+        .install-card {
+            background: white;
+            border-radius: 16px;
+            padding: 2rem;
+            border: 1px solid #e2e8f0;
+            height: 100%;
+            transition: all 0.3s;
+
+            &:hover {
+                transform: translateY(-4px);
+                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
+            }
+
+            .install-icon {
+                width: 60px;
+                height: 60px;
+                background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                border-radius: 12px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: white;
+                font-size: 1.75rem;
+                margin-bottom: 1.5rem;
+            }
+
+            .install-title {
+                font-size: 1.25rem;
+                font-weight: 700;
+                color: #0f172a;
+                margin-bottom: 0.5rem;
+            }
+
+            .install-description {
+                color: #64748b;
+                margin-bottom: 1.5rem;
+                font-size: 0.9375rem;
+            }
+
+            .code-block {
+                background: #0f172a;
+                border-radius: 8px;
+                padding: 0.75rem 1rem;
+                margin-bottom: 0.75rem;
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+                border: 1px solid #1e293b;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+
+                code {
+                    flex: 1;
+                    font-family: 'JetBrains Mono', monospace;
+                    font-size: 0.8125rem;
+                    color: #e2e8f0;
+                    background: transparent;
+                    padding: 0;
+                    overflow-x: auto;
+                    white-space: nowrap;
+                }
+
+                .btn-copy-code {
+                    background: transparent;
+                    border: none;
+                    color: #94a3b8;
+                    padding: 0.25rem;
+                    cursor: pointer;
+                    transition: color 0.2s;
+                    flex-shrink: 0;
+
+                    &:hover {
+                        color: white;
+                    }
+
+                    &.copied {
+                        color: #10b981;
+                    }
+                }
+            }
+        }
+    }
+
+    // Responsive
+    @media (max-width: 992px) {
+        .hero-section {
+            padding: 6rem 0 4rem;
+
+            .hero-title {
+                font-size: 2.5rem;
+            }
+
+            .hero-subtitle {
+                font-size: 1.125rem;
+            }
+
+            .floating-element {
+                display: none;
+            }
+        }
+
+        .stats-bar-section {
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+    }
+
+    @media (max-width: 768px) {
+        .stats-bar-section {
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    }