productos celulares

src/app/home/home.component.html

@@ -42,7 +42,7 @@
       <div class="container">
 
         <div class="about-banner">
-          <img src="assets/images/connectionphone.webp" width="509" height="459" loading="lazy" alt="Honor Magic 6 Lite"
+          <img src="assets/images/gaming-pc-background-wpu7jvd2zqd9qdwh.jpg" width="509" height="459" loading="lazy" alt="Honor Magic 6 Lite"
             class=" about-img">
         </div>
 

src/app/products/products.component.css

@@ -0,0 +1,69 @@
+.scroll-container {
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  padding-bottom: 20px;
+  margin-inline: 0px;
+}
+
+.scroll-wrapper {
+  display: flex;
+  gap: 5px;
+  scroll-snap-type: x mandatory;
+  padding: 20px 0;
+}
+
+.scroll-wrapper > li {
+  scroll-snap-align: start;
+  flex: 0 0 auto;
+  width: 272px; /* o el tamaño que mejor se adapte a tus cards */
+}
+
+.scroll-container::-webkit-scrollbar {
+  height: 10px;
+}
+
+.scroll-container::-webkit-scrollbar-thumb {
+  background: var(--AJsystem-blue);
+  border-radius: 10px;
+}
+
+.scroll-controls {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.scroll-btn {
+  background-color: var(--AJsystem-blue);
+  color: white;
+  font-size: 2.5rem;
+  font-weight: bold;
+  border: none;
+  padding: 10px;
+  cursor: pointer;
+  z-index: 1;
+  transition: background 1s;
+}
+
+.scroll-btn:hover {
+  background-color: var(--AJsystem-glow);
+}
+
+.scroll-btn.left {
+  margin-right: 5px;
+}
+
+.scroll-btn.right {
+  margin-left: 5px;
+}
+
+.scroll-container {
+  overflow-x: scroll;
+  scrollbar-width: none;       /* Firefox */
+  -ms-overflow-style: none;    /* Internet Explorer 10+ */
+}
+
+.scroll-container::-webkit-scrollbar {
+  display: none;               /* Chrome, Safari, Opera */
+}
+

src/app/products/products.component.ts

@@ -1,10 +1,36 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 
 @Component({
   selector: 'app-products',
   templateUrl: './products.component.html',
   styleUrls: ['./products.component.css']
 })
-export class ProductsComponent {
+export class ProductsComponent implements AfterViewInit {
 
+  @ViewChild('scrollBox', { static: false }) scrollBox!: ElementRef;
+
+  maxScrollLeft = 0;
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.maxScrollLeft = this.scrollBox.nativeElement.scrollWidth - this.scrollBox.nativeElement.clientWidth;
+    }, 100); 
+  }
+
+  scrollLeft() {
+    if (this.scrollBox.nativeElement.scrollLeft <= 0) {
+      this.scrollBox.nativeElement.scrollTo({ left: this.maxScrollLeft, behavior: 'smooth' });
+    } else {
+      this.scrollBox.nativeElement.scrollBy({ left: -277, behavior: 'smooth' });
+    }
+  }
+
+  scrollRight() {
+    const scroll = this.scrollBox.nativeElement;
+    if (scroll.scrollLeft + scroll.clientWidth >= scroll.scrollWidth - 5) {
+      scroll.scrollTo({ left: 0, behavior: 'smooth' });
+    } else {
+      scroll.scrollBy({ left: 277, behavior: 'smooth' });
+    }
+  }
 }

src/assets/images/8cb015bf-0b77-407e-b0f4-4a32af3b9ed5.svg

@@ -1,190 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg style="height:100%;width:100%" version="1.1" viewBox="0 0 1e4 8800" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-        <clipPath id="a">
-            <path d="M0 0h10000v8800H0"/>
-        </clipPath>
-        <clipPath id="i">
-            <path d="M0 0h8420v5960H0"/>
-        </clipPath>
-        <clipPath id="h">
-            <path d="M0 0h8420v5960H0"/>
-        </clipPath>
-        <clipPath id="g">
-            <path d="M0 0h8420v5960H0"/>
-        </clipPath>
-        <clipPath id="f">
-            <path d="M0 0h8420v5960H0"/>
-        </clipPath>
-        <clipPath id="e">
-            <path d="M0 0h8420v5960H0"/>
-        </clipPath>
-        <clipPath id="d">
-            <path d="M0 0h8420v5960H0"/>
-        </clipPath>
-        <clipPath id="c">
-            <path d="M0 0h8420v5960H0"/>
-        </clipPath>
-        <clipPath id="b">
-            <path d="M0 0h8420v5960H0"/>
-        </clipPath>
-    </defs>
-    <g clip-path="url(#a)">
-        <g transform="matrix(1.08 0 0 1.08 960 2890)" clip-path="url(#b)" display="block">
-            <g display="block">
-                <path d="m3040 3100c-10 30 90 60 290 10 200-40 0-120-120-110-110 10-170 60-170 100" fill="#5E1313"/>
-                <path d="m3340 2900-360 440 160 140c220-200 460-350 680-460l-480-120" fill="#F58D6C"/>
-                <path d="m3140 3480 30-30c-100-70-110-210-110-210l-80 100 160 140" fill="#FFF"/>
-                <path d="m3040 3220c10-10-10-20-20-10l-170 160-30 110-100 40 460 360c30 30 70 50 120 50l280 30 20-20-20-20-260-30c-40 0-80-20-100-50-80-90-230-290-240-330-10-60 60-290 60-290" fill="#ED3D50"/>
-                <path d="m3160 3460c50-20 80-110 130-130 80-30 120 10 120 10s-90 90-100 220l-150-100" fill="#ED3D50"/>
-                <path d="m3010 3340s120 110 160 120c30 10 100-10 100-10 50 60 110 320 120 330 40 30 180 10 200 50 30 40-10 90-10 90l-300-10-190-150-140-260 60-160" fill="#342d8c" stop-color="#000000" stroke-width=".92592" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="M3170 3690a10 10 0 01 0-20l180-40a10 10 0 01 10 30 950 950 0 00-190 30zm30-90a10 10 0 01 0-20 390 390 0 01 130-20 10 10 0 11 0 20 370 370 0 00-130 20" fill="#FFF"/>
-                <path d="m3760 3010-500-20-70 90 360 90 200-130 10-30" fill="#D74225"/>
-                <path d="m4610 940c20-210 0-430-130-500-370-200-800-10-810 410 0 300 210 980 430 1250-20 0-240 230-200 310l-50 30c-120 50-250 70-280 100-30 40 10 50 10 80-10 30-210 0-240 70-20 50 0 70 20 80 10 10-210 0-230 70-10 60 50 110 50 110s-120 10-130 150c20-100 550 60 660-10l580-340c200-110 340-200 350-360 20-390 70-1200-30-1450" fill="#840b11" stop-color="#000000" stroke-width=".92593" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="M4310 4120v-10l-10-10-610-110a10 10 0 00-10 30l610 100h20" fill="#0F3952"/>
-                <path d="m3530 4040 300 10c20 0 40-10 40-40 0-20-10-40-40-40l-300-20c-20 0-40 20-40 40s20 40 40 50" fill="#0F3952"/>
-                <path d="M3680 4010a10 10 0 10 10-20 10 10 0 00-10 20" fill="#FFF"/>
-            </g>
-        </g>
-        <g transform="translate(5650 5220) scale(.62527)" clip-path="url(#c)" display="block">
-            <g display="block">
-                <g fill="#0C1A37">
-                    <path d="M2410 1650a2230 2230 0 01 3130-470 2230 2230 0 01 470 3140 2230 2230 0 01-3130 470 2230 2230 0 01-470-3140zm-110-80a2370 2370 0 10 3820 2820 2370 2370 0 00-3820-2820"/>
-                    <path d="M5880 4220a2080 2080 0 11-3350-2480 2080 2080 0 01 3350 2480zM2570 1770a2040 2040 0 10 3280 2420 2040 2040 0 00-3280-2420"/>
-                    <path d="M4230 3000h-10L2450 4050a20 20 0 01-20-30l1770-1060a20 20 0 01 30 40zm260 1990a20 20 0 01-40-10l-170-1290a20 20 0 11 40-10l170 1290v20zm-370-100a20 20 0 01-40-20l10-120a20 20 0 01 40 0l-10 130v10"/>
-                    <path d="M4140 4620a20 20 0 01-40-20l90-1620a20 20 0 11 40 0l-90 1630v10zm-620 20a20 20 0 01-40-20l500-1170a20 20 0 11 40 20l-500 1170"/>
-                    <path d="M4230 3000a20 20 0 01-40-20l160-600a20 20 0 11 40 10l-160 600v10zm240-900a20 20 0 01-40-20l290-1090a20 20 0 11 40 10l-290 1090v10"/>
-                    <path d="m6240 2560-10 10-2020 430a20 20 0 01-10-40l2020-430a20 20 0 01 20 30"/>
-                </g>
-                <path d="M5770 4140a20 20 0 01-40-30 1900 1900 0 10-3350-1640 20 20 0 11-40-10 1940 1940 0 11 3430 1670" fill="#6897AE"/>
-            </g>
-        </g>
-        <g transform="translate(1080 5210) scale(.62416)" clip-path="url(#d)" display="block">
-            <g display="block" fill="#FFF">
-                <path d="m3170 3770c-60-60-110-160-110-250 40 60 90 180 110 250zm1210 620c-370 70-780-80-1030-380 280 250 620 390 1030 380zm1070-960c-10 170-100 360-230 480 220-410 160-330 230-480zm-320-1150c190 160 330 420 340 660-80-260-170-440-340-660zm-1720-50c230-240 600-370 930-310-340 0-640 100-930 310zm-230 1060c-30-70-30-170 0-240 10 60 20 170 0 240zm790 920c-330-70-620-330-720-660 150 310 390 530 720 660zm1200-430c-60 140-200 270-350 320 180-140 170-140 350-320zm130-1040c100 190 120 450 50 650 20-240 10-420-50-650zm-1400-630c270-120 620-100 870 50-280-100-560-130-870-50"/>
-                <path d="m4720 3760c-70 80-180 130-260 60-190 90-500-50-560-250-220-20-400-210-350-380-120-250 80-510 350-480 70-50 170-70 260-50 200-230 600-130 690 170 130 30 240 140 270 260 260-610-1350-1200-1730-290-340 810 740 1660 1450 990-70 0-120-30-120-30"/>
-                <path d="M3780 3260c-380 30-1290 50-1750 30 500-40 1400-40 1750-30zm-800-1490c260 220 630 600 850 860-260-220-630-600-850-860zm-250 600c320 150 810 420 1120 620-330-150-820-420-1120-620zm1450 1210c40 410 60 1110 50 1370-40-340-60-1050-50-1370zm-280-10c-190 260-500 640-730 860 190-260 510-630 730-860zm950-100c300 100 760 290 1040 430-300-100-750-290-1040-430zm-110-490c300-130 770-300 1080-380-290 130-760 300-1080 380zm-310-140c60-350 260-1180 390-1580-80 410-280 1240-390 1580zm-680-1280c90 200 180 500 210 680-70-160-170-470-210-680zm2150 1820c-220 10-560-30-740-80 180 0 520 30 740 80zm-940 1330c-120-160-250-420-300-570 100 130 230 390 300 570zM2590 2700c160 10 390 60 510 110-130 0-360-50-510-110"/>
-                <path d="m5240 4030c-10 30-270 690-1320 460 0 0 120 130 320 150 190 10 240-20 240-20s220 90 330 40 190-190 190-190 120 0 220-150c90-140 70-170 70-170s90-30 90-170c-10-140-140 50-140 50zm60-1850s280 320 300 610c0 0 90-220 70-340-10-130 90-130 10-250-80-110-240-70-240-70s-120-140-270-170c-160-20-190 0-190 0l320 220zm-2150 140s-140 30-190 170l-70 160s-100 10-160 140c-60 140-20 150-20 150s-70 10-100 170 180 300 180 300c40 110 130 150 130 150-100-350 80-890 230-1240"/>
-            </g>
-            <g display="block">
-                <g fill="#0C1A37">
-                    <path d="M2400 1650a2230 2230 0 01 3140-470 2230 2230 0 01 470 3140 2230 2230 0 01-3140 470 2230 2230 0 01-470-3140zm-100-70a2370 2370 0 10 3810 2820 2370 2370 0 00-3810-2820"/>
-                    <path d="M5880 4220a2080 2080 0 11-3350-2480 2080 2080 0 01 3350 2480zM2570 1780a2040 2040 0 10 3280 2420 2040 2040 0 00-3280-2420"/>
-                    <path d="M3880 1120h-10c-10 10-20 0-20-10l-30-150a20 20 0 11 40 0l30 140-10 20zm30 130-10 10c-20 10-30 0-30-10l-10-50a20 20 0 11 50-10v60zm260 1460-10 10-30-20-230-1280a20 20 0 11 50-10l230 1290-10 10zm50 290L3000 4660a20 20 0 11-40-30l1230-1660a20 20 0 11 30 30zm420-1140a20 20 0 01-40-20l290-800a20 20 0 11 40 20l-290 800zm-260 720a20 20 0 01-40-20l160-450a20 20 0 11 40 20l-160 450"/>
-                    <path d="m6230 2530-10 10-2010 470a20 20 0 11-10-40l2010-470a20 20 0 01 20 30"/>
-                    <path d="m6150 3720-20 10-1930-720a20 20 0 01 10-40l1930 720a20 20 0 01 10 30zm-1320 130a20 20 0 01-30 0l-190-260a20 20 0 01 40-30l180 260v30zm200 270v10c-10 10-30 0-30-10l-100-130a20 20 0 11 40-30l90 140v20zm-150 830-10 10-30-10-530-1570a20 20 0 01 50-20l520 1570v20"/>
-                </g>
-                <path d="M5360 1460h-30c-620-460-1450-490-2110-90a20 20 0 11-20-40 1940 1940 0 01 2160 100v30zm410 2680a20 20 0 11-40-30c300-400 430-900 350-1400a20 20 0 01 40-10c80 510-50 1020-350 1440" fill="#6897AE"/>
-            </g>
-        </g>
-        <g transform="translate(1740 2040) scale(1.0912)" clip-path="url(#e)" display="block">
-            <g display="block">
-                <path d="M3550 4520a370 370 0 10 120 720 370 370 0 00-120-720zm260 210-120 70c-30 20-70 0-80-40l-20-130c-10-30 20-60 50-60 70 10 130 30 180 80 20 20 20 60-10 80zm-280-90 30 140c0 30-20 60-60 60l-140-20c-30 0-50-40-40-70 30-60 70-110 130-140 30-20 70 0 80 30zm-230 300c0-30 20-60 60-60l130 20c40 0 60 40 50 70l-60 120c-10 40-60 40-80 20-50-40-80-100-100-170zm230 180 60-130c10-30 60-40 80-10l100 90c30 20 20 60-10 80a310 310 0 01-190 40c-30 0-50-40-40-70zm280-100-100-90c-30-20-20-60 10-80l120-70c30-20 70 0 70 30 20 70 10 140-20 200-10 30-50 40-80 10" fill="#67A3C3"/>
-                <path d="M3320 4940c0-20 20-30 40-30h140l30 20 80-10-370-90 10 110h70zm300-20 80-30c-10-20 0-40 20-50l100-80c30-20 70-10 80 20l10 20 50-20a380 380 0 00-30-70l-10-30-50-60-250 300zm-1660-300a170 170 0 10-340 0 170 170 0 00 340 0" fill="#113952"/>
-                <path d="m3640 4520-1850-50a10 10 0 01 0-30l1850 50a10 10 0 01 0 30zm-100 740h-10l-1780-460a10 10 0 11 10-20l1780 460a10 10 0 01 0 20" fill="#376E92"/>
-                <path d="m3610 5270-120-20a10 10 0 11 10-20 360 360 0 10 110-720 10 10 0 11 0-20 390 390 0 01 0 780zm-1860-470c-80-20-140-90-140-180 0-100 80-180 180-180a10 10 0 11 0 30 160 160 0 00-40 310 10 10 0 01 0 20" fill="#376E92"/>
-                <path d="M1650 4820h-10c-60-50-100-120-100-200 0-130 110-240 250-240a10 10 0 01 0 30 220 220 0 00-130 390 10 10 0 01-10 20" fill="#67A3C3"/>
-                <path d="m3430 2610h80v-90h-80v90" fill="#B4D2D0"/>
-                <path d="M1800 4620a10 10 0 11-30 0 10 10 0 01 30 0" fill="#113952"/>
-                <path d="M2530 2050a30 30 0 01 0-50h90a30 30 0 11 0 50h-90" fill="#67A3C3"/>
-                <path d="M2990 2000a10 10 0 01-10-20c50-20 90-60 130-100l30-40a10 10 0 01 20 10l-30 40a400 400 0 01-140 110zm1620 760c-160 0-350-50-540-190a10 10 0 01 10-20c560 390 990 70 1120-90 120-150 220-370 320-560 90-190 170-350 240-420 90-80 220-90 300-10 60 60 80 150 50 260-30 130-130 280-270 440a10 10 0 11-20-20c300-310 330-560 220-660-70-70-180-70-260 10-70 70-150 230-240 410-90 190-200 410-330 570-80 100-300 280-600 280" fill="#113952"/>
-                <path d="m5450 880c-220 290-190 780-200 800 120 290 360 570 550 710l-100 190c-100-70-480-300-800-890-10-10-60-600 130-1040l420 230" fill="#F65B2B"/>
-                <path d="m6050 4600-130-180c-110-150-200-320-250-500l-250-860-150-510-120-410h260a40 40 0 00 0-90h-310a40 40 0 00-40 60l120 410H2870l-140-440c-10-20-20-30-40-30l-130 10a40 40 0 00 0 80h100l140 420-1050 2040v20h-10v10a40 40 0 00 20 20v10h20l1820 260h20a30 30 0 00 10 0v-10h10l1720-1760 230 790c60 190 140 370 260 530l130 180a40 40 0 10 70-50zm-2500 230-1700-240 980-1920 720 2160zm80-30-730-2190h2300l130 450-1700 1740" fill="#67A3C3"/>
-                <path d="m5600 3270-10-10c-190-450-300-830-330-1130-30-310 40-460 100-530 70-70 170-90 270-50 200 70 400 340 420 710a10 10 0 01-20 10c-20-370-220-630-410-700-90-30-180-20-240 50-60 60-130 200-100 510a4020 4020 0 00 320 1140" fill="#376E92"/>
-                <path d="M2510 2060a180 180 0 01-180-170v-110a10 10 0 01 20 0l10 110a150 150 0 00 150 150l380-20c110 0 220-50 280-140l40-40a10 10 0 11 10 20l-30 40c-70 90-180 140-300 150l-380 10" fill="#67A3C3"/>
-                <path d="m2210 1800s20-50 70-40c60 0 200 50 250 50h720s90 0 90 130h-690c-30 0-80 40-120 40-60 0-130-90-320-180" fill="#F63B4E"/>
-                <path d="m2820 1810 190 130h250l-110-130h-330" fill="#B82D41"/>
-                <path d="m5130 1070c0 20 30 60 160 120s60-150 60-150-210-100-220 30" fill="#5E1212"/>
-                <path d="m4900 1050s210 170 430 160l80-100-450-210-60 150" fill="#DA4017"/>
-                <path d="m4970 1130c30-160 240 110 430 90 0-120 100-430 100-430l-550 120 20 220" fill="#28236c" stop-color="#000000" stroke-width=".91639" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="M2230 3230h-10v-20l610-650a10 10 0 11 20 10l-610 660h-10zm3880 1390a100 100 0 11-190 0 100 100 0 01 190 0" fill="#113952"/>
-                <path d="M5840 4790h-10c-40-50-60-110-60-170a10 10 0 11 20 0c0 60 20 110 60 150a10 10 0 01-10 20zm170 80a10 10 0 11 0-30 220 220 0 00 0-430 10 10 0 01 0-30 240 240 0 01 0 490" fill="#67A3C3"/>
-                <path d="m5670 3520-20-20-100-320a30 30 0 11 50-20l100 320a30 30 0 01-30 40zm-3660-30-20-10v-40l220-240a30 30 0 11 40 40l-230 240-10 10" fill="#113952"/>
-                <path d="m5330 3060h90l-130-450h-90l130 450zm-2210-450h270v-90h-270v90" fill="#B4D2D0"/>
-                <path d="M3940 2610h490v-90h-570l80 90zm2080 2010a10 10 0 11-20 0 10 10 0 01 20 0zm-2610-470-90-290h-90l80 250 100 40" fill="#113952"/>
-                <path d="m5720 2270 160-30h30v10h10a180 180 0 0 1 20 20l30 30 10 20 10 10 20 40a20 20 0 0 1-40 30l-10-20-20-10-20-20h-10v-10h-20a140 140 0 0 0-20-10h30l-150 40a50 50 0 1 1-30-100" fill="#FF8F6B"/>
-                <path d="m6070 2410s-10-30 50-10v40l-50-30" fill="#DA4017"/>
-                <path d="m5930 2230h120l-30 120-70 60-20-180" fill="#376E92"/>
-                <path d="M5670 2640h-140a40 40 0 01 0-80h140c110 0 210-90 210-210s-100-210-210-210h-260a40 40 0 11 0-90h260c160 0 290 130 290 300 0 160-130 290-290 290" fill="#F63B4E"/>
-                <path d="M6050 2240h10a170 170 0 01 40 30 150 150 0 01 40 80v50l-10 50a97070 97070 0 01-20 230l10 30 10 20h10v10h10a10 10 0 01-10 20h-10l-10-10h-10l-20-30-10-30-10-90a1030 1030 0 01 20-150v-60l10-10-10-10v-10l-10-30-20-20-20-10-10-10a30 30 0 11 20-50" fill="#376E92"/>
-                <path d="m5170 2190h-90l40 130 100 70-50-200" fill="#113952"/>
-            </g>
-        </g>
-        <g transform="matrix(.625 0 0 .625 3910 230)" clip-path="url(#f)" display="block">
-            <g display="block">
-                <path d="m5830 3410s70 30 180-20l600 590-480 350-260 100-200-810 160-210" fill="#F58D6C"/>
-                <path d="m6610 3980-350-340c60 230 200 300 20 580l330-240" fill="#D74225"/>
-                <path d="m6140 3570c-140-120-180-180-300-200-500-70 30-360-10-510-200-400 530-840 720-640-50-110 10-150 100-120 210 70 610 480 640 870l-1150 600" fill="#5E1313"/>
-                <path d="m7270 3490 90 270c-10 40-150 80-150 80l60-350" fill="#F58D6C"/>
-                <path d="m6380 3800c60-30 100-100 120-130h-160l-40 20 80 110" fill="#EF5C2E"/>
-                <path d="m7150 3870 70 10c20 0 30 30 10 40-20 20-50 10-60 50s20 60-10 90c-20 30-60-20-60-20l50-170" fill="#F58D6C"/>
-                <path d="m5260 3410-3460 650-480-2640 3450-640 490 2630" fill="#8848ea"/>
-                <path d="m1450 2270-40-190 3110-640 30 190-3100 640" fill="#060606"/>
-                <path d="m5240 3410-420 80-490-2630 420-80 490 2630" fill="#6b1ae5" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="m5320 3410-420 80-510-2760 420-80 510 2760" fill="#8948ea" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="m2730 3920-330 60-450-2700 320-50 460 2690zm1880-380-350 60-450-2690 350-60 450 2690" fill="#060606"/>
-                <path d="m2500 5020c40-70 220-980 230-1160 0-160-110-270-290-170-130 70-110 170-180 130-60-40-160-100-250-100-200-10-960 620-260 1590l750-290" fill="#1d194d" stop-color="#000000" stroke-width="1.6" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="m7100 4090c-220 210-860-220-980-810-160-730 620-1080 1040-510 200 290 130 620 110 690-10 90-40 500-170 630" fill="#F58D6C"/>
-                <path d="m7170 2700c70 120 90 220 100 330-240 0-400-250-410-290 0 0 20-210 110-220 40 0 150 80 200 180" fill="#D74225"/>
-                <path d="m6030 3280c-180-860 650-1300 1130-630 60 90 130 210 130 320-230 80-240-220-340-160-100 50-160 530-540 560l-380-90zm1240-100h-30l-20-10h-60l-40 10h-30l-40 10h-30l-60 20-20 10h-20l-10 10 20-20 20-10 20-20 60-20 30-20a590 590 0 0 1 80-20l30-10h40a710 710 0 0 1 60-10h10c40 0 70 20 60 40 0 30-30 40-70 40" fill="#5E1313"/>
-                <path d="m6200 3230h1140v100h-30s10 260-150 260-190-300-190-300h-780l10-60" fill="#1F170D"/>
-                <path d="m7190 3520c-50 10-100-50-110-100l-30-120-10 10c-10 30-20 60-10 100l40 90c30 30 80 60 120 30v-10" fill="#6D799F"/>
-                <path d="m7270 3280v90l-20 130v10l30-100 20-120c0-20-30-30-30-10" fill="#FFF"/>
-                <path d="m6510 3460s-10-250-170-270c-310-60-290 450-50 550 120 40 210-70 210-70l10-210" fill="#F58D6C"/>
-                <path d="m6170 3360 10-10a150 150 0 01 20-40 130 130 0 01 50-40 110 110 0 01 80 0l60 50a190 190 0 01 30 60l10 20v20l10 20a30 30 0 11-50 0l-10-10v-40a200 200 0 00-20-50l-40-40h-60a100 100 0 00-50 20 120 120 0 00-20 30v10l-10 10a10 10 0 01-10-10" fill="#D74225"/>
-                <path d="m6430 2100c-20-60-80-80-140-70-50 20-70 80-50 130s90 80 140 60c50-10 80-70 50-120" fill="#FBB855"/>
-                <path d="m7080 2730 160 30c30 10 60 40 60 80 0 30-30 60-70 60l-100-10-50-160" fill="#217177"/>
-                <g>
-                    <path d="m5730 3040s-430 170-640-20c-40 50 80 230 310 260 470 60 970-310 970-310l-640 70" fill="#f04c54" stop-color="#000000" stroke-width="1.6" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                    <path d="m5730 3040s-260-860 580-970c700-90 910 500 910 500s-140 70-90 320l-1400 150" fill="#342d8c" stop-color="#000000" stroke-width="1.6" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                    <path d="m6300 2070c-820 120-570 970-570 970l370-40c-20-30-200-760 200-930" fill="#f04c54" stop-color="#000000" stroke-width="1.6" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                    <path d="m6950 2910 180-20c-50-250 90-320 90-320s-210-590-910-500c60 10 460 60 640 840" fill="#f04c54" stop-color="#000000" stroke-width="1.6" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                </g>
-                <path d="m5900 2330c-10-20-30-20-40-20-20 10-30 20-20 40s30 30 40 20c20-10 30-20 20-40zm490-50c-10-20-30-30-40-20-20 0-30 20-20 30 10 20 30 30 40 20 20 0 30-20 20-30zm500-60c-10-20-30-30-40-20-20 0-30 20-20 40l40 20c20-10 30-30 20-40" fill="#5E1313"/>
-                <path d="M6440 3560a70 70 0 10-70 80l60 140a40 40 0 10 70-30l-70-140 10-50" fill="#ECDBCF"/>
-            </g>
-        </g>
-        <g transform="matrix(1.37 0 0 1.37 500 1390)" clip-path="url(#g)" display="block">
-            <g display="block">
-                <path d="m3760 4390 10-10 510-80a10 10 0 01 0 20l-510 80-10-10" fill="#0F3952"/>
-                <path d="m4410 4340-250 10c-20 0-40-20-40-40s20-30 40-40h240c20 0 40 10 40 30s-10 40-30 40" fill="#0F3952"/>
-                <path d="m3700 3740c10 30 90 20 220-90s-50-90-130-50c-80 50-100 110-90 140" fill="#5E1313"/>
-                <path d="m3840 3480-80 470 170 30c80-230 190-440 300-610l-390 110" fill="#F58D6C"/>
-                <path d="m3930 3980 20-30c-110-10-170-100-170-100l-20 100 170 30" fill="#FFF"/>
-                <path d="m3760 3840h-30l-50 180 30 100-60 70 480 60c40 10 110 30 140 20l120-10 80-30-20-10-220-20c-30 10-60 20-90 10-90-40-280-110-310-140-30-40-70-230-70-230" fill="#ED3D50"/>
-                <path d="m4180 3420-360 160-20 100 290-70 90-170v-20" fill="#D74225"/>
-                <path d="m4020 1560c-60-160-160-320-280-320-350 0-600 300-440 620 110 210 520 630 790 750-20 10-90 260-30 310l-30 40c-60 80-150 150-160 180-10 40 30 30 30 60 10 20-150 70-150 140 10 40 30 40 40 50 20 0-150 80-130 140 20 50 70 60 70 60s-80 50-30 150c-20-70 420-150 480-250l290-470c120-160 180-280 130-400-140-290-400-910-580-1060" fill="#f04c54" stop-color="#000000" stroke-width=".72993" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="m3690 1850-80-110 170-120 20 40c0 120-110 190-110 190" fill="#ECDBCF"/>
-                <path d="m3800 1660-10-20-130 170 30 40s110-70 110-190" fill="#D29B80"/>
-                <path d="M3500 1910a10 10 0 01 0-20c180 0 250-110 270-150 30-60 30-130 0-160a10 10 0 01 20-10c30 40 30 110 0 180-20 50-100 160-290 160" fill="#a50e15" stop-color="#000000" stroke-width=".72993" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="m3940 3960c30-30 10-110 40-150 40-60 90-40 90-40s-30 100 20 200l-150-10" fill="#ED3D50"/>
-                <path d="m3780 3930s140 40 160 30l80-50c50 20 210 170 220 170l180 60c40 20 30 80 30 80l-230 20-200-30-210-130-30-150" fill="#342d8c" stop-color="#000000" stroke-width=".72993" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="M4030 4040a10 10 0 01-10-10c0-10 40-50 80-70a10 10 0 11 10 20 310 310 0 00-80 60zm20 80a10 10 0 01-20-10c10-10 60-70 120-110a10 10 0 11 10 20 790 790 0 00-110 100" fill="#FFF"/>
-            </g>
-        </g>
-        <g transform="translate(4160 1600) scale(.62625)" clip-path="url(#h)" display="block">
-            <g display="block">
-                <path d="m2310 2370c-270 0-500 80-690 210-100 500 970 580 1260 640l-40-90-40-30c-70-280-230-730-490-730" fill="#a50e15" stop-color="#000000" stroke-width="1.5968" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="m5410 1190c-1100-440-2100 610-3220 240 210 210-210 610-250 1180-40 520 720 350 1370 850 780-530 1880-510 2400-1350 0 0 250-470-300-920" fill="#342d8c" stop-color="#000000" stroke-width="1.5968" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="m5570 1150c-420-160-810-120-1210-20 330-60 670-70 1010 60 550 450 310 920 310 920-500 790-1510 820-2270 1270l50 40c780-530 1880-510 2410-1350 0 0 240-470-300-920" fill="#060606"/>
-                <path d="m4190 1730c-60 60-910 910-940 1690l60 40c360-240 790-370 1190-520l-310-1210" fill="#28236c" stop-color="#000000" stroke-width="1.5968" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="m3660 2840 30 10h20c10-10 120-20 110-30s-770-950-1460-1380h-100c700 400 1400 1390 1400 1400" fill="#28236c" stop-color="#000000" stroke-width="1.5968" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="M4080 3140a100 100 0 01-80-40c-10-10-790-1100-1630-1560l-130-100 110-30 120 10 100 20a5600 5600 0 01 1590 1560 90 90 0 01-30 130l-50 10" fill="#1F140A"/>
-                <path d="m2420 1480h120c830 510 1580 1540 1590 1550 10 20 0 40-10 50h-30l-20-10c-10-20-810-1110-1650-1590" fill="#756454"/>
-                <path d="m3950 2830c10 80 130 130 310 120 170-10 100-490 100-490s-420 280-410 370" fill="#5E1313"/>
-                <path d="m5050 2420c-200 600-300 1390-300 1430 360 410 900 750 1300 860l-70 380c-190-60-950-230-1810-1030-10-20-80-990-20-1810l900 170" fill="#F58D6C"/>
-                <path d="m4130 2850s460 140 810-30l60-200-870-50v280" fill="#D74225"/>
-                <path d="m3950 2820c30-570 240-1090 240-1090 150-340 410-470 690-400a520 520 0 0 1 330 740l-50 100-10 10v10l-10 10-20 40-20 50-10 40-20 40-20 50-100 400c-230 90-930-250-1e3 0" fill="#342d8c" stop-color="#000000" stroke-width="1.5968" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="m5920 5080 390 120c20 0 50-30 50-30h50l80-70 270 50c40-10 90-60 40-120 90-50 10-130 10-130-110 20-280-40-320-60-50-20-390-210-430-210-30 0-230 60-270 120-110 230 130 330 130 330" fill="#F58D6C"/>
-                <path d="m4350 4020c0-100-90-180-190-190l10 200 110 130c40-40 70-90 70-140" fill="#EF5C2E"/>
-            </g>
-            <path d="m3970 2830c-30-20-30-70-20-100 90-240 80-470 90-710a820 820 0 0 1 140-320 470 470 0 0 1 150-110 320 320 0 0 1 110-50l70 10a410 410 0 0 1 360 540l-10 40-10 20v20l-10 10v20l-10 30-20 80-10 30-10 40-20 330-60 20-70 10h-240l-80-10c-110-10-220 0-320 50-20 10-30 30-30 50" display="block" fill="#342d8c" stop-color="#000000" stroke-width="1.5968" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-        </g>
-        <g transform="matrix(.62 0 0 .62 3320 1210)" clip-path="url(#i)" display="block">
-            <g display="block" stroke-width="1.6129">
-                <path d="m3420 2710c40-210 70-400 70-480 10-150-90-250-270-160-120 80-110 170-180 130-40-40-210-20-230-100s-450-620-330 150c10 30-20 70-40 90-100 70-170 30-250 120-200 240-300 680 110 1060 80 80 280-190 230 40 180-480 440-730 890-850" fill="#1d194d" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-                <path d="m4390 3590s290-240 250-470c0 0-550-660-950-940-400-290-1060-530-1190-330-80 130 310-380 560 1260 70 440 630 410 1190 720l140-240" fill="#342d8c" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
-            </g>
-        </g>
-    </g>
-</svg>

src/index.html

@@ -14,7 +14,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Rubik:wght@400;500;600;700&family=Shadows+Into+Light&display=swap&family=Harmattan:wght@400;500;600;700&family=MuseoModerno:ital,wght@0,100..900;1,100..900&family=Orbit&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Harmattan:wght@400;500;600;700&family=MuseoModerno:ital,wght@0,100..900;1,100..900&family=Orbit&family=Roboto:wght@400;500&family=Rubik:wght@400;500;600;700&family=Shadows+Into+Light&family=Source+Sans+Pro:wght@400;600&display=swap"
     rel="stylesheet">
 
   <!--

src/styles.css

@@ -35,6 +35,7 @@
     --ff-roboto: 'Roboto', sans-serif;
     --ff-harmattan: 'Harmattan', sans-serif;
     --ff-museomoderno: 'MuseoModerno', sans-serif;
+    --ff-calibri: 'Source Sans Pro', sans-serif;
 
     --fs-1: 3.2rem;
     --fs-2: 2.2rem;
@@ -821,7 +822,7 @@
 
   .food-menu-card .card-banner {
     position: relative;
-    padding-block-start: 30px;
+    padding-block-start: 20px;
     max-width: max-content;
     aspect-ratio: 1 / 1;
     margin-inline: auto;
@@ -857,24 +858,28 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 15px;
+    gap: 10px;
-    margin-block: 20px 10px;
+    margin-block: 10px 5px;
   }
 
   .food-menu-card .category {
-    font-family: var(--ff-museomoderno);
+    font-family: var(--ff-calibri);
     font-weight: var(--fw-500);
   }
 
   .food-menu-card .rating-wrapper { font-size: 1.4rem; }
 
-  .food-menu-card .card-title { margin-block-end: 10px; }
+  .food-menu-card .card-title { 
+    margin-block-end: 10px; font-family: 
+    var(--ff-calibri);
+    font-size: var(--fw-700);
+  }
 
   .food-menu-card .price-wrapper {
     display: flex;
     justify-content: center;
-    gap: 5px;
+    gap: 0px;
-    font-family: var(--ff-museomoderno);
+    font-family: var(--ff-calibri);
     font-weight: var(--fw-600);
     word-wrap: break-word;
     overflow-wrap: break-word;
@@ -1625,7 +1630,11 @@
 
     .food-menu-card :is(.wrapper, .price-wrapper) { justify-content: flex-start; }
 
-    .food-menu-card .card-title { text-align: left; }
+    .food-menu-card .card-title { 
+      text-align: center; 
+      font-family: var(--ff-calibri); 
+      font-size: 1.9rem;
+    }