OpencodeNIT-R · sidd233 · Jul 16, 2025 · Jul 11, 2025 · Jul 13, 2025 · Jul 13, 2025
diff --git 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 <Outlet />;
+  return (
+    <>
+      <Navbar />
+      <Outlet />
+    </>
+  );
 };
 
 export default Playground;
diff --git a/src/components/playground/AboutSection.jsx 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
@@ -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]  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
+            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
@@ -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
@@ -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
@@ -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 (
+    <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
+            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 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}
+                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="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>
+            <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
@@ -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
@@ -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.",
+    },
+  ],
+};