From 5b8d6d3e2e1ddd5bd374dcc7321a8bc8d05f57d0 Mon Sep 17 00:00:00 2001
From: Fockskraft <johannes.d.vos@web.de>
Date: Mon, 4 May 2026 18:34:37 +0200
Subject: [PATCH] Add hero for Gradient in Background

---
 src/index.html          | 27 ++++++++++++++-------------
 src/static/css/main.css |  8 ++++++--
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/index.html b/src/index.html
index 37b871f..ceb97f5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -32,20 +32,21 @@ limitations under the License.
             </ul>
         </nav>
 
-        <header>
-            <h1>seekra</h1>
-            <p>
-                Built to search.
-            </p>
-        </header>
+        <div class="hero">
+            <header>
+                <h1>seekra</h1>
+                <p>
+                    Built to search.
+                </p>
+            </header>
 
-        <form id="search-form">
-            <div class="search-wrapper">
-                <input type="search" name="search" placeholder="Search..." required />
-                <button type="submit">Search</button>
-            </div>
-        </form>
-        
+            <form id="search-form">
+                <div class="search-wrapper">
+                    <input type="search" name="search" placeholder="Search..." required />
+                    <button type="submit">Search</button>
+                </div>
+            </form>
+        </div>
         <footer>
             <p>&copy; 2026 seekra.</p>
         </footer>
diff --git a/src/static/css/main.css b/src/static/css/main.css
index a0d57df..77ce7d5 100644
--- a/src/static/css/main.css
+++ b/src/static/css/main.css
@@ -2,6 +2,12 @@ body {
     margin: 0;
     background-color: #ffffff;
 }
+.hero {
+    background: 
+        radial-gradient(ellipse at 40% 60%, rgba(255,255,255,0.55) 0%, transparent 75%),
+        linear-gradient(160deg, #c8d8f0, #7aa0d8, #5077C7, #dce8f8);
+    padding-bottom: 40px;
+}
 
 header {
     text-align: center;
@@ -59,8 +65,6 @@ form {
     background: #374FA5;
 }
 
-
-
 footer{
     text-align: center;
     margin-top: 20px;