Update login page styling and sidebar collapse logo

src/app/globals.css

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -29,15 +30,16 @@
   --border: 214.3 31.8% 91.4%;
   --input: 214.3 31.8% 91.4%;
   --ring: 221.2 83.2% 53.3%;
-  --sidebar: 222.2 84% 4.9%;
-  --sidebar-foreground: 210 40% 98%;
-  --sidebar-primary: 217.2 91.2% 59.8%;
+  --sidebar: 216 12% 92%;
+  --sidebar-foreground: 0 0% 20%;
+  --sidebar-primary: 0 91.2% 59.8%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 217.2 32.6% 17.5%;
-  --sidebar-accent-foreground: 210 40% 98%;
-  --sidebar-border: 217.2 32.6% 17.5%;
-  --sidebar-ring: 224.3 76.3% 48%;
+  --sidebar-accent: 218 16% 87%;
+  --sidebar-accent-foreground: 0 0% 20%;
+  --sidebar-border: 220 11% 84%;
+  --sidebar-ring: 0 76.3% 48%;
   --radius: 0.5rem;
+  --theme-primary: hsl(var(--primary));
 }
 
 .dark {
@@ -574,6 +576,62 @@
   --sidebar-ring: 351 85% 52%;
 }
 
+.bc-logo {
+  font-family: 'Raleway', sans-serif;
+  font-weight: 800;
+  font-size: 18px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: hsl(var(--sidebar-foreground));
+  padding: 8px 16px;
+  position: relative;
+  display: inline-block;
+}
+
+.bc-logo .accent {
+  color: var(--theme-primary, #3b91f7);
+}
+
+.bc-logo::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-top: 1.5px solid var(--theme-primary, #3b91f7);
+  border-left: 1.5px solid var(--theme-primary, #3b91f7);
+  width: 0;
+  height: 0;
+  animation: drawTL 3s ease-in-out infinite;
+}
+
+.bc-logo::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-bottom: 1.5px solid var(--theme-primary, #3b91f7);
+  border-right: 1.5px solid var(--theme-primary, #3b91f7);
+  width: 0;
+  height: 0;
+  animation: drawBR 3s ease-in-out infinite;
+}
+
+@keyframes drawTL {
+  0%, 5%  { width: 0;    height: 0; }
+  30%     { width: 100%; height: 0; }
+  55%     { width: 100%; height: 100%; }
+  85%     { width: 100%; height: 100%; }
+  100%    { width: 0;    height: 0; }
+}
+
+@keyframes drawBR {
+  0%, 5%  { width: 0;    height: 0; }
+  30%     { width: 100%; height: 0; }
+  55%     { width: 100%; height: 100%; }
+  85%     { width: 100%; height: 100%; }
+  100%    { width: 0;    height: 0; }
+}
+
 @layer base {
   * {
     @apply border-border;

src/app/login/page.tsx

@@ -2,7 +2,6 @@
 
 import { useState, useEffect, useRef } from "react"
 import { useSearchParams } from "next/navigation"
-import { COMPANY_NAME } from "@/lib/constants"
 import { Eye, EyeOff, Loader2 } from "lucide-react"
 
 const waves = [
@@ -29,11 +28,11 @@ export default function LoginPage() {
   const testimonials = [
     {
       text: "This CRM transformed how we manage our sales pipeline. We've seen a 40% increase in lead conversion.",
-      author: "Marcus Johnson, Sales Lead at Coast IT",
+      author: "Marcus Johnson, Sales Lead at Black Cipher",
     },
     {
       text: "When you're not sure, flip a coin, because when the coin is in the air, you realize which option you're actually hoping for.",
-      author: "Dillen van der Merwe, Madman of Coast IT",
+      author: "Dillen van der Merwe, Madman of Black Cipher",
     },
   ]
 
@@ -231,16 +230,11 @@ export default function LoginPage() {
   return (
     <div className="flex min-h-screen bg-[#0a0a0f]">
         <div className="left-panel flex flex-1 flex-col p-12">
-          <div className="relative z-10">
-            <img
-              src="/logo/CompanyLogo.png"
-              alt={COMPANY_NAME}
-              className="h-44 w-auto object-contain"
-            />
-          </div>
-
           <div className="relative z-10 flex-1 flex items-center justify-center">
             <div className="text-center">
+              <div className="bc-logo mb-8" style={{"--theme-primary":"#1BB0CE"}}>
+                Black <span className="accent">Cipher</span>
+              </div>
               <h1 className="text-[34px] font-extrabold text-[#e8e8ef] leading-tight tracking-[-0.6px]">
                 Your Agency&apos;s{" "}
                 <span className="growth-word">Growth</span>{" "}