deploy: sync to hugging face

.github/workflows/ci.yml

@@ -0,0 +1,47 @@
+name: CI - Backend Testing
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test-backend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Python 3.12
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.12'
+
+      - name: Install dependencies
+        run: |
+          cd backend
+          python -m pip install --upgrade pip
+          pip install -r requirements.txt
+          pip install pytest httpx
+
+      - name: Run Pytest
+        run: |
+          cd backend
+          pytest test_main.py
+
+      - name: Start server for Stress Test
+        run: |
+          cd backend
+          # Install uvicorn if not present (it should be in requirements.txt)
+          nohup python -m uvicorn main:app --host 0.0.0.0 --port 13002 > server.log 2>&1 &
+          # Wait for the AI model to download and load (might take a while in CI)
+          timeout 120 bash -c 'until curl -s http://localhost:13002/ > /dev/null; do sleep 5; done'
+          
+      - name: Run Stress Test
+        run: |
+          cd backend
+          python stress_test.py
+
+      - name: Show server logs on failure
+        if: failure()
+        run: cat backend/server.log

.github/workflows/deploy_hf.yml

@@ -0,0 +1,36 @@
+name: Sync to Hugging Face Spaces
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Push to HF (Clean History)
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: |
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+          
+          # Prepare a clean directory for HF (avoiding .git history)
+          mkdir -p ../hf_space
+          cp -R . ../hf_space/
+          cd ../hf_space
+          rm -rf .git
+          
+          # Initialize new repo for HF Space (Stateless)
+          git init -b main
+          git add .
+          git commit -m "deploy: sync to hugging face"
+          
+          # Force push to HF Space
+          git remote add space https://winterandchaiyun:$HF_TOKEN@huggingface.co/spaces/winterandchaiyun/quicktools
+          git push --force space main

.gitignore

@@ -0,0 +1,31 @@
+# Dependencies
+backend/venv/
+frontend/node_modules/
+
+# Next.js build output
+frontend/.next/
+frontend/out/
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# OS generated files
+.DS_Store
+Thumbs.db
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+indexing_key.json

CHAT_HISTORY.md

@@ -0,0 +1,42 @@
+# Visa Photo Maker 项目对话全记录
+
+> 此文件由 chat_recorder.py 自动生成
+
+
+# --- 对话导出 @ 2025-12-31 09:27:59 ---
+
+## 1. 初始构想
+用户提出做一个 Visa Photo Maker，要求能去背、设为白色背景、调整尺寸并下载。
+
+## 2. 方案确定
+- **前端**: Next.js (React) + Tailwind CSS。
+- **后端**: FastAPI (Python)。
+- **核心库**: rembg (AI去背), Pillow (图像处理)。
+- **流程**: 上传 -> 自动去背 -> 合成白底 -> 裁剪(600x600px) -> 下载。
+
+## 3. 开发工具准备
+- 创建了 : 用于保存单次讨论片段。
+- 创建了 : 用于导出整段对话历史。
+
+# --- 导出结束 ---
+
+# --- 对话导出 @ 2026-02-08 17:00:00 ---
+
+## 4. 扩展工具：Echo Reddit Assistant
+用户提出增加第二个工具 "Echo"，定位为免费的 Reddit 回复助手（浏览器扩展）。
+
+### 技术实现
+- **架构演进**: 将主页从单一工具门户升级为多工具 Grid 布局，支持水平扩展。
+- **多语言支持**: 实现了 Echo 的中英文双语落地页 (`/echo`, `/en/echo`)。
+- **设计风格**: 延续了 VisaBerry 的极简、专业、Material Design 风格，使用 Emoji 作为图标以实现零延迟加载。
+- **合规性**: 建立了专门的隐私政策页面 (`/echo/privacy`)，详细说明了：
+    - 使用 Firebase Authentication 管理登录状态（不存储 Reddit 密码）。
+    - 收集匿名活动日志（点击、交互）用于性能优化。
+    - 存储 AI 生成的回复以持续优化模型上下文感应能力。
+
+### 部署与发布
+- **多语言门户更新**: 同步更新了 ZH, EN, DE, JA, FR 等多个语言版本的门户主页 Grid。
+- **CI/CD**: 通过 GitHub Actions 自动同步至 Hugging Face Spaces 生产环境。
+- **页脚集成**: 更新了全局 Footer，将 Echo 加入工具导航。
+
+# --- 导出结束 ---

Dockerfile

@@ -0,0 +1,53 @@
+# Stage 1: Build Frontend
+FROM node:20-slim AS frontend-builder
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+RUN npm install
+COPY frontend/ ./
+RUN npm run build
+
+# Stage 2: Final Image
+FROM python:3.11-slim
+
+# Create a non-root user
+RUN useradd -m -u 1000 user
+
+# Install Node.js
+RUN apt-get update && apt-get install -y curl && \
+    curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
+    apt-get install -y nodejs && \
+    rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Install Python dependencies
+COPY backend/requirements.txt ./backend/
+RUN pip install --no-cache-dir -r backend/requirements.txt
+
+# Pre-download rembg models
+ENV U2NET_HOME=/app/.u2net
+RUN mkdir -p /app/.u2net && \
+    python3 -c "from rembg import new_session; new_session('u2net')" && \
+    chown -R user:user /app/.u2net
+
+# Copy backend code
+COPY backend/ ./backend/
+
+# Copy built frontend
+COPY --from=frontend-builder /app/frontend/.next ./frontend/.next
+COPY --from=frontend-builder /app/frontend/public ./frontend/public
+COPY --from=frontend-builder /app/frontend/package*.json ./frontend/
+COPY --from=frontend-builder /app/frontend/next.config.ts ./frontend/
+COPY --from=frontend-builder /app/frontend/node_modules ./frontend/node_modules
+
+# Copy startup script
+COPY scripts/start_hf.sh ./scripts/start_hf.sh
+RUN chmod +x ./scripts/start_hf.sh && chown user:user ./scripts/start_hf.sh
+
+# Ensure permissions
+RUN chown -R user:user /app
+
+USER user
+EXPOSE 7860
+
+CMD ["./scripts/start_hf.sh"]

README.md

@@ -0,0 +1,72 @@
+---
+title: QuickTools
+emoji: 📸
+colorFrom: blue
+colorTo: green
+sdk: docker
+pinned: false
+app_port: 7860
+---
+
+# Visa Photo Maker
+
+A professional, multilingual, privacy-first web application for generating standard visa and passport photos.
+
+## Features
+- **AI-Powered**: Automatic background removal and biometric cropping.
+- **Privacy-First**: RAM-only processing, zero disk storage for user images.
+- **Multilingual**: Supports ZH, EN, ES, FR, JA, KO.
+- **Global Standards**: Supports US, EU, UK, China, Japan, Korea, Australia, Canada.
+- **SEO Optimized**: Pre-rendered routes and Schema.org integration.
+
+## Tech Stack
+- **Frontend**: Next.js 15+, Tailwind CSS, TypeScript.
+- **Backend**: FastAPI (Python 3.12), Rembg, Pillow, NumPy.
+- **DevOps**: PM2 for process management.
+
+## Getting Started
+
+### Backend
+1. `cd backend`
+2. `python -m venv venv`
+3. `source venv/bin/activate`
+4. `pip install -r requirements.txt`
+5. `python main.py` (Runs on port 13002)
+
+### Frontend
+1. `cd frontend`
+2. `npm install`
+3. `npm run dev` (Runs on port 3000 in dev, 13001 in production)
+
+## Monitoring & Maintenance
+
+We use a watchdog script to ensure services stay online.
+
+- **Port Checker**: `./check_ports.sh` scans for active services.
+- **Auto-Recovery**: `scripts/watchdog.sh` (Runs via cron every minute).
+- **Guide**: See [docs/MONITORING.md](docs/MONITORING.md) for setup instructions.
+
+## Testing
+
+### Backend Unit Tests
+We use `pytest` to ensure image processing and API logic remain correct.
+```bash
+cd backend
+venv/bin/pytest test_main.py
+```
+
+## Deployment
+1. Run the safe deployment script:
+```bash
+./deploy.sh
+```
+(This script automatically runs unit tests before building and reloading.)
+Processes are managed by PM2:
+```bash
+pm2 list
+pm2 restart visa-backend
+pm2 restart visa-frontend
+```
+
+## License
+MIT

backend/main.py

@@ -0,0 +1,163 @@
+import logging
+from fastapi import FastAPI, UploadFile, File, HTTPException, Form
+from fastapi.responses import StreamingResponse
+from rembg import remove
+from PIL import Image
+import io
+import uvicorn
+import asyncio
+import numpy as np
+from fastapi.middleware.cors import CORSMiddleware
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
+    datefmt='%Y-%m-%d %H:%M:%S'
+)
+logger = logging.getLogger("visa-backend")
+
+app = FastAPI(title="Visa Photo Maker API")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+@app.get("/")
+def read_root():
+    return {"status": "ok", "message": "Visa Photo Maker Backend is running"}
+
+def add_white_background(
+    image: Image.Image, 
+    size: tuple = (600, 600),
+    crop_params: dict = None
+) -> Image.Image:
+    """
+    1. 裁剪掉透明边缘 (如果没有提供手动裁剪参数)
+    2. 创建白色背景
+    3. 将人物主体缩放并居中
+    """
+    # 确保图片是 RGBA 模式
+    image = image.convert("RGBA")
+    logger.info(f"Original image size: {image.size}, Target size: {size}")
+    
+    if crop_params and all(k in crop_params for k in ('x', 'y', 'w', 'h')):
+        # --- 使用手动裁剪参数 ---
+        logger.info(f"Using manual crop params: {crop_params}")
+        x, y, w, h = crop_params['x'], crop_params['y'], crop_params['w'], crop_params['h']
+        # 裁剪原图 (crop_params 应该是相对于原图的像素坐标)
+        image = image.crop((x, y, x + w, y + h))
+    else:
+        # --- 自动强力裁剪逻辑开始 ---
+        # 将 PIL Image 转为 numpy 数组以处理 Alpha 通道
+        img_np = np.array(image)
+        
+        # 获取 Alpha 通道 (第4个通道)
+        alpha = img_np[:, :, 3]
+        
+        # 设定阈值：Alpha 值小于 50 的像素视为完全透明
+        threshold = 50
+        mask = alpha > threshold
+        
+        # 如果全图都是透明的（没有检测到人），就直接返回白图
+        if not np.any(mask):
+            logger.warning("No subject found (image is empty)")
+            return Image.new("RGB", size, (255, 255, 255))
+            
+        # 获取非零区域的坐标 (行, 列)
+        rows = np.any(mask, axis=1)
+        cols = np.any(mask, axis=0)
+        
+        y_min, y_max = np.where(rows)[0][[0, -1]]
+        x_min, x_max = np.where(cols)[0][[0, -1]]
+        
+        # 裁剪图片
+        image = image.crop((x_min, y_min, x_max + 1, y_max + 1))
+        logger.info(f"Cropped size (tight): {image.size}")
+        
+        # --- 智能半身裁剪 (Smart Body Crop) ---
+        target_ratio = size[1] / size[0]
+        max_allowed_ratio = target_ratio + 0.15
+        
+        w, h = image.size
+        current_ratio = h / w
+        
+        if current_ratio > max_allowed_ratio:
+            logger.info(f"Image is too tall (ratio {current_ratio:.2f} > {max_allowed_ratio:.2f}), cropping bottom...")
+            new_h = int(w * max_allowed_ratio)
+            image = image.crop((0, 0, w, new_h))
+            logger.info(f"New size after smart crop: {image.size}")
+    # ------------------------------------
+
+    # 3. 计算缩放比例：Cover 模式，但稍微留一点边距 (95% 覆盖)
+    scale_width = (size[0] * 0.95) / image.width
+    scale_height = (size[1] * 0.95) / image.height
+    
+    scale_factor = max(scale_width, scale_height)
+    
+    new_width = int(image.width * scale_factor)
+    new_height = int(image.height * scale_factor)
+    
+    logger.info(f"Resizing: {new_width}x{new_height}")
+    resized_img = image.resize((new_width, new_height), Image.Resampling.LANCZOS)
+    
+    final_image = Image.new("RGB", size, (255, 255, 255))
+    x_offset = (size[0] - new_width) // 2
+    
+    top_padding = int(size[1] * 0.10)
+    y_offset = top_padding
+    
+    if y_offset + new_height < size[1]:
+        y_offset = (size[1] - new_height) // 2
+    elif y_offset + new_height > size[1] + 100:
+        y_offset = int(size[1] * 0.05)
+
+    final_image.paste(resized_img, (x_offset, y_offset), resized_img)
+    
+    return final_image.convert("RGB")
+
+# Global lock to prevent CPU overload
+processing_lock = asyncio.Lock()
+
+@app.post("/process-image")
+async def process_image_endpoint(
+    file: UploadFile = File(...),
+    width: int = Form(600),
+    height: int = Form(600),
+    crop_x: int = Form(None),
+    crop_y: int = Form(None),
+    crop_w: int = Form(None),
+    crop_h: int = Form(None)
+):
+    # Wait for the lock before processing
+    async with processing_lock:
+        try:
+            input_image_bytes = await file.read()
+            logger.info(f"Processing image for file: {file.filename}")
+            
+            output_image_bytes = await asyncio.to_thread(remove, input_image_bytes)
+            img_no_bg = Image.open(io.BytesIO(output_image_bytes))
+            
+            crop_params = None
+            if crop_x is not None and crop_y is not None:
+                crop_params = {'x': crop_x, 'y': crop_y, 'w': crop_w, 'h': crop_h}
+            
+            final_image = add_white_background(img_no_bg, size=(width, height), crop_params=crop_params)
+            
+            img_io = io.BytesIO()
+            final_image.save(img_io, format="JPEG", quality=95)
+            img_io.seek(0)
+            
+            logger.info(f"Successfully processed image: {file.filename}")
+            return StreamingResponse(img_io, media_type="image/jpeg")
+            
+        except Exception as e:
+            logger.error(f"Error processing image: {str(e)}", exc_info=True)
+            raise HTTPException(status_code=500, detail=str(e))
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=13002)

backend/requirements.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn
+rembg
+pillow
+python-multipart
+numpy
+onnxruntime

backend/stress_test.py

@@ -0,0 +1,47 @@
+import asyncio
+import httpx
+import time
+import io
+from PIL import Image
+
+# 配置后端 API 地址
+URL = "http://localhost:13002/process-image"
+
+async def send_request(client, task_id):
+    # Create a unique dummy image for each request
+    file_io = io.BytesIO()
+    image = Image.new('RGBA', size=(800, 800), color=(task_id * 50, 0, 0, 255))
+    image.save(file_io, 'png')
+    file_io.seek(0)
+    
+    print(f"[Task {task_id}] Sending request...")
+    start_time = time.time()
+    
+    try:
+        response = await client.post(
+            URL,
+            files={"file": ("test.png", file_io, "image/png")},
+            data={"width": "600", "height": "600"},
+            timeout=60.0
+        )
+        end_time = time.time()
+        print(f"[Task {task_id}] Completed in {end_time - start_time:.2f}s with status {response.status_code}")
+        return response.status_code
+    except Exception as e:
+        print(f"[Task {task_id}] Failed: {str(e)}")
+        return None
+
+async def run_stress_test():
+    async with httpx.AsyncClient() as client:
+        # Fire 3 requests simultaneously
+        tasks = [send_request(client, i) for i in range(1, 4)]
+        print(f"--- Starting Stress Test: 3 Concurrent Requests ---")
+        start_total = time.time()
+        results = await asyncio.gather(*tasks)
+        end_total = time.time()
+        print(f"--- Stress Test Finished ---")
+        print(f"Total time for all tasks: {end_total - start_total:.2f}s")
+        print(f"Success count: {results.count(200)}/3")
+
+if __name__ == "__main__":
+    asyncio.run(run_stress_test())

backend/test_main.py

@@ -0,0 +1,112 @@
+import pytest
+from fastapi.testclient import TestClient
+from main import app
+import io
+from PIL import Image
+
+client = TestClient(app)
+
+def test_read_root():
+    response = client.get("/")
+    assert response.status_code == 200
+    assert "running" in response.json()["message"]
+
+@pytest.mark.parametrize("width, height", [
+    (600, 600), # US
+    (413, 531), # EU
+    (354, 472), # JP
+    (591, 827), # CA
+])
+def test_process_image_various_sizes(width, height):
+    # Create a dummy RGBA image (red square)
+    file = io.BytesIO()
+    # Use a larger source image to test cropping/resizing
+    image = Image.new('RGBA', size=(1000, 1500), color=(255, 0, 0, 255))
+    image.save(file, 'png')
+    file.seek(0)
+    
+    response = client.post(
+        "/process-image",
+        files={"file": ("test.png", file, "image/png")},
+        data={"width": str(width), "height": str(height)}
+    )
+    
+    assert response.status_code == 200
+    assert response.headers["content-type"] == "image/jpeg"
+    
+    output_image = Image.open(io.BytesIO(response.content))
+    assert output_image.size == (width, height)
+
+def test_manual_crop():
+    # Create a 500x500 source image
+    file = io.BytesIO()
+    image = Image.new('RGBA', size=(500, 500), color=(0, 0, 255, 255))
+    image.save(file, 'png')
+    file.seek(0)
+    
+    # Define a crop in the middle (100, 100 to 300, 300)
+    response = client.post(
+        "/process-image",
+        files={"file": ("manual.png", file, "image/png")},
+        data={
+            "width": "600", 
+            "height": "600",
+            "crop_x": "100",
+            "crop_y": "100",
+            "crop_w": "200",
+            "crop_h": "200"
+        }
+    )
+    
+    assert response.status_code == 200
+    output_image = Image.open(io.BytesIO(response.content))
+    # Output should still be normalized to the requested 600x600
+    assert output_image.size == (600, 600)
+
+import xml.etree.ElementTree as ET
+import os
+
+def test_sitemap_validity():
+    # Path to the sitemap file in frontend/public
+    sitemap_path = os.path.join(os.path.dirname(__file__), "..", "frontend", "public", "sitemap.xml")
+    
+    # 1. Check if file exists
+    assert os.path.exists(sitemap_path), "sitemap.xml does not exist in frontend/public"
+    
+    # 2. Try to parse XML
+    try:
+        tree = ET.parse(sitemap_path)
+        root = tree.getroot()
+    except ET.ParseError as e:
+        pytest.fail(f"sitemap.xml is not valid XML: {e}")
+    
+    # 3. Check Namespace
+    assert "sitemaps.org" in root.tag, "Sitemap namespace missing or incorrect"
+    
+    # 4. Check URLs
+    urls = root.findall(".//{http://www.sitemaps.org/schemas/sitemap/0.9}loc")
+    assert len(urls) >= 16, f"Expected at least 16 URLs (8 portals + 8 tools), found {len(urls)}"
+    
+    for loc in urls:
+        url_text = loc.text.strip()
+        # Verify no whitespace inside the URL
+        assert " " not in url_text, f"Sitemap URL contains spaces: '{url_text}'"
+        assert url_text.startswith("https://quicktools.dpdns.org"), f"Invalid URL domain in sitemap: {url_text}"
+        assert not url_text.endswith("/undefined"), f"Sitemap contains undefined path: {url_text}"
+        # Check for typical malformed patterns
+        assert "\n" not in url_text, f"Sitemap URL contains newline: '{url_text}'"
+
+def test_processing_lock():
+    # This is hard to test with a simple TestClient because it's synchronous,
+    # but we can verify it doesn't crash.
+    file = io.BytesIO()
+    image = Image.new('RGBA', size=(10, 10), color=(0, 255, 0, 255))
+    image.save(file, 'png')
+    file.seek(0)
+    
+    response = client.post(
+        "/process-image",
+        files={"file": ("test.png", file, "image/png")},
+        data={"width": "100", "height": "100"}
+    )
+    assert response.status_code == 200

check_ports.sh

@@ -0,0 +1,79 @@
+#!/bin/bash
+
+# Define colors
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Get optional port argument
+TARGET_PORT=$1
+
+echo -e "${BLUE}🔍 Scanning for open ports...${NC}\n"
+
+# Print Header
+printf "% -8s % -65s % -15s %b\n" "PORT" "WORKING DIRECTORY [COMMAND]" "PID" "NOTE"
+echo "--------------------------------------------------------------------------------------------------------------------------------"
+
+# Use ss to get listening ports
+ss -tunlp | grep LISTEN | while read -r line; do
+    local_addr=$(echo $line | awk '{print $5}')
+    port=${local_addr##*:}
+    
+    if [ -n "$TARGET_PORT" ] && [ "$port" != "$TARGET_PORT" ]; then
+        continue
+    fi
+    
+    proc_raw=$(echo $line | grep -o 'users:(.*)')
+    
+    if [ -n "$proc_raw" ]; then
+        pid=$(echo $proc_raw | grep -o 'pid=[0-9]*' | head -n 1 | cut -d'=' -f2)
+        
+        # Get Current Working Directory
+        cwd=$(readlink -f /proc/$pid/cwd 2>/dev/null)
+        [ -z "$cwd" ] && cwd="unknown"
+        
+        # Get Command
+        cmd_full=$(cat /proc/$pid/cmdline 2>/dev/null | tr '\0' ' ' | sed 's/ $//')
+        
+        # Child process handling
+        if [[ "$cmd_full" == *"spawn_main"* ]]; then
+            ppid=$(ps -o ppid= -p $pid 2>/dev/null | tr -d ' ')
+            [ -n "$ppid" ] && cmd_full=$(cat /proc/$ppid/cmdline 2>/dev/null | tr '\0' ' ' | sed 's/ $//')
+        fi
+
+        # Extract Brief Command
+        if [[ "$cmd_full" == *"python"* ]]; then
+            # Extract script name or module
+            cmd_brief=$(echo "$cmd_full" | grep -oE "([^ ]+\.py|-m [^ ]+)" | head -1)
+            [ -z "$cmd_brief" ] && cmd_brief="python"
+        elif [[ "$cmd_full" == *"node"* ]]; then
+            # Just take the first argument after node if it exists
+            cmd_brief=$(echo "$cmd_full" | awk '{print $2}')
+            [ -z "$cmd_brief" ] || [[ "$cmd_brief" == -* ]] && cmd_brief="node"
+            cmd_brief=$(basename "$cmd_brief")
+        else
+            cmd_brief=$(echo "$cmd_full" | awk '{print $1}')
+            cmd_brief=$(basename "$cmd_brief")
+        fi
+
+        cwd_short=$(echo "$cwd" | sed "s|/home/$USER|~|g")
+        info_display="${cwd_short} [${cmd_brief}]"
+    else
+        pid="-"
+        info_display="-"
+    fi
+    
+    note=""
+    if [ "$port" == "13002" ]; then note="${GREEN}Visa-Backend${NC}"
+    elif [ "$port" == "13001" ]; then note="${GREEN}Visa-Frontend${NC}"
+    elif [ "$port" == "10318" ]; then note="${BLUE}n8n${NC}"
+    elif [ "$port" == "20241" ]; then note="${BLUE}Cloudflare${NC}"
+    elif [ "$port" == "8501" ]; then note="${YELLOW}Streamlit${NC}"
+    fi
+
+    printf "% -8s % -65s % -15s %b\n" "$port" "${info_display:0:64}" "$pid" "$note"
+done | sort -n
+
+echo -e "\n${BLUE}💡 Format: WORKING_DIR [SCRIPT/COMMAND]${NC}"

deploy.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+
+# Safe Deployment Script for VisaBerry / QuickTools
+
+echo "🚀 Starting Safe Deployment Process..."
+
+# 1. Run Backend Unit Tests
+echo "🧪 Running Backend Tests..."
+cd backend
+if venv/bin/pytest test_main.py; then
+    echo "✅ Tests Passed!"
+else
+    echo "❌ Tests Failed! Deployment Aborted."
+    exit 1
+fi
+cd ..
+
+# 2. Build Frontend
+echo "🏗️ Building Frontend..."
+cd frontend
+rm -rf .next
+if npm run build; then
+    echo "✅ Build Successful!"
+else
+    echo "❌ Build Failed! Deployment Aborted."
+    exit 1
+fi
+
+# 3. Zero-Downtime Reload via PM2
+echo "🔄 Reloading Services..."
+pm2 reload visa-frontend
+# Backend is usually fast, restart is fine, or also reload if using gunicorn
+pm2 restart visa-backend
+
+echo "✨ Deployment Complete! VisaBerry is live and stable."

docs/API.md

@@ -0,0 +1,69 @@
+# Visa Photo Maker Documentation
+
+## Overview
+Visa Photo Maker is a privacy-first, bilingual web application that automatically processes user-uploaded photos into standard visa/passport photo formats. It uses AI to remove backgrounds and intelligently crops the image to meet specific aspect ratios and composition requirements.
+
+## Privacy & Security
+**Does the server keep my photos?**
+**NO.** 
+- Images are processed in **RAM (Memory)** only.
+- The backend receives the file -> Removes Background -> Crops -> Returns the result immediately.
+- No `save()` to disk operations are performed for user images.
+- Once the request is finished, the data is discarded by the server's garbage collector.
+
+## Features
+- **AI Background Removal:** Uses `rembg` (U2-Net) to remove complex backgrounds.
+- **Smart Cropping:** 
+  - Automatically detects the subject.
+  - Cleans up semi-transparent noise.
+  - Crops excess body parts for correct head-to-body ratios.
+  - Ensures no white borders ("Cover Mode").
+- **Internationalization (i18n):**
+  - Full support for 6 languages:
+    - 🇨🇳 Chinese (ZH)
+    - 🇺🇸 English (EN)
+    - 🇪🇸 Spanish (ES)
+    - 🇫🇷 French (FR)
+    - 🇯🇵 Japanese (JA)
+    - 🇰🇷 Korean (KO)
+  - Dedicated SEO-friendly routes (e.g., `/es`, `/ja`).
+- **Multi-Standard Support:**
+  - US/India: 2x2 inch (600x600 px)
+  - Europe/UK/China: 35x45 mm
+  - Japan: 30x40 mm
+  - Canada: 50x70 mm
+- **Queue System:** Strict "One at a time" processing to protect server resources.
+
+## API Reference
+
+### `POST /process-image`
+
+Uploads an image and returns the processed JPEG.
+
+**Parameters (Form Data):**
+- `file`: The image file (JPG/PNG).
+- `width`: Target width in pixels (e.g., 600).
+- `height`: Target height in pixels (e.g., 600).
+
+**Response:**
+- Returns a binary JPEG stream of the processed image.
+
+**Concurrency:**
+- The server implements a **Global Lock**.
+- Only **1 request** is processed at a time.
+- Subsequent requests will wait in a queue until the lock is released.
+
+## Architecture
+- **Frontend:** Next.js (React) on Port 3000.
+  - Components: `src/components/VisaPhotoMaker.tsx` (Core Logic).
+  - Routes: `src/app/[lang]/page.tsx`.
+- **Backend:** FastAPI (Python) on Port 13002.
+- **Process Management:** PM2.
+
+## Deployment
+Managed via PM2:
+```bash
+pm2 list
+pm2 restart visa-backend
+pm2 restart visa-frontend
+```

docs/MONITORING.md

@@ -0,0 +1,59 @@
+# Service Monitoring & Auto-Recovery Guide
+
+This guide explains how to ensure the Visa Photo Maker services (Frontend & Backend) remain online and automatically recover from crashes or stops.
+
+## 1. Watchdog Script
+
+A simple bash script `scripts/watchdog.sh` has been created to check the health of your services every minute.
+
+- **Location**: `scripts/watchdog.sh`
+- **What it does**:
+  1. Checks if **Port 13002** (Backend) is open.
+  2. Checks if **Port 13001** (Frontend) is open.
+  3. If a port is closed, it triggers `pm2 restart <app_name>`.
+  4. Logs all incidents to `watchdog.log` in the project root.
+
+## 2. Setup Instructions
+
+### Step 1: Make Script Executable
+Run this in your terminal:
+```bash
+chmod +x scripts/watchdog.sh
+```
+
+### Step 2: Test the Script
+Run it manually once to make sure it works (it should be silent if everything is OK):
+```bash
+./scripts/watchdog.sh
+```
+
+### Step 3: Enable Auto-Run (Crontab)
+To make it run every minute automatically:
+
+1. Open your crontab editor:
+   ```bash
+   crontab -e
+   ```
+
+2. Add the following line at the bottom of the file:
+   *(Update the path if you moved the project)*
+   ```bash
+   * * * * * /home/ubuntu/code/visa_photo_maker/scripts/watchdog.sh
+   ```
+
+3. Save and exit (usually `Ctrl+O`, `Enter`, `Ctrl+X` if using nano).
+
+## 3. Viewing Logs
+
+To see if the watchdog has restarted anything, check the log file:
+```bash
+tail -f watchdog.log
+```
+
+## 4. Other Protections Enabled
+
+Besides this script, the following PM2 protections are already active:
+
+1.  **Memory Limit**: Backend restarts if it exceeds **2GB** RAM.
+2.  **Backoff Restart**: If the app crashes repeatedly, PM2 waits 100ms+ before restarting to prevent CPU spikes.
+3.  **4 Workers**: The backend runs 4 parallel instances to utilize the quad-core CPU.

docs/ROADMAP_AND_IDEAS.md

@@ -0,0 +1,125 @@
+# Visa Photo Maker: Roadmap & Monetization Ideas
+
+This document tracks the current progress of the project and outlines future possibilities for growth and revenue.
+
+## 🚀 Current Progress (Phase 1: Foundation)
+
+### Technical Implementation
+- **AI Core**: Integrated `rembg` (U2-Net) for precise background removal in RAM.
+- **Biometric Logic**: Smart cropping that prioritizes head/shoulder ratios according to international standards.
+- **Manual Control**: Added `react-easy-crop` for user-driven fine-tuning.
+- **Print Engine**: Pure-frontend Canvas logic to generate 4x6 inch (1800x1200px) printable grids.
+- **Concurrency**: `asyncio.Lock` implemented to protect CPU from overloading.
+
+### SEO & GEO (Growth)
+- **Multilingual**: Full localization for **ZH, EN, ES, FR, JA, KO** with dedicated routes.
+- **GEO-friendly**: `hreflang` tags, `sitemap.xml`, and `robots.txt` implemented.
+- **Schema.org**: `SoftwareApplication` and `FAQPage` JSON-LD injected for AI search engines.
+- **Trust Building**: Compliance Checklists and Trust Badges integrated into the UI.
+
+### Quality Assurance
+- **Unit Testing**: `pytest` suite covering root health, dynamic sizing, manual cropping, and locking.
+- **CI/CD**: GitHub Actions pipeline for automated testing on every push.
+
+### 📊 Analytics & Tracking
+- **Umami Analytics**: Implemented for privacy-first traffic monitoring.
+  - *Website ID*: `45fc6a7a-d84d-4db9-adfd-e5346a9de470`
+- **Microsoft Clarity**: Implemented for behavioral analysis and heatmaps.
+  - *Project ID*: `uu7gwujo4s`
+
+---
+
+## 🧠 GEO & Advanced SEO Insights (The Strategy)
+
+### 1. GEO (Generative Engine Optimization)
+- **Concept**: Optimizing for AI crawlers (ChatGPT, Claude, Gemini) rather than just traditional search bots.
+- **Implementation**: 
+    - Reclaimed control of `robots.txt` from Cloudflare ("Self-Managed" mode) to explicitly allow **GPTBot**, **ClaudeBot**, and **Bytespider**.
+    - Structured content using JSON-LD Schema to help LLMs understand the tool's utility and privacy promises.
+- **Insight**: AI engines value **Unique Facts** (like RAM-only processing) and **Technical Precision**.
+
+### 2. High-Performance UX (Lighthouse 100)
+- **Contrast & Accessibility**: Darkened gray text across all UI components to meet WCAG 2.1 standards, ensuring 100/100 Accessibility score.
+- **Semantic Hierarchy**: Fixed heading levels (H1 -> H2 -> H3) to ensure a logical document flow for crawlers and screen readers.
+- **Speed Index**: Minimized render-blocking assets. Using Emojis as icons provides zero-latency visual feedback.
+
+### 3. Portal Architecture
+- **Domain**: `quicktools.dpdns.org`
+- **Hub & Spoke Strategy**: The root `/` acts as a multi-language portal, distributing authority to specialized sub-tools.
+- **Multi-Tool Expansion (Feb 2026)**: Successfully transitioned from a single-tool site to a collection platform with the launch of **Echo: Reddit Assistant**.
+
+---
+
+## 🚀 Current Tools
+
+### 📸 VisaBerry (Passport Photo)
+- **Status**: Stable / Production
+- **Core**: AI background removal and biometric cropping.
+
+### 📣 Echo (Reddit Assistant)
+- **Status**: Beta / Production
+- **Concept**: A Chrome extension helper for high-quality Reddit engagement.
+- **Privacy Focus**: Firebase Auth for stateless session management; no storage of sensitive Reddit credentials.
+- **Refinement**: AI-generated responses are stored anonymously to improve context-aware suggestions.
+
+---
+
+## 🧠 Commercial Philosophy (The "Numbers Game")
+
+### 1. Value is Just the Entry Ticket
+Building a high-value tool like VisaBerry is the foundation, but **Transaction = Value × Probability**. In a crowded market, the cost of "being found" and "building trust" is significantly higher than the cost of development.
+
+### 2. High Distribution / "Cast a Wide Net"
+The strategy of implementing 8 languages and granular SEO routes is not just about reach—it's about reducing the **Transaction Cost** by meeting the user exactly where they are (their local language and specific search intent).
+
+### 3. Business as a Gravity Field
+Instead of chasing individual customers, we build a platform that acts as a "gravity field," attracting high-intent users at the exact moment they need a solution.
+
+---
+
+## 💰 Monetization Ideas (Phase 2: Revenue)
+
+### 1. The "Convenience" Model (Freemium)
+- **Current**: Single photo download is 100% free.
+- **Upsell**: Charge a small fee ($0.99 - $1.99) to unlock the **4x6 Printable Sheet**. 
+
+### 2. Affiliate Marketing (The "Travel Toolkit" Matrix)
+- **Fintech (High Trust)**: **Wise / Revolut** referral programs. (Essential for currency exchange).
+- **Connectivity (High Velocity)**: **Airalo / Holafly** (eSIM cards). Perfect for instant conversion on the download page.
+- **Security (Recurring)**: **SafetyWing** (Nomad/Travel Insurance). High lifetime value.
+- **Concierge (High Margin)**: **iVisa / VisaHQ**. For users who find the manual process too difficult.
+- **Destination (Upsell)**: **Klook / GetYourGuide**. For tour and ticket bookings.
+
+---
+
+## 🛠 Production Transition & Deployment
+
+### 1. Mode Switch (Dev to Prod)
+To optimize performance and minimize memory usage, the frontend has been transitioned to production mode:
+- **Build**: `npm run build` was executed to generate a minimized, optimized bundle.
+- **Run**: Switched PM2 command from `npm run dev` to `npm run start`.
+- **Result**: Faster response times and significantly lower RAM overhead.
+
+### 2. Environment Variables & Analytics
+- **Loading**: Next.js automatically detects `.env.local`.
+- **Injection**: Variables starting with `NEXT_PUBLIC_` are injected into the client-side code during the **build** phase.
+- **Maintenance**: If `NEXT_PUBLIC_` variables are changed, a **re-build** is required:
+  ```bash
+  cd frontend
+  # Update .env.local
+  npm run build
+  pm2 restart visa-frontend
+  ```
+
+### 3. Process Management (PM2)
+Current production processes:
+- `visa-frontend`: Next.js production server (Port 3000).
+- `visa-backend`: FastAPI Uvicorn server (Port 13002).
+
+---
+
+## 🛠 Maintenance Reminders
+- Keep the `rembg` model updated.
+- Monitor `pm2` memory usage (currently ~200-400MB).
+- Ensure `sitemap.xml` is updated when new languages or routes are added.
+- **Safety First**: NEVER add `save()` to disk for user images to keep the privacy promise.

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend/next.config.ts

@@ -0,0 +1,15 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+    async rewrites() {
+      return [
+        {
+          source: '/api/:path*',
+          destination: 'http://localhost:13002/:path*',
+        },
+      ]
+    },
+
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start -p 13001",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-easy-crop": "^5.5.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  },
+  "browserslist": [
+    "chrome >= 87",
+    "firefox >= 78",
+    "edge >= 88",
+    "safari >= 14"
+  ]
+}

frontend/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

frontend/public/ads.txt

@@ -0,0 +1 @@
+google.com, pub-8465309813507611, DIRECT, f08c47fec0942fa0

frontend/public/manifest.json

@@ -0,0 +1,16 @@
+{
+  "name": "QuickTools - VisaBerry",
+  "short_name": "VisaBerry",
+  "description": "Professional Visa & Passport Photo Maker",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#2563eb",
+  "icons": [
+    {
+      "src": "https://quicktools.dpdns.org/file.svg",
+      "sizes": "192x192",
+      "type": "image/svg+xml"
+    }
+  ]
+}

frontend/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://quicktools.dpdns.org/sitemap.xml

frontend/public/sitemap.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <!-- Portals -->
+  <url><loc>https://quicktools.dpdns.org/</loc><lastmod>2026-01-20</lastmod><changefreq>weekly</changefreq><priority>1.0</priority></url>
+  <url><loc>https://quicktools.dpdns.org/en</loc><lastmod>2026-01-20</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://quicktools.dpdns.org/de</loc><lastmod>2026-01-20</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://quicktools.dpdns.org/es</loc><lastmod>2026-01-20</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://quicktools.dpdns.org/fr</loc><lastmod>2026-01-20</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://quicktools.dpdns.org/ru</loc><lastmod>2026-01-20</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://quicktools.dpdns.org/ja</loc><lastmod>2026-01-20</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://quicktools.dpdns.org/ko</loc><lastmod>2026-01-20</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
+
+  <!-- VisaBerry Tools -->
+  <url><loc>https://quicktools.dpdns.org/visa-photo</loc><lastmod>2026-01-20</lastmod><changefreq>daily</changefreq><priority>1.0</priority></url>
+  <url><loc>https://quicktools.dpdns.org/en/visa-photo</loc><lastmod>2026-01-20</lastmod><changefreq>daily</changefreq><priority>1.0</priority></url>
+  <url><loc>https://quicktools.dpdns.org/de/visa-photo</loc><lastmod>2026-01-20</lastmod><changefreq>daily</changefreq><priority>1.0</priority></url>
+  <url><loc>https://quicktools.dpdns.org/es/visa-photo</loc><lastmod>2026-01-20</lastmod><changefreq>daily</changefreq><priority>1.0</priority></url>
+  <url><loc>https://quicktools.dpdns.org/fr/visa-photo</loc><lastmod>2026-01-20</lastmod><changefreq>daily</changefreq><priority>1.0</priority></url>
+  <url><loc>https://quicktools.dpdns.org/ru/visa-photo</loc><lastmod>2026-01-20</lastmod><changefreq>daily</changefreq><priority>1.0</priority></url>
+  <url><loc>https://quicktools.dpdns.org/ja/visa-photo</loc><lastmod>2026-01-20</lastmod><changefreq>daily</changefreq><priority>1.0</priority></url>
+  <url><loc>https://quicktools.dpdns.org/ko/visa-photo</loc><lastmod>2026-01-20</lastmod><changefreq>daily</changefreq><priority>1.0</priority></url>
+</urlset>

frontend/src/app/about/page.tsx

@@ -0,0 +1,50 @@
+import Link from 'next/link';
+
+export default function AboutUs() {
+  return (
+    <div className="min-h-screen bg-white text-gray-900 py-16 px-6 lg:px-8">
+      <div className="max-w-3xl mx-auto">
+        <Link href="/" className="text-blue-600 hover:underline mb-8 inline-block">&larr; Back to Home</Link>
+        <h1 className="text-4xl font-bold mb-8">About QuickTools</h1>
+        
+        <p className="text-lg mb-6 leading-relaxed">
+          QuickTools was born from a simple observation: <strong>Getting a standard visa or passport photo should not be a difficult or expensive process.</strong>
+        </p>
+
+        <section className="mb-12">
+          <h2 className="text-2xl font-semibold mb-4 text-blue-600">Our Mission</h2>
+          <p className="mb-4">
+            We aim to provide professional-grade utility tools that are free, fast, and privacy-first. We believe that technology should be accessible to everyone without the need for complex registrations or hidden fees.
+          </p>
+        </section>
+
+        <section className="mb-12">
+          <h2 className="text-2xl font-semibold mb-4 text-blue-600">Why VisaBerry?</h2>
+          <p className="mb-4">
+            VisaBerry is our flagship tool designed to solve the common headache of visa photo compliance. Embassies have strict requirements for background color, face position, and image dimensions. 
+          </p>
+          <p className="mb-4">
+            Our AI-powered tool automates the background removal and biometric cropping, ensuring that anyone can create a compliant photo from their home using just a smartphone.
+          </p>
+        </section>
+
+        <section className="mb-12">
+          <h2 className="text-2xl font-semibold mb-4 text-blue-600">Privacy at Core</h2>
+          <p className="mb-4">
+            Unlike many other "free" tools, we do not monetize your data. Your photos never touch a hard drive; they exist only in the temporary memory of our server while they are being processed. 
+          </p>
+        </section>
+
+        <div className="bg-gray-50 p-8 rounded-2xl border border-gray-100">
+          <h3 className="text-xl font-bold mb-2">Support the Project</h3>
+          <p className="mb-4 text-sm text-gray-600">
+            QuickTools is maintained by a small team of independent developers. If you find our tools helpful, consider supporting our work to keep the servers running and the tools free for everyone.
+          </p>
+          <Link href="https://buymeacoffee.com/realberry" target="_blank" className="text-blue-600 font-semibold hover:underline">
+            Buy us a coffee &rarr;
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/de/page.tsx

@@ -0,0 +1,87 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "QuickTools - Professionelle Online-Tool-Sammlung",
+  description: "Einfache, schnelle und datenschutzfreundliche Online-Tools. Entdecken Sie VisaBerry für Visum- und Passfotos.",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/de',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org',
+      'en-US': 'https://quicktools.dpdns.org/en',
+      'de-DE': 'https://quicktools.dpdns.org/de',
+      'es-ES': 'https://quicktools.dpdns.org/es',
+      'fr-FR': 'https://quicktools.dpdns.org/fr',
+      'ja-JP': 'https://quicktools.dpdns.org/ja',
+      'ko-KR': 'https://quicktools.dpdns.org/ko',
+    },
+  },
+  openGraph: {
+    title: "QuickTools - Professionelle Online-Tool-Sammlung",
+    description: "Einfache, schnelle und datenschutzfreundliche Online-Tools.",
+    url: 'https://quicktools.dpdns.org/de',
+    locale: 'de_DE',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+const LANGS = [
+  { code: 'zh', label: '中文', path: '/' },
+  { code: 'en', label: 'English', path: '/en' },
+  { code: 'de', label: 'Deutsch', path: '/de' },
+  { code: 'es', label: 'Español', path: '/es' },
+  { code: 'fr', label: 'Français', path: '/fr' },
+  { code: 'ja', label: '日本語', path: '/ja' },
+  { code: 'ko', label: '한국어', path: '/ko' }
+];
+
+export default function GermanPortalHome() {
+  return (
+    <div className="min-h-screen bg-white text-gray-900 font-sans">
+      <div className="absolute top-4 right-4 z-10 flex flex-wrap gap-2 justify-end max-w-xs">
+        {LANGS.map((l) => (
+          <Link key={l.code} href={l.path} className={`px-3 py-1 rounded-full text-xs font-medium border ${l.code === 'de' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-100'}`}>{l.label}</Link>
+        ))}
+      </div>
+      <header className="relative overflow-hidden bg-gray-50 pt-12 pb-16 sm:pt-16 sm:pb-20 text-center">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h1 className="text-5xl font-extrabold tracking-tight text-blue-600 sm:text-6xl mb-4">QuickTools</h1>
+            <p className="text-xl leading-8 text-gray-600">Einfach · Schnell · Datenschutz First<br/>Eine wachsende Sammlung nützlicher Tools für alle.</p>
+          </div>
+        </div>
+      </header>
+      <main className="max-w-7xl mx-auto px-6 py-16 lg:px-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12">
+          <Link href="/de/visa-photo" className="group flex flex-col items-center p-8 bg-white rounded-3xl border border-gray-200 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1 group-hover:border-blue-400 text-center">
+            <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">📸</div>
+            <h2 className="text-2xl font-bold mb-3">VisaBerry</h2>
+            <p className="text-gray-600 text-sm text-balance">
+              <strong>100% Kostenlos</strong>. Professioneller Generator für Visum- und Passfotos. Automatischer Hintergrund und intelligentes Zuschneiden.
+            </p>
+            <div className="mt-6 flex items-center text-blue-600 font-semibold group-hover:gap-2 transition-all">Tool starten <span>&rarr;</span></div>
+          </Link>
+
+          <Link href="/en/echo" className="group flex flex-col items-center p-8 bg-white rounded-3xl border border-gray-200 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1 group-hover:border-blue-400 text-center">
+            <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">📣</div>
+            <h2 className="text-2xl font-bold mb-3">Echo</h2>
+            <p className="text-gray-600 text-center text-sm leading-relaxed text-balance">
+              <strong>Free Reddit Assistant</strong>. AI-powered reply assistant to help you boost engagement and karma with high-quality responses on Reddit.
+            </p>
+            <div className="mt-6 flex items-center text-blue-600 font-semibold group-hover:gap-2 transition-all">Launch Tool <span>&rarr;</span></div>
+          </Link>
+          <div className="flex flex-col items-center justify-center p-8 bg-gray-50 rounded-3xl border border-dashed border-gray-300 opacity-60 text-center">
+            <div className="w-16 h-16 bg-gray-200 text-gray-500 rounded-2xl flex items-center justify-center text-3xl mb-6">📄</div>
+            <h2 className="text-2xl font-bold mb-3 text-gray-400">Demnächst</h2>
+            <p className="text-gray-400 text-center text-sm">Weitere leistungsstarke Tools befinden sich in der Entwicklung. Bleiben Sie dran!</p>
+          </div>
+        </div>
+      </main>
+      <footer className="bg-white border-t border-gray-100 py-12">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8 text-center">
+          <p className="text-sm text-gray-500">&copy; 2025 QuickTools. Alle Rechte vorbehalten.<br/>Datenschutz garantiert, keine Registrierung erforderlich.</p>
+        </div>
+      </footer>
+    </div>
+  );
+}

frontend/src/app/de/visa-photo/page.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import VisaPhotoMaker from '@/components/VisaPhotoMaker';
+
+export const metadata: Metadata = {
+  title: "VisaBerry - Kostenloser Visa-Foto-Generator | Passfoto Online Erstellen",
+  description: "Erstellen Sie kostenlos biometrische Visa- und Passfotos online. Automatische Hintergrunderstellung und intelligentes Zuschneiden.",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/de/visa-photo',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org/visa-photo',
+      'en-US': 'https://quicktools.dpdns.org/en/visa-photo',
+      'de-DE': 'https://quicktools.dpdns.org/de/visa-photo',
+      'es-ES': 'https://quicktools.dpdns.org/es/visa-photo',
+      'fr-FR': 'https://quicktools.dpdns.org/fr/visa-photo',
+      'ja-JP': 'https://quicktools.dpdns.org/ja/visa-photo',
+      'ko-KR': 'https://quicktools.dpdns.org/ko/visa-photo',
+    },
+  },
+  openGraph: {
+    title: "VisaBerry - Kostenloser Visa-Foto-Generator",
+    description: "Erstellen Sie kostenlos biometrische Visa- und Passfotos online.",
+    url: 'https://quicktools.dpdns.org/de/visa-photo',
+    locale: 'de_DE',
+    type: 'article',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+export default function GermanHome() {
+  return <VisaPhotoMaker locale="de" />;
+}

frontend/src/app/echo/page.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import EchoAssistant from '@/components/EchoAssistant';
+
+export const metadata: Metadata = {
+  title: "Echo - 免费 Reddit 回复助手 | Reddit 运营提效工具",
+  description: "使用 Echo 智能助手提升您的 Reddit 互动。AI 驱动的语境感应回复，帮助您轻松建立社区影响力并获得 Karma。",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/echo',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org/echo',
+      'en-US': 'https://quicktools.dpdns.org/en/echo',
+    },
+  },
+  openGraph: {
+    title: "Echo - 免费 Reddit AI 助手",
+    description: "由 AI 驱动的 Reddit 互动增强工具。撰写高质量回复，轻松建立社区声望。",
+    url: 'https://quicktools.dpdns.org/echo',
+    locale: 'zh_CN',
+    type: 'website',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+export default function ChineseEchoPage() {
+  return (
+    <main>
+      <EchoAssistant locale="zh" />
+      <div className="max-w-4xl mx-auto px-4 pb-12 text-center">
+        <p className="text-xs text-gray-400 leading-relaxed border-t border-gray-100 pt-8">
+          Echo 是一款致力于提升 Reddit 互动质量的免费工具。我们利用 AI 技术帮助用户更高效地参与社区讨论。
+        </p>
+      </div>
+    </main>
+  );
+}

frontend/src/app/echo/privacy/page.tsx

@@ -0,0 +1,49 @@
+import Link from 'next/link';
+
+export default function EchoPrivacyPage() {
+  return (
+    <div className="min-h-screen bg-white text-gray-900 font-sans py-16 px-6 lg:px-8">
+      <div className="max-w-3xl mx-auto">
+        <Link href="/echo" className="text-blue-600 hover:underline mb-8 inline-block">← Back to Echo</Link>
+        <h1 className="text-4xl font-bold mb-8">Echo Privacy Policy</h1>
+        
+        <div className="prose prose-blue max-w-none text-gray-600">
+          <p className="mb-4">Last updated: February 8, 2026</p>
+          
+          <h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">1. Introduction</h2>
+          <p className="mb-4">
+            Echo ("we", "our", or "us") is committed to protecting your privacy. This Privacy Policy explains how we collect, use, and safeguard your information when you use the Echo browser extension and website.
+          </p>
+
+          <h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">2. Data Collection</h2>
+          <p className="mb-4">
+            <strong>Personal Data:</strong> We use Firebase Authentication to manage user login states. While we do not store your Reddit password, we may process unique user identifiers to provide personalized features. We do not collect personal identification information such as your name or email address.
+          </p>
+          <p className="mb-4">
+            <strong>Usage Data:</strong> We collect activity logs (such as clicks and feature interactions) to improve performance and debug errors. We may also collect anonymous usage statistics and store AI-generated responses as well as the final responses provided by users to improve our AI models and service quality.
+          </p>
+
+          <h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">3. Data Processing</h2>
+          <p className="mb-4">
+            When you request a reply suggestion, the content of the post you are viewing is processed by our AI servers to generate a relevant response. We store the final AI-generated responses to monitor the quality of our service and to further refine our AI models for better context-aware suggestions. However, this data is not linked to your personal identity.
+          </p>
+
+          <h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">4. Third-Party Services</h2>
+          <p className="mb-4">
+            We use AI models from third-party providers. No personally identifiable information is shared with these providers.
+          </p>
+
+          <h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">5. Your Rights</h2>
+          <p className="mb-4">
+            Since we do not store personal data, there is no data to export or delete. You can stop all data collection by simply uninstalling the browser extension.
+          </p>
+
+          <h2 className="text-2xl font-bold text-gray-900 mt-8 mb-4">6. Contact Us</h2>
+          <p className="mb-4">
+            If you have any questions about this Privacy Policy, please contact us through the main QuickTools contact channels.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/en/echo/page.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import EchoAssistant from '@/components/EchoAssistant';
+
+export const metadata: Metadata = {
+  title: "Echo - Free Reddit Reply Assistant | AI Reddit Growth Tool",
+  description: "Boost your Reddit engagement with Echo. AI-powered context-aware replies to help you build community presence and karma effortlessly.",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/en/echo',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org/echo',
+      'en-US': 'https://quicktools.dpdns.org/en/echo',
+    },
+  },
+  openGraph: {
+    title: "Echo - Free AI Reddit Assistant",
+    description: "AI-powered Reddit engagement tool. Craft high-quality replies and build community presence effortlessly.",
+    url: 'https://quicktools.dpdns.org/en/echo',
+    locale: 'en_US',
+    type: 'website',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+export default function EnglishEchoPage() {
+  return (
+    <main>
+      <EchoAssistant locale="en" />
+      <div className="max-w-4xl mx-auto px-4 pb-12 text-center">
+        <p className="text-xs text-gray-400 leading-relaxed border-t border-gray-100 pt-8">
+          Echo is a free tool dedicated to improving Reddit engagement quality. We use AI technology to help users participate in community discussions more efficiently.
+        </p>
+      </div>
+    </main>
+  );
+}

frontend/src/app/en/page.tsx

@@ -0,0 +1,93 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "QuickTools - Professional Online Tool Collection",
+  description: "A collection of simple, fast, and privacy-first online tools for daily tasks. Explore VisaBerry for passport photos and more.",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/en',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org',
+      'en-US': 'https://quicktools.dpdns.org/en',
+      'de-DE': 'https://quicktools.dpdns.org/de',
+      'es-ES': 'https://quicktools.dpdns.org/es',
+      'fr-FR': 'https://quicktools.dpdns.org/fr',
+      'ru-RU': 'https://quicktools.dpdns.org/ru',
+      'ja-JP': 'https://quicktools.dpdns.org/ja',
+      'ko-KR': 'https://quicktools.dpdns.org/ko',
+    },
+  },
+  openGraph: {
+    title: "QuickTools - Professional Online Tool Collection",
+    description: "A collection of simple, fast, and privacy-first online tools for daily tasks.",
+    url: 'https://quicktools.dpdns.org/en',
+    locale: 'en_US',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+const LANGS = [
+  { code: 'zh', label: '中文', path: '/' },
+  { code: 'en', label: 'English', path: '/en' },
+  { code: 'de', label: 'Deutsch', path: '/de' },
+  { code: 'es', label: 'Español', path: '/es' },
+  { code: 'fr', label: 'Français', path: '/fr' },
+  { code: 'ru', label: 'Русский', path: '/ru' },
+  { code: 'ja', label: '日本語', path: '/ja' },
+  { code: 'ko', label: '한국어', path: '/ko' }
+];
+
+export default function EnglishPortalHome() {
+  return (
+    <div className="min-h-screen bg-white text-gray-900 font-sans">
+      <div className="absolute top-4 right-4 z-10 flex flex-wrap gap-2 justify-end max-w-xs">
+        {LANGS.map((l) => (
+          <Link 
+            key={l.code}
+            href={l.path}
+            className={`px-3 py-1 rounded-full text-xs font-medium transition-colors border
+              ${l.code === 'en' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-100'}`}
+          >
+            {l.label}
+          </Link>
+        ))}
+      </div>
+      <header className="relative overflow-hidden bg-gray-50 pt-12 pb-16 sm:pt-16 sm:pb-20">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h1 className="text-5xl font-extrabold tracking-tight text-blue-600 sm:text-6xl mb-4">QuickTools</h1>
+            <p className="text-xl leading-8 text-gray-600">Simple · Fast · Privacy-First<br/>A growing collection of useful tools for everyone.</p>
+          </div>
+        </div>
+      </header>
+      <main className="mx-auto max-w-7xl px-6 py-16 lg:px-8">
+        <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
+          <Link href="/en/visa-photo" className="group flex flex-col items-center p-8 bg-white rounded-3xl border border-gray-200 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1 group-hover:border-blue-400 text-center">
+            <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">📸</div>
+            <h2 className="text-2xl font-bold mb-3">VisaBerry</h2>
+            <p className="text-gray-600 text-center text-sm leading-relaxed text-balance">
+              <strong>100% Free</strong> Professional Visa & Passport photo maker. No registration required. Auto background removal and biometric cropping.
+            </p>
+            <div className="mt-6 flex items-center text-blue-600 font-semibold group-hover:gap-2 transition-all">Launch Tool <span>&rarr;</span></div>
+          </Link>
+
+          <Link href="/en/echo" className="group flex flex-col items-center p-8 bg-white rounded-3xl border border-gray-200 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1 group-hover:border-blue-400 text-center">
+            <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">📣</div>
+            <h2 className="text-2xl font-bold mb-3">Echo</h2>
+            <p className="text-gray-600 text-center text-sm leading-relaxed text-balance">
+              <strong>Free Reddit Assistant</strong>. AI-powered reply assistant to help you boost engagement and karma with high-quality responses on Reddit.
+            </p>
+            <div className="mt-6 flex items-center text-blue-600 font-semibold group-hover:gap-2 transition-all">Launch Tool <span>&rarr;</span></div>
+          </Link>
+
+          <div className="flex flex-col items-center justify-center p-8 bg-gray-50 rounded-3xl border border-dashed border-gray-300 opacity-60 text-center">
+            <div className="w-16 h-16 bg-gray-200 text-gray-500 rounded-2xl flex items-center justify-center text-3xl mb-6">📄</div>
+            <h2 className="text-2xl font-bold mb-3 text-gray-400">Coming Soon</h2>
+            <p className="text-gray-500 text-center text-sm">More powerful tools are currently under development. Stay tuned!</p>
+                    </div>
+                  </div>
+                </main>
+              </div>
+            );
+          }
+          

frontend/src/app/en/visa-photo/page.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from "next";
+import VisaPhotoMaker from '@/components/VisaPhotoMaker';
+
+export const metadata: Metadata = {
+  title: "VisaBerry - Free Visa Photo Maker | Passport Photo Generator Online",
+  description: "Create standard biometric visa and passport photos for free. Supports US 2x2 inch, Schengen 35x45mm, China, Japan, and more. Automatic background removal and cropping.",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/en/visa-photo',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org/visa-photo',
+      'en-US': 'https://quicktools.dpdns.org/en/visa-photo',
+      'de-DE': 'https://quicktools.dpdns.org/de/visa-photo',
+      'es-ES': 'https://quicktools.dpdns.org/es/visa-photo',
+      'fr-FR': 'https://quicktools.dpdns.org/fr/visa-photo',
+      'ru-RU': 'https://quicktools.dpdns.org/ru/visa-photo',
+      'ja-JP': 'https://quicktools.dpdns.org/ja/visa-photo',
+      'ko-KR': 'https://quicktools.dpdns.org/ko/visa-photo',
+    },
+  },
+  openGraph: {
+    title: "VisaBerry - Free Visa Photo Maker Online",
+    description: "Create standard biometric visa and passport photos for free. AI background removal and automatic cropping.",
+    url: 'https://quicktools.dpdns.org/en/visa-photo',
+    locale: 'en_US',
+    type: 'article',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+export default function EnglishHome() {
+  return (
+    <main>
+      <VisaPhotoMaker locale="en" />
+      <div className="max-w-4xl mx-auto px-4 pb-12 text-center">
+        <p className="text-xs text-gray-400 leading-relaxed border-t border-gray-100 pt-8">
+          VisaBerry AI provides free online tools to create standard biometric visa and passport photos. Supports US 2x2 inch, Schengen 35x45mm, China, and more with automatic background removal and smart cropping.
+        </p>
+      </div>
+    </main>
+  );
+}

frontend/src/app/es/page.tsx

@@ -0,0 +1,75 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "QuickTools - Colección de Herramientas Online Profesionales",
+  description: "Herramientas online simples, rápidas y privadas. Explora VisaBerry para fotos de pasaporte y más.",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/es',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org',
+      'en-US': 'https://quicktools.dpdns.org/en',
+      'de-DE': 'https://quicktools.dpdns.org/de',
+      'es-ES': 'https://quicktools.dpdns.org/es',
+      'fr-FR': 'https://quicktools.dpdns.org/fr',
+      'ru-RU': 'https://quicktools.dpdns.org/ru',
+      'ja-JP': 'https://quicktools.dpdns.org/ja',
+      'ko-KR': 'https://quicktools.dpdns.org/ko',
+    },
+  },
+  openGraph: {
+    title: "QuickTools - Colección de Herramientas Online Profesionales",
+    description: "Herramientas online simples, rápidas y privadas.",
+    url: 'https://quicktools.dpdns.org/es',
+    locale: 'es_ES',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+const LANGS = [
+  { code: 'zh', label: '中文', path: '/' },
+  { code: 'en', label: 'English', path: '/en' },
+  { code: 'de', label: 'Deutsch', path: '/de' },
+  { code: 'es', label: 'Español', path: '/es' },
+  { code: 'fr', label: 'Français', path: '/fr' },
+  { code: 'ru', label: 'Русский', path: '/ru' },
+  { code: 'ja', label: '日本語', path: '/ja' },
+  { code: 'ko', label: '한국어', path: '/ko' }
+];
+
+export default function SpanishPortalHome() {
+  return (
+    <div className="min-h-screen bg-white text-gray-900 font-sans">
+      <div className="absolute top-4 right-4 z-10 flex flex-wrap gap-2 justify-end max-w-xs">
+        {LANGS.map((l) => (
+          <Link key={l.code} href={l.path} className={`px-3 py-1 rounded-full text-xs font-medium border ${l.code === 'es' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-100'}`}>{l.label}</Link>
+        ))}
+      </div>
+      <header className="relative overflow-hidden bg-gray-50 pt-12 pb-16 sm:pt-16 sm:pb-20 text-center">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h1 className="text-5xl font-extrabold tracking-tight text-blue-600 sm:text-6xl mb-4">QuickTools</h1>
+            <p className="text-xl leading-8 text-gray-600">Simple · Rápido · Privacidad Primero<br/>Una colección creciente de herramientas útiles para todos.</p>
+          </div>
+        </div>
+      </header>
+      <main className="max-w-7xl mx-auto px-6 py-16 lg:px-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12">
+          <Link href="/es/visa-photo" className="group flex flex-col items-center p-8 bg-white rounded-3xl border border-gray-200 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1 group-hover:border-blue-400 text-center">
+            <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">📸</div>
+            <h2 className="text-2xl font-bold mb-3">VisaBerry</h2>
+            <p className="text-gray-600 text-sm text-balance">
+              <strong>100% Gratis</strong>. Creador profesional de fotos para visas y pasaportes. Fondo automático y recorte inteligente.
+            </p>
+            <div className="mt-6 flex items-center text-blue-600 font-semibold group-hover:gap-2 transition-all">Abrir Herramienta <span>&rarr;</span></div>
+          </Link>
+          <div className="flex flex-col items-center justify-center p-8 bg-gray-50 rounded-3xl border border-dashed border-gray-300 opacity-60 text-center">
+            <div className="w-16 h-16 bg-gray-200 text-gray-400 rounded-2xl flex items-center justify-center text-3xl mb-6">📄</div>
+            <h2 className="text-2xl font-bold mb-3 text-gray-400">Próximamente</h2>
+            <p className="text-gray-400 text-center text-sm">Se están desarrollando más herramientas. ¡Mantente informado!</p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

frontend/src/app/es/visa-photo/page.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import VisaPhotoMaker from '@/components/VisaPhotoMaker';
+
+export const metadata: Metadata = {
+  title: "VisaBerry - Generador de Fotos de Visa Gratis | Foto de Pasaporte en Línea",
+  description: "Crea fotos biométricas para pasaportes y visas gratis en línea. Compatible con EE. UU., España, México y más. Eliminación de fondo automática y recorte inteligente.",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/es/visa-photo',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org/visa-photo',
+      'en-US': 'https://quicktools.dpdns.org/en/visa-photo',
+      'de-DE': 'https://quicktools.dpdns.org/de/visa-photo',
+      'es-ES': 'https://quicktools.dpdns.org/es/visa-photo',
+      'fr-FR': 'https://quicktools.dpdns.org/fr/visa-photo',
+      'ru-RU': 'https://quicktools.dpdns.org/ru/visa-photo',
+      'ja-JP': 'https://quicktools.dpdns.org/ja/visa-photo',
+      'ko-KR': 'https://quicktools.dpdns.org/ko/visa-photo',
+    },
+  },
+  openGraph: {
+    title: "VisaBerry - Generador de Fotos de Visa Gratis",
+    description: "Crea fotos biométricas para pasaportes y visas gratis en línea.",
+    url: 'https://quicktools.dpdns.org/es/visa-photo',
+    locale: 'es_ES',
+    type: 'article',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+export default function SpanishHome() {
+  return <VisaPhotoMaker locale="es" />;
+}

frontend/src/app/fr/page.tsx

@@ -0,0 +1,84 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "QuickTools - Collection d'Outils en Ligne Professionnels",
+  description: "Outils en ligne simples, rapides et privés. Découvrez VisaBerry pour vos photos de passeport et plus encore.",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/fr',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org',
+      'en-US': 'https://quicktools.dpdns.org/en',
+      'de-DE': 'https://quicktools.dpdns.org/de',
+      'es-ES': 'https://quicktools.dpdns.org/es',
+      'fr-FR': 'https://quicktools.dpdns.org/fr',
+      'ru-RU': 'https://quicktools.dpdns.org/ru',
+      'ja-JP': 'https://quicktools.dpdns.org/ja',
+      'ko-KR': 'https://quicktools.dpdns.org/ko',
+    },
+  },
+  openGraph: {
+    title: "QuickTools - Collection d'Outils en Ligne Professionnels",
+    description: "Outils en ligne simples, rapides et privés.",
+    url: 'https://quicktools.dpdns.org/fr',
+    locale: 'fr_FR',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+const LANGS = [
+  { code: 'zh', label: '中文', path: '/' },
+  { code: 'en', label: 'English', path: '/en' },
+  { code: 'de', label: 'Deutsch', path: '/de' },
+  { code: 'es', label: 'Español', path: '/es' },
+  { code: 'fr', label: 'Français', path: '/fr' },
+  { code: 'ru', label: 'Русский', path: '/ru' },
+  { code: 'ja', label: '日本語', path: '/ja' },
+  { code: 'ko', label: '한국어', path: '/ko' }
+];
+
+export default function FrenchPortalHome() {
+  return (
+    <div className="min-h-screen bg-white text-gray-900 font-sans">
+      <div className="absolute top-4 right-4 z-10 flex flex-wrap gap-2 justify-end max-w-xs">
+        {LANGS.map((l) => (
+          <Link key={l.code} href={l.path} className={`px-3 py-1 rounded-full text-xs font-medium border ${l.code === 'fr' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-100'}`}>{l.label}</Link>
+        ))}
+      </div>
+      <header className="relative overflow-hidden bg-gray-50 pt-12 pb-16 sm:pt-16 sm:pb-20 text-center">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h1 className="text-5xl font-extrabold tracking-tight text-blue-600 sm:text-6xl mb-4">QuickTools</h1>
+            <p className="text-xl leading-8 text-gray-600">Simple · Rapide · Confidentialité Avant Tout<br/>Une collection croissante d'outils utiles pour tous.</p>
+          </div>
+        </div>
+      </header>
+      <main className="max-w-7xl mx-auto px-6 py-16 lg:px-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12">
+          <Link href="/fr/visa-photo" className="group flex flex-col items-center p-8 bg-white rounded-3xl border border-gray-200 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1 group-hover:border-blue-400 text-center">
+            <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">📸</div>
+            <h2 className="text-2xl font-bold mb-3">VisaBerry</h2>
+            <p className="text-gray-600 text-sm text-balance">
+              <strong>100% Gratuit</strong>. Créateur professionnel de photos de passeport et de visa. Suppression du fond et recadrage intelligent.
+            </p>
+            <div className="mt-6 flex items-center text-blue-600 font-semibold group-hover:gap-2 transition-all">Lancer l'outil <span>&rarr;</span></div>
+          </Link>
+
+          <Link href="/en/echo" className="group flex flex-col items-center p-8 bg-white rounded-3xl border border-gray-200 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1 group-hover:border-blue-400 text-center">
+            <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">📣</div>
+            <h2 className="text-2xl font-bold mb-3">Echo</h2>
+            <p className="text-gray-600 text-center text-sm leading-relaxed text-balance">
+              <strong>Free Reddit Assistant</strong>. AI-powered reply assistant to help you boost engagement and karma with high-quality responses on Reddit.
+            </p>
+            <div className="mt-6 flex items-center text-blue-600 font-semibold group-hover:gap-2 transition-all">Launch Tool <span>&rarr;</span></div>
+          </Link>
+          <div className="flex flex-col items-center justify-center p-8 bg-gray-50 rounded-3xl border border-dashed border-gray-300 opacity-60 text-center">
+            <div className="w-16 h-16 bg-gray-200 text-gray-400 rounded-2xl flex items-center justify-center text-3xl mb-6">📄</div>
+            <h2 className="text-2xl font-bold mb-3 text-gray-400">Prochainement</h2>
+            <p className="text-gray-400 text-center text-sm">D'autres outils sont en cours de développement. Restez à l'écoute !</p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

frontend/src/app/fr/visa-photo/page.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import VisaPhotoMaker from '@/components/VisaPhotoMaker';
+
+export const metadata: Metadata = {
+  title: "VisaBerry - Générateur de Photos de Visa Gratuit | Photo de Passeport en Ligne",
+  description: "Créez des photos de passeport et de visa biométriques gratuitement en ligne. Compatible avec les États-Unis, la France, le Canada, etc. Suppression automatique de l'arrière-plan.",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/fr/visa-photo',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org/visa-photo',
+      'en-US': 'https://quicktools.dpdns.org/en/visa-photo',
+      'de-DE': 'https://quicktools.dpdns.org/de/visa-photo',
+      'es-ES': 'https://quicktools.dpdns.org/es/visa-photo',
+      'fr-FR': 'https://quicktools.dpdns.org/fr/visa-photo',
+      'ru-RU': 'https://quicktools.dpdns.org/ru/visa-photo',
+      'ja-JP': 'https://quicktools.dpdns.org/ja/visa-photo',
+      'ko-KR': 'https://quicktools.dpdns.org/ko/visa-photo',
+    },
+  },
+  openGraph: {
+    title: "VisaBerry - Générateur de Photos de Visa Gratuit",
+    description: "Créez des photos de passeport et de visa biométriques gratuitement en ligne.",
+    url: 'https://quicktools.dpdns.org/fr/visa-photo',
+    locale: 'fr_FR',
+    type: 'article',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+export default function FrenchHome() {
+  return <VisaPhotoMaker locale="fr" />;
+}

frontend/src/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

frontend/src/app/ja/page.tsx

@@ -0,0 +1,84 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "QuickTools - プロ仕様オンラインツールコレクション",
+  description: "シンプル、高速、プライバシーを重視したオンラインツール。ビザ・パスポート写真作成のVisaBerryなど。",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/ja',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org',
+      'en-US': 'https://quicktools.dpdns.org/en',
+      'de-DE': 'https://quicktools.dpdns.org/de',
+      'es-ES': 'https://quicktools.dpdns.org/es',
+      'fr-FR': 'https://quicktools.dpdns.org/fr',
+      'ru-RU': 'https://quicktools.dpdns.org/ru',
+      'ja-JP': 'https://quicktools.dpdns.org/ja',
+      'ko-KR': 'https://quicktools.dpdns.org/ko',
+    },
+  },
+  openGraph: {
+    title: "QuickTools - プロ仕様オンラインツールコレクション",
+    description: "シンプル、高速、プライバシーを重視したオンラインツール。",
+    url: 'https://quicktools.dpdns.org/ja',
+    locale: 'ja_JP',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+const LANGS = [
+  { code: 'zh', label: '中文', path: '/' },
+  { code: 'en', label: 'English', path: '/en' },
+  { code: 'de', label: 'Deutsch', path: '/de' },
+  { code: 'es', label: 'Español', path: '/es' },
+  { code: 'fr', label: 'Français', path: '/fr' },
+  { code: 'ru', label: 'Русский', path: '/ru' },
+  { code: 'ja', label: '日本語', path: '/ja' },
+  { code: 'ko', label: '한국어', path: '/ko' }
+];
+
+export default function JapanesePortalHome() {
+  return (
+    <div className="min-h-screen bg-white text-gray-900 font-sans">
+      <div className="absolute top-4 right-4 z-10 flex flex-wrap gap-2 justify-end max-w-xs">
+        {LANGS.map((l) => (
+          <Link key={l.code} href={l.path} className={`px-3 py-1 rounded-full text-xs font-medium border ${l.code === 'ja' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-100'}`}>{l.label}</Link>
+        ))}
+      </div>
+      <header className="relative overflow-hidden bg-gray-50 pt-12 pb-16 sm:pt-16 sm:pb-20 text-center">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h1 className="text-5xl font-extrabold tracking-tight text-blue-600 sm:text-6xl mb-4">QuickTools</h1>
+            <p className="text-xl leading-8 text-gray-600">シンプル ・ 高速 ・ プライバシー重視<br/>誰もが使える、進化し続ける便利なツールコレクション。</p>
+          </div>
+        </div>
+      </header>
+      <main className="max-w-7xl mx-auto px-6 py-16 lg:px-8">
+        <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
+          <Link href="/ja/visa-photo" className="group flex flex-col items-center p-8 bg-white rounded-3xl border border-gray-200 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1 group-hover:border-blue-400 text-center">
+            <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">📸</div>
+            <h2 className="text-2xl font-bold mb-3">VisaBerry</h2>
+            <p className="text-gray-600 text-sm text-balance">
+              <strong>100% 完全無料</strong>。プロ仕様 of ビザ・パスポート写真作成ツール。自動背景除去とスマートトリミング。
+            </p>
+            <div className="mt-6 flex items-center text-blue-600 font-semibold group-hover:gap-2 transition-all">ツールを起動 <span>&rarr;</span></div>
+          </Link>
+
+          <Link href="/en/echo" className="group flex flex-col items-center p-8 bg-white rounded-3xl border border-gray-200 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1 group-hover:border-blue-400 text-center">
+            <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">📣</div>
+            <h2 className="text-2xl font-bold mb-3">Echo</h2>
+            <p className="text-gray-600 text-center text-sm leading-relaxed text-balance">
+              <strong>Free Reddit Assistant</strong>. AI-powered reply assistant to help you boost engagement and karma with high-quality responses on Reddit.
+            </p>
+            <div className="mt-6 flex items-center text-blue-600 font-semibold group-hover:gap-2 transition-all">Launch Tool <span>&rarr;</span></div>
+          </Link>
+          <div className="flex flex-col items-center justify-center p-8 bg-gray-50 rounded-3xl border border-dashed border-gray-300 opacity-60 text-center">
+            <div className="w-16 h-16 bg-gray-200 text-gray-400 rounded-2xl flex items-center justify-center text-3xl mb-6">📄</div>
+            <h2 className="text-2xl font-bold mb-3 text-gray-400">近日公開</h2>
+            <p className="text-gray-400 text-center text-sm">さらに強力なツールを開発中です。お楽しみに！</p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

frontend/src/app/ja/visa-photo/page.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import VisaPhotoMaker from '@/components/VisaPhotoMaker';
+
+export const metadata: Metadata = {
+  title: "VisaBerry - 無料 証明写真メーカー | オンラインビザ・パスポート写真作成",
+  description: "オンラインで無料でビザやパスポートの証明写真を作成。米国、日本、中国などに対応。自動背景除去とトリミング機能付き。",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/ja/visa-photo',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org/visa-photo',
+      'en-US': 'https://quicktools.dpdns.org/en/visa-photo',
+      'de-DE': 'https://quicktools.dpdns.org/de/visa-photo',
+      'es-ES': 'https://quicktools.dpdns.org/es/visa-photo',
+      'fr-FR': 'https://quicktools.dpdns.org/fr/visa-photo',
+      'ru-RU': 'https://quicktools.dpdns.org/ru/visa-photo',
+      'ja-JP': 'https://quicktools.dpdns.org/ja/visa-photo',
+      'ko-KR': 'https://quicktools.dpdns.org/ko/visa-photo',
+    },
+  },
+  openGraph: {
+    title: "VisaBerry - 無料 証明写真メーカー",
+    description: "オンラインで無料でビザやパスポートの証明写真を作成。",
+    url: 'https://quicktools.dpdns.org/ja/visa-photo',
+    locale: 'ja_JP',
+    type: 'article',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+export default function JapaneseHome() {
+  return <VisaPhotoMaker locale="ja" />;
+}

frontend/src/app/ko/page.tsx

@@ -0,0 +1,75 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "QuickTools - 전문 온라인 도구 컬렉션",
+  description: "간편하고 빠르며 개인정보를 보호하는 온라인 도구. 여권 사진 제작을 위한 VisaBerry 등을 살펴보세요.",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/ko',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org',
+      'en-US': 'https://quicktools.dpdns.org/en',
+      'de-DE': 'https://quicktools.dpdns.org/de',
+      'es-ES': 'https://quicktools.dpdns.org/es',
+      'fr-FR': 'https://quicktools.dpdns.org/fr',
+      'ru-RU': 'https://quicktools.dpdns.org/ru',
+      'ja-JP': 'https://quicktools.dpdns.org/ja',
+      'ko-KR': 'https://quicktools.dpdns.org/ko',
+    },
+  },
+  openGraph: {
+    title: "QuickTools - 전문 온라인 도구 컬렉션",
+    description: "간편하고 빠르며 개인정보를 보호하는 온라인 도구.",
+    url: 'https://quicktools.dpdns.org/ko',
+    locale: 'ko_KR',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+const LANGS = [
+  { code: 'zh', label: '中文', path: '/' },
+  { code: 'en', label: 'English', path: '/en' },
+  { code: 'de', label: 'Deutsch', path: '/de' },
+  { code: 'es', label: 'Español', path: '/es' },
+  { code: 'fr', label: 'Français', path: '/fr' },
+  { code: 'ru', label: 'Русский', path: '/ru' },
+  { code: 'ja', label: '日本語', path: '/ja' },
+  { code: 'ko', label: '한국어', path: '/ko' }
+];
+
+export default function KoreanPortalHome() {
+  return (
+    <div className="min-h-screen bg-white text-gray-900 font-sans">
+      <div className="absolute top-4 right-4 z-10 flex flex-wrap gap-2 justify-end max-w-xs">
+        {LANGS.map((l) => (
+          <Link key={l.code} href={l.path} className={`px-3 py-1 rounded-full text-xs font-medium border ${l.code === 'ko' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-100'}`}>{l.label}</Link>
+        ))}
+      </div>
+      <header className="relative overflow-hidden bg-gray-50 pt-12 pb-16 sm:pt-16 sm:pb-20 text-center">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h1 className="text-5xl font-extrabold tracking-tight text-blue-600 sm:text-6xl mb-4">QuickTools</h1>
+            <p className="text-xl leading-8 text-gray-600">간편함 · 신속함 · 개인정보 보호<br/>모두를 위한 계속해서 성장하는 유용한 도구 모음。</p>
+          </div>
+        </div>
+      </header>
+      <main className="max-w-7xl mx-auto px-6 py-16 lg:px-8">
+        <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
+          <Link href="/ko/visa-photo" className="group flex flex-col items-center p-8 bg-white rounded-3xl border border-gray-200 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1 group-hover:border-blue-400 text-center">
+            <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">📸</div>
+            <h2 className="text-2xl font-bold mb-3">VisaBerry</h2>
+            <p className="text-gray-600 text-sm text-balance">
+              <strong>100% 무료</strong>. 전문적인 비자 및 여권 사진 제작 도구. 자동 배경 제거 및 스마트 크기 조정.
+            </p>
+            <div className="mt-6 flex items-center text-blue-600 font-semibold group-hover:gap-2 transition-all">도구 시작 <span>&rarr;</span></div>
+          </Link>
+          <div className="flex flex-col items-center justify-center p-8 bg-gray-50 rounded-3xl border border-dashed border-gray-300 opacity-60 text-center">
+            <div className="w-16 h-16 bg-gray-200 text-gray-400 rounded-2xl flex items-center justify-center text-3xl mb-6">📄</div>
+            <h2 className="text-2xl font-bold mb-3 text-gray-400">곧 출시 예정</h2>
+            <p className="text-gray-400 text-center text-sm">더욱 강력한 도구들이 개발 중입니다. 기대해 주세요!</p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

frontend/src/app/ko/visa-photo/page.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import VisaPhotoMaker from '@/components/VisaPhotoMaker';
+
+export const metadata: Metadata = {
+  title: "VisaBerry - 무료 비자 사진 메이커 | 온라인 여권 사진 생성기",
+  description: "온라인에서 무료로 비자 및 여권 사진을 만드세요. 미국, 한국, 중국 등 지원. 자동 배경 제거 및 크기 조정.",
+  alternates: {
+    canonical: 'https://quicktools.dpdns.org/ko/visa-photo',
+    languages: {
+      'zh-CN': 'https://quicktools.dpdns.org/visa-photo',
+      'en-US': 'https://quicktools.dpdns.org/en/visa-photo',
+      'de-DE': 'https://quicktools.dpdns.org/de/visa-photo',
+      'es-ES': 'https://quicktools.dpdns.org/es/visa-photo',
+      'fr-FR': 'https://quicktools.dpdns.org/fr/visa-photo',
+      'ru-RU': 'https://quicktools.dpdns.org/ru/visa-photo',
+      'ja-JP': 'https://quicktools.dpdns.org/ja/visa-photo',
+      'ko-KR': 'https://quicktools.dpdns.org/ko/visa-photo',
+    },
+  },
+  openGraph: {
+    title: "VisaBerry - 무료 비자 사진 메이커",
+    description: "온라인에서 무료로 비자 및 여권 사진을 만드세요.",
+    url: 'https://quicktools.dpdns.org/ko/visa-photo',
+    locale: 'ko_KR',
+    type: 'article',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+};
+
+export default function KoreanHome() {
+  return <VisaPhotoMaker locale="ko" />;
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,68 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import Analytics from "@/components/Analytics";
+import Footer from "@/components/Footer";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+  display: 'swap',
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+  display: 'swap',
+});
+
+export const metadata: Metadata = {
+  title: "QuickTools - Fast, Simple, Privacy-First Online Tools",
+  description: "A collection of professional online tools for visa photos, document processing and more. Built with privacy and speed in mind.",
+  openGraph: {
+    siteName: 'QuickTools',
+    type: 'website',
+    locale: 'en_US',
+    images: [{
+      url: 'https://quicktools.dpdns.org/next.svg',
+      width: 800,
+      height: 600,
+    }],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'QuickTools',
+    description: 'Fast, Simple, Privacy-First Online Tools',
+    images: ['https://quicktools.dpdns.org/next.svg'],
+  },
+  icons: {
+    icon: 'data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📸</text></svg>',
+  },
+  manifest: '/manifest.json',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  // Simple heuristic: in a real app we'd use usePathname but this is a Server Component.
+  // Next.js handles 'lang' best via i18n routing, but for this structure, we'll keep it simple.
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <link rel="preconnect" href="https://api-gateway.umami.dev" />
+      </head>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen`}
+        suppressHydrationWarning
+      >
+        <Analytics />
+        <main className="flex-1">
+          {children}
+        </main>
+        <Footer />
+      </body>
+    </html>
+  );
+}