Latest Updates

components/common/SidebarLayout/SidebarLayout.module.css

@@ -1,6 +1,5 @@
 .root {
   @apply relative h-full flex flex-col w-full;
-  min-width: 400px;
 }
 
 .header {

components/ui/Hero/Hero.module.css

@@ -1,18 +1,30 @@
 .root {
-  @apply flex flex-col py-32 mx-auto;
+  @apply flex flex-col py-16 mx-auto;
 }
 
-.headline {
-  @apply text-accent-0 font-extrabold text-5xl leading-none tracking-tight;
+.title {
+  @apply text-accent-0 font-extrabold text-4xl leading-none tracking-tight;
 }
 
-@screen md {
+.description {
+  @apply mt-4 text-xl leading-8 text-accent-2 mb-1 lg:max-w-4xl;
+}
+
+@screen lg {
   .root {
-    @apply flex-row items-center justify-center;
+    @apply flex-row items-start justify-center py-32;
   }
-
-  .headline {
-    @apply text-6xl max-w-xl text-right leading-10 -mt-3;
-    line-height: 4rem;
+  .title {
+    @apply text-5xl max-w-xl text-right leading-10 -mt-3;
+    line-height: 3.5rem;
+  }
+  .description {
+    @apply mt-0 ml-6;
+  }
+}
+
+@screen xl {
+  .title {
+    @apply text-6xl;
   }
 }

components/ui/Hero/Hero.tsx

@@ -14,13 +14,11 @@ const Hero: FC<HeroProps> = ({ headline, description }) => {
     <div className="bg-accent-9 border-b border-t border-accent-2">
       <Container>
         <div className={s.root}>
-          <h2 className={s.headline}>{headline}</h2>
-          <div className="md:ml-6">
-            <p className="mt-4 text-xl leading-8 text-accent-2 mb-1 lg:max-w-4xl">
-              {description}
-            </p>
+          <h2 className={s.title}>{headline}</h2>
+          <div className={s.description}>
+            <p>{description}</p>
             <Link href="/">
-              <a className="text-accent-0 pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
+              <a className="flex items-center text-accent-0 pt-3 font-bold hover:underline cursor-pointer w-max-content">
                 Read it here
                 <ArrowRight width="20" heigh="20" className="ml-1" />
               </a>