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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
} @else {
|
} @else {
|
||||||
<!-- DEXAR VERSION - Original -->
|
<!-- DEXAR VERSION - Redesigned 2026 -->
|
||||||
<header class="header">
|
<header class="dexar-header">
|
||||||
<div class="header-container">
|
<div class="dexar-header-container">
|
||||||
<a routerLink="/" class="logo" (click)="closeMenu()">
|
<!-- Logo -->
|
||||||
|
<a routerLink="/" class="dexar-logo" (click)="closeMenu()">
|
||||||
<app-logo />
|
<app-logo />
|
||||||
<!-- <span class="logo-text">{{ brandName }}</span> -->
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<nav class="nav" [class.nav-open]="menuOpen">
|
<!-- Navigation Buttons -->
|
||||||
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" (click)="closeMenu()">
|
<nav class="dexar-nav" [class.dexar-nav-open]="menuOpen">
|
||||||
<span class="nav-icon">🏠</span>
|
<div class="dexar-nav-group">
|
||||||
<span class="nav-text">Главная</span>
|
<a routerLink="/" routerLinkActive="dexar-active" [routerLinkActiveOptions]="{exact: true}"
|
||||||
</a>
|
(click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-left">
|
||||||
<a routerLink="/search" routerLinkActive="active" (click)="closeMenu()">
|
Главная
|
||||||
<span class="nav-icon">🔍</span>
|
</a>
|
||||||
<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()">
|
</a>
|
||||||
<span class="nav-icon">🛒</span>
|
<a routerLink="/contacts" (click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-right">
|
||||||
<span class="nav-text">Корзина</span>
|
Контакты
|
||||||
@if (cartItemCount() > 0) {
|
</a>
|
||||||
<span class="cart-badge">{{ cartItemCount() }}</span>
|
</div>
|
||||||
}
|
|
||||||
</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<a routerLink="/cart" routerLinkActive="active" class="cart-link-mobile" (click)="closeMenu()">
|
<!-- Search Box -->
|
||||||
<span class="cart-icon">🛒</span>
|
<div class="dexar-search-wrapper">
|
||||||
@if (cartItemCount() > 0) {
|
<div class="dexar-search-box">
|
||||||
<span class="cart-badge">{{ cartItemCount() }}</span>
|
<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" />
|
||||||
</a>
|
<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>
|
||||||
<div class="header-actions">
|
<input type="text" placeholder="Искать..." class="dexar-search-input" (click)="navigateToSearch()" readonly />
|
||||||
<app-language-selector />
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="menu-toggle" (click)="toggleMenu()" [class.active]="menuOpen">
|
<!-- Right Actions -->
|
||||||
<span></span>
|
<div class="dexar-actions">
|
||||||
<span></span>
|
<!-- Cart Button -->
|
||||||
<span></span>
|
<a routerLink="/cart" routerLinkActive="dexar-cart-active" class="dexar-cart-btn" (click)="closeMenu()">
|
||||||
</button>
|
<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="dexar-cart-badge">{{ cartItemCount() }}</span>
|
||||||
|
}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Language Selector -->
|
||||||
|
<div class="dexar-lang-selector">
|
||||||
|
<app-language-selector />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Menu Toggle -->
|
||||||
|
<button class="dexar-menu-toggle" (click)="toggleMenu()" [class.active]="menuOpen">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -449,3 +449,358 @@
|
|||||||
font-size: 1.1rem;
|
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 { Component } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { RouterLink, RouterLinkActive } from '@angular/router';
|
import { Router, RouterLink, RouterLinkActive } from '@angular/router';
|
||||||
import { CartService } from '../../services';
|
import { CartService } from '../../services';
|
||||||
import { environment } from '../../../environments/environment';
|
import { environment } from '../../../environments/environment';
|
||||||
import { LogoComponent } from '../logo/logo.component';
|
import { LogoComponent } from '../logo/logo.component';
|
||||||
@@ -20,7 +20,7 @@ export class HeaderComponent {
|
|||||||
logo = environment.logo;
|
logo = environment.logo;
|
||||||
isnovo = environment.theme === 'novo';
|
isnovo = environment.theme === 'novo';
|
||||||
|
|
||||||
constructor(private cartService: CartService) {
|
constructor(private cartService: CartService, private router: Router) {
|
||||||
this.cartItemCount = this.cartService.itemCount;
|
this.cartItemCount = this.cartService.itemCount;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -31,4 +31,8 @@ export class HeaderComponent {
|
|||||||
closeMenu(): void {
|
closeMenu(): void {
|
||||||
this.menuOpen = false;
|
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
|
// Mobile responsiveness
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.language-button {
|
.language-button {
|
||||||
@@ -177,4 +244,15 @@
|
|||||||
height: 20px;
|
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({
|
@Component({
|
||||||
selector: 'app-logo',
|
selector: 'app-logo',
|
||||||
standalone: true,
|
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: [`
|
styles: [`
|
||||||
.logo-img {
|
.logo-img {
|
||||||
height: 40px;
|
width: 100%;
|
||||||
width: auto;
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
`]
|
`]
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -72,55 +72,73 @@
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
} @else {
|
} @else {
|
||||||
<!-- DEXAR VERSION - Original -->
|
<!-- DEXAR VERSION - Redesigned 2026 -->
|
||||||
<div class="home-container">
|
<div class="dexar-home">
|
||||||
<header class="hero hero-compact">
|
<!-- Hero Section with Full Width Image -->
|
||||||
<h1>{{ brandName }}</h1>
|
<section class="dexar-hero">
|
||||||
<p>Ваш маркетплейс товаров и услуг</p>
|
<div class="dexar-hero-overlay">
|
||||||
</header>
|
<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 -->
|
<!-- Items Carousel -->
|
||||||
<app-items-carousel />
|
<app-items-carousel />
|
||||||
|
|
||||||
@if (loading()) {
|
@if (loading()) {
|
||||||
<div class="loading">
|
<div class="dexar-loading">
|
||||||
<div class="spinner"></div>
|
<div class="dexar-spinner"></div>
|
||||||
<p>Загрузка категорий...</p>
|
<p>Загрузка категорий...</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
@if (error()) {
|
@if (error()) {
|
||||||
<div class="error">
|
<div class="dexar-error">
|
||||||
<p>{{ error() }}</p>
|
<p>{{ error() }}</p>
|
||||||
<button (click)="loadCategories()">Попробовать снова</button>
|
<button (click)="loadCategories()" class="dexar-retry-btn">Попробовать снова</button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
@if (!loading() && !error()) {
|
@if (!loading() && !error()) {
|
||||||
<section class="categories">
|
<section class="dexar-categories">
|
||||||
<h2>Категории</h2>
|
<h2 class="dexar-categories-title">Категории</h2>
|
||||||
@if (getTopLevelCategories().length === 0) {
|
@if (getTopLevelCategories().length === 0) {
|
||||||
<div class="empty-categories">
|
<div class="dexar-empty-categories">
|
||||||
<div class="empty-icon">📦</div>
|
<div class="dexar-empty-icon">📦</div>
|
||||||
<h3>Категории пока отсутствуют</h3>
|
<h3>Категории пока отсутствуют</h3>
|
||||||
<p>Скоро здесь появятся категории товаров</p>
|
<p>Скоро здесь появятся категории товаров</p>
|
||||||
</div>
|
</div>
|
||||||
} @else {
|
} @else {
|
||||||
<div class="categories-grid">
|
<div class="dexar-categories-grid">
|
||||||
@for (category of getTopLevelCategories(); track category.categoryID) {
|
@for (category of getTopLevelCategories(); track category.categoryID) {
|
||||||
<div class="category-card">
|
<div class="dexar-category-card">
|
||||||
<a [routerLink]="['/category', category.categoryID]" class="category-link">
|
<a [routerLink]="['/category', category.categoryID]" class="dexar-category-link">
|
||||||
<div class="category-media">
|
<div class="dexar-category-media">
|
||||||
@if (category.icon) {
|
@if (category.icon) {
|
||||||
<img [src]="category.icon" [alt]="category.name" loading="lazy" decoding="async" />
|
<img [src]="category.icon" [alt]="category.name" loading="lazy" decoding="async" />
|
||||||
} @else {
|
} @else {
|
||||||
<div class="category-fallback">{{ category.name }}</div>
|
<div class="dexar-category-fallback">{{ category.name }}</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<h3>{{ category.name }}</h3>
|
<h3>{{ category.name }}</h3>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -701,3 +701,500 @@
|
|||||||
transform: translateY(-4px);
|
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 { Component, OnInit, signal, computed, ChangeDetectionStrategy } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { RouterLink } from '@angular/router';
|
import { Router, RouterLink } from '@angular/router';
|
||||||
import { ApiService } from '../../services';
|
import { ApiService } from '../../services';
|
||||||
import { Category } from '../../models';
|
import { Category } from '../../models';
|
||||||
import { environment } from '../../../environments/environment';
|
import { environment } from '../../../environments/environment';
|
||||||
@@ -40,7 +40,7 @@ export class HomeComponent implements OnInit {
|
|||||||
return cache;
|
return cache;
|
||||||
});
|
});
|
||||||
|
|
||||||
constructor(private apiService: ApiService) {}
|
constructor(private apiService: ApiService, private router: Router) {}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.loadCategories();
|
this.loadCategories();
|
||||||
@@ -68,4 +68,8 @@ export class HomeComponent implements OnInit {
|
|||||||
getSubCategories(parentID: number): Category[] {
|
getSubCategories(parentID: number): Category[] {
|
||||||
return this.subcategoriesCache().get(parentID) || [];
|
return this.subcategoriesCache().get(parentID) || [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
navigateToSearch(): void {
|
||||||
|
this.router.navigate(['/search']);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,9 @@
|
|||||||
/* PrimeNG and PrimeIcons */
|
/* PrimeNG and PrimeIcons */
|
||||||
@import 'primeicons/primeicons.css';
|
@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 optimization */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: system-ui;
|
font-family: system-ui;
|
||||||
|
|||||||
@@ -1,36 +1,38 @@
|
|||||||
// Dexar Theme - Purple/Violet Colors
|
// Dexar Theme - Redesigned 2026 - Green/Teal Colors
|
||||||
:root {
|
:root {
|
||||||
--primary-color: #667eea;
|
--primary-color: #497671;
|
||||||
--primary-hover: #5568d3;
|
--primary-hover: #3d635f;
|
||||||
--secondary-color: #764ba2;
|
--secondary-color: #a1b4b5;
|
||||||
--secondary-hover: #653a8e;
|
--secondary-hover: #8da3a4;
|
||||||
--accent-color: #f093fb;
|
--accent-color: #a7ceca;
|
||||||
--accent-hover: #e07ff0;
|
--accent-hover: #91b9b5;
|
||||||
|
|
||||||
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
--gradient-primary: linear-gradient(360deg, #497671 0%, #a7ceca 100%);
|
||||||
--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
--gradient-secondary: linear-gradient(135deg, #a1b4b5 0%, #677b78 100%);
|
||||||
--gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
--gradient-hero: linear-gradient(360deg, #497671 0%, #a7ceca 100%);
|
||||||
|
|
||||||
--text-primary: #333333;
|
--text-primary: #1e3c38;
|
||||||
--text-secondary: #666666;
|
--text-secondary: #667a77;
|
||||||
--text-light: #999999;
|
--text-light: #828e8d;
|
||||||
|
|
||||||
--bg-primary: #ffffff;
|
--bg-primary: #ffffff;
|
||||||
--bg-secondary: #f6f7fb;
|
--bg-secondary: rgba(255, 255, 255, 0.74);
|
||||||
--bg-tertiary: #e9ecf5;
|
--bg-tertiary: #f5f5f5;
|
||||||
|
--bg-header: rgba(117, 121, 124, 0.1);
|
||||||
|
|
||||||
--success-color: #10b981;
|
--success-color: #10b981;
|
||||||
--warning-color: #f59e0b;
|
--warning-color: #f59e0b;
|
||||||
--error-color: #ef4444;
|
--error-color: #ef4444;
|
||||||
--info-color: #3b82f6;
|
--info-color: #3b82f6;
|
||||||
|
|
||||||
--border-color: #e5e7eb;
|
--border-color: #d3dad9;
|
||||||
|
--border-dark: #677b78;
|
||||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
--shadow-lg: 0 12px 40px rgba(102, 126, 234, 0.25);
|
--shadow-lg: 0 12px 32px rgba(73, 118, 113, 0.2);
|
||||||
|
|
||||||
--radius-sm: 8px;
|
--radius-sm: 8px;
|
||||||
--radius-md: 12px;
|
--radius-md: 12px;
|
||||||
--radius-lg: 16px;
|
--radius-lg: 13px;
|
||||||
--radius-xl: 20px;
|
--radius-xl: 22px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user