fix: 🐛 landing page padding

CAFECA-IO · Sep 22, 2023 · 1ddfb67 · 1ddfb67
1 parent fafa6cf
commit 1ddfb67
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 80 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "src",
-  "version": "0.8.0+49.1",
+  "version": "0.8.0+49.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/src/components/app_download_container/app_download_container.tsx b/src/components/app_download_container/app_download_container.tsx
@@ -8,16 +8,15 @@ type TranslateFunction = (s: string) => string;
 const AppDowloadContainer = () => {
   const {t}: {t: TranslateFunction} = useTranslation('common');
 
-  // const containerDescription = `container mx-auto flex items-center md:flex-row flex-col`;
   const desktopVersionBreakpoint = 'hidden lg:flex';
   const mobileVersionBreakpoint = 'flex lg:hidden';
 
   return (
     <>
-      {/* Desktop */}
+      {/* Info: Desktop (20230922 - Shirley) */}
       <div className={`${desktopVersionBreakpoint}`}>
-        <section className={`bg-black py-24`}>
-          <h1 className="flex shrink-0 items-center justify-center py-20 px-2 text-lg font-bold text-white sm:text-2xl md:px-20 md:text-3xl lg:text-4xl xl:text-6xl">
+        <section className={`bg-black`}>
+          <h1 className="flex shrink-0 items-center justify-center pb-20 px-2 text-lg font-bold text-white sm:text-2xl md:px-20 md:text-3xl lg:text-4xl xl:text-6xl">
             {t('HOME_PAGE.APP_DOWLOAD_CONTAINER_TITLE')}&nbsp;
             <span className="text-cyan-400">
               {t('HOME_PAGE.APP_DOWLOAD_CONTAINER_TITLE_HIGHLIGHT')}
@@ -26,7 +25,7 @@ const AppDowloadContainer = () => {
             {t('HOME_PAGE.APP_DOWLOAD_CONTAINER_TITLE_2')}
           </h1>
 
-          <div className="mx-auto flex flex-wrap items-center space-y-2 pb-24 md:flex-row">
+          <div className="mx-auto flex flex-wrap items-center space-y-2 md:flex-row">
             <div className="mx-auto mb-10 max-w-md md:mb-0 md:w-1/2 lg:max-w-sm 2xl:ml-1/8">
               <div className="flex justify-center">
                 <Image
@@ -71,7 +70,7 @@ const AppDowloadContainer = () => {
         </section>
       </div>
 
-      {/* Mobile */}
+      {/* Info: Mobile (20230922 - Shirley) */}
       <div className={`${mobileVersionBreakpoint}`}>
         <section className={`bg-black`}>
           <div className="flex shrink-0 flex-col items-center justify-center space-y-2 px-2 pt-0 pb-10 text-2xl font-bold text-white sm:space-y-5 sm:text-3xl md:px-20 md:pb-20 md:text-4xl">
@@ -84,7 +83,7 @@ const AppDowloadContainer = () => {
             <div>{t('HOME_PAGE.APP_DOWLOAD_CONTAINER_TITLE_2')}</div>
           </div>
 
-          <div className="mx-auto flex flex-wrap items-center space-y-2 pb-24 md:flex-row">
+          <div className="mx-auto flex flex-wrap items-center space-y-2 md:flex-row">
             <div className="mx-auto flex w-4/5 flex-col flex-wrap items-center justify-center py-5 pl-1/10 md:w-4/5">
               <Image
                 className="flex justify-center rounded object-contain"
@@ -96,7 +95,6 @@ const AppDowloadContainer = () => {
             </div>
 
             <div className="mx-auto mb-10 max-w-md md:mb-0 md:w-1/2 lg:max-w-sm 2xl:ml-1/8">
-              {/* QR Code Size Automatic Toggle */}
               <div className="hidden justify-center md:flex">
                 <Image
                   className="rounded object-cover object-center"

diff --git a/src/components/crypto_category/crypto_category.tsx b/src/components/crypto_category/crypto_category.tsx
@@ -82,7 +82,7 @@ const CryptoCategory = ({...otherProps}) => {
         </div>
       </div>
       <div className="flex w-full items-center justify-center">
-        <div className="mb-5 grid grid-cols-2 space-y-4 space-x-4 lg:grid-cols-5">
+        <div className="grid grid-cols-2 space-y-4 space-x-4 lg:grid-cols-5">
           {renderCryptoCard}
         </div>
       </div>

diff --git a/src/components/hero/hero.tsx b/src/components/hero/hero.tsx
@@ -21,26 +21,16 @@ neutra sustainable fingerstache kickstarter.`;
 
   const displayedImg = <Image src={img} alt="img" width={1252} height={879} />;
 
-  // const displayedImg = img ? (
-  //   img
-  // ) : (
-  //   <img
-  //     className="h-full w-full object-cover object-center"
-  //     src="https://dummyimage.com/600x300"
-  //     alt="stats"
-  //   />
-  // );
-
   const desktopVersionBreakpoint = 'hidden lg:flex';
   const mobileVersionBreakpoint = 'flex lg:hidden';
 
   return (
     <>
-      {/* Desktop */}
+      {/* Info: Desktop (20230922 - Shirley) */}
       <section
         className={`${desktopVersionBreakpoint} container mx-auto flex w-screen justify-center bg-black text-gray-400`}
       >
-        <div className="flex flex-col items-center pb-24 pl-1/20 md:flex-row xl:pl-1/50">
+        <div className="flex flex-col items-center pl-1/20 md:flex-row xl:pl-1/50">
           <div className="mt-1 flex max-w-xl flex-col items-center text-center sm:text-start md:mr-28 md:mt-10 md:w-2/5 md:items-start md:pl-16 md:text-left lg:mt-0 lg:pl-8 xl:mt-5 xl:ml-20">
             <h1 className="mb-8 text-3xl font-medium text-white sm:text-4xl md:text-center">
               {displayedHeading}
@@ -52,12 +42,12 @@ neutra sustainable fingerstache kickstarter.`;
         </div>
       </section>
 
-      {/* Mobile */}
+      {/* Info: Mobile (20230922 - Shirley) */}
 
       <section
         className={`${mobileVersionBreakpoint} container mx-auto w-screen justify-center bg-black text-gray-400`}
       >
-        <div className="flex flex-col items-center pb-24">
+        <div className="flex flex-col items-center">
           <div className="mb-20 w-5/6 xs:mb-28">{displayedImg}</div>
 
           <div className="mx-auto mt-0 flex max-w-lg flex-col items-center justify-center text-center align-baseline">
@@ -69,32 +59,7 @@ neutra sustainable fingerstache kickstarter.`;
             </p>
           </div>
         </div>
-        {/* <div className="flex flex-col items-center pb-24">
-          <div className="w-5/6">{displayedImg}</div>
-
-          <div className="mt-0 flex max-w-lg flex-col items-center justify-center text-center">
-            <h1 className="mb-8 text-center text-3xl font-medium text-white xs:text-4xl">
-              {displayedHeading}
-            </h1>
-            <p className="mb-8 text-lg leading-8 text-blue-400">{displayedContent}</p>
-          </div>
-        </div> */}
       </section>
-
-      {/* <section
-        className={`${mobileVersionBreakpoint} container mx-auto flex w-screen justify-center bg-black text-gray-400`}
-      >
-        <div className="flex flex-col items-center pb-24 md:flex-row">
-          <div className="mt-1 flex max-w-xl flex-col items-center text-center sm:text-start md:mr-32 md:mt-10 md:w-2/5 md:items-start md:pl-16 md:text-left lg:mt-0 lg:pl-8 xl:mt-5 xl:ml-20">
-            <h1 className="mb-8 text-3xl font-medium text-white sm:text-4xl md:text-center">
-              {displayedHeading}
-            </h1>
-            <p className="mb-8 text-lg leading-10">{displayedContent}</p>
-          </div>
-
-          <div className="mb-10 w-5/6 md:mb-0 md:w-1/2 lg:w-full lg:max-w-lg">{displayedImg}</div>
-        </div>
-      </section> */}
     </>
   );
 };

diff --git a/src/components/hero1/hero1.tsx b/src/components/hero1/hero1.tsx
@@ -34,11 +34,11 @@ neutra sustainable fingerstache kickstarter.`;
 
   return (
     <>
-      {/* Desktop */}
+      {/* Info: Desktop (20230922 - Shirley) */}
       <section
         className={`${desktopVersionBreakpoint} container mx-auto flex w-screen justify-center bg-black text-gray-400`}
       >
-        <div className="flex flex-col items-center pb-24 pl-1/20 md:flex-row xl:pl-1/50">
+        <div className="flex flex-col items-center pl-1/20 md:flex-row xl:pl-1/50">
           <div className="mt-1 flex max-w-xl flex-col items-center text-center sm:text-start md:mr-28 md:mt-10 md:w-2/5 md:items-start md:pl-16 md:text-left lg:mt-0 lg:pl-8 xl:mt-5 xl:ml-20">
             <h1 className="mb-8 text-3xl font-medium text-white sm:text-4xl md:text-center">
               {displayedHeading}
@@ -50,11 +50,11 @@ neutra sustainable fingerstache kickstarter.`;
         </div>
       </section>
 
-      {/* Mobile */}
+      {/* Info: Mobile (20230922 - Shirley) */}
       <section
         className={`${mobileVersionBreakpoint} container mx-auto w-screen justify-center bg-black text-gray-400`}
       >
-        <div className="flex flex-col items-center pb-24">
+        <div className="flex flex-col items-center">
           <div className="mb-10 w-5/6">{displayedImg}</div>
 
           <div className="mx-auto mt-0 flex max-w-lg flex-col items-center justify-center text-center align-baseline">

diff --git a/src/components/hero_description/hero_description.tsx b/src/components/hero_description/hero_description.tsx
@@ -41,27 +41,24 @@ export default function HeroDescription() {
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center overflow-hidden pt-24">
-      {/* Body */}
       <div className="w-full">
         <Cta />
         <div className="py-0"></div>
 
         <StatisticBlock />
         <div className="py-10"></div>
 
-        {/* <MarketProvider> */}
         <ReserveRatio />
         <div className="py-10"></div>
 
         <AuditReport />
         <div className="py-10"></div>
 
         <CryptoCategory />
-        {/* </MarketProvider> */}
-        <div className="py-10 lg:py-20"></div>
+        <div className="py-10 lg:py-144px"></div>
 
         <Banner />
-        <div className="py-16 lg:pb-2/5 lg:pt-20"></div>
+        <div className="py-20 lg:py-200px"></div>
 
         {/* Web3.0 */}
         <HeroReverse
@@ -70,7 +67,7 @@ export default function HeroDescription() {
           content={t('HOME_PAGE.WEB_3_DESCRIPTION')}
           img="/elements/[email protected]"
         />
-        <div className="py-5 lg:py-40"></div>
+        <div className="py-20 lg:py-40"></div>
 
         {/* Easy Trade */}
         <Hero
@@ -83,7 +80,7 @@ export default function HeroDescription() {
           content={t('HOME_PAGE.EASY_TRADE_DESCRIPTION')}
           img="/elements/[email protected]"
         />
-        <div className="py-5 lg:py-40"></div>
+        <div className="py-20 lg:py-40"></div>
 
         {/* Secure System */}
         <HeroReverse1
@@ -98,7 +95,7 @@ export default function HeroDescription() {
           content={t('HOME_PAGE.SECURE_SYSTEM_DESCRIPTION')}
           img="/elements/[email protected]"
         />
-        <div className="py-5 lg:py-40"></div>
+        <div className="py-20 lg:py-40"></div>
 
         {/* Free Online Courses */}
         <Hero1
@@ -113,12 +110,14 @@ export default function HeroDescription() {
           content={t('HOME_PAGE.FREE_ONLINE_COURSES_DESCRIPTION')}
           img={`/elements/group_15201.svg`}
         />
-        <div className="py-5 lg:py-10"></div>
+        <div className="py-20 lg:py-40"></div>
 
         {/* App download */}
         <div className="flex w-full justify-center">
           <AppDowloadContainer />
         </div>
+
+        <div className="py-20 lg:py-40"></div>
       </div>
     </div>
   );

diff --git a/src/components/hero_reverse/hero_reverse.tsx b/src/components/hero_reverse/hero_reverse.tsx
@@ -40,11 +40,11 @@ chambray.`;
 
   return (
     <>
-      {/* Desktop */}
+      {/* Info: Desktop (20230922 - Shirley) */}
       <section
         className={`${desktopVersionBreakpoint} container mx-auto w-screen justify-center bg-black text-gray-400`}
       >
-        <div className="flex flex-col items-center pb-24 lg:flex-row">
+        <div className="flex flex-col items-center lg:flex-row">
           <div className="mb-10 w-5/6 md:mb-0 md:w-1/2 lg:w-full lg:max-w-lg">{displayedImg}</div>
 
           <div className="mt-1 flex max-w-xl flex-col items-center justify-center text-center sm:text-start md:mt-10 md:w-1/2 md:items-start md:pl-16 md:text-left lg:mt-0 lg:pl-8 xl:mt-10 xl:ml-20">
@@ -56,11 +56,11 @@ chambray.`;
         </div>
       </section>
 
-      {/* Mobile */}
+      {/* Info: Mobile (20230922 - Shirley) */}
       <section
         className={`${mobileVersionBreakpoint} container mx-auto w-screen justify-center bg-black text-gray-400`}
       >
-        <div className="flex flex-col items-center pb-24">
+        <div className="flex flex-col items-center">
           <div className="mb-10 w-2/3">{displayedImg}</div>
 
           <div className="mx-auto mt-5 flex max-w-lg flex-col items-center justify-center text-center align-baseline xs:mt-10 sm:mt-14">

diff --git a/src/components/hero_reverse1/hero_reverse1.tsx b/src/components/hero_reverse1/hero_reverse1.tsx
@@ -40,11 +40,11 @@ chambray.`;
 
   return (
     <>
-      {/* Desktop */}
+      {/* Info: Desktop (20230922 - Shirley) */}
       <section
         className={`${desktopVersionBreakpoint} container mx-auto w-screen justify-center bg-black text-gray-400`}
       >
-        <div className="flex flex-col items-center pb-24 lg:flex-row">
+        <div className="flex flex-col items-center lg:flex-row">
           <div className="mb-10 w-5/6 md:mb-0 md:w-1/2 lg:w-full lg:max-w-lg">{displayedImg}</div>
 
           <div className="mt-1 flex max-w-md flex-col items-center text-center md:mt-10 md:w-1/2 lg:mt-0 lg:items-start lg:pl-8 lg:text-left xl:mt-5 xl:ml-20">
@@ -56,11 +56,11 @@ chambray.`;
         </div>
       </section>
 
-      {/* Mobile */}
+      {/* Info: Mobile (20230922 - Shirley) */}
       <section
         className={`${mobileVersionBreakpoint} container mx-auto w-screen justify-center bg-black text-gray-400`}
       >
-        <div className="flex flex-col items-center pb-24">
+        <div className="flex flex-col items-center">
           <div className="mb-0 w-5/6">{displayedImg}</div>
 
           <div className="mx-auto mt-0 flex max-w-lg flex-col items-center justify-center text-center align-baseline">
@@ -72,16 +72,6 @@ chambray.`;
             </p>
           </div>
         </div>
-        {/* <div className="flex flex-col items-center pb-24">
-          <div className="w-5/6">{displayedImg}</div>
-
-          <div className="mt-0 flex max-w-lg flex-col items-center justify-center text-center">
-            <h1 className="mb-8 text-center text-3xl font-medium text-white xs:text-4xl">
-              {displayedHeading}
-            </h1>
-            <p className="mb-8 text-lg leading-8 text-blue-400">{displayedContent}</p>
-          </div>
-        </div> */}
       </section>
     </>
   );

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -170,6 +170,7 @@ module.exports = {
         '130px': '130px',
         '134px': '134px',
         '140px': '140px',
+        '144px': '144px',
         '150px': '150px',
         '158px': '158px',
         '160px': '160px',