Skip to main content
MOJO:AI
DOCS
ShowcaseBack

MOJO.AI - Business Consultancy Template

Welcome to the official documentation for the MOJO.AI - Business Consultancy Template. 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 16.1.6, 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 playground 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 and job pages
case-studies/— Interactive project showcases
insights/— Blog, articles, and whitepapers
legal/— Privacy, Terms, and Policies
layout.tsx— Main layout & Metadata
globals.css— Global styles
components/— Reusable UI components
ui/— Atomic elements (Buttons, Inputs)
data/— Centralised content management
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 20+ high-quality components designed for consistency. Visit the Showcase for live previews.

Layout

HeaderFooterContactPanelNewsletter

Sections

HeroHeroImageBgFeaturesProcessStats

Content

InsightsGridFeaturedInsightTabsFAQ

UI

ButtonInputSectionHeaderQuoteCard

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.1Latest

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 Template.
  • 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 Template. All rights reserved.