feat: add pnk token section

Author: kemuru

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

@@ -4,8 +4,13 @@ import KlerosColorsSection from "@/components/BrandAssets/KlerosColorsSection/in
 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,
@@ -23,22 +28,15 @@ import {
   LogosPackageSectionQueryType,
 } from "@/queries/brand-assets/logos-package-section";
 import {
-  klerosBadgesSectionQuery,
-  KlerosBadgesSectionQueryType,
-} from "@/queries/brand-assets/kleros-badges-section";
+  pnkTokenSectionQuery,
+  PnkTokenSectionQueryType,
+} from "@/queries/brand-assets/pnk-token-section";
 import {
   styledImagesSectionQuery,
   StyledImagesSectionQueryType,
 } from "@/queries/brand-assets/styled-images-section";
-// import {
-//   pnkTokenSectionQuery,
-//   PnkTokenSectionQueryType,
-// } from "@/queries/brand-assets/pnk-token-section";
-
 import { request } from "@/utils/graphQLClient";
 
-// import PnkTokenSection from "@/components/BrandAssets/PnkTokenSection";
-
 const BrandAssets: React.FC = async () => {
   const heroData = await request<HeroQueryType>(heroQuery);
   const logosPackageData = await request<LogosPackageSectionQueryType>(
@@ -59,9 +57,8 @@ const BrandAssets: React.FC = async () => {
   const styledImagesSection = await request<StyledImagesSectionQueryType>(
     styledImagesSectionQuery,
   );
-  // const pnkTokenSection = await request<PnkTokenSectionQueryType>(
-  //   pnkTokenSectionQuery,
-  // );
+  const pnkTokenSection =
+    await request<PnkTokenSectionQueryType>(pnkTokenSectionQuery);
 
   return (
     <>
@@ -90,6 +87,9 @@ const BrandAssets: React.FC = async () => {
           styledImagesSection.brandAssetsPageStyledImagesSection
         }
       />
+      <PnkTokenSection
+        pnkTokenData={pnkTokenSection.brandAssetsPagePnkTokenSection}
+      />
     </>
   );
 };

frontend/src/components/BrandAssets/PnkTokenSection.tsx

@@ -0,0 +1,26 @@
+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 bg-background-1 px-6 pb-12 pt-32">
+      <div className="space-y-6">
+        <h1 className="w-min text-3xl">{pnkTokenData.header}</h1>
+        <p className="text-lg text-secondary-text">{pnkTokenData.subtitle}</p>
+        <div className="flex flex-row flex-wrap gap-x-8 gap-y-16">
+          <ImageDownload
+            key={pnkTokenData.imageDownload.name}
+            {...{ imageDownload: pnkTokenData.imageDownload }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PnkTokenSection;

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;
+};