diff --git a/frontend/src/app/brand-assets/components/Badges/index.tsx b/frontend/src/app/brand-assets/components/Badges/index.tsx
new file mode 100644
index 0000000..13b089b
--- /dev/null
+++ b/frontend/src/app/brand-assets/components/Badges/index.tsx
@@ -0,0 +1,33 @@
+import ImageDownload from "@/components/ImageDownload";
+
+import { IBadgesQuery } from "./queries";
+
+interface IBadges {
+ badgesData: IBadgesQuery["brandAssetsPageKlerosBadgesSection"];
+}
+
+const Badges: React.FC<IBadges> = ({ badgesData }) => {
+ return (
+ <div
+ className={
+ "relative space-y-8 bg-background-1 px-6 py-12 lg:px-32 lg:py-24"
+ }
+ >
+ <h1 className="text-xl font-medium text-primary-text lg:text-2xl">
+ {badgesData.header}
+ </h1>
+ <p className="pb-4 text-secondary-text lg:pb-8 lg:text-lg">
+ {badgesData.subtitle}
+ </p>
+ <div className="flex flex-row flex-wrap justify-center gap-8 lg:gap-y-16">
+ {badgesData.imageDownloads.map((imageDownload) => {
+ return (
+ <ImageDownload key={imageDownload.image.url} {...imageDownload} />
+ );
+ })}
+ </div>
+ </div>
+ );
+};
+
+export default Badges;
diff --git a/frontend/src/queries/brand-assets/kleros-badges-section.tsx b/frontend/src/app/brand-assets/components/Badges/queries.tsx
similarity index 56%
rename from frontend/src/queries/brand-assets/kleros-badges-section.tsx
rename to frontend/src/app/brand-assets/components/Badges/queries.tsx
index c7531c6..c045e21 100644
--- a/frontend/src/queries/brand-assets/kleros-badges-section.tsx
+++ b/frontend/src/app/brand-assets/components/Badges/queries.tsx
@@ -1,6 +1,8 @@
import { gql } from "graphql-request";
-export const klerosBadgesSectionQuery = gql`
+import { IImageDownload } from "@/components/ImageDownload";
+
+export const badgesQuery = gql`
{
brandAssetsPageKlerosBadgesSection {
header
@@ -17,19 +19,10 @@ export const klerosBadgesSectionQuery = gql`
}
`;
-export type KlerosBadgesSectionQueryType = {
+export type IBadgesQuery = {
brandAssetsPageKlerosBadgesSection: {
header: string;
subtitle: string;
- imageDownloads: ImageDownloadType[];
- };
-};
-
-export type ImageDownloadType = {
- name: string;
- image: {
- url: string;
+ imageDownloads: IImageDownload[];
};
- svgDownloadLink: string;
- pngDownloadLink: string;
};
diff --git a/frontend/src/components/BrandAssets/KlerosColorsSection/ColorCard.tsx b/frontend/src/app/brand-assets/components/Colors/ColorCard.tsx
similarity index 69%
rename from frontend/src/components/BrandAssets/KlerosColorsSection/ColorCard.tsx
rename to frontend/src/app/brand-assets/components/Colors/ColorCard.tsx
index 6b9281d..84b1222 100644
--- a/frontend/src/components/BrandAssets/KlerosColorsSection/ColorCard.tsx
+++ b/frontend/src/app/brand-assets/components/Colors/ColorCard.tsx
@@ -1,5 +1,7 @@
import React from "react";
+import clsx from "clsx";
+
interface IColorCard {
name: string;
hexColor: string;
@@ -8,7 +10,10 @@ interface IColorCard {
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"
+ className={clsx(
+ "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>
diff --git a/frontend/src/app/brand-assets/components/Colors/index.tsx b/frontend/src/app/brand-assets/components/Colors/index.tsx
new file mode 100644
index 0000000..5c8a7cf
--- /dev/null
+++ b/frontend/src/app/brand-assets/components/Colors/index.tsx
@@ -0,0 +1,41 @@
+import clsx from "clsx";
+
+import ColorCard from "./ColorCard";
+import { IColorsQuery } from "./queries";
+
+interface IColors {
+ colorsData: IColorsQuery["brandAssetsPageKlerosColorsSection"];
+}
+
+const KlerosColorsSection: React.FC<IColors> = ({ colorsData }) => {
+ return (
+ <div
+ className={
+ "relative space-y-8 bg-background-2 px-6 py-12 lg:px-32 lg:py-24"
+ }
+ >
+ <h1 className="text-xl font-medium text-primary-text lg:text-2xl">
+ {colorsData.header}
+ </h1>
+ <p
+ className={clsx(
+ "pb-4 text-sm font-medium text-secondary-text",
+ "lg:pb-8 lg:text-lg lg:font-normal",
+ )}
+ >
+ {colorsData.subtitle}
+ </p>
+ <div className="flex flex-row flex-wrap justify-center gap-8">
+ {colorsData?.colorCards?.map((colorCard) => (
+ <ColorCard
+ key={colorCard.name}
+ name={colorCard.name}
+ hexColor={colorCard.hexColor}
+ />
+ ))}
+ </div>
+ </div>
+ );
+};
+
+export default KlerosColorsSection;
diff --git a/frontend/src/queries/brand-assets/kleros-colors-section.tsx b/frontend/src/app/brand-assets/components/Colors/queries.tsx
similarity index 79%
rename from frontend/src/queries/brand-assets/kleros-colors-section.tsx
rename to frontend/src/app/brand-assets/components/Colors/queries.tsx
index e424a1e..ca70438 100644
--- a/frontend/src/queries/brand-assets/kleros-colors-section.tsx
+++ b/frontend/src/app/brand-assets/components/Colors/queries.tsx
@@ -1,6 +1,6 @@
import { gql } from "graphql-request";
-export const klerosColorsSectionQuery = gql`
+export const colorsQuery = gql`
{
brandAssetsPageKlerosColorsSection {
header
@@ -13,7 +13,7 @@ export const klerosColorsSectionQuery = gql`
}
`;
-export type KlerosColorsSectionQueryType = {
+export type IColorsQuery = {
brandAssetsPageKlerosColorsSection: {
header: string;
subtitle: string;
diff --git a/frontend/src/app/brand-assets/components/Fonts/index.tsx b/frontend/src/app/brand-assets/components/Fonts/index.tsx
new file mode 100644
index 0000000..5ddafe3
--- /dev/null
+++ b/frontend/src/app/brand-assets/components/Fonts/index.tsx
@@ -0,0 +1,33 @@
+import clsx from "clsx";
+
+import CtaCard from "@/components/CtaCard";
+
+import { IFontsQuery } from "./queries";
+
+interface IFonts {
+ fontsData: IFontsQuery["brandAssetsPageKlerosFontsSection"];
+}
+
+const Fonts: React.FC<IFonts> = ({ fontsData }) => {
+ return (
+ <div
+ className={clsx(
+ "relative space-y-8 bg-background-1 px-6 pb-12",
+ "lg:space-y-16 lg:px-32 lg:pb-24 lg:pt-8",
+ )}
+ >
+ <h1 className="text-xl font-medium text-primary-text lg:text-2xl">
+ {fontsData.header}
+ </h1>
+ <CtaCard
+ className="max-w-[583px] [&>p]:mb-14 [&>p]:text-base"
+ key={fontsData.linkCard.title}
+ title={fontsData.linkCard.title}
+ description={fontsData.linkCard.subtitle}
+ arrowLink={fontsData.linkCard.link}
+ />
+ </div>
+ );
+};
+
+export default Fonts;
diff --git a/frontend/src/queries/brand-assets/kleros-fonts-section.tsx b/frontend/src/app/brand-assets/components/Fonts/queries.tsx
similarity index 84%
rename from frontend/src/queries/brand-assets/kleros-fonts-section.tsx
rename to frontend/src/app/brand-assets/components/Fonts/queries.tsx
index 6d46529..2877390 100644
--- a/frontend/src/queries/brand-assets/kleros-fonts-section.tsx
+++ b/frontend/src/app/brand-assets/components/Fonts/queries.tsx
@@ -1,6 +1,6 @@
import { gql } from "graphql-request";
-export const klerosFontsSectionQuery = gql`
+export const fontsQuery = gql`
{
brandAssetsPageKlerosFontsSection {
header
@@ -18,7 +18,7 @@ export const klerosFontsSectionQuery = gql`
}
`;
-export type KlerosFontsSectionQueryType = {
+export type IFontsQuery = {
brandAssetsPageKlerosFontsSection: {
header: string;
linkCard: {
diff --git a/frontend/src/components/BrandAssets/Hero.tsx b/frontend/src/app/brand-assets/components/Hero/index.tsx
similarity index 77%
rename from frontend/src/components/BrandAssets/Hero.tsx
rename to frontend/src/app/brand-assets/components/Hero/index.tsx
index 87f3620..a056c18 100644
--- a/frontend/src/components/BrandAssets/Hero.tsx
+++ b/frontend/src/app/brand-assets/components/Hero/index.tsx
@@ -3,19 +3,23 @@ import React from "react";
import Image from "next/image";
import Button from "@/components/Button";
-import { HeroQueryType } from "@/queries/brand-assets/hero";
+import CustomLink from "@/components/CustomLink";
-import CustomLink from "../CustomLink";
+import { IHeroQuery } from "./queries";
interface IHero {
- heroData: HeroQueryType["brandAssetsPageHero"];
+ heroData: IHeroQuery["brandAssetsPageHero"];
}
const Hero: React.FC<IHero> = ({ heroData }) => {
return (
<div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-[302px]">
<div className="space-y-6">
- <h1 className="pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl">
+ <h1
+ className={
+ "pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl"
+ }
+ >
{heroData.header}
</h1>
<p className="max-w-[685px] text-lg text-primary-text">
diff --git a/frontend/src/queries/brand-assets/hero.tsx b/frontend/src/app/brand-assets/components/Hero/queries.tsx
similarity index 93%
rename from frontend/src/queries/brand-assets/hero.tsx
rename to frontend/src/app/brand-assets/components/Hero/queries.tsx
index 0aa7ea5..f0a8810 100644
--- a/frontend/src/queries/brand-assets/hero.tsx
+++ b/frontend/src/app/brand-assets/components/Hero/queries.tsx
@@ -18,7 +18,7 @@ export const heroQuery = gql`
}
`;
-export type HeroQueryType = {
+export type IHeroQuery = {
brandAssetsPageHero: {
header: string;
subtitle: string;
diff --git a/frontend/src/app/brand-assets/components/Logos/index.tsx b/frontend/src/app/brand-assets/components/Logos/index.tsx
new file mode 100644
index 0000000..9841157
--- /dev/null
+++ b/frontend/src/app/brand-assets/components/Logos/index.tsx
@@ -0,0 +1,35 @@
+import clsx from "clsx";
+
+import ImageDownload from "@/components/ImageDownload";
+
+import { ILogosQuery } from "./queries";
+
+interface ILogos {
+ logosData: ILogosQuery["brandAssetsPageKlerosLogoSection"];
+}
+
+const Logos: React.FC<ILogos> = ({ logosData }) => {
+ return (
+ <div
+ className={clsx(
+ "relative space-y-12 bg-background-1 px-6 py-12",
+ "lg:space-y-16 lg:px-32 lg:py-24",
+ )}
+ >
+ <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
+ {logosData.header}
+ </h1>
+ <div
+ className={
+ "flex flex-row flex-wrap justify-center gap-x-8 gap-y-12 lg:gap-y-16"
+ }
+ >
+ {logosData.imageDownloads.map((imageDownload) => {
+ return <ImageDownload key={imageDownload.name} {...imageDownload} />;
+ })}
+ </div>
+ </div>
+ );
+};
+
+export default Logos;
diff --git a/frontend/src/queries/brand-assets/kleros-logo-section.tsx b/frontend/src/app/brand-assets/components/Logos/queries.tsx
similarity index 53%
rename from frontend/src/queries/brand-assets/kleros-logo-section.tsx
rename to frontend/src/app/brand-assets/components/Logos/queries.tsx
index 196d72d..ee2a5f4 100644
--- a/frontend/src/queries/brand-assets/kleros-logo-section.tsx
+++ b/frontend/src/app/brand-assets/components/Logos/queries.tsx
@@ -1,6 +1,8 @@
import { gql } from "graphql-request";
-export const klerosLogoSectionQuery = gql`
+import { IImageDownload } from "@/components/ImageDownload";
+
+export const logosQuery = gql`
{
brandAssetsPageKlerosLogoSection {
header
@@ -16,18 +18,9 @@ export const klerosLogoSectionQuery = gql`
}
`;
-export type KlerosLogoSectionQueryType = {
+export type ILogosQuery = {
brandAssetsPageKlerosLogoSection: {
header: string;
- imageDownloads: ImageDownloadType[];
- };
-};
-
-export type ImageDownloadType = {
- name: string;
- image: {
- url: string;
+ imageDownloads: IImageDownload[];
};
- svgDownloadLink?: string;
- pngDownloadLink?: string;
};
diff --git a/frontend/src/components/BrandAssets/LogosPackageSection.tsx b/frontend/src/app/brand-assets/components/LogosPackage/index.tsx
similarity index 68%
rename from frontend/src/components/BrandAssets/LogosPackageSection.tsx
rename to frontend/src/app/brand-assets/components/LogosPackage/index.tsx
index 6fa4715..049a8a7 100644
--- a/frontend/src/components/BrandAssets/LogosPackageSection.tsx
+++ b/frontend/src/app/brand-assets/components/LogosPackage/index.tsx
@@ -1,18 +1,22 @@
-import { LogosPackageSectionQueryType } from "@/queries/brand-assets/logos-package-section";
+import Button from "@/components/Button";
+import CustomLink from "@/components/CustomLink";
+import ExternalLink from "@/components/ExternalLink";
-import Button from "../Button";
-import CustomLink from "../CustomLink";
-import ExternalLink from "../ExternalLink";
+import { ILogosPackageQuery } from "./queries";
interface ILogosPackageSection {
- logosPackageData: LogosPackageSectionQueryType["brandAssetsPageLogosPackageSection"];
+ logosPackageData: ILogosPackageQuery["brandAssetsPageLogosPackageSection"];
}
const LogosPackageSection: React.FC<ILogosPackageSection> = ({
logosPackageData,
}) => {
return (
- <div className="relative space-y-6 bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
+ <div
+ className={
+ "relative space-y-6 bg-background-2 px-6 py-12 lg:px-32 lg:py-24"
+ }
+ >
<h1 className="text-xl font-medium text-primary-text lg:text-3xl">
{logosPackageData.header}
</h1>
diff --git a/frontend/src/queries/brand-assets/logos-package-section.tsx b/frontend/src/app/brand-assets/components/LogosPackage/queries.tsx
similarity index 86%
rename from frontend/src/queries/brand-assets/logos-package-section.tsx
rename to frontend/src/app/brand-assets/components/LogosPackage/queries.tsx
index 62e1356..a310859 100644
--- a/frontend/src/queries/brand-assets/logos-package-section.tsx
+++ b/frontend/src/app/brand-assets/components/LogosPackage/queries.tsx
@@ -1,6 +1,6 @@
import { gql } from "graphql-request";
-export const logosPackageSectionQuery = gql`
+export const logosPackageQuery = gql`
{
brandAssetsPageLogosPackageSection {
header
@@ -21,7 +21,7 @@ export const logosPackageSectionQuery = gql`
}
`;
-export type LogosPackageSectionQueryType = {
+export type ILogosPackageQuery = {
brandAssetsPageLogosPackageSection: {
header: string;
subtitle: string;
diff --git a/frontend/src/components/BrandAssets/PnkTokenSection.tsx b/frontend/src/app/brand-assets/components/PnkToken/index.tsx
similarity index 55%
rename from frontend/src/components/BrandAssets/PnkTokenSection.tsx
rename to frontend/src/app/brand-assets/components/PnkToken/index.tsx
index 31b3dac..31f6fc8 100644
--- a/frontend/src/components/BrandAssets/PnkTokenSection.tsx
+++ b/frontend/src/app/brand-assets/components/PnkToken/index.tsx
@@ -1,14 +1,21 @@
-import { PnkTokenSectionQueryType } from "@/queries/brand-assets/pnk-token-section";
+import clsx from "clsx";
-import ImageDownload from "../ImageDownload";
+import ImageDownload from "@/components/ImageDownload";
+
+import { IPnkTokenQuery } from "./queries";
interface IPnkTokenSection {
- pnkTokenData: PnkTokenSectionQueryType["brandAssetsPagePnkTokenSection"];
+ pnkTokenData: IPnkTokenQuery["brandAssetsPagePnkTokenSection"];
}
const PnkTokenSection: React.FC<IPnkTokenSection> = ({ pnkTokenData }) => {
return (
- <div className="relative space-y-6 bg-background-1 px-6 py-12 lg:space-y-8 lg:px-32 lg:py-24">
+ <div
+ className={clsx(
+ "relative space-y-6 bg-background-1 px-6 py-12",
+ "lg:space-y-8 lg:px-32 lg:py-24",
+ )}
+ >
<h1 className="text-xl font-medium text-primary-text lg:text-3xl">
{pnkTokenData.header}
</h1>
@@ -17,7 +24,7 @@ const PnkTokenSection: React.FC<IPnkTokenSection> = ({ pnkTokenData }) => {
</p>
<ImageDownload
key={pnkTokenData.imageDownload.name}
- {...{ imageDownload: pnkTokenData.imageDownload }}
+ {...pnkTokenData.imageDownload}
/>
</div>
);
diff --git a/frontend/src/queries/brand-assets/pnk-token-section.tsx b/frontend/src/app/brand-assets/components/PnkToken/queries.tsx
similarity index 56%
rename from frontend/src/queries/brand-assets/pnk-token-section.tsx
rename to frontend/src/app/brand-assets/components/PnkToken/queries.tsx
index b3dae2e..8de2705 100644
--- a/frontend/src/queries/brand-assets/pnk-token-section.tsx
+++ b/frontend/src/app/brand-assets/components/PnkToken/queries.tsx
@@ -1,6 +1,8 @@
import { gql } from "graphql-request";
-export const pnkTokenSectionQuery = gql`
+import { IImageDownload } from "@/components/ImageDownload";
+
+export const pnkTokenQuery = gql`
{
brandAssetsPagePnkTokenSection {
header
@@ -17,19 +19,10 @@ export const pnkTokenSectionQuery = gql`
}
`;
-export type PnkTokenSectionQueryType = {
+export type IPnkTokenQuery = {
brandAssetsPagePnkTokenSection: {
header: string;
subtitle: string;
- imageDownload: ImageDownloadType;
- };
-};
-
-export type ImageDownloadType = {
- name: string;
- image: {
- url: string;
+ imageDownload: IImageDownload;
};
- svgDownloadLink?: string;
- pngDownloadLink?: string;
};
diff --git a/frontend/src/components/BrandAssets/StyledImagesSection.tsx b/frontend/src/app/brand-assets/components/StyledImages/index.tsx
similarity index 65%
rename from frontend/src/components/BrandAssets/StyledImagesSection.tsx
rename to frontend/src/app/brand-assets/components/StyledImages/index.tsx
index 96e2730..1d1e062 100644
--- a/frontend/src/components/BrandAssets/StyledImagesSection.tsx
+++ b/frontend/src/app/brand-assets/components/StyledImages/index.tsx
@@ -1,16 +1,20 @@
-import { StyledImagesSectionQueryType } from "@/queries/brand-assets/styled-images-section";
+import ImageDownload from "@/components/ImageDownload";
-import ImageDownload from "../ImageDownload";
+import { IStyledImagesQuery } from "./queries";
interface IStyledImagesSection {
- styledImagesData: StyledImagesSectionQueryType["brandAssetsPageStyledImagesSection"];
+ styledImagesData: IStyledImagesQuery["brandAssetsPageStyledImagesSection"];
}
const StyledImagesSection: React.FC<IStyledImagesSection> = ({
styledImagesData,
}) => {
return (
- <div className="relative space-y-8 bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
+ <div
+ className={
+ "relative space-y-8 bg-background-2 px-6 py-12 lg:px-32 lg:py-24"
+ }
+ >
<h1 className="text-xl font-medium text-primary-text lg:text-3xl">
{styledImagesData.header}
</h1>
@@ -22,13 +26,15 @@ const StyledImagesSection: React.FC<IStyledImagesSection> = ({
</p>
<div className="flex flex-row flex-wrap justify-center gap-8 lg:gap-y-16">
{styledImagesData.wallpapersImageDownloads.map((imageDownload) => {
- return (
- <ImageDownload key={imageDownload.name} {...{ imageDownload }} />
- );
+ return <ImageDownload key={imageDownload.name} {...imageDownload} />;
})}
</div>
<div className="space-y-6 py-8 lg:space-y-8 lg:py-16">
- <h2 className="text-lg font-medium text-primary-text lg:text-2xl lg:font-normal">
+ <h2
+ className={
+ "text-lg font-medium text-primary-text lg:text-2xl lg:font-normal"
+ }
+ >
{styledImagesData.productMockupsHeader}
</h2>
<p className="text-secondary-text lg:text-lg">
@@ -38,9 +44,7 @@ const StyledImagesSection: React.FC<IStyledImagesSection> = ({
<div className="flex flex-row flex-wrap justify-center gap-8 lg:gap-y-16">
{styledImagesData.productMockupsImageDownloads.map((imageDownload) => {
- return (
- <ImageDownload key={imageDownload.name} {...{ imageDownload }} />
- );
+ return <ImageDownload key={imageDownload.name} {...imageDownload} />;
})}
</div>
</div>
diff --git a/frontend/src/queries/brand-assets/styled-images-section.tsx b/frontend/src/app/brand-assets/components/StyledImages/queries.tsx
similarity index 68%
rename from frontend/src/queries/brand-assets/styled-images-section.tsx
rename to frontend/src/app/brand-assets/components/StyledImages/queries.tsx
index 5e36a34..9fc8182 100644
--- a/frontend/src/queries/brand-assets/styled-images-section.tsx
+++ b/frontend/src/app/brand-assets/components/StyledImages/queries.tsx
@@ -1,6 +1,8 @@
import { gql } from "graphql-request";
-export const styledImagesSectionQuery = gql`
+import { IImageDownload } from "@/components/ImageDownload";
+
+export const styledImagesQuery = gql`
{
brandAssetsPageStyledImagesSection {
header
@@ -26,22 +28,14 @@ export const styledImagesSectionQuery = gql`
}
`;
-export type StyledImagesSectionQueryType = {
+export type IStyledImagesQuery = {
brandAssetsPageStyledImagesSection: {
header: string;
wallpapersHeader: string;
wallpapersSubtitle: string;
- wallpapersImageDownloads: ImageDownloadType[];
+ wallpapersImageDownloads: IImageDownload[];
productMockupsHeader: string;
productMockupsSubtitle: string;
- productMockupsImageDownloads: ImageDownloadType[];
- };
-};
-
-export type ImageDownloadType = {
- name: string;
- image: {
- url: string;
+ productMockupsImageDownloads: IImageDownload[];
};
- pngDownloadLink: string;
};
diff --git a/frontend/src/app/brand-assets/page.tsx b/frontend/src/app/brand-assets/page.tsx
index fc7258e..07aa3fd 100644
--- a/frontend/src/app/brand-assets/page.tsx
+++ b/frontend/src/app/brand-assets/page.tsx
@@ -1,102 +1,62 @@
import type { Metadata } from "next";
-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";
import { getPageMetadata } from "@/utils/seo";
+import Badges from "./components/Badges";
+import { badgesQuery, IBadgesQuery } from "./components/Badges/queries";
+import Colors from "./components/Colors";
+import { colorsQuery, IColorsQuery } from "./components/Colors/queries";
+import Fonts from "./components/Fonts";
+import { fontsQuery, IFontsQuery } from "./components/Fonts/queries";
+import Hero from "./components/Hero";
+import { heroQuery, IHeroQuery } from "./components/Hero/queries";
+import Logos from "./components/Logos";
+import { logosQuery, ILogosQuery } from "./components/Logos/queries";
+import LogosPackage from "./components/LogosPackage";
+import {
+ logosPackageQuery,
+ ILogosPackageQuery,
+} from "./components/LogosPackage/queries";
+import PnkToken from "./components/PnkToken";
+import { pnkTokenQuery, IPnkTokenQuery } from "./components/PnkToken/queries";
+import StyledImages from "./components/StyledImages";
+import {
+ styledImagesQuery,
+ IStyledImagesQuery,
+} from "./components/StyledImages/queries";
+
export const generateMetadata = async (): Promise<Metadata> => {
return await getPageMetadata("brandAssetsPageSeo");
};
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);
+ const heroData = await request<IHeroQuery>(heroQuery);
+ const logosPackageData = await request<ILogosPackageQuery>(logosPackageQuery);
+ const logosSection = await request<ILogosQuery>(logosQuery);
+ const fontsSection = await request<IFontsQuery>(fontsQuery);
+ const colorsSection = await request<IColorsQuery>(colorsQuery);
+ const badgesSection = await request<IBadgesQuery>(badgesQuery);
+ const styledImagesSection =
+ await request<IStyledImagesQuery>(styledImagesQuery);
+ const pnkTokenSection = await request<IPnkTokenQuery>(pnkTokenQuery);
return (
<>
<Hero {...{ heroData: heroData.brandAssetsPageHero }} />
- <LogosPackageSection
+ <LogosPackage
logosPackageData={logosPackageData.brandAssetsPageLogosPackageSection}
/>
- <KlerosLogoSection
- klerosLogoData={klerosLogoSection.brandAssetsPageKlerosLogoSection}
- />
- <KlerosFontsSection
- klerosFontsData={klerosFontsSection.brandAssetsPageKlerosFontsSection}
- />
- <KlerosColorsSection
- klerosColorsData={
- klerosColorsSection.brandAssetsPageKlerosColorsSection
- }
- />
- <KlerosBadgesSection
- klerosBadgesData={
- klerosBadgesSection.brandAssetsPageKlerosBadgesSection
- }
- />
- <StyledImagesSection
+ <Logos logosData={logosSection.brandAssetsPageKlerosLogoSection} />
+ <Fonts fontsData={fontsSection.brandAssetsPageKlerosFontsSection} />
+ <Colors colorsData={colorsSection.brandAssetsPageKlerosColorsSection} />
+ <Badges badgesData={badgesSection.brandAssetsPageKlerosBadgesSection} />
+ <StyledImages
styledImagesData={
styledImagesSection.brandAssetsPageStyledImagesSection
}
/>
- <PnkTokenSection
- pnkTokenData={pnkTokenSection.brandAssetsPagePnkTokenSection}
- />
+ <PnkToken pnkTokenData={pnkTokenSection.brandAssetsPagePnkTokenSection} />
</>
);
};
diff --git a/frontend/src/app/community/components/Communities/CommunityCard.tsx b/frontend/src/app/community/components/Communities/CommunityCard.tsx
new file mode 100644
index 0000000..58dc21b
--- /dev/null
+++ b/frontend/src/app/community/components/Communities/CommunityCard.tsx
@@ -0,0 +1,42 @@
+import clsx from "clsx";
+import Image from "next/image";
+
+import CustomLink from "@/components/CustomLink";
+
+import { ICommunity } from "./queries";
+
+const CommunityCard: React.FC<ICommunity> = ({
+ title,
+ subtitle,
+ icon,
+ url,
+}) => {
+ return (
+ <CustomLink href={url}>
+ <div
+ className={clsx(
+ "flex min-h-[326px] flex-col items-center justify-center rounded-2xl",
+ "border border-stroke bg-background-2 hover:scale-[1.01]",
+ )}
+ >
+ <Image
+ src={icon.url}
+ alt={icon.name}
+ width={76}
+ height={76}
+ className="object-contain"
+ />
+ <h2
+ className={
+ "mb-4 mt-2 text-center text-xl font-medium text-primary-text"
+ }
+ >
+ {title}
+ </h2>
+ <label className="text-base text-secondary-text">{subtitle}</label>
+ </div>
+ </CustomLink>
+ );
+};
+
+export default CommunityCard;
diff --git a/frontend/src/components/Community/CommunitiesSection.tsx b/frontend/src/app/community/components/Communities/index.tsx
similarity index 78%
rename from frontend/src/components/Community/CommunitiesSection.tsx
rename to frontend/src/app/community/components/Communities/index.tsx
index d39714e..bcb42aa 100644
--- a/frontend/src/components/Community/CommunitiesSection.tsx
+++ b/frontend/src/app/community/components/Communities/index.tsx
@@ -1,14 +1,13 @@
import clsx from "clsx";
-import { Community } from "@/queries/community/hero";
+import { request } from "@/utils/graphQLClient";
import CommunityCard from "./CommunityCard";
+import { communitiesQuery, ICommunitiesQuery } from "./queries";
-interface ICommunitiesSection {
- communities: Community[];
-}
+const CommunitiesSection: React.FC = async () => {
+ const { communities } = await request<ICommunitiesQuery>(communitiesQuery);
-const CommunitiesSection: React.FC<ICommunitiesSection> = ({ communities }) => {
const rowOneCommunities = communities.slice(0, 2);
const restCommunities = communities.slice(2);
return (
diff --git a/frontend/src/app/community/components/Communities/queries.ts b/frontend/src/app/community/components/Communities/queries.ts
new file mode 100644
index 0000000..4a117c0
--- /dev/null
+++ b/frontend/src/app/community/components/Communities/queries.ts
@@ -0,0 +1,29 @@
+import { gql } from "graphql-request";
+
+export type ICommunity = {
+ title: string;
+ subtitle: string;
+ url: string;
+ icon: {
+ url: string;
+ name: string;
+ };
+};
+
+export const communitiesQuery = gql`
+ {
+ communities {
+ title
+ subtitle
+ url
+ icon {
+ url
+ name
+ }
+ }
+ }
+`;
+
+export type ICommunitiesQuery = {
+ communities: ICommunity[];
+};
diff --git a/frontend/src/components/Community/hero.tsx b/frontend/src/app/community/components/Hero/index.tsx
similarity index 65%
rename from frontend/src/components/Community/hero.tsx
rename to frontend/src/app/community/components/Hero/index.tsx
index bd7c990..72e5d45 100644
--- a/frontend/src/components/Community/hero.tsx
+++ b/frontend/src/app/community/components/Hero/index.tsx
@@ -3,20 +3,25 @@ import React from "react";
import Image from "next/image";
import Button from "@/components/Button";
-import { HeroQueryType } from "@/queries/community/hero";
+import CustomLink from "@/components/CustomLink";
+import { request } from "@/utils/graphQLClient";
-import CustomLink from "../CustomLink";
+import { heroQuery, IHeroQuery } from "./queries";
-interface IHero {
- heroData: HeroQueryType["communityPageHero"];
-}
+const Hero: React.FC = async () => {
+ const { header, subtitle, communityButtons, background } =
+ await request<IHeroQuery>(heroQuery).then(
+ (heroData) => heroData.communityPageHero,
+ );
-const Hero: React.FC<IHero> = ({ heroData }) => {
- const { header, subtitle, communityButtons, background } = heroData;
return (
<div className="relative px-6 pb-[277px] pt-44 lg:px-32 lg:pb-[331px]">
<div className="space-y-8">
- <h1 className="pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl">
+ <h1
+ className={
+ "pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl"
+ }
+ >
{header}
</h1>
<p className="text-lg text-primary-text">{subtitle}</p>
diff --git a/frontend/src/app/community/components/Hero/queries.ts b/frontend/src/app/community/components/Hero/queries.ts
new file mode 100644
index 0000000..19b094c
--- /dev/null
+++ b/frontend/src/app/community/components/Hero/queries.ts
@@ -0,0 +1,35 @@
+import { gql } from "graphql-request";
+
+export const heroQuery = gql`
+ {
+ communityPageHero {
+ header
+ subtitle
+ communityButtons {
+ text
+ link {
+ url
+ }
+ }
+ background {
+ url
+ }
+ }
+ }
+`;
+
+export type IHeroQuery = {
+ communityPageHero: {
+ header: string;
+ subtitle: string;
+ communityButtons: {
+ text: string;
+ link: {
+ url: string;
+ };
+ }[];
+ background: {
+ url: string;
+ };
+ };
+};
diff --git a/frontend/src/app/community/page.tsx b/frontend/src/app/community/page.tsx
index 5755954..317a035 100644
--- a/frontend/src/app/community/page.tsx
+++ b/frontend/src/app/community/page.tsx
@@ -1,22 +1,19 @@
import type { Metadata } from "next";
-import CommunitiesSection from "@/components/Community/CommunitiesSection";
-import Hero from "@/components/Community/hero";
-import { heroQuery, HeroQueryType } from "@/queries/community/hero";
-import { request } from "@/utils/graphQLClient";
import { getPageMetadata } from "@/utils/seo";
+import Communities from "./components/Communities";
+import Hero from "./components/Hero";
+
export const generateMetadata = async (): Promise<Metadata> => {
return await getPageMetadata("communityPageSeo");
};
const Community: React.FC = async () => {
- const heroData = await request<HeroQueryType>(heroQuery);
-
return (
<>
- <Hero heroData={heroData.communityPageHero} />
- <CommunitiesSection communities={heroData.communities} />
+ <Hero />
+ <Communities />
</>
);
};
diff --git a/frontend/src/queries/community/hero.ts b/frontend/src/app/community/queries.ts
similarity index 96%
rename from frontend/src/queries/community/hero.ts
rename to frontend/src/app/community/queries.ts
index 4fb4706..49de765 100644
--- a/frontend/src/queries/community/hero.ts
+++ b/frontend/src/app/community/queries.ts
@@ -37,7 +37,7 @@ export const heroQuery = gql`
}
`;
-export type HeroQueryType = {
+export type IHeroQuery = {
communityPageHero: {
header: string;
subtitle: string;
diff --git a/frontend/src/components/Cooperative/hero.tsx b/frontend/src/app/cooperative/components/Hero/index.tsx
similarity index 70%
rename from frontend/src/components/Cooperative/hero.tsx
rename to frontend/src/app/cooperative/components/Hero/index.tsx
index 331830b..0274134 100644
--- a/frontend/src/components/Cooperative/hero.tsx
+++ b/frontend/src/app/cooperative/components/Hero/index.tsx
@@ -3,21 +3,25 @@ import React from "react";
import Image from "next/image";
import Button from "@/components/Button";
+import CustomLink from "@/components/CustomLink";
import ExternalLink from "@/components/ExternalLink";
-import { HeroQueryType } from "@/queries/cooperative/hero";
+import { request } from "@/utils/graphQLClient";
-import CustomLink from "../CustomLink";
+import { heroQuery, IHeroQuery } from "./queries";
-interface IHero {
- heroData: HeroQueryType["cooperativePageHero"];
-}
-
-const Hero: React.FC<IHero> = ({ heroData }) => {
- const { header, subtitle, buttons, arrowLink, background } = heroData;
+const Hero: React.FC = async () => {
+ const { header, subtitle, buttons, arrowLink, background } =
+ await request<IHeroQuery>(heroQuery).then(
+ ({ cooperativePageHero }) => cooperativePageHero,
+ );
return (
<div className="relative px-6 pb-52 pt-44 lg:px-32 lg:pb-56 lg:pt-52">
<div className="space-y-8">
- <h1 className="pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl">
+ <h1
+ className={
+ "pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl"
+ }
+ >
{header}
</h1>
<p className="max-w-[685px] text-lg text-primary-text">{subtitle}</p>
diff --git a/frontend/src/queries/cooperative/hero.ts b/frontend/src/app/cooperative/components/Hero/queries.ts
similarity index 84%
rename from frontend/src/queries/cooperative/hero.ts
rename to frontend/src/app/cooperative/components/Hero/queries.ts
index 6051c80..f54dd0f 100644
--- a/frontend/src/queries/cooperative/hero.ts
+++ b/frontend/src/app/cooperative/components/Hero/queries.ts
@@ -1,6 +1,6 @@
import { gql } from "graphql-request";
-import { ArrowLink } from "../navbar";
+import { IArrowLink } from "@/queries/utils";
export const heroQuery = gql`
{
@@ -26,7 +26,7 @@ export const heroQuery = gql`
}
`;
-export type HeroQueryType = {
+export type IHeroQuery = {
cooperativePageHero: {
header: string;
subtitle: string;
@@ -36,7 +36,7 @@ export type HeroQueryType = {
url: string;
};
}[];
- arrowLink: ArrowLink;
+ arrowLink: IArrowLink;
background: {
url: string;
};
diff --git a/frontend/src/app/cooperative/components/MemberSection/index.tsx b/frontend/src/app/cooperative/components/MemberSection/index.tsx
new file mode 100644
index 0000000..e0d6ce0
--- /dev/null
+++ b/frontend/src/app/cooperative/components/MemberSection/index.tsx
@@ -0,0 +1,31 @@
+import ExternalLink from "@/components/ExternalLink";
+import LearnMore from "@/components/LearnMore";
+import { request } from "@/utils/graphQLClient";
+
+import { memberQuery, IMemberQuery } from "./queries";
+
+const MemberSection: React.FC = async () => {
+ const { header, subtitle, learnMoreSection, secondaryHeader, arrowLink } =
+ await request<IMemberQuery>(memberQuery).then(
+ ({ cooperativePageMemberSection }) => cooperativePageMemberSection,
+ );
+ return (
+ <div className="bg-background-1 px-6 py-12 lg:px-32 lg:py-24">
+ <h1 className="mb-8 text-xl font-medium text-primary-text lg:text-3xl">
+ {header}
+ </h1>
+ <p className="mb-16 text-secondary-text lg:text-lg"> {subtitle} </p>
+ <LearnMore {...learnMoreSection} />
+ <h1
+ className={
+ "mb-8 mt-16 text-xl font-medium text-primary-text lg:text-3xl"
+ }
+ >
+ {secondaryHeader}
+ </h1>
+ <ExternalLink url={arrowLink.link.url} text={arrowLink.text} />
+ </div>
+ );
+};
+
+export default MemberSection;
diff --git a/frontend/src/queries/cooperative/member-section.ts b/frontend/src/app/cooperative/components/MemberSection/queries.ts
similarity index 67%
rename from frontend/src/queries/cooperative/member-section.ts
rename to frontend/src/app/cooperative/components/MemberSection/queries.ts
index 279adf5..b964b9f 100644
--- a/frontend/src/queries/cooperative/member-section.ts
+++ b/frontend/src/app/cooperative/components/MemberSection/queries.ts
@@ -1,16 +1,8 @@
import { gql } from "graphql-request";
-import { ArrowLink } from "../navbar";
+import { IArrowLink } from "@/queries/utils";
-export type CooperativeLearnMoreSection = {
- title: string;
- button: ArrowLink;
- background: {
- url: string;
- };
-};
-
-export const cooperativePageMemberQuery = gql`
+export const memberQuery = gql`
{
cooperativePageMemberSection {
header
@@ -38,12 +30,20 @@ export const cooperativePageMemberQuery = gql`
}
`;
-export type CooperativePageMemberQueryType = {
+export type ILearnMoreSection = {
+ title: string;
+ button: IArrowLink;
+ background: {
+ url: string;
+ };
+};
+
+export type IMemberQuery = {
cooperativePageMemberSection: {
header: string;
subtitle: string;
- learnMoreSection: CooperativeLearnMoreSection;
+ learnMoreSection: ILearnMoreSection;
secondaryHeader: string;
- arrowLink: ArrowLink;
+ arrowLink: IArrowLink;
};
};
diff --git a/frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx b/frontend/src/app/cooperative/components/Reports/DropdownContainer.tsx
similarity index 95%
rename from frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx
rename to frontend/src/app/cooperative/components/Reports/DropdownContainer.tsx
index 767259f..e0927a3 100644
--- a/frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx
+++ b/frontend/src/app/cooperative/components/Reports/DropdownContainer.tsx
@@ -3,12 +3,12 @@
import { useEffect, useMemo, useState } from "react";
import Dropdown from "@/components/Dropdown";
-import { Report } from "@/queries/cooperative/report-section";
+import { IReport } from "./queries";
import { Reports } from "./ReportCard";
interface IDropdownContainer
- extends Pick<Report, "yearDropdownLabel" | "monthDropdownLabel"> {
+ extends Pick<IReport, "yearDropdownLabel" | "monthDropdownLabel"> {
reports: Reports;
setSelectedReport: (report?: Reports[number]) => void;
}
diff --git a/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx b/frontend/src/app/cooperative/components/Reports/ReportCard.tsx
similarity index 96%
rename from frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
rename to frontend/src/app/cooperative/components/Reports/ReportCard.tsx
index a28a0b5..95c240c 100644
--- a/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
+++ b/frontend/src/app/cooperative/components/Reports/ReportCard.tsx
@@ -6,9 +6,9 @@ import clsx from "clsx";
import Image from "next/image";
import Button from "@/components/Button";
-import { Report } from "@/queries/cooperative/report-section";
import DropdownContainer from "./DropdownContainer";
+import { IReport } from "./queries";
export type Reports = {
file: { url: string };
@@ -16,7 +16,7 @@ export type Reports = {
year: number;
}[];
-interface IReportCard extends Report {
+interface IReportCard extends IReport {
reports: Reports;
}
const ReportCard: React.FC<IReportCard> = ({
diff --git a/frontend/src/components/Cooperative/ReportSection/index.tsx b/frontend/src/app/cooperative/components/Reports/index.tsx
similarity index 65%
rename from frontend/src/components/Cooperative/ReportSection/index.tsx
rename to frontend/src/app/cooperative/components/Reports/index.tsx
index e98cbac..64abd98 100644
--- a/frontend/src/components/Cooperative/ReportSection/index.tsx
+++ b/frontend/src/app/cooperative/components/Reports/index.tsx
@@ -2,18 +2,22 @@ import { useCallback } from "react";
import clsx from "clsx";
-import {
- CooperativePageReportQueryType,
- ReportType,
-} from "@/queries/cooperative/report-section";
+import { request } from "@/utils/graphQLClient";
+import { reportQuery, ReportType, IReportQuery } from "./queries";
import ReportCard from "./ReportCard";
-interface IReportSection {
- reportsData: CooperativePageReportQueryType;
+const Reports: React.FC = async () => {
+ const reportsData = await request<IReportQuery>(reportQuery);
+
+ return <ComponentContent {...{ reportsData }} />;
+};
+
+interface IComponentContent {
+ reportsData: IReportQuery;
}
-const ReportSection: React.FC<IReportSection> = ({ reportsData }) => {
+const ComponentContent: React.FC<IComponentContent> = ({ reportsData }) => {
const getReports = useCallback(
(reportType: ReportType) => {
switch (reportType) {
@@ -46,4 +50,4 @@ const ReportSection: React.FC<IReportSection> = ({ reportsData }) => {
);
};
-export default ReportSection;
+export default Reports;
diff --git a/frontend/src/queries/cooperative/report-section.ts b/frontend/src/app/cooperative/components/Reports/queries.ts
similarity index 88%
rename from frontend/src/queries/cooperative/report-section.ts
rename to frontend/src/app/cooperative/components/Reports/queries.ts
index 212a4ae..b8f4a0b 100644
--- a/frontend/src/queries/cooperative/report-section.ts
+++ b/frontend/src/app/cooperative/components/Reports/queries.ts
@@ -1,7 +1,8 @@
import { gql } from "graphql-request";
export type ReportType = "annual" | "risk" | "treasury";
-export type Report = {
+
+export type IReport = {
title: string;
subtitle: string;
reportType: ReportType;
@@ -14,7 +15,7 @@ export type Report = {
};
};
-export const cooperativePageReportQuery = gql`
+export const reportQuery = gql`
{
cooperativePageReportSection {
reports {
@@ -56,9 +57,9 @@ export const cooperativePageReportQuery = gql`
}
`;
-export type CooperativePageReportQueryType = {
+export type IReportQuery = {
cooperativePageReportSection: {
- reports: Report[];
+ reports: IReport[];
};
annualReports: {
diff --git a/frontend/src/app/cooperative/page.tsx b/frontend/src/app/cooperative/page.tsx
index dc49f6d..b2f6cbc 100644
--- a/frontend/src/app/cooperative/page.tsx
+++ b/frontend/src/app/cooperative/page.tsx
@@ -1,40 +1,21 @@
import type { Metadata } from "next";
-import Hero from "@/components/Cooperative/hero";
-import MemberSection from "@/components/Cooperative/MemberSection";
-import ReportSection from "@/components/Cooperative/ReportSection";
-import { heroQuery, HeroQueryType } from "@/queries/cooperative/hero";
-import {
- cooperativePageMemberQuery,
- CooperativePageMemberQueryType,
-} from "@/queries/cooperative/member-section";
-import {
- cooperativePageReportQuery,
- CooperativePageReportQueryType,
-} from "@/queries/cooperative/report-section";
-import { request } from "@/utils/graphQLClient";
import { getPageMetadata } from "@/utils/seo";
+import Hero from "./components/Hero";
+import MemberSection from "./components/MemberSection";
+import Reports from "./components/Reports";
+
export const generateMetadata = async (): Promise<Metadata> => {
return await getPageMetadata("cooperativePageSeo");
};
const Cooperative: React.FC = async () => {
- const heroData = await request<HeroQueryType>(heroQuery);
- const reportData = await request<CooperativePageReportQueryType>(
- cooperativePageReportQuery,
- );
- const memberSectionData = await request<CooperativePageMemberQueryType>(
- cooperativePageMemberQuery,
- );
-
return (
<>
- <Hero heroData={heroData.cooperativePageHero} />
- <ReportSection reportsData={reportData} />
- <MemberSection
- memberData={memberSectionData.cooperativePageMemberSection}
- />
+ <Hero />
+ <Reports />
+ <MemberSection />
</>
);
};
diff --git a/frontend/src/components/Earn/Hero.tsx b/frontend/src/app/earn/components/Hero/index.tsx
similarity index 83%
rename from frontend/src/components/Earn/Hero.tsx
rename to frontend/src/app/earn/components/Hero/index.tsx
index d4a26d5..1d0818a 100644
--- a/frontend/src/components/Earn/Hero.tsx
+++ b/frontend/src/app/earn/components/Hero/index.tsx
@@ -3,14 +3,16 @@ import React from "react";
import clsx from "clsx";
import Image from "next/image";
-import { HeroQueryType } from "@/queries/earn/hero";
+import { request } from "@/utils/graphQLClient";
-interface IHero {
- heroData: HeroQueryType;
-}
+import { heroQuery, IHeroQuery } from "./queries";
+
+const Hero: React.FC = async () => {
+ const { title, subtitle, statDisplay, background } =
+ await request<IHeroQuery>(heroQuery).then(
+ ({ earnPageHero }) => earnPageHero,
+ );
-const Hero: React.FC<IHero> = ({ heroData }) => {
- const { title, subtitle, statDisplay, background } = heroData.earnPageHero;
return (
<div className="relative px-6 pb-[218px] pt-44 lg:px-32 lg:pb-72 lg:pt-56">
<div className="space-y-8">
diff --git a/frontend/src/queries/earn/hero.ts b/frontend/src/app/earn/components/Hero/queries.ts
similarity index 94%
rename from frontend/src/queries/earn/hero.ts
rename to frontend/src/app/earn/components/Hero/queries.ts
index 1ce02c9..455141a 100644
--- a/frontend/src/queries/earn/hero.ts
+++ b/frontend/src/app/earn/components/Hero/queries.ts
@@ -20,7 +20,7 @@ export const heroQuery = gql`
}
`;
-export type HeroQueryType = {
+export type IHeroQuery = {
earnPageHero: {
title: string;
subtitle: string;
diff --git a/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx b/frontend/src/app/earn/components/TabSection/CuratorTabContent/KlerosScoutSection.tsx
similarity index 95%
rename from frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
rename to frontend/src/app/earn/components/TabSection/CuratorTabContent/KlerosScoutSection.tsx
index f8c875e..f4e6eb6 100644
--- a/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
+++ b/frontend/src/app/earn/components/TabSection/CuratorTabContent/KlerosScoutSection.tsx
@@ -4,7 +4,8 @@ import Image from "next/image";
import Button from "@/components/Button";
import CustomLink from "@/components/CustomLink";
import ExternalLink from "@/components/ExternalLink";
-import { KlerosScoutSection as IKlerosScoutSection } from "@/queries/earn/tabs-data";
+
+import { KlerosScoutSection as IKlerosScoutSection } from "../queries";
const KlerosScoutSection: React.FC<IKlerosScoutSection> = ({
header,
diff --git a/frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx b/frontend/src/app/earn/components/TabSection/CuratorTabContent/index.tsx
similarity index 94%
rename from frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx
rename to frontend/src/app/earn/components/TabSection/CuratorTabContent/index.tsx
index fe8beef..a81e44d 100644
--- a/frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx
+++ b/frontend/src/app/earn/components/TabSection/CuratorTabContent/index.tsx
@@ -1,6 +1,7 @@
import CtaCard from "@/components/CtaCard";
import ExternalLink from "@/components/ExternalLink";
-import { EarnPageBecomeACuratorTab } from "@/queries/earn/tabs-data";
+
+import { EarnPageBecomeACuratorTab } from "../queries";
import KlerosScoutSection from "./KlerosScoutSection";
diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx b/frontend/src/app/earn/components/TabSection/JurorTabContent/CourtsSection.tsx
similarity index 81%
rename from frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx
rename to frontend/src/app/earn/components/TabSection/JurorTabContent/CourtsSection.tsx
index 3e9f132..2b162af 100644
--- a/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx
+++ b/frontend/src/app/earn/components/TabSection/JurorTabContent/CourtsSection.tsx
@@ -4,13 +4,14 @@ import Image from "next/image";
import PlusIcon from "@/assets/svgs/icons/plus-icon.svg";
import CustomLink from "@/components/CustomLink";
import Tag from "@/components/Tag";
-import { Court } from "@/queries/earn/tabs-data";
-import { ArrowLink } from "@/queries/navbar";
+import { IArrowLink } from "@/queries/utils";
+
+import { Court } from "../queries";
interface ICourtsSection {
mostActiveCourtsHeader: string;
mostActiveCourts: Court[];
- courtsButton: ArrowLink;
+ courtsButton: IArrowLink;
}
const CourtsSection: React.FC<ICourtsSection> = ({
mostActiveCourtsHeader,
@@ -19,7 +20,12 @@ const CourtsSection: React.FC<ICourtsSection> = ({
}) => {
return (
<>
- <h2 className="text-lg font-medium text-primary-text lg:pt-4 lg:text-xl lg:font-normal">
+ <h2
+ className={clsx(
+ "text-lg font-medium text-primary-text",
+ "lg:pt-4 lg:text-xl lg:font-normal",
+ )}
+ >
{mostActiveCourtsHeader}
</h2>
<div className="flex flex-row flex-wrap items-center gap-4">
diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx b/frontend/src/app/earn/components/TabSection/JurorTabContent/EnterCourtSection.tsx
similarity index 92%
rename from frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
rename to frontend/src/app/earn/components/TabSection/JurorTabContent/EnterCourtSection.tsx
index acc1d70..24f568d 100644
--- a/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
+++ b/frontend/src/app/earn/components/TabSection/JurorTabContent/EnterCourtSection.tsx
@@ -5,7 +5,8 @@ import Image from "next/image";
import Button from "@/components/Button";
import CustomLink from "@/components/CustomLink";
import ExternalLink from "@/components/ExternalLink";
-import { EnterCourtSection as IEnterCourtSection } from "@/queries/earn/tabs-data";
+
+import { EnterCourtSection as IEnterCourtSection } from "../queries";
const EnterCourtSection: React.FC<IEnterCourtSection> = ({
button,
diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx b/frontend/src/app/earn/components/TabSection/JurorTabContent/index.tsx
similarity index 93%
rename from frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx
rename to frontend/src/app/earn/components/TabSection/JurorTabContent/index.tsx
index 8e3b455..efa43e3 100644
--- a/frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx
+++ b/frontend/src/app/earn/components/TabSection/JurorTabContent/index.tsx
@@ -1,5 +1,6 @@
import CtaCard from "@/components/CtaCard";
-import { EarnPageBecomeAJurorTab } from "@/queries/earn/tabs-data";
+
+import { EarnPageBecomeAJurorTab } from "../queries";
import CourtsSection from "./CourtsSection";
import EnterCourtSection from "./EnterCourtSection";
diff --git a/frontend/src/app/earn/components/TabSection/index.tsx b/frontend/src/app/earn/components/TabSection/index.tsx
new file mode 100644
index 0000000..b21a54b
--- /dev/null
+++ b/frontend/src/app/earn/components/TabSection/index.tsx
@@ -0,0 +1,30 @@
+import Tab from "@/components/Tab";
+import { request } from "@/utils/graphQLClient";
+
+import CuratorTabContent from "./CuratorTabContent";
+import JurorTabContent from "./JurorTabContent";
+import { tabsQuery, ITabsQuery } from "./queries";
+
+const TabSection: React.FC = async () => {
+ const { earnPageBecomeAJurorTabContent, earnPageBecomeACuratorTabContent } =
+ await request<ITabsQuery>(tabsQuery);
+ return (
+ <div className="bg-background-2 px-6 py-12 lg:px-32">
+ <Tab
+ items={[
+ {
+ text: earnPageBecomeAJurorTabContent.tabName,
+ children: <JurorTabContent {...earnPageBecomeAJurorTabContent} />,
+ },
+ {
+ text: earnPageBecomeACuratorTabContent.tabName,
+ children: (
+ <CuratorTabContent {...earnPageBecomeACuratorTabContent} />
+ ),
+ },
+ ]}
+ />
+ </div>
+ );
+};
+export default TabSection;
diff --git a/frontend/src/queries/earn/tabs-data.ts b/frontend/src/app/earn/components/TabSection/queries.ts
similarity index 89%
rename from frontend/src/queries/earn/tabs-data.ts
rename to frontend/src/app/earn/components/TabSection/queries.ts
index 402d811..0bcf384 100644
--- a/frontend/src/queries/earn/tabs-data.ts
+++ b/frontend/src/app/earn/components/TabSection/queries.ts
@@ -1,8 +1,8 @@
import { gql } from "graphql-request";
-import { ArrowLink } from "../navbar";
+import { IArrowLink } from "@/queries/utils";
-export const tabSectionQuery = gql`
+export const tabsQuery = gql`
{
earnPageBecomeAJurorTabContent {
tabName
@@ -116,13 +116,13 @@ export type Court = {
export type CtaCard = {
title: string;
description: string;
- arrowLink: ArrowLink;
+ arrowLink: IArrowLink;
icon: { url: string };
};
export type EnterCourtSection = {
- button: ArrowLink;
- arrowLink: ArrowLink;
+ button: IArrowLink;
+ arrowLink: IArrowLink;
background: { url: string };
};
@@ -130,9 +130,9 @@ export type KlerosScoutSection = {
header: string;
productName: string;
productIcon: { url: string };
- learnMoreButton: ArrowLink;
+ learnMoreButton: IArrowLink;
background: { url: string };
- arrowLinks: ArrowLink[];
+ arrowLinks: IArrowLink[];
};
export type EarnPageBecomeAJurorTab = {
@@ -143,7 +143,7 @@ export type EarnPageBecomeAJurorTab = {
enterCourtSection: EnterCourtSection;
mostActiveCourtsHeader: string;
mostActiveCourts: Court[];
- courtsButton: ArrowLink;
+ courtsButton: IArrowLink;
};
export type EarnPageBecomeACuratorTab = {
@@ -151,12 +151,12 @@ export type EarnPageBecomeACuratorTab = {
title: string;
description: string;
ctaCard: CtaCard[];
- arrowLink: ArrowLink;
+ arrowLink: IArrowLink;
scoutExplanation: string;
klerosScoutSection: KlerosScoutSection;
};
-export type TabSectionQueryType = {
+export type ITabsQuery = {
earnPageBecomeAJurorTabContent: EarnPageBecomeAJurorTab;
earnPageBecomeACuratorTabContent: EarnPageBecomeACuratorTab;
};
diff --git a/frontend/src/app/earn/page.tsx b/frontend/src/app/earn/page.tsx
index 6e5236d..e5d97c7 100644
--- a/frontend/src/app/earn/page.tsx
+++ b/frontend/src/app/earn/page.tsx
@@ -1,24 +1,19 @@
import type { Metadata } from "next";
-import Hero from "@/components/Earn/Hero";
-import TabSection from "@/components/Earn/TabSection";
-import { heroQuery, HeroQueryType } from "@/queries/earn/hero";
-import { tabSectionQuery, TabSectionQueryType } from "@/queries/earn/tabs-data";
-import { request } from "@/utils/graphQLClient";
import { getPageMetadata } from "@/utils/seo";
+import Hero from "./components/Hero";
+import TabSection from "./components/TabSection";
+
export const generateMetadata = async (): Promise<Metadata> => {
return await getPageMetadata("earnPageSeo");
};
const Earn: React.FC = async () => {
- const heroData = await request<HeroQueryType>(heroQuery);
- const tabsData = await request<TabSectionQueryType>(tabSectionQuery);
-
return (
<>
- <Hero {...{ heroData }} />
- <TabSection {...{ tabsData }} />
+ <Hero />
+ <TabSection />
</>
);
};
diff --git a/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx b/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx
deleted file mode 100644
index 2bf7464..0000000
--- a/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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-8 bg-background-1 px-6 py-12 lg:px-32 lg:py-24">
- <h1 className="text-xl font-medium text-primary-text lg:text-2xl">
- {klerosBadgesData.header}
- </h1>
- <p className="pb-4 text-secondary-text lg:pb-8 lg:text-lg">
- {klerosBadgesData.subtitle}
- </p>
- <div className="flex flex-row flex-wrap justify-center gap-8 lg:gap-y-16">
- {klerosBadgesData.imageDownloads.map((imageDownload) => {
- return (
- <ImageDownload
- key={imageDownload.image.url}
- {...{ imageDownload }}
- />
- );
- })}
- </div>
- </div>
- );
-};
-
-export default KlerosBadgesSection;
diff --git a/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx b/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx
deleted file mode 100644
index 3053bdd..0000000
--- a/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-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-8 bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
- <h1 className="text-xl font-medium text-primary-text lg:text-2xl">
- {klerosColorsData.header}
- </h1>
- <p className="pb-4 text-sm font-medium text-secondary-text lg:pb-8 lg:text-lg lg:font-normal">
- {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;
diff --git a/frontend/src/components/BrandAssets/KlerosFontsSection.tsx b/frontend/src/components/BrandAssets/KlerosFontsSection.tsx
deleted file mode 100644
index e1ed7b8..0000000
--- a/frontend/src/components/BrandAssets/KlerosFontsSection.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-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-8 bg-background-1 px-6 pb-12 lg:space-y-16 lg:px-32 lg:pb-24 lg:pt-8">
- <h1 className="text-xl font-medium text-primary-text lg:text-2xl">
- {klerosFontsData.header}
- </h1>
- <CtaCard
- className="max-w-[583px] [&>p]:mb-14 [&>p]:text-base"
- key={klerosFontsData.linkCard.title}
- title={klerosFontsData.linkCard.title}
- description={klerosFontsData.linkCard.subtitle}
- arrowLink={klerosFontsData.linkCard.link}
- />
- </div>
- );
-};
-
-export default KlerosFontsSection;
diff --git a/frontend/src/components/BrandAssets/KlerosLogoSection.tsx b/frontend/src/components/BrandAssets/KlerosLogoSection.tsx
deleted file mode 100644
index 7d4f292..0000000
--- a/frontend/src/components/BrandAssets/KlerosLogoSection.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-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-12 bg-background-1 px-6 py-12 lg:space-y-16 lg:px-32 lg:py-24">
- <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
- {klerosLogoData.header}
- </h1>
- <div className="flex flex-row flex-wrap justify-center gap-x-8 gap-y-12 lg:gap-y-16">
- {klerosLogoData.imageDownloads.map((imageDownload) => {
- return (
- <ImageDownload key={imageDownload.name} {...{ imageDownload }} />
- );
- })}
- </div>
- </div>
- );
-};
-
-export default KlerosLogoSection;
diff --git a/frontend/src/components/Community/CommunityCard.tsx b/frontend/src/components/Community/CommunityCard.tsx
deleted file mode 100644
index f8bc6cb..0000000
--- a/frontend/src/components/Community/CommunityCard.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import Image from "next/image";
-
-import { Community } from "@/queries/community/hero";
-
-import CustomLink from "../CustomLink";
-
-const CommunityCard: React.FC<Community> = ({ title, subtitle, icon, url }) => {
- return (
- <CustomLink href={url}>
- <div className="flex min-h-[326px] flex-col items-center justify-center rounded-2xl border border-stroke bg-background-2 hover:scale-[1.01]">
- <Image
- src={icon.url}
- alt={icon.name}
- width={76}
- height={76}
- className="object-contain"
- />
- <h2 className="mb-4 mt-2 text-center text-xl font-medium text-primary-text">
- {title}
- </h2>
- <label className="text-base text-secondary-text">{subtitle}</label>
- </div>
- </CustomLink>
- );
-};
-
-export default CommunityCard;
diff --git a/frontend/src/components/Cooperative/MemberSection/index.tsx b/frontend/src/components/Cooperative/MemberSection/index.tsx
deleted file mode 100644
index 67e8095..0000000
--- a/frontend/src/components/Cooperative/MemberSection/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import ExternalLink from "@/components/ExternalLink";
-import LearnMore from "@/components/LearnMore";
-import { CooperativePageMemberQueryType } from "@/queries/cooperative/member-section";
-
-interface IMemberSection {
- memberData: CooperativePageMemberQueryType["cooperativePageMemberSection"];
-}
-
-const MemberSection: React.FC<IMemberSection> = ({ memberData }) => {
- return (
- <div className="bg-background-1 px-6 py-12 lg:px-32 lg:py-24">
- <h1 className="mb-8 text-xl font-medium text-primary-text lg:text-3xl">
- {memberData.header}
- </h1>
- <p className="mb-16 text-secondary-text lg:text-lg">
- {memberData.subtitle}
- </p>
- <LearnMore {...memberData.learnMoreSection} />
- <h1
- className={
- "mb-8 mt-16 text-xl font-medium text-primary-text lg:text-3xl"
- }
- >
- {memberData.secondaryHeader}
- </h1>
- <ExternalLink
- url={memberData.arrowLink.link.url}
- text={memberData.arrowLink.text}
- />
- </div>
- );
-};
-
-export default MemberSection;
diff --git a/frontend/src/components/Earn/TabSection/index.tsx b/frontend/src/components/Earn/TabSection/index.tsx
deleted file mode 100644
index 6a24404..0000000
--- a/frontend/src/components/Earn/TabSection/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import Tab from "@/components/Tab";
-import { TabSectionQueryType } from "@/queries/earn/tabs-data";
-
-import CuratorTabContent from "./CuratorTabContent";
-import JurorTabContent from "./JurorTabContent";
-
-interface ITabSection {
- tabsData: TabSectionQueryType;
-}
-
-const TabSection: React.FC<ITabSection> = ({ tabsData }) => {
- return (
- <div className="bg-background-2 px-6 py-12 lg:px-32">
- <Tab
- items={[
- {
- text: tabsData.earnPageBecomeAJurorTabContent.tabName,
- children: (
- <JurorTabContent {...tabsData.earnPageBecomeAJurorTabContent} />
- ),
- },
- {
- text: tabsData.earnPageBecomeACuratorTabContent.tabName,
- children: (
- <CuratorTabContent
- {...tabsData.earnPageBecomeACuratorTabContent}
- />
- ),
- },
- ]}
- />
- </div>
- );
-};
-export default TabSection;
diff --git a/frontend/src/components/ImageDownload.tsx b/frontend/src/components/ImageDownload.tsx
index 1e571e2..b14800c 100644
--- a/frontend/src/components/ImageDownload.tsx
+++ b/frontend/src/components/ImageDownload.tsx
@@ -2,28 +2,37 @@ import React from "react";
import Image from "next/image";
-import { ImageDownloadType } from "@/queries/brand-assets/kleros-logo-section";
-
import DownloadButton from "./DownloadButton";
-interface IImageDownload {
- imageDownload: ImageDownloadType;
+export interface IImageDownload {
+ name: string;
+ image: {
+ url: string;
+ };
+ svgDownloadLink?: string;
+ pngDownloadLink?: string;
}
-const ImageDownload: React.FC<IImageDownload> = ({ imageDownload }) => {
+const ImageDownload: React.FC<IImageDownload> = ({
+ name,
+ image,
+ svgDownloadLink,
+ pngDownloadLink,
+}) => {
return (
<div className="flex flex-col gap-4">
- <Image src={imageDownload.image.url} alt="" width="378" height="200" />
+ <Image src={image.url} alt="" width="378" height="200" />
<div className="flex flex-row items-center gap-4">
- <span className="text-primary-text">{imageDownload.name}</span>
- {imageDownload.svgDownloadLink ? (
- <DownloadButton name="SVG" url={imageDownload.svgDownloadLink} />
+ <span className="text-primary-text">{name}</span>
+ {svgDownloadLink ? (
+ <DownloadButton name="SVG" url={svgDownloadLink} />
) : null}
- {imageDownload.pngDownloadLink ? (
- <DownloadButton name="PNG" url={imageDownload.pngDownloadLink} />
+ {pngDownloadLink ? (
+ <DownloadButton name="PNG" url={pngDownloadLink} />
) : null}
</div>
</div>
);
};
+
export default ImageDownload;
diff --git a/frontend/src/queries/utils.ts b/frontend/src/queries/utils.ts
new file mode 100644
index 0000000..74603ef
--- /dev/null
+++ b/frontend/src/queries/utils.ts
@@ -0,0 +1,58 @@
+export type ILink = {
+ name: string;
+ url: string;
+};
+
+export type ISolution = {
+ solution_name: string;
+ header_title?: string;
+ header_description?: string;
+ logo_svg: {
+ url: string;
+ };
+ url: string;
+};
+
+export type IAppsSection = {
+ solutions: ISolution[];
+ arrowLink: IArrowLink;
+};
+
+export type ISocial = {
+ name: string;
+ url: string;
+ icon: {
+ url: string;
+ };
+};
+
+export type IResourceLink = {
+ name: string;
+ url: string;
+};
+
+export type IResourceSection = {
+ title: string;
+ links: IResourceLink[];
+};
+
+export type INavLink = {
+ title: string;
+ path_name?: string | null;
+ is_dropdown: boolean;
+};
+
+export type INavbarButton = {
+ link: ILink;
+};
+
+export type IKlerosLogo = {
+ logo_svg: {
+ url: string;
+ };
+};
+
+export type IArrowLink = {
+ text: string;
+ link: ILink;
+};