docs: update home page

unovue · Oct 2, 2024 · 3def76e · 3def76e
1 parent 38dfd81
commit 3def76e
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 28 deletions.
diff --git a/.github/DISCUSSION_TEMPLATE/example-request.yml b/.github/DISCUSSION_TEMPLATE/example-request.yml
@@ -0,0 +1,25 @@
+title: '[Example]: '
+labels: [Example Request]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ### Thanks for taking the time to create an example request! Please search open/closed requests before submitting, as the block or a similar one may have already been requested.
+
+  - type: textarea
+    id: example-description
+    attributes:
+      label: Description
+      description: Tell us about your example request
+      placeholder: A modal with tooltip
+    validations:
+      required: true
+
+  - type: input
+    id: example-url
+    attributes:
+      label: Example
+      description: Link to an example
+      placeholder: ex. https://example.com
+    validations:
+      required: false
diff --git a/docs/.vitepress/components/Home.vue b/docs/.vitepress/components/Home.vue
@@ -1,5 +1,16 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import AccordionDemo from '../../components/demo/Accordion/tailwind/index.vue'
+import HoverCardDemo from '../../components/demo/HoverCard/tailwind/index.vue'
+import ToolbarDemo from '../../components/demo/Toolbar/tailwind/index.vue'
+import TagsInputDemo from '../../components/demo/TagsInput/tailwind/index.vue'
+import NumberFieldDemo from '../../components/demo/NumberField/tailwind/index.vue'
+import CalendarDemo from '../../components/demo/Calendar/tailwind/index.vue'
+import TreeDemo from '../../components/demo/Tree/tailwind/index.vue'
+import SliderDemo from '../../components/demo/Slider/tailwind/index.vue'
+import PinInputDemo from '../../components/demo/PinInput/tailwind/index.vue'
+import ProgressDemo from '../../components/demo/Progress/tailwind/index.vue'
+import SelectDemo from '../../components/demo/Select/tailwind/index.vue'
 </script>
 
 <template>
@@ -35,13 +46,13 @@ import { Icon } from '@iconify/vue'
       </div>
       <div class="mb-12 flex max-w-[calc(100%-2rem)] flex-wrap items-center justify-center gap-4 md:mb-20">
         <a
-          class="flex h-12 items-center justify-center gap-2 whitespace-nowrap rounded-xl px-4 text-primary font-semibold bg-primary/10 hover:bg-primary/20 sm:px-8 sm:text-lg"
+          class="flex items-center justify-center gap-2 whitespace-nowrap rounded-lg py-2.5 px-5 bg-primary font-semibold text-primary-foreground hover:bg-primary/90"
           href="/docs/overview/getting-started"
         >
           Get started
         </a>
         <a
-          class="group flex h-12 items-center justify-center gap-2 font-semibold text-muted-foreground hover:text-foreground whitespace-nowrap rounded-xl px-4 hover:bg-card"
+          class="group flex items-center justify-center gap-2 font-semibold text-foreground/70 hover:text-foreground whitespace-nowrap rounded-lg py-2.5 px-5 hover:bg-card border border-muted bg-muted/50"
           href="/docs/components/checkbox"
         >
           Explore components
@@ -51,6 +62,63 @@ import { Icon } from '@iconify/vue'
     </div>
   </section>
 
+  <section class="text-foreground relative h-[40rem] mt-12 overflow-hidden w-full">
+    <div class=" w-[90rem] h-[32rem] rounded-3xl border border-muted bg-card/20 absolute left-1/2 -translate-x-1/2 overflow-hidden">
+      <img
+        class="absolute w-[90rem] flex-none max-w-none"
+        decoding="async"
+        src="/new-bg.png"
+        alt="backdrop"
+        draggable="false"
+      >
+    </div>
+    <div class="absolute left-1/2 z-[1] h-[32rem] w-[90rem] -translate-x-1/2 md:block">
+      <div class="absolute top-8 left-[16rem] xl:left-8">
+        <TagsInputDemo />
+      </div>
+
+      <div class="absolute top-[24rem] md:top-[4rem] right-[32rem] md:right-[30rem] text-stone-700 text-sm">
+        <PinInputDemo />
+      </div>
+
+      <div class="absolute top-8 right-[30rem] md:right-[10rem] xl:right-6">
+        <CalendarDemo />
+      </div>
+
+      <div class="absolute top-[8rem] left-[20rem]">
+        <AccordionDemo />
+      </div>
+
+      <div class="absolute top-48 left-[2rem] xl:-left-12">
+        <TreeDemo />
+      </div>
+
+      <div class="absolute bottom-[6rem] xl:bottom-12 left-[20rem] xl:left-[14rem]">
+        <SliderDemo />
+      </div>
+
+      <div class="absolute bottom-2 xl:-bottom-4 left-[32rem] text-sm text-stone-700">
+        <NumberFieldDemo />
+      </div>
+
+      <div class="absolute hidden md:block bottom-[4rem] right-[36rem] xl:right-[32rem]">
+        <SelectDemo />
+      </div>
+
+      <div class="absolute hidden md:block top-[12rem] right-[40rem] xl:right-[24rem]">
+        <HoverCardDemo />
+      </div>
+
+      <div class="absolute bottom-0 right-[8rem] xl:-right-12">
+        <ToolbarDemo />
+      </div>
+
+      <div class="absolute hidden md:block bottom-[12rem] right-[30rem] xl:right-[22rem]">
+        <ProgressDemo />
+      </div>
+    </div>
+  </section>
+
   <section class="py-24 max-w-screen-xl mx-auto md:px-6">
     <div class="grid grid-cols-1 lg:grid-cols-5 h-[36rem] lg:h-96 gap-y-4 lg:gap-4">
       <div class="flex flex-col col-span-3 rounded-2xl border border-muted p-10 overflow-hidden relative">
@@ -175,7 +243,7 @@ import { Icon } from '@iconify/vue'
     </div>
   </section>
 
-  <section class="py-24 sm:py-40 w-full mx-auto px-6 bg-gradient-to-b from-background via-card/80 to-background absolute left-0">
+  <section class="py-24 sm:py-40 w-full mx-auto px-6 bg-gradient-to-b from-background via-card/80 to-background">
     <div class="max-w-screen-xl mx-auto">
       <div class="flex flex-col sm:flex-row items-center justify-center gap-12 sm:gap-20">
         <div class="flex flex-col items-center justify-center">

diff --git a/docs/.vitepress/components/SearchTrigger.vue b/docs/.vitepress/components/SearchTrigger.vue
@@ -23,7 +23,7 @@ function handleClose() {
 
 <template>
   <DialogRoot v-model:open="open">
-    <DialogTrigger class="flex items-center space-x-2 text-sm py-[7px] px-3 rounded-lg md:border border-muted md:bg-background hover:bg-card text-muted-foreground">
+    <DialogTrigger class="flex items-center space-x-2 text-sm py-[7px] px-3 rounded-lg md:border border-muted md:bg-card hover:bg-muted text-muted-foreground">
       <Icon icon="lucide:search" />
       <span class="hidden md:inline-flex w-24 lg:w-40 text-left">Search</span>
       <span class="hidden md:inline-flex text-xs">

diff --git a/docs/.vitepress/custom/Layout.vue b/docs/.vitepress/custom/Layout.vue
@@ -20,30 +20,32 @@ const { top } = toRefs(arrivedState)
   <TooltipProvider>
     <div class="flex flex-col items-center min-h-screen h-full">
       <header
-        class="max-w-[1440px] w-full py-4 flex items-center justify-between sticky top-0 z-10 transition-all duration-500 px-6 h-[68px] md:h-full"
+        class="w-full py-4 sticky top-0 z-10 transition-all duration-500 h-[68px] md:h-full"
         :class="[top ? 'bg-transparent backdrop-blur-0' : 'bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/90']"
       >
-        <div class="w-full justify-between md:justify-normal flex items-center gap-8">
-          <a
-            href="/"
-            class="flex items-center gap-2"
-          >
-            <img
-              class="w-6 md:w-9"
-              alt="Reka UI logo"
-              :src="theme.logo"
+        <div class="max-w-[1440px] flex items-center justify-between mx-auto px-6">
+          <div class="w-full justify-between md:justify-normal flex items-center gap-8">
+            <a
+              href="/"
+              class="flex items-center gap-2"
             >
-            <span class="font-bold text-xl md:text-2xl">{{ site.title }}</span>
-          </a>
-          <SearchTrigger />
-        </div>
+              <img
+                class="w-6 md:w-9"
+                alt="Reka UI logo"
+                :src="theme.logo"
+              >
+              <span class="font-bold text-xl md:text-2xl">{{ site.title }}</span>
+            </a>
+            <SearchTrigger />
+          </div>
 
-        <Navbar />
+          <Navbar />
+        </div>
       </header>
 
       <div
         v-if="frontmatter.layout === 'home'"
-        class="max-w-[1440px]  px-6 h-full flex flex-col justify-between flex-1 w-full"
+        class="h-full flex flex-col justify-between flex-1 w-full"
       >
         <main>
           <Home />

diff --git a/docs/.vitepress/custom/Showcase.vue b/docs/.vitepress/custom/Showcase.vue
@@ -17,9 +17,9 @@ const { frontmatter } = useData()
         </h2>
 
         <a
-          class="mt-6 text-sm font-bold px-4 py-2.5 rounded-lg w-max bg-primary/10 hover:bg-primary/20 text-primary"
+          class="w-max text-sm mt-4 flex items-center justify-center gap-2 whitespace-nowrap rounded-lg py-2.5 px-4 bg-primary font-semibold text-primary-foreground hover:bg-primary/90"
           target="_blank"
-          href="https://github.com/radix-vue/radix-vue/blob/main/docs/content/showcase.md"
+          href="https://github.com/radix-vue/radix-vue/edit/main/docs/content/showcase.md"
         >
           Add Showcase
         </a>

diff --git a/docs/components/demo/Calendar/tailwind/index.vue b/docs/components/demo/Calendar/tailwind/index.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot, type CalendarRootProps } from 'reka-ui'
+import { CalendarDate } from '@internationalized/date'
+
+const date = new CalendarDate(2024, 10, 3)
 
 const isDateUnavailable: CalendarRootProps['isDateUnavailable'] = (date) => {
   return date.day === 17 || date.day === 18
@@ -11,7 +14,8 @@ const isDateUnavailable: CalendarRootProps['isDateUnavailable'] = (date) => {
   <CalendarRoot
     v-slot="{ weekDays, grid }"
     :is-date-unavailable="isDateUnavailable"
-    class="mt-6 rounded-xl bg-white p-4 shadow-md border"
+    :default-value="date"
+    class="mt-6 rounded-xl bg-white p-4 shadow-sm border"
     fixed-weeks
   >
     <CalendarHeader class="flex items-center justify-between">

diff --git a/docs/components/demo/HoverCard/tailwind/index.vue b/docs/components/demo/HoverCard/tailwind/index.vue
@@ -21,7 +21,7 @@ const hoverState = ref(false)
     </HoverCardTrigger>
     <HoverCardPortal>
       <HoverCardContent
-        class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] rounded-xl bg-white p-5 data-[state=open]:transition-all border shadow-sm"
+        class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] rounded-xl bg-white p-5 data-[state=open]:transition-all border shadow-sm z-10"
         :side-offset="5"
       >
         <div class="flex flex-col gap-[7px]">

diff --git a/docs/components/demo/Progress/tailwind/index.vue b/docs/components/demo/Progress/tailwind/index.vue
@@ -27,7 +27,7 @@ onBeforeUnmount(() => {
     class="rounded-full relative h-4 w-[300px] overflow-hidden bg-white dark:bg-stone-950"
   >
     <ProgressIndicator
-      class="indicator rounded-full block relative w-full h-full bg-green8 transition-transform overflow-hidden duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)] after:animate-progress after:content-[''] after:absolute after:inset-0  after:bg-[linear-gradient(-45deg,_rgba(255,255,255,0.2)_25%,_transparent_25%,_transparent_50%,_rgba(255,255,255,0.2)_50%,_rgba(255,255,255,0.2)_75%,_transparent_75%,_transparent)] after:bg-[length:30px_30px]"
+      class="indicator rounded-full block relative w-full h-full bg-grass9 transition-transform overflow-hidden duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)] after:animate-progress after:content-[''] after:absolute after:inset-0  after:bg-[linear-gradient(-45deg,_rgba(255,255,255,0.2)_25%,_transparent_25%,_transparent_50%,_rgba(255,255,255,0.2)_50%,_rgba(255,255,255,0.2)_75%,_transparent_75%,_transparent)] after:bg-[length:30px_30px]"
       :style="`transform: translateX(-${100 - progressValue}%)`"
     />
   </ProgressRoot>

diff --git a/docs/components/demo/Slider/tailwind/index.vue b/docs/components/demo/Slider/tailwind/index.vue
@@ -12,11 +12,11 @@ const sliderValue = ref([50])
     :max="100"
     :step="1"
   >
-    <SliderTrack class="bg-white border dark:border-stone-700 relative grow rounded-full h-2.5">
-      <SliderRange class="absolute bg-stone-700 rounded-full h-full" />
+    <SliderTrack class="bg-stone-500/30 relative grow rounded-full h-2">
+      <SliderRange class="absolute bg-grass8 rounded-full h-full" />
     </SliderTrack>
     <SliderThumb
-      class="block w-5 h-5 bg-white rounded-full  hover:bg-stone-50 border-2 border-stone-700 shadow-sm focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-stone-700"
+      class="block w-6 h-6 bg-white rounded-full hover:bg-stone-50 shadow-sm focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-grass9"
       aria-label="Volume"
     />
   </SliderRoot>