diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index bef9ab2b..d34f43f4 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1347,6 +1347,39 @@ select {
   margin-bottom: 0;
 }
 
+.prose-invert {
+  --tw-prose-body: var(--tw-prose-invert-body);
+  --tw-prose-headings: var(--tw-prose-invert-headings);
+  --tw-prose-lead: var(--tw-prose-invert-lead);
+  --tw-prose-links: var(--tw-prose-invert-links);
+  --tw-prose-bold: var(--tw-prose-invert-bold);
+  --tw-prose-counters: var(--tw-prose-invert-counters);
+  --tw-prose-bullets: var(--tw-prose-invert-bullets);
+  --tw-prose-hr: var(--tw-prose-invert-hr);
+  --tw-prose-quotes: var(--tw-prose-invert-quotes);
+  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
+  --tw-prose-captions: var(--tw-prose-invert-captions);
+  --tw-prose-code: var(--tw-prose-invert-code);
+  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
+  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
+  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
+  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
+}
+
+.prose-invert :where(a):not(:where([class~="not-prose"] *)) {
+  -webkit-text-decoration-color: rgba(var(--color-neutral-600), 1);
+          text-decoration-color: rgba(var(--color-neutral-600), 1);
+}
+
+.prose-invert :where(kbd):not(:where([class~="not-prose"] *)) {
+  color: rgba(var(--color-neutral-200), 1);
+  background-color: rgba(var(--color-neutral-700), 1);
+}
+
+.prose-invert :where(mark):not(:where([class~="not-prose"] *)) {
+  background-color: rgba(var(--color-secondary-400), 1);
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1395,6 +1428,11 @@ select {
   left: 0px;
 }
 
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
 .top-\[100vh\] {
   top: 100vh;
 }
@@ -1613,6 +1651,10 @@ select {
   height: 9rem;
 }
 
+.h-1\/2 {
+  height: 50%;
+}
+
 .max-h-\[5rem\] {
   max-height: 5rem;
 }
@@ -1655,6 +1697,12 @@ select {
   width: 1.5rem;
 }
 
+.w-max {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1687,6 +1735,14 @@ select {
   max-width: 5rem;
 }
 
+.max-w-lg {
+  max-width: 32rem;
+}
+
+.max-w-sm {
+  max-width: 24rem;
+}
+
 .flex-none {
   flex: none;
 }
@@ -1768,6 +1824,12 @@ select {
   margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .place-self-center {
   place-self: center;
 }
@@ -1812,6 +1874,14 @@ select {
   border-radius: 0.375rem !important;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
 .rounded-b-lg {
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -1858,6 +1928,10 @@ select {
   border-color: rgba(var(--color-primary-500), var(--tw-border-opacity));
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
 .bg-neutral {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral), var(--tw-bg-opacity));
@@ -1904,6 +1978,71 @@ select {
   background-color: rgba(var(--color-neutral-100), 0.5);
 }
 
+.bg-opacity-60 {
+  --tw-bg-opacity: 0.6;
+}
+
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-l {
+  background-image: linear-gradient(to left, var(--tw-gradient-stops));
+}
+
+.from-primary-800 {
+  --tw-gradient-from: rgba(var(--color-primary-800), 1);
+  --tw-gradient-to: rgba(var(--color-primary-800), 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-primary-200 {
+  --tw-gradient-from: rgba(var(--color-primary-200), 1);
+  --tw-gradient-to: rgba(var(--color-primary-200), 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-primary-100 {
+  --tw-gradient-from: rgba(var(--color-primary-100), 1);
+  --tw-gradient-to: rgba(var(--color-primary-100), 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-neutral-100 {
+  --tw-gradient-from: rgba(var(--color-neutral-100), 1);
+  --tw-gradient-to: rgba(var(--color-neutral-100), 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-primary-700 {
+  --tw-gradient-to: rgba(var(--color-primary-700), 1);
+}
+
+.to-secondary-700 {
+  --tw-gradient-to: rgba(var(--color-secondary-700), 1);
+}
+
+.to-secondary-400 {
+  --tw-gradient-to: rgba(var(--color-secondary-400), 1);
+}
+
+.to-secondary-200 {
+  --tw-gradient-to: rgba(var(--color-secondary-200), 1);
+}
+
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 .object-scale-down {
   -o-object-fit: scale-down;
      object-fit: scale-down;
@@ -1922,6 +2061,14 @@ select {
   padding: 0.25rem;
 }
 
+.p-32 {
+  padding: 8rem;
+}
+
+.p-0 {
+  padding: 0px;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1987,6 +2134,11 @@ select {
   padding-bottom: 1.5rem;
 }
 
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
 .pt-8 {
   padding-top: 2rem;
 }
@@ -2102,6 +2254,10 @@ select {
   line-height: .75rem;
 }
 
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
 .text-neutral-400 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
@@ -2171,12 +2327,28 @@ select {
   opacity: 0;
 }
 
+.mix-blend-multiply {
+  mix-blend-mode: multiply;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .backdrop-blur {
   --tw-backdrop-blur: blur(8px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -2876,6 +3048,12 @@ body:has(#menu-controller:checked) {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
 
+.hero {
+  background-repeat:no-repeat;
+  background-size:cover;
+  background-position:center;
+}
+
 @media (min-width: 640px) {
   .thumbnail {
     min-width: 100%;
@@ -2927,6 +3105,10 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important;
 }
 
+.hover\:bg-opacity-70:hover {
+  --tw-bg-opacity: 0.7;
+}
+
 .hover\:text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-600), var(--tw-text-opacity));
@@ -3217,6 +3399,16 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-800), var(--tw-bg-opacity));
 }
 
+.dark .dark\:from-primary-800 {
+  --tw-gradient-from: rgba(var(--color-primary-800), 1);
+  --tw-gradient-to: rgba(var(--color-primary-800), 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.dark .dark\:to-secondary-700 {
+  --tw-gradient-to: rgba(var(--color-secondary-700), 1);
+}
+
 .dark .dark\:text-neutral-500 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
@@ -3299,18 +3491,65 @@ body:has(#menu-controller:checked) {
 }
 
 @media (min-width: 640px) {
+  .sm\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .sm\:mb-0 {
     margin-bottom: 0px;
   }
 
+  .sm\:flex {
+    display: flex;
+  }
+
+  .sm\:inline-grid {
+    display: inline-grid;
+  }
+
   .sm\:w-1\/2 {
     width: 50%;
   }
 
+  .sm\:max-w-3xl {
+    max-width: 48rem;
+  }
+
+  .sm\:max-w-none {
+    max-width: none;
+  }
+
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
 
+  .sm\:justify-center {
+    justify-content: center;
+  }
+
+  .sm\:gap-5 {
+    gap: 1.25rem;
+  }
+
+  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
+  .sm\:overflow-hidden {
+    overflow: hidden;
+  }
+
+  .sm\:rounded-2xl {
+    border-radius: 1rem;
+  }
+
   .sm\:p-6 {
     padding: 1.5rem;
   }
@@ -3330,6 +3569,16 @@ body:has(#menu-controller:checked) {
     padding-bottom: 2.5rem;
   }
 
+  .sm\:py-24 {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+
+  .sm\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .sm\:pt-10 {
     padding-top: 2.5rem;
   }
@@ -3339,6 +3588,11 @@ body:has(#menu-controller:checked) {
     line-height: 1.75rem;
   }
 
+  .sm\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
   [dir="ltr"] .ltr\:sm\:mr-7 {
     margin-right: 1.75rem;
   }
@@ -3442,6 +3696,21 @@ body:has(#menu-controller:checked) {
     padding-right: 8rem;
   }
 
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .lg\:py-32 {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+
+  .lg\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+
   [dir="ltr"] .ltr\:lg\:pl-8 {
     padding-left: 2rem;
   }
diff --git a/assets/css/main.css b/assets/css/main.css
index 590504fa..f5486a14 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -351,6 +351,12 @@ body:has(#menu-controller:checked) {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
 
+.hero {
+  background-repeat:no-repeat;
+  background-size:cover; 
+  background-position:center;
+}
+
 @screen sm {
   .thumbnail {
     min-width: 100%;
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index acfde3a0..ccf64978 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -22,12 +22,12 @@ mainSections = ["docs"]
   showScrollToTop = true
 
 [homepage]
-  layout = "custom" # valid options: page, profile, custom
+  layout = "hero" # valid options: page, profile, custom
   showRecent = true
   showRecentItems = 5
   showMoreLink = true
   showMoreLinkDest = "docs"
- 
+
 [article]
   showDate = false
   showViews = true
diff --git a/layouts/partials/home/hero.html b/layouts/partials/home/hero.html
new file mode 100644
index 00000000..ca7611ef
--- /dev/null
+++ b/layouts/partials/home/hero.html
@@ -0,0 +1,92 @@
+<article class="max-w-full prose dark:prose-invert">
+    <div class="relative">
+        <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
+        <div class="mx-auto max-w-7xl p-0">
+            <div class="relative shadow-xl sm:overflow-hidden rounded-2xl">
+                <div class="absolute inset-0">
+                    <img class="h-full w-full object-cover p-0 nozoom"
+                        src="https://images.unsplash.com/photo-1521737852567-6949f3f9f2b5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2830&q=80&sat=-100"
+                        alt="People working on laptops">
+                    <div class="absolute inset-0 bg-gradient-to-r from-primary-800 to-secondary-700 mix-blend-multiply">
+                    </div>
+                </div>
+                <div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8 flex flex-col items-center">
+                    {{ with .Site.Author.image }}
+                    {{ $authorImage := resources.Get . }}
+                    {{ if $authorImage }}
+                    {{ $authorImage := $authorImage.Fill "288x288" }}
+                    <img class="mb-2 rounded-full h-36 w-36" width="144" height="144"
+                        alt="{{ $.Site.Author.name | default " Author" }}" src="{{ $authorImage.RelPermalink }}" />
+                    {{ end }}
+                    {{ end }}
+                    <h1 class="text-4xl font-extrabold">
+                        {{ .Site.Author.name | default .Site.Title }}
+                    </h1>
+                    {{ with .Site.Author.headline }}
+                    <h2 class="text-xl text-neutral-500 dark:text-neutral-400">
+                        {{ . | markdownify | emojify }}
+                    </h2>
+                    {{ end }}
+                    <div class="mt-1 text-2xl">
+                        {{ partialCached "author-links.html" . }}
+                    </div>
+                    {{ with .Title }}
+                    <header>
+                        <h1>{{ . | emojify }}</h1>
+                    </header>
+                    {{ end }}
+
+                    <section class="prose dark:prose-invert">{{ .Content | emojify }}</section>
+                </div>
+            </div>
+        </div>
+    </div>
+</article>
+<section>
+    {{ partial "recent-articles.html" . }}
+</section>
+
+<!--article class="max-w-full prose dark:prose-invert rounded-xl hero"
+    style="background-image:url(https://cdn.britannica.com/06/171306-050-C88DD752/Aurora-borealis-peninsula-Snaefellsnes-Iceland-March-2013.jpg)">
+
+    <div class="absolute inset-0 bg-gradient-to-r from-primary-800 to-secondary-700 mix-blend-multiply"></div>
+
+    <div class="absolute inset-0">
+        <img class="h-full w-full object-cover"
+            src="https://images.unsplash.com/photo-1521737852567-6949f3f9f2b5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2830&q=80&sat=-100"
+            alt="People working on laptops">
+        <div class="absolute inset-0 bg-gradient-to-r from-purple-800 to-indigo-700 mix-blend-multiply"></div>
+    </div>
+
+    <header class="flex flex-col items-center mb-3 p-32">
+        {{ with .Site.Author.image }}
+        {{ $authorImage := resources.Get . }}
+        {{ if $authorImage }}
+        {{ $authorImage := $authorImage.Fill "288x288" }}
+        <img class="mb-2 rounded-full h-36 w-36" width="144" height="144" alt="{{ $.Site.Author.name | default " Author"
+            }}" src="{{ $authorImage.RelPermalink }}" />
+        {{ end }}
+        {{ end }}
+        <h1 class="text-4xl font-extrabold">
+            {{ .Site.Author.name | default .Site.Title }}
+        </h1>
+        {{ with .Site.Author.headline }}
+        <h2 class="text-xl text-neutral-500 dark:text-neutral-400">
+            {{ . | markdownify | emojify }}
+        </h2>
+        {{ end }}
+        <div class="mt-1 text-2xl">
+            {{ partialCached "author-links.html" . }}
+        </div>
+        {{ with .Title }}
+        <header>
+            <h1>{{ . | emojify }}</h1>
+        </header>
+        {{ end }}
+
+        <section class="prose dark:prose-invert">{{ .Content | emojify }}</section>
+    </header>
+</article>
+<section>
+    {{ partial "recent-articles.html" . }}
+</section-->
\ No newline at end of file