Skip to main content

​
Website Architecture

The Yemira Services Nettoyages website is built with modern web technologies, leveraging Next.js 15 with the App Router for optimal performance and developer experience.

​
Technology Stack

​
Core Framework

Next.js 15.3.5

Modern React framework with App Router for server-side rendering and optimal performance

React 19

Latest React version with improved performance and new features

TypeScript 5

Type-safe development with full TypeScript support

Tailwind CSS v4

Utility-first CSS framework for rapid UI development

​
Key Dependencies

Based on the project’s package.json, here are the essential dependencies:

​
UI & Styling

​
tailwindcss
^4
Utility-first CSS framework (version 4.x)
​
@tailwindcss/postcss
^4
PostCSS plugin for Tailwind CSS v4
​
tw-animate-css
^1.3.5
Animation utilities for Tailwind CSS
​
lucide-react
^0.525.0
Icon library with React components

​
Component Libraries

​
@radix-ui/react-slot
^1.2.3
Primitive for composition and slot-based component patterns
​
class-variance-authority
^0.7.1
CVA for building type-safe component APIs with variants
​
clsx
^2.1.1
Utility for constructing className strings conditionally
​
tailwind-merge
^3.3.1
Merge Tailwind CSS classes without style conflicts

​
Feature-Specific Libraries

​
embla-carousel
^8.6.0
Lightweight carousel library with touch support
​
embla-carousel-react
^8.6.0
React wrapper for Embla Carousel
​
react-masonry-css
^1.0.16
Responsive masonry layout component

​
Project Structure

The project follows Next.js 15 App Router conventions: 
source/
├── app/                    # App Router pages and layouts
│   ├── layout.tsx         # Root layout with NavBar, Footer, Whatsapp
│   ├── page.tsx           # Home page
│   └── globals.css        # Global styles and Tailwind config
├── assets/                # Static assets
│   ├── images/           # Image files
│   └── fonts/            # Custom fonts (Circular Std)
├── components/           # React components
│   ├── custom/          # Custom business components
│   └── ui/              # Reusable UI components
├── lib/                  # Utility functions
│   └── utils.ts         # Helper functions (cn, constructMetadata)
├── public/              # Public static files
├── next.config.ts       # Next.js configuration
├── tsconfig.json        # TypeScript configuration
├── postcss.config.mjs   # PostCSS configuration
└── package.json         # Project dependencies

​
App Router Architecture

​
Root Layout

The root layout (app/layout.tsx) provides the base structure for all pages: 
import type { Metadata } from 'next';
import './globals.css';
import NavBar from '@/components/custom/NavBar';
import Whatsapp from '@/components/custom/Whatsapp';
import Footer from '@/components/custom/Footer';
import { constructMetada } from '@/lib/utils';

export const metadata = constructMetada;

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`antialiased font-body relative`}>
        <NavBar />
        <main className="flex flex-col min-h-screen w-full ">
          <div className="flex flex-col">{children}</div>
        </main>
        <Footer />
        <Whatsapp />
      </body>
    </html>
  );
}

​
Layout Components

The layout includes:
  1. NavBar - Fixed navigation with company logo and CTA button
  2. Main Content - Dynamic page content
  3. Footer - Site links and contact information
  4. Whatsapp - Fixed WhatsApp button for customer support

​
Styling Architecture

​
Tailwind CSS v4 Configuration

The project uses Tailwind CSS v4 with custom theme configuration: 
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-heading: 'Circular Std Bold', 'sans-serif';
  --font-body: 'Circular Std Book', 'sans-serif';
  --font-button: 'Circular Std Medium', 'sans-serif';
  
  --color-primary: oklch(0.504 0.209 259.6);
  --color-primary-foreground: oklch(0.984 0.003 247.858);
  --color-background: oklch(1 0 0);
  --color-foreground: oklch(0.129 0.042 264.695);
  /* ... more theme variables */
}

​
Custom Fonts

The site uses the Circular Std font family:
  • Circular Std Book - Body text
  • Circular Std Medium - Buttons and medium weight text
  • Circular Std Bold - Headings
<h1 className="font-heading">Heading Text</h1>
<p className="font-body">Body Text</p>
<button className="font-button">Button Text</button>

​
Development Workflow

​
Available Scripts

npm run dev
# Starts Next.js development server with Turbopack
The development server uses Turbopack (--turbopack flag) for faster builds and hot module replacement.

​
Performance Optimizations

Image Optimization

Next.js Image component with automatic optimization and lazy loading

Server Components

React Server Components by default for reduced client-side JavaScript

Code Splitting

Automatic code splitting with dynamic imports

Static Generation

Static page generation where possible for faster page loads

​
TypeScript Configuration

The project uses strict TypeScript with Next.js-specific configurations:
tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    },
    "strict": true,
    "jsx": "preserve"
  }
}
Path aliases (@/) are configured for cleaner imports throughout the codebase.

​
Next Steps

Components

Explore component documentation and implementation details

Deployment

Learn about deployment and production configurations

Build docs developers (and LLMs) love

Get started for freeTalk to us