src/components/widgets/Hero.astro

@@ -6,6 +6,7 @@ import type { CallToAction } from '~/types';
 export interface Props {
   id?: string;
   title?: string;
+  title2?: string;
   subtitle?: string;
   tagline?: string;
   content?: string;
@@ -16,6 +17,7 @@ export interface Props {
 const {
   id,
   title = await Astro.slots.render('title'),
+  title2 = await Astro.slots.render('title2'),
   subtitle = await Astro.slots.render('subtitle'),
   tagline,
   content = await Astro.slots.render('content'),
@@ -46,6 +48,14 @@ const {
             />
           )
         }
+        {
+          title2 && (
+            <h3
+              class="text-5xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200"
+              set:html={title2}
+            />
+          )
+        }
         <div class="max-w-3xl mx-auto">
           {subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />}
           {

src/pages/index.astro

@@ -47,12 +47,16 @@ const metadata = {
       <Inca/><br><br>
     </Fragment>
 
-    
+    <Fragment slot="title2">
-
-    <Fragment slot="subtitle">
       <b><i>Compute<br>
       is the currency <br>
       of the future...<br><br></b></i>
+    </Fragment>
+
+    
+
+    <Fragment slot="subtitle">
+
       <span class="hidden sm:inline">
         <br>We are a community-driven, open-source project<br> that has built a self-healing and autonomous cloud engine<br> allowing <span class="font-semibold">anyone</span> to become a <span class="font-semibold">cloud service provider</span>!<br>
       </span>