[V0_FILE]typescriptreact:file="i18n/config.js" isEdit="true" isMerged="true" import i18n from "i18next" import { initReactI18next } from "react-i18next" i18n.use(initReactI18next).init({ fallbackLng: "en", interpolation: { escapeValue: false, }, resources: { en: { translation: { welcome: "Ethereal Insights", description: "Illuminating paths across realms", services: "Our Offerings", service1: "Intuitive Guidance", service2: "Energy Alignment", service3: "Past Life Exploration", cta: "Begin Your Journey", testimonial: "A profound experience that brought clarity and peace to my life.", languageSwitcher: "Language", }, }, es: { translation: { welcome: "Percepciones Etéreas", description: "Iluminando caminos a través de los reinos", services: "Nuestras Ofrendas", service1: "Guía Intuitiva", service2: "Alineación Energética", service3: "Exploración de Vidas Pasadas", cta: "Comienza Tu Viaje", testimonial: "Una experiencia profunda que trajo claridad y paz a mi vida.", languageSwitcher: "Idioma", }, }, ja: { translation: { welcome: "エーテルの洞察", description: "次元を超えて道を照らす", services: "私たちのサービス", service1: "直感的ガイダンス", service2: "エネルギーの調整", service3: "前世の探索", cta: "あなたの旅を始める", testimonial: "私の人生に明確さと平和をもたらした深遠な体験でした。", languageSwitcher: "言語", }, }, }, }) export default i18n [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" "use client" import { I18nextProvider } from "react-i18next" import i18n from "../i18n/config" import type React from "react" import "../styles/globals.css" export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useTranslation } from "react-i18next" import LanguageSwitcher from "./components/LanguageSwitcher" import AnimatedTitle from "./components/AnimatedTitle" export default function Home() { const { t } = useTranslation() return (

{t("description")}

{t("services")}

{["service1", "service2", "service3"].map((service) => (

{t(service)}

))}

"{t("testimonial")}"

) } [V0_FILE]typescriptreact:file="app/components/LanguageSwitcher.tsx" isEdit="true" isMerged="true" "use client" import { useTranslation } from "react-i18next" export default function LanguageSwitcher() { const { i18n } = useTranslation() const changeLanguage = (lng: string) => { i18n.changeLanguage(lng) } return (

{["en", "es", "ja"].map((lang) => ( ))}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "nextjs-i18n-landing", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "^13.4.0", "react": "^18.2.0", "react-dom": "^18.2.0", "i18next": "^22.4.15", "react-i18next": "^12.2.2" }, "devDependencies": { "@types/node": "^18.16.3", "@types/react": "^18.2.0", "@types/react-dom": "^18.2.1", "autoprefixer": "^10.4.14", "postcss": "^8.4.23", "tailwindcss": "^3.3.2", "typescript": "^5.0.4" } } [V0_FILE]typescriptreact:file="app/components/AnimatedTitle.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { useTranslation } from "react-i18next" export default function AnimatedTitle() { const { i18n } = useTranslation() const [currentLang, setCurrentLang] = useState(i18n.language) useEffect(() => { const languages = ["en", "es", "ja"] let currentIndex = languages.indexOf(i18n.language) const interval = setInterval(() => { currentIndex = (currentIndex + 1) % languages.length setCurrentLang(languages[currentIndex]) }, 2000) // Change language every 2 seconds return () => clearInterval(interval) }, [i18n.language]) const titles = { en: "Ethereal Insights", es: "Percepciones Etéreas", ja: "エーテルの洞察", } return (

{titles[currentLang as keyof typeof titles]}

) } [V0_FILE]typescriptreact:file="styles/globals.css" isEdit="true" isQuickEdit="true" @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } html, body { height: 100%; } body { animation: fadeIn 1s ease-in; display: flex; flex-direction: column; } .bg-pattern { background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.05) 1px, transparent 0); background-size: 40px 40px; } .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fade-in { animation: fadeIn 0.5s ease-in-out; }