feat: showcase demos (#55)

* fix: scrolling

* feat: demos and existing work

src/components/vgv_card/vgv-card-header.astro

@@ -0,0 +1,14 @@
+---
+
+---
+
+<div>
+  <h2
+    class="text-2xl font-semibold lg:tracking-tight mt-4 text-center w-[100%]"
+  >
+    <slot name="title" />
+  </h2>
+  <p class="text-md my-6 text-center text-pretty">
+    <slot name="subtitle" />
+  </p>
+</div>

src/components/vgv_card/vgv-card.astro

@@ -0,0 +1,28 @@
+---
+interface Props {
+  url: string;
+}
+
+const props = Astro.props;
+---
+
+<a href={props.url} class="contents">
+  <div
+    class="drop-shadow-lg rounded-lg overflow-hidden h-[100%] w-[100%] max-w-[478px] bg-[var(--vgv-card-bg)]"
+  >
+    <slot name="thumbnail" />
+    <div class="p-4">
+      <slot />
+    </div>
+  </div>
+</a>
+
+<style>
+  a,
+  a:visited,
+  a:hover,
+  a:active {
+    color: inherit;
+    text-decoration: none;
+  }
+</style>

src/components/vgv_hero/vgv-hero-breakout-vertical.astro

@@ -0,0 +1,11 @@
+---
+
+---
+
+<div class="overflow-x-clip">
+  <div class="max-w-screen-xl mx-auto px-8">
+    <div class="grid lg:grid-cols-3 place-items-center relative gap-4">
+      <slot />
+    </div>
+  </div>
+</div>

src/components/vgv_hero/vgv-hero-section-header.astro

@@ -0,0 +1,14 @@
+---
+
+---
+
+<div class="text-[var(--vgv-title)]">
+  <h2
+    class="text-4xl lg:text-5xl font-medium lg:tracking-tight mt-4 text-center w-[100%]"
+  >
+    <slot name="title" />
+  </h2>
+  <p class="max-w-4xl text-lg my-6 text-center text-pretty">
+    <slot name="subtitle" />
+  </p>
+</div>

src/components/vgv_scroll/vgv-scroll.astro

@@ -12,17 +12,17 @@
   </div>
 </div>
 
-<div class="mt-2 relative overflow-x-clip overflow-y-visible mx-8">
-  <div class="relative lg:flex gap-10 py-5 group overflow-visible">
+<div class="relative overflow-x-clip overflow-y-visible mx-8">
+  <div class="relative lg:flex py-5 group overflow-visible">
     <div class="absolute scroll-shadow left"></div>
     <div class="absolute scroll-shadow right"></div>
     <div
-      class="lg:motion-safe:animate-scroll w-auto py-5 overflow-x-auto flex flex-nowrap min-w-full shrink-0 items-stretch gap-0 overflow-y-visible"
+      class="lg:motion-safe:animate-scroll w-auto overflow-x-auto flex flex-nowrap min-w-full shrink-0 items-stretch gap-0 overflow-y-visible"
     >
       <slot name="default" />
     </div>
     <div
-      class="lg:motion-safe:animate-scroll hidden lg:motion-reduce:hidden lg:flex min-w-full shrink-0 items-stretch gap-0 py-5 overflow-y-visible"
+      class="lg:motion-safe:animate-scroll hidden lg:motion-reduce:hidden lg:flex min-w-full shrink-0 items-stretch gap-0 overflow-y-visible"
     >
       <slot name="default" />
     </div>