Webleb - Extraits de Code - Section principale de la page d'accueil e-commerce (HTML)

HTML CSS JS

<app-nav-bar></app-nav-bar>
<section class="hero" id="hero">
  <div class="background-elements">
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="floating-element elem-1">
      <i class="fas fa-fire"></i>
      <span>{{ 'HOME.hero.trending' | translate }}</span>
    </div>
    <div class="floating-element elem-2">
      <i class="fas fa-star"></i>
      <span>{{ 'HOME.hero.new' | translate }}</span>
    </div>
  </div>

<div class="hero-container">
    <div class="hero-content" @contentAnimation>
      <div class="hero-badges" @badgeAnimation>
        <span class="badge trending">
          <i class="fas fa-bolt"></i> {{ 'HOME.hero.new_collection' | translate }}
        </span>
        </div>

<h1 class="main-title" @titleAnimation>
        {{ 'HOME.hero.buy_simply' | translate }}
        <span class="highlight">{{ 'HOME.hero.live_better' | translate }}</span>
      </h1>

<p class="subtitle" @subtitleAnimation>
        {{ 'HOME.hero.marketplace_description' | translate }}
      </p>

<div class="cta-group" @ctaAnimation>
        <button class="cta-primary" (click)="scrollTo('new-arrival')">
          {{ 'HOME.hero.explore_collection' | translate }}
          <i class="fas fa-arrow-right"></i>
        </button>
        <button class="cta-secondary" (click)="goToShop()">
          <i class="fas fa-play"></i>
          {{ 'HOME.hero.see_lookbook' | translate }}
        </button>
      </div>

<div class="trust-indicators" @trustAnimation>
        <div class="trust-item">
          <i class="fas fa-truck"></i>
          <span>{{ 'HOME.hero.fast_delivery' | translate }}</span>
        </div>
        <div class="trust-item">
          <i class="fas fa-undo"></i>
          <span>{{ 'HOME.hero.easy_returns' | translate }}</span>
        </div>
        <div class="trust-item">
          <i class="fas fa-shield-alt"></i>
          <span>{{ 'HOME.hero.secure_payment' | translate }}</span>
        </div>
      </div>
    </div>

<div class="featured-products" @carouselAnimation>
      <div class="product-carousel">
        @if(!isLoading){
          <ng-container>
            <div class="product-card" *ngFor="let product of featuredProducts" (click)="goToProductDetail(product.id)">
              <div class="product-image">
                <img [src]="product.image" [alt]="product.name">
                <div class="product-overlay">
                  <span class="product-category">{{ getCategoryName(product) }}</span>
                </div>
              </div>
              <h3>{{ product.name }}</h3>
              <p class="price">{{ formatPrice(getPrimaryUnitPrice(product)) }}</p>
            </div>
          </ng-container>
        }
        @else{
          <ng-container *skeleton="true; repeat: 3; className: 'skeleton-product-card'; height: '250px'"></ng-container>
        }
      </div>
    </div>
  </div>

<div class="scroll-indicator" @scrollAnimation>
    <span>{{ 'HOME.hero.scroll_down' | translate }}</span>
    <i class="fas fa-chevron-down"></i>
  </div>
</section>
<app-category-section id="category"/>
<app-promotion-section id="promotion"/>
<app-top-products />
<app-new-arrival />
@if (ads.length > 0) {
  <app-pub-banner [advertisements]="ads"></app-pub-banner>
}
<app-testimonials />
<app-footer />

.hero {
  position: relative;
  min-height: 100vh;
  background: 
    radial-gradient(circle at 20% 50%, rgba(255, 0, 0, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 0, 0, 0.05) 0%, transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #fafbfc 50%, #f8f9fa 100%);
  overflow: hidden;
  padding-top: 13vh;
  backdrop-filter: blur(0.5px);

// Enhanced Background Elements
  .background-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;

&::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(circle at 25% 25%, rgba(255, 0, 0, 0.02) 0%, transparent 40%),
        radial-gradient(circle at 75% 75%, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
      animation: backgroundPulse 8s ease-in-out infinite alternate;
    }

.circle {
      position: absolute;
      border-radius: 50%;
      filter: blur(1px);
      
      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 50%;
        background: inherit;
        filter: blur(2px);
        opacity: 0.3;
        animation: inherit;
      }

&.circle-1 {
        width: 450px;
        height: 450px;
        background: linear-gradient(135deg, 
          rgba(255, 0, 0, 0.08) 0%, 
          rgba(255, 107, 107, 0.06) 50%, 
          rgba(255, 0, 0, 0.04) 100%);
        top: -150px;
        right: -150px;
        animation: floatRotate 20s infinite ease-in-out;
        box-shadow: 
          0 0 100px rgba(255, 0, 0, 0.1),
          inset 0 0 50px rgba(255, 255, 255, 0.1);
      }

&.circle-2 {
        width: 350px;
        height: 350px;
        background: linear-gradient(135deg, 
          rgba(0, 0, 0, 0.08) 0%, 
          rgba(51, 51, 51, 0.06) 50%, 
          rgba(0, 0, 0, 0.04) 100%);
        bottom: -100px;
        left: -100px;
        animation: floatRotate 25s infinite ease-in-out reverse;
        box-shadow: 
          0 0 80px rgba(0, 0, 0, 0.1),
          inset 0 0 40px rgba(255, 255, 255, 0.1);
      }
    }

.floating-element {
      position: absolute;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 12px 24px;
      border-radius: 50px;
      box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.1),
        0 5px 15px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      transition: all 0.3s ease;

&:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 
          0 25px 50px rgba(0, 0, 0, 0.15),
          0 8px 20px rgba(0, 0, 0, 0.08);
      }

i {
        color: #ff0000;
        font-size: 16px;
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
      }

span {
        background: linear-gradient(135deg, #333 0%, #000 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

&.elem-1 {
        top: 15%;
        right: 10%;
        animation: floatPulse 8s infinite ease-in-out;
      }

&.elem-2 {
        bottom: 25%;
        left: 8%;
        animation: floatPulse 10s infinite ease-in-out reverse;
      }
    }
  }

// Enhanced Main Container
  .hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 20px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2;
  }

// Enhanced Content Section
  .hero-content {
    .hero-badges {
      display: flex;
      gap: 20px;
      margin-bottom: 40px;

.badge {
        padding: 12px 24px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
        overflow: hidden;
        transition: all 0.4s ease;
        cursor: default;

&::before {
          content: '';
          position: absolute;
          inset: 0;
          background: inherit;
          filter: blur(8px);
          opacity: 0.3;
          z-index: -1;
        }

&.trending {
          background: linear-gradient(135deg, 
            rgba(255, 0, 0, 0.15) 0%, 
            rgba(255, 107, 107, 0.1) 100%);
          color: #d63031;
          border: 1px solid rgba(255, 0, 0, 0.2);
          box-shadow: 
            0 10px 25px rgba(255, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
          
          &:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 
              0 15px 35px rgba(255, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
          }

i {
            animation: sparkle 2s infinite ease-in-out;
          }
        }
      }
    }

.main-title {
      font-size: 4.5rem;
      line-height: 1.1;
      margin-bottom: 35px;
      font-weight: 800;
      letter-spacing: -0.02em;
      background: linear-gradient(135deg, #2d3436 0%, #636e72 50%, #2d3436 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 0 30px rgba(0, 0, 0, 0.1);

.highlight {
        display: block;
        background: linear-gradient(135deg, #ff0000 0%, #ff6b6b 50%, #ff0000 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 0;
          width: 100%;
          height: 4px;
          background: linear-gradient(90deg, #ff0000 0%, transparent 100%);
          border-radius: 2px;
          animation: underlineGlow 3s ease-in-out infinite;
        }
      }
    }

.subtitle {
      font-size: 1.3rem;
      color: #636e72;
      margin-bottom: 45px;
      max-width: 520px;
      line-height: 1.7;
      font-weight: 400;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

.cta-group {
      display: flex;
      gap: 25px;
      margin-bottom: 60px;

button {
        padding: 18px 36px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        border: none;
        cursor: pointer;

&::before {
          content: '';
          position: absolute;
          inset: 0;
          opacity: 0;
          transition: opacity 0.4s ease;
        }

&.cta-primary {
          background: linear-gradient(135deg, #ff0000 0%, #d63031 50%, #ff0000 100%);
          color: white;
          box-shadow: 
            0 15px 35px rgba(255, 0, 0, 0.25),
            0 5px 15px rgba(255, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);

&::before {
            background: linear-gradient(135deg, #ff6b6b 0%, #ff0000 100%);
          }

&:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 
              0 20px 45px rgba(255, 0, 0, 0.35),
              0 8px 25px rgba(255, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
            
            &::before {
              opacity: 1;
            }

i {
              animation: arrowMove 0.6s ease-in-out;
            }
          }

&:active {
            transform: translateY(-2px) scale(1.01);
          }
        }

&.cta-secondary {
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%);
          backdrop-filter: blur(10px);
          border: 2px solid rgba(0, 0, 0, 0.1);
          color: #2d3436;
          box-shadow: 
            0 10px 25px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);

&::before {
            background: linear-gradient(135deg, #2d3436 0%, #000000 100%);
          }

&:hover {
            transform: translateY(-4px) scale(1.02);
            border-color: rgba(0, 0, 0, 0.3);
            color: white;
            box-shadow: 
              0 15px 35px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);

&::before {
              opacity: 1;
            }

i {
              animation: playPulse 0.8s ease-in-out;
            }
          }

i {
            font-size: 14px;
            position: relative;
            z-index: 1;
          }

span {
            position: relative;
            z-index: 1;
          }
        }
      }
    }

.trust-indicators {
      display: flex;
      gap: 40px;

.trust-item {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #636e72;
        font-weight: 600;
        transition: all 0.3s ease;

&:hover {
          transform: translateY(-2px);
          color: #2d3436;

i {
            transform: scale(1.2);
            text-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
          }
        }

i {
          color: #ff0000;
          font-size: 18px;
          transition: all 0.3s ease;
        }
      }
    }
  }

// Enhanced Featured Products Section
  .featured-products {
    .product-carousel {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 25px;

.product-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.9) 100%);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 24px;
        padding: 20px;
        box-shadow: 
          0 20px 40px rgba(0, 0, 0, 0.08),
          0 5px 15px rgba(0, 0, 0, 0.04),
          inset 0 1px 0 rgba(255, 255, 255, 0.6);
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        overflow: hidden;

&::before {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(135deg, 
            rgba(255, 0, 0, 0.02) 0%, 
            rgba(255, 107, 107, 0.01) 50%, 
            transparent 100%);
          opacity: 0;
          transition: opacity 0.4s ease;
        }

&:hover {
          transform: translateY(-15px) scale(1.02);
          box-shadow: 
            0 30px 60px rgba(0, 0, 0, 0.15),
            0 10px 30px rgba(0, 0, 0, 0.08),
            0 0 0 1px rgba(255, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);

&::before {
            opacity: 1;
          }

.product-overlay {
            opacity: 1;
            backdrop-filter: blur(8px);
          }

.product-image img {
            transform: scale(1.1);
          }
        }

.product-image {
          position: relative;
          border-radius: 20px;
          overflow: hidden;
          aspect-ratio: 1;
          margin-bottom: 20px;
          box-shadow: 
            0 10px 25px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);

img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
          }

.product-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, 
              rgba(0, 0, 0, 0.7) 0%, 
              rgba(255, 0, 0, 0.3) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.4s ease;

.product-category {
              color: white;
              font-weight: 700;
              padding: 10px 20px;
              border-radius: 25px;
              background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.25) 0%, 
                rgba(255, 255, 255, 0.1) 100%);
              backdrop-filter: blur(5px);
              border: 1px solid rgba(255, 255, 255, 0.3);
              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
              letter-spacing: 0.5px;
              text-transform: uppercase;
              font-size: 12px;
            }
          }
        }

h3 {
          font-size: 1.1rem;
          margin-bottom: 8px;
          font-weight: 700;
          color: #2d3436;
          letter-spacing: -0.01em;
        }

.price {
          color: #ff0000;
          font-weight: 800;
          font-size: 1.2rem;
          background: linear-gradient(135deg, #ff0000 0%, #d63031 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
      }

// Skeleton styles
      .skeleton-product-card {
        background: linear-gradient(90deg, 
          rgba(255, 255, 255, 0.8) 25%, 
          rgba(240, 242, 245, 0.9) 50%, 
          rgba(255, 255, 255, 0.8) 75%);
        background-size: 200% 100%;
        animation: shimmer 2s infinite ease-in-out;
        border-radius: 24px;
        border: 1px solid rgba(0, 0, 0, 0.05);
      }
    }
  }

// Enhanced Scroll Indicator
  .scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: #636e72;
    font-weight: 600;
    animation: floatBounce 3s infinite ease-in-out;
    transition: all 0.3s ease;

&:hover {
      color: #ff0000;
      transform: translateX(-50%) scale(1.1);
    }

span {
      font-size: 14px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

i {
      font-size: 24px;
      background: linear-gradient(135deg, #ff0000 0%, #d63031 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: chevronPulse 2s infinite ease-in-out;
    }
  }
}

// Enhanced Animations
@keyframes floatRotate {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(5deg);
  }
  50% {
    transform: translateY(-25px) rotate(0deg);
  }
  75% {
    transform: translateY(-15px) rotate(-5deg);
  }
}

@keyframes floatPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-25px) scale(1.05);
  }
}

@keyframes floatBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-15px);
  }
  60% {
    transform: translateX(-50%) translateY(-8px);
  }
}

@keyframes backgroundPulse {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes underlineGlow {
  0%, 100% {
    opacity: 0.6;
    transform: scaleX(0.8);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
  }
}

@keyframes sparkle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
  }
}

@keyframes arrowMove {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

@keyframes playPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

@keyframes chevronPulse {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(8px);
    opacity: 0.7;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

// Enhanced Responsive Design
@media (max-width: 1400px) {
  .hero {
    .hero-container {
      max-width: 1200px;
      padding: 60px 20px;
      gap: 60px;
    }

.hero-content {
      .main-title {
        font-size: 4rem;
      }
    }
  }
}

@media (max-width: 1200px) {
  .hero {
    .hero-container {
      grid-template-columns: 1fr;
      gap: 50px;
      max-width: 900px;

.hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;

.hero-badges {
          justify-content: center;
          flex-wrap: wrap;
          margin-bottom: 35px;
        }

.subtitle {
          margin: 0 auto 40px;
          max-width: 650px;
        }

.main-title {
          font-size: 3.5rem;
          margin-bottom: 30px;
        }

.cta-group {
          justify-content: center;
          margin-bottom: 50px;
        }

.trust-indicators {
          justify-content: center;
          flex-wrap: wrap;
          gap: 35px;
        }
      }
    }

.featured-products {
      .product-carousel {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
    }

.background-elements {
      .floating-element {
        &.elem-1 {
          top: 8%;
          right: 5%;
        }
        &.elem-2 {
          bottom: 15%;
          left: 5%;
        }
      }
    }
  }
}

@media (max-width: 992px) {
  .hero {
    .hero-container {
      padding: 40px 20px;
    }

.hero-content {
      .main-title {
        font-size: 3rem;
      }

.subtitle {
        font-size: 1.15rem;
      }
    }

.featured-products {
      .product-carousel {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;

.product-card {
          padding: 18px;
        }
      }
    }

.background-elements {
      .floating-element {
        padding: 10px 20px;
        font-size: 0.9rem;
        gap: 10px;

i {
          font-size: 14px;
        }
      }

.circle {
        &.circle-1 {
          width: 350px;
          height: 350px;
        }
        &.circle-2 {
          width: 280px;
          height: 280px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .hero {
    .hero-container {
      padding: 30px 15px;
    }

.hero-content {
      .main-title {
        font-size: 2.5rem;
        line-height: 1.2;
      }

.cta-group {
        flex-direction: column;
        width: 100%;
        max-width: 350px;
        gap: 15px;
        
        button {
          width: 100%;
          justify-content: center;
          padding: 16px 32px;
        }
      }

.trust-indicators {
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: 350px;

.trust-item {
          justify-content: center;
          padding: 15px;
          background: rgba(255, 255, 255, 0.7);
          border-radius: 15px;
          border: 1px solid rgba(0, 0, 0, 0.05);
          transition: all 0.3s ease;

&:hover {
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }

.background-elements {
      .floating-element {
        display: none;
      }

.circle {
        &.circle-1 {
          width: 280px;
          height: 280px;
          top: -140px;
          right: -140px;
        }
        &.circle-2 {
          width: 220px;
          height: 220px;
          bottom: -110px;
          left: -110px;
        }
      }
    }

.featured-products {
      .product-carousel {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        max-width: 400px;
        margin: 0 auto;
      }
    }
  }
}

@media (max-width: 576px) {
  .hero {
    .hero-content {
      .main-title {
        font-size: 2.2rem;
      }

.subtitle {
        font-size: 1rem;
        margin-bottom: 35px;
      }

.hero-badges {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
        gap: 12px;

.badge {
          width: 100%;
          justify-content: center;
          padding: 10px 20px;
        }
      }

.cta-group {
        max-width: 300px;

button {
          padding: 14px 28px;
          font-size: 15px;
        }
      }
    }

.featured-products {
      .product-carousel {
        grid-template-columns: 1fr;
        max-width: 280px;
        margin: 0 auto;

.product-card {
          padding: 16px;

.product-image {
            margin-bottom: 15px;
          }
        }
      }
    }
  }
}

@media (max-width: 380px) {
  .hero {
    .hero-content {
      .main-title {
        font-size: 1.9rem;
      }

.hero-badges {
        max-width: 250px;

.badge {
          padding: 8px 16px;
          font-size: 13px;
        }
      }
    }
  }
}

// Performance optimizations
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

// Dark mode support (if needed)
@media (prefers-color-scheme: dark) {
  .hero {
    background: 
      radial-gradient(circle at 20% 50%, rgba(255, 0, 0, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
      linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);

.hero-content {
      .main-title {
        background: linear-gradient(135deg, #ffffff 0%, #f1f2f6 50%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

.subtitle {
        color: #b2bec3;
      }

.trust-indicators .trust-item {
        color: #b2bec3;

&:hover {
          color: #ffffff;
        }
      }
    }

.featured-products .product-carousel .product-card {
        background: linear-gradient(135deg, rgba(45, 52, 54, 0.95) 0%, rgba(99, 110, 114, 0.9) 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);

h3 {
          color: #ffffff;
        }

.product-image .product-overlay {
          background: linear-gradient(135deg, 
            rgba(255, 0, 0, 0.7) 0%, 
            rgba(0, 0, 0, 0.3) 100%);
        }
      }
    }

.background-elements {
      .circle {
        &.circle-1 {
          background: linear-gradient(135deg, 
            rgba(255, 0, 0, 0.1) 0%, 
            rgba(255, 107, 107, 0.08) 50%, 
            rgba(255, 0, 0, 0.06) 100%);
        }

&.circle-2 {
          background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.1) 0%, 
            rgba(255, 255, 255, 0.08) 50%, 
            rgba(255, 255, 255, 0.06) 100%);
        }
      }

.floating-element {
        background: linear-gradient(135deg, rgba(45, 52, 54, 0.95) 0%, rgba(99, 110, 114, 0.85) 100%);
        border: 1px solid rgba(255, 255, 255, 0.2);

span {
          background: linear-gradient(135deg, #ffffff 0%, #f1f2f6 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
      }
    }
  }

// Additional advanced animations for modern feel
@keyframes morphGradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(255, 0, 0, 0.1),
      0 0 40px rgba(255, 0, 0, 0.05);
  }
  50% {
    box-shadow: 
      0 0 30px rgba(255, 0, 0, 0.2),
      0 0 60px rgba(255, 0, 0, 0.1);
  }
}

// Micro-interactions for enhanced UX
.hero-content {
  .hero-badges .badge.trending {
    animation: glowPulse 4s infinite ease-in-out;
  }
}

.featured-products .product-carousel .product-card {
  &:nth-child(1) {
    animation-delay: 0.1s;
  }
  &:nth-child(2) {
    animation-delay: 0.2s;
  }
  &:nth-child(3) {
    animation-delay: 0.3s;
  }
}

// Enhanced focus states for accessibility
.hero-content {
  .cta-group button {
    &:focus {
      outline: 3px solid rgba(255, 0, 0, 0.3);
      outline-offset: 2px;
    }
  }
}

.featured-products .product-carousel .product-card {
  &:focus {
    outline: 2px solid rgba(255, 0, 0, 0.4);
    outline-offset: 4px;
  }
}

// Loading state improvements
.hero.loading {
  .hero-content > * {
    animation-play-state: paused;
  }
}

// High contrast mode support
@media (prefers-contrast: high) {
  .hero {
    .hero-content {
      .main-title .highlight {
        color: #cc0000;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      }

.cta-group .cta-primary {
        background: #cc0000;
        border: 2px solid #990000;
      }
    }

.featured-products .product-carousel .product-card {
      border: 2px solid rgba(0, 0, 0, 0.2);
    }
  }
}

import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { trigger, transition, style, animate, query, stagger } from '@angular/animations';
import { NavBarComponent } from 'src/app/demo/components/nav-bar/nav-bar.component';
import { CommonModule } from '@angular/common';
import { CategorySectionComponent } from 'src/app/demo/components/category-section/category-section.component';
import { PromotionSectionComponent } from 'src/app/demo/components/promotion-section/promotion-section.component';
import { TopProductsComponent } from 'src/app/demo/components/top-products/top-products.component';
import { NewArrivalComponent } from 'src/app/demo/components/new-arrival/new-arrival.component';
import { TestimonialsComponent } from 'src/app/demo/components/testimonials/testimonials.component';
import { FooterComponent } from 'src/app/demo/components/footer/footer.component';
import { Router } from '@angular/router';
import { ProductService } from 'src/app/demo/services/product.service';
import { finalize, Subscription, forkJoin } from 'rxjs';
import { Product } from 'src/app/demo/models/shop.model';
import { SkeletonDirective } from 'src/app/demo/directives/skeleton.directive';
import { PubBannerComponent } from 'src/app/demo/components/pub-banner/pub-banner.component';
import { AdvertisementService } from 'src/app/demo/services/advertisement.service';
import { TranslateModule } from '@ngx-translate/core';

interface Advertisement {
  type: 'video' | 'image';
  source: string;
  title: string;
  description?: string;
}

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [
    NavBarComponent,
    CommonModule,
    CategorySectionComponent,
    PromotionSectionComponent,
    TopProductsComponent,
    NewArrivalComponent,
    TestimonialsComponent,
    FooterComponent,
    SkeletonDirective,
    PubBannerComponent,
    TranslateModule
  ],
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss',
  animations: [
    trigger('contentAnimation', [
      transition(':enter', [
        query('.hero-badges, .main-title, .subtitle, .cta-group, .trust-indicators', [
          style({ opacity: 0, transform: 'translateY(20px)' }),
          stagger(100, [
            animate('0.6s ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
          ])
        ], { optional: true })
      ])
    ]),
    trigger('badgeAnimation', [
      transition(':enter', [
        style({ opacity: 0, transform: 'scale(0.8)' }),
        animate('0.5s ease-out', style({ opacity: 1, transform: 'scale(1)' }))
      ])
    ]),
    trigger('titleAnimation', [
      transition(':enter', [
        style({ opacity: 0, transform: 'translateY(30px)' }),
        animate('0.7s 0.2s ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
      ])
    ]),
    trigger('subtitleAnimation', [
      transition(':enter', [
        style({ opacity: 0, transform: 'translateY(20px)' }),
        animate('0.6s 0.4s ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
      ])
    ]),
    trigger('ctaAnimation', [
      transition(':enter', [
        query('button', [
          style({ opacity: 0, transform: 'translateX(-20px)' }),
          stagger(100, [
            animate('0.5s 0.6s ease-out', style({ opacity: 1, transform: 'translateX(0)' }))
          ])
        ], { optional: true })
      ])
    ]),
    trigger('trustAnimation', [
      transition(':enter', [
        query('.trust-item', [
          style({ opacity: 0, transform: 'translateY(15px)' }),
          stagger(150, [
            animate('0.5s 0.8s ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
          ])
        ], { optional: true })
      ])
    ]),
    trigger('carouselAnimation', [
      transition(':enter', [
        style({ opacity: 0, transform: 'translateX(50px)' }),
        animate('0.8s 0.3s ease-out', style({ opacity: 1, transform: 'translateX(0)' }))
      ])
    ]),
    trigger('scrollAnimation', [
      transition(':enter', [
        style({ opacity: 0, transform: 'translateY(-20px)' }),
        animate('0.6s 1s ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
      ])
    ])
  ]
})
export class HomeComponent implements OnInit, OnDestroy {
  @ViewChild(NewArrivalComponent) newArrival!: NewArrivalComponent;

featuredProducts: Product[] = [];
  private subscriptions: Subscription = new Subscription();
  isLoading = true;
  ads: Advertisement[] = [];

constructor(
    private router: Router,
    private productService: ProductService,
    private adService: AdvertisementService
  ) {}

ngOnInit() {
    this.isLoading = true;

this.subscriptions.add(
      forkJoin({
        products: this.productService.getTopSellingProductsForHero(),
        ads: this.adService.getAdvertisements()
      })
      .pipe(
        finalize(() => {
          this.isLoading = false;
        })
      )
      .subscribe({
        next: (data: { products: Product[]; ads: Advertisement[]; }) => { // Explicitly type 'data'
          this.featuredProducts = data.products; // Already typed as Product[]
          this.ads = data.ads; // Already typed as Advertisement[]
        },
        error: (error) => {
          console.error('Erreur lors du chargement des données initiales:', error);
        }
      })
    );
  }

goToProductDetail(productId: number | undefined): void {
    if (productId) {
      this.router.navigate(['/product', productId]);
    } else {
      console.warn('Attempted to navigate to product detail with undefined ID.');
    }
  }
  getPrimaryUnitPrice(product: Product): number {
    return parseFloat(product.units?.[0]?.pivot?.value?.toString() || '0');
  }

scrollTo(section: 'new-arrival'): void {
    if (this.newArrival) {
      this.newArrival.scrollToSection();
    } else {
      console.warn('NewArrivalComponent not yet available for scrolling.');
    }
  }

goToShop(): void {
    this.router.navigate(['/shop']);
  }

getCategoryName(product: Product): string {
    if (product.categories && product.categories.length > 0) {
      return product.categories[0].name;
    }
    return 'Non classé';
  }

formatPrice(price: string | number | null | undefined): string {
    if (price === null || price === undefined) {
      return '0 XAF';
    }
    const numericPrice = typeof price === 'string' ? parseFloat(price) : price;
    if (isNaN(numericPrice)) {
      return '0 XAF';
    }
    return new Intl.NumberFormat('fr-FR', {
      style: 'currency',
      currency: 'XAF',
      minimumFractionDigits: 0,
      maximumFractionDigits: 2
    }).format(numericPrice);
  }

ngOnDestroy() {
    this.subscriptions.unsubscribe();
  }
}

Preview

Open Advanced Editor