wip cheerp homepage

sites/cheerp/src/pages/index.astro

@@ -4,29 +4,59 @@ import LinkButton from "@leaningtech/astro-theme/components/LinkButton.astro";
 ---
 
 <ProductHome>
-	<section>
-		<div class="text-center space-y-6">
-			<h1 class="text-4xl font-extralight text-balance glow">
-				The flexible C++ compiler for web applications
+	<section class="py-16">
+		<div class="mx-auto max-w-[56em] text-center space-y-12">
+			<h1 class="text-7xl font-semibold text-balance bg-gradient-to-b from-cheerp via-cheerp to-white text-transparent bg-clip-text">
+				How <b>C++ engineers</b> build for the web
 			</h1>
-			<p class="text-xl text-balance">
-				Cheerp compiles C++ to efficient WebAssembly and JavaScript.
+			<p class="text-lg text-balance text-stone-400">
+				Cheerp is an <span class="text-white">enterprise-grade</span> compiler toolchain that can <span class="text-white">compile C/C++ into efficient WebAssembly and JavaScript</span>.
+				It is open source, liberally licensed, and actively developed by Leaning Technologies.
 			</p>
 		</div>
-
-		<div class="max-w-[32em] m-auto py-8 space-y-6">
+		<div class="flex items-center gap-4 justify-center mt-12">
 			<LinkButton
 				type="primary"
-				href="/docs/installation"
-				label="Get started"
+				href="/docs/getting-started/tour"
+				label="Take a 5-minute tour"
+			/>
+			<LinkButton
+				type="secondary"
+				href="/docs/getting-started/installation"
+				iconLeft="mi:download"
+				label="Install Cheerp"
 			/>
 		</div>
 	</section>
-	<section>
-		<div class="grid sm:grid-cols-3 gap-6">
-			<div class="bg-stone-800 p-6 rounded-lg">Point 1</div>
-			<div class="bg-stone-800 p-6 rounded-lg">Point 2</div>
-			<div class="bg-stone-800 p-6 rounded-lg">Point 3</div>
+	<!-- TODO: video -->
+	<!-- TODO: client company logos -->
+	<section class="py-16 max-w-[60em] mx-auto">
+		<h2 class="text-4xl font-semibold text-center pb-8">Benefits</h2>
+		<div class="grid grid-cols-2 gap-8">
+			<div>
+				JavaScript interoperability
+			</div>
+			<div>
+				Export C++ with <code>[[cheerp::jsexport]]</code>
+			</div>
+			<div>
+				Combine memory models
+			</div>
+			<div>
+				Maintain one code base
+			</div>
 		</div>
 	</section>
+	<!-- TODO: how it works (user story) -->
+	<!-- TODO: testimonials -->
+	<!-- TODO: FAQ -->
+	<section class="py-16 text-center">
+		<h2 class="text-4xl font-semibold text-center pb-8">Give it a try!</h2>
+		<LinkButton
+			type="primary"
+			href="/docs"
+			iconRight="mi:arrow-right"
+			label="View documentation"
+		/>
+	</section>
 </ProductHome>