Skip to content

Commit 2d079c1

Browse files
sidd233sidd233
authored
Merge pull request #40 from mshalom27/Hero/NavbarAndHero
Hero/navbar and hero
2 parents ea986eb + 0722e25 commit 2d079c1

5 files changed

Lines changed: 100 additions & 65 deletions

File tree

‎src/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Footer from "./components/Footer.jsx";
22
import Navbar from "./components/Navbar.jsx";
3-
import { Outlet } from "react-router";
3+
import { Outlet } from "react-router-dom";
44

55
const App = () => {
66
return (

‎src/components/Achievements.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { useNavigate } from "react-router";
1+
import { useNavigate } from "react-router-dom";
22
import achievementsData from "../config/achievement";
33

44
export default function Achievements() {
55
const navigate = useNavigate();
66

77
return (
8-
<div className="px-4 md:px-12 py-10 max-w-screen-xl mx-auto">
9-
<div style={{ marginBottom: "12rem" }}>
10-
<h2 className="text-3xl font-bold text-[#0B2044] mb-4">
8+
<div className="px-4 pt-32 md:pt-40 md:px-12 py-8 max-w-screen-xl mx-auto">
9+
<div className="md:mb-48 mb-12">
10+
<h2 className="text-3xl font-bold text-blue-900 mb-4">
1111
Our Achievements
1212
</h2>
1313
<p className="text-gray-700 mb-6 max-w-3xl">

‎src/components/Footer.jsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,15 @@ const Footer = ({
4646
</div>
4747
</div>
4848

49-
{/* Quick Links Section */}
50-
<div className="order-3 md:order-none">
51-
<h3 className="text-2xl font-semibold mb-6">Quick Links</h3>
52-
<ul className="space-y-3 text-base">
49+
{/* Middle Section */}
50+
<div>
51+
<h3 className="text-lg font-semibold">Quick Links</h3>
52+
<ul className="mt-2 space-y-1 text-sm">
53+
<li>
54+
<Link to="/about" className="hover:underline">
55+
About us
56+
</Link>
57+
</li>
5358
<li>
5459
<Link to="/team" className="hover:underline">
5560
Team

‎src/components/Navbar.jsx‎

Lines changed: 85 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,27 @@
11
import { siteConfig } from "../config/navbarHero";
22
import Button from "./shared/Button";
3-
import { useState } from "react";
3+
import { useState, useEffect } from "react";
44

55
export default function Navbar() {
66
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
77

8+
const [scrolled, setScrolled] = useState(false);
9+
10+
useEffect(() => {
11+
const handleScroll = () => {
12+
setScrolled(window.scrollY > 50);
13+
};
14+
window.addEventListener("scroll", handleScroll);
15+
16+
return () => window.removeEventListener("scroll", handleScroll);
17+
}, []);
18+
819
return (
9-
<header className="bg-white w-full px-0 min-[1100px]:sticky fixed top-0 left-0 z-50 ">
20+
<header
21+
className={`w-full px-0 min-[1100px]:sticky fixed top-0 left-0 z-50 transition-all duration-300 ${
22+
scrolled ? "bg-white/80 backdrop-blur-md shadow-md" : "bg-transparent"
23+
}`}
24+
>
1025
<div className="max-w-[1920px] w-screen mx-auto px-4 sm:px-6 md:px-8 lg:px-10 py-3 flex items-center text-black font-['Helvetica'] font-normal text-[20px] leading-[100%] tracking-[-0.015em]">
1126
<div className="flex items-center space-x-3 min-[900px]:space-x-6 flex-shrink-0">
1227
<img
@@ -32,10 +47,19 @@ export default function Navbar() {
3247
</nav>
3348

3449
<div className="hidden min-[1100px]:flex items-center space-x-4 text-sm flex-shrink-0 ml-auto ">
35-
<Button className="border border-black bg-white text-black px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-[rgba(55,115,236,1)] hover:text-white hover:border-none">
50+
<Button
51+
backgroundColor="white"
52+
textColor="black"
53+
className="border border-black px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-[rgba(55,115,236,1)] hover:text-white hover:border-none"
54+
>
3655
Join Us
3756
</Button>
38-
<Button className="bg-[rgba(6,25,70,1)] text-white px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-white hover:text-[rgba(6,25,70,1)]">
57+
58+
<Button
59+
backgroundColor="rgba(6,25,70,1)"
60+
textColor="white"
61+
className="px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-white hover:text-[rgba(6,25,70,1)]"
62+
>
3963
Contact Us
4064
</Button>
4165
</div>
@@ -50,73 +74,79 @@ export default function Navbar() {
5074
fill="none"
5175
stroke="currentColor"
5276
viewBox="0 0 24 24"
53-
xmlns="http://www.w3.org/2000/svg"
5477
>
55-
{mobileMenuOpen ? (
56-
<path
57-
strokeLinecap="round"
58-
strokeLinejoin="round"
59-
strokeWidth={2}
60-
d="M6 18L18 6M6 6l12 12"
61-
/>
62-
) : (
78+
{!mobileMenuOpen ? (
6379
<path
6480
strokeLinecap="round"
6581
strokeLinejoin="round"
6682
strokeWidth={2}
6783
d="M4 6h16M4 12h16M4 18h16"
6884
/>
69-
)}
85+
) : null}
7086
</svg>
7187
</button>
7288
</div>
7389

74-
{mobileMenuOpen && (
75-
<div className="min-[1100px]:hidden fixed inset-0 bg-[#173477ec] px-6 py-6 z-40 overflow-auto text-white">
76-
<button
77-
className="absolute top-6 right-6 text-white"
78-
onClick={() => setMobileMenuOpen(false)}
79-
aria-label="Close menu"
90+
<div
91+
className={`min-[1100px]:hidden fixed inset-0 px-6 py-6 z-40 overflow-auto text-white bg-[#173477ec] transition-all duration-500 ease-in-out
92+
${
93+
mobileMenuOpen
94+
? "opacity-100 translate-y-0 pointer-events-auto"
95+
: "opacity-0 -translate-y-8 pointer-events-none"
96+
}`}
97+
style={{ willChange: "opacity, transform" }}
98+
>
99+
<button
100+
className="absolute top-6 right-6 text-white"
101+
onClick={() => setMobileMenuOpen(false)}
102+
aria-label="Close menu"
103+
>
104+
<svg
105+
className="w-8 h-8"
106+
fill="none"
107+
stroke="currentColor"
108+
viewBox="0 0 24 24"
80109
>
81-
<svg
82-
className="w-8 h-8"
83-
fill="none"
84-
stroke="currentColor"
85-
viewBox="0 0 24 24"
86-
xmlns="http://www.w3.org/2000/svg"
110+
<path
111+
strokeLinecap="round"
112+
strokeLinejoin="round"
113+
strokeWidth={2}
114+
d="M6 18L18 6M6 6l12 12"
115+
/>
116+
</svg>
117+
</button>
118+
119+
<nav className="mt-14 flex flex-col w-full">
120+
{siteConfig.navigation.links.map((item) => (
121+
<a
122+
key={item.name}
123+
href={item.href}
124+
className="w-full py-4 text-lg font-semibold text-center text-white hover:text-blue-300 transition-colors"
125+
onClick={() => setMobileMenuOpen(false)}
87126
>
88-
<path
89-
strokeLinecap="round"
90-
strokeLinejoin="round"
91-
strokeWidth={2}
92-
d="M6 18L18 6M6 6l12 12"
93-
/>
94-
</svg>
95-
</button>
127+
{item.name}
128+
</a>
129+
))}
130+
</nav>
96131

97-
<nav className="mt-14 flex flex-col w-full">
98-
{siteConfig.navigation.links.map((item) => (
99-
<a
100-
key={item.name}
101-
href={item.href}
102-
className="w-full py-4 text-lg font-semibold text-center text-white hover:text-blue-300 transition-colors"
103-
onClick={() => setMobileMenuOpen(false)}
104-
>
105-
{item.name}
106-
</a>
107-
))}
108-
</nav>
132+
<div className="mt-8 flex flex-col space-y-4 pt-6 w-full">
133+
<Button
134+
backgroundColor="transparent"
135+
textColor="white"
136+
className="w-full border border-white px-4 py-3 text-center text-base transition duration-300 hover:bg-white hover:text-[rgba(6,25,70,1)]"
137+
>
138+
Join Us
139+
</Button>
109140

110-
<div className="mt-8 flex flex-col space-y-4 pt-6 w-full">
111-
<Button className="w-full border border-white bg-transparent text-white px-4 py-3 text-center text-base transition duration-300 hover:bg-white hover:text-[rgba(6,25,70,1)]">
112-
Join Us
113-
</Button>
114-
<Button className="w-full bg-white text-[rgba(6,25,70,1)] px-4 py-3 text-center text-base transition duration-300 hover:bg-blue-100">
115-
Contact Us
116-
</Button>
117-
</div>
141+
<Button
142+
backgroundColor="white"
143+
textColor="rgba(6,25,70,1)"
144+
className="w-full px-4 py-3 text-center text-base transition duration-300 hover:bg-blue-100"
145+
>
146+
Contact Us
147+
</Button>
118148
</div>
119-
)}
149+
</div>
120150
</header>
121151
);
122152
}

‎src/main.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { StrictMode } from "react";
22
import { createRoot } from "react-dom/client";
33
import "./index.css";
4-
import { BrowserRouter, Route, Routes } from "react-router";
4+
import { BrowserRouter, Route, Routes } from "react-router-dom";
55
import App from "./App.jsx";
66
import Test from "./components/Test.jsx";
77
import Home from "./pages/landing-page/Home.jsx";

0 commit comments

Comments
 (0)