Skip to content

Commit d68d34d

Browse files
kemurukemuru
authored
Merge pull request #54 from kleros/feat(frontend)/brand-assets-page
feat(frontend): brand assets page
2 parents 7d47f2a + 1ba00c0 commit d68d34d

24 files changed

+771
-13
lines changed

‎frontend/src/app/brand-assets/page.tsx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import Hero from "@/components/BrandAssets/Hero";
2+
import KlerosBadgesSection from "@/components/BrandAssets/KlerosBadgesSection";
3+
import KlerosColorsSection from "@/components/BrandAssets/KlerosColorsSection/index";
4+
import KlerosFontsSection from "@/components/BrandAssets/KlerosFontsSection";
5+
import KlerosLogoSection from "@/components/BrandAssets/KlerosLogoSection";
6+
import LogosPackageSection from "@/components/BrandAssets/LogosPackageSection";
7+
import PnkTokenSection from "@/components/BrandAssets/PnkTokenSection";
8+
import StyledImagesSection from "@/components/BrandAssets/StyledImagesSection";
9+
import { heroQuery, HeroQueryType } from "@/queries/brand-assets/hero";
10+
import {
11+
klerosBadgesSectionQuery,
12+
KlerosBadgesSectionQueryType,
13+
} from "@/queries/brand-assets/kleros-badges-section";
14+
import {
15+
klerosColorsSectionQuery,
16+
KlerosColorsSectionQueryType,
17+
} from "@/queries/brand-assets/kleros-colors-section";
18+
import {
19+
klerosFontsSectionQuery,
20+
KlerosFontsSectionQueryType,
21+
} from "@/queries/brand-assets/kleros-fonts-section";
22+
import {
23+
klerosLogoSectionQuery,
24+
KlerosLogoSectionQueryType,
25+
} from "@/queries/brand-assets/kleros-logo-section";
26+
import {
27+
logosPackageSectionQuery,
28+
LogosPackageSectionQueryType,
29+
} from "@/queries/brand-assets/logos-package-section";
30+
import {
31+
pnkTokenSectionQuery,
32+
PnkTokenSectionQueryType,
33+
} from "@/queries/brand-assets/pnk-token-section";
34+
import {
35+
styledImagesSectionQuery,
36+
StyledImagesSectionQueryType,
37+
} from "@/queries/brand-assets/styled-images-section";
38+
import { request } from "@/utils/graphQLClient";
39+
40+
const BrandAssets: React.FC = async () => {
41+
const heroData = await request<HeroQueryType>(heroQuery);
42+
const logosPackageData = await request<LogosPackageSectionQueryType>(
43+
logosPackageSectionQuery,
44+
);
45+
const klerosLogoSection = await request<KlerosLogoSectionQueryType>(
46+
klerosLogoSectionQuery,
47+
);
48+
const klerosFontsSection = await request<KlerosFontsSectionQueryType>(
49+
klerosFontsSectionQuery,
50+
);
51+
const klerosColorsSection = await request<KlerosColorsSectionQueryType>(
52+
klerosColorsSectionQuery,
53+
);
54+
const klerosBadgesSection = await request<KlerosBadgesSectionQueryType>(
55+
klerosBadgesSectionQuery,
56+
);
57+
const styledImagesSection = await request<StyledImagesSectionQueryType>(
58+
styledImagesSectionQuery,
59+
);
60+
const pnkTokenSection =
61+
await request<PnkTokenSectionQueryType>(pnkTokenSectionQuery);
62+
63+
return (
64+
<>
65+
<Hero {...{ heroData: heroData.brandAssetsPageHero }} />
66+
<LogosPackageSection
67+
logosPackageData={logosPackageData.brandAssetsPageLogosPackageSection}
68+
/>
69+
<KlerosLogoSection
70+
klerosLogoData={klerosLogoSection.brandAssetsPageKlerosLogoSection}
71+
/>
72+
<KlerosFontsSection
73+
klerosFontsData={klerosFontsSection.brandAssetsPageKlerosFontsSection}
74+
/>
75+
<KlerosColorsSection
76+
klerosColorsData={
77+
klerosColorsSection.brandAssetsPageKlerosColorsSection
78+
}
79+
/>
80+
<KlerosBadgesSection
81+
klerosBadgesData={
82+
klerosBadgesSection.brandAssetsPageKlerosBadgesSection
83+
}
84+
/>
85+
<StyledImagesSection
86+
styledImagesData={
87+
styledImagesSection.brandAssetsPageStyledImagesSection
88+
}
89+
/>
90+
<PnkTokenSection
91+
pnkTokenData={pnkTokenSection.brandAssetsPagePnkTokenSection}
92+
/>
93+
</>
94+
);
95+
};
96+
97+
export default BrandAssets;

‎frontend/src/assets/svgs/icons/download.svg

Lines changed: 10 additions & 0 deletions
Loading

‎frontend/src/components/BrandAssets/Hero.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from "react";
2+
3+
import Image from "next/image";
4+
import Link from "next/link";
5+
6+
import Button from "@/components/Button";
7+
import { HeroQueryType } from "@/queries/brand-assets/hero";
8+
9+
interface IHero {
10+
heroData: HeroQueryType["brandAssetsPageHero"];
11+
}
12+
13+
const Hero: React.FC<IHero> = ({ heroData }) => {
14+
return (
15+
<div className="relative px-6 pb-12 pt-32">
16+
<div className="space-y-6">
17+
<h1 className="w-min text-3xl">{heroData.header}</h1>
18+
<p className="text-lg">{heroData.subtitle}</p>
19+
<div>
20+
<Link
21+
href={heroData.button?.link?.url}
22+
target="_blank"
23+
rel="noopener noreferrer"
24+
>
25+
<Button variant="secondary">
26+
<span>{heroData.button?.text}</span>
27+
</Button>
28+
</Link>
29+
</div>
30+
</div>
31+
<Image
32+
src={heroData.background?.url}
33+
alt="Hero Image Background"
34+
width="1440"
35+
height="835"
36+
className="absolute left-0 top-0 z-[-1] h-full object-cover object-left"
37+
/>
38+
</div>
39+
);
40+
};
41+
42+
export default Hero;

‎frontend/src/components/BrandAssets/KlerosBadgesSection.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { KlerosBadgesSectionQueryType } from "@/queries/brand-assets/kleros-badges-section";
2+
3+
import ImageDownload from "../ImageDownload";
4+
5+
interface IKlerosBadgesSection {
6+
klerosBadgesData: KlerosBadgesSectionQueryType["brandAssetsPageKlerosBadgesSection"];
7+
}
8+
9+
const KlerosBadgesSection: React.FC<IKlerosBadgesSection> = ({
10+
klerosBadgesData,
11+
}) => {
12+
return (
13+
<div className="relative space-y-6 bg-background-1 px-6 pb-12 pt-32">
14+
<h1 className="w-min text-3xl">{klerosBadgesData.header}</h1>
15+
<p className="text-lg text-secondary-text">{klerosBadgesData.subtitle}</p>
16+
<div className="flex flex-row flex-wrap justify-center gap-x-8 gap-y-16">
17+
{klerosBadgesData.imageDownloads.map((imageDownload) => {
18+
return (
19+
<ImageDownload
20+
key={imageDownload.image.url}
21+
{...{ imageDownload }}
22+
/>
23+
);
24+
})}
25+
</div>
26+
</div>
27+
);
28+
};
29+
30+
export default KlerosBadgesSection;

‎frontend/src/components/BrandAssets/KlerosColorsSection/ColorCard.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
3+
interface IColorCard {
4+
name: string;
5+
hexColor: string;
6+
}
7+
8+
const ColorCard: React.FC<IColorCard> = ({ name, hexColor }) => {
9+
return (
10+
<div
11+
className="flex h-[200px] w-[380px] flex-col items-center justify-center gap-3 rounded-2xl shadow-md"
12+
style={{ backgroundColor: hexColor }}
13+
>
14+
<span className="text-lg text-white">{name}</span>
15+
<span className="text-white">{hexColor}</span>
16+
</div>
17+
);
18+
};
19+
20+
export default ColorCard;

‎frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { KlerosColorsSectionQueryType } from "@/queries/brand-assets/kleros-colors-section";
2+
3+
import ColorCard from "./ColorCard";
4+
5+
interface IKlerosColorsSection {
6+
klerosColorsData: KlerosColorsSectionQueryType["brandAssetsPageKlerosColorsSection"];
7+
}
8+
9+
const KlerosColorsSection: React.FC<IKlerosColorsSection> = ({
10+
klerosColorsData,
11+
}) => {
12+
return (
13+
<div className="relative space-y-6 bg-background-2 px-6 pb-12 pt-32">
14+
<h1 className="w-min text-3xl">{klerosColorsData.header}</h1>
15+
<p className="text-lg text-secondary-text">{klerosColorsData.subtitle}</p>
16+
<div className="flex flex-row flex-wrap justify-center gap-8">
17+
{klerosColorsData?.colorCards?.map((colorCard) => (
18+
<ColorCard
19+
key={colorCard.name}
20+
name={colorCard.name}
21+
hexColor={colorCard.hexColor}
22+
/>
23+
))}
24+
</div>
25+
</div>
26+
);
27+
};
28+
29+
export default KlerosColorsSection;

‎frontend/src/components/BrandAssets/KlerosFontsSection.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { KlerosFontsSectionQueryType } from "@/queries/brand-assets/kleros-fonts-section";
2+
3+
import CtaCard from "../CtaCard";
4+
5+
interface IKlerosFontsSection {
6+
klerosFontsData: KlerosFontsSectionQueryType["brandAssetsPageKlerosFontsSection"];
7+
}
8+
9+
const KlerosFontsSection: React.FC<IKlerosFontsSection> = ({
10+
klerosFontsData,
11+
}) => {
12+
return (
13+
<div className="relative space-y-6 bg-background-1 px-6 pb-12 pt-32">
14+
<h1 className="w-min text-3xl">{klerosFontsData.header}</h1>
15+
<CtaCard
16+
key={klerosFontsData.linkCard.title}
17+
title={klerosFontsData.linkCard.title}
18+
description={klerosFontsData.linkCard.subtitle}
19+
arrowLink={klerosFontsData.linkCard.link}
20+
/>
21+
</div>
22+
);
23+
};
24+
25+
export default KlerosFontsSection;

‎frontend/src/components/BrandAssets/KlerosLogoSection.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { KlerosLogoSectionQueryType } from "@/queries/brand-assets/kleros-logo-section";
2+
3+
import ImageDownload from "../ImageDownload";
4+
5+
interface IKlerosLogoSection {
6+
klerosLogoData: KlerosLogoSectionQueryType["brandAssetsPageKlerosLogoSection"];
7+
}
8+
9+
const KlerosLogoSection: React.FC<IKlerosLogoSection> = ({
10+
klerosLogoData,
11+
}) => {
12+
return (
13+
<div className="relative space-y-6 bg-background-1 px-6 pb-12 pt-32">
14+
<h1 className="w-min text-3xl">{klerosLogoData.header}</h1>
15+
<div className="flex flex-row flex-wrap justify-center gap-x-8 gap-y-16">
16+
{klerosLogoData.imageDownloads.map((imageDownload) => {
17+
return (
18+
<ImageDownload key={imageDownload.name} {...{ imageDownload }} />
19+
);
20+
})}
21+
</div>
22+
</div>
23+
);
24+
};
25+
26+
export default KlerosLogoSection;

‎frontend/src/components/BrandAssets/LogosPackageSection.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import Link from "next/link";
2+
3+
import { LogosPackageSectionQueryType } from "@/queries/brand-assets/logos-package-section";
4+
5+
import Button from "../Button";
6+
import ExternalLink from "../ExternalLink";
7+
8+
interface ILogosPackageSection {
9+
logosPackageData: LogosPackageSectionQueryType["brandAssetsPageLogosPackageSection"];
10+
}
11+
12+
const LogosPackageSection: React.FC<ILogosPackageSection> = ({
13+
logosPackageData,
14+
}) => {
15+
return (
16+
<div className="relative space-y-6 bg-background-2 px-6 pb-12 pt-32">
17+
<h1 className="w-min text-3xl">{logosPackageData.header}</h1>
18+
<p className="text-lg text-secondary-text">{logosPackageData.subtitle}</p>
19+
<div>
20+
<Link
21+
href={logosPackageData.button?.link?.url}
22+
target="_blank"
23+
rel="noopener noreferrer"
24+
>
25+
<Button variant="primary">
26+
<span className="text-background-2">
27+
{logosPackageData.button?.text}
28+
</span>
29+
</Button>
30+
</Link>
31+
</div>
32+
<ExternalLink
33+
url={logosPackageData.arrowLink.link.url}
34+
text={logosPackageData.arrowLink.text}
35+
className="z-[1] flex-wrap"
36+
/>
37+
</div>
38+
);
39+
};
40+
41+
export default LogosPackageSection;

‎frontend/src/components/BrandAssets/PnkTokenSection.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { PnkTokenSectionQueryType } from "@/queries/brand-assets/pnk-token-section";
2+
3+
import ImageDownload from "../ImageDownload";
4+
5+
interface IPnkTokenSection {
6+
pnkTokenData: PnkTokenSectionQueryType["brandAssetsPagePnkTokenSection"];
7+
}
8+
9+
const PnkTokenSection: React.FC<IPnkTokenSection> = ({ pnkTokenData }) => {
10+
return (
11+
<div className="relative space-y-6 bg-background-1 px-6 pb-12 pt-32">
12+
<h1 className="w-min text-3xl">{pnkTokenData.header}</h1>
13+
<p className="text-lg text-secondary-text">{pnkTokenData.subtitle}</p>
14+
<ImageDownload
15+
key={pnkTokenData.imageDownload.name}
16+
{...{ imageDownload: pnkTokenData.imageDownload }}
17+
/>
18+
</div>
19+
);
20+
};
21+
22+
export default PnkTokenSection;

‎frontend/src/components/BrandAssets/StyledImagesSection.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { StyledImagesSectionQueryType } from "@/queries/brand-assets/styled-images-section";
2+
3+
import ImageDownload from "../ImageDownload";
4+
5+
interface IStyledImagesSection {
6+
styledImagesData: StyledImagesSectionQueryType["brandAssetsPageStyledImagesSection"];
7+
}
8+
9+
const StyledImagesSection: React.FC<IStyledImagesSection> = ({
10+
styledImagesData,
11+
}) => {
12+
return (
13+
<div className="relative space-y-6 bg-background-2 px-6 pb-12 pt-32">
14+
<h1 className="w-min text-3xl">{styledImagesData.header}</h1>
15+
<h1 className="w-min text-2xl">{styledImagesData.wallpapersHeader}</h1>
16+
<p className="text-lg text-secondary-text">
17+
{styledImagesData.wallpapersSubtitle}
18+
</p>
19+
<div className="flex flex-row flex-wrap justify-center gap-x-8 gap-y-16">
20+
{styledImagesData.wallpapersImageDownloads.map((imageDownload) => {
21+
return (
22+
<ImageDownload key={imageDownload.name} {...{ imageDownload }} />
23+
);
24+
})}
25+
</div>
26+
<h2 className="w-min text-2xl">
27+
{styledImagesData.productMockupsHeader}
28+
</h2>
29+
<p className="text-lg text-secondary-text">
30+
{styledImagesData.productMockupsSubtitle}
31+
</p>
32+
<div className="flex flex-row flex-wrap justify-center gap-x-8 gap-y-16">
33+
{styledImagesData.productMockupsImageDownloads.map((imageDownload) => {
34+
return (
35+
<ImageDownload key={imageDownload.name} {...{ imageDownload }} />
36+
);
37+
})}
38+
</div>
39+
</div>
40+
);
41+
};
42+
43+
export default StyledImagesSection;

0 commit comments

Comments
 (0)