Vue d'ensemble : Agence Design Web

MONO is a minimal, brutalist portfolio template built with Next.js 15, TypeScript and Tailwind CSS, available in English and Arabic (RTL).

Live demo and details: aniq-ui.com MONO Template

Getting Started

Requirements

• With Docker: Docker only. Nothing else to install.
• Without Docker: Node.js 22 or later, and Yarn 4 through Corepack (run corepack enable once).

Path A: Docker

Run these two commands in this folder:

docker build -t agency-portfolio .
docker run -p 3030:3030 agency-portfolio

Open http://localhost:3030. / sends the visitor to /en or /ar from the browser's language (English when neither matches), and for the rest of the browser session it remembers the last language opened (a NEXT_LOCALE cookie). /en and /ar always open that language; /ar is right to left.

Path B: without Docker

yarn install
yarn dev

Open http://localhost:3030.

For a production build:

yarn build
yarn start

yarn start serves the build on http://localhost:3030.

A port is already in use?

Another program is using port 3030. Stop it, or run on another port:

• Docker: change the number on the left, for example docker run -p 3041:3030 agency-portfolio, then open http://localhost:3041.
• Without Docker: yarn dev -p 3041 (or yarn start -p 3041), then open http://localhost:3041.

Scripts

Every dependency is pinned to an exact version and yarn.lock is included.

Environment

The site runs with no configuration. Both variables are optional. To set them without Docker, copy .env.example to .env.local and edit it:

cp .env.example .env.local

These values are built into the site, so change them, then build again. With Docker, pass them to the build:

docker build -t agency-portfolio \
  --build-arg NEXT_PUBLIC_SITE_URL=https://www.your-domain.com \
  --build-arg NEXT_PUBLIC_API_BASE_URL=https://api.your-domain.com .

Customising

Languages

• Locales: en (default) and ar, routed as /en and /ar.
• Messages live in messages/en.json and messages/ar.json. Every visible string, aria-label, alt text and the page metadata comes from these files, so add a key to both files together.
• ` follows the locale, and the layout uses logical Tailwind classes (ms-, pe-, start-*, text-end`) so it mirrors under RTL.
• To add a locale, add it to src/i18n/routing.ts, create messages/.json, register its direction in src/i18n/getDirection.ts and its Open Graph code in src/i18n/openGraphLocales.ts, and add its name under localeSwitcher.names. in every message file.
• The header holds a LocaleSwitcher (src/components/LocaleSwitcher).

Project Structure

messages/                   # en.json, ar.json
src/
├── app/[locale]/           # layout.tsx (html, providers, metadata) and page.tsx (home composition)
├── components/             # Shared components
│   ├── ui/                 # Button, Card, Input, Textarea, Badge, SectionHeader, field parts
│   ├── icons/              # Brand SVG icons
│   ├── Logo/  LocaleSwitcher/  FloatingCursor/  NoiseBackground/  TextGenerateEffect/
├── features/home/          # One folder per page section
│   └── <Section>/          # index.tsx + components/ hooks/ constants/ types/ utils/ (as needed)
├── i18n/                   # routing, request config, navigation helpers, direction
├── layouts/                # Navbar and Footer
├── lib/
│   ├── api/                # The only place with fetch and endpoint URLs
│   ├── siteUrl.ts          # SITE_URL from NEXT_PUBLIC_SITE_URL
│   └── utils.ts            # cn() helper
├── providers/              # ThemeProvider, QueryProvider
├── services/               # TanStack Query hooks (services/contact/hooks/mutations)
├── styles/                 # globals.css
├── types/                  # Shared types (ApiResponse, ContactPayload)
└── middleware.ts           # Locale routing

Conventions: one component per file with an index.ts barrel, one hook per file, one helper per file, constants hold keys, routes, icons and numbers only (text lives in the message files).

Contact form data flow

ContactForm (React Hook Form + Zod, messages translated) -> useContactForm -> useSendContactMessage (src/services/contact) -> contactApi.send (src/lib/api/contact.ts).

Tech Stack

Support

For questions or support, contact the Aniq UI team.

License

MIT License, see the LICENSE file.

Created by Aniq UI, premium Next.js templates for modern web apps.