arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-26 18:00:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: various marketing improvements (#3400)

Browse Source 
Co-authored-by: HugoRCD <hugo.richard@epitech.eu>
This commit is contained in:
Sébastien Chopin
2025-02-26 14:25:52 +01:00
committed by GitHub
parent d787cd1a2c
commit 2e8403c7e4
25 changed files with 384 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
docs/app/pages/components.vue
View File

@@ -54,6 +54,22 @@ const categories = [{
title: 'Overlay',
description: 'Floating UI elements like modals, dialogs, tooltips, popovers, and other components that overlay the main content.'
}]
const { y } = useWindowScroll()
onMounted(() => {
const stickyElements = document.querySelectorAll('[data-track-sticky]') as NodeListOf<HTMLElement>
watch(y, () => {
stickyElements.forEach((el) => {
const rect = el.getBoundingClientRect()
const topComputed = Number.parseInt(window.getComputedStyle(el).top || '0', 10)
if (rect.top <= topComputed) {
el.dataset.stuck = ''
} else {
delete el.dataset.stuck
}
})
}, { immediate: true })
})
</script>
<template>
@@ -62,8 +78,9 @@ const categories = [{
description="Build your Vue or Nuxt application faster with Nuxt UI and Nuxt UI Pro components. Powered by Tailwind CSS and Reka UI, delivering responsive and customizable components."
class="relative"
orientation="vertical"
:ui="{ title: 'text-balance' }"
:ui="{ title: 'text-balance', container: 'relative' }"
>
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<template #headline>
<UButton
to="https://tailwindcss.com"
@@ -102,24 +119,25 @@ const categories = [{
</template>
</UPageHero>
<UContainer>
<div v-for="category in categories" :key="category.id">
<div class="mb-4 sm:mb-6 lg:mb-8 sticky top-(--ui-header-height) bg-(--ui-bg)/75 backdrop-blur z-[1] -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
<div class="relative border-b border-(--ui-border) py-4 sm:py-6 lg:py-8">
<h2 class="relative text-pretty font-bold text-(--ui-text-highlighted) text-base sm:text-xl lg:text-2xl">
<a :href="`#${category.id}`" class="group lg:ps-2 lg:-ms-2">
<span class="absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-(--ui-bg-elevated) hover:text-(--ui-primary) rounded-[calc(var(--ui-radius)*1.5)] hidden lg:flex text-(--ui-text-muted) transition">
<div v-for="category in categories" :key="category.id">
<div data-track-sticky class="group mb-4 sm:mb-6 lg:mb-8 sticky top-[calc(var(--ui-header-height)-1px)] bg-(--ui-bg)/75 backdrop-blur z-[1]">
<div class="relative border-y border-(--ui-border) py-4 sm:not-group-[[data-stuck]]:py-6 lg:not-group-[[data-stuck]]:py-8 transition-all duration-300">
<UContainer>
<h2 class="relative text-pretty font-bold text-(--ui-text-highlighted) text-base sm:not-group-[[data-stuck]]:text-xl lg:not-group-[[data-stuck]]:text-2xl transition-all duration-300 ">
<a :href="`#${category.id}`" class="group lg:not-group-[[data-stuck]]:ps-2 lg:not-group-[[data-stuck]]:-ms-2">
<span class="absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-(--ui-bg-elevated) hover:text-(--ui-primary) rounded-[calc(var(--ui-radius)*1.5)] hidden lg:not-group-[[data-stuck]]:flex text-(--ui-text-muted) transition">
<UIcon name="i-lucide-hash" class="size-4 shrink-0" />
</span>
{{ category.title }}
</a>
</h2>
<p class="text-pretty text-(--ui-text-muted) text-sm sm:text-base lg:text-lg mt-1 sm:mt-2 line-clamp-1">
<p class="text-pretty text-(--ui-text-muted) text-sm sm:not-group-[[data-stuck]]:text-base lg:not-group-[[data-stuck]]:text-lg mt-1 sm:not-group-[[data-stuck]]:mt-2 line-clamp-1 transition-all duration-300">
{{ category.description }}
</p>
</div>
</UContainer>
</div>
</div>
<UContainer>
<UPageGrid :id="category.id" class="xl:grid-cols-4 gap-4 sm:gap-6 lg:gap-8 pb-24 scroll-mt-[calc(97px+var(--ui-header-height))] sm:scroll-mt-[calc(133px+var(--ui-header-height))] lg:scroll-mt-[calc(165px+var(--ui-header-height))]">
<UPageCard
v-for="(component, index) in componentsPerCategory[category.id]"
@@ -149,7 +167,7 @@ const categories = [{
</div>
</UPageCard>
</UPageGrid>
</div>
</UContainer>
</UContainer>
</div>
</UMain>
</template>