Intégration

Début de l'intégration des versions mobiles, tablette et pc. En cours, pour le menu

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@prisma/client": "^6.6.0",
         "bcryptjs": "^3.0.2",
+        "lucide-react": "^0.511.0",
         "next": "15.3.0",
         "prisma": "^6.6.0",
         "react": "^19.0.0",
@@ -4837,6 +4838,15 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.511.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz",
+      "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",

package.json

@@ -7,11 +7,12 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-	"start:migrate:prod" : "npx prisma migrate deploy && npm run start"
+    "start:migrate:prod": "npx prisma migrate deploy && npm run start"
   },
   "dependencies": {
     "@prisma/client": "^6.6.0",
     "bcryptjs": "^3.0.2",
+    "lucide-react": "^0.511.0",
     "next": "15.3.0",
     "prisma": "^6.6.0",
     "react": "^19.0.0",

src/app/components/header.tsx

@@ -1,22 +0,0 @@
-import Image from "next/image"
-import Link from "next/link"
-
-const Header = () => {
-
-    return (
-        <header className='grid grid-cols-[1fr_auto_1fr]'>
-            <div className="flex h-[50px] gap-4 pl-8 my-auto">
-                <Image src={'/Ryo.png'} alt={"Ryo"} width={40} height={50} />
-                <Image src={'/Kiki.png'} alt={"Ryo"} width={40} height={50} />
-            </div>
-            <div className='my-auto text-2xl'>
-                Monelia Nails
-            </div>
-            <div>
-
-            </div>
-        </header>
-    )
-}
-
-export default Header

src/app/components/header/desktop.tsx

@@ -0,0 +1,32 @@
+import Image from "next/image"
+import Link from "next/link"
+
+const DesktopHeader = () => {
+    return (
+        <>
+        <div className="gap-4 pl-8 my-auto w-1/3 bg-text">
+                <div className='flex justify-self-center'>
+                    <Image src={'/Ryo.png'} alt={"Ryo"} width={40} height={40} />
+                    <Image src={'/Kiki.png'} alt={"Ryo"} width={40} height={40} />
+                </div>
+                <div className='flex text-xs justify-self-center'>
+                    <span className='cursor-pointer mr-2'>Se connecter</span> · <span className='cursor-pointer ml-2'>S'inscrire</span>
+                </div>
+            </div>
+            <div className='my-auto text-4xl logo '>
+                Monelia Nails
+            </div>
+            <div className='grid h-full'>
+                <ul className='flex gap-8 self-center justify-self-end mr-8'>
+                    <li><Link href='/'>Accueil</Link></li>
+                    <li><Link href='/qui-suis-je'>Qui suis-je ?</Link></li>
+                    <li><Link href='/prestations'>Mes prestations</Link></li>
+                    <li><Link href='/formations'>Mes formations</Link></li>
+                    <li><Link href='/contact'>Me contacter</Link></li>
+                </ul>
+            </div>
+            </>
+        )
+}
+
+export default DesktopHeader

src/app/components/header/header.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { useState } from "react"
+import DesktopHeader from "./desktop"
+import MobileHeader from "./mobile"
+
+const Header = () => {
+
+    
+
+    return (
+        <header className='fixed bottom-0 w-screen h-[7.5vh]
+            tablet:h-[6.5vh] bg-(--accent)
+            laptop:relative laptop:block laptop:h-auto'>
+            <div className='hidden laptop:grid laptop:grid-cols-3 w-full'>
+                <DesktopHeader />
+            </div>
+            <div className='laptop:hidden grid h-full'>
+                <MobileHeader />
+            </div>
+        </header>
+    )
+}
+
+export default Header

src/app/components/header/mobile.tsx

@@ -0,0 +1,60 @@
+import { Home, LayoutGrid, UserRound } from "lucide-react"
+import { useState } from "react"
+
+
+const items = [
+    {
+        id: "menu",
+        icon: <LayoutGrid />,
+        label: 'Menu'
+    },
+    {
+        id: "home",
+        icon: <Home />,
+        label: "Accueil"
+    },
+    {
+        id: "user",
+        icon: <UserRound />,
+        label: "Profil"
+    },
+
+]
+
+const MobileHeader = () => {
+    const [menuSelected, setMenuSelected] = useState<string>('menu')
+    const [openMenu, setOpenMenu] = useState(false)
+    const activeIndex = items.findIndex((item) => item.id === menuSelected);
+
+    return (
+        <div className='max-w-screen w-full grid relative grid-cols-3 self-center transition-all duration-300'>
+            <div
+                className="absolute -top-[50%] tablet:-top-[60%] left-0 w-1/3 flex justify-center transition-all duration-300 ease-in-out"
+                style={{
+                    transform: `translateX(${activeIndex * 100}%)`,
+                }}
+            >
+                <div className="w-2/3 tablet:w-1/2 h-14 bg-(--accent) rounded-[100%]"></div>
+                    
+                
+            </div>
+            {items.map((item) => (
+                <div
+                    key={item.id}
+                    onClick={() => setMenuSelected(item.id)}
+                    className="flex flex-col items-center justify-center relative"
+                >
+                    <div className="text-xl">{item.icon}</div>
+                    <span
+                        className={`text-xs tablet:text-lg duration-300 ${menuSelected === item.id ? "text-white font-semibold" : "text-(--background)"
+                            }`}
+                    >
+                        {item.label}
+                    </span>
+                </div>
+            ))}
+        </div>
+    )
+}
+
+export default MobileHeader

src/app/globals.css

@@ -1,8 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Gruppo&family=Monsieur+La+Doulaise&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Ephesis&family=Gruppo&family=Monsieur+La+Doulaise&display=swap');
 @import "tailwindcss";
 
+
 :root {
   --background: rgb(245,235,221);
-  --color-menu: rgb(204, 195, 181);
+  --color-bgMenu: rgb(204, 195, 181);
   --color-text: rgb(92,74,66);
   --color-title: rgb(216,163,157);
   --color-accent: rgb(203,174,158);
@@ -10,6 +13,14 @@
   --color-bold: rgb(238,200,195);
 }
 
+
+@theme {
+  --breakpoint-tablet: 768px;
+  --breakpoint-laptop: 1024px;
+  --breakpoint-desktop: 1280px;
+  --breakpoint-big : 1536px;
+}
+
 @theme inline {
   --color-background: var(--background);
   --font-sans: var(--font-geist-sans);
@@ -31,12 +42,7 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Grupo", Arial, Helvetica, sans-serif;
-}
-
-header {
-  background: var(--color-menu);
-  height: 10vh;
 }
 
 b {
@@ -56,4 +62,21 @@ button:hover {
 
 footer {
   background: var(--color-menu);
+}
+
+.logo {
+  font-family: "Monsieur La Doulaise", cursive;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.menu-ellipse {
+  clip-path: ellipse(50% 34% at 50% 100%)
+}
+
+
+/* FILTRES DE COULEUR */
+
+.filterToText {
+  filter: brightness(0) saturate(100%) invert(28%) sepia(8%) saturate(1314%) hue-rotate(333deg) brightness(91%) contrast(83%);
 }

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import Header from "./components/header";
+import Header from "./components/header/header";
 import Footer from "./components/footer";
 
 const geistSans = Geist({
@@ -15,7 +15,7 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Monelia Nails",
   description: "Generated by create next app",
 };
 
@@ -25,12 +25,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="fr">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased grid grid-rows-[auto_1fr_auto] h-screen overflow-hidden`}
+        className={`antialiased grid grid-rows-[auto_1fr_auto] h-screen w-screen`}
       >
         <Header />
-        {children}
+          {children}
         <Footer />
       </body>
     </html>

src/app/page.tsx

@@ -1,5 +1,3 @@
-import Image from "next/image";
-
 export default function Home() {
   return (
     <div className="">

tailwind.config.ts

@@ -0,0 +1,25 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+    content: [
+        "./src/**/*.{js,ts,jsx,tsx}",
+        "./app/**/*.{js,ts,jsx,tsx}", // pour les projets Next 13+
+        "./pages/**/*.{js,ts,jsx,tsx}", // si tu n’es pas en app directory
+    ],
+    theme: {
+        extend: {
+            screens: {
+                mobile: '640px',
+                tablet: '768px',
+                laptop: '1024px',
+                desktop: '1280px',
+                big: '1536px',
+                fhd: '1920px',
+                qhd: '2560px',
+                uhd: '3840px',
+            },
+        },
+    },
+}
+
+export default config