Feedback

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.next
+.github

README.md

@@ -0,0 +1 @@
+[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-22041afd0340ce965d47ae6ef1cefeee28c7c493a6346c4f15d667ab976d596c.svg)](https://classroom.github.com/a/c9R-q-e1)

app/benevole/page.jsx

@@ -0,0 +1,52 @@
+import Comment from '../components/comment';
+import VolunteerForm from '../components/volunteer-form';
+import WhyVolunteer from '../components/why-volunteer';
+import '../styles/globals.css';
+import Link from "next/link"
+
+
+
+export default function Benevole() {
+    return (<main>
+        <header className='header-volunteer'>
+            <div className='presentation'>
+                <h1>DEVENIR BÉNÉVOLE</h1>
+                <p>Rejoignez notre communauté et donnez du sens à votre temps libre. En devenant bénévole chez Adaence, vous contribuez à rétablir des liens humains essentiels avec nos aînés.</p>
+            </div>
+            <img className='background-img' src='/images/hannah-busing-Zyx1bK9mqmA-unsplash.jpg'></img>
+            <VolunteerForm />
+        </header>
+        <WhyVolunteer />
+        <section className='testimony'>
+            <h1>TÉMOIGNAGES DE BÉNÉVOLES</h1>
+            <p>Découvrez ce que nos bénévoles ont à dire sur leur expérience avec Adaence</p>
+            <Comment
+                name="Marie D."
+                duration="1 an"
+                quote="J'ai commencé à rendre visite à Germaine il y a un an. Ce qui devait être une simple visite hebdomadaire est devenu une véritable amitié. Nous partageons des recettes, des histoires et beaucoup de rires. Cette expérience m’a ouvert les yeux sur la richesse que représente l’échange intergénérationnel."
+                imageUrl="./images/anil-sharma-vssw0Ad6TFg-unsplash.jpg"
+            />
+            <Comment 
+                name="Thomas L."
+                duration="6 mois"
+                quote={`Je cherchais une façon de m'engager localement et Adaence m'a permis de rencontrer Robert, un ancien menuisier passionné. Nos promenades hebdomadaires sont
+devenues des moments que j'attends avec impatience. J'apprends énormément de son expérience et de sa vision de la vie.`}
+                imageUrl="./images/diego-hernandez-MSepzbKFz10-unsplash.jpg"
+            />
+        </section>
+        <section className="make-difference">
+            <h1>DES QUESTIONS ?</h1>
+            <p>Nous sommes là pour répondre à toutes vos interrogations concernant le bénévolat chez Adaence.
+            N'hésitez pas à nous contacter pour en savoir plus sur notre démarche.</p>
+            <div className="links">
+                <div className="visite">
+                    <Link href="#">Foire aux questions</Link>
+                </div>
+                <div className="don">
+                    <Link href="#">Contactez-nous</Link>
+                </div>
+
+            </div>
+        </section>
+    </main>)
+}

app/components/card.jsx

@@ -0,0 +1,9 @@
+export default function Card (props)  {
+    return (
+        <div className="card">
+        <img src={props.imgUrl} alt="" width={32} />
+                    <h2>{props.title}</h2>
+                    <p>{props.text}</p>
+        </div>
+    )
+}

app/components/comment.jsx

@@ -0,0 +1,19 @@
+'use client'
+import '../styles/comment.css'
+
+export default function Comment({ name, duration, quote, imageUrl }) {
+    return (
+        <div className="comment-card">
+            <div className="comment-avatar">
+                <img src={imageUrl} alt={name} />
+                <div className="comment-content">
+                    <p className="comment-name">{name}</p>
+                    <p className="comment-role">Bénévole depuis {duration}</p>
+                </div>
+            </div>
+            <blockquote className="comment-quote">
+                ❝{quote}❞
+            </blockquote>
+        </div>
+    );
+}

app/components/don.jsx

@@ -0,0 +1,9 @@
+'use client'
+
+import Link from "next/link"
+
+export default function Don () {
+    return (<div className="don">
+            <Link href="/don">Faire un don 🫶 </Link>
+    </div>)
+}

app/components/footer.jsx

@@ -0,0 +1,56 @@
+import {
+    Facebook,
+    Instagram,
+    Linkedin,
+    Twitch
+} from 'lucide-react';
+
+import '../styles/footer.css'
+
+
+export default function Footer() {
+    return (
+        <footer className="footer">
+            <div className="footer-content">
+                <div className="footer-column">
+                    <h3 className="footer-title">ADAENCE</h3>
+                    <p className="footer-text">
+                        Notre mission est de recréer du lien avec les personnes âgées isolées,
+                        en leur offrant des moments de partage, d'écoute et de présence.
+                    </p>
+                    <div className="footer-icons">
+                        <Facebook size={20} />
+                        <Instagram size={20} />
+                        <Linkedin size={20} />
+                        <Twitch size={20} />
+                    </div>
+                </div>
+
+                <div className="footer-column">
+                    <h3 className="footer-title">INFORMATIONS UTILES</h3>
+                    <ul className="footer-list">
+                        <li><a href="#">FAQs</a></li>
+                        <li><a href="#">Liste des activités</a></li>
+                        <li><a href="#">Nous contacter</a></li>
+                        <li><a href="#">Mentions légales</a></li>
+                    </ul>
+                </div>
+
+                <div className="footer-column">
+                    <h3 className="footer-title">CONTACT</h3>
+                    <p className="footer-text">
+                        116 Rue du Faubourg Saint-Martin<br />
+                        75010 Paris, France<br />
+                        Email: <a href="mailto:[email protected]">[email protected]</a><br />
+                        Tél: +33 1 23 45 67 89
+                    </p>
+                </div>
+            </div>
+
+            <div className="footer-bottom">
+                © 2025 Adaence. Tous droits réservés. <br />
+                Ce site a été développé dans le cadre d'un projet pour ADA Tech School.
+            </div>
+        </footer>
+    );
+}

app/components/header.jsx

@@ -0,0 +1,17 @@
+'use client'
+
+import Searchbar from './search-bar';
+
+export default function Header() {
+
+    return (
+        <header className='header-home'>
+            <div className='presentation'>
+                <h1>Rétablissons les liens</h1>
+                <p>Et si vous offriez un peu de votre temps à ceux qui en ont le plus besoin ? Prenez rendez-vous pour partager un moment avec une personne agée isolée</p>
+            </div>
+            <img className='background-img' src='./images/fiqih-pradana-qm-SgY--sVg-unsplash.jpg'></img>
+            <Searchbar />
+        </header>
+    )
+}

app/components/how.jsx

@@ -0,0 +1,33 @@
+import Card from "./card";
+
+
+export default function How() {
+    return (
+
+        <section className="how">
+            <h1>comment ça marche</h1>
+            <p>Offrir un peu de votre temps, c'est offrir beaucoup. Découvrez comment planifier une visite en
+                toute simplicité.</p>
+            <div className="cards">
+                <Card imgUrl="./images/loupe.png"
+                title="1. Choisissez une rencontre"
+                text="Parcourez les profils de nos aînés et trouvez la personne avec qui vous aimeriez partager un moment chaleureux."
+                />
+                <Card imgUrl="./images/memo.png"
+                title="2. Remplissez le formulaire"
+                text="Indiquez vos disponibilités et vos envies. Cela nous aide à organiser une rencontre adaptée et en toute confiance."
+                />
+                 <Card imgUrl="./images/waving.png"
+                title="3. Partagez un moment"
+                text="Rendez visite à la personne âgée dans un cadre bienveillant. Une discussion, une balade ou simplement l'aider à une tâche ! Chaque moment compte." 
+                />
+                <Card 
+                imgUrl="./images/heart.png"
+                title="4. Créez du lien"
+                text="Si le courant passe, vous pouvez revenir ! Ensemble, tissons des liens durables et combattons l'isolement pas à pas."
+                />
+
+            </div>
+        </section>
+    )
+}

app/components/make-difference.jsx

@@ -0,0 +1,22 @@
+import Don from "./don";
+import Link from "next/link";
+export default function MakeDifference() {
+    return (
+        <section className="make-difference">
+            <h1>PRÊT-E À FAIRE LA DIFFÉRENCE ?</h1>
+            <p>Offrez un peu de votre temps, partagez un moment, créez du lien ... Chaque présence compte. En
+                tendant la main à une personne âgée, vous lui offrez bien plus qu'une visite : une vraie bouffée de
+                chaleur humaine</p>
+            <div className="links">
+                <div className="visite">
+                    <Link href="/visite">Programmer une visite</Link>
+                </div>
+                <Don />
+                <div className="volunteer">
+                    <Link href="/benevole">Devenir bénévole</Link>
+                </div>
+
+            </div>
+        </section>
+    )
+}

app/components/navbar.jsx

@@ -0,0 +1,59 @@
+'use client'
+'use client'
+
+import Link from "next/link";
+import { useState } from "react";
+import { House, Accessibility, BookOpen, HandHelping, Menu, X } from 'lucide-react';
+import Don from "./don";
+import { usePathname } from 'next/navigation';
+import "../styles/navbar.css";
+
+export default function Navbar() {
+    const pathname = usePathname();
+    const [menuOpen, setMenuOpen] = useState(false);
+
+    const toggleMenu = () => setMenuOpen(!menuOpen);
+    const closeMenu = () => setMenuOpen(false);
+
+    return (
+        <nav className="navbar">
+            <div className="navbar-title">
+                🍵Ada<span>ence</span>
+            </div>
+
+            <button className="burger" onClick={toggleMenu}>
+                {menuOpen ? <X size={28} /> : <Menu size={28} />}
+            </button>
+
+            <ul className={`nav-links ${menuOpen ? "open" : ""}`}>
+                <li>
+                    <Link href="/" onClick={closeMenu} className={pathname === "/" ? "disabled" : ""}>
+                        <House /> Accueil
+                    </Link>
+                </li>
+                <li>
+                    <Link href="/visite" onClick={closeMenu} className={pathname === "/visite" ? "disabled" : ""}>
+                        <Accessibility /> Je rends visite
+                    </Link>
+                </li>
+                <li>
+                    <Link href="/guide" onClick={closeMenu}>
+                        <BookOpen /> Guide du partage
+                    </Link>
+                </li>
+                <li>
+                    <Link href="/benevole" onClick={closeMenu} className={pathname === "/benevole" ? "disabled" : ""}>
+                        <HandHelping /> Devenir bénévole
+                    </Link>
+                </li>
+                <li className="don-mobile">
+                    <Don />
+                </li>
+            </ul>
+
+            <div className="don-desktop">
+                <Don />
+            </div>
+        </nav>
+    );
+}

app/components/persons.jsx

@@ -0,0 +1,25 @@
+import PhotoGrid from './photo-grid';
+import Link from 'next/link';
+export default function Persons () {
+    const images = [
+        './images/danie-franco-ClHY-KyvI1M-unsplash.jpg',
+        './images/tim-mossholder-FRPbQvAwY10-unsplash.jpg',
+        './images/tatiana-zanon-MMhazsT2wtM-unsplash.jpg',
+        './images/quentin-mahe-a6jCS61X1Hg-unsplash.jpg',
+        './images/vladimir-soares-z_8Jqe0Cc-s-unsplash.jpg',
+        './images/shimo-yann-7nTFrV1xQGE-unsplash.jpg',
+        './images/michael-matveev-Bk8zT4gLLt0-unsplash.jpg',
+        './images/mohammad-samir-huHXKc_usoA-unsplash.jpg'
+      ]
+    return (
+    <section className='intro'>
+        <h1>Les personnalité à rencontrer</h1>
+        <p>Feuilletez les visages de celles et ceux qui attendent simplement un peu de votre temps. Chaque
+        sourire porte une histoire, chaque rencontre est une promesse.</p>
+      <PhotoGrid images={images} />
+      <div className='visite'>
+      <Link href="/visite">Voir tous les profils</Link>
+      </div>
+    </section>
+    );
+}

app/components/photo-grid.jsx

@@ -0,0 +1,22 @@
+'use client'
+import '../styles/photo-grid.css';
+
+const areaNames = [
+  'img1', 'img2', 'img3', 'img4',
+  'img5', 'img6', 'img7', 'img8'];
+
+export default function PhotoGrid({ images }) {
+    return (
+      <div className="photo-grid">
+        {images.map((image, index) => (
+         <div
+          key={index}
+          className="photo-item"
+          style={{ gridArea: areaNames[index] }}
+        >
+            <img src={image} alt={`person-${index+1}`} />
+          </div>
+        ))}
+      </div>
+    );
+  }