mirror of
https://github.com/langgenius/dify.git
synced 2026-09-05 08:48:10 +08:00
fix(web): restyle marketplace home hero with grid and six icons
Replace the cycling brand marks with the new Figma decorations: a divider-subtle grid, six static category icons, and hide both on mobile widths.
This commit is contained in:
CodingOnStar
parent
7181812aff
commit
d942e963bb
@ -26,12 +26,21 @@ describe('HomeHero', () => {
|
||||
expect(screen.queryByText('marketplace.home.heroTitle')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders the Google mark as an image instead of a blank iconify mask', () => {
|
||||
it('renders the six decorative hero icons as images instead of iconify masks', () => {
|
||||
const { container } = render(<HomeHero isMarketplacePlatform />)
|
||||
const google = container.querySelector('img[src*="google"]')
|
||||
|
||||
expect(google).not.toBeNull()
|
||||
for (const name of [
|
||||
'sparkling-fill',
|
||||
'plug-fill',
|
||||
'puzzle-fill',
|
||||
'brain-2-fill',
|
||||
'image-circle-ai-line',
|
||||
'voice-ai-fill',
|
||||
])
|
||||
expect(container.querySelector(`img[src*="${name}"]`)).not.toBeNull()
|
||||
|
||||
expect(container.querySelector('img[src*="google"]')).toBeNull()
|
||||
expect(container.querySelector('.i-ri-sparkling-fill')).toBeNull()
|
||||
expect(container.querySelector('.i-custom-public-common-gmail')).toBeNull()
|
||||
expect(container.querySelector('.i-custom-public-common-dropbox')).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="brain-2-fill">
|
||||
<path id="Vector" d="M8.5 2C6.567 2 5 3.567 5 5.5C5 5.68016 5.01364 5.85714 5.03993 6.02997C3.32436 6.25523 2 7.72295 2 9.5C2 10.4793 2.40223 11.3647 3.05051 12C2.40223 12.6353 2 13.5207 2 14.5C2 15.9018 2.82359 17.1104 4.01353 17.6693C4.00457 17.7785 4 17.8888 4 18C4 20.2091 5.79086 22 8 22C9.19469 22 10.2671 21.4762 11 20.6458V3.05051C10.3647 2.40223 9.47934 2 8.5 2ZM13 3.05051V20.6458C13.7329 21.4762 14.8053 22 16 22C18.2091 22 20 20.2091 20 18C20 17.8888 19.9954 17.7785 19.9865 17.6693C21.1764 17.1104 22 15.9018 22 14.5C22 13.5207 21.5978 12.6353 20.9495 12C21.5978 11.3647 22 10.4793 22 9.5C22 7.72295 20.6756 6.25523 18.9601 6.02997C18.9864 5.85714 19 5.68016 19 5.5C19 3.567 17.433 2 15.5 2C14.5207 2 13.6353 2.40223 13 3.05051Z" fill="#0033FF"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 960 B |
@ -1,7 +0,0 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="dropbox_dark_dropbox_dark">
|
||||
<rect width="40" height="40" fill="#3A3A40"/>
|
||||
<rect width="40" height="40" fill="#0061FF"/>
|
||||
<path id="dropbox_dark_Vector" d="M12.3438 29.0625L20 33.9844L27.6562 29.0625L20 24.2188L12.3438 29.0625ZM12.3438 7.89062L4.60938 12.8125L27.6562 27.5L35.3906 22.5781L20 12.8125L27.6562 7.89062L35.3906 12.8125L12.3438 27.5L4.60938 22.5781L20 12.8125" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 501 B |
@ -1,7 +0,0 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="dropbox_light_dropbox_light">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
<rect width="40" height="40" fill="#0061FF"/>
|
||||
<path id="dropbox_light_Vector" d="M12.3438 29.0625L20 33.9844L27.6562 29.0625L20 24.2188L12.3438 29.0625ZM12.3438 7.89062L4.60938 12.8125L27.6562 27.5L35.3906 22.5781L20 12.8125L27.6562 7.89062L35.3906 12.8125L12.3438 27.5L4.60938 22.5781L20 12.8125" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 502 B |
@ -1,50 +0,0 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="duckduckgo_dark_duckduckgo_dark" clip-path="url(#duckduckgo_dark_clip0_18015_5351)">
|
||||
<rect width="40" height="40" fill="#3A3A40"/>
|
||||
<g id="duckduckgo_dark_Dark Icon BG">
|
||||
<rect id="duckduckgo_dark_BG" width="40" height="40" fill="url(#duckduckgo_dark_paint0_linear_18015_5351)"/>
|
||||
<g id="duckduckgo_dark_Ellipse 1" opacity="0.1" filter="url(#duckduckgo_dark_filter0_f_18015_5351)" style="mix-blend-mode:luminosity">
|
||||
<circle r="20" fill="white" fill-opacity="0.8"/>
|
||||
</g>
|
||||
<g id="duckduckgo_dark_Ellipse 2" opacity="0.12" filter="url(#duckduckgo_dark_filter1_f_18015_5351)" style="mix-blend-mode:luminosity">
|
||||
<circle cx="48" cy="48" r="20" fill="black" fill-opacity="0.8"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="duckduckgo_dark_DuckDuckGo">
|
||||
<g id="duckduckgo_dark_Group 2">
|
||||
<path id="duckduckgo_dark_Vector" fill-rule="evenodd" clip-rule="evenodd" d="M20 34C27.7322 34 34 27.7322 34 20C34 12.2678 27.7322 6 20 6C12.2678 6 6 12.2678 6 20C6 27.7322 12.2678 34 20 34Z" fill="#DE5833"/>
|
||||
<path id="duckduckgo_dark_Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M21.969 30.4455C21.969 30.3361 21.9954 30.3108 21.6478 29.6182C20.7238 27.7675 19.795 25.1593 20.2177 23.4766C20.2948 23.1708 19.347 12.1578 18.6777 11.8028C17.9328 11.4065 17.0172 10.7768 16.1799 10.6368C15.7546 10.5692 15.1972 10.6014 14.7619 10.66C14.6842 10.6706 14.6811 10.8096 14.755 10.8344C15.0414 10.9316 15.389 11.0996 15.5934 11.3542C15.632 11.4018 15.5797 11.4779 15.5184 11.4805C15.3251 11.4874 14.9753 11.5682 14.5136 11.9602C14.4602 12.0056 14.5046 12.0902 14.5733 12.0764C15.5654 11.8799 16.5792 11.9766 17.1762 12.5202C17.2148 12.5551 17.1947 12.6179 17.1445 12.6317C11.9614 14.0406 12.9868 18.5486 14.3672 24.0821C15.5364 28.7708 16.0119 30.4365 16.1809 31.0044C16.1947 31.052 16.2193 31.0958 16.2528 31.1323C16.2864 31.1688 16.328 31.197 16.3743 31.2147C18.1906 31.8962 21.969 31.9099 21.969 30.7186V30.4455Z" fill="#DDDDDD"/>
|
||||
<path id="duckduckgo_dark_Vector_3" d="M22.6797 31.4842C22.051 31.7303 20.8201 31.8397 20.1095 31.8397C19.0671 31.8397 17.5662 31.6759 17.0194 31.4297C16.6819 30.39 15.6712 27.1685 14.6727 23.0768C14.6405 22.9426 14.6078 22.8094 14.575 22.6768L14.5745 22.6737C13.3879 17.827 12.419 13.8685 17.7305 12.6248C17.7786 12.6132 17.8024 12.5556 17.7707 12.5171C17.161 11.7944 16.0194 11.5571 14.5755 12.0553C14.5164 12.0759 14.4651 12.0162 14.5016 11.9655C14.7847 11.5751 15.3384 11.275 15.611 11.1435C15.6675 11.1165 15.6644 11.0336 15.6047 11.0151C15.3345 10.9305 15.0587 10.8648 14.7794 10.8186C14.6986 10.8054 14.6912 10.6664 14.7726 10.6553C16.8192 10.3806 18.9567 10.9945 20.0292 12.3459C20.0387 12.3586 20.0535 12.367 20.0693 12.3707C23.9967 13.2139 24.2778 19.422 23.8256 19.7046C23.7358 19.7606 23.4505 19.7284 23.0733 19.6861C21.5449 19.5155 18.5193 19.1768 21.0166 23.8312C21.0414 23.8771 21.0087 23.9379 20.9569 23.9458C19.549 24.1651 21.3531 28.5769 22.6797 31.4842Z" fill="white"/>
|
||||
<path id="duckduckgo_dark_Vector_4" d="M24.4375 25.8404C24.1385 25.7015 22.9889 26.5262 22.226 27.1591C22.0665 26.9335 21.7664 26.7692 21.0881 26.887C20.4943 26.9906 20.1667 27.1337 20.0204 27.3804C19.0837 27.0254 17.5073 26.477 17.1264 27.0064C16.7106 27.5849 17.2304 30.3226 17.7836 30.6781C18.072 30.8635 19.453 29.9765 20.1736 29.3642C20.2898 29.528 20.4774 29.622 20.862 29.613C21.4442 29.5998 22.3888 29.4641 22.5351 29.193C22.5449 29.1745 22.5526 29.1551 22.5583 29.1349C23.2996 29.4118 24.6034 29.7055 24.895 29.6611C25.6542 29.547 24.7894 26.0032 24.4375 25.8404Z" fill="#3CA82B"/>
|
||||
<path id="duckduckgo_dark_Vector_5" d="M22.2954 27.2398C22.3271 27.2958 22.352 27.3549 22.3736 27.4151C22.4793 27.711 22.651 28.6503 22.5216 28.8828C22.3911 29.1147 21.5458 29.2267 21.0238 29.2357C20.5019 29.2447 20.3851 29.0539 20.2794 28.7586C20.1949 28.5225 20.1537 27.9662 20.1542 27.6487C20.1331 27.1764 20.3053 27.0105 21.1025 26.8816C21.6921 26.7865 22.0044 26.8974 22.184 27.0876C23.0213 26.4621 24.4187 25.5804 24.555 25.7415C25.2344 26.545 25.32 28.4585 25.1731 29.2283C25.125 29.4798 22.875 28.9789 22.875 28.7074C22.875 27.5805 22.5828 27.2714 22.2954 27.2398ZM17.3669 26.8879C17.5513 26.5963 19.0453 26.9592 19.8658 27.3238C19.8658 27.3238 19.6967 28.0877 19.9656 28.9874C20.0438 29.2505 18.0785 30.4217 17.8218 30.2204C17.5254 29.9875 16.9797 27.5007 17.3669 26.8879Z" fill="#4CBA3C"/>
|
||||
<path id="duckduckgo_dark_Vector_6" fill-rule="evenodd" clip-rule="evenodd" d="M18.0908 20.9641C18.2113 20.4384 18.775 19.4479 20.7857 19.4716C21.8027 19.4674 23.0653 19.4711 23.9027 19.376C24.8559 19.2703 25.7916 19.0427 26.6868 18.6987C27.5574 18.367 27.8665 18.4409 27.9748 18.6396C28.0937 18.8578 27.9537 19.235 27.6494 19.5821C27.0682 20.2451 26.0238 20.7591 24.1784 20.9113C22.3331 21.0634 21.1116 20.5689 20.586 21.3746C20.3588 21.7222 20.5342 22.5411 22.3183 22.7989C24.7289 23.147 26.709 22.38 26.9536 22.8433C27.1982 23.3066 25.7892 24.2491 23.3744 24.2686C20.96 24.2887 19.4512 23.4233 18.9165 22.9933C18.2377 22.4476 17.9339 21.652 18.0908 20.9641Z" fill="#FFCC33"/>
|
||||
<g id="duckduckgo_dark_Group" opacity="0.8">
|
||||
<path id="duckduckgo_dark_Vector_7" d="M21.165 15.2152C21.2998 14.9949 21.5983 14.8242 22.0869 14.8242C22.5756 14.8242 22.8054 15.0192 22.965 15.2363C22.9972 15.2801 22.9481 15.3319 22.8979 15.3103L22.8609 15.2944C22.6823 15.2162 22.4631 15.1201 22.0869 15.1148C21.6849 15.1095 21.4313 15.2099 21.2712 15.2965C21.2179 15.3261 21.1328 15.2675 21.165 15.2152ZM15.6623 15.4973C16.1367 15.2992 16.5096 15.3245 16.7733 15.3874C16.8287 15.4001 16.8673 15.3404 16.8229 15.305C16.6185 15.1396 16.1604 14.9352 15.5629 15.157C15.0293 15.3562 14.7784 15.7694 14.7773 16.0404C14.7768 16.1048 14.9084 16.1101 14.9422 16.0562C15.0341 15.9094 15.1873 15.6959 15.6617 15.4973H15.6623Z" fill="#14307E"/>
|
||||
<path id="duckduckgo_dark_Vector_8" fill-rule="evenodd" clip-rule="evenodd" d="M22.5027 18.2324C22.0832 18.2324 21.743 17.8932 21.743 17.4753C21.743 17.0574 22.0832 16.7183 22.5027 16.7183C22.9222 16.7183 23.2624 17.0574 23.2624 17.4753C23.2624 17.8932 22.9222 18.2324 22.5027 18.2324ZM23.0379 17.2244C23.0379 17.1722 23.0171 17.1221 22.9802 17.0852C22.9433 17.0483 22.8933 17.0276 22.8411 17.0276C22.7889 17.0276 22.7388 17.0483 22.7019 17.0852C22.665 17.1221 22.6443 17.1722 22.6443 17.2244C22.6443 17.2766 22.665 17.3266 22.7019 17.3635C22.7388 17.4004 22.7889 17.4212 22.8411 17.4212C22.8933 17.4212 22.9433 17.4004 22.9802 17.3635C23.0171 17.3266 23.0379 17.2766 23.0379 17.2244ZM17.4674 17.9994C17.4674 18.487 17.0712 18.8822 16.582 18.8822C16.3476 18.8825 16.1226 18.7897 15.9565 18.6243C15.7904 18.4589 15.6967 18.2343 15.696 17.9999C15.696 17.5118 16.0933 17.1166 16.582 17.1166C17.0702 17.1166 17.4674 17.5118 17.4674 17.9994ZM17.2065 17.7067C17.2079 17.6757 17.203 17.6447 17.1921 17.6157C17.1812 17.5866 17.1645 17.5601 17.143 17.5377C17.1216 17.5153 17.0958 17.4974 17.0672 17.4853C17.0386 17.4731 17.0079 17.4669 16.9769 17.467C16.9459 17.467 16.9152 17.4734 16.8867 17.4857C16.8582 17.498 16.8324 17.5159 16.8111 17.5384C16.7897 17.561 16.7732 17.5876 16.7624 17.6167C16.7516 17.6458 16.7469 17.6768 16.7484 17.7078C16.7514 17.7666 16.7769 17.822 16.8196 17.8626C16.8623 17.9031 16.919 17.9257 16.9779 17.9255C17.0369 17.9254 17.0934 17.9026 17.136 17.8619C17.1785 17.8211 17.2038 17.7656 17.2065 17.7067Z" fill="#14307E"/>
|
||||
</g>
|
||||
<path id="duckduckgo_dark_Vector_9" fill-rule="evenodd" clip-rule="evenodd" d="M19.9999 31.7578C26.4938 31.7578 31.7578 26.4938 31.7578 19.9999C31.7578 13.506 26.4938 8.24202 19.9999 8.24202C13.506 8.24202 8.24202 13.506 8.24202 19.9999C8.24202 26.4938 13.506 31.7578 19.9999 31.7578ZM19.9999 32.8514C27.0976 32.8514 32.8514 27.0976 32.8514 19.9999C32.8514 12.9022 27.0976 7.14844 19.9999 7.14844C12.9022 7.14844 7.14844 12.9022 7.14844 19.9999C7.14844 27.0976 12.9022 32.8514 19.9999 32.8514Z" fill="white"/>
|
||||
<path id="duckduckgo_dark_Vector_10" fill-rule="evenodd" clip-rule="evenodd" d="M19.9978 31.5898C26.3997 31.5898 31.5892 26.4003 31.5892 19.9989C31.5892 13.5974 26.3997 8.40634 19.9983 8.40634C13.5969 8.40634 8.40578 13.5969 8.40578 19.9983C8.40578 26.3998 13.5963 31.5898 19.9978 31.5898ZM32.8313 19.9989C32.8313 27.086 27.0855 32.8313 19.9978 32.8313C12.9101 32.8313 7.16479 27.0866 7.16479 19.9994C7.16479 12.9122 12.9095 7.16431 19.9978 7.16431C27.086 7.16431 32.8318 12.9106 32.8318 19.9983L32.8313 19.9989Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="duckduckgo_dark_filter0_f_18015_5351" x="-60" y="-60" width="120" height="120" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_18015_5351"/>
|
||||
</filter>
|
||||
<filter id="duckduckgo_dark_filter1_f_18015_5351" x="-12" y="-12" width="120" height="120" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_18015_5351"/>
|
||||
</filter>
|
||||
<linearGradient id="duckduckgo_dark_paint0_linear_18015_5351" x1="40" y1="40" x2="-3.57628e-06" y2="3.57628e-06" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#303036"/>
|
||||
<stop offset="1" stop-color="#3A3A40"/>
|
||||
</linearGradient>
|
||||
<clipPath id="duckduckgo_dark_clip0_18015_5351">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 9.3 KiB |
@ -1,21 +0,0 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="duckduckgo_light_duckduckgo_light">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
<g id="duckduckgo_light_DuckDuckGo">
|
||||
<g id="duckduckgo_light_Group 2">
|
||||
<path id="duckduckgo_light_Vector" fill-rule="evenodd" clip-rule="evenodd" d="M20 34C27.7322 34 34 27.7322 34 20C34 12.2678 27.7322 6 20 6C12.2678 6 6 12.2678 6 20C6 27.7322 12.2678 34 20 34Z" fill="#DE5833"/>
|
||||
<path id="duckduckgo_light_Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M21.969 30.4455C21.969 30.3361 21.9954 30.3108 21.6478 29.6182C20.7238 27.7675 19.795 25.1593 20.2177 23.4766C20.2948 23.1708 19.347 12.1578 18.6777 11.8028C17.9328 11.4065 17.0172 10.7768 16.1799 10.6368C15.7546 10.5692 15.1972 10.6014 14.7619 10.66C14.6842 10.6706 14.6811 10.8096 14.755 10.8344C15.0414 10.9316 15.389 11.0996 15.5934 11.3542C15.632 11.4018 15.5797 11.4779 15.5184 11.4805C15.3251 11.4874 14.9753 11.5682 14.5136 11.9602C14.4602 12.0056 14.5046 12.0902 14.5733 12.0764C15.5654 11.8799 16.5792 11.9766 17.1762 12.5202C17.2148 12.5551 17.1947 12.6179 17.1445 12.6317C11.9614 14.0406 12.9868 18.5486 14.3672 24.0821C15.5364 28.7708 16.0119 30.4365 16.1809 31.0044C16.1947 31.052 16.2193 31.0958 16.2528 31.1323C16.2864 31.1688 16.328 31.197 16.3743 31.2147C18.1906 31.8962 21.969 31.9099 21.969 30.7186V30.4455Z" fill="#DDDDDD"/>
|
||||
<path id="duckduckgo_light_Vector_3" d="M22.6797 31.4842C22.051 31.7303 20.8201 31.8397 20.1095 31.8397C19.0671 31.8397 17.5662 31.6759 17.0194 31.4297C16.6819 30.39 15.6712 27.1685 14.6727 23.0768C14.6405 22.9426 14.6078 22.8094 14.575 22.6768L14.5745 22.6737C13.3879 17.827 12.419 13.8685 17.7305 12.6248C17.7786 12.6132 17.8024 12.5556 17.7707 12.5171C17.161 11.7944 16.0194 11.5571 14.5755 12.0553C14.5164 12.0759 14.4651 12.0162 14.5016 11.9655C14.7847 11.5751 15.3384 11.275 15.611 11.1435C15.6675 11.1165 15.6644 11.0336 15.6047 11.0151C15.3345 10.9305 15.0587 10.8648 14.7794 10.8186C14.6986 10.8054 14.6912 10.6664 14.7726 10.6553C16.8192 10.3806 18.9567 10.9945 20.0292 12.3459C20.0387 12.3586 20.0535 12.367 20.0693 12.3707C23.9967 13.2139 24.2778 19.422 23.8256 19.7046C23.7358 19.7606 23.4505 19.7284 23.0733 19.6861C21.5449 19.5155 18.5193 19.1768 21.0166 23.8312C21.0414 23.8771 21.0087 23.9379 20.9569 23.9458C19.549 24.1651 21.3531 28.5769 22.6797 31.4842Z" fill="white"/>
|
||||
<path id="duckduckgo_light_Vector_4" d="M24.4375 25.8404C24.1385 25.7015 22.9889 26.5262 22.226 27.1591C22.0665 26.9335 21.7664 26.7692 21.0881 26.887C20.4943 26.9906 20.1667 27.1337 20.0204 27.3804C19.0837 27.0254 17.5073 26.477 17.1264 27.0064C16.7106 27.5849 17.2304 30.3226 17.7836 30.6781C18.072 30.8635 19.453 29.9765 20.1736 29.3642C20.2898 29.528 20.4774 29.622 20.862 29.613C21.4442 29.5998 22.3888 29.4641 22.5351 29.193C22.5449 29.1745 22.5526 29.1551 22.5583 29.1349C23.2996 29.4118 24.6034 29.7055 24.895 29.6611C25.6542 29.547 24.7894 26.0032 24.4375 25.8404Z" fill="#3CA82B"/>
|
||||
<path id="duckduckgo_light_Vector_5" d="M22.2954 27.2398C22.3271 27.2958 22.352 27.3549 22.3736 27.4151C22.4793 27.711 22.651 28.6503 22.5216 28.8828C22.3911 29.1147 21.5458 29.2267 21.0238 29.2357C20.5019 29.2447 20.3851 29.0539 20.2794 28.7586C20.1949 28.5225 20.1537 27.9662 20.1542 27.6487C20.1331 27.1764 20.3053 27.0105 21.1025 26.8816C21.6921 26.7865 22.0044 26.8974 22.184 27.0876C23.0213 26.4621 24.4187 25.5804 24.555 25.7415C25.2344 26.545 25.32 28.4585 25.1731 29.2283C25.125 29.4798 22.875 28.9789 22.875 28.7074C22.875 27.5805 22.5828 27.2714 22.2954 27.2398ZM17.3669 26.8879C17.5513 26.5963 19.0453 26.9592 19.8658 27.3238C19.8658 27.3238 19.6967 28.0877 19.9656 28.9874C20.0438 29.2505 18.0785 30.4217 17.8218 30.2204C17.5254 29.9875 16.9797 27.5007 17.3669 26.8879Z" fill="#4CBA3C"/>
|
||||
<path id="duckduckgo_light_Vector_6" fill-rule="evenodd" clip-rule="evenodd" d="M18.0908 20.9641C18.2113 20.4384 18.775 19.4479 20.7857 19.4716C21.8027 19.4674 23.0653 19.4711 23.9027 19.376C24.8559 19.2703 25.7916 19.0427 26.6868 18.6987C27.5574 18.367 27.8665 18.4409 27.9748 18.6396C28.0937 18.8578 27.9537 19.235 27.6494 19.5821C27.0682 20.2451 26.0238 20.7591 24.1784 20.9113C22.3331 21.0634 21.1116 20.5689 20.586 21.3746C20.3588 21.7222 20.5342 22.5411 22.3183 22.7989C24.7289 23.147 26.709 22.38 26.9536 22.8433C27.1982 23.3066 25.7892 24.2491 23.3744 24.2686C20.96 24.2887 19.4512 23.4233 18.9165 22.9933C18.2377 22.4476 17.9339 21.652 18.0908 20.9641Z" fill="#FFCC33"/>
|
||||
<g id="duckduckgo_light_Group" opacity="0.8">
|
||||
<path id="duckduckgo_light_Vector_7" d="M21.165 15.2152C21.2998 14.9949 21.5983 14.8242 22.0869 14.8242C22.5756 14.8242 22.8054 15.0192 22.965 15.2363C22.9972 15.2801 22.9481 15.3319 22.8979 15.3103L22.8609 15.2944C22.6823 15.2162 22.4631 15.1201 22.0869 15.1148C21.6849 15.1095 21.4313 15.2099 21.2712 15.2965C21.2179 15.3261 21.1328 15.2675 21.165 15.2152ZM15.6623 15.4973C16.1367 15.2992 16.5096 15.3245 16.7733 15.3874C16.8287 15.4001 16.8673 15.3404 16.8229 15.305C16.6185 15.1396 16.1604 14.9352 15.5629 15.157C15.0293 15.3562 14.7784 15.7694 14.7773 16.0404C14.7768 16.1048 14.9084 16.1101 14.9422 16.0562C15.0341 15.9094 15.1873 15.6959 15.6617 15.4973H15.6623Z" fill="#14307E"/>
|
||||
<path id="duckduckgo_light_Vector_8" fill-rule="evenodd" clip-rule="evenodd" d="M22.5027 18.2324C22.0832 18.2324 21.743 17.8932 21.743 17.4753C21.743 17.0574 22.0832 16.7183 22.5027 16.7183C22.9222 16.7183 23.2624 17.0574 23.2624 17.4753C23.2624 17.8932 22.9222 18.2324 22.5027 18.2324ZM23.0379 17.2244C23.0379 17.1722 23.0171 17.1221 22.9802 17.0852C22.9433 17.0483 22.8933 17.0276 22.8411 17.0276C22.7889 17.0276 22.7388 17.0483 22.7019 17.0852C22.665 17.1221 22.6443 17.1722 22.6443 17.2244C22.6443 17.2766 22.665 17.3266 22.7019 17.3635C22.7388 17.4004 22.7889 17.4212 22.8411 17.4212C22.8933 17.4212 22.9433 17.4004 22.9802 17.3635C23.0171 17.3266 23.0379 17.2766 23.0379 17.2244ZM17.4674 17.9994C17.4674 18.487 17.0712 18.8822 16.582 18.8822C16.3476 18.8825 16.1226 18.7897 15.9565 18.6243C15.7904 18.4589 15.6967 18.2343 15.696 17.9999C15.696 17.5118 16.0933 17.1166 16.582 17.1166C17.0702 17.1166 17.4674 17.5118 17.4674 17.9994ZM17.2065 17.7067C17.2079 17.6757 17.203 17.6447 17.1921 17.6157C17.1812 17.5866 17.1645 17.5601 17.143 17.5377C17.1216 17.5153 17.0958 17.4974 17.0672 17.4853C17.0386 17.4731 17.0079 17.4669 16.9769 17.467C16.9459 17.467 16.9152 17.4734 16.8867 17.4857C16.8582 17.498 16.8324 17.5159 16.8111 17.5384C16.7897 17.561 16.7732 17.5876 16.7624 17.6167C16.7516 17.6458 16.7469 17.6768 16.7484 17.7078C16.7514 17.7666 16.7769 17.822 16.8196 17.8626C16.8623 17.9031 16.919 17.9257 16.9779 17.9255C17.0369 17.9254 17.0934 17.9026 17.136 17.8619C17.1785 17.8211 17.2038 17.7656 17.2065 17.7067Z" fill="#14307E"/>
|
||||
</g>
|
||||
<path id="duckduckgo_light_Vector_9" fill-rule="evenodd" clip-rule="evenodd" d="M19.9999 31.7578C26.4938 31.7578 31.7578 26.4938 31.7578 19.9999C31.7578 13.506 26.4938 8.24202 19.9999 8.24202C13.506 8.24202 8.24202 13.506 8.24202 19.9999C8.24202 26.4938 13.506 31.7578 19.9999 31.7578ZM19.9999 32.8514C27.0976 32.8514 32.8514 27.0976 32.8514 19.9999C32.8514 12.9022 27.0976 7.14844 19.9999 7.14844C12.9022 7.14844 7.14844 12.9022 7.14844 19.9999C7.14844 27.0976 12.9022 32.8514 19.9999 32.8514Z" fill="white"/>
|
||||
<path id="duckduckgo_light_Vector_10" fill-rule="evenodd" clip-rule="evenodd" d="M19.9978 31.5898C26.3997 31.5898 31.5892 26.4003 31.5892 19.9989C31.5892 13.5974 26.3997 8.40634 19.9983 8.40634C13.5969 8.40634 8.40578 13.5969 8.40578 19.9983C8.40578 26.3998 13.5963 31.5898 19.9978 31.5898ZM32.8313 19.9989C32.8313 27.086 27.0855 32.8313 19.9978 32.8313C12.9101 32.8313 7.16479 27.0866 7.16479 19.9994C7.16479 12.9122 12.9095 7.16431 19.9978 7.16431C27.086 7.16431 32.8318 12.9106 32.8318 19.9983L32.8313 19.9989Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 7.6 KiB |
@ -1,40 +0,0 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="github_dark_github">
|
||||
<g clip-path="url(#github_dark_clip0_18015_5351)">
|
||||
<rect width="40" height="40" rx="10" fill="#3A3A40"/>
|
||||
<g id="github_dark_Dark Icon BG">
|
||||
<rect id="github_dark_BG" width="40" height="40" fill="url(#github_dark_paint0_linear_18015_5351)"/>
|
||||
<g id="github_dark_Ellipse 1" opacity="0.1" filter="url(#github_dark_filter0_f_18015_5351)" style="mix-blend-mode:luminosity">
|
||||
<circle r="20" fill="white" fill-opacity="0.8"/>
|
||||
</g>
|
||||
<g id="github_dark_Ellipse 2" opacity="0.12" filter="url(#github_dark_filter1_f_18015_5351)" style="mix-blend-mode:luminosity">
|
||||
<circle cx="48" cy="48" r="20" fill="black" fill-opacity="0.8"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="github_dark_github_2">
|
||||
<path id="github_dark_Vector" d="M20 6C12.265 6 6 12.265 6 20C6 26.195 10.0075 31.4275 15.5725 33.2825C16.2725 33.405 16.535 32.985 16.535 32.6175C16.535 32.285 16.5175 31.1825 16.5175 30.01C13 30.6575 12.09 29.1525 11.81 28.365C11.6525 27.9625 10.97 26.72 10.375 26.3875C9.885 26.125 9.185 25.4775 10.3575 25.46C11.46 25.4425 12.2475 26.475 12.51 26.895C13.77 29.0125 15.7825 28.4175 16.5875 28.05C16.71 27.14 17.0775 26.5275 17.48 26.1775C14.365 25.8275 11.11 24.62 11.11 19.265C11.11 17.7425 11.6525 16.4825 12.545 15.5025C12.405 15.1525 11.915 13.7175 12.685 11.7925C12.685 11.7925 13.8575 11.425 16.535 13.2275C17.655 12.9125 18.845 12.755 20.035 12.755C21.225 12.755 22.415 12.9125 23.535 13.2275C26.2125 11.4075 27.385 11.7925 27.385 11.7925C28.155 13.7175 27.665 15.1525 27.525 15.5025C28.4175 16.4825 28.96 17.725 28.96 19.265C28.96 24.6375 25.6875 25.8275 22.5725 26.1775C23.08 26.615 23.5175 27.455 23.5175 28.7675C23.5175 30.64 23.5 32.145 23.5 32.6175C23.5 32.985 23.7625 33.4225 24.4625 33.2825C27.2418 32.3443 29.6568 30.5581 31.3677 28.1753C33.0786 25.7926 33.9993 22.9334 34 20C34 12.265 27.735 6 20 6Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect x="0.25" y="0.25" width="39.5" height="39.5" rx="9.75" stroke="white" stroke-opacity="0.15" stroke-width="0.5"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="github_dark_filter0_f_18015_5351" x="-60" y="-60" width="120" height="120" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_18015_5351"/>
|
||||
</filter>
|
||||
<filter id="github_dark_filter1_f_18015_5351" x="-12" y="-12" width="120" height="120" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_18015_5351"/>
|
||||
</filter>
|
||||
<linearGradient id="github_dark_paint0_linear_18015_5351" x1="40" y1="40" x2="-3.57628e-06" y2="3.57628e-06" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#303036"/>
|
||||
<stop offset="1" stop-color="#3A3A40"/>
|
||||
</linearGradient>
|
||||
<clipPath id="github_dark_clip0_18015_5351">
|
||||
<rect width="40" height="40" rx="10" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.1 KiB |
@ -1,9 +0,0 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="github_light_github">
|
||||
<rect width="40" height="40" rx="10" fill="white"/>
|
||||
<rect x="0.25" y="0.25" width="39.5" height="39.5" rx="9.75" stroke="#101828" stroke-opacity="0.08" stroke-width="0.5"/>
|
||||
<g id="github_light_github_2">
|
||||
<path id="github_light_Vector" d="M20 6C12.265 6 6 12.265 6 20C6 26.195 10.0075 31.4275 15.5725 33.2825C16.2725 33.405 16.535 32.985 16.535 32.6175C16.535 32.285 16.5175 31.1825 16.5175 30.01C13 30.6575 12.09 29.1525 11.81 28.365C11.6525 27.9625 10.97 26.72 10.375 26.3875C9.885 26.125 9.185 25.4775 10.3575 25.46C11.46 25.4425 12.2475 26.475 12.51 26.895C13.77 29.0125 15.7825 28.4175 16.5875 28.05C16.71 27.14 17.0775 26.5275 17.48 26.1775C14.365 25.8275 11.11 24.62 11.11 19.265C11.11 17.7425 11.6525 16.4825 12.545 15.5025C12.405 15.1525 11.915 13.7175 12.685 11.7925C12.685 11.7925 13.8575 11.425 16.535 13.2275C17.655 12.9125 18.845 12.755 20.035 12.755C21.225 12.755 22.415 12.9125 23.535 13.2275C26.2125 11.4075 27.385 11.7925 27.385 11.7925C28.155 13.7175 27.665 15.1525 27.525 15.5025C28.4175 16.4825 28.96 17.725 28.96 19.265C28.96 24.6375 25.6875 25.8275 22.5725 26.1775C23.08 26.615 23.5175 27.455 23.5175 28.7675C23.5175 30.64 23.5 32.145 23.5 32.6175C23.5 32.985 23.7625 33.4225 24.4625 33.2825C27.2418 32.3443 29.6568 30.5581 31.3677 28.1753C33.0786 25.7926 33.9993 22.9334 34 20C34 12.265 27.735 6 20 6Z" fill="#1B1F24"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,40 +0,0 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="google_dark_google_dark" clip-path="url(#google_dark_clip0_18015_5351)">
|
||||
<rect width="40" height="40" fill="#3A3A40"/>
|
||||
<g id="google_dark_Dark Icon BG">
|
||||
<rect id="google_dark_BG" width="40" height="40" fill="url(#google_dark_paint0_linear_18015_5351)"/>
|
||||
<g id="google_dark_Ellipse 1" opacity="0.1" filter="url(#google_dark_filter0_f_18015_5351)" style="mix-blend-mode:luminosity">
|
||||
<circle r="20" fill="white" fill-opacity="0.8"/>
|
||||
</g>
|
||||
<g id="google_dark_Ellipse 2" opacity="0.12" filter="url(#google_dark_filter1_f_18015_5351)" style="mix-blend-mode:luminosity">
|
||||
<circle cx="48" cy="48" r="20" fill="black" fill-opacity="0.8"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="google_dark_google">
|
||||
<path id="google_dark_vector" d="M32.2512 20.272C32.2512 19.2648 32.1678 18.5298 31.9873 17.7676H20.2512V22.3136H27.14C27.0012 23.4434 26.2512 25.1448 24.5845 26.2881L24.5612 26.4403L28.2719 29.2574L28.529 29.2826C30.89 27.1456 32.2512 24.0014 32.2512 20.272Z" fill="#4285F4"/>
|
||||
<path id="google_dark_vector_2" d="M20.2497 32.2499C23.6246 32.2499 26.4579 31.161 28.5274 29.2827L24.5829 26.2881C23.5274 27.0095 22.1107 27.5131 20.2497 27.5131C16.9441 27.5131 14.1386 25.3762 13.1385 22.4226L12.9919 22.4348L9.13347 25.3612L9.08301 25.4987C11.1385 29.5004 15.3608 32.2499 20.2497 32.2499Z" fill="#34A853"/>
|
||||
<path id="google_dark_vector_3" d="M13.1405 22.4227C12.8767 21.6605 12.7239 20.8438 12.7239 19.9999C12.7239 19.156 12.8767 18.3394 13.1267 17.5771L13.1197 17.4148L9.21283 14.4414L9.08501 14.501C8.23782 16.1616 7.75171 18.0263 7.75171 19.9999C7.75171 21.9735 8.23782 23.8382 9.08501 25.4988L13.1405 22.4227Z" fill="#FBBC05"/>
|
||||
<path id="google_dark_vector_4" d="M20.2497 12.4866C22.5969 12.4866 24.1802 13.4802 25.083 14.3106L28.6108 10.935C26.4442 8.96139 23.6247 7.75 20.2497 7.75C15.3608 7.75 11.1385 10.4994 9.08301 14.5011L13.1247 17.5772C14.1386 14.6236 16.9442 12.4866 20.2497 12.4866Z" fill="#EB4335"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="google_dark_filter0_f_18015_5351" x="-60" y="-60" width="120" height="120" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_18015_5351"/>
|
||||
</filter>
|
||||
<filter id="google_dark_filter1_f_18015_5351" x="-12" y="-12" width="120" height="120" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_18015_5351"/>
|
||||
</filter>
|
||||
<linearGradient id="google_dark_paint0_linear_18015_5351" x1="40" y1="40" x2="-3.57628e-06" y2="3.57628e-06" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#303036"/>
|
||||
<stop offset="1" stop-color="#3A3A40"/>
|
||||
</linearGradient>
|
||||
<clipPath id="google_dark_clip0_18015_5351">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.0 KiB |
@ -1,11 +0,0 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="google_light_google_light">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
<g id="google_light_google">
|
||||
<path id="google_light_vector" d="M32.2512 20.272C32.2512 19.2648 32.1678 18.5298 31.9873 17.7676H20.2512V22.3136H27.14C27.0012 23.4434 26.2512 25.1448 24.5845 26.2881L24.5612 26.4403L28.2719 29.2574L28.529 29.2826C30.89 27.1456 32.2512 24.0014 32.2512 20.272Z" fill="#4285F4"/>
|
||||
<path id="google_light_vector_2" d="M20.2497 32.2499C23.6246 32.2499 26.4579 31.161 28.5274 29.2827L24.5829 26.2881C23.5274 27.0095 22.1107 27.5131 20.2497 27.5131C16.9441 27.5131 14.1386 25.3762 13.1385 22.4226L12.9919 22.4348L9.13347 25.3612L9.08301 25.4987C11.1385 29.5004 15.3608 32.2499 20.2497 32.2499Z" fill="#34A853"/>
|
||||
<path id="google_light_vector_3" d="M13.1405 22.4227C12.8767 21.6605 12.7239 20.8438 12.7239 19.9999C12.7239 19.156 12.8767 18.3394 13.1267 17.5771L13.1197 17.4148L9.21283 14.4414L9.08501 14.501C8.23782 16.1616 7.75171 18.0263 7.75171 19.9999C7.75171 21.9735 8.23782 23.8382 9.08501 25.4988L13.1405 22.4227Z" fill="#FBBC05"/>
|
||||
<path id="google_light_vector_4" d="M20.2497 12.4866C22.5969 12.4866 24.1802 13.4802 25.083 14.3106L28.6108 10.935C26.4442 8.96139 23.6247 7.75 20.2497 7.75C15.3608 7.75 11.1385 10.4994 9.08301 14.5011L13.1247 17.5772C14.1386 14.6236 16.9442 12.4866 20.2497 12.4866Z" fill="#EB4335"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,5 @@
|
||||
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="image-circle-ai-line">
|
||||
<path id="Vector" d="M20.4668 8.69379L20.7134 8.12811C21.1529 7.11947 21.9445 6.31641 22.9323 5.87708L23.6919 5.53922C24.1027 5.35653 24.1027 4.75881 23.6919 4.57612L22.9748 4.25714C21.9616 3.80651 21.1558 2.97373 20.7238 1.93083L20.4706 1.31953C20.2942 0.893489 19.7058 0.893489 19.5293 1.31953L19.2761 1.93083C18.8442 2.97373 18.0384 3.80651 17.0252 4.25714L16.308 4.57612C15.8973 4.75881 15.8973 5.35653 16.308 5.53922L17.0677 5.87708C18.0555 6.31641 18.8471 7.11947 19.2866 8.12811L19.5331 8.69379C19.7136 9.10792 20.2864 9.10792 20.4668 8.69379ZM12 4C7.58172 4 4 7.58172 4 12C4 14.4636 5.11358 16.6671 6.86484 18.1346L14.2925 10.707C14.683 10.3164 15.3162 10.3164 15.7067 10.707L19.5761 14.5764C19.5773 14.5729 19.5785 14.5693 19.5797 14.5658C19.8522 13.7604 20 12.8975 20 12C20 11.6765 19.9809 11.3579 19.9437 11.0452L21.9298 10.8094C21.9762 11.2002 22 11.5975 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.8614 2 13.6987 2.10914 14.4983 2.31487L14 4.25179C13.3618 4.0876 12.6919 4 12 4ZM10.813 19.9125C11.2 19.9701 11.5962 19.9998 11.9996 19.9998C14.7613 19.9998 17.1992 18.6003 18.6379 16.4666L14.9996 12.8283L8.58927 19.2386L8.59334 19.2405C9.28476 19.5664 10.0304 19.7961 10.813 19.9125ZM11 10C11 11.1046 10.1046 12 9 12C7.89543 12 7 11.1046 7 10C7 8.89543 7.89543 8 9 8C10.1046 8 11 8.89543 11 10Z" fill="#FF4405"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,5 @@
|
||||
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="plug-fill">
|
||||
<path id="Vector" d="M13 18V20H19V22H13C11.8954 22 11 21.1046 11 20V18H8C5.79086 18 4 16.2091 4 14V10H20V14C20 16.2091 18.2091 18 16 18H13ZM16 6H19C19.5523 6 20 6.44772 20 7V9H4V7C4 6.44772 4.44772 6 5 6H8V2H10V6H14V2H16V6ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5Z" fill="#0E9384"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 576 B |
@ -0,0 +1,5 @@
|
||||
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="IconPuzzleFill">
|
||||
<path id="Vector" d="M9.5 4V3.5C9.5 2.11929 10.6193 1 12 1C13.3807 1 14.5 2.11929 14.5 3.5V4H20C20.5523 4 21 4.44772 21 5V9C21 9.27614 20.7761 9.5 20.5 9.5C19.1193 9.5 18 10.6193 18 12C18 13.3807 19.1193 14.5 20.5 14.5C20.7761 14.5 21 14.7239 21 15V19C21 19.5523 20.5523 20 20 20H4C3.44772 20 3 19.5523 3 19V5C3 4.44772 3.44772 4 4 4H9.5Z" fill="#0BA5EC"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 559 B |
@ -0,0 +1,5 @@
|
||||
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="sparkling-fill">
|
||||
<path id="Vector" d="M14 4.4375C15.3462 4.4375 16.4375 3.34619 16.4375 2H17.5625C17.5625 3.34619 18.6538 4.4375 20 4.4375V5.5625C18.6538 5.5625 17.5625 6.65381 17.5625 8H16.4375C16.4375 6.65381 15.3462 5.5625 14 5.5625V4.4375ZM1 11C4.31371 11 7 8.31371 7 5H9C9 8.31371 11.6863 11 15 11V13C11.6863 13 9 15.6863 9 19H7C7 15.6863 4.31371 13 1 13V11ZM17.25 14C17.25 15.7949 15.7949 17.25 14 17.25V18.75C15.7949 18.75 17.25 20.2051 17.25 22H18.75C18.75 20.2051 20.2051 18.75 22 18.75V17.25C20.2051 17.25 18.75 15.7949 18.75 14H17.25Z" fill="#7839EE"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
@ -0,0 +1,5 @@
|
||||
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="voice-ai-fill">
|
||||
<path id="Vector" d="M20.7134 7.12811L20.4668 7.69379C20.2864 8.10792 19.7136 8.10792 19.5331 7.69379L19.2866 7.12811C18.8471 6.11947 18.0555 5.31641 17.0677 4.87708L16.308 4.53922C15.8973 4.35653 15.8973 3.75881 16.308 3.57612L17.0252 3.25714C18.0384 2.80651 18.8442 1.97373 19.2761 0.930828L19.5293 0.319534C19.7058 -0.106511 20.2942 -0.106511 20.4706 0.319534L20.7238 0.930828C21.1558 1.97373 21.9616 2.80651 22.9748 3.25714L23.6919 3.57612C24.1027 3.75881 24.1027 4.35653 23.6919 4.53922L22.9323 4.87708C21.9445 5.31641 21.1529 6.11947 20.7134 7.12811ZM8.5 6H6.5V18H8.5V6ZM4 10H2V14H4V10ZM13 2H11V22H13V2ZM17.5 8H15.5V18H17.5V8ZM22 10H20V14H22V10Z" fill="#0BA5EC"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 871 B |
@ -1,17 +1,43 @@
|
||||
.iconLight {
|
||||
display: block;
|
||||
.decorations {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.iconDark {
|
||||
display: none;
|
||||
/* 40px cells + 1px divider-subtle lines, matching Figma header/Variant2. */
|
||||
.grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(
|
||||
to right,
|
||||
transparent 20px,
|
||||
var(--color-divider-subtle) 20px,
|
||||
var(--color-divider-subtle) 21px,
|
||||
transparent 21px
|
||||
),
|
||||
linear-gradient(to bottom, var(--color-divider-subtle) 1px, transparent 1px);
|
||||
background-size:
|
||||
41px 100%,
|
||||
100% 41px;
|
||||
background-position:
|
||||
center top,
|
||||
left 40px;
|
||||
}
|
||||
|
||||
:global(html[data-theme='dark']) .iconLight {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:global(html[data-theme='dark']) .iconDark {
|
||||
display: block;
|
||||
.glow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 640px;
|
||||
height: 200px;
|
||||
transform: translateX(-50%);
|
||||
background: radial-gradient(
|
||||
ellipse 50% 45% at 50% 45%,
|
||||
var(--color-background-default) 0%,
|
||||
var(--color-background-default) 38%,
|
||||
transparent 72%
|
||||
);
|
||||
}
|
||||
|
||||
@media (max-width: 879px) {
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
'use client'
|
||||
|
||||
import type { ReactNode } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { cn } from '@langgenius/dify-ui/cn'
|
||||
import { motion, useReducedMotion } from 'motion/react'
|
||||
import { useTranslation } from '#i18n'
|
||||
import dropboxDarkIcon from './assets/dropbox-dark.svg'
|
||||
import dropboxLightIcon from './assets/dropbox-light.svg'
|
||||
import duckDuckGoDarkIcon from './assets/duckduckgo-dark.svg'
|
||||
import duckDuckGoLightIcon from './assets/duckduckgo-light.svg'
|
||||
import githubDarkIcon from './assets/github-dark.svg'
|
||||
import githubLightIcon from './assets/github-light.svg'
|
||||
import googleDarkIcon from './assets/google-dark.svg'
|
||||
import googleLightIcon from './assets/google-light.svg'
|
||||
import brain2FillIcon from './assets/brain-2-fill.svg'
|
||||
import imageCircleAiLineIcon from './assets/image-circle-ai-line.svg'
|
||||
import plugFillIcon from './assets/plug-fill.svg'
|
||||
import puzzleFillIcon from './assets/puzzle-fill.svg'
|
||||
import sparklingFillIcon from './assets/sparkling-fill.svg'
|
||||
import voiceAiFillIcon from './assets/voice-ai-fill.svg'
|
||||
import styles from './home-hero.module.css'
|
||||
|
||||
type HomeHeroProps = {
|
||||
@ -21,170 +17,58 @@ type HomeHeroProps = {
|
||||
title?: ReactNode
|
||||
}
|
||||
|
||||
type HeroIconMark = {
|
||||
darkSrc: string
|
||||
lightSrc: string
|
||||
type HeroDecorationIcon = {
|
||||
left: number
|
||||
src: string
|
||||
top: number
|
||||
}
|
||||
|
||||
const HERO_ICON_HOLD_MS = 4000
|
||||
const HERO_ICON_GAP_MS = 100
|
||||
const HERO_ICON_EXIT_MS = 400
|
||||
const heroIconSrc = (icon: { src: string } | string) => (typeof icon === 'string' ? icon : icon.src)
|
||||
|
||||
const heroDecorationIconFrameClassName =
|
||||
'absolute flex size-10 items-center justify-center overflow-hidden rounded-[10px] bg-components-panel-bg shadow-lg'
|
||||
|
||||
// Rest `left`/`top` is the designed outward pose. Hidden offsets pull each
|
||||
// mark toward the title so enter/exit travel radially, not in place.
|
||||
const heroIconSlots = [
|
||||
{ left: 99, top: 26, delay: 0, hiddenX: 32, hiddenY: 20 },
|
||||
{ left: 12, top: 89, delay: 0.075, hiddenX: 36, hiddenY: -16 },
|
||||
{ left: 589, top: 4, delay: 0, hiddenX: -32, hiddenY: 20 },
|
||||
{ left: 653, top: 68, delay: 0.05, hiddenX: -36, hiddenY: -14 },
|
||||
] as const
|
||||
|
||||
const heroIconSpring = {
|
||||
type: 'spring' as const,
|
||||
bounce: 0.4,
|
||||
duration: 0.25,
|
||||
}
|
||||
|
||||
const heroIconVariantsForSlot = (slot: (typeof heroIconSlots)[number]) => ({
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
scale: 0.5,
|
||||
x: slot.hiddenX,
|
||||
y: slot.hiddenY,
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
})
|
||||
|
||||
// First set is the designed placement. The second set swaps left/right pairs so
|
||||
// the group replacement is visible with only these four marks.
|
||||
const heroIconSets: HeroIconMark[][] = [
|
||||
[
|
||||
{ darkSrc: dropboxDarkIcon.src, lightSrc: dropboxLightIcon.src },
|
||||
{ darkSrc: duckDuckGoDarkIcon.src, lightSrc: duckDuckGoLightIcon.src },
|
||||
{ darkSrc: githubDarkIcon.src, lightSrc: githubLightIcon.src },
|
||||
{ darkSrc: googleDarkIcon.src, lightSrc: googleLightIcon.src },
|
||||
],
|
||||
[
|
||||
{ darkSrc: githubDarkIcon.src, lightSrc: githubLightIcon.src },
|
||||
{ darkSrc: googleDarkIcon.src, lightSrc: googleLightIcon.src },
|
||||
{ darkSrc: dropboxDarkIcon.src, lightSrc: dropboxLightIcon.src },
|
||||
{ darkSrc: duckDuckGoDarkIcon.src, lightSrc: duckDuckGoLightIcon.src },
|
||||
],
|
||||
// Positions are Figma offsets from the 1512px canvas center, with the top
|
||||
// icon row shifted to y=0 so the marks sit in HomeHero instead of the header.
|
||||
const heroDecorationIcons: HeroDecorationIcon[] = [
|
||||
{ src: heroIconSrc(sparklingFillIcon), left: -450, top: 41 },
|
||||
{ src: heroIconSrc(plugFillIcon), left: -286, top: 0 },
|
||||
{ src: heroIconSrc(puzzleFillIcon), left: -327, top: 123 },
|
||||
{ src: heroIconSrc(brain2FillIcon), left: 247, top: 82 },
|
||||
{ src: heroIconSrc(imageCircleAiLineIcon), left: 370, top: 123 },
|
||||
{ src: heroIconSrc(voiceAiFillIcon), left: 411, top: 0 },
|
||||
]
|
||||
|
||||
// Brand marks stay file exports so multi-color logos render. Tailwind iconify
|
||||
// classes mask to currentColor and would flatten or hide them.
|
||||
const ThemeIcon = ({
|
||||
darkSrc,
|
||||
lightSrc,
|
||||
}: {
|
||||
darkSrc: string
|
||||
lightSrc: string
|
||||
}) => (
|
||||
<>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden
|
||||
className={cn('size-10 object-cover', styles.iconLight)}
|
||||
src={lightSrc}
|
||||
/>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden
|
||||
className={cn('size-10 object-cover', styles.iconDark)}
|
||||
src={darkSrc}
|
||||
/>
|
||||
</>
|
||||
const HeroDecorations = () => (
|
||||
<div aria-hidden className={styles.decorations}>
|
||||
<div className={styles.grid} />
|
||||
<div className={styles.glow} />
|
||||
{heroDecorationIcons.map((icon) => (
|
||||
<span
|
||||
key={icon.src}
|
||||
className="absolute flex size-10 items-center justify-center overflow-hidden bg-state-accent-hover"
|
||||
style={{ left: `calc(50% + ${icon.left}px)`, top: icon.top }}
|
||||
>
|
||||
<span className="relative size-6 overflow-hidden">
|
||||
<img alt="" aria-hidden className="size-full" height={24} src={icon.src} width={24} />
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
||||
const HeroDecorationIcons = () => {
|
||||
const reducedMotion = useReducedMotion()
|
||||
const [setIndex, setSetIndex] = useState(0)
|
||||
const [open, setOpen] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (reducedMotion)
|
||||
return
|
||||
|
||||
if (open) {
|
||||
const timeoutId = window.setTimeout(() => {
|
||||
setOpen(false)
|
||||
}, HERO_ICON_HOLD_MS)
|
||||
return () => window.clearTimeout(timeoutId)
|
||||
}
|
||||
|
||||
const timeoutId = window.setTimeout(() => {
|
||||
setSetIndex(current => (current + 1) % heroIconSets.length)
|
||||
setOpen(true)
|
||||
}, HERO_ICON_EXIT_MS + HERO_ICON_GAP_MS)
|
||||
|
||||
return () => window.clearTimeout(timeoutId)
|
||||
}, [open, reducedMotion])
|
||||
|
||||
const icons = heroIconSets[setIndex] ?? heroIconSets[0]
|
||||
|
||||
if (reducedMotion) {
|
||||
return (
|
||||
<div aria-hidden className={cn('pointer-events-none absolute inset-0', styles.decorations)}>
|
||||
{heroIconSets[0].map((icon, index) => {
|
||||
const slot = heroIconSlots[index]
|
||||
return (
|
||||
<span
|
||||
key={index}
|
||||
className={heroDecorationIconFrameClassName}
|
||||
style={{ left: slot.left, top: slot.top }}
|
||||
>
|
||||
<ThemeIcon darkSrc={icon.darkSrc} lightSrc={icon.lightSrc} />
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div aria-hidden className={cn('pointer-events-none absolute inset-0', styles.decorations)}>
|
||||
{icons.map((icon, index) => {
|
||||
const slot = heroIconSlots[index]
|
||||
return (
|
||||
<motion.span
|
||||
key={index}
|
||||
className={heroDecorationIconFrameClassName}
|
||||
style={{ left: slot.left, top: slot.top }}
|
||||
variants={heroIconVariantsForSlot(slot)}
|
||||
initial="hidden"
|
||||
animate={open ? 'visible' : 'hidden'}
|
||||
transition={{ ...heroIconSpring, delay: slot.delay }}
|
||||
>
|
||||
<ThemeIcon darkSrc={icon.darkSrc} lightSrc={icon.lightSrc} />
|
||||
</motion.span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const HomeHero = ({ isMarketplacePlatform, subtitle, title }: HomeHeroProps) => {
|
||||
const { t } = useTranslation('plugin')
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cn(
|
||||
'relative flex shrink-0 justify-center bg-background-default px-4',
|
||||
'relative flex shrink-0 justify-center overflow-x-hidden bg-background-default px-4',
|
||||
!isMarketplacePlatform && 'pt-6',
|
||||
)}
|
||||
>
|
||||
<HeroDecorations />
|
||||
<div className="relative flex h-[162px] w-full max-w-[726px] flex-col items-center pt-[41px]">
|
||||
<HeroDecorationIcons />
|
||||
<div className={cn('flex w-full flex-col items-center gap-2 text-center', styles.copyBlock)}>
|
||||
<div
|
||||
className={cn('flex w-full flex-col items-center gap-2 text-center', styles.copyBlock)}
|
||||
>
|
||||
<h1
|
||||
className="text-[28px] leading-[1.2] font-medium tracking-[-0.56px] text-text-primary"
|
||||
style={{ fontFamily: "var(--font-family-brand, 'Söhne', var(--font-sans))" }}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user