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

docs: add landing page (#3448)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sébastien Chopin
2025-03-06 12:50:22 +01:00
committed by GitHub
parent 196ffbc989
commit 4f51d19e2b
16 changed files with 917 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
docs/app/pages/pro/templates.vue
View File

@@ -16,59 +16,60 @@ useSeoMeta({
<!-- eslint-disable vue/no-v-html -->
<template>
<UPageHero :links="page.links" :ui="{ container: 'relative' }">
<template #top>
<div class="relative">
<UPageHero :links="page.links" :ui="{ container: 'relative' }">
<StarsBg />
</template>
<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" />
<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 #title>
<MDC :value="page.hero.title" unwrap="p" />
</template>
<template #title>
<MDC :value="page.hero.title" unwrap="p" />
</template>
<template #description>
<MDC :value="page.hero.description" unwrap="p" />
</template>
</UPageHero>
<template #description>
<MDC :value="page.hero.description" unwrap="p" />
</template>
</UPageHero>
<UPageSection
v-for="(template, index) in page.templates"
:key="index"
:title="template.title"
:links="template.links"
:features="template.features"
orientation="horizontal"
class="lg:border-t border-(--ui-border)"
:ui="{
title: 'lg:text-4xl',
wrapper: 'lg:py-16 lg:border-r border-(--ui-border) order-last lg:pr-16',
container: 'lg:py-0'
}"
>
<template #description>
<MDC :value="template.description" unwrap="p" />
</template>
<UPageSection
v-for="(template, index) in page.templates"
:key="index"
:title="template.title"
:links="template.links"
:features="template.features"
orientation="horizontal"
class="lg:border-t border-(--ui-border)"
:ui="{
title: 'lg:text-4xl',
wrapper: 'lg:py-16 lg:border-r border-(--ui-border) order-last lg:pr-16',
container: 'lg:py-0',
links: 'gap-x-3'
}"
>
<template #description>
<MDC :value="template.description" unwrap="p" />
</template>
<div class="lg:border-x border-(--ui-border) h-full flex items-center lg:bg-(--ui-bg-muted)/20">
<Motion class="flex-1" :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0px)' }" :in-view-options="{ once: true }" :transition="{ duration: 0.5, delay: 0.2 }">
<UColorModeImage
v-if="template.thumbnail"
v-bind="template.thumbnail"
class="w-full h-auto border lg:border-y lg:border-x-0 border-(--ui-border) rounded-(--ui-radius) lg:rounded-none"
width="656"
height="369"
loading="lazy"
/>
<UCarousel
v-else-if="template.images"
v-slot="{ item }"
:items="(template.images as any[])"
dots
>
<NuxtImg v-bind="item" class="w-full h-full object-cover" width="576" height="360" />
</UCarousel>
<Placeholder v-else class="w-full h-full aspect-video" />
</Motion>
</div>
</UPageSection>
<div class="lg:border-x border-(--ui-border) h-full flex items-center lg:bg-(--ui-bg-muted)/20">
<Motion class="flex-1" :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0px)' }" :in-view-options="{ once: true }" :transition="{ duration: 0.5, delay: 0.2 }">
<UColorModeImage
v-if="template.thumbnail"
v-bind="template.thumbnail"
class="w-full h-auto border lg:border-y lg:border-x-0 border-(--ui-border) rounded-(--ui-radius) lg:rounded-none"
width="656"
height="369"
loading="lazy"
/>
<UCarousel
v-else-if="template.images"
v-slot="{ item }"
:items="(template.images as any[])"
dots
>
<NuxtImg v-bind="item" class="w-full h-full object-cover" width="576" height="360" />
</UCarousel>
<Placeholder v-else class="w-full h-full aspect-video" />
</Motion>
</div>
</UPageSection>
</div>
</template>