From 4112a37e1f2bb6d2dfd31d50fbc96c26a6c46d7b Mon Sep 17 00:00:00 2001
From: mshalom27 <menshalom07@gmail.com>
Date: Fri, 11 Jul 2025 14:57:41 +0400
Subject: [PATCH 1/2] feat : herosec and navbar

---
 src/App.jsx                                  |   5 +-
 src/Playground.jsx                           |   8 +-
 src/components/playground/AboutSection.jsx   |  43 ++++++++
 src/components/playground/HeroSection.jsx    |  82 +++++++++++++++
 src/components/playground/MissionCard.jsx    |  19 ++++
 src/components/playground/MissionSection.jsx |  14 +++
 src/components/playground/Navbar.jsx         | 100 +++++++++++++++++++
 src/components/shared/Button.jsx             |  36 +++++--
 src/config/navbarHero.js                     |  54 ++++++++++
 src/pages/playground/landing-page/Home.jsx   |  16 ++-
 10 files changed, 363 insertions(+), 14 deletions(-)
 create mode 100644 src/components/playground/AboutSection.jsx
 create mode 100644 src/components/playground/HeroSection.jsx
 create mode 100644 src/components/playground/MissionCard.jsx
 create mode 100644 src/components/playground/MissionSection.jsx
 create mode 100644 src/components/playground/Navbar.jsx
 create mode 100644 src/config/navbarHero.js

diff --git a/src/App.jsx b/src/App.jsx
index 6a5570f..c96cdbf 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,9 @@
-import Button from "./components/shared/Button";
+import Playground from "./playground";
 
 function App() {
   return (
     <div className="text-white bg-black text-7xl flex flex-col gap-4 items-center justify-center h-screen">
-      ASME Website
-      <Button>Click Me!</Button>
+      <Playground />
     </div>
   );
 }
diff --git a/src/Playground.jsx b/src/Playground.jsx
index 047e749..d9b964f 100644
--- a/src/Playground.jsx
+++ b/src/Playground.jsx
@@ -1,7 +1,13 @@
+import Home from "./pages/playground/landing-page/Home.jsx";
 import { Outlet } from "react-router";
 
 const Playground = () => {
-  return <Outlet />;
+  return (
+    <>
+      <Home />
+      <Outlet />
+    </>
+  );
 };
 
 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 (
+    <section className="bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
+      <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">
+        <div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0">
+          <img
+            src={siteConfig.about.image}
+            alt="ASME NIT Rourkela team members"
+            className="rounded-md shadow-lg object-cover w-full h-auto"
+          />
+        </div>
+
+        <div className="w-full  text-center md:text-left space-y-4 max-w-[700px]">
+          <h1
+            className="text-3xl sm:text-4xl md:text-[47px] lg:text-[56px] font-bold uppercase text-black leading-[120%]"
+            style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
+          >
+            {siteConfig.about.title}
+          </h1>
+
+          <p
+            className="text-base sm:text-lg text-[rgba(106,106,106,1)] leading-[150%] mt-4 max-w-2xl mx-auto md:mx-0"
+            style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
+          >
+            {siteConfig.about.description}
+          </p>
+
+          <div className="flex flex-col sm:flex-row sm:justify-center md:justify-start items-center mt-6 gap-4">
+            <Button
+              className="bg-white text-blue-600 px-10 shadow-lg py-2 rounded-md border border-black hover:bg-blue-100"
+              style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
+            >
+              {siteConfig.about.button}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/playground/HeroSection.jsx b/src/components/playground/HeroSection.jsx
new file mode 100644
index 0000000..fcac80b
--- /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 (
+    <section className="bg-white min-h-[400px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
+      <div className="max-w-[1600px] mx-auto flex flex-col md:flex-row items-center md:items-start justify-center md:justify-between">
+        <div className="w-full max-w-[700px] px-2 md:px-0 space-y-4 text-center md:text-left">
+          <p
+            className="text-xl sm:text-2xl md:text-3xl font-normal text-black leading-[120%]"
+            style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
+          >
+            {siteConfig.hero.title}
+          </p>
+
+          <h1
+            className="text-3xl sm:text-4xl md:text-[47px] lg:text-[56px] xl:text-[64px] font-bold uppercase text-black leading-[120%]"
+            style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
+          >
+            {siteConfig.hero.subtitle}
+          </h1>
+
+          <p
+            className="text-base sm:text-lg text-[rgba(106,106,106,1)] leading-[150%] mt-4 max-w-2xl mx-auto md:mx-0"
+            style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
+          >
+            {siteConfig.hero.description}
+          </p>
+
+          <div className="flex flex-col sm:flex-row sm:justify-center md:justify-start items-center mt-6 gap-4">
+            <Button
+              className="bg-[rgba(6,25,70,1)] text-white px-14 py-2 rounded-md hover:bg-[rgba(6,25,70,0.9)]"
+              style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
+            >
+              {siteConfig.hero.primaryButton}
+            </Button>
+            <Button
+              className="bg-transparent text-[rgba(55,115,236,1)] underline-offset-4 hover:underline"
+              style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
+            >
+              {siteConfig.hero.secondaryLink}
+            </Button>
+          </div>
+        </div>
+
+        <div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0">
+          <img
+            src={siteConfig.hero.image}
+            alt="ASME NIT Rourkela team members"
+            className="rounded-md shadow-lg object-cover w-full h-auto"
+          />
+
+          <img
+            src={siteConfig.hero.image1}
+            alt="Background figure 1"
+            className="absolute"
+            style={{
+              width: "705px",
+              height: "705px",
+              top: "-234px",
+              left: "-151px",
+              opacity: 0.36,
+            }}
+          />
+
+          <img
+            src={siteConfig.hero.image2}
+            alt="Background figure 2"
+            className="absolute hidden min-[980px]:block"
+            style={{
+              width: "478px",
+              height: "478px",
+              top: "189px",
+              left: "481px",
+              opacity: 0.36,
+            }}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
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 (
+    <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">
+      <h4
+        className="font-bold text-[32px] leading-[150%] mb-6"
+        style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
+      >
+        {title}{" "}
+      </h4>
+
+      <p
+        className="text-[20px] leading-[150%] mb-4"
+        style={{ fontFamily: "Helvetica, Arial, sans-serif", fontWeight: 400 }}
+      >
+        {description}{" "}
+      </p>
+    </div>
+  );
+}
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 (
+    <section className="w-full bg-white py-20 flex justify-center">
+      <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">
+        {siteConfig.missions.map(({ title, description }, index) => (
+          <MissionCard key={index} title={title} description={description} />
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/playground/Navbar.jsx b/src/components/playground/Navbar.jsx
new file mode 100644
index 0000000..6cba504
--- /dev/null
+++ b/src/components/playground/Navbar.jsx
@@ -0,0 +1,100 @@
+import { siteConfig } from "../../config/navbarHero";
+import Button from "../shared/Button";
+import { useState } from "react";
+
+export default function Navbar() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <header className="bg-white w-full px-0">
+      <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]">
+        <div className="flex items-center space-x-3 min-[900px]:space-x-6 flex-shrink-0">
+          <img
+            src={siteConfig.navigation.logo}
+            alt="Logo"
+            className="h-10 w-auto"
+          />
+        </div>
+
+        <nav
+          className="hidden min-[900px]:flex flex-grow justify-center space-x-6"
+          style={{ letterSpacing: "-1.5%" }}
+        >
+          {siteConfig.navigation.links.map((item) => (
+            <a
+              key={item.name}
+              href={item.href}
+              className="transition-colors hover:text-[rgba(55,115,236,1)]"
+            >
+              {item.name}
+            </a>
+          ))}
+        </nav>
+
+        <div className="hidden min-[900px]:flex items-center space-x-4 text-sm flex-shrink-0">
+          <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">
+            Join Us
+          </Button>
+          <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)]">
+            Contact Us
+          </Button>
+        </div>
+
+        <button
+          className="min-[900px]:hidden ml-auto flex items-center"
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          aria-label="Toggle menu"
+        >
+          <svg
+            className="w-8 h-8 text-black"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            {mobileMenuOpen ? (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            ) : (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            )}
+          </svg>
+        </button>
+      </div>
+
+      {mobileMenuOpen && (
+        <div className="min-[900px]:hidden bg-white border-t border-border px-4 py-4 space-y-4">
+          <nav className="flex flex-col space-y-3">
+            {siteConfig.navigation.links.map((item) => (
+              <a
+                key={item.name}
+                href={item.href}
+                className="text-black text-lg font-semibold hover:text-[rgba(55,115,236,1)]"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                {item.name}
+              </a>
+            ))}
+          </nav>
+          <div className="flex space-x-4 pt-4 border-t border-border">
+            <Button className="flex-grow border border-black bg-white text-black px-3 py-2">
+              Join Us
+            </Button>
+            <Button className="flex-grow bg-[rgba(6,25,70,1)] text-white px-3 py-2">
+              Contact Us
+            </Button>
+          </div>
+        </div>
+      )}
+    </header>
+  );
+}
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 (
-    <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">
+    <button
+      style={{
+        backgroundColor,
+        color: textColor,
+        borderRadius: "0.375rem",
+        padding: "0.5rem 1rem",
+        fontFamily: "Helvetica, sans-serif",
+        fontWeight: 400,
+        fontSize: "20px",
+        lineHeight: "30px",
+        letterSpacing: "normal",
+        ...style,
+      }}
+      {...props}
+    >
       {children}
-    </div>
+    </button>
   );
-};
-
-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..dc29b13 100644
--- a/src/pages/playground/landing-page/Home.jsx
+++ b/src/pages/playground/landing-page/Home.jsx
@@ -1,10 +1,18 @@
-import Button from "../../../components/shared/Button";
+import React from "react";
+import Navbar from "../../../components/playground/Navbar";
+import HeroSection from "../../../components/playground/HeroSection";
+import AboutSection from "../../../components/playground/AboutSection";
+import MissionSection from "../../../components/playground/MissionSection";
 
 const Home = () => {
   return (
-    <div className="text-white bg-black text-7xl flex flex-col gap-4 items-center justify-center h-screen">
-      Welcome to the Playground!
-      <Button>Click Me!</Button>
+    <div className="min-h-screen bg-background">
+      <Navbar />
+      <main>
+        <HeroSection />
+        <AboutSection />
+        <MissionSection />
+      </main>
     </div>
   );
 };

From c8746e4cc08e6bc1191acc5bb3cd781c391214be Mon Sep 17 00:00:00 2001
From: mshalom27 <menshalom07@gmail.com>
Date: Sun, 13 Jul 2025 17:53:48 +0400
Subject: [PATCH 2/2] fix: navbar sticky, overlay, fixed

---
 src/components/playground/HeroSection.jsx |  2 +-
 src/components/playground/Navbar.jsx      | 30 ++++++++++++++++++++---
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/playground/HeroSection.jsx b/src/components/playground/HeroSection.jsx
index fcac80b..c7c8f12 100644
--- a/src/components/playground/HeroSection.jsx
+++ b/src/components/playground/HeroSection.jsx
@@ -3,7 +3,7 @@ import { siteConfig } from "../../config/navbarHero";
 
 export default function HeroSection() {
   return (
-    <section className="bg-white min-h-[400px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
+    <section className="bg-white min-h-[400px]  pt-[80px] sm:pt-[100px] md:pt-[120px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
       <div className="max-w-[1600px] mx-auto flex flex-col md:flex-row items-center md:items-start justify-center md:justify-between">
         <div className="w-full max-w-[700px] px-2 md:px-0 space-y-4 text-center md:text-left">
           <p
diff --git a/src/components/playground/Navbar.jsx b/src/components/playground/Navbar.jsx
index 6cba504..5a5b43e 100644
--- a/src/components/playground/Navbar.jsx
+++ b/src/components/playground/Navbar.jsx
@@ -6,7 +6,7 @@ export default function Navbar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
-    <header className="bg-white w-full px-0">
+    <header className="bg-white w-full px-0 min-[900px]:sticky fixed top-0 left-0 z-50 ">
       <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]">
         <div className="flex items-center space-x-3 min-[900px]:space-x-6 flex-shrink-0">
           <img
@@ -72,8 +72,29 @@ export default function Navbar() {
       </div>
 
       {mobileMenuOpen && (
-        <div className="min-[900px]:hidden bg-white border-t border-border px-4 py-4 space-y-4">
-          <nav className="flex flex-col space-y-3">
+        <div className="min-[900px]:hidden fixed inset-0 bg-white px-6 py-6 z-40 overflow-auto">
+          <button
+            className="absolute top-6 right-6 text-black"
+            onClick={() => setMobileMenuOpen(false)}
+            aria-label="Close menu"
+          >
+            <svg
+              className="w-8 h-8"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+
+          <nav className="mt-14 flex flex-col space-y-4">
             {siteConfig.navigation.links.map((item) => (
               <a
                 key={item.name}
@@ -85,7 +106,8 @@ export default function Navbar() {
               </a>
             ))}
           </nav>
-          <div className="flex space-x-4 pt-4 border-t border-border">
+
+          <div className="mt-6 flex space-x-4 border-t border-border pt-4">
             <Button className="flex-grow border border-black bg-white text-black px-3 py-2">
               Join Us
             </Button>