home page

src/app/pages/home/home.component.scss

@@ -705,6 +705,7 @@
 // ========== DEXAR REDESIGN 2026 STYLES ==========
 .dexar-home {
   width: 100%;
+  overflow-x: hidden;
 }
 
 // Hero Section
@@ -908,7 +909,7 @@
 
 // Categories Section
 .dexar-categories {
-  max-width: 1200px;
+  max-width: 1440px;
   margin: 50px auto;
   padding: 0 56px;
 }
@@ -950,74 +951,44 @@
 
 .dexar-categories-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(4, 1fr);
   gap: 30px;
   animation: fadeIn 0.6s ease-in 0.3s both;
+  width: 100%;
 }
 
 .dexar-category-card {
-  background: white;
-  border-radius: 16px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  height: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  position: relative;
-  
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: linear-gradient(90deg, #497671 0%, #a7ceca 100%);
-    transform: scaleX(0);
-    transition: transform 0.3s ease;
-  }
+  text-decoration: none;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   
   &:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 12px 32px rgba(73, 118, 113, 0.2);
+    transform: translateY(-4px);
     
-    &::before {
-      transform: scaleX(1);
+    .dexar-category-image {
+      box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2);
+    }
+    
+    .dexar-category-info {
+      box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2);
     }
   }
 }
 
-.dexar-category-link {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  text-decoration: none;
-  color: inherit;
-  padding: 20px;
-  
-  h3 {
-    font-size: 1.3rem;
-    font-weight: 600;
-    color: #1e3c38;
-    margin: 16px 0 0 0;
-    transition: color 0.3s ease;
-  }
-  
-  &:hover h3 {
-    color: #497671;
-  }
-}
-
-.dexar-category-media {
+.dexar-category-image {
   width: 100%;
-  height: 200px;
-  background: #f5f5f5;
-  border-radius: 12px;
+  aspect-ratio: 4 / 3;
+  border: 1px solid #d3dad9;
+  border-radius: 13px 13px 0 0;
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
+  background: #f5f5f5;
+  position: relative;
   
   img {
     width: 100%;
@@ -1037,12 +1008,51 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 3rem;
+  font-size: 5rem;
   font-weight: 700;
   color: #497671;
   background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
 }
 
+.dexar-category-info {
+  width: 100%;
+  border: 1px solid #d3dad9;
+  border-top: none;
+  border-radius: 0 0 13px 13px;
+  padding: 12px 16px;
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
+  background: #f5f3f9;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  transition: background 0.3s ease;
+}
+
+.dexar-category-name {
+  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-weight: 600;
+  font-size: clamp(14px, 1.4vw, 18px);
+  color: #1e3c38;
+  margin: 0;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-height: calc(2 * 1.3em);
+}
+
+.dexar-category-count {
+  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-weight: 600;
+  font-size: clamp(11px, 1vw, 13px);
+  color: #697777;
+  margin: 0;
+  line-height: 1.2;
+}
+
 // Responsive Design
 @media (max-width: 1200px) {
   .dexar-hero {
@@ -1065,6 +1075,11 @@
   .dexar-categories {
     padding: 0 40px;
   }
+  
+  .dexar-categories-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+  }
 }
 
 @media (max-width: 992px) {
@@ -1102,8 +1117,8 @@
   }
   
   .dexar-categories-grid {
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    gap: 24px;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
   }
 }
 
@@ -1156,12 +1171,12 @@
   }
   
   .dexar-categories-grid {
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 20px;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
   }
   
-  .dexar-category-media {
-    height: 160px;
+  .dexar-category-info {
+    padding: 10px 12px;
   }
 }
 
@@ -1189,12 +1204,20 @@
     font-size: 18px;
   }
   
+  .dexar-categories {
+    padding: 0 16px;
+  }
+  
   .dexar-categories-grid {
-    grid-template-columns: 1fr;
-    gap: 16px;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+  
+  .dexar-category-info {
+    padding: 8px 10px;
   }
   
   .dexar-category-card:hover {
-    transform: translateY(-4px);
+    transform: translateY(-2px);
   }
 }