chore: learn page

app/learn/components/EasySteps.tsx

@@ -14,55 +14,55 @@ function EasySteps() {
     );
   };
   return (
-    <div className="px-[100px] py-[90px]">
-      <div className="mx-auto max-w-[925px]">
-        <h3 className="text-raisin-black mb-4 text-center font-agrandir text-3xl">
-          Easy <span className="font-AgrandirRegular">Steps</span> You Can't
-          Miss
-        </h3>
-        <p className="mb-[30px] text-center text-base leading-8 text-foreground-secondary">
-          TokenGiver makes fundraising and donating a seamless experience with
+    <div className="py-8 md:px-8">
+      <div className="space-y-6 text-center">
+        <h2 className="mb-4 text-center max-lgMobile:text-xl">
+          <span className="font-agrandir">Easy</span> Steps{" "}
+          <span className="font-agrandir">You Can't Miss</span>
+        </h2>
+        <p className="text-foreground-secondary">
+          Token Giver makes fundraising and donating a seamless experience with
           cutting-edge blockchain technology.
         </p>
       </div>
 
       <div
         onClick={toggleTab}
-        className="relative mx-auto flex w-fit cursor-pointer items-center gap-x-[10px] rounded-full bg-[#F0F0F0] p-[10px] text-lg leading-6 transition-colors duration-300"
+        className="relative mx-auto mt-8 flex h-10 w-[280px] cursor-pointer items-center gap-x-2 rounded-full bg-[#F0F0F0] p-0.5 text-lg leading-6 transition-all duration-300 hover:bg-[#E8E8E8]"
       >
         <div
-          className={`absolute left-0 top-1/2 h-[43px] w-[140px] -translate-y-1/2 rounded-full bg-white shadow-md transition-transform duration-300 ${
+          className={`absolute left-0.5 top-1/2 h-[calc(100%-4px)] w-[calc(50%-3px)] -translate-y-1/2 rounded-full bg-white shadow-sm transition-all duration-300 ease-in-out ${
             currentTab === "donations"
-              ? "translate-x-[10px]"
-              : "translate-x-[155px]"
+              ? "translate-x-0"
+              : "translate-x-[calc(100%+2px)]"
           }`}
         />
         <span
-          className={`relative z-10 rounded-full px-[30px] py-2 text-sm font-medium transition-colors duration-300 ${
+          className={`relative z-10 flex-1 rounded-full px-4 py-1.5 text-center text-sm transition-colors duration-300 ${
             currentTab === "donations"
               ? "font-semibold text-[#121212]"
-              : "font-medium text-[#8E9BAE]"
+              : "text-[#8E9BAE]"
           }`}
         >
           Donations
         </span>
         <span
-          className={`relative z-10 px-[30px] py-3 text-center text-sm font-medium transition-colors duration-300 ${
+          className={`relative z-10 flex-1 rounded-full px-4 py-1.5 text-center text-sm transition-colors duration-300 ${
             currentTab === "fundraisers"
               ? "font-semibold text-[#121212]"
-              : "font-medium text-[#8E9BAE]"
+              : "text-[#8E9BAE]"
           }`}
         >
           Fundraisers
         </span>
       </div>
 
-      <div className="mt-[38px]">
-        <h2 className="font-AgrandirRegular mb-[14px] text-xl text-foreground-secondary">
+      <div className="mx-auto max-w-[400px] py-8 lg:max-w-none">
+        <h2 className="font-AgrandirRegular text-foreground-secondary">
           {currentTab === "donations" ? "For Donors" : "For Fundraisers"}
         </h2>
 
-        <div className="flex flex-col gap-y-[50px]">
+        <div className="flex flex-col">
           {currentTab === "donations"
             ? donorSteps.map((step) => <StepBlock step={step} key={step.id} />)
             : fundraiserSteps.map((step) => (

app/learn/components/HowToStartHeroSection .tsx

@@ -1,49 +1,34 @@
 function HowToStartHeroSection() {
   return (
-    <div className="flex flex-col items-center px-[100px] pt-[180px] text-center">
-      <h4 className="font-AgrandirRegular mb-[14px] text-base text-foreground-secondary">
-        How to Start TokenGiver
-      </h4>
-      <h1 className="text-raisin-black mb-10 font-agrandir text-5xl leading-[70px]">
-        Start Fundraising with
+    <div className="flex flex-col items-center gap-4 px-4 text-center text-foreground-secondary sm:gap-6 sm:px-6 md:gap-8 md:px-8">
+      <h4 className="">How to get started on token giver</h4>
+      <h1 className="font-agrandir text-3xl leading-[42px] text-foreground-primary sm:text-4xl sm:leading-[48px] md:text-[42px] md:leading-[55px]">
+        Start Fundraising With
         <br />
-        <span className="text-primary">TokenGiver Today</span>
+        <span className="text-primary text-accent-green">
+          Token Giver Today
+        </span>
       </h1>
-      <div className="relative mt-[-12px] w-full">
-        <img
-          src="/how-to-start-illus.jpg"
-          className="w-full rounded-[10px]"
-          alt=""
-        />
-        <div className="absolute left-[66px] top-[106px] max-w-[515px] text-left">
-          <h3 className="text-raisin-black mb-4 font-agrandir text-3xl">
-            Start Your
-            <span className="font-AgrandirRegular">
-              {" "}
-              Fundraising
-              <br />{" "}
-            </span>
-            Journey Today
-          </h3>
-          <p className="text-dark-grey max-w-[442px] text-base leading-[30px]">
-            Join TokenGiver and turn your vision into reality. Together, we can
-            make a difference one donation at a time.
-          </p>
-        </div>
-      </div>
-      <div className="px-[57px] pt-[42px]">
-        <p className="mb-[30px] text-base leading-[35px] text-foreground-secondary">
-          At TokenGiver, our mission is to revolutionize the world of
-          fundraising by merging the best of blockchain technology with the
-          spirit of giving. We aim to create a world where every donation is not
-          only impactful but also secure, transparent, and accountable.
-        </p>
-        <div className="flex items-center justify-center gap-x-3">
-          <button className="bg-primary rounded-full px-10 py-3 text-base font-semibold text-white">
-            Create a Fundraiser
-          </button>
+      <div className="relative w-full max-w-[1000px] md:h-full md:max-h-none">
+        <div className="relative h-full w-full">
+          <img
+            src="/how-to-start.png"
+            alt="How to start with TokenGiver"
+            className="h-full w-full object-contain md:block"
+          />
         </div>
       </div>
+
+      <p className="mx-auto max-w-[600px]">
+        At TokenGiver, our mission is to revolutionize the world of fundraising
+        by merging the best of blockchain technology with the spirit of giving.
+        We aim to create a world where every donation is not only impactful but
+        also secure, transparent, and accountable.
+      </p>
+
+      <button className="rounded-[25px] bg-accent-green px-6 py-2.5 text-sm text-white transition-colors hover:bg-accent-green/90 sm:text-base">
+        Create a Campaign
+      </button>
     </div>
   );
 }

app/learn/components/StepBlock.tsx

@@ -11,31 +11,40 @@ import React from "react";
 function StepBlock({ step }: { step: Step }) {
   return (
     <div
-      className={`flex ${
-        step.id % 2 ? "flex-row-reverse" : "flex-row"
+      className={`flex gap-8 lg:gap-16 ${
+        step.id % 2
+          ? "flex-col-reverse lg:flex-row-reverse"
+          : "flex-col-reverse lg:flex-row"
       } items-center justify-between pt-5`}
     >
-      <div className="relative font-agrandir text-lg leading-8 text-black">
-        <img src={step.illus} className="h-[555px] w-[547px]" alt="" />
+      <div className="relative h-[350px] w-[350px] shrink-0 font-agrandir text-lg leading-8 text-black md:h-[400px] md:w-[400px]">
+        <img src={step.illus} alt="" />
         <div
-          className={`absolute -top-[15px] flex items-center gap-x-[10px] ${
+          className={`absolute -top-[10px] hidden items-center gap-1 lg:flex ${
             step.id % 2
-              ? "-left-[71px] flex-row-reverse"
-              : "-right-[71px] flex-row"
+              ? "-left-[60px] flex-row-reverse"
+              : "-right-[65px] flex-row"
           }`}
         >
-          <div className="rounded-full border-[.4px] border-[#D9D9D9] bg-white px-4 py-[7px] text-center">
+          <div className="grid h-10 w-10 place-content-center rounded-full border-[.4px] border-[#D9D9D9] bg-white">
             {step.id + 1}
           </div>
           <div>Step</div>
         </div>
       </div>
-      <div className="max-w-[600px] font-medium text-foreground-secondary">
-        <h2 className="text-raisin-black mb-4 font-agrandir text-xl">
+
+      <div className="flex flex-col gap-2 text-foreground-secondary">
+        <p className="flex items-center gap-2 font-agrandir text-base text-foreground-primary">
+          Step{" "}
+          <span className="grid h-[30px] w-[30px] place-content-center items-center rounded-full border-[.4px] border-[#D9D9D9]">
+            {step.id + 1}
+          </span>
+        </p>
+        <h3 className="font-agrandir text-2xl text-foreground-primary">
           {step.title}
-        </h2>
-        <p>{step.subtext}</p>
-        <ul className="ml-[30px] list-disc text-base leading-8">
+        </h3>
+        <p className="font-agrandir">{step.subtext}</p>
+        <ul className="ml-[20px] list-disc space-y-2 text-sm">
           {step.points.map((point, i) => (
             <li key={i}>{point}</li>
           ))}

app/learn/layout.tsx

@@ -9,5 +9,9 @@ export const metadata: Metadata = {
 export default function LearnRootLayout({
   children
 }: Readonly<{ children: React.ReactNode }>) {
-  return <main>{children}</main>;
+  return (
+    <main className="mx-auto mt-[5rem] flex max-w-[1100px] flex-col gap-10 px-4 py-8 md:px-8 xl:px-16">
+      {children}
+    </main>
+  );
 }