cohabit/website
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(ui): ✨ add index page and heros

Browse source
This commit is contained in:
Julien Oculi 2024-02-06 17:46:09 +01:00
parent 4bed9dfcb7
commit e138b66bf2
4 changed files with 74 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
components/Heros.css Normal file
View file

@ -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);
}

15
components/Heros.tsx Normal file
View file

@ -0,0 +1,15 @@
export function Heros() {
return (
<section class='components__heros'>
<h1 class='components__heros__title'>
L'atelier participatif libre et open
</h1>
<p class='components__heros__subtitle'>
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.
</p>
<button class='components__heros__cta'>Participer</button>
</section>
)
}

13
routes/index.tsx Normal file
View file

@ -0,0 +1,13 @@
import { Head } from '$fresh/runtime.ts'
import { Heros } from '../components/Heros.tsx'
export default function Home() {
return (
<>
<Head>
<title>Fablab Coh@bit</title>
</Head>
<Heros />
</>
)
}

1
src/stylesheets/components.css
View file

@ -1,2 +1,3 @@
@import url('../../components/Header.css');
@import url('../../components/Footer.css');
@import url('../../components/Heros.css');