Merge pull request #29 from kleros/feat/pnk-token-page

feat(frontend): pnk-token-page

Author: kemuru

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 mb-4"
+      />
+    </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 hover:brightness-[1.2] ${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/AppsDropdownContent/Card.tsx

@@ -2,10 +2,9 @@ import Image from "next/image";
 import clsx from "clsx";
 import { Solution } from "@/queries/navbar";
 import Link from "next/link"
+import { hoverEffect } from "@/styles";
+
 
-const hoverEffect = clsx(
-  "hover:scale-[1.01] transform transition duration-100"
-);
 const cardBaseStyle = clsx(
   "bg-background-2 rounded-2xl border border-stroke text-wrap",
   "p-4 flex gap-4 h-full lg:items-start"

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/BuySection/Exchanges.tsx

@@ -0,0 +1,33 @@
+import { Exchange } from "@/queries/pnk-token/token-buy";
+import { hoverEffect } from "@/styles";
+import Image from "next/image";
+import Link from "next/link";
+
+interface IExchanges {
+  exchanges: Exchange[];
+}
+
+const Exchanges: React.FC<IExchanges> = ({ exchanges }) => {
+  return (
+    <div className="w-full flex flex-wrap justify-center gap-6 md:gap-16 lg:gap-20 mb-8 md:mb-0">
+      {exchanges.map((exchange) => (
+        <Link
+          href={exchange.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          key={exchange.name}
+        >
+          <Image
+            width={64}
+            height={64}
+            src={exchange.icon.url}
+            alt={exchange.name}
+            className={hoverEffect}
+          />
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default Exchanges;

frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx

@@ -0,0 +1,25 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import { Exchange } from "@/queries/pnk-token/token-buy";
+import clsx from "clsx";
+import { hoverEffect } from "@/styles";
+
+interface IFeaturedExchange {
+  exchange: Exchange;
+}
+const FeaturedExchange: React.FC<IFeaturedExchange> = ({ exchange }) => {
+  return (
+    <Link href={exchange.url} target="_blank" rel="noopener noreferrer">
+      <div className={clsx("h-40 flex flex-col gap-5 items-center justify-center border border-stroke rounded-2xl px-2 ", hoverEffect)}>
+        <div className="relative h-16 w-60">
+          <Image src={exchange.icon.url} alt={exchange.name} fill />
+        </div>
+
+        <p className="text-secondary-text">{exchange.name}</p>
+      </div>
+    </Link>
+  );
+};
+
+export default FeaturedExchange;

frontend/src/components/PNKToken/BuySection/index.tsx

@@ -0,0 +1,26 @@
+import Exchanges from "./Exchanges";
+import FeaturedExchange from "./FeaturedExchange";
+
+import { BuySectionQueryType } from "@/queries/pnk-token/token-buy";
+
+interface IBuySection {
+  buyData: BuySectionQueryType["pnkTokenPageBuySection"];
+}
+
+const BuySection: React.FC<IBuySection> = ({ buyData }) => {
+  return (
+    <div className="bg-background-2 py-12 lg:py-24 px-6 lg:px-32">
+      <h1 className="text-2xl lg:text-3xl text-primary-text font-medium mb-16">
+        {buyData.header}
+      </h1>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12">
+        {buyData.featuredExchanges.map((exchange) => (
+          <FeaturedExchange key={exchange.name} {...{ exchange }} />
+        ))}
+      </div>
+     <Exchanges exchanges={buyData.exchanges}/>
+    </div>
+  );
+};
+
+export default BuySection;