From b9e57b7d1ab56507a25711a5347b55ed8f4e0de4 Mon Sep 17 00:00:00 2001
From: Tom Elliott <tomelliottnz@gmail.com>
Date: Sat, 31 May 2025 11:18:47 +1200
Subject: [PATCH] fonts

---
 package.json                                  |  2 +-
 .../components/Home/Hero/01-intro.tsx         |  9 +++--
 .../components/Home/Hero/02-data.tsx          | 37 +++++++++++++++++++
 .../components/Home/ScrollingNumbers.tsx      |  2 +-
 src/app/(website)/globals.css                 |  6 +--
 src/app/(website)/page.tsx                    |  6 ++-
 6 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 src/app/(website)/components/Home/Hero/02-data.tsx

diff --git a/package.json b/package.json
index 17c4be9..005c0a3 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
diff --git a/src/app/(website)/components/Home/Hero/01-intro.tsx b/src/app/(website)/components/Home/Hero/01-intro.tsx
index f384ae1..09e7381 100644
--- a/src/app/(website)/components/Home/Hero/01-intro.tsx
+++ b/src/app/(website)/components/Home/Hero/01-intro.tsx
@@ -34,10 +34,11 @@ export default function HeroIntro({
 
   const drawBeam = useCallback(() => {
     if (!windowSize) return;
+    const isSmall = windowSize[0] < 1124;
     const beam: [number, number][] = [
       [0, 1 - beamSize / 2], // modify over scroll
       [0.9, 0.1],
-      [0 + beamSize / 2, 1], // modify over scroll
+      [isSmall ? 0.7 : beamSize / 2, 1], // modify over scroll
       [0, 1],
     ];
 
@@ -69,10 +70,10 @@ export default function HeroIntro({
       </div>
 
       <div className="w-full h-full max-w-6xl p-12 grid grid-cols-2 gap-12 z-10">
-        <div className="absolute top-1/2 left-0 h-1/2 w-1/2 flex-1 flex flex-col justify-center px-[5vw] gap-8">
+        <div className="absolute top-1/2 left-0 h-1/2 w-2/3 lg:w-1/2 flex-1 flex flex-col justify-center px-[5vw] gap-8">
           <motion.h2
             style={{ opacity: scrollYProgress, y: titleY }}
-            className="text-5xl tracking-tight leading-tight"
+            className="text-3xl lg:text-5xl tracking-tight leading-tight font-display"
           >
             {title}
           </motion.h2>
@@ -84,7 +85,7 @@ export default function HeroIntro({
           >
             <RichText
               data={desc}
-              className="text-white text-2xl leading-tight"
+              className="text-white text-xl lg:text-2xl leading-tight"
             />
           </motion.div>
         </div>
diff --git a/src/app/(website)/components/Home/Hero/02-data.tsx b/src/app/(website)/components/Home/Hero/02-data.tsx
new file mode 100644
index 0000000..9e3ab0e
--- /dev/null
+++ b/src/app/(website)/components/Home/Hero/02-data.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { useScroll } from "motion/react";
+import { useRef } from "react";
+
+export default function HeroData() {
+  const containerRef = useRef(null);
+  const scrollYProgress = useScroll({
+    target: containerRef,
+    offset: ["start end", "end end"],
+  });
+  return (
+    <div
+      ref={containerRef}
+      className="bg-black flex flex-col items-center relative"
+    >
+      <div className="w-full h-screen max-w-6xl p-12 grid grid-cols-2 gap-12 z-10 items-center ">
+        <div className="flex items-center flex-col bg-accent-600 rounded aspect-video">
+          IMAGE
+        </div>
+        <div className="flex flex-col gap-4">
+          <h5 className="text-4xl font-display">Data design</h5>
+          <p className="text-xl">
+            We design research projects that are efficient, effective and
+            tailored to your information needs, and can advise on, supervise, or
+            review projects &mdash; including through a Māori research lens.
+          </p>
+        </div>
+      </div>
+      <div className="h-screen w-full"></div>
+      <div className="h-screen w-full"></div>
+      <div className="h-screen w-full"></div>
+      <div className="h-screen w-full"></div>
+      <div className="h-screen w-full"></div>
+    </div>
+  );
+}
diff --git a/src/app/(website)/components/Home/ScrollingNumbers.tsx b/src/app/(website)/components/Home/ScrollingNumbers.tsx
index 6a2efc3..686f15b 100644
--- a/src/app/(website)/components/Home/ScrollingNumbers.tsx
+++ b/src/app/(website)/components/Home/ScrollingNumbers.tsx
@@ -5,7 +5,7 @@ import { letters } from "./letters";
 
 export default function ScrollingNumbers({ numbers }: { numbers: string[][] }) {
   return (
-    <div className="absolute top-0 h-full w-full z-0 opacity-50 overflow-clip">
+    <div className="absolute top-0 h-full w-full z-0 opacity-50 overflow-clip ">
       <div className="h-full w-full flex gap-4 skew-24 scale-150">
         {numbers.map((col, i) => (
           <NumberCol col={col} key={i} />
diff --git a/src/app/(website)/globals.css b/src/app/(website)/globals.css
index 1973c74..ef4dcaa 100644
--- a/src/app/(website)/globals.css
+++ b/src/app/(website)/globals.css
@@ -1,11 +1,11 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@400;700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
 
 @import "tailwindcss";
 
 @theme {
   /* FONT FAMILIES */
-  --font-sans: Inter, sans;
-  --font-display: var(--font-sans);
+  --font-sans: "Work Sans", sans;
+  --font-display: "Inknut Antiqua";
 
   /* COLOURS */
   --color-accent-50: #fff1f2;
diff --git a/src/app/(website)/page.tsx b/src/app/(website)/page.tsx
index ad04e0e..42413cd 100644
--- a/src/app/(website)/page.tsx
+++ b/src/app/(website)/page.tsx
@@ -4,6 +4,7 @@ import ScrollingNumbers from "./components/Home/ScrollingNumbers";
 import { letters } from "./components/Home/letters";
 import HeroIntro from "./components/Home/Hero/01-intro";
 import SmoothScroll from "./components/SmoothScroll";
+import HeroData from "./components/Home/Hero/02-data";
 
 const randomNumbers = Array.from({ length: 50 }).map((i) =>
   Array.from({ length: 200 }).map(
@@ -22,12 +23,15 @@ export default async function Home() {
       <div className="text-white">
         <div className="h-screen pt-[var(--header-height)] flex flex-col items-center justify-end text-white pb-[10vh] relative">
           <ScrollingNumbers numbers={randomNumbers} />
-          <h1 className="text-8xl max-w-6xl z-10">{titleGroup.title}</h1>
+          <h1 className="text-4xl p-8 lg:text-7xl leading-tight max-w-6xl z-10 font-display">
+            {titleGroup.title}
+          </h1>
         </div>
         <HeroIntro
           title={heroGroup.heroTitle}
           desc={heroGroup.heroDescription}
         />
+        <HeroData />
       </div>
     </SmoothScroll>
   );