Update(main page) structure html and create button component

Author: math-pixel

src/components/Button.astro

@@ -0,0 +1,10 @@
+---
+interface Props {
+	title: string;
+	href: string;
+}
+
+const { href, title } = Astro.props;
+---
+
+<a href={href} class=" bg-orange-700 px-4 py-2 rounded-lg " >{title}</a>

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/pages/index.astro

@@ -1,72 +1,49 @@
 ---
 import LayoutPage from '../layouts/page.astro';
 import Header from '../components/header.astro';
+import Button from '../components/Button.astro';
+import Card from '../components/Card.astro';
+
+const cards = [
+	{ title: "3D Printer", body: "yay" ,href: "" },
+	{ title: "2D Printer", body: "yey" ,href: "" },
+	{ title: "1D Printer", body: "null" ,href: "" }
+]
+
 ---
 
 <LayoutPage title="Mathieu Chavanel.B - Potfolio">
 	<Header title={["Accueil", "Projets", "Labs", "Contact"]} href={["/", "/projets", "/#labs", "/#contact"]}></Header>
-    <h1>Welcome to Home</h1>
+    
+	<div id="home" class=" ">
+
+		<h1>Mathieu Chavanel</h1>
+		<h2>Creatif Developpeur</h2>
+		<img src="" alt="">
+		<Button title='Projets' href='/projets'></Button>
+		<Button title='Contact' href='/#contact'></Button>
+		<a href="">Découvrir</a>
+
+	</div>
+
+	<div id="projectHighlight">
+		{cards.map((currentCard) => (
+			<Card title={currentCard.title} body={currentCard.body} href={currentCard.href}></Card>
+		))}
+	</div>
+	
+	<div id="labs">
+
+	</div>
+	
+	<div id="contact">
+
+	</div>
+
 </LayoutPage>
 
 <style>
 	@view-transition {
 	  navigation: auto; /* enabled! */
 	}
-
-	main {
-		margin: auto;
-		padding: 1rem;
-		width: 800px;
-		max-width: calc(100% - 2rem);
-		color: white;
-		font-size: 20px;
-		line-height: 1.6;
-	}
-	.astro-a {
-		position: absolute;
-		top: -32px;
-		left: 50%;
-		transform: translatex(-50%);
-		width: 220px;
-		height: auto;
-		z-index: -1;
-	}
-	h1 {
-		font-size: 4rem;
-		font-weight: 700;
-		line-height: 1;
-		text-align: center;
-		margin-bottom: 1em;
-	}
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	.instructions {
-		margin-bottom: 2rem;
-		border: 1px solid rgba(var(--accent-light), 25%);
-		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
-		padding: 1.5rem;
-		border-radius: 8px;
-	}
-	.instructions code {
-		font-size: 0.8em;
-		font-weight: bold;
-		background: rgba(var(--accent-light), 12%);
-		color: rgb(var(--accent-light));
-		border-radius: 4px;
-		padding: 0.3em 0.4em;
-	}
-	.instructions strong {
-		color: rgb(var(--accent-light));
-	}
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 2rem;
-		padding: 0;
-	}
 </style>