feat: create dotted borders

Author: mhenriette

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-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>
+        <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,9 +52,9 @@ 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 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">
+            <div key={`numbered-card-${i}`} className="w-full lg:max-w-.5xs divide-dotted-custom">
               <NumberedCard index={i + 1} title={t(card.title) as string} text={t(card.body) as string} />
             </div>
           ))}

src/styles/globals.css

@@ -459,6 +459,16 @@ div {
   .markdown-content h2 {
     font-size: 1.25rem !important;
   }
+  .divide-dotted-custom:not(:first-child):before {
+  content: "";
+  display: block;
+  height: 0.25rem; 
+  margin-bottom: 1.25rem; 
+  background-image: linear-gradient(to right, #E5E7EB 25%, transparent 20%);
+  background-size: 0.625rem 0.313rem;
+  background-repeat: repeat-x;
+}
+
 }
 
 .web3modal-modal-lightbox {