Merge pull request #563 from vitessio/refactor-footer

Refactor footer

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" },
       ],
     },
     {
@@ -64,70 +63,50 @@ const Footer: React.FC = () => {
         { 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-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">
+            <img
+              src="/logo.png"
+              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>
+          </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 md:text-4xl text-2xl" />
+                </Link>
+              ))}
+            </div>
+          </div>
         </div>
-        <div className="flex md:gap-[3em] px-5 md:px-0 justify-between md:justify-end">
+        <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-semibold">{item.title}</h5>
-              <div className="my-4 md:my-7 flex flex-col gap-y-3">
+              <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 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>
                 ))}
               </div>
             </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-8 lg:mt-4 text-center md:text-center text-medium">
         @vitessio/arewefastyet
       </div>
     </footer>
   );
 };
 
-export default Footer;
+export default Footer;