Upload 63 files

assets/css/styles.css

@@ -617,6 +617,127 @@ body.dark-theme {
   border-radius: 10px;
 }
 
+/*=============== FEATURED CATEGORIES ===============*/
+.featured__category {
+  margin-bottom: 4rem;
+}
+
+.featured__category:last-child {
+  margin-bottom: 0;
+}
+
+.featured__category-header {
+  text-align: center;
+  margin-bottom: 2rem;
+  padding: 2rem 1rem;
+  background: linear-gradient(135deg, var(--first-color) 0%, #8e0022 100%);
+  border-radius: 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.featured__category-header::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="white" opacity="0.1"/><circle cx="80" cy="40" r="0.8" fill="white" opacity="0.08"/><circle cx="40" cy="80" r="1.2" fill="white" opacity="0.06"/><circle cx="90" cy="90" r="0.6" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.9" fill="white" opacity="0.07"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+  pointer-events: none;
+}
+
+.featured__category-title {
+  color: var(--white-color);
+  font-size: var(--h2-font-size);
+  font-weight: var(--font-semi-bold);
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  position: relative;
+  z-index: 1;
+}
+
+.featured__category-title i {
+  font-size: 1.5rem;
+  background: var(--white-color);
+  color: var(--first-color);
+  padding: 0.5rem;
+  border-radius: 50%;
+}
+
+.featured__category-desc {
+  color: var(--white-color);
+  font-size: var(--normal-font-size);
+  opacity: 0.9;
+  max-width: 400px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+/* Category specific styling */
+.featured__category:nth-child(2) .featured__category-header {
+  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
+}
+
+.featured__category:nth-child(3) .featured__category-header {
+  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+}
+
+.featured__category:nth-child(4) .featured__category-header {
+  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+}
+
+/* Animation effects */
+.featured__category-header {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.featured__category-header:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+/* Responsive */
+@media screen and (max-width: 768px) {
+  .featured__category {
+    margin-bottom: 3rem;
+  }
+
+  .featured__category-title {
+    font-size: var(--h3-font-size);
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .featured__category-title i {
+    font-size: 1.25rem;
+    padding: 0.4rem;
+  }
+
+  .featured__category-desc {
+    font-size: var(--small-font-size);
+  }
+
+  .featured__category-header {
+    padding: 1.5rem 1rem;
+    border-radius: 15px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .featured__category-title {
+    font-size: var(--normal-font-size);
+  }
+
+  .featured__category-desc {
+    font-size: var(--smaller-font-size);
+  }
+}
+
 /*=============== DISCOUNT ===============*/
 .discount__container {
   row-gap: 3.5rem;
@@ -1844,3 +1965,42 @@ body.dark-theme {
   background-color: var(--first-color);
   color: var(--white-color);
 }
+
+/*=============== ANIMATIONS ===============*/
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+.featured__category-title i {
+  animation: pulse 2s infinite;
+}
+
+/* Hover effects cho featured cards trong từng category */
+.featured__category:nth-child(2) .featured__card:hover {
+  border-color: #2ecc71;
+}
+
+.featured__category:nth-child(3) .featured__card:hover {
+  border-color: #3498db;
+}
+
+.featured__category:nth-child(4) .featured__card:hover {
+  border-color: #e74c3c;
+}

assets/js/main.js

@@ -261,24 +261,39 @@ let swiperHome = new Swiper(".home__swiper", {
 });
 
 /*=============== FEATURED SWIPER ===============*/
-let swiperFeatured = new Swiper(".featured__swiper", {
-  loop: true,
-  spaceBetween: 16,
-  grabCursor: true,
-  slidesPerView: "auto",
-  centeredSlides: "auto",
-
-  navigation: {
-    nextEl: ".swiper-button-next",
-    prevEl: ".swiper-button-prev",
-  },
-
-  breakpoints: {
-    1150: {
-      slidesPerView: 4,
-      centeredSlides: false,
-    },
-  },
+// Khởi tạo swiper cho tất cả các category
+document.addEventListener("DOMContentLoaded", function () {
+  // Tìm tất cả các swiper trong featured
+  const featuredSwipers = document.querySelectorAll(".featured__swiper");
+
+  featuredSwipers.forEach((swiperElement, index) => {
+    new Swiper(swiperElement, {
+      loop: true,
+      spaceBetween: 16,
+      grabCursor: true,
+      slidesPerView: "auto",
+      centeredSlides: "auto",
+
+      navigation: {
+        nextEl: swiperElement.querySelector(".swiper-button-next"),
+        prevEl: swiperElement.querySelector(".swiper-button-prev"),
+      },
+
+      breakpoints: {
+        1150: {
+          slidesPerView: 4,
+          centeredSlides: false,
+        },
+      },
+
+      // Thêm class unique cho mỗi swiper
+      on: {
+        init: function () {
+          swiperElement.classList.add(`featured-swiper-${index + 1}`);
+        },
+      },
+    });
+  });
 });
 
 /*=============== FEATURED ADD TO CART ===============*/
@@ -476,16 +491,28 @@ const sr = ScrollReveal({
   distance: "60px",
   duration: 2500,
   delay: 400,
-  // reset: true, // Animations repeat
 });
 
-sr.reveal(`.home__data, .featured__container, .new__container, 
+sr.reveal(`.home__data, .new__container, 
            .join__data, .testimonial__container, .footer`);
 sr.reveal(`.home__images`, { delay: 600 });
 sr.reveal(`.services__card`, { interval: 100 });
 sr.reveal(`.discount__data`, { origin: "left" });
 sr.reveal(`.discount__images`, { origin: "right" });
 
+// Thêm animation cho category headers
+sr.reveal(`.featured__category-header`, {
+  interval: 200,
+  distance: "30px",
+  duration: 1000,
+});
+
+// Animation cho featured containers
+sr.reveal(`.featured__container`, {
+  interval: 300,
+  delay: 200,
+});
+
 /*=============== OPEN DETAIL TAB ===============*/
 function openDetailPage() {
   // Đường dẫn tới trang detail.html
@@ -803,3 +830,30 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   }
 });
+
+/*=============== CATEGORY SCROLL ANIMATION ===============*/
+document.addEventListener("DOMContentLoaded", function () {
+  // Intersection Observer cho category headers
+  const categoryHeaders = document.querySelectorAll(
+    ".featured__category-header"
+  );
+
+  const observerOptions = {
+    threshold: 0.3,
+    rootMargin: "0px 0px -50px 0px",
+  };
+
+  const categoryObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.style.animation = "fadeInUp 0.8s ease forwards";
+      }
+    });
+  }, observerOptions);
+
+  categoryHeaders.forEach((header) => {
+    header.style.opacity = "0";
+    header.style.transform = "translateY(30px)";
+    categoryObserver.observe(header);
+  });
+});

index.html

@@ -320,6 +320,16 @@
         <h2 class="section__title">Sản phẩm bán chạy</h2>
 
         <div class="featured__container container">
+          <div class="container">
+            <div class="featured__category-header">
+              <h3 class="featured__category-title">
+                <i class="ri-drop-line"></i>
+                Nước Tẩy Trang
+              </h3>
+              <p class="featured__category-desc">Làm sạch sâu, loại bỏ hoàn toàn makeup</p>
+            </div>
+          </div>
+          
           <div class="featured__swiper swiper">
             <div class="swiper-wrapper">
               <article class="featured__card swiper-slide">
@@ -490,6 +500,16 @@
         </div>
 
         <div class="featured__container container">
+          <div class="container">
+            <div class="featured__category-header">
+              <h3 class="featured__category-title">
+                <i class="ri-brush-2-line"></i>
+                Kem Nền
+              </h3>
+              <p class="featured__category-desc">Che phủ hoàn hảo, làn da mịn màng tự nhiên</p>
+            </div>
+          </div>
+
           <div class="featured__swiper swiper">
             <div class="swiper-wrapper">
               <article class="featured__card swiper-slide">
@@ -660,6 +680,16 @@
         </div>
 
         <div class="featured__container container">
+          <div class="container">
+            <div class="featured__category-header">
+              <h3 class="featured__category-title">
+                <i class="ri-heart-3-line"></i>
+                Son Môi
+              </h3>
+              <p class="featured__category-desc">Màu sắc rực rỡ, độ bền cao, không khô môi</p>
+            </div>
+          </div>
+
           <div class="featured__swiper swiper">
             <div class="swiper-wrapper">
               <article class="featured__card swiper-slide">

product_detail.html

@@ -29,14 +29,14 @@
     <!--==================== HEADER ====================-->
     <header class="header" id="header">
       <nav class="nav container">
-        <a href="#" class="nav__logo">
+        <a href="index.html" class="nav__logo">
           <i class="ri-store-2-line"></i> ThuLieu Store
         </a>
 
         <div class="nav__menu">
           <ul class="nav__list">
             <li class="nav__item">
-              <a href="#home" class="nav__link active-link">
+              <a href="index.html" class="nav__link active-link">
                 <i class="ri-home-line"></i>
                 <span>Trang chủ</span>
               </a>