Add GitHub component and Decoration components

src/app/components/Decoration.tsx

@@ -0,0 +1,29 @@
+import Image from 'next/image'
+
+export function UpperDecoration({ className }: { className?: string }) {
+  return (
+    <div className={className}>
+      <Image
+        src='/upper-decoration.svg'
+        alt='upper decoration'
+        className='object-contain h-full w-full'
+        width={100}
+        height={100}
+      />
+    </div>
+  )
+}
+
+export function LowerDecoration({ className }: { className?: string }) {
+  return (
+    <div className={className}>
+      <Image
+        src='/lower-decoration.svg'
+        alt='lower decoration'
+        className='object-contain h-full w-full'
+        width={100}
+        height={100}
+      />
+    </div>
+  )
+}

src/app/components/GitHub.tsx

@@ -0,0 +1 @@
+export default function GitHub() {}

src/app/layout.tsx

@@ -5,6 +5,7 @@ import AppleTouchIcon from '../../public/favicons/apple-touch-icon.png'
 import Favicon16 from '../../public/favicons/favicon-16x16.png'
 import Favicon32 from '../../public/favicons/favicon-32x32.png'
 import Favicon from '../../public/favicons/favicon.ico'
+import { LowerDecoration, UpperDecoration } from './components/Decoration'
 
 const title = 'Walnuts.dev'
 const description = 'I am Walnuts'
@@ -69,9 +70,15 @@ function Header() {
     <header>
       <div className='flex justify-center w-full '>
         <div className='w-10/12 flex items-center justify-left h-12 md:h-16 text-black font-bold font-Nunito text-xl sm:text-2xl px-1'>
-          <a className='logo' href='#'>
+          <div className='h-full '>
+            <UpperDecoration className='h-2/3' />
+          </div>
+          <a className='logo px-1' href='#'>
             Walnuts.dev
           </a>
+          <div className='h-full items-end flex'>
+            <LowerDecoration className='pl-2 h-3/4' />
+          </div>
         </div>
       </div>
       <div className='flex justify-center w-full  border-0 '>

src/app/page.tsx

@@ -4,7 +4,7 @@ import QR from './components/QR'
 export default function Home() {
   return (
     <>
-      <main className='flex min-h-screen flex-col items-center justify-between p-6 sm:p-10'>
+      <main className='flex min-h-screen flex-col items-center justify-between p-6 sm:p-10 '>
         <Profile />
       </main>
       <QR className='fixed bottom-0 right-0 z-10 p-4' />