src/
├── app/
│   ├── page.tsx
│   ├── globals.css
│
├── components/
│   ├── Navbar.tsx
│   ├── Sidebar.tsx
│   ├── ImageCard.tsx
│   └── Gallery.tsx
src/components/Navbar.tsx

export default function Navbar(){

return(
<header className="navbar">

<h1>
🌸 CuteCloud
</h1>

<input
placeholder="🔍 Chercher des images cute..."
/>

<button>
💗 Connexion
</button>

</header>
)

}src/components/Sidebar.tsx

export default function Sidebar(){

return(

<aside className="sidebar">

<p>🏠 Accueil</p>

<p>🌸 Explorer</p>

<p>❤️ Favoris</p>

<p>📁 Collections</p>

<p>👤 Profil</p>

<p>⚙️ Paramètres</p>

</aside>

)

}src/components/ImageCard.tsx

type Props={
image:string,
title:string
}


export default function ImageCard({
image,
title
}:Props){

return(

<div className="card">

<img src={image}/>

<h3>
{title}
</h3>

<div className="actions">

<button>
❤️
</button>

<button>
📌
</button>

</div>

</div>

)

}src/components/Gallery.tsx

import ImageCard from "./ImageCard";


const images=[

{
image:"https://picsum.photos/400/600",
title:"🌸 Pink Dream"
},

{
image:"https://picsum.photos/400/500",
title:"🧸 Cute Bear"
},

{
image:"https://picsum.photos/400/700",
title:"🎀 Coquette"
},

{
image:"https://picsum.photos/400/450",
title:"🌷 Flowers"
}

]


export default function Gallery(){

return(

<div className="gallery">

{
images.map((img,index)=>(

<ImageCard
key={index}
image={img.image}
title={img.title}
/>

))
}

</div>

)

}src/app/page.tsx

import Navbar from "@/components/Navbar";
import Sidebar from "@/components/Sidebar";
import Gallery from "@/components/Gallery";


export default function Home(){

return(

<div>

<Navbar/>

<div className="layout">

<Sidebar/>

<main>

<h2>


<Gallery/>

</main>

</div>


</div>

)

}
@tailwind base;
@tailwind components;
@tailwind utilities;


body{

background:#fff5fa;

font-family:
Arial,
sans-serif;

}


.navbar{

height:80px;

background:white;

display:flex;

align-items:center;

justify-content:space-around;

box-shadow:
0 5px 20px #ffd1e6;

position:sticky;

top:0;

}


.navbar h1{

color:#ff79b8;

}


.navbar input{

padding:15px;

width:300px;

border-radius:30px;

border:none;

background:#ffe4f1;

}


.navbar button{

background:#ff9dcc;

border:none;

padding:12px 25px;

border-radius:30px;

color:white;

}


.layout{

display:flex;

}


.sidebar{

width:220px;

padding:30px;

background:white;

min-height:100vh;

}


.sidebar p{

padding:15px;

border-radius:20px;

cursor:pointer;

}


.sidebar p:hover{

background:#ffe3f1;

}


main{

padding:30px;

flex:1;

}


.gallery{

columns:4 250px;

column-gap:20px;

}


.card{

background:white;

border-radius:25px;

overflow:hidden;

margin-bottom:20px;

box-shadow:
0 5px 20px #ffd6e8;

break-inside:avoid;

}


.card img{

width:100%;

}


.card h3{

color:#ff72b2;

padding:10px;

}


.actions{

display:flex;

justify-content:space-around;

padding:10px;

}


.actions button{

border:none;

background:#ffe8f3;

border-radius:20px;

padding:10px;

}
import { initializeApp } from "firebase/app";
import { 
getAuth 
} from "firebase/auth";

import {
getFirestore
} from "firebase/firestore";

import {
getStorage
} from "firebase/storage";


const firebaseConfig = {

apiKey:"TON_API_KEY",

authDomain:"TON_DOMAINE",

projectId:"TON_PROJECT_ID",

storageBucket:"TON_STORAGE",

messagingSenderId:"TON_ID",

appId:"TON_APP_ID"

};


const app = initializeApp(firebaseConfig);


export const auth = getAuth(app);

export const db = getFirestore(app);

export const storage = getStorage(app);
"use client";

import {useState} from "react";

import {
createUserWithEmailAndPassword
} from "firebase/auth";

import {auth} from "@/lib/firebase";


export default function Register(){

const [email,setEmail]=useState("");

const [password,setPassword]=useState("");



async function register(){

await createUserWithEmailAndPassword(
auth,
email,
password
);

alert("Bienvenue dans CuteCloud 🌸");

}



return(

<div className="auth">


<h1>
🎀 Créer un compte
</h1>


<input

placeholder="Email"

onChange={
e=>setEmail(e.target.value)
}

/>


<input

placeholder="Mot de passe"

type="password"

onChange={
e=>setPassword(e.target.value)
}

/>


<button onClick={register}>

Créer mon compte 💗

</button>


</div>

)

}"use client";


import {useState} from "react";


import {
signInWithEmailAndPassword
}
from "firebase/auth";


import {
auth
}
from "@/lib/firebase";



export default function Login(){


const [email,setEmail]=useState("");

const [password,setPassword]=useState("");



async function login(){


await signInWithEmailAndPassword(

auth,

email,

password

);


alert("Connexion réussie 🌸");


}



return(

<div className="auth">


<h1>
🌸 Connexion
</h1>


<input

placeholder="Email"

onChange={
e=>setEmail(e.target.value)
}

/>


<input

type="password"

placeholder="Mot de passe"

onChange={
e=>setPassword(e.target.value)
}

/>


<button onClick={login}>

Entrer 💕

</button>


</div>

)


}.auth{

min-height:100vh;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:20px;

}


.auth h1{

color:#ff75b5;

font-size:35px;

}


.auth input{

padding:15px;

width:300px;

border-radius:30px;

border:none;

background:#ffe5f2;

}


.auth button{

padding:15px 40px;

border:none;

border-radius:30px;

background:#ff8fc8;

color:white;

font-size:18px;

}