From a257c9e32cf2b0f4371fe1f89f631738f0a0d19f Mon Sep 17 00:00:00 2001 From: Nsvoriginals <123223662+nsvoriginals@users.noreply.github.com> Date: Fri, 26 Dec 2025 13:04:21 +0530 Subject: [PATCH 1/3] fix: improve navbar responsiveness on small devices and logo clickable --- .../src/components/landing-sections/navbar.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/web/src/components/landing-sections/navbar.tsx b/apps/web/src/components/landing-sections/navbar.tsx index 580b943d..bcabf7f2 100644 --- a/apps/web/src/components/landing-sections/navbar.tsx +++ b/apps/web/src/components/landing-sections/navbar.tsx @@ -67,19 +67,19 @@ const Navbar = () => { " z-40 flex items-center justify-between px-4 py-3 bg-neutral-900/5 backdrop-blur-xl border-white/10", isPricingPage ? "relative h-max md:w-full top-0 border-b" - : "fixed rounded-3xl top-4 border w-[94%] md:w-[80%] mx-auto left-1/2 -translate-x-1/2" + : "fixed rounded-3xl top-4 border w-[calc(100%-2rem)] lg:w-[90%] xl:w-[85%] 2xl:w-[80%] max-w-[1600px] mx-auto left-1/2 -translate-x-1/2" )} >
-
+
{ className="object-cover w-full h-full" />
- Opensox AI -
+ Opensox AI +
-
+
{links.map((link, index) => { const isActive = pathname === link.href; return ( @@ -108,7 +108,7 @@ const Navbar = () => { ); })}
-
+
Date: Fri, 26 Dec 2025 13:21:43 +0530 Subject: [PATCH 2/3] fix: correct gap typo and remaining breakpoints --- .../components/landing-sections/navbar.tsx | 52 ++++++++++++------- 1 file changed, 32 insertions(+), 20 deletions(-) diff --git a/apps/web/src/components/landing-sections/navbar.tsx b/apps/web/src/components/landing-sections/navbar.tsx index bcabf7f2..5cd6dcc5 100644 --- a/apps/web/src/components/landing-sections/navbar.tsx +++ b/apps/web/src/components/landing-sections/navbar.tsx @@ -1,5 +1,5 @@ "use client"; -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import PrimaryButton from "../ui/custom-button"; import { motion, useScroll, useMotionValueEvent } from "framer-motion"; import Image from "next/image"; @@ -15,6 +15,7 @@ const Navbar = () => { const isPricingPage = pathname === "/pricing"; const [showNavbar, setShowNavbar] = useState(isPricingPage ? true : false); const [isOpen, setIsOpen] = useState(false); + const [isMounted, setIsMounted] = useState(false); const { trackButtonClick, trackLinkClick } = useAnalytics(); const handleGetStartedClick = (location: "navbar" | "mobile_menu") => { @@ -30,6 +31,10 @@ const Navbar = () => { ); }; + useEffect(() => { + setIsMounted(true); + }, []); + React.useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape" && isOpen) { @@ -58,19 +63,26 @@ const Navbar = () => { { name: "FAQ", href: "/#faq" }, ]; + if (!isMounted) { + return null; + } + return ( -
+
-
+
background
Opensox AI
-
+
{links.map((link, index) => { const isActive = pathname === link.href; return ( @@ -99,7 +111,7 @@ const Navbar = () => { key={index} href={link.href} className={cn( - "cursor-pointer hover:text-white", + "cursor-pointer hover:text-white transition-colors whitespace-nowrap", isActive && "text-white" )} > @@ -108,24 +120,24 @@ const Navbar = () => { ); })}
-
+
handleContributeClick("navbar")} - className="hidden min-[1115px]:flex items-center gap-2 px-4 py-2.5 bg-github-bg hover:bg-github-hover transition-colors rounded-lg border border-github-border text-white" + className="hidden lg:flex items-center gap-1.5 xl:gap-2 px-3 xl:px-4 py-2 xl:py-2.5 bg-github-bg hover:bg-github-hover transition-colors rounded-lg border border-github-border text-white" > - - Contribute + + Contribute handleGetStartedClick("navbar")} > - - + + Get Started @@ -135,14 +147,14 @@ const Navbar = () => { initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25 }} - className="absolute top-full mt-2 left-0 w-full bg-neutral-900/90 backdrop-blur-xl border border-white/10 min-[1115px]:hidden flex flex-col items-center py-5 space-y-4 z-50 rounded-3xl" + className="absolute top-full mt-2 left-0 w-full max-h-[80vh] overflow-y-auto bg-neutral-900/95 backdrop-blur-xl border border-white/10 lg:hidden flex flex-col items-center py-5 space-y-4 z-50 rounded-3xl shadow-xl" > {links.map((link, index) => ( setIsOpen(false)} - className="text-white hover:text-gray-300 text-lg" + className="text-white hover:text-gray-300 text-base transition-colors" > {link.name} @@ -155,7 +167,7 @@ const Navbar = () => { setIsOpen(false); handleContributeClick("mobile_menu"); }} - className="flex items-center gap-2 px-4 py-2 bg-github-bg hover:bg-github-hover rounded-lg border border-github-border text-white transition-colors" + className="flex items-center gap-2 px-4 py-2.5 bg-github-bg hover:bg-github-hover rounded-lg border border-github-border text-white transition-colors" > Contribute @@ -166,4 +178,4 @@ const Navbar = () => { ); }; -export default Navbar; +export default Navbar; \ No newline at end of file From 4dcccf9e774d078e8f5a4b193377318eee5b4c8c Mon Sep 17 00:00:00 2001 From: Nsvoriginals <123223662+nsvoriginals@users.noreply.github.com> Date: Fri, 26 Dec 2025 13:32:55 +0530 Subject: [PATCH 3/3] fix: use text-text-tertiary design token instead of hardcoded color --- apps/web/src/components/landing-sections/navbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/components/landing-sections/navbar.tsx b/apps/web/src/components/landing-sections/navbar.tsx index 5cd6dcc5..c216355b 100644 --- a/apps/web/src/components/landing-sections/navbar.tsx +++ b/apps/web/src/components/landing-sections/navbar.tsx @@ -103,7 +103,7 @@ const Navbar = () => { Opensox AI
-
+
{links.map((link, index) => { const isActive = pathname === link.href; return (