@amelharrak/eldo-ui 1.0.1

package/src/scss/pages/_landing-setup.scss

@@ -0,0 +1,264 @@
+    // ===== 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;
+            }
+        }
+    }