add components
Ernest Litvinenko
parent
9ec040c41a
commit
9cb2ac9af2
|
|
@ -1,6 +1,6 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
reactStrictMode: false,
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
|
|
|
|||
13
package.json
13
package.json
|
|
@ -3,21 +3,22 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbo",
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"gsap": "^3.12.2",
|
||||
"next": "13.5.6",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"next": "13.5.6"
|
||||
"react-dom": "^18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "13.5.6"
|
||||
"eslint-config-next": "13.5.6",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<svg width="110" height="89" viewBox="0 0 110 89" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.3" d="M52.6627 88.3753L16.5908 70.4321L57.2166 50.2202L93.2885 68.1634L52.6627 88.3753ZM19.1075 70.4321L52.6627 87.1378L90.7719 68.1634L57.2166 51.4577L19.1075 70.4321Z" fill="#37474F"/>
|
||||
<path d="M83.2216 63.1106L52.0631 79.0945L24.0205 65.998L57.2162 49.4985L83.2216 63.1106Z" fill="#C13058"/>
|
||||
<path d="M74.474 3.40283L57.3369 19.593L92.0905 36.9174L109.228 20.7273L74.474 3.40283Z" fill="#FFB7CB"/>
|
||||
<path d="M92.0903 36.9172L109.227 20.7271V21.1395L92.0903 37.3297L91.8506 37.1234L92.0903 36.9172Z" fill="#FFB7CB"/>
|
||||
<path d="M18.2676 39.393V70.6389L57.695 51.0457V19.7998L18.2676 39.393Z" fill="#C1365C"/>
|
||||
<path d="M18.2677 39.3927L57.6951 19.7995L57.3356 19.5933L17.9082 39.1864L18.2677 39.3927Z" fill="#C13058"/>
|
||||
<path d="M18.2677 70.6387V39.3928L17.9082 39.1865V70.5356L18.2677 70.6387Z" fill="#E35F83"/>
|
||||
<path d="M57.3369 20.0059V51.2518L91.2517 68.1637V36.9178L57.3369 20.0059Z" fill="#EB8CA7"/>
|
||||
<path d="M91.2517 36.9175L57.3369 20.0056L57.6964 19.7993L91.6112 36.7113L91.2517 36.9175Z" fill="#FFD8E3"/>
|
||||
<path d="M91.252 68.1631V36.9172L91.6115 36.7109V67.9568L91.252 68.1631Z" fill="#C1365C"/>
|
||||
<path d="M12.2764 19.5931L18.3882 39.3925L57.8156 19.7994L51.7038 0L12.2764 19.5931Z" fill="#FFB7CB"/>
|
||||
<path d="M12.2765 19.5931L51.7039 0L51.2245 0.103122L11.917 19.6963L12.2765 19.5931Z" fill="#FFB7CB"/>
|
||||
<path d="M18.2685 39.3927L12.2765 19.5933L11.917 19.6964L17.909 39.1864L18.2685 39.3927Z" fill="#FFB7CB"/>
|
||||
<path d="M78.3083 34.9585H77.4694V34.6491L76.5107 33.721V32.5867L75.3123 31.5555H73.6345L72.9155 32.1742H72.0766L71.8369 31.8648H71.3575V30.9367L70.1591 29.9055H68.6012L67.4028 30.9367L67.0433 30.5243H65.3655L64.7663 31.143V30.8336L64.5266 30.6274L65.2457 30.0086V28.6681L64.0473 27.6368H62.3695L61.2909 28.5649V28.1525L60.4521 27.3275V26.915L59.2537 25.8838H57.5759L56.3775 26.915V27.1212H55.8981L55.6585 27.2244V26.3994L54.5799 25.3682H52.9021L51.7037 26.3994V27.6368H50.9847L50.1458 28.2556L49.5466 27.8431H47.8689L46.6705 28.7712V29.8024H45.3522L44.3935 30.6274L43.5546 29.9055H41.8769L40.6785 30.9367V31.143L40.0793 30.5243H38.4015L37.2031 31.5555V32.4836L36.8436 32.1742H35.1658L33.9674 33.2054V34.6491L34.5666 35.0616L34.2071 35.2679H32.6492L31.4508 36.2991V37.2272H30.9714H30.8516L30.2524 36.7116H28.6945L27.4961 37.7428V38.2584L26.777 37.7428H25.0992L24.0207 38.6709V40.1146L24.1405 40.3208H23.1818L21.9834 41.352V42.7957L23.1818 43.827H24.7397L25.3389 43.3114L25.5786 43.4145H27.2564L28.4548 42.3833V41.8677L28.6945 42.0739H30.2524L31.4508 41.0427V40.6302H32.6492L33.7277 39.599V38.774H34.3269L34.6865 38.3615H36.3642L37.5626 37.4334V36.7116H38.8809L39.9594 35.7835L40.3189 36.196H41.9967L43.1951 35.1647V33.721L42.8356 33.3085H43.5546L44.5133 32.4836L45.3522 33.3085H47.03L48.1085 32.2773V31.2461H49.5466L50.3855 30.5243L50.9847 31.0399H52.6625L53.741 30.0086V28.8743H54.5799L54.6997 28.7712V29.5962L55.8981 30.5243H57.4561L57.9354 30.1118L58.0553 30.2149V31.2461L59.2537 32.2773H60.8116L61.8901 33.3085H63.5679L64.1671 32.6898V32.9992L65.3655 34.0304H65.4853V34.3398L66.6838 35.371H68.2417L69.2004 34.546L70.1591 35.371H71.717L71.4774 35.5772V37.0209L72.6758 38.0521H74.2337L75.4321 37.0209V37.4334L76.6305 38.3615H78.3083L79.5067 37.4334V35.9897L78.3083 34.9585Z" fill="white"/>
|
||||
<path opacity="0.3" d="M54.3401 45.7856L88.3747 62.6976L55.5385 78.9909L21.5039 62.0789L54.3401 45.7856Z" fill="#763B4B"/>
|
||||
<path d="M55.539 59.8104L22.583 43.4141V62.1822L55.539 78.5786V59.8104Z" fill="#62172B"/>
|
||||
<path d="M87.2967 62.8009L55.5391 78.5785V59.8103L87.2967 44.0327V62.8009Z" fill="#E41B53"/>
|
||||
<path d="M54.3406 27.6362L87.2967 44.0326L55.539 59.8102L22.583 43.4139L54.3406 27.6362Z" fill="#701831"/>
|
||||
<path d="M41.1583 52.592L39.6003 52.9014L36.9639 50.5296L68.7215 34.752L72.9159 36.8144L41.1583 52.592Z" fill="#F99EB7"/>
|
||||
<path d="M41.1583 71.463L36.9639 69.4006V50.5293L41.1583 52.5917V71.463Z" fill="#CC486C"/>
|
||||
<path d="M69.4404 52.9017L70.9983 53.211L73.6348 50.8392L40.6788 34.4429L36.4844 36.5053L69.4404 52.9017Z" fill="#F99EB7"/>
|
||||
<path d="M69.4404 71.7731L73.6348 69.7106V50.8394L69.4404 52.9018V71.7731Z" fill="#763B4B"/>
|
||||
<path opacity="0.3" d="M69.6792 42.2793H40.3184V45.2698H69.6792V42.2793Z" fill="#763B4B"/>
|
||||
<path d="M56.2573 41.7642H53.6208L51.8232 42.6923V43.9297L53.6208 44.8578H56.2573L58.0549 43.9297V42.6923L56.2573 41.7642Z" fill="#CC486C"/>
|
||||
<path d="M58.0547 44.3422L56.2571 45.2703L55.5381 45.064L56.2571 44.8578L58.0547 43.9297V44.3422Z" fill="#763B4B"/>
|
||||
<path d="M53.7407 45.2703L51.8232 44.3422V43.9297L53.7407 44.8578L54.4597 44.9609L53.7407 45.2703Z" fill="#763B4B"/>
|
||||
<path d="M56.3767 44.8574H53.7402V45.2699H56.3767V44.8574Z" fill="#763B4B"/>
|
||||
<path d="M44.7529 41.248V44.3417L54.9393 44.5479V41.5574L44.7529 41.248Z" fill="#F99EB7"/>
|
||||
<path d="M40.3184 36.7109V39.7015L44.7525 44.3419V41.2483L40.3184 36.7109Z" fill="#CC486C"/>
|
||||
<path d="M40.3184 36.7109V39.7015L47.2691 39.9077V36.9172L40.3184 36.7109Z" fill="#F99EB7"/>
|
||||
<path d="M47.2695 36.9175V39.908L54.9393 44.5485V41.558L47.2695 36.9175Z" fill="#763B4B"/>
|
||||
<path d="M47.2691 36.0923L46.6699 36.711L47.2691 39.0828L54.9389 44.5483V41.5577L47.2691 36.0923Z" fill="#CC486C"/>
|
||||
<path d="M45.1123 30.936V34.0297L47.2694 39.0827V36.0921L45.1123 30.936Z" fill="#763B4B"/>
|
||||
<path d="M45.1123 30.936V34.0297L51.2242 36.2984L51.8234 35.6796L51.2242 33.3078L45.1123 30.936Z" fill="#CC486C"/>
|
||||
<path d="M51.2236 33.3076V36.2981L54.9387 44.5479V41.5574L51.2236 33.3076Z" fill="#763B4B"/>
|
||||
<path d="M65.2457 41.248V44.3417L54.9395 44.5479V41.5574L65.2457 41.248Z" fill="#F99EB7"/>
|
||||
<path d="M69.6792 36.7109L68.3609 39.0827L69.6792 39.7015L65.2451 44.3419V41.2483L69.6792 36.7109Z" fill="#763B4B"/>
|
||||
<path d="M69.6792 36.7109V39.7015L62.7285 39.9077V36.9172L69.6792 36.7109Z" fill="#F99EB7"/>
|
||||
<path d="M62.7291 36.9175V39.908L54.9395 44.5485V41.558L62.7291 36.9175Z" fill="#763B4B"/>
|
||||
<path d="M62.7291 36.0923L63.2084 36.711L62.7291 39.0828L54.9395 44.5483V41.5577L62.7291 36.0923Z" fill="#F99EB7"/>
|
||||
<path d="M64.8856 30.936V34.0297L62.7285 39.0827V36.0921L64.8856 30.936Z" fill="#CC486C"/>
|
||||
<path d="M64.8868 30.936V34.0297L58.6552 36.2984L58.1758 35.6796L58.6552 33.3078L64.8868 30.936Z" fill="#F99EB7"/>
|
||||
<path d="M58.6545 33.3076V36.2981L54.9395 44.5479V41.5574L58.6545 33.3076Z" fill="#763B4B"/>
|
||||
<path d="M51.4639 32.2769L52.1829 32.9987L51.4639 35.2674L54.9392 44.5484V41.5578L51.4639 32.2769Z" fill="#763B4B"/>
|
||||
<path d="M54.9392 27.9458L55.8979 30.2145L54.9392 30.9363L51.4639 35.2674V32.2769L54.9392 27.9458Z" fill="#F99EB7"/>
|
||||
<path d="M58.4148 32.1738L57.9355 34.03L58.4148 35.1644L54.9395 44.5485V41.5579L58.4148 32.1738Z" fill="#F99EB7"/>
|
||||
<path d="M54.9395 27.9458V30.9363L58.4148 35.1643V32.1738L54.9395 27.9458Z" fill="#CC486C"/>
|
||||
<path d="M18.2676 39.3926V70.6385L52.1823 87.5505V56.3046L18.2676 39.3926Z" fill="#CB6581"/>
|
||||
<path d="M52.3022 56.3043L18.2676 39.3923L18.7469 39.186L52.6617 56.098L52.3022 56.3043Z" fill="#FFD8E3"/>
|
||||
<path d="M52.3027 87.5503V56.3044L52.6623 56.0981V87.3441L52.3027 87.5503Z" fill="#CB6581"/>
|
||||
<path d="M52.6631 56.5111V87.757L92.0905 68.1639V36.918L52.6631 56.5111Z" fill="#C54E6F"/>
|
||||
<path d="M56.6172 81.7758L64.0473 78.0634V70.6387L56.6172 74.3511V81.7758ZM56.9767 74.5573L63.8076 71.1543V77.8572L56.9767 81.2602V74.5573Z" fill="#515C61"/>
|
||||
<path d="M59.134 78.7854L59.7332 78.476V74.8668L60.0927 74.6605L59.3736 73.7324L58.7744 75.3824L59.134 75.1761V78.7854Z" fill="#515C61"/>
|
||||
<path d="M58.7744 79.8164L61.8903 78.2696V77.6509L58.7744 79.1977V79.8164Z" fill="#515C61"/>
|
||||
<path d="M60.5723 74.4541L60.9318 74.2478V77.8571L61.531 77.5477V73.9384L61.8905 73.8353L61.2913 72.9072L60.5723 74.4541Z" fill="#515C61"/>
|
||||
<path d="M65.6055 77.3413L73.0356 73.6289V66.2041L65.6055 69.9165V77.3413ZM72.676 66.7197V73.4226L65.8452 76.8256V70.1227L72.676 66.7197Z" fill="#515C61"/>
|
||||
<path d="M68.9607 74.7631L68.4813 74.8662L68.2417 74.9694V73.01L68.4813 72.9069L68.9607 72.082V69.5039L67.1631 70.432V73.01L67.6425 73.2163L68.002 73.1132V75.0725L67.6425 75.1756L67.1631 75.6912L68.9607 74.7631Z" fill="#515C61"/>
|
||||
<path d="M71.5974 73.4228L70.9982 73.5259L70.7585 73.629V71.6697L70.9982 71.5666L71.5974 70.7416V68.1636L69.7998 69.0917V71.6697L70.399 71.9791L70.6387 71.876V73.8353L70.399 73.9384L69.7998 74.3509L71.5974 73.4228ZM70.2792 71.876L69.9197 71.6697V69.2979L71.4776 68.5761V70.8447L70.9982 71.5666L70.2792 71.876Z" fill="#515C61"/>
|
||||
<path d="M82.0229 61.77L74.5928 65.4824V72.9072L82.0229 69.1948V61.77ZM81.7832 68.9885L74.9523 72.3916V65.6887L81.7832 62.2856V68.9885Z" fill="#515C61"/>
|
||||
<path d="M78.1881 69.2977L77.7087 70.0196L77.469 70.1227L76.9897 69.9164V69.6071V69.5039H76.8698L76.75 69.6071V69.7102V70.1227L77.3492 70.432L77.8286 70.2258L78.4278 69.2977V66.9259L80.7047 65.7916V65.3791L79.9857 64.6572H78.9071L78.4278 64.9666V64.7603L78.3079 64.6572V64.7603L78.1881 64.8635V65.0697L77.7087 65.276L76.6302 66.4103L75.9111 67.7509V68.1634L78.1881 67.029V69.2977Z" fill="#515C61"/>
|
||||
<path d="M52.6633 56.5108L92.0906 36.9177L91.6113 36.7114L52.3037 56.3046L52.6633 56.5108Z" fill="#AD3455"/>
|
||||
<path d="M52.6633 87.7568V56.5109L52.3037 56.3047V87.5506L52.6633 87.7568Z" fill="#E35F83"/>
|
||||
<path d="M64.0479 42.6923L52.6631 56.5106L92.0905 36.9174L103.475 23.0991L64.0479 42.6923Z" fill="#812841"/>
|
||||
<path d="M64.0473 42.6925L103.475 23.0994L103.235 22.79L63.8076 42.3832L64.0473 42.6925Z" fill="#FFD8E3"/>
|
||||
<path d="M52.6633 56.511L64.0481 42.6927L63.8084 42.3833L52.3037 56.3047L52.6633 56.511Z" fill="#E35F83"/>
|
||||
<path d="M17.9086 39.186L0.771484 55.3762L35.5251 72.7006L52.6623 56.5105L17.9086 39.186Z" fill="#FFB7CB"/>
|
||||
<path d="M35.5254 72.7009L52.6625 56.5107V57.0264L35.7651 72.9071L35.5254 72.7009Z" fill="#AC3C5B"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M29.4817 8.62383L19.4817 3.12383C19.334 3.0426 19.1682 3 18.9997 3C18.8312 3 18.6654 3.0426 18.5177 3.12383L8.51769 8.62383C8.3609 8.71015 8.23016 8.83698 8.1391 8.99106C8.04804 9.14515 8 9.32085 8 9.49983C8 9.67881 8.04804 9.85451 8.1391 10.0086C8.23016 10.1627 8.3609 10.2895 8.51769 10.3758L17.4816 15.3059C17.8012 15.4816 17.9997 15.8174 17.9997 16.1821V24.6185C17.9997 25.3791 17.1842 25.8612 16.5177 25.4946L15.839 25.1213C15.3555 24.8554 14.748 25.0316 14.4819 25.515C14.2156 25.9986 14.392 26.6066 14.8757 26.8727L18.5177 28.8758C18.6653 28.9572 18.8311 28.9999 18.9997 28.9999C19.1683 28.9999 19.3341 28.9572 19.4817 28.8758L29.4817 23.3758C29.6385 23.2895 29.7693 23.1627 29.8605 23.0087C29.9516 22.8546 29.9997 22.6788 29.9997 22.4998V9.49983C29.9997 9.32082 29.9516 9.14509 29.8605 8.99101C29.7693 8.83692 29.6385 8.71011 29.4817 8.62383ZM18.5178 5.4068C18.8179 5.24181 19.1815 5.24181 19.4815 5.4068L25.3312 8.62358C26.0221 9.00349 26.0221 9.99617 25.3312 10.3761L19.4815 13.5929C19.1815 13.7579 18.8179 13.7579 18.5178 13.5929L12.6681 10.3761C11.9773 9.99617 11.9773 9.00349 12.6681 8.62358L18.5178 5.4068ZM27.9997 21.3176C27.9997 21.6822 27.8012 22.018 27.4816 22.1938L21.4816 25.4938C20.8152 25.8603 19.9997 25.3782 19.9997 24.6176V16.1811C19.9997 15.8164 20.1982 15.4806 20.5178 15.3049L26.5178 12.0049C27.1842 11.6383 27.9997 12.1205 27.9997 12.8811V21.3176Z" fill="#F5F5F5"/>
|
||||
<path d="M10 15C10 15.5523 9.55228 16 9 16H3C2.44772 16 2 15.5523 2 15C2 14.4477 2.44772 14 3 14H9C9.55228 14 10 14.4477 10 15ZM12 23C12 23.5523 11.5523 24 11 24H5C4.44772 24 4 23.5523 4 23C4 22.4477 4.44772 22 5 22H11C11.5523 22 12 22.4477 12 23ZM14 19C14 19.5523 13.5523 20 13 20H7C6.44772 20 6 19.5523 6 19C6 18.4477 6.44772 18 7 18H13C13.5523 18 14 18.4477 14 19Z" fill="#F5F5F5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 226 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.0001 34C18.0001 34 29.1946 24.6429 29.1946 14.8209C29.1946 7.81689 24.1829 3 18.0001 3C11.8173 3 6.80566 7.81689 6.80566 14.8209C6.80566 24.6429 18.0001 34 18.0001 34Z" stroke="#F5F5F5" stroke-width="3" stroke-linejoin="round"/>
|
||||
<path d="M17.9999 18.4998C19.1418 18.4998 20.2369 18.0462 21.0444 17.2387C21.8518 16.4313 22.3054 15.3361 22.3054 14.1942C22.3054 13.0523 21.8518 11.9572 21.0444 11.1497C20.2369 10.3423 19.1418 9.88867 17.9999 9.88867C16.858 9.88867 15.7629 10.3423 14.9554 11.1497C14.148 11.9572 13.6943 13.0523 13.6943 14.1942C13.6943 15.3361 14.148 16.4313 14.9554 17.2387C15.7629 18.0462 16.858 18.4998 17.9999 18.4998Z" stroke="#F5F5F5" stroke-width="3" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 813 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
|
|
@ -0,0 +1,83 @@
|
|||
import {ButtonRaw} from "@/components/reusable/buttons";
|
||||
import Image from "next/image";
|
||||
import Delivery from "@/../public/delivery.svg";
|
||||
import Card from "@/components/reusable/card";
|
||||
import Input from "@/components/reusable/input";
|
||||
import {useRef, useEffect} from "react";
|
||||
import BoxImage from '@/../public/box.svg';
|
||||
import DeliveryIcon from '@/../public/delivery-icon.svg'
|
||||
import LocationImg from '@/../public/location.svg'
|
||||
|
||||
import gsap from 'gsap'
|
||||
|
||||
|
||||
const Hero = () => {
|
||||
|
||||
// Animations
|
||||
const cardOne = useRef(null);
|
||||
const cardTwo = useRef(null);
|
||||
const cardThree = useRef(null);
|
||||
const cardFour = useRef(null);
|
||||
useEffect(() => {
|
||||
console.log('i fire once');
|
||||
if (typeof window === 'undefined') return
|
||||
if (!cardOne.current || !cardTwo.current || !cardThree.current || !cardFour.current) return;
|
||||
const timeline = gsap.timeline({repeat: 0})
|
||||
timeline.from(cardOne.current, {x: -100, opacity: 0})
|
||||
timeline.from(cardTwo.current, {x: -100, opacity: 0}, '>-0.3')
|
||||
timeline.from(cardThree.current, {y: 100, opacity: 0}, '<+0.2')
|
||||
timeline.from(cardFour.current, {x: 100, opacity: 0}, '>')
|
||||
}, []);
|
||||
|
||||
|
||||
return (<section className={'container mx-auto'}>
|
||||
<div className={'grid grid-rows-3 grid-cols-6 grid-flow-col gap-[20px]'}>
|
||||
<Card innerRef={cardOne} className={"row-span-2 col-span-4"}>
|
||||
<form action='#' className="flex flex-col">
|
||||
<h2 className={'text-title-2 font-inter font-semibold block mb-[40px]'}>Рассчитать
|
||||
доставку</h2>
|
||||
<div className="grid grid-cols-2 grid-flow-dense gap-x-[14px] gap-y-[45px]">
|
||||
<Input placeholder={'Город отправки'}></Input>
|
||||
<Input placeholder={'Город назначения'}></Input>
|
||||
<ButtonRaw className={"py-[28px]"} rounded={20}>
|
||||
<div className="flex items-center text-center justify-center">
|
||||
<span>Рассчитать доставку</span>
|
||||
<Image src={DeliveryIcon} alt={'#'} width={0} height={0}/>
|
||||
|
||||
</div>
|
||||
</ButtonRaw>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</Card>
|
||||
<Card innerRef={cardTwo} className={"col-span-3"}>
|
||||
<form action="#">
|
||||
<h3 className={'text-title-3 font-somic font-medium mb-[20px]'}>Отследить посылку</h3>
|
||||
<div className="grid grid-cols-12 gap-[25px]">
|
||||
<Input className={'w-full col-span-10'} placeholder={'Введите трек номер'}></Input>
|
||||
<ButtonRaw
|
||||
className={'flex justify-center items-center px-[0px] py-[0px] w-full col-span-2'}
|
||||
rounded={20}>
|
||||
<Image src={LocationImg} alt={'#'} width={36} height={36}></Image>
|
||||
</ButtonRaw>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
<ButtonRaw innerRef={cardThree} className={'flex flex-col justify-center px-4 py-4 items-center'}>
|
||||
<span className={'normal-case font-inter text-center mb-2'}>Забери свой подарок!</span>
|
||||
<Image src={BoxImage} alt={'#'} width={108} height={88}></Image>
|
||||
</ButtonRaw>
|
||||
<Card innerRef={cardFour} className="row-span-3 col-span-2">
|
||||
<div className="flex flex-col justify-center items-center">
|
||||
<h3 className={'font-somic text-title-1'}>Кешбэк 10%</h3>
|
||||
<p className={'text-right mb-4'}>Кешбэк баллами вырастет до 10% после отправки 5 посылок в течении
|
||||
месяца. Копите
|
||||
баллы и оплачивайте до 99% следующих заказов</p>
|
||||
<Image src={Delivery} width={323} height={306} alt={'delivery'}></Image>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</section>)
|
||||
}
|
||||
export default Hero
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import Header from "@/components/reusable/header";
|
||||
import Hero from "@/components/IndexPage/hero"
|
||||
import Image from "next/image";
|
||||
import Logo from '@/../public/logoBig.png'
|
||||
|
||||
const MainPage = () => {
|
||||
return (
|
||||
<>
|
||||
<Header/>
|
||||
|
||||
<main className={'mt-[82px] mb-[165px]'}>
|
||||
<Hero/>
|
||||
</main>
|
||||
|
||||
<footer
|
||||
className={'bg-white-p py-[62px] text-black font-somic [&_a]:text-caption [&_h3]:font-bold [&_h3]:text-base'}>
|
||||
<div className="container mx-auto">
|
||||
<div className="flex justify-between">
|
||||
<Image src={Logo} width={338} height={140} alt={'logo'}/>
|
||||
<nav className={'flex flex-col justify-between'}>
|
||||
<h3>Меню</h3>
|
||||
<a href="#">О компании</a>
|
||||
<a href="#">Правила получения</a>
|
||||
<a href="#">Отследить посылку</a>
|
||||
<a href="#">Отправить посылку</a>
|
||||
</nav>
|
||||
<div className="flex flex-col justify-between">
|
||||
<h3>Контакты</h3>
|
||||
<div className="flex text-caption [&_a]:ml-2">Телефон: <a href="tel:+790000000000">+7 (900) 000-00-00</a></div>
|
||||
<div className="text-caption flex [&_*]:ml-2">Почта: <a href="mailto:example@example.com">+7 (000) 000-00-00</a>
|
||||
</div>
|
||||
<div className="text-caption flex [&_*]:ml-2">Адрес: 46865, г.Москва, ул. Ленина 54, д5</div>
|
||||
<div className="text-caption flex [&_*]:ml-2">Лицензия:</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h3 className={'mb-2'}>Социальные сети</h3>
|
||||
<div className="flex">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12 2C6.47708 2 2 6.47708 2 12C2 17.5229 6.47708 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47708 17.5229 2 12 2ZM15.8458 13.2823C15.8458 13.2823 16.7302 14.1552 16.9479 14.5604C16.9542 14.5688 16.9573 14.5771 16.9594 14.5812C17.0479 14.7302 17.0688 14.8458 17.025 14.9323C16.9521 15.076 16.7021 15.1469 16.6167 15.1531H15.0542C14.9458 15.1531 14.7188 15.125 14.4437 14.9354C14.2323 14.7875 14.024 14.5448 13.8208 14.3083C13.5177 13.9562 13.2552 13.6521 12.9906 13.6521C12.957 13.652 12.9236 13.6573 12.8917 13.6677C12.6917 13.7323 12.4354 14.0177 12.4354 14.7781C12.4354 15.0156 12.2479 15.1521 12.1156 15.1521H11.4C11.1562 15.1521 9.88646 15.0667 8.76146 13.8802C7.38437 12.4271 6.14479 9.5125 6.13437 9.48542C6.05625 9.29687 6.21771 9.19583 6.39375 9.19583H7.97187C8.18229 9.19583 8.25104 9.32396 8.29896 9.4375C8.35521 9.56979 8.56146 10.0958 8.9 10.6875C9.44896 11.6521 9.78542 12.0437 10.0552 12.0437C10.1058 12.0432 10.1555 12.0303 10.2 12.0062C10.5521 11.8104 10.4865 10.5552 10.4708 10.2948C10.4708 10.2458 10.4698 9.73333 10.2896 9.4875C10.1604 9.30937 9.94062 9.24167 9.80729 9.21667C9.86126 9.1422 9.93236 9.08182 10.0146 9.04062C10.2562 8.91979 10.6917 8.90208 11.124 8.90208H11.3646C11.8333 8.90833 11.9542 8.93854 12.124 8.98125C12.4677 9.06354 12.475 9.28542 12.4448 10.0448C12.4354 10.2604 12.426 10.5042 12.426 10.7917C12.426 10.8542 12.4229 10.9208 12.4229 10.9917C12.4125 11.3781 12.4 11.8167 12.6729 11.9969C12.7085 12.0192 12.7497 12.0311 12.7917 12.0312C12.8865 12.0312 13.1719 12.0312 13.9448 10.7052C14.1832 10.2784 14.3903 9.83487 14.5646 9.37812C14.5802 9.35104 14.626 9.26771 14.6802 9.23542C14.7202 9.21504 14.7645 9.20467 14.8094 9.20521H16.6646C16.8667 9.20521 17.0052 9.23542 17.0312 9.31354C17.0771 9.4375 17.0229 9.81562 16.176 10.9625L15.7979 11.4615C15.0302 12.4677 15.0302 12.5188 15.8458 13.2823Z"
|
||||
fill="#EB275E"/>
|
||||
</svg>
|
||||
<span>@milya.russian</span>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM16.64 8.8C16.49 10.38 15.84 14.22 15.51 15.99C15.37 16.74 15.09 16.99 14.83 17.02C14.25 17.07 13.81 16.64 13.25 16.27C12.37 15.69 11.87 15.33 11.02 14.77C10.03 14.12 10.67 13.76 11.24 13.18C11.39 13.03 13.95 10.7 14 10.49C14.0069 10.4582 14.006 10.4252 13.9973 10.3938C13.9886 10.3624 13.9724 10.3337 13.95 10.31C13.89 10.26 13.81 10.28 13.74 10.29C13.65 10.31 12.25 11.24 9.52 13.08C9.12 13.35 8.76 13.49 8.44 13.48C8.08 13.47 7.4 13.28 6.89 13.11C6.26 12.91 5.77 12.8 5.81 12.45C5.83 12.27 6.08 12.09 6.55 11.9C9.47 10.63 11.41 9.79 12.38 9.39C15.16 8.23 15.73 8.03 16.11 8.03C16.19 8.03 16.38 8.05 16.5 8.15C16.6 8.23 16.63 8.34 16.64 8.42C16.63 8.48 16.65 8.66 16.64 8.8Z"
|
||||
fill="#EB275E"/>
|
||||
</svg>
|
||||
<span>@milya.russian</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MainPage;
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import Image from "next/image";
|
||||
|
||||
export const ButtonRaw = (props) => {
|
||||
const {rounded, innerRef} = props
|
||||
const {children, className: classNameAdd} = props
|
||||
const className = `bg-black text-white uppercase font-somic font-medium rounded-[${rounded || '40'}px] `
|
||||
return (
|
||||
|
||||
<a ref={innerRef} href={'#'} className={className + classNameAdd}>
|
||||
{children}
|
||||
</a>
|
||||
)}
|
||||
|
||||
export const ButtonHref = ({title}) => (
|
||||
<ButtonRaw className={'px-[62px] py-[28px]'}>
|
||||
<span>{title}</span>
|
||||
</ButtonRaw>
|
||||
)
|
||||
|
||||
export const ButtonHrefWithImage = ({title, imgSrc, position}) => {
|
||||
return (
|
||||
<ButtonRaw>
|
||||
<span>{title}</span>
|
||||
<Image src={imgSrc} alt={'#'} width={0} height={0}/>
|
||||
</ButtonRaw>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
const Card = (props) => {
|
||||
let {className: classNameAdd, theme, innerRef} = props
|
||||
const propsData = {...props, theme: undefined, innerRef: undefined}
|
||||
|
||||
theme = theme || 'white'
|
||||
|
||||
const themeClassNames = {
|
||||
'dark': ' bg-black rounded-[20px] px-[40px] py-[40px] text-white',
|
||||
'white': ' bg-white-p rounded-[20px] px-[40px] py-[40px] hover:scale-[101%]'
|
||||
}
|
||||
|
||||
const classNameOrig = themeClassNames[theme]
|
||||
return (
|
||||
|
||||
<div ref={innerRef} {...propsData} className={classNameAdd + classNameOrig}>
|
||||
{props.children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Card;
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import Image from "next/image";
|
||||
import logoMin from '@/../public/logo-min.png'
|
||||
import {ButtonHref} from "@/components/reusable/buttons";
|
||||
import {useEffect, useRef} from "react";
|
||||
import gsap from "gsap";
|
||||
|
||||
const LogoHeader = () => {
|
||||
const ref = useRef()
|
||||
useEffect(() => {
|
||||
gsap.fromTo(ref.current, {
|
||||
x: -100, opacity: 0
|
||||
}, {x: 0, opacity: 1})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div ref={ref}
|
||||
className="inline-flex text-caption pl-[15px] pr-[41px] py-[12px] border-[1px] border-black rounded-[40px] items-center">
|
||||
<div className="bg-black px-[37px] py-[10px] max-w-fit rounded-[80px]">
|
||||
<Image src={logoMin} width={55} height={36} alt={'logo'}/>
|
||||
</div>
|
||||
<span className={'ml-[83px] max-w-[189px] text-right'}>Курьерская доставка по России</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const NavBar = () => {
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
gsap.fromTo('.header__link', {
|
||||
y: -10, opacity: 0,
|
||||
}, {y: 0, opacity: 1})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
|
||||
|
||||
<nav
|
||||
className={'[&_a]:uppercase [&_a]:text-black inline-flex flex-1 justify-between items-center font-somic font-medium text-base px-[70px]'}>
|
||||
<a className={'header__link'} href="#">О компании</a>
|
||||
<a className={'header__link'} href="#">Правила получения</a>
|
||||
<a className={'header__link'} href="#">Контакты</a>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
const Header = () => (
|
||||
<header className={'container mx-auto pt-[50px] flex items-center justify-between'}>
|
||||
<LogoHeader/>
|
||||
<NavBar/>
|
||||
<ButtonHref title={'Отследить посылку'} className={'rounded-[40px]'}/>
|
||||
</header>
|
||||
)
|
||||
|
||||
export default Header;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
const Input = (props) => {
|
||||
const {className: classNameAdd} = props
|
||||
|
||||
const className = 'pl-4 py-4 border-black border-[1px] rounded-[20px] ' + classNameAdd
|
||||
|
||||
return (
|
||||
<input type="text" {...props} className={className}/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default Input
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import '@/styles/fonts.css'
|
||||
import '@/styles/globals.css'
|
||||
|
||||
export default function App({ Component, pageProps }) {
|
||||
|
|
|
|||
|
|
@ -1,118 +1,14 @@
|
|||
import Image from 'next/image'
|
||||
import {Inter} from 'next/font/google'
|
||||
import MainPage from "@/components/IndexPage";
|
||||
|
||||
const inter = Inter({subsets: ['latin']})
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main
|
||||
className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
|
||||
>
|
||||
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
|
||||
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
|
||||
Get started by editing
|
||||
<code className="font-mono font-bold">src/pages/index.js</code>
|
||||
</p>
|
||||
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
|
||||
<a
|
||||
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
|
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
By{' '}
|
||||
<Image
|
||||
src="/vercel.svg"
|
||||
alt="Vercel Logo"
|
||||
className="dark:invert"
|
||||
width={100}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
|
||||
<Image
|
||||
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js Logo"
|
||||
width={180}
|
||||
height={37}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
|
||||
<a
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Docs{' '}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Find in-depth information about Next.js features and API.
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Learn{' '}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Learn about Next.js in an interactive course with quizzes!
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Templates{' '}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Discover and deploy boilerplate example Next.js projects.
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Deploy{' '}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Instantly deploy your Next.js site to a shareable URL with Vercel.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<>
|
||||
<MainPage />
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
@font-face {
|
||||
font-family: 'NT Somic';
|
||||
src: url('/fonts/NTSomic-Bold.woff2') format('woff2'),
|
||||
url('/fonts/NTSomic-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'NT Somic';
|
||||
src: url('/fonts/NTSomic-Regular.woff2') format('woff2'),
|
||||
url('/fonts/NTSomic-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'NT Somic';
|
||||
src: url('/fonts/NTSomic-Medium.woff2') format('woff2'),
|
||||
url('/fonts/NTSomic-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
|
|
@ -2,26 +2,3 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,23 @@ module.exports = {
|
|||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
black: "#282828",
|
||||
"white-p": "#F5F5F5",
|
||||
"gray": "#909090",
|
||||
"pink": "#EB275E"
|
||||
},
|
||||
fontFamily: {
|
||||
"inter": ["Inter", "sans-serif"],
|
||||
'somic': ['NT Somic', 'Inter', 'sans-serif']
|
||||
},
|
||||
fontSize: {
|
||||
'caption': '0.875rem',
|
||||
"base": "1.125rem",
|
||||
'title-1': "4rem",
|
||||
"title-2": "2.5rem",
|
||||
"title-3": '1.5625rem'
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'gradient-conic':
|
||||
|
|
|
|||
Loading…
Reference in New Issue