feat(frontend): pnk-token-page

Author: tractorss

frontend/.env.example

@@ -0,0 +1,2 @@
+STRAPI_TOKEN=
+STRAPI_URL=

frontend/.gitignore

@@ -26,6 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

frontend/src/components/CtaCard.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+
+import Divider from "./Divider";
+import ExternalLink from "./ExternalLink";
+
+export interface ICtaCard {
+  icon: {
+    url: string;
+  };
+  title: string;
+  description: string;
+  arrowLink: {
+    text: string;
+    link: {
+      url: string;
+    };
+  };
+}
+
+const CtaCard: React.FC<ICtaCard> = ({
+  icon,
+  title,
+  description,
+  arrowLink,
+}) => {
+  return (
+    <div className="flex flex-col items-start border border-stroke rounded-2xl p-6">
+      <Image
+        width={90}
+        height={90}
+        src={icon.url}
+        className="object-contain mb-4"
+        alt="Icon"
+      />
+      <h2 className="text-xl text-primary-text font-medium mb-6">{title}</h2>
+      <p className="text-lg text-secondary-text mb-6">{description}</p>
+      <Divider />
+      <ExternalLink
+        text={arrowLink.text}
+        url={arrowLink.link.url}
+        className=" mt-6"
+      />
+    </div>
+  );
+};
+
+export default CtaCard;

frontend/src/components/Divider.tsx

@@ -0,0 +1,4 @@
+const Divider: React.FC = () => (
+  <div className="w-full border border-stroke"></div>
+);
+export default Divider;

frontend/src/components/ExternalLink.tsx

@@ -0,0 +1,32 @@
+import React, { HTMLAttributes } from "react";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
+
+interface IExternalLink {
+  text: string;
+  url: string;
+  className?: HTMLAttributes<HTMLDivElement>["className"]
+}
+const ExternalLink: React.FC<IExternalLink> = ({ text, url, className }) => {
+  return (
+    <Link
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`flex gap-4 items-center ${className}`}
+    >
+      <span className="text-lg text-primary-blue text-center">{text}</span>
+      <Image
+        src={LinkArrow}
+        width="24"
+        height="24"
+        alt="Arrow link image"
+        className="inline"
+      />
+    </Link>
+  );
+};
+export default ExternalLink;

frontend/src/components/Navbar/index.tsx

@@ -52,8 +52,8 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {
         isScrolled ? "bg-background-2" : "bg-transparent"
       )}
       style={{
-        paddingLeft: responsiveSize(24, 256, 1024, 1920),
-        paddingRight: responsiveSize(24, 256, 1024, 1920),
+        paddingLeft: responsiveSize(24, 128, 1024, 1920),
+        paddingRight: responsiveSize(24, 128, 1024, 1920),
       }}
     >
       <Link href="/" className="flex items-center">

frontend/src/components/PNKToken/Hero.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import Button from "@/components/Button";
+import { HeroQueryType } from "@/queries/pnk-token/hero";
+
+interface IHero {
+  heroData: HeroQueryType["pnkTokenPageHero"];
+}
+
+const Hero: React.FC<IHero> = ({ heroData }) => {
+  return (
+    <div className="relative pt-32 lg:pt-52 pb-56 px-6 lg:px-32">
+      <div className="space-y-8">
+        <h1 className="text-3xl lg:text-4xl font-medium">{heroData.header}</h1>
+        <p className="text-lg">{heroData.subtitle}</p>
+        <div>
+          <Link
+            href={heroData.buyButton.link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button variant="secondary">
+              <span>{heroData.buyButton.text}</span>
+            </Button>
+          </Link>
+        </div>
+        <div className="flex flex-wrap gap-6 lg:gap-12 space-x-2">
+          {heroData.socials.map((social) => (
+            <Link
+              key={social.name}
+              href={social.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block relative h-6 min-w-32"
+            >
+              <Image
+                src={social.icon.url}
+                fill
+                alt="social link image"
+              />
+            </Link>
+          ))}
+        </div>
+      </div>
+      <Image
+        src={heroData.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/components/PNKToken/TokenNeedSection/index.tsx

@@ -0,0 +1,36 @@
+import CtaCard from "@/components/CtaCard";
+// import ExternalLink from "@/components/ExternalLink";
+import { TokenNeedSectionQueryType } from "@/queries/pnk-token/token-need";
+
+interface ITokenNeedSection {
+  tokenNeedData: TokenNeedSectionQueryType["pnkTokenPageNeedSection"];
+}
+
+const TokenNeedSection: React.FC<ITokenNeedSection> = ({ tokenNeedData }) => {
+    
+  return (
+    <div className="bg-background-1 py-12 lg:py-24 px-6 lg:px-32">
+      <h1 className="text-2xl lg:text-4xl text-primary-text font-medium mb-8">
+        {tokenNeedData.header}
+      </h1>
+      <p className="text-lg text-secondary-text mb-16">
+        {tokenNeedData.subtitle}
+      </p>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {tokenNeedData.card.map((card) => (
+          <CtaCard key={card.title} {...card} />
+        ))}
+      </div>
+      {/* TODO: fix type in PR#28 */}
+      {/* <div className="w-full items-center">
+        <ExternalLink
+          text={tokenNeedData.arrowLink.text}
+          url={tokenNeedData.arrowLink.link.url}
+          className="mt-12"
+        />
+      </div> */}
+    </div>
+  );
+};
+
+export default TokenNeedSection;

frontend/src/components/PNKToken/TokenomicsSection/Stat.tsx

@@ -0,0 +1,23 @@
+import { TokenStat } from "@/queries/pnk-token/tokenomics";
+
+const Stat: React.FC<TokenStat & { label: string }> = ({
+  label,
+  primaryValue,
+  secondaryValue,
+}) => {
+  return (
+    <div className="flex flex-col">
+      <label className="text-base text-primary-text">{label}</label>
+      <div className="flex flex-row gap-4">
+        <h2 className="text-primary-text font-medium text-xl lg:text-2xl">
+          {primaryValue}
+        </h2>
+        <h2 className="text-primary-blue text-xl lg:text-2xl">
+          {secondaryValue}
+        </h2>
+      </div>
+    </div>
+  );
+};
+
+export default Stat;

frontend/src/components/PNKToken/TokenomicsSection/TokenStatDisplay.tsx

@@ -0,0 +1,28 @@
+import { TokenStatDisplay as ITokenStatDisplay } from "@/queries/pnk-token/tokenomics";
+
+import Image from "next/image";
+
+import Stat from "./Stat";
+
+const TokenStatDisplay: React.FC<ITokenStatDisplay> = ({ icon, stats }) => {
+  return (
+    <div className="bg-background-1 md:w-fit flex flex-col gap-8 md:flex-row rounded-2xl md:rounded-full p-6 md:p-4 md:pr-8">
+      <Image
+        src={icon.url}
+        alt="icon"
+        width={90}
+        height={90}
+        className="object-contain"
+      />
+      {stats.map((stat) => (
+        <Stat
+          label={stat.key}
+          primaryValue={stat.primaryValue}
+          secondaryValue={stat.secondaryValue}
+          key={stat.key}
+        />
+      ))}
+    </div>
+  );
+};
+export default TokenStatDisplay;