From 6fec76ffed79aadf279ed6364db03c75a6f97712 Mon Sep 17 00:00:00 2001
From: Tom Elliott <tomelliottnz@gmail.com>
Date: Mon, 2 Jun 2025 20:09:15 +1200
Subject: [PATCH] responsive collab/footer

---
 src/app/(website)/components/Footer/index.tsx | 39 ++++++++++---------
 .../components/Home/Collaboration/index.tsx   |  8 ++--
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/app/(website)/components/Footer/index.tsx b/src/app/(website)/components/Footer/index.tsx
index 98a828c..191c8ec 100644
--- a/src/app/(website)/components/Footer/index.tsx
+++ b/src/app/(website)/components/Footer/index.tsx
@@ -1,25 +1,28 @@
 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>
+    <footer className="p-12 lg:p-24 flex flex-col gap-12">
+      <div className="flex justify-between flex-col lg:flex-row">
+        <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 className="flex flex-col items-center lg:items-end max-w-xs mt-12 lg:mt-0 mx-auto lg:mx-0">
+          <p className="text-lg pb-12 lg:pb-48 text-center lg:text-right">
+            Analytics, research, and data visualisation that make a difference.
+          </p>
+          <div>IMAGE</div>
+        </div>
       </div>
+      <div className="text-sm">&copy; iNZight Analytics Ltd 2025</div>
     </footer>
   );
 }
diff --git a/src/app/(website)/components/Home/Collaboration/index.tsx b/src/app/(website)/components/Home/Collaboration/index.tsx
index 2c9fe9f..262a2c2 100644
--- a/src/app/(website)/components/Home/Collaboration/index.tsx
+++ b/src/app/(website)/components/Home/Collaboration/index.tsx
@@ -42,7 +42,7 @@ export default function Collboaration() {
   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="flex flex-col items-center h-screen w-full sticky top-0 py-12 lg:py-24 gap-6 lg:gap-12">
           <div className="max-w-6xl w-full px-12">
             <motion.h2
               className="w-full text-4xl font-display"
@@ -53,7 +53,7 @@ export default function Collboaration() {
           </div>
           <motion.div
             style={{}}
-            className="grid grid-cols-3 p-12 gap-8 flex-1 w-full max-w-6xl"
+            className="flex flex-col lg:grid lg:grid-cols-3 p-12 gap-16 flex-1 w-full max-w-6xl"
           >
             <div className="relative">
               <motion.h3
@@ -76,7 +76,7 @@ export default function Collboaration() {
               </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">
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 w-full h-full absolute">
                 {collaborators.aotearoa.map((org, i) => (
                   <Collaborator
                     name={org}
@@ -91,7 +91,7 @@ export default function Collboaration() {
                   />
                 ))}
               </div>
-              <div className="grid grid-cols-4 gap-4 w-full h-full absolute">
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 w-full h-full absolute">
                 {collaborators.international.map((org, i) => (
                   <Collaborator
                     name={org}