arcticnewone/app/pages/studio.vue

<template>
  <main class="page-container min-h-screen pt-32 pb-20 px-4 md:px-8 mx-auto max-w-[1200px]">
    <div
      ref="headerWrapRef"
      class="flex flex-col items-center justify-center text-center mb-16 md:mb-24"
      style="opacity: 0; visibility: hidden;"
    >
      <h1 ref="titleRef" class="text-3xl md:text-5xl font-bold mb-4 md:mb-6 tracking-tight text-black">{{ t('studio.title') }}</h1>
      <p ref="descRef" class="text-base md:text-lg text-gray-600 max-w-2xl">{{ t('studio.description') }}</p>
    </div>

    <div
      ref="missionWrapRef"
      class="mb-20 md:mb-28"
      style="opacity: 0; visibility: hidden;"
    >
      <div class="studio-section bg-gradient-to-br from-black to-gray-800 rounded-2xl md:rounded-3xl p-8 md:p-12 text-white">
        <h2 class="text-2xl md:text-4xl font-bold mb-4 md:mb-6">{{ t('studio.mission.title') }}</h2>
        <p class="text-base md:text-xl leading-relaxed text-gray-100 max-w-3xl">{{ t('studio.mission.content') }}</p>
      </div>
    </div>

    <div
      ref="valuesWrapRef"
      class="mb-20 md:mb-28"
      style="opacity: 0; visibility: hidden;"
    >
      <h2 class="text-2xl md:text-4xl font-bold mb-8 md:mb-12 text-center text-black">{{ t('studio.values.title') }}</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
        <div
          v-for="value in values"
          :key="value.key"
          class="value-card group relative p-6 md:p-8 rounded-2xl bg-white border border-gray-100 hover:shadow-xl transition-all duration-500 hover:-translate-y-2"
        >
          <div
            class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br rounded-2xl"
            :class="value.color"
          ></div>

          <div class="relative z-10">
            <div class="w-12 h-12 md:w-14 md:h-14 rounded-2xl flex items-center justify-center bg-gray-50 text-black group-hover:bg-white group-hover:shadow-sm transition-all duration-300 mb-5">
              <Icon :name="value.icon" class="w-6 h-6 md:w-8 md:h-8" />
            </div>
            <h3 class="text-xl md:text-2xl font-bold mb-3 text-black">{{ t(`studio.values.${value.key}`) }}</h3>
            <p class="text-sm md:text-base text-gray-600 leading-relaxed">{{ t(`studio.values.${value.key}Desc`) }}</p>
          </div>
        </div>
      </div>
    </div>

    <div
      ref="teamWrapRef"
      class="text-center"
      style="opacity: 0; visibility: hidden;"
    >
      <div class="studio-section bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl md:rounded-3xl p-8 md:p-12">
        <h2 class="text-2xl md:text-4xl font-bold mb-4 md:mb-6 text-black">{{ t('studio.team.title') }}</h2>
        <p class="text-base md:text-xl text-gray-700 max-w-3xl mx-auto">{{ t('studio.team.description') }}</p>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useSeoMeta } from '#imports'
import gsap from 'gsap'
import { useAppStore } from '~/stores/app'

const { t } = useI18n()
const appStore = useAppStore()

const headerWrapRef = ref<HTMLElement | null>(null)
const titleRef = ref<HTMLElement | null>(null)
const descRef = ref<HTMLElement | null>(null)
const missionWrapRef = ref<HTMLElement | null>(null)
const valuesWrapRef = ref<HTMLElement | null>(null)
const teamWrapRef = ref<HTMLElement | null>(null)
let sectionsCtx: gsap.Context | null = null

useSeoMeta({
  title: () => t('studio.title'),
  description: () => t('studio.description'),
})

const playPageIntro = async () => {
  await nextTick()
  if (!headerWrapRef.value || !titleRef.value || !descRef.value || !missionWrapRef.value || !valuesWrapRef.value || !teamWrapRef.value) return

  sectionsCtx?.revert()

  sectionsCtx = gsap.context(() => {
    const valueCards = gsap.utils.toArray<HTMLElement>('.value-card', valuesWrapRef.value!)

    gsap.delayedCall(0, () => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          const tl = gsap.timeline({ defaults: { ease: 'power3.out' } })

          tl.set(headerWrapRef.value!, { autoAlpha: 1 })
          tl.fromTo(titleRef.value!, { autoAlpha: 0, y: 20 }, { autoAlpha: 1, y: 0, duration: 0.85, ease: 'power4.out', clearProps: 'transform' })
          tl.fromTo(descRef.value!, { autoAlpha: 0, y: 16 }, { autoAlpha: 1, y: 0, duration: 0.7, ease: 'power4.out', clearProps: 'transform' }, '-=0.45')

          tl.set(missionWrapRef.value!, { autoAlpha: 1 }, '-=0.2')
          tl.fromTo(
            '.studio-section',
            { autoAlpha: 0, y: 30, scale: 0.97 },
            {
              autoAlpha: 1,
              y: 0,
              scale: 1,
              duration: 0.9,
              ease: 'power4.out',
              clearProps: 'transform',
            },
            missionWrapRef.value
          )

          tl.set(valuesWrapRef.value!, { autoAlpha: 1 }, '-=0.1')
          tl.fromTo(
            valueCards,
            { autoAlpha: 0, y: 34, scale: 0.965 },
            {
              autoAlpha: 1,
              y: 0,
              scale: 1,
              duration: 0.95,
              ease: 'power4.out',
              stagger: { each: 0.12, from: 'start' },
              clearProps: 'transform',
            },
            '+=0.1'
          )

          tl.set(teamWrapRef.value!, { autoAlpha: 1 }, '-=0.3')
          tl.fromTo(
            teamWrapRef.value!,
            { autoAlpha: 0, y: 30 },
            {
              autoAlpha: 1,
              y: 0,
              duration: 0.85,
              ease: 'power4.out',
              clearProps: 'transform',
            },
            '+=0.15'
          )

          tl.set([headerWrapRef.value!, missionWrapRef.value!, valuesWrapRef.value!, teamWrapRef.value!], { clearProps: 'opacity,visibility' })
        })
      })
    })
  }, headerWrapRef.value)
}

onMounted(() => {
  const handleLoadingDone = () => {
    playPageIntro()
  }

  if (!appStore.isAppLoading) {
    playPageIntro()
    return
  }

  window.addEventListener('app-loading-done', handleLoadingDone, { once: true })
})

onBeforeUnmount(() => {
  sectionsCtx?.revert()
})

interface ValueItem {
  key: string
  icon: string
  color: string
}

const values: ValueItem[] = [
  {
    key: 'creativity',
    icon: 'ph:lightbulb-duotone',
    color: 'from-yellow-50/50 to-orange-100/50'
  },
  {
    key: 'quality',
    icon: 'ph:medal-duotone',
    color: 'from-blue-50/50 to-cyan-100/50'
  },
  {
    key: 'collaboration',
    icon: 'ph:users-three-duotone',
    color: 'from-purple-50/50 to-pink-100/50'
  },
  {
    key: 'integrity',
    icon: 'ph:shield-check-duotone',
    color: 'from-green-50/50 to-emerald-100/50'
  }
]
</script>

<style scoped>
p {
  word-break: break-word;
}
</style>