Fix/fix nav on medium width devices

apps/web/src/components/landing-sections/how-it-works.tsx

@@ -1,66 +1,69 @@
-
 import { Sparkles, Upload, Zap } from "lucide-react";
 import Features from "../ui/features";
 import Header from "../ui/header";
 
 const data = [
-    {
-        id: 1,
-        title: "1. Set Your Filters",
-        content:
-            "Choose the languages, stack, activity level, and other preferences that matter to you.",
-        image: "/assets/filter.webp",
-        icon: <Upload className="w-6 h-6 text-primary" />,
-    },
-    {
-        id: 2,
-        title: "2. Search Instantly",
-        content:
-            "Hit search and explore thousands of open-source repositories matched to your criteria.",
-        image: "/assets/search.webp",
-        icon: <Zap className="w-6 h-6 text-primary" />,
-    },
-    {
-        id: 3,
-        title: "3. Discover & Contribute",
-        content:
-            "Find the perfect project for your stack, start exploring the code, and make meaningful contributions.",
-        image: "/assets/contribute.webp",
-        icon: <Sparkles className="w-6 h-6 text-primary" />,
-    },
+  {
+    id: 1,
+    title: "1. Set Your Filters",
+    content:
+      "Choose the languages, stack, activity level, and other preferences that matter to you.",
+    image: "/assets/filter.webp",
+    icon: <Upload className="w-6 h-6 text-primary" />,
+  },
+  {
+    id: 2,
+    title: "2. Search Instantly",
+    content:
+      "Hit search and explore thousands of open-source repositories matched to your criteria.",
+    image: "/assets/search.webp",
+    icon: <Zap className="w-6 h-6 text-primary" />,
+  },
+  {
+    id: 3,
+    title: "3. Discover & Contribute",
+    content:
+      "Find the perfect project for your stack, start exploring the code, and make meaningful contributions.",
+    image: "/assets/contribute.webp",
+    icon: <Sparkles className="w-6 h-6 text-primary" />,
+  },
 ];
 
 export default function HowItWorks() {
-    return (
-        <div id="HIW" className="border-b border-[#252525]">
-            <Header title="How it Works"/>
-            <div className="w-full relative px-[30px] lg:px-[50px]">
-                <div
-                    style={{
-                        height: "100%",
-                        "--pattern-fg": "#252525",
-                        borderRight: "1px solid #252525",
-                        backgroundImage:
-                            "repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
-                        backgroundSize: "10px 10px",
-                        backgroundAttachment: "fixed",
-                    } as React.CSSProperties}
-                    className='w-[30px] lg:w-[50px] absolute left-0 top-0'
-                />
-                <div
-                    style={{
-                        height: "100%",
-                        "--pattern-fg": "#252525",
-                        borderLeft: "1px solid #252525",
-                        backgroundImage:
-                            "repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
-                        backgroundSize: "10px 10px",
-                        backgroundAttachment: "fixed",
-                    } as React.CSSProperties}
-                    className='w-[30px] lg:w-[50px] absolute right-0 top-0 '
-                />
-                <Features data={data} />
-            </div>
-        </div>
-    );
+  return (
+    <div id="workflow" className="border-b border-[#252525]">
+      <Header title="How it Works" />
+      <div className="w-full relative px-[30px] lg:px-[50px]">
+        <div
+          style={
+            {
+              height: "100%",
+              "--pattern-fg": "#252525",
+              borderRight: "1px solid #252525",
+              backgroundImage:
+                "repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
+              backgroundSize: "10px 10px",
+              backgroundAttachment: "fixed",
+            } as React.CSSProperties
+          }
+          className="w-[30px] lg:w-[50px] absolute left-0 top-0"
+        />
+        <div
+          style={
+            {
+              height: "100%",
+              "--pattern-fg": "#252525",
+              borderLeft: "1px solid #252525",
+              backgroundImage:
+                "repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
+              backgroundSize: "10px 10px",
+              backgroundAttachment: "fixed",
+            } as React.CSSProperties
+          }
+          className="w-[30px] lg:w-[50px] absolute right-0 top-0 "
+        />
+        <Features data={data} />
+      </div>
+    </div>
+  );
 }

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

@@ -1,12 +1,12 @@
 "use client";
 import React, { useState } from "react";
-import PrimaryButton from "../ui/custom-button";
 import { motion, useScroll, useMotionValueEvent } from "framer-motion";
 import Image from "next/image";
-import { Terminal, Github, Menu, X } from "lucide-react";
+import { Github, Menu, Terminal, X } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
+import PrimaryButton from "../ui/custom-button";
 
 const Navbar = () => {
   const { scrollYProgress } = useScroll();
@@ -37,7 +37,7 @@ const Navbar = () => {
     { name: "Pricing", href: "/pricing" },
     { name: "Features", href: "/#features" },
     { name: "Demo", href: "/#demo" },
-    { name: "How it works", href: "/#HIW" },
+    { name: "workflow", href: "/#workflow" },
     { name: "Stats", href: "/#Stats" },
     { name: "Contact", href: "/#Contact" },
     { name: "FAQ", href: "/#faq" },
@@ -52,93 +52,103 @@ 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-[96%] md:w-[80%] mx-auto left-1/2 -translate-x-1/2"
       )}
     >
-      <div className="flex items-center gap-3">
-        <button
-          className="min-[1115px]:hidden text-white"
-          onClick={() => setIsOpen(!isOpen)}
-          aria-label="Toggle navigation menu"
-          aria-expanded={isOpen}
-        >
-          {isOpen ? <X size={28} /> : <Menu size={28} />}
-        </button>
-        <div className="text-xl md:text-2xl font-medium tracking-tighter flex items-center gap-2">
-          <div className="w-8 md:w-10 aspect-square overflow-hidden relative">
-            <Image
-              src="/assets/logo.svg"
-              alt="background"
-              fill
-              className="object-cover w-full h-full"
-            />
+      <div className="flex items-center gap-3 w-full justify-between">
+        {/* opensox logo */}
+        <div className="flex items-center gap-1 lg:gap-3">
+          <button
+            className="md:hidden text-white"
+            onClick={() => setIsOpen(!isOpen)}
+            aria-label="Toggle navigation menu"
+            aria-expanded={isOpen}
+          >
+            {isOpen ? <X size={28} /> : <Menu size={28} />}
+          </button>
+          <div className="text-base lg:text-2xl  font-medium tracking-tighter flex items-center gap-2">
+            <div className="w-8 md:w-10 aspect-square overflow-hidden relative">
+              <Image
+                src="/assets/logo.svg"
+                alt="background"
+                fill
+                className="object-cover w-full h-full"
+              />
+            </div>
+            <span className="text-nowrap">Opensox AI</span>
           </div>
-          <span>Opensox AI</span>
         </div>
-      </div>
-      <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 (
-            <Link
-              key={index}
-              href={link.href}
-              className={cn(
-                "cursor-pointer hover:text-white",
-                isActive && "text-white"
-              )}
-            >
-              {link.name}
-            </Link>
-          );
-        })}
-      </div>
-      <div className="flex items-center gap-3">
-        <Link
-          href="https://github.com/apsinghdev/opensox"
-          target="_blank"
-          rel="noopener noreferrer"
-          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>
-        </Link>
-        <Link href="/dashboard/home" className="cursor-pointer z-30">
-          <PrimaryButton classname="px-3 py-2 text-sm whitespace-nowrap md:px-5 md:py-3 md:text-base">
-            <Terminal className="w-4 h-4 md:w-5 md:h-5" />
-            <span>Get Started</span>
-          </PrimaryButton>
-        </Link>
-      </div>
-      {isOpen && (
-        <motion.div
-          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"
-        >
-          {links.map((link, index) => (
-            <Link
-              key={index}
-              href={link.href}
-              onClick={() => setIsOpen(false)}
-              className="text-white hover:text-gray-300 text-lg"
-            >
-              {link.name}
-            </Link>
-          ))}
+        {/* links to be rendered */}
+        <div className="hidden md:flex items-center gap-3 tracking-tight text-sm lg:text-base xl:text-lg font-light text-text-tertiary">
+          {links.map((link, index) => {
+            const isActive = pathname === link.href;
+            return (
+              <Link
+                key={index}
+                href={link.href}
+                className={cn(
+                  "cursor-pointer hover:text-white text-sm lg:text-base",
+                  isActive && "text-white"
+                )}
+              >
+                {link.name}
+              </Link>
+            );
+          })}
+        </div>
+
+        {/* git link */}
+        <div className="flex items-center gap-3">
           <Link
             href="https://github.com/apsinghdev/opensox"
             target="_blank"
             rel="noopener noreferrer"
-            onClick={() => setIsOpen(false)}
-            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="hidden xl:flex items-center gap-2 px-4 py-2.5 bg-[#0d1117] hover:bg-[#161b22] transition-colors rounded-lg border border-[#30363d] text-white"
           >
             <Github className="w-5 h-5" />
             <span className="text-sm font-medium">Contribute</span>
           </Link>
-        </motion.div>
-      )}
+          <Link
+            href="/dashboard/home"
+            className="flex md:hidden lg:flex cursor-pointer z-30"
+          >
+            <PrimaryButton classname=" px-3 py-2 text-sm whitespace-nowrap md:px-5 md:py-3 md:text-base">
+              <Terminal className="w-4 h-4 md:w-5 md:h-5" />
+              <span>Get Started</span>
+            </PrimaryButton>
+          </Link>
+        </div>
+        {/* mobile nav dropdown */}
+        {isOpen && (
+          <motion.div
+            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"
+          >
+            {links.map((link, index) => (
+              <Link
+                key={index}
+                href={link.href}
+                onClick={() => setIsOpen(false)}
+                className="text-white hover:text-gray-300 text-lg"
+              >
+                {link.name}
+              </Link>
+            ))}
+            <Link
+              href="https://github.com/apsinghdev/opensox"
+              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"
+            >
+              <Github className="w-5 h-5" />
+              <span className="text-sm font-medium">Contribute</span>
+            </Link>
+          </motion.div>
+        )}
+      </div>
     </motion.nav>
   );
 };

apps/web/tsconfig.json

@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {