Intégration
Début de l'intégration des versions mobiles, tablette et pc. En cours, pour le menu
This commit is contained in:
parent
a13c507ad0
commit
2207318950
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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 {
|
||||
|
|
@ -57,3 +63,20 @@ 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%);
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import Image from "next/image";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Loading…
Reference in New Issue