Merge pull request #1217 from dacadeorg/fix/mobile-landing-page

fix: mobile version in the home page

Author: musayann

src/components/cards/Numbered.tsx

@@ -27,11 +27,11 @@ interface NumberedProps {
  */
 export default function Numbered({ index = 1, title = "", text = "" }: NumberedProps): ReactElement {
   return (
-    <div>
-      <div className="hidden xl:block md:block">
-        <div className="w-14 h-14 border border-solid border-gray-400 text-gray-400 font-medium rounded-full flex items-center justify-center">{index}</div>
+    <div className="flex items-center md:flex-col md:items-start gap-2.5">
+      <div className="block">
+        <div className="w-9 h-9 md:w-14 md:h-14 border border-solid border-gray-400 text-gray-400 font-medium rounded-full flex items-center justify-center">{index}</div>
       </div>
-      <div className="mt-2.5">
+      <div>
         <span className="font-medium">{title}</span> <span>{text}</span>
       </div>
     </div>

src/components/sections/homepage/Main.tsx

@@ -41,9 +41,7 @@ export default function MainSection(): ReactElement {
     <Section type="default" padding="p-0">
       <div className="w-full lg:py-24 pt-24 pb-8">
         <h1 className="lg:text-8xl md:text-6xl text-5xl leading-none tracking-tighter">{t("page.index.main.title")}</h1>
-        <p className="lg:text-8xl md:text-6xl text-2xl py-2 lg:py-0 md:py-0 sm:py-0 text-black lg:text-gray-400 md:text-gray-400 sm:text-gray-400 tracking-tighter leading-none">
-          {t("page.index.main.subtitle")}
-        </p>
+        <p className="lg:text-8xl md:text-6xl text-4.5xl py-2 lg:py-0 md:py-0 sm:py-0 text-gray-400 tracking-tighter leading-none">{t("page.index.main.subtitle")}</p>
       </div>
       <div className="flex justify-between">
         <div className="w-full max-w-xs hidden lg:block">
@@ -54,7 +52,7 @@ export default function MainSection(): ReactElement {
           </Link>
           <VideoPopup />
         </div>
-        <div className="flex flex-col md:flex-row md:divide-y-0 divide-y divide-gray-900 divide-dotted space-y-5 md:space-y-0 space-x-0 md:space-x-5 justify-end">
+        <div className="flex flex-col md:flex-row md:divide-y-0 divide-y-2 divide-dotted divide-gray-200 space-y-5 md:space-y-0 space-x-0 md:space-x-5 justify-end">
           {cards.map((card, i) => (
             <div key={`numbered-card-${i}`} className="w-full lg:max-w-.5xs pt-5 md:pt-0">
               <NumberedCard index={i + 1} title={t(card.title) as string} text={t(card.body) as string} />

src/styles/globals.css

@@ -447,6 +447,7 @@ div {
   .markdown-content h2 {
     font-size: 1.25rem !important;
   }
+
 }
 
 .web3modal-modal-lightbox {