fonts

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"

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>

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>
+  );
+}

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} />

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;

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>
   );