changed header and hero img
This commit is contained in:
sdarbinyan
BIN
files/Obuv.webp
Normal file
BIN
files/Obuv.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
500
files/changes.txt
Normal file
500
files/changes.txt
Normal file
@@ -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:
|
||||
<div class="frame">
|
||||
<img class="group" src="img/group-2.png" />
|
||||
<div class="div">
|
||||
<div class="div-wrapper"><div class="text-wrapper">Главная</div></div>
|
||||
<div class="div-wrapper-2"><div class="text-wrapper">О нас</div></div>
|
||||
<div class="div-wrapper-3"><div class="text-wrapper-2">Контакты</div></div>
|
||||
</div>
|
||||
<div class="frame-wrapper">
|
||||
<div class="div-2">
|
||||
<div class="text-wrapper-3">Искать...</div>
|
||||
<img class="icn" src="img/icn-05.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="korzina-frame"><img class="cart" src="img/cart.svg" /></div>
|
||||
<div class="RU-frame">
|
||||
<div class="text-wrapper-4">RU</div>
|
||||
<div class="group-2"><img class="line" src="img/line-2.svg" /> <img class="img" src="img/line-3.svg" /></div>
|
||||
</div>
|
||||
<div class="login-frame"><img class="icon" src="img/icon.svg" /></div>
|
||||
</div>
|
||||
|
||||
.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
|
||||
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="_Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 308.43 100.53">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #477470;
|
||||
stroke-width: 0px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="cls-1" d="m101.66,15.71c-4.16-.3-8.34-.35-12.51-.46-3.85-.1-7.69-.15-11.54-.21-9.14-.15-18.29-.32-27.44-.44-7.84-.11-15.68-.18-23.53-.21-.83,0-1.17-.3-1.33-1.01-.81-3.51-1.64-7.02-2.44-10.53-.31-1.33-1.42-2.36-2.68-2.41-1.59-.07-3.18-.17-4.77-.21C11.37.13,7.31.06,3.25,0,1.27-.03,0,1.13,0,2.92c0,1.78,1.38,3.14,3.26,3.17,4.28.08,8.56.17,12.84.2.89,0,1.34.26,1.56,1.17,1.2,4.99,2.47,9.95,3.69,14.93,2.3,9.38,4.58,18.77,6.88,28.15,1.11,4.54,2.21,9.07,3.36,13.6.28,1.11.15,1.73-1.02,2.31-3.76,1.85-5.33,5.91-4.45,9.93.91,4.11,4.58,6.95,9.07,7.02.46,0,.92,0,1.38,0-2.97,1.75-4.68,4.13-4.95,7.42-.27,3.32,1.42,5.8,3.95,7.96-4.85.74-6.27.75-9.41,1.23.8.23,1.31.11,1.98.12,4.46.05,8.92.17,13.37.01,4.94-.17,8.86-5.16,7.57-10.63-.63-2.66-2.21-4.7-5.04-5.9h39.73c-2.87,1.74-4.53,4.14-4.85,7.36-.32,3.29,1.08,5.9,3.89,8.11-9.01.38-17.71.47-26.34,1.09l30.02.35c1.84-.07,3.73.03,5.49-.97,4.82-2.75,6.23-8.3,3.26-12.73-.84-1.26-2.17-2.19-3.21-3.2,1.3,0,2.83.03,4.35,0,1.66-.04,2.81-1.34,2.78-3.08-.02-1.56-1.25-2.77-2.82-2.79-6.68-.07-13.36-.18-20.04-.2-9.37-.04-18.74-.01-28.11-.02-4.25,0-8.5,0-12.75,0-2.17,0-3.72-1.47-3.62-3.37.09-1.79,1.73-3.16,3.83-3.15,8.39.04,16.77.1,25.16.13,8.61.04,17.21.06,25.82.07.97,0,1.94-.09,2.9-.21,3.83-.52,6.67-3.16,7.69-6.89,1.84-6.75,3.76-13.47,5.65-20.21,1.36-4.84,2.79-9.66,4.08-14.52.59-2.2,1.13-4.45,1.32-6.7.29-3.53-2.89-6.7-6.6-6.96Zm-13.8,71.86c2.2-.07,4.11,1.95,4.1,4.15-.18,2.67-1.84,3.97-4.24,4.07-2.17.08-4.06-1.98-4.03-4.18.03-2.3,1.72-3.96,4.17-4.04Zm-47.43-.03c2.45-.06,4.19,1.8,4.15,4.03-.05,2.63-2.02,3.98-4.06,4.02-2.23.04-4.05-1.86-4.15-4.07-.1-2.22,2.05-4.07,4.06-3.98Zm30.45-67.01v12.33c-1.89,0-3.69.02-5.48,0-3.15-.05-6.3-.18-9.45-.18-.98,0-1.2-.35-1.27-1.24-.22-2.76-.55-5.5-.82-8.25-.09-.93-.15-1.86-.21-2.66h17.23Zm-.14,17.64v12.64c-4.47,0-8.88.02-13.29-.04-.26,0-.71-.63-.75-1.01-.35-3.18-.62-6.37-.91-9.55,0-.04,0-.07,0-.11-.15-1.98-.15-1.95,1.83-1.94,4.35.02,8.69,0,13.13,0Zm-41.31-8.1c-.62-2.71-1.26-5.41-1.88-8.12-.15-.65-.27-1.32-.43-2.1,7.05.12,13.97.24,21.04.37.41,4.15.81,8.23,1.19,12.14-5.73,0-11.3,0-16.87,0-.11,0-.22-.02-.32-.03-2.25-.14-2.24-.14-2.73-2.26Zm5.02,20.67c-1.01-4.24-2.02-8.49-3.03-12.7h18.64c.47,4.3.93,8.46,1.39,12.7h-17.01Zm57.74,8.57c-.3,1.1-.54,2.23-.89,3.31-.51,1.58-1.87,2.54-3.47,2.54-16.08-.01-32.17-.04-48.25,0-1.26,0-1.71-.36-1.95-1.57-.44-2.27-1.1-4.5-1.65-6.75-.04-.17,0-.35,0-.67,18.95.13,37.85.26,56.99.39-.29,1.03-.53,1.89-.77,2.76Zm4.75-16.54c-.7,2.51-1.41,5.02-2.17,7.51-.09.29-.56.65-.85.65-5.59.04-11.18.04-16.77,0-.29,0-.83-.42-.84-.64-.05-3.87-.04-7.75-.04-11.6h21.71c-.38,1.5-.69,2.8-1.05,4.08Zm5.38-19.31c-.83,2.95-1.7,5.89-2.49,8.85-.19.73-.47,1.01-1.23.99-6.45-.16-12.91-.28-19.36-.41-.94-.02-1.88,0-2.97,0,0-3.91.01-7.67,0-11.43,0-.76.45-.78,1-.77,2.83.08,5.65.17,8.48.22,4.93.09,9.86.15,14.79.22,1.49.02,2.18.94,1.78,2.34Z"/>
|
||||
<path class="cls-1" d="m299.48,39.67c.17-.09.36-.18.54-.28,3.09-1.58,5.27-3.86,5.99-7.4.42-2.08.51-4.14.17-6.22-.51-3.09-1.95-5.6-4.74-7.19-2.92-1.67-6.16-2.13-9.43-2.22-4.54-.13-9.08-.02-13.62-.04-.68,0-.98.18-.98.92.02,11.58.02,23.15,0,34.73,0,.72.26.96.96.95,1.71-.03,3.41-.03,5.12.02.85.03,1.15-.26,1.14-1.12-.04-3.23-.02-6.46-.02-9.69v-1.18c2.28,0,4.38.04,6.48-.02.77-.02,1.18.27,1.57.87,1.95,3.04,4,6.02,5.85,9.11.89,1.49,1.85,2.24,3.68,2.06,1.95-.2,3.94-.04,6.23-.04-3.09-4.57-6.01-8.89-8.95-13.25Zm-.65-8.49c-.41,1.92-1.85,2.99-3.63,3.16-3.3.31-6.64.33-9.96.42-.2,0-.59-.48-.59-.74-.04-3.81-.03-7.61-.03-11.8,3.68.22,7.25.24,10.77.71,2.49.33,3.8,2.22,3.81,4.75,0,1.17-.13,2.36-.37,3.51Z"/>
|
||||
<path class="cls-1" d="m160.88,43.32c2.31-4.64,2.45-9.55,1.34-14.5-.78-3.47-2.57-6.41-5.35-8.65-3.79-3.05-8.3-4.12-13.04-4.26-3.99-.11-7.99.01-11.98-.05-1.08-.02-1.33.33-1.33,1.36.03,11.35.02,22.71.02,34.06v1.2c3.27,0,6.38.06,9.5-.02,2.92-.07,5.87-.03,8.73-.48,5.42-.85,9.62-3.66,12.11-8.67Zm-5.96-4c-1.11,3.56-4.21,6.16-7.89,6.59-2.68.32-5.41.24-8.12.41-.96.06-1.17-.33-1.16-1.19.03-3.66.01-7.32.01-10.99.02,0,.03,0,.05,0,0-3.7-.01-7.4.02-11.09,0-.28.34-.81.52-.81,3.16.01,6.35-.32,9.47.56,4.39,1.24,6.86,4.16,7.57,8.62.43,2.66.34,5.3-.47,7.88Z"/>
|
||||
<path class="cls-1" d="m176.08,37.91c0-.65.38-.66.86-.65,3.92.06,7.84.12,11.76.16,1.36.02,2.72,0,4.17,0,0-1.95-.04-3.62.02-5.28.03-.84-.28-1.03-1.07-1.02-4.83.03-9.66.02-14.49.02h-1.27c0-2.91-.01-5.7.03-8.48,0-.17.43-.48.66-.48,5.15-.02,10.31-.01,15.46-.01.47,0,.94-.05,1.42-.03.73.04,1.03-.22,1-1-.06-1.27-.07-2.54,0-3.81.06-.94-.22-1.25-1.2-1.24-7.04.03-14.09,0-21.13,0-1.11,0-2.22,0-3.31,0v36.58h25.96v-6.21h-18.86c0-2.98,0-5.76,0-8.55Z"/>
|
||||
<path class="cls-1" d="m265.06,35c-2.49-6.04-4.99-12.08-7.52-18.1-.12-.28-.65-.53-1-.54-1.92-.05-3.85,0-5.77-.04-.7-.02-1,.27-1.26.89-2.73,6.57-5.49,13.12-8.23,19.68-2.17,5.21-4.32,10.42-6.61,15.95,2.43,0,4.65.03,6.86-.04.34-.01.81-.44.96-.79.93-2.17,1.76-4.38,2.69-6.55.15-.34.61-.79.93-.79,4.94.01,9.87.11,14.81.13.67,0,.84.31,1.04.81.86,2.16,1.73,4.31,2.63,6.45.11.26.38.65.59.65,2.34.05,4.68.03,7.12.03-.11-.33-.19-.63-.31-.91-2.3-5.62-4.6-11.23-6.91-16.84Zm-17.29,3.48c1.91-4.7,3.81-9.35,5.79-14.21,1.96,4.85,3.84,9.48,5.76,14.21h-11.54Z"/>
|
||||
<path class="cls-1" d="m225.35,52.65c2.59.09,5.19.05,7.88.05-.08-.32-.09-.51-.18-.64-1.34-1.94-2.7-3.86-4.04-5.8-2.54-3.68-5.05-7.38-7.59-11.06-.54-.78-.8-1.41-.12-2.37,2.6-3.69,5.06-7.47,7.59-11.21,1.18-1.74,2.4-3.46,3.72-5.35-.47-.07-.71-.13-.95-.13-2.11,0-4.21-.06-6.32.03-.52.02-1.21.36-1.51.77-1.3,1.77-2.49,3.62-3.72,5.43-1.3,1.92-2.61,3.85-3.96,5.84-.26-.31-.43-.49-.57-.7-2.13-3.22-4.31-6.4-6.36-9.67-.79-1.26-1.63-1.88-3.2-1.76-2.04.17-4.09.04-6.28.04.14.36.18.57.29.73,3.71,5.4,7.42,10.8,11.15,16.19.43.62.42,1.09-.02,1.72-3.29,4.7-6.54,9.42-9.8,14.14-.83,1.21-1.63,2.45-2.53,3.81,2.74,0,5.24.02,7.74-.02.31,0,.73-.26.92-.53,2.4-3.49,4.77-7,7.15-10.51.45-.67.9-1.34,1.38-2.05,2.79,4.08,5.5,8.05,8.23,12,.29.42.72,1.05,1.1,1.06Z"/>
|
||||
<path class="cls-1" d="m141.52,77.32l-1.21,2.83h-.11l-1.21-2.83-3.33-7.36h-3.58v14.94h2.99v-6.83c0-1.39-.25-3.38-.4-4.75h.11l1.47,3.4,3.19,6.78h1.5l3.19-6.78,1.5-3.4h.11c-.17,1.37-.42,3.36-.42,4.75v6.83h3.08v-14.94h-3.61l-3.24,7.36Z"/>
|
||||
<path class="cls-1" d="m162.26,69.96l-6.04,14.94h3.36l1.44-4.04h6.18l1.44,4.04h3.47l-6.01-14.94h-3.84Zm-.51,8.82l.65-1.83c.59-1.58,1.13-3.27,1.64-4.93h.11c.54,1.64,1.1,3.36,1.66,4.93l.65,1.83h-4.71Z"/>
|
||||
<path class="cls-1" d="m192.96,74.39c0-3.34-2.96-4.43-6.8-4.43h-6.21v14.94h3.27v-5.85h2.79l3.98,5.85h3.67l-4.4-6.24c2.23-.62,3.7-1.99,3.7-4.27Zm-7.14,2.56h-2.6v-4.87h2.6c2.54,0,3.89.59,3.89,2.31s-1.35,2.56-3.89,2.56Z"/>
|
||||
<polygon class="cls-1" points="215.96 69.96 212.34 69.96 205.77 76.75 205.69 76.75 205.69 69.96 202.41 69.96 202.41 84.9 205.69 84.9 205.69 80.54 208.34 77.87 213.3 84.9 216.92 84.9 210.29 75.79 215.96 69.96"/>
|
||||
<polygon class="cls-1" points="228.09 78.25 234.72 78.25 234.72 76.01 228.09 76.01 228.09 72.2 235.9 72.2 235.9 69.96 224.82 69.96 224.82 84.9 236.19 84.9 236.19 82.66 228.09 82.66 228.09 78.25"/>
|
||||
<polygon class="cls-1" points="243.92 72.2 249.25 72.2 249.25 84.9 252.52 84.9 252.52 72.2 257.83 72.2 257.83 69.96 243.92 69.96 243.92 72.2"/>
|
||||
</svg>
|
||||
|
||||
|
||||
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 "<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#576463" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#576463" />
|
||||
</svg>"
|
||||
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;
|
||||
|
||||
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" fill="white" fill-opacity="0.3" />
|
||||
<path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" stroke="#677B78" />
|
||||
<path d="M10 3.9C10 3.40294 10.4029 3 10.9 3H13.6C14.013 3 14.373 3.28107 14.4731 3.68172L15.2027 6.6H36.1C36.3677 6.6 36.6216 6.7192 36.7925 6.92523C36.9635 7.13125 37.0339 7.40271 36.9846 7.66586L34.2846 22.0659C34.2048 22.4915 33.8331 22.8 33.4 22.8H31.6H19H17.2C16.7669 22.8 16.3952 22.4915 16.3154 22.0659L13.6204 7.69224L12.8973 4.8H10.9C10.4029 4.8 10 4.39706 10 3.9ZM15.5844 8.4L17.9469 21H32.6531L35.0156 8.4H15.5844ZM19 22.8C17.0118 22.8 15.4 24.4118 15.4 26.4C15.4 28.3882 17.0118 30 19 30C20.9882 30 22.6 28.3882 22.6 26.4C22.6 24.4118 20.9882 22.8 19 22.8ZM31.6 22.8C29.6118 22.8 28 24.4118 28 26.4C28 28.3882 29.6118 30 31.6 30C33.5882 30 35.2 28.3882 35.2 26.4C35.2 24.4118 33.5882 22.8 31.6 22.8ZM19 24.6C19.9941 24.6 20.8 25.4059 20.8 26.4C20.8 27.3941 19.9941 28.2 19 28.2C18.0059 28.2 17.2 27.3941 17.2 26.4C17.2 25.4059 18.0059 24.6 19 24.6ZM31.6 24.6C32.5941 24.6 33.4 25.4059 33.4 26.4C33.4 27.3941 32.5941 28.2 31.6 28.2C30.6059 28.2 29.8 27.3941 29.8 26.4C29.8 25.4059 30.6059 24.6 31.6 24.6Z" fill="#1E3C38" />
|
||||
</svg>
|
||||
|
||||
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
|
||||
<div class="frame">
|
||||
<div class="text-wrapper">Здесь ты найдёшь всё</div>
|
||||
<p class="div">Тысячи товаров в одном месте</p>
|
||||
<div class="text-wrapper-2">просто и удобно</div>
|
||||
</div>
|
||||
|
||||
.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
|
||||
<div class="pereyti-v-katalog"><div class="text-wrapper">Перейти в каталог</div></div>
|
||||
.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
|
||||
<div class="frame">
|
||||
<div class="text-wrapper">Найти товар</div>
|
||||
<div class="group"><img class="line" src="img/line-2.svg" /> <img class="img" src="img/line-3.svg" /></div>
|
||||
</div>
|
||||
|
||||
.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;
|
||||
}
|
||||
1
public/assets/images/dexar-logo-small.svg
Normal file
1
public/assets/images/dexar-logo-small.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.43 100.53"><path d="M101.66 15.71c-4.16-.3-8.34-.35-12.51-.46-3.85-.1-7.69-.15-11.54-.21-9.14-.15-18.29-.32-27.44-.44-7.84-.11-15.68-.18-23.53-.21-.83 0-1.17-.3-1.33-1.01-.81-3.51-1.64-7.02-2.44-10.53-.31-1.33-1.42-2.36-2.68-2.41C18.6.37 17.01.27 15.42.23 11.37.13 7.31.06 3.25 0 1.27-.03 0 1.13 0 2.92 0 4.7 1.38 6.06 3.26 6.09c4.28.08 8.56.17 12.84.2.89 0 1.34.26 1.56 1.17 1.2 4.99 2.47 9.95 3.69 14.93 2.3 9.38 4.58 18.77 6.88 28.15 1.11 4.54 2.21 9.07 3.36 13.6.28 1.11.15 1.73-1.02 2.31-3.76 1.85-5.33 5.91-4.45 9.93.91 4.11 4.58 6.95 9.07 7.02h1.38c-2.97 1.75-4.68 4.13-4.95 7.42-.27 3.32 1.42 5.8 3.95 7.96-4.85.74-6.27.75-9.41 1.23.8.23 1.31.11 1.98.12 4.46.05 8.92.17 13.37.01 4.94-.17 8.86-5.16 7.57-10.63-.63-2.66-2.21-4.7-5.04-5.9h39.73c-2.87 1.74-4.53 4.14-4.85 7.36-.32 3.29 1.08 5.9 3.89 8.11-9.01.38-17.71.47-26.34 1.09l30.02.35c1.84-.07 3.73.03 5.49-.97 4.82-2.75 6.23-8.3 3.26-12.73-.84-1.26-2.17-2.19-3.21-3.2 1.3 0 2.83.03 4.35 0 1.66-.04 2.81-1.34 2.78-3.08-.02-1.56-1.25-2.77-2.82-2.79-6.68-.07-13.36-.18-20.04-.2-9.37-.04-18.74-.01-28.11-.02H35.44c-2.17 0-3.72-1.47-3.62-3.37.09-1.79 1.73-3.16 3.83-3.15 8.39.04 16.77.1 25.16.13 8.61.04 17.21.06 25.82.07.97 0 1.94-.09 2.9-.21 3.83-.52 6.67-3.16 7.69-6.89 1.84-6.75 3.76-13.47 5.65-20.21 1.36-4.84 2.79-9.66 4.08-14.52.59-2.2 1.13-4.45 1.32-6.7.29-3.53-2.89-6.7-6.6-6.96Zm-13.8 71.86c2.2-.07 4.11 1.95 4.1 4.15-.18 2.67-1.84 3.97-4.24 4.07-2.17.08-4.06-1.98-4.03-4.18.03-2.3 1.72-3.96 4.17-4.04m-47.43-.03c2.45-.06 4.19 1.8 4.15 4.03-.05 2.63-2.02 3.98-4.06 4.02-2.23.04-4.05-1.86-4.15-4.07-.1-2.22 2.05-4.07 4.06-3.98m30.45-67.01v12.33c-1.89 0-3.69.02-5.48 0-3.15-.05-6.3-.18-9.45-.18-.98 0-1.2-.35-1.27-1.24-.22-2.76-.55-5.5-.82-8.25-.09-.93-.15-1.86-.21-2.66zm-.14 17.64v12.64c-4.47 0-8.88.02-13.29-.04-.26 0-.71-.63-.75-1.01-.35-3.18-.62-6.37-.91-9.55v-.11c-.15-1.98-.15-1.95 1.83-1.94 4.35.02 8.69 0 13.13 0Zm-41.31-8.1c-.62-2.71-1.26-5.41-1.88-8.12-.15-.65-.27-1.32-.43-2.1 7.05.12 13.97.24 21.04.37.41 4.15.81 8.23 1.19 12.14H32.48c-.11 0-.22-.02-.32-.03-2.25-.14-2.24-.14-2.73-2.26m5.02 20.67c-1.01-4.24-2.02-8.49-3.03-12.7h18.64c.47 4.3.93 8.46 1.39 12.7H34.44Zm57.74 8.57c-.3 1.1-.54 2.23-.89 3.31-.51 1.58-1.87 2.54-3.47 2.54-16.08-.01-32.17-.04-48.25 0-1.26 0-1.71-.36-1.95-1.57-.44-2.27-1.1-4.5-1.65-6.75-.04-.17 0-.35 0-.67l56.99.39c-.29 1.03-.53 1.89-.77 2.76Zm4.75-16.54c-.7 2.51-1.41 5.02-2.17 7.51-.09.29-.56.65-.85.65q-8.385.06-16.77 0c-.29 0-.83-.42-.84-.64-.05-3.87-.04-7.75-.04-11.6h21.71c-.38 1.5-.69 2.8-1.05 4.08Zm5.38-19.31c-.83 2.95-1.7 5.89-2.49 8.85-.19.73-.47 1.01-1.23.99-6.45-.16-12.91-.28-19.36-.41-.94-.02-1.88 0-2.97 0 0-3.91.01-7.67 0-11.43 0-.76.45-.78 1-.77 2.83.08 5.65.17 8.48.22 4.93.09 9.86.15 14.79.22 1.49.02 2.18.94 1.78 2.34Z" style="fill:#477470;stroke-width:0"/></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 727 B After Width: | Height: | Size: 6.3 KiB |
BIN
public/assets/images/hero-bg.png
Normal file
BIN
public/assets/images/hero-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
public/assets/images/hero_background_desktop.webp
Normal file
BIN
public/assets/images/hero_background_desktop.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
public/assets/images/hero_background_mobile.webp
Normal file
BIN
public/assets/images/hero_background_mobile.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="a" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#667eea;stop-opacity:1"/><stop offset="100%" style="stop-color:#764ba2;stop-opacity:1"/></linearGradient></defs><path d="m20 35-5 50q0 10 10 10h50q10 0 10-10l-5-50Z" fill="url(#a)" stroke="#4a5cd6" stroke-width="2"/><path d="M30 35q0-20 20-20t20 20" fill="none" stroke="#4a5cd6" stroke-width="3" stroke-linecap="round"/><circle cx="70" cy="25" r="4" fill="gold"/><circle cx="30" cy="70" r="3" fill="#fff" opacity=".7"/></svg>
|
||||
<svg data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.43 100.53"><path d="M101.66 15.71c-4.16-.3-8.34-.35-12.51-.46-3.85-.1-7.69-.15-11.54-.21-9.14-.15-18.29-.32-27.44-.44-7.84-.11-15.68-.18-23.53-.21-.83 0-1.17-.3-1.33-1.01-.81-3.51-1.64-7.02-2.44-10.53-.31-1.33-1.42-2.36-2.68-2.41C18.6.37 17.01.27 15.42.23 11.37.13 7.31.06 3.25 0 1.27-.03 0 1.13 0 2.92 0 4.7 1.38 6.06 3.26 6.09c4.28.08 8.56.17 12.84.2.89 0 1.34.26 1.56 1.17 1.2 4.99 2.47 9.95 3.69 14.93 2.3 9.38 4.58 18.77 6.88 28.15 1.11 4.54 2.21 9.07 3.36 13.6.28 1.11.15 1.73-1.02 2.31-3.76 1.85-5.33 5.91-4.45 9.93.91 4.11 4.58 6.95 9.07 7.02h1.38c-2.97 1.75-4.68 4.13-4.95 7.42-.27 3.32 1.42 5.8 3.95 7.96-4.85.74-6.27.75-9.41 1.23.8.23 1.31.11 1.98.12 4.46.05 8.92.17 13.37.01 4.94-.17 8.86-5.16 7.57-10.63-.63-2.66-2.21-4.7-5.04-5.9h39.73c-2.87 1.74-4.53 4.14-4.85 7.36-.32 3.29 1.08 5.9 3.89 8.11-9.01.38-17.71.47-26.34 1.09l30.02.35c1.84-.07 3.73.03 5.49-.97 4.82-2.75 6.23-8.3 3.26-12.73-.84-1.26-2.17-2.19-3.21-3.2 1.3 0 2.83.03 4.35 0 1.66-.04 2.81-1.34 2.78-3.08-.02-1.56-1.25-2.77-2.82-2.79-6.68-.07-13.36-.18-20.04-.2-9.37-.04-18.74-.01-28.11-.02H35.44c-2.17 0-3.72-1.47-3.62-3.37.09-1.79 1.73-3.16 3.83-3.15 8.39.04 16.77.1 25.16.13 8.61.04 17.21.06 25.82.07.97 0 1.94-.09 2.9-.21 3.83-.52 6.67-3.16 7.69-6.89 1.84-6.75 3.76-13.47 5.65-20.21 1.36-4.84 2.79-9.66 4.08-14.52.59-2.2 1.13-4.45 1.32-6.7.29-3.53-2.89-6.7-6.6-6.96Zm-13.8 71.86c2.2-.07 4.11 1.95 4.1 4.15-.18 2.67-1.84 3.97-4.24 4.07-2.17.08-4.06-1.98-4.03-4.18.03-2.3 1.72-3.96 4.17-4.04m-47.43-.03c2.45-.06 4.19 1.8 4.15 4.03-.05 2.63-2.02 3.98-4.06 4.02-2.23.04-4.05-1.86-4.15-4.07-.1-2.22 2.05-4.07 4.06-3.98m30.45-67.01v12.33c-1.89 0-3.69.02-5.48 0-3.15-.05-6.3-.18-9.45-.18-.98 0-1.2-.35-1.27-1.24-.22-2.76-.55-5.5-.82-8.25-.09-.93-.15-1.86-.21-2.66zm-.14 17.64v12.64c-4.47 0-8.88.02-13.29-.04-.26 0-.71-.63-.75-1.01-.35-3.18-.62-6.37-.91-9.55v-.11c-.15-1.98-.15-1.95 1.83-1.94 4.35.02 8.69 0 13.13 0Zm-41.31-8.1c-.62-2.71-1.26-5.41-1.88-8.12-.15-.65-.27-1.32-.43-2.1 7.05.12 13.97.24 21.04.37.41 4.15.81 8.23 1.19 12.14H32.48c-.11 0-.22-.02-.32-.03-2.25-.14-2.24-.14-2.73-2.26m5.02 20.67c-1.01-4.24-2.02-8.49-3.03-12.7h18.64c.47 4.3.93 8.46 1.39 12.7H34.44Zm57.74 8.57c-.3 1.1-.54 2.23-.89 3.31-.51 1.58-1.87 2.54-3.47 2.54-16.08-.01-32.17-.04-48.25 0-1.26 0-1.71-.36-1.95-1.57-.44-2.27-1.1-4.5-1.65-6.75-.04-.17 0-.35 0-.67l56.99.39c-.29 1.03-.53 1.89-.77 2.76Zm4.75-16.54c-.7 2.51-1.41 5.02-2.17 7.51-.09.29-.56.65-.85.65q-8.385.06-16.77 0c-.29 0-.83-.42-.84-.64-.05-3.87-.04-7.75-.04-11.6h21.71c-.38 1.5-.69 2.8-1.05 4.08Zm5.38-19.31c-.83 2.95-1.7 5.89-2.49 8.85-.19.73-.47 1.01-1.23.99-6.45-.16-12.91-.28-19.36-.41-.94-.02-1.88 0-2.97 0 0-3.91.01-7.67 0-11.43 0-.76.45-.78 1-.77 2.83.08 5.65.17 8.48.22 4.93.09 9.86.15 14.79.22 1.49.02 2.18.94 1.78 2.34Z" style="fill:#477470;stroke-width:0"/></svg>
|
||||
|
Before Width: | Height: | Size: 588 B After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
@@ -49,48 +49,67 @@
|
||||
</div>
|
||||
</header>
|
||||
} @else {
|
||||
<!-- DEXAR VERSION - Original -->
|
||||
<header class="header">
|
||||
<div class="header-container">
|
||||
<a routerLink="/" class="logo" (click)="closeMenu()">
|
||||
<!-- DEXAR VERSION - Redesigned 2026 -->
|
||||
<header class="dexar-header">
|
||||
<div class="dexar-header-container">
|
||||
<!-- Logo -->
|
||||
<a routerLink="/" class="dexar-logo" (click)="closeMenu()">
|
||||
<app-logo />
|
||||
<!-- <span class="logo-text">{{ brandName }}</span> -->
|
||||
</a>
|
||||
|
||||
<nav class="nav" [class.nav-open]="menuOpen">
|
||||
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" (click)="closeMenu()">
|
||||
<span class="nav-icon">🏠</span>
|
||||
<span class="nav-text">Главная</span>
|
||||
<!-- Navigation Buttons -->
|
||||
<nav class="dexar-nav" [class.dexar-nav-open]="menuOpen">
|
||||
<div class="dexar-nav-group">
|
||||
<a routerLink="/" routerLinkActive="dexar-active" [routerLinkActiveOptions]="{exact: true}"
|
||||
(click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-left">
|
||||
Главная
|
||||
</a>
|
||||
<a routerLink="/search" routerLinkActive="active" (click)="closeMenu()">
|
||||
<span class="nav-icon">🔍</span>
|
||||
<span class="nav-text">Поиск</span>
|
||||
<a routerLink="/about" (click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-middle">
|
||||
О нас
|
||||
</a>
|
||||
<a routerLink="/cart" routerLinkActive="active" class="cart-link" (click)="closeMenu()">
|
||||
<span class="nav-icon">🛒</span>
|
||||
<span class="nav-text">Корзина</span>
|
||||
@if (cartItemCount() > 0) {
|
||||
<span class="cart-badge">{{ cartItemCount() }}</span>
|
||||
}
|
||||
<a routerLink="/contacts" (click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-right">
|
||||
Контакты
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<a routerLink="/cart" routerLinkActive="active" class="cart-link-mobile" (click)="closeMenu()">
|
||||
<span class="cart-icon">🛒</span>
|
||||
<!-- Search Box -->
|
||||
<div class="dexar-search-wrapper">
|
||||
<div class="dexar-search-box">
|
||||
<svg class="dexar-search-icon" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#576463" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#576463" />
|
||||
</svg>
|
||||
<input type="text" placeholder="Искать..." class="dexar-search-input" (click)="navigateToSearch()" readonly />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Actions -->
|
||||
<div class="dexar-actions">
|
||||
<!-- Cart Button -->
|
||||
<a routerLink="/cart" routerLinkActive="dexar-cart-active" class="dexar-cart-btn" (click)="closeMenu()">
|
||||
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" fill="#497671" fill-opacity="0.3" />
|
||||
<path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" stroke="#677B78" />
|
||||
<path d="M10 3.9C10 3.40294 10.4029 3 10.9 3H13.6C14.013 3 14.373 3.28107 14.4731 3.68172L15.2027 6.6H36.1C36.3677 6.6 36.6216 6.7192 36.7925 6.92523C36.9635 7.13125 37.0339 7.40271 36.9846 7.66586L34.2846 22.0659C34.2048 22.4915 33.8331 22.8 33.4 22.8H31.6H19H17.2C16.7669 22.8 16.3952 22.4915 16.3154 22.0659L13.6204 7.69224L12.8973 4.8H10.9C10.4029 4.8 10 4.39706 10 3.9ZM15.5844 8.4L17.9469 21H32.6531L35.0156 8.4H15.5844ZM19 22.8C17.0118 22.8 15.4 24.4118 15.4 26.4C15.4 28.3882 17.0118 30 19 30C20.9882 30 22.6 28.3882 22.6 26.4C22.6 24.4118 20.9882 22.8 19 22.8ZM31.6 22.8C29.6118 22.8 28 24.4118 28 26.4C28 28.3882 29.6118 30 31.6 30C33.5882 30 35.2 28.3882 35.2 26.4C35.2 24.4118 33.5882 22.8 31.6 22.8ZM19 24.6C19.9941 24.6 20.8 25.4059 20.8 26.4C20.8 27.3941 19.9941 28.2 19 28.2C18.0059 28.2 17.2 27.3941 17.2 26.4C17.2 25.4059 18.0059 24.6 19 24.6ZM31.6 24.6C32.5941 24.6 33.4 25.4059 33.4 26.4C33.4 27.3941 32.5941 28.2 31.6 28.2C30.6059 28.2 29.8 27.3941 29.8 26.4C29.8 25.4059 30.6059 24.6 31.6 24.6Z" fill="#1E3C38" />
|
||||
</svg>
|
||||
@if (cartItemCount() > 0) {
|
||||
<span class="cart-badge">{{ cartItemCount() }}</span>
|
||||
<span class="dexar-cart-badge">{{ cartItemCount() }}</span>
|
||||
}
|
||||
</a>
|
||||
|
||||
<div class="header-actions">
|
||||
<!-- Language Selector -->
|
||||
<div class="dexar-lang-selector">
|
||||
<app-language-selector />
|
||||
</div>
|
||||
|
||||
<button class="menu-toggle" (click)="toggleMenu()" [class.active]="menuOpen">
|
||||
<!-- Mobile Menu Toggle -->
|
||||
<button class="dexar-menu-toggle" (click)="toggleMenu()" [class.active]="menuOpen">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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']);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,11 +4,12 @@ import { environment } from '../../../environments/environment';
|
||||
@Component({
|
||||
selector: 'app-logo',
|
||||
standalone: true,
|
||||
template: `<img [src]="logoPath" [alt]="brandName + ' logo'" class="logo-img" width="120" height="40" fetchpriority="high" />`,
|
||||
template: `<img [src]="logoPath" [alt]="brandName + ' logo'" class="logo-img" fetchpriority="high" />`,
|
||||
styles: [`
|
||||
.logo-img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
`]
|
||||
})
|
||||
|
||||
@@ -72,49 +72,67 @@
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<!-- DEXAR VERSION - Original -->
|
||||
<div class="home-container">
|
||||
<header class="hero hero-compact">
|
||||
<h1>{{ brandName }}</h1>
|
||||
<p>Ваш маркетплейс товаров и услуг</p>
|
||||
</header>
|
||||
<!-- DEXAR VERSION - Redesigned 2026 -->
|
||||
<div class="dexar-home">
|
||||
<!-- Hero Section with Full Width Image -->
|
||||
<section class="dexar-hero">
|
||||
<div class="dexar-hero-overlay">
|
||||
<div class="dexar-hero-content">
|
||||
<h1 class="dexar-hero-title">Здесь ты найдёшь всё</h1>
|
||||
<p class="dexar-hero-subtitle">Тысячи товаров в одном месте</p>
|
||||
<p class="dexar-hero-tagline">просто и удобно</p>
|
||||
|
||||
<div class="dexar-hero-actions">
|
||||
<a routerLink="/search" class="dexar-btn-primary">
|
||||
Перейти в каталог
|
||||
</a>
|
||||
<button (click)="navigateToSearch()" class="dexar-btn-secondary">
|
||||
Найти товар
|
||||
<svg width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1L9 8L1 15" stroke="#1E3C38" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Items Carousel -->
|
||||
<app-items-carousel />
|
||||
|
||||
@if (loading()) {
|
||||
<div class="loading">
|
||||
<div class="spinner"></div>
|
||||
<div class="dexar-loading">
|
||||
<div class="dexar-spinner"></div>
|
||||
<p>Загрузка категорий...</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (error()) {
|
||||
<div class="error">
|
||||
<div class="dexar-error">
|
||||
<p>{{ error() }}</p>
|
||||
<button (click)="loadCategories()">Попробовать снова</button>
|
||||
<button (click)="loadCategories()" class="dexar-retry-btn">Попробовать снова</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!loading() && !error()) {
|
||||
<section class="categories">
|
||||
<h2>Категории</h2>
|
||||
<section class="dexar-categories">
|
||||
<h2 class="dexar-categories-title">Категории</h2>
|
||||
@if (getTopLevelCategories().length === 0) {
|
||||
<div class="empty-categories">
|
||||
<div class="empty-icon">📦</div>
|
||||
<div class="dexar-empty-categories">
|
||||
<div class="dexar-empty-icon">📦</div>
|
||||
<h3>Категории пока отсутствуют</h3>
|
||||
<p>Скоро здесь появятся категории товаров</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="categories-grid">
|
||||
<div class="dexar-categories-grid">
|
||||
@for (category of getTopLevelCategories(); track category.categoryID) {
|
||||
<div class="category-card">
|
||||
<a [routerLink]="['/category', category.categoryID]" class="category-link">
|
||||
<div class="category-media">
|
||||
<div class="dexar-category-card">
|
||||
<a [routerLink]="['/category', category.categoryID]" class="dexar-category-link">
|
||||
<div class="dexar-category-media">
|
||||
@if (category.icon) {
|
||||
<img [src]="category.icon" [alt]="category.name" loading="lazy" decoding="async" />
|
||||
} @else {
|
||||
<div class="category-fallback">{{ category.name }}</div>
|
||||
<div class="dexar-category-fallback">{{ category.name }}</div>
|
||||
}
|
||||
</div>
|
||||
<h3>{{ category.name }}</h3>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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']);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user