What the template is
A landing page for a product or a business, written for Publino, a made-up platform that sells UI components and templates and deploys websites, as the example. It is one Next.js app with no database and no back end, and nothing has to be configured before the first run.
It has three pages: a home page with an animated dashboard mockup under the headline, a pricing page and a contact page. It ships in dark and light themes, and in English and Arabic.
A look at the site
What it is built with
| Technology | What it does here |
|---|---|
| Next.js 16 (App Router) | The framework, the pages, the metadata and the production server |
| React 19 and TypeScript | Every component and source file |
| Tailwind CSS 4 | All the styling, with light and dark colour tokens |
| next-intl | The English and Arabic texts and the language in the address |
| React Hook Form and Zod | The two forms and their checks |
| Motion | The animations |
| Recharts, dnd-kit and cobe | A feature card's chart, the dashboard mockup's cards you can drag, and the 3D globe |
| Radix UI and Tabler Icons | The tabs, tooltips and labels, and the icons |
Every dependency is pinned to an exact version in package.json, and yarn.lock is included, so your install gets the same versions the template was tested with.
What is in the download
The ZIP extracts to a folder named Publino-template:
| Path | What it is |
|---|---|
src/ | The app: the pages, their sections, the header, the dashboard mockup, the feature cards and the language setup |
messages/ | Every visible text, in English and Arabic |
public/ | The images, the favicons, the app icons and the social sharing image |
Dockerfile, .dockerignore | Build the site into an image that serves it on port 3030 |
.env.example | The optional settings, with their defaults |
README.md | The setup and customising guide |
LICENSE.md | Your commercial licence |
package.json, yarn.lock, .yarnrc.yml | The dependencies and the Yarn 4 setup |
Good to know before you build on it
- The two forms check what visitors type but send nothing until you connect them to your own service.
- Nothing takes payments. The plan buttons lead to the contact page or to the home page's form.
- Some buttons are placeholders for you to point at your own pages, such as Login, Book a call and the hero's two buttons.
- The texts, figures, people, prices and template cards are sample content for you to replace.
The site ships in English and Arabic. English addresses have no prefix, such as /pricing, Arabic ones start with /ar, such as /ar/pricing, and the Arabic pages are laid out right to left.
On Windows, use PowerShell or Git Bash for the commands in these guides.