chore : ready for deployment

sidd233 · sidd233 · commit 51968d483135 · 2025-01-12T11:45:52.000+05:30
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,12 +1,28 @@
-function App() {
+import Lenis from 'lenis';
+import Gallery from './components/Gallery/Gallery';
+import MeetTheTeam from './components/MeetTheTeam/MeetTheTeam';
+import Hero from './components/Hero/hero.jsx';
+import Navbar from './components/Navbar/navbar.jsx';
+import Footer from './components/Footer/footer.jsx';
+import AboutUs from './components/AboutUs/AboutUs.jsx';
+
+// Initialize Lenis
+// eslint-disable-next-line no-unused-vars
+const lenis = new Lenis({
+  autoRaf: true,
+});
+
+const App = () => {
   return (
-    <div className="min-h-screen bg-slate-800 flex justify-center items-center text-white text-7xl flex-col gap-4">
-      OpenCode
-      <button className="bg-black rounded-lg text-2xl px-4 py-2 hover:scale-110">
-        Click me!
-      </button>
+    <div>
+      <Navbar />
+      <Hero />
+      <AboutUs />
+      <Gallery />
+      <MeetTheTeam />
+      <Footer />
     </div>
   );
-}
+};
 
 export default App;
diff --git a/src/Playground.jsx b/src/Playground.jsx
@@ -12,7 +12,7 @@ const lenis = new Lenis({
   autoRaf: true,
 });
 
-const Playground = () => {
+const App = () => {
   return (
     <div>
       <Navbar />
@@ -25,4 +25,4 @@ const Playground = () => {
   );
 };
 
-export default Playground;
+export default App;
diff --git a/src/components/AboutUs/AboutUs.jsx b/src/components/AboutUs/AboutUs.jsx
@@ -38,11 +38,11 @@ const AboutUs = () => {
           </Heading>
           <TextWithModal />
         </div>
-        <div className="h-full w-full basis-1 flex justify-center items-center flex-wrap-reverse flex-col md:flex-row gap-2 md:gap-0">
+        <div className="h-full w-full flex flex-wrap gap-2 items-center justify-center pb-12 md:gap-0">
           {topics.map((item, idx) => {
             return (
               <div
-                className="md:w-1/3 w-full flex justify-center items-center"
+                className="w-fit md:w-1/3 flex justify-center items-center"
                 key={idx}
               >
                 <AnimatedButton text={item} />
diff --git a/src/components/AboutUs/AnimatedButton.jsx b/src/components/AboutUs/AnimatedButton.jsx
@@ -18,7 +18,10 @@ const AnimatedButton = ({ text }) => {
     });
   });
   return (
-    <div id="container" className="rounded-lg relative overflow-hidden p-[2px]">
+    <div
+      id="container"
+      className="rounded-lg relative overflow-hidden p-[2px] md:w-52 h-fit"
+    >
       <div
         id="rotate-this"
         className="absolute bg-gradient-to-br from-[#BC01FE9C] to-[#00000033] w-[110%] aspect-square top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10"
@@ -36,7 +39,7 @@ const AnimatedButton = ({ text }) => {
             className="absolute bg-gradient-to-br from-[#BC01FE9C] to-[#00000033] w-[110%] aspect-square top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10"
           ></div>
           <div className="bg-[#060714] h-full rounded-lg relative z-10 inner-shadow">
-            <div className="inner-shadow w-full h-full rounded-lg justify-center items-center flex bg-gradient-to-b from-[#0E0D20] to-[#482568] font-robotoMono px-6 py-2 md:text-xl text-sm">
+            <div className="inner-shadow w-full h-full rounded-lg justify-center items-center flex bg-gradient-to-b from-[#0E0D20] to-[#482568] font-robotoMono px-6 py-2 md:text-xl text-xs">
               {text}
             </div>
           </div>
diff --git a/src/components/ComingSoon/ComingSoon.jsx b/src/components/ComingSoon/ComingSoon.jsx
@@ -0,0 +1,35 @@
+import Navbar from '../Navbar/navbar';
+
+export default function ComingSoon() {
+  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 relative">
+      <Navbar />
+      <div className="relative z-10 text-center max-w-4xl mt-20 mx-auto">
+        <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">
+          COMING SOON
+        </h1>
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6">
+          <a href="https://github.com/OpencodeNIT-R">
+            <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 font-robotoMono">
+                <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>
+          </a>
+          <a href="https://resourcesopencode.notion.site/A-Z-Resources-Opencode-a5750981094c46b4b07f2f85dea6e6e3">
+            <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 font-robotoMono">
+              Resources
+            </button>
+          </a>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/components/Footer/footer.jsx b/src/components/Footer/footer.jsx
@@ -13,7 +13,7 @@ export default function Footer() {
             </h2>
             <div className="absolute -bottom-8 right-0">
               <a
-                href="#"
+                href="https://chat.whatsapp.com/GMNyUn47aEh0DE7krtd1Kx"
                 className="inline-flex font-robotoMono text-[#989898] items-center text-lg hover:text-[#bfbfbf] transition-colors relative group"
               >
                 Join us ↗
@@ -24,48 +24,68 @@ export default function Footer() {
         </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">
+            <a
+              href="/"
+              className="text-5xl font-bold text-shaaa mb-6 md:mb-0 flex items-center gap-2"
+            >
               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">
+              <a
+                href="/coming-soon"
+                className="hover:text-[#A546FF] transition-colors"
+              >
                 About
               </a>
-              <a href="#" className="hover:text-[#A546FF] transition-colors">
+              <a
+                href="/coming-soon"
+                className="hover:text-[#A546FF] transition-colors"
+              >
                 Events
               </a>
-              <a href="#" className="hover:text-[#A546FF] transition-colors">
+              <a
+                href="/coming-soon"
+                className="hover:text-[#A546FF] transition-colors"
+              >
                 Projects
               </a>
-              <a href="#" className="hover:text-[#A546FF] transition-colors">
+              <a
+                href="/coming-soon"
+                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]">
+              <a
+                href="https://www.instagram.com/opencode.nitr"
+                className="text-[#A546FF] hover:text-[#B388FF]"
+              >
                 <Instagram className="h-5 w-5" />
               </a>
-              <a href="#" className="text-[#A546FF] hover:text-[#B388FF]">
+              <a
+                href="https://www.linkedin.com/company/opencode-nit-rourkela/"
+                className="text-[#A546FF] hover:text-[#B388FF]"
+              >
                 <Linkedin className="h-5 w-5" />
               </a>
-              <a href="#" className="text-[#A546FF] hover:text-[#B388FF]">
+              <a
+                href="https://github.com/OpencodeNIT-R"
+                className="text-[#A546FF] hover:text-[#B388FF]"
+              >
                 <Github className="h-5 w-5" />
               </a>
-              <a href="#" className="text-[#A546FF] hover:text-[#B388FF]">
+              <a
+                href="https://x.com/Opencode_NITRKL"
+                className="text-[#A546FF] hover:text-[#B388FF]"
+              >
                 <Twitter className="h-5 w-5" />
               </a>
             </div>
diff --git a/src/components/Hero/hero.jsx b/src/components/Hero/hero.jsx
@@ -23,21 +23,25 @@ export default function Home() {
           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 font-robotoMono">
-              <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 font-robotoMono">
-            Resources
-          </button>
+          <a href="https://github.com/OpencodeNIT-R">
+            <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 font-robotoMono">
+                <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>
+          </a>
+          <a href="https://resourcesopencode.notion.site/A-Z-Resources-Opencode-a5750981094c46b4b07f2f85dea6e6e3">
+            <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 font-robotoMono">
+              Resources
+            </button>
+          </a>
         </div>
       </div>
     </main>
diff --git a/src/components/Navbar/navbar.jsx b/src/components/Navbar/navbar.jsx
@@ -5,10 +5,10 @@ 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' },
+    { href: '/coming-soon', label: 'About' },
+    { href: '/coming-soon', label: 'Events' },
+    { href: '/coming-soon', label: 'Projects' },
+    { href: '/coming-soon', label: 'Team' },
   ];
 
   return (
@@ -20,10 +20,10 @@ export default function Navbar() {
         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">
+      <header className="fixed top-0 w-full flex justify-center p-4 md:p-8 z-50 ">
+        <nav className="relative w-full lg:w-6/12 md:w-full max-w-7xl flex items-center justify-between px-4 md:px-8 py-2 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-[1px] 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" />
 
@@ -49,8 +49,14 @@ export default function Navbar() {
             />
           </button>
 
-          <div className="text-[#989898] text-xl sm:text-2xl font-mono z-10">
-            {'{'}={'}'}
+          <div className="z-10 flex items-center justify-between  h-full md:w-auto">
+            <a href="/" className="cursor-pointer">
+              <img
+                src="https://res.cloudinary.com/dqcrkrtyr/image/upload/v1734800561/oc_logo_yig1u4.png"
+                alt=""
+                className="h-8 mr-2"
+              />
+            </a>
           </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) => (
@@ -64,12 +70,17 @@ export default function Navbar() {
             ))}
           </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>
+          <a
+            href="https://chat.whatsapp.com/GMNyUn47aEh0DE7krtd1Kx"
+            className="hidden md:block"
+          >
+            <button className="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 md:text-sm z-10 px-4 py-2 rounded-[10px]">
+              Join us
+            </button>
+          </a>
 
           <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 ${
+            className={`absolute top-full left-0 w-full lg:hidden mt-2 md:mt-4 py-4 md: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'
@@ -80,14 +91,16 @@ export default function Navbar() {
                 <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"
+                  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 md: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>
+              <a href="https://chat.whatsapp.com/GMNyUn47aEh0DE7krtd1Kx">
+                <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>
+              </a>
             </div>
           </div>
         </nav>
diff --git a/src/main.jsx b/src/main.jsx
@@ -4,13 +4,15 @@ import './index.css';
 import App from './App.jsx';
 import { BrowserRouter, Route, Routes } from 'react-router';
 import Playground from './Playground.jsx';
+import ComingSoon from './components/ComingSoon/ComingSoon.jsx';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<App />} />
         <Route path="/playground" element={<Playground />} />
+        <Route path="/coming-soon" element={<ComingSoon />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>
