71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import Link from 'next/link'
|
|
|
|
export default function Welcome({ lang, dict }: { lang: string, dict: any }) {
|
|
return (
|
|
<section className="relative z-[70] bg-[#FAF7F0] mt-24 md:mt-32 rounded-t-[40px] md:rounded-t-[100px] py-32 md:py-48 px-6 md:px-12 flex flex-col items-center text-center shadow-[0_-40px_100px_rgba(0,0,0,0.1)] overflow-hidden">
|
|
{/* Lotus/Floral Icon */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 1.2, ease: [0.33, 1, 0.68, 1] }}
|
|
className="mb-14"
|
|
>
|
|
<svg viewBox="0 0 60 60" className="w-16 h-16 fill-[#1A1A1A]">
|
|
<path d="M30 5C30 5 33 18 45 22C33 26 30 39 30 39C30 39 27 26 15 22C27 18 30 5 30 5Z" />
|
|
<path d="M30 25C30 25 42 22 55 10C45 15 35 25 30 25Z" fillOpacity="0.6" />
|
|
<path d="M30 25C30 25 18 22 5 10C15 15 25 25 30 25Z" fillOpacity="0.6" />
|
|
<path d="M30 39C30 39 42 42 55 54C45 49 35 39 30 39Z" fillOpacity="0.6" />
|
|
<path d="M30 39C30 39 18 42 5 54C15 49 25 39 30 39Z" fillOpacity="0.6" />
|
|
</svg>
|
|
</motion.div>
|
|
|
|
{/* Heading */}
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 1.2, delay: 0.2, ease: [0.33, 1, 0.68, 1] }}
|
|
className="text-4xl md:text-[80px] font-serif text-[#1A1A1A] max-w-5xl leading-[1.1] tracking-tight mb-14"
|
|
>
|
|
{dict.welcome.title}
|
|
</motion.h2>
|
|
|
|
{/* Description */}
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 1.2, delay: 0.4, ease: [0.33, 1, 0.68, 1] }}
|
|
className="text-[#1A1A1A]/70 text-lg md:text-xl max-w-3xl leading-relaxed mb-14 font-medium"
|
|
>
|
|
{dict.welcome.desc}
|
|
</motion.p>
|
|
|
|
{/* Link */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 1.2, delay: 0.6, ease: [0.33, 1, 0.68, 1] }}
|
|
>
|
|
<Link
|
|
href={`/${lang}/about`}
|
|
className="group flex items-center space-x-2 text-[14px] font-bold uppercase tracking-[0.2em] text-[#1A1A1A]"
|
|
>
|
|
<span className="border-b-[1.5px] border-[#1A1A1A] pb-1 font-sans">{dict.nav.about}</span>
|
|
<span className="transform group-hover:translate-x-1.5 group-hover:-translate-y-1.5 transition-all duration-500 ease-out">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M7 17l10-10" />
|
|
<path d="M17 17V7H7" />
|
|
</svg>
|
|
</span>
|
|
</Link>
|
|
</motion.div>
|
|
</section>
|
|
)
|
|
}
|