UI fixes on the modal and Hero section

LitPad · Oct 8, 2024 · 0362be6 · 0362be6
1 parent 2ec2b4b
commit 0362be6
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 42 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,11 +6,12 @@ import { Input } from "./components/ui/input";
 import axios from "axios";
 import SocialLink from "./components/shared/SocialLink";
 import WelcomeLitpadModal from "./components/shared/WelcomeLitpadModal";
+import HeroSection from "./components/shared/HeroSection";
 
 function App() {
   const baseURL = import.meta.env.VITE_API_URL;
 
-  const [openModal, setOpenModal] = useState(false);
+  const [openModal, setOpenModal] = useState(true);
   const [loading, setLoading] = useState(false);
   const [updatingWaitList, setUpdatingWaitList] = useState(false);
   const [version, setVersion] = useState(0);
@@ -101,36 +102,7 @@ function App() {
           </div>
         </header>
         {/* hero */}
-        <div className="border border-[#F6F5F6] py-[60px] px-[15px] lg:p-[90px] mt-[70px] lg:m-[50px] rounded-[36px] flex flex-col items-center">
-          <span className=" flex flex-wrap justify-center  items-center">
-            <span className="text-[26px] md:text-[40px] xl:text-[56px] font-[600] text-[#2B1744]">
-              Discover Captivating Stories
-            </span>
-            <div className="bg-purple-gradient rounded-full px-[17px] py-[5px] lg:px-[23px] lg:py-[7px] flex items-center mx-2 lg:mx-[16px]">
-              <img
-                src="/assets/icons/heroBook.svg"
-                className="h-[20px] lg:h-[36px]"
-                alt="pen "
-              />
-            </div>
-            <span className="text-[26px] md:text-[40px] xl:text-[56px] font-[600] text-[#2B1744] text-wrap text-center">
-              Across
-            </span>
-          </span>
-          <span className="text-[26px] text-center md:text-[40px] xl:text-[56px] font-[600] text-[#2B1744]">
-            Genres You Love
-          </span>
-          <p className="text-[#7F7589] text-[14px] lg:text-[18px] font-[500] mb-[24px] max-w-[550px] text-wrap text-center px-4 pt-10 ">
-            LitPad offers you unlimited access to an ever-growing library of
-            quality novels, all for one budget-friendly subscription
-          </p>
-          <button
-            onClick={scrollToJoinWaitlist}
-            className="bg-btn-purple-gradient rounded-full text-[#FFFFFF] text-[15px] font-[600] h-[46px] w-[135px] lg:h-[52px] lg:w-[136px] hover:bg-purple-600 mt-4 "
-          >
-            Join waitlist
-          </button>
-        </div>
+        <HeroSection onClick={() => setOpenModal(true)} />
       </section>
 
       {/* Cards */}

diff --git a/src/components/shared/HeroSection.tsx b/src/components/shared/HeroSection.tsx
@@ -0,0 +1,76 @@
+type HeroSectionProps = {
+  onClick: () => void;
+};
+
+const HeroSection = ({ onClick }: HeroSectionProps) => {
+  return (
+    <div className="border border-[#F6F5F6] py-[60px] px-[15px] lg:p-[90px] mt-[70px] lg:m-[50px] rounded-[36px] flex flex-col items-center">
+      <div className="hidden sm:block">
+        <DestopHeroSection />
+      </div>
+      <div className="sm:hidden">
+        <MobileHeroSection />
+      </div>
+      <span className="text-[26px] text-center md:text-[40px] xl:text-[56px] font-[600] text-[#2B1744]">
+        Genres You Love
+      </span>
+      <p className="text-[#7F7589] text-[14px] lg:text-[18px] font-[500] mb-[24px] max-w-[550px] text-wrap text-center px-4 pt-10 ">
+        LitPad offers you unlimited access to an ever-growing library of quality
+        novels, all for one budget-friendly subscription
+      </p>
+      <button
+        onClick={onClick}
+        className="bg-btn-purple-gradient rounded-full text-[#FFFFFF] text-[15px] font-[600] h-[46px] w-[135px] lg:h-[52px] lg:w-[136px] hover:bg-purple-600 mt-4 "
+      >
+        Join waitlist
+      </button>
+    </div>
+  );
+};
+
+export default HeroSection;
+
+export const MobileHeroSection = () => {
+  return (
+    <span className="flex flex-col justify-center items-center">
+      <span className="text-[26px] md:text-[40px] xl:text-[56px] font-[600] text-[#2B1744]">
+        Discover Captivating
+      </span>
+      <div className="flex">
+        <span className="text-[26px] md:text-[40px] xl:text-[56px] font-[600] text-[#2B1744]">
+          Stories
+        </span>
+        <div className="bg-purple-gradient rounded-full px-[17px] py-[5px] lg:px-[23px] lg:py-[7px] flex items-center mx-2 lg:mx-[16px]">
+          <img
+            src="/assets/icons/heroBook.svg"
+            className="h-[20px] lg:h-[36px]"
+            alt="pen "
+          />
+        </div>
+        <span className="text-[26px] md:text-[40px] xl:text-[56px] font-[600] text-[#2B1744] text-wrap text-center">
+          Across
+        </span>
+      </div>
+    </span>
+  );
+};
+
+export const DestopHeroSection = () => {
+  return (
+    <span className="flex flex-wrap justify-center items-center">
+      <span className="text-[26px] md:text-[40px] xl:text-[56px] font-[600] text-[#2B1744]">
+        Discover Captivating Stories
+      </span>
+      <div className="bg-purple-gradient rounded-full px-[17px] py-[5px] lg:px-[23px] lg:py-[7px] flex items-center mx-2 lg:mx-[16px]">
+        <img
+          src="/assets/icons/heroBook.svg"
+          className="h-[20px] lg:h-[36px]"
+          alt="pen "
+        />
+      </div>
+      <span className="text-[26px] md:text-[40px] xl:text-[56px] font-[600] text-[#2B1744] text-wrap text-center">
+        Across
+      </span>
+    </span>
+  );
+};
diff --git a/src/components/shared/ShareSocial.tsx b/src/components/shared/ShareSocial.tsx
@@ -1,17 +1,22 @@
 type ShareSocialProps = {
   text: string;
   img: string;
+  href: string;
 };
-const ShareSocial = ({ text, img }: ShareSocialProps) => {
+const ShareSocial = ({ text, img, href }: ShareSocialProps) => {
   return (
-    <div className="bg-white py-[14px] px-4 rounded-[12px] flex justify-center items-center gap-2">
-      <span className="text-[16px]">{text}</span>
+    <a
+      href={href}
+      target="_blank"
+      className="bg-white py-[14px] px-4 rounded-[12px] flex justify-center items-center gap-2"
+    >
+      <span className="text-[14px] md:text-[16px]">{text}</span>
       <img
         className="w-[18px] h-[18px]"
         src={`/assets/icons/${img}`}
         alt="ig"
       />
-    </div>
+    </a>
   );
 };
 

diff --git a/src/components/shared/WelcomeLitpadModal.tsx b/src/components/shared/WelcomeLitpadModal.tsx
@@ -13,26 +13,38 @@ const WelcomeLitpadModal = ({
   return (
     <>
       <Modal size="xl" show={openModal} onClose={onClose}>
-        <div className="relative py-[20px] px-[30px]">
+        <div className="relative py-[20px] px-[20px] md:px-[30px]">
           <X
             onClick={() => onClose()}
             className="absolute top-5 right-5 cursor-pointer"
           />
-          <div className="text-center text-[26px] text-[#120024] mt-8">
+          <div className="text-center text-[20px] md:text-[26px] text-[#120024] mt-8">
             Welcome to the World of Endless Stories
           </div>
           <p className="text-[#7F7589] text-[14px] lg:text-[18px] font-[500] mb-[24px] max-w-[550px] text-wrap text-center px-4 mt-4">
             You're one step closer to unlocking thousands of captivating novels.
             Great stories are even better with friends – share the adventure!
           </p>
-          <div className="bg-[#F6F5F6] w-full px-[70px] py-[20px] mb-6 rounded-[20px] flex flex-col items-center">
+          <div className="bg-[#F6F5F6] w-full px-[25px]  md:px-[70px] py-[20px] mb-6 rounded-[20px] flex flex-col items-center">
             <p className="text-[#7F7589] text-[14px] lg:text-[16px] font-[500] text-center mb-[16px]">
               Want to help fellow book loves? Spread the word about litpad
             </p>
-            <div className="max-w-[250px] flex flex-col gap-3">
-              <ShareSocial text="Share on Instagram" img="ig.svg" />
-              <ShareSocial text="Share on Twitter" img="x.svg" />
-              <ShareSocial text="Share on Facebook" img="fb.svg" />
+            <div className="flex flex-col gap-3">
+              <ShareSocial
+                text="Share on Whatsapp"
+                img="ig.svg"
+                href="https://api.whatsapp.com/send?text=LitPad%20is%20launching%20a%20platform%20where%20readers%20can%20discover%20quality%20novels%20across%20all%20their%20favorite%20genres%20for%20an%20affordable%20fee.%20Join%20the%20waitlist%20here%3A%20join.litpad.app"
+              />
+              <ShareSocial
+                text="Share on Twitter"
+                img="x.svg"
+                href="https://twitter.com/intent/tweet?text=LitPad%20%28@LitPadHQ%29%20is%20launching%20a%20platform%20where%20readers%20can%20discover%20quality%20novels%20across%20all%20their%20favorite%20genres%20for%20an%20affordable%20fee.%20Join%20the%20waitlist%20here%3A%20join.litpad.app"
+              />
+              <ShareSocial
+                text="Share on Facebook"
+                img="fb.svg"
+                href="https://www.facebook.com/sharer/sharer.php?u=https://join.litpad.app&quote=LitPad%20%28@LitPadHQ%29%20is%20launching%20a%20platform%20where%20readers%20can%20discover%20quality%20novels%20across%20all%20their%20favorite%20genres%20for%20an%20affordable%20fee.%20Join%20the%20waitlist%20here%3A%20join.litpad.app"
+              />
             </div>
           </div>
         </div>