Vue d'ensemble : Site Société

NOVA is a one-page landing page for an AI product, built with Next.js 15, TypeScript and Tailwind CSS, in English and Arabic. It has a hero, a logo and stats row, how it works, a features tab view, integrations, testimonials, a blog preview, pricing with a monthly and yearly toggle, an FAQ and a closing call to action. It is a single page: the blog cards, the menu links and the buttons are placeholders for your own pages and actions.

Live Demo & More Info: aniq-ui.com NOVA Template

Getting Started

Requirements

• With Docker: Docker Desktop (or Docker Engine) and nothing else.
• Without Docker: Node.js 22 or newer, and Yarn 4. The repository pins Yarn 4 through packageManager; if the yarn command is missing, run corepack enable once.

Path A: Docker

From this folder:

docker build -t company-site .
docker run -p 3030:3030 company-site

Open http://localhost:3030. English is at /en, Arabic at /ar.

Path B: without Docker

yarn install
yarn dev

Open http://localhost:3030. The development server reloads as you edit.

For the production build:

yarn build
yarn start

It is served on http://localhost:3030 too.

A port is already in use?

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

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

Environment variables

The site runs without a .env file. It reads one optional variable, listed in .env.example:

Set it to your real domain before you deploy. It is read at build time, so build again after changing it:

• Without Docker: cp .env.example .env, edit the value, then yarn build.
• Docker: docker build -t company-site --build-arg NEXT_PUBLIC_SITE_URL=https://www.your-domain.com .

Scripts

Customizing

Languages

The site is localized with next-intl and ships two locales:

• Routes are prefixed with the locale: /en, /ar.
• src/middleware.ts sends / to the browser's language when it is en or ar, and to English otherwise.
• ` is set from the locale, and layout uses logical Tailwind classes (ms-, pe-, start-*, text-start`...) so RTL mirrors automatically.
• All copy lives in messages/en.json and messages/ar.json. Both files must keep the same keys.
• Components read text with useTranslations; constants only hold keys, ids, routes, icons, image paths and numbers.
• A locale switcher sits in the header (src/components/LocaleSwitcher.tsx), with one link for every other locale.

To add a locale, add its code to src/i18n/routing.ts, create messages/.json, and add the locale name under localeSwitcher.names in every messages file. If it is right-to-left, list it in src/i18n/direction.ts.

Project Structure

messages/                   # en.json, ar.json
src/
├── app/
│   ├── globals.css
│   ├── manifest.ts         # web app manifest, named after brand.name
│   └── [locale]/           # layout.tsx (html, providers, metadata) and page.tsx (home composition)
├── i18n/                   # routing, request config, locale-aware navigation, text direction
├── middleware.ts           # locale negotiation
├── components/             # Shared components (Logo, Reveal, SectionHeader, GlowFrame, LocaleSwitcher...)
│   └── ui/                 # UI primitives (Button, Accordion, Tabs)
├── features/home/          # One folder per page section
│   └── <Section>/
│       ├── index.tsx       # Composition only
│       ├── components/     # One component per file + index.ts barrel
│       ├── hooks/          # One hook per file + index.ts barrel
│       ├── constants/      # Keys, ids, images, numbers
│       └── types/
├── layouts/                # Header and Footer, same subfolder convention
├── hooks/                  # Shared hooks (useTextDirection, useBrandName)
├── lib/                    # cn() helper, site URL
└── providers/              # ThemeProvider

Barrel index.ts files only re-export.

Adding a Section or Page

1. Create the section folder under src/features/// using the layout above.
2. Add its copy to both messages/en.json and messages/ar.json, and read it with useTranslations("").
3. Compose it in src/app/[locale]//page.tsx. Call setRequestLocale(locale) at the top of a page so it stays statically rendered.
4. Use logical spacing classes and add rtl:rotate-180 to arrows and chevrons that point in a reading direction.

Styling

• Tailwind CSS with CSS variables for theme colors in globals.css.
• The page is designed dark. next-themes sets the dark class on ``.
• Entrance animations go through the shared Reveal component.

Tech Stack

All dependencies are pinned to exact versions and yarn.lock is committed.

Support

For questions or support, contact the Aniq UI team.

License

This project is licensed under the MIT License. See the LICENSE file for details.

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