Feat(frontend): add home hero

frontend/next.config.mjs

@@ -1,6 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "delicate-eggs-595f0e58b8.media.strapiapp.com"
+      }
+    ]
+  }
 };
 
 export default nextConfig;

frontend/src/components/Button.tsx

@@ -2,19 +2,38 @@ import React from "react";
 
 import clsx from "clsx";
 
+const baseStyle = clsx("px-8 py-2 rounded-full transition duration-75");
+
+const primaryStyle = clsx(
+  baseStyle,
+  "bg-primary-blue",
+  "hover:bg-primary-blue/90"
+);
+
+const secondaryStyle = clsx(
+  baseStyle,
+  "bg-transparent border-2 border-white",
+  "hover:bg-white/10"
+);
+
+
 interface IButton {
   children: React.ReactNode;
   onClick?: () => void;
+  variant?: "primary" | "secondary";
   className?: string;
 }
 
-const Button: React.FC<IButton> = ({ children, onClick, className }) => (
+const Button: React.FC<IButton> = ({
+  children,
+  onClick,
+  className,
+  variant = "primary"
+}) => (
   <button
     className={
-      clsx(
-        "bg-primary-blue py-2 px-8 rounded-full",
-        "hover:bg-primary-blue/90 transition duration-75",
-        className)}
+        clsx(variant === "primary" ? primaryStyle : secondaryStyle, className)
+      }
     {...{ onClick }}
   >
     {children}

frontend/src/components/home/Hero.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import LinkArrow from "@/assets/svgs/icons/link-arrow.svg"
+import Button from "@/components/Button";
+import { HeroQueryType } from "@/queries/home/hero"
+
+interface IHero {
+  heroData: HeroQueryType["homePageHero"];
+}
+
+const Hero: React.FC<IHero> = ({ heroData }) => {
+  return (
+    <div className="relative h-[835px] pt-44 pb-28 px-6">
+      <div className="space-y-6">
+        <h1 className="text-3xl w-min">
+          {heroData.title}
+        </h1>
+        <p className="text-lg">
+          {heroData.subtitle}
+        </p>
+        <div>
+          <Link
+            href={heroData.primaryButton.link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button>
+              <span className="text-background-2">
+                {heroData.primaryButton.text}
+              </span>
+            </Button>
+          </Link>
+        </div>
+        <div>
+          <Link
+            href={heroData.secondaryButton.link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button variant="secondary">
+              <span>{heroData.secondaryButton.text}</span>
+            </Button>
+          </Link>
+        </div>
+        <div>
+          <Link
+            href={heroData.arrowLink.link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="mr-4">
+              {heroData.arrowLink.text}
+            </span>
+            <Image
+              src={LinkArrow}
+              width="24"
+              height="24"
+              alt="Arrow link image"
+              className="inline"
+            />
+          </Link>
+        </div>
+      </div>
+      <Image
+        src={heroData.background.url}
+        alt="Hero Image Background"
+        width="1440"
+        height="835"
+        className="absolute top-0 h-full object-cover object-left left-0 z-[-1]"
+      />
+    </div>
+  )
+}
+
+export default Hero;

frontend/src/pages/index.tsx

@@ -1,17 +1,21 @@
 import Footer from "@/components/Footer";
+import Hero from "@/components/home/Hero";
 import TrustedBy from "@/components/TrustedBy";
 import { footerQuery, FooterQueryType } from "@/queries/footer";
+import { heroQuery, HeroQueryType } from "@/queries/home/hero";
 import { partnersQuery, PartnersQueryType } from "@/queries/partners";
 import { graphQLClient } from "@/utils/graphQLClient";
 
 interface IHome {
   partnersData: PartnersQueryType;
   footerData: FooterQueryType;
+  heroData: HeroQueryType["homePageHero"];
 }
 
-const Home: React.FC<IHome> = ({ partnersData, footerData }) => {
+const Home: React.FC<IHome> = ({ partnersData, footerData, heroData }) => {
   return (
     <div>
+      <Hero {...{ heroData }} />
       <TrustedBy {...{ partnersData }}/>
       <Footer {...{ footerData }}/>
     </div>
@@ -23,10 +27,12 @@ export const getStaticProps = async () => {
     partnersQuery
   );
   const footerData = await graphQLClient.request<FooterQueryType>(footerQuery);
+  const heroData = await graphQLClient.request<HeroQueryType>(heroQuery);
   return {
     props: {
       partnersData,
       footerData,
+      heroData: heroData.homePageHero,
     }
   };
 };

frontend/src/queries/home/hero.tsx

@@ -0,0 +1,59 @@
+import { gql } from "graphql-request";
+
+export const heroQuery = gql`
+  {
+    homePageHero {
+      title
+      subtitle
+      primaryButton {
+        text
+        link {
+          url
+        }
+      }
+      secondaryButton {
+        text
+        link {
+          url
+        }
+      }
+      arrowLink {
+        text
+        link {
+          url
+        }
+      }
+      background {
+        url
+      }
+    }
+  }
+`;
+
+export type HeroQueryType = {
+  homePageHero: {
+    title: string,
+    subtitle: string,
+    primaryButton: {
+      text: string,
+      link: {
+        url: string,
+      },
+    },
+    secondaryButton: {
+      text: string,
+      link: {
+        url: string,
+      },
+    },
+    arrowLink: {
+      text: string,
+      link: {
+        url: string,
+      },
+    },
+    background: {
+      url: string,
+    },
+  },
+};

frontend/tailwind.config.ts

@@ -7,6 +7,14 @@ const config: Config = {
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
+    fontSize: {
+      base: ["1rem", "1.188rem"],
+      lg: ["1.5rem", "1.813rem"],
+      xl: ["2rem", "2.375rem"],
+      '2xl': ["3rem", "3.625rem"],
+      '3xl': ["4rem", "4.813rem"],
+      '4xl': ["6rem", "7.188rem"],
+    },
     extend: {
       colors: {
         background: "var(--background)",