diff --git a/copie-page.tsx b/copie-page.tsx new file mode 100644 index 0000000..e68abe6 --- /dev/null +++ b/copie-page.tsx @@ -0,0 +1,103 @@ +import Image from "next/image"; + +export default function Home() { + return ( +
+
+ Next.js logo +
    +
  1. + Get started by editing{" "} + + src/app/page.tsx + + . +
    2. +
  2. + Save and see your changes instantly. +
    3. +
+ +
+ + Vercel logomark + Deploy now + + + Read our docs + +
+
+ +
+ ); +} diff --git a/package-lock.json b/package-lock.json index c123182..b36f66d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "prisma": "^6.6.0", "react": "^19.0.0", "react-dom": "^19.0.0", - "slugify": "^1.6.6" + "swiper": "^11.2.8" }, "devDependencies": { "@eslint/eslintrc": "^3", @@ -6026,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", diff --git a/package.json b/package.json index 2ce00e5..bea7d0d 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "prisma": "^6.6.0", "react": "^19.0.0", "react-dom": "^19.0.0", - "slugify": "^1.6.6" + "swiper": "^11.2.8" }, "devDependencies": { "@eslint/eslintrc": "^3", diff --git a/public/images/lisa-nails.jpg b/public/images/lisa-nails.jpg new file mode 100644 index 0000000..cb095ab Binary files /dev/null and b/public/images/lisa-nails.jpg differ diff --git a/public/images/lisa-profil.jpg b/public/images/lisa-profil.jpg new file mode 100644 index 0000000..57543b9 Binary files /dev/null and b/public/images/lisa-profil.jpg differ diff --git a/public/images/nail1.jpg b/public/images/nail1.jpg new file mode 100644 index 0000000..5b0cea2 Binary files /dev/null and b/public/images/nail1.jpg differ diff --git a/public/images/nail2.jpg b/public/images/nail2.jpg new file mode 100644 index 0000000..ae4654f Binary files /dev/null and b/public/images/nail2.jpg differ diff --git a/public/images/nail3.jpg b/public/images/nail3.jpg new file mode 100644 index 0000000..97cdcb0 Binary files /dev/null and b/public/images/nail3.jpg differ diff --git a/src/app/components/slider.tsx b/src/app/components/slider.tsx new file mode 100644 index 0000000..5afb9d1 --- /dev/null +++ b/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(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 ( +
+

+ Nos clientes adorent... et nous aussi !! +

+
+ + {images.map((img, i) => ( + + + + ))} + +
+ + {/* MODALE NAVIGABLE */} + {modalOpen && ( +
+
e.stopPropagation()} + > + +
+ + {images[modalIndex].alt} + +
+
{images[modalIndex].alt}
+
+
+ )} +
+ ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index d0db230..22c56ad 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +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 ( -
- Test -
+
+ {/* HEADER AVEC BANDEAU BLEU */} +
+
+

+ MONELIA NAILS +

+ + +
+
+ + + {/* HERO */} +
+ {/* Image de fond : Lisa en action ou zoom ongles */} + Nail art par Lisa + {/* Overlay doux avec motif, couleur, ou dégradé */} +
+ {/* Petits éléments nail art décoratifs (SVG, png) */} +
+ {/* exemple : flacon de vernis, étoile, etc. */} + {/* ... */} +
+ {/* Contenu principal */} +
+

+ Le nail art, la douceur & la créativité à portée de main +

+

+ Bienvenue chez Monelia Nails – Manucure, formations & bonne humeur +

+ + Réservez votre parenthèse beauté ! +
+
+ + + + {/* CARROUSEL "NOS CLIENTES AD ORENT..." */} + + + {/* À PROPOS DE LISA - GRAND, CENTRÉ */} +
+
+ Lisa, prothésiste ongulaire +

+ À propos de Lisa +

+

+ Lisa, prothésiste ongulaire passionnée, formée à l’art de la manucure. + Toujours un sourire, une blague, et deux mascottes à vos pieds !
+ Envie de paillettes et de douceur ? C’est par ici ! +

+
+
+ + {/* SECTION MASCOTTES */} +
+
+

+ Voici Kiki & Ryo, les mascottes du salon ! +

+

+ Toujours là pour accueillir les clientes avec douceur et bonne humeur ! +

+
+
+ {/* SVG mascottes stylisées (placeholder) */} + + + + + + + {/* Oreilles */} + + + + + + + + + + {/* Oreilles */} + + + +
+
+ + {/* FOOTER */} + +
); } + +