💄 style(navbar): remove contact CTA, add prism gradient sign-in button

lwinmoepaing · claude · lwinmoepaing · commit 5d08a2608d84 · 2026-03-16T21:45:13.000+07:00
Remove contact link from desktop and mobile nav to declutter. Redesign
SignInButton with prismatic gradient background and hover glow. Group
desktop nav into links + utilities with divider. Add auth to mobile menu.
Update CLAUDE.md with motion package rename and dev port 3333.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -10,14 +10,14 @@ Myanmar Software Engineers (MMSWE) — a community platform showcasing Myanmar s
 - **Package Manager**: Bun (primary)
 - **Styling**: Tailwind CSS + DaisyUI + Sass
 - **Content**: Contentlayer with MDX (profiles and blogs)
-- **Animation**: Framer Motion, Three.js / React Three Fiber
+- **Animation**: Motion (formerly Framer Motion), Three.js / React Three Fiber
 - **Path alias**: `@/*` → `./src/*`
 
 ## Commands
 
 ```bash
 bun install          # Install dependencies
-bun dev              # Dev server
+bun dev --port 3333  # Dev server (port 3333)
 bun run build        # Build static site (output: ./out)
 bun run serve        # Serve static build locally
 bun run lint         # ESLint
diff --git a/src/components/Auth/SignInButton.tsx b/src/components/Auth/SignInButton.tsx
@@ -18,16 +18,27 @@ export default function SignInButton({ className }: { className?: string }) {
       type="button"
       onClick={signInWithGoogle}
       className={cn(
-        "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium",
-        "bg-white/[0.06] border border-white/[0.08]",
-        "text-zinc-300 hover:text-white hover:bg-white/[0.1]",
-        "hover:border-prism-violet/30",
-        "transition-all duration-300",
+        "group relative flex items-center gap-2 px-4 py-2 rounded-full text-sm font-bold uppercase tracking-wider overflow-hidden",
+        "text-white transition-all duration-300",
         className
       )}
     >
-      <LogIn className="w-4 h-4" />
-      <span className={mmFont}>{t("signIn")}</span>
+      {/* Gradient background */}
+      <span
+        className="absolute inset-0 rounded-full opacity-90 group-hover:opacity-100 transition-opacity duration-300"
+        style={{
+          background: "linear-gradient(135deg, #22d3ee, #a78bfa, #fb7185)",
+        }}
+      />
+      {/* Hover glow */}
+      <span
+        className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+        style={{
+          boxShadow: "0 0 20px rgba(167,139,250,0.4), 0 0 40px rgba(34,211,238,0.2)",
+        }}
+      />
+      <LogIn className="relative z-10 w-3.5 h-3.5" />
+      <span className={cn("relative z-10", mmFont)}>{t("signIn")}</span>
     </button>
   );
 }
diff --git a/src/components/Common/Navbar/Navbar.tsx b/src/components/Common/Navbar/Navbar.tsx
@@ -352,79 +352,46 @@ const Navbar = () => {
             <MseLogo />
           </motion.div>
 
-          {/* Desktop Links */}
-          <div className="hidden lg:flex flex-row items-center gap-6 xl:gap-10">
-            {linkKeys.map((link, i) => (
-              <NavLink
-                key={link.key}
-                href={link.href}
-                label={t(link.key)}
-                isActive={path === link.href}
-                index={i}
-                mmFont={mmFont}
-              />
-            ))}
-
-            {/* Language Toggle */}
-            <motion.div
-              initial={{ opacity: 0, y: -12 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.35, duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
-            >
-              <LanguageToggle />
-            </motion.div>
-
-            {/* CTA-style Contact link */}
-            <motion.div
-              initial={{ opacity: 0, y: -12 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.4, duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
-            >
-              <MseLink
-                href="/contact-us"
-                className={cn(
-                  "relative font-display text-[13px] font-bold uppercase tracking-[0.15em]",
-                  "px-4 py-1.5 rounded-full overflow-hidden",
-                  "transition-all duration-300",
-                  path === "/contact-us"
-                    ? "text-white"
-                    : "text-zinc-400 hover:text-white"
-                )}
-              >
-                {/* Prism border glow */}
-                <span
-                  className="absolute inset-0 rounded-full opacity-60"
-                  style={{
-                    padding: "1px",
-                    background: "linear-gradient(135deg, #22d3ee, #a78bfa, #fb7185)",
-                    WebkitMask:
-                      "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-                    WebkitMaskComposite: "xor",
-                    maskComposite: "exclude",
-                  }}
-                />
-                <motion.span
-                  className="absolute inset-0 rounded-full opacity-0 hover:opacity-100 transition-opacity duration-300"
-                  style={{
-                    background:
-                      "linear-gradient(135deg, rgba(34,211,238,0.08), rgba(167,139,250,0.08), rgba(251,113,133,0.08))",
-                  }}
-                  whileHover={{ opacity: 1 }}
+          {/* Desktop Navigation */}
+          <div className="hidden lg:flex flex-row items-center">
+            {/* Primary nav links */}
+            <div className="flex items-center gap-5 xl:gap-8">
+              {linkKeys.map((link, i) => (
+                <NavLink
+                  key={link.key}
+                  href={link.href}
+                  label={t(link.key)}
+                  isActive={path === link.href}
+                  index={i}
+                  mmFont={mmFont}
                 />
-                <span className={cn("relative z-10", mmFont)}>{t("contact")}</span>
-              </MseLink>
-            </motion.div>
+              ))}
+            </div>
+
+            {/* Prismatic divider */}
+            <div className="mx-4 xl:mx-5 h-4 w-px bg-gradient-to-b from-transparent via-white/[0.08] to-transparent" />
 
-            {/* Auth */}
-            {!authLoading && (
+            {/* Utility group */}
+            <div className="flex items-center gap-3">
               <motion.div
                 initial={{ opacity: 0, y: -12 }}
                 animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.45, duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
+                transition={{ delay: 0.35, duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
               >
-                {isAuthenticated ? <UserAvatar /> : <SignInButton className="text-[11px] px-3 py-1.5" />}
+                <LanguageToggle />
               </motion.div>
-            )}
+
+              {/* Auth */}
+              {!authLoading && (
+                <motion.div
+                  initial={{ opacity: 0, y: -12 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.4, duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
+                >
+                  {isAuthenticated ? <UserAvatar /> : <SignInButton className="text-[11px] px-3 py-1.5" />}
+                </motion.div>
+              )}
+            </div>
           </div>
 
           {/* Mobile hamburger */}
@@ -510,23 +477,26 @@ const Navbar = () => {
                     mmFont={mmFont}
                   />
                 ))}
-                <MobileNavLink
-                  href="/contact-us"
-                  label={t("contact")}
-                  isActive={path === "/contact-us"}
-                  index={linkKeys.length}
-                  onClick={closeMobile}
-                  mmFont={mmFont}
-                />
               </nav>
 
-              {/* Bottom decoration */}
+              {/* Bottom section — auth + branding */}
               <motion.div
                 className="absolute bottom-12 left-8 right-8"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ delay: 0.6 }}
               >
+                {/* Auth */}
+                {!authLoading && (
+                  <div className="mb-5">
+                    {isAuthenticated ? (
+                      <UserAvatar />
+                    ) : (
+                      <SignInButton className="w-full justify-center py-2.5" />
+                    )}
+                  </div>
+                )}
+
                 <div className="h-[1px] w-full bg-white/5 mb-4" />
                 <div className="flex items-center justify-between">
                   <p className={cn("font-mono text-[10px] text-zinc-600 tracking-widest uppercase", mmFont)}>
