🧠 Memos - Official Website

The official landing page for Memos, an AI-powered chat history management system with intelligent semantic search capabilities.

🌐 About This Website

This is a modern, responsive landing page built with Next.js 15 that showcases the Memos project - a revolutionary chat history storage and management system that combines traditional keyword search with AI-powered semantic similarity for intelligent conversational data retrieval.

✨ Website Features

🎨 Design & UI

Clean, Minimal Design - Professional landing page with modern aesthetics
Responsive Layout - Mobile-first design that works on all devices
Dark Mode Support - Automatic theme switching based on user preference
Gradient Backgrounds - Beautiful visual effects with CSS gradients
Smooth Animations - Subtle hover effects and transitions

🌍 Internationalization (i18n)

Professional i18n Setup - Built with next-intl for scalable multilingual support
Multi-Language Support - English and Chinese (Simplified) with easy extensibility
SEO-Friendly URLs - Clean URLs with locale prefixes (/en, /zh)
Dropdown Language Switcher - Professional dropdown menu with flags and language names
Static Site Generation - Optimized SSG for all locales with generateStaticParams
Type-Safe Translations - Full TypeScript support with structured message files
Advanced Routing - Centralized routing configuration with next-intl navigation APIs

📋 Page Sections

Navigation Header - Logo, dropdown language switcher, and GitHub link
Hero Section - Compelling headline with primary call-to-action
Features Grid - Three key features of the Memos system:
- 🔍 Hybrid Search (keyword + semantic)
- 🤖 AI-Powered (Google Gemini embeddings)
- ⚡ Real-time capabilities
Footer - Clean footer with copyright information

🎯 User Experience

Fast loading times with Next.js optimization
Clean typography using Geist fonts
Intuitive navigation and layout
Professional color scheme with consistent branding

🛠️ Tech Stack

Framework: Next.js 15.4.2 with React 19
Internationalization: next-intl 4.3.4 with official App Router support
Styling: Tailwind CSS 4 with custom design tokens
UI Components: Radix UI primitives (dropdown menu, button)
Icons: Lucide React for interface icons
Typography: Geist Sans and Geist Mono fonts
Development: TypeScript with ESLint and path mapping

🚀 Getting Started

Prerequisites

Node.js 18+
pnpm (recommended) or npm

Installation

Clone the repository
```
git clone <repository-url>
cd website
```
Install dependencies
```
pnpm install
# or
npm install
```
Start the development server
```
pnpm dev
# or
npm run dev
```
Access the website

Navigate to one of the following URLs:
- English: http://localhost:3000/en
- Chinese: http://localhost:3000/zh

Available Scripts

pnpm dev - Start development server with Turbopack
pnpm build - Build the application for production
pnpm start - Start the production server
pnpm lint - Run ESLint for code quality

📁 Project Structure

website/
├── messages/                   # Translation files
│   ├── en.json                # English translations
│   └── zh.json                # Chinese translations
├── src/
│   ├── app/
│   │   └── [locale]/          # Next.js 15 app directory with i18n routing
│   │       ├── layout.tsx     # Root layout with locale support
│   │       ├── page.tsx       # Main landing page component
│   │       ├── not-found.tsx  # Custom 404 page
│   │       └── globals.css    # Global styles & Tailwind CSS
│   ├── components/
│   │   └── ui/                # UI component library
│   │       ├── button.tsx     # Button component with variants
│   │       ├── dropdown-menu.tsx # Dropdown menu components
│   │       └── language-dropdown.tsx # Language switcher dropdown
│   ├── i18n/                  # Internationalization configuration
│   │   ├── routing.ts         # Routing configuration
│   │   ├── navigation.ts      # Navigation API wrappers
│   │   └── request.ts         # Server-side i18n config
│   ├── lib/                   # Utility libraries
│   │   └── utils.ts          # Utility functions (cn helper)
│   └── middleware.ts          # Next.js middleware for locale detection
├── public/                    # Static assets
├── package.json              # Dependencies and scripts
├── next.config.ts            # Next.js configuration with next-intl
├── tailwind.config.js        # Tailwind CSS configuration
├── tsconfig.json            # TypeScript configuration
└── README.md                # This file

📝 Recent Changes

Latest Updates

✅ Official next-intl Implementation - Professional i18n setup following official documentation
✅ Structured Message Files - JSON-based translation management in messages/ folder
✅ Advanced Routing - Centralized routing configuration with routing.ts
✅ Navigation APIs - Type-safe navigation wrappers with locale awareness
✅ Static Site Generation - Optimized SSG with generateStaticParams and setRequestLocale
✅ Professional Dropdown - Enhanced language switcher with next-intl navigation
✅ Server Components - Using getTranslations for optimal performance
✅ Middleware Integration - Automatic locale detection and routing
✅ TypeScript Support - Full type safety with path mapping to src/ folder

Architecture Improvements

src/ Folder Structure - Clean separation of source code
Type-Safe Translations - Structured message keys with IntelliSense
Centralized Configuration - Single source of truth for routing and locales
Performance Optimized - Static rendering with locale-aware navigation
Scalable Design - Easy addition of new languages and routes

🌍 Internationalization Details

Supported Languages

English (en) - Default language with full content
Chinese Simplified (zh) - Complete translation available

Advanced Features

URL-based Routing - Clean URLs with locale prefixes (/en, /zh)
Professional Dropdown - Language switcher with country flags and next-intl navigation
Static Site Generation - Pre-rendered pages for all locales
Type-Safe Navigation - Locale-aware Link, redirect, useRouter, and usePathname
Automatic Locale Detection - Middleware handles browser language preferences
Fallback Support - Graceful fallback to default locale

Translation Architecture

The application uses next-intl's structured approach:

Message Files - JSON files in messages/ folder
Routing Configuration - Centralized in src/i18n/routing.ts
Navigation APIs - Wrapped Next.js navigation in src/i18n/navigation.ts
Request Configuration - Server-side setup in src/i18n/request.ts
Middleware - Automatic locale detection in src/middleware.ts

Current Translations

The website includes structured translations for:

Navigation elements and GitHub links
Complete hero section (title, subtitle, description)
Feature cards with detailed descriptions
Call-to-action buttons and footer content
Error pages (404 not found)

Adding New Languages

To add a new language (e.g., French):

Add message file

# Create messages/fr.json with translations
touch messages/fr.json

Update routing configuration

// src/i18n/routing.ts
export const routing = defineRouting({
  locales: ["en", "zh", "fr"],
  defaultLocale: "en",
});

Update language dropdown

// src/components/ui/language-dropdown.tsx
const languages = {
  en: { label: "English", flag: "🇺🇸" },
  zh: { label: "中文", flag: "🇨🇳" },
  fr: { label: "Français", flag: "🇫🇷" },
};

Create translations

// messages/fr.json
{
  "HomePage": {
    "title": "Stockage Intelligent pour les Données Conversationnelles",
    "description": "..."
  }
}

The system will automatically:

Generate static pages for the new locale
Handle routing and navigation
Provide type-safe translation functions
Support locale detection and switching

🎨 Design Tokens

The website uses a carefully crafted design system built on top of Tailwind CSS:

Colors: Custom color palette with semantic naming
Typography: Geist font family for modern readability
Spacing: Consistent spacing scale throughout
Shadows: Subtle shadows for depth and hierarchy
Borders: Rounded corners for friendly, modern feel

🌐 About Memos Project

Memos is a full-stack application designed to revolutionize how we store and retrieve conversational data. It combines traditional keyword search with AI-powered semantic similarity, providing an intelligent system for managing chat histories, conversations, and memory-based interactions.

Key Technologies in Memos

Backend: Node.js + Express.js with TypeScript
Database: Supabase PostgreSQL with pgvector extension
AI: Google Gemini AI (gemini-embedding-001)
Frontend: Next.js 15+ with React 19
MCP: Model Context Protocol for AI tool integration

🚀 Deployment

Recommended Deployment Platforms

Vercel (Recommended)

# Deploy to Vercel with automatic i18n support
npx vercel --prod

Netlify

# Build and deploy
pnpm build
# Upload .next folder to Netlify

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Make your changes following the established patterns
Update translations in messages/ folder if you modify text content
Test all language routes (/en, /zh)
Update this README for any structural changes
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Translation Contributions

Follow the established JSON structure in messages/ folder
Ensure all translation keys are present in all language files
Test the dropdown language switcher functionality
Verify static site generation works for new locales

Development Guidelines

Use getTranslations for server components
Use useTranslations for client components
Always add setRequestLocale(locale) in pages and layouts for static rendering
Use next-intl's navigation APIs (Link, useRouter, etc.) for locale-aware routing

📄 License

This project is licensed under the ISC License - see the main Memos project for details.

🔗 Links

Live Website:
- English: http://localhost:3000/en (development)
- Chinese: http://localhost:3000/zh (development)
next-intl Documentation: https://next-intl.dev/
Memos Project Documentation: See MEMOS.md for full project details
GitHub Repository: [Your repository URL]

Built with ❤️ using Next.js 15 and next-intl for the global Memos community

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
messages		messages
public		public
src		src
.gitignore		.gitignore
MEMOS.md		MEMOS.md
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

memosapp/website

Folders and files

Latest commit

History

Repository files navigation