add docs homepage

Author: gioboa

apps/website/public/images/docs/sfui-hero.png

@@ -27,6 +27,8 @@ export const RouterHead = component$(() => {
       {head.styles.map((s) => (
         <style {...s.props} dangerouslySetInnerHTML={s.style} />
       ))}
+
+      <script async defer src="https://buttons.github.io/buttons.js"></script>
     </>
   );
 });

apps/website/src/components/router-head/router-head.tsx

@@ -0,0 +1,43 @@
+---
+title: Qwik Storefront UI Documentation
+---
+
+import { Link } from '@builder.io/qwik-city';
+import { SfIconChevronRight } from 'qwik-storefront-ui';
+
+<div class="container relative mx-auto p-4 md:px-10 max-w-7xl gap-y-16 bg-inherit">
+  <div class="grid grid-cols-2 custom-block mt-16 gap-8">
+    <div class="col-span-2 lg:col-span-1 flex justify-center flex-col order-2 lg:order-1">
+      <div class="flex flex-wrap mb-2">
+        <a class="github-button" 
+           href="https://github.com/qwikifiers/qwik-storefront-ui" 
+           data-icon="octicon-star" 
+           data-size="large" 
+           data-show-count="true" 
+           aria-label="Star buttons/github-buttons on GitHub"
+        >Star the Project</a>
+      </div>
+      <h1 class="text-5xl font-extrabold mt-4">Qwik Storefront UI</h1>
+      <span class="text-xl mt-4">
+        Fast, accessible, and fully customizable components built for
+        e-commerce.
+      </span>
+      <div class="mt-8 flex items-center">
+        <Link
+          href="/qwik/getting-started.html"
+          class="px-4 py-2 rounded-lg font-medium bg-gradient-to-r from-blue-500 to-indigo-500 text-black text-opacity-80 flex items-center filter hover:brightness-110 transition-all text-white text-xl"
+        >
+          Getting started
+          <SfIconChevronRight />
+        </Link>
+      </div>
+    </div>
+    <div class="col-span-2 lg:col-span-1 order-1 lg:order-2">
+      <img
+        src="./images/docs/sfui-hero.png"
+        class=" mx-auto max-w-xs sm:max-w-md"
+      />
+    </div>
+
+  </div>
+</div>