added footer hero navbar

package.json

@@ -21,6 +21,7 @@
     "@babel/core": "^7.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "lucide-react": "^0.468.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.0.2",

src/components/footer.jsx

@@ -0,0 +1,77 @@
+import { Instagram, Linkedin, Github, Twitter } from 'lucide-react';
+
+export default function Footer() {
+  return (
+    <footer className="bg-[#070614] text-white py-12 px-6">
+      <div className="container mx-auto max-w-7xl">
+        <div className="flex flex-col items-center mb-28">
+          <div className="text-center relative">
+            <h2 className="text-3xl font-montserrat font-medium text-[#A546FF]  inline-block">
+              Let&apos;s discuss and make something
+              <span className="text-[#A546FF] "> cool </span>
+              together
+            </h2>
+            <div className="absolute -bottom-8 right-0">
+              <a
+                href="#"
+                className="inline-flex font-robotoMono text-[#989898] items-center text-lg hover:text-[#bfbfbf] transition-colors relative group"
+              >
+                Join us ↗
+                <span className="absolute left-1/2 bottom-0 w-0 h-0.5 bg-[#A546FF] group-hover:w-full group-hover:left-0 transition-all ease-in  duration-300 delay-100"></span>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col space-y-1">
+          <div className="flex flex-col md:flex-row justify-between items-start font-montserrat md:items-center mb-5">
+            <a href="/" className="text-5xl font-bold text-shaaa mb-6 md:mb-0">
+              OPENCODE
+            </a>
+            <nav className="flex flex-wrap gap-4 font-robotoMono text-[#989898] md:gap-8 mb-0">
+              <a href="#" className="hover:text-[#A546FF] transition-colors">
+                About
+              </a>
+              <a href="#" className="hover:text-[#A546FF] transition-colors">
+                Events
+              </a>
+              <a href="#" className="hover:text-[#A546FF] transition-colors">
+                Projects
+              </a>
+              <a href="#" className="hover:text-[#A546FF] transition-colors">
+                Team
+              </a>
+            </nav>
+          </div>
+          <p className="text-sm font-robotoMono text-[#989898] max-w-2xl mb-10 pb-5">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+            accusantium doloremquez laudantium, totam rem aperiam, eaque ipsa
+            quae andSed ut perspiciatis unde omnis iste natus error sit
+            voluptatem accusantium doloremque laudantium, totam rem aperiam,
+            eaque ipsa quae and
+          </p>
+        </div>
+        <div className="border-t border-white/20 pt-8 ">
+          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+            <p className="text-sm text-[#989898]">
+              Architected with ❤️ by OpenCode Team
+            </p>
+            <div className="flex gap-4">
+              <a href="#" className="text-[#A546FF] hover:text-[#B388FF]">
+                <Instagram className="h-5 w-5" />
+              </a>
+              <a href="#" className="text-[#A546FF] hover:text-[#B388FF]">
+                <Linkedin className="h-5 w-5" />
+              </a>
+              <a href="#" className="text-[#A546FF] hover:text-[#B388FF]">
+                <Github className="h-5 w-5" />
+              </a>
+              <a href="#" className="text-[#A546FF] hover:text-[#B388FF]">
+                <Twitter className="h-5 w-5" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/hero.jsx

@@ -0,0 +1,43 @@
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-[url('/src/assets/hero.png')] bg-cover bg-center flex items-center justify-center px-4 sm:px-6 md:px-8">
+      <div className="absolute inset-0 bg-[#070614] bg-opacity-10"></div>
+      <div className="relative z-10 text-center max-w-4xl mt-20 mx-auto">
+        <div className="inline-block shadow-inner-white font-robotoMono tracking-wide px-3 sm:px-4 py-1 sm:py-1.5 rounded-full border border-[#3A0070] bg-gradient-to-b from-[#DADADA] to-[#744E99] bg-clip-text text-transparent text-xs sm:text-sm mb-2 sm:mb-4">
+          Opensource your imagination
+        </div>
+        <h1 className="text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-montserrat font-bold bg-gradient-to-b from-white to-[#222121] bg-clip-text text-transparent mb-6 sm:mb-8">
+          OPENCODE
+        </h1>
+        <p className="text-white/60 font-robotoMono text-sm sm:text-base md:text-lg max-w-2xl mx-auto mb-8 sm:mb-10">
+          The{' '}
+          <span className="bg-gradient-to-b from-[#DADADA] to-[#744E99] bg-clip-text text-transparent">
+            Opensource
+          </span>{' '}
+          and{' '}
+          <span className="bg-gradient-to-b from-[#DADADA] to-[#744E99] bg-clip-text text-transparent">
+            Cybersecurity
+          </span>{' '}
+          community of NIT Rourkela
+        </p>
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6">
+          <button className="px-4 py-2 shadow-inner-white rounded-[10px] font-medium duration-200 w-[200px] sm:w-auto bg-transparent border border-purple-500/30 text-[#A546FF] hover:bg-[rgb(165,70,255)] hover:text-[#070614] hover:border-[#C3C3C3] transition-colors backdrop-blur-sm text-sm sm:text-base">
+            <div className="flex flex-row items-center justify-center space-x-2 sm:space-x-3">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                className="w-4 h-4 sm:w-5 sm:h-5 fill-current"
+              >
+                <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6c0-0.4,0-0.9,0.2-1.3 C7.2,6.1,7.4,6,7.5,6c0,0,0.1,0,0.1,0C8.1,6.1,9.1,6.4,10,7.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3c0.9-0.9,2-1.2,2.5-1.3 c0,0,0.1,0,0.1,0c0.2,0,0.3,0.1,0.4,0.3C17,6.7,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4 c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3C22,6.1,16.9,1.4,10.9,2.1z" />
+              </svg>
+              <span>GitHub</span>
+            </div>
+          </button>
+          <button className="px-4 py-2 shadow-inner-white rounded-[10px] font-medium duration-200 w-[200px] sm:w-auto bg-[rgb(165,70,255)] border border-[#C3C3C3] hover:bg-transparent hover:text-[#A546FF] hover:shadow-inner-white text-sm sm:text-base hover:border-purple-500/30 transition-colors">
+            Resources
+          </button>
+        </div>
+      </div>
+    </main>
+  );
+}

src/components/navbar.jsx

@@ -0,0 +1,97 @@
+'use client';
+import React from 'react';
+
+export default function Navbar() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const navigationItems = [
+    { href: '/about', label: 'About' },
+    { href: '/events', label: 'Events' },
+    { href: '/projects', label: 'Projects' },
+    { href: '/team', label: 'Team' },
+  ];
+
+  return (
+    <>
+      <div
+        className={`fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 z-40 ${
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={() => setIsOpen(false)}
+      />
+
+      <header className="fixed top-0 w-full flex justify-center p-4 sm:p-6 md:p-8 z-50 ">
+        <nav className="relative w-full lg:w-6/12 md:w-full sm:w-full max-w-7xl flex items-center justify-between px-4 sm:px-6 md:px-8 py-2 sm:py-3 md:py-4 rounded-full bg-black/30 backdrop-blur-md transition-all duration-300">
+          <div className="absolute -inset-[3px] rounded-full border-2 border-[#221F49] shadow-[0_0_15px_rgba(139,92,246,0.1)]" />
+          <div className="absolute inset-[1px] sm:inset-[2px] md:inset-[3px] rounded-full border-2 border-[#3A0070] shadow-inner-white" />
+
+          <div className="absolute inset-0 rounded-full shadow-[0_0_15px_rgba(139,92,246,0.1)] pointer-events-none" />
+
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="lg:hidden relative w-8 h-8 flex flex-col items-center justify-center gap-1.5 z-10"
+            aria-label="Toggle menu"
+          >
+            <span
+              className={`w-6 h-0.5 bg-white transition-all duration-300 ${
+                isOpen ? 'absolute rotate-45' : ''
+              }`}
+            />
+            <span
+              className={`w-6 h-0.5 bg-white transition-all duration-300 ${
+                isOpen ? 'opacity-0' : ''
+              }`}
+            />
+            <span
+              className={`w-6 h-0.5 bg-white transition-all duration-300 ${
+                isOpen ? 'absolute -rotate-45' : ''
+              }`}
+            />
+          </button>
+
+          <div className="text-[#989898] text-xl sm:text-2xl font-mono z-10">
+            {'{'}={'}'}
+          </div>
+          <div className="hidden lg:flex font-robotoMono text-[#989898] items-center gap-6 xl:gap-8 absolute left-1/2 -translate-x-1/2">
+            {navigationItems.map((item) => (
+              <a
+                key={item.href}
+                href={item.href}
+                className="text-[#989898] hover:text-[rgb(165,70,255)] transition-colors duration-200 text-sm tracking-wide"
+              >
+                {item.label}
+              </a>
+            ))}
+          </div>
+
+          <button className="hidden sm:block bg-transparent border border-purple-500/30 text-purple-400 hover:bg-purple-500/10 transition-colors shadow-inner-white backdrop-blur-sm text-xs sm:text-sm z-10 px-4 py-2 rounded-[10px]">
+            Join us
+          </button>
+
+          <div
+            className={`absolute top-full left-0 w-full lg:hidden mt-2 sm:mt-4 py-4 sm:py-6 px-4 rounded-2xl bg-black/40 backdrop-blur-md border border-white/5 transition-all duration-300 ease-in-out ${
+              isOpen
+                ? 'opacity-100 translate-y-0 visible'
+                : 'opacity-0 -translate-y-4 invisible'
+            }`}
+          >
+            <div className="flex flex-col gap-3">
+              {navigationItems.map((item) => (
+                <a
+                  key={item.href}
+                  href={item.href}
+                  className="block w-full px-4 py-2 text-[#989898] hover:text-[rgb(165,70,255)] hover:bg-white/5 rounded-lg transition-colors duration-200 text-sm sm:text-base"
+                >
+                  {item.label}
+                </a>
+              ))}
+              <button className="mt-4 w-full bg-transparent border shadow-inner-white border-purple-500/30 text-purple-400 hover:bg-purple-500/10 transition-colors backdrop-blur-sm text-sm px-4 py-2 rounded-[10px]">
+                Join us
+              </button>
+            </div>
+          </div>
+        </nav>
+      </header>
+    </>
+  );
+}

src/main.jsx

@@ -1,17 +1,23 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App.jsx';
 import { BrowserRouter, Route, Routes } from 'react-router';
 import Playground from './Playground.jsx';
+import Hero from './components/hero.jsx';
+import Navbar from './components/navbar.jsx';
+import Footer from './components/footer.jsx';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<App />} />
+        <Route path="/navbar" element={<Navbar />} />
+        <Route path="/hero" element={<Hero />} />
+        <Route path="/footer" element={<Footer />} />
         <Route path="/playground" element={<Playground />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>
-);
+);