responsive collab/footer

This commit is contained in:
Tom Elliott 2025-06-02 20:09:15 +12:00
parent 762a16a5f7
commit 6fec76ffed
2 changed files with 25 additions and 22 deletions

View File

@ -1,25 +1,28 @@
export default function Footer() { export default function Footer() {
return ( return (
<footer className="p-24 flex justify-between"> <footer className="p-12 lg:p-24 flex flex-col gap-12">
<div className="flex text-lg gap-24"> <div className="flex justify-between flex-col lg:flex-row">
<ol> <div className="flex text-lg gap-24">
<li>About</li> <ol>
<li>News</li> <li>About</li>
<li>Projects</li> <li>News</li>
<li>Apps</li> <li>Projects</li>
</ol> <li>Apps</li>
<ol> </ol>
<li>Cool stuff</li> <ol>
<li>Horizon Europe</li> <li>Cool stuff</li>
</ol> <li>Horizon Europe</li>
</div> </ol>
</div>
<div className="flex flex-col items-end max-w-xs"> <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-48"> <p className="text-lg pb-12 lg:pb-48 text-center lg:text-right">
Analytics, research, and data visualisation that make a difference. Analytics, research, and data visualisation that make a difference.
</p> </p>
<div>IMAGE</div> <div>IMAGE</div>
</div>
</div> </div>
<div className="text-sm">&copy; iNZight Analytics Ltd 2025</div>
</footer> </footer>
); );
} }

View File

@ -42,7 +42,7 @@ export default function Collboaration() {
return ( return (
<section ref={containerRef} className=""> <section ref={containerRef} className="">
<div className="flex flex-col h-[200vh]"> <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"> <div className="max-w-6xl w-full px-12">
<motion.h2 <motion.h2
className="w-full text-4xl font-display" className="w-full text-4xl font-display"
@ -53,7 +53,7 @@ export default function Collboaration() {
</div> </div>
<motion.div <motion.div
style={{}} 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"> <div className="relative">
<motion.h3 <motion.h3
@ -76,7 +76,7 @@ export default function Collboaration() {
</motion.h3> </motion.h3>
</div> </div>
<div className="w-full relative col-span-2 h-full"> <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) => ( {collaborators.aotearoa.map((org, i) => (
<Collaborator <Collaborator
name={org} name={org}
@ -91,7 +91,7 @@ export default function Collboaration() {
/> />
))} ))}
</div> </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) => ( {collaborators.international.map((org, i) => (
<Collaborator <Collaborator
name={org} name={org}