diff --git a/src/Playground.jsx b/src/Playground.jsx index 047e749..a751dc6 100644 --- a/src/Playground.jsx +++ b/src/Playground.jsx @@ -1,7 +1,13 @@ +import Navbar from "./components/playground/Navbar.jsx"; import { Outlet } from "react-router"; const Playground = () => { - return ; + return ( + <> + + + + ); }; export default Playground; diff --git a/src/components/playground/AboutSection.jsx b/src/components/playground/AboutSection.jsx new file mode 100644 index 0000000..61042b3 --- /dev/null +++ b/src/components/playground/AboutSection.jsx @@ -0,0 +1,43 @@ +import Button from "../shared/Button"; +import { siteConfig } from "../../config/navbarHero"; + +export default function AboutSection() { + return ( +
+
+
+ ASME NIT Rourkela team members +
+ +
+

+ {siteConfig.about.title} +

+ +

+ {siteConfig.about.description} +

+ +
+ +
+
+
+
+ ); +} diff --git a/src/components/playground/HeroSection.jsx b/src/components/playground/HeroSection.jsx new file mode 100644 index 0000000..c7c8f12 --- /dev/null +++ b/src/components/playground/HeroSection.jsx @@ -0,0 +1,82 @@ +import Button from "../shared/Button"; +import { siteConfig } from "../../config/navbarHero"; + +export default function HeroSection() { + return ( +
+
+
+

+ {siteConfig.hero.title} +

+ +

+ {siteConfig.hero.subtitle} +

+ +

+ {siteConfig.hero.description} +

+ +
+ + +
+
+ +
+ ASME NIT Rourkela team members + + Background figure 1 + + Background figure 2 +
+
+
+ ); +} diff --git a/src/components/playground/MissionCard.jsx b/src/components/playground/MissionCard.jsx new file mode 100644 index 0000000..ab06803 --- /dev/null +++ b/src/components/playground/MissionCard.jsx @@ -0,0 +1,19 @@ +export default function MissionCard({ title, description }) { + return ( +
+

+ {title}{" "} +

+ +

+ {description}{" "} +

+
+ ); +} diff --git a/src/components/playground/MissionSection.jsx b/src/components/playground/MissionSection.jsx new file mode 100644 index 0000000..32bc46e --- /dev/null +++ b/src/components/playground/MissionSection.jsx @@ -0,0 +1,14 @@ +import MissionCard from "./MissionCard"; +import { siteConfig } from "../../config/navbarHero"; + +export default function MissionSection() { + return ( +
+
+ {siteConfig.missions.map(({ title, description }, index) => ( + + ))} +
+
+ ); +} diff --git a/src/components/playground/Navbar.jsx b/src/components/playground/Navbar.jsx new file mode 100644 index 0000000..5a5b43e --- /dev/null +++ b/src/components/playground/Navbar.jsx @@ -0,0 +1,122 @@ +import { siteConfig } from "../../config/navbarHero"; +import Button from "../shared/Button"; +import { useState } from "react"; + +export default function Navbar() { + const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + + return ( +
+
+
+ Logo +
+ + + +
+ + +
+ + +
+ + {mobileMenuOpen && ( +
+ + + + +
+ + +
+
+ )} +
+ ); +} diff --git a/src/components/shared/Button.jsx b/src/components/shared/Button.jsx index 3b39c3a..5babe2e 100644 --- a/src/components/shared/Button.jsx +++ b/src/components/shared/Button.jsx @@ -1,9 +1,33 @@ -const Button = ({ children }) => { +export default function Button({ + backgroundColor, + textColor, + children, + style = {}, + ...props +}) { + if (!backgroundColor || !textColor) { + console.warn( + "Button component requires both backgroundColor and textColor props", + ); + } + return ( -
+
+ ); -}; - -export default Button; +} diff --git a/src/config/navbarHero.js b/src/config/navbarHero.js new file mode 100644 index 0000000..f2bed4c --- /dev/null +++ b/src/config/navbarHero.js @@ -0,0 +1,54 @@ +export const siteConfig = { + navigation: { + logo: "https://res.cloudinary.com/dwjcki9ey/image/upload/v1752133616/Group2_e25wne.png", + links: [ + { name: "About us", href: "/about" }, + { name: "Team", href: "/team" }, + { name: "Events", href: "/events" }, + { name: "Achievements", href: "/achievements" }, + { name: "Gallery", href: "/gallery" }, + ], + }, + + hero: { + title: "We are", + subtitle: "ASME NIT ROURKELA", + description: + "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.", + primaryButton: "Join Us", + secondaryLink: "Learn More", + image: + "https://res.cloudinary.com/dwjcki9ey/image/upload/v1752132771/image_1_w5ijjl.png", + image1: + "https://res.cloudinary.com/dwjcki9ey/image/upload/v1752159681/Ellipse_1_sxc0u7.png", + image2: + "https://res.cloudinary.com/dwjcki9ey/image/upload/v1752159690/Ellipse_2_sixvi7.png", + }, + + about: { + title: "Who are we? And About Us Preview", + description: + "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.", + button: "Learn More", + image: + "https://res.cloudinary.com/dwjcki9ey/image/upload/v1752132823/image_lxdaqf.png", + }, + + missions: [ + { + title: "Our Mission", + description: + "To advance mechanical engineering knowledge and skills through innovation and practical application.", + }, + { + title: "Our Mission", + description: + "To advance mechanical engineering knowledge and skills through innovation and practical application.", + }, + { + title: "Our Mission", + description: + "To advance mechanical engineering knowledge and skills through innovation and practical application.", + }, + ], +}; diff --git a/src/pages/playground/landing-page/Home.jsx b/src/pages/playground/landing-page/Home.jsx index 60f93a9..36ff75d 100644 --- a/src/pages/playground/landing-page/Home.jsx +++ b/src/pages/playground/landing-page/Home.jsx @@ -1,10 +1,16 @@ -import Button from "../../../components/shared/Button"; +import React from "react"; +import HeroSection from "../../../components/playground/HeroSection"; +import AboutSection from "../../../components/playground/AboutSection"; +import MissionSection from "../../../components/playground/MissionSection"; const Home = () => { return ( -
- Welcome to the Playground! - +
+
+ + + +
); };