FutureMove Site - Project Documentation

Overview

The FutureMove site is a high-performance, SEO-optimized boutique strategic consulting website built with Next.js 13, Tailwind CSS, and Sanity CMS. It is designed to position FutureMove as a leader in strategic repositioning, growth, and AI implementation for SMEs and startups.

Architecture

Technology Stack

• Framework: Next.js 13 (App Router)
• Styling: Tailwind CSS 4
• CMS: Sanity.io (for blog and dynamic content)
• Icons: Lucide React
• Language: TypeScript

Project Structure

/
├── app/                # Next.js App Router (Pages & Layouts)
│   ├── blog/           # Blog system with dynamic routes
│   ├── company-brain/  # Specialized landing page for Company Brain
│   ├── servicos/       # Service detail pages
│   └── page.tsx        # Main Home Page
├── components/         # Reusable UI Components
│   └── sections/       # Page-specific section components
│       └── company-brain/
├── data/               # Static content JSON files
│   ├── site.json       # Home page content
│   └── company-brain.json # Company Brain page content
├── lib/                # Utility functions and clients
│   ├── sanity-client.ts # Sanity CMS configuration
│   └── seo.ts           # SEO and JSON-LD generators
└── sanity/             # Sanity schema definitions

Key Design Patterns

Content-Driven UI

Pages are decoupled from their content. Text and configuration are stored in /data/*.json files, allowing for rapid content iteration without modifying component logic.

AEO & SEO Optimization

The site implements Answer Engine Optimization (AEO) and SEO best practices:

• JSON-LD: Dynamic generation of Organization, Service, and FAQ schemas via lib/seo.ts.
• Semantic HTML: Strict use of header levels and section tags.
• Fast Loading: Optimized images and minimal runtime overhead.

Componentization

Large pages are broken down into smaller, reusable section components in /components/sections, improving maintainability and readability.

Development Workflow

Running the Project

• npm run dev: Starts the development server.
• npm run build: Builds the project for production.
• npm run lint: Runs ESLint for code quality.
• npm run sanity-dev: Starts the Sanity Studio for content management.

Adding New Content

1. For home page: Update data/site.json.
2. For company brain: Update data/company-brain.json.
3. For blog/pages: Use the Sanity Studio.

Brand Guidelines (Implemented via Tailwind)

• Colors:
  • fm-purple: Primary brand color.
  • fm-dark: Deep background/text color.
  • fm-light: Light neutral background.
• Typography:
  • font-display: Used for headings to convey authority and precision.
  • font-sans: Used for body text for clarity and readability.