feat(website): modified the landing page to a choice menu

modified the landing page to a choice menu

Author: itaim18

apps/website/public/qwik-daisy.png

@@ -0,0 +1,33 @@
+import { component$ } from '@builder.io/qwik';
+
+export interface ThemeButton {
+  theme?: 'Headless' | 'Daisy';
+}
+export default component$(({ theme }: ThemeButton) => {
+  return (
+    <a href="/docs">
+      <button
+        type="button"
+        class={` shadow-md hover:shadow-lg w-96 h-72 w text-slate-100 ease-in duration-500 bg-slate-600 transition-transform rounded-xl active:rounded-3xl ${
+          theme === 'Headless' ? ' hover:bg-yellow-600 ' : ' hover:bg-green-600'
+        }`}
+      >
+        <div class="bg-slate-900">
+          <img
+            src={`${
+              theme === 'Headless' ? '/qwik-headless.png' : '/qwik-daisy.png'
+            }`}
+            class="w-72 h-48 self-center  mx-auto"
+          />
+        </div>
+        <div>
+          <h2>{theme}</h2>
+          <p>
+            Yooo {theme} is the best option 4 u! don't listen to the other box
+            next to me
+          </p>
+        </div>
+      </button>
+    </a>
+  );
+});

apps/website/public/qwik-headless.png

@@ -1,16 +1,16 @@
 import { component$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
+import OptionalThemeButton from '../components/optionalThemeButton/optionalThemeButton';
 
 export default component$(() => {
   return (
     <div class="flex flex-col items-center">
       <h1 class="text-5xl">Qwik UI</h1>
       <p class="mt-6 text-lg">The components library for Qwik</p>
-      <a href="/docs">
-        <button class="link" type="button">
-          All components
-        </button>
-      </a>
+      <div class=" gap-6 flex flex-col lg:flex-row  w-full justify-center justify-items-center">
+        <OptionalThemeButton theme="Headless" />
+        <OptionalThemeButton theme="Daisy" />
+      </div>
     </div>
   );
 });