Docs: update landing page

landing/src/components/CTA.astro

@@ -6,22 +6,44 @@ import { IconBox } from "@/components/ui/iconBox";
 const title = Astro.props.title;
 const buttonText = Astro.props.buttonText;
 const url = Astro.props.url;
+const buttonText2 = Astro.props.buttonText2;
+const url2 = Astro.props.url2;
 ---
 
 <div class="flex flex-col items-center gap-5 pt-6">
   <IconBox variant="secondary">
     <slot />
   </IconBox>
   <h2 class="text-md font-medium">{title}</h2>
-  <Button variant="outline" size="sm">
-    <a
-      href={url}
-      target="_blank"
-      rel="noopener noreferrer"
-      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 class="flex w-full flex-col items-center gap-3">
+    <Button variant="outline" size="wfull">
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        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>
+    {
+      buttonText2 && (
+        <div class="flex w-full flex-col items-center gap-3">
+          <p class="text-secondary font-aeonik text-md font-normal">or</p>
+          <Button variant="outline" size="wfull">
+            <a
+              href={url2}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex flex-row items-center justify-center"
+            >
+              <p class="text-medium px-2 text-sm">{buttonText2}</p>
+              <ArrowRight strokeWidth={1} className="h-5 w-5 md:h-6 md:w-6" />
+            </a>
+          </Button>
+        </div>
+      )
+    }
+  </div>
 </div>

landing/src/components/DebugCasesSection.astro

@@ -61,14 +61,11 @@ const debugCases = [
       title="Watch full video of this case"
       buttonText="Go to video"
       url="https://www.youtube.com/watch?v=mTYxjXdMoNs"
-      >{
-        (
-          <Youtube
-            className="h-7 w-7 sm:h-8 sm:w-8 md:h-10 md:w-10"
-            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/src/components/RoadmapSection.astro

@@ -2,6 +2,7 @@
 import ContentWrapper from "../components/ContentWrapper.tsx";
 import { Accordion } from "@/components/ui/AccordionWrapper";
 import CTA from "@/components/CTA.astro";
+import { Lightbulb } from "lucide-react";
 
 const accordionData = [
   {
@@ -63,16 +64,15 @@ const accordionData = [
     <Accordion data={accordionData} client:idle />
 
     <CTA
-      title="Have a feature idea?"
-      buttonText="Let us know"
+      title="Have a feature idea? Let us know!"
+      buttonText="Submit a Github issue"
       url="https://github.com/software-mansion/live-debugger/issues/new/choose"
+      buttonText2="Fill out feedback survey"
+      url2="https://docs.google.com/forms/d/e/1FAIpQLSftsztVznsYRt6G-rv6Wk-ZppS4SkgM-5r6o38YxZYieatPLQ/viewform?usp=sharing&ouid=114462502893566863638"
     >
-      <img
-        src={`/live-debugger/assets/github-3.svg`}
-        class="h-7 w-7 sm:h-8 sm:w-8 md:h-10 md:w-10"
-        alt={"github icon"}
-        width="16"
-        height="16"
+      <Lightbulb
+        className="h-7 w-7 sm:h-8 sm:w-8 md:h-10 md:w-10"
+        strokeWidth={1}
       />
     </CTA>
   </ContentWrapper>

landing/src/components/ui/button.tsx

@@ -20,6 +20,7 @@ const buttonVariants = cva(
       size: {
         default: "max-sm:w-full px-6 py-3 md:py-3",
         sm: "max-sm:w-full px-5 py-3 md:py-3.5",
+        wfull: "px-5 py-2 md:py-2.5 w-full px-6",
         footer: "max-sm:w-full px-3 py-2 max-md:py-3 md:py-2.5",
         xs: "max-sm:w-[calc(100%-50px)] px-3 py-2 md:py-2.5",
       },