From 2296ca815bc01a68fc786a1600e1f90718efb2e3 Mon Sep 17 00:00:00 2001
From: Alvaro <pursuance@gmail.com>
Date: Wed, 23 Oct 2024 15:52:23 +0200
Subject: [PATCH] Responsive section 5 and footer

---
 src/components/footer/index.tsx    | 12 ++++++------
 src/components/section-5/index.tsx | 18 +++++++++---------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index bc36179..6f83c27 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -8,11 +8,11 @@ const Footer = ({ backgroundClass = "bg-green-700" }) => {
   return (
     <footer className={cn("w-full flex-col flex text-white", backgroundClass)}>
       <div className="justify-center flex">
-        <div className="w-1/2 px-[100px] py-20 flex flex-col gap-20">
+        <div className="w-1/2 px-[20px] xl:px-[100px] py-10 xl:py-20 flex flex-col gap-20">
           <div className="text-sm font-medium uppercase max-w-[258px] tracking-widest">Digital Twins: <div>Innovative Research for a Sustainable Future</div></div>
           <Logo className="text-white" />
         </div>
-        <div className="w-1/2 px-[100px] py-20 flex">
+        <div className="w-1/2 px-[20px] xl:px-[100px] py-10 xl:py-20 flex">
           <ul className="space-y-8">
             <li className="text-white text-base font-bold underline">
               <Link href="/"><HoverRepeatAnimation>
@@ -32,10 +32,10 @@ const Footer = ({ backgroundClass = "bg-green-700" }) => {
           </ul>
         </div >
       </div>
-      <div className="px-[100px] py-6 w-full gap-10 flex border-t border-white/20 text-white/50 text-lg leading-relaxed">
-        <div>© Barcelona Supercomputing Center, 2024</div>
-        <div className="items-center gap-1 flex">
-          <div>Designed and Developed by </div>
+      <div className="px-[20px] xl:px-[100px] py-6 w-full gap-10 flex border-t border-white/20 text-white/50 text-lg leading-relaxed">
+        <div className="max-w-[calc(50%-20px)]">© Barcelona Supercomputing Center, 2024</div>
+        <div className="xl:items-center gap-3 xl:gap-1 pt-2 xl:pt-0 flex-col xl:flex-row inline-flex text-sm xl:text-base">
+          <span>Designed and Developed by </span>
           <a
             href="https://www.vizzuality.com/"
             target="_blank"
diff --git a/src/components/section-5/index.tsx b/src/components/section-5/index.tsx
index 31eb11b..b949d15 100644
--- a/src/components/section-5/index.tsx
+++ b/src/components/section-5/index.tsx
@@ -6,16 +6,16 @@ import InfoPopover from "@/components/info-popover";
 export default function Section3() {
 
   return (
-    <section className="relative bg-white pt-20 scroll-mt-8" id="section-5">
-      <Lines verticalClassName="pl-[152px] pr-[152px]" sectionName="section-5" rows={[]} columnsNumber={2} colorClass="bg-blue-900/10" />
-      <div className="container px-[150px] flex justify-between items-start">
-        <div className="flex pb-[126px] gap-[69px]">
-          <div className="w-[630px] text-green-700 space-y-5 pb-10">
-            <h2 className="text-4xl font-medium pb-16">Towards data streaming for efficient uptake by users.</h2>
+    <section className="relative bg-white pt-10 xl:pt-20 scroll-mt-8" id="section-5">
+      <Lines verticalClassName="px-[152px]" sectionName="section-5" rows={[]} columnsNumber={2} colorClass="bg-blue-900/10" />
+      <div className="container px-[20px] lg:px-[150px] flex flex-col xl:flex-row justify-between items-start">
+        <div className="flex pb-6 xl:pb-[126px] gap-[69px]">
+          <div className="max-w-[630px] xl:min-w-[630px] text-green-700 space-y-5 xl:pb-10">
+            <h2 className="text-3xl xl:text-4xl font-medium pb-10 xl:pb-16">Towards data streaming for efficient uptake by users.</h2>
             <div className="max-w-[487px]">
-              <h3 className="text-2xl pb-5">Current practice is that data generated from lower-resolution climate models is stored to disk.</h3>
+              <h3 className="text-xl xl:text-2xl pb-5">Current practice is that data generated from lower-resolution climate models is stored to disk.</h3>
               <div>
-                <p className="pb-5">However, this approach is no longer suitable for the km-scale simulations produced by the digital twin, which call for users to be able to read and capture the information they need while the digital twin is running.
+                <p className="text-sm xl:text-base pb-5">However, this approach is no longer suitable for the km-scale simulations produced by the digital twin, which call for users to be able to read and capture the information they need while the digital twin is running.
                 </p>
                 <p>
                   This challenge is solved by the streaming <InfoPopover
@@ -30,7 +30,7 @@ export default function Section3() {
         </div>
         <Image
           alt=""
-          className="mr-10"
+          className="mr-10 pb-[102px]"
           src="/images/home-towards-data.svg"
           width={1160}
           height={742}