Component for Hero sections

src/components/HeroSection.astro

@@ -0,0 +1,36 @@
+---
+import CodeEditor from "./CodeEditor.astro";
+
+const { title, thpcode, subtitle } = Astro.props;
+
+if (!subtitle) {
+    throw new Error("subtitle is required");
+}
+
+if (!thpcode) {
+    throw new Error("thpcode is required");
+}
+
+if (!title) {
+    throw new Error("title is required");
+}
+---
+
+<div>
+    <div class="bg-c-thp text-c-bg">
+        <h1 class="container mx-auto font-medium py-8 text-3xl">
+            {subtitle} <span class="font-black">{title}</span>
+        </h1>
+    </div>
+
+    <div class="container mx-auto lg:grid lg:grid-cols-2 gap-4">
+        <div class="px-8 py-12 flex h-full items-center">
+            <div>
+                <slot />
+            </div>
+        </div>
+        <div>
+            <CodeEditor thpcode={thpcode} />
+        </div>
+    </div>
+</div>

src/pages/index.astro

@@ -2,6 +2,7 @@
 import BaseLayout from "../layouts/BaseLayout.astro";
 import Navbar from "../components/Navbar.astro";
 import CodeEditor from "../components/CodeEditor.astro";
+import HeroSection from "../components/HeroSection.astro";
 ---
 
 <BaseLayout>
@@ -66,7 +67,11 @@ import CodeEditor from "../components/CodeEditor.astro";
                         height="14"
                         viewBox="0 0 54 14"
                     >
-						<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+                        <g
+                            fill="none"
+                            fill-rule="evenodd"
+                            transform="translate(1 1)"
+                        >
                             <circle
                                 cx="6"
                                 cy="6"
@@ -97,32 +102,10 @@ import CodeEditor from "../components/CodeEditor.astro";
         </div>
     </div>
 
-	<div>
+    <HeroSection
-		<div class="bg-c-thp text-c-bg">
+        subtitle="THP is"
-			<h1 class="container mx-auto font-medium py-8 text-3xl">
+        title="typed"
-				THP is <span class="font-black">actually typed</span>
+        thpcode={`
-			</h1>
-		</div>
-
-		<div class="container mx-auto lg:grid lg:grid-cols-2 gap-4">
-			<div class="px-8 py-12 flex h-full items-center">
-				<div>
-					THP enforces type safety at compile time and, at the programmer's
-					request, at runtime.
-					<br>
-					<br>
-					Everything has a type.
-					There are generics.
-					No implicit type conversions. No <code>mixed</code>.
-					No client <code>Any</code> .Type inference included.
-					<br>
-					<br>
-					All possible checks are made at compile time. Runtime checks
-					have a small performance penalty.
-				</div>
-			</div>
-			<div>
-				<CodeEditor thpcode={`
     Array[Int] numbers = [0, 1, 2, 3, 4, 5]
 
     numbers.push("7")  // Compile error: expected an Int, found a String
@@ -138,10 +121,32 @@ import CodeEditor from "../components/CodeEditor.astro";
     val result = mock()
     // Ok
     val result = mock() as String
-				`} />
+    `}
-			</div>
+    >
-		</div>
+        THP enforces type safety at compile time and, at the programmer's
-	</div>
+        request, at runtime.
+        <br />
+        <br />
+        Everything has a type. There are generics. No implicit type conversions.
+        No <code>mixed</code>. No client <code>Any</code> .Type inference included.
+        <br />
+        <br />
+        All possible checks are made at compile time. Runtime checks have a small
+        performance penalty.
+    </HeroSection>
+
+    <HeroSection
+        subtitle="THP is"
+        title="match"
+        thpcode={`
+    match value
+    case A
+    {
+    }
+    `}
+    >
+        :D (carita feliz)
+    </HeroSection>
 
     <script>
         import { thp_highlighter, CodeJar } from "../lexer/highlighter";
@@ -172,7 +177,7 @@ case Cat(name, lives) {
         );
     </script>
     <script>
-        import {highlightOnDom} from "../layouts/thpHighlighter";
+        import { highlightOnDom } from "../layouts/thpHighlighter";
         document.addEventListener("DOMContentLoaded", highlightOnDom);
     </script>
 </BaseLayout>