183 lines
8.0 KiB
Vue
183 lines
8.0 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
import { onMounted, ref, onUnmounted } from 'vue'
|
|
import { gsap } from 'gsap'
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
|
import FooterLogo from '~/components/common/FooterLogo.vue'
|
|
import AnimatedButton from '~/components/common/AnimatedButton.vue'
|
|
|
|
gsap.registerPlugin(ScrollTrigger)
|
|
|
|
const { t } = useI18n()
|
|
const footerRef = ref<HTMLElement | null>(null)
|
|
let ctx: gsap.Context
|
|
|
|
const pagesLinks = [
|
|
{ name: 'nav.home', url: '/' },
|
|
{ name: 'nav.studio', url: '/studio' },
|
|
{ name: 'nav.work', url: '/work' },
|
|
{ name: 'nav.news', url: '/news' },
|
|
]
|
|
|
|
onMounted(() => {
|
|
if (!footerRef.value) return
|
|
|
|
ctx = gsap.context(() => {
|
|
const items = gsap.utils.toArray<HTMLElement>('.animated-item')
|
|
|
|
gsap.from(items, {
|
|
scrollTrigger: {
|
|
trigger: footerRef.value,
|
|
start: 'top 80%',
|
|
toggleActions: 'play none none reverse',
|
|
},
|
|
y: 20,
|
|
opacity: 0,
|
|
duration: 0.6,
|
|
stagger: 0.1,
|
|
ease: 'power3.out'
|
|
})
|
|
}, footerRef.value)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
ctx?.revert()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<footer ref="footerRef" class="bg-black text-white px-6 py-16 md:px-12 md:py-24 overflow-hidden">
|
|
<div class="max-w-[1440px] mx-auto">
|
|
<!-- Top Section -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-8 mb-16">
|
|
<h2 class="text-3xl md:text-4xl lg:text-[44px] font-normal tracking-normal !leading-[1.4] max-w-none whitespace-pre-line">
|
|
{{ t('footer.title') }}
|
|
</h2>
|
|
<div class="inline-flex items-center shrink-0">
|
|
<AnimatedButton
|
|
:text="t('footer.collaborate')"
|
|
to="/contact"
|
|
theme="light"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<hr class="border-white/10 w-full mb-16" />
|
|
|
|
<!-- Bottom Section -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2">
|
|
|
|
<!-- Left Column -->
|
|
<div class="flex flex-col justify-between lg:border-r border-white/10 lg:pr-16 pb-16 lg:pb-0 border-b lg:border-b-0 mb-16 lg:mb-0">
|
|
<div>
|
|
<FooterLogo class="mb-16 animated-item justify-start" />
|
|
|
|
<h3 class="text-2xl font-medium mb-6 animated-item">{{ t('footer.newsletterTitle') }}</h3>
|
|
|
|
<form @submit.prevent class="relative w-full max-w-sm mb-4 animated-item">
|
|
<input
|
|
type="email"
|
|
:placeholder="t('footer.emailPlaceholder')"
|
|
class="w-full h-[64px] bg-[#1f1f1f] border border-white/10 rounded-full pl-6 pr-[120px] text-sm text-white placeholder-white/40 focus:outline-none focus:bg-[#2f2f2f] transition-colors"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="absolute right-2 top-2 bottom-2 bg-black text-white text-sm px-6 rounded-full font-medium hover:opacity-75 transition-opacity"
|
|
>
|
|
{{ t('footer.subscribe') }}
|
|
</button>
|
|
</form>
|
|
|
|
<div class="text-xs text-white/40 flex items-center gap-2 animated-item">
|
|
<span class="w-1.5 h-1.5 bg-white rounded-full inline-block shrink-0"></span>
|
|
{{ t('footer.newsletterNote') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-24 lg:mt-0 flex items-center gap-2 animated-item">
|
|
<div class="text-[16px] font-bold text-white/30 font-sans">
|
|
{{ t('footer.copyright') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="flex flex-col gap-[50px] lg:pl-16">
|
|
|
|
<!-- Links Grid (Top Half) -->
|
|
<div>
|
|
<ul class="space-y-3">
|
|
<li v-for="link in pagesLinks" :key="link.name" class="animated-item">
|
|
<NuxtLink :to="link.url" class="group flex items-center overflow-hidden text-[16px] font-bold text-white/80 hover:text-white transition-colors" style="justify-content: flex-start;">
|
|
<div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
|
|
<span class="mr-[10px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
|
|
<span>{{ t(link.name) }}</span>
|
|
</div>
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Contact / Location / Social Grid (Bottom Half) -->
|
|
<!-- Contacts Row -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
|
<ul class="space-y-3">
|
|
<li class="animated-item">
|
|
<a href="mailto:chenchun@virtheart.com" class="group flex items-center overflow-hidden text-[16px] font-bold text-white/80 hover:text-white transition-colors" style="justify-content: flex-start;">
|
|
<div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
|
|
<span class="mr-[10px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
|
|
<span>chenchun@virtheart.com</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="animated-item">
|
|
<span class="group flex items-center overflow-hidden text-[16px] font-bold text-white/80 transition-colors cursor-default" style="justify-content: flex-start;">
|
|
<div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
|
|
<span class="mr-[10px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
|
|
<span>{{ t('footer.wechat') }}: LucskyNew</span>
|
|
</div>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="space-y-3">
|
|
<li class="animated-item">
|
|
<a href="mailto:info@virtheart.com" class="group flex items-center overflow-hidden text-[16px] font-bold text-white/80 hover:text-white transition-colors" style="justify-content: flex-start;">
|
|
<div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
|
|
<span class="mr-[10px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
|
|
<span>info@virtheart.com</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Address & Social Row -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8 items-start">
|
|
<div class="group flex items-start overflow-hidden text-[16px] font-bold text-white/80 hover:text-white transition-colors animated-item cursor-default" style="justify-content: flex-start;">
|
|
<div class="flex items-start transition-transform duration-300 group-hover:translate-x-0 -translate-x-[21px] pr-[21px]">
|
|
<span class="mr-[10px] mt-[6px] h-[11px] w-[11px] rounded-full bg-white shrink-0"></span>
|
|
<span class="leading-relaxed whitespace-pre-line">{{ t('footer.address') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 animated-item">
|
|
<a href="#" class="w-10 h-10 rounded-full bg-[#1f1f1f] hover:bg-[#2f2f2f] flex items-center justify-center transition-colors text-white">
|
|
<Icon name="ph:instagram-logo" class="w-4 h-4" />
|
|
</a>
|
|
<a href="#" class="w-10 h-10 rounded-full bg-[#1f1f1f] hover:bg-[#2f2f2f] flex items-center justify-center transition-colors text-white">
|
|
<Icon name="pajamas:twitter-x" class="w-3.5 h-3.5" />
|
|
</a>
|
|
<a href="#" class="w-10 h-10 rounded-full bg-[#1f1f1f] hover:bg-[#2f2f2f] flex items-center justify-center transition-colors text-white">
|
|
<Icon name="ph:diamond-fill" class="w-4 h-4" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|