feat: add responsiveness and impl subscription hook

app/components/footer.tsx

@@ -21,9 +21,9 @@ export const footerLinks: { name: string; path: string }[] = [
 
 export default function Footer() {
   return (
-    <footer className="flex flex-col-reverse md:flex-row justify-between items-center bg-[#010409] px-4 md:px-8 lg:px-20 py-6 md:py-[38px] gap-6 md:gap-4 border-t-[#2C3035] border-t-[1px]">
-      <p className="text-sm text-[#DCDFE1] text-center md:text-left">
-        © Autoswappr {new Date().getFullYear()}
+    <footer className="flex flex-col-reverse md:flex-row justify-between items-center bg-[#010409] px-4 md:px-8 lg:px-20 py-4 md:py-6 gap-4 md:gap-4 border-t-[#2C3035] border-t-[1px]">
+      <p className="text-xs md:text-sm text-[#DCDFE1] text-center md:text-left">
+        &copy; Autoswappr {new Date().getFullYear()}
       </p>
 
       <div className="flex flex-row items-center gap-4 md:gap-6">

app/components/give-feedback.tsx

@@ -1,7 +1,7 @@
 "use client";
 export default function GiveFeedback() {
   return (
-    <div className="w-full flex flex-row items-end justify-end pr-8 xl:pr-12 pb-12 absolute bottom-3 right-10">
+    <div className="w-full flex flex-row items-end justify-end pr-8 xl:pr-12 pb-12 absolute top-[90vh] right-10">
       <button
         type="button"
         className="flex flex-none w-auto py-[12px] px-[16px] sm:px-[20px] border-[1px] border-[#2C3035] rounded-[8px] items-center justify-center space-x-2.5"

app/components/layout/sections/how-to-use-autoswappr.tsx

@@ -4,24 +4,24 @@ import React, { useState } from "react";
 export default function HowToUseAutoSwappr() {
   const [activeStep] = useState(1);
   return (
-    <div className="py-[60px] px-[75px]">
-      <h2 className="text-[32px] font-semibold text-[#F3F5FF] mb-4">
+    <div className="py-10 md:py-[60px] px-6 md:px-[75px]">
+      <h2 className="text-xl md:text-[32px] font-semibold text-[#F3F5FF] mb-3 md:mb-4 text-center md:text-left">
         How to use AutoSwappr
       </h2>
-      <div className="flex gap-x-3">
-        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF]">
+      <div className="flex gap-x-3 text-center">
+        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF] flex-1 md:flex-none">
           Step 1
         </div>
-        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF]">
+        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF] flex-1 md:flex-none">
           Step 2
         </div>
-        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF]">
+        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF] flex-1 md:flex-none">
           All set
         </div>
       </div>
 
       <div
-        className="text-[#F3F5FF] mt-[68px]"
+        className="text-[#F3F5FF] mt-[68px] md:grid-rows-1 grid-rows-3"
         style={{
           display: "grid",
           gridTemplateColumns:

app/components/layout/sections/landing-hero-section.tsx

@@ -1,5 +1,4 @@
 import { useAccount } from "@starknet-react/core";
-import Image from "next/image";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 import { ChevronRight } from "lucide-react";
@@ -17,7 +16,7 @@ function LandingHeroSection() {
           onOpenChange={() => setIsConnecting((prev) => !prev)}
         />
       )}
-      <div className="relative h-[844px] md:h-[100vh]  w-full overflow-hidden flex flex-col justify-center">
+      <div className="relative h-[700px] md:h-[100vh]  w-full overflow-hidden flex flex-col justify-center">
         <video
           autoPlay
           loop
@@ -28,22 +27,17 @@ function LandingHeroSection() {
           <source src="/hero-bg.mp4" type="video/mp4" />
           Your browser does not support the video tag.
         </video>
-        <div className="relative z-[15] flex flex-col items-center md:justify-center text-center px-6">
-          <Image
-            className="md:hidden mb-[77px]"
-            src="/M-logo.svg"
-            alt="Token badge"
-          />
+        <div className="relative z-[15] flex flex-col items-center md:justify-center text-center md:px-6">
           <div className="flex flex-col items-center bg-[#02060D1F] rounded-xl p-12 backdrop-blur">
-            <h1 className="text-2xl md:text-6xl md:leading-[100%] font-extrabold text-[#F3F5FF] max-w-[280px] md:max-w-full">
-              Your Tokens, Your <span className="text-[#1D8CF4]">Rules</span>
+            <h1 className="text-3xl md:text-6xl md:leading-[100%] font-extrabold text-[#F3F5FF] md:max-w-[280px]">
+              Your Tokens Your <span className="text-[#1D8CF4]">Rules</span>
             </h1>
             <p className="mt-2 mb-6 md:mb-12 text-sm md:text-lg md:leading-[22px] text-[#DCDFE1] max-w-[280px] md:max-w-full">
               Set up auto-swaps for multiple tokens and percentages with ease.
             </p>
             <button
               type="button"
-              className="flex gap-1 items-center justify-center py-3 md:py-3 w-full md:w-[230px] border border-[#4C5053] rounded-lg md:text-base font-semibold md:leading-[22px] text-[#F3F5FF] text-sm leading-5 bg-[#1D8CF4]"
+              className="flex gap-1 items-center justify-center py-3 md:py-3 w-[70%] md:w-[230px] border border-[#4C5053] rounded-lg md:text-base font-semibold md:leading-[22px] text-[#F3F5FF] text-sm leading-5 bg-[#1D8CF4]"
               onClick={() => {
                 if (!address) {
                   setIsConnecting(true);

app/components/layout/sections/what-is-autoswappr.tsx

@@ -2,12 +2,12 @@ import React from "react";
 
 export default function WhatIsAutoSwapper() {
   return (
-    <div className="px-[74px] py-10 text-center">
-      <h2 className="text-[32px] font-semibold text-[#F3F5FF] mb-6 ">
+    <div className="px-6 md:px-[74px] py-10 text-center">
+      <h2 className="text-xl md:text-[32px] font-semibold text-[#F3F5FF] mb-3 md:mb-6 ">
         WTH is autoswappr?
       </h2>
-      <div className="flex gap-x-5 justify-center items-stretch text-base leading-6 text-[#DCDFE1]">
-        <div className="max-w-[380px] flex items-center">
+      <div className="flex md:flex-row flex-col gap-y-5 gap-x-5 justify-center items-stretch text-xs md:text-base leading-5 md:leading-6 text-[#DCDFE1]">
+        <div className="w-full md:max-w-[380px] flex items-center">
           <p>
             Autoswappr automatically converts any STRK tokens you receive into
             USDT — a stable token that holds its value. This means you
@@ -16,8 +16,8 @@ export default function WhatIsAutoSwapper() {
             your wallet.
           </p>
         </div>
-        <div className="w-[2px] rounded-lg bg-[#1E2021]" />
-        <div className="max-w-[380px] flex items-center">
+        <div className="w-full md:w-[2px] rounded-lg h-[3px] bg-[#1E2021]" />
+        <div className="w-full md:max-w-[380px] flex items-center">
           <p>
             It runs in the background, so you don&apos;t have to do anything
             manually. Your transactions are secured with advanced technology

app/components/layout/sections/why-autoswappr.tsx

@@ -1,56 +1,69 @@
-import React from "react";
+const FeatureCard = ({
+  image,
+  title,
+  description,
+}: {
+  image: string;
+  title: string;
+  description: string;
+}) => (
+  <div className="py-6 flex flex-col items-center text-center md:items-start md:text-left">
+    <img src={image} className="w-[350px] md:w-auto mb-7 md:mb-[60px]" alt="" />
+    <div className="max-w-[360px] py-4">
+      <h5 className="mb-3 md:mb-4 text-[#F3F5FF] text-sm md:text-xl font-medium">
+        {title}
+      </h5>
+      <p className="text-xs md:text-sm text-[#DCDFE1] h-[60px]">
+        {description}
+      </p>
+    </div>
+  </div>
+);
+
+const Divider = () => (
+  <div
+    className="hidden lg:flex w-[2px] h-[235px] bg-[#1E2021] rounded-full"
+    role="presentation"
+    aria-hidden="true"
+  />
+);
 
 function WhyAutoSwappr() {
   return (
-    <div className="py-[60px] px-[75px]">
-      <h2 className="text-[32px] font-semibold text-[#F3F5FF] mb-4">
+    <div className="md:py-[60px] py-10 px-6 md:px-[75px]">
+      <h2 className="text-xl md:text-[32px] text-center md:text-left font-semibold text-[#F3F5FF] mb-3 md:mb-4">
         Why AutoSwappr?
       </h2>
-      <div className="flex gap-x-3">
-        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF]">
+      <div className="flex gap-x-3 text-center">
+        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm bg-[#1E2021] text-[#F3F5FF] flex-1 md:flex-none">
           Security
         </div>
-        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF]">
+        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF] flex-1 md:flex-none">
           Transparency
         </div>
-        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF]">
+        <div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF] flex-1 md:flex-none">
           Efficiency
         </div>
       </div>
 
-      <div className="grid grid-cols-[1fr] lg:grid-cols-[1fr_auto_1fr_auto_1fr] mt-[68px] items-end gap-x-[52px]">
-        <div className="py-6">
-          <img src="/dot-pattern-1.svg" className="mb-[60px]" alt="" />
-          <div className="max-w-[360px] py-4">
-            <h5 className="mb-4 text-[#F3F5FF] text-xl">Security</h5>
-            <p className="text-sm text-[#DCDFE1] h-[60px]">
-              Connect your wallet to Autoswappr. Select the wallet you want to
-              use in Autoswappr.
-            </p>
-          </div>
-        </div>
-        <div className="w-[2px] h-[235px] bg-[#1E2021] rounded-lg lg:flex hidden" />
-        <div className="py-6">
-          <img src="/dot-pattern-2.svg" className="mb-[60px]" alt="" />
-          <div className="max-w-[360px] py-4">
-            <h5 className="mb-4 text-[#F3F5FF] text-xl">Transparency</h5>
-            <p className="text-sm text-[#DCDFE1] h-[60px]">
-              Fill out the short form by inputing the amount of STRK tokens you
-              want to automatically swap to USDT
-            </p>
-          </div>
-        </div>
-        <div className="w-[2px] h-[235px] bg-[#1E2021] rounded-lg lg:flex hidden" />
-        <div className="py-6">
-          <img src="/dot-pattern-3.svg" className="mb-[60px]" alt="" />
-          <div className="max-w-[360px] py-4">
-            <h5 className="mb-4 text-[#F3F5FF] text-xl">Efficiency</h5>
-            <p className="text-sm text-[#DCDFE1] h-[60px]">
-              Connect your wallet to Autoswappr. Select the wallet you want to
-              use in Autoswappr.
-            </p>
-          </div>
-        </div>
+      <div className="grid grid-cols-[1fr] lg:grid-cols-[1fr_auto_1fr_auto_1fr] mt-7 md:mt-[68px] items-end gap-x-[52px]">
+        <FeatureCard
+          image="/dot-pattern-1.svg"
+          title="Security"
+          description="Security is at the core of Autoswappr. Your assets are protected by audited smart contracts and industry-best practices at every step."
+        />
+        <Divider />
+        <FeatureCard
+          image="/dot-pattern-2.svg"
+          title="Transparency"
+          description="Fill out the short form by inputting the amount of STRK tokens you want to automatically swap to USDT."
+        />
+        <Divider />
+        <FeatureCard
+          image="/dot-pattern-3.svg"
+          title="Efficiency"
+          description="Security is at the core of Autoswappr. Your assets are protected by audited smart contracts and industry-best practices at every step."
+        />
       </div>
     </div>
   );

app/components/mobile-menu.tsx

@@ -25,7 +25,7 @@ export default function MobileMenu({
             <li key={link.title} className="px-4">
               <a
                 href={link.href}
-                className="text-base text-[#e7ecf0] hover:text-white block"
+                className="text-sm text-[#e7ecf0] hover:text-white block"
                 onClick={(e) => {
                   e.stopPropagation();
                   closeMenu();