feat: graphql client with fetches for initial pages

components/Current/Aside.tsx

@@ -0,0 +1,9 @@
+import type { AsideProps } from "@/types/components/current/aside"
+
+export default function Aside({ }: AsideProps) {
+  return (
+    <>
+
+    </>
+  )
+}

components/Current/Blocks.tsx

@@ -0,0 +1,34 @@
+import List from "./Blocks/List"
+import Preamble from "./Blocks/Preamble"
+import Puffs from "./Blocks/Puffs"
+import Text from "./Blocks/Text"
+
+import { BlocksTypenameEnum } from "@/types/requests/utils/typename"
+import type { BlocksProps } from "@/types/components/current/blocks"
+
+export default function Blocks({ blocks }: BlocksProps) {
+  if (!blocks?.length) {
+    return null
+  }
+
+  return (
+    <>
+      {blocks.map(block => {
+        const type = block.__typename
+        switch (type) {
+          case BlocksTypenameEnum.CurrentBlocksPageBlocksList:
+            return <List key={block.__typename} {...block} />
+          case BlocksTypenameEnum.CurrentBlocksPageBlocksPreamble:
+            return <Preamble key={block.__typename} {...block} />
+          case BlocksTypenameEnum.CurrentBlocksPageBlocksPuffs:
+            return <Puffs key={block.__typename} {...block} />
+          case BlocksTypenameEnum.CurrentBlocksPageBlocksText:
+            return <Text key={block.__typename} {...block} />
+          default:
+            console.log(`Unknown type: (${type})`)
+            return null
+        }
+      })}
+    </>
+  )
+}

components/Current/Blocks/List.tsx

@@ -0,0 +1,7 @@
+export default function List() {
+  return (
+    <>
+
+    </>
+  )
+}

components/Current/Blocks/Preamble.tsx

@@ -0,0 +1,7 @@
+export default function Preamble() {
+  return (
+    <>
+
+    </>
+  )
+}

components/Current/Blocks/Puffs.tsx

@@ -0,0 +1,7 @@
+export default function Puffs() {
+  return (
+    <>
+
+    </>
+  )
+}

components/Current/Blocks/Text.tsx

@@ -0,0 +1,32 @@
+import { rteType } from "@/types/rte";
+
+import Image from "next/image";
+
+import type { TextProps } from "@/types/components/current/blocks/text"
+
+export default function Text({ text }: TextProps) {
+
+  return (
+    <>
+      <pre>{JSON.stringify(text.content.json, null, 2)}</pre>
+      {text.content.json.children.map(block => {
+        switch (block.type) {
+          case rteType.reference: {
+            if (block.attrs.type === rteType.asset) {
+              // return (
+              //   <Image
+              //     alt={block.attrs.alt}
+              //     src={block.attrs["asset-link"]}
+              //   />
+              // )
+            }
+
+            return null
+          }
+          default:
+            break;
+        }
+      })}
+    </>
+  )
+}

components/Current/Hero/hero.module.css

@@ -0,0 +1,4 @@
+.heroImage {
+  object-fit: cover;
+  width: 100%;
+}

components/Current/Hero/index.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import Image from "next/image"
+
+import styles from "./hero.module.css"
+
+import type { HeroProps } from "@/types/components/current/hero"
+
+export default function Hero({ images }: HeroProps) {
+  return (
+    <div className="hero-content-overlay hero-content-widget">
+      <div className="hero-content-overlay__img-container">
+        <div className="hero-fixed hero-fixed--deemphasized" style={{ marginTop: "0px" }}>
+          <div className="hero" style={{ top: "113px" }}>
+            <div className="hero__img-container">
+              <div id="full-width-slider" className="royalSlider royalSlider--hero rsDefault rsHor rsFade rsWithBullets" data-js="hero-slider" tabIndex={0} aria-label="Carousel. Change slides with keyboard left and right arrows." style={{ touchAction: "pan-y" }}>
+                <div className="rsOverflow" style={{ width: "1555px", height: "650px" }}>
+                  <div className="rsContainer">
+                    <div style={{ zIndex: 0 }} className="rsSlide ">
+                      <picture style={{ visibility: "visible", opacity: 1, transition: "opacity 400ms ease-in-out 0s" }}>
+                        {images.map(({ node: image }) => (
+                          <Image
+                            alt={image.title}
+                            className={`rsImg-x slider-plchldr ${styles.heroImage}`}
+                            data-aspectratio="1.50"
+                            height={image.dimension.height}
+                            key={image.title}
+                            src={image.url}
+                            unoptimized
+                            width={image.dimension.width}
+                          />
+                        ))}
+                      </picture>
+                    </div>
+                  </div>
+                  <div className="rsArrow rsArrowLeft" style={{ display: "none" }}>
+                    <div className="rsArrowIcn" tabIndex={0} />
+                  </div>
+                  <div className="rsArrow rsArrowRight" style={{ display: "none" }}>
+                    <div className="rsArrowIcn" tabIndex={0} />
+                  </div>
+                </div>
+                <div className="rsNav rsBullets">
+                  <div className="rsNavItem rsBullet rsNavSelected">
+                    <span></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}