collab, footer

src/app/(website)/components/Footer/index.tsx

@@ -0,0 +1,25 @@
+export default function Footer() {
+  return (
+    <footer className="p-24 flex justify-between">
+      <div className="flex text-lg gap-24">
+        <ol>
+          <li>About</li>
+          <li>News</li>
+          <li>Projects</li>
+          <li>Apps</li>
+        </ol>
+        <ol>
+          <li>Cool stuff</li>
+          <li>Horizon Europe</li>
+        </ol>
+      </div>
+
+      <div className="flex flex-col items-end max-w-xs">
+        <p className="text-lg pb-48">
+          Analytics, research, and data visualisation that make a difference.
+        </p>
+        <div>IMAGE</div>
+      </div>
+    </footer>
+  );
+}

src/app/(website)/components/Home/Collaboration/index.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { motion, MotionValue, useScroll, useTransform } from "motion/react";
+import Link from "next/link";
+import { useEffect, useRef } from "react";
+
+const collaborators = {
+  aotearoa: Array.from({ length: 16 }).map((x, i) => `Organisation ${i}`),
+  international: Array.from({ length: 8 }).map((x, i) => `Organisation ${i}`),
+};
+
+export default function Collboaration() {
+  const containerRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start end", "end end"],
+  });
+
+  const titleOpacity = useTransform(scrollYProgress, [0.15, 0.25], [0, 1]);
+  const titleY = useTransform(scrollYProgress, [0.15, 0.25], [-40, 0]);
+
+  const aotearoaOpacity = useTransform(
+    scrollYProgress,
+    [0.25, 0.3, 0.6, 0.7],
+    [0, 1, 1, 0]
+  );
+  const aotearoaY = useTransform(
+    scrollYProgress,
+    [0.25, 0.3, 0.6, 0.7],
+    [20, 0, 0, -20]
+  );
+
+  const internationalOpacity = useTransform(
+    scrollYProgress,
+    [0.6, 0.7],
+    [0, 1]
+  );
+  const internationalY = useTransform(scrollYProgress, [0.6, 0.7], [20, 0]);
+
+  const n = [collaborators.aotearoa.length, collaborators.international.length];
+
+  return (
+    <section ref={containerRef} className="">
+      <div className="flex flex-col h-[200vh]">
+        <div className="flex flex-col items-center h-screen w-full sticky top-0 py-24 gap-12">
+          <div className="max-w-6xl w-full px-12">
+            <motion.h2
+              className="w-full text-4xl font-display"
+              style={{ opacity: titleOpacity, y: titleY }}
+            >
+              We have worked with &hellip;
+            </motion.h2>
+          </div>
+          <motion.div
+            style={{}}
+            className="grid grid-cols-3 p-12 gap-8 flex-1 w-full max-w-6xl"
+          >
+            <div className="relative">
+              <motion.h3
+                className="text-3xl absolute font-display text-accent-700"
+                style={{
+                  y: aotearoaY,
+                  opacity: aotearoaOpacity,
+                }}
+              >
+                Aotearoa
+              </motion.h3>
+              <motion.h3
+                className="text-3xl absolute font-display text-accent-700"
+                style={{
+                  y: internationalY,
+                  opacity: internationalOpacity,
+                }}
+              >
+                International
+              </motion.h3>
+            </div>
+            <div className="w-full relative col-span-2 h-full">
+              <div className="grid grid-cols-4 gap-4 w-full h-full absolute">
+                {collaborators.aotearoa.map((org, i) => (
+                  <Collaborator
+                    name={org}
+                    progress={scrollYProgress}
+                    range={[
+                      0.3 + (i / n[0]) * 0.1,
+                      0.4 + (i / n[0]) * 0.1,
+                      0.6,
+                      0.7,
+                    ]}
+                    key={i}
+                  />
+                ))}
+              </div>
+              <div className="grid grid-cols-4 gap-4 w-full h-full absolute">
+                {collaborators.international.map((org, i) => (
+                  <Collaborator
+                    name={org}
+                    progress={scrollYProgress}
+                    range={[0.65, 0.75, 1, 2]}
+                    key={i}
+                  />
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+
+      <div className="w-full flex flex-col items-center justify-center">
+        <div className=" h-1/2 bg-white text-accent-600 w-full flex flex-col items-center justify-center gap-8 py-24">
+          <h4 className="text-4xl font-display">Want to collaborate?</h4>
+          <Link href="">
+            <p className="text-xl font-bold">Get in touch &gt;</p>
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const Collaborator = ({
+  name,
+  progress,
+  range,
+}: {
+  name: string;
+  progress: MotionValue<number>;
+  range: [number, number, number, number];
+}) => {
+  const opacity = useTransform(progress, range, [0, 1, 1, 0]);
+  return (
+    <motion.div
+      className="w-full h-full bg-white text-black flex justify-center items-center"
+      style={{
+        opacity,
+      }}
+    >
+      {name}
+    </motion.div>
+  );
+};

src/app/(website)/components/Home/Projects/index.tsx

@@ -132,7 +132,7 @@ export default function Projects({
         ))}
       </div>
 
-      <div className="w-full flex flex-col items-center justify-center pb-48">
+      <div className="w-full flex flex-col items-center justify-center">
         <div className=" h-1/2 bg-white text-accent-600 w-full flex flex-col items-center justify-center gap-8 py-24">
           <h4 className="text-4xl font-display">Have a project idea?</h4>
           <Link href="">

src/app/(website)/page.tsx

@@ -7,6 +7,8 @@ import HeroData from "./components/Home/Hero/02-data";
 import bgImage from "./bg.jpg";
 import Image from "next/image";
 import Projects from "./components/Home/Projects";
+import Collboaration from "./components/Home/Collaboration";
+import Footer from "./components/Footer";
 
 export default async function Home() {
   const payload = await getPayload({ config });
@@ -46,6 +48,8 @@ export default async function Home() {
         />
         <HeroData items={heroGroup.heroItems} />
         <Projects text={projectsText} projects={projects.docs} />
+        <Collboaration />
+        <Footer />
       </div>
     </SmoothScroll>
   );