From 7aa7f7850e3107dd27962d292f12c65da0ea828d Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Tue, 30 Sep 2025 11:09:39 +0300
Subject: [PATCH 1/3] add github button

---
 apps/web/app/(site)/Navbar.tsx        | 30 ++++++++++++++++++++-------
 apps/web/components/ui/MobileMenu.tsx |  3 +--
 apps/web/public/github.svg            |  1 +
 packages/ui/src/components/Button.tsx |  2 +-
 4 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 apps/web/public/github.svg

diff --git a/apps/web/app/(site)/Navbar.tsx b/apps/web/app/(site)/Navbar.tsx
index 3d7a82f6184..eb040a14889 100644
--- a/apps/web/app/(site)/Navbar.tsx
+++ b/apps/web/app/(site)/Navbar.tsx
@@ -2,7 +2,6 @@
 
 import {
 	Button,
-	ListItem,
 	Logo,
 	NavigationMenu,
 	NavigationMenuContent,
@@ -15,6 +14,7 @@ import {
 import { classNames } from "@cap/utils";
 import { Clapperboard, Zap } from "lucide-react";
 import { motion } from "motion/react";
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Suspense, use, useEffect, useState } from "react";
@@ -132,7 +132,7 @@ export const Navbar = () => {
 	return (
 		<>
 			<header className="fixed top-4 left-0 right-0 z-[51] md:top-10  animate-in fade-in slide-in-from-top-4 duration-500">
-				<nav className="p-2 mx-auto w-full max-w-[calc(100%-20px)] bg-white rounded-full border backdrop-blur-md md:max-w-fit border-zinc-200 h-fit">
+				<nav className="p-2 mx-auto w-full max-w-[calc(100%-20px)] bg-white rounded-full border backdrop-blur-md lg:max-w-fit border-zinc-200 h-fit">
 					<div className="flex gap-12 justify-between items-center mx-auto max-w-4xl h-full transition-all">
 						<div className="flex items-center">
 							<Link passHref href="/home">
@@ -146,7 +146,7 @@ export const Navbar = () => {
 									}}
 								/>
 							</Link>
-							<div className="hidden md:flex">
+							<div className="hidden lg:flex">
 								<NavigationMenu>
 									<NavigationMenuList className="space-x-0">
 										{Links.map((link) => (
@@ -169,9 +169,9 @@ export const Navbar = () => {
 																				href={sublink.href}
 																				className="block p-3 space-y-1 leading-none no-underline rounded-md transition-all duration-200 outline-none select-none hover:bg-gray-2 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
 																			>
-																				<div className="flex items-center gap-2 text-base font-medium leading-none transition-colors duration-200 text-zinc-700 group-hover:text-zinc-900">
+																				<div className="flex gap-2 items-center text-base font-medium leading-none transition-colors duration-200 text-zinc-700 group-hover:text-zinc-900">
 																					{sublink.icon && sublink.icon}
-																					<span className="text-gray-12 font-semibold">
+																					<span className="font-semibold text-gray-12">
 																						{sublink.label}
 																					</span>
 																				</div>
@@ -206,7 +206,23 @@ export const Navbar = () => {
 								</NavigationMenu>
 							</div>
 						</div>
-						<div className="hidden items-center space-x-2 md:flex">
+						<div className="hidden items-center space-x-2 lg:flex">
+							<Button
+								variant="outline"
+								icon={
+									<Image
+										src="/github.svg"
+										alt="Github"
+										width={16}
+										height={16}
+									/>
+								}
+								href="https://github.com/CapSoftware/Cap"
+								size="sm"
+								className="w-full font-medium sm:w-auto"
+							>
+								Github
+							</Button>
 							<Suspense
 								fallback={
 									<Button
@@ -234,7 +250,7 @@ export const Navbar = () => {
 						</div>
 						<button
 							type="button"
-							className="flex md:hidden"
+							className="flex lg:hidden"
 							onClick={() => setShowMobileMenu(!showMobileMenu)}
 						>
 							<div className="flex flex-col gap-[5px] mr-1">
diff --git a/apps/web/components/ui/MobileMenu.tsx b/apps/web/components/ui/MobileMenu.tsx
index 135a9a51737..48c1e235c9a 100644
--- a/apps/web/components/ui/MobileMenu.tsx
+++ b/apps/web/components/ui/MobileMenu.tsx
@@ -56,9 +56,8 @@ const externalLinks: NavLink[] = [
 ];
 
 const MobileMenu: React.FC<MobileMenuProps> = ({ setShowMobileMenu, auth }) => {
-	console.log(auth, "auth");
 	return (
-		<div className="block overflow-auto fixed top-0 left-0 z-40 px-4 w-full h-full bg-gray-2 md:hidden">
+		<div className="block overflow-auto fixed top-0 left-0 z-40 px-4 w-full h-full bg-gray-2 sm:hidden">
 			<div className="pb-12">
 				<nav className="relative mt-24 mobile">
 					<ul className="p-0 space-y-4">
diff --git a/apps/web/public/github.svg b/apps/web/public/github.svg
new file mode 100644
index 00000000000..37fa923df33
--- /dev/null
+++ b/apps/web/public/github.svg
@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
index 04eb65b1515..fada2a92d27 100644
--- a/packages/ui/src/components/Button.tsx
+++ b/packages/ui/src/components/Button.tsx
@@ -19,7 +19,7 @@ const buttonVariants = cva(
 				destructive:
 					"bg-red-500 text-white hover:bg-red-600 disabled:bg-red-200",
 				outline:
-					"border border-gray-4 hover:border-gray-12 hover:bg-gray-12 hover:text-gray-1 text-gray-12 disabled:bg-gray-8",
+					"border border-gray-4 hover:border-gray-5 hover:bg-gray-3 text-gray-12 disabled:bg-gray-8",
 				white:
 					"bg-gray-1 border border-gray-5 text-gray-12 hover:bg-gray-3 disabled:bg-gray-8",
 				ghost: "hover:bg-white/20 hover:text-white",

From eee5ecc3cb7a1f7dcd084689163b2f1a4a1a95cc Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Tue, 30 Sep 2025 11:12:22 +0300
Subject: [PATCH 2/3] cleanup

---
 apps/web/app/(site)/Navbar.tsx        | 3 ++-
 apps/web/components/ui/MobileMenu.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/(site)/Navbar.tsx b/apps/web/app/(site)/Navbar.tsx
index eb040a14889..7118c019e76 100644
--- a/apps/web/app/(site)/Navbar.tsx
+++ b/apps/web/app/(site)/Navbar.tsx
@@ -131,7 +131,7 @@ export const Navbar = () => {
 
 	return (
 		<>
-			<header className="fixed top-4 left-0 right-0 z-[51] md:top-10  animate-in fade-in slide-in-from-top-4 duration-500">
+			<header className="fixed top-4 left-0 right-0 z-[51] lg:top-10  animate-in fade-in slide-in-from-top-4 duration-500">
 				<nav className="p-2 mx-auto w-full max-w-[calc(100%-20px)] bg-white rounded-full border backdrop-blur-md lg:max-w-fit border-zinc-200 h-fit">
 					<div className="flex gap-12 justify-between items-center mx-auto max-w-4xl h-full transition-all">
 						<div className="flex items-center">
@@ -217,6 +217,7 @@ export const Navbar = () => {
 										height={16}
 									/>
 								}
+								target="_blank"
 								href="https://github.com/CapSoftware/Cap"
 								size="sm"
 								className="w-full font-medium sm:w-auto"
diff --git a/apps/web/components/ui/MobileMenu.tsx b/apps/web/components/ui/MobileMenu.tsx
index 48c1e235c9a..b77bed1100b 100644
--- a/apps/web/components/ui/MobileMenu.tsx
+++ b/apps/web/components/ui/MobileMenu.tsx
@@ -57,7 +57,7 @@ const externalLinks: NavLink[] = [
 
 const MobileMenu: React.FC<MobileMenuProps> = ({ setShowMobileMenu, auth }) => {
 	return (
-		<div className="block overflow-auto fixed top-0 left-0 z-40 px-4 w-full h-full bg-gray-2 sm:hidden">
+		<div className="block overflow-auto fixed top-0 left-0 z-40 px-4 w-full h-full bg-gray-2">
 			<div className="pb-12">
 				<nav className="relative mt-24 mobile">
 					<ul className="p-0 space-y-4">

From 0d6e2b684c1289af6cfdaf63ff00bab4780d8d82 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Tue, 30 Sep 2025 11:15:59 +0300
Subject: [PATCH 3/3] type

---
 packages/ui/src/components/Button.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
index fada2a92d27..9a775692297 100644
--- a/packages/ui/src/components/Button.tsx
+++ b/packages/ui/src/components/Button.tsx
@@ -49,6 +49,7 @@ export interface ButtonProps
 	href?: string;
 	kbd?: string;
 	icon?: React.ReactNode;
+	target?: string;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -62,6 +63,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			href,
 			kbd,
 			icon,
+			target,
 			...props
 		},
 		ref,
@@ -71,6 +73,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			<Comp
 				className={classNames(buttonVariants({ variant, size, className }))}
 				ref={ref as any}
+				target={target || undefined}
 				href={href || undefined}
 				{...props}
 			>