Skip to content

Commit 4112a37

Browse files
mshalom27mshalom27
committed
feat : herosec and navbar
1 parent c961b42 commit 4112a37

10 files changed

Lines changed: 363 additions & 14 deletions

File tree

‎src/App.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import Button from "./components/shared/Button";
1+
import Playground from "./playground";
22

33
function App() {
44
return (
55
<div className="text-white bg-black text-7xl flex flex-col gap-4 items-center justify-center h-screen">
6-
ASME Website
7-
<Button>Click Me!</Button>
6+
<Playground />
87
</div>
98
);
109
}

‎src/Playground.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1+
import Home from "./pages/playground/landing-page/Home.jsx";
12
import { Outlet } from "react-router";
23

34
const Playground = () => {
4-
return <Outlet />;
5+
return (
6+
<>
7+
<Home />
8+
<Outlet />
9+
</>
10+
);
511
};
612

713
export default Playground;

‎src/components/playground/AboutSection.jsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import Button from "../shared/Button";
2+
import { siteConfig } from "../../config/navbarHero";
3+
4+
export default function AboutSection() {
5+
return (
6+
<section className="bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
7+
<div className="w-full max-w-[1600px] mx-auto flex flex-col md:flex-row items-center justify-between gap-y-10 gap-x-10 md:gap-x-20">
8+
<div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0">
9+
<img
10+
src={siteConfig.about.image}
11+
alt="ASME NIT Rourkela team members"
12+
className="rounded-md shadow-lg object-cover w-full h-auto"
13+
/>
14+
</div>
15+
16+
<div className="w-full text-center md:text-left space-y-4 max-w-[700px]">
17+
<h1
18+
className="text-3xl sm:text-4xl md:text-[47px] lg:text-[56px] font-bold uppercase text-black leading-[120%]"
19+
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
20+
>
21+
{siteConfig.about.title}
22+
</h1>
23+
24+
<p
25+
className="text-base sm:text-lg text-[rgba(106,106,106,1)] leading-[150%] mt-4 max-w-2xl mx-auto md:mx-0"
26+
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
27+
>
28+
{siteConfig.about.description}
29+
</p>
30+
31+
<div className="flex flex-col sm:flex-row sm:justify-center md:justify-start items-center mt-6 gap-4">
32+
<Button
33+
className="bg-white text-blue-600 px-10 shadow-lg py-2 rounded-md border border-black hover:bg-blue-100"
34+
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
35+
>
36+
{siteConfig.about.button}
37+
</Button>
38+
</div>
39+
</div>
40+
</div>
41+
</section>
42+
);
43+
}

‎src/components/playground/HeroSection.jsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import Button from "../shared/Button";
2+
import { siteConfig } from "../../config/navbarHero";
3+
4+
export default function HeroSection() {
5+
return (
6+
<section className="bg-white min-h-[400px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
7+
<div className="max-w-[1600px] mx-auto flex flex-col md:flex-row items-center md:items-start justify-center md:justify-between">
8+
<div className="w-full max-w-[700px] px-2 md:px-0 space-y-4 text-center md:text-left">
9+
<p
10+
className="text-xl sm:text-2xl md:text-3xl font-normal text-black leading-[120%]"
11+
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
12+
>
13+
{siteConfig.hero.title}
14+
</p>
15+
16+
<h1
17+
className="text-3xl sm:text-4xl md:text-[47px] lg:text-[56px] xl:text-[64px] font-bold uppercase text-black leading-[120%]"
18+
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
19+
>
20+
{siteConfig.hero.subtitle}
21+
</h1>
22+
23+
<p
24+
className="text-base sm:text-lg text-[rgba(106,106,106,1)] leading-[150%] mt-4 max-w-2xl mx-auto md:mx-0"
25+
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
26+
>
27+
{siteConfig.hero.description}
28+
</p>
29+
30+
<div className="flex flex-col sm:flex-row sm:justify-center md:justify-start items-center mt-6 gap-4">
31+
<Button
32+
className="bg-[rgba(6,25,70,1)] text-white px-14 py-2 rounded-md hover:bg-[rgba(6,25,70,0.9)]"
33+
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
34+
>
35+
{siteConfig.hero.primaryButton}
36+
</Button>
37+
<Button
38+
className="bg-transparent text-[rgba(55,115,236,1)] underline-offset-4 hover:underline"
39+
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
40+
>
41+
{siteConfig.hero.secondaryLink}
42+
</Button>
43+
</div>
44+
</div>
45+
46+
<div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0">
47+
<img
48+
src={siteConfig.hero.image}
49+
alt="ASME NIT Rourkela team members"
50+
className="rounded-md shadow-lg object-cover w-full h-auto"
51+
/>
52+
53+
<img
54+
src={siteConfig.hero.image1}
55+
alt="Background figure 1"
56+
className="absolute"
57+
style={{
58+
width: "705px",
59+
height: "705px",
60+
top: "-234px",
61+
left: "-151px",
62+
opacity: 0.36,
63+
}}
64+
/>
65+
66+
<img
67+
src={siteConfig.hero.image2}
68+
alt="Background figure 2"
69+
className="absolute hidden min-[980px]:block"
70+
style={{
71+
width: "478px",
72+
height: "478px",
73+
top: "189px",
74+
left: "481px",
75+
opacity: 0.36,
76+
}}
77+
/>
78+
</div>
79+
</div>
80+
</section>
81+
);
82+
}

‎src/components/playground/MissionCard.jsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export default function MissionCard({ title, description }) {
2+
return (
3+
<div className="bg-[#0A1440] text-white w-[260px] h-[320px] rounded-md shadow-md flex flex-col justify-center items-center text-center px-6 py-10">
4+
<h4
5+
className="font-bold text-[32px] leading-[150%] mb-6"
6+
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
7+
>
8+
{title}{" "}
9+
</h4>
10+
11+
<p
12+
className="text-[20px] leading-[150%] mb-4"
13+
style={{ fontFamily: "Helvetica, Arial, sans-serif", fontWeight: 400 }}
14+
>
15+
{description}{" "}
16+
</p>
17+
</div>
18+
);
19+
}

‎src/components/playground/MissionSection.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import MissionCard from "./MissionCard";
2+
import { siteConfig } from "../../config/navbarHero";
3+
4+
export default function MissionSection() {
5+
return (
6+
<section className="w-full bg-white py-20 flex justify-center">
7+
<div className="max-w-7xl w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 px-4 place-items-center">
8+
{siteConfig.missions.map(({ title, description }, index) => (
9+
<MissionCard key={index} title={title} description={description} />
10+
))}
11+
</div>
12+
</section>
13+
);
14+
}

‎src/components/playground/Navbar.jsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { siteConfig } from "../../config/navbarHero";
2+
import Button from "../shared/Button";
3+
import { useState } from "react";
4+
5+
export default function Navbar() {
6+
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
7+
8+
return (
9+
<header className="bg-white w-full px-0">
10+
<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]">
11+
<div className="flex items-center space-x-3 min-[900px]:space-x-6 flex-shrink-0">
12+
<img
13+
src={siteConfig.navigation.logo}
14+
alt="Logo"
15+
className="h-10 w-auto"
16+
/>
17+
</div>
18+
19+
<nav
20+
className="hidden min-[900px]:flex flex-grow justify-center space-x-6"
21+
style={{ letterSpacing: "-1.5%" }}
22+
>
23+
{siteConfig.navigation.links.map((item) => (
24+
<a
25+
key={item.name}
26+
href={item.href}
27+
className="transition-colors hover:text-[rgba(55,115,236,1)]"
28+
>
29+
{item.name}
30+
</a>
31+
))}
32+
</nav>
33+
34+
<div className="hidden min-[900px]:flex items-center space-x-4 text-sm flex-shrink-0">
35+
<Button className="border border-black bg-white text-black px-3 py-1.5 text-sm transition-colors hover:bg-blue-50 hover:border-blue-600">
36+
Join Us
37+
</Button>
38+
<Button className="bg-[rgba(6,25,70,1)] text-white px-3 py-1.5 text-sm transition-colors hover:bg-[rgba(6,25,70,0.8)]">
39+
Contact Us
40+
</Button>
41+
</div>
42+
43+
<button
44+
className="min-[900px]:hidden ml-auto flex items-center"
45+
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
46+
aria-label="Toggle menu"
47+
>
48+
<svg
49+
className="w-8 h-8 text-black"
50+
fill="none"
51+
stroke="currentColor"
52+
viewBox="0 0 24 24"
53+
xmlns="http://www.w3.org/2000/svg"
54+
>
55+
{mobileMenuOpen ? (
56+
<path
57+
strokeLinecap="round"
58+
strokeLinejoin="round"
59+
strokeWidth={2}
60+
d="M6 18L18 6M6 6l12 12"
61+
/>
62+
) : (
63+
<path
64+
strokeLinecap="round"
65+
strokeLinejoin="round"
66+
strokeWidth={2}
67+
d="M4 6h16M4 12h16M4 18h16"
68+
/>
69+
)}
70+
</svg>
71+
</button>
72+
</div>
73+
74+
{mobileMenuOpen && (
75+
<div className="min-[900px]:hidden bg-white border-t border-border px-4 py-4 space-y-4">
76+
<nav className="flex flex-col space-y-3">
77+
{siteConfig.navigation.links.map((item) => (
78+
<a
79+
key={item.name}
80+
href={item.href}
81+
className="text-black text-lg font-semibold hover:text-[rgba(55,115,236,1)]"
82+
onClick={() => setMobileMenuOpen(false)}
83+
>
84+
{item.name}
85+
</a>
86+
))}
87+
</nav>
88+
<div className="flex space-x-4 pt-4 border-t border-border">
89+
<Button className="flex-grow border border-black bg-white text-black px-3 py-2">
90+
Join Us
91+
</Button>
92+
<Button className="flex-grow bg-[rgba(6,25,70,1)] text-white px-3 py-2">
93+
Contact Us
94+
</Button>
95+
</div>
96+
</div>
97+
)}
98+
</header>
99+
);
100+
}

‎src/components/shared/Button.jsx‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,33 @@
1-
const Button = ({ children }) => {
1+
export default function Button({
2+
backgroundColor,
3+
textColor,
4+
children,
5+
style = {},
6+
...props
7+
}) {
8+
if (!backgroundColor || !textColor) {
9+
console.warn(
10+
"Button component requires both backgroundColor and textColor props",
11+
);
12+
}
13+
214
return (
3-
<div className="bg-white px-3 py-2 flex items-center justify-center bg-white text-black text-base rounded-lg cursor-pointer hover:scale-110 transition-all duration-100 ease-out delay-50">
15+
<button
16+
style={{
17+
backgroundColor,
18+
color: textColor,
19+
borderRadius: "0.375rem",
20+
padding: "0.5rem 1rem",
21+
fontFamily: "Helvetica, sans-serif",
22+
fontWeight: 400,
23+
fontSize: "20px",
24+
lineHeight: "30px",
25+
letterSpacing: "normal",
26+
...style,
27+
}}
28+
{...props}
29+
>
430
{children}
5-
</div>
31+
</button>
632
);
7-
};
8-
9-
export default Button;
33+
}

‎src/config/navbarHero.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
export const siteConfig = {
2+
navigation: {
3+
logo: "https://res.cloudinary.com/dwjcki9ey/image/upload/v1752133616/Group2_e25wne.png",
4+
links: [
5+
{ name: "About us", href: "/about" },
6+
{ name: "Team", href: "/team" },
7+
{ name: "Events", href: "/events" },
8+
{ name: "Achievements", href: "/achievements" },
9+
{ name: "Gallery", href: "/gallery" },
10+
],
11+
},
12+
13+
hero: {
14+
title: "We are",
15+
subtitle: "ASME NIT ROURKELA",
16+
description:
17+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitaeistique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
18+
primaryButton: "Join Us",
19+
secondaryLink: "Learn More",
20+
image:
21+
"https://res.cloudinary.com/dwjcki9ey/image/upload/v1752132771/image_1_w5ijjl.png",
22+
image1:
23+
"https://res.cloudinary.com/dwjcki9ey/image/upload/v1752159681/Ellipse_1_sxc0u7.png",
24+
image2:
25+
"https://res.cloudinary.com/dwjcki9ey/image/upload/v1752159690/Ellipse_2_sixvi7.png",
26+
},
27+
28+
about: {
29+
title: "Who are we? And About Us Preview",
30+
description:
31+
"ASME NIT Rourkela is dedicated to fostering engineering innovation among students. We serve as a pivotal connecting link between academia and industry, tackling technical obstacles with enthusiasm through our various initiatives and events. ASME NIT Rourkela is committed to fostering engineering innovation and practical application among students. All of us are free to make a positive impact through our various technical and non-events.",
32+
button: "Learn More",
33+
image:
34+
"https://res.cloudinary.com/dwjcki9ey/image/upload/v1752132823/image_lxdaqf.png",
35+
},
36+
37+
missions: [
38+
{
39+
title: "Our Mission",
40+
description:
41+
"To advance mechanical engineering knowledge and skills through innovation and practical application.",
42+
},
43+
{
44+
title: "Our Mission",
45+
description:
46+
"To advance mechanical engineering knowledge and skills through innovation and practical application.",
47+
},
48+
{
49+
title: "Our Mission",
50+
description:
51+
"To advance mechanical engineering knowledge and skills through innovation and practical application.",
52+
},
53+
],
54+
};

0 commit comments

Comments
 (0)