E-commerce Homepage Hero Section HTML

Open In Editor Publish Your Code

<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 />

CSS

.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);
    }
  }
}

JS

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();
  }
}

E-commerce Homepage Hero Section HTML

Recommended

Titan's html codes V0.1

Restaurant Menu HTML Template

HTML CSS Toggle Button

HTML

CSS

JS

Recommended

Titan's html codes V0.1

Restaurant Menu HTML Template

HTML CSS Toggle Button

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS