diff --git a/components/Heros.css b/components/Heros.css
new file mode 100644
index 0000000..d45275f
--- /dev/null
+++ b/components/Heros.css
@@ -0,0 +1,45 @@
+.components__heros {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: calc(2 * var(--_gap));
+}
+
+.components__heros__title {
+ font-size: 500%;
+ max-width: 800px;
+ text-wrap: balance;
+ text-align: center;
+ margin: 0;
+}
+
+.components__heros__subtitle {
+ font-size: large;
+ text-align: center;
+ text-wrap: balance;
+ max-width: 800px;
+ margin: 0;
+}
+
+.components__heros__cta {
+ background-color: var(--_accent-color);
+ color: var(--sand-0);
+ width: fit-content;
+ height: fit-content;
+ padding: 1rem 2rem;
+ font-size: 150%;
+ border: var(--_border-size) solid var(--_accent-color);
+ transition: all var(--_transition-delay) ease;
+}
+
+.components__heros__cta:hover {
+ background-color: var(--lime-1);
+ color: var(--_accent-color);
+ box-shadow: 0 0 0 0 var(--_accent-color);
+}
+
+.components__heros__cta:active {
+ box-shadow: 0 0 180px 20px var(--_accent-color);
+}
diff --git a/components/Heros.tsx b/components/Heros.tsx
new file mode 100644
index 0000000..d972323
--- /dev/null
+++ b/components/Heros.tsx
@@ -0,0 +1,15 @@
+export function Heros() {
+ return (
+
+
+ L'atelier participatif libre et open
+
+
+ Venez découvrir un tout nouvelle univers où vous pouvez concrétiser vos
+ projet, rencontrer des passionnés apprendre et développer votre savoir
+ faire, dans l'entraide et le partage.
+
+ Participer
+
+ )
+}
diff --git a/routes/index.tsx b/routes/index.tsx
new file mode 100644
index 0000000..f404fb8
--- /dev/null
+++ b/routes/index.tsx
@@ -0,0 +1,13 @@
+import { Head } from '$fresh/runtime.ts'
+import { Heros } from '../components/Heros.tsx'
+
+export default function Home() {
+ return (
+ <>
+
+ Fablab Coh@bit
+
+