Skip to content

Commit bcc20bc

Browse files
devsdenepaldevsdenepal
authored
Merge pull request #11 from NepTechTribe:dev-2
Solve (Inactive Link Navigation #6)
2 parents 047e597 + 015126f commit bcc20bc

File tree

14 files changed

+127
-51
lines changed

14 files changed

+127
-51
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
"dependencies": {
1313
"react": "^18.3.1",
1414
"react-dom": "^18.3.1",
15-
"react-helmet-async": "^2.0.5"
15+
"react-helmet-async": "^2.0.5",
16+
"react-router-dom": "^6.26.1",
17+
"react-scroll": "^1.9.0"
1618
},
1719
"devDependencies": {
1820
"@eslint/js": "^9.9.0",
@@ -25,6 +27,5 @@
2527
"eslint-plugin-react-refresh": "^0.4.9",
2628
"globals": "^15.9.0",
2729
"vite": "^5.4.1"
28-
2930
}
3031
}

‎src/App.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React from 'react'
2+
import ReactDOM from 'react-dom';
3+
import { BrowserRouter } from 'react-router-dom';
24
import Navbar from './assets/Components/Navbar/Navbar'
35
import Hero from './assets/Components/Hero/Hero'
46
import Programs from './assets/Components/Programs/Programs'
@@ -11,6 +13,7 @@ import Testimonials_2 from './assets/Components/Testimonials/Testimonials_2'
1113
import Contact from './assets/Components/Contact/Contact'
1214
const App = () => {
1315
return (
16+
<BrowserRouter>
1417
<div>
1518
<Navbar></Navbar>
1619
<Hero></Hero>
@@ -33,6 +36,7 @@ const App = () => {
3336
<Contact></Contact>
3437
</div>
3538
</div>
39+
</BrowserRouter>
3640
)
3741
}
3842

‎src/assets/Components/About/About.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import './About.css'
33
import Aboutimg from '../about.jpg'
44
const About = () => {
55
return (
6-
<div class="about">
7-
<div class="about-left">
8-
<img src={Aboutimg} alt="" class="about-img" />
9-
<img src="/assets/play-icon-DiRyRcRm.png" alt="" class="play-icon" />
6+
<div className="about">
7+
<div className="about-left">
8+
<img src={Aboutimg} alt="" className="about-img" />
9+
<img src="/assets/play-icon-DiRyRcRm.png" alt="" className="play-icon" />
1010
</div>
11-
<div class="about-right">
11+
<div className="about-right">
1212
<h2>Fostering Collaborative & Positive Environment</h2>
1313
<br/>
1414
<p>Neptech Tribe is a dynamic non-specialist organization established by a group of practical, knowledgeable and visionary young professionals with an interest in practice and education. The primary goal is to provide comprehensive digital electronics programs to organizations that include operators and equipment from a variety of backgrounds requiring irrigation equipment. Yaso gerer, neptech trib le neid seip bheka personalharolai drut rupa vikas va digital worlda garn r successful hun able banaunch.

‎src/assets/Components/Collabs/Collabs.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,22 @@ import React from 'react'
22
import "../Glimpses/Glimpses.css"
33
const Collabs = () => {
44
return (
5-
<div class="album">
6-
<div class="gallery">
5+
<div className="album">
6+
<div className="gallery">
77
<img src={poster} alt="" />
88
<img src={poster} alt="" />
99
<img src={poster} alt="" />
1010
<img src={poster} alt="" />
1111

1212
</div>
13-
<div class="gallery">
13+
<div className="gallery">
1414
<img src={poster} alt="" />
1515
<img src={poster} alt="" />
1616
<img src={poster} alt="" />
1717
<img src={poster} alt="" />
1818

1919
</div>
20-
<button class="btn dark-btn">See more here &nbsp;<i class="fa-solid fa-arrow-right"></i> </button>
20+
<button className="btn dark-btn">See more here &nbsp;<i className="fa-solid fa-arrow-right"></i> </button>
2121
</div>
2222
)
2323
}

‎src/assets/Components/Contact/Contact.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const Contact = () => {
3333
{/* </iframe> */}
3434
<textarea id="h-captcha-response-0sxzfpm9akol" name="h-captcha-response" style={{ display: 'none' }}></textarea>
3535
</form>
36-
<button type="submit" className="btn dark-btn submit-btn">Submit now &nbsp;<i class="fa-solid fa-arrow-right"></i></button>
36+
<button type="submit" className="btn dark-btn submit-btn">Submit now &nbsp;<i className="fa-solid fa-arrow-right"></i></button>
3737
</div>
3838
</div>
3939
);

‎src/assets/Components/Glimpses/Glimpses.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@ import './Glimpses.css'
33
import poster from "../nposter.png"
44
const Glimpses = () => {
55
return (
6-
<div class="album">
7-
<div class="gallery">
6+
<div className="album" id='album'>
7+
<div className="gallery" id='gallery'>
88
<img src={poster} alt="" />
99
<img src={poster} alt="" />
1010
<img src={poster} alt="" />
1111
<img src={poster} alt="" />
1212

1313
</div>
14-
<div class="gallery">
14+
<div className="gallery">
1515
<img src={poster} alt="" />
1616
<img src={poster} alt="" />
1717
<img src={poster} alt="" />
1818
<img src={poster} alt="" />
1919

2020
</div>
21-
<button class="btn dark-btn">See more here &nbsp;<i class="fa-solid fa-arrow-right"></i> </button>
21+
<button className="btn dark-btn">See more here &nbsp;<i className="fa-solid fa-arrow-right"></i> </button>
2222
</div>
2323
)
2424
}

‎src/assets/Components/Hero/Hero.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ import './Hero.css'
33
const Hero = () => {
44
return (
55

6-
<div className="hero container">
6+
<div className="hero" id='hero'>
7+
<div className='container'>
78
<div className="hero-text">
89
<h1>Leaders are those who empower others.</h1>
910
<p>A non-profit organization founded by group of tech-obsessed youngsters, concentrating on offering digital literacy programs and instructional tools to students.
1011
</p>
11-
<button className="btn">Explore more&nbsp;<i class="fa-solid fa-arrow-right"></i>
12+
<button className="btn">Explore more&nbsp;<i className="fa-solid fa-arrow-right"></i>
1213
</button>
13-
</div>
14+
</div></div>
1415
</div>
1516
)
1617
}

‎src/assets/Components/Navbar/Navbar.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,13 @@ nav ul li {
2525
}
2626

2727
.dark-nav {
28-
/* background: #212ea0; */
29-
transition: .5s
28+
background: #212ea0;
29+
transition: .5s;
30+
color: #fff;
3031
}
3132

3233
.menu-icon {
33-
display: none
34+
display: none;
3435
}
3536

3637
@media (max-width: 1000px) {

‎src/assets/Components/Navbar/Navbar.jsx‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,36 @@
11
import React, { useState, useEffect } from 'react';
2-
import './Navbar.css'
3-
import fullogo from '../full-logo.png'
2+
import './Navbar.css';
3+
import fullogo from '../full-logo.png';
4+
import { Link } from 'react-scroll';
45
const Navbar = () => {
56
const [sticky, setSticky] = useState(false);
7+
68
useEffect(() => {
7-
window.addEventListener('scroll', () => {
9+
const handleScroll = () => {
810
window.scrollY > 50 ? setSticky(true) : setSticky(false);
9-
})
11+
};
12+
13+
window.addEventListener('scroll', handleScroll);
14+
15+
// Cleanup the event listener on component unmount
16+
return () => {
17+
window.removeEventListener('scroll', handleScroll);
18+
};
1019
}, []);
20+
1121
return (
12-
<nav className={`container ${sticky? 'dark-nav': ''}`}>
13-
<img src={fullogo} alt="" className="logo" />
22+
<nav className={`container ${sticky ? 'dark-nav' : ''}`}>
23+
<img src={fullogo} alt="NepTech Tribe Logo" className="logo" />
1424
{/* <h1 className='logo'>NepTech Tribe</h1> */}
1525
<ul className="hide-mobile-menu">
16-
<li><a>Home</a></li>
17-
<li><a>Gallery</a></li>
18-
<li><a>About us</a></li>
19-
<li><a>Upcoming Events</a></li>
20-
21-
<li><a className="btn">Contact us</a></li>
26+
<li><Link to="hero" smooth="true" offset={0} duration={500}>Home</Link></li>
27+
<li><Link to="album" smooth="true" offset={0} duration={500}>Gallery</Link></li>
28+
<li><Link to="about" smooth="true" offset={0} duration={500}>About us</Link></li>
29+
<li><Link to="events" smooth="true" offset={0} duration={500}>Upcoming Events</Link></li>
30+
<li><Link to="contact" className="btn" smooth="true" offset={0} duration={500}>Contact us</Link></li>
2231
</ul>
2332
</nav>
24-
)
25-
}
33+
);
34+
};
2635

27-
export default Navbar
36+
export default Navbar;

0 commit comments

Comments
 (0)