feat: delete unused files and make ui more clean

src/components/footer.tsx

@@ -0,0 +1,14 @@
+import { Heart } from '@/components/icons/heart'
+
+export const Footer = () => {
+  return (
+    <footer className='absolute bottom-0 left-0 w-full p-6'>
+      <div className='flex items-center space-x-3 text-gray-400'>
+        <div className='h-6 w-6 opacity-50'>
+          <Heart />
+        </div>
+        <p className='text-sm'>crafted with care and dedication.</p>
+      </div>
+    </footer>
+  )
+}

src/components/header.tsx

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import { Github } from 'lucide-react'
+
+import { Kinotio } from '@/components/icons/kinotio'
+import { Discord } from '@/components/icons/discord'
+
+import { DATA } from '@/data'
+
+export const Header = () => {
+  return (
+    <header className='fixed top-0 left-0 right-0 z-10 bg-opacity-90 backdrop-blur-sm'>
+      <div className='container mx-auto px-4 py-4 flex items-center justify-between'>
+        <Link href='/' className='flex items-center space-x-2'>
+          <Kinotio width={150} height={100} />
+        </Link>
+        <nav className='flex items-center space-x-6'>
+          <Link href='/docs' className='text-gray-300 hover:text-white transition-colors'>
+            Docs
+          </Link>
+          <Link
+            href={DATA.social_url.discord}
+            className='text-gray-300 hover:text-white transition-colors'
+          >
+            <Discord className='h-6 w-6' />
+            <span className='sr-only'>Discord</span>
+          </Link>
+          <Link
+            href={DATA.social_url.github}
+            className='text-gray-300 hover:text-white transition-colors'
+          >
+            <Github className='h-6 w-6' />
+            <span className='sr-only'>GitHub</span>
+          </Link>
+        </nav>
+      </div>
+    </header>
+  )
+}

src/components/icons/discord.tsx

@@ -0,0 +1,10 @@
+export const Discord = (props: React.ComponentProps<'svg'>): React.ReactElement => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36' {...props}>
+      <path
+        fill='currentColor'
+        d='M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z'
+      />
+    </svg>
+  )
+}

src/components/icons/heart.tsx

@@ -0,0 +1,7 @@
+export const Heart = (props: React.ComponentProps<'svg'>): React.ReactElement => {
+  return (
+    <svg viewBox='0 0 24 24' fill='currentColor' {...props}>
+      <path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' />
+    </svg>
+  )
+}