added a bit of ODD flair

Author: depatchedmode

examples/odd-passkeys-preact/public/wave-background-dark.webp

@@ -2,6 +2,7 @@ import * as OddPasskey from '@oddjs/passkeys'
 import { OddContextProvider } from '@oddjs/preact'
 import { Router } from 'preact-router'
 import Home from './home.jsx'
+import { ReactComponent as OddLogo } from './assets/odd-logo.svg'
 
 import Login from './login.jsx'
 import Register from './register.jsx'
@@ -31,7 +32,15 @@ export function App() {
             <Login path="/login" />
             <Register path="/register" />
           </Router>
-          
+          <div class="powered-by-odd">
+            <div class="powered-by-wave">
+              <img class="powered-by-bg" src="/wave-background-light.webp" width="2080" height="120" alt="Wave background"/>
+              <img class="powered-by-fg" src="/wave-foreground-light.webp" width="2080" height="120" alt="Wave foreground"/>
+            </div>
+            <a class="powered-by-msg" href="https://odd.dev">
+              Powered by <OddLogo />
+            </a>
+          </div>
         </main>
       </OddContextProvider>
     </>

examples/odd-passkeys-preact/public/wave-background-light.webp

@@ -122,6 +122,7 @@ export default function Login(props) {
           </code>{' '}
           and enable it.</p>
         </div>
+
       </div>
 
       <style jsx>{`

examples/odd-passkeys-preact/public/wave-foreground-light.webp

@@ -47,4 +47,38 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding-bottom: 8rem;
+  box-sizing: border-box;
+}
+
+.powered-by-odd {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.powered-by-bg {
+  position: absolute;
+  bottom: 0;
+}
+
+.powered-by-fg {
+  position: absolute;
+  bottom: 0;
+}
+
+.powered-by-wave {
+  position: relative;
+}
+
+.powered-by-msg {
+  font-family: 'ApfelGrotezk';
+  background: #484A65;
+  display: flex;
+  padding: 1rem;
+  color: #AAADC4;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
 }