Modifications Page d'accueil

2025-06-21 15:27:47 +02:00 · 2025-06-21 15:27:47 +02:00 · 2fe922fa3a
parent 2207318950
commit 2fe922fa3a
10 changed files with 384 additions and 5 deletions
--- a/copie-page.tsx
+++ b/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>
+  );
+}
--- 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",
--- 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",
--- a/public/images/lisa-nails.jpg
+++ b/public/images/lisa-nails.jpg
--- a/public/images/lisa-profil.jpg
+++ b/public/images/lisa-profil.jpg
--- a/public/images/nail1.jpg
+++ b/public/images/nail1.jpg
--- a/public/images/nail2.jpg
+++ b/public/images/nail2.jpg
--- a/public/images/nail3.jpg
+++ b/public/images/nail3.jpg
--- a/src/app/components/slider.tsx
+++ 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<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>
+  );
+}
--- 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 (
-    <div className="">
-      Test
-    </div>
+    <main className="bg-[#F8FAFC] min-h-screen text-[#283142] font-sans">
+      {/* 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
+    src="/images/lisa-nails.jpg"
+    alt="Nail art par Lisa"
+    fill
+    style={{ objectFit: "cover", objectPosition: "center" }}
+    className="z-0"
+    priority
+  />
+  {/* Overlay doux avec motif, couleur, ou dégradé */}
+  <div className="absolute inset-0 bg-gradient-to-b from-[#EEC8C3]/70 via-[#F5EBDD]/40 to-[#C3E5F9]/80 pointer-events-none z-10" />
+  {/* Petits éléments nail art décoratifs (SVG, png) */}
+  <div className="absolute top-10 left-12 z-20 hidden md:block">
+    {/* exemple : flacon de vernis, étoile, etc. */}
+    <svg width="48" height="48" /* ... */> {/* ... */} </svg>
+  </div>
+  {/* Contenu principal */}
+  <div className="relative z-30 flex flex-col items-center text-center px-4">
+    <h2 className="text-4xl md:text-5xl font-bold mb-4 text-[#2178aa] drop-shadow-xl font-[Dancing_Script,serif]">
+      Le nail art, la douceur & la créativité à portée de main
+    </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>
+
+
+
+      {/* CARROUSEL "NOS CLIENTES AD ORENT..." */}
+      <GallerySection />
+
+      {/* À 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
+            src="/images/lisa-profil.jpg"
+            alt="Lisa, prothésiste ongulaire"
+            width={140}
+            height={140}
+            className="rounded-full border-4 border-[#7CB9E8] shadow mb-5"
+          />
+          <h4 className="text-2xl font-bold text-[#2178aa] mb-3 text-center">
+            À propos de Lisa
+          </h4>
+          <p className="text-lg text-[#2D3D53] text-center leading-relaxed">
+            Lisa, prothésiste ongulaire passionnée, formée à l’art de la manucure.
+            Toujours un sourire, une blague, et deux mascottes à vos pieds !<br />
+            <span className="block text-[#C97A44] font-semibold mt-2">Envie de paillettes et de douceur ? C’est par ici !</span>
+          </p>
+        </div>
+      </section>
+
+      {/* SECTION MASCOTTES */}
+      <section className="px-6 md:px-16 flex flex-col items-center md:flex-row md:justify-between gap-8 mt-8">
+        <div>
+          <h4 className="text-2xl font-semibold text-[#2D3D53] mb-2">
+            Voici Kiki & Ryo, les mascottes du salon !
+          </h4>
+          <p className="text-md text-[#283142]">
+            Toujours là pour accueillir les clientes avec douceur et bonne humeur !
+          </p>
+        </div>
+        <div className="flex gap-7 mt-3">
+          {/* SVG mascottes stylisées (placeholder) */}
+          <svg width="70" height="70" viewBox="0 0 80 80" fill="none">
+            <ellipse cx="40" cy="70" rx="28" ry="10" fill="#C97A44" opacity="0.15" />
+            <circle cx="40" cy="36" r="16" fill="#C97A44" />
+            <ellipse cx="34" cy="34" rx="3" ry="4" fill="#5B3A1B" />
+            <ellipse cx="46" cy="34" rx="3" ry="4" fill="#5B3A1B" />
+            <ellipse cx="40" cy="48" rx="7" ry="3" fill="#AD6131" />
+            {/* Oreilles */}
+            <ellipse cx="28" cy="22" rx="4" ry="7" fill="#C97A44" />
+            <ellipse cx="52" cy="22" rx="4" ry="7" fill="#C97A44" />
+          </svg>
+          <svg width="70" height="70" viewBox="0 0 80 80" fill="none">
+            <ellipse cx="40" cy="70" rx="28" ry="10" fill="#7CB9E8" opacity="0.15" />
+            <circle cx="40" cy="36" r="16" fill="#2178aa" />
+            <ellipse cx="36" cy="36" rx="3" ry="4" fill="#EEE" />
+            <ellipse cx="48" cy="36" rx="3" ry="4" fill="#EEE" />
+            <ellipse cx="40" cy="50" rx="7" ry="3" fill="#283142" />
+            {/* Oreilles */}
+            <ellipse cx="28" cy="22" rx="4" ry="7" fill="#2178aa" />
+            <ellipse cx="52" cy="22" rx="4" ry="7" fill="#2178aa" />
+          </svg>
+        </div>
+      </section>
+
+      {/* FOOTER */}
+      <footer className="mt-20 py-10 text-center bg-[#F8FAFC] border-t border-gray-200 text-[#C97A44]">
+        Site réalisé avec amour, paillettes et câlins de Kiki & Ryo 🐾
+      </footer>
+    </main>
  );
 }
+
+