Add title to comparison section in the home page and improve its graphic (#28)

Co-authored-by: Carlos Cordoba <[email protected]>

Author: conradolandia

src/lib/blocks/ContentBlock.svelte

@@ -84,7 +84,7 @@
   {#if title}
     <h1
       class={`text-4xl font-semibold tracking-tight max-w-2xl px-8 mx-auto text-center text-red-berry-900 dark:text-neutral-400
-        ${!boxed ? 'lg:mb-24' : ''}`}
+        ${!boxed ? 'lg:mb-24' : 'lg:mb-8'}`}
     >
       {@html title}
     </h1>

src/lib/blocks/Hero.svelte

@@ -5,9 +5,11 @@
   import Vanta from "$lib/components/Vanta.svelte";
   import Button from "$lib/components/Button.svelte";
   import ImageCompare from "$lib/components/ImageCompare.svelte";
+  import Divider from "$lib/components/Divider.svelte";
 
   export let id = "";
   export let classes = "";
+  export let divider = false;
 
   // Hero section buttons
   export let buttons = [];
@@ -65,6 +67,10 @@
   <div class="container aspect-video hero-image py-5">
     <ImageCompare before={heroImages.dark} after={heroImages.light} />
   </div>
+
+  {#if divider}
+    <Divider stroke={true} />
+  {/if}
 </section>
 
 <style>

src/routes/+page.js

@@ -51,6 +51,8 @@ frontPage = {
         background: "/assets/media/bg.svg",
         columns: false,
         divider: true,
+        boxed: true,
+        title: "The Spyder advantage",
         extraContent: WhatIs,
       },
 

src/routes/+page.svelte

@@ -7,7 +7,7 @@
   let blocks = data.props.blocks;
 </script>
 
-<Hero id="hero-section" />
+<Hero id="hero-section" divider={true} />
 
 {#each blocks as block (block.id)}
   <ContentBlock {...block} >