Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui-ux): download assets section #734

Merged
merged 4 commits into from
Feb 1, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat(ui-ux): download assets section
chloezxyy committed Feb 1, 2024

Verified

This commit was signed with the committer’s verified signature.
chloezxyy Chloe
commit f3ca5ac584165ae0f593f068ef77d04b206a05dc
21 changes: 21 additions & 0 deletions public/assets/svg/dfi/dfi-powered-by.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/downloads/visualAssets/dfi-3d-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions public/downloads/visualAssets/dfi-3d-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/downloads/visualAssets/dfi-btc-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions public/downloads/visualAssets/dfi-btc-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/downloads/visualAssets/dfi-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/downloads/visualAssets/dfi-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions public/downloads/visualAssets/dfi-powered-by.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/downloads/visualAssets/dfi.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions public/downloads/visualAssets/dfi.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions public/locales/en-US/page-explore-wallets.json
Original file line number Diff line number Diff line change
@@ -30,6 +30,33 @@
}
}
},
"visualAssetsSection": {
"sectionTitle": "Supercharge your DeFi Blockchain development",
"title": "Visual Assets",
"subtitle": "The media assets are released under CCO license. \"No Rights Reserved\"",
"entries": {
"DFC": {
"title": "DeFiChain logo",
"desc": "The official and default logo"
},
"PowerDFC": {
"title": "Powered by DeFiChain",
"desc": "Useful for project works"
},
"Jellyfish": {
"title": "The DeFi jellyfish logo",
"desc": "Useful when space is constrained"
},
"Built": {
"title": "Built-on-Bitcoin",
"desc": "3D asset for illustration purposes"
},
"DFI3D": {
"title": "DFI 3D Coin",
"desc": "3D asset for illustration purposes"
}
}
},
"advanceUseSection": {
"sectionTitle": "SUITABLE FOR ADVANCE USAGE",
"title": "Advanced usage of DeFiChain",
134 changes: 134 additions & 0 deletions src/components/icons/assets/downloadAssets/BTCDFILogo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
export default function BTCDFILogo(): JSX.Element {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="71"
height="51"
viewBox="0 0 71 51"
fill="none"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M44.6623 34.1546C44.7677 40.4203 35.1124 45.664 23.0967 45.8667C11.0815 46.0693 1.25492 41.1541 1.14954 34.8883C1.04415 28.6225 10.6994 23.3789 22.7151 23.1762C34.7303 22.9736 44.5564 27.8893 44.6623 34.1546V34.1546Z"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M40.3881 33.6239C40.4712 38.5734 32.7325 42.7175 23.1022 42.8802C13.4724 43.0423 5.59724 39.1622 5.51418 34.2126C5.43112 29.2631 13.1703 25.119 22.8006 24.9563C32.4304 24.7937 40.3051 28.6743 40.3886 33.6239H40.3881Z"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M5.65506 35.2887C5.82222 30.4472 13.4342 26.4356 22.8683 26.2766C32.0812 26.1207 39.6802 29.6958 40.34 34.3643"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M44.6541 34.5686L44.2419 38.8899C43.6533 45.1084 34.4782 50.18 23.1592 50.3713C11.8702 50.5615 2.54928 45.8286 1.70777 39.6569L1.15958 35.1625"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M19.9569 26.4519L21.5117 27.8155C21.5117 27.8155 24.9525 26.9487 26.8016 27.5811C28.6518 28.213 29.6038 29.2216 28.414 30.2848C28.414 30.2848 31.5184 30.0166 32.9481 30.8891C34.4675 31.8161 34.5667 33.0311 33.7792 33.8115C32.9917 34.592 30.4152 35.6251 30.4152 35.6251L32.6246 37.5623L30.4277 38.2513L28.2692 36.2923L26.6022 36.8192L28.6974 38.7938L26.4512 39.4984L24.3954 37.516L20.1142 38.8681L19.038 37.2682L20.855 36.7189C20.9202 36.6981 20.9789 36.6607 21.0254 36.6104C21.0718 36.5601 21.1044 36.4986 21.12 36.4318C21.1356 36.3651 21.1336 36.2955 21.1143 36.2298C21.095 36.1641 21.0589 36.1045 21.0097 36.0569L16.3941 31.5984C16.1851 31.3962 15.9265 31.2528 15.6444 31.1827C15.3622 31.1126 15.0666 31.1184 14.7874 31.1993L13.229 31.6894L12.1077 30.7119L16.0759 29.4892L14.4796 27.949L16.5831 27.3738L18.1498 28.8506L19.5826 28.4094L18.0112 26.984L19.9569 26.4514"
stroke="#FF00AF"
strokeWidth="0.746762"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M21.3334 31.8486L19.2646 29.8984L22.0949 29.0794C22.0949 29.0794 23.5755 28.6975 24.7129 29.1314C25.8254 29.5554 25.2538 30.5916 24.1548 30.9215L21.3334 31.8486Z"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M20.5508 31.1122L22.0957 30.6653C22.0957 30.6653 23.5763 30.2834 24.7137 30.7173M22.9071 33.3337L25.6938 32.5459C27.26 32.1614 29.0177 32.1058 29.6495 32.6561C30.2813 33.2058 29.4855 33.9531 28.7722 34.1817L25.0656 35.3686L22.9071 33.3337Z"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M24.2221 34.5722L25.875 34.1045C27.0492 33.8161 28.3315 33.7132 29.1662 33.9117M12.1077 30.7092V32.1694L13.229 33.2918L14.8321 32.7904C15.1133 32.7024 15.4129 32.6917 15.6997 32.7594C15.9864 32.827 16.2497 32.9705 16.4621 33.1749L20.3229 36.8867M13.2295 31.6867V33.2923M19.0386 37.2655L18.9472 38.8239L20.0099 40.6218L24.4276 39.1357L26.4969 41.2662L28.7442 40.4555L28.6974 38.7917M20.1147 38.8654L20.0099 40.6218M24.3965 37.5133L24.4276 39.1351M26.4517 39.4958L26.4969 41.2662"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M27.8604 38.0004L28.2409 37.8913L30.3916 39.9215L32.56 39.1919L32.6244 37.5576M30.428 38.2467L30.3916 39.9215M28.2694 36.2882L28.2409 37.8913M34.216 32.3499C34.4154 33.3673 34.5493 34.762 33.7338 35.504C33.0724 36.1058 31.6671 36.7174 31.6671 36.7174"
stroke="#FF00AF"
strokeWidth="0.746762"
strokeLinejoin="round"
/>
<path
d="M18.012 26.9788V28.4301L18.3577 28.7819"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M14.48 27.9436L14.4873 29.5451L14.8206 29.8709"
stroke="#FF00AF"
strokeWidth="0.746762"
strokeLinejoin="round"
/>
<path
d="M35.5276 3.57917C36.2501 3.37556 36.9825 3.20905 37.7219 3.08032M48.5873 4.93439C49.5616 5.12989 50.5244 5.37865 51.4715 5.67954C60.6087 8.57288 66.5423 15.5999 64.7254 21.3752C63.9301 23.9022 61.7835 25.7702 58.8541 26.8308"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M49.42 6.72354C50.0674 6.87735 50.7204 7.05767 51.374 7.265C60.1374 10.0399 65.8852 16.6029 64.211 21.9239C63.4884 24.2207 61.5006 25.9096 58.7706 26.8657M49.2612 19.0493L53.6338 29.4893M42.6184 3.19001L46.3587 12.121M48.5884 4.93287L58.77 26.8652M26.2057 11.5094C26.3318 11.088 26.4808 10.626 26.6677 10.2223C26.826 9.88293 27.0025 9.55556 27.1977 9.2417M42.8121 1.6311L42.1943 6.60454L44.37 11.0474L47.5808 12.7799L42.8121 1.6311Z"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M49.6743 17.6702L47.9607 19.6385L49.6743 24.9196L55.7928 31.9752L49.6743 17.6702Z"
stroke="#FF00AF"
strokeWidth="0.746762"
strokeLinejoin="bevel"
/>
<path
d="M49.673 17.6704L49.2603 19.0459M48.1686 20.2847L49.2603 19.0459M31.8156 6.92798L37.609 8.68695L38.2112 9.91433M37.609 8.68695L37.9584 7.39097M28.4361 19.9038C27.5224 18.5299 26.8538 17.1134 26.4634 15.6948L36.5209 17.6704L43.5136 17.2407L45.2257 15.3419L41.8825 13.4224L34.9283 13.2275L26.3897 15.4079C26.0642 14.0953 25.9785 12.7838 26.1612 11.5039L30.1014 10.6252L27.445 7.9605M31.8099 25.3818C30.3859 24.116 29.1436 22.6766 28.1947 21.2731L28.4366 19.9038L33.3091 20.8012L32.0918 24.0458L31.8099 25.3823V25.3818Z"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M27.1969 9.2408L27.4445 7.9625C28.0841 6.92426 28.9277 6.00191 29.9415 5.20323L35.083 9.91633H39.1238L37.9584 7.39298L30.0936 5.08579C31.1677 4.26684 32.425 3.58404 33.8262 3.04622L37.5696 4.22579L37.8489 1.97265C42.1197 1.26023 47.1506 1.61722 52.2417 3.22965C64.0965 6.9835 71.7894 16.1203 69.4238 23.6368C67.4687 29.8496 59.254 33.0105 49.7686 31.8003M28.9282 10.8886L27.1969 9.2408"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M28.7374 16.1424L34.7089 14.5668L41.5469 14.6967L44.4 16.2593M41.5464 14.6967L41.8833 13.4236M34.929 13.2288L34.7089 14.5668M28.1954 21.2743L32.8271 22.0906M43.2953 30.3243C41.2337 29.6498 39.2401 28.7825 37.3409 27.7339L44.2437 24.2871L43.3015 21.0737L39.0374 21.3543L37.0445 27.5676C35.1953 26.5169 33.5321 25.328 32.092 24.0476"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M38.6224 22.6429L42.8725 22.3378L43.5967 24.6086M43.3003 21.0725L42.8731 22.3378M49.2381 33.0912L49.7686 31.7983L46.8163 28.4404L43.2941 30.3231L42.9052 31.7001C43.0319 31.7422 43.1596 31.7833 43.2873 31.8238C45.3431 32.4749 47.2483 32.8376 49.2381 33.0917V33.0912Z"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M42.9051 31.702L46.4352 29.6572L49.2379 33.093M46.4352 29.6572L46.8162 28.4423M69.1143 24.4749L66.6448 29.8401C64.0782 35.2412 56.4746 37.9397 47.8493 36.8188L46.8183 35.4236"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M41.7041 35.4008L42.0836 34.2483C42.2461 34.3023 42.4091 34.3548 42.5731 34.4068C44.4794 35.0106 46.4811 35.4138 48.3328 35.6539L47.8506 36.821"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M27.5023 25.1891L27.711 23.9045C28.7218 25.4026 29.9147 26.769 31.2624 27.9723L30.9888 29.2703C32.3723 30.5351 33.9764 31.7069 35.7627 32.7399C37.5007 33.722 39.6613 34.7187 41.702 35.3994L43.126 34.5748"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
<path
d="M26.1616 11.5061L25.5179 16.4068C24.9115 19.2793 25.6767 22.3322 27.504 25.1887L28.805 25.384"
stroke="#FF00AF"
strokeWidth="0.746762"
/>
</svg>
);
}
70 changes: 70 additions & 0 deletions src/components/icons/assets/downloadAssets/DFI3D.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
export default function DFI3D(): JSX.Element {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="63"
height="51"
viewBox="0 0 63 51"
fill="none"
>
<path
d="M14.8834 4.31469C15.8792 4.03475 16.8886 3.80586 17.9078 3.62891M32.8849 6.17861C34.2275 6.44787 35.5545 6.78979 36.8601 7.20286C49.455 11.1829 57.6343 20.8472 55.1293 28.7901C54.0323 32.2653 51.074 34.8348 47.0364 36.2931"
stroke="#FF00AF"
strokeWidth="0.75"
/>
<path
d="M34.0317 8.63671C34.9383 8.85195 35.8368 9.10012 36.7254 9.38072C48.8045 13.198 56.7269 22.2244 54.419 29.5413C53.4229 32.7004 50.6835 35.0239 46.9203 36.3383M33.8128 25.5883L39.8402 39.9465M24.6566 3.77698L29.8126 16.0597M32.8858 6.17435L46.9198 36.3372M2.03369 15.2184C2.20786 14.6392 2.41271 14.0039 2.6711 13.4486C2.88709 12.9845 3.13103 12.534 3.40158 12.0994M24.9234 1.63281L24.0723 8.47293L27.0711 14.5836L31.4966 16.9659L24.9234 1.63281Z"
stroke="#FF00AF"
strokeWidth="0.75"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M34.3813 23.6953L32.0193 26.402L34.3813 33.6654L42.8153 43.3692L34.3813 23.6953Z"
stroke="#FF00AF"
strokeWidth="0.75"
strokeLinejoin="bevel"
/>
<path
d="M34.3811 23.6966L33.8123 25.5886M32.3077 27.2913L33.8123 25.588M9.76639 8.92188L17.7522 11.3411L18.5825 13.0293M17.7522 11.3411L18.2342 9.55878M5.10901 26.7678C3.84927 24.8789 2.92746 22.9302 2.38987 20.9784L16.2528 23.6966L25.891 23.1049L28.2514 20.4938L23.6434 17.8537L14.0572 17.5859L2.28797 20.5843C1.83981 18.7796 1.72127 16.975 1.97394 15.215L7.40391 14.0067L3.74269 10.3423M9.75911 34.3025C7.79644 32.5608 6.08437 30.5814 4.77575 28.6509L5.10901 26.7678L11.8263 28.0026L10.148 32.4646L9.75911 34.3025Z"
stroke="#FF00AF"
strokeWidth="0.75"
/>
<path
d="M3.40051 12.1011L3.7421 10.3438C4.62335 8.91607 5.78639 7.64694 7.18392 6.54938L14.2708 13.0308H19.8407L18.2341 9.56026L7.39292 6.38716C8.87363 5.26101 10.607 4.32098 12.539 3.58217L17.6986 5.20486L18.0834 2.10559C23.9698 1.12553 30.9044 1.61686 37.9222 3.83382C54.2625 8.99666 64.8656 21.5632 61.6052 31.9004C58.9105 40.4448 47.5873 44.7924 34.5126 43.1281M5.78691 14.368L3.40103 12.1011"
stroke="#FF00AF"
strokeWidth="0.75"
/>
<path
d="M5.52327 21.5969L13.7535 19.4299L23.179 19.6087L27.1121 21.7576M23.179 19.6087L23.6427 17.8581M14.0571 17.5898L13.754 19.4304M4.77563 28.6549L11.1596 29.7779M25.5893 41.1019C22.645 40.1358 19.8936 38.9291 17.382 37.5393L26.8964 32.7987L25.5976 28.3793L19.7205 28.7656L16.9733 37.3106C14.4247 35.8652 12.1319 34.2305 10.1469 32.469"
stroke="#FF00AF"
strokeWidth="0.75"
/>
<path
d="M19.1505 30.5348L25.0089 30.1147L26.0066 33.2379M25.5979 28.375L25.0089 30.1147M33.7829 44.9044L34.5134 43.1263L30.4446 38.5083L25.5896 41.0975L25.0541 42.9916C25.2283 43.0488 25.4035 43.106 25.5803 43.1616C28.4138 44.0564 31.0394 44.5556 33.7829 44.9044Z"
stroke="#FF00AF"
strokeWidth="0.75"
/>
<path
d="M25.0524 42.9902L29.9182 40.1779L33.7812 44.9035M29.9187 40.1784L30.4439 38.5074M61.179 33.0508L57.7751 40.4295C54.2377 47.8577 43.7567 51.5689 31.8679 50.0273L30.4465 48.1088"
stroke="#FF00AF"
strokeWidth="0.75"
/>
<path
d="M23.3958 48.078L23.9188 46.4922C24.1423 46.5671 24.3675 46.6398 24.5936 46.7106C27.2207 47.5414 29.9799 48.0962 32.5322 48.4263L31.8677 50.0313"
stroke="#FF00AF"
strokeWidth="0.75"
/>
<path
d="M3.82288 34.0362L4.11039 32.2695C5.50395 34.3301 7.1484 36.2093 9.00588 37.8639L8.62843 39.6488C10.5355 41.3885 12.7461 42.9997 15.209 44.4207C17.6047 45.7714 20.5823 47.1425 23.396 48.0783L25.3587 46.9449"
stroke="#FF00AF"
strokeWidth="0.75"
/>
<path
d="M1.97329 15.2148L1.08684 21.9557C0.25082 25.9055 1.3052 30.1044 3.82314 34.0335L5.61684 34.3023"
stroke="#FF00AF"
strokeWidth="0.75"
/>
</svg>
);
}
21 changes: 21 additions & 0 deletions src/components/icons/assets/downloadAssets/DeFiChainAsset.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { SVGProps } from "react";

export default function DeFiChainAsset(
props: SVGProps<SVGSVGElement>,
): JSX.Element {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="49"
height="50"
viewBox="0 0 49 50"
fill="none"
{...props}
>
<path
d="M29.7719 43.2505V6.8452C37.6009 9.18291 43.3257 16.4558 43.3257 25.0547C43.3257 33.6536 37.6009 40.9265 29.7719 43.2642V43.2505ZM24.3477 0.625V21.2132L21.2461 18.1099L20.8499 10.3723L24.0881 0.638671C22.0113 0.666012 20.0165 0.953099 18.1036 1.45892L16.546 6.16167L12.1192 3.93333C10.3703 4.95864 8.7444 6.17534 7.2961 7.58343L15.5076 11.6983L15.7536 16.4011L11.0535 16.155L6.94086 7.93887C5.53356 9.38797 4.30388 11.0011 3.29281 12.7647L5.5199 17.194L0.819787 18.7525C0.314252 20.6664 0.0136631 22.676 0 24.7403L9.72814 21.5003L17.4615 21.8967L20.563 25L17.4615 28.1033L9.72814 28.4997L0 25.2597C0.0273262 27.3377 0.314252 29.3336 0.819787 31.2475L5.5199 32.806L3.29281 37.2353C4.31754 38.9852 5.53356 40.612 6.94086 42.0611L11.0535 33.845L15.7536 33.5989L15.5076 38.3017L7.2961 42.4166C8.7444 43.8247 10.3566 45.055 12.1192 46.0667L16.546 43.8383L18.1036 48.5411C20.0165 49.0469 22.0249 49.3477 24.0881 49.3613L20.8499 39.6277L21.2461 31.8901L24.3477 28.7868V49.375C37.8332 49.375 48.75 38.4384 48.75 24.959C48.75 11.4796 37.8195 0.625 24.3477 0.625Z"
fill="#FF00AF"
/>
</svg>
);
}

Large diffs are not rendered by default.

74 changes: 74 additions & 0 deletions src/pages/explore/wallets/_components/DownloadAssetsCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { PropsWithChildren } from "react";
import { MdOutlineFileDownload } from "react-icons/md";
import Link from "next/link";

interface DynamicDownloadCardProps {
testid: string;
title: string;
desc: string;
customCardStyle?: string;
svgAssetPath: string;
pngAssetPath: string;
}

export function DownloadAssetsCard(
props: PropsWithChildren<DynamicDownloadCardProps>,
): JSX.Element {
const {
title,
desc,
svgAssetPath,
pngAssetPath,
testid,
customCardStyle,
children,
} = props;
return (
<div
data-testid={testid}
className={`${customCardStyle} border-[0.5px] border-dark-300 rounded-[15px] bg-dark-00 backdrop-blur bg-opacity-90 lg:p-6 lg:py-8
w-full flex lg:flex-row flex-col items-center gap-6`}
>
<div className="overflow-hidden py-[35px] w-full lg:w-fit rounded-t-[15px] bg-light-900 lg:bg-transparent">
{/* Image */}
<div className="grow flex lg:w-[151.293px] items-center justify-center w-full">
{children}
</div>
</div>
<div className="flex flex-col justify-between items-start self-stretch pb-6 px-6 gap-y-4 lg:p-0">
<div className="flex flex-col gap-y-1">
<h3 className="text-base leading-5 lg:text-lg font-bold lg:leading-6">
{title}
</h3>
<div className="text-sm lg:text-base text-dark-500 font-desc overflow-hidden">
{desc}
</div>
</div>
<div className="flex flex-row gap-x-6">
<Link
href={svgAssetPath ?? ""}
download
className="flex flex-row items-center gap-x-1"
target="_blank"
rel="noopener noreferrer"
locale={false}
>
<MdOutlineFileDownload />
<span className="text-sm">SVG</span>
</Link>
<Link
href={pngAssetPath ?? ""}
download
className="flex flex-row items-center gap-x-1"
target="_blank"
rel="noopener noreferrer"
locale={false}
>
<MdOutlineFileDownload />
<span className="text-sm">PNG</span>
</Link>
</div>
</div>
</div>
);
}
122 changes: 122 additions & 0 deletions src/pages/explore/wallets/_components/VisualAssetsSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
import { useTranslation } from "next-i18next";
import { Container } from "@components/commons/Container";
import { SectionTitle } from "@components/commons/SectionTitle";
import classNames from "classnames";
import DeFiChainLogo from "@components/icons/DeFiChainLogo";
import PoweredByDeFiChainLogo from "@components/icons/assets/downloadAssets/PoweredByDeFiChainLogo";
import DeFiChainAsset from "@components/icons/assets/downloadAssets/DeFiChainAsset";
import BTCDFILogo from "@components/icons/assets/downloadAssets/BTCDFILogo";
import DFI3D from "@components/icons/assets/downloadAssets/DFI3D";
import { DownloadAssetsCard } from "./DownloadAssetsCard";

export function VisualAssetsSection() {
const { t } = useTranslation(["page-explore-wallets"]);

return (
<Container className="mt-[120px] md:mt-[96px] lg:mt-[240px] lg:mb-[240px] md:mb-[112px] mb-[72px] relative">
<div className="flex flex-col gap-y-5">
<div className="flex md:justify-center justify-start">
<SectionTitle
text={t("visualAssetsSection.sectionTitle")}
testID="advance-usage"
/>
</div>

<h2
className={classNames(
"lg:text-[60px] lg:leading-[72px] md:text-[40px] md:leading-[44px] text-[32px] leading-9",
"text-dark-1000 md:text-center text-left",
)}
data-testid="visualAssetsSection.Title"
>
{t("visualAssetsSection.title")}
</h2>
<p
className={classNames(
"lg:text-xl text-base font-desc",
"lg:tracking-normal tracking-[0.03em]",
"text-dark-700 md:text-center text-left",
)}
data-testid="visualAssetsSection.Subtitle"
>
{t("visualAssetsSection.subtitle")}
</p>
</div>

<div className="grid md:grid-cols-2 grid-cols-1 md:gap-6 gap-5 md:mt-16 mt-8 items-center justify-center">
<DownloadAssetsCard
title={t("visualAssetsSection.entries.DFC.title")}
desc={t("visualAssetsSection.entries.DFC.desc")}
testid="visualAssetsSection.Dfc"
svgAssetPath="/downloads/visualAssets/dfi.svg"
pngAssetPath="/downloads/visualAssets/dfi.png"
>
<DeFiChainLogo
fill="#FFFFFF"
className="w-[159px] h-9 md:w-[194.33px] lg:block lg:w-40 lg:h-full md:h-[44px]"
/>
</DownloadAssetsCard>

<DownloadAssetsCard
title={t("visualAssetsSection.entries.PowerDFC.title")}
desc={t("visualAssetsSection.entries.PowerDFC.desc")}
testid="visualAssetsSection.Dfc"
svgAssetPath="/downloads/visualAssets/dfi-powered-by.svg"
pngAssetPath="/downloads/visualAssets/dfi-powered-by.png"
>
<PoweredByDeFiChainLogo
fill="#FFFFFF"
className="w-[159px] h-9 md:w-[194.33px] lg:block lg:w-40 lg:h-full md:h-[44px]"
/>
</DownloadAssetsCard>

<DownloadAssetsCard
title={t("visualAssetsSection.entries.Jellyfish.title")}
desc={t("visualAssetsSection.entries.Jellyfish.desc")}
testid="visualAssetsSection.Dfc"
svgAssetPath="/downloads/visualAssets/dfi-logo.svg"
pngAssetPath="/downloads/visualAssets/dfi-logo.png"
>
<DeFiChainAsset className="w-[159px] h-9 md:w-[194.33px] lg:block lg:w-[48.75px] lg:h-full md:h-[44px]" />
</DownloadAssetsCard>

<DownloadAssetsCard
title={t("visualAssetsSection.entries.Built.title")}
desc={t("visualAssetsSection.entries.Built.desc")}
testid="visualAssetsSection.Dfc"
svgAssetPath="/downloads/visualAssets/dfi-btc-logo.svg"
pngAssetPath="/downloads/visualAssets/dfi-btc-logo.png"
>
<BTCDFILogo />
</DownloadAssetsCard>

<DownloadAssetsCard
title={t("visualAssetsSection.entries.DFI3D.title")}
desc={t("visualAssetsSection.entries.DFI3D.desc")}
testid="visualAssetsSection.Dfc"
svgAssetPath="/downloads/visualAssets/dfi-3d-logo.svg"
pngAssetPath="/downloads/visualAssets/dfi-3d-logo.png"
>
<DFI3D className="w-[159px] h-9 md:w-[194.33px] lg:block lg:w-40 lg:h-full md:h-[44px]" />

Check failure on line 100 in src/pages/explore/wallets/_components/VisualAssetsSection.tsx

GitHub Actions / Lint - Typescript and ESLint

Type '{ className: string; }' is not assignable to type 'IntrinsicAttributes'.
</DownloadAssetsCard>
</div>

<div
className={classNames(
"z-[-1] absolute bg-contain bg-no-repeat md:rotate-0",
"bg-[url(/assets/img/background/explore/wallet/grids-accent.png)]",
"lg:h-[300.18px] lg:w-[479.8px] lg:-right-[15em] lg:-bottom-[7.75em]",
"md:h-[281.94px] md:w-[450.65px] md:-right-[10.7em] md:-bottom-[5em]",
"h-[183.04px] w-[292.57px] rotate-90 -right-[11em] -bottom-[6.5em]",
)}
/>
<div
className={classNames(
"hidden md:block absolute bg-contain bg-no-repeat mix-blend-screen bg-[url(/assets/img/background/explore/wallet/union.png)]",
"lg:h-[45px] lg:w-[45px] lg:-right-[1.5em] lg:-bottom-[1.5em]",
"md:h-8 md:w-8 -right-[1.2em] -bottom-[4.75em]",
)}
/>
</Container>
);
}
2 changes: 2 additions & 0 deletions src/pages/explore/wallets/index.page.tsx
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import { HeroBanner, HeroBannerBg } from "@components/commons/HeroBanner";
import { Head } from "@components/commons/Head";
import { AdvanceUsageSection } from "./_components/AdvanceUsageSection";
import { ForDailyUseSection } from "./_components/ForDailyUseSection";
import { VisualAssetsSection } from "./_components/VisualAssetsSection";

export default function ExploreWallets() {
const { t } = useTranslation("page-explore-wallets");
@@ -27,6 +28,7 @@ export default function ExploreWallets() {
/>
<ForDailyUseSection />
<AdvanceUsageSection />
<VisualAssetsSection />
{/* TODO: uncomment after mvp */}
{/* <Container className="lg:mb-8 md:mb-6 mb-4">
<div className="flex flex-row overflow-x-scroll lg:gap-x-8 md:gap-x-6 gap-x-4">