style: revamp homepage and drawer

Co-authored-by: me <ramvignesh-b@github.com>
Reviewed-on: #4

frontend/src/components/Logo.tsx

@@ -3,10 +3,15 @@ import "@fontsource/knewave/400.css";
 
 interface LogoProps {
   scale?: number;
-  type?: "inline" | "mono" | "logo";
+  type?: "inline" | "mono" | "logo" | null;
+  ul?: boolean;
 }
 
-export default function Logo({ scale = 1, type = "logo" }: LogoProps) {
+export default function Logo({
+  scale = 1,
+  type = null,
+  ul = false,
+}: LogoProps) {
   if (type === "inline") {
     return (
       <span className={"text-accent font-display italic "}>
@@ -24,24 +29,35 @@ export default function Logo({ scale = 1, type = "logo" }: LogoProps) {
     );
   }
 
+  if (type === "logo") {
+    return (
+      <img
+        src="/logo.svg"
+        alt="Pi. Ku. logo"
+        className="mx-4"
+        width={scale * 100}
+      />
+    );
+  }
+
   return (
     <div
       role="img"
       aria-label="Pi. Ku. logo"
-      className="inline-flex items-baseline justify-center leading-none select-none"
+      className={`inline-flex items-baseline justify-center leading-none select-none ${ul ? "ul-wavy" : ""}`}
       style={{ fontFamily: "'Knewave', serif", scale }}
     >
-      <span className={`text-3xl font-light text-accent`}>Pi</span>
+      <span className="text-3xl font-light text-accent">Pi</span>
       <DotIcon
         weight="fill"
         size={12}
-        className={`text-primary translate-y-1 -mx-px`}
+        className="text-primary translate-y-1 -mx-px"
       />
-      <span className={`text-3xl font-light text-accent`}>&nbsp;Ku</span>
+      <span className="text-3xl font-light text-accent">&nbsp;Ku</span>
       <DotIcon
         weight="fill"
         size={12}
-        className={`text-primary translate-y-1 -mx-px`}
+        className="text-primary translate-y-1 -mx-px"
       />
     </div>
   );