From b79b7eee4adeee8296dcb3d3180e4cff2952f1af Mon Sep 17 00:00:00 2001
From: Caen De Silva <caen@desilva.se>
Date: Fri, 2 Feb 2024 20:52:08 +0100
Subject: [PATCH] Update newsletter-signup-example.blade.php

---
 .../newsletter-signup-example.blade.php       | 75 +++++++++++++------
 1 file changed, 52 insertions(+), 23 deletions(-)

diff --git a/packages/ui-kit/docs/_pages/examples/newsletter-signup-example.blade.php b/packages/ui-kit/docs/_pages/examples/newsletter-signup-example.blade.php
index e7294dbd878..8a7a88e688d 100644
--- a/packages/ui-kit/docs/_pages/examples/newsletter-signup-example.blade.php
+++ b/packages/ui-kit/docs/_pages/examples/newsletter-signup-example.blade.php
@@ -1,25 +1,54 @@
 <x-hyde-ui::layouts.focus>
-    <x-hyde-ui::card class="mx-auto">
-        <x-slot name="title">
-            Let your creativity flow!
-        </x-slot>
-     
-        <x-slot name="main" style="padding-top: 0; padding-bottom: 0;">
-            <x-hyde-ui::prose>
-                <x-hyde-ui::markdown>
-                    The UI kit is minimal by design. It's up to **you** to create something _amazing_.
-     
-                    Maybe create a form to collect newsletter subscriptions?
-                </x-hyde-ui::markdown>
-            </x-hyde-ui::prose>
-        </x-slot>
-     
-        <x-slot name="footer" class="flex text-center justify-center">
-            <x-hyde-ui::input placeholder="Enter email" />
-     
-            <x-hyde-ui::button-primary>
-                Subscribe
-            </x-hyde-ui::button-primary>
-        </x-slot>
-    </x-hyde-ui::card>
+    <div class="flex">
+        <div class="light">
+            <x-hyde-ui::card class="mx-auto">
+                <x-slot name="title">
+                    Let your creativity flow!
+                </x-slot>
+             
+                <x-slot name="main" style="padding-top: 0; padding-bottom: 0;">
+                    <x-hyde-ui::prose>
+                        <x-hyde-ui::markdown>
+                            The UI kit is minimal by design. It's up to **you** to create something _amazing_.
+             
+                            Maybe create a form to collect newsletter subscriptions?
+                        </x-hyde-ui::markdown>
+                    </x-hyde-ui::prose>
+                </x-slot>
+             
+                <x-slot name="footer" class="flex text-center justify-center">
+                    <x-hyde-ui::input placeholder="Enter email" />
+             
+                    <x-hyde-ui::button-primary>
+                        Subscribe
+                    </x-hyde-ui::button-primary>
+                </x-slot>
+            </x-hyde-ui::card>
+        </div>
+        <div class="dark">
+            <x-hyde-ui::card class="mx-auto">
+                <x-slot name="title">
+                    Let your creativity flow!
+                </x-slot>
+             
+                <x-slot name="main" style="padding-top: 0; padding-bottom: 0;">
+                    <x-hyde-ui::prose>
+                        <x-hyde-ui::markdown>
+                            The UI kit is minimal by design. It's up to **you** to create something _amazing_.
+             
+                            Maybe create a form to collect newsletter subscriptions?
+                        </x-hyde-ui::markdown>
+                    </x-hyde-ui::prose>
+                </x-slot>
+             
+                <x-slot name="footer" class="flex text-center justify-center">
+                    <x-hyde-ui::input placeholder="Enter email" />
+             
+                    <x-hyde-ui::button-primary>
+                        Subscribe
+                    </x-hyde-ui::button-primary>
+                </x-slot>
+            </x-hyde-ui::card>
+        </div>
+    </div>
 </x-hyde-ui::layouts.focus>