mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-29 11:20:36 +01:00
docs: add marketing pages (#3308)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sébastien Chopin
GitHub
292
docs/app/pages/figma/.figma.yml
Normal file
292
docs/app/pages/figma/.figma.yml
Normal file
@@ -0,0 +1,292 @@
|
||||
title: Nuxt UI Figma Design Kits
|
||||
description: Bridge the gap between designers and developers using professional-grade components. The official Nuxt UI & Nuxt UI Pro design kits for Figma mirrors the development library for perfect consistency.
|
||||
headline: Used and loved by 2,000 designers and teams.
|
||||
hero:
|
||||
title: From [Figma]{#figma} to [Nuxt]{#nuxt}, faster.
|
||||
description: From wireframe to production in no time with the official Nuxt UI & Nuxt UI Pro design kits for Figma. Start free with the Nuxt UI Kit, or upgrade to Nuxt UI Pro for premium components, layouts, and enhanced design-to-code efficiency.
|
||||
image: /figma/hero.png
|
||||
links:
|
||||
- label: Purchase Pro Kit
|
||||
to: 'https://nuxt.lemonsqueezy.com/buy/17213c49-621b-4c2c-9478-3a50a099003d'
|
||||
trailing-icon: i-lucide-arrow-right
|
||||
target: _blank
|
||||
- label: Free Figma Kit
|
||||
to: 'https://go.nuxt.com/figma'
|
||||
icon: i-logos-figma
|
||||
color: neutral
|
||||
variant: outline
|
||||
target: _blank
|
||||
features1:
|
||||
features:
|
||||
- title: Advanced Figma Features
|
||||
description: Components, Local Variables, Auto Layout, Variants and more.
|
||||
icon: i-logos-figma
|
||||
- title: Instant Theming
|
||||
description: Customize your design system instantly using local variables and tokens.
|
||||
icon: i-lucide-swatch-book
|
||||
- title: Two Powerful Design Kits
|
||||
description: Start with essential components, or unlock Pro for complete blocks and templates.
|
||||
icon: i-lucide-files
|
||||
cta1:
|
||||
title: Everything you need in a [single file]{class="text-(--ui-primary)"}.
|
||||
description: Design and development in perfect sync with our [Free](https://www.figma.com/community/file/1288455405058138934/nuxt-ui-v3-official-design-kit-free) and Pro files. Developers can implement designs faster, while designers work with production-ready components.
|
||||
section1:
|
||||
title: Customize in a few clicks to fit your needs
|
||||
description: Control your entire design system with Figma Variables. Update primitive tokens once and watch your changes spread across the entire system.
|
||||
reverse: true
|
||||
features:
|
||||
- title: Style with color variables powered by Tailwind CSS colors
|
||||
icon: i-simple-icons-tailwindcss
|
||||
- title: Apply over 500+ local variables across your entire file
|
||||
icon: i-lucide-layers-2
|
||||
- title: Build with unified tokens for consistency
|
||||
icon: i-lucide-bolt
|
||||
tabs:
|
||||
- label: Define your tokens
|
||||
src: /pro/figma/local-variables.png
|
||||
width: 656
|
||||
height: 342
|
||||
alt: Define local variables in the Nuxt UI Figma design kit
|
||||
- label: Use them in your design
|
||||
src: /pro/figma/local-variables-result.png
|
||||
width: 656
|
||||
height: 342
|
||||
alt: Use color variables in the Nuxt UI Figma design kit
|
||||
links:
|
||||
- label: Preview UI Pro Design Kit
|
||||
to: 'https://go.nuxt.com/figma-pro'
|
||||
target: _blank
|
||||
icon: i-logos-figma
|
||||
color: neutral
|
||||
variant: outline
|
||||
section2:
|
||||
title: One component, endless possibilities
|
||||
description: Create unlimited variations through nested components and swappable instances. Every element is fully themeable with props and slots, giving you complete control.
|
||||
features:
|
||||
- title: Choose between 17K+ components and variants
|
||||
icon: i-lucide-component
|
||||
- title: Customize designs with swap instance
|
||||
icon: i-lucide-square-dashed-mouse-pointer
|
||||
- title: Switch between light and dark modes in one click
|
||||
icon: i-lucide-moon
|
||||
image:
|
||||
src: /pro/figma/component.png
|
||||
width: 656
|
||||
height: 374
|
||||
alt: A component in the Nuxt UI Figma design kit
|
||||
links:
|
||||
- label: Preview UI Pro Design Kit
|
||||
to: 'https://go.nuxt.com/figma-pro'
|
||||
target: _blank
|
||||
icon: i-logos-figma
|
||||
color: neutral
|
||||
variant: outline
|
||||
section3:
|
||||
title: Perfect match with development
|
||||
description: Our Figma kit perfectly matches Nuxt UI Pro components, ensuring complete alignment between design and development.
|
||||
reverse: true
|
||||
features:
|
||||
- title: Match development standards using the same props and tokens
|
||||
icon: i-lucide-square-code
|
||||
- title: Access Nuxt UI components through direct links
|
||||
icon: i-lucide-link
|
||||
- title: Work together as design and dev teams share one component language
|
||||
icon: i-lucide-handshake
|
||||
image:
|
||||
src: /pro/figma/nuxt-ui-figma-to-code.png
|
||||
width: 656
|
||||
height: 370
|
||||
alt: A screenshot of Nuxt UI Code & Figma Kit
|
||||
links:
|
||||
- label: Preview UI Pro Design Kit
|
||||
to: 'https://go.nuxt.com/figma-pro'
|
||||
icon: i-logos-figma
|
||||
color: neutral
|
||||
variant: outline
|
||||
target: _blank
|
||||
features2:
|
||||
features:
|
||||
- title: Ready-to-use Templates
|
||||
description: Production-ready templates for marketing sites, documentation, and more included.
|
||||
icon: i-lucide-panels-top-left
|
||||
- title: Well-Documented System
|
||||
description: Complete guides for designers and developers to master your design system.
|
||||
icon: i-lucide-book-open-text
|
||||
- title: Icons Pack
|
||||
description: Complete Lucide icon library included - 1500+ ready components.
|
||||
icon: i-lucide-smile
|
||||
section4:
|
||||
title: Start designing now.
|
||||
description: '**From download to deployment in simple steps.** :br Get instant access to production-ready components and start creating.'
|
||||
links:
|
||||
- label: Get access now
|
||||
to: 'https://nuxt.lemonsqueezy.com/buy/17213c49-621b-4c2c-9478-3a50a099003d'
|
||||
trailing-icon: i-lucide-arrow-right
|
||||
- label: Preview UI Pro Design Kit
|
||||
to: 'https://go.nuxt.com/figma-pro'
|
||||
icon: i-logos-figma
|
||||
color: neutral
|
||||
variant: outline
|
||||
target: _blank
|
||||
steps:
|
||||
- title: Download & Import
|
||||
description: After purchasing, just extract the ZIP file and drag & drop it directly into Figma.
|
||||
image:
|
||||
src: /pro/figma/step-1.png
|
||||
alt: Import the Nuxt UI Pro Figma design kit
|
||||
width: 314
|
||||
height: 230
|
||||
- title: Customize to your brand
|
||||
description: Set your colors, typography, and styles to match your brand identity in minutes.
|
||||
image:
|
||||
src: /pro/figma/step-2.png
|
||||
alt: Customize the Nuxt UI Pro Figma design kit
|
||||
width: 314
|
||||
height: 230
|
||||
- title: Design your website
|
||||
description: Design beautiful interfaces with production-ready components. Drag, drop, and customize.
|
||||
image:
|
||||
src: /pro/figma/step-3.png
|
||||
alt: Design your website with the Nuxt UI Pro Figma design kit
|
||||
width: 314
|
||||
height: 230
|
||||
- title: Share it with your developers
|
||||
description: Perfect development handoff with components that match Nuxt UI's structure exactly.
|
||||
image:
|
||||
src: /pro/figma/step-4.png
|
||||
alt: Share it with your developers with the Nuxt UI Pro Figma design kit
|
||||
width: 314
|
||||
height: 230
|
||||
pricing:
|
||||
title: Pricing plan that scale with you.
|
||||
description: Start for free with Nuxt UI components, or unlock the complete Nuxt UI Pro design kit with a one-time purchase.
|
||||
plans:
|
||||
- title: Free Design Kit
|
||||
description: Start with all Nuxt UI components and tokens.
|
||||
price: FREE
|
||||
features:
|
||||
- '**Nuxt UI only components**'
|
||||
- 40+ fully customizable components
|
||||
- Figma Local Variables for colors, typography, and effects
|
||||
- Light and Dark mode ready
|
||||
- Lucide icons (1500+ icons) integration
|
||||
- Regular updates
|
||||
button:
|
||||
label: Open in Figma
|
||||
icon: i-logos-figma
|
||||
to: https://go.nuxt.com/figma
|
||||
color: neutral
|
||||
terms: Used by 17,000+ designers.
|
||||
- title: Solo License
|
||||
description: Design faster with all Nuxt UI Pro components.
|
||||
price: $149
|
||||
billing_period: one-time payment
|
||||
billing_cycle: plus local taxes
|
||||
class: bg-(--ui-bg-elevated)/50
|
||||
features:
|
||||
- '**1 Designer**'
|
||||
- Nuxt UI & Nuxt UI Pro Components
|
||||
- 'Templates: Landing, Documentation, etc'
|
||||
- Quick Start with Step-by-step Guides
|
||||
- Use on Unlimited Projects
|
||||
- Lifetime Free Updates
|
||||
button:
|
||||
label: Buy now
|
||||
to: https://nuxt.lemonsqueezy.com/buy/17213c49-621b-4c2c-9478-3a50a099003d
|
||||
extraButton:
|
||||
label: Preview in Figma
|
||||
to: 'https://go.nuxt.com/figma-pro'
|
||||
target: _blank
|
||||
icon: i-logos-figma
|
||||
- title: Team License
|
||||
description: Everything you need to deliver faster as a team.
|
||||
price: $349
|
||||
billing_period: one-time payment
|
||||
billing_cycle: plus local taxes
|
||||
class: bg-(--ui-bg-elevated)/50
|
||||
features:
|
||||
- '**Up to 20 Designers**'
|
||||
- Nuxt UI & Nuxt UI Pro Components
|
||||
- 'Templates: Landing, Documentation, etc'
|
||||
- Step-by-step guides to help you start
|
||||
- Use on unlimited projects
|
||||
- Lifetime free updates
|
||||
button:
|
||||
label: Buy now
|
||||
to: https://nuxt.lemonsqueezy.com/buy/2979099c-b7a0-4ba1-90e0-a0d60509b92d
|
||||
extraButton:
|
||||
label: Preview in Figma
|
||||
to: 'https://go.nuxt.com/figma-pro'
|
||||
target: _blank
|
||||
icon: i-logos-figma
|
||||
customers:
|
||||
title: Used by 2,000+ developers & designers around the world.
|
||||
items:
|
||||
- src: /pro/logos/springfieldclinic.svg
|
||||
alt: Springfield Clinic
|
||||
- src: /pro/logos/churnkey.svg
|
||||
alt: Churnkey
|
||||
- src: /pro/logos/bosch.svg
|
||||
alt: BOSCH
|
||||
- src: /pro/logos/blizzard.svg
|
||||
alt: Blizzard
|
||||
- src: /pro/logos/bodet.svg
|
||||
alt: Bodet
|
||||
- src: /pro/logos/win.svg
|
||||
alt: WinReality
|
||||
- src: /pro/logos/tower.svg
|
||||
alt: Tower Research
|
||||
- src: /pro/logos/liegeairport.svg
|
||||
alt: Liege Airport
|
||||
- src: /pro/logos/wuniversity.svg
|
||||
alt: University of Washington
|
||||
- src: /pro/logos/funda.svg
|
||||
alt: Funda
|
||||
- src: /pro/logos/exxonmobil.svg
|
||||
alt: ExxonMobil
|
||||
- src: /pro/logos/mainpost.svg
|
||||
alt: Main Post
|
||||
- src: /pro/logos/insep.svg
|
||||
alt: INSEP
|
||||
- src: /pro/logos/applause.svg
|
||||
alt: Applause
|
||||
- src: /pro/logos/instadapp.svg
|
||||
alt: Instadapp
|
||||
faq:
|
||||
title: Frequently Asked Questions
|
||||
description: If you can't find what you're looking for, email our support team and if you're lucky someone will get back to you.
|
||||
items:
|
||||
- label: Can I use the UI kit on a free Figma account?
|
||||
content: Yes. You don't need Figma's paid plan to use our UI kits.
|
||||
defaultOpen: true
|
||||
- label: Do you have a free trial?
|
||||
content: We don't offer a free trial for the Pro Figma Kit, you can [preview it](https://go.nuxt.com/figma-pro).
|
||||
- label: How do I access the files after purchasing?
|
||||
content: After purchasing, just extract the ZIP file and drag & drop it directly into Figma.
|
||||
- label: Can I upgrade my Solo license to the Team license?
|
||||
content: Yes! Email us at design@nuxt.com with your details and we'll send you a discount code.
|
||||
- label: Can I use the UI Kit license for commercial projects?
|
||||
content: Yes, the license allows you to sell your designs that utilize the UI Kit implementations.
|
||||
- label: Can I create multiple projects for multiple clients?
|
||||
content: Yes, you can create multiple projects for multiple clients with the same license, there is no limit to the number of projects you can create.
|
||||
- label: Can I include UI Kit in an open source project?
|
||||
content: No, the license does not allow you to include the UI Kit in an open source project where the design files are publicly accessible.
|
||||
- label: How do I contact you?
|
||||
content: Email us at design@nuxt.com with your details and we'll help you out.
|
||||
- label: What is your refund policy?
|
||||
content: As the Figma Pro Kit is a digital product packaged as a zip file, we cannot offer refunds once the purchase is made.
|
||||
- label: Do you have a Figma to Code plugin?
|
||||
content: >
|
||||
We recommend the open source [TeamPad Dev](https://github.com/ecomfe/tempad-dev) inspect panel with the [TeamPad Dev Nuxt UI Plugin](https://github.com/Justineo/tempad-dev-plugin-nuxt-ui):
|
||||
|
||||
1. Install the [TeamPad Dev Chrome Extension](https://chromewebstore.google.com/detail/tempad-dev/lgoeakbaikpkihoiphamaeopmliaimpc)
|
||||
|
||||
2. Open your Figma file with Nuxt UI components (reload the page if you don't see the TeamPad Dev panel)
|
||||
|
||||
3. Install the `@nuxt` in TeamPad Dev's plugins section
|
||||
|
||||
4. Select any Nuxt UI component and inspect the code it generates
|
||||
|
||||
{.w-full .rounded .mb-2 .max-w-[636px]}
|
||||
|
||||
*Right now, only Nuxt UI components are supported, but the code of the plugin is [open source](https://github.com/Justineo/tempad-dev-plugin-nuxt-ui) and anyone can contribute to it.*
|
||||
288
docs/app/pages/figma/index.vue
Normal file
288
docs/app/pages/figma/index.vue
Normal file
@@ -0,0 +1,288 @@
|
||||
<script setup lang="ts">
|
||||
// @ts-expect-error yaml is not typed
|
||||
import page from '.figma.yml'
|
||||
import { animate } from 'motion'
|
||||
import { joinURL } from 'ufo'
|
||||
|
||||
const { url } = useSiteConfig()
|
||||
useSeoMeta({
|
||||
title: page.title,
|
||||
description: page.description,
|
||||
ogTitle: page.title,
|
||||
ogDescription: page.description,
|
||||
ogImage: joinURL(url, '/pro/figma/og-image.png')
|
||||
})
|
||||
|
||||
const video = ref<HTMLVideoElement | null>(null)
|
||||
const played = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
// Animate cursors
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
const figmaWordPosition = document.querySelector('#figma')?.getBoundingClientRect()
|
||||
const nuxtWordPosition = document.querySelector('#nuxt')?.getBoundingClientRect()
|
||||
const initialScrollX = window.scrollX
|
||||
const initialScrollY = window.scrollY
|
||||
if (figmaWordPosition && nuxtWordPosition) {
|
||||
animate('#cursor1', { left: Math.round(Math.random() * window.outerWidth), top: Math.round(Math.random() * window.outerHeight) }, { duration: 0.1 })
|
||||
.then(() => animate('#cursor1', { opacity: 1 }, { duration: 0.3 }))
|
||||
.then(() => {
|
||||
return animate('#cursor1', {
|
||||
left: Math.round(figmaWordPosition.left + initialScrollX + figmaWordPosition.width / 2),
|
||||
top: Math.round(figmaWordPosition.top + initialScrollY - figmaWordPosition.height / 4)
|
||||
}, { duration: 1.5, delay: 0.2, ease: 'easeInOut' })
|
||||
})
|
||||
.then(() => animate('#cursor1', { scale: 0.8 }, { duration: 0.1, ease: 'easeOut' }))
|
||||
.then(() => animate('#cursor1', { scale: 1 }, { duration: 0.1, ease: 'easeOut' }))
|
||||
.then(() => animate('#figma', { color: 'var(--ui-info)' }, { duration: 0.3, ease: 'easeOut' }))
|
||||
.then(() => animate('#cursor1', { left: Math.round(figmaWordPosition.left + initialScrollX + figmaWordPosition.width), top: Math.round(figmaWordPosition.top + initialScrollY) }, { duration: 0.6, ease: 'easeInOut' }))
|
||||
|
||||
animate('#cursor2', { left: Math.round(Math.random() * window.outerWidth), top: Math.round(Math.random() * window.outerHeight) }, { duration: 0.1, delay: 0.6 })
|
||||
.then(() => animate('#cursor2', { opacity: 1 }, { duration: 0.3 }))
|
||||
.then(() => {
|
||||
return animate('#cursor2', {
|
||||
left: Math.round(nuxtWordPosition.left + initialScrollX + nuxtWordPosition.width / 2),
|
||||
top: Math.round(nuxtWordPosition.top + initialScrollY - nuxtWordPosition.height / 4)
|
||||
}, { duration: 1.5, delay: 0.2, ease: 'easeInOut' })
|
||||
})
|
||||
.then(() => animate('#cursor2', { scale: 0.8 }, { duration: 0.1, ease: 'easeOut' }))
|
||||
.then(() => animate('#cursor2', { scale: 1 }, { duration: 0.1, ease: 'easeOut' }))
|
||||
.then(() => animate('#nuxt', { color: 'var(--ui-success)' }, { duration: 0.3, ease: 'easeOut' }))
|
||||
.then(() => animate('#cursor2', { left: Math.round(nuxtWordPosition.left + initialScrollX + nuxtWordPosition.width), top: Math.round(nuxtWordPosition.top + initialScrollY) }, { duration: 0.6, ease: 'easeInOut' }))
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<div id="cursor1" class="absolute z-10 pointer-events-none" :style="{ opacity: 0 }">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" class="absolute top-0 left-0 drop-shadow-[0_1px_2px_rgb(0,0,0,0.25)] text-white dark:text-(--ui-bg)">
|
||||
<path
|
||||
fill="var(--ui-info)"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"
|
||||
/>
|
||||
</svg>
|
||||
<UBadge color="info" class="absolute top-[18px] left-[18px] py-1 px-1 rounded-sm font-semibold leading-none">
|
||||
Sarah
|
||||
</UBadge>
|
||||
</div>
|
||||
<div id="cursor2" class="absolute z-10 pointer-events-none" :style="{ opacity: 0 }">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" class="absolute top-0 left-0 drop-shadow-[0_1px_2px_rgb(0,0,0,0.25)] text-white dark:text-(--ui-bg)">
|
||||
<path
|
||||
fill="var(--ui-success)"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"
|
||||
/>
|
||||
</svg>
|
||||
<UBadge color="success" class="absolute top-[18px] left-[18px] py-1 px-1 rounded-sm font-semibold leading-none">
|
||||
Sebastien
|
||||
</UBadge>
|
||||
</div>
|
||||
<UPageHero
|
||||
:links="page.hero.links"
|
||||
class="relative"
|
||||
:ui="{
|
||||
container: 'relative !pb-0'
|
||||
}"
|
||||
>
|
||||
<template #title>
|
||||
<MDC :value="page.hero.title" unwrap="p" />
|
||||
</template>
|
||||
<template #description>
|
||||
<MDC :value="page.hero.description" unwrap="p" />
|
||||
</template>
|
||||
<!-- <img src="/pro/figma/nuxt-ui-figma.png" alt="Screnshot of the Nuxt UI Figma design kit" class="w-full h-auto border border-(--ui-border) border-b-0"> -->
|
||||
<div class="relative">
|
||||
<video
|
||||
ref="video"
|
||||
:controls="played"
|
||||
playsinline
|
||||
src="https://res.cloudinary.com/nuxt/video/upload/v1739267662/ui-pro/video4_aobki0.mp4"
|
||||
poster="https://res.cloudinary.com/nuxt/video/upload/so_0/v1739267662/ui-pro/video4_aobki0.jpg"
|
||||
:class="{ grayscale: !played }"
|
||||
/>
|
||||
<div v-if="!played" class="group cursor-pointer absolute inset-0 flex items-center justify-center backdrop-blur-xs" @click="video?.play(); played = true">
|
||||
<UButton
|
||||
icon="i-heroicons-play-20-solid"
|
||||
size="xl"
|
||||
color="neutral"
|
||||
variant="solid"
|
||||
class="group-hover:scale-105 transition-transform cursor-pointer drop-shadow-xl"
|
||||
aria-label="Play video"
|
||||
:ui="{
|
||||
base: 'p-4'
|
||||
}"
|
||||
>
|
||||
Watch 1 min demo
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
<div aria-hidden="true" class="absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
|
||||
</UPageHero>
|
||||
<UPageSection v-bind="page.features1" :ui="{ container: 'py-16 sm:py-16 lg:py-16', features: 'mt-0' }" class="border-y border-(--ui-border)" />
|
||||
<UPageCTA
|
||||
v-if="page.cta1"
|
||||
variant="naked"
|
||||
:ui="{
|
||||
container: 'lg:grid-cols-0 !gap-0 px-4 sm:px-6 lg:px-8',
|
||||
wrapper: 'grid grid-cols-1 lg:grid-cols-2',
|
||||
description: 'lg:mt-0' }"
|
||||
orientation="horizontal"
|
||||
class="rounded-none bg-gradient-to-b from-(--ui-bg-muted) to-(--ui-bg)"
|
||||
>
|
||||
<template #title>
|
||||
<MDC :value="page.cta1.title" unwrap="p" />
|
||||
</template>
|
||||
<template #description>
|
||||
<MDC :value="page.cta1.description" unwrap="p" />
|
||||
</template>
|
||||
</UPageCTA>
|
||||
<UPageSection v-bind="page.section1" orientation="horizontal" :ui="{ container: 'py-16 sm:py-16 lg:py-16' }">
|
||||
<UTabs :items="(page.section1.tabs as any[])" size="sm" color="neutral" :unmount-on-hide="false">
|
||||
<template #content="{ item }">
|
||||
<NuxtImg
|
||||
:width="item.width"
|
||||
:height="item.height"
|
||||
:src="item.src"
|
||||
:alt="item.alt"
|
||||
class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
|
||||
lazy
|
||||
/>
|
||||
</template>
|
||||
</UTabs>
|
||||
</UPageSection>
|
||||
<UPageSection v-bind="page.section2" orientation="horizontal" :ui="{ container: 'py-16 sm:py-16 lg:py-16' }">
|
||||
<NuxtImg
|
||||
v-if="page.section2.image"
|
||||
v-bind="page.section2.image"
|
||||
class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
|
||||
lazy
|
||||
/>
|
||||
</UPageSection>
|
||||
<UPageSection v-bind="page.section3" orientation="horizontal" :ui="{ container: 'py-16 sm:pt-16 lg:pt-16' }">
|
||||
<NuxtImg
|
||||
v-if="page.section3.image"
|
||||
v-bind="page.section3.image"
|
||||
class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
|
||||
lazy
|
||||
/>
|
||||
</UPageSection>
|
||||
<USeparator />
|
||||
<UPageSection
|
||||
v-bind="page.section4"
|
||||
orientation="vertical"
|
||||
:ui="{
|
||||
title: 'sm:text-left',
|
||||
description: 'sm:text-left',
|
||||
links: 'sm:justify-start',
|
||||
container: 'relative !pb-0',
|
||||
wrapper: 'sm:pl-8'
|
||||
}"
|
||||
>
|
||||
<template #description>
|
||||
<MDC :value="page.section4.description" unwrap="p" />
|
||||
</template>
|
||||
<div aria-hidden="true" class="absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
|
||||
<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 items-start justify-center border border-(--ui-border) border-b-0 sm:divide-x divide-y lg:divide-y-0 divide-(--ui-border)">
|
||||
<li v-for="(step, index) in page?.section4.steps" :key="step.title" class="flex flex-col gap-y-4 justify-start group h-full p-4">
|
||||
<NuxtImg
|
||||
v-if="step.image"
|
||||
v-bind="step.image"
|
||||
class="rounded-(--ui-radius)"
|
||||
lazy
|
||||
/>
|
||||
<div>
|
||||
<h2 class="font-semibold inline-flex items-center gap-x-1">
|
||||
<UBadge :label="index + 1" size="sm" color="neutral" variant="subtle" class="rounded-full tabular-nums" /> {{ step.title }}
|
||||
</h2>
|
||||
<p class="text-(--ui-text-muted) text-sm">
|
||||
{{ step.description }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</UPageSection>
|
||||
<UPageSection v-bind="page.features2" :ui="{ container: 'py-16 sm:py-16 lg:py-16', features: 'mt-0' }" class="border-y border-(--ui-border)" />
|
||||
<UPageSection
|
||||
v-if="page.pricing"
|
||||
:title="page.pricing.title"
|
||||
:description="page.pricing.description"
|
||||
orientation="vertical"
|
||||
:ui="{
|
||||
title: 'sm:text-left',
|
||||
description: 'sm:text-left',
|
||||
links: 'sm:justify-start',
|
||||
container: 'relative !pb-0',
|
||||
wrapper: 'sm:pl-8'
|
||||
}"
|
||||
>
|
||||
<div aria-hidden="true" class="absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
|
||||
<UPricingPlans compact class="-space-x-px">
|
||||
<UPricingPlan
|
||||
v-for="(plan, index) in page.pricing.plans"
|
||||
:key="index"
|
||||
:title="plan.title"
|
||||
:description="plan.description"
|
||||
:price="plan.price"
|
||||
:billing-period="plan.billing_period"
|
||||
:billing-cycle="plan.billing_cycle"
|
||||
:highlight="plan.highlight"
|
||||
:features="plan.features"
|
||||
:button="plan.button"
|
||||
:terms="plan.terms"
|
||||
class="rounded-none"
|
||||
:class="plan.class"
|
||||
>
|
||||
<template #features>
|
||||
<li v-for="(feature, i) in plan.features" :key="i" class="flex items-center gap-2 min-w-0">
|
||||
<UIcon name="i-lucide-circle-check" class="size-5 shrink-0 text-(--ui-primary)" />
|
||||
<MDC :value="feature" unwrap="p" tag="span" class="text-sm truncate text-(--ui-text-accented)" />
|
||||
</li>
|
||||
</template>
|
||||
<template #button>
|
||||
<div class="flex flex-col w-full items-center gap-2">
|
||||
<UButton v-bind="plan.button" block size="lg" />
|
||||
<UButton
|
||||
v-if="plan.extraButton"
|
||||
v-bind="plan.extraButton"
|
||||
block
|
||||
size="lg"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</UPricingPlan>
|
||||
</UPricingPlans>
|
||||
</UPageSection>
|
||||
<UPageCTA v-if="page.customers" :title="page.customers.title" :ui="{ title: '!text-base font-medium', container: 'sm:py-12 sm:gap-8' }" variant="outline" class="rounded-none">
|
||||
<UPageMarquee pause-on-hover :ui="{ root: '[--duration:40s]' }">
|
||||
<img
|
||||
v-for="(logo, index) in page.customers.items"
|
||||
:key="index"
|
||||
v-bind="logo"
|
||||
class="h-6 shrink-0 max-w-[140px] filter invert dark:invert-0"
|
||||
>
|
||||
</UPageMarquee>
|
||||
</UPageCTA>
|
||||
<UPageSection v-bind="page.faq" :ui="{ 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" />
|
||||
<UPageAccordion
|
||||
multiple
|
||||
:items="(page.faq.items as any[])"
|
||||
class="max-w-4xl mx-auto"
|
||||
>
|
||||
<template #body="{ item }">
|
||||
<MDC :value="item.content" unwrap="p" />
|
||||
</template>
|
||||
</UPageAccordion>
|
||||
</UPageSection>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user