Skip to main content
MOJO:AI
DOCS
ShowcaseBack

MOJO.AI - Business Consultancy Website

Welcome to the official documentation for the MOJO.AI - Business Consultancy Website. This premium Next.js template is designed for high-end AI agencies, freelancers, and consultancies looking for a professional, performance-optimised, and visually stunning web presence.

Built with Next.js 15, React 19, Tailwind CSS 4, and TypeScript 5, it offers a solid foundation for your next project.

NEW FEATURE

Explore the Component Showcase

We've built a dedicated showcase page where you can view every UI element and layout section in isolation.

VIEW SHOWCASE
+

Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js 18.x or later
  • npm, yarn, or pnpm

Installation

1. Navigate to directory

cd template

2. Install dependencies

npm install

3. Run development server

npm run dev

Open http://localhost:3000 in your browser to see the result.

Project Structure

The project follows a standard Next.js App Router structure with a focus on modularity and ease of customisation:

src/— The main source code directory
app/— Routes, pages, layouts, and global styles
about/— About Us page and content
careers/— Listings, job pages, and apply flow
case-studies/— Interactive project showcases
docs/— Documentation page
insights/— Blog, articles, and whitepapers
legal/— Privacy, Terms, and Policies
services/— Services page
showcase/— Component showcase gallery
layout.tsx— Main layout & Metadata
globals.css— Global styles
components/— Reusable UI components
ui/— Atomic elements (Buttons, Inputs, Cards)
context/— React context (ContactPanel state)
data/— Centralised content management
hooks/— Custom hooks (useScrollLock)
lib/— Shared utilities (form-styles)
proxy.ts— Next.js proxy (auth, redirects)
public/— Static assets (Images, Logos)
package.json— Scripts and dependencies

Customisation

Updating Content

Most content is centralised in src/data/, allowing you to update text and data without touching JSX code.

  • case-studies.ts: Projects and success stories.
  • insights.ts: Blog posts and articles.
  • content.ts: Global site strings (Hero, Features, etc.).

Font Integration

The primary font used is Space Grotesk, automatically loaded via next/font/google in layout.tsx.

Icons & Images

We use react-icons (fa6) for social icons and next/image for optimized asset delivery.

Components

The template includes 35+ high-quality components designed for consistency. Visit the Showcase for live previews.

Layout & Navigation

HeaderFooterContactPanelNewsletter SignupPageWrapperSectionDivider

Hero & Branding

Standard HeroCompact HeroImage Background HeroMonochrome HeroAnimated GridSectionHeader

Main Sections

FeaturesProcessStatsAbout UsOfferingsTeamTestimonialsClientsCTA SectionCareersCareerStatsCardServices SummaryDetailed Services

UI Elements & Content

ButtonInputAccordionTabsFAQInsights GridFeatured InsightQuote CardStat BlockArticle BodyCardApply Form

Developer Utilities

Shared styles and hooks for consistency:

  • src/lib/form-styles.ts — formInputStyles, formTextareaStyles, formLabelStyles for custom forms
  • src/hooks/useScrollLock.ts — body scroll lock for overlays (e.g. Contact panel, mobile menu)

Metadata & SEO

Managed via the Next.js Metadata API in `layout.tsx` and individual pages:

export const metadata: Metadata = { title: "AI Solutions for Growth", description: "Unlocking efficiency...", };

Accessibility

Built with a11y standards: Semantic HTML, focus-visible states, and ARIA labels. We also use focus-trap-react for overlays like the Mobile Menu.

Deployment

Optimized for **Vercel**, but compatible with any Node.js hosting.

Build Commands

npm run build
npm run start

Version History

v1.3.4Latest

March 2026

  • Home: Default home page now uses the standard Hero component instead of HeroMono.
  • Header: Main site header is hidden on auth routes (/login, /signup, /forgot-password, /reset-password) for cleaner standalone flows.
v1.3.3Update

March 2026

  • Codebase: Added src/lib/form-styles.ts — shared form input, textarea, and label styles for custom forms.
  • Codebase: Added src/hooks/useScrollLock.ts — body scroll lock for overlays (Contact panel, mobile menu).
  • Codebase: Added src/proxy.ts — Next.js proxy placeholder for auth guards, locale redirects, or A/B logic.
  • Codebase: Added src/context/ContactContext.tsx — global state for Contact panel open/close.
  • Documentation: Updated project structure to include docs, showcase, services, context, hooks, lib, and proxy.
  • Documentation: Corrected Next.js version (15.x) in intro.
  • Documentation: Added Developer Utilities section for form-styles and useScrollLock.
  • Documentation: Added missing components to Components section (Compact Hero, CareerStatsCard, SectionDivider, Apply Form).
  • Showcase: Added Developer Utilities section (form-styles, useScrollLock). Synced showcase and docs for consistency.
v1.3.2Update

March 2026

  • New Component: Added HeroMono, a high-impact monochrome hero section.
  • New Component: Added StatBlock, a reusable key-metric display component.
  • Refactoring: Simplified HeroMono internally to use StatBlock and handle its own content.
  • Updates: Refined /docs and /showcase to include the new components.
  • Migrated from deprecated middleware to Next.js proxy convention.
  • Added focus management and Escape key support for Contact panel.
  • Added CUSTOMIZATION.md for non-technical buyers.
  • Added loading states for case-studies and insights routes.
  • Improved accessibility (aria-labels, WCAG contrast).
  • Added .env.example and pre-deploy checklist.
v1.3.1Update

March 2026

  • Bug Fixes: Resolved dark mode text visibility issues on buttons, inputs, and cards.
  • Build Fixes: Fixed Cloudflare `Invalid URL` deployment error.
  • Demo Links: Added transparent links to the new Home v2 (Image Hero) in the footer.
v1.3.0Update

March 2026

  • New Home v2 Route: Added /home-2 featuring the new image-driven hero.
  • Component Showcase: Added /showcase for live element previews.
  • App Router Docs: Migrated documentation to Next.js App Router (/docs).
  • New Hero Component: Introduced HeroImageBg with Tailwind blend modes and Next.js Image priority.
  • Accessibility & Hydration Overhaul: Sweeping ARIA label implementation, global 'focus-visible' keyboard states, and fixed React hydration mismatches.
  • Component Polish: Added robust ui/Accordion and ui/CareerStatsCard components. Data centralized to src/data/.
v1.2.0Update

March 2026

  • New Docs & Showcase: Fully integrated Next.js documentation and component playground.
  • Unified Article & Card Components: Introduced ArticleBody and QuoteCard components.
  • Newsletter Section Redesign: Upgraded NewsletterSignup with a modern two-column layout.
  • Accessibility (a11y) Improvements: Implemented a "Skip to main content" link and comprehensive ARIA roles.
  • Performance Optimizations: Applied loading="lazy" to non-critical images.
  • Content Management Enhancements: Migrated hardcoded content to src/data/content.ts.
  • New Testimonials Component: Added an automatic looping carousel for client testimonials.
  • Standardized Section Spacing: Refined vertical padding across major components.
v1.1.2Update

March 2026

  • UI polish to all error pages (404, 500, global root error) for improved UI clarity.
v1.1.1Update

March 2026

  • Minor UI polish and alignment improvements.
v1.1.0Initial Release

March 2026

  • Initial release of the MOJO.AI - Business Consultancy Website.
  • Complete Next.js 16.1.6 implementation with App Router.
  • Responsive UI with Tailwind CSS 4.
  • Integrated legal pages: Privacy Policy, Terms & Conditions, Cookie Policy, Acceptable Use.
  • Interactive components: FAQ, Case Studies, Insights, Services and Careers.
  • Centralized data management via src/data/.

Support

For inquiries or customization support, please reach out.

© 2026 MOJO.AI - Business Consultancy Website. All rights reserved.