From 708cadc2b140da54e5dc0bacf061d4ececd7518b Mon Sep 17 00:00:00 2001
From: Jad31 <jad.chahed@bashroom.com>
Date: Tue, 2 Jul 2024 22:30:26 +0200
Subject: [PATCH 1/4] refactor: footer non responsive

Signed-off-by: Jad31 <jad.chahed@bashroom.com>
---
 website/src/common/Footer.tsx | 75 +++++++++++++----------------------
 1 file changed, 27 insertions(+), 48 deletions(-)

diff --git a/website/src/common/Footer.tsx b/website/src/common/Footer.tsx
index aa01ac138..f5c431ae9 100644
--- a/website/src/common/Footer.tsx
+++ b/website/src/common/Footer.tsx
@@ -51,9 +51,8 @@ const Footer: React.FC = () => {
       links: [
         { title: "Daily", to: "/daily" },
         { title: "Compare", to: "/compare" },
-        { title: "Micro", to: "/micro" },
-        { title: "Macro", to: "/macro" },
         { title: "PR", to: "/pr" },
+        { title: "History", to: "/history" },
       ],
     },
     {
@@ -63,36 +62,38 @@ const Footer: React.FC = () => {
         { title: "Blog", to: "https://vitess.io/blog" },
         { title: "Community", to: "https://vitess.io/community" },
       ],
-    },
-    {
-      title: "arewefastyet",
-      links: [
-        { title: "GitHub", to: "https://www.github.com/vitessio/arewefastyet" },
-      ],
-    },
+    }
   ];
 
   return (
-    <footer className="p-page relative mt-10 py-20 text-black">
-      <div className="absolute bottom-6 left-6 right-6 top-6 -z-1 rounded-lg bg-primary" />
-      <div className="flex flex-col gap-5 md:flex-row justify-center md:justify-between text-sm font-light tracking-tight">
-        <div
-          className={`flex basis-[20%] flex-col items-center gap-y-5 opacity-90 drop-shadow-[0px_0px_0px_theme("colors.back")]`}
-        >
-          <img
-            src="/logo.png"
-            alt="agrosurance logo"
-            className="aspect-square w-1/3"
-          />
-          <h2 className="text-xl font-medium">arewefastyet</h2>
+    <footer className="m-auto w-4/5 border-border/40 px-60 py-12 text-foreground border-t">
+      <div className="flex flex-col gap-28 md:flex-row justify-center md:justify-center text-sm font-light tracking-tight pr-64">
+        <div className="flex flex-col gap-y-12">
+          <div className={`flex gap-x-2 items-center`}>
+            <img
+              src="/logo.png"
+              alt="agrosurance logo"
+              className="aspect-square h-10 w-10 md:h-12 md:w-12"
+            />
+            <h2 className="text-3xl font-normal">arewefastyet</h2>
+          </div>
+          <div className="my-2 flex justify-between md:justify-center px-5 md:px-0 gap-x-4">
+            <div className="flex items-center gap-x-8">
+              {socials.map((social, key) => (
+                <Link key={key} to={social.url} target="__blank" className="">
+                  <social.icon className="text-foreground hover:text-primary/80"size={33} />
+                </Link>
+              ))}
+            </div>
+          </div>
         </div>
-        <div className="flex md:gap-[3em] px-5 md:px-0 justify-between md:justify-end">
+        <div className="flex md:gap-[12em] pl-24 justify-between md:justify-center">
           {items.map((item, key) => (
             <div key={key} className="flex flex-col">
-              <h5 className="font-semibold">{item.title}</h5>
-              <div className="my-4 md:my-7 flex flex-col gap-y-3">
+              <h5 className="font-bold text-lg">{item.title}</h5>
+              <div className="my-4 md:my-7 flex flex-col gap-y-2">
                 {item.links.map((link, key) => (
-                  <Link key={key} to={link.to}>
+                  <Link className="text-base text-foreground/80 hover:text-primary/80" key={key} to={link.to}>
                     {link.title}
                   </Link>
                 ))}
@@ -100,30 +101,8 @@ const Footer: React.FC = () => {
             </div>
           ))}
         </div>
-
-        {/* <div className="flex flex-col items-center text-center text-back text-opacity-80">
-          <h5 className="my-3 text-4xl font-bold tracking-tighter text-back">
-            TRULY TESTED
-          </h5>
-          <p>A cutting edge Benchmarking</p>
-          <p>approach for uparalleled</p>
-          <p>Database Speed</p>
-          <p className="font-semibold text-back">for vitess</p>
-        </div> */}
-        {/* <div className="w-[15%]" /> */}
-      </div>
-      <div className="my-2 flex justify-between md:justify-start px-5 md:px-0 gap-x-4">
-        <p className="font-mono md:text-xl font-bold">Follow Us</p>
-        <div className="flex items-center gap-x-3">
-          {socials.map((social, key) => (
-            <Link key={key} to={social.url} target="__blank" className="">
-              <social.icon size={33} />
-            </Link>
-          ))}
-        </div>
       </div>
-      <div className="my-2 w-full border border-black"></div>
-      <div className="mt-4 text-center md:text-left text-xs">
+      <div className="mt-4 text-center md:text-center text-medium">
         @vitessio/arewefastyet
       </div>
     </footer>

From 10c2b81c5325a28c0cb3f656b2693003447904d9 Mon Sep 17 00:00:00 2001
From: Jad31 <jad.chahed@bashroom.com>
Date: Wed, 3 Jul 2024 00:31:44 +0200
Subject: [PATCH 2/4] fix: responsiveness

Signed-off-by: Jad31 <jad.chahed@bashroom.com>
---
 website/src/common/Footer.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/website/src/common/Footer.tsx b/website/src/common/Footer.tsx
index f5c431ae9..8136e9ad9 100644
--- a/website/src/common/Footer.tsx
+++ b/website/src/common/Footer.tsx
@@ -66,14 +66,14 @@ const Footer: React.FC = () => {
   ];
 
   return (
-    <footer className="m-auto w-4/5 border-border/40 px-60 py-12 text-foreground border-t">
-      <div className="flex flex-col gap-28 md:flex-row justify-center md:justify-center text-sm font-light tracking-tight pr-64">
-        <div className="flex flex-col gap-y-12">
+    <footer className="m-auto w-full md:w-4/5 border-border/40 lg:px-60 md:px-auto sm:px-12 py-12 text-foreground border-t">
+      <div className="flex flex-col gap-8 lg:gap-28 lg:flex-row md:justify-center text-sm font-light tracking-tight lg:pr-64">
+        <div className="md:flex m-auto lg:m-0 flex-col gap-y-4 lg:gap-y-12 lg:order-1 order-2">
           <div className={`flex gap-x-2 items-center`}>
             <img
               src="/logo.png"
               alt="agrosurance logo"
-              className="aspect-square h-10 w-10 md:h-12 md:w-12"
+              className="aspect-square h-10 w-10 md:h-12 md:w-12 md:shrink-0"
             />
             <h2 className="text-3xl font-normal">arewefastyet</h2>
           </div>
@@ -81,19 +81,19 @@ const Footer: React.FC = () => {
             <div className="flex items-center gap-x-8">
               {socials.map((social, key) => (
                 <Link key={key} to={social.url} target="__blank" className="">
-                  <social.icon className="text-foreground hover:text-primary/80"size={33} />
+                  <social.icon className="text-foreground hover:text-primary/80 md:text-4xl text-2xl" />
                 </Link>
               ))}
             </div>
           </div>
         </div>
-        <div className="flex md:gap-[12em] pl-24 justify-between md:justify-center">
+        <div className="flex order-1 md:gap-[12em] gap-[6em] md:pl-24 m-auto md:justify-center">
           {items.map((item, key) => (
             <div key={key} className="flex flex-col">
-              <h5 className="font-bold text-lg">{item.title}</h5>
+              <h5 className="font-bold md:text-lg text-base">{item.title}</h5>
               <div className="my-4 md:my-7 flex flex-col gap-y-2">
                 {item.links.map((link, key) => (
-                  <Link className="text-base text-foreground/80 hover:text-primary/80" key={key} to={link.to}>
+                  <Link className="md:text-base text-xs text-foreground/80 hover:text-primary/80" key={key} to={link.to}>
                     {link.title}
                   </Link>
                 ))}
@@ -102,7 +102,7 @@ const Footer: React.FC = () => {
           ))}
         </div>
       </div>
-      <div className="mt-4 text-center md:text-center text-medium">
+      <div className="mt-8 lg:mt-4 text-center md:text-center text-medium">
         @vitessio/arewefastyet
       </div>
     </footer>

From f8221614acc23b41483ab6e392c7f0ee432cddbf Mon Sep 17 00:00:00 2001
From: Florent Poinsard <35779988+frouioui@users.noreply.github.com>
Date: Wed, 3 Jul 2024 12:10:35 -0400
Subject: [PATCH 3/4] Update website/src/common/Footer.tsx

Signed-off-by: Florent Poinsard <35779988+frouioui@users.noreply.github.com>
---
 website/src/common/Footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/common/Footer.tsx b/website/src/common/Footer.tsx
index 8136e9ad9..fbbd321a9 100644
--- a/website/src/common/Footer.tsx
+++ b/website/src/common/Footer.tsx
@@ -72,7 +72,7 @@ const Footer: React.FC = () => {
           <div className={`flex gap-x-2 items-center`}>
             <img
               src="/logo.png"
-              alt="agrosurance logo"
+              alt="vitess logo"
               className="aspect-square h-10 w-10 md:h-12 md:w-12 md:shrink-0"
             />
             <h2 className="text-3xl font-normal">arewefastyet</h2>

From 836f8567122fc939ede49faff3958829dfd0fb8e Mon Sep 17 00:00:00 2001
From: Jad Chahed <jad.chahed@bashroom.com>
Date: Wed, 3 Jul 2024 22:38:15 +0200
Subject: [PATCH 4/4] fix: responsiveness

Signed-off-by: Jad Chahed <jad.chahed@bashroom.com>
---
 website/src/common/Footer.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/website/src/common/Footer.tsx b/website/src/common/Footer.tsx
index fbbd321a9..6d980841a 100644
--- a/website/src/common/Footer.tsx
+++ b/website/src/common/Footer.tsx
@@ -62,14 +62,14 @@ const Footer: React.FC = () => {
         { title: "Blog", to: "https://vitess.io/blog" },
         { title: "Community", to: "https://vitess.io/community" },
       ],
-    }
+    },
   ];
 
   return (
-    <footer className="m-auto w-full md:w-4/5 border-border/40 lg:px-60 md:px-auto sm:px-12 py-12 text-foreground border-t">
+    <footer className="m-auto w-full border-border/40 lg:px-60 md:px-12 sm:px-6 py-12 text-foreground border-t">
       <div className="flex flex-col gap-8 lg:gap-28 lg:flex-row md:justify-center text-sm font-light tracking-tight lg:pr-64">
         <div className="md:flex m-auto lg:m-0 flex-col gap-y-4 lg:gap-y-12 lg:order-1 order-2">
-          <div className={`flex gap-x-2 items-center`}>
+          <div className="flex gap-x-2 items-center">
             <img
               src="/logo.png"
               alt="vitess logo"
@@ -87,7 +87,7 @@ const Footer: React.FC = () => {
             </div>
           </div>
         </div>
-        <div className="flex order-1 md:gap-[12em] gap-[6em] md:pl-24 m-auto md:justify-center">
+        <div className="flex order-1 md:gap-[12em] gap-[6em] xl:pl-24 m-auto md:justify-center">
           {items.map((item, key) => (
             <div key={key} className="flex flex-col">
               <h5 className="font-bold md:text-lg text-base">{item.title}</h5>
@@ -109,4 +109,4 @@ const Footer: React.FC = () => {
   );
 };
 
-export default Footer;
+export default Footer;
\ No newline at end of file