From 84f630bc14a9a8ea8f708613127693b3a64e7e6d Mon Sep 17 00:00:00 2001
From: Asgeir Jacobsen <asgeija@stud.ntnu.no>
Date: Thu, 1 Oct 2026 09:57:48 +0200
Subject: [PATCH] Feat: Add "UFOund it" banner with accented UFO

Adds a header banner above the search bar showing the app name.
"UFO" is highlighted in the accent colour and a heavier weight so
the pun in the title stands out.

Refs #16
---
 frontend/src/App.tsx               | 22 +++++++++++++---------
 frontend/src/components/Banner.css | 15 +++++++++++++++
 frontend/src/components/Banner.tsx | 13 +++++++++++++
 3 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/Banner.css
 create mode 100644 frontend/src/components/Banner.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9eff901..414769a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,3 +1,4 @@
+import Banner from './components/Banner'
 import SearchBar from './components/SearchBar'
 import SightingList from './components/SightingList'
 import { useSightingSearch } from './hooks/use-sighting-search'
@@ -7,15 +8,18 @@ function App() {
   const { query, setQuery, sort, setSort, results } = useSightingSearch()
 
   return (
-    <main className="app">
-      <SearchBar
-        query={query}
-        onQueryChange={setQuery}
-        sort={sort}
-        onSortChange={setSort}
-      />
-      <SightingList sightings={results} />
-    </main>
+    <>
+      <Banner />
+      <main className="app">
+        <SearchBar
+          query={query}
+          onQueryChange={setQuery}
+          sort={sort}
+          onSortChange={setSort}
+        />
+        <SightingList sightings={results} />
+      </main>
+    </>
   )
 }
 
diff --git a/frontend/src/components/Banner.css b/frontend/src/components/Banner.css
new file mode 100644
index 0000000..810fd39
--- /dev/null
+++ b/frontend/src/components/Banner.css
@@ -0,0 +1,15 @@
+.banner {
+  padding: 16px 16px 0;
+  text-align: center;
+  margin-top: 16px;
+}
+
+.banner__title {
+  margin: 0;
+  letter-spacing: -0.04em;
+}
+
+.banner__ufo {
+  color: var(--accent);
+  font-weight: 800;
+}
diff --git a/frontend/src/components/Banner.tsx b/frontend/src/components/Banner.tsx
new file mode 100644
index 0000000..5052266
--- /dev/null
+++ b/frontend/src/components/Banner.tsx
@@ -0,0 +1,13 @@
+import './Banner.css'
+
+function Banner() {
+  return (
+    <header className="banner">
+      <h1 className="banner__title">
+        <span className="banner__ufo">UFO</span>und it
+      </h1>
+    </header>
+  )
+}
+
+export default Banner