Skip to content

Commit a4b3efa

Browse files
sum1t-heresum1t-here
committed
refactor: minor ui changes
1 parent 98640aa commit a4b3efa

File tree

3 files changed

+84
-63
lines changed

3 files changed

+84
-63
lines changed

‎src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default function Home() {
3232
<NavBar />
3333

3434
{/* main content */}
35-
<main className="w-full 2xl:w-[110rem] mx-auto px-6 sm:px-24 flex flex-col lg:flex-row items-start justify-between gap-10 mt-20 sm:mt-12 lg:mt-10 mb-5 hide-scrollbar">
35+
<main className="w-5/6 lg:w-full 2xl:w-5/6 3xl:w-3/5 mx-auto px-6 sm:px-24 flex flex-col lg:flex-row items-start justify-between gap-10 mt-20 sm:mt-12 lg:mt-10 mb-5 hide-scrollbar">
3636
{/* Left Section */}
3737
<div className="space-y-6 w-full text-center lg:text-left lg:mt-12">
3838
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl 2xl:text-[5rem] 3xl:text-[4.5rem] font-bold text-white leading-tight">

‎src/components/NavBar.tsx‎

Lines changed: 80 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -32,93 +32,114 @@ export default function NavBar() {
3232
},
3333
];
3434
return (
35-
<div className="w-full flex items-center justify-center">
36-
{/* desktop header */}
35+
<div className="w-full flex flex-col items-center justify-center">
36+
{/* Desktop Header */}
3737
<nav className="lg:flex flex-row justify-between items-center w-5/6 py-5 hidden">
38-
{/* logo */}
38+
{/* Logo */}
3939
<Link href={'/'}>
40-
<Image src="/logo.svg" alt="logo" width={135} height={45} />
40+
<div className="flex justify-center items-center mt-1 lg:mt-3">
41+
<Image
42+
src="/logo.svg"
43+
alt="logo"
44+
width={135}
45+
height={45}
46+
/>
47+
</div>
4148
</Link>
42-
<div className="flex flex-row gap-4">
49+
50+
{/* Navigation Items */}
51+
<div className="flex flex-row gap-6 items-center">
4352
{navItems.map((nav, index) =>
4453
nav.external ? (
4554
<a
4655
href={nav.path}
4756
key={index}
48-
target="target_blank"
57+
target="_blank"
58+
className={`font-semibold lg:font-lg ${
59+
pathname === nav.path
60+
? 'text-[#00A340] font-extrabold'
61+
: 'text-white hover:text-[#00A340]'
62+
}`}
4963
>
50-
<p
51-
className={`font-semibold lg:font-lg ${pathname === nav.path ? 'text-[#00A340] font-extrabold' : 'text-white hover:text-[#00A340]'}`}
52-
>
53-
{nav.name}
54-
</p>
64+
{nav.name}
5565
</a>
5666
) : (
5767
<Link href={nav.path} key={index}>
5868
<p
59-
className={`font-semibold lg:font-lg ${pathname === nav.path ? 'text-[#00A340] font-extrabold' : 'text-white hover:text-[#00A340]'}`}
69+
className={`font-semibold lg:font-lg ${
70+
pathname === nav.path
71+
? 'text-[#00A340] font-extrabold'
72+
: 'text-white hover:text-[#00A340]'
73+
}`}
6074
>
6175
{nav.name}
6276
</p>
6377
</Link>
6478
),
6579
)}
6680
</div>
81+
82+
{/* CTA Button */}
6783
<Link href={'/waitlist'}>
6884
<Button className="bg-green-700 hover:bg-black/40">
6985
Join The Waitlist
7086
</Button>
7187
</Link>
7288
</nav>
73-
{/* mobile header */}
74-
<nav className="flex justify-between items-center w-full p-5 lg:hidden">
75-
<div className="flex items-center">
76-
<DropdownMenu>
77-
<DropdownMenuTrigger>
78-
<Menu className="text-white" />
79-
</DropdownMenuTrigger>
80-
<DropdownMenuContent className="bg-slate-900/80">
81-
{navItems.map((nav, index) =>
82-
nav.external ? (
83-
<a
84-
href={nav.path}
85-
key={index}
86-
target="target_blank"
89+
90+
{/* Mobile Header */}
91+
<nav className="flex justify-between items-center w-full px-5 py-4 lg:hidden">
92+
{/* Mobile Menu */}
93+
<DropdownMenu>
94+
<DropdownMenuTrigger>
95+
<Menu className="text-white" />
96+
</DropdownMenuTrigger>
97+
<DropdownMenuContent className="bg-slate-900/80">
98+
{navItems.map((nav, index) =>
99+
nav.external ? (
100+
<a
101+
href={nav.path}
102+
key={index}
103+
target="_blank"
104+
className={`font-semibold ${
105+
pathname === nav.path
106+
? 'text-[#00A340]'
107+
: 'text-white'
108+
}`}
109+
>
110+
<DropdownMenuItem>
111+
{nav.name}
112+
</DropdownMenuItem>
113+
</a>
114+
) : (
115+
<Link href={nav.path} key={index}>
116+
<DropdownMenuItem
117+
className={`font-semibold ${
118+
pathname === nav.path
119+
? 'text-[#00A340]'
120+
: 'text-white'
121+
}`}
87122
>
88-
<DropdownMenuItem
89-
className={`font-semibold ${pathname === nav.path ? 'text-[#00A340]' : 'text-white'}`}
90-
>
91-
{nav.name}
92-
</DropdownMenuItem>
93-
</a>
94-
) : (
95-
<Link href={nav.path} key={index}>
96-
<DropdownMenuItem
97-
className={`font-semibold ${pathname === nav.path ? 'text-[#00A340]' : 'text-white'}`}
98-
>
99-
{nav.name}
100-
</DropdownMenuItem>
101-
</Link>
102-
),
103-
)}
104-
<DropdownMenuItem>
105-
<Link href={'/waitlist'}>
106-
<Button className="bg-green-700 hover:bg-black/40">
107-
Join The Waitlist
108-
</Button>
123+
{nav.name}
124+
</DropdownMenuItem>
109125
</Link>
110-
</DropdownMenuItem>
111-
</DropdownMenuContent>
112-
</DropdownMenu>
113-
</div>
114-
<Link href={'/'}>
115-
<Image
116-
src="./logo.svg"
117-
alt="logo"
118-
width={20}
119-
height={20}
120-
className="w-28 h-20"
121-
/>
126+
),
127+
)}
128+
129+
{/* CTA Button */}
130+
<DropdownMenuItem>
131+
<Link href={'/waitlist'}>
132+
<Button className="bg-green-700 hover:bg-black/40 w-full">
133+
Join The Waitlist
134+
</Button>
135+
</Link>
136+
</DropdownMenuItem>
137+
</DropdownMenuContent>
138+
</DropdownMenu>
139+
140+
{/* Logo */}
141+
<Link href={'/'} className="flex justify-center items-center">
142+
<Image src="/logo.svg" alt="logo" width={110} height={35} />
122143
</Link>
123144
</nav>
124145
</div>

‎tailwind.config.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@ export default {
5050
'4': 'hsl(var(--chart-4))',
5151
'5': 'hsl(var(--chart-5))',
5252
},
53-
screens: {
54-
'3xl': '2560px',
55-
},
53+
},
54+
screens: {
55+
'3xl': '1950px',
5656
},
5757
borderRadius: {
5858
lg: 'var(--radius)',

0 commit comments

Comments
 (0)