E-commerce Platform

AI-Powered Shopping with Personalized Experiences & Smart Analytics

Start Shopping Seller Dashboard
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; background: var(--ecom-bg); color: var(--ecom-text); margin: 0; padding: 0; } .header { background: var(--ecom-gradient); padding: 1rem 2rem; border-bottom: 1px solid var(--ecom-border); position: sticky; top: 0; z-index: 100; } .content { padding: 2rem; max-width: 1400px; margin: 0 auto; } .hero-section { background: linear-gradient(135deg, var(--ecom-surface) 0%, var(--ecom-surface-light) 100%); border-radius: 16px; padding: 4rem 2rem; margin-bottom: 3rem; text-align: center; position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--ecom-gradient); opacity: 0.1; } .hero-content { position: relative; z-index: 1; } .hero-title { font-size: 3rem; font-weight: 800; color: var(--ecom-text); margin-bottom: 1rem; background: var(--ecom-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: 1.25rem; color: var(--ecom-text-muted); margin-bottom: 2rem; } .search-bar { max-width: 600px; margin: 0 auto 2rem; position: relative; } .search-input { width: 100%; padding: 1rem 3rem 1rem 1.5rem; background: var(--ecom-surface); border: 2px solid var(--ecom-border); border-radius: 50px; color: var(--ecom-text); font-size: 1rem; transition: all 0.3s ease; } .search-input:focus { outline: none; border-color: var(--ecom-primary); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); } .search-button { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: var(--ecom-gradient); border: none; border-radius: 50%; width: 40px; height: 40px; color: white; cursor: pointer; transition: all 0.3s ease; } .search-button:hover { transform: translateY(-50%) scale(1.1); } .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } .category-card { background: var(--ecom-surface); border: 1px solid var(--ecom-border); border-radius: 12px; padding: 2rem 1.5rem; text-align: center; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .category-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ecom-gradient); } .category-card:hover { transform: translateY(-5px); border-color: var(--ecom-primary); box-shadow: 0 10px 25px rgba(245, 158, 11, 0.2); } .category-icon { font-size: 3rem; color: var(--ecom-primary); margin-bottom: 1rem; } .category-name { font-size: 1.1rem; font-weight: 600; color: var(--ecom-text); margin-bottom: 0.5rem; } .category-count { color: var(--ecom-text-muted); font-size: 0.9rem; } .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .product-card { background: var(--ecom-surface); border: 1px solid var(--ecom-border); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; position: relative; } .product-card:hover { transform: translateY(-5px); border-color: var(--ecom-primary); box-shadow: 0 10px 25px rgba(245, 158, 11, 0.2); } .product-badge { position: absolute; top: 1rem; right: 1rem; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; z-index: 10; } .product-badge.featured { background: var(--ecom-gradient); color: white; } .product-badge.bestseller { background: var(--ecom-success); color: white; } .product-image { width: 100%; height: 200px; background: var(--ecom-surface-light); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; } .product-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .product-card:hover .product-overlay { opacity: 1; } .quick-actions { display: flex; gap: 0.5rem; } .quick-action-btn { padding: 0.5rem 1rem; background: var(--ecom-gradient); border: none; border-radius: 6px; color: white; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; } .quick-action-btn:hover { transform: scale(1.05); } .product-details { padding: 1.5rem; } .product-brand { color: var(--ecom-text-muted); font-size: 0.8rem; text-transform: uppercase; margin-bottom: 0.25rem; } .product-name { font-size: 1.1rem; font-weight: 600; color: var(--ecom-text); margin-bottom: 0.5rem; line-height: 1.4; } .product-description { color: var(--ecom-text-muted); font-size: 0.9rem; margin-bottom: 1rem; line-height: 1.5; } .product-rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .stars { color: var(--ecom-primary); } .rating-count { color: var(--ecom-text-muted); font-size: 0.8rem; } .product-price { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .current-price { font-size: 1.5rem; font-weight: 700; color: var(--ecom-text); } .original-price { font-size: 1rem; color: var(--ecom-text-muted); text-decoration: line-through; } .discount-badge { padding: 0.25rem 0.5rem; background: var(--ecom-danger); color: white; border-radius: 4px; font-size: 0.75rem; font-weight: 600; } .product-actions { display: flex; gap: 0.5rem; } .btn { padding: 0.75rem 1.5rem; border: none; border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.9rem; flex: 1; } .btn-primary { background: var(--ecom-gradient); color: white; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3); } .btn-secondary { background: var(--ecom-surface-light); color: var(--ecom-text); border: 1px solid var(--ecom-border); } .btn-secondary:hover { border-color: var(--ecom-primary); } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .section-title { font-size: 2rem; font-weight: 700; color: var(--ecom-text); } .view-all-btn { padding: 0.5rem 1rem; background: transparent; border: 1px solid var(--ecom-border); border-radius: 6px; color: var(--ecom-text); cursor: pointer; transition: all 0.3s ease; } .view-all-btn:hover { border-color: var(--ecom-primary); color: var(--ecom-primary); } .cart-sidebar { position: fixed; right: -400px; top: 0; width: 400px; height: 100vh; background: var(--ecom-surface); border-left: 1px solid var(--ecom-border); transition: right 0.3s ease; z-index: 1000; display: flex; flex-direction: column; } .cart-sidebar.open { right: 0; } .cart-header { padding: 1.5rem; border-bottom: 1px solid var(--ecom-border); display: flex; justify-content: space-between; align-items: center; } .cart-title { font-size: 1.25rem; font-weight: 600; color: var(--ecom-text); } .cart-close { background: transparent; border: none; color: var(--ecom-text); font-size: 1.5rem; cursor: pointer; } .cart-items { flex: 1; overflow-y: auto; padding: 1.5rem; } .cart-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--ecom-border); } .cart-item-image { width: 80px; height: 80px; background: var(--ecom-surface-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .cart-item-details { flex: 1; } .cart-item-name { font-weight: 600; color: var(--ecom-text); margin-bottom: 0.25rem; } .cart-item-price { color: var(--ecom-primary); font-weight: 600; } .cart-item-quantity { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } .quantity-btn { width: 24px; height: 24px; border: 1px solid var(--ecom-border); background: var(--ecom-surface); color: var(--ecom-text); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .cart-footer { padding: 1.5rem; border-top: 1px solid var(--ecom-border); } .cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600; } .checkout-btn { width: 100%; padding: 1rem; background: var(--ecom-gradient); border: none; border-radius: 8px; color: white; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .checkout-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3); } .floating-cart { position: fixed; bottom: 2rem; right: 2rem; width: 60px; height: 60px; background: var(--ecom-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; cursor: pointer; transition: all 0.3s ease; z-index: 999; } .floating-cart:hover { transform: scale(1.1); } .cart-count { position: absolute; top: -5px; right: -5px; width: 24px; height: 24px; background: var(--ecom-danger); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; } @media (max-width: 768px) { .content { padding: 1rem; } .hero-title { font-size: 2rem; } .products-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } .cart-sidebar { width: 100%; right: -100%; } }

ShopAI

AI-Powered Shopping Experience

Discover products curated just for you with our intelligent recommendation engine

Shop by Category

Uitgelichte producten

Bestsellers

Trending Now

Shopping Cart

Totaal: €0.00
0