feat(ui): small improvements on footer's logo

src/components/footer/index.tsx

@@ -1,15 +1,14 @@
 import React, { ComponentProps } from 'react'
-import Image from 'next/image'
 import Link from 'next/link'
 import { tv } from 'tailwind-variants'
 import { FiAward, FiGithub } from 'react-icons/fi'
 import { AiOutlineCopyrightCircle } from 'react-icons/ai'
 
 import { useThemeStore } from '~/stores/theme-store'
-import { ReactComponent as Logo } from './logo.svg'
-import { container, logo, version } from './styles'
 
 import packageJson from '../../../package.json'
+import { container, version } from './styles'
+import { Logo } from './logo'
 
 export function Footer() {
   const Info = ({ children, className, ...props }: ComponentProps<'a'>) => {
@@ -30,7 +29,7 @@ export function Footer() {
       <div className="flex flex-col flex-wrap items-center justify-center gap-10 sm:flex-row md:gap-14">
         <div className="w-14 overflow-hidden rounded-2xl shadow-lg">
           <Link href="/">
-            <Logo className={logo({ theme })} />
+            <Logo />
           </Link>
         </div>
         <section className="flex flex-col gap-2 sm:gap-0">

src/components/footer/logo.tsx

@@ -0,0 +1,32 @@
+import { useThemeStore } from '~/stores/theme-store'
+import { logo } from './styles'
+
+export function Logo() {
+  const theme = useThemeStore(set => set.theme)
+
+  return (
+    <svg
+      width="800"
+      height="800"
+      viewBox="0 0 800 800"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-full w-full"
+    >
+      <rect
+        width="800"
+        height="800"
+        rx="196"
+        fill="currentColor"
+        className={logo.rect({ theme })}
+      />
+      <path
+        d="M213 656V297.215C213 248.844 274.843 228.663 303.375 267.722L496.625 532.278C525.157 571.337 587 551.156 587 502.785V144"
+        stroke="currentColor"
+        strokeWidth="130"
+        strokeLinecap="round"
+        className={logo.path({ theme })}
+      />
+    </svg>
+  )
+}

src/components/footer/styles.ts

@@ -15,20 +15,35 @@ export const container = tv({
   }
 })
 
-export const logo = tv({
-  base: /*tw:*/ 'backdrop-blur-2xl',
-  variants: {
-    theme: {
-      transition: /*tw:*/ 'text-main/50',
-      dark: /*tw:*/ 'text-dark-foreground/50',
-      'blue-room': /*tw:*/ 'text-blue-room/50',
-      train: /*tw:*/ 'text-train/50',
-      waterfall: /*tw:*/ 'text-waterfall/50',
-      light: /*tw:*/ 'text-light-foreground',
-      'camping-fire': /*tw:*/ 'text-camping-fire/50'
+export const logo = {
+  rect: tv({
+    base: /*tw:*/ 'backdrop-blur-2xl',
+    variants: {
+      theme: {
+        transition: /*tw:*/ 'text-main/50',
+        dark: /*tw:*/ 'text-dark-foreground',
+        'blue-room': /*tw:*/ 'text-blue-room/20',
+        train: /*tw:*/ 'text-train/20',
+        waterfall: /*tw:*/ 'text-waterfall/20',
+        light: /*tw:*/ 'text-light-foreground',
+        'camping-fire': /*tw:*/ 'text-camping-fire/20'
+      }
     }
-  }
-})
+  }),
+  path: tv({
+    variants: {
+      theme: {
+        transition: /*tw:*/ 'text-white',
+        dark: /*tw:*/ 'text-dark-background',
+        'blue-room': /*tw:*/ 'text-blue-room',
+        train: /*tw:*/ 'text-train',
+        waterfall: /*tw:*/ 'text-waterfall',
+        light: /*tw:*/ 'text-light-background',
+        'camping-fire': /*tw:*/ 'text-camping-fire'
+      }
+    }
+  })
+}
 
 export const version = tv({
   variants: {