feat: styling header

EnAccess · Mar 20, 2024 · 1d4d644 · 1d4d644
1 parent 5025f7f
commit 1d4d644
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 73 deletions.
diff --git a/src/components/cards/LevelCard.tsx b/src/components/cards/LevelCard.tsx
@@ -18,7 +18,7 @@ const LevelCard = ({
   });
   return (
     <button
-      className={`${bgColor} rounded-lg border w-48 flex flex-col items-center justify-center h-16 cursor-pointer`}
+      className={`${bgColor} rounded-lg border w-44 flex flex-col items-center justify-center h-16 cursor-pointer`}
     >
       <p className="text-center text-base font-semibold">{title}</p>
       <p className="text-center text-xs font-medium">{description}</p>

diff --git a/src/components/cards/ResourceTypeCard.tsx b/src/components/cards/ResourceTypeCard.tsx
@@ -8,11 +8,11 @@ const ResourceTypeCard = ({ text, link }: { text: string; link: string }) => {
   return (
     <Link
       href={link}
-      className={`flex items-center h-9 py-2 justify-center rounded-lg border-2 border-black bg-[#b3b3b3] font-semibold text-xs place-contetext-center cursor-pointer ${
+      className={`flex items-stretch justify-center rounded-lg border-2 border-black bg-[#b3b3b3] font-semibold text-xs place-contetext-center cursor-pointer ${
         pathname === link ? "bg-black text-white" : ""
       }`}
     >
-      {text}
+      <p className="w-42 text-center p-6">{text}</p>
     </Link>
   );
 };

diff --git a/src/components/cards/StepCard.tsx b/src/components/cards/StepCard.tsx
@@ -2,8 +2,8 @@ import React from "react";
 
 const StepCard = ({ text }: { text: string }) => {
   return (
-    <button className="h-28 w-32 bg-[#f8cecc] border rounded-md border-[#b85450] hover:border-purple-500 cursor-pointer flex justify-center items-center">
-      <p className="text-md text-center font-bold  leading-tight">{text}</p>
+    <button className="h-32 w-36 bg-[#f8cecc] border rounded-md border-[#b85450] hover:border-purple-500 cursor-pointer flex justify-center items-center">
+      <p className="text-lg text-center font-bold  leading-tight">{text}</p>
     </button>
   );
 };

diff --git a/src/components/header/JourneySection.tsx b/src/components/header/JourneySection.tsx
@@ -10,7 +10,7 @@ const JourneySection = () => {
       </p>
       <div className="h-full flex items-center -my-8">
         <div className="">
-          <div className="flex justify-center items-center">
+          <div className="flex justify-center items-center my-2">
             <Card text="Design" />
             <ForwardArrow />
             <Card text="Stakeholder Mapping" />
@@ -22,7 +22,7 @@ const JourneySection = () => {
             <Card text="M&E" />
           </div>
 
-          <div className="mt-6 bg-gray-400 text-white flex rounded-lg justify-around  items-center min-h-10">
+          <div className="m-2 p-3 bg-gray-400 text-white flex rounded-lg justify-around text-xl  items-center">
             <p className="text-md font-semibold">Early Concept</p>
             <p className="text-md font-semibold">{"->"}</p>
             <p className="text-md font-semibold">Software Development</p>

diff --git a/src/components/header/PracticeSection.tsx b/src/components/header/PracticeSection.tsx
@@ -4,73 +4,79 @@ import LevelCard from "../cards/LevelCard";
 
 const PracticeSection = ({ title }: { title: string }) => {
   return (
-    <div className="">
+    <div className="w-1/3">
       <p className="text-center text-gray-500 text-xl font-bold mb-3">
         {title}
       </p>
-      <div>
-        <div className="flex justify-center items-end w-fit gap-x-4">
-          <LevelCard
-            level={0}
-            title="Level 0"
-            description="Contextually Disconnected Design"
-          />
-          <p className="text-center text-xs max-w-48">
-            The minimum co-design method where community members or individuals
-            are consulted as customers on their needs, aspirations and desires,
-            including working within the existing socio-cultural, environmental,
-            and financial systems of focus communities. Often involves designing
-            for or on behalf of communities
-          </p>
-          <LevelCard
-            level={2}
-            title="Level 2"
-            description="Current Best Practice"
-          />
+      <div className="h-full flex items-center">
+        <div className="h-[20rem] -mt-4">
+          <div className="flex justify-center items-end w-fit gap-x-4">
+            <LevelCard
+              level={0}
+              title="Level 0"
+              description="Contextually Disconnected Design"
+            />
+            <p className="text-center text-xs max-w-52 leading-tight">
+              The minimum co-design method where community members or
+              individuals are consulted as customers on their needs, aspirations
+              and desires, including working within the existing socio-cultural,
+              environmental, and financial systems of focus communities. Often
+              involves designing for or on behalf of communities
+            </p>
+            <LevelCard
+              level={2}
+              title="Level 2"
+              description="Current Best Practice"
+            />
 
-          <p className="text-center text-xs max-w-48">
-            Engaging in transformational knowledge exchanges that are led by
-            affected and at risk individuals and communities in order to
-            dismantle existing power structures that constrain co-design
-            processes
-          </p>
-        </div>
-
-        <div className="grid grid-cols-4 relative">
-          <div className="flex justify-center ">
-            <Line />
+            <p className="text-center text-xs max-w-52 leading-tight">
+              Engaging in transformational knowledge exchanges that are led by
+              affected and at risk individuals and communities in order to
+              dismantle existing power structures that constrain co-design
+              processes
+            </p>
           </div>
-          <div className="flex justify-center ">
-            <Line />
-          </div>
-          <div className="flex justify-center ">
-            <Line />
+
+          <div className="grid grid-cols-4 relative">
+            <div className="flex justify-center ">
+              <Line />
+            </div>
+            <div className="flex justify-center ">
+              <Line />
+            </div>
+            <div className="flex justify-center ">
+              <Line />
+            </div>
+            <div className="flex justify-center ">
+              <Line />
+            </div>
+
+            <div className="h-[10px] w-full bg-[#dc2626] absolute top-1/2"></div>
           </div>
-          <div className="flex justify-center ">
-            <Line />
+          <div className="flex justify-between items-start w-fit- gap-x-4-">
+            <p className="text-center text-xs max-w-52 leading-tight">
+              These methods result in design without a current contextual
+              understanding of the community, designing systems that reinforce
+              cultural tropes and knowledge hierarchies, or in short design, for
+              a theoretically imagined community.
+            </p>
+            <LevelCard
+              level={1}
+              title="Level 1"
+              description="Basic Principle"
+            />
+            <p className="text-center text-xs max-w-52 leading-tight">
+              Level 2 is where the methods of co-design work towards
+              inclusivity, understand FDPs as agents of change through
+              mobilising local resources and existing community-based structures
+              to support HE projects
+            </p>
+            <LevelCard
+              level={3}
+              title="Level 3"
+              description="Fighting the System"
+            />
           </div>
-
-          <div className="h-[10px] w-full bg-[#dc2626] absolute top-1/2"></div>
-        </div>
-        <div className="flex justify-between items-start w-fit- gap-x-4-">
-          <p className="text-center text-xs max-w-48">
-            These methods result in design without a current contextual
-            understanding of the community, designing systems that reinforce
-            cultural tropes and knowledge hierarchies, or in short design, for a
-            theoretically imagined community.
-          </p>
-          <LevelCard level={1} title="Level 1" description="Basic Principle" />
-          <p className="text-center text-xs max-w-48">
-            Level 2 is where the methods of co-design work towards inclusivity,
-            understand FDPs as agents of change through mobilising local
-            resources and existing community-based structures to support HE
-            projects
-          </p>
-          <LevelCard
-            level={3}
-            title="Level 3"
-            description="Fighting the System"
-          />
         </div>
       </div>
     </div>

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -1,9 +1,8 @@
 import React from "react";
-import Image from "next/image";
 import ResourceSection from "./ResourceSection";
 import PracticeSection from "./PracticeSection";
 import JourneySection from "./JourneySection";
-import { navData } from "./NavLink";
+import { navData } from "../utils/NavLink";
 import { usePathname } from "next/navigation";
 import HorzontalArrow from "../icons/HorzontalArrow";
 import SmallArrow from "../icons/SmallArrow";
@@ -27,7 +26,7 @@ export const Header = () => {
 
   if (pathname === "/basic-resources")
     return (
-      <div className="flex h-[32rem] flex-wrap items-stretch justify-between gap-y-24 border-b-8 border-dashed px-8 py-10 mx-auto">
+      <div className="flex h-[32rem] items-stretch justify-between gap-y-24 border-b-8 border-dashed px-8 py-10 mx-auto">
         <ResourceSection navData={navData} />
         <HorzontalArrow />
         <JourneySection />
@@ -36,7 +35,7 @@ export const Header = () => {
 
   if (pathname === "/case-studies-and-core-tools" || pathname === "/")
     return (
-      <div className="flex  h-[32rem] flex-wrap items-stretch justify-between gap-y-24 border-b-8 border-dashed px-8 py-10 mx-auto">
+      <div className="flex  h-[32rem] items-stretch justify-between gap-y-24 border-b-8 border-dashed px-8 py-10 mx-auto">
         <ResourceSection navData={navData} />
 
         <SmallArrow />
@@ -47,7 +46,7 @@ export const Header = () => {
     );
 
   return (
-    <div className="flex  h-[32rem] flex-wrap items-stretch justify-between gap-y-24 border-b-8 border-dashed px-8 py-10 mx-auto">
+    <div className="flex  h-[30rem] items-stretch justify-between gap-y-24 border-b-8 border-dashed px-8 py-10 mx-auto">
       <ResourceSection navData={navData} />
     </div>
   );

diff --git a/src/components/header/NavLink.tsx → src/components/utils/NavLink.tsx b/src/components/header/NavLink.tsx → src/components/utils/NavLink.tsx
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -4,7 +4,7 @@ export default function Document() {
   return (
     <Html lang="en">
       <Head />
-      <body>
+      <body className="max-w-custom mx-auto">
         <Main />
         <NextScript />
       </body>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -8,6 +8,9 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      maxWidth: {
+        custom: "2500px",
+      },
       colors: {
         level: {
           primary: {