diff --git a/package-lock.json b/package-lock.json index bcd74d3..c123182 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 2f4d4fb..2ce00e5 100644 --- a/package.json +++ b/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", diff --git a/public/menu.png b/public/menu.png new file mode 100644 index 0000000..2645e65 Binary files /dev/null and b/public/menu.png differ diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx deleted file mode 100644 index dd55de9..0000000 --- a/src/app/components/header.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import Image from "next/image" -import Link from "next/link" - -const Header = () => { - - return ( -
-
- {"Ryo"} - {"Ryo"} -
-
- Monelia Nails -
-
- -
-
- ) -} - -export default Header \ No newline at end of file diff --git a/src/app/components/header/desktop.tsx b/src/app/components/header/desktop.tsx new file mode 100644 index 0000000..d42e901 --- /dev/null +++ b/src/app/components/header/desktop.tsx @@ -0,0 +1,32 @@ +import Image from "next/image" +import Link from "next/link" + +const DesktopHeader = () => { + return ( + <> +
+
+ {"Ryo"} + {"Ryo"} +
+
+ Se connecter · S'inscrire +
+
+
+ Monelia Nails +
+
+ +
+ + ) +} + +export default DesktopHeader \ No newline at end of file diff --git a/src/app/components/header/header.tsx b/src/app/components/header/header.tsx new file mode 100644 index 0000000..46208a6 --- /dev/null +++ b/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 ( +
+
+ +
+
+ +
+
+ ) +} + +export default Header \ No newline at end of file diff --git a/src/app/components/header/mobile.tsx b/src/app/components/header/mobile.tsx new file mode 100644 index 0000000..5a986d8 --- /dev/null +++ b/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: , + label: 'Menu' + }, + { + id: "home", + icon: , + label: "Accueil" + }, + { + id: "user", + icon: , + label: "Profil" + }, + +] + +const MobileHeader = () => { + const [menuSelected, setMenuSelected] = useState('menu') + const [openMenu, setOpenMenu] = useState(false) + const activeIndex = items.findIndex((item) => item.id === menuSelected); + + return ( +
+
+
+ + +
+ {items.map((item) => ( +
setMenuSelected(item.id)} + className="flex flex-col items-center justify-center relative" + > +
{item.icon}
+ + {item.label} + +
+ ))} +
+ ) +} + +export default MobileHeader \ No newline at end of file diff --git a/src/app/globals.css b/src/app/globals.css index a25b40e..337d48a 100644 --- a/src/app/globals.css +++ b/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; -} - -header { - background: var(--color-menu); - height: 10vh; + font-family: "Grupo", Arial, Helvetica, sans-serif; } 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%); } \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 36ea88f..24d561f 100644 --- a/src/app/layout.tsx +++ b/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 ( - +
- {children} + {children}