fix footer for 1024

darwinia-network · May 16, 2024 · b0c77fa · b0c77fa
1 parent 00c4851
commit b0c77fa
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/components/Footer/OthersPageDesktopFooter.tsx b/src/components/Footer/OthersPageDesktopFooter.tsx
@@ -6,7 +6,7 @@ import SubscribeWrap from "../SubscribeWrap";
 export default function OthersPageDesktopFooter() {
   return (
     <div className="bg-app-black py-[3.75rem]">
-      <div className="max-w-8xl mx-auto px-medium flex justify-between">
+      <div className="max-w-8xl mx-auto px-medium 2xl:flex justify-between lg:hidden ">
         <FooterLinks />
 
         <div className="flex flex-col justify-between">
@@ -17,6 +17,16 @@ export default function OthersPageDesktopFooter() {
           <Copyright />
         </div>
       </div>
+      <div className="flex items-center justify-between px-[3.125rem] xl:px-[6.25rem] 2xl:hidden">
+        <FooterLinks />
+      </div>
+      <div className="flex items-center justify-center mt-[7.5rem] 2xl:hidden">
+        <SubscribeWrap />
+      </div>
+      <div className="flex items-center justify-between px-[3.125rem] xl:px-[6.25rem] mt-[5rem] 2xl:hidden">
+        <FooterSocialMedia />
+        <Copyright />
+      </div>
     </div>
   );
 }
diff --git a/src/components/Subscribe.tsx b/src/components/Subscribe.tsx
@@ -38,6 +38,9 @@ export default function Subscribe() {
           id="mc-embedded-subscribe-form"
           name="mc-embedded-subscribe-form"
           className="w-[360px] h-10 flex items-center"
+          data-tooltip-id="ComingSoon"
+          data-tooltip-content="Coming Soon"
+          data-tooltip-place="top"
         >
           <div
             className={`h-full px-medium flex items-center gap-medium border-y border-l rounded-l-[50px] transition-colors w-full ${
@@ -58,9 +61,6 @@ export default function Subscribe() {
           <button
             disabled={!email || !isValid}
             className="h-full px-[15px] text-t16b text-app-black inline-flex items-center border border-white bg-app-white rounded-r-[50px] w-fit transition-[opacity,color] hover:bg-app-main hover:text-app-white hover:border-app-main disabled:cursor-not-allowed disabled:bg-app-white disabled:text-app-black disabled:border-app-white disabled:opacity-80"
-            data-tooltip-id="ComingSoon"
-            data-tooltip-content="Coming Soon"
-            data-tooltip-place="top"
           >
             Subscribe
           </button>

diff --git a/src/components/SubscribeWrap.tsx b/src/components/SubscribeWrap.tsx
@@ -3,7 +3,9 @@ import Subscribe from "./Subscribe";
 export default function SubscribeWrap({ isHomePage }: { isHomePage?: boolean }) {
   return (
     <div
-      className={`hidden lg:flex flex-col gap-5 pb-5 max-w-max ${isHomePage ? "items-end self-end" : "items-start"}`}
+      className={`hidden lg:flex flex-col gap-5 pb-5 max-w-max lg:items-center lg:justify-center 2xl:items-start 2xl:justify-start ${
+        isHomePage ? "items-end self-end" : "items-start"
+      }`}
     >
       <h3 className="text-h2 text-app-white whitespace-nowrap">Subscribe to Project Updates</h3>
       <span className={`text-t16 ${isHomePage ? "text-app-white" : "text-app-gray"}`}>