diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1aa1087 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +.next +.github diff --git a/README.md b/README.md new file mode 100644 index 0000000..3b5ba47 --- /dev/null +++ b/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) diff --git a/app/benevole/page.jsx b/app/benevole/page.jsx new file mode 100644 index 0000000..eb91d06 --- /dev/null +++ b/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 (
+
+
+

DEVENIR BÉNÉVOLE

+

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.

+
+ + +
+ +
+

TÉMOIGNAGES DE BÉNÉVOLES

+

Découvrez ce que nos bénévoles ont à dire sur leur expérience avec Adaence

+ + +
+
+

DES QUESTIONS ?

+

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.

+
+
+ Foire aux questions +
+
+ Contactez-nous +
+ +
+
+
) +} \ No newline at end of file diff --git a/app/components/card.jsx b/app/components/card.jsx new file mode 100644 index 0000000..271984c --- /dev/null +++ b/app/components/card.jsx @@ -0,0 +1,9 @@ +export default function Card (props) { + return ( +
+ +

{props.title}

+

{props.text}

+
+ ) +} \ No newline at end of file diff --git a/app/components/comment.jsx b/app/components/comment.jsx new file mode 100644 index 0000000..fb51abc --- /dev/null +++ b/app/components/comment.jsx @@ -0,0 +1,19 @@ +'use client' +import '../styles/comment.css' + +export default function Comment({ name, duration, quote, imageUrl }) { + return ( +
+
+ {name} +
+

{name}

+

Bénévole depuis {duration}

+
+
+
+ ❝{quote}❞ +
+
+ ); +} \ No newline at end of file diff --git a/app/components/don.jsx b/app/components/don.jsx new file mode 100644 index 0000000..612769c --- /dev/null +++ b/app/components/don.jsx @@ -0,0 +1,9 @@ +'use client' + +import Link from "next/link" + +export default function Don () { + return (
+ Faire un don 🫶 +
) +} \ No newline at end of file diff --git a/app/components/footer.jsx b/app/components/footer.jsx new file mode 100644 index 0000000..f5bff13 --- /dev/null +++ b/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 ( + + ); +} diff --git a/app/components/header.jsx b/app/components/header.jsx new file mode 100644 index 0000000..243a3d3 --- /dev/null +++ b/app/components/header.jsx @@ -0,0 +1,17 @@ +'use client' + +import Searchbar from './search-bar'; + +export default function Header() { + + return ( +
+
+

Rétablissons les liens

+

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

+
+ + +
+ ) +} \ No newline at end of file diff --git a/app/components/how.jsx b/app/components/how.jsx new file mode 100644 index 0000000..2388840 --- /dev/null +++ b/app/components/how.jsx @@ -0,0 +1,33 @@ +import Card from "./card"; + + +export default function How() { + return ( + +
+

comment ça marche

+

Offrir un peu de votre temps, c'est offrir beaucoup. Découvrez comment planifier une visite en + toute simplicité.

+
+ + + + + +
+
+ ) +} \ No newline at end of file diff --git a/app/components/make-difference.jsx b/app/components/make-difference.jsx new file mode 100644 index 0000000..76ec6dd --- /dev/null +++ b/app/components/make-difference.jsx @@ -0,0 +1,22 @@ +import Don from "./don"; +import Link from "next/link"; +export default function MakeDifference() { + return ( +
+

PRÊT-E À FAIRE LA DIFFÉRENCE ?

+

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

+
+
+ Programmer une visite +
+ +
+ Devenir bénévole +
+ +
+
+ ) +} \ No newline at end of file diff --git a/app/components/navbar.jsx b/app/components/navbar.jsx new file mode 100644 index 0000000..f8bd9e5 --- /dev/null +++ b/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 ( + + ); +} \ No newline at end of file diff --git a/app/components/persons.jsx b/app/components/persons.jsx new file mode 100644 index 0000000..05d67e8 --- /dev/null +++ b/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 ( +
+

Les personnalité à rencontrer

+

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.

+ +
+ Voir tous les profils +
+
+ ); +} \ No newline at end of file diff --git a/app/components/photo-grid.jsx b/app/components/photo-grid.jsx new file mode 100644 index 0000000..c8b9ff7 --- /dev/null +++ b/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 ( +
+ {images.map((image, index) => ( +
+ {`person-${index+1}`} +
+ ))} +
+ ); + } \ No newline at end of file diff --git a/app/components/search-bar.jsx b/app/components/search-bar.jsx new file mode 100644 index 0000000..fb85301 --- /dev/null +++ b/app/components/search-bar.jsx @@ -0,0 +1,80 @@ +'use client' +import '../styles/search-bar.css' +import { usePathname, useRouter, useSearchParams } from 'next/navigation' +import { useState, useEffect } from 'react'; + +export default function Searchbar({ num, onChange }) { + const pathname = usePathname() + const router = useRouter() + const searchParams = useSearchParams() + + const [formMoment, setFormMoment] = useState('') + const [formLoc, setFormLoc] = useState('') + + useEffect(() => { + const moment = searchParams.get('moment') || ''; + const localisation = searchParams.get('localisation') || ''; + setFormMoment(moment); + setFormLoc(localisation); + }, [searchParams]); + + const options = ["Un repas", "Un café/thé", "Une promenade", "Une sortie culturelle", "Autre activité"]; + + const handleSubmit = (e) => { + e.preventDefault() + + const params = new URLSearchParams() + if (formMoment) params.set('moment', formMoment) + if (formLoc) params.set('localisation', formLoc) + + if (pathname === '/visite') { + router.replace(`/visite?${params.toString()}`) + onChange({ moment: formMoment, localisation: formLoc }) + } else { + router.push(`/visite?${params.toString()}`) + } + } + + const handleReset = () => { + setFormMoment('') + setFormLoc('') + onChange({ moment: '', localisation: '' }) + router.replace(`/visite`) + } + + return ( +
+
+
+ + +
+
+ + setFormLoc(e.target.value)} + /> +
+ +
+
+

{num} moments trouvés

+

Réinitialiser les filtres

+
+
+ ) +} diff --git a/app/components/user-card.jsx b/app/components/user-card.jsx new file mode 100644 index 0000000..3bffd56 --- /dev/null +++ b/app/components/user-card.jsx @@ -0,0 +1,21 @@ +'use client' + +export default function UserCard (props) { + const handleClick = () => { + console.log(`name : ${props.firstname} | Moment Favori : ${props.type}`) + } + return ( +
+
+ + +
+

{props.type}

+

{props.firstname}

+

{props.job} · {props.age} ans

+

{props.city}

+

{props.description}

+
Programmer un moment
+
+ ); +} \ No newline at end of file diff --git a/app/components/users.jsx b/app/components/users.jsx new file mode 100644 index 0000000..2f24fd7 --- /dev/null +++ b/app/components/users.jsx @@ -0,0 +1,17 @@ +'use client' + +import UserCard from "./user-card" + +const Users = ({ users , ref}) => { + + return ( +
+ {users.map((user, index) => ( + + + ))} +
+ ) +}; + +export default Users; diff --git a/app/components/volunteer-form.jsx b/app/components/volunteer-form.jsx new file mode 100644 index 0000000..ee3af5e --- /dev/null +++ b/app/components/volunteer-form.jsx @@ -0,0 +1,137 @@ +'use client' +import '../styles/volunteer-form.css' + +import { useState } from 'react'; + +export default function VolunteerForm() { + const options = ["une fois par semaine", "une fois par mois", "une fois par trimestre", "une fois par an"]; + const [formData, setFormData] = useState({ + firstName: '', + lastName: '', + email: '', + city: '', + zipCode: '', + dispo: '', + motivation: '' + }); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData(prev => ({ + ...prev, + [name]: value + })); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + try { + console.log(formData) + const response = await fetch('https://myapp-wlng.onrender.com/volunteers', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(formData) + }); + + const result = await response.json() + console.log(result); + } catch (err) { + console.error(err); + } + }; + + return ( +
+

FORMULAIRE D'INSCRIPTION

+

Remplissez ce formulaire pour rejoindre notre reseau de benevoles. Nous vous + contacterons rapidement pour vous présenter les prochaines étapes.

+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ +