lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 11 Activity

首页页头样式优化

Browse Source
This commit is contained in:
luorijun
2025-03-13 15:14:30 +08:00
parent e592137370
commit e1ca9bfff0
25 changed files with 565 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
package.json
View File

@@ -9,22 +9,23 @@
"lint": "next lint"
},
"dependencies": {
"motion": "^12.5.0",
"next": "15.2.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.2.1"
"react-dom": "^19.0.0"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@next/eslint-plugin-next": "^15.2.1",
"eslint-plugin-react-hooks": "^5.2.0",
"typescript": "^5",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@tailwindcss/postcss": "^4",
"tailwindcss": "^4",
"eslint": "^9",
"eslint-config-next": "15.2.1",
"@eslint/eslintrc": "^3"
"eslint-plugin-react-hooks": "^5.2.0",
"tailwindcss": "^4",
"typescript": "^5"
},
"packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b"
}

60
pnpm-lock.yaml generated
View File

@@ -8,6 +8,9 @@ importers:
.:
dependencies:
motion:
specifier: ^12.5.0
version: 12.5.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
next:
specifier: 15.2.1
version: 15.2.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -877,6 +880,20 @@ packages:
resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
engines: {node: '>= 0.4'}
framer-motion@12.5.0:
resolution: {integrity: sha512-buPlioFbH9/W7rDzYh1C09AuZHAk2D1xTA1BlounJ2Rb9aRg84OXexP0GLd+R83v0khURdMX7b5MKnGTaSg5iA==}
peerDependencies:
'@emotion/is-prop-valid': '*'
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@emotion/is-prop-valid':
optional: true
react:
optional: true
react-dom:
optional: true
function-bind@1.1.2:
resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
@@ -1226,6 +1243,26 @@ packages:
minimist@1.2.8:
resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
motion-dom@12.5.0:
resolution: {integrity: sha512-uH2PETDh7m+Hjd1UQQ56yHqwn83SAwNjimNPE/kC+Kds0t4Yh7+29rfo5wezVFpPOv57U4IuWved5d1x0kNhbQ==}
motion-utils@12.5.0:
resolution: {integrity: sha512-+hFFzvimn0sBMP9iPxBa9OtRX35ZQ3py0UHnb8U29VD+d8lQ8zH3dTygJWqK7av2v6yhg7scj9iZuvTS0f4+SA==}
motion@12.5.0:
resolution: {integrity: sha512-BTAYKszMmTvXSsIyeHNMPSicjWgUA4j7OmZv1xPpthm4sPub3ch66fy9U7BhJ1uXNL3YeprsIegzuvps3FkEMw==}
peerDependencies:
'@emotion/is-prop-valid': '*'
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@emotion/is-prop-valid':
optional: true
react:
optional: true
react-dom:
optional: true
ms@2.1.3:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -2558,6 +2595,15 @@ snapshots:
dependencies:
is-callable: 1.2.7
framer-motion@12.5.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies:
motion-dom: 12.5.0
motion-utils: 12.5.0
tslib: 2.8.1
optionalDependencies:
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
function-bind@1.1.2: {}
function.prototype.name@1.1.8:
@@ -2896,6 +2942,20 @@ snapshots:
minimist@1.2.8: {}
motion-dom@12.5.0:
dependencies:
motion-utils: 12.5.0
motion-utils@12.5.0: {}
motion@12.5.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies:
framer-motion: 12.5.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
tslib: 2.8.1
optionalDependencies:
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
ms@2.1.3: {}
nanoid@3.3.8: {}

3
public/anno.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 0C8.95431 0 0 8.95431 0 20C0 31.0457 8.95427 40 20 40C31.0457 40 40 31.0457 40 20C40 8.95431 31.0457 0 20 0ZM11.4458 21.534H8.74639V15.4295H11.4458V21.534ZM20.9742 30.6859C20.5931 31.7301 18.0676 31.6171 18.0676 31.6171C15.1613 27.8642 14.7662 24.2806 14.7662 24.2806L17.5174 24.2805C17.8916 26.7637 20.1806 28.6972 20.438 29.1058C21.2421 29.9946 20.9742 30.6859 20.9742 30.6859ZM27.3818 27.1328C27.3818 27.1328 24.151 22.9426 13.0197 22.4345L13.0168 14.6158C13.0168 14.6158 22.4134 14.2725 27.3422 8.40323V8.40319C27.3422 8.40319 31.558 7.3952 31.2363 18.4488C31.2361 18.4489 31.6849 26.0605 27.3819 27.1328H27.3818Z" fill="#2470F9"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 752 B

3
public/custom.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M31.7519 24V26.2844C31.8594 27.4312 31.0489 28.4481 29.9429 28.5595C28.8369 28.6709 27.8563 27.8305 27.7488 26.6837C27.7354 26.549 27.7354 26.4144 27.7488 26.2844V24H12.2512V26.2844C12.3587 27.4312 11.5482 28.4481 10.4422 28.5595C9.33617 28.6709 8.35554 27.8305 8.24807 26.6837C8.23464 26.549 8.23464 26.4144 8.24807 26.2844V24H0V34.8555C0 37.711 2.00157 40 4.50017 40H35.4998C37.9984 40 40 37.7156 40 34.8555V24H31.7519ZM10.2541 18.5723C11.3959 18.6094 12.296 19.603 12.2557 20.787C12.2557 20.8102 12.2557 20.8334 12.2512 20.8566H27.7533C27.7757 19.6866 28.6309 18.7115 29.7548 18.5723C30.8967 18.6094 31.7967 19.603 31.7564 20.787C31.7564 20.8102 31.7564 20.8334 31.7519 20.8566H40V12.2902C40 9.43471 37.9984 7.14568 35.4998 7.14568H30.2519V5.14452C30.2519 2.28903 28.2503 0 25.7517 0H14.2528C11.7542 0 9.7526 2.28439 9.7526 5.14452V7.4289H4.50017C2.00157 7.43355 0 9.71793 0 12.5734V21.1445C2.74936 21.1445 5.49871 20.8566 8.24807 20.8566C8.27494 19.6866 9.13019 18.7115 10.2541 18.5723ZM14.1722 3.15264C14.199 3.15264 14.2259 3.148 14.2528 3.148H25.7517C26.7458 3.17586 27.5339 4.03482 27.507 5.06558C27.507 5.09344 27.507 5.1213 27.5025 5.14916V7.43355H12.502V5.14916C12.4303 4.1184 13.1781 3.22229 14.1722 3.15264Z" fill="#2470F9"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

3
public/header/down.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.89101 9.57251C9.639 9.82467 9.29701 10.0588 8.97299 9.98677C8.649 10.0408 8.34299 9.78864 8.09101 9.57251L0.297004 1.738C-0.0990015 1.34179 -0.0990015 0.693401 0.297004 0.297167C0.69301 -0.0990669 1.341 -0.0990445 1.73699 0.297167L8.99101 7.75347L16.263 0.29719C16.659 -0.0990443 17.307 -0.0990443 17.703 0.29719C18.099 0.693423 18.099 1.34179 17.703 1.738L9.89101 9.57251Z" fill="#333333"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

6
public/header/help/01.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.1652 0H3.10234C2.27955 0 1.49046 0.326849 0.908654 0.908645C0.326853 1.49044 0 2.27952 0 3.10231V20.165C0 20.5724 0.0802442 20.9758 0.236151 21.3522C0.392058 21.7286 0.620575 22.0706 0.908654 22.3587C1.19673 22.6467 1.53873 22.8753 1.91512 23.0312C2.29152 23.1871 2.69493 23.2673 3.10234 23.2673H20.1652C20.988 23.2673 21.7771 22.9405 22.3589 22.3587C22.9407 21.7769 23.2675 20.9878 23.2675 20.165V3.10231C23.2675 2.27952 22.9407 1.49044 22.3589 0.908645C21.7771 0.326849 20.988 0 20.1652 0Z" fill="#0065F3"/>
<path opacity="0.4" d="M26.6281 6.46289H9.56523C8.74244 6.46289 7.95335 6.78974 7.37154 7.37154C6.78974 7.95333 6.46289 8.74242 6.46289 9.5652V26.6279C6.46289 27.4507 6.78974 28.2398 7.37154 28.8216C7.95335 29.4034 8.74244 29.7302 9.56523 29.7302H26.6281C27.4509 29.7302 28.24 29.4034 28.8218 28.8216C29.4036 28.2398 29.7304 27.4507 29.7304 26.6279V9.5652C29.7304 8.74242 29.4036 7.95333 28.8218 7.37154C28.24 6.78974 27.4509 6.46289 26.6281 6.46289Z" fill="#82B6FA"/>
<path opacity="0.4" d="M9.56549 6.73293H26.6283C27.3797 6.73293 28.1003 7.03141 28.6316 7.5627C29.1629 8.09399 29.4614 8.81458 29.4614 9.56594V26.6286C29.4614 27.38 29.1629 28.1006 28.6316 28.6319C28.1003 29.1632 27.3797 29.4616 26.6283 29.4616H9.56549C8.81412 29.4616 8.09352 29.1632 7.56223 28.6319C7.03093 28.1006 6.73245 27.38 6.73245 26.6286V9.56594C6.73245 8.81458 7.03093 8.09399 7.56223 7.5627C8.09352 7.03141 8.81412 6.73293 9.56549 6.73293ZM30 9.56594C30 8.67174 29.6448 7.81416 29.0125 7.18186C28.3802 6.54956 27.5226 6.19434 26.6283 6.19434H9.56549C8.67127 6.19434 7.81368 6.54956 7.18138 7.18186C6.54907 7.81416 6.19385 8.67174 6.19385 9.56594V26.6286C6.19385 27.5228 6.54907 28.3804 7.18138 29.0127C7.81368 29.645 8.67127 30.0002 9.56549 30.0002H26.6283C27.5226 30.0002 28.3802 29.645 29.0125 29.0127C29.6448 28.3804 30 27.5228 30 26.6286V9.56594Z" fill="white"/>
<path d="M18 24.6663C17.1667 24.6663 12 20.6467 12 17.333C12 14.0193 14.6863 11.333 18 11.333C21.3137 11.333 24 14.0193 24 17.333C24 20.6467 18.8333 24.6663 18 24.6663ZM18 19.1663C19.0125 19.1663 19.8333 18.3455 19.8333 17.333C19.8333 16.3205 19.0125 15.4997 18 15.4997C16.9875 15.4997 16.1667 16.3205 16.1667 17.333C16.1667 18.3455 16.9875 19.1663 18 19.1663Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

6
public/header/help/02.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.1652 0H3.10234C2.27955 0 1.49046 0.326849 0.908654 0.908645C0.326853 1.49044 0 2.27952 0 3.10231V20.165C0 20.5724 0.0802442 20.9758 0.236151 21.3522C0.392058 21.7286 0.620575 22.0706 0.908654 22.3587C1.19673 22.6467 1.53873 22.8753 1.91512 23.0312C2.29152 23.1871 2.69493 23.2673 3.10234 23.2673H20.1652C20.988 23.2673 21.7771 22.9405 22.3589 22.3587C22.9407 21.7769 23.2675 20.9878 23.2675 20.165V3.10231C23.2675 2.27952 22.9407 1.49044 22.3589 0.908645C21.7771 0.326849 20.988 0 20.1652 0Z" fill="#0065F3"/>
<path opacity="0.4" d="M26.6281 6.46289H9.56523C8.74244 6.46289 7.95335 6.78974 7.37154 7.37154C6.78974 7.95333 6.46289 8.74242 6.46289 9.5652V26.6279C6.46289 27.4507 6.78974 28.2398 7.37154 28.8216C7.95335 29.4034 8.74244 29.7302 9.56523 29.7302H26.6281C27.4509 29.7302 28.24 29.4034 28.8218 28.8216C29.4036 28.2398 29.7304 27.4507 29.7304 26.6279V9.5652C29.7304 8.74242 29.4036 7.95333 28.8218 7.37154C28.24 6.78974 27.4509 6.46289 26.6281 6.46289Z" fill="#82B6FA"/>
<path opacity="0.4" d="M9.56549 6.73293H26.6283C27.3797 6.73293 28.1003 7.03141 28.6316 7.5627C29.1629 8.09399 29.4614 8.81458 29.4614 9.56594V26.6286C29.4614 27.38 29.1629 28.1006 28.6316 28.6319C28.1003 29.1632 27.3797 29.4616 26.6283 29.4616H9.56549C8.81412 29.4616 8.09352 29.1632 7.56223 28.6319C7.03093 28.1006 6.73245 27.38 6.73245 26.6286V9.56594C6.73245 8.81458 7.03093 8.09399 7.56223 7.5627C8.09352 7.03141 8.81412 6.73293 9.56549 6.73293ZM30 9.56594C30 8.67174 29.6448 7.81416 29.0125 7.18186C28.3802 6.54956 27.5226 6.19434 26.6283 6.19434H9.56549C8.67127 6.19434 7.81368 6.54956 7.18138 7.18186C6.54907 7.81416 6.19385 8.67174 6.19385 9.56594V26.6286C6.19385 27.5228 6.54907 28.3804 7.18138 29.0127C7.81368 29.645 8.67127 30.0002 9.56549 30.0002H26.6283C27.5226 30.0002 28.3802 29.645 29.0125 29.0127C29.6448 28.3804 30 27.5228 30 26.6286V9.56594Z" fill="white"/>
<path d="M24.9907 22.1914V13.666L24.9552 13.586C24.9321 13.5342 24.481 12.5479 22.7743 12.1585V12.1466H22.7264C22.314 12.0563 21.8321 12 21.2652 12C19.438 12 18.4757 12.5746 17.9969 13.0337C17.5181 12.5761 16.5543 12 14.7271 12C11.7553 12 11.0633 13.5223 11.0355 13.586L11 13.666V22.1322C11 22.461 11.1066 22.7023 11.3182 22.8504C11.6503 23.0829 12.075 22.9556 12.2341 22.9082L12.282 22.8904C13.8266 22.2314 16.3442 22.6964 17.1057 22.9097C17.2092 22.9393 17.4254 23 17.6587 23C17.7807 23 17.9058 22.9793 18.0232 22.9334C18.3197 23.0415 18.6379 22.9467 18.7723 22.9067L18.8202 22.8889C20.3647 22.2299 22.8839 22.6949 23.6439 22.9082C23.7474 22.9378 23.9636 22.9985 24.1968 22.9985C24.4038 22.9985 24.6262 22.9496 24.7946 22.7897C24.9861 22.6135 25.0201 22.3721 24.9907 22.1914ZM15.6523 18.2464H13.3215C13.0697 18.2464 12.8643 18.0509 12.8643 17.808C12.8643 17.5666 13.0682 17.3697 13.3215 17.3697H15.6523C15.904 17.3697 16.1094 17.5652 16.1094 17.808C16.1094 18.0494 15.904 18.2464 15.6523 18.2464ZM15.6523 16.4145H13.3215C13.0697 16.4145 12.8643 16.219 12.8643 15.9762C12.8643 15.7348 13.0682 15.5378 13.3215 15.5378H15.6523C15.904 15.5378 16.1094 15.7333 16.1094 15.9762C16.1094 16.2176 15.904 16.4145 15.6523 16.4145ZM24.0779 22.113C24.0316 22.1055 23.9744 22.0922 23.9034 22.0715C23.3597 21.919 22.1518 21.6791 20.8837 21.6791C20.0512 21.6791 19.1909 21.7827 18.4773 22.0804C18.4696 22.0833 18.4618 22.0848 18.4541 22.0863V13.8644C18.5622 13.7015 18.9206 13.2795 19.818 13.0425V16.0428L21.3147 15.218L22.7758 16.0517V13.0588C23.6315 13.2987 23.9729 13.706 24.0794 13.8644V22.113H24.0779Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

6
public/header/help/03.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.1652 0H3.10234C2.27955 0 1.49046 0.326849 0.908654 0.908645C0.326853 1.49044 0 2.27952 0 3.10231V20.165C0 20.5724 0.0802442 20.9758 0.236151 21.3522C0.392058 21.7286 0.620575 22.0706 0.908654 22.3587C1.19673 22.6467 1.53873 22.8753 1.91512 23.0312C2.29152 23.1871 2.69493 23.2673 3.10234 23.2673H20.1652C20.988 23.2673 21.7771 22.9405 22.3589 22.3587C22.9407 21.7769 23.2675 20.9878 23.2675 20.165V3.10231C23.2675 2.27952 22.9407 1.49044 22.3589 0.908645C21.7771 0.326849 20.988 0 20.1652 0Z" fill="#0065F3"/>
<path opacity="0.4" d="M26.6281 6.46289H9.56523C8.74244 6.46289 7.95335 6.78974 7.37154 7.37154C6.78974 7.95333 6.46289 8.74242 6.46289 9.5652V26.6279C6.46289 27.4507 6.78974 28.2398 7.37154 28.8216C7.95335 29.4034 8.74244 29.7302 9.56523 29.7302H26.6281C27.4509 29.7302 28.24 29.4034 28.8218 28.8216C29.4036 28.2398 29.7304 27.4507 29.7304 26.6279V9.5652C29.7304 8.74242 29.4036 7.95333 28.8218 7.37154C28.24 6.78974 27.4509 6.46289 26.6281 6.46289Z" fill="#82B6FA"/>
<path opacity="0.4" d="M9.56549 6.73293H26.6283C27.3797 6.73293 28.1003 7.03141 28.6316 7.5627C29.1629 8.09399 29.4614 8.81458 29.4614 9.56594V26.6286C29.4614 27.38 29.1629 28.1006 28.6316 28.6319C28.1003 29.1632 27.3797 29.4616 26.6283 29.4616H9.56549C8.81412 29.4616 8.09352 29.1632 7.56223 28.6319C7.03093 28.1006 6.73245 27.38 6.73245 26.6286V9.56594C6.73245 8.81458 7.03093 8.09399 7.56223 7.5627C8.09352 7.03141 8.81412 6.73293 9.56549 6.73293ZM30 9.56594C30 8.67174 29.6448 7.81416 29.0125 7.18186C28.3802 6.54956 27.5226 6.19434 26.6283 6.19434H9.56549C8.67127 6.19434 7.81368 6.54956 7.18138 7.18186C6.54907 7.81416 6.19385 8.67174 6.19385 9.56594V26.6286C6.19385 27.5228 6.54907 28.3804 7.18138 29.0127C7.81368 29.645 8.67127 30.0002 9.56549 30.0002H26.6283C27.5226 30.0002 28.3802 29.645 29.0125 29.0127C29.6448 28.3804 30 27.5228 30 26.6286V9.56594Z" fill="white"/>
<path d="M12 12.9159C12 12.6077 12.2466 12.3579 12.5511 12.3579H16.421C16.7254 12.3579 16.9721 12.6075 16.9721 12.9159V16.8346C16.9721 17.1428 16.7255 17.3926 16.421 17.3926H12.5511C12.2467 17.3926 12 17.1429 12 16.8346V12.9159ZM20.3227 12.1635C20.5379 11.9456 20.8867 11.9454 21.1021 12.1635L23.8386 14.9344C24.0538 15.1523 24.0539 15.5056 23.8386 15.7236L21.1021 18.4945C20.8869 18.7125 20.5381 18.7126 20.3227 18.4945L17.5863 15.7236C17.3711 15.5057 17.3709 15.1525 17.5863 14.9344L20.3227 12.1635ZM18.326 19.5233C18.326 19.2151 18.5725 18.9653 18.8771 18.9653H22.7469C23.0513 18.9653 23.298 19.2149 23.298 19.5233V23.442C23.298 23.7502 23.0515 24 22.7469 24H18.8771C18.5727 24 18.326 23.7503 18.326 23.442V19.5233ZM12 19.5233C12 19.2151 12.2466 18.9653 12.5511 18.9653H16.421C16.7254 18.9653 16.9721 19.2149 16.9721 19.5233V23.442C16.9721 23.7502 16.7255 24 16.421 24H12.5511C12.2467 24 12 23.7503 12 23.442V19.5233Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
public/header/help/banner.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

6
public/header/solution/01.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.2313 0H4.34327C3.19137 0 2.08664 0.457589 1.27212 1.2721C0.457594 2.08662 0 3.19133 0 4.34323V28.231C0 28.8014 0.112342 29.3661 0.330612 29.8931C0.548882 30.42 0.868805 30.8988 1.27212 31.3021C1.67543 31.7054 2.15422 32.0254 2.68117 32.2436C3.20813 32.4619 3.77291 32.5742 4.34327 32.5742H28.2313C29.3832 32.5742 30.4879 32.1166 31.3024 31.3021C32.117 30.4876 32.5746 29.3829 32.5746 28.231V4.34323C32.5746 3.19133 32.117 2.08662 31.3024 1.2721C30.4879 0.457589 29.3832 0 28.2313 0Z" fill="#0065F3"/>
<path opacity="0.4" d="M37.2796 9.04883H13.3916C12.2397 9.04883 11.135 9.50642 10.3205 10.3209C9.50593 11.1354 9.04834 12.2402 9.04834 13.3921V37.2798C9.04834 38.4317 9.50593 39.5364 10.3205 40.351C11.135 41.1655 12.2397 41.6231 13.3916 41.6231H37.2796C38.4315 41.6231 39.5363 41.1655 40.3508 40.351C41.1653 39.5364 41.6229 38.4317 41.6229 37.2798V13.3921C41.6229 12.2402 41.1653 11.1354 40.3508 10.3209C39.5363 9.50642 38.4315 9.04883 37.2796 9.04883Z" fill="#82B6FA"/>
<path opacity="0.4" d="M13.3917 9.42591H37.2797C38.3316 9.42591 39.3404 9.84378 40.0843 10.5876C40.8281 11.3314 41.2459 12.3402 41.2459 13.3921V37.2799C41.2459 38.3318 40.8281 39.3406 40.0843 40.0844C39.3404 40.8282 38.3316 41.2461 37.2797 41.2461H13.3917C12.3398 41.2461 11.3309 40.8282 10.5871 40.0844C9.8433 39.3406 9.42543 38.3318 9.42543 37.2799V13.3921C9.42543 12.3402 9.8433 11.3314 10.5871 10.5876C11.3309 9.84378 12.3398 9.42591 13.3917 9.42591ZM42 13.3921C42 12.1402 41.5027 10.9396 40.6174 10.0544C39.7322 9.16919 38.5316 8.67188 37.2797 8.67188H13.3917C12.1398 8.67188 10.9392 9.16919 10.0539 10.0544C9.1687 10.9396 8.67139 12.1402 8.67139 13.3921V37.2799C8.67139 38.5318 9.1687 39.7324 10.0539 40.6176C10.9392 41.5028 12.1398 42.0001 13.3917 42.0001H37.2797C38.5316 42.0001 39.7322 41.5028 40.6174 40.6176C41.5027 39.7324 42 38.5318 42 37.2799V13.3921Z" fill="white"/>
<path d="M33.9801 20.2099C33.5729 23.766 32.8415 27.4849 31.4405 30.7936C30.2401 33.6287 27.3868 28.6913 27.236 27.3778C27.2013 24.998 34.5984 14.796 33.9801 20.2099ZM19.8343 30.7943C18.4333 27.4856 17.7004 23.7667 17.2947 20.2107C16.6764 14.7967 24.0751 24.9988 24.0389 27.3785C23.8881 28.6906 21.0348 33.6295 19.8343 30.7943ZM25.6374 24.7319C19.5493 13.2027 12.4643 11.7731 16.049 27.0422C17.7637 34.3488 21.0272 37.3288 25.6374 29.6768C30.2476 37.3288 33.5111 34.3488 35.2258 27.0437C38.8105 11.7738 31.7255 13.205 25.6374 24.7296V24.7311V24.7319Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

6
public/header/solution/02.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.2312 0H4.34327C3.19136 0 2.08663 0.457593 1.27211 1.27211C0.457593 2.08663 0 3.19136 0 4.34327V28.2312C0 28.8016 0.112342 29.3664 0.330611 29.8933C0.548881 30.4203 0.868804 30.8991 1.27211 31.3024C1.67542 31.7057 2.15422 32.0256 2.68117 32.2439C3.20812 32.4622 3.7729 32.5745 4.34327 32.5745H28.2312C29.3831 32.5745 30.4879 32.1169 31.3024 31.3024C32.1169 30.4879 32.5745 29.3831 32.5745 28.2312V4.34327C32.5745 3.19136 32.1169 2.08663 31.3024 1.27211C30.4879 0.457593 29.3831 0 28.2312 0Z" fill="#0065F3"/>
<path opacity="0.4" d="M37.2796 9.04883H13.3916C12.2397 9.04883 11.135 9.50642 10.3205 10.3209C9.50593 11.1355 9.04834 12.2402 9.04834 13.3921V37.2801C9.04834 38.432 9.50593 39.5367 10.3205 40.3512C11.135 41.1657 12.2397 41.6233 13.3916 41.6233H37.2796C38.4315 41.6233 39.5362 41.1657 40.3507 40.3512C41.1653 39.5367 41.6228 38.432 41.6228 37.2801V13.3921C41.6228 12.2402 41.1653 11.1355 40.3507 10.3209C39.5362 9.50642 38.4315 9.04883 37.2796 9.04883Z" fill="#82B6FA"/>
<path opacity="0.4" d="M13.3917 9.42591H37.2796C38.3316 9.42591 39.3404 9.84379 40.0842 10.5876C40.828 11.3314 41.2459 12.3402 41.2459 13.3922V37.2801C41.2459 38.332 40.828 39.3409 40.0842 40.0847C39.3404 40.8285 38.3316 41.2464 37.2796 41.2464H13.3917C12.3398 41.2464 11.3309 40.8285 10.5871 40.0847C9.8433 39.3409 9.42543 38.332 9.42543 37.2801V13.3922C9.42543 12.3402 9.8433 11.3314 10.5871 10.5876C11.3309 9.84379 12.3398 9.42591 13.3917 9.42591ZM41.9999 13.3922C41.9999 12.1403 41.5026 10.9396 40.6174 10.0544C39.7322 9.16919 38.5315 8.67188 37.2796 8.67188H13.3917C12.1398 8.67188 10.9392 9.16919 10.0539 10.0544C9.1687 10.9396 8.67139 12.1403 8.67139 13.3922V37.2801C8.67139 38.532 9.1687 39.7327 10.0539 40.6179C10.9392 41.5031 12.1398 42.0004 13.3917 42.0004H37.2796C38.5315 42.0004 39.7322 41.5031 40.6174 40.6179C41.5026 39.7327 41.9999 38.532 41.9999 37.2801V13.3922Z" fill="white"/>
<path d="M24.5815 18.5496L25.7879 22.3198H16.287L17.4935 18.5496H24.5815ZM27.8238 15.0811L31.4432 20.8872L28.5779 23.8279L23.6766 15.9859L27.8238 15.0811ZM33.3283 19.6053L36.1937 22.4706L32.6497 28.2767L28.5779 27.3719L33.3283 19.6053ZM18.6246 22.9231L22.6964 23.8279L17.9459 31.6699L15.0806 28.7292L18.6246 22.9231ZM34.9872 28.9554L33.7807 32.7256H26.6928L25.4863 28.9554H34.9872ZM22.7718 27.4473L27.5976 35.2893L23.4504 36.1942L19.831 30.3881L22.7718 27.4473Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

8
public/header/solution/03.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.2313 0H4.34327C3.19137 0 2.08664 0.457589 1.27212 1.2721C0.457594 2.08662 0 3.19133 0 4.34323V28.231C0 28.8014 0.112342 29.3661 0.330612 29.8931C0.548882 30.42 0.868805 30.8988 1.27212 31.3021C1.67543 31.7054 2.15422 32.0254 2.68117 32.2436C3.20813 32.4619 3.77291 32.5742 4.34327 32.5742H28.2313C29.3832 32.5742 30.4879 32.1166 31.3024 31.3021C32.117 30.4876 32.5746 29.3829 32.5746 28.231V4.34323C32.5746 3.19133 32.117 2.08662 31.3024 1.2721C30.4879 0.457589 29.3832 0 28.2313 0Z" fill="#0065F3"/>
<path opacity="0.4" d="M37.2796 9.04883H13.3916C12.2397 9.04883 11.135 9.50642 10.3205 10.3209C9.50593 11.1354 9.04834 12.2402 9.04834 13.3921V37.2798C9.04834 38.4317 9.50593 39.5364 10.3205 40.351C11.135 41.1655 12.2397 41.6231 13.3916 41.6231H37.2796C38.4315 41.6231 39.5363 41.1655 40.3508 40.351C41.1653 39.5364 41.6229 38.4317 41.6229 37.2798V13.3921C41.6229 12.2402 41.1653 11.1354 40.3508 10.3209C39.5363 9.50642 38.4315 9.04883 37.2796 9.04883Z" fill="#82B6FA"/>
<path opacity="0.4" d="M13.3917 9.42591H37.2797C38.3316 9.42591 39.3404 9.84378 40.0843 10.5876C40.8281 11.3314 41.2459 12.3402 41.2459 13.3921V37.2799C41.2459 38.3318 40.8281 39.3406 40.0843 40.0844C39.3404 40.8282 38.3316 41.2461 37.2797 41.2461H13.3917C12.3398 41.2461 11.3309 40.8282 10.5871 40.0844C9.8433 39.3406 9.42543 38.3318 9.42543 37.2799V13.3921C9.42543 12.3402 9.8433 11.3314 10.5871 10.5876C11.3309 9.84378 12.3398 9.42591 13.3917 9.42591ZM42 13.3921C42 12.1402 41.5027 10.9396 40.6174 10.0544C39.7322 9.16919 38.5316 8.67188 37.2797 8.67188H13.3917C12.1398 8.67188 10.9392 9.16919 10.0539 10.0544C9.1687 10.9396 8.67139 12.1402 8.67139 13.3921V37.2799C8.67139 38.5318 9.1687 39.7324 10.0539 40.6176C10.9392 41.5028 12.1398 42.0001 13.3917 42.0001H37.2797C38.5316 42.0001 39.7322 41.5028 40.6174 40.6176C41.5027 39.7324 42 38.5318 42 37.2799V13.3921Z" fill="white"/>
<path d="M31.1457 34.6113H18.7271C17.9709 34.6113 17.356 33.9961 17.356 33.2396V16.7252C17.356 15.9688 17.9709 15.3535 18.7271 15.3535H31.1457C31.9019 15.3535 32.5174 15.9688 32.5174 16.7252V19.421H31.3122V16.7252C31.3122 16.6334 31.2375 16.5587 31.1457 16.5587H18.7271C18.6359 16.5587 18.5612 16.6334 18.5612 16.7252V33.2396C18.5612 33.3314 18.6359 33.4061 18.7271 33.4061H31.1457C31.2375 33.4061 31.3122 33.3314 31.3122 33.2396V30.735H32.5174V33.2396C32.5174 33.9961 31.9019 34.6113 31.1457 34.6113Z" fill="white"/>
<path d="M24.5711 27.049H21.9171C21.584 27.049 21.3145 26.7792 21.3145 26.4464C21.3145 26.1136 21.584 25.8438 21.9171 25.8438H24.5711C24.9042 25.8438 25.1737 26.1136 25.1737 26.4464C25.1737 26.7792 24.9041 27.049 24.5711 27.049ZM26.2723 32.4065C26.131 32.4065 25.9941 32.3568 25.8857 32.2661C25.7109 32.1199 25.6333 31.8874 25.6856 31.6656L26.6272 27.6749C26.6483 27.5852 26.6898 27.5017 26.7484 27.4306L32.8621 19.9861C32.958 19.8687 33.0957 19.7922 33.2458 19.7717C34.89 19.548 36.3694 20.7141 36.5883 22.3094C36.6101 22.4686 36.5671 22.6296 36.47 22.7573L30.5317 30.5272C30.4692 30.6087 30.387 30.6729 30.2928 30.7137L26.5124 32.3564C26.4367 32.3894 26.355 32.4065 26.2723 32.4065ZM27.7682 28.0876L27.135 30.772L29.669 29.6709L35.3466 22.2423C35.1365 21.4847 34.4204 20.9483 33.6306 20.9492L27.7682 28.0876Z" fill="white"/>
<path d="M34.5175 24.8725C34.2209 24.8725 33.9619 24.6536 33.9208 24.3514C33.8572 23.8854 33.6159 23.4717 33.2411 23.1872C32.8662 22.9026 32.4037 22.7814 31.9364 22.8447C31.6057 22.8891 31.3026 22.6587 31.2573 22.3294C31.2126 21.9996 31.4433 21.6957 31.7728 21.6506C32.559 21.5427 33.3388 21.748 33.9696 22.2274C34.6011 22.7067 35.0083 23.4031 35.1154 24.1885C35.1601 24.5183 34.9294 24.8219 34.5993 24.867C34.5716 24.8708 34.5445 24.8725 34.5175 24.8725ZM29.7908 30.3674C29.4942 30.3674 29.2359 30.1485 29.1941 29.8463C29.1417 29.4618 28.9428 29.121 28.6339 28.8862C28.3243 28.6511 27.9389 28.5514 27.5582 28.6037C27.4797 28.6145 27.4 28.6097 27.3234 28.5897C27.2468 28.5696 27.1749 28.5347 27.1119 28.4868C27.0488 28.439 26.9958 28.3792 26.9559 28.3108C26.9159 28.2425 26.8898 28.167 26.8791 28.0885C26.8343 27.7587 27.065 27.4547 27.3946 27.4097C28.0978 27.3124 28.7963 27.4965 29.3624 27.9264C29.9279 28.3557 30.2922 28.9798 30.3887 29.6833C30.4334 30.0131 30.2028 30.3168 29.8732 30.3618C29.8459 30.3656 29.8184 30.3674 29.7908 30.3674ZM27.7176 23.7886H21.9171C21.584 23.7886 21.3145 23.5187 21.3145 23.186C21.3145 22.8532 21.584 22.5834 21.9171 22.5834H27.7177C28.0507 22.5834 28.3203 22.8532 28.3203 23.186C28.3202 23.5187 28.0507 23.7886 27.7176 23.7886ZM27.7176 20.6476H21.9171C21.584 20.6476 21.3145 20.3778 21.3145 20.045C21.3145 19.7122 21.584 19.4424 21.9171 19.4424H27.7177C28.0507 19.4424 28.3203 19.7122 28.3203 20.045C28.3202 20.3778 28.0507 20.6476 27.7176 20.6476Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

6
public/header/solution/04.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.2313 0H4.34327C3.19137 0 2.08664 0.457589 1.27212 1.2721C0.457594 2.08662 0 3.19133 0 4.34323V28.231C0 28.8014 0.112342 29.3661 0.330612 29.8931C0.548882 30.42 0.868805 30.8988 1.27212 31.3021C1.67543 31.7054 2.15422 32.0254 2.68117 32.2436C3.20813 32.4619 3.77291 32.5742 4.34327 32.5742H28.2313C29.3832 32.5742 30.4879 32.1166 31.3024 31.3021C32.117 30.4876 32.5746 29.3829 32.5746 28.231V4.34323C32.5746 3.19133 32.117 2.08662 31.3024 1.2721C30.4879 0.457589 29.3832 0 28.2313 0Z" fill="#0065F3"/>
<path opacity="0.4" d="M37.2796 9.04883H13.3916C12.2397 9.04883 11.135 9.50642 10.3205 10.3209C9.50593 11.1354 9.04834 12.2402 9.04834 13.3921V37.2798C9.04834 38.4317 9.50593 39.5364 10.3205 40.351C11.135 41.1655 12.2397 41.6231 13.3916 41.6231H37.2796C38.4315 41.6231 39.5363 41.1655 40.3508 40.351C41.1653 39.5364 41.6229 38.4317 41.6229 37.2798V13.3921C41.6229 12.2402 41.1653 11.1354 40.3508 10.3209C39.5363 9.50642 38.4315 9.04883 37.2796 9.04883Z" fill="#82B6FA"/>
<path opacity="0.4" d="M13.3917 9.42591H37.2797C38.3316 9.42591 39.3404 9.84378 40.0843 10.5876C40.8281 11.3314 41.2459 12.3402 41.2459 13.3921V37.2799C41.2459 38.3318 40.8281 39.3406 40.0843 40.0844C39.3404 40.8282 38.3316 41.2461 37.2797 41.2461H13.3917C12.3398 41.2461 11.3309 40.8282 10.5871 40.0844C9.8433 39.3406 9.42543 38.3318 9.42543 37.2799V13.3921C9.42543 12.3402 9.8433 11.3314 10.5871 10.5876C11.3309 9.84378 12.3398 9.42591 13.3917 9.42591ZM42 13.3921C42 12.1402 41.5027 10.9396 40.6174 10.0544C39.7322 9.16919 38.5316 8.67188 37.2797 8.67188H13.3917C12.1398 8.67188 10.9392 9.16919 10.0539 10.0544C9.1687 10.9396 8.67139 12.1402 8.67139 13.3921V37.2799C8.67139 38.5318 9.1687 39.7324 10.0539 40.6176C10.9392 41.5028 12.1398 42.0001 13.3917 42.0001H37.2797C38.5316 42.0001 39.7322 41.5028 40.6174 40.6176C41.5027 39.7324 42 38.5318 42 37.2799V13.3921Z" fill="white"/>
<path d="M17.684 30.156C16.472 30.156 15.344 29.676 14.54 28.86L15.356 27.9C15.992 28.536 16.856 28.944 17.708 28.944C18.776 28.944 19.376 28.44 19.376 27.696C19.376 26.892 18.776 26.64 17.96 26.28L16.736 25.752C15.884 25.392 14.936 24.72 14.936 23.436C14.936 22.044 16.16 21 17.84 21C18.872 21 19.844 21.432 20.516 22.116L19.784 23.004C19.232 22.512 18.62 22.212 17.84 22.212C16.94 22.212 16.352 22.644 16.352 23.352C16.352 24.108 17.06 24.396 17.78 24.684L18.992 25.2C20.036 25.644 20.792 26.292 20.792 27.588C20.792 29.004 19.616 30.156 17.684 30.156ZM22.4648 30V21.168H27.6848V22.332H23.8568V24.792H27.0968V25.968H23.8568V28.824H27.8168V30H22.4648ZM33.0201 30.156C30.7521 30.156 29.1801 28.392 29.1801 25.548C29.1801 22.704 30.7521 21 33.0201 21C35.2881 21 36.8721 22.704 36.8721 25.548C36.8721 28.392 35.2881 30.156 33.0201 30.156ZM33.0201 28.944C34.4841 28.944 35.4441 27.624 35.4441 25.548C35.4441 23.472 34.4841 22.212 33.0201 22.212C31.5561 22.212 30.6081 23.472 30.6081 25.548C30.6081 27.624 31.5561 28.944 33.0201 28.944Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

7
public/header/solution/05.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.2313 0H4.34327C3.19137 0 2.08664 0.457589 1.27212 1.2721C0.457594 2.08662 0 3.19133 0 4.34323V28.231C0 28.8014 0.112342 29.3661 0.330612 29.8931C0.548882 30.42 0.868805 30.8988 1.27212 31.3021C1.67543 31.7054 2.15422 32.0254 2.68117 32.2436C3.20813 32.4619 3.77291 32.5742 4.34327 32.5742H28.2313C29.3832 32.5742 30.4879 32.1166 31.3024 31.3021C32.117 30.4876 32.5746 29.3829 32.5746 28.231V4.34323C32.5746 3.19133 32.117 2.08662 31.3024 1.2721C30.4879 0.457589 29.3832 0 28.2313 0Z" fill="#0065F3"/>
<path opacity="0.4" d="M37.2796 9.04883H13.3916C12.2397 9.04883 11.135 9.50642 10.3205 10.3209C9.50593 11.1354 9.04834 12.2402 9.04834 13.3921V37.2798C9.04834 38.4317 9.50593 39.5364 10.3205 40.351C11.135 41.1655 12.2397 41.6231 13.3916 41.6231H37.2796C38.4315 41.6231 39.5363 41.1655 40.3508 40.351C41.1653 39.5364 41.6229 38.4317 41.6229 37.2798V13.3921C41.6229 12.2402 41.1653 11.1354 40.3508 10.3209C39.5363 9.50642 38.4315 9.04883 37.2796 9.04883Z" fill="#82B6FA"/>
<path opacity="0.4" d="M13.3917 9.42591H37.2797C38.3316 9.42591 39.3404 9.84378 40.0843 10.5876C40.8281 11.3314 41.2459 12.3402 41.2459 13.3921V37.2799C41.2459 38.3318 40.8281 39.3406 40.0843 40.0844C39.3404 40.8282 38.3316 41.2461 37.2797 41.2461H13.3917C12.3398 41.2461 11.3309 40.8282 10.5871 40.0844C9.8433 39.3406 9.42543 38.3318 9.42543 37.2799V13.3921C9.42543 12.3402 9.8433 11.3314 10.5871 10.5876C11.3309 9.84378 12.3398 9.42591 13.3917 9.42591ZM42 13.3921C42 12.1402 41.5027 10.9396 40.6174 10.0544C39.7322 9.16919 38.5316 8.67188 37.2797 8.67188H13.3917C12.1398 8.67188 10.9392 9.16919 10.0539 10.0544C9.1687 10.9396 8.67139 12.1402 8.67139 13.3921V37.2799C8.67139 38.5318 9.1687 39.7324 10.0539 40.6176C10.9392 41.5028 12.1398 42.0001 13.3917 42.0001H37.2797C38.5316 42.0001 39.7322 41.5028 40.6174 40.6176C41.5027 39.7324 42 38.5318 42 37.2799V13.3921Z" fill="white"/>
<path d="M24.4888 19.7439C24.2723 19.8401 24.0737 19.9785 23.8993 20.1529C23.1293 20.9229 23.1293 22.1742 23.8993 22.9442C24.6693 23.7142 25.9205 23.7142 26.6905 22.9442C27.4605 22.1742 27.4605 20.9229 26.6905 20.1529C26.5161 19.9785 26.3176 19.8401 26.101 19.7439L26.101 15.5931C26.101 15.1479 25.7401 14.787 25.2949 14.787C24.8498 14.787 24.4888 15.1479 24.4888 15.5931L24.4888 19.7439Z" fill="white"/>
<path d="M32.773 32.6355L32.773 19.9546C32.773 18.3785 31.4917 17.0972 29.9156 17.0972L28.2914 17.0972L28.2914 17.1092C28.1109 17.1212 27.9424 17.1934 27.8041 17.3318C27.5093 17.6265 27.5093 18.1078 27.8041 18.4025C27.9364 18.5349 28.1109 18.6131 28.2914 18.6251L28.2914 18.6372L29.9156 18.6251C30.6495 18.6251 31.245 19.2207 31.239 19.9486L31.239 32.6295C31.239 33.3634 30.6375 33.953 29.9156 33.953H20.6756C19.9417 33.953 19.3461 33.3574 19.3521 32.6295L19.3461 19.9546C19.3461 19.2207 19.9477 18.6311 20.6695 18.6311H22.2938L22.2938 18.6191C22.4742 18.6071 22.6427 18.5349 22.781 18.3965C23.0758 18.1018 23.0758 17.6205 22.781 17.3258C22.6487 17.1934 22.4742 17.1152 22.2938 17.1032L22.2938 17.0911L20.6695 17.0911C19.0934 17.0911 17.8121 18.3725 17.8121 19.9486L17.8121 32.6295C17.8121 34.2056 19.0934 35.487 20.6695 35.487H29.9096C31.4917 35.493 32.773 34.2116 32.773 32.6355Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

8
public/header/solution/06.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.2313 0H4.34327C3.19137 0 2.08664 0.457589 1.27212 1.2721C0.457594 2.08662 0 3.19133 0 4.34323V28.231C0 28.8014 0.112342 29.3661 0.330612 29.8931C0.548882 30.42 0.868805 30.8988 1.27212 31.3021C1.67543 31.7054 2.15422 32.0254 2.68117 32.2436C3.20813 32.4619 3.77291 32.5742 4.34327 32.5742H28.2313C29.3832 32.5742 30.4879 32.1166 31.3024 31.3021C32.117 30.4876 32.5746 29.3829 32.5746 28.231V4.34323C32.5746 3.19133 32.117 2.08662 31.3024 1.2721C30.4879 0.457589 29.3832 0 28.2313 0Z" fill="#0065F3"/>
<path opacity="0.4" d="M37.2796 9.04883H13.3916C12.2397 9.04883 11.135 9.50642 10.3205 10.3209C9.50593 11.1354 9.04834 12.2402 9.04834 13.3921V37.2798C9.04834 38.4317 9.50593 39.5364 10.3205 40.351C11.135 41.1655 12.2397 41.6231 13.3916 41.6231H37.2796C38.4315 41.6231 39.5363 41.1655 40.3508 40.351C41.1653 39.5364 41.6229 38.4317 41.6229 37.2798V13.3921C41.6229 12.2402 41.1653 11.1354 40.3508 10.3209C39.5363 9.50642 38.4315 9.04883 37.2796 9.04883Z" fill="#82B6FA"/>
<path opacity="0.4" d="M13.3917 9.42591H37.2797C38.3316 9.42591 39.3404 9.84378 40.0843 10.5876C40.8281 11.3314 41.2459 12.3402 41.2459 13.3921V37.2799C41.2459 38.3318 40.8281 39.3406 40.0843 40.0844C39.3404 40.8282 38.3316 41.2461 37.2797 41.2461H13.3917C12.3398 41.2461 11.3309 40.8282 10.5871 40.0844C9.8433 39.3406 9.42543 38.3318 9.42543 37.2799V13.3921C9.42543 12.3402 9.8433 11.3314 10.5871 10.5876C11.3309 9.84378 12.3398 9.42591 13.3917 9.42591ZM42 13.3921C42 12.1402 41.5027 10.9396 40.6174 10.0544C39.7322 9.16919 38.5316 8.67188 37.2797 8.67188H13.3917C12.1398 8.67188 10.9392 9.16919 10.0539 10.0544C9.1687 10.9396 8.67139 12.1402 8.67139 13.3921V37.2799C8.67139 38.5318 9.1687 39.7324 10.0539 40.6176C10.9392 41.5028 12.1398 42.0001 13.3917 42.0001H37.2797C38.5316 42.0001 39.7322 41.5028 40.6174 40.6176C41.5027 39.7324 42 38.5318 42 37.2799V13.3921Z" fill="white"/>
<path d="M33.6663 35.8333H32.583V33.9429C30.373 32.3557 27.7206 31.5019 24.9997 31.5019C22.2787 31.5019 19.6264 32.3557 17.4163 33.9429V35.8333H16.333V33.3958L16.5497 33.2333C18.9874 31.405 21.9525 30.4167 24.9997 30.4167C28.0469 30.4167 31.0119 31.405 33.4497 33.2333L33.6663 33.3958V35.8333ZM24.9997 21.2083C25.4282 21.2083 25.8471 21.3354 26.2034 21.5735C26.5597 21.8116 26.8374 22.1499 27.0014 22.5459C27.1654 22.9418 27.2083 23.3774 27.1247 23.7977C27.0411 24.218 26.8348 24.6041 26.5317 24.9071C26.2287 25.2101 25.8427 25.4164 25.4224 25.5C25.0021 25.5836 24.5664 25.5407 24.1705 25.3767C23.7746 25.2127 23.4362 24.935 23.1982 24.5787C22.9601 24.2224 22.833 23.8035 22.833 23.375C22.833 22.8004 23.0613 22.2493 23.4676 21.8429C23.8739 21.4366 24.425 21.2083 24.9997 21.2083ZM24.9997 20.125C24.3569 20.125 23.7285 20.3156 23.1941 20.6727C22.6596 21.0298 22.2431 21.5374 21.9971 22.1313C21.7511 22.7251 21.6867 23.3786 21.8121 24.009C21.9375 24.6395 22.2471 25.2186 22.7016 25.6731C23.1561 26.1276 23.7352 26.4372 24.3656 26.5626C24.9961 26.688 25.6495 26.6236 26.2434 26.3776C26.8373 26.1316 27.3448 25.7151 27.702 25.1806C28.0591 24.6461 28.2497 24.0178 28.2497 23.375C28.2497 22.513 27.9073 21.6864 27.2978 21.0769C26.6883 20.4674 25.8616 20.125 24.9997 20.125Z" fill="white"/>
<path d="M24.9998 15.2503C26.2854 15.2503 27.5421 15.6315 28.611 16.3458C29.68 17.06 30.5131 18.0752 31.0051 19.2629C31.497 20.4506 31.6258 21.7575 31.3749 23.0184C31.1241 24.2793 30.5051 25.4375 29.596 26.3465C28.687 27.2556 27.5288 27.8746 26.2679 28.1254C25.0071 28.3762 23.7001 28.2475 22.5124 27.7555C21.3247 27.2636 20.3095 26.4305 19.5953 25.3615C18.8811 24.2926 18.4998 23.0359 18.4998 21.7503C18.4998 20.0264 19.1847 18.3731 20.4036 17.1541C21.6226 15.9351 23.2759 15.2503 24.9998 15.2503ZM24.9998 14.167C23.5 14.167 22.0338 14.6117 20.7868 15.445C19.5397 16.2783 18.5677 17.4626 17.9938 18.8483C17.4198 20.234 17.2696 21.7587 17.5622 23.2298C17.8548 24.7008 18.5771 26.052 19.6376 27.1126C20.6982 28.1731 22.0494 28.8953 23.5204 29.1879C24.9914 29.4806 26.5162 29.3304 27.9019 28.7564C29.2875 28.1824 30.4719 27.2105 31.3052 25.9634C32.1384 24.7163 32.5832 23.2502 32.5832 21.7503C32.5832 19.7391 31.7842 17.8103 30.3621 16.3881C28.9399 14.9659 27.0111 14.167 24.9998 14.167Z" fill="white"/>
<path d="M20.6665 27.708H21.7498V31.4997H20.6665V27.708ZM28.2498 27.708H29.3332V31.4997H28.2498V27.708Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

8
public/header/solution/07.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.2313 0H4.34327C3.19137 0 2.08664 0.457589 1.27212 1.2721C0.457594 2.08662 0 3.19133 0 4.34323V28.231C0 28.8014 0.112342 29.3661 0.330612 29.8931C0.548882 30.42 0.868805 30.8988 1.27212 31.3021C1.67543 31.7054 2.15422 32.0254 2.68117 32.2436C3.20813 32.4619 3.77291 32.5742 4.34327 32.5742H28.2313C29.3832 32.5742 30.4879 32.1166 31.3024 31.3021C32.117 30.4876 32.5746 29.3829 32.5746 28.231V4.34323C32.5746 3.19133 32.117 2.08662 31.3024 1.2721C30.4879 0.457589 29.3832 0 28.2313 0Z" fill="#0065F3"/>
<path opacity="0.4" d="M37.2796 9.04883H13.3916C12.2397 9.04883 11.135 9.50642 10.3205 10.3209C9.50593 11.1354 9.04834 12.2402 9.04834 13.3921V37.2798C9.04834 38.4317 9.50593 39.5364 10.3205 40.351C11.135 41.1655 12.2397 41.6231 13.3916 41.6231H37.2796C38.4315 41.6231 39.5363 41.1655 40.3508 40.351C41.1653 39.5364 41.6229 38.4317 41.6229 37.2798V13.3921C41.6229 12.2402 41.1653 11.1354 40.3508 10.3209C39.5363 9.50642 38.4315 9.04883 37.2796 9.04883Z" fill="#82B6FA"/>
<path opacity="0.4" d="M13.3917 9.42591H37.2797C38.3316 9.42591 39.3404 9.84378 40.0843 10.5876C40.8281 11.3314 41.2459 12.3402 41.2459 13.3921V37.2799C41.2459 38.3318 40.8281 39.3406 40.0843 40.0844C39.3404 40.8282 38.3316 41.2461 37.2797 41.2461H13.3917C12.3398 41.2461 11.3309 40.8282 10.5871 40.0844C9.8433 39.3406 9.42543 38.3318 9.42543 37.2799V13.3921C9.42543 12.3402 9.8433 11.3314 10.5871 10.5876C11.3309 9.84378 12.3398 9.42591 13.3917 9.42591ZM42 13.3921C42 12.1402 41.5027 10.9396 40.6174 10.0544C39.7322 9.16919 38.5316 8.67188 37.2797 8.67188H13.3917C12.1398 8.67188 10.9392 9.16919 10.0539 10.0544C9.1687 10.9396 8.67139 12.1402 8.67139 13.3921V37.2799C8.67139 38.5318 9.1687 39.7324 10.0539 40.6176C10.9392 41.5028 12.1398 42.0001 13.3917 42.0001H37.2797C38.5316 42.0001 39.7322 41.5028 40.6174 40.6176C41.5027 39.7324 42 38.5318 42 37.2799V13.3921Z" fill="white"/>
<rect x="17.5" y="26.5" width="3" height="7" rx="0.5" stroke="white"/>
<rect x="24.5" y="22.5" width="3" height="11" rx="0.5" stroke="white"/>
<rect x="31.5" y="17.5" width="3" height="16" rx="0.5" stroke="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

15
public/header/solution/08.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.2312 0H4.34327C3.19136 0 2.08663 0.457593 1.27211 1.27211C0.457593 2.08663 0 3.19136 0 4.34327V28.2312C0 28.8016 0.112342 29.3664 0.330611 29.8933C0.548881 30.4203 0.868804 30.8991 1.27211 31.3024C1.67542 31.7057 2.15422 32.0256 2.68117 32.2439C3.20812 32.4622 3.7729 32.5745 4.34327 32.5745H28.2312C29.3831 32.5745 30.4879 32.1169 31.3024 31.3024C32.1169 30.4879 32.5745 29.3831 32.5745 28.2312V4.34327C32.5745 3.19136 32.1169 2.08663 31.3024 1.27211C30.4879 0.457593 29.3831 0 28.2312 0Z" fill="#0065F3"/>
<path opacity="0.4" d="M37.2796 9.04883H13.3916C12.2397 9.04883 11.135 9.50642 10.3205 10.3209C9.50593 11.1355 9.04834 12.2402 9.04834 13.3921V37.2801C9.04834 38.432 9.50593 39.5367 10.3205 40.3512C11.135 41.1657 12.2397 41.6233 13.3916 41.6233H37.2796C38.4315 41.6233 39.5362 41.1657 40.3507 40.3512C41.1653 39.5367 41.6228 38.432 41.6228 37.2801V13.3921C41.6228 12.2402 41.1653 11.1355 40.3507 10.3209C39.5362 9.50642 38.4315 9.04883 37.2796 9.04883Z" fill="#82B6FA"/>
<path opacity="0.4" d="M13.3917 9.42591H37.2796C38.3316 9.42591 39.3404 9.84379 40.0842 10.5876C40.828 11.3314 41.2459 12.3402 41.2459 13.3922V37.2801C41.2459 38.332 40.828 39.3409 40.0842 40.0847C39.3404 40.8285 38.3316 41.2464 37.2796 41.2464H13.3917C12.3398 41.2464 11.3309 40.8285 10.5871 40.0847C9.8433 39.3409 9.42543 38.332 9.42543 37.2801V13.3922C9.42543 12.3402 9.8433 11.3314 10.5871 10.5876C11.3309 9.84379 12.3398 9.42591 13.3917 9.42591ZM41.9999 13.3922C41.9999 12.1403 41.5026 10.9396 40.6174 10.0544C39.7322 9.16919 38.5315 8.67188 37.2796 8.67188H13.3917C12.1398 8.67188 10.9392 9.16919 10.0539 10.0544C9.1687 10.9396 8.67139 12.1403 8.67139 13.3922V37.2801C8.67139 38.532 9.1687 39.7327 10.0539 40.6179C10.9392 41.5031 12.1398 42.0004 13.3917 42.0004H37.2796C38.5315 42.0004 39.7322 41.5031 40.6174 40.6179C41.5026 39.7327 41.9999 38.532 41.9999 37.2801V13.3922Z" fill="white"/>
<g clip-path="url(#clip0_167_13)">
<path d="M27.8046 30.2385H29.1637L29.1704 34.3042L27.8046 34.3137V30.2385ZM30.6618 32.148L32.0208 32.1432V34.8575H30.6618V32.148ZM32.5665 29.2861H33.9256V34.7147H32.5665V29.2861ZM24.9475 32.1432H26.3065V34.8613L24.9475 34.8575V32.1432ZM24.9589 30.2804L23.9951 29.3213L27.8361 25.4794L30.7199 28.3632L33.6065 25.4766L34.5684 26.4385L30.7208 30.2842L27.838 27.4004L24.9589 30.2804Z" fill="white"/>
<path d="M33.0943 15L15.4238 15.0019V32.6629H23.58V31.3048L16.7829 31.3057V16.3619H31.7353V23.1619H33.0943V15Z" fill="white"/>
<path d="M18.2808 21.0379H25.9541V19.7617H18.2808V21.0379ZM18.2808 25H22.117V23H18.2808V25Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_167_13">
<rect width="20" height="20" fill="white" transform="translate(15 15)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

3
public/prod.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30 40H10C4.4 40 0 35.6 0 30V10C0 4.4 4.4 0 10 0H30C35.6 0 40 4.4 40 10V30C40 35.6 35.6 40 30 40ZM6 13.4V25.6C6 26.8 6.6 28 7.4 28.6L16.4 34C17.2 34.4 18 34 18 32.8V20.6C18 19.4 17.4 18 16.6 17.6L7.6 12.2C6.6 11.6 6 12.2 6 13.4ZM31.4 8.4L21.6 6.4C20.8 6 19.2 6 18.4 6.4L8.6 8.4C7.8 8.8 7.8 9.4 8.6 9.8L18.4 15.8C19.2 16.2 20.8 16.2 21.6 15.8L31.4 9.8C32.2 9.2 32.2 8.6 31.4 8.4ZM34 13.4C34 12.2 33.4 11.8 32.4 12.2L23.4 17.6C22.6 18 22 19.4 22 20.4V32.6C22 33.8 22.6 34.2 23.4 33.8L32.4 28.4C33.2 28 34 26.6 34 25.4V13.4Z" fill="#2470F9"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 652 B

12
src/app/(home)/footer.tsx
View File

@@ -14,12 +14,12 @@ export default function Footer(props: FooterProps) {
<div className={`flex flex-col gap-2 lg:gap-4 max-lg:w-1/2`}>
<h3>商务合作</h3>
<p className={`text-sm text-gray-400 font-light`}>大客户经理:张经理</p>
<p className={`text-sm text-gray-400 font-light`}>电话/微信:18751847847</p>
<p className={`text-sm text-gray-400 font-light`}>QQ号:800180559</p>
<p className={`text-sm text-gray-500 font-light`}>大客户经理:张经理</p>
<p className={`text-sm text-gray-500 font-light`}>电话/微信:18751847847</p>
<p className={`text-sm text-gray-500 font-light`}>QQ号:800180559</p>
<h3 className={`hidden sm:block`}>服务保障</h3>
<p className={`text-sm text-gray-400 font-light hidden sm:block`}>售前服务</p>
<p className={`text-sm text-gray-400 font-light hidden sm:block`}>技术支持</p>
<p className={`text-sm text-gray-500 font-light hidden sm:block`}>售前服务</p>
<p className={`text-sm text-gray-500 font-light hidden sm:block`}>技术支持</p>
</div>
<SiteNavList
@@ -114,7 +114,7 @@ function SiteNavList(props: {
].join(' ')}>
{props.items.map((item, index) => (
<li key={index}>
<a href={item.href} className={`text-sm text-gray-400`}>{item.name}</a>
<a href={item.href} className={`text-sm text-gray-500`}>{item.name}</a>
</li>
))}
</ul>

487
src/app/(home)/header.tsx
View File

@@ -11,12 +11,15 @@ export default function Header(props: HeaderProps) {
// 滚动条状态
// ======================
const [scroll, setScroll] = useState(window.scrollY > 48)
const [scroll, setScroll] = useState(false) // Changed to false for client-side rendering
const handleScroll = useCallback(() => {
setScroll(window.scrollY > 48)
}, [])
useEffect(() => {
// Initialize scroll state on client
setScroll(window.scrollY > 48)
window.addEventListener('scroll', handleScroll)
return () => {
window.removeEventListener('scroll', handleScroll)
@@ -27,167 +30,405 @@ export default function Header(props: HeaderProps) {
// 菜单状态
// ======================
const [menu, setMenu] = useState<string>('')
const [menu, setMenu] = useState(false)
const [page, setPage] = useState(0)
const pages = useMemo(() => [
<ProductMenu key={`product`}/>,
<SolutionMenu key={`solution`}/>,
<HelpMenu key={`help`}/>,
], [])
// ======================
// 覆盖状态
// ======================
const [overlay, setOverlay] = useState(false)
useEffect(() => {
setOverlay(scroll || menu !== '')
setOverlay(scroll || menu)
}, [menu, scroll])
// ======================
// 渲染组件
// ======================
return (
<header
className={[
`fixed top-0 w-full`,
`transition-all duration-200 ${overlay ? `bg-[#fffe] shadow-lg backdrop-blur-sm` : 'bg-transparent shadow-transparent'}`,
const LinkItem = (props: {
text: string
href: string
}) => (
<li className={`group relative`}>
<Link
href={props.href}
className={[
`h-full px-4 flex items-center text-lg`,
`transition-colors duration-200 ease-in-out`,
`hover:text-blue-500`,
].join(' ')}
>
{props.text}
</Link>
<div className={[
`absolute bottom-0 w-full h-0.5 bg-transparent `,
`transition-colors duration-200`,
`group-hover:bg-blue-500`,
].join(' ')}>
<Wrap className=" h-20 max-md:h-16 flex justify-between">
<div className="flex justify-between gap-8">
{/* logo */}
<Link href="/" className={`flex items-center`}>
<img src={`/logo.svg`} alt={`logo`} className={`w-16 max-md:w-12 h-16 max-md:h-12 rounded-full bg-gray-100`}/>
</Link>
</div>
</li>
)
{/* 菜单 */}
<nav>
<ul className="h-full flex items-center text-xl max-lg:hidden">
<NavItemTop>
<Link href={`/`}>首页</Link>
</NavItemTop>
const MenuItem = (props: {
text: string
page: number
}) => (
<li className={`group relative`}>
<button
onPointerEnter={() => {
setMenu(true)
setPage(props.page)
}}
onPointerLeave={() => {
setMenu(false)
}}
className={[
`h-full px-4 flex gap-3 items-center cursor-pointer text-lg`,
`transition-colors duration-200 ease-in-out`,
menu && page === props.page
? `text-blue-500`
: ``,
].join(' ')}
>
<span>{props.text}</span>
<img
src={`/header/down.svg`}
alt={`drop_menu`}
className={[
`transition-transform duration-200 ease-in-out`,
menu && page === props.page
? `rotate-180`
: ``,
].join(' ')}
/>
</button>
<div className={[
`absolute bottom-0 w-full h-0.5 bg-transparent pointer-events-none`,
`transition-colors duration-200`,
menu && page === props.page ? `bg-blue-500` : '',
].join(' ')}>
</div>
</li>
<NavItemTop
onEnter={() => setMenu('product')}
onLeave={() => setMenu('')}
>
<button className={`cursor-pointer`}>产品订购</button>
<SvgDown/>
</NavItemTop>
)
<NavItemTop
onEnter={() => setMenu('solution')}
onLeave={() => setMenu('')}
>
<button className={`cursor-pointer`}>业务场景</button>
<SvgDown/>
</NavItemTop>
return (
<header className={[
`fixed top-0 w-full z-10`,
].join(' ')}>
<div className={[
``,
`transition-[background, shadow] duration-200 ease-in-out`,
menu
? `bg-[#fffe] backdrop-blur-sm`
: scroll
? `bg-[#fffe] backdrop-blur-sm shadow-lg`
: `bg-transparent shadow-none`,
].join(' ')}>
<Wrap className="h-20 max-md:h-16 flex justify-between">
<div className="flex justify-between gap-8">
{/* logo */}
<Link href="/" className={`flex items-center`}>
<img src={`/logo.svg`} alt={`logo`} className={`w-16 max-md:w-12 h-16 max-md:h-12 rounded-full bg-gray-100`}/>
</Link>
<NavItemTop
onEnter={() => setMenu('help')}
onLeave={() => setMenu('')}
>
<button className={`cursor-pointer`}>帮助中心</button>
<SvgDown/>
</NavItemTop>
<NavItemTop>
<Link href={`#`}>企业服务</Link>
</NavItemTop>
<NavItemTop>
<Link href={`#`}>推广返利</Link>
</NavItemTop>
</ul>
</nav>
</div>
{/* 登录 */}
<div className={`flex items-center`}>
<a
href="#"
className={`w-24 h-12 flex items-center justify-center lg:text-lg font-medium`}>
<span>登录</span>
</a>
<a
href="#"
className={`w-20 lg:w-24 h-10 lg:h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-sm flex items-center justify-center lg:text-lg font-medium text-white`}>
<span>注册</span>
</a>
</div>
</Wrap>
{/* 菜单 */}
<nav>
<ul className="h-full flex items-stretch max-lg:hidden">
<LinkItem text={`首页`} href={`/`}/>
<MenuItem text={`产品订购`} page={0}/>
<MenuItem text={`业务场景`} page={1}/>
<MenuItem text={`帮助中心`} page={2}/>
<LinkItem text={`企业服务`} href={`#`}/>
<LinkItem text={`推广返利`} href={`#`}/>
</ul>
</nav>
</div>
{/* 登录 */}
<div className={`flex items-center`}>
<a
href="#"
className={`w-24 h-12 flex items-center justify-center lg:text-lg font-medium`}
>
<span>登录</span>
</a>
<a
href="#"
className={`w-20 lg:w-24 h-10 lg:h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-sm flex items-center justify-center lg:text-lg font-medium text-white`}
>
<span>注册</span>
</a>
</div>
</Wrap>
</div>
{/* 下拉菜单 */}
<div
className={[
`transition-[visibility,opacity,height] duration-200 ease-in-out`,
`${menu === ''
? 'delay-[200ms,0s,0s] invisible opacity-0 h-0 pointer-events-none'
: 'delay-[0s,0s,0s] visible opacity-100 h-80'
}`,
].join(' ')}>
`shadow-lg`,
`overflow-hidden bg-[#fffe] backdrop-blur-sm`,
`transition-[opacity,padding,height] transition-discrete duration-200 ease-in-out`,
menu
? `delay-[0s,0s,0s] opacity-100 py-8 h-auto`
: `delay-[0s,0s,0.2s] opacity-0 py-0 h-0`,
].join(' ')}
onPointerEnter={() => setMenu(true)}
onPointerLeave={() => setMenu(false)}
>
{pages[page]}
</div>
{{
'product': <ProductMenu/>,
'solution': <SolutionMenu/>,
'help': <HelpMenu/>,
}[menu]}
Using a wrapper div to handle transitions
</header>
)
}
function NavItemTop(props: {
children: ReactNode
onEnter?: () => void
onLeave?: () => void
}) {
return (
<li className={`h-10 px-4 flex items-center text-xl cursor-pointer`} onPointerEnter={props.onEnter} onPointerLeave={props.onLeave}>
{props.children}
</li>
)
}
function SvgDown() {
return (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6 9L12 15L18 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
strokeLinejoin="round"/>
</svg>
)
}
function ProductMenu() {
const [type, setType] = useState<'domestic' | 'oversea'>('domestic')
// ====================
// Tab 选项
// ====================
type TabType = 'domestic' | 'oversea'
const [type, setType] = useState<TabType>('domestic')
const Tab = (props: {
type: TabType,
children: ReactNode
}) => {
return (
<li role="tab">
<button
className={[
`p-8 text-lg cursor-pointer border-r`,
type === props.type ? `bg-gradient-to-r from-transparent to-blue-200 border-blue-400` : `border-gray-200`,
].join(' ')}
onClick={() => setType(props.type)}
>
{props.children}
</button>
</li>
)
}
// ====================
// 渲染组件
// ====================
return (
<div className={`flex`}>
<ul role={`tablist`}>
<li role={`tab`}>
<button onClick={() => setType('domestic')}>
国内代理
</button>
</li>
<li role={`tab`}>
<button onClick={() => setType('oversea')}>
海外代理
</button>
</li>
<Wrap className="flex">
<ul role="tablist" className="w-48">
<Tab type="domestic">国内代理</Tab>
<Tab type="oversea">海外代理</Tab>
</ul>
<section role={`tabpanel`}>
{{
'domestic': <div>国内代理</div>,
'oversea': <div>海外代理</div>,
}[type]}
</section>
</div>
<div className="flex-1">
{type === 'domestic'
? (
<section role="tabpanel" className="flex gap-16 mr-16">
<div className="w-64 flex flex-col gap-6">
<h3 className="font-bold mb-2 flex items-center gap-3">
<img src={`/prod.svg`} alt={`产品`} className={`w-10 h-=10`}/>
<span>代理产品</span>
</h3>
<div className="flex flex-col gap-2">
<p className="flex gap-2">
<span>短效动态IP</span>
<span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
折扣45%
</span>
</p>
<p className="text-gray-400 text-sm">
全国300+城市级定位节点
</p>
</div>
<div className="flex flex-col gap-2">
<p className="flex gap-2">
<span>长效静态IP</span>
<span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
折扣45%
</span>
</p>
<p className="text-gray-400 text-sm">
IPI资源覆盖全国
</p>
</div>
<div>
<p className="flex gap-2">
<span>固定IP</span>
<span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
折扣45%
</span>
</p>
</div>
</div>
<div className="w-64 flex flex-col gap-4">
<h3 className="font-bold mb-2 flex items-center gap-3">
<img src="/custom.svg" alt="定制" className="w-10 h-10"/>
<span>业务定制</span>
</h3>
<div className="flex flex-col gap-2">
<p>优质/企业/精选IP</p>
<p className="text-gray-400 text-sm">
超 1000 家企业共同信赖之选！大客户经理全
程 1 对 1 沟通，随时为您排忧解难，提供 24
小时不间断支持
</p>
</div>
</div>
</section>
) : (
<section role="tabpanel">
</section>
)
}
</div>
<aside className="w-64">
<h3 className="flex gap-3 items-center mb-4">
<img src={`/anno.svg`} alt={`公告`} className={`w-10 h-10`}/>
<span>网站公告</span>
</h3>
<div className="flex flex-col gap-2">
<p>官网最新上线，体验再升级！</p>
<p className="text-gray-400 text-sm">
1.新增多样使用功能，新增多样使用
新增多样使用功能
</p>
<p className="text-gray-400 text-sm">
2.新增多样使用功能，新增多样使用
新增多样使用功能
</p>
</div>
</aside>
</Wrap>
)
}
function SolutionMenu() {
const SolutionItem = (props: {
icon: string
title: string
desc: string
}) => {
return (
<div
className={[
`h-full p-4 flex gap-4 items-start rounded-md cursor-pointer`,
`transition-colors duration-200 hover:bg-blue-100`,
].join(' ')}
>
<img src={`/header/solution/${props.icon}.svg`} alt={props.title} className="w-10 h-10"/>
<div className="flex flex-col gap-1">
<h3 className="font-bold">{props.title}</h3>
<p className="text-gray-400 text-sm">{props.desc}</p>
</div>
</div>
)
}
return (
<div>解决方案</div>
<Wrap className="grid grid-cols-4 auto-rows-fr gap-4">
<SolutionItem
icon="01"
title="数据抓取"
desc="高效采集和分析大量数据，助力企业获取大量情报"
/>
<SolutionItem
icon="02"
title="广告验证"
desc="确保广告点击和展示数据的真实性，帮助企业，提升广告效果"
/>
<SolutionItem
icon="03"
title="市场调查"
desc="收集全网行业数据，了解竞争对手动态"
/>
<SolutionItem
icon="04"
title="SEO优化"
desc="收集搜索引擎情报，提高网站在搜索引擎的排名"
/>
<SolutionItem
icon="05"
title="品牌保护"
desc="保护品牌商标打造，优质品牌形象，为企业获得更多用户"
/>
<SolutionItem
icon="06"
title="价格监控"
desc="利用优质代理IP，实时监控行业价格信息，提高市场竞争力"
/>
<SolutionItem
icon="07"
title="金融数据"
desc="快速获取金融市场实时数据，帮助投资者分析趋势，使其做出精准决策"
/>
<SolutionItem
icon="08"
title="网站测试"
desc="在不同环境下对网站进行性能和兼容的测试，让用户有高质量体验"
/>
</Wrap>
)
}
function HelpMenu() {
const Column = (props: {
icon: string,
title: string,
items: {
lead: string
href: string
}[]
}) => (
<div className="flex flex-col gap-4">
<h3 className="font-bold flex gap-3 items-center">
<img src={`/header/help/${props.icon}.svg`} alt={props.title} className="w-10 h-10"/>
<span>{props.title}</span>
</h3>
<ul className=" text-gray-500 text-sm flex flex-col items-end gap-2">
{props.items.map((item, index) => (
<li key={index}><Link href={item.href}>{item.lead}</Link></li>
))}
</ul>
</div>
)
return (
<div>帮助中心</div>
<Wrap className="w-full grid grid-cols-4 gap-4 justify-items-center">
<Column
icon="01"
title="提取IP"
items={[
{lead: '短效动态IP提取', href: '#'},
{lead: '长效静态IP提取', href: '#'},
]}
/>
<Column
icon="02"
title="使用教程"
items={[
{lead: '快速入手', href: '#'},
{lead: '代码下载', href: '#'},
{lead: 'API文档', href: '#'},
]}
/>
<Column
icon="03"
title="产品功能"
items={[
{lead: '常见问题', href: '#'},
{lead: '产品介绍', href: '#'},
{lead: '行业资讯', href: '#'},
]}
/>
<img src={`/header/help/banner.webp`} alt={`banner`} className={``}/>
</Wrap>
)
}

8
src/app/(home)/page.tsx
View File

@@ -18,7 +18,7 @@ export default function Home() {
<section className={`w-full bg-[url('/banner.webp')] bg-cover bg-[center_right_40%]`}>
<Wrap className={`pt-64 pb-48 max-md:pt-32 max-md:pb-24`}>
<h1 className={`text-4xl font-medium`}>安全，稳定，快速，合规的代理服务器</h1>
<p className={`mt-10 text-gray-400`}>遍布全国的代理服务器节点为用户提供智能可靠的IP代理服务</p>
<p className={`mt-10 text-gray-500`}>遍布全国的代理服务器节点为用户提供智能可靠的IP代理服务</p>
<div className={`mt-24 max-md:mt-14 flex gap-8 max-md:flex-col`}>
<p className={`flex gap-4 items-center`}>
@@ -138,13 +138,13 @@ export default function Home() {
<div className={`flex-2 flex flex-col justify-between gap-4`}>
<h3 className={`flex justify-between`}>
<span className={`text-xl font-medium`}>我是标题</span>
<sub className={`text-sm text-gray-400`}>2025-03-04</sub>
<sub className={`text-sm text-gray-500`}>2025-03-04</sub>
</h3>
<p className={`text-gray-400 md:leading-12`}>
我是内容我是内容我是内容我是内容我是内容我是容我是内容我是内容内容我是内容我是内容我是内我是内容我是内容我是内容我是内容我是内容...
</p>
<div className={`flex justify-end`}>
<a href="#" className={`text-sm text-gray-400 flex items-center gap-4`}>
<a href="#" className={`text-sm text-gray-500 flex items-center gap-4`}>
更多详情
<img src={`/next.svg`} alt={`more`} className={`h-4 fill-gray-400`}/>
</a>
@@ -199,7 +199,7 @@ function Sec3Item(props: {
<div className={`flex flex-col gap-3`}>
{props.terms.map((item, index) => {
return (
<p key={index} className={`text-sm text-gray-400 flex gap-3 items-center`}>
<p key={index} className={`text-sm text-gray-500 flex gap-3 items-center`}>
<img src={`/${item.icon}.svg`} alt={`check`} aria-hidden className={`w-5 h-5`}/>
<span>{item.text}</span>
</p>

0
src/components/animation/page-switcher.tsx Normal file
View File

27
src/components/dropdown/example-structure.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
export const Dropdown = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button onClick={() => setIsOpen(!isOpen)}>
打开菜单
</button>
<AnimatePresence>
{isOpen && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
transition={{ duration: 0.2 }}
>
{/* 菜单内容 */}
</motion.div>
)}
</AnimatePresence>
</div>
);
};

2
src/components/wrap.tsx
View File

@@ -7,7 +7,7 @@ export type WrapProps = {
export default function Wrap(props: WrapProps) {
return (
<div className={`max-w-[1232px] px-4 mx-auto ${props.className}`}>
<div className={`max-w-[1232px] w-full px-4 mx-auto ${props.className}`}>
{props.children}
</div>
)

1
src/utils/index.ts Normal file
View File

@@ -0,0 +1 @@