fix: producthunt banner responsive

wordigo · Oct 29, 2023 · d62e531 · d62e531
1 parent a4f2c79
commit d62e531
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/apps/next/src/components/Layout/MainLayout/Banner/index.tsx b/apps/next/src/components/Layout/MainLayout/Banner/index.tsx
@@ -11,25 +11,27 @@ const Banner = () => {
 
   const handleBannerClick = () => {
     window.open(
-      "https://www.producthunt.com/products/wordigo-your-browser-as-a-language-lab",
+      "https://www.producthunt.com/posts/wordigo-your-browser-as-a-language-lab",
       "_blank"
     );
   };
 
   return (
     <section
-      className="w-full border-b py-3 bg-[#FF6154] text-white cursor-pointer"
+      className="w-full border-b relative py-3 bg-[#FF6154] text-white cursor-pointer"
       onClick={handleBannerClick}
     >
-      <div className="max-w-[90rem] max-lg:w-full px-20 max-md:px-4 flex items-center mx-auto justify-center">
+      <div className="max-w-[90rem] max-lg:w-full px-20 h-10 md:h-full max-md:px-4 flex items-start mx-auto  justify-center sm:items-center">
         <div className="flex items-center">
           <p className="text-sm font-semibold">
             {t("announcement.description")}
           </p>
-          <Button className="px-1.5 h-5 rounded-sm font-bold bg-white text-[#FF6154] mx-2 hover:bg-white">
-            Product Hunt
-          </Button>
-          <p className="text-sm font-semibold mr-2">
+          <div className="absolute bottom-2 right-0 left-0 flex items-center justify-center sm:static">
+            <Button className="px-1.5 h-5 rounded-sm font-bold bg-white text-[#FF6154] mx-2 hover:bg-white">
+              Product Hunt
+            </Button>
+          </div>
+          <p className="text-sm font-semibold mr-2 ml-1 sm:ml-auto">
             {t("announcement.button")}
           </p>
         </div>