docs: various marketing improvements (#3400)

Co-authored-by: HugoRCD <hugo.richard@epitech.eu>

docs/app/pages/pro/index.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
+import { joinURL } from 'ufo'
 // @ts-expect-error yaml is not typed
 import page from '.content/pro.yml'
 // @ts-expect-error yaml is not typed
 import templatesPage from '.content/templates.yml'
 
+const { url } = useSiteConfig()
+
 useSeoMeta({
   title: page.title,
   ogTitle: page.title,
+  ogImage: joinURL(url, '/pro/og-image.png'),
   description: page.description,
   ogDescription: page.description
 })
-defineOgImageComponent('Docs', {
-  headline: 'Pro'
-})
 </script>
 
 <template>
@@ -20,7 +21,9 @@ defineOgImageComponent('Docs', {
     <UPageHero
       :links="page.hero.links"
       class="relative"
-      orientation="horizontal"
+      :ui="{
+        container: 'relative !pb-0'
+      }"
     >
       <template #title>
         <MDC :value="page.hero.title" unwrap="p" />
@@ -29,36 +32,81 @@ defineOgImageComponent('Docs', {
         <MDC :value="page.hero.description" unwrap="p" />
       </template>
       <template #top>
-        <div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
         <StarsBg />
       </template>
 
-      <PromotionalVideo />
+      <Motion as-child :initial="{ height: 0 }" :animate="{ height: 'auto' }" :transition="{ delay: 0.2, duration: 1 }">
+        <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" />
+      </Motion>
+      <Motion as-child :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :transition="{ delay: 0.6, duration: 0.6 }">
+        <NuxtImg src="/pro/hero.png" width="1374" height="439" alt="Nuxt UI Pro" class="w-full border-t border-x border-(--ui-border) bg-(--ui-bg-muted)" />
+      </Motion>
     </UPageHero>
-
+    <UPageCTA
+      variant="outline"
+      class="rounded-none"
+      :ui="{
+        container: 'sm:py-12 lg:py-12 sm:gap-4',
+        description: 'sm:text-base'
+      }"
+    >
+      <template #description>
+        <Motion :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0)' }" :in-view-options="{ once: true }" :transition="{ delay: 0.2 }">
+          <MDC :value="page.testimonial.quote" unwrap="p" class="before:content-[open-quote] after:content-[close-quote] " />
+        </Motion>
+      </template>
+      <Motion :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0)' }" :in-view-options="{ once: true }" :transition="{ delay: 0.3 }">
+        <UUser
+          v-bind="page.testimonial.user"
+          class="justify-center"
+        />
+      </Motion>
+    </UPageCTA>
     <UPageSection
       v-bind="page.features"
-      :ui="{ title: 'text-left', description: 'text-left' }"
-    />
+      :ui="{
+        title: 'text-left',
+        description: 'text-left',
+        container: 'relative',
+        wrapper: 'sm:px-8'
+      }"
+      class="border-t border-(--ui-border)"
+    >
+      <Motion as-child :initial="{ height: 0 }" :in-view="{ height: 'auto' }" :transition="{ delay: 0.4, duration: 1 }">
+        <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" />
+      </Motion>
+    </UPageSection>
 
     <UPageCTA
-      :description="page.authorQuote.quote"
-      variant="soft"
-      class="rounded-none"
-      :ui="{ container: 'sm:py-12 lg:py-12 sm:gap-8', description: 'before:content-[open-quote] after:content-[close-quote]' }"
+      v-if="page.mainSection"
+      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 border-t border-(--ui-border) bg-gradient-to-b from-(--ui-bg-muted) to-(--ui-bg)"
     >
-      <UUser
-        v-bind="page.authorQuote.user"
-        size="xl"
-        class="justify-center"
-      />
+      <template #title>
+        <MDC :value="page.mainSection.title" unwrap="p" />
+      </template>
+      <template #description>
+        <MDC :value="page.mainSection.description" unwrap="p" />
+      </template>
     </UPageCTA>
-
     <UPageSection
       v-for="(section, index) in page.sections"
       :key="index"
-      v-bind="section"
+      :title="section.title"
+      :description="section.description"
+      :links="section.links"
+      :reverse="section.reverse"
+      :features="section.features"
       orientation="horizontal"
+      :class="{ 'border-b border-(--ui-border)': index === page.sections.length - 1 }"
+      :ui="{
+        container: index === 0 ? 'pb-0 sm:pb-0 lg:pb-0 py-16 sm:py-16 lg:py-16' : ''
+      }"
     >
       <MDC :value="section.code" />
     </UPageSection>
@@ -66,16 +114,24 @@ defineOgImageComponent('Docs', {
     <UPageSection
       id="templates"
       v-bind="page.templates"
-      class="overflow-hidden"
+      class="overflow-hidden border-x border-(--ui-border)"
+      :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" />
       <UCarousel
         v-slot="{ item }"
         loop
         arrows
         dots
+        wheel-gestures
         :autoplay="{ delay: 3000 }"
         :items="(templatesPage.templates as any[])"
-        :ui="{ item: 'basis-1/2', container: 'py-2' }"
+        :ui="{
+          item: 'basis-1/2',
+          container: 'py-2',
+          viewport: 'border-x border-(--ui-border)',
+          arrows: 'hidden 2xl:block'
+        }"
       >
         <UPageCard
           :to="item.links[0].to"
@@ -94,7 +150,8 @@ defineOgImageComponent('Docs', {
             :light="item.thumbnail.light"
             :dark="item.thumbnail.dark"
             :alt="item.title"
-            class="rounded-lg w-full border border-(--ui-border)"
+            class="rounded-lg w-full border border-(--ui-border) aspect-video"
+            loading="lazy"
           />
         </UPageCard>
       </UCarousel>
@@ -104,12 +161,30 @@ defineOgImageComponent('Docs', {
 
     <UPageCTA
       v-bind="page.cta"
-      variant="naked"
+      variant="subtle"
       class="overflow-hidden"
+      orientation="horizontal"
     >
-      <div class="absolute rounded-full dark:bg-(--ui-primary) blur-[250px] size-40 sm:size-50 transform -translate-x-1/2 left-1/2 -translate-y-80" />
-
       <StarsBg />
+      <video
+        class="rounded-[var(--ui-radius)] z-10"
+        preload="none"
+        poster="https://res.cloudinary.com/nuxt/video/upload/so_3.3/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.jpg"
+        :controls="true"
+      >
+        <source
+          src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.webm"
+          type="video/webm"
+        >
+        <source
+          src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.mp4"
+          type="video/mp4"
+        >
+        <source
+          src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.ogg"
+          type="video/ogg"
+        >
+      </video>
     </UPageCTA>
   </div>
 </template>