import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'

const scope = getStyleScope(Heros)

export function Heros() {
	useSmartStylesheet(import.meta, { scope })

	return (
		<section class={scope}>
			<h1 class='title'>
				L'atelier participatif libre et open source
			</h1>
			<p class='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>
			<a class='cta' href='#first-section'>Participer</a>
		</section>
	)
}
