Make it yours

Where everything lives

With yarn dev running, every save shows on the page at once. With Docker, build the image again to see a change.

Text

Every word on the page is in messages/en.json and messages/ar.json, grouped by section: hero, socialProof, howItWorks, features, integrations, testimonials, blog, pricing, faq and cta, plus header, footer and metadata. Change the value, keep the key, and change it in both files.

Words in braces, such as {brand}, {year} or {count}, are filled in by the code: keep them as they are. In the hero's trustedBy line, keep the tags around {count} too.

Some figures live in the code, not in the message files:

Each FAQ id needs its question and answer under faq.items in both message files. Prices are shown in dollars, through pricing.price in the message files.

Brand name and logo

brand.name in both message files is the one place to rename the brand. It is the name beside the logo, in the header and the footer, and the logo mark shows its first letter. Every text that names the brand says {brand} and takes this value: the page title, the sharing picture's description, the hero badge, two testimonials, the closing message and the copyright line.

The installed app's name follows it too: src/app/manifest.ts reads brand.name from the English messages.

The logo mark is drawn in src/components/Logo.tsx: a turned square in the red to amber gradient. Replace it with your own SVG, or with a picture from public/, to use your logo.

The browser and phone icons are public/favicon.svg, public/favicon.ico, public/favicon-96x96.png, public/apple-touch-icon.png and the two public/web-app-manifest-*.png files. Replace them with files of the same names and sizes. The manifest itself is src/app/manifest.ts.

Pictures and logos

To use your own picture, put it in public/images/ and write its path, starting with /images/, in the section's constants file. A picture from another website needs its host listed in images.remotePatterns in next.config.mjs; Next.js refuses to load it otherwise. images.unsplash.com and cdn.simpleicons.org are listed already.

The Unsplash photos and the Simple Icons logos are samples. Replace them with your own files in public/images/ before you go live.

Colours

The accent is a red to amber gradient, written as the Tailwind classes from-red-500 and to-amber-500, with other red-* and amber-* shades for borders, glows and icons. To change it, search src/ for red- and amber- and replace them with your colours. Start with src/components/GradientButton.tsx, which every gradient button uses.

The page is designed dark: the background is black (bg-black in src/app/[locale]/layout.tsx and src/app/[locale]/page.tsx), and next-themes starts in dark mode. The theme tokens in src/app/globals.css and tailwind.config.ts colour the shared parts in src/components/ui/.

Fonts

src/app/[locale]/layout.tsx loads Inter for English and Noto Sans Arabic for Arabic through next/font/google, which downloads them at build time and serves them from your own site. To change one, import another font from next/font/google and use it in place of Inter or Noto_Sans_Arabic.

Sections and their order

src/app/[locale]/page.tsx lists the sections in the order they appear: Hero, SocialProof, HowItWorks, Features, Integrations, Testimonials, BlogPreview, Pricing, Faq and Cta. Move a line to move a section, or delete it to remove the section.

Each section is a folder in src/features/home/, with components/, constants/, hooks/ and types/ inside. To add one, copy that layout, add its text to both message files, and place it in page.tsx.

The header's Pricing and Testimonials links jump to the sections with the ids pricing and testimonials, and the contact links to the closing call to action, whose id is contact. Keep those ids while the links point at them.

Links and buttons

The sample links go nowhere yet. Set them before you publish:

The contact links under the FAQ and the integrations already work: they jump to the closing call to action.

The buttons (Log in, Get Started, Start Free Trial, Watch Demo, the plan buttons, Read More and View All Articles) are plain buttons with no destination. To make one a link, give it asChild and put a link inside it, with its text and icon:

<GradientButton asChild className="h-10 sm:h-12 px-6 sm:px-8">
  <a href="https://app.your-domain.com/signup">{t("primaryCta")}</a>
</GradientButton>

Search and sharing

• Page title and description: metadata.title and metadata.description in both message files. metadata.imageAlt describes the sharing picture.
• Sharing picture: public/image.png, 1200 x 630 pixels.
• Canonical link and language alternates: built from NEXT_PUBLIC_SITE_URL, which you set when you deploy.
• src/app/[locale]/layout.tsx also sets a generator tag naming the template's author. Change or remove it there.
• No robots.txt and no sitemap ship with the template. Add src/app/robots.ts and src/app/sitemap.ts if you want them.

• Set your address

Next

• Languages and right to left
• Put it online