productos inicio portatiles

src/app/products/products.component.css

@@ -67,3 +67,16 @@
   display: none;               /* Chrome, Safari, Opera */
 }
 
+.category-label {
+  display: inline-block;
+  background-color: var(--AJsystem-blue); /* O cualquier color que estés usando */
+  color: white;
+  padding: 8px 20px;
+  font-size: 2rem;
+  font-weight: bold;
+  border-radius: 0px;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  font-family: var(--ff-calibri);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}

src/app/products/products.component.html

@@ -71,11 +71,68 @@
 
         </ul>
       -->
+  <div class="category-label">Portatiles</div>
+  <div class="scroll-controls">
+      <button class="scroll-btn left" (click)="scrollLeftPortatiles()">‹</button>
 
+      <div class="scroll-container" #scrollPortatiles>
+        <ul class="scroll-wrapper food-menu-list">
+
+          <li>
+            <div class="food-menu-card">
+
+              <div class="card-banner">
+
+                <svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <title>Portatil ACER A314-36P-323F - INTEL CORE I3 N305 - 8GB LPDDR5 - 512GB SSD - PANTALLA 14" FHD - NO DVD - HDMI - WINDOWS 11 - PURE SILVER</title>
+                  <defs>
+                    <clipPath id="rounded-rect">
+                       <rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
+                    </clipPath>
+                  </defs>
+                  <image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ACER A314-36P-323FPURE SILVER.webp"/>
+                </svg>
+
+                <div class="badge">-45%</div>
+
+                <button class="btn food-menu-btn">Comprar</button>
+              </div>
+
+              <div class="wrapper">
+                <p class="category">Portatiles</p>
+
+                <div class="rating-wrapper">
+                  <ion-icon name="cloud"></ion-icon>
+                  <ion-icon name="cloud"></ion-icon>
+                  <ion-icon name="cloud"></ion-icon>
+                  <ion-icon name="cloud"></ion-icon>
+                  <ion-icon name="cloud"></ion-icon>
+                </div>
+              </div>
+
+              <h3 class="h3 card-title">ACER A314-36P-323F - INTEL CORE I3 N305 - 8GB LPDDR5 - 512GB SSD - PANTALLA 14" FHD - NO DVD - HDMI - WINDOWS 11 - PURE SILVER</h3>
+
+              <div class="price-wrapper">
+
+                <p class="price-text">Valor:</p>
+
+                <data class="price" value="xxxxxx">$xxxxxx</data>
+
+                <del class="del">$xxxxxxx</del>
+
+              </div>
+
+            </div>
+          </li>
+        </ul>  
+      </div>
+       <button class="scroll-btn right" (click)="scrollRightPortatiles()">›</button>
+    </div>
+  <div class="category-label">Celulares</div>
     <div class="scroll-controls">
-      <button class="scroll-btn left" (click)="scrollLeft()">‹</button>
+      <button class="scroll-btn left" (click)="scrollLeftCelulares()">‹</button>
 
-      <div class="scroll-container" #scrollBox>
+      <div class="scroll-container" #scrollCelulares>
         <ul class="scroll-wrapper food-menu-list">
 
           <li>
@@ -1260,7 +1317,7 @@
 
           </ul>
         </div>
-       <button class="scroll-btn right" (click)="scrollRight()">›</button>
+       <button class="scroll-btn right" (click)="scrollRightCelulares()">›</button>
     </div>
       </div>
     </section>

src/app/products/products.component.ts

@@ -8,29 +8,53 @@ import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 export class ProductsComponent implements AfterViewInit {
 
   @ViewChild('scrollBox', { static: false }) scrollBox!: ElementRef;
+  @ViewChild('scrollPortatiles', { static: false }) scrollPortatiles!: ElementRef;
+  @ViewChild('scrollCelulares', { static: false }) scrollCelulares!: ElementRef;
+
 
   maxScrollLeft = 0;
 
   ngAfterViewInit() {
     setTimeout(() => {
-      this.maxScrollLeft = this.scrollBox.nativeElement.scrollWidth - this.scrollBox.nativeElement.clientWidth;
+      this.maxScrollLeft = this.scrollPortatiles.nativeElement.scrollWidth - this.scrollPortatiles.nativeElement.clientWidth;
+    }, 100); 
+    setTimeout(() => {
+      this.maxScrollLeft = this.scrollCelulares.nativeElement.scrollWidth - this.scrollCelulares.nativeElement.clientWidth;
     }, 100); 
   }
 
-  scrollLeft() {
+  scrollLeftPortatiles() {
-    if (this.scrollBox.nativeElement.scrollLeft <= 0) {
+    if (this.scrollPortatiles.nativeElement.scrollLeft <= 0) {
-      this.scrollBox.nativeElement.scrollTo({ left: this.maxScrollLeft, behavior: 'smooth' });
+      this.scrollPortatiles.nativeElement.scrollTo({ left: this.maxScrollLeft, behavior: 'smooth' });
     } else {
-      this.scrollBox.nativeElement.scrollBy({ left: -277, behavior: 'smooth' });
+      this.scrollPortatiles.nativeElement.scrollBy({ left: -277, behavior: 'smooth' });
     }
   }
 
-  scrollRight() {
+  scrollRightPortatiles() {
-    const scroll = this.scrollBox.nativeElement;
+    const scroll = this.scrollPortatiles.nativeElement;
     if (scroll.scrollLeft + scroll.clientWidth >= scroll.scrollWidth - 5) {
       scroll.scrollTo({ left: 0, behavior: 'smooth' });
     } else {
       scroll.scrollBy({ left: 277, behavior: 'smooth' });
     }
   }
+
+  scrollLeftCelulares() {
+    if (this.scrollCelulares.nativeElement.scrollLeft <= 0) {
+      this.scrollCelulares.nativeElement.scrollTo({ left: this.maxScrollLeft, behavior: 'smooth' });
+    } else {
+      this.scrollCelulares.nativeElement.scrollBy({ left: -277, behavior: 'smooth' });
+    }
+  }
+
+  scrollRightCelulares() {
+    const scroll = this.scrollCelulares.nativeElement;
+    if (scroll.scrollLeft + scroll.clientWidth >= scroll.scrollWidth - 5) {
+      scroll.scrollTo({ left: 0, behavior: 'smooth' });
+    } else {
+      scroll.scrollBy({ left: 277, behavior: 'smooth' });
+    }
+  }
+
 }