feat(frontend): brand assets page

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<HeroQueryType>(heroQuery);
+  const logosPackageData = await request<LogosPackageSectionQueryType>(
+    logosPackageSectionQuery,
+  );
+  const klerosLogoSection = await request<KlerosLogoSectionQueryType>(
+    klerosLogoSectionQuery,
+  );
+  const klerosFontsSection = await request<KlerosFontsSectionQueryType>(
+    klerosFontsSectionQuery,
+  );
+  const klerosColorsSection = await request<KlerosColorsSectionQueryType>(
+    klerosColorsSectionQuery,
+  );
+  const klerosBadgesSection = await request<KlerosBadgesSectionQueryType>(
+    klerosBadgesSectionQuery,
+  );
+  const styledImagesSection = await request<StyledImagesSectionQueryType>(
+    styledImagesSectionQuery,
+  );
+  const pnkTokenSection =
+    await request<PnkTokenSectionQueryType>(pnkTokenSectionQuery);
+
+  return (
+    <>
+      <Hero {...{ heroData: heroData.brandAssetsPageHero }} />
+      <LogosPackageSection
+        logosPackageData={logosPackageData.brandAssetsPageLogosPackageSection}
+      />
+      <KlerosLogoSection
+        klerosLogoData={klerosLogoSection.brandAssetsPageKlerosLogoSection}
+      />
+      <KlerosFontsSection
+        klerosFontsData={klerosFontsSection.brandAssetsPageKlerosFontsSection}
+      />
+      <KlerosColorsSection
+        klerosColorsData={
+          klerosColorsSection.brandAssetsPageKlerosColorsSection
+        }
+      />
+      <KlerosBadgesSection
+        klerosBadgesData={
+          klerosBadgesSection.brandAssetsPageKlerosBadgesSection
+        }
+      />
+      <StyledImagesSection
+        styledImagesData={
+          styledImagesSection.brandAssetsPageStyledImagesSection
+        }
+      />
+      <PnkTokenSection
+        pnkTokenData={pnkTokenSection.brandAssetsPagePnkTokenSection}
+      />
+    </>
+  );
+};
+
+export default BrandAssets;

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<IHero> = ({ heroData }) => {
+  return (
+    <div className="relative px-6 pb-12 pt-32">
+      <div className="space-y-6">
+        <h1 className="w-min text-3xl">{heroData.header}</h1>
+        <p className="text-lg">{heroData.subtitle}</p>
+        <div>
+          <Link
+            href={heroData.button?.link?.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button variant="secondary">
+              <span>{heroData.button?.text}</span>
+            </Button>
+          </Link>
+        </div>
+      </div>
+      <Image
+        src={heroData.background?.url}
+        alt="Hero Image Background"
+        width="1440"
+        height="835"
+        className="absolute left-0 top-0 z-[-1] h-full object-cover object-left"
+      />
+    </div>
+  );
+};
+
+export default Hero;

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<IKlerosBadgesSection> = ({
+  klerosBadgesData,
+}) => {
+  return (
+    <div className="relative space-y-6 bg-background-1 px-6 pb-12 pt-32">
+      <h1 className="w-min text-3xl">{klerosBadgesData.header}</h1>
+      <p className="text-lg text-secondary-text">{klerosBadgesData.subtitle}</p>
+      <div className="flex flex-row flex-wrap justify-center gap-x-8 gap-y-16">
+        {klerosBadgesData.imageDownloads.map((imageDownload) => {
+          return (
+            <ImageDownload
+              key={imageDownload.image.url}
+              {...{ imageDownload }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default KlerosBadgesSection;

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<IColorCard> = ({ name, hexColor }) => {
+  return (
+    <div
+      className="flex h-[200px] w-[380px] flex-col items-center justify-center gap-3 rounded-2xl shadow-md"
+      style={{ backgroundColor: hexColor }}
+    >
+      <span className="text-lg text-white">{name}</span>
+      <span className="text-white">{hexColor}</span>
+    </div>
+  );
+};
+
+export default ColorCard;

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<IKlerosColorsSection> = ({
+  klerosColorsData,
+}) => {
+  return (
+    <div className="relative space-y-6 bg-background-2 px-6 pb-12 pt-32">
+      <h1 className="w-min text-3xl">{klerosColorsData.header}</h1>
+      <p className="text-lg text-secondary-text">{klerosColorsData.subtitle}</p>
+      <div className="flex flex-row flex-wrap justify-center gap-8">
+        {klerosColorsData?.colorCards?.map((colorCard) => (
+          <ColorCard
+            key={colorCard.name}
+            name={colorCard.name}
+            hexColor={colorCard.hexColor}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default KlerosColorsSection;

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<IKlerosFontsSection> = ({
+  klerosFontsData,
+}) => {
+  return (
+    <div className="relative space-y-6 bg-background-1 px-6 pb-12 pt-32">
+      <h1 className="w-min text-3xl">{klerosFontsData.header}</h1>
+      <CtaCard
+        key={klerosFontsData.linkCard.title}
+        title={klerosFontsData.linkCard.title}
+        description={klerosFontsData.linkCard.subtitle}
+        arrowLink={klerosFontsData.linkCard.link}
+      />
+    </div>
+  );
+};
+
+export default KlerosFontsSection;

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<IKlerosLogoSection> = ({
+  klerosLogoData,
+}) => {
+  return (
+    <div className="relative space-y-6 bg-background-1 px-6 pb-12 pt-32">
+      <h1 className="w-min text-3xl">{klerosLogoData.header}</h1>
+      <div className="flex flex-row flex-wrap justify-center gap-x-8 gap-y-16">
+        {klerosLogoData.imageDownloads.map((imageDownload) => {
+          return (
+            <ImageDownload key={imageDownload.name} {...{ imageDownload }} />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default KlerosLogoSection;

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<ILogosPackageSection> = ({
+  logosPackageData,
+}) => {
+  return (
+    <div className="relative space-y-6 bg-background-2 px-6 pb-12 pt-32">
+      <h1 className="w-min text-3xl">{logosPackageData.header}</h1>
+      <p className="text-lg text-secondary-text">{logosPackageData.subtitle}</p>
+      <div>
+        <Link
+          href={logosPackageData.button?.link?.url}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Button variant="primary">
+            <span className="text-background-2">
+              {logosPackageData.button?.text}
+            </span>
+          </Button>
+        </Link>
+      </div>
+      <ExternalLink
+        url={logosPackageData.arrowLink.link.url}
+        text={logosPackageData.arrowLink.text}
+        className="z-[1] flex-wrap"
+      />
+    </div>
+  );
+};
+
+export default LogosPackageSection;

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<IPnkTokenSection> = ({ pnkTokenData }) => {
+  return (
+    <div className="relative space-y-6 bg-background-1 px-6 pb-12 pt-32">
+      <h1 className="w-min text-3xl">{pnkTokenData.header}</h1>
+      <p className="text-lg text-secondary-text">{pnkTokenData.subtitle}</p>
+      <ImageDownload
+        key={pnkTokenData.imageDownload.name}
+        {...{ imageDownload: pnkTokenData.imageDownload }}
+      />
+    </div>
+  );
+};
+
+export default PnkTokenSection;

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<IStyledImagesSection> = ({
+  styledImagesData,
+}) => {
+  return (
+    <div className="relative space-y-6 bg-background-2 px-6 pb-12 pt-32">
+      <h1 className="w-min text-3xl">{styledImagesData.header}</h1>
+      <h1 className="w-min text-2xl">{styledImagesData.wallpapersHeader}</h1>
+      <p className="text-lg text-secondary-text">
+        {styledImagesData.wallpapersSubtitle}
+      </p>
+      <div className="flex flex-row flex-wrap justify-center gap-x-8 gap-y-16">
+        {styledImagesData.wallpapersImageDownloads.map((imageDownload) => {
+          return (
+            <ImageDownload key={imageDownload.name} {...{ imageDownload }} />
+          );
+        })}
+      </div>
+      <h2 className="w-min text-2xl">
+        {styledImagesData.productMockupsHeader}
+      </h2>
+      <p className="text-lg text-secondary-text">
+        {styledImagesData.productMockupsSubtitle}
+      </p>
+      <div className="flex flex-row flex-wrap justify-center gap-x-8 gap-y-16">
+        {styledImagesData.productMockupsImageDownloads.map((imageDownload) => {
+          return (
+            <ImageDownload key={imageDownload.name} {...{ imageDownload }} />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default StyledImagesSection;