Website Guide & Maintenance

This site is built with Next.js 16 and Tailwind CSS. Content lives in a small number of files, and images live in the public/images folder. You don't need to touch any styling to update text, photos, or contact details — just the files described below.

Here's where everything lives:

src/
  app/
    page.jsx            → Home page
    about/page.jsx       → About page
    projects/page.jsx    → Projects listing
    projects/[slug]/     → Individual project pages
    docs/page.jsx         → This documentation page
  components/            → Reusable UI (Header, Footer, cards, etc.)
  lib/
    projects.js          → Project data (titles, tags, images)
    whatsapp.js           → WhatsApp number, email, Instagram handle

public/
  images/
    abuja/                → Airport Road Residence photos
    oniru/                → Oniru Residence photos
    hero/                  → Homepage hero background
    brand/                 → Logo files

All project details live in one file: src/lib/projects.js. To add a new project, copy an existing entry and update the fields:

{
  slug: "new-project-slug",       // used in the URL: /projects/new-project-slug
  title: "Project Name",
  location: "Area, City",
  tags: ["Tag One", "Tag Two"],
  images: [
    "/images/new-project/view01.jpg",
    "/images/new-project/view02.jpg",
  ],
}

The first image in the array becomes the cover photo shown on the project card. Leave images: []empty and the page will show a "Photos coming soon" placeholder automatically.

Add new photos into a folder under public/images/ — for example public/images/new-project/ — then reference them in projects.js using that path.

Recommended: keep photos under 300KB and no wider than 1600px for fast loading. Large uncompressed files (10MB+) will slow the site down noticeably on mobile.

The About page content lives in src/app/about/page.jsx. Text for each section (Who We Are, Our Approach, Meet the Founder, What We Do, Why Clients Choose Us) is written directly in the file as plain paragraphs — edit the wording there and save.

The founder photo is currently a placeholder graphic. Replace it by adding a real photo to public/images/ and swapping the FounderPlaceholder component for an Image tag pointing to the new file.

All contact details are centralized in src/lib/whatsapp.js:

export const WHATSAPP_NUMBER = "2348066794774";
export const CONTACT_EMAIL = "ftmeliteservices@gmail.com";
export const CONTACT_PHONE_DISPLAY = "+234 806 679 4774";
export const INSTAGRAM_HANDLE = "ftm_eliteservices";

Update these values and every WhatsApp button, phone link, and Instagram link across the site updates automatically.

Colors and fonts are defined once in src/app/globals.css as CSS variables — cream background, forest green, and gold accent. Changing a value there updates it site-wide.

The logo file lives at public/images/brand/logo.png. Replacing this file updates the logo in both the header and footer.

To preview changes on your own computer:

cd ftm-elite
npm install
npm run dev

Then open http://localhost:3000 in your browser.

This project is a standard Next.js app and deploys cleanly to Vercel, Netlify, or any Node.js hosting environment. For Vercel: push the project to a Git repository, import it at vercel.com, and it will detect the Next.js framework automatically.

npm run build
npm run start

For structural changes, new features, or anything beyond the scope of this guide, reach out to JK Technology Limited (JKTL), who built and maintain this site.