diff --git a/public/assets/svg/dfi/dfi-powered-by.svg b/public/assets/svg/dfi/dfi-powered-by.svg new file mode 100644 index 000000000..087e2552b --- /dev/null +++ b/public/assets/svg/dfi/dfi-powered-by.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/downloads/visualAssets/dfi-3d-logo.png b/public/downloads/visualAssets/dfi-3d-logo.png new file mode 100644 index 000000000..675809f3b Binary files /dev/null and b/public/downloads/visualAssets/dfi-3d-logo.png differ diff --git a/public/downloads/visualAssets/dfi-3d-logo.svg b/public/downloads/visualAssets/dfi-3d-logo.svg new file mode 100644 index 000000000..c3e51e5dc --- /dev/null +++ b/public/downloads/visualAssets/dfi-3d-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/downloads/visualAssets/dfi-btc-logo.png b/public/downloads/visualAssets/dfi-btc-logo.png new file mode 100644 index 000000000..79e99d95e Binary files /dev/null and b/public/downloads/visualAssets/dfi-btc-logo.png differ diff --git a/public/downloads/visualAssets/dfi-btc-logo.svg b/public/downloads/visualAssets/dfi-btc-logo.svg new file mode 100644 index 000000000..d19f09b72 --- /dev/null +++ b/public/downloads/visualAssets/dfi-btc-logo.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/downloads/visualAssets/dfi-logo.png b/public/downloads/visualAssets/dfi-logo.png new file mode 100644 index 000000000..fae7608aa Binary files /dev/null and b/public/downloads/visualAssets/dfi-logo.png differ diff --git a/public/downloads/visualAssets/dfi-logo.svg b/public/downloads/visualAssets/dfi-logo.svg new file mode 100644 index 000000000..1dfca1818 --- /dev/null +++ b/public/downloads/visualAssets/dfi-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/downloads/visualAssets/dfi-powered-by.png b/public/downloads/visualAssets/dfi-powered-by.png new file mode 100644 index 000000000..fdca2501e Binary files /dev/null and b/public/downloads/visualAssets/dfi-powered-by.png differ diff --git a/public/downloads/visualAssets/dfi-powered-by.svg b/public/downloads/visualAssets/dfi-powered-by.svg new file mode 100644 index 000000000..087e2552b --- /dev/null +++ b/public/downloads/visualAssets/dfi-powered-by.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/downloads/visualAssets/dfi.png b/public/downloads/visualAssets/dfi.png new file mode 100644 index 000000000..73bf83c4a Binary files /dev/null and b/public/downloads/visualAssets/dfi.png differ diff --git a/public/downloads/visualAssets/dfi.svg b/public/downloads/visualAssets/dfi.svg new file mode 100644 index 000000000..36ebbe1d8 --- /dev/null +++ b/public/downloads/visualAssets/dfi.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/downloads/visualAssets/visualAssets.zip b/public/downloads/visualAssets/visualAssets.zip new file mode 100644 index 000000000..e83c9b183 Binary files /dev/null and b/public/downloads/visualAssets/visualAssets.zip differ diff --git a/public/locales/en-US/page-explore-wallets.json b/public/locales/en-US/page-explore-wallets.json index bfd282306..2a6c9935f 100644 --- a/public/locales/en-US/page-explore-wallets.json +++ b/public/locales/en-US/page-explore-wallets.json @@ -30,6 +30,34 @@ } } }, + "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" + } + }, + "button": "Download .zipped files" + }, "advanceUseSection": { "sectionTitle": "SUITABLE FOR ADVANCE USAGE", "title": "Advanced usage of DeFiChain", diff --git a/src/components/commons/Buttons.tsx b/src/components/commons/Buttons.tsx index a490aa9da..cbd5a3f4e 100644 --- a/src/components/commons/Buttons.tsx +++ b/src/components/commons/Buttons.tsx @@ -88,6 +88,8 @@ export function SecondaryButton({ customSize, customClass, testID, + hasIcon = true, + download = false, }: { text: string; className?: string; @@ -97,6 +99,8 @@ export function SecondaryButton({ customClass?: string; customSize?: number; testID: string; + hasIcon?: boolean; + download?: boolean; }) { const size = customSize ?? 20; const customClassName = customClass ?? "ml-[15px]"; @@ -107,6 +111,7 @@ export function SecondaryButton({ href={href} className={classNames("block w-fit", { "pointer-events-none": disabled })} data-testid={`secondary-button-${testID}`} + download={download} > ); diff --git a/src/components/icons/assets/downloadAssets/BTCDFILogo.tsx b/src/components/icons/assets/downloadAssets/BTCDFILogo.tsx new file mode 100644 index 000000000..176329d09 --- /dev/null +++ b/src/components/icons/assets/downloadAssets/BTCDFILogo.tsx @@ -0,0 +1,134 @@ +export default function BTCDFILogo(): JSX.Element { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/components/icons/assets/downloadAssets/DFI3D.tsx b/src/components/icons/assets/downloadAssets/DFI3D.tsx new file mode 100644 index 000000000..565314c58 --- /dev/null +++ b/src/components/icons/assets/downloadAssets/DFI3D.tsx @@ -0,0 +1,70 @@ +export default function DFI3D(): JSX.Element { + return ( + + + + + + + + + + + + + + ); +} diff --git a/src/components/icons/assets/downloadAssets/DeFiChainAsset.tsx b/src/components/icons/assets/downloadAssets/DeFiChainAsset.tsx new file mode 100644 index 000000000..1dd044943 --- /dev/null +++ b/src/components/icons/assets/downloadAssets/DeFiChainAsset.tsx @@ -0,0 +1,21 @@ +import { SVGProps } from "react"; + +export default function DeFiChainAsset( + props: SVGProps, +): JSX.Element { + return ( + + + + ); +} diff --git a/src/components/icons/assets/downloadAssets/PoweredByDeFiChainLogo.tsx b/src/components/icons/assets/downloadAssets/PoweredByDeFiChainLogo.tsx new file mode 100644 index 000000000..3234a0112 --- /dev/null +++ b/src/components/icons/assets/downloadAssets/PoweredByDeFiChainLogo.tsx @@ -0,0 +1,93 @@ +import { SVGProps } from "react"; + +export default function PoweredByDeFiChainLogo( + props: SVGProps, +): JSX.Element { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/pages/explore/wallets/_components/DownloadAssetsCard.tsx b/src/pages/explore/wallets/_components/DownloadAssetsCard.tsx new file mode 100644 index 000000000..c8d0027d4 --- /dev/null +++ b/src/pages/explore/wallets/_components/DownloadAssetsCard.tsx @@ -0,0 +1,76 @@ +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, +): JSX.Element { + const { + title, + desc, + svgAssetPath, + pngAssetPath, + testid, + customCardStyle, + children, + } = props; + return ( +
+
+
+ {/* Image */} +
+ {children} +
+
+
+
+

+ {title} +

+
+ {desc} +
+
+
+ + + SVG + + + + PNG + +
+
+
+
+ ); +} diff --git a/src/pages/explore/wallets/_components/VisualAssetsSection.tsx b/src/pages/explore/wallets/_components/VisualAssetsSection.tsx new file mode 100644 index 000000000..91d58ca6d --- /dev/null +++ b/src/pages/explore/wallets/_components/VisualAssetsSection.tsx @@ -0,0 +1,141 @@ +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 { SecondaryButton } from "@components/commons/Buttons"; +import { useWindowDimensions } from "@hooks/useWindowDimensions"; +import { DownloadAssetsCard } from "./DownloadAssetsCard"; + +export function VisualAssetsSection() { + const { t } = useTranslation(["page-explore-wallets"]); + + const dimension = useWindowDimensions(); + const mobileView = dimension.width <= 800; + + return ( + +
+
+ +
+ +

+ {t("visualAssetsSection.title")} +

+

+ {t("visualAssetsSection.subtitle")} +

+
+ +
+ {/* Download cards */} +
+ + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+
+ + ); +} diff --git a/src/pages/explore/wallets/index.page.tsx b/src/pages/explore/wallets/index.page.tsx index 1db49efc0..389546bc3 100644 --- a/src/pages/explore/wallets/index.page.tsx +++ b/src/pages/explore/wallets/index.page.tsx @@ -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() { /> + {/* TODO: uncomment after mvp */} {/*