@studio-fes/create-fes-app 0.1.1

package/templates/strapi/.nuxt/types/nuxt-sitemap-virtual.d.ts

@@ -0,0 +1,23 @@
+declare module '#sitemap-virtual/read-sources.mjs' {
+  export function readSourcesFromFilesystem(filename: string): Promise<any | null>
+}
+
+declare module '#sitemap-virtual/global-sources.mjs' {
+  import type { SitemapSourceBase, SitemapSourceResolved } from '#sitemap/types'
+
+  export const sources: (SitemapSourceBase | SitemapSourceResolved)[]
+}
+
+declare module '#sitemap-virtual/child-sources.mjs' {
+  import type { SitemapSourceBase, SitemapSourceResolved } from '#sitemap/types'
+
+  export const sources: Record<string, (SitemapSourceBase | SitemapSourceResolved)[]>
+}
+
+declare module '#sitemap/content-filters' {
+  export const filters: Map<string, (entry: any) => boolean>
+}
+
+declare module '#sitemap/content-on-url' {
+  export const onUrlFns: Map<string, (url: Record<string, unknown>, entry: any, collection: string) => void>
+}

package/templates/strapi/.nuxt/types/plugins.d.ts

@@ -0,0 +1,58 @@
+// Generated by Nuxt'
+import type { Plugin } from '#app'
+
+type Decorate<T extends Record<string, any>> = { [K in keyof T as K extends string ? `$${K}` : never]: T[K] }
+
+type InjectionType<A extends Plugin> = A extends {default: Plugin<infer T>} ? Decorate<T> : unknown
+
+type NuxtAppInjections = 
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt-graphql-middleware@5.4.0_@parcel+watcher@2.5.6_@types+node@26.1.2_crossws@0.3.5_gr_8fe58dc693672128ff08154465028eed/node_modules/nuxt-graphql-middleware/dist/runtime/plugins/provideState.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt@4.5.1_@babel+plugin-syntax-jsx@7.28.6_@babel+core@7.29.0_supports-color@10.2.2___@_d7c1e993a9447722d68d14b51eddb8d4/node_modules/nuxt/dist/app/plugins/revive-payload.client.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt-site-config@4.1.2_44b3c45ac015ae8f841a172548867a1f/node_modules/nuxt-site-config/dist/runtime/app/plugins/0.siteConfig.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt@4.5.1_@babel+plugin-syntax-jsx@7.28.6_@babel+core@7.29.0_supports-color@10.2.2___@_d7c1e993a9447722d68d14b51eddb8d4/node_modules/nuxt/dist/head/runtime/plugins/unhead.server.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt@4.5.1_@babel+plugin-syntax-jsx@7.28.6_@babel+core@7.29.0_supports-color@10.2.2___@_d7c1e993a9447722d68d14b51eddb8d4/node_modules/nuxt/dist/head/runtime/plugins/unhead.client.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt@4.5.1_@babel+plugin-syntax-jsx@7.28.6_@babel+core@7.29.0_supports-color@10.2.2___@_d7c1e993a9447722d68d14b51eddb8d4/node_modules/nuxt/dist/pages/runtime/plugins/router.js")> &
+  InjectionType<typeof import("../../app/plugins/site-config.server")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt@4.5.1_@babel+plugin-syntax-jsx@7.28.6_@babel+core@7.29.0_supports-color@10.2.2___@_d7c1e993a9447722d68d14b51eddb8d4/node_modules/nuxt/dist/app/plugins/payload.client.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt@4.5.1_@babel+plugin-syntax-jsx@7.28.6_@babel+core@7.29.0_supports-color@10.2.2___@_d7c1e993a9447722d68d14b51eddb8d4/node_modules/nuxt/dist/app/plugins/navigation-repaint.client.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt@4.5.1_@babel+plugin-syntax-jsx@7.28.6_@babel+core@7.29.0_supports-color@10.2.2___@_d7c1e993a9447722d68d14b51eddb8d4/node_modules/nuxt/dist/app/plugins/check-outdated-build.client.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt@4.5.1_@babel+plugin-syntax-jsx@7.28.6_@babel+core@7.29.0_supports-color@10.2.2___@_d7c1e993a9447722d68d14b51eddb8d4/node_modules/nuxt/dist/app/plugins/revive-payload.server.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt@4.5.1_@babel+plugin-syntax-jsx@7.28.6_@babel+core@7.29.0_supports-color@10.2.2___@_d7c1e993a9447722d68d14b51eddb8d4/node_modules/nuxt/dist/app/plugins/chunk-reload-crawler.client.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt@4.5.1_@babel+plugin-syntax-jsx@7.28.6_@babel+core@7.29.0_supports-color@10.2.2___@_d7c1e993a9447722d68d14b51eddb8d4/node_modules/nuxt/dist/app/plugins/chunk-reload.client.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt-seo-utils@8.3.2_8aa416604512f5db5026b20b83114716/node_modules/nuxt-seo-utils/dist/runtime/app/plugins/siteConfig.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt-seo-utils@8.3.2_8aa416604512f5db5026b20b83114716/node_modules/nuxt-seo-utils/dist/runtime/app/plugins/inferSeoMetaPlugin.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt-seo-utils@8.3.2_8aa416604512f5db5026b20b83114716/node_modules/nuxt-seo-utils/dist/runtime/app/plugins/titlesWaitI18n.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt-seo-utils@8.3.2_8aa416604512f5db5026b20b83114716/node_modules/nuxt-seo-utils/dist/runtime/app/plugins/defaultsWaitI18n.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt-schema-org@6.2.7_39cdad3a51b8a9ff9ec34ed48066340c/node_modules/nuxt-schema-org/dist/runtime/app/plugins/defaults.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt-schema-org@6.2.7_39cdad3a51b8a9ff9ec34ed48066340c/node_modules/nuxt-schema-org/dist/runtime/app/plugins/init.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/@nuxtjs+robots@6.1.3_44b3c45ac015ae8f841a172548867a1f/node_modules/@nuxtjs/robots/dist/runtime/app/plugins/robot-meta.server.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt-site-config@4.1.2_44b3c45ac015ae8f841a172548867a1f/node_modules/nuxt-site-config/dist/runtime/app/plugins/i18n.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt@4.5.1_@babel+plugin-syntax-jsx@7.28.6_@babel+core@7.29.0_supports-color@10.2.2___@_d7c1e993a9447722d68d14b51eddb8d4/node_modules/nuxt/dist/pages/runtime/plugins/prefetch.client.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt-multi-cache@4.0.3/node_modules/nuxt-multi-cache/dist/runtime/plugins/applyCDNHeaders.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/@nuxtjs+i18n@10.5.0_@vue+compiler-dom@3.5.40_db0@0.3.4_esbuild@0.28.1_eslint@10.8.0_jit_55a063e349fcb2849e964b682c9622d7/node_modules/@nuxtjs/i18n/dist/runtime/plugins/switch-locale-path-ssr.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/@nuxtjs+i18n@10.5.0_@vue+compiler-dom@3.5.40_db0@0.3.4_esbuild@0.28.1_eslint@10.8.0_jit_55a063e349fcb2849e964b682c9622d7/node_modules/@nuxtjs/i18n/dist/runtime/plugins/route-locale-detect.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/@nuxtjs+i18n@10.5.0_@vue+compiler-dom@3.5.40_db0@0.3.4_esbuild@0.28.1_eslint@10.8.0_jit_55a063e349fcb2849e964b682c9622d7/node_modules/@nuxtjs/i18n/dist/runtime/plugins/preload.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/@nuxtjs+i18n@10.5.0_@vue+compiler-dom@3.5.40_db0@0.3.4_esbuild@0.28.1_eslint@10.8.0_jit_55a063e349fcb2849e964b682c9622d7/node_modules/@nuxtjs/i18n/dist/runtime/plugins/dev.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/@nuxtjs+i18n@10.5.0_@vue+compiler-dom@3.5.40_db0@0.3.4_esbuild@0.28.1_eslint@10.8.0_jit_55a063e349fcb2849e964b682c9622d7/node_modules/@nuxtjs/i18n/dist/runtime/plugins/i18n.js")> &
+  InjectionType<typeof import("../../../../../layer-base/app/plugins/custom-easings.client")> &
+  InjectionType<typeof import("../../../../../layer-base/app/plugins/interpolation")> &
+  InjectionType<typeof import("../../app/plugins/gsap-reduced-motion.client")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt-seo-utils@8.3.2_8aa416604512f5db5026b20b83114716/node_modules/nuxt-seo-utils/dist/runtime/app/plugins/minifyScripts.server.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt-seo-utils@8.3.2_8aa416604512f5db5026b20b83114716/node_modules/nuxt-seo-utils/dist/runtime/app/plugins/1.absoluteImageUrls.server.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/nuxt-seo-utils@8.3.2_8aa416604512f5db5026b20b83114716/node_modules/nuxt-seo-utils/dist/runtime/app/plugins/0.routeRules.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/gsap-nuxt-module@1.2.4_magicast@0.5.3/node_modules/gsap-nuxt-module/dist/runtime/plugin.js")> &
+  InjectionType<typeof import("../../../../../../node_modules/.pnpm/@nuxtjs+i18n@10.5.0_@vue+compiler-dom@3.5.40_db0@0.3.4_esbuild@0.28.1_eslint@10.8.0_jit_55a063e349fcb2849e964b682c9622d7/node_modules/@nuxtjs/i18n/dist/runtime/plugins/ssg-detect.js")>
+
+declare module '#app' {
+  interface NuxtApp extends NuxtAppInjections { }
+
+  interface NuxtAppLiterals {
+    pluginName: 'nuxt-graphql-middleware-provide-state' | 'nuxt:revive-payload:client' | 'nuxt-site-config:init' | 'nuxt:head' | 'nuxt:head' | 'nuxt:router' | 'site-config' | 'nuxt:payload' | 'nuxt:revive-payload:server' | 'nuxt:chunk-reload-crawler' | 'nuxt:chunk-reload' | 'nuxt-seo:fallback-titles' | 'nuxt-seo:defaults' | 'nuxt-schema-org:defaults' | 'nuxt-schema-org:init' | 'nuxt-site-config:i18n' | 'nuxt:global-components' | 'nuxt:prefetch' | 'nuxt-multi-cache:cdn-headers' | 'i18n:plugin:switch-locale-path-ssr' | 'i18n:plugin:route-locale-detect' | 'i18n:plugin:preload' | 'i18n:dev' | 'i18n:plugin' | 'custom-easing' | 'gsap-nuxt-module' | 'i18n:plugin:ssg-detect'
+  }
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties extends NuxtAppInjections { }
+}
+
+export { }

package/templates/strapi/.nuxt/types/runtime-config.d.ts

@@ -0,0 +1,244 @@
+import { RuntimeConfig as UserRuntimeConfig, PublicRuntimeConfig as UserPublicRuntimeConfig } from 'nuxt/schema'
+  interface SharedRuntimeConfig {
+   app: {
+      buildId: string,
+
+      baseURL: string,
+
+      buildAssetsDir: string,
+
+      cdnURL: string,
+   },
+
+   multiCacheEnabled: boolean,
+
+   "nuxt-scripts": {
+      version: string,
+
+      googleStaticMapsProxy: any,
+   },
+
+   graphqlMiddleware: {
+      graphqlEndpoint: string,
+   },
+
+   multiCache: {
+      cdn: boolean,
+
+      component: boolean,
+
+      data: boolean,
+
+      route: boolean,
+
+      api: {
+         enabled: boolean,
+
+         authorizationToken: string,
+
+         authorizationDisabled: boolean,
+      },
+   },
+
+   sitemap: {
+      cacheMaxAgeSeconds: number,
+
+      debug: boolean,
+   },
+
+   "nuxt-schema-org": {
+      reactive: boolean,
+
+      minify: boolean,
+
+      scriptAttributes: {
+         "data-nuxt-schema-org": boolean,
+      },
+
+      identity: any,
+
+      version: string,
+   },
+
+   "nuxt-site-config": {
+      stack: Array<{
+
+      }>,
+
+      version: string,
+
+      debug: boolean,
+
+      multiTenancy: Array<any>,
+   },
+
+   "nuxt-robots": {
+      version: string,
+
+      isNuxtContentV2: boolean,
+
+      debug: boolean,
+
+      credits: boolean,
+
+      groups: Array<{
+
+      }>,
+
+      sitemap: Array<string>,
+
+      header: boolean,
+
+      robotsEnabledValue: string,
+
+      robotsDisabledValue: string,
+
+      cacheControl: string,
+
+      botDetection: boolean,
+
+      pageMetaRobots: any,
+   },
+  }
+  interface SharedPublicRuntimeConfig {
+   backendUrl: string,
+
+   baseUrl: string,
+
+   "nuxt-scripts": {
+      version: any,
+
+      prefix: string,
+
+      defaultScriptOptions: {
+         trigger: string,
+      },
+
+      googleStaticMapsProxy: any,
+
+      endpoints: any,
+   },
+
+   gsap: {
+      plugins: Array<string>,
+   },
+
+   ogImageFallback: string,
+
+   "nuxt-seo-utils-version": string,
+
+   "seo-utils": {
+      canonicalQueryWhitelist: Array<string>,
+
+      canonicalLowercase: boolean,
+
+      tagPriority: string,
+
+      separator: any,
+
+      titleSeparator: any,
+   },
+
+   i18n: {
+      baseUrl: string,
+
+      defaultLocale: string,
+
+      rootRedirect: any,
+
+      redirectStatusCode: number,
+
+      skipSettingLocaleOnNavigate: boolean,
+
+      locales: Array<any>,
+
+      detectBrowserLanguage: {
+         alwaysRedirect: boolean,
+
+         cookieCrossOrigin: boolean,
+
+         cookieDomain: any,
+
+         cookieKey: string,
+
+         cookieSecure: boolean,
+
+         fallbackLocale: string,
+
+         redirectOn: string,
+
+         useCookie: boolean,
+      },
+
+      experimental: {
+         localeDetector: string,
+
+         typedPages: boolean,
+
+         typedOptionsAndMessages: boolean,
+
+         alternateLinkCanonicalQueries: boolean,
+
+         devCache: boolean,
+
+         cacheLifetime: any,
+
+         stripMessagesPayload: boolean,
+
+         preload: boolean,
+
+         strictSeo: boolean,
+
+         nitroContextDetection: boolean,
+
+         httpCacheDuration: number,
+
+         compactRoutes: boolean,
+
+         prerenderMessages: boolean,
+      },
+
+      domainLocales: any,
+   },
+
+   "nuxt-robots": {
+      version: string,
+
+      isNuxtContentV2: boolean,
+
+      debug: boolean,
+
+      credits: boolean,
+
+      groups: Array<{
+
+      }>,
+
+      sitemap: Array<string>,
+
+      header: boolean,
+
+      robotsEnabledValue: string,
+
+      robotsDisabledValue: string,
+
+      cacheControl: string,
+
+      botDetection: boolean,
+
+      pageMetaRobots: any,
+   },
+  }
+declare module '@nuxt/schema' {
+  interface RuntimeConfig extends UserRuntimeConfig {}
+  interface PublicRuntimeConfig extends UserPublicRuntimeConfig {}
+}
+declare module 'nuxt/schema' {
+  interface RuntimeConfig extends SharedRuntimeConfig {}
+  interface PublicRuntimeConfig extends SharedPublicRuntimeConfig {}
+}
+declare module 'vue' {
+        interface ComponentCustomProperties {
+          $config: UserRuntimeConfig
+        }
+      }

package/templates/strapi/.nuxt/types/shared-app.config.d.ts

@@ -0,0 +1,32 @@
+
+import type { CustomAppConfig } from 'nuxt/schema'
+
+declare const inlineConfig = {
+  "nuxt": {},
+  "graphqlMiddleware": {
+    "clientCacheEnabled": true,
+    "clientCacheMaxSize": 100
+  }
+}
+type IsAny<T> = 0 extends 1 & T ? true : false
+
+type MergedAppConfig<Resolved extends Record<string, unknown>, Custom extends Record<string, unknown>> = {
+  [K in keyof (Resolved & Custom)]: K extends keyof Custom
+    ? unknown extends Custom[K]
+      ? Resolved[K]
+      : IsAny<Custom[K]> extends true
+        ? Resolved[K]
+        : Custom[K] extends Record<string, any>
+            ? Resolved[K] extends Record<string, any>
+              ? MergedAppConfig<Resolved[K], Custom[K]>
+              : Exclude<Custom[K], undefined>
+            : Exclude<Custom[K], undefined>
+    : Resolved[K]
+}
+
+declare module 'nuxt/schema' {
+  interface AppConfig extends MergedAppConfig<typeof inlineConfig, CustomAppConfig> { }
+}
+declare module '@nuxt/schema' {
+  interface AppConfig extends MergedAppConfig<typeof inlineConfig, CustomAppConfig> { }
+}

package/templates/strapi/.nuxt/types/shared-imports.d.ts

@@ -0,0 +1,10 @@
+// Generated by auto imports
+export {}
+declare global {
+  const useRuntimeConfig: (event?: import('h3').H3Event) => import('nuxt/schema').RuntimeConfig
+  const useAppConfig: () => import('nuxt/schema').AppConfig
+  const defineAppConfig: <C extends import('nuxt/schema').AppConfigInput>(config: C) => C
+  const createError: typeof import('h3')['createError']
+  const setResponseStatus: typeof import('h3')['setResponseStatus']
+
+}

package/templates/strapi/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/templates/strapi/_gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

package/templates/strapi/app/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

package/templates/strapi/app/components/DynamicZone.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { ConcreteComponent, PropType } from 'vue'
+
+export type DynamicZoneSection = (Record<string, unknown> & { __typename: string })
+
+const props = defineProps({
+  direction: { type: String as PropType<'horizontal' | 'vertical'>, default: 'horizontal' },
+  sections: { type: Array as PropType<DynamicZoneSection[]>, default: () => [] },
+  timeline: { type: Object as PropType<gsap.core.Timeline> },
+})
+
+const componentConfig: Record<string, {
+  component: ConcreteComponent | string
+  indexable?: boolean
+}> = {
+  ComponentMediaSingleImage: {
+    component: resolveComponent('SectionSingleImage'),
+  },
+  // ComponentEditorialExpandableList: {
+  //   component: resolveComponent('SectionExpandableList'),
+  //   indexable: true,
+  // },
+  // ComponentEditorialExpandedList: {
+  //   component: resolveComponent('SectionExpandedList'),
+  // },
+  // ComponentEditorialListPeople: {
+  //   component: resolveComponent('SectionListPeople'),
+  // },
+  // ComponentEditorialExpandedServices: {
+  //   component: resolveComponent('SectionListServices'),
+  // },
+  // ComponentEditorialTextAndImage: {
+  //   component: resolveComponent('SectionTextAndImage'),
+  // },
+  // ComponentEditorialTextBlock: {
+  //   component: resolveComponent('SectionTextBlock'),
+  //   indexable: true,
+  // },
+}
+
+const components = computed(() => {
+  let index = 0
+
+  return (props.sections || []).reduce((acc, section, i) => {
+    if ('__typename' in section) {
+      const { __typename, ...bindings } = section
+      const config = componentConfig[__typename]
+
+      if (config) {
+        acc.push({
+          bindings,
+          is: config.component,
+          key: `section-${i}-${__typename.toLowerCase()}`,
+          index: config.indexable ? index++ : undefined,
+        })
+      }
+    }
+    return acc
+  }, [] as { bindings: Record<string, unknown>, is: ConcreteComponent | string, key: string, index?: number }[])
+})
+</script>
+
+<template>
+  <template v-if="components.length">
+    <component
+      :is="is"
+      v-for="({ bindings, is, key, index }) in components"
+      :key="key"
+      :data="bindings"
+      :direction
+      :timeline
+      :index
+    />
+  </template>
+</template>

package/templates/strapi/app/components/SectionSingleImage.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { SectionSingleImageFragment } from '#graphql-operations'
+
+interface SectionSingleImageProps {
+  data: SectionSingleImageFragment
+}
+
+const props = defineProps<SectionSingleImageProps>()
+</script>
+
+<template>
+  <section
+    class="singleImage"
+  >
+    <StrapiMedia
+      v-if="data.image"
+      :media="data.image"
+      class="w-full"
+      :video-props="{
+        autoplay: true,
+        muted: true,
+        playsinline: true,
+        loop: true,
+        ratio: 1410 / 792
+      }"
+    >
+      <template #media-chrome="{ isPlaying, progress }">
+        <media-play-button slot="centered-chrome">
+          <VideoProgress 
+            :is-playing="isPlaying" 
+            :progress="progress" 
+            class="size-10" 
+            slot="tooltip"
+          />
+        </media-play-button>
+      </template> 
+  </StrapiMedia>
+  </section>
+</template>

package/templates/strapi/app/components/VideoProgress.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps<{
+  progress: number
+}>()
+
+const radius = 95
+const circumference = 2 * Math.PI * radius
+
+const dashoffset = computed(() =>
+  circumference - (circumference * props.progress),
+)
+</script>
+
+<template>
+  <span class="absolute rounded-full aspect-square block cursor-pointer transition duration-300 items-center justify-center overflow-hidden bg-transparent">
+    <svg class="inset-0 absolute z-1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+      <circle
+        cx="100"
+        cy="100"
+        :r="radius"
+        class="stroke-athens-gray/40 fill-none stroke-8"
+      />
+      <circle
+        cx="100"
+        cy="100"
+        :r="radius"
+        :stroke-dasharray="circumference"
+        :stroke-dashoffset="dashoffset"
+        transform="rotate(-90 100 100)"
+        class="z-1 fill-none stroke-8 stroke-white"
+      />
+    </svg>
+  </span>
+</template>

package/templates/strapi/app/pages/[slug].vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { DynamicZoneSection } from '~/components/DynamicZone.vue'
+
+definePageMeta({
+  templateName: 'page',
+})
+
+const slug = useRoute().params.slug as string
+
+const { data } = await useAsyncGraphqlQuery('PageCustomPage', {
+  status: 'PUBLISHED',
+  slug,
+})
+
+const page = data.value?.data.pages?.[0]
+const sections = (page?.sections as unknown || []) as DynamicZoneSection[]
+</script>
+
+<template>
+  <div v-if="page">
+    <div class="space-y-20">
+      <DynamicZone
+        :sections
+        direction="vertical"
+      />
+    </div>
+  </div>
+</template>

package/templates/strapi/app/pages/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PageHomeFragment } from '#graphql-operations'
+
+const data = await useStrapiPage<{ pageHome: PageHomeFragment }>('PageHome' as never)
+useStrapiSEO(data.pageHome.seo)
+</script>
+
+<template>
+  <div>
+    <StrapiBlocks :content="data.pageHome.introText" />
+  </div>
+</template>