From 3acb3b9dd1b8bc6da66519bab08516ed2d135cff Mon Sep 17 00:00:00 2001
From: Kalidou Diagne <kld.diagne@gmail.com>
Date: Wed, 20 Mar 2024 10:47:58 +0000
Subject: [PATCH] fixs mobile

---
 app/[lang]/projects/[id]/page.tsx             |  6 +-
 app/[lang]/resources/page.tsx                 |  2 +-
 components/banner.tsx                         |  4 +-
 components/page-header.tsx                    |  8 +--
 components/project/discover-more-projects.tsx | 36 +++++------
 components/project/project-list.tsx           |  8 +--
 components/sections/WhatWeDo.tsx              | 64 +++++++++----------
 7 files changed, 61 insertions(+), 67 deletions(-)

diff --git a/app/[lang]/projects/[id]/page.tsx b/app/[lang]/projects/[id]/page.tsx
index 1aa014d..44f39d5 100644
--- a/app/[lang]/projects/[id]/page.tsx
+++ b/app/[lang]/projects/[id]/page.tsx
@@ -64,7 +64,7 @@ export default async function ProjectDetailPage({ params }: PageProps) {
 
   return (
     <section className="flex flex-col items-center bg-project-page-gradient">
-      <div className="flex w-full flex-col items-center justify-center gap-5 px-6 py-16 md:px-0">
+      <div className="flex w-full flex-col items-center justify-center gap-5 px-6 py-8 md:px-0 md:py-16">
         <div className=" w-full md:max-w-[644px]">
           <div className="flex flex-col">
             <div className="flex flex-col gap-6 text-left">
@@ -122,7 +122,7 @@ export default async function ProjectDetailPage({ params }: PageProps) {
             <div className="mt-10 hidden h-[1px] w-full bg-anakiwa-300 md:block"></div>
           </div>
 
-          <div className="mt-[50px] flex w-full flex-col gap-6">
+          <div className="mt-6 flex w-full flex-col gap-6 md:mt-[50px]">
             <div className="relative flex items-center justify-center overflow-hidden rounded-lg">
               <Image
                 src={`/project-banners/${
@@ -134,7 +134,7 @@ export default async function ProjectDetailPage({ params }: PageProps) {
                 className="w-full rounded-t-lg object-cover"
               />
               {!currProject?.image && (
-                <span className="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 transform px-5 text-center text-3xl font-bold text-black">
+                <span className="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 px-5 text-center text-3xl font-bold text-black">
                   {currProject?.imageAlt || currProject?.name}
                 </span>
               )}
diff --git a/app/[lang]/resources/page.tsx b/app/[lang]/resources/page.tsx
index bcfd996..e6ae4d1 100644
--- a/app/[lang]/resources/page.tsx
+++ b/app/[lang]/resources/page.tsx
@@ -183,7 +183,7 @@ export default function ResourcePage({ params: { lang } }: LangProps) {
             rel="noreferrer"
             passHref
           >
-            <Button size="lg">
+            <Button className="w-full md:w-auto" size="lg">
               <div className="flex items-center gap-1">
                 <Icons.discord size={18} />
                 <span className="pl-2 text-left text-sm font-medium uppercase">
diff --git a/components/banner.tsx b/components/banner.tsx
index 678a6b1..fda8830 100644
--- a/components/banner.tsx
+++ b/components/banner.tsx
@@ -10,8 +10,8 @@ type BannerProps = {
 
 const Banner = ({ title, subtitle, children }: BannerProps) => {
   return (
-    <section className="relative border-t border-tuatara-600 bg-anakiwa-default text-center">
-      <div className="bg-classic-gradient py-16">
+    <section className="relative border-t border-tuatara-600 bg-cover-gradient text-center">
+      <div className="py-16">
         <AppContent className="flex flex-col gap-6">
           <div className="flex flex-col items-center text-center">
             {typeof title === "string" ? (
diff --git a/components/page-header.tsx b/components/page-header.tsx
index 1442032..b5b395a 100644
--- a/components/page-header.tsx
+++ b/components/page-header.tsx
@@ -24,10 +24,10 @@ const PageHeader = ({
 }: PageHeaderProps) => {
   return (
     <div className="bg-cover-gradient">
-      <AppContent className="flex w-full flex-col gap-14 py-12 md:py-20">
-        <div className="flex flex-col items-start justify-between gap-5 md:flex-row md:gap-28">
-          <div className="flex w-full flex-col justify-center gap-8 md:max-w-[700px] lg:gap-14">
-            <div className="flex flex-col gap-8">
+      <AppContent className="flex w-full flex-col gap-10 py-10 md:gap-14 md:py-20">
+        <div className="flex flex-col items-start justify-between gap-10 md:flex-row md:gap-28">
+          <div className="flex w-full flex-col justify-center gap-6 md:max-w-[700px] md:gap-8 lg:gap-14">
+            <div className="flex flex-col gap-4 md:gap-8">
               <Label.PageTitle label={title} />
               {subtitle && (
                 <h6 className="font-sans text-base font-normal text-tuatara-950 md:text-[18px] md:leading-[27px]">
diff --git a/components/project/discover-more-projects.tsx b/components/project/discover-more-projects.tsx
index c5aafc9..d8e7bea 100644
--- a/components/project/discover-more-projects.tsx
+++ b/components/project/discover-more-projects.tsx
@@ -36,27 +36,23 @@ export default function DiscoverMoreProjects({ project, lang }: ProjectProps) {
   const suggestedProject = getSuggestedProjects()
 
   return (
-    <div className="w-full bg-anakiwa-300">
-      <div className="bg-classic-gradient">
-        <div className="mx-auto flex w-full max-w-[644px] flex-col items-center justify-center gap-14 px-6 py-16 md:px-0">
-          <h2 className="text-center text-3xl font-bold">
-            {t("discoverMore")}
-          </h2>
-          <div className="grid grid-cols-1 flex-col gap-5 md:grid-cols-2 md:flex-row">
-            {suggestedProject?.map((project: ProjectInterface) => (
-              <ProjectCard border project={project} lang={lang} />
-            ))}
-          </div>
-          <Link
-            className="flex items-center gap-2 text-tuatara-950/80 hover:text-tuatara-950"
-            href={`/${lang}/projects`}
-          >
-            <Icons.arrowLeft />
-            <span className="font-sans text-base">
-              {t("backToProjectLibrary")}
-            </span>
-          </Link>
+    <div className="w-ful bg-cover-gradient">
+      <div className="mx-auto flex w-full max-w-[644px] flex-col items-center justify-center gap-14 px-6 py-12 md:px-0 md:py-16">
+        <h2 className="text-center text-3xl font-bold">{t("discoverMore")}</h2>
+        <div className="grid grid-cols-1 flex-col gap-5 md:grid-cols-2 md:flex-row">
+          {suggestedProject?.map((project: ProjectInterface) => (
+            <ProjectCard border project={project} lang={lang} />
+          ))}
         </div>
+        <Link
+          className="flex items-center gap-2 text-tuatara-950/80 hover:text-tuatara-950"
+          href={`/${lang}/projects`}
+        >
+          <Icons.arrowLeft />
+          <span className="font-sans text-base">
+            {t("backToProjectLibrary")}
+          </span>
+        </Link>
       </div>
     </div>
   )
diff --git a/components/project/project-list.tsx b/components/project/project-list.tsx
index 13c1588..b2d62dd 100644
--- a/components/project/project-list.tsx
+++ b/components/project/project-list.tsx
@@ -92,8 +92,8 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
   if (noItems) return <NoResults lang={lang} />
 
   return (
-    <div className="relative grid grid-cols-1 items-start justify-between gap-10 md:grid-cols-[1fr_200px]">
-      <div className="flex flex-col gap-14 md:gap-20">
+    <div className="relative grid grid-cols-1 items-start justify-between gap-8 md:gap-10 md:grid-cols-[1fr_200px]">
+      <div className="flex flex-col gap-10 md:gap-20">
         {ProjectSections.map((section) => {
           const sectionProjects =
             projects.filter(
@@ -118,13 +118,13 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
               <div
                 className={cn(
                   "flex w-full flex-col",
-                  hasProjectsForSection ? "gap-10" : "gap-2"
+                  hasProjectsForSection ? "gap-6 md:gap-10" : "gap-2"
                 )}
               >
                 <div className="overflow-hidden">
                   <h3 className={cn(sectionTitleClass())}>{sectionTitle}</h3>
                 </div>
-                <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4">
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3 3xl:grid-cols-4">
                   {sectionProjects.map((project) => (
                     <ProjectCard
                       key={project?.id}
diff --git a/components/sections/WhatWeDo.tsx b/components/sections/WhatWeDo.tsx
index 226816b..d607a52 100644
--- a/components/sections/WhatWeDo.tsx
+++ b/components/sections/WhatWeDo.tsx
@@ -34,39 +34,37 @@ export const WhatWeDo = ({ lang }: LangProps["params"]) => {
   ]
 
   return (
-    <div className="border-t border-tuatara-600 bg-anakiwa-200">
-      <div className="bg-classic-gradient">
-        <AppContent className="mx-auto max-w-[978px]">
-          <section className="flex flex-col gap-16 py-16 md:pb-24">
-            <div className="flex flex-col text-center">
-              <h6 className="py-6 font-sans text-base font-bold uppercase tracking-[4px] text-tuatara-950">
-                {t("whatWeDo")}
-              </h6>
-              <h3 className="font-display text-[18px] font-bold text-tuatara-950 md:text-3xl">
-                {t("whatWeDoDescription")}
-              </h3>
-            </div>
-            <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-              {content.map((item, index) => (
-                <article
-                  className="border-tuatara-300 flex flex-col gap-2 rounded-[6px] border bg-white px-8 py-4"
-                  key={index}
-                >
-                  <div className="flex items-center gap-2">
-                    <item.icon />
-                    <h6 className="font-sans text-base font-bold uppercase tracking-[4px] text-anakiwa-700">
-                      {item.title}
-                    </h6>
-                  </div>
-                  <p className="font-sans text-base text-tuatara-950">
-                    {item.description}
-                  </p>
-                </article>
-              ))}
-            </div>
-          </section>
-        </AppContent>
-      </div>
+    <div className="border-t border-tuatara-600 bg-cover-gradient">
+      <AppContent className="mx-auto max-w-[978px]">
+        <section className="flex flex-col gap-16 py-16 md:pb-24">
+          <div className="flex flex-col text-center">
+            <h6 className="py-6 font-sans text-base font-bold uppercase tracking-[4px] text-tuatara-950">
+              {t("whatWeDo")}
+            </h6>
+            <h3 className="font-display text-[18px] font-bold text-tuatara-950 md:text-3xl">
+              {t("whatWeDoDescription")}
+            </h3>
+          </div>
+          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+            {content.map((item, index) => (
+              <article
+                className="border-tuatara-300 flex flex-col gap-2 rounded-[6px] border bg-white px-8 py-4"
+                key={index}
+              >
+                <div className="flex items-center gap-2">
+                  <item.icon />
+                  <h6 className="font-sans text-base font-bold uppercase tracking-[4px] text-anakiwa-700">
+                    {item.title}
+                  </h6>
+                </div>
+                <p className="font-sans text-base text-tuatara-950">
+                  {item.description}
+                </p>
+              </article>
+            ))}
+          </div>
+        </section>
+      </AppContent>
     </div>
   )
 }