884 lines
28 KiB
Plaintext
884 lines
28 KiB
Plaintext
```css
|
||
// path: src/App.css
|
||
#root {
|
||
max-width: 1280px;
|
||
min-height: 100vh !important;
|
||
}
|
||
|
||
/* html * {
|
||
cursor: none;
|
||
} */
|
||
|
||
|
||
@keyframes logo-spin {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
a:nth-of-type(2) .logo {
|
||
animation: logo-spin infinite 20s linear;
|
||
}
|
||
}
|
||
|
||
```
|
||
|
||
```tsx
|
||
// path: src/App.tsx
|
||
import gsap from "gsap";
|
||
import "./App.css";
|
||
import Router from "./router";
|
||
|
||
gsap.config({
|
||
nullTargetWarn: false,
|
||
});
|
||
|
||
function App() {
|
||
return <Router />;
|
||
}
|
||
|
||
export default App;
|
||
```
|
||
|
||
```tsx
|
||
// path: src/components/website/BackHomeButton.tsx
|
||
import classNames from "classnames";
|
||
import { Link } from "react-router-dom";
|
||
|
||
interface BackHomeButtonProps {
|
||
className?: string;
|
||
}
|
||
|
||
const BackHomeButton: React.FC<BackHomeButtonProps> = ({ className }) => {
|
||
return (
|
||
<div
|
||
className={classNames(
|
||
className,
|
||
"absolute right-2 top-4 md:top-10 w-10 md:w-[unset] z-[1000]"
|
||
)}
|
||
>
|
||
<Link to="/">
|
||
<img src="/assets/website/link acceuil.png" alt="title" />
|
||
</Link>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default BackHomeButton;
|
||
```
|
||
|
||
```css
|
||
// path: src/index.css
|
||
@import url("https://fonts.googleapis.com/css2?family=Underdog&display=swap");
|
||
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
.website {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
inset: 0;
|
||
background-color: white;
|
||
}
|
||
|
||
p {
|
||
font-family: "Underdog", system-ui;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
font-style: normal;
|
||
color: #76978C;
|
||
|
||
@apply md:text-2xl;
|
||
@apply lg:text-2xl;
|
||
@apply 2xl:text-4xl;
|
||
}
|
||
|
||
:root {
|
||
font-family: "Underdog", system-ui;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
color-scheme: light dark;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
background-color: white;
|
||
|
||
font-synthesis: none;
|
||
text-rendering: optimizeLegibility;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
@media (prefers-color-scheme: light) {
|
||
:root {
|
||
color: #213547;
|
||
background-color: #ffffff;
|
||
}
|
||
a:hover {
|
||
color: #747bff;
|
||
}
|
||
button {
|
||
background-color: #f9f9f9;
|
||
}
|
||
}
|
||
|
||
@keyframes jaggedTilt {
|
||
0% {
|
||
transform: rotate(-5deg);
|
||
}
|
||
49% {
|
||
transform: rotate(-5deg);
|
||
}
|
||
50% {
|
||
transform: rotate(5deg);
|
||
}
|
||
99% {
|
||
transform: rotate(5deg);
|
||
}
|
||
100% {
|
||
transform: rotate(-5deg);
|
||
}
|
||
}
|
||
|
||
.jagged-tilt:hover {
|
||
animation: jaggedTilt 0.5s ease-in-out infinite;
|
||
scale: 1.1;
|
||
}
|
||
|
||
@keyframes tinyJaggedTilt {
|
||
0% {
|
||
transform: rotate(-2deg);
|
||
}
|
||
49% {
|
||
transform: rotate(-2deg);
|
||
}
|
||
50% {
|
||
transform: rotate(2deg);
|
||
}
|
||
99% {
|
||
transform: rotate(2deg);
|
||
}
|
||
100% {
|
||
transform: rotate(-2deg);
|
||
}
|
||
}
|
||
|
||
.tiny-jagged-tilt:hover {
|
||
animation: tinyJaggedTilt 0.5s ease-in-out infinite;
|
||
scale: 1.05;
|
||
}
|
||
|
||
.custom-shadow {
|
||
-webkit-filter: drop-shadow(5px 5px 5px #222);
|
||
filter: drop-shadow(5px 5px 5px #222);
|
||
}
|
||
|
||
.clickable {
|
||
cursor: pointer;
|
||
pointer-events: all;
|
||
}
|
||
|
||
|
||
.video {
|
||
width: 100%;
|
||
height: 100vh;
|
||
}
|
||
|
||
.vjs-big-play-centered .vjs-big-play-button {
|
||
display: none;
|
||
}
|
||
|
||
.movable {
|
||
width: 100px;
|
||
height: 100px;
|
||
position: absolute;
|
||
z-index: 999999999;
|
||
transform: translate(-50%, -50%);
|
||
pointer-events: none;
|
||
/* transition: background 0.5s; */
|
||
background-image: url("/assets/cursor/cursor\ normal.png");
|
||
|
||
/* animation: jaggedTilt 0.2s ease-in-out infinite; */
|
||
transform-origin: center center;
|
||
|
||
}
|
||
|
||
.movable.cursor-pointer {
|
||
background-image: url("/assets/cursor/cursor\ hover.png");
|
||
}
|
||
|
||
.scene-container {
|
||
position: relative;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
/* overflow: hidden; */
|
||
background-color: black;
|
||
|
||
}
|
||
|
||
.full-transparent {
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.vignette {
|
||
box-shadow: inset 0 0 100px #000;
|
||
|
||
}```
|
||
|
||
```tsx
|
||
// path: src/main.tsx
|
||
import React from "react";
|
||
import ReactDOM from "react-dom/client";
|
||
import App from "./App.tsx";
|
||
import "./index.css";
|
||
import { BrowserRouter } from "react-router-dom";
|
||
import gsap from "gsap";
|
||
import { useGSAP } from "@gsap/react";
|
||
|
||
gsap.registerPlugin(useGSAP);
|
||
|
||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||
<React.StrictMode>
|
||
<BrowserRouter>
|
||
<App />
|
||
</BrowserRouter>
|
||
</React.StrictMode>
|
||
);
|
||
```
|
||
|
||
```tsx
|
||
// path: src/pages/about/index.tsx
|
||
import BackHomeButton from "@components/website/BackHomeButton";
|
||
import { AppRoutes } from "@router/routes";
|
||
import { Helmet } from "react-helmet";
|
||
import { Link } from "react-router-dom";
|
||
|
||
const AboutPage = () => {
|
||
return (
|
||
<>
|
||
<Helmet>
|
||
<title>Le Monde Usagé - Démarche</title>
|
||
<meta
|
||
name="description"
|
||
content="Le Monde Usagé – Un Jardin sur le Déclin et la Création Collective, de Cloueless Collectif & GVA Production"
|
||
/>
|
||
<meta
|
||
name="keywords"
|
||
content="Le Monde Usagé, création collective, luttes écologiques, pratiques collaboratives, exposition numérique, monde en carton, jeu intéractif"
|
||
/>
|
||
<meta
|
||
property="og:title"
|
||
content="Monde Usagé – Un Jardin sur le Déclin et la Création Collective"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="Découvrez Monde Usagé, une création collaborative racontant l'histoire d'un jardin en déclin. Inspiré par les luttes sociales et écologiques, ce projet explore la création collective et les nouveaux imaginaires."
|
||
/>
|
||
<meta property="og:url" content="https://monde-usage.vercel.app/" />
|
||
<meta property="og:type" content="website" />
|
||
</Helmet>
|
||
<div className="website relative md:px-[10.5rem] p-4">
|
||
<BackHomeButton />
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||
<div className="z-30">
|
||
<div className="md:-ml-[9rem] md:-mr-[9rem]">
|
||
<img src="/assets/website/titre-une demarche.png" alt="title" />
|
||
</div>
|
||
<div className="">
|
||
<p>
|
||
Conçu à trois par un protocole d’écriture collaborative, le
|
||
monde usagé raconte un jardin sur le déclin où chaque habitant.e
|
||
témoigne de son existence sur la scène ouverte du potager. Pour
|
||
valoriser le processus de création collective, nous avons
|
||
imaginé plusieurs formes poreuses interprétant ce récit.
|
||
</p>
|
||
<p>
|
||
Ces formes ainsi que les documents de travail et outils que nous
|
||
avons développés ensemble cohabitent dans un format d’exposition
|
||
des archives du projet, reconstitué en numérique dans{" "}
|
||
<Link to={AppRoutes.LE_MONDE_EN_CARTON}>
|
||
le monde en carton.
|
||
</Link>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<img
|
||
className="w-full h-full object-contain p-5 z-10"
|
||
src="/assets/website/arbre cuir.png"
|
||
alt="arbre"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="py-10 pt-20">
|
||
<p className="mb-10">Note d’intention</p>
|
||
<p>
|
||
« Quel sens pour la création dans un monde qui brûle ? » se
|
||
demandent Céleste, Lucia et Céleste autour d’un bol de soupe en se
|
||
brûlant la langue. Inspiré·es par les pratiques collectives et les
|
||
nouveaux imaginaires autour desquels s’organisent les luttes
|
||
sociales et écologiques, nous commençons à penser le remède à notre
|
||
mélancolie. Une histoire ouverte, conçue à trois mais faite pour
|
||
accueillir dix, quinze, trente personnes, tendant vers un récit
|
||
choral infini. Cette histoire est racontée avec un foisonnement de
|
||
médiums et de manières de travailler, dans un esprit d’amateurisme
|
||
revendiqué. Nous aspirons à trouver ensemble des outils
|
||
collaboratifs, ludiques et accessibles à tous·tes pour faire
|
||
collectif et déjouer le fatalisme.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default AboutPage;
|
||
```
|
||
|
||
```tsx
|
||
// path: src/pages/contact/index.tsx
|
||
import BackHomeButton from "@components/website/BackHomeButton";
|
||
import { Helmet } from "react-helmet";
|
||
|
||
const ContactPage = () => {
|
||
return (
|
||
<>
|
||
<Helmet>
|
||
<title>Le Monde Usagé - Contact</title>
|
||
<meta
|
||
name="description"
|
||
content="Explore Monde Usagé - Jeu interactif et archive vivante du projet Le Monde Usagé."
|
||
/>
|
||
<meta
|
||
name="keywords"
|
||
content="Le Monde Usagé, Le Monde En Carton, jeu intéractif, film interactif, cloueless collectif"
|
||
/>
|
||
</Helmet>
|
||
<div className="website relative pb-10">
|
||
<BackHomeButton className="left-2 md:left-[unset] top-4 md:right-2 md:top-10" />
|
||
<div className="w-full md:w-2/3 mt-4">
|
||
<img
|
||
src="/assets/website/titre-qui sommes nous.png"
|
||
alt="title"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
<div className="flex flex-col !pt-10 p-5 md:p-[120px] gap-5 md:gap-[120px] lg:p-[150px] lg:gap-[150px]">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||
<p className="">
|
||
Le Cloueless collectif est le nom donné au groupe de personnes
|
||
derrière le monde usagé.
|
||
<br />
|
||
Il s’est d’abord constitué en 2023 dans la promotion de
|
||
diplômé.e.s en cinéma d’animation des Arts Décoratifs de Paris,
|
||
avec Céleste Vidal-Ayrinhac, Céleste Le Du et Lucia Augé.
|
||
<br />
|
||
Ce trio s’est ensuite agrandi bien au delà de l’ENSAD, avec une
|
||
trentaine de personnes qui ont participé au projet, notamment
|
||
Gabriel Vidal-Ayrinhac.
|
||
</p>
|
||
<img
|
||
className="w-full h-full object-contain"
|
||
src="/assets/website/photo monochrome 1.png"
|
||
alt="photo"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid 2xl:grid-cols-4 xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-20 md:gap-10 m-5 md:m-10">
|
||
<div className="flex flex-col gap-4 md:gap-8">
|
||
<img
|
||
src="/assets/website/photo celeste vidal.png"
|
||
alt="Céleste"
|
||
className="w-[200px] h-[200px] lg:self-start self-center"
|
||
/>
|
||
<p className="md:text-[40px] lg:text-start text-center">
|
||
Céleste Vidal-Ayrinhac
|
||
</p>
|
||
<p>
|
||
En mélangeant les histoires individuelles dans des projets
|
||
collectifs, mon travail est une joyeuse alliance entre
|
||
documentaire, jeu, animation et musique. De l’écriture de
|
||
protocoles créatifs à la composition sonore de chaque projet,
|
||
j’expérimente des formats multidisciplinaires et multimédias
|
||
afin de raconter chaque histoire différemment. En parallèle de
|
||
la réalisation de court-métrages d’animation, je m’intéresse aux
|
||
jeux sous toutes leurs formes (multimédia, cartes, plateau...).
|
||
Après une formation en Game Design à KADK (Danemark) en 2021,
|
||
j’ai poursuivi l’exploration des liens entre le jeu et la
|
||
création sous son angle collectif. Cette réflexion est
|
||
cristallisée dans mon mémoire de master{" "}
|
||
<a
|
||
href="https://drive.google.com/file/d/1uFZv4iGS3kU0PNiznmAUMWi6W7WXT8YZ/view?usp=sharing"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
« Le Jeu de la Création Collective »
|
||
</a>
|
||
, soutenu à l’ENSAD (Paris) en juin 2023. Diplômé.e de l’ENSAD
|
||
depuis juillet 2024, je prépare désormais un nouveau projet
|
||
participatif et musical avec des marionnettes, en plus d’être
|
||
motion designer pour les musées et la télévision.
|
||
</p>
|
||
<p>Mail: celest_v_a[at]proton.me</p>
|
||
<p>
|
||
Instagram{" "}
|
||
<a
|
||
href="https://www.instagram.com/celest_v_a"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
@celest_v_a
|
||
</a>
|
||
</p>
|
||
<a
|
||
href="https://drive.google.com/file/d/12n-ClC8Zk7jHtlJ0GgS3uKgMJu9o2GAY/view?usp=drive_link"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
<img
|
||
src="/assets/website/link-porfolio.png"
|
||
alt="Céleste"
|
||
className="w-9/12"
|
||
/>
|
||
</a>
|
||
</div>
|
||
<div className="flex flex-col gap-4 md:gap-8">
|
||
<img
|
||
src="/assets/website/photo lucia auge.png"
|
||
alt="Lucia"
|
||
className="w-[200px] h-[200px] lg:self-start self-center"
|
||
/>
|
||
<p className="md:text-[40px] lg:text-start text-center">
|
||
Lucia Augé
|
||
</p>
|
||
<p>
|
||
Entre vidéo, scénographie, illustration & animation, ma pratique
|
||
s’articule toujours autour de la narration. Mon mémoire de
|
||
master soutenu en 2022 à l’ENSAD « ça, et le jardinage », récit
|
||
documentaire sur les pratiques artistiques amateures, est le
|
||
point de départ de mes recherches actuelles sur les dynamiques
|
||
entre intime et social dans le processus de création. J’aime
|
||
penser le fait de « faire » comme un pansement posé sur nos
|
||
plaies intimes et collectives. Mes images sont nourries par
|
||
l’art amateur, populaire ou folklorique. Je m’intéresse aussi
|
||
aux systèmes de représentation et leurs liens avec la narration.
|
||
Mon but est de créer des récits ludiques, accessibles, pour se
|
||
rappeler le caractère joyeux & essentiel des images.
|
||
</p>
|
||
<p>Mail: lucia.aue[at]gmail.com</p>
|
||
<p>
|
||
Instagram{" "}
|
||
<a
|
||
href="https://www.instagram.com/lul.aue"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
@lul.aue
|
||
</a>
|
||
</p>
|
||
<a
|
||
href="https://drive.google.com/file/d/1Y2c10kj0kzuG0s0lskxBwE_LWnTi3iCF/view?usp=sharing"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
<img
|
||
src="/assets/website/link-porfolio.png"
|
||
className="w-9/12"
|
||
alt="Portfolio Lucia"
|
||
/>
|
||
</a>
|
||
</div>
|
||
<div className="flex flex-col gap-4 md:gap-8">
|
||
<img
|
||
src="/assets/website/photo celeste le du.png"
|
||
alt="Céleste"
|
||
className="w-[200px] h-[200px] lg:self-start self-center"
|
||
/>
|
||
<p className="md:text-[40px] lg:text-start text-center">
|
||
Céleste Le Du
|
||
</p>
|
||
<p>
|
||
Diplômée de l’École Nationale Supérieure Des Arts Décoratifs de
|
||
Paris en secteur animation, ma pratique artistique a pour point
|
||
de départ le mouvement des images. J’ai commencé par développer
|
||
un travail graphique centré sur la narration en DNMADE cinéma
|
||
d’animation. Mon film de diplôme (J’ai rassemblé tous ces
|
||
morceaux de moi) a été sélectionné dans un festival catégorie 1
|
||
(Plein la Bobine) et a remporté un prix au concours du CROUS.
|
||
J’ai ensuite intégré les Arts Décoratifs de Paris en 4e année.
|
||
Mon travail s'est ouvert à de nouvelles techniques, toujours
|
||
réflexives sur leur impact écologique, autant sur le plan social
|
||
qu'environnemental. En parallèle je participe régulièrement à
|
||
l’organisation d’évènements culturels, en étant jury ou bénévole
|
||
sur des festivals et en organisant le ciné-club des Arts
|
||
Décoratifs.
|
||
</p>
|
||
<p>Mail: contact.celesteledu[at]gmail.com</p>
|
||
<p>
|
||
Instagram{" "}
|
||
<a
|
||
href="https://www.instagram.com/celesteledu"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
@celesteledu
|
||
</a>
|
||
</p>
|
||
<a
|
||
href="https://drive.google.com/file/d/1uPHfGakL_inlXGZnpKa3nl8dpbiZkUD3/view?usp=drive_link"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
<img
|
||
src="/assets/website/link-porfolio.png"
|
||
alt="Céleste"
|
||
className="w-9/12"
|
||
/>
|
||
</a>
|
||
</div>
|
||
<div className="flex flex-col gap-4 md:gap-8">
|
||
<img
|
||
src="/assets/website/photo gab vidal.jpeg"
|
||
alt="Gabriel"
|
||
className="w-[200px] h-[200px] lg:self-start self-center"
|
||
/>
|
||
<p className="md:text-[40px] lg:text-start text-center">
|
||
Gabriel Vidal-Ayrinhac
|
||
</p>
|
||
<p>
|
||
Je suis passionné par l'art, l'IA, et la création de jeux vidéo.
|
||
Etant ingénieur informatique dans une société engagée pour
|
||
l'écologie (spécialisée dans le calcul d'empreint carbone pour
|
||
la construction) je m'intéresse aux différentes formes de lutte
|
||
qui existent dans mon domaine. Ainsi, en parallèle de mon
|
||
travail, je mets mes compétences au service de projets
|
||
artistiques et souvent ludiques.
|
||
</p>
|
||
<p>Mail: gvidalayrinhac[at]gmail.com</p>
|
||
<p>
|
||
Itch{" "}
|
||
<a
|
||
href="https://gabrielvidal.itch.io/"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
@gabrielvidal
|
||
</a>
|
||
</p>
|
||
<p>
|
||
Github{" "}
|
||
<a
|
||
href="https://github.com/GabrielVidal1"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
@GabrielVidal1
|
||
</a>
|
||
</p>
|
||
<a
|
||
href="https://resume.gabriel.vidal--ayrinhac.xyz/"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
<img
|
||
src="/assets/website/link-porfolio.png"
|
||
alt="Céleste"
|
||
className="w-9/12"
|
||
/>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col items-center gap-5 px-10">
|
||
<img src="/assets/website/logo cloueless 1.png" alt="footer" />
|
||
<p>clouelesscollectif[at]protonmail.com</p>
|
||
<a
|
||
href="https://www.instagram.com/lemondeusage"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
<p>@lemondeusage</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default ContactPage;
|
||
```
|
||
|
||
```tsx
|
||
// path: src/pages/home/index.tsx
|
||
import { Helmet } from "react-helmet";
|
||
import { Link } from "react-router-dom";
|
||
|
||
const HomePage = () => {
|
||
return (
|
||
<>
|
||
<Helmet>
|
||
<title>Le Monde Usagé</title>
|
||
<meta
|
||
name="description"
|
||
content="Le Monde Usagé – Un Jardin sur le Déclin et la Création Collective, de Cloueless Collectif & GVA Production"
|
||
/>
|
||
<meta
|
||
name="keywords"
|
||
content="Le Monde Usagé, création collective, luttes écologiques, pratiques collaboratives, exposition numérique, monde en carton, jeu intéractif"
|
||
/>
|
||
|
||
<meta
|
||
property="og:title"
|
||
content="Monde Usagé – Un Jardin sur le Déclin et la Création Collective"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="Découvrez Monde Usagé, une création collaborative racontant l'histoire d'un jardin en déclin. Inspiré par les luttes sociales et écologiques, ce projet explore la création collective et les nouveaux imaginaires."
|
||
/>
|
||
<meta property="og:url" content="https://monde-usage.vercel.app/" />
|
||
<meta property="og:type" content="website" />
|
||
</Helmet>
|
||
<div className="website w-screen relative">
|
||
<div className="flex pb-20 z-20 flex-col lg:flex-row">
|
||
<div>
|
||
<img src="/assets/website/titre-monde-usagé.png" alt="title" />
|
||
<p className="mx-5 md:w-[600px] md:-mt-28 md:ml-20 md:mr-[300px]">
|
||
« Les cataclysmes, l’assèchement des sols, l’inversion du ciel et
|
||
la montée des pois mangetouts...
|
||
<br />
|
||
Le pronostic est fatal, la fin du monde est pour bientôt. »
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col md:py-40 p-5 md:p-20 gap-5 md:gap-20">
|
||
<div className="flex flex-col items-center justify-center px-10 gap-5 md:gap-20">
|
||
<Link to="/contact">
|
||
<div>
|
||
<img
|
||
src="/assets/website/link Qui sommes nous.png"
|
||
alt="Qui sommes nous"
|
||
/>
|
||
</div>
|
||
</Link>
|
||
<Link to="/about">
|
||
<div>
|
||
<img src="/assets/website/link Démarche.png" alt="Contact" />
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
<div className="flex flex-col items-center justify-center px-10 gap-5 md:gap-20">
|
||
<Link to="/le-film-des-legumes">
|
||
<div>
|
||
<img
|
||
src="/assets/website/link-film.png"
|
||
alt="Le film des légumes"
|
||
/>
|
||
</div>
|
||
</Link>
|
||
<Link to="/le-monde-en-carton">
|
||
<div>
|
||
<img
|
||
src="/assets/website/link-game.png"
|
||
alt="Le monde en carton"
|
||
/>
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-10 z-0 relative">
|
||
<img
|
||
className="absolute bottom-0 left-0 right-0"
|
||
src="/assets/website/footer-home.png"
|
||
alt="footer"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default HomePage;
|
||
```
|
||
|
||
```tsx
|
||
// path: src/pages/le-film-des-legumes/index.tsx
|
||
import BackHomeButton from "@components/website/BackHomeButton";
|
||
import { Helmet } from "react-helmet";
|
||
|
||
const LeFilmDesLegumesPage = () => {
|
||
return (
|
||
<>
|
||
<Helmet>
|
||
<title>Le Monde Usagé - Le Film Des Légumes </title>
|
||
<meta name="description" content="Explore Monde Usagé - Docu-fiction" />
|
||
<meta
|
||
name="keywords"
|
||
content="Le Monde Usagé, Le Film Des Légumes, docu-fiction, cloueless collectif"
|
||
/>
|
||
</Helmet>
|
||
<div className="website relative">
|
||
<BackHomeButton />
|
||
<img
|
||
src="/assets/website/titre-film_legume.png"
|
||
alt="Le film des légumes"
|
||
className="p-5 object-contain"
|
||
style={{ maxHeight: "40vh" }}
|
||
/>
|
||
<div className="p-5 md:pl-[200px] md:pb-[100px] md:pt-[200px] md:pr-[50px] flex gap-10 flex-col md:flex-row">
|
||
<p className="md:w-1/4">
|
||
Docu-fiction, 21’
|
||
<br />
|
||
<br />À l’annonce de la fin du monde, les légumes du potager se
|
||
déterrent pour tout changer. Ce film, co-construit avec des
|
||
comédien.nes amateur.ices, est le résultat d’ateliers de création
|
||
menés durant plusieurs mois et d’une résidence de tournage à la
|
||
Ferme d’Aulot.
|
||
</p>
|
||
<div className="flex flex-col items-center gap-7">
|
||
<a
|
||
href="https://drive.google.com/file/d/1ZJlEzQbcnQDaLgK25VWkjURWFkf0eNtg/view?usp=drive_link"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
<img src="/assets/website/bouton-voir ici.png" alt="footer" />
|
||
</a>
|
||
|
||
<img
|
||
src="/assets/website/le-monde-usage-le-film-des-legumes.png"
|
||
alt="Le film des légumes"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default LeFilmDesLegumesPage;
|
||
```
|
||
|
||
```tsx
|
||
// path: src/pages/le-monde-en-carton/index.tsx
|
||
import BackHomeButton from "@components/website/BackHomeButton";
|
||
import { Helmet } from "react-helmet";
|
||
|
||
const LeMondeEnCartonPage = () => {
|
||
return (
|
||
<>
|
||
<Helmet>
|
||
<title>Le Monde Usagé - Le Monde En Carton</title>
|
||
<meta
|
||
name="description"
|
||
content="Explore Monde Usagé - Jeu interactif et archive vivante du projet Le Monde Usagé."
|
||
/>
|
||
<meta
|
||
name="keywords"
|
||
content="Le Monde Usagé, Le Monde En Carton, jeu intéractif, film interactif, cloueless collectif"
|
||
/>
|
||
<meta
|
||
property="og:title"
|
||
content="Le Monde Usagé - Le Monde En Carton"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="Explore Monde Usagé - Jeu interactif et archive vivante du projet Le Monde Usagé."
|
||
/>
|
||
<meta property="og:type" content="website" />
|
||
</Helmet>
|
||
<div className="website relative">
|
||
<BackHomeButton />
|
||
<div className="p-5 md:px-[200px] md:pb-[200px] flex flex-col gap-10">
|
||
<div>
|
||
<img src="/assets/website/titre-mondecarton.png" alt="title" />
|
||
</div>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2">
|
||
<p>
|
||
Film interactif, durée ajustable
|
||
<br />
|
||
<br />
|
||
Le monde en carton est pensé comme une archive vivante qui rend
|
||
compte de l’intégralité de la démarche du monde usagé.
|
||
L’interactivité invite à explorer plus de 80 fragments vidéos
|
||
écrits et improvisés collectivement sous la forme d’une collection
|
||
cartographiée. L’expérience narrative se renouvelle à chaque fois.
|
||
</p>
|
||
<div className="flex items-end justify-center">
|
||
<a
|
||
href="https://clouelesscollectif.itch.io/le-monde-en-carton"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
<img src="/assets/website/bouton-voir ici.png" alt="footer" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<img
|
||
style={{ border: "10px solid #76978C" }}
|
||
className="rounded-xl"
|
||
src="/assets/website/banniere itch web.png"
|
||
alt="Le Monde En Carton"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default LeMondeEnCartonPage;
|
||
```
|
||
|
||
```tsx
|
||
// path: src/router/index.tsx
|
||
import AboutPage from "@pages/about";
|
||
import ContactPage from "@pages/contact";
|
||
import HomePage from "@pages/home";
|
||
import LeFilmDesLegumesPage from "@pages/le-film-des-legumes";
|
||
import LeMondeEnCartonPage from "@pages/le-monde-en-carton";
|
||
import { Route, Routes } from "react-router-dom";
|
||
import { AppRoutes } from "./routes";
|
||
|
||
const Router = () => {
|
||
return (
|
||
<Routes>
|
||
<Route path={AppRoutes.HOME} element={<HomePage />} />
|
||
<Route path={AppRoutes.CONTACT} element={<ContactPage />} />
|
||
<Route path={AppRoutes.ABOUT} element={<AboutPage />} />
|
||
<Route
|
||
path={AppRoutes.LE_MONDE_EN_CARTON}
|
||
element={<LeMondeEnCartonPage />}
|
||
/>
|
||
<Route
|
||
path={AppRoutes.LE_FILM_DES_LEGUMES}
|
||
element={<LeFilmDesLegumesPage />}
|
||
/>
|
||
</Routes>
|
||
);
|
||
};
|
||
|
||
export default Router;
|
||
```
|
||
|
||
```typescript
|
||
// path: src/router/routes.ts
|
||
export enum AppRoutes {
|
||
HOME = "/",
|
||
CONTACT = "/contact",
|
||
ABOUT = "/about",
|
||
LE_FILM_DES_LEGUMES = "/le-film-des-legumes",
|
||
LE_MONDE_EN_CARTON = "/le-monde-en-carton",
|
||
}
|
||
```
|
||
|
||
```typescript
|
||
// path: src/vite-env.d.ts
|
||
/// <reference types="vite/client" />
|
||
```
|