Merge pull request #32 from kleros/feat/community-page

feat(frontend): community-page

Author: kemuru

frontend/src/components/Community/CommunitiesSection.tsx

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+
+import CommunityCard from "./CommunityCard";
+
+import { Community } from "@/queries/community/hero";
+
+const baseStyle = clsx(
+  "-translate-y-40 lg:-translate-y-44 grid grid-cols-1 lg:grid-cols-3 gap-6"
+);
+
+interface ICommunitiesSection {
+  communities: Community[];
+}
+
+const CommunitiesSection: React.FC<ICommunitiesSection> = ({ communities }) => {
+  const rowOneCommunities = communities.slice(0, 2);
+  const restCommunities = communities.slice(2);
+  return (
+    <div className="bg-background-2 w-full px-6 lg:px-32">
+      <div className={baseStyle}>
+        {rowOneCommunities.map((community) => (
+          <CommunityCard key={community.title} {...community} />
+        ))}
+      </div>
+      <div className={clsx(baseStyle,"mt-6")}>
+        {restCommunities.map((community) => (
+          <CommunityCard key={community.title} {...community} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CommunitiesSection;

frontend/src/components/Community/CommunityCard.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import { Community } from "@/queries/community/hero";
+
+const CommunityCard: React.FC<Community> = ({ title, subtitle, icon, url }) => {
+  return (
+    <Link href={url} target="_blank" rel="noreferrer noopener">
+      <div className="bg-background-2 min-h-[326px] flex flex-col items-center justify-center border border-stroke rounded-2xl hover:scale-[1.01]">
+        <Image
+          src={icon.url}
+          alt={icon.name}
+          width={76}
+          height={76}
+          className="object-contain"
+        />
+        <h2 className="text-xl text-primary-text font-medium text-center mb-4 mt-2">
+          {title}
+        </h2>
+        <label className="text-base text-secondary-text">{subtitle}</label>
+      </div>
+    </Link>
+  );
+};
+
+export default CommunityCard;

frontend/src/components/Community/hero.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import Button from "@/components/Button";
+import { HeroQueryType } from "@/queries/community/hero";
+
+interface IHero {
+  heroData: HeroQueryType["communityPageHero"];
+}
+
+const Hero: React.FC<IHero> = ({ heroData }) => {
+  const { header, subtitle, communityButtons, background } =
+    heroData;
+  return (
+    <div className="relative pt-52 pb-[277px] lg:pb-[331px] px-6 lg:px-32">
+      <div className="space-y-8">
+        <h1 className="text-3xl lg:text-4xl font-medium">{header}</h1>
+        <p className="text-lg">{subtitle}</p>
+        <div className="flex flex-wrap gap-6 items-center">
+          {communityButtons.map((button) => (
+            <Link
+              key={button.text}
+              href={button.link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button variant="secondary" className=" hover:!bg-primary-blue hover:!border-primary-blue hover:!text-background-2">
+                <span>{button.text}</span>
+              </Button>
+            </Link>
+          ))}
+        </div>
+      </div>
+      <Image
+        src={background.url}
+        alt="Hero Image Background"
+        fill
+        className="absolute top-0 left-0 h-full z-[-1] object-cover"
+      />
+    </div>
+  );
+};
+
+export default Hero;

frontend/src/pages/community.tsx

@@ -0,0 +1,45 @@
+import CommunitiesSection from "@/components/Community/CommunitiesSection";
+import Hero from "@/components/Community/hero";
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
+import { heroQuery, HeroQueryType } from "@/queries/community/hero";
+import { footerQuery, FooterQueryType } from "@/queries/footer";
+import { navbarQuery, NavbarQueryType } from "@/queries/navbar";
+import { graphQLClient } from "@/utils/graphQLClient";
+
+interface ICommunity {
+  navbarData: NavbarQueryType;
+  footerData: FooterQueryType;
+  heroData: HeroQueryType;
+}
+
+const ForBuilders: React.FC<ICommunity> = ({
+  footerData,
+  heroData,
+  navbarData,
+}) => {
+  return (
+    <div>
+      <Navbar {...{ navbarData }} />
+      <Hero heroData={heroData.communityPageHero} />
+      <CommunitiesSection communities={heroData.communities} />
+      <Footer {...{ footerData }} />
+    </div>
+  );
+};
+
+export const getStaticProps = async () => {
+  const navbarData = await graphQLClient.request<NavbarQueryType>(navbarQuery);
+  const footerData = await graphQLClient.request<FooterQueryType>(footerQuery);
+  const heroData = await graphQLClient.request<HeroQueryType>(heroQuery);
+
+  return {
+    props: {
+      navbarData,
+      footerData,
+      heroData: heroData,
+    },
+  };
+};
+
+export default ForBuilders;

frontend/src/queries/community/hero.ts

@@ -0,0 +1,55 @@
+import { gql } from "graphql-request";
+
+export type Community = {
+    title: string;
+    subtitle: string;
+    url: string;
+    icon: {
+        url: string;
+        name: string;
+    }
+};
+
+export const heroQuery = gql`
+  {
+    communityPageHero {
+      header
+      subtitle
+      communityButtons {
+        text
+        link {
+          url
+        }
+      }
+      background {
+        url
+      }
+    }
+    communities {
+      title
+      subtitle
+      url
+      icon {
+        url
+        name
+      }
+    }
+  }
+`;
+
+export type HeroQueryType = {
+  communityPageHero: {
+    header: string;
+    subtitle: string;
+    communityButtons: {
+      text: string;
+      link: {
+        url: string;
+      };
+    }[];
+    background: {
+      url: string;
+    };
+  };
+  communities: Community[]
+};