💄 Style updates to enhance design consistency

exampleSite/content/_index.md

@@ -7,6 +7,21 @@ description: "This is a demo of the Congo theme for Hugo."
 A simple, lightweight theme for Hugo built with Tailwind CSS.
 {{< /lead >}}
 
+<div class="flex px-4 py-1 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
+  <span class="flex items-center pr-3 text-primary-400">
+    {{< icon "exclamation-triangle" >}}
+  </span>
+  <span class="flex items-center justify-between flex-grow dark:text-gray-300">
+    <span class="prose">This is a demo of the <code id="layout">page</code> layout.</span>
+    <button
+      class="px-4 py-1 !text-white !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
+      onclick="switchLayout()"
+    >
+      Switch layout &orarr;
+    </button>
+  </span>
+</div>
+
 This is a demo site built entirely using Congo. It also contains a complete set of [theme documentation](/docs/). Congo is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.
 
 Explore the [sample pages](/samples/) to get a feel for what Congo can do. If you like what you see, check out the project on [Github](https://github.com/jpanther/Congo) or read the [Installation guide](/docs/installation/) to get started.