fb

components/Welcome.tsx

@@ -0,0 +1,70 @@
+'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>
+  )
+}