Feat: Add UFOund it banner

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>
+    </>
   )
 }
 

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;
+}

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