fix(app): adapt footer, rework nav, scroll

src/app/cgv/page.tsx

@@ -1,7 +1,3 @@
-import Link from 'next/link';
-
-import { Wave } from '@/components/atoms';
-
 const articles = [
 	{
 		title: 'Objet',
@@ -157,12 +153,6 @@ const articles = [
 const Page = () => {
 	return (
 		<section className="min-h-screen">
-			<Wave className={'rotate-180'} classNamePath={'fill-primary'} />
-			<Link href={'/'} className="absolute top-0 left-0 z-50">
-				<h1 className="font-barba text-md sm:text-2xl md:text-3xl lg:text-4xl text-white p-2">
-					C’W
-				</h1>
-			</Link>
 			<div className="text-black py-12 px-6 h-full">
 				<div className="min-h-screen p-6">
 					<div className="max-w-3xl mx-auto">

src/app/layout.tsx

@@ -76,7 +76,7 @@ const RootLayout = ({
 					{children}
 					<Analytics />
 				</Toaster>
-				<Wave classNamePath="fill-primary/90" />
+				<Wave classNamePath="fill-ternary/90" />
 				<Footer />
 			</body>
 		</html>

src/app/mentions-legales/page.tsx

@@ -1,7 +1,3 @@
-import Link from 'next/link';
-
-import { Wave } from '@/components/atoms';
-
 const legalNotices = [
 	{
 		title: 'Éditeur du site',
@@ -73,20 +69,13 @@ const legalNotices = [
 
 const MentionsLegales = () => {
 	return (
-		<section className="h-svh">
-			<div className="min-h-screen">
-				<Wave className={'rotate-180'} classNamePath={'fill-primary'} />
-				<div className="h-svh">
-					<Link href={'/'} className="absolute top-0 left-0 z-50">
-						<h1 className="font-barba text-md sm:text-2xl md:text-3xl lg:text-4xl text-white p-2">
-							C’W
-						</h1>
-					</Link>
-					<div className="text-black py-12 px-6">
+		<section className="min-h-screen">
+			<div>
+				<div className="text-black py-12 px-6 h-full">
+					<div className="min-h-screen p-6">
 						<h1 className="text-4xl font-barba text-primary mb-6">
 							Mentions Légales
 						</h1>
-
 						<div className="container mx-auto max-w-3xl">
 							{legalNotices.map((legalNotice, index) => (
 								<details

src/app/page.tsx

@@ -7,7 +7,6 @@ import {
 	Hero,
 	Services,
 	Loader,
-	NavigationBar,
 	ContactModal,
 	AnimatedArrow,
 } from '@/components/atoms';
@@ -67,7 +66,6 @@ export default function Home() {
 				<Loader />
 			) : (
 				<>
-					<NavigationBar />
 					<AnimatedArrow />
 					<Hero />
 					<About />

src/components/atoms/Footer.tsx

@@ -8,7 +8,7 @@ type Props = {
 const Footer = ({ className }: Props) => {
 	return (
 		<footer
-			className={`bg-primary/90 text-white text-center text-sm ${className}`}
+			className={`bg-ternary/90 text-white text-center text-sm ${className}`}
 		>
 			<div className="flex flex-col md:flex-row justify-center items-center gap-4">
 				<Link

src/components/atoms/NavigationBar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
 
 const sections = [
 	{ id: 'hero', title: 'Accueil' },
@@ -12,6 +13,22 @@ const sections = [
 
 const NavigationBar = () => {
 	const [activeSection, setActiveSection] = useState<string>('');
+	const router = useRouter();
+
+	// Récupération de l'ancre avec `URLSearchParams`
+	useEffect(() => {
+		if (typeof window !== 'undefined') {
+			const params = new URLSearchParams(window.location.search);
+			const targetSection = params.get('section');
+
+			if (targetSection) {
+				const element = document.getElementById(targetSection);
+				if (element) {
+					element.scrollIntoView({ behavior: 'smooth' });
+				}
+			}
+		}
+	}, []);
 
 	const observerOptions = {
 		root: null,
@@ -28,44 +45,51 @@ const NavigationBar = () => {
 	};
 
 	useEffect(() => {
-		requestAnimationFrame(() => {
-			const observer = new IntersectionObserver(
-				observerCallback,
-				observerOptions
-			);
-			sections.forEach((section) => {
-				const element = document.getElementById(section.id);
-				if (element) {
-					observer.observe(element);
-				}
-			});
+		const observer = new IntersectionObserver(
+			observerCallback,
+			observerOptions
+		);
+		sections.forEach((section) => {
+			const element = document.getElementById(section.id);
+			if (element) {
+				observer.observe(element);
+			}
 		});
+
+		return () => observer.disconnect();
 	}, []);
 
+	const handleNavigation = (sectionId: string) => {
+		if (window.location.pathname !== '/') {
+			router.push(`/?section=${sectionId}`);
+		} else {
+			const element = document.getElementById(sectionId);
+			if (element) {
+				element.scrollIntoView({ behavior: 'smooth' });
+			}
+		}
+	};
+
 	return (
-		<header>
-			<nav className="fixed top-0 w-screen z-50 flex justify-center items-center py-2 px-4 lg:py-4 lg:px-8 bg-ternary/90 backdrop-blur shadow-lg">
-				<ul className="flex space-x-2 lg:space-x-6 text-white">
-					{sections.map((section) => (
-						<li key={section.id}>
-							<a
-								href={`#${section.id}`}
-								className={`transition-colors duration-300 font-light text-sm md:text-lg lg:text-xl ${
-									activeSection === section.id
-										? 'text-secondary/70 active:text-red' // Ajoute la couleur active ici
-										: 'hover:text-primary'
-								}`}
-							>
-								{section.title}
-							</a>
-						</li>
-					))}
-				</ul>
-			</nav>
-		</header>
+		<nav className="fixed top-0 w-screen z-50 flex justify-center items-center py-2 px-4 lg:py-4 lg:px-8 bg-ternary/90 backdrop-blur shadow-lg">
+			<ul className="flex space-x-2 lg:space-x-6 text-white">
+				{sections.map((section) => (
+					<li key={section.id}>
+						<button
+							onClick={() => handleNavigation(section.id)}
+							className={`transition-colors duration-300 font-light text-sm md:text-lg lg:text-xl ${
+								activeSection === section.id
+									? 'text-secondary/70 active:text-red'
+									: 'hover:text-primary'
+							}`}
+						>
+							{section.title}
+						</button>
+					</li>
+				))}
+			</ul>
+		</nav>
 	);
 };
 
-// Fonction pour capitaliser le texte (ex: "hero" → "Hero")
-
 export default NavigationBar;

src/components/organisms/Header.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
-import { Navigation } from '@/components/organisms';
+
+import { NavigationBar } from '@/components/atoms';
 
 const Header = () => {
-	return <Navigation />;
+	return (
+		<header className="sticky top-0 z-50 bg-white shadow-sm">
+			<NavigationBar />
+		</header>
+	);
 };
 
 export default Header;

src/components/organisms/index.ts

@@ -1,4 +1,3 @@
 export { default as Header } from './Header';
-export { default as Navigation } from './Navigation';
 export { default as ServicesGrid } from './ServicesGrid';
 export { default as Toaster } from './Toaster';

src/styles/global.css

@@ -29,28 +29,12 @@
   @font-face {
       font-family: Barba;
   }
-  /*@font-face {*/
-  /*  font-family: 'Orbitron';*/
-  /*  font-style: normal;*/
-  /*  font-weight: 900;*/
-  /*  src: url('../assets/fonts/Orbitron-Black.ttf') format('truetype');*/
-  /*}*/
 }
 
 *, body, html {
   @apply m-0 p-0 border-0 box-border;
 }
 
-/* width */
-::-webkit-scrollbar {
-  @apply w-1 h-1;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  @apply bg-background-white;
-}
-
 @layer base {
   *, body, html {
     font-family: Cerebris Sans, sans-serif;