Docs: update landing page (#837)

* feat: update landing page

Author: p-malecki

landing/public/assets/github-2.svg

@@ -14,9 +14,9 @@ const url = Astro.props.url;
   </IconBox>
   <h2 class="text-md font-medium">{title}</h2>
   <Button variant="outline" size="sm">
-    <a href={url} class="flex flex-row items-center justify-center gap-2">
-      <p class="text-medium text-sm">{buttonText}</p>
-      <ArrowRight strokeWidth={2} />
+    <a href={url} class="flex flex-row items-center justify-center">
+      <p class="text-medium px-2 text-sm">{buttonText}</p>
+      <ArrowRight strokeWidth={1} className="h-5 w-5 md:h-6 md:w-6" />
     </a>
   </Button>
 </div>

landing/public/assets/github-3.svg

@@ -39,7 +39,7 @@ const debugCases = [
   <ContentWrapper
     className="font-aeonik text-primary flex flex-col items-center justify-center gap-10 sm:gap-14 md:gap-16 lg:gap-20"
   >
-    <h1 class="text-center text-xl font-bold">Debug case</h1>
+    <h1 class="text-center text-2xl font-bold">Debug case</h1>
 
     <div
       class="flex flex-row flex-wrap justify-around gap-6 sm:gap-12 md:gap-14 lg:gap-16"
@@ -61,7 +61,14 @@ const debugCases = [
       title="Watch full video of this case"
       buttonText="Go to video"
       url="https://www.youtube.com/watch?v=mTYxjXdMoNs"
-      >{(<Youtube strokeWidth={1} />)}
+      >{
+        (
+          <Youtube
+            className="h-7 w-7 sm:h-8 sm:w-8 md:h-10 md:w-10"
+            strokeWidth={1}
+          />
+        )
+      }
     </CTA>
   </ContentWrapper>
 </section>

landing/public/assets/step-1.png

@@ -46,7 +46,7 @@ const mainFeatures = [
   <ContentWrapper
     className="font-aeonik text-primary flex w-full flex-col items-center justify-center gap-10 max-sm:px-8 sm:gap-14 md:gap-16 lg:gap-20"
   >
-    <h1 class="text-center text-xl font-bold">Main features</h1>
+    <h1 class="text-center text-2xl font-bold">Main features</h1>
 
     <div
       class="grid grid-cols-1 grid-rows-4 gap-y-6 md:grid-cols-2 md:grid-rows-2 md:gap-x-10 md:gap-y-10 lg:gap-x-14 lg:gap-y-14"
@@ -61,7 +61,7 @@ const mainFeatures = [
               description={feature.description}
               client:visible
             >
-              <Icon />
+              <Icon className="h-8 w-8 md:h-10 md:w-10 lg:h-11 lg:w-11 stroke-1" />
             </BlockWrapper>
           );
         })
@@ -70,11 +70,11 @@ const mainFeatures = [
 
     <Button variant="outline" size="sm"
       ><a
-        href="https://hexdocs.pm/live_debugger/0.1.3/readme.html"
-        class="flex flex-row items-center justify-center gap-1"
+        href="https://hexdocs.pm/live_debugger/features.html"
+        class="flex flex-row items-center justify-center gap-1 px-2"
       >
-        <p class="text-thin text-sm">Explore all</p>
-        <ArrowRight strokeWidth={2} />
+        <p class="text-normal text-sm">Explore all</p>
+        <ArrowRight strokeWidth={1} className="h-5 w-5 md:h-6 md:w-6" />
       </a></Button
     >
   </ContentWrapper>

landing/public/assets/step-2.png

@@ -12,16 +12,16 @@ const tabData = [
 
 <section
   id="gettingstarted"
-  class="bg-primary relative flex min-h-[500px] w-full scroll-m-10 flex-col items-center justify-center overflow-hidden py-16 max-sm:px-6 sm:py-20 md:py-36"
+  class="bg-primary relative flex w-full scroll-m-10 flex-col items-center justify-center overflow-hidden py-16 max-md:mb-10 sm:py-20 md:py-36"
 >
   <ContentWrapper
     className="font-aeonik z-20 flex w-full flex-col items-center justify-center gap-10 sm:gap-14 md:gap-16 lg:gap-20"
   >
-    <h1 class="text-primary-foreground text-center text-xl font-bold">
+    <h1 class="text-primary-foreground text-center text-2xl font-bold">
       Getting started
     </h1>
 
-    <Tabs class="h-full w-full" tabData={tabData} client:idle>
+    <Tabs class="relative h-full w-full" tabData={tabData} client:idle>
       <MixInstallTab slot="mix" client:idle />
       <IgniterInstallTab slot="igniter" client:idle />
     </Tabs>