Merge pull request #187 from AbhijitPrajapati12/fix/navbar

navbar repetition fix

Author: apsinghdev

apps/web/src/app/(main)/(landing)/layout.tsx

@@ -1,10 +1,8 @@
-import Navbar from '@/components/landing-sections/navbar'
 import React from 'react'
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
     return (
         <section>
-            <Navbar />
             {children}
         </section>
     )

apps/web/src/components/landing-sections/navbar.tsx

@@ -46,7 +46,7 @@ const Navbar = () => {
   return (
     <motion.nav
       initial={{ opacity: 0 }}
-      animate={showNavbar ? { opacity: 1 } : { opacity: 0, display: 'none' }}
+      animate={showNavbar ? { opacity: 1 } : { opacity: 0, display: "none" }}
       transition={{ duration: 0.3 }}
       className={cn(
         " z-40  flex items-center justify-between px-4 py-3  bg-neutral-900/5 backdrop-blur-xl  border-white/10",
@@ -57,7 +57,7 @@ const Navbar = () => {
     >
       <div className="flex items-center gap-3">
         <button
-          className="md:hidden text-white"
+          className="min-[1115px]:hidden text-white"
           onClick={() => setIsOpen(!isOpen)}
           aria-label="Toggle navigation menu"
           aria-expanded={isOpen}
@@ -76,7 +76,7 @@ const Navbar = () => {
           <span>Opensox AI</span>
         </div>
       </div>
-      <div className="hidden md:flex items-center gap-5 tracking-tight text-lg font-light text-text-tertiary">
+      <div className="hidden min-[1115px]:flex items-center gap-5 max-[1270px]:gap-4 max-[1173px]:gap-3 tracking-tight text-lg max-[1270px]:text-base max-[1173px]:text-sm font-light max-[1173px]:font-normal text-[#d1d1d1]">
         {links.map((link, index) => {
           const isActive = pathname === link.href;
           return (
@@ -98,7 +98,7 @@ const Navbar = () => {
           href="https://github.com/apsinghdev/opensox"
           target="_blank"
           rel="noopener noreferrer"
-          className="hidden lg:flex items-center gap-2 px-4 py-2.5 bg-[#0d1117] hover:bg-[#161b22] transition-colors rounded-lg border border-[#30363d] text-white"
+          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"
         >
           <Github className="w-5 h-5" />
           <span className="text-sm font-medium">Contribute</span>
@@ -115,7 +115,7 @@ 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 md: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 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"
         >
           {links.map((link, index) => (
             <Link
@@ -132,7 +132,7 @@ const Navbar = () => {
             target="_blank"
             rel="noopener noreferrer"
             onClick={() => setIsOpen(false)}
-            className="flex items-center gap-2 px-4 py-2 bg-[#0d1117] hover:bg-[#161b22] rounded-lg border border-[#30363d] text-white transition-colors"
+            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"
           >
             <Github className="w-5 h-5" />
             <span className="text-sm font-medium">Contribute</span>

apps/web/tailwind.config.ts

@@ -72,6 +72,13 @@ const config: Config = {
         warning: colors.status.warning,
         info: colors.status.info,
 
+        // External brand colors
+        github: {
+          bg: colors.external.github.bg,
+          hover: colors.external.github.hover,
+          border: colors.external.github.border,
+        },
+
         // Legacy ox-* colors (for gradual migration) - will be deprecated
         "ox-purple": colors.brand.purple.DEFAULT,
         "ox-purple-2": colors.brand.purple.dark,