feat: add bento component

docs/index.md

@@ -64,3 +64,5 @@ import Demos from './src/components/Demos.vue'
 <demo src="./src/example/letterUp/Demo.vue" />
 
 <demo src="./src/example/animatedShinyText/Demo.vue" />
+
+<demo src="./src/example/bento/Demo.vue" />

docs/src/components/spark-ui/bento/BentoCard.vue

@@ -0,0 +1,21 @@
+<script setup lang='ts'>
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  name: string
+}>()
+
+const className = cn(
+  'group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl',
+  // light styles
+  'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',
+  // dark styles
+  'transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
+)
+</script>
+
+<template>
+  <div :key="props.name" :class="className">
+    <slot />
+  </div>
+</template>

docs/src/components/spark-ui/bento/BentoGrid.vue

@@ -0,0 +1,17 @@
+<script setup lang='ts'>
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  className: string
+}>()
+const classStyle = cn(
+  'grid w-full auto-rows-[22rem] grid-cols-3 gap-4',
+  props.className,
+)
+</script>
+
+<template>
+  <div :class="classStyle">
+    <slot />
+  </div>
+</template>

docs/src/components/spark-ui/bento/BentoGridDemo.vue

@@ -0,0 +1,119 @@
+<script setup lang='ts'>
+import { Icon } from '@iconify/vue'
+import BentoCard from './BentoCard.vue'
+import BentoGrid from './BentoGrid.vue'
+
+const features = [
+  {
+    icon: 'radix-icons:file-text',
+    name: 'Save your files',
+    description: 'We automatically save your files as you type.',
+    href: '/',
+    cta: 'Learn more',
+    background: 'absolute -right-20 -top-20 opacity-60',
+    className: 'lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3',
+  },
+  {
+    icon: 'radix-icons:input',
+    name: 'Full text search',
+    description: 'Search through all your files in one place.',
+    href: '/',
+    cta: 'Learn more',
+    background: 'absolute -right-20 -top-20 opacity-60',
+    className: 'lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3',
+  },
+  {
+    icon: 'radix-icons:globe',
+    name: 'Multilingual',
+    description: 'Supports 100+ languages and counting.',
+    href: '/',
+    cta: 'Learn more',
+    background: 'absolute -right-20 -top-20 opacity-60',
+    className: 'lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4',
+  },
+  {
+    icon: 'radix-icons:calendar',
+    name: 'Calendar',
+    description: 'Use the calendar to filter your files by date.',
+    href: '/',
+    cta: 'Learn more',
+    background: 'absolute -right-20 -top-20 opacity-60',
+    className: 'lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2',
+  },
+  {
+    icon: 'radix-icons:bell',
+    name: 'Notifications',
+    description:
+            'Get notified when someone shares a file or mentions you in a comment.',
+    href: '/',
+    cta: 'Learn more',
+    background: 'absolute -right-20 -top-20 opacity-60',
+    className: 'lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4',
+  },
+]
+</script>
+
+<template>
+  <BentoGrid class-name="lg:grid-rows-3">
+    <div v-for="feat in features" :key="feat.name">
+      <BentoCard :name="feat.name">
+        <div>
+          <img :class="feat.background">
+        </div>
+        <div
+          class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"
+        >
+          <Icon
+            :icon="feat.icon"
+            class="h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75"
+          />
+          <h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300">
+            {{ feat.name }}
+          </h3>
+          <p class="max-w-lg text-neutral-400">
+            {{ feat.description }}
+          </p>
+        </div>
+
+        <div
+          class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"
+        >
+          <button class="pointer-events-auto">
+            <a :href="feat.href">
+              {{ feat.cta }}
+              <Icon :icon="feat.icon" class="ml-2 text-white h-4 w-4" />
+            </a>
+          </button>
+        </div>
+        <div
+          class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"
+        />
+      </BentoCard>
+    </div>
+  </BentoGrid>
+</template>
+
+<!-- <div>
+    <slot />
+</div>
+<div
+    class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10">
+    <Icon
+        class="h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75" />
+    <h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300">
+        {{ props.name }}
+    </h3>
+    <p class="max-w-lg text-neutral-400">{{ props.description }}</p>
+</div>
+
+<div
+    class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
+    <button class="pointer-events-auto">
+        <a :href="props.href">
+            {{ props.cta }}
+            <Icon name="radix-icons:arrow-right" class="ml-2 h-4 w-4" />
+        </a>
+    </button>
+</div>
+<div
+    class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10" /> -->

docs/src/example/bento/BentoCard.vue

@@ -0,0 +1,21 @@
+<script setup lang='ts'>
+import { cn } from '../../lib/utils'
+
+const props = defineProps<{
+  name: string
+}>()
+
+const className = cn(
+  'relative col-span-1 space-y-1 flex flex-col justify-between overflow-hidden rounded-xl',
+  // light styles
+  'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',
+  // dark styles
+  'transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
+)
+</script>
+
+<template>
+  <div :key="props.name" :class="className" group>
+    <slot />
+  </div>
+</template>

docs/src/example/bento/BentoGrid.vue

@@ -0,0 +1,17 @@
+<script setup lang='ts'>
+import { cn } from '../../lib/utils'
+
+const props = defineProps<{
+  className: string
+}>()
+const classStyle = cn(
+  'grid w-full grid-cols-1 lg:grid-cols-2 gap-4',
+  props.className,
+)
+</script>
+
+<template>
+  <div :class="classStyle">
+    <slot />
+  </div>
+</template>

docs/src/example/bento/Demo.vue

@@ -0,0 +1,70 @@
+<script setup lang='ts'>
+import { Icon } from '@iconify/vue'
+import BentoCard from './BentoCard.vue'
+import BentoGrid from './BentoGrid.vue'
+
+const features = [
+  {
+    icon: 'radix-icons:file-text',
+    name: 'Save your files',
+    description: 'We automatically save your files as you type.',
+    href: '/',
+    cta: 'Learn more',
+    background: 'absolute -right-20 opacity-60',
+    className: 'lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3',
+  },
+  {
+    icon: 'radix-icons:input',
+    name: 'Full text search',
+    description: 'Search through all your files in one place.',
+    href: '/',
+    cta: 'Learn more',
+    background: 'absolute -right-20 opacity-60',
+    className: 'lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3',
+  },
+]
+</script>
+
+<template>
+  <div class="relative h-full w-full">
+    <BentoGrid class-name="relative">
+      <div v-for="feat in features" :key="feat.name">
+        <BentoCard :name="feat.name" class="h-48">
+          <div>
+            <img :class="feat.background">
+          </div>
+          <div
+            group-hover:-translate-y-10
+            class="pointer-events-none flex transform-gpu flex-col p-6 transition-all duration-300"
+          >
+            <Icon
+              :icon="feat.icon" group-hover:scale-75
+              class="h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out"
+            />
+            <h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300">
+              {{ feat.name }}
+            </h3>
+            <p class="max-w-lg text-neutral-400">
+              {{ feat.description }}
+            </p>
+          </div>
+
+          <div
+            group-hover:translate-y-0 group-hover:opacity-100
+            class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300"
+          >
+            <button class="pointer-events-auto">
+              <a :href="feat.href" class="dark:text-white">
+                {{ feat.cta }}
+              </a>
+            </button>
+          </div>
+          <div
+            group-hover:dark:bg-neutral-800
+            class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300"
+          />
+        </BentoCard>
+      </div>
+    </BentoGrid>
+  </div>
+</template>

docs/uno.config.ts

@@ -24,7 +24,9 @@ export default defineConfig({
         mono: 'DM Mono',
       },
     }),
-    presetWind(),
+    presetWind({
+      attributifyPseudo: true,
+    }),
   ],
   transformers: [transformerVariantGroup(), transformerDirectives()],
   shortcuts: [