logo variants

src/components/dao/logo.tsx

@@ -1,3 +1,27 @@
-export default function Logo() {
-  return <>Logo</>;
+import logoText from '@/assets/logo-text.svg';
+import logoIcon from '@/assets/logo-icon.svg';
+
+const logoVariants = {
+  'mobile-sidebar': (
+    <div className="flex h-10 items-center justify-center space-x-2">
+      <img src={logoIcon} alt="Logo Icon" className="h-full w-auto" />
+      <img src={logoText} alt="Logo Text" className="h-full w-auto" />
+    </div>
+  ),
+  'desktop-sidebar': (
+    <div className="flex h-8 items-center justify-center space-x-1">
+      <img src={logoIcon} alt="Logo Icon" className="h-full w-auto" />
+      <img src={logoText} alt="Logo Text" className="h-full w-auto" />
+    </div>
+  ),
+  'main-hero': (
+    <div className="flex h-16 items-center justify-center space-x-3">
+      <img src={logoIcon} alt="Logo Icon" className="h-full w-auto" />
+      <img src={logoText} alt="Logo Text" className="h-full w-auto" />
+    </div>
+  )
+};
+
+export default function Logo({ variant = 'mobile-sidebar' }) {
+  return logoVariants[variant] || logoVariants['mobile-sidebar'];
 }

src/components/shared/mobile-sidebar.tsx

@@ -20,8 +20,8 @@ export default function MobileSidebar({
         <SheetContent side="left" className="bg-background !px-0">
           <div className="space-y-4 py-4">
             <div className="space-y-4 px-3 py-2">
-              <Link to="/" className="px-2 py-2 text-2xl font-bold text-white ">
-                <Logo />
+              <Link to="/">
+                <Logo variant="mobile-sidebar" />
               </Link>
               <div className="space-y-1 px-2">
                 <DashboardNav items={navItems} setOpen={setSidebarOpen} />

src/components/shared/sidebar.tsx

@@ -35,11 +35,7 @@ export default function Sidebar({ className }: SidebarProps) {
           isMinimized ? 'justify-center ' : 'justify-between'
         )}
       >
-        {!isMinimized && (
-          <h1 className="text-2xl font-bold">
-            <Logo />
-          </h1>
-        )}
+        {!isMinimized && <Logo variant="desktop-sidebar" />}
         <ChevronsLeft
           className={cn(
             'size-8 cursor-pointer rounded-full border bg-background text-foreground',

src/pages/auth/signin/index.tsx

@@ -18,20 +18,8 @@ export default function SignInPage() {
       </Link>
       <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r  lg:flex">
         <div className="absolute inset-0 bg-primary dark:bg-secondary" />
-        <div className="relative z-20 flex items-center text-lg font-medium">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="mr-2 h-6 w-6"
-          >
-            <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
-          </svg>
-          <Logo />
+        <div className="relative z-20">
+          <Logo variant="main-hero" />
         </div>
         <div className="relative z-20 mt-auto">
           <blockquote className="space-y-2">