initiation librodrome

app/components/ui/BaseButton.vue

@@ -0,0 +1,41 @@
+<template>
+  <a
+    v-if="href"
+    :href="href"
+    :target="target"
+    :rel="target === '_blank' ? 'noopener noreferrer' : undefined"
+    :class="variantClasses"
+  >
+    <slot />
+  </a>
+  <NuxtLink
+    v-else-if="to"
+    :to="to"
+    :class="variantClasses"
+  >
+    <slot />
+  </NuxtLink>
+  <button
+    v-else
+    :class="variantClasses"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  variant?: 'primary' | 'accent' | 'ghost'
+  to?: string
+  href?: string
+  target?: string
+}>()
+
+const variantClasses = computed(() => {
+  switch (props.variant) {
+    case 'accent': return 'btn-accent'
+    case 'ghost': return 'btn-ghost'
+    default: return 'btn-primary'
+  }
+})
+</script>

app/components/ui/ScrollReveal.vue

@@ -0,0 +1,33 @@
+<template>
+  <div ref="el" class="scroll-reveal" :style="{ animationDelay: `${delay}ms` }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  delay?: number
+}>()
+
+const el = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  if (!el.value) return
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('is-visible')
+          observer.unobserve(entry.target)
+        }
+      })
+    },
+    { threshold: 0.1, rootMargin: '0px 0px -50px 0px' },
+  )
+
+  observer.observe(el.value)
+
+  onUnmounted(() => observer.disconnect())
+})
+</script>