Make it yours

Text

Every visible word, every button label and alt text, and the page's title and description are in messages/en.json and messages/ar.json. Change the value, keep the key, and change both files.

• Words in curly braces, such as {year} in footer.copyright, are filled in by the page. Keep them as they are in both languages.
• Each plan's features are a list: add or remove lines in pricing.plans.basic.features (and standard, premium) in both files.

Projects, features, steps, testimonials and plans

Each of these is a list in its section's constants/ folder. An entry's key names its text in the message files.

To add one, add an entry with a new key, then add that key's text in both message files. A new project with the key atlas needs work.projects.atlas.title and work.projects.atlas.subtitle.

Prices and currency

The amounts are plain numbers, monthlyPrice and annualPrice, in pricingPlans.ts. The currency is set once, currency: "USD", in src/features/home/Pricing/components/PricingCard.tsx: change it to another currency code such as EUR. Prices are formatted for the page's language.

The "Save 20%" label is text, pricing.save. Update it when your annual discount changes.

Images

Keep a file's name to replace it without touching the code, or change its path in projectItems.ts. The project images show in greyscale until the pointer is over them.

Colours

The palette is the list of CSS variables at the top of src/styles/globals.css, such as --background, --foreground, --primary and --border, written as HSL numbers and used by tailwind.config.ts. --radius is 0rem, which keeps every corner square.

Many sections also use Tailwind's black, white and neutral classes directly, such as bg-black and text-white/70. A new colour scheme means changing those classes in the sections' files too.

The site is dark only: the layout sets the dark class, and the theme does not follow the visitor's system.

Fonts

src/app/[locale]/layout.tsx loads Inter for English and Noto Sans Arabic for Arabic with next/font/google, and the page's text uses the one for its language.

Inter is also published as the CSS variable --font-inter, which the headings (h1 to h6) use in src/styles/globals.css, in every language but Arabic. To change the English font, import another family from next/font/google in the layout and keep variable: "--font-inter" on it, so the headings follow.

Sections

src/app/[locale]/page.tsx lists the sections in order. Move a line to reorder them, or delete one to remove its section. Each section lives in src/features/home/, in a folder of its own.

When you remove a section, also remove its link from src/layouts/constants/sectionLinks.ts, so the navbar and the footer do not point at it.

Links and buttons

The social and legal links ship as #: put your own address in each href. The template has no privacy or terms page of its own.

The contact form

The form checks the name, the email and the message in the browser before it sends; the error texts are under contact.form.validation. Where it sends depends on NEXT_PUBLIC_API_BASE_URL:

• Empty, the default: nothing is sent. After a short pause the form shows its success message, so you can try it.
• Set: the form sends POST to your API's /contact path with the JSON body { name, email, message }. A 2xx answer shows the success message, unless its JSON says "success": false; any other answer shows the error message.

The visitor's browser sends the request, so your API must accept requests from your site's address (CORS). The call is in src/lib/api/contact.ts. The value is written in at build time: build again after you set it.

Search engines and social cards

The page title, the description, the site name and the preview image's alt text are under metadata in each message file. NEXT_PUBLIC_SITE_URL sets the canonical link, the en and ar language links and the address in the social preview cards, which show public/image.png.

• generator in src/app/[locale]/layout.tsx names the template's author in the page head. Put your own name there, or remove the line.
• public/site.webmanifest names the site Mono for phones that add it to the home screen. Put your site's name there.
• The template ships no robots.txt and no sitemap. Add src/app/robots.ts and src/app/sitemap.ts if you want them.

• Set your site's address

The custom cursor

On screens 768 pixels wide and more, the page hides the system pointer and draws its own dot and ring, from src/components/FloatingCursor/. To keep the normal pointer, remove <FloatingCursor /> from src/app/[locale]/layout.tsx and the cursor: none rules near the top of src/styles/globals.css.