fix blog and animation connexion

2026-06-11 19:18:56 +02:00 · 2026-06-11 19:18:56 +02:00 · 1906161d37
commit 1906161d37
parent 37c685d73f
19 changed files with 1084 additions and 291 deletions
--- a/apps/backend/src/application/controllers/admin.controller.ts
+++ b/apps/backend/src/application/controllers/admin.controller.ts
@ -1068,6 +1068,10 @@ export class AdminController {
      status: post.status,
      isFeatured: post.isFeatured,
      publishedAt: post.publishedAt,
+      metaTitle: post.metaTitle,
+      metaDescription: post.metaDescription,
+      primaryKeyword: post.primaryKeyword,
+      secondaryKeywords: post.secondaryKeywords,
      createdAt: post.createdAt,
      updatedAt: post.updatedAt,
    };
--- a/apps/backend/src/application/controllers/blog.controller.ts
+++ b/apps/backend/src/application/controllers/blog.controller.ts
@ -124,6 +124,10 @@ export class BlogController {
      status: post.status,
      isFeatured: post.isFeatured,
      publishedAt: post.publishedAt,
+      metaTitle: post.metaTitle,
+      metaDescription: post.metaDescription,
+      primaryKeyword: post.primaryKeyword,
+      secondaryKeywords: post.secondaryKeywords,
      createdAt: post.createdAt,
      updatedAt: post.updatedAt,
    };
--- a/apps/backend/src/application/dto/blog-post.dto.ts
+++ b/apps/backend/src/application/dto/blog-post.dto.ts
@ -6,6 +6,7 @@ import {
  IsArray,
  IsBoolean,
  IsEnum,
+  IsDateString,
  MaxLength,
  MinLength,
  Matches,
@ -62,6 +63,35 @@ export class CreateBlogPostDto {
  @IsNotEmpty()
  @MaxLength(255)
  authorName: string;
+
+  @ApiPropertyOptional({ description: 'ISO date string for scheduled publication' })
+  @IsOptional()
+  @IsDateString()
+  scheduledAt?: string;
+
+  @ApiPropertyOptional({ description: 'SEO meta title (50-60 chars recommended)' })
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  metaTitle?: string;
+
+  @ApiPropertyOptional({ description: 'SEO meta description (150-160 chars recommended)' })
+  @IsOptional()
+  @IsString()
+  @MaxLength(500)
+  metaDescription?: string;
+
+  @ApiPropertyOptional({ description: 'Primary SEO keyword' })
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  primaryKeyword?: string;
+
+  @ApiPropertyOptional({ type: [String], description: 'Secondary SEO keywords' })
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  secondaryKeywords?: string[];
 }

 export class UpdateBlogPostDto {
@ -123,6 +153,35 @@ export class UpdateBlogPostDto {
  @IsOptional()
  @IsBoolean()
  isFeatured?: boolean;
+
+  @ApiPropertyOptional({ description: 'ISO date string for scheduled publication' })
+  @IsOptional()
+  @IsDateString()
+  scheduledAt?: string;
+
+  @ApiPropertyOptional()
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  metaTitle?: string;
+
+  @ApiPropertyOptional()
+  @IsOptional()
+  @IsString()
+  @MaxLength(500)
+  metaDescription?: string;
+
+  @ApiPropertyOptional()
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  primaryKeyword?: string;
+
+  @ApiPropertyOptional({ type: [String] })
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  secondaryKeywords?: string[];
 }

 export class BlogPostResponseDto {
@ -138,6 +197,10 @@ export class BlogPostResponseDto {
  @ApiProperty({ enum: BlogPostStatus }) status: BlogPostStatus;
  @ApiProperty() isFeatured: boolean;
  @ApiPropertyOptional() publishedAt?: Date;
+  @ApiPropertyOptional() metaTitle?: string;
+  @ApiPropertyOptional() metaDescription?: string;
+  @ApiPropertyOptional() primaryKeyword?: string;
+  @ApiProperty({ type: [String] }) secondaryKeywords: string[];
  @ApiProperty() createdAt: Date;
  @ApiProperty() updatedAt: Date;
 }
--- a/apps/backend/src/application/services/blog.service.ts
+++ b/apps/backend/src/application/services/blog.service.ts
@ -44,7 +44,7 @@ export class BlogService implements OnApplicationBootstrap {
      throw new ConflictException(`Slug "${dto.slug}" is already in use`);
    }

-    const post = BlogPost.create({
+    let post = BlogPost.create({
      id: uuidv4(),
      title: dto.title,
      slug: dto.slug,
@ -54,8 +54,17 @@ export class BlogService implements OnApplicationBootstrap {
      category: dto.category,
      tags: dto.tags ?? [],
      authorName: dto.authorName,
+      metaTitle: dto.metaTitle,
+      metaDescription: dto.metaDescription,
+      primaryKeyword: dto.primaryKeyword,
+      secondaryKeywords: dto.secondaryKeywords ?? [],
    });

+    if (dto.scheduledAt) {
+      const schedDate = new Date(dto.scheduledAt);
+      post = schedDate > new Date() ? post.schedule(schedDate) : post.publish();
+    }
+
    return this.blogPostRepository.save(post);
  }

@ -79,12 +88,21 @@ export class BlogService implements OnApplicationBootstrap {
      tags: dto.tags,
      authorName: dto.authorName,
      isFeatured: dto.isFeatured,
+      metaTitle: dto.metaTitle,
+      metaDescription: dto.metaDescription,
+      primaryKeyword: dto.primaryKeyword,
+      secondaryKeywords: dto.secondaryKeywords,
    });

-    if (dto.status !== undefined && dto.status !== post.status) {
+    if (dto.scheduledAt) {
+      const schedDate = new Date(dto.scheduledAt);
+      updated = schedDate > new Date() ? updated.schedule(schedDate) : updated.publish();
+    } else if (dto.status !== undefined && dto.status !== post.status) {
      if (dto.status === BlogPostStatus.PUBLISHED) updated = updated.publish();
      else if (dto.status === BlogPostStatus.ARCHIVED) updated = updated.archive();
      else if (dto.status === BlogPostStatus.DRAFT) updated = updated.unpublish();
+      else if (dto.status === BlogPostStatus.SCHEDULED && post.publishedAt)
+        updated = updated.schedule(post.publishedAt);
    }

    return this.blogPostRepository.save(updated);
@ -101,7 +119,7 @@ export class BlogService implements OnApplicationBootstrap {

  async getPublishedPostBySlug(slug: string): Promise<BlogPost> {
    const post = await this.blogPostRepository.findBySlug(slug);
-    if (!post || !post.isPublished()) {
+    if (!post || !post.isVisibleToPublic()) {
      throw new NotFoundException('Article not found');
    }
    return post;
@ -113,6 +131,7 @@ export class BlogService implements OnApplicationBootstrap {
    const publishedFilters: BlogPostFilters = {
      ...filters,
      status: BlogPostStatus.PUBLISHED,
+      includeScheduled: true,
    };
    const [posts, total] = await Promise.all([
      this.blogPostRepository.findByFilters(publishedFilters),
--- a/apps/backend/src/domain/entities/blog-post.entity.ts
+++ b/apps/backend/src/domain/entities/blog-post.entity.ts
@ -1,5 +1,6 @@
 export enum BlogPostStatus {
  DRAFT = 'draft',
+  SCHEDULED = 'scheduled',
  PUBLISHED = 'published',
  ARCHIVED = 'archived',
 }
@ -19,6 +20,10 @@ interface BlogPostProps {
  status: BlogPostStatus;
  isFeatured: boolean;
  publishedAt?: Date;
+  metaTitle?: string;
+  metaDescription?: string;
+  primaryKeyword?: string;
+  secondaryKeywords: string[];
  createdAt: Date;
  updatedAt: Date;
 }
@ -32,6 +37,7 @@ export class BlogPost {
    const now = new Date();
    return new BlogPost({
      ...props,
+      secondaryKeywords: props.secondaryKeywords ?? [],
      status: BlogPostStatus.DRAFT,
      isFeatured: false,
      createdAt: now,
@ -79,6 +85,18 @@ export class BlogPost {
  get publishedAt(): Date | undefined {
    return this.props.publishedAt;
  }
+  get metaTitle(): string | undefined {
+    return this.props.metaTitle;
+  }
+  get metaDescription(): string | undefined {
+    return this.props.metaDescription;
+  }
+  get primaryKeyword(): string | undefined {
+    return this.props.primaryKeyword;
+  }
+  get secondaryKeywords(): string[] {
+    return this.props.secondaryKeywords;
+  }
  get createdAt(): Date {
    return this.props.createdAt;
  }
@ -99,6 +117,10 @@ export class BlogPost {
        | 'tags'
        | 'authorName'
        | 'isFeatured'
+        | 'metaTitle'
+        | 'metaDescription'
+        | 'primaryKeyword'
+        | 'secondaryKeywords'
      >
    >
  ): BlogPost {
@ -114,18 +136,43 @@ export class BlogPost {
    });
  }

+  schedule(date: Date): BlogPost {
+    return new BlogPost({
+      ...this.props,
+      status: BlogPostStatus.SCHEDULED,
+      publishedAt: date,
+      updatedAt: new Date(),
+    });
+  }
+
  archive(): BlogPost {
    return new BlogPost({ ...this.props, status: BlogPostStatus.ARCHIVED, updatedAt: new Date() });
  }

  unpublish(): BlogPost {
-    return new BlogPost({ ...this.props, status: BlogPostStatus.DRAFT, updatedAt: new Date() });
+    return new BlogPost({
+      ...this.props,
+      status: BlogPostStatus.DRAFT,
+      publishedAt: undefined,
+      updatedAt: new Date(),
+    });
  }

  isPublished(): boolean {
    return this.props.status === BlogPostStatus.PUBLISHED;
  }

+  isVisibleToPublic(): boolean {
+    if (this.props.status === BlogPostStatus.PUBLISHED) return true;
+    if (
+      this.props.status === BlogPostStatus.SCHEDULED &&
+      this.props.publishedAt &&
+      this.props.publishedAt <= new Date()
+    )
+      return true;
+    return false;
+  }
+
  toObject(): BlogPostProps {
    return { ...this.props };
  }
--- a/apps/backend/src/domain/ports/out/blog-post.repository.ts
+++ b/apps/backend/src/domain/ports/out/blog-post.repository.ts
@ -9,6 +9,8 @@ export interface BlogPostFilters {
  isFeatured?: boolean;
  limit?: number;
  offset?: number;
+  /** When true, also include SCHEDULED posts whose publishedAt <= now */
+  includeScheduled?: boolean;
 }

 export interface BlogPostRepository {
--- a/apps/backend/src/infrastructure/persistence/typeorm/entities/blog-post.orm-entity.ts
+++ b/apps/backend/src/infrastructure/persistence/typeorm/entities/blog-post.orm-entity.ts
@ -40,6 +40,18 @@ export class BlogPostOrmEntity {
  @Column('timestamp', { nullable: true })
  published_at?: Date;

+  @Column('varchar', { length: 255, nullable: true })
+  meta_title?: string;
+
+  @Column('varchar', { length: 500, nullable: true })
+  meta_description?: string;
+
+  @Column('varchar', { length: 255, nullable: true })
+  primary_keyword?: string;
+
+  @Column('jsonb', { default: [] })
+  secondary_keywords: string[];
+
  @CreateDateColumn()
  created_at: Date;

--- a/apps/backend/src/infrastructure/persistence/typeorm/migrations/1747000000000-AddSeoFieldsToBlogPosts.ts
+++ b/apps/backend/src/infrastructure/persistence/typeorm/migrations/1747000000000-AddSeoFieldsToBlogPosts.ts
@ -0,0 +1,41 @@
+import { MigrationInterface, QueryRunner, TableColumn } from 'typeorm';
+
+export class AddSeoFieldsToBlogPosts1747000000000 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.addColumns('blog_posts', [
+      new TableColumn({
+        name: 'meta_title',
+        type: 'varchar',
+        length: '255',
+        isNullable: true,
+      }),
+      new TableColumn({
+        name: 'meta_description',
+        type: 'varchar',
+        length: '500',
+        isNullable: true,
+      }),
+      new TableColumn({
+        name: 'primary_keyword',
+        type: 'varchar',
+        length: '255',
+        isNullable: true,
+      }),
+      new TableColumn({
+        name: 'secondary_keywords',
+        type: 'jsonb',
+        isNullable: false,
+        default: "'[]'",
+      }),
+    ]);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.dropColumns('blog_posts', [
+      'meta_title',
+      'meta_description',
+      'primary_keyword',
+      'secondary_keywords',
+    ]);
+  }
+}
--- a/apps/backend/src/infrastructure/persistence/typeorm/repositories/typeorm-blog-post.repository.ts
+++ b/apps/backend/src/infrastructure/persistence/typeorm/repositories/typeorm-blog-post.repository.ts
@ -31,7 +31,11 @@ export class TypeOrmBlogPostRepository implements BlogPostRepository {
  async findByFilters(filters: BlogPostFilters): Promise<BlogPost[]> {
    const query = this.ormRepository.createQueryBuilder('post');

-    if (filters.status) {
+    if (filters.includeScheduled && filters.status === BlogPostStatus.PUBLISHED) {
+      query.andWhere(
+        "(post.status = 'published' OR (post.status = 'scheduled' AND post.published_at <= CURRENT_TIMESTAMP))"
+      );
+    } else if (filters.status) {
      query.andWhere('post.status = :status', { status: filters.status });
    }

@ -61,7 +65,11 @@ export class TypeOrmBlogPostRepository implements BlogPostRepository {
  async count(filters: BlogPostFilters): Promise<number> {
    const query = this.ormRepository.createQueryBuilder('post');

-    if (filters.status) {
+    if (filters.includeScheduled && filters.status === BlogPostStatus.PUBLISHED) {
+      query.andWhere(
+        "(post.status = 'published' OR (post.status = 'scheduled' AND post.published_at <= CURRENT_TIMESTAMP))"
+      );
+    } else if (filters.status) {
      query.andWhere('post.status = :status', { status: filters.status });
    }
    if (filters.category) {
@ -105,6 +113,10 @@ export class TypeOrmBlogPostRepository implements BlogPostRepository {
      status: orm.status as BlogPostStatus,
      isFeatured: orm.is_featured,
      publishedAt: orm.published_at,
+      metaTitle: orm.meta_title,
+      metaDescription: orm.meta_description,
+      primaryKeyword: orm.primary_keyword,
+      secondaryKeywords: orm.secondary_keywords ?? [],
      createdAt: orm.created_at,
      updatedAt: orm.updated_at,
    });
@ -124,6 +136,10 @@ export class TypeOrmBlogPostRepository implements BlogPostRepository {
    orm.status = post.status;
    orm.is_featured = post.isFeatured;
    orm.published_at = post.publishedAt;
+    orm.meta_title = post.metaTitle;
+    orm.meta_description = post.metaDescription;
+    orm.primary_keyword = post.primaryKeyword;
+    orm.secondary_keywords = post.secondaryKeywords;
    orm.created_at = post.createdAt;
    orm.updated_at = post.updatedAt;
    return orm;
--- a/apps/frontend/app/[locale]/blog/[slug]/BlogPostContent.tsx
+++ b/apps/frontend/app/[locale]/blog/[slug]/BlogPostContent.tsx
@ -0,0 +1,301 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { ArrowLeft, Calendar, User, Tag, Clock, Share2, BookOpen, Anchor } from 'lucide-react';
+import { Link } from '@/i18n/navigation';
+import { LandingHeader, LandingFooter } from '@/components/layout';
+import { getBlogPost, type BlogPost } from '@/lib/api/blog';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';
+
+function resolveUrl(url: string | null | undefined): string | undefined {
+  if (!url) return undefined;
+  if (url.startsWith('http')) return url;
+  return `${API_BASE_URL}${url}`;
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('fr-FR', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+function estimateReadingTime(content: string): number {
+  const text = content.replace(/<[^>]*>/g, '');
+  const words = text.trim().split(/\s+/).length;
+  return Math.max(1, Math.ceil(words / 200));
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  industry: 'Industrie',
+  technology: 'Technologie',
+  guides: 'Guides',
+  news: 'Actualités',
+};
+
+function LoadingSkeleton() {
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader />
+      <div className="max-w-4xl mx-auto px-6 pt-32 pb-20">
+        <div className="animate-pulse space-y-6">
+          <div className="h-4 bg-gray-200 rounded w-24" />
+          <div className="h-10 bg-gray-200 rounded w-3/4" />
+          <div className="h-5 bg-gray-200 rounded w-1/2" />
+          <div className="h-72 bg-gray-200 rounded-2xl mt-8" />
+          <div className="space-y-3 mt-8">
+            {[...Array(6)].map((_, i) => (
+              <div key={i} className="h-4 bg-gray-200 rounded" style={{ width: `${85 + (i % 3) * 5}%` }} />
+            ))}
+          </div>
+        </div>
+      </div>
+      <LandingFooter />
+    </div>
+  );
+}
+
+function NotFoundView() {
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader />
+      <div className="max-w-4xl mx-auto px-6 pt-32 pb-20 text-center">
+        <Anchor className="w-24 h-24 text-gray-200 mx-auto mb-6" />
+        <h1 className="text-3xl font-bold text-brand-navy mb-4">Article introuvable</h1>
+        <p className="text-gray-600 mb-8">
+          Cet article n&apos;existe pas ou n&apos;est pas encore publié.
+        </p>
+        <Link href="/blog">
+          <span className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-semibold">
+            <ArrowLeft className="w-4 h-4" />
+            <span>Retour au blog</span>
+          </span>
+        </Link>
+      </div>
+      <LandingFooter />
+    </div>
+  );
+}
+
+export default function BlogPostContent({ slug }: { slug: string }) {
+  const [post, setPost] = useState<BlogPost | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [notFound, setNotFound] = useState(false);
+
+  useEffect(() => {
+    if (!slug) return;
+    let cancelled = false;
+
+    getBlogPost(slug)
+      .then(p => {
+        if (!cancelled) setPost(p);
+      })
+      .catch(() => {
+        if (!cancelled) setNotFound(true);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => { cancelled = true; };
+  }, [slug]);
+
+  if (loading) return <LoadingSkeleton />;
+  if (notFound || !post) return <NotFoundView />;
+
+  const readingTime = estimateReadingTime(post.content);
+  const processedContent = post.content.replace(
+    /src="(\/api\/v1\/blog\/images\/[^"]+)"/g,
+    `src="${API_BASE_URL}$1"`
+  );
+
+  const handleShare = () => {
+    if (navigator.share) {
+      navigator.share({ title: post.title, url: window.location.href });
+    } else {
+      navigator.clipboard.writeText(window.location.href);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader />
+
+      {/* Hero */}
+      <section className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy via-brand-navy to-[#1a2a5e]">
+        <div className="absolute inset-0 overflow-hidden">
+          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise/10 rounded-full blur-3xl" />
+          <div className="absolute bottom-10 right-20 w-64 h-64 bg-blue-400/10 rounded-full blur-3xl" />
+        </div>
+
+        <div className="relative z-10 max-w-4xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+          >
+            <Link href="/blog">
+              <span className="inline-flex items-center space-x-2 text-white/60 hover:text-white transition-colors mb-8 text-sm group">
+                <ArrowLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
+                <span>Retour au blog</span>
+              </span>
+            </Link>
+
+            <div className="flex items-center flex-wrap gap-3 mb-6">
+              <span className="px-3 py-1 bg-brand-turquoise text-white text-sm font-medium rounded-full">
+                {CATEGORY_LABELS[post.category] ?? post.category}
+              </span>
+              {post.isFeatured && (
+                <span className="px-3 py-1 bg-white/15 text-white text-sm font-medium rounded-full border border-white/20">
+                  À la une
+                </span>
+              )}
+            </div>
+
+            <h1 className="text-3xl lg:text-5xl font-bold text-white mb-6 leading-tight tracking-tight">
+              {post.title}
+            </h1>
+
+            <p className="text-lg text-white/75 mb-10 leading-relaxed max-w-2xl">{post.excerpt}</p>
+
+            <div className="flex flex-wrap items-center gap-x-6 gap-y-3 text-white/55 text-sm">
+              <div className="flex items-center space-x-2">
+                <User className="w-4 h-4" />
+                <span>{post.authorName}</span>
+              </div>
+              {post.publishedAt && (
+                <div className="flex items-center space-x-2">
+                  <Calendar className="w-4 h-4" />
+                  <span>{formatDate(post.publishedAt)}</span>
+                </div>
+              )}
+              <div className="flex items-center space-x-2">
+                <Clock className="w-4 h-4" />
+                <span>{readingTime} min de lecture</span>
+              </div>
+              {post.tags.length > 0 && (
+                <div className="flex items-center space-x-2">
+                  <Tag className="w-4 h-4" />
+                  <span>{post.tags.join(', ')}</span>
+                </div>
+              )}
+            </div>
+          </motion.div>
+        </div>
+
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg className="w-full h-16" viewBox="0 0 1440 64" preserveAspectRatio="none">
+            <path d="M0,32 C360,64 720,0 1080,32 C1260,48 1380,24 1440,32 L1440,64 L0,64 Z" fill="white" />
+          </svg>
+        </div>
+      </section>
+
+      {/* Cover Image */}
+      {post.coverImageUrl && (
+        <div className="max-w-4xl mx-auto px-6 lg:px-8 -mt-6 relative z-10 mb-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
+            <img
+              src={resolveUrl(post.coverImageUrl)}
+              alt={post.title}
+              className="w-full h-72 lg:h-[420px] object-cover rounded-2xl shadow-2xl"
+            />
+          </motion.div>
+        </div>
+      )}
+
+      {/* Content + Sidebar */}
+      <section className="py-12">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8">
+          <div className="lg:grid lg:grid-cols-[1fr_80px] lg:gap-8 items-start">
+            {/* Article body */}
+            <motion.article
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.3 }}
+              className="prose prose-lg prose-slate max-w-none
+                prose-headings:font-bold prose-headings:text-brand-navy prose-headings:tracking-tight
+                prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-4 prose-h2:border-l-4 prose-h2:border-brand-turquoise prose-h2:pl-4
+                prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-3
+                prose-p:text-gray-700 prose-p:leading-relaxed prose-p:mb-5
+                prose-a:text-brand-turquoise prose-a:font-medium hover:prose-a:underline
+                prose-strong:text-brand-navy
+                prose-blockquote:not-italic
+                prose-ul:text-gray-700 prose-ol:text-gray-700
+                prose-img:rounded-xl prose-img:shadow-lg"
+              dangerouslySetInnerHTML={{ __html: processedContent }}
+            />
+
+            {/* Floating share button (desktop) */}
+            <div className="hidden lg:block sticky top-24">
+              <button
+                onClick={handleShare}
+                className="w-10 h-10 flex items-center justify-center bg-white border border-gray-200 rounded-full shadow-sm text-gray-400 hover:text-brand-turquoise hover:border-brand-turquoise transition-colors"
+                title="Partager l'article"
+              >
+                <Share2 className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+
+          {/* Tags */}
+          {post.tags.length > 0 && (
+            <div className="flex flex-wrap gap-2 mt-12 pt-8 border-t border-gray-100">
+              {post.tags.map(tag => (
+                <span
+                  key={tag}
+                  className="px-3 py-1.5 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors"
+                >
+                  #{tag}
+                </span>
+              ))}
+            </div>
+          )}
+
+          {/* CTA */}
+          <div className="mt-16 rounded-2xl bg-gradient-to-br from-brand-navy to-[#1a2a5e] p-8 lg:p-10 text-center">
+            <BookOpen className="w-8 h-8 text-brand-turquoise mx-auto mb-4" />
+            <h2 className="text-xl lg:text-2xl font-bold text-white mb-3">
+              Prêt à tester Xpeditis ?
+            </h2>
+            <p className="text-white/70 mb-6 max-w-md mx-auto text-sm leading-relaxed">
+              Créez votre compte en 2 minutes et lancez votre premier chiffrage maritime instantané.
+              C&apos;est gratuit et sans engagement.
+            </p>
+            <a
+              href="/register"
+              className="inline-flex items-center gap-2 px-6 py-3 bg-brand-turquoise text-white rounded-xl font-semibold hover:bg-brand-turquoise/90 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5"
+            >
+              Créer mon compte gratuitement
+            </a>
+          </div>
+
+          {/* Back + Share */}
+          <div className="mt-10 flex items-center justify-between">
+            <Link href="/blog">
+              <span className="inline-flex items-center space-x-2 px-5 py-2.5 bg-brand-navy text-white rounded-xl hover:bg-brand-navy/90 transition-all font-medium text-sm group">
+                <ArrowLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
+                <span>Retour au blog</span>
+              </span>
+            </Link>
+            <button
+              onClick={handleShare}
+              className="lg:hidden inline-flex items-center space-x-2 px-4 py-2.5 border border-gray-200 rounded-xl text-gray-600 hover:border-brand-turquoise hover:text-brand-turquoise transition-colors text-sm"
+            >
+              <Share2 className="w-4 h-4" />
+              <span>Partager</span>
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <LandingFooter />
+    </div>
+  );
+}
--- a/apps/frontend/app/[locale]/blog/[slug]/page.tsx
+++ b/apps/frontend/app/[locale]/blog/[slug]/page.tsx
@ -1,230 +1,81 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useParams } from 'next/navigation';
-import { Link } from '@/i18n/navigation';
-import { motion } from 'framer-motion';
-import { ArrowLeft, Calendar, User, Tag, Anchor } from 'lucide-react';
-import { LandingHeader, LandingFooter } from '@/components/layout';
-import { getBlogPost, type BlogPost } from '@/lib/api/blog';
+import type { Metadata } from 'next';
+import BlogPostContent from './BlogPostContent';

 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';
-function resolveUrl(url: string | null | undefined): string | undefined {
-  if (!url) return undefined;
-  if (url.startsWith('http')) return url;
-  return `${API_BASE_URL}${url}`;
-}

-function formatDate(dateStr: string): string {
-  return new Date(dateStr).toLocaleDateString('fr-FR', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
+async function fetchPostMeta(slug: string) {
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/v1/blog/${slug}`, {
+      cache: 'no-store',
    });
+    if (!res.ok) return null;
+    return res.json() as Promise<{
+      title: string;
+      excerpt: string;
+      metaTitle?: string;
+      metaDescription?: string;
+      primaryKeyword?: string;
+      secondaryKeywords?: string[];
+      coverImageUrl?: string;
+      authorName: string;
+      publishedAt?: string;
+      updatedAt: string;
+    }>;
+  } catch {
+    return null;
+  }
 }

-const CATEGORY_LABELS: Record<string, string> = {
-  industry: 'Industrie',
-  technology: 'Technologie',
-  guides: 'Guides',
-  news: 'Actualités',
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string; locale: string };
+}): Promise<Metadata> {
+  const post = await fetchPostMeta(params.slug);
+
+  if (!post) {
+    return { title: 'Blog — Xpeditis' };
+  }
+
+  const title = post.metaTitle || post.title;
+  const description = post.metaDescription || post.excerpt;
+  const keywords = [post.primaryKeyword, ...(post.secondaryKeywords ?? [])]
+    .filter(Boolean)
+    .join(', ');
+  const coverImage = post.coverImageUrl
+    ? post.coverImageUrl.startsWith('http')
+      ? post.coverImageUrl
+      : `${API_BASE_URL}${post.coverImageUrl}`
+    : undefined;
+
+  return {
+    title,
+    description,
+    keywords: keywords || undefined,
+    openGraph: {
+      title,
+      description,
+      type: 'article',
+      publishedTime: post.publishedAt,
+      authors: [post.authorName],
+      images: coverImage ? [{ url: coverImage, alt: post.title }] : [],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      images: coverImage ? [coverImage] : [],
+    },
+    alternates: {
+      canonical: `/blog/${params.slug}`,
+    },
  };
-
-export default function BlogPostPage() {
-  const params = useParams();
-  const slug = params?.slug as string;
-
-  const [post, setPost] = useState<BlogPost | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [notFound, setNotFound] = useState(false);
-
-  useEffect(() => {
-    if (!slug) return;
-
-    let cancelled = false;
-
-    getBlogPost(slug)
-      .then(p => {
-        if (!cancelled) setPost(p);
-      })
-      .catch(() => {
-        if (!cancelled) setNotFound(true);
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [slug]);
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-white">
-        <LandingHeader />
-        <div className="max-w-4xl mx-auto px-6 pt-32 pb-20">
-          <div className="animate-pulse space-y-4">
-            <div className="h-8 bg-gray-200 rounded w-3/4" />
-            <div className="h-4 bg-gray-200 rounded w-1/2" />
-            <div className="h-64 bg-gray-200 rounded-xl mt-8" />
-          </div>
-        </div>
-        <LandingFooter />
-      </div>
-    );
 }

-  if (notFound || !post) {
-    return (
-      <div className="min-h-screen bg-white">
-        <LandingHeader />
-        <div className="max-w-4xl mx-auto px-6 pt-32 pb-20 text-center">
-          <Anchor className="w-24 h-24 text-gray-200 mx-auto mb-6" />
-          <h1 className="text-3xl font-bold text-brand-navy mb-4">Article introuvable</h1>
-          <p className="text-gray-600 mb-8">
-            Cet article n&apos;existe pas ou n&apos;est pas encore publié.
-          </p>
-          <Link href="/blog">
-            <span className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-semibold">
-              <ArrowLeft className="w-4 h-4" />
-              <span>Retour au blog</span>
-            </span>
-          </Link>
-        </div>
-        <LandingFooter />
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-white">
-      <LandingHeader />
-
-      {/* Hero */}
-      <section className="relative pt-32 pb-16 bg-gradient-to-br from-brand-navy to-brand-navy/95">
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative z-10 max-w-4xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6 }}
-          >
-            <Link href="/blog">
-              <span className="inline-flex items-center space-x-2 text-white/60 hover:text-white transition-colors mb-8 text-sm">
-                <ArrowLeft className="w-4 h-4" />
-                <span>Retour au blog</span>
-              </span>
-            </Link>
-
-            <div className="flex items-center space-x-3 mb-6">
-              <span className="px-3 py-1 bg-brand-turquoise text-white text-sm font-medium rounded-full">
-                {CATEGORY_LABELS[post.category] ?? post.category}
-              </span>
-              {post.isFeatured && (
-                <span className="px-3 py-1 bg-white/20 text-white text-sm font-medium rounded-full">
-                  À la une
-                </span>
-              )}
-            </div>
-
-            <h1 className="text-3xl lg:text-5xl font-bold text-white mb-6 leading-tight">
-              {post.title}
-            </h1>
-
-            <p className="text-lg text-white/80 mb-8">{post.excerpt}</p>
-
-            <div className="flex flex-wrap items-center gap-6 text-white/60 text-sm">
-              <div className="flex items-center space-x-2">
-                <User className="w-4 h-4" />
-                <span>{post.authorName}</span>
-              </div>
-              {post.publishedAt && (
-                <div className="flex items-center space-x-2">
-                  <Calendar className="w-4 h-4" />
-                  <span>{formatDate(post.publishedAt)}</span>
-                </div>
-              )}
-              {post.tags.length > 0 && (
-                <div className="flex items-center space-x-2">
-                  <Tag className="w-4 h-4" />
-                  <span>{post.tags.join(', ')}</span>
-                </div>
-              )}
-            </div>
-          </motion.div>
-        </div>
-
-        <div className="absolute bottom-0 left-0 right-0">
-          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
-            <path
-              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
-              fill="white"
-            />
-          </svg>
-        </div>
-      </section>
-
-      {/* Cover Image */}
-      {post.coverImageUrl && (
-        <div className="max-w-4xl mx-auto px-6 lg:px-8 -mt-8 relative z-10">
-          <motion.img
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.2 }}
-            src={resolveUrl(post.coverImageUrl)}
-            alt={post.title}
-            className="w-full h-64 lg:h-96 object-cover rounded-2xl shadow-2xl"
-          />
-        </div>
-      )}
-
-      {/* Content */}
-      <section className="py-16">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.3 }}
-            className="prose prose-lg prose-brand max-w-none"
-            dangerouslySetInnerHTML={{
-              __html: post.content.replace(
-                /src="(\/api\/v1\/blog\/images\/[^"]+)"/g,
-                `src="${API_BASE_URL}$1"`
-              ),
-            }}
-          />
-
-          {/* Tags */}
-          {post.tags.length > 0 && (
-            <div className="flex flex-wrap gap-2 mt-12 pt-8 border-t border-gray-200">
-              {post.tags.map(tag => (
-                <span
-                  key={tag}
-                  className="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full"
-                >
-                  #{tag}
-                </span>
-              ))}
-            </div>
-          )}
-
-          {/* Back link */}
-          <div className="mt-12">
-            <Link href="/blog">
-              <span className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-all font-semibold">
-                <ArrowLeft className="w-4 h-4" />
-                <span>Retour au blog</span>
-              </span>
-            </Link>
-          </div>
-        </div>
-      </section>
-
-      <LandingFooter />
-    </div>
-  );
+export default function BlogPostPage({
+  params,
+}: {
+  params: { slug: string; locale: string };
+}) {
+  return <BlogPostContent slug={params.slug} />;
 }
--- a/apps/frontend/app/[locale]/dashboard/admin/blog/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/admin/blog/page.tsx
@ -25,6 +25,10 @@ import {
  ImageIcon,
  X,
  Loader2,
+  Search,
+  Clock,
+  ChevronDown,
+  ChevronUp,
 } from 'lucide-react';
 import { Link } from '@/i18n/navigation';

@ -49,17 +53,26 @@ const CATEGORIES: { value: BlogPostCategory; label: string }[] = [

 const STATUS_LABELS: Record<BlogPostStatus, string> = {
  draft: 'Brouillon',
+  scheduled: 'Planifié',
  published: 'Publié',
  archived: 'Archivé',
 };

 const STATUS_COLORS: Record<BlogPostStatus, string> = {
  draft: 'bg-yellow-100 text-yellow-800',
+  scheduled: 'bg-blue-100 text-blue-800',
  published: 'bg-green-100 text-green-800',
  archived: 'bg-gray-100 text-gray-600',
 };

-const EMPTY_FORM: CreateBlogPostRequest = {
+interface FormData extends CreateBlogPostRequest {
+  metaTitle: string;
+  metaDescription: string;
+  primaryKeyword: string;
+  secondaryKeywordsInput: string;
+}
+
+const EMPTY_FORM: FormData = {
  title: '',
  slug: '',
  excerpt: '',
@ -68,6 +81,10 @@ const EMPTY_FORM: CreateBlogPostRequest = {
  category: 'industry',
  tags: [],
  authorName: '',
+  metaTitle: '',
+  metaDescription: '',
+  primaryKeyword: '',
+  secondaryKeywordsInput: '',
 };

 function generateSlug(title: string): string {
@ -80,6 +97,38 @@ function generateSlug(title: string): string {
    .replace(/\s+/g, '-');
 }

+function toLocalDatetimeValue(dateStr?: string): string {
+  if (!dateStr) return '';
+  const d = new Date(dateStr);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+// SEO preview snippet
+function SeoPreview({
+  metaTitle,
+  metaDescription,
+  slug,
+}: {
+  metaTitle: string;
+  metaDescription: string;
+  slug: string;
+}) {
+  const displayTitle = metaTitle || "Titre de l'article";
+  const displayDesc = metaDescription || "Description de l'article...";
+  const displayUrl = `xpeditis.com/blog/${slug || 'votre-slug'}`;
+  return (
+    <div className="border border-gray-200 rounded-lg p-4 bg-gray-50 text-sm">
+      <p className="text-xs text-gray-400 mb-2 font-medium uppercase tracking-wide">
+        Aperçu Google
+      </p>
+      <p className="text-blue-700 text-base font-medium truncate leading-tight">{displayTitle}</p>
+      <p className="text-green-700 text-xs mt-0.5 truncate">{displayUrl}</p>
+      <p className="text-gray-600 text-xs mt-1 line-clamp-2 leading-relaxed">{displayDesc}</p>
+    </div>
+  );
+}
+
 export default function AdminBlogPage() {
  const [posts, setPosts] = useState<BlogPost[]>([]);
  const [loading, setLoading] = useState(true);
@ -92,7 +141,9 @@ export default function AdminBlogPage() {
  const [uploadingCover, setUploadingCover] = useState(false);
  const [tagsInput, setTagsInput] = useState('');
  const [editStatus, setEditStatus] = useState<BlogPostStatus>('draft');
-  const [formData, setFormData] = useState<CreateBlogPostRequest>(EMPTY_FORM);
+  const [formData, setFormData] = useState<FormData>(EMPTY_FORM);
+  const [scheduledAt, setScheduledAt] = useState('');
+  const [seoOpen, setSeoOpen] = useState(false);
  const coverInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
@ -112,19 +163,44 @@ export default function AdminBlogPage() {
    }
  };

-  const handleCreate = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setSaving(true);
-    try {
-      await createBlogPost({
-        ...formData,
-        tags: tagsInput
+  const buildPayload = (withStatus?: BlogPostStatus): CreateBlogPostRequest => {
+    const tags = tagsInput
      ? tagsInput
          .split(',')
          .map(t => t.trim())
          .filter(Boolean)
-          : [],
-      });
+      : [];
+    const secondaryKeywords = formData.secondaryKeywordsInput
+      ? formData.secondaryKeywordsInput
+          .split(',')
+          .map(t => t.trim())
+          .filter(Boolean)
+      : [];
+    return {
+      title: formData.title,
+      slug: formData.slug,
+      excerpt: formData.excerpt,
+      content: formData.content,
+      coverImageUrl: formData.coverImageUrl || undefined,
+      category: formData.category,
+      tags,
+      authorName: formData.authorName,
+      metaTitle: formData.metaTitle || undefined,
+      metaDescription: formData.metaDescription || undefined,
+      primaryKeyword: formData.primaryKeyword || undefined,
+      secondaryKeywords,
+      scheduledAt: scheduledAt || undefined,
+      ...(withStatus ? { status: withStatus } : {}),
+    };
+  };
+
+  const handleCreate = async (e: React.FormEvent, publishNow?: boolean) => {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      const payload = buildPayload(publishNow ? 'published' : undefined);
+      if (publishNow) payload.scheduledAt = undefined;
+      await createBlogPost(payload);
      await fetchPosts();
      closeModal();
    } catch (err: any) {
@ -140,14 +216,7 @@ export default function AdminBlogPage() {
    setSaving(true);
    try {
      const data: UpdateBlogPostRequest = {
-        ...formData,
-        status: editStatus,
-        tags: tagsInput
-          ? tagsInput
-              .split(',')
-              .map(t => t.trim())
-              .filter(Boolean)
-          : [],
+        ...buildPayload(editStatus),
      };
      await updateBlogPost(selectedPost.id, data);
      await fetchPosts();
@ -219,8 +288,10 @@ export default function AdminBlogPage() {
  const openCreate = () => {
    setFormData(EMPTY_FORM);
    setTagsInput('');
+    setScheduledAt('');
    setEditStatus('draft');
    setSelectedPost(null);
+    setSeoOpen(false);
    setShowCreateModal(true);
  };

@ -235,9 +306,15 @@ export default function AdminBlogPage() {
      category: post.category,
      tags: post.tags,
      authorName: post.authorName,
+      metaTitle: post.metaTitle ?? '',
+      metaDescription: post.metaDescription ?? '',
+      primaryKeyword: post.primaryKeyword ?? '',
+      secondaryKeywordsInput: (post.secondaryKeywords ?? []).join(', '),
    });
    setTagsInput(post.tags.join(', '));
+    setScheduledAt(post.status === 'scheduled' ? toLocalDatetimeValue(post.publishedAt) : '');
    setEditStatus(post.status);
+    setSeoOpen(!!(post.metaTitle || post.metaDescription || post.primaryKeyword));
    setShowEditModal(true);
  };

@ -247,6 +324,8 @@ export default function AdminBlogPage() {
    setSelectedPost(null);
    setFormData(EMPTY_FORM);
    setTagsInput('');
+    setScheduledAt('');
+    setSeoOpen(false);
  };

  const handleTitleChange = (title: string) => {
@ -257,10 +336,27 @@ export default function AdminBlogPage() {
        prev.slug === generateSlug(prev.title) || prev.slug === ''
          ? generateSlug(title)
          : prev.slug,
+      metaTitle: prev.metaTitle === prev.title || prev.metaTitle === '' ? title : prev.metaTitle,
    }));
  };

+  const metaTitleLen = formData.metaTitle.length;
+  const metaDescLen = formData.metaDescription.length;
+  const metaTitleColor =
+    metaTitleLen === 0
+      ? 'text-gray-400'
+      : metaTitleLen <= 60
+        ? 'text-green-600'
+        : 'text-red-500';
+  const metaDescColor =
+    metaDescLen === 0
+      ? 'text-gray-400'
+      : metaDescLen <= 160
+        ? 'text-green-600'
+        : 'text-red-500';
+
  const isOpen = showCreateModal || showEditModal;
+  const isScheduleMode = !!scheduledAt;

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@ -347,11 +443,25 @@ export default function AdminBlogPage() {
                      {CATEGORIES.find(c => c.value === post.category)?.label ?? post.category}
                    </td>
                    <td className="px-6 py-4">
+                      <div className="flex flex-col gap-1">
                        <span
-                        className={`px-2 py-1 rounded-full text-xs font-medium ${STATUS_COLORS[post.status]}`}
+                          className={`px-2 py-1 rounded-full text-xs font-medium w-fit ${STATUS_COLORS[post.status]}`}
                        >
                          {STATUS_LABELS[post.status]}
                        </span>
+                        {post.status === 'scheduled' && post.publishedAt && (
+                          <span className="text-xs text-gray-400 flex items-center gap-1">
+                            <Clock className="w-3 h-3" />
+                            {new Date(post.publishedAt).toLocaleString('fr-FR', {
+                              day: '2-digit',
+                              month: '2-digit',
+                              year: '2-digit',
+                              hour: '2-digit',
+                              minute: '2-digit',
+                            })}
+                          </span>
+                        )}
+                      </div>
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600">{post.authorName}</td>
                    <td className="px-6 py-4 text-sm text-gray-500">
@ -361,7 +471,7 @@ export default function AdminBlogPage() {
                    </td>
                    <td className="px-6 py-4">
                      <div className="flex items-center justify-end space-x-1">
-                        {post.status === 'published' && (
+                        {(post.status === 'published' || post.status === 'scheduled') && (
                          <Link href={`/blog/${post.slug}`} target="_blank">
                            <button
                              className="p-1.5 text-gray-400 hover:text-blue-600 transition-colors"
@ -436,6 +546,7 @@ export default function AdminBlogPage() {
                  className="text-sm border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                >
                  <option value="draft">Brouillon</option>
+                  <option value="scheduled">Planifié</option>
                  <option value="published">Publié</option>
                  <option value="archived">Archivé</option>
                </select>
@ -492,29 +603,183 @@ export default function AdminBlogPage() {
                  minHeight={500}
                />
              </div>
+
+              {/* SEO Panel */}
+              <div className="bg-white rounded-xl border border-gray-200 shadow-sm">
+                <button
+                  type="button"
+                  onClick={() => setSeoOpen(o => !o)}
+                  className="w-full flex items-center justify-between px-5 py-4 text-left"
+                >
+                  <div className="flex items-center gap-2">
+                    <Search className="w-4 h-4 text-gray-500" />
+                    <span className="font-semibold text-gray-900 text-sm">
+                      SEO & Référencement
+                    </span>
+                    {(formData.metaTitle || formData.metaDescription || formData.primaryKeyword) && (
+                      <span className="w-2 h-2 rounded-full bg-green-500 inline-block" />
+                    )}
+                  </div>
+                  {seoOpen ? (
+                    <ChevronUp className="w-4 h-4 text-gray-400" />
+                  ) : (
+                    <ChevronDown className="w-4 h-4 text-gray-400" />
+                  )}
+                </button>
+
+                {seoOpen && (
+                  <div className="px-5 pb-5 space-y-4 border-t border-gray-100">
+                    <div className="mt-4">
+                      <SeoPreview
+                        metaTitle={formData.metaTitle}
+                        metaDescription={formData.metaDescription}
+                        slug={formData.slug}
+                      />
+                    </div>
+
+                    <div>
+                      <div className="flex items-center justify-between mb-1">
+                        <label className="block text-sm font-medium text-gray-700">
+                          Meta Titre
+                        </label>
+                        <span className={`text-xs ${metaTitleColor}`}>
+                          {metaTitleLen}/60
+                        </span>
+                      </div>
+                      <input
+                        type="text"
+                        value={formData.metaTitle}
+                        onChange={e =>
+                          setFormData(prev => ({ ...prev, metaTitle: e.target.value }))
+                        }
+                        maxLength={255}
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                        placeholder="Titre affiché dans Google (50-60 car. idéal)"
+                      />
+                    </div>
+
+                    <div>
+                      <div className="flex items-center justify-between mb-1">
+                        <label className="block text-sm font-medium text-gray-700">
+                          Meta Description
+                        </label>
+                        <span className={`text-xs ${metaDescColor}`}>
+                          {metaDescLen}/160
+                        </span>
+                      </div>
+                      <textarea
+                        rows={3}
+                        value={formData.metaDescription}
+                        onChange={e =>
+                          setFormData(prev => ({ ...prev, metaDescription: e.target.value }))
+                        }
+                        maxLength={500}
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
+                        placeholder="Description affichée dans Google (150-160 car. idéal)"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">
+                        Mot-clé principal
+                      </label>
+                      <input
+                        type="text"
+                        value={formData.primaryKeyword}
+                        onChange={e =>
+                          setFormData(prev => ({ ...prev, primaryKeyword: e.target.value }))
+                        }
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                        placeholder="ex: devis maritime instantané"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">
+                        Mots-clés secondaires{' '}
+                        <span className="text-gray-400 font-normal">(virgule)</span>
+                      </label>
+                      <input
+                        type="text"
+                        value={formData.secondaryKeywordsInput}
+                        onChange={e =>
+                          setFormData(prev => ({
+                            ...prev,
+                            secondaryKeywordsInput: e.target.value,
+                          }))
+                        }
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                        placeholder="ex: fret maritime, suivi de marchandise, Click&Ship"
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
            </div>

            {/* Sidebar — 1/3 */}
            <div className="space-y-5">
-              {/* Publish button */}
-              <div className="bg-white rounded-xl border border-gray-200 p-5 shadow-sm">
-                <h3 className="font-semibold text-gray-900 mb-4">Publication</h3>
+              {/* Publication */}
+              <div className="bg-white rounded-xl border border-gray-200 p-5 shadow-sm space-y-4">
+                <h3 className="font-semibold text-gray-900">Publication</h3>
+
+                {/* Scheduled date */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1.5">
+                    <Clock className="w-3.5 h-3.5 text-gray-400" />
+                    Date de publication planifiée
+                  </label>
+                  <input
+                    type="datetime-local"
+                    value={scheduledAt}
+                    onChange={e => setScheduledAt(e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                  />
+                  {scheduledAt && (
+                    <button
+                      type="button"
+                      onClick={() => setScheduledAt('')}
+                      className="text-xs text-gray-400 hover:text-red-500 mt-1 underline"
+                    >
+                      Effacer la date
+                    </button>
+                  )}
+                  <p className="text-xs text-gray-400 mt-1">
+                    {isScheduleMode
+                      ? 'Le post sera publié automatiquement à cette date.'
+                      : 'Laisser vide pour publier manuellement.'}
+                  </p>
+                </div>
+
+                {showCreateModal ? (
+                  <div className="space-y-2">
+                    <button
+                      type="button"
+                      disabled={saving}
+                      onClick={e => handleCreate(e, true)}
+                      className="w-full py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
+                    >
+                      {saving && <Loader2 className="w-4 h-4 animate-spin" />}
+                      Publier maintenant
+                    </button>
                    <button
                      type="submit"
                      disabled={saving}
-                  className="w-full py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2"
+                      className="w-full py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
                    >
                      {saving && <Loader2 className="w-4 h-4 animate-spin" />}
-                  {saving
-                    ? 'Enregistrement...'
-                    : showCreateModal
-                      ? 'Créer le brouillon'
-                      : 'Enregistrer'}
+                      {isScheduleMode ? 'Planifier' : 'Enregistrer brouillon'}
+                    </button>
+                  </div>
+                ) : (
+                  <button
+                    type="submit"
+                    disabled={saving}
+                    className="w-full py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
+                  >
+                    {saving && <Loader2 className="w-4 h-4 animate-spin" />}
+                    {saving ? 'Enregistrement...' : 'Enregistrer'}
                  </button>
-                {showCreateModal && (
-                  <p className="text-xs text-gray-400 text-center mt-2">
-                    Créé en brouillon. Publiez depuis la liste.
-                  </p>
                )}
              </div>

@ -561,7 +826,6 @@ export default function AdminBlogPage() {
                  className="hidden"
                  onChange={handleCoverUpload}
                />
-                {/* Also allow URL */}
                <div className="mt-3">
                  <input
                    type="url"
--- a/apps/frontend/app/[locale]/login/page.tsx
+++ b/apps/frontend/app/[locale]/login/page.tsx
@ -1,12 +1,55 @@
 'use client';

-import { useState, Suspense } from 'react';
+import { useState, useEffect, useRef, Suspense } from 'react';
 import { Link } from '@/i18n/navigation';
 import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useAuth } from '@/lib/context/auth-context';

+function AnimatedCounter({
+  end,
+  suffix = '',
+  prefix = '',
+  decimals = 0,
+  isActive,
+  duration = 2,
+}: {
+  end: number;
+  suffix?: string;
+  prefix?: string;
+  decimals?: number;
+  isActive: boolean;
+  duration?: number;
+}) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!isActive) return;
+    let startTime: number | undefined;
+
+    const animate = (timestamp: number) => {
+      if (!startTime) startTime = timestamp;
+      const progress = Math.min((timestamp - startTime) / (duration * 1000), 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setCount(eased * end);
+      if (progress < 1) requestAnimationFrame(animate);
+      else setCount(end);
+    };
+
+    requestAnimationFrame(animate);
+  }, [end, duration, isActive]);
+
+  const display = decimals > 0 ? count.toFixed(decimals) : Math.floor(count).toString();
+  return (
+    <>
+      {prefix}
+      {display}
+      {suffix}
+    </>
+  );
+}
+
 interface FieldErrors {
  email?: string;
  password?: string;
@ -60,6 +103,22 @@ function LoginPageContent() {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const [statsActive, setStatsActive] = useState(false);
+  const statsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setStatsActive(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.3 }
+    );
+    if (statsRef.current) observer.observe(statsRef.current);
+    return () => observer.disconnect();
+  }, []);

  const validateForm = (): boolean => {
    const errors: FieldErrors = {};
@ -273,7 +332,7 @@ function LoginPageContent() {
          </div>

          <div className="mt-8 pt-8 border-t border-neutral-200">
-            <div className="flex flex-wrap justify-center gap-6 text-body-sm text-neutral-500">
+            <div className="flex flex-wrap justify-center gap-4 text-body-sm text-neutral-500">
              <Link href="/contact" className="hover:text-accent transition-colors">
                {tFooter('contact')}
              </Link>
@ -283,6 +342,12 @@ function LoginPageContent() {
              <Link href="/terms" className="hover:text-accent transition-colors">
                {tFooter('terms')}
              </Link>
+              <Link href="/cookies" className="hover:text-accent transition-colors">
+                {tFooter('cookies')}
+              </Link>
+              <Link href="/compliance" className="hover:text-accent transition-colors">
+                {tFooter('compliance')}
+              </Link>
            </div>
          </div>
        </div>
@ -372,19 +437,28 @@ function LoginPageContent() {
              </div>
            </div>

-            <div className="grid grid-cols-3 gap-8 mt-12 pt-12 border-t border-neutral-700">
+            <div
+              ref={statsRef}
+              className="grid grid-cols-3 gap-8 mt-12 pt-12 border-t border-neutral-700"
+            >
              <div>
-                <div className="text-display-sm text-brand-turquoise">50+</div>
+                <div className="text-display-sm text-brand-turquoise">
+                  <AnimatedCounter end={50} suffix="+" isActive={statsActive} />
+                </div>
                <div className="text-body-sm text-neutral-300 mt-1">{tPanel('stats.carriers')}</div>
              </div>
              <div>
-                <div className="text-display-sm text-brand-turquoise">10k+</div>
+                <div className="text-display-sm text-brand-turquoise">
+                  <AnimatedCounter end={10} suffix="k+" isActive={statsActive} />
+                </div>
                <div className="text-body-sm text-neutral-300 mt-1">
                  {tPanel('stats.shipments')}
                </div>
              </div>
              <div>
-                <div className="text-display-sm text-brand-turquoise">99.5%</div>
+                <div className="text-display-sm text-brand-turquoise">
+                  <AnimatedCounter end={99.5} decimals={1} suffix="%" isActive={statsActive} />
+                </div>
                <div className="text-body-sm text-neutral-300 mt-1">
                  {tPanel('stats.satisfaction')}
                </div>
--- a/apps/frontend/app/[locale]/register/page.tsx
+++ b/apps/frontend/app/[locale]/register/page.tsx
@ -1,6 +1,6 @@
 'use client';

-import { useState, useEffect, Suspense } from 'react';
+import { useState, useEffect, useRef, Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { Link, useRouter } from '@/i18n/navigation';
 import Image from 'next/image';
@ -9,6 +9,49 @@ import { register } from '@/lib/api';
 import { verifyInvitation, type InvitationResponse } from '@/lib/api/invitations';
 import type { OrganizationType } from '@/types/api';

+function AnimatedCounter({
+  end,
+  suffix = '',
+  prefix = '',
+  decimals = 0,
+  isActive,
+  duration = 2,
+}: {
+  end: number;
+  suffix?: string;
+  prefix?: string;
+  decimals?: number;
+  isActive: boolean;
+  duration?: number;
+}) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!isActive) return;
+    let startTime: number | undefined;
+
+    const animate = (timestamp: number) => {
+      if (!startTime) startTime = timestamp;
+      const progress = Math.min((timestamp - startTime) / (duration * 1000), 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setCount(eased * end);
+      if (progress < 1) requestAnimationFrame(animate);
+      else setCount(end);
+    };
+
+    requestAnimationFrame(animate);
+  }, [end, duration, isActive]);
+
+  const display = decimals > 0 ? count.toFixed(decimals) : Math.floor(count).toString();
+  return (
+    <>
+      {prefix}
+      {display}
+      {suffix}
+    </>
+  );
+}
+
 function RegisterPageContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
@ -16,6 +59,22 @@ function RegisterPageContent() {
  const tFooter = useTranslations('auth.footerLinks');

  const [step, setStep] = useState<1 | 2>(1);
+  const [statsActive, setStatsActive] = useState(false);
+  const statsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setStatsActive(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.3 }
+    );
+    if (statsRef.current) observer.observe(statsRef.current);
+    return () => observer.disconnect();
+  }, []);

  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
@ -223,21 +282,30 @@ function RegisterPageContent() {
              </div>
            </div>
          </div>
-          <div className="grid grid-cols-3 gap-8 mt-12 pt-12 border-t border-neutral-700">
+          <div
+            ref={statsRef}
+            className="grid grid-cols-3 gap-8 mt-12 pt-12 border-t border-neutral-700"
+          >
            <div>
-              <div className="text-display-sm text-brand-turquoise">2k+</div>
+              <div className="text-display-sm text-brand-turquoise">
+                <AnimatedCounter end={2} suffix="k+" isActive={statsActive} />
+              </div>
              <div className="text-body-sm text-neutral-300 mt-1">
                {t('sidePanel.stats.companies')}
              </div>
            </div>
            <div>
-              <div className="text-display-sm text-brand-turquoise">150+</div>
+              <div className="text-display-sm text-brand-turquoise">
+                <AnimatedCounter end={150} suffix="+" isActive={statsActive} />
+              </div>
              <div className="text-body-sm text-neutral-300 mt-1">
                {t('sidePanel.stats.countries')}
              </div>
            </div>
            <div>
-              <div className="text-display-sm text-brand-turquoise">24/7</div>
+              <div className="text-display-sm text-brand-turquoise">
+                <AnimatedCounter end={24} suffix="/7" isActive={statsActive} />
+              </div>
              <div className="text-body-sm text-neutral-300 mt-1">
                {t('sidePanel.stats.support')}
              </div>
@ -697,7 +765,7 @@ function RegisterPageContent() {
          </div>

          <div className="mt-6 pt-6 border-t border-neutral-200">
-            <div className="flex flex-wrap justify-center gap-6 text-body-sm text-neutral-500">
+            <div className="flex flex-wrap justify-center gap-4 text-body-sm text-neutral-500">
              <Link href="/contact" className="hover:text-accent transition-colors">
                {tFooter('contact')}
              </Link>
@ -707,6 +775,12 @@ function RegisterPageContent() {
              <Link href="/terms" className="hover:text-accent transition-colors">
                {tFooter('terms')}
              </Link>
+              <Link href="/cookies" className="hover:text-accent transition-colors">
+                {tFooter('cookies')}
+              </Link>
+              <Link href="/compliance" className="hover:text-accent transition-colors">
+                {tFooter('compliance')}
+              </Link>
            </div>
          </div>
        </div>
--- a/apps/frontend/messages/en.json
+++ b/apps/frontend/messages/en.json
@ -4263,8 +4263,10 @@
    },
    "footerLinks": {
      "contact": "Contact us",
-      "privacy": "Privacy",
-      "terms": "Terms"
+      "privacy": "Privacy Policy",
+      "terms": "Terms of Service",
+      "cookies": "Cookie Policy",
+      "compliance": "GDPR Compliance"
    },
    "forgotPassword": {
      "title": "Forgot password?",
--- a/apps/frontend/messages/fr.json
+++ b/apps/frontend/messages/fr.json
@ -4304,8 +4304,10 @@
    },
    "footerLinks": {
      "contact": "Contactez-nous",
-      "privacy": "Confidentialité",
-      "terms": "Conditions"
+      "privacy": "Politique de confidentialité",
+      "terms": "Conditions générales",
+      "cookies": "Politique de cookies",
+      "compliance": "Conformité RGPD"
    },
    "forgotPassword": {
      "title": "Mot de passe oublié ?",
--- a/apps/frontend/middleware.ts
+++ b/apps/frontend/middleware.ts
@ -31,6 +31,11 @@ const prefixPublicPaths = [
  '/carrier',
  '/pricing',
  '/docs',
+  '/privacy',
+  '/terms',
+  '/cookies',
+  '/compliance',
+  '/security',
 ];

 function stripLocale(pathname: string): { locale: string | null; pathWithoutLocale: string } {
--- a/apps/frontend/src/lib/api/admin.ts
+++ b/apps/frontend/src/lib/api/admin.ts
@ -197,7 +197,15 @@ export async function getOrganizationDocuments(organizationId: string): Promise<

 // ==================== BLOG ====================

-export interface CreateBlogPostRequest {
+export interface BlogPostSeoFields {
+  metaTitle?: string;
+  metaDescription?: string;
+  primaryKeyword?: string;
+  secondaryKeywords?: string[];
+  scheduledAt?: string;
+}
+
+export interface CreateBlogPostRequest extends BlogPostSeoFields {
  title: string;
  slug: string;
  excerpt: string;
@ -208,7 +216,7 @@ export interface CreateBlogPostRequest {
  authorName: string;
 }

-export interface UpdateBlogPostRequest {
+export interface UpdateBlogPostRequest extends BlogPostSeoFields {
  title?: string;
  slug?: string;
  excerpt?: string;
--- a/apps/frontend/src/lib/api/blog.ts
+++ b/apps/frontend/src/lib/api/blog.ts
@ -1,6 +1,6 @@
 import { get } from './client';

-export type BlogPostStatus = 'draft' | 'published' | 'archived';
+export type BlogPostStatus = 'draft' | 'scheduled' | 'published' | 'archived';
 export type BlogPostCategory = 'industry' | 'technology' | 'guides' | 'news';

 export interface BlogPost {
@ -16,6 +16,10 @@ export interface BlogPost {
  status: BlogPostStatus;
  isFeatured: boolean;
  publishedAt?: string;
+  metaTitle?: string;
+  metaDescription?: string;
+  primaryKeyword?: string;
+  secondaryKeywords: string[];
  createdAt: string;
  updatedAt: string;
 }