Skip to content

Commit b901d22

Browse files
codebyNJcodebyNJ
committed
fix: make navbar sticky throughout the page
Fixes #152
1 parent 5445fd9 commit b901d22

File tree

5 files changed

+98
-98
lines changed

5 files changed

+98
-98
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import Navbar from '@/components/landing-sections/navbar'
1+
// import Navbar from '@/components/landing-sections/navbar'
22
import React from 'react'
33

44
const Layout = ({ children }: { children: React.ReactNode }) => {
55
return (
66
<section>
7-
<Navbar />
7+
{/* <Navbar /> */}
88
{children}
99
</section>
1010
)

‎apps/web/src/app/(main)/(landing)/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { FaqSection } from '@/components/faq/FaqSection'
1515
const Landing = () => {
1616
return (
1717
<main className='min-h-screen w-full bg-[#101010] text-white font-sans overflow-hidden relative'>
18-
<Navbar />
18+
{/* <Navbar /> */}
1919
<div className="min-h-screen w-full max-w-[2000px] mx-auto border-x border-[#252525] overflow-hidden">
2020
<Hero />
2121
<Bento />

‎apps/web/src/components/landing-sections/Hero.tsx‎

Lines changed: 67 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -5,78 +5,87 @@ import React from "react";
55
import PrimaryButtom from "../ui/custom-button";
66
import Link from "next/link";
77
import { motion } from "framer-motion";
8+
import Navbar from "./navbar";
89

910
const Hero = () => {
1011
return (
11-
<div className="w-full min-h-[50dvh] lg:h-[69dvh] relative overflow-hidden z-10 p-4 lg:p-[60px] flex flex-col items-center justify-center gap-6 ">
12-
<Image
13-
src="/assets/bgmain.svg"
14-
alt="background"
15-
fill
16-
className="object-cover max-md:object-top w-full h-full absolute -z-10 opacity-90"
17-
priority
18-
/>
19-
<div className="w-full lg:max-w-3xl space-y-3 text-center">
20-
<motion.div
21-
initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
22-
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
23-
transition={{ duration: 1, ease: "easeOut", type: "spring" }}
24-
className="flex items-center justify-center gap-2 mb-4"
25-
>
26-
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-black/40 backdrop-blur-sm border border-[#252525]">
27-
<span className="text-[#e1e1e1] text-sm font-medium">Backed by</span>
28-
<div className="flex items-center gap-1.5">
29-
<div className="w-5 h-5 bg-gradient-to-br from-[#FF6154] to-[#FF8C00] rounded flex items-center justify-center">
30-
<span className="text-white text-xs font-bold">U</span>
12+
<>
13+
{/* Fixed Floating Navbar */}
14+
<div className="fixed top-4 left-1/2 -translate-x-1/2 w-[96%] md:w-[90%] lg:w-[85%] xl:w-[80%] z-50">
15+
<Navbar />
16+
</div>
17+
18+
<div className="w-full min-h-[50dvh] lg:h-[69dvh] relative overflow-hidden z-10 px-4 lg:px-[60px] pb-4 lg:pb-[60px] flex flex-col items-center justify-center gap-6 pt-32 sm:pt-36 md:pt-44 lg:pt-36">
19+
<Image
20+
src="/assets/bgmain.svg"
21+
alt="background"
22+
fill
23+
className="object-cover max-md:object-top w-full h-full absolute -z-10 opacity-90"
24+
priority
25+
/>
26+
27+
<div className="w-full lg:max-w-3xl space-y-3 text-center relative z-10 mt-6 sm:mt-8 md:mt-12 lg:mt-0">
28+
<motion.div
29+
initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
30+
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
31+
transition={{ duration: 1, ease: "easeOut", type: "spring" }}
32+
className="flex items-center justify-center gap-2 mb-4"
33+
>
34+
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-black/40 backdrop-blur-sm border border-[#252525]">
35+
<span className="text-[#e1e1e1] text-sm font-medium">Backed by</span>
36+
<div className="flex items-center gap-1.5">
37+
<div className="w-5 h-5 bg-gradient-to-br from-[#FF6154] to-[#FF8C00] rounded flex items-center justify-center">
38+
<span className="text-white text-xs font-bold">U</span>
39+
</div>
40+
<span className="text-white text-sm font-medium">sers</span>
3141
</div>
32-
<span className="text-white text-sm font-medium">sers</span>
3342
</div>
34-
</div>
35-
</motion.div>
36-
<motion.h1
37-
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
38-
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
39-
transition={{ duration: 1.2, ease: "easeOut", type: "spring" }}
40-
className="text-5xl text-[2.8rem] lg:text-7xl lg:text-[6rem] font-medium tracking-tighter"
41-
>
42-
Find your perfect Open-Source Repo
43-
</motion.h1>
44-
<motion.p
43+
</motion.div>
44+
<motion.h1
45+
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
46+
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
47+
transition={{ duration: 1.2, ease: "easeOut", type: "spring" }}
48+
className="text-5xl text-[2.8rem] lg:text-7xl lg:text-[6rem] font-medium tracking-tighter"
49+
>
50+
Find your perfect Open-Source Repo
51+
</motion.h1>
52+
<motion.p
53+
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
54+
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
55+
transition={{
56+
duration: 1.2,
57+
ease: "easeOut",
58+
type: "spring",
59+
delay: 0.1,
60+
}}
61+
className="w-full lg:text-2xl tracking-tight font-light sm:max-w-lg mx-auto lg:max-w-4xl lg:text-balance text-[#e1e1e1]"
62+
>
63+
Find top open-source repos in seconds. Filter by your language,
64+
framework, or niche. Start contributing in seconds, not hours.
65+
</motion.p>
66+
</div>
67+
<motion.div
4568
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
4669
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
4770
transition={{
4871
duration: 1.2,
4972
ease: "easeOut",
5073
type: "spring",
51-
delay: 0.1,
74+
delay: 0.2,
5275
}}
53-
className="w-full lg:text-2xl tracking-tight font-light sm:max-w-lg mx-auto lg:max-w-4xl lg:text-balance text-[#e1e1e1]"
76+
className="cursor-pointer relative z-10 mt-4"
5477
>
55-
Find top open-source repos in seconds. Filter by your language,
56-
framework, or niche. Start contributing in seconds, not hours.
57-
</motion.p>
78+
<Link href="/dashboard/home" className="block">
79+
<PrimaryButtom>
80+
<Terminal />
81+
Get Started
82+
</PrimaryButtom>
83+
</Link>
84+
</motion.div>
85+
<div className="absolute h-[50%] w-full bg-gradient-to-t from-[#101010] via-transparent to-transparent bottom-0 left-1/2 -translate-x-1/2"></div>
5886
</div>
59-
<motion.div
60-
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
61-
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
62-
transition={{
63-
duration: 1.2,
64-
ease: "easeOut",
65-
type: "spring",
66-
delay: 0.2,
67-
}}
68-
className="cursor-pointer z-30"
69-
>
70-
<Link href="/dashboard/home" className="block">
71-
<PrimaryButtom>
72-
<Terminal />
73-
Get Started
74-
</PrimaryButtom>
75-
</Link>
76-
</motion.div>
77-
<div className="absolute h-[50%] w-full bg-gradient-to-t from-[#101010] via-transparent to-transparent bottom-0 left-1/2 -translate-x-1/2"></div>
78-
</div>
87+
</>
7988
);
8089
};
8190

82-
export default Hero;
91+
export default Hero;

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Navbar = () => {
1212
const { scrollYProgress } = useScroll();
1313
const pathname = usePathname();
1414
const isPricingPage = pathname === "/pricing";
15-
const [showNavbar, setShowNavbar] = useState(isPricingPage ? true : false);
15+
const [showNavbar, setShowNavbar] = useState(true);
1616
const [isOpen, setIsOpen] = useState(false);
1717

1818
React.useEffect(() => {
@@ -29,7 +29,8 @@ const Navbar = () => {
2929

3030
useMotionValueEvent(scrollYProgress, "change", (latest) => {
3131
if (!isPricingPage) {
32-
setShowNavbar(latest > 0);
32+
// Keep navbar visible, no hiding logic
33+
setShowNavbar(true);
3334
}
3435
});
3536

@@ -45,14 +46,14 @@ const Navbar = () => {
4546

4647
return (
4748
<motion.nav
48-
initial={{ opacity: 0 }}
49-
animate={showNavbar ? { opacity: 1 } : { opacity: 0 }}
50-
transition={{ duration: 0.3 }}
49+
initial={{ opacity: 0, y: -20 }}
50+
animate={{ opacity: 1, y: 0 }}
51+
transition={{ duration: 0.5, ease: "easeOut" }}
5152
className={cn(
52-
" z-40 flex items-center justify-between px-4 py-3 bg-neutral-900/5 backdrop-blur-xl border-white/10",
53+
"flex items-center justify-between px-4 py-3 bg-black/20 backdrop-blur-md border border-white/10 rounded-3xl",
5354
isPricingPage
54-
? "relative h-max md:w-full top-0 border-b"
55-
: "fixed rounded-3xl top-4 border w-[94%] md:w-[80%] mx-auto left-1/2 -translate-x-1/2"
55+
? "relative h-max md:w-full border-b"
56+
: "w-full"
5657
)}
5758
>
5859
<div className="flex items-center gap-3">
@@ -64,7 +65,7 @@ const Navbar = () => {
6465
>
6566
{isOpen ? <X size={28} /> : <Menu size={28} />}
6667
</button>
67-
<div className="text-xl md:text-2xl font-medium tracking-tighter flex items-center gap-2">
68+
<div className="text-xl md:text-2xl font-medium tracking-tighter flex items-center gap-2 text-white">
6869
<div className="w-8 md:w-10 aspect-square overflow-hidden relative">
6970
<Image
7071
src="/assets/logo.svg"
@@ -76,15 +77,15 @@ const Navbar = () => {
7677
<span>Opensox AI</span>
7778
</div>
7879
</div>
79-
<div className="hidden md:flex items-center gap-5 tracking-tight text-lg font-light text-[#d1d1d1]">
80+
<div className="hidden md:flex items-center gap-5 tracking-tight text-lg font-light text-white/90">
8081
{links.map((link, index) => {
8182
const isActive = pathname === link.href;
8283
return (
8384
<Link
8485
key={index}
8586
href={link.href}
8687
className={cn(
87-
"cursor-pointer hover:text-white",
88+
"cursor-pointer hover:text-white transition-colors",
8889
isActive && "text-white"
8990
)}
9091
>
@@ -143,4 +144,4 @@ const Navbar = () => {
143144
);
144145
};
145146

146-
export default Navbar;
147+
export default Navbar;

‎pnpm-lock.yaml‎

Lines changed: 15 additions & 25 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)