From e138b66bf28e4e10efb1449adc9160a8b09e30ad Mon Sep 17 00:00:00 2001 From: Julien Oculi Date: Tue, 6 Feb 2024 17:46:09 +0100 Subject: [PATCH] feat(ui): :sparkles: add index page and heros --- components/Heros.css | 45 ++++++++++++++++++++++++++++++++++ components/Heros.tsx | 15 ++++++++++++ routes/index.tsx | 13 ++++++++++ src/stylesheets/components.css | 1 + 4 files changed, 74 insertions(+) create mode 100644 components/Heros.css create mode 100644 components/Heros.tsx create mode 100644 routes/index.tsx 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. +

+ +
+ ) +} 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 + + + + ) +} diff --git a/src/stylesheets/components.css b/src/stylesheets/components.css index 95d6241..68309f3 100644 --- a/src/stylesheets/components.css +++ b/src/stylesheets/components.css @@ -1,2 +1,3 @@ @import url('../../components/Header.css'); @import url('../../components/Footer.css'); +@import url('../../components/Heros.css');