Maj

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

.env

@@ -4,4 +4,4 @@
 # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
-DATABASE_URL="mysql://monelia:monelia@localhost:3306/monelia?schema=public"
+DATABASE_URL="mysql://sephigame:SephEsport33!@192.168.1.26:3306/Monelia_Nails?schema=public"

copie-page.tsx

@@ -0,0 +1,103 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+        <Image
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={180}
+          height={38}
+          priority
+        />
+        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+          <li className="mb-2 tracking-[-.01em]">
+            Get started by editing{" "}
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
+              src/app/page.tsx
+            </code>
+            .
+          </li>
+          <li className="tracking-[-.01em]">
+            Save and see your changes instantly.
+          </li>
+        </ol>
+
+        <div className="flex gap-4 items-center flex-col sm:flex-row">
+          <a
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={20}
+              height={20}
+            />
+            Deploy now
+          </a>
+          <a
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read our docs
+          </a>
+        </div>
+      </main>
+      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/file.svg"
+            alt="File icon"
+            width={16}
+            height={16}
+          />
+          Learn
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/window.svg"
+            alt="Window icon"
+            width={16}
+            height={16}
+          />
+          Examples
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/globe.svg"
+            alt="Globe icon"
+            width={16}
+            height={16}
+          />
+          Go to nextjs.org →
+        </a>
+      </footer>
+    </div>
+  );
+}

package-lock.json

@@ -9,10 +9,13 @@
       "version": "0.1.0",
       "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",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "swiper": "^11.2.8"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -2461,6 +2464,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bcryptjs": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.2.tgz",
+      "integrity": "sha512-k38b3XOZKv60C4E2hVsXTolJWfkGRMbILBIe2IBITXciy5bOsTKot5kDrf3ZfufQtQOUN5mXceUEpU1rTl9Uog==",
+      "license": "BSD-3-Clause",
+      "bin": {
+        "bcrypt": "bin/bcrypt"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4826,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",
@@ -5787,6 +5808,15 @@
         "is-arrayish": "^0.3.1"
       }
     },
+    "node_modules/slugify": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
+      "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -5996,6 +6026,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.8.tgz",
+      "integrity": "sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.4.tgz",

package.json

@@ -6,14 +6,18 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "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",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "swiper": "^11.2.8"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

src/actions/session/session.ts

@@ -0,0 +1,179 @@
+"use server"
+
+import prisma from "@/lib/db";
+import bcrypt from "bcryptjs";
+import { cookies } from "next/headers";
+import slugify from "slugify";
+
+export async function register(formData : FormData){
+    //Permet de récupérer les données demandées à l'utilisateur lors de l'inscription
+    const {email,password,passwordRepeat} = Object.fromEntries(formData)
+
+    if(password !== passwordRepeat){
+        throw new Error("Le passwords ne correspond pas")
+    }
+
+    try{
+
+        //Vérification du mail
+        const verifUser = await prisma.utilisateur.findFirst({
+            where : {
+                ut_mail : email.toString()
+            }
+        })
+        if(verifUser){
+            throw new Error("Utilisateur déjà inscrit")
+        }
+
+
+        //slugify de l'email
+        const slug = slugify(email.toString().substring(0,email.toString().indexOf("@")),{lower:true,strict:true})
+
+        //hash du mdp
+        const salt = await bcrypt.genSalt(10)
+        const hashedPassword = await bcrypt.hash(password.toString(),salt)
+
+        //creation de l'utilisateur
+        const result = await prisma.utilisateur.create({
+            data :{           
+                ut_mail : email.toString(),
+                ut_mdp : hashedPassword.toString(),
+                ut_slug : slug
+            }
+        })
+
+        if(result){
+            return {success: true}
+        }
+        throw new Error("Anomalie lors de la création du user")
+
+    }catch(err){
+        const error = err as Error
+        throw new Error(error.message || "une erreur à été rencontrée lors de la création de l'utilisateur")
+    }
+}
+
+export async function login(formData : FormData){
+    const {email,password} = Object.fromEntries(formData)
+
+    try{
+            //vérification si l'utilisateur est trouvé
+            const user = await prisma.utilisateur.findFirst({
+                where : {
+                    ut_mail : email.toString()
+                }
+            })
+            if(!user){
+                throw new Error("Invalide crédential")
+            }
+            //vérification du mdp
+            const isPasswordValid = await bcrypt.compare(password.toString(), user.ut_mdp)
+            if(!isPasswordValid){
+                throw new Error("Invalide crédential")
+            }
+
+            //vérification si une session de connexion existe
+            const existingSession = await prisma.session.findFirst({
+                where : {
+                    se_ut_id : user.ut_id
+                }
+            })
+
+             //vérification si la session existe mais expiré
+             // delete de l'enreg pour le recréer
+            let verifDeleteSession = false
+            if(existingSession && new Date() > existingSession.expireAt ){
+                const deleteSession = await prisma.session.delete({
+                    where : {
+                        se_id : existingSession.se_id
+                    }
+                })
+                if(deleteSession){
+                    verifDeleteSession = true
+                }
+            }
+
+             //vérification si une session de connexion existe et tjr actif
+             // on regenere le cookie ensuite
+            let verifValiditeSession = false
+            if(existingSession && new Date() < existingSession.expireAt){
+                verifValiditeSession = true
+            }
+
+            let sessionidCreate = ""
+            if(!existingSession || verifDeleteSession){
+                const createSession = await prisma.session.create({
+                    data : {
+                        se_ut_id : user.ut_id,
+                        expireAt : new Date(Date.now() + 7*24*60*60*1000)
+                    }
+                })
+                if(createSession){
+                    sessionidCreate = createSession.se_id
+                }
+            }
+
+            const cookieStore = await cookies()
+
+            if(sessionidCreate !== ""){
+                 cookieStore.set("sessionId",sessionidCreate,{
+                    httpOnly : true,
+                    secure: process.env.NODE_ENV ==="production",
+                    path:"/",
+                    maxAge: 24*60*60,
+                    sameSite: "lax"
+                })
+            }
+            if(verifValiditeSession  && existingSession?.se_id){
+                cookieStore.set("sessionId",existingSession?.se_id,{
+                    httpOnly : true,
+                    secure: process.env.NODE_ENV ==="production",
+                    path:"/",
+                    maxAge: 24*60*60,
+                    sameSite: "lax"
+                })
+            }
+
+            return {success : true}
+    }catch(err){
+        const error = err as Error
+        throw new Error(error.message || "une erreur à été rencontrée lors de la connexion de l'utilisateur")
+    }
+}    
+
+
+export async function verifSession(){
+    try{
+        const cookie = await cookies()
+        const verif = cookie.get("sessionId")
+        if(verif){
+            const verifExpireSession = await prisma.session.findUnique({
+                where : {
+                    se_id : verif.value
+                }
+            })
+            if(verifExpireSession && new Date() > verifExpireSession.expireAt){
+                await prisma.session.delete({
+                    where : {
+                        se_id : verifExpireSession.se_id
+                    }
+                })
+                return {success : false}
+            }else{
+                cookie.set("sessionId",verif.value,{
+                    httpOnly : true,
+                    secure: process.env.NODE_ENV ==="production",
+                    path:"/",
+                    maxAge: 24*60*60,
+                    sameSite: "lax"
+                })
+                return {success : true}
+            }
+        }
+        return {success : false}
+
+    }catch(err){
+        const error = err as Error
+        throw new Error(error.message || "une erreur à été rencontrée lors de la vérification de la session")
+    }
+}

src/actions/user/user.ts

@@ -0,0 +1,42 @@
+import prisma from "@/lib/db";
+
+export async function getInfoUser(slug : string){
+    try{
+        const user = await prisma.utilisateur.findFirst({
+            where : {
+                ut_slug : slug
+            }
+        })
+        if(user){
+            return {success : true, user}
+        }
+        return {success : false, message : "Impossible de trouver les infos de l'utilisateur"}
+    }catch(err){
+        const error = err as Error
+        throw new Error(error.message || "une erreur à été rencontrée lors de la recherche de l'utilisateur")
+    }
+}
+
+export async function deleteUser(slug : string){
+    try{
+
+        const user = await prisma.utilisateur.findFirst({
+            where : {
+                ut_slug : slug
+            }
+        })
+        if(user){
+            await prisma.utilisateur.delete({
+                where : {
+                    ut_id : user.ut_id
+                }
+            })
+            return {success : true}
+        }
+        return {success : false, message : "Impossible de supprimer l'utilisateur"}
+    }catch(err){
+        const error = err as Error
+        throw new Error(error.message || "une erreur à été rencontrée lors suppression de l'utilisateur")
+    }
+}
+

src/app/components/footer.tsx

@@ -0,0 +1,10 @@
+const Footer = () => {
+
+    return (
+        <footer>
+            Footer
+        </footer>
+    )
+}
+
+export default Footer

src/app/components/slider.tsx

@@ -0,0 +1,130 @@
+import { useState } from "react";
+import Image from "next/image";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { EffectCoverflow, Autoplay } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/effect-coverflow";
+
+const images = [
+  { src: "/images/nail1.jpg", alt: "Nail art 1" },
+  { src: "/images/nail2.jpg", alt: "Nail art 2" },
+  { src: "/images/nail3.jpg", alt: "Nail art 3" },
+  { src: "/images/nail1.jpg", alt: "Nail art 1" },
+  { src: "/images/nail2.jpg", alt: "Nail art 2" },
+  { src: "/images/nail3.jpg", alt: "Nail art 3" },
+  { src: "/images/nail1.jpg", alt: "Nail art 1" },
+  { src: "/images/nail2.jpg", alt: "Nail art 2" },
+  { src: "/images/nail3.jpg", alt: "Nail art 3" },
+  { src: "/images/nail1.jpg", alt: "Nail art 1" },
+  { src: "/images/nail2.jpg", alt: "Nail art 2" },
+  { src: "/images/nail3.jpg", alt: "Nail art 3" },
+
+  // Ajoute plus d’images si tu veux !
+];
+
+export default function CoverflowGallery() {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalIndex, setModalIndex] = useState<number>(0);
+
+  const openModal = (idx: number) => {
+    setModalIndex(idx);
+    setModalOpen(true);
+  };
+  const closeModal = () => setModalOpen(false);
+
+  const prevImage = () => setModalIndex(prev => (prev === 0 ? images.length - 1 : prev - 1));
+  const nextImage = () => setModalIndex(prev => (prev === images.length - 1 ? 0 : prev + 1));
+
+  return (
+    <section className="px-4 md:px-0 mt-20 mb-10 flex flex-col items-center">
+      <h3 className="text-2xl font-semibold text-[#2D3D53] mb-8 text-center">
+        Nos clientes adorent... et nous aussi !!
+      </h3>
+      <div className="w-full max-w-6xl">
+        <Swiper
+          modules={[EffectCoverflow, Autoplay]}
+          effect="coverflow"
+          grabCursor={true}
+          centeredSlides={true}
+          slidesPerView={window.innerWidth < 768 ? 1.2 : 3}
+          coverflowEffect={{
+            rotate: 0,
+            stretch: 0,
+            depth: 60,
+            modifier: 2.5,
+            slideShadows: false,
+          }}
+          loop
+          autoplay={{
+            delay: 3500,
+            disableOnInteraction: false,
+            pauseOnMouseEnter: true,
+          }}
+          className="gallerySwiper"
+        >
+          {images.map((img, i) => (
+            <SwiperSlide key={i} className="flex justify-center">
+              <button
+                className="focus:outline-none"
+                onClick={() => openModal(i)}
+                aria-label={`Agrandir ${img.alt}`}
+              >
+                <Image
+                  src={img.src}
+                  alt={img.alt}
+                  width={760}
+                  height={640}
+                  className="rounded-2xl object-cover shadow-xl border-2 border-white"
+                  style={{ maxHeight: 640, width: "auto", height: "auto" }}
+                />
+              </button>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+
+      {/* MODALE NAVIGABLE */}
+      {modalOpen && (
+        <div className="fixed z-50 inset-0 bg-black/60 flex items-center justify-center" onClick={closeModal}>
+          <div
+            className="bg-white rounded-3xl p-4 max-w-2xl w-full flex flex-col items-center relative"
+            onClick={e => e.stopPropagation()}
+          >
+            <button
+              className="absolute top-2 right-3 text-3xl text-[#2178aa] hover:text-[#C97A44] font-bold"
+              onClick={closeModal}
+              aria-label="Fermer"
+            >
+              ×
+            </button>
+            <div className="flex items-center justify-center w-full gap-6">
+              <button
+                onClick={prevImage}
+                className="text-3xl text-[#7CB9E8] hover:text-[#2178aa] font-bold px-2"
+                aria-label="Image précédente"
+              >
+                ‹
+              </button>
+              <Image
+                src={images[modalIndex].src}
+                alt={images[modalIndex].alt}
+                width={500}
+                height={400}
+                className="rounded-xl object-cover"
+                style={{ maxHeight: 420, width: "auto", height: "auto" }}
+              />
+              <button
+                onClick={nextImage}
+                className="text-3xl text-[#7CB9E8] hover:text-[#2178aa] font-bold px-2"
+                aria-label="Image suivante"
+              >
+                ›
+              </button>
+            </div>
+            <div className="text-[#2D3D53] text-base mt-2">{images[modalIndex].alt}</div>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}

src/app/globals.css

@@ -1,15 +1,35 @@
+@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: #ffffff;
+  --background: rgb(245,235,221);
-  --foreground: #171717;
+  --color-bgMenu: rgb(204, 195, 181);
+  --color-text: rgb(92,74,66);
+  --color-title: rgb(216,163,157);
+  --color-accent: rgb(203,174,158);
+  --color-buttons: rgb(200,213,193);
+  --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);
-  --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --text: var(--color-text);
+  --title: var(--color-title);
+  --accent: var(--color-accent);
+  --buttons: var(--color-buttons);
+  --bold: var(--color-bold);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -22,5 +42,41 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Grupo", Arial, Helvetica, sans-serif;
+}
+
+b {
+  color : var(--color-bold)
+}
+
+button {
+  background: var(--color-buttons);
+  padding: 0.5rem 2rem;
+  border-radius: 0.5rem;
+}
+
+button:hover {
+  background: var(--color-accent);
+  cursor: pointer;
+}
+
+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,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Footer from "./components/footer";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,7 +14,7 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Monelia Nails",
   description: "Generated by create next app",
 };
 
@@ -23,11 +24,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="fr">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`antialiased grid grid-rows-[auto_1fr_auto] h-screen w-screen`}
       >
           {children}
+        <Footer />
       </body>
     </html>
   );

src/app/page.tsx

@@ -1,103 +1,134 @@
+'use client'
+// Home.tsx ou page.tsx
+// Placer les images dans /public/images/
 import Image from "next/image";
+import GallerySection from "./components/slider";
 
 export default function Home() {
+
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+    <main className="bg-[#F8FAFC] min-h-screen text-[#283142] font-sans">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+      {/* HEADER AVEC BANDEAU BLEU */}
+      <header className="fixed w-full top-0 left-0 z-40">
+        <div className="backdrop-blur-lg bg-white/70 border-b border-[#C3E5F9] shadow-sm flex justify-between items-center px-4 md:px-16 py-4">
+          <h1 className="text-2xl font-bold tracking-widest text-[#2178aa]">
+            MONELIA NAILS
+          </h1>
+          <nav className="space-x-8 text-lg font-medium">
+            <a href="#" className="text-[#2D3D53] hover:text-[#2178aa] transition">Accueil</a>
+            <a href="#" className="text-[#2D3D53] hover:text-[#2178aa] transition">Formations</a>
+            <a href="#" className="text-[#2D3D53] hover:text-[#2178aa] transition">Réservation</a>
+          </nav>
+          <button className="px-5 py-2 bg-[#7CB9E8] hover:bg-[#2178aa] text-white rounded-xl font-semibold shadow transition">
+            Connexion
+          </button>
+        </div>
+      </header>
+
+
+      {/* HERO */}
+     <section
+  className="relative flex items-center justify-center min-h-[70vh] md:min-h-[80vh] mt-20 overflow-hidden"
+>
+  {/* Image de fond : Lisa en action ou zoom ongles */}
   <Image
-          className="dark:invert"
+    src="/images/lisa-nails.jpg"
-          src="/next.svg"
+    alt="Nail art par Lisa"
-          alt="Next.js logo"
+    fill
-          width={180}
+    style={{ objectFit: "cover", objectPosition: "center" }}
-          height={38}
+    className="z-0"
     priority
   />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+  {/* Overlay doux avec motif, couleur, ou dégradé */}
-          <li className="mb-2 tracking-[-.01em]">
+  <div className="absolute inset-0 bg-gradient-to-b from-[#EEC8C3]/70 via-[#F5EBDD]/40 to-[#C3E5F9]/80 pointer-events-none z-10" />
-            Get started by editing{" "}
+  {/* Petits éléments nail art décoratifs (SVG, png) */}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
+  <div className="absolute top-10 left-12 z-20 hidden md:block">
-              src/app/page.tsx
+    {/* exemple : flacon de vernis, étoile, etc. */}
-            </code>
+    <svg width="48" height="48" /* ... */> {/* ... */} </svg>
-            .
+  </div>
-          </li>
+  {/* Contenu principal */}
-          <li className="tracking-[-.01em]">
+  <div className="relative z-30 flex flex-col items-center text-center px-4">
-            Save and see your changes instantly.
+    <h2 className="text-4xl md:text-5xl font-bold mb-4 text-[#2178aa] drop-shadow-xl font-[Dancing_Script,serif]">
-          </li>
+      Le nail art, la douceur & la créativité à portée de main
-        </ol>
+    </h2>
+    <p className="text-xl md:text-2xl text-[#C97A44] mb-6 font-semibold drop-shadow">
+      Bienvenue chez Monelia Nails – Manucure, formations & bonne humeur
+    </p>
+    <button className="px-7 py-3 bg-[#7CB9E8] hover:bg-[#2178aa] text-white rounded-2xl text-lg shadow-md transition font-semibold flex items-center gap-2">
+      <svg width="20" height="20" /* ... */> {/* icône vernis */} </svg>
+      Prendre rendez-vous
+    </button>
+    <span className="block mt-2 text-[#CBAE9E] text-sm">Réservez votre parenthèse beauté !</span>
+  </div>
+</section>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
+
-          <a
+
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
+      {/* CARROUSEL "NOS CLIENTES AD ORENT..." */}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+      <GallerySection />
-            target="_blank"
+
-            rel="noopener noreferrer"
+      {/* À PROPOS DE LISA - GRAND, CENTRÉ */}
-          >
+      <section className="flex flex-col items-center px-4 md:px-0 mt-20 mb-16">
+        <div className="bg-[#E9F5FB] rounded-3xl shadow-xl px-8 py-10 flex flex-col items-center max-w-2xl w-full">
           <Image
-              className="dark:invert"
+            src="/images/lisa-profil.jpg"
-              src="/vercel.svg"
+            alt="Lisa, prothésiste ongulaire"
-              alt="Vercel logomark"
+            width={140}
-              width={20}
+            height={140}
-              height={20}
+            className="rounded-full border-4 border-[#7CB9E8] shadow mb-5"
           />
-            Deploy now
+          <h4 className="text-2xl font-bold text-[#2178aa] mb-3 text-center">
-          </a>
+            À propos de Lisa
-          <a
+          </h4>
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
+          <p className="text-lg text-[#2D3D53] text-center leading-relaxed">
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            Lisa, prothésiste ongulaire passionnée, formée à l’art de la manucure.
-            target="_blank"
+            Toujours un sourire, une blague, et deux mascottes à vos pieds !<br />
-            rel="noopener noreferrer"
+            <span className="block text-[#C97A44] font-semibold mt-2">Envie de paillettes et de douceur ? C’est par ici !</span>
-          >
+          </p>
-            Read our docs
-          </a>
         </div>
-      </main>
+      </section>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
+
-        <a
+      {/* SECTION MASCOTTES */}
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+      <section className="px-6 md:px-16 flex flex-col items-center md:flex-row md:justify-between gap-8 mt-8">
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+        <div>
-          target="_blank"
+          <h4 className="text-2xl font-semibold text-[#2D3D53] mb-2">
-          rel="noopener noreferrer"
+            Voici Kiki & Ryo, les mascottes du salon !
-        >
+          </h4>
-          <Image
+          <p className="text-md text-[#283142]">
-            aria-hidden
+            Toujours là pour accueillir les clientes avec douceur et bonne humeur !
-            src="/file.svg"
+          </p>
-            alt="File icon"
+        </div>
-            width={16}
+        <div className="flex gap-7 mt-3">
-            height={16}
+          {/* SVG mascottes stylisées (placeholder) */}
-          />
+          <svg width="70" height="70" viewBox="0 0 80 80" fill="none">
-          Learn
+            <ellipse cx="40" cy="70" rx="28" ry="10" fill="#C97A44" opacity="0.15" />
-        </a>
+            <circle cx="40" cy="36" r="16" fill="#C97A44" />
-        <a
+            <ellipse cx="34" cy="34" rx="3" ry="4" fill="#5B3A1B" />
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+            <ellipse cx="46" cy="34" rx="3" ry="4" fill="#5B3A1B" />
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            <ellipse cx="40" cy="48" rx="7" ry="3" fill="#AD6131" />
-          target="_blank"
+            {/* Oreilles */}
-          rel="noopener noreferrer"
+            <ellipse cx="28" cy="22" rx="4" ry="7" fill="#C97A44" />
-        >
+            <ellipse cx="52" cy="22" rx="4" ry="7" fill="#C97A44" />
-          <Image
+          </svg>
-            aria-hidden
+          <svg width="70" height="70" viewBox="0 0 80 80" fill="none">
-            src="/window.svg"
+            <ellipse cx="40" cy="70" rx="28" ry="10" fill="#7CB9E8" opacity="0.15" />
-            alt="Window icon"
+            <circle cx="40" cy="36" r="16" fill="#2178aa" />
-            width={16}
+            <ellipse cx="36" cy="36" rx="3" ry="4" fill="#EEE" />
-            height={16}
+            <ellipse cx="48" cy="36" rx="3" ry="4" fill="#EEE" />
-          />
+            <ellipse cx="40" cy="50" rx="7" ry="3" fill="#283142" />
-          Examples
+            {/* Oreilles */}
-        </a>
+            <ellipse cx="28" cy="22" rx="4" ry="7" fill="#2178aa" />
-        <a
+            <ellipse cx="52" cy="22" rx="4" ry="7" fill="#2178aa" />
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          </svg>
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+        </div>
-          target="_blank"
+      </section>
-          rel="noopener noreferrer"
+
-        >
+      {/* FOOTER */}
-          <Image
+      <footer className="mt-20 py-10 text-center bg-[#F8FAFC] border-t border-gray-200 text-[#C97A44]">
-            aria-hidden
+        Site réalisé avec amour, paillettes et câlins de Kiki & Ryo 🐾
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
       </footer>
-    </div>
+    </main>
   );
 }
+
+

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