<script lang="ts">
	import Button from '$lib/components/Button.svelte';
	import NavBar from '$lib/components/NavBar.svelte';
</script>

<NavBar pageTitle="">
	<!-- Composant gauche de la navbar -->
	{#snippet rightComponent()}
		<Button href="/login">Connexion</Button>
	{/snippet}
</NavBar>
<header></header>
<section class="colored"></section>
<section id="bottomcard">
	<div class="card">
		<h1>Investissons <b>plus mieux</b> et <b>plus vert</b></h1>
		<ul>
			<li>Investissez facilement</li>
			<li>Analysez les risques et les performances</li>
			<li>Soulagez votre éco-conscience</li>
		</ul>
	</div>
</section>

<style>
	header {
		background-image: url('/img/header-bg.jpg');
		height: 80vh;
		background-size: cover;
		background-position: center;
	}

	.colored {
		background-color: var(--bg-secondary);
		height: 20vh;
	}

	#bottomcard {
		position: fixed;
		bottom: 10vh;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}

	#bottomcard h1 {
		font-size: 2em;
		margin-bottom: 10px;
		color: var(--text-lime);
	}

	#bottomcard ul {
		list-style: square;
		padding: 0;
		margin: 0;
		margin-left: 20px;
	}
</style>
