From 2d2256d946dc69dcb3d20f2f77f383da771b3fd1 Mon Sep 17 00:00:00 2001
From: Suryansh Anand <spirit@anandsur.com>
Date: Thu, 28 Sep 2023 20:34:31 +0530
Subject: [PATCH] feat: cta.

---
 src/components/Footer.tsx      |  2 +-
 src/components/LandingHero.tsx | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index de41548..14373d8 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -213,7 +213,7 @@ export function CopyrightInfo() {
         </div>
       </div>
 
-      <div className="flex flex-col gap-28 md:flex-row">
+      <div className="flex flex-col gap-16 md:flex-row md:gap-28">
         <div className="flex flex-col gap-5">
           <div className="Platform w-40 text-base font-semibold text-black">
             Platform
diff --git a/src/components/LandingHero.tsx b/src/components/LandingHero.tsx
index 45d3661..f655bc2 100644
--- a/src/components/LandingHero.tsx
+++ b/src/components/LandingHero.tsx
@@ -13,13 +13,16 @@ export default function LandingHero() {
         height={isMobile ? "50vh" : "60rem"}
         isMobile={!!isMobile}
       />
-      {/*CTA*/}
+
+      {/*Hero Heading*/}
       <h1 className="left-10 top-28 z-10 w-fit p-0 text-left text-4xl text-white mix-blend-exclusion md:absolute md:left-20 md:top-64 md:text-7xl">
         TrustAuthX Light <br />
         for Business, <br />
         Delight for Devs.
       </h1>
-      <div className="left-20 top-[32rem] z-10 flex items-center gap-20 text-left text-white md:absolute">
+
+      {/*CTA*/}
+      <div className="left-20 top-[32rem] z-10 mt-6 flex flex-col-reverse items-center gap-10 text-left text-white md:absolute md:mt-0 md:flex-row md:gap-20">
         <button className="z-10 flex items-center gap-3 rounded-full border-2 border-[#F35815] px-5 py-3 mix-blend-exclusion">
           Let’s Get Started for Free{" "}
           <svg
@@ -53,13 +56,13 @@ export default function LandingHero() {
           </svg>
           <p className="flex flex-col items-start">
             <span className="text-xl text-[#9EFE00]">Watch Demo</span>
-            <span className="text-sm">2 min</span>
+            <span className="text-sm text-black md:text-white">2 min</span>
           </p>
         </button>
       </div>
 
       {/*Low code*/}
-      <div className="-mt-[25rem] mb-[6.7rem] md:relative">
+      <div className="relative md:-mt-[25rem] md:mb-[6.7rem]">
         <Image src={appDemo} alt="Preview of TrustAuthX app" />
         <div className="mt-10 p-4 md:absolute md:bottom-[1rem] md:right-[10rem] md:text-white">
           <svg