fix: responsiveness

Signed-off-by: Jad31 <jad.chahed@bashroom.com>
vitessio · Jul 2, 2024 · 7d87638 · 7d87638
1 parent 0447241
commit 7d87638
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/website/src/common/Footer.tsx b/website/src/common/Footer.tsx
@@ -66,34 +66,34 @@ 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>
           <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} />
+                  <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>