@amelharrak/eldo-ui 1.0.1

package/src/scss/pages/_landing-features-enhanced.scss

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

package/src/scss/pages/_landing-hero-enhanced.scss

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