diff --git a/files/Obuv.webp b/files/Obuv.webp new file mode 100644 index 0000000..2a0972a Binary files /dev/null and b/files/Obuv.webp differ diff --git a/files/changes.txt b/files/changes.txt new file mode 100644 index 0000000..8854db3 --- /dev/null +++ b/files/changes.txt @@ -0,0 +1,500 @@ +we ae going to redesing dexar. here are css from the figma. i will try to explain all. +pls do responsive and better! thank you + +you are free to do changes better and responsive ofc!! + +Header: +
+ +
+
Главная
+
О нас
+
Контакты
+
+
+
+
Искать...
+ +
+
+
+
+
RU
+
+
+
+
+ + .frame { + width: 1440px; + height: 84px; + display: flex; + background-color: #74787b1a; +} + +.frame .group { + margin-top: 18px; + width: 148px; + height: 48px; + position: relative; + margin-left: 56px; +} + +.frame .div { + display: inline-flex; + margin-top: 18px; + width: 569px; + height: 49px; + position: relative; + margin-left: 57px; + align-items: flex-start; +} + +.frame .div-wrapper { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 10px 48px; + position: relative; + flex: 0 0 auto; + background-color: #497671; + border-radius: 13px 0px 0px 13px; + border: 1px solid; + border-color: #d3dad9; + box-shadow: 0px 3px 4px #00000026; +} + +.frame .text-wrapper { + position: relative; + width: fit-content; + margin-top: -1.00px; + font-family: "DM Sans-SemiBold", Helvetica; + font-weight: 600; + color: #ffffff; + font-size: 22px; + text-align: center; + letter-spacing: 0; + line-height: normal; +} + +.frame .div-wrapper-2 { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 10px 63px; + position: relative; + flex: 0 0 auto; + background-color: #a1b4b5; + border: 1px solid; + border-color: #d3dad9; + box-shadow: 0px 3px 4px #00000026; +} + +.frame .div-wrapper-3 { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 10px 42px; + position: relative; + flex: 0 0 auto; + background-color: #ffffffbd; + border-radius: 0px 13px 13px 0px; + border: 1px solid; + border-color: #d3dad9; + box-shadow: 0px 3px 4px #00000026; +} + +.frame .text-wrapper-2 { + color: #1e3c38; + position: relative; + width: fit-content; + margin-top: -1.00px; + font-family: "DM Sans-SemiBold", Helvetica; + font-weight: 600; + font-size: 22px; + text-align: center; + letter-spacing: 0; + line-height: normal; +} + +.frame .frame-wrapper { + margin-top: 18px; + width: 234px; + height: 49px; + position: relative; + margin-left: 126px; + background-color: #ffffffbd; + border-radius: 22px; + border: 1px solid; + border-color: #d2dad9; + box-shadow: 0px 3px 4px #00000026; +} + +.frame .div-2 { + display: inline-flex; + align-items: center; + gap: 27px; + padding: 0px 20px; + position: relative; + top: 10px; + left: 50px; +} + +.frame .text-wrapper-3 { + color: #828e8d; + position: relative; + width: fit-content; + margin-top: -1.00px; + font-family: "DM Sans-SemiBold", Helvetica; + font-weight: 600; + font-size: 22px; + text-align: center; + letter-spacing: 0; + line-height: normal; +} + +.frame .icn { + position: absolute; + top: 1px; + left: -32px; + width: 28px; + height: 28px; +} + +.frame .korzina-frame { + margin-top: 26px; + width: 48px; + height: 32px; + position: relative; + margin-left: 57px; + background-color: #ffffff4c; + border-radius: 12px; + border: 1px solid; + border-color: #667a77; +} + +.frame .cart { + position: absolute; + top: calc(50.00% - 13px); + left: calc(50.00% - 14px); + width: 27px; + height: 27px; +} + +.frame .RU-frame { + display: flex; + margin-top: 26px; + width: 67px; + height: 32px; + position: relative; + margin-left: 4px; + align-items: center; + gap: 8px; + padding: 6px; + background-color: #ffffff4c; + border-radius: 12px; + border: 1px solid; + border-color: #667a77; +} + +.frame .text-wrapper-4 { + position: relative; + width: fit-content; + margin-top: -6.50px; + margin-bottom: -4.50px; + font-family: "DM Sans-Medium", Helvetica; + font-weight: 500; + color: #1e3c38; + font-size: 24px; + letter-spacing: 0; + line-height: normal; +} + +.frame .group-2 { + position: relative; + width: 9.29px; + height: 14px; + transform: rotate(90.00deg); +} + +.frame .line { + top: -2px; + position: absolute; + left: 1px; + width: 9px; + height: 10px; + transform: rotate(-90.00deg); +} + +.frame .img { + top: 6px; + position: absolute; + left: 1px; + width: 9px; + height: 10px; + transform: rotate(-90.00deg); +} + +.frame .login-frame { + margin-top: 26px; + width: 48px; + height: 32px; + position: relative; + margin-left: 4px; + background-color: #ffffff4c; + border-radius: 12px; + border: 1px solid; + border-color: #667a77; +} + +.frame .icon { + position: absolute; + top: calc(50.00% - 12px); + left: calc(50.00% - 12px); + width: 24px; + height: 24px; +} + + + + +1. background: rgba(117, 121, 124, 0.1); + padding: 14px 0px; + width: 1440px; + height: 84px; +2. logo stays the + + + + + + + + + + + + + + + + + + + + + + +3. after logo 3 btns in same div and without gap + 3.1 "главная" + border: 1px solid #d3dad9; + border-radius: 13px 0 0 13px; + padding: 10px 48px; + width: 187px; + height: 49px; + 3.2 "о нас"border: + 1px solid #d3dad9; + padding: 10px 63px; + width: 188px; + height: 49px; + 3.3 "котакты"border: + 1px solid #d3dad9; + border-radius: 0 13px 13px 0; + padding: 10px 42px; + width: 194px; + height: 49px; + + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); + background: rgba(255, 255, 255, 0.74); + hover: background: #a1b4b5; + active : background: #497671; + + +4. next search btn with place holder "искать..." and on the left fixed svg icon " + + +" + border: 1px solid #d3dad9; +border-radius: 22px; +padding: 6px 10px; +width: 234px; +height: 49px; +box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); +background: rgba(255, 255, 255, 0.74); + + +5. after 3 buttons to the right + 5.1 cart btn + border-radius: 12px; + fill: rgba(255, 255, 255, 0.3); + border: 1px solid #677b78; + + + + + + + + 5.2 lang selector btn style border: 1px solid #677b78; + border-radius: 12px; + padding: 6px; + width: 67px; + height: 32px; + + +HERO + we are goung to have a width wide hero, photos for dekstop and mobile you can see in the same folder + + on it text. here are codes from figma +
+
Здесь ты найдёшь всё
+

Тысячи товаров в одном месте

+
просто и удобно
+
+ + .frame { + display: flex; + flex-direction: column; + width: 639px; + align-items: flex-start; + gap: 18px; + position: relative; +} + +.frame .text-wrapper { + position: relative; + width: 659px; + margin-top: -1.00px; + margin-right: -20.00px; + font-size: 57px; + font-family: "DM Sans-Medium", Helvetica; + font-weight: 500; + color: #1e3c38; + letter-spacing: 0; + line-height: normal; +} + +.frame .div { + position: absolute; + top: 87px; + left: 0; + width: 581px; + font-size: 34px; + font-family: "DM Sans-Medium", Helvetica; + font-weight: 500; + color: #1e3c38; + letter-spacing: 0; + line-height: normal; +} + +.frame .text-wrapper-2 { + position: absolute; + top: 133px; + left: 0; + width: 281px; + font-size: 34px; + font-family: "DM Sans-Medium", Helvetica; + font-weight: 500; + color: #1e3c38; + letter-spacing: 0; + line-height: normal; +} + + + +under the text we have btns.. hovers and actives for all web site are the same as from header + +first +
Перейти в каталог
+ .pereyti-v-katalog { + width: 337px; + height: 60px; + display: flex; + border-radius: 13px; + border: 1px solid; + border-color: #d3dad9; + background: linear-gradient( + 360deg, + rgba(73, 118, 113, 1) 0%, + rgba(167, 206, 202, 1) 100% + ); +} + +.pereyti-v-katalog .text-wrapper { + margin-top: 12px; + width: 269px; + height: 36px; + margin-left: 34px; + position: relative; + font-family: "DM Sans-Medium", Helvetica; + font-weight: 500; + color: #ffffff; + font-size: 27px; + text-align: center; + letter-spacing: 1.08px; + line-height: normal; +} + + +second btn +
+
Найти товар
+
+
+ + .frame { + width: 264px; + height: 60px; + display: flex; + gap: 9.2px; + background-color: #f5f5f5; + border-radius: 13px; + border: 1px solid; + border-color: #d3dad9; +} + +.frame .text-wrapper { + margin-top: 12px; + width: 181px; + height: 36px; + position: relative; + margin-left: 36px; + font-family: "DM Sans-Medium", Helvetica; + font-weight: 500; + color: #1e3c38; + font-size: 27px; + text-align: center; + letter-spacing: 1.08px; + line-height: normal; +} + +.frame .group { + margin-top: 22.0px; + width: 10.62px; + height: 16px; + position: relative; +} + +.frame .line { + top: -1px; + width: 12px; + position: absolute; + left: 1px; + height: 10px; +} + +.frame .img { + top: 7px; + width: 11px; + position: absolute; + left: 1px; + height: 10px; +} \ No newline at end of file diff --git a/public/assets/images/dexar-logo-small.svg b/public/assets/images/dexar-logo-small.svg new file mode 100644 index 0000000..e2a68e3 --- /dev/null +++ b/public/assets/images/dexar-logo-small.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/dexar-logo.svg b/public/assets/images/dexar-logo.svg index 64f136a..93232d4 100644 --- a/public/assets/images/dexar-logo.svg +++ b/public/assets/images/dexar-logo.svg @@ -1 +1 @@ -DEXARMARKET \ No newline at end of file + \ No newline at end of file diff --git a/public/assets/images/hero-bg.png b/public/assets/images/hero-bg.png new file mode 100644 index 0000000..d9f9142 Binary files /dev/null and b/public/assets/images/hero-bg.png differ diff --git a/public/assets/images/hero_background_desktop.webp b/public/assets/images/hero_background_desktop.webp new file mode 100644 index 0000000..d395b05 Binary files /dev/null and b/public/assets/images/hero_background_desktop.webp differ diff --git a/public/assets/images/hero_background_mobile.webp b/public/assets/images/hero_background_mobile.webp new file mode 100644 index 0000000..68dd8a7 Binary files /dev/null and b/public/assets/images/hero_background_mobile.webp differ diff --git a/public/favicon.svg b/public/favicon.svg index 6bf73e1..e2a68e3 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/icons/icon-128x128.png b/public/icons/icon-128x128.png deleted file mode 100644 index 5a9a2cc..0000000 Binary files a/public/icons/icon-128x128.png and /dev/null differ diff --git a/public/icons/icon-144x144.png b/public/icons/icon-144x144.png deleted file mode 100644 index 11702cd..0000000 Binary files a/public/icons/icon-144x144.png and /dev/null differ diff --git a/public/icons/icon-152x152.png b/public/icons/icon-152x152.png deleted file mode 100644 index ff4e06b..0000000 Binary files a/public/icons/icon-152x152.png and /dev/null differ diff --git a/public/icons/icon-192x192.png b/public/icons/icon-192x192.png deleted file mode 100644 index afd36a4..0000000 Binary files a/public/icons/icon-192x192.png and /dev/null differ diff --git a/public/icons/icon-384x384.png b/public/icons/icon-384x384.png deleted file mode 100644 index 613ac79..0000000 Binary files a/public/icons/icon-384x384.png and /dev/null differ diff --git a/public/icons/icon-512x512.png b/public/icons/icon-512x512.png deleted file mode 100644 index 7574990..0000000 Binary files a/public/icons/icon-512x512.png and /dev/null differ diff --git a/public/icons/icon-72x72.png b/public/icons/icon-72x72.png deleted file mode 100644 index 033724e..0000000 Binary files a/public/icons/icon-72x72.png and /dev/null differ diff --git a/public/icons/icon-96x96.png b/public/icons/icon-96x96.png deleted file mode 100644 index 3090dc2..0000000 Binary files a/public/icons/icon-96x96.png and /dev/null differ diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index daf4053..556b586 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -49,48 +49,67 @@ } @else { - -
-
-
-
} diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss index abd4280..9013192 100644 --- a/src/app/components/header/header.component.scss +++ b/src/app/components/header/header.component.scss @@ -449,3 +449,358 @@ font-size: 1.1rem; } } + +// ========== DEXAR REDESIGN 2026 STYLES ========== +.dexar-header { + background: rgba(117, 121, 124, 0.1); + padding: 14px 0; + position: sticky; + top: 0; + z-index: 1000; + backdrop-filter: blur(10px); +} + +.dexar-header-container { + max-width: 1440px; + margin: 0 auto; + padding: 0 56px; + display: flex; + align-items: center; + gap: 57px; + height: 56px; +} + +.dexar-logo { + display: flex; + align-items: center; + text-decoration: none; + flex-shrink: 0; + + ::ng-deep .logo-img { + width: 148px; + height: 48px; + object-fit: contain; + } +} + +// Navigation Buttons Group +.dexar-nav { + display: flex; + flex-shrink: 0; +} + +.dexar-nav-group { + display: flex; + align-items: center; +} + +.dexar-nav-btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 10px 48px; + height: 49px; + border: 1px solid #d3dad9; + background: rgba(255, 255, 255, 0.74); + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 600; + font-size: 22px; + color: #1e3c38; + text-decoration: none; + cursor: pointer; + transition: background 0.3s ease; + white-space: nowrap; + + &:hover { + background: #a1b4b5; + color: #1e3c38; + } + + &.dexar-active { + background: #497671; + color: #ffffff; + } +} + +.dexar-nav-btn-left { + border-radius: 13px 0 0 13px; + padding: 10px 48px; +} + +.dexar-nav-btn-middle { + padding: 10px 63px; + border-left: none; +} + +.dexar-nav-btn-right { + border-radius: 0 13px 13px 0; + padding: 10px 42px; + border-left: none; +} + +// Search Box +.dexar-search-wrapper { + flex: 1; + max-width: 234px; + margin-left: auto; +} + +.dexar-search-box { + position: relative; + width: 100%; + height: 49px; + background: rgba(255, 255, 255, 0.74); + border: 1px solid #d2dad9; + border-radius: 22px; + box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15); + display: flex; + align-items: center; + padding: 0 20px; + gap: 10px; +} + +.dexar-search-icon { + width: 28px; + height: 28px; + flex-shrink: 0; +} + +.dexar-search-input { + flex: 1; + border: none; + background: transparent; + outline: none; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 600; + font-size: 22px; + color: #828e8d; + cursor: pointer; + + &::placeholder { + color: #828e8d; + } +} + +// Actions +.dexar-actions { + display: flex; + align-items: center; + gap: 4px; + flex-shrink: 0; +} + +.dexar-cart-btn { + position: relative; + width: 48px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + cursor: pointer; + transition: opacity 0.3s ease; + + svg { + width: 48px; + height: 32px; + } + + &:hover { + opacity: 0.85; + } + + &.dexar-cart-active { + opacity: 1; + } +} + +.dexar-cart-badge { + position: absolute; + top: -6px; + right: -6px; + background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%); + color: white; + font-weight: 700; + font-size: 0.75rem; + padding: 2px 6px; + border-radius: 10px; + min-width: 18px; + text-align: center; + box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4); + border: 2px solid white; +} + +.dexar-lang-selector { + display: flex; + align-items: center; +} + +.dexar-menu-toggle { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: 8px; + + span { + width: 25px; + height: 3px; + background: #1e3c38; + border-radius: 2px; + transition: all 0.3s; + } + + &.active { + span:nth-child(1) { + transform: rotate(45deg) translate(7px, 4.5px); + } + + span:nth-child(2) { + opacity: 0; + } + + span:nth-child(3) { + transform: rotate(-45deg) translate(7px, -4.5px); + } + } +} + +// Responsive Design +@media (max-width: 1200px) { + .dexar-header-container { + padding: 0 32px; + gap: 32px; + } + + .dexar-nav-btn { + font-size: 18px; + padding: 8px 32px !important; + } + + .dexar-nav-btn-left { + padding: 8px 32px !important; + } + + .dexar-nav-btn-middle { + padding: 8px 40px !important; + } + + .dexar-nav-btn-right { + padding: 8px 28px !important; + } +} + +@media (max-width: 992px) { + .dexar-header-container { + padding: 0 20px; + gap: 20px; + } + + .dexar-logo ::ng-deep .logo-img { + width: 120px; + height: 40px; + } + + .dexar-nav-btn { + font-size: 16px; + padding: 8px 24px !important; + } + + .dexar-nav-btn-left { + padding: 8px 24px !important; + } + + .dexar-nav-btn-middle { + padding: 8px 28px !important; + } + + .dexar-nav-btn-right { + padding: 8px 20px !important; + } + + .dexar-search-box { + height: 42px; + } + + .dexar-search-input { + font-size: 18px; + } +} + +@media (max-width: 768px) { + .dexar-header-container { + gap: 12px; + padding: 0 16px; + } + + .dexar-nav { + position: fixed; + top: 84px; + left: 0; + right: 0; + background: white; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + + &.dexar-nav-open { + max-height: 400px; + } + } + + .dexar-nav-group { + flex-direction: column; + width: 100%; + box-shadow: none; + } + + .dexar-nav-btn { + width: 100%; + border-radius: 0 !important; + border: none; + border-bottom: 1px solid #d3dad9; + padding: 16px !important; + font-size: 18px; + + &:hover { + background: rgba(161, 180, 181, 0.3); + } + } + + .dexar-nav-btn-left, + .dexar-nav-btn-middle, + .dexar-nav-btn-right { + padding: 16px !important; + } + + .dexar-search-wrapper { + flex: 1; + max-width: none; + margin-left: 0; + } + + .dexar-search-box { + height: 40px; + } + + .dexar-search-icon { + width: 20px; + height: 20px; + } + + .dexar-search-input { + font-size: 16px; + } + + .dexar-menu-toggle { + display: flex; + } + + .dexar-logo ::ng-deep .logo-img { + width: 100px; + height: 32px; + } +} diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index f879bde..440f11d 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { RouterLink, RouterLinkActive } from '@angular/router'; +import { Router, RouterLink, RouterLinkActive } from '@angular/router'; import { CartService } from '../../services'; import { environment } from '../../../environments/environment'; import { LogoComponent } from '../logo/logo.component'; @@ -20,7 +20,7 @@ export class HeaderComponent { logo = environment.logo; isnovo = environment.theme === 'novo'; - constructor(private cartService: CartService) { + constructor(private cartService: CartService, private router: Router) { this.cartItemCount = this.cartService.itemCount; } @@ -31,4 +31,8 @@ export class HeaderComponent { closeMenu(): void { this.menuOpen = false; } + + navigateToSearch(): void { + this.router.navigate(['/search']); + } } diff --git a/src/app/components/language-selector/language-selector.component.scss b/src/app/components/language-selector/language-selector.component.scss index b6e9120..a2b8d13 100644 --- a/src/app/components/language-selector/language-selector.component.scss +++ b/src/app/components/language-selector/language-selector.component.scss @@ -152,6 +152,73 @@ } } +// Dexar header specific styles +:host-context(.dexar-header) { + .language-selector { + width: 67px; + height: 32px; + } + + .language-button { + width: 100%; + height: 100%; + padding: 6px; + gap: 8px; + background: rgba(255, 255, 255, 0.3); + border: 1px solid #677b78; + border-radius: 12px; + color: #1e3c38; + justify-content: center; + + &:hover { + background: rgba(255, 255, 255, 0.5); + border-color: #677b78; + } + + .language-flag { + display: none; + } + + .language-code { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 500; + font-size: 24px; + color: #1e3c38; + letter-spacing: 0; + line-height: 1; + } + + .dropdown-arrow { + display: block; + width: 9px; + height: 14px; + opacity: 1; + + path { + stroke: #1e3c38; + } + } + } + + .language-dropdown { + background: #ffffff; + border-color: #d3dad9; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + } + + .language-option { + color: #1e3c38; + + &:hover:not(.disabled) { + background: rgba(161, 180, 181, 0.2); + } + + &.active { + background: rgba(73, 118, 113, 0.1); + } + } +} + // Mobile responsiveness @media (max-width: 768px) { .language-button { @@ -177,4 +244,15 @@ height: 20px; } } + + :host-context(.dexar-header) { + .language-selector { + width: 56px; + height: 28px; + } + + .language-button .language-code { + font-size: 18px; + } + } } diff --git a/src/app/components/logo/logo.component.ts b/src/app/components/logo/logo.component.ts index 17eb7b2..02ae181 100644 --- a/src/app/components/logo/logo.component.ts +++ b/src/app/components/logo/logo.component.ts @@ -4,11 +4,12 @@ import { environment } from '../../../environments/environment'; @Component({ selector: 'app-logo', standalone: true, - template: ``, + template: ``, styles: [` .logo-img { - height: 40px; - width: auto; + width: 100%; + height: 100%; + object-fit: contain; } `] }) diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 4ada73e..a14226b 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -72,55 +72,73 @@ }
} @else { - -
-
-

{{ brandName }}

-

Ваш маркетплейс товаров и услуг

-
+ +
+ +
+
+
+

Здесь ты найдёшь всё

+

Тысячи товаров в одном месте

+

просто и удобно

+ +
+ + Перейти в каталог + + +
+
+
+
@if (loading()) { -
- +
+

Загрузка категорий...

} @if (error()) { -
+

{{ error() }}

- +
} @if (!loading() && !error()) { -
-

Категории

+
+

Категории

@if (getTopLevelCategories().length === 0) { -
-
📦
+
+
📦

Категории пока отсутствуют

Скоро здесь появятся категории товаров

} @else { -
+
@for (category of getTopLevelCategories(); track category.categoryID) { -
- -
- @if (category.icon) { - - } @else { -
{{ category.name }}
- } -
-

{{ category.name }}

- -
- } +
+ +
+ @if (category.icon) { + + } @else { +
{{ category.name }}
+ } +
+

{{ category.name }}

+ +
+ }
}
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss index 0a23c1b..bf16f3c 100644 --- a/src/app/pages/home/home.component.scss +++ b/src/app/pages/home/home.component.scss @@ -701,3 +701,500 @@ transform: translateY(-4px); } } + +// ========== DEXAR REDESIGN 2026 STYLES ========== +.dexar-home { + width: 100%; +} + +// Hero Section +.dexar-hero { + position: relative; + width: 100%; + height: 600px; + background-image: url('/assets/images/hero_background_desktop.webp'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + overflow: hidden; + + // Mobile hero image + @media (max-width: 768px) { + background-image: url('/assets/images/hero_background_mobile.webp'); + } +} + +.dexar-hero-overlay { + position: relative; + width: 100%; + height: 100%; + background: linear-gradient( + to right, + rgba(255, 255, 255, 0.9) 0%, + rgba(255, 255, 255, 0.7) 50%, + rgba(255, 255, 255, 0.3) 100% + ); + display: flex; + align-items: center; + padding: 0 56px; +} + +.dexar-hero-content { + max-width: 660px; + display: flex; + flex-direction: column; + gap: 18px; + animation: fadeInUp 0.8s ease-out; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.dexar-hero-title { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 500; + font-size: 57px; + color: #1e3c38; + line-height: 1.2; + margin: 0; + animation: fadeInUp 0.8s ease-out 0.1s both; +} + +.dexar-hero-subtitle { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 500; + font-size: 34px; + color: #1e3c38; + line-height: 1.3; + margin: 0; + animation: fadeInUp 0.8s ease-out 0.2s both; +} + +.dexar-hero-tagline { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 500; + font-size: 34px; + color: #1e3c38; + line-height: 1.3; + margin: 0; + animation: fadeInUp 0.8s ease-out 0.3s both; +} + +.dexar-hero-actions { + display: flex; + gap: 20px; + margin-top: 20px; + animation: fadeInUp 0.8s ease-out 0.4s both; +} + +.dexar-btn-primary { + display: flex; + align-items: center; + justify-content: center; + width: 337px; + height: 60px; + background: linear-gradient(360deg, #497671 0%, #a7ceca 100%); + border: 1px solid #d3dad9; + border-radius: 13px; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 500; + font-size: 27px; + color: #ffffff; + text-decoration: none; + letter-spacing: 1.08px; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3); + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(73, 118, 113, 0.4); + } + + &:active { + transform: translateY(0px); + box-shadow: 0 2px 8px rgba(73, 118, 113, 0.3); + } +} + +.dexar-btn-secondary { + display: flex; + align-items: center; + justify-content: center; + gap: 9px; + width: 264px; + height: 60px; + background: #f5f5f5; + border: 1px solid #d3dad9; + border-radius: 13px; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 500; + font-size: 27px; + color: #1e3c38; + letter-spacing: 1.08px; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + + svg { + width: 11px; + height: 16px; + transition: transform 0.3s ease; + } + + &:hover { + background: #ffffff; + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); + + svg { + transform: translateX(3px); + } + } + + &:active { + transform: translateY(0px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + } +} + +// Loading & Error States +.dexar-loading, +.dexar-error { + text-align: center; + padding: 60px 20px; + max-width: 1200px; + margin: 0 auto; +} + +.dexar-spinner { + width: 50px; + height: 50px; + border: 4px solid #f3f3f3; + border-top: 4px solid #497671; + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 20px; +} + +.dexar-error { + button { + margin-top: 20px; + padding: 12px 28px; + background: #497671; + color: white; + border: none; + border-radius: 13px; + cursor: pointer; + font-size: 1.1rem; + font-weight: 500; + transition: all 0.3s ease; + + &:hover { + background: #3d635f; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3); + } + } +} + +// Categories Section +.dexar-categories { + max-width: 1200px; + margin: 50px auto; + padding: 0 56px; +} + +.dexar-categories-title { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 2.5rem; + font-weight: 600; + margin-bottom: 40px; + color: #1e3c38; +} + +.dexar-empty-categories { + text-align: center; + padding: 80px 20px; + background: white; + border-radius: 16px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); + + .dexar-empty-icon { + font-size: 4rem; + margin-bottom: 20px; + opacity: 0.5; + } + + h3 { + font-size: 1.8rem; + color: #1e3c38; + margin: 0 0 12px 0; + font-weight: 600; + } + + p { + color: #667a77; + font-size: 1.1rem; + margin: 0; + } +} + +.dexar-categories-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 30px; + animation: fadeIn 0.6s ease-in 0.3s both; +} + +.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%; + 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; + } + + &:hover { + transform: translateY(-8px); + box-shadow: 0 12px 32px rgba(73, 118, 113, 0.2); + + &::before { + transform: scaleX(1); + } + } +} + +.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 { + width: 100%; + height: 200px; + background: #f5f5f5; + border-radius: 12px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + + img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; + } + + &:hover img { + transform: scale(1.05); + } +} + +.dexar-category-fallback { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + font-weight: 700; + color: #497671; + background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%); +} + +// Responsive Design +@media (max-width: 1200px) { + .dexar-hero { + height: 500px; + } + + .dexar-hero-overlay { + padding: 0 40px; + } + + .dexar-hero-title { + font-size: 48px; + } + + .dexar-hero-subtitle, + .dexar-hero-tagline { + font-size: 28px; + } + + .dexar-categories { + padding: 0 40px; + } +} + +@media (max-width: 992px) { + .dexar-hero { + height: 450px; + } + + .dexar-hero-overlay { + padding: 0 32px; + } + + .dexar-hero-title { + font-size: 42px; + } + + .dexar-hero-subtitle, + .dexar-hero-tagline { + font-size: 24px; + } + + .dexar-btn-primary { + width: 280px; + height: 54px; + font-size: 22px; + } + + .dexar-btn-secondary { + width: 220px; + height: 54px; + font-size: 22px; + } + + .dexar-categories { + padding: 0 32px; + } + + .dexar-categories-grid { + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 24px; + } +} + +@media (max-width: 768px) { + .dexar-hero { + height: 400px; + background-position: right center; + } + + .dexar-hero-overlay { + padding: 0 20px; + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.95) 0%, + rgba(255, 255, 255, 0.85) 100% + ); + } + + .dexar-hero-title { + font-size: 36px; + } + + .dexar-hero-subtitle, + .dexar-hero-tagline { + font-size: 20px; + } + + .dexar-hero-actions { + flex-direction: column; + gap: 16px; + width: 100%; + } + + .dexar-btn-primary, + .dexar-btn-secondary { + width: 100%; + max-width: 320px; + height: 50px; + font-size: 20px; + } + + .dexar-categories { + margin: 40px auto; + padding: 0 20px; + } + + .dexar-categories-title { + font-size: 2rem; + margin-bottom: 30px; + } + + .dexar-categories-grid { + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 20px; + } + + .dexar-category-media { + height: 160px; + } +} + +@media (max-width: 480px) { + .dexar-hero { + height: 350px; + } + + .dexar-hero-title { + font-size: 28px; + } + + .dexar-hero-subtitle, + .dexar-hero-tagline { + font-size: 18px; + } + + .dexar-hero-actions { + gap: 12px; + } + + .dexar-btn-primary, + .dexar-btn-secondary { + height: 46px; + font-size: 18px; + } + + .dexar-categories-grid { + grid-template-columns: 1fr; + gap: 16px; + } + + .dexar-category-card:hover { + transform: translateY(-4px); + } +} diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index dad3f0f..0451c90 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, signal, computed, ChangeDetectionStrategy } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { RouterLink } from '@angular/router'; +import { Router, RouterLink } from '@angular/router'; import { ApiService } from '../../services'; import { Category } from '../../models'; import { environment } from '../../../environments/environment'; @@ -40,7 +40,7 @@ export class HomeComponent implements OnInit { return cache; }); - constructor(private apiService: ApiService) {} + constructor(private apiService: ApiService, private router: Router) {} ngOnInit(): void { this.loadCategories(); @@ -68,4 +68,8 @@ export class HomeComponent implements OnInit { getSubCategories(parentID: number): Category[] { return this.subcategoriesCache().get(parentID) || []; } + + navigateToSearch(): void { + this.router.navigate(['/search']); + } } diff --git a/src/styles.scss b/src/styles.scss index c508e28..6ffd166 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -3,6 +3,9 @@ /* PrimeNG and PrimeIcons */ @import 'primeicons/primeicons.css'; +/* Google Fonts - DM Sans for Dexar redesign */ +@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap'); + /* Font optimization */ @font-face { font-family: system-ui; diff --git a/src/styles/themes/dexar.theme.scss b/src/styles/themes/dexar.theme.scss index 3e404f3..668c6cf 100644 --- a/src/styles/themes/dexar.theme.scss +++ b/src/styles/themes/dexar.theme.scss @@ -1,36 +1,38 @@ -// Dexar Theme - Purple/Violet Colors +// Dexar Theme - Redesigned 2026 - Green/Teal Colors :root { - --primary-color: #667eea; - --primary-hover: #5568d3; - --secondary-color: #764ba2; - --secondary-hover: #653a8e; - --accent-color: #f093fb; - --accent-hover: #e07ff0; + --primary-color: #497671; + --primary-hover: #3d635f; + --secondary-color: #a1b4b5; + --secondary-hover: #8da3a4; + --accent-color: #a7ceca; + --accent-hover: #91b9b5; - --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); - --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + --gradient-primary: linear-gradient(360deg, #497671 0%, #a7ceca 100%); + --gradient-secondary: linear-gradient(135deg, #a1b4b5 0%, #677b78 100%); + --gradient-hero: linear-gradient(360deg, #497671 0%, #a7ceca 100%); - --text-primary: #333333; - --text-secondary: #666666; - --text-light: #999999; + --text-primary: #1e3c38; + --text-secondary: #667a77; + --text-light: #828e8d; --bg-primary: #ffffff; - --bg-secondary: #f6f7fb; - --bg-tertiary: #e9ecf5; + --bg-secondary: rgba(255, 255, 255, 0.74); + --bg-tertiary: #f5f5f5; + --bg-header: rgba(117, 121, 124, 0.1); --success-color: #10b981; --warning-color: #f59e0b; --error-color: #ef4444; --info-color: #3b82f6; - --border-color: #e5e7eb; + --border-color: #d3dad9; + --border-dark: #677b78; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); - --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08); - --shadow-lg: 0 12px 40px rgba(102, 126, 234, 0.25); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); + --shadow-lg: 0 12px 32px rgba(73, 118, 113, 0.2); --radius-sm: 8px; --radius-md: 12px; - --radius-lg: 16px; - --radius-xl: 20px; + --radius-lg: 13px; + --radius-xl: 22px; }