+
+This project is a statically exported, multilingual website built with [Next.js](https://nextjs.org/) (App Router), [Tailwind CSS](https://tailwindcss.com/), and [ShadCN/UI](https://ui.shadcn.com/). It serves as a showcase for "Eco-Life," a fictional environmental initiative.
+
+## Features
+
+- **Static Site Generation (SSG)**: The entire site is statically exported for optimal performance and security. Configured with `output: 'export'`.
+- **Multilingual Support (i18n)**: Fully supports multiple languages through Next.js's App Router i18n capabilities.
+ - Supported Languages: English (en), Simplified Chinese (zh-CN), Traditional Chinese (zh-TW), Korean (ko), and Japanese (ja).
+- **Automatic Language Detection**: The root of the site automatically detects the user's browser language and redirects to the appropriate language version (e.g., `/en`, `/zh-CN`).
+- **Dynamic Content**: Includes a blog with dynamically generated static pages for each post and language.
+- **SEO Optimized**: Automatically generates `sitemap.xml` and `robots.ts` for better search engine visibility.
+- **Modern Tech Stack**: Built with the latest features of Next.js, React Server Components, and Client Components.
+
+## Getting Started
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) (v18 or later)
+- A package manager like [npm](https://www.npmjs.com/), [yarn](https://yarnpkg.com/), or [bun](https://bun.sh/)
+
+### Installation
+
+1. Clone the repository:
+ ```bash
+ git clone
+ ```
+2. Navigate to the project directory:
+ ```bash
+ cd
+ ```
+3. Install the dependencies:
+ ```bash
+ npm install
+ # or
+ yarn install
+ # or
+ bun install
+ ```
+
+### Running the Development Server
+
+To view the project in development mode with hot-reloading:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
+
+## Building for Production
+
+To build the static site for production:
+
+```bash
+npm run build
+# or
+yarn build
+# or
+bun build
+```
+
+This command will generate a `build` directory containing all the static files for the website.
+
+### Previewing the Static Site
+
+After building, you can preview the local static site by running a simple HTTP server in the `build` directory. For example, using `serve`:
+
+```bash
+# Install serve if you don't have it
+npm install -g serve
+
+# Serve the build directory
+serve build
+```
+
+This will start a server, and you can view your statically exported site at the provided local URL (e.g., `http://localhost:3000`).
diff --git a/app/[locale]/blog/[slug]/BlogPostClient.tsx b/app/[locale]/blog/[slug]/BlogPostClient.tsx
new file mode 100644
index 0000000..73782f4
--- /dev/null
+++ b/app/[locale]/blog/[slug]/BlogPostClient.tsx
@@ -0,0 +1,341 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import Navigation from '../../../../components/Navigation';
+import FloatingLanguageSwitcher from '../../../../components/FloatingLanguageSwitcher';
+import Footer from '../../../../components/Footer';
+import { Locale } from '../../../../lib/i18n';
+import { getTranslations, Translations } from '../../../../lib/translations';
+import { updateDocumentMeta } from '../../../../lib/seo-utils';
+
+// Gentle Particle Background Component
+function GentleParticleBackground() {
+ const canvasRef = useRef(null);
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+
+ // Set canvas size
+ const resizeCanvas = () => {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ };
+ resizeCanvas();
+ window.addEventListener('resize', resizeCanvas);
+
+ // Gentle particle system
+ const particles: Array<{
+ x: number;
+ y: number;
+ vx: number;
+ vy: number;
+ size: number;
+ opacity: number;
+ }> = [];
+
+ // Create particles
+ for (let i = 0; i < 60; i++) {
+ particles.push({
+ x: Math.random() * canvas.width,
+ y: Math.random() * canvas.height,
+ vx: (Math.random() - 0.5) * 0.2,
+ vy: (Math.random() - 0.5) * 0.2,
+ size: Math.random() * 2 + 1,
+ opacity: Math.random() * 0.3 + 0.1,
+ });
+ }
+
+ // Animation loop
+ const animate = () => {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ particles.forEach((particle) => {
+ // Update position
+ particle.x += particle.vx;
+ particle.y += particle.vy;
+
+ // Wrap around edges
+ if (particle.x < 0) particle.x = canvas.width;
+ if (particle.x > canvas.width) particle.x = 0;
+ if (particle.y < 0) particle.y = canvas.height;
+ if (particle.y > canvas.height) particle.y = 0;
+
+ // Draw particle
+ ctx.beginPath();
+ ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+ ctx.fillStyle = `rgba(255, 255, 255, ${particle.opacity})`;
+ ctx.fill();
+ });
+
+ requestAnimationFrame(animate);
+ };
+
+ animate();
+
+ return () => {
+ window.removeEventListener('resize', resizeCanvas);
+ };
+ }, []);
+
+ return (
+
+ );
+}
+
+type Post = Translations['blog']['posts']['featured']; // Assuming all posts have the same structure
+
+export default function BlogPostClient({
+ locale,
+ post,
+ t,
+}: {
+ locale: Locale;
+ post: Post | null;
+ t: Translations;
+}) {
+ const router = useRouter();
+
+ // Update meta tags when locale changes
+ useEffect(() => {
+ updateDocumentMeta(locale);
+ }, [locale]);
+
+ if (!post) {
+ return (
+