From 2207318950b84a6ec257c4afd9210d77b91bcf2e Mon Sep 17 00:00:00 2001 From: SephiGame Date: Sun, 18 May 2025 15:10:37 +0200 Subject: [PATCH] =?UTF-8?q?Int=C3=A9gration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Début de l'intégration des versions mobiles, tablette et pc. En cours, pour le menu --- package-lock.json | 10 +++++ package.json | 3 +- public/menu.png | Bin 0 -> 11239 bytes src/app/components/header.tsx | 22 ---------- src/app/components/header/desktop.tsx | 32 ++++++++++++++ src/app/components/header/header.tsx | 25 +++++++++++ src/app/components/header/mobile.tsx | 60 ++++++++++++++++++++++++++ src/app/globals.css | 37 +++++++++++++--- src/app/layout.tsx | 10 ++--- src/app/page.tsx | 2 - tailwind.config.ts | 25 +++++++++++ 11 files changed, 189 insertions(+), 37 deletions(-) create mode 100644 public/menu.png delete mode 100644 src/app/components/header.tsx create mode 100644 src/app/components/header/desktop.tsx create mode 100644 src/app/components/header/header.tsx create mode 100644 src/app/components/header/mobile.tsx create mode 100644 tailwind.config.ts 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 0000000000000000000000000000000000000000..2645e657e6eb2370b0dc2db1bc4186685d232810 GIT binary patch literal 11239 zcmcI~dpwle+x{~%4k3IyNC=grNK-k6p;8H9fVMgCL&$HB`OzidU+|JsH^JXxz6TuqAV}&p@S(|mF8P4VT2Q@092npoFEp0_sSb*g(_rlhb~ zBhlU-Bhf5^%=6F5#g!>;oAdq@N4>mjxcgPqO?mANj~@NGhV$3_HoraA)&+hImz~LD z^YcN}Gu0|rM*2QX5eNDbhWm+O8_Z+>oBt!q)G6?;l%-Xx0%p5Rs7u?$9}4ARqD4MK zwN1{~$(Tko6$&-bt0awKq)~=pK_t}BVye*jhso~!0zVyR zzs8UJc>y|L&CD`qVhl#QsnmbEYu?$t59Ru|HPkKi5c5#DN=iR;5B0Mx>`zjJCH=m) z-w4&5y3XHxPQrJquP$4JF-0Jj+q_xa7l8+*Q_^_#&i7;01mD(bIe6>+TezFzzg?@yM`t*j{i z;pXS<l=%IxNY_dh(sw?LcOobSz0>;dDH^&Jk>EGOr)3*CW~I&m3;M^o7h-le#9SG-8qv||k8iMvZfST&U%ny-PG=QN7qcvEt7T`~N4t?T19eykemt$Mxd z{4XvItBiuJ{aCdg==b_cV|n)zJI8glgXR8Uu&f;PIqS`Wq7}Z*oxS$CR{z+bEslw*piNv#&dLMU~^e1M^7L);`=B5#h<@#Zi%uWu*U z8`KpO3Tu@f;7?r}DJ)nuXSjUEuuA3RKC@Q-`N2>24%4GJh>Y$|!taS7?4VaZiC~y^K5Yq-?Svo8@|>V(c%u*E-j^cx4S6!?_@|u zl!yPFXMx@J_%fUi7iP#dA7G*JX4A=TOGXM^!rObi;oR29vm1IchQ}UEu8(L*_IyTll(6sv<}J-RVATs#fY%6}~&M=7BNCfAef@yxmoE;H_1cv=_G+4w{WJZbq(){lJ??%1`>|KF(YZCtw zgg?ddy@ju!y;>sA=5bJ1OlTthRQ2sfs7iu3Bh{?VkOoTt3&OLpeEtbu4e{n@XnrH* zb);R8h^vgR3Edy>6%e}DU%VhN<_cHg#SlMVLp8UW9KNEM(f(Rwe5bK1_8IGWwoBL>H0Ps#4EYS`jy zMCTrUoFnAFRlxSH7iJ3g7gIS$hsLbhW*ze0osfJ;#-oS!`dbI0tei8HVGb?Tf**g? zHZimR)g=1R0OWgR;TsdeXdy0sj%yE0x~wYoNG6rzBs`MI4T$b2PGGtFH%3esQFZN@ z(u|9|C9YmqS}D?Nb6#mdS>L34R(U_E#0DktOS3JAYQ4$=O#`X+d-%uiQM3k}>c-(o@`jsgFc4jDL$;MnLC7D9_YQyUAV0+K+CEMV z4uB4|d}x($C2Hn2^?aU0-yX+7gr4Sn-IPQ;#PxFcL!e%@?690#hU`;cD8M`r_2#vS z$aQ{c-X5Zi)VlXM z)rWW%pnskvmbB1++(c+)$wtbqKQN>YyRV`}9d>CZWYpONQOMN=JohmZvHw^aRlKM6 z@g0>G3B=S^rf?DUzTMzh0#kV93KQN{=+Kcrko7JQ=i?HC-3VX&1sZ9UPG z=%k9|7KvRc7o=b)eyEfu2flnS-^Tq-5Rc! zWvL)EUS3bNgsqH8ab)Go-wB6-_$x7{urwcB}PeZ%>S6{s&Pp<#e zH}W{B-p?iQu52+?_vomPBE9vM0to((LoKGY&JY8aJ)K$#Z()~$H7d`2I$a|>QYd4` z<*KqjAuZIbI%UD3VF+SpfGL-2v`TDwB?vFPM6}P4ZFex4TEaLb2=#2s%d4L+dm_4i2+TB6uU^#>W1VmA8o~j^6oC+)mNp ztw@XC%HhHeEvSjIdthBfYf*Tw17l@{UWeToVoh6uz&gEBZPy!ey<;_>K;xvbl|-L% zmO=!*H#4=9%jGMvhvy@(?LCL4GN@yR2i;G~Cu40#q=`?jLeR|FKvWc+XoW2j;^-NL z42{`>{ko!Bc0*I0MG3q&SEL?N;Ot1Jvb3TfU4YBL?9BlZbgvL*B#WRWQ5Djxp}U1+@8vi=rr4+KHvkK|pAE`rjRt4&%NvYkuD)d0w9R{`p@BKwaUhJUiU- zzDx9>QA>Pt+ee1<*K=>?Tbj3;+nz!2?SsEeVeS44BZYbO@Mxck+)&powVpQ!AoqTi zfZ4dypP^;*x8il5k4dkcA_}iYy+Yvr*(d#-hFHdd3l@c=WM_&p+5Np*A`LZIn%}+RgJG*oua2N zxHODpW|fs~d5a9cgQ3<}=+Scq>rKZ8HsPau8XVtu-Eld;-5P=UC&Co!TxiuF%g**j zW+XjZ1?bS4SvaS`xFSn3gmRgOaD~qdOLRmsA2u7T=A6Jxi7@aJ#dgVKkVhfo;-|C7 z6EB)W9_|RC66^ zCay%Qz@5G_vrATJSxz5b=Q8{r*(QSrES3ArRY$(d1Q*^KOkLG!ZCrP*UXPi2`xwIg zEJ^cb)sg4w=Y<;-Kd5Bwe!03lJor&uk{3xYX0*Ab95CMQB|PPcl!KlZ9vO}th%`{1 z*-;Zv%K3`W7QcJCxV*M*`gz;c)iZ19W9!cCJJyQ3JZax1sAsQW_>d&VIq{|^i58Bg(=GM$ zQ0iKQG1tPx8iDri+_3M17jiBt(Cbx>{MFb(*BLeSGgRFE7t!aFE9fD?TgBeY*!qmf z7{gq6Qu){CTEfE=f-^y%TJw0H$18oE%_J$%4 z7TLd{Q`nlJ#MsT4W%9kAW{udGb7(7+pkpi{h84UMc7TUTy=s$QIN@N?c2w6ky%?)O z+7T15p(8d{4j3nN@XB(zb{l_nt9lCTf=*~jDbP93$pQrmzhjtAk_{#%PBOIk3nq9~ z`BME$>tk*#N8XUN(OcLUZDe80%4m>gS~GtYK)|4ZIQGs8z04=3O0`bXJf-S^bnK5V z&f;AMjN8rYHQ~Q!6w=hWwz2$db6GU)t~9~17ZR@EsRdvX4Ui{heT>(A((>}cnXH|d8 ze+GgG_;`KxWQ@HtYntO>d|$g2eEJVa5XC07g8SKJkr*;0*haY#phNdKRcMXfahhWf zYHZn`1dqF~`IqNtm%x8V;)~sisgCZ%Xui%jZCB~pNY)zt%5%NF+d1}rBaOvW)uB#Y zbPT!xtqbVc?r7m^Xw8rEz*es95iEDOGYB#kuF|30kYb*4)vO7@eH3_>n5arps87F> z_t^EuAS=&+{j;COx_CCa21+!CebR6qQMIKDwLc1FX{QNVmk%i-Cj%$EjCe| z%A{6RcrrH2jt z&VpkQDQtEeH=4_j<&)+zSV(wC}fn3@7p(0 zh-8@~e7isqhSMFYaP6V*4aYe&5nyk&KwS|ERiltH`vFr}1=uif-FRkU3yR^7KznsT z5uiF?vhOGD|4p6W90d=9J&YeLe6Ix!xbgB|uBE_692&9=w*)zBpayHez%|AdT%-A= zwO}D1n@B?zJJo)BNZn}kxp=$P^!SoecPza&HC1}djp+SsVNiq&pX6zF9PoD;(dK%A zt`_RYf1){(B zZnjWYf!V)W0swV5sbr4u^MzpwU!fQ*upGBcgu{PpN(D_XasSN94wOT9EA;_M%Jh`= zJra0p=i+v&8(|<{dxUW2|0tOt{sE2*RD=U(tKhW{>DQy+WE9wdlhJt>@2bT0iutjz z-5B33>=i?64rn`Y!>nM|5W0TF}+9d5wAT3s?Qusx`cdA{d~B-SoA{@|dqsG^;qgf(=LkpWjvuE(AvdLw6j zsIWx~DuHROmS?{eJUPJotsMn1ECEBiXrK9S4nh+p87(1}57i-nq8D#ki3DBbonNADn*VJsgM-XKN?xm9Oz7kpq80W;jb{apH|C*B>sYW^pqd(yTMm$*5BVi zqR|TOFvU{@CDaZikV|%HgyH(IFZ>ur!VjzKE-Q$0b9ZtE+Few-uj$o21-Y?4W=<}*Jw+^a3gd4c5bqc&yzvRPe@7NLk{ese zF>%px{7H0%0ZQ)Kfn---$Z=blhSG zLy?({v&X}AJHvVtd=(uLr3QgJRgy5R&P?mx?0UL=tf%(k(L&OpsofgYvQvfJ9LTCB=#OU%Q!e+llLA};sc?khRFOHGFc z`6zX!XIumx^@S|-P&)X5Tb272WnUTguzSc2ZGdJsaN|gta8OuEpDBJQSUNzNUUnm! zjG$JvX1e&qaz-Jkwyrkh>8u!A5B>wr`6&&4A!~c+_$tvQRW4vSaT1~TSp{~=NuA7_ zVuGMtkS1gKk~g!S#CI-nf}HkFcYJvOUtBR)dIe+HUmpd>08pN-jJ$*9t^{p#Uja%X zxN@5m?pQLZ-f#Y;Tlf4G4E=Jugpt_D1MYw`p^#Efj>syh4s1YX_g__eV>d|F0RV=% zyo2q?_}g!ux5HJ#cX^SNzWi~_8dHDCP$?q`9(sn^HG-~|HWC^UVxg3TQpw%a@WA(o zak#JlA3E+kLEAkYSQR!4OAg}`vRc}@BzUU6o9Rr)8jv5Kndo@v6iLo#v-Q6)WRr2Q zN7x6FirU11O$(dr*>a4b0xv4C_d+|`m1V3V`J2I@PiPo&dXT$?LEpuXQ}Ec=Amh1L zh*6#`8E{nJ^^~?Qv{N*7Sq_Ln2-*0hsD_sO*t2Z&EL6{0jTfb%-nfNL zgTw#Ey>`3-+%*<_N)Un6?0*ZS;M~^-s?l*zS`SZohl*6W%f*yQ0he8H+b4E#1T*!s zd2QRk>;`)NuF_wg3zS^LiSebUtBs};|MBOJz0;a@%(LOT_N^f?WvhNMhPc6MtbyW( zLjz|jl(#u1E*kU#J$*Ok)S#d8HmwfTbGH|p&yZ63de5F_)x@!bwE#o;8woqKr@iA1 z$8Nn;)IW1$Sc~w}UF#ifrkxv^s~uCk23Z>2>OVdFOumR9HCQOW(F8JE)9)yG_eW6l zc@S8s55!EMG2H|f?&l0muD3ly)B%9NaTGhG`BT8G{wZKCL}hCX=TGWjLs&_&uCbCk zQ3uISCmvVRduKK=)Lq>JmnrrgXGp+znfo@@35JlI^Nd>uqBxHg4ZC=KK&3;)~?rAQgnrj;M{_t(kw8mEYS zfa{0$5kqEH!nNB4#vM@b4$AA*Khj@#i%Z*VKuu(IqpGO$CqWTa5QC&++tB8H^8?|( zC*8CUbuLC8M&I|()e6G3z@qe^)v2Nk8-T&jcPHarJTyxbe;2=Z#kdONbQ{I&1z$25yvB+6DHT<|q*wV_eOvYR z@L!ET6~7>}z_5MoJ#3KrEvD?5sw5qFE2DjKebQ4LY>p&;{A)o6C={uGa>?+38s5w- zsC#!#|AJzGb|CPr`yt*H#i2=oZF#W3Q1k$b%={*8$n}Z13sGXUNCs=w`d97ULZV_ibkMW%;<+ef-7cYk4T^6yd{;2B>I z28IDjVf%mJcpS8e`S(9uz)l}J54cj|ihp7B_C&xKYO@e+>=(_5MKJoj$Zt&yf7dcE zp!EDkPpGk=<8TWi^(``hLzUmCs5b3IngcY1m0HRFvK*K4uRq@qF~4;W_?OD|gHTn! zLb(FK|K_y~474+_q~ii3Fs&c*+5)Em(|WBe^d{Kk9|9pR3faJ;f!e>fkVIQ0Huc|K zkl+@EQC|bGkmZ=MbzK}8X+n5d=RYfSA|CJBU=!90#PgghD7B1)#9!MDs3YVLM4>i% z((e>Q3Ig5F4p{(d@axg{D8?LeG8F&CT5wP;+9d6VUe+!&0;(y1OMr?fAQ`2C#us!c9OcGFmc{MY^FSH@#nPc_puMf|KmBhHg9fEGNJCm* zaoTb*P0pPIH9>1`|MJRIRHCqP9DdJ=?+)T`sGvjv0_2gGi1-B+{lR+jd?V%N+o7F^ zxMhHdTR$okK-q^vm+;)d4FtOE=2i3S+IzMk2cBa;E(ejmvn6(f_d7A(PA*q@_FI^N z=Fy-`v&X$8<=QwF=yFH}r%YfmV^yJdP@hkZWGZtN8Wt)s1l(-oK;HQR!=HC4kjR`` zL1LwEXGRWgAvXNpu2gxOw~ugN&vfP*h|*(7|H!8x0?vZ0hE@PU+&mT4AOxgYhjrXx zH845soZ$}%DjNL)+%<`-#ip!p+4YfgGkRZ#Na31UGPOVdhUM=|>4pGvN9iaGB?q zbcC$L>A}_@sGqx)uC_WUn+Q%FR(cN|A<6L4N$%mMct;d zvj_cInWHY5@H5YU*G2biR5tbU6ZL(ygyu20Sc3ImPv<{tJ^Xw}kFahG;WUWJKRJXP zBXr^-xDtiI8vwZQ9;s07MDT&m1ub7gP}DT=N2|pI>j0Ydvx7UyCpPBv*%C$lP%&DX z-6Ce_T$FuULR9}Lq*i@`McL5~8V?*Quw{cE%Jv`oS*uk87xly@woiF;(8QuUwI@Uu zE1uoC}kUQvHSB6xK`bg-+PhcbJ6FvV;6&xwHxhh3(|FFgGQy4=&> z{Td{&La)xq%D8Hhcal|nyz;TxQA@WU6Hu#2HVBTs(zBU+nIWSQy0X;i=M2yPo4$r~~a&HaKOrz{kRO8QP z2jYM)Ju?w&M_0*$qHkYD!!&8SIm9w?4hS`X(a`hPVo?I|fIGom5lLi-h;dqymsF>c zCbTdbDA*4))3<%obv1d(@L;kWr_x@gL??m^jthnL9#VjX1`cbYsbWt8n^y}QVm-E$P?MBmNg?_$|UXybK1&)JLUlP0b tO?Pzit_Bzk=MF5)?!SBYw1vbYCaND}-IsCO2`=SA=KHMo7VL4o_CK;V-Z20G literal 0 HcmV?d00001 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 +
+
+
    +
  • Accueil
    • +
  • Qui suis-je ?
    • +
  • Mes prestations
    • +
  • Mes formations
    • +
  • Me contacter
    • +
+
+ + ) +} + +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}