diff --git a/frontend/src/app/brand-assets/page.tsx b/frontend/src/app/brand-assets/page.tsx new file mode 100644 index 0000000..2bd6ddb --- /dev/null +++ b/frontend/src/app/brand-assets/page.tsx @@ -0,0 +1,97 @@ +import Hero from "@/components/BrandAssets/Hero"; +import KlerosBadgesSection from "@/components/BrandAssets/KlerosBadgesSection"; +import KlerosColorsSection from "@/components/BrandAssets/KlerosColorsSection/index"; +import KlerosFontsSection from "@/components/BrandAssets/KlerosFontsSection"; +import KlerosLogoSection from "@/components/BrandAssets/KlerosLogoSection"; +import LogosPackageSection from "@/components/BrandAssets/LogosPackageSection"; +import PnkTokenSection from "@/components/BrandAssets/PnkTokenSection"; +import StyledImagesSection from "@/components/BrandAssets/StyledImagesSection"; +import { heroQuery, HeroQueryType } from "@/queries/brand-assets/hero"; +import { + klerosBadgesSectionQuery, + KlerosBadgesSectionQueryType, +} from "@/queries/brand-assets/kleros-badges-section"; +import { + klerosColorsSectionQuery, + KlerosColorsSectionQueryType, +} from "@/queries/brand-assets/kleros-colors-section"; +import { + klerosFontsSectionQuery, + KlerosFontsSectionQueryType, +} from "@/queries/brand-assets/kleros-fonts-section"; +import { + klerosLogoSectionQuery, + KlerosLogoSectionQueryType, +} from "@/queries/brand-assets/kleros-logo-section"; +import { + logosPackageSectionQuery, + LogosPackageSectionQueryType, +} from "@/queries/brand-assets/logos-package-section"; +import { + pnkTokenSectionQuery, + PnkTokenSectionQueryType, +} from "@/queries/brand-assets/pnk-token-section"; +import { + styledImagesSectionQuery, + StyledImagesSectionQueryType, +} from "@/queries/brand-assets/styled-images-section"; +import { request } from "@/utils/graphQLClient"; + +const BrandAssets: React.FC = async () => { + const heroData = await request(heroQuery); + const logosPackageData = await request( + logosPackageSectionQuery, + ); + const klerosLogoSection = await request( + klerosLogoSectionQuery, + ); + const klerosFontsSection = await request( + klerosFontsSectionQuery, + ); + const klerosColorsSection = await request( + klerosColorsSectionQuery, + ); + const klerosBadgesSection = await request( + klerosBadgesSectionQuery, + ); + const styledImagesSection = await request( + styledImagesSectionQuery, + ); + const pnkTokenSection = + await request(pnkTokenSectionQuery); + + return ( + <> + + + + + + + + + + ); +}; + +export default BrandAssets; diff --git a/frontend/src/assets/svgs/icons/download.svg b/frontend/src/assets/svgs/icons/download.svg new file mode 100644 index 0000000..7964c0f --- /dev/null +++ b/frontend/src/assets/svgs/icons/download.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/frontend/src/components/BrandAssets/Hero.tsx b/frontend/src/components/BrandAssets/Hero.tsx new file mode 100644 index 0000000..f9e5eb2 --- /dev/null +++ b/frontend/src/components/BrandAssets/Hero.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +import Image from "next/image"; +import Link from "next/link"; + +import Button from "@/components/Button"; +import { HeroQueryType } from "@/queries/brand-assets/hero"; + +interface IHero { + heroData: HeroQueryType["brandAssetsPageHero"]; +} + +const Hero: React.FC = ({ heroData }) => { + return ( +
+
+

{heroData.header}

+

{heroData.subtitle}

+
+ + + +
+
+ Hero Image Background +
+ ); +}; + +export default Hero; diff --git a/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx b/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx new file mode 100644 index 0000000..a1f3579 --- /dev/null +++ b/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx @@ -0,0 +1,30 @@ +import { KlerosBadgesSectionQueryType } from "@/queries/brand-assets/kleros-badges-section"; + +import ImageDownload from "../ImageDownload"; + +interface IKlerosBadgesSection { + klerosBadgesData: KlerosBadgesSectionQueryType["brandAssetsPageKlerosBadgesSection"]; +} + +const KlerosBadgesSection: React.FC = ({ + klerosBadgesData, +}) => { + return ( +
+

{klerosBadgesData.header}

+

{klerosBadgesData.subtitle}

+
+ {klerosBadgesData.imageDownloads.map((imageDownload) => { + return ( + + ); + })} +
+
+ ); +}; + +export default KlerosBadgesSection; diff --git a/frontend/src/components/BrandAssets/KlerosColorsSection/ColorCard.tsx b/frontend/src/components/BrandAssets/KlerosColorsSection/ColorCard.tsx new file mode 100644 index 0000000..6b9281d --- /dev/null +++ b/frontend/src/components/BrandAssets/KlerosColorsSection/ColorCard.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +interface IColorCard { + name: string; + hexColor: string; +} + +const ColorCard: React.FC = ({ name, hexColor }) => { + return ( +
+ {name} + {hexColor} +
+ ); +}; + +export default ColorCard; diff --git a/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx b/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx new file mode 100644 index 0000000..3983cf6 --- /dev/null +++ b/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx @@ -0,0 +1,29 @@ +import { KlerosColorsSectionQueryType } from "@/queries/brand-assets/kleros-colors-section"; + +import ColorCard from "./ColorCard"; + +interface IKlerosColorsSection { + klerosColorsData: KlerosColorsSectionQueryType["brandAssetsPageKlerosColorsSection"]; +} + +const KlerosColorsSection: React.FC = ({ + klerosColorsData, +}) => { + return ( +
+

{klerosColorsData.header}

+

{klerosColorsData.subtitle}

+
+ {klerosColorsData?.colorCards?.map((colorCard) => ( + + ))} +
+
+ ); +}; + +export default KlerosColorsSection; diff --git a/frontend/src/components/BrandAssets/KlerosFontsSection.tsx b/frontend/src/components/BrandAssets/KlerosFontsSection.tsx new file mode 100644 index 0000000..931a67c --- /dev/null +++ b/frontend/src/components/BrandAssets/KlerosFontsSection.tsx @@ -0,0 +1,25 @@ +import { KlerosFontsSectionQueryType } from "@/queries/brand-assets/kleros-fonts-section"; + +import CtaCard from "../CtaCard"; + +interface IKlerosFontsSection { + klerosFontsData: KlerosFontsSectionQueryType["brandAssetsPageKlerosFontsSection"]; +} + +const KlerosFontsSection: React.FC = ({ + klerosFontsData, +}) => { + return ( +
+

{klerosFontsData.header}

+ +
+ ); +}; + +export default KlerosFontsSection; diff --git a/frontend/src/components/BrandAssets/KlerosLogoSection.tsx b/frontend/src/components/BrandAssets/KlerosLogoSection.tsx new file mode 100644 index 0000000..d9ca952 --- /dev/null +++ b/frontend/src/components/BrandAssets/KlerosLogoSection.tsx @@ -0,0 +1,26 @@ +import { KlerosLogoSectionQueryType } from "@/queries/brand-assets/kleros-logo-section"; + +import ImageDownload from "../ImageDownload"; + +interface IKlerosLogoSection { + klerosLogoData: KlerosLogoSectionQueryType["brandAssetsPageKlerosLogoSection"]; +} + +const KlerosLogoSection: React.FC = ({ + klerosLogoData, +}) => { + return ( +
+

{klerosLogoData.header}

+
+ {klerosLogoData.imageDownloads.map((imageDownload) => { + return ( + + ); + })} +
+
+ ); +}; + +export default KlerosLogoSection; diff --git a/frontend/src/components/BrandAssets/LogosPackageSection.tsx b/frontend/src/components/BrandAssets/LogosPackageSection.tsx new file mode 100644 index 0000000..e42796c --- /dev/null +++ b/frontend/src/components/BrandAssets/LogosPackageSection.tsx @@ -0,0 +1,41 @@ +import Link from "next/link"; + +import { LogosPackageSectionQueryType } from "@/queries/brand-assets/logos-package-section"; + +import Button from "../Button"; +import ExternalLink from "../ExternalLink"; + +interface ILogosPackageSection { + logosPackageData: LogosPackageSectionQueryType["brandAssetsPageLogosPackageSection"]; +} + +const LogosPackageSection: React.FC = ({ + logosPackageData, +}) => { + return ( +
+

{logosPackageData.header}

+

{logosPackageData.subtitle}

+
+ + + +
+ +
+ ); +}; + +export default LogosPackageSection; diff --git a/frontend/src/components/BrandAssets/PnkTokenSection.tsx b/frontend/src/components/BrandAssets/PnkTokenSection.tsx new file mode 100644 index 0000000..7f3a215 --- /dev/null +++ b/frontend/src/components/BrandAssets/PnkTokenSection.tsx @@ -0,0 +1,22 @@ +import { PnkTokenSectionQueryType } from "@/queries/brand-assets/pnk-token-section"; + +import ImageDownload from "../ImageDownload"; + +interface IPnkTokenSection { + pnkTokenData: PnkTokenSectionQueryType["brandAssetsPagePnkTokenSection"]; +} + +const PnkTokenSection: React.FC = ({ pnkTokenData }) => { + return ( +
+

{pnkTokenData.header}

+

{pnkTokenData.subtitle}

+ +
+ ); +}; + +export default PnkTokenSection; diff --git a/frontend/src/components/BrandAssets/StyledImagesSection.tsx b/frontend/src/components/BrandAssets/StyledImagesSection.tsx new file mode 100644 index 0000000..cd1b062 --- /dev/null +++ b/frontend/src/components/BrandAssets/StyledImagesSection.tsx @@ -0,0 +1,43 @@ +import { StyledImagesSectionQueryType } from "@/queries/brand-assets/styled-images-section"; + +import ImageDownload from "../ImageDownload"; + +interface IStyledImagesSection { + styledImagesData: StyledImagesSectionQueryType["brandAssetsPageStyledImagesSection"]; +} + +const StyledImagesSection: React.FC = ({ + styledImagesData, +}) => { + return ( +
+

{styledImagesData.header}

+

{styledImagesData.wallpapersHeader}

+

+ {styledImagesData.wallpapersSubtitle} +

+
+ {styledImagesData.wallpapersImageDownloads.map((imageDownload) => { + return ( + + ); + })} +
+

+ {styledImagesData.productMockupsHeader} +

+

+ {styledImagesData.productMockupsSubtitle} +

+
+ {styledImagesData.productMockupsImageDownloads.map((imageDownload) => { + return ( + + ); + })} +
+
+ ); +}; + +export default StyledImagesSection; diff --git a/frontend/src/components/CtaCard.tsx b/frontend/src/components/CtaCard.tsx index f5ffa3c..1d9e23b 100644 --- a/frontend/src/components/CtaCard.tsx +++ b/frontend/src/components/CtaCard.tsx @@ -4,7 +4,7 @@ import Divider from "./Divider"; import ExternalLink from "./ExternalLink"; export interface ICtaCard { - icon: { + icon?: { url: string; }; title: string; @@ -24,14 +24,16 @@ const CtaCard: React.FC = ({ arrowLink, }) => { return ( -
- Icon +
+ {icon ? ( + Icon + ) : null}

{title}

{description}

diff --git a/frontend/src/components/DownloadButton.tsx b/frontend/src/components/DownloadButton.tsx new file mode 100644 index 0000000..770a672 --- /dev/null +++ b/frontend/src/components/DownloadButton.tsx @@ -0,0 +1,55 @@ +"use client"; + +import React from "react"; + +import clsx from "clsx"; +import Image from "next/image"; + +import DownloadIcon from "@/assets/svgs/icons/download.svg"; + +interface IDownloadButton { + name: string; + url: string; +} + +const DownloadButton: React.FC = ({ name, url }) => { + const handleDownload = async () => { + try { + const response = await fetch(url); + if (!response.ok) throw new Error("Failed to fetch the file."); + + const blob = await response.blob(); + const blobUrl = window.URL.createObjectURL(blob); + const filename = url.split("/").pop() || "download"; + + const link = Object.assign(document.createElement("a"), { + href: blobUrl, + download: filename, + }); + + link.click(); + window.URL.revokeObjectURL(blobUrl); + } catch (error) { + console.error("Error downloading the file:", error); + } + }; + + return ( + + ); +}; + +export default DownloadButton; diff --git a/frontend/src/components/ForBuilders/Hero.tsx b/frontend/src/components/ForBuilders/Hero.tsx index 07159a3..ee1c0ef 100644 --- a/frontend/src/components/ForBuilders/Hero.tsx +++ b/frontend/src/components/ForBuilders/Hero.tsx @@ -29,7 +29,7 @@ const Hero: React.FC = ({ heroData }) => {
- {heroData.arrowLink.map((arrowLink) => ( + {heroData.arrowLink?.map((arrowLink) => ( = ({ imageDownload }) => { + return ( +
+ +
+ {imageDownload.name} + {imageDownload.svgDownloadLink ? ( + + ) : null} + {imageDownload.pngDownloadLink ? ( + + ) : null} +
+
+ ); +}; +export default ImageDownload; diff --git a/frontend/src/queries/brand-assets/hero.tsx b/frontend/src/queries/brand-assets/hero.tsx new file mode 100644 index 0000000..0aa7ea5 --- /dev/null +++ b/frontend/src/queries/brand-assets/hero.tsx @@ -0,0 +1,35 @@ +import { gql } from "graphql-request"; + +export const heroQuery = gql` + { + brandAssetsPageHero { + header + subtitle + button { + text + link { + url + } + } + background { + url + } + } + } +`; + +export type HeroQueryType = { + brandAssetsPageHero: { + header: string; + subtitle: string; + button: { + text: string; + link: { + url: string; + }; + }; + background: { + url: string; + }; + }; +}; diff --git a/frontend/src/queries/brand-assets/kleros-badges-section.tsx b/frontend/src/queries/brand-assets/kleros-badges-section.tsx new file mode 100644 index 0000000..c7531c6 --- /dev/null +++ b/frontend/src/queries/brand-assets/kleros-badges-section.tsx @@ -0,0 +1,35 @@ +import { gql } from "graphql-request"; + +export const klerosBadgesSectionQuery = gql` + { + brandAssetsPageKlerosBadgesSection { + header + subtitle + imageDownloads { + name + image { + url + } + svgDownloadLink + pngDownloadLink + } + } + } +`; + +export type KlerosBadgesSectionQueryType = { + brandAssetsPageKlerosBadgesSection: { + header: string; + subtitle: string; + imageDownloads: ImageDownloadType[]; + }; +}; + +export type ImageDownloadType = { + name: string; + image: { + url: string; + }; + svgDownloadLink: string; + pngDownloadLink: string; +}; diff --git a/frontend/src/queries/brand-assets/kleros-colors-section.tsx b/frontend/src/queries/brand-assets/kleros-colors-section.tsx new file mode 100644 index 0000000..e424a1e --- /dev/null +++ b/frontend/src/queries/brand-assets/kleros-colors-section.tsx @@ -0,0 +1,25 @@ +import { gql } from "graphql-request"; + +export const klerosColorsSectionQuery = gql` + { + brandAssetsPageKlerosColorsSection { + header + subtitle + colorCards { + name + hexColor + } + } + } +`; + +export type KlerosColorsSectionQueryType = { + brandAssetsPageKlerosColorsSection: { + header: string; + subtitle: string; + colorCards: { + name: string; + hexColor: string; + }[]; + }; +}; diff --git a/frontend/src/queries/brand-assets/kleros-fonts-section.tsx b/frontend/src/queries/brand-assets/kleros-fonts-section.tsx new file mode 100644 index 0000000..6d46529 --- /dev/null +++ b/frontend/src/queries/brand-assets/kleros-fonts-section.tsx @@ -0,0 +1,35 @@ +import { gql } from "graphql-request"; + +export const klerosFontsSectionQuery = gql` + { + brandAssetsPageKlerosFontsSection { + header + linkCard { + title + subtitle + link { + text + link { + url + } + } + } + } + } +`; + +export type KlerosFontsSectionQueryType = { + brandAssetsPageKlerosFontsSection: { + header: string; + linkCard: { + title: string; + subtitle: string; + link: { + text: string; + link: { + url: string; + }; + }; + }; + }; +}; diff --git a/frontend/src/queries/brand-assets/kleros-logo-section.tsx b/frontend/src/queries/brand-assets/kleros-logo-section.tsx new file mode 100644 index 0000000..196d72d --- /dev/null +++ b/frontend/src/queries/brand-assets/kleros-logo-section.tsx @@ -0,0 +1,33 @@ +import { gql } from "graphql-request"; + +export const klerosLogoSectionQuery = gql` + { + brandAssetsPageKlerosLogoSection { + header + imageDownloads { + name + image { + url + } + svgDownloadLink + pngDownloadLink + } + } + } +`; + +export type KlerosLogoSectionQueryType = { + brandAssetsPageKlerosLogoSection: { + header: string; + imageDownloads: ImageDownloadType[]; + }; +}; + +export type ImageDownloadType = { + name: string; + image: { + url: string; + }; + svgDownloadLink?: string; + pngDownloadLink?: string; +}; diff --git a/frontend/src/queries/brand-assets/logos-package-section.tsx b/frontend/src/queries/brand-assets/logos-package-section.tsx new file mode 100644 index 0000000..62e1356 --- /dev/null +++ b/frontend/src/queries/brand-assets/logos-package-section.tsx @@ -0,0 +1,42 @@ +import { gql } from "graphql-request"; + +export const logosPackageSectionQuery = gql` + { + brandAssetsPageLogosPackageSection { + header + subtitle + button { + text + link { + url + } + } + arrowLink { + text + link { + url + } + } + } + } +`; + +export type LogosPackageSectionQueryType = { + brandAssetsPageLogosPackageSection: { + header: string; + subtitle: string; + button: { + text: string; + link: { + url: string; + }; + }; + arrowLink: { + text: string; + link: { + name: string; + url: string; + }; + }; + }; +}; diff --git a/frontend/src/queries/brand-assets/pnk-token-section.tsx b/frontend/src/queries/brand-assets/pnk-token-section.tsx new file mode 100644 index 0000000..b3dae2e --- /dev/null +++ b/frontend/src/queries/brand-assets/pnk-token-section.tsx @@ -0,0 +1,35 @@ +import { gql } from "graphql-request"; + +export const pnkTokenSectionQuery = gql` + { + brandAssetsPagePnkTokenSection { + header + subtitle + imageDownload { + name + image { + url + } + svgDownloadLink + pngDownloadLink + } + } + } +`; + +export type PnkTokenSectionQueryType = { + brandAssetsPagePnkTokenSection: { + header: string; + subtitle: string; + imageDownload: ImageDownloadType; + }; +}; + +export type ImageDownloadType = { + name: string; + image: { + url: string; + }; + svgDownloadLink?: string; + pngDownloadLink?: string; +}; diff --git a/frontend/src/queries/brand-assets/styled-images-section.tsx b/frontend/src/queries/brand-assets/styled-images-section.tsx new file mode 100644 index 0000000..5e36a34 --- /dev/null +++ b/frontend/src/queries/brand-assets/styled-images-section.tsx @@ -0,0 +1,47 @@ +import { gql } from "graphql-request"; + +export const styledImagesSectionQuery = gql` + { + brandAssetsPageStyledImagesSection { + header + wallpapersHeader + wallpapersSubtitle + wallpapersImageDownloads { + name + image { + url + } + pngDownloadLink + } + productMockupsHeader + productMockupsSubtitle + productMockupsImageDownloads { + name + image { + url + } + pngDownloadLink + } + } + } +`; + +export type StyledImagesSectionQueryType = { + brandAssetsPageStyledImagesSection: { + header: string; + wallpapersHeader: string; + wallpapersSubtitle: string; + wallpapersImageDownloads: ImageDownloadType[]; + productMockupsHeader: string; + productMockupsSubtitle: string; + productMockupsImageDownloads: ImageDownloadType[]; + }; +}; + +export type ImageDownloadType = { + name: string; + image: { + url: string; + }; + pngDownloadLink: string; +}; diff --git a/frontend/src/queries/for-builders/hero.tsx b/frontend/src/queries/for-builders/hero.tsx index a1c37a2..b040a18 100644 --- a/frontend/src/queries/for-builders/hero.tsx +++ b/frontend/src/queries/for-builders/hero.tsx @@ -11,15 +11,15 @@ export const heroQuery = gql` url } } + background { + url + } arrowLink { text link { url } } - background { - url - } } } `;