OpencodeNIT-R · Srish-ty · Jan 12, 2025 · Dec 10, 2024 · Dec 10, 2024 · Dec 11, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -19,11 +19,12 @@
   "plugins": ["react", "react-hooks"],
   "rules": {
     "react/react-in-jsx-scope": "off",
-    "no-unused-vars": "warn"
+    "no-unused-vars": "warn",
+    "react/prop-types": "off"
   },
   "settings": {
     "react": {
       "version": "detect"
     }
   }
-}
+}
diff --git a/eslint.config.js b/eslint.config.js
@@ -38,6 +38,7 @@ export default [
         'warn',
         { allowConstantExport: true },
       ],
+      'react/prop-types': 'off',
     },
   },
 ];
diff --git a/index.html b/index.html
@@ -2,9 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="https://res.cloudinary.com/dqcrkrtyr/image/upload/v1734800561/oc_logo_yig1u4.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Project Athena</title>
+    <title>OpenCode</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -21,6 +21,9 @@
     "@babel/core": "^7.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@gsap/react": "^2.1.1",
+    "gsap": "^3.12.5",
+    "lenis": "^1.1.18",
     "lucide-react": "^0.468.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

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
@@ -1,15 +1,28 @@
-import Hero from './components/hero.jsx';
-import Navbar from './components/navbar.jsx';
-import Footer from './components/footer.jsx';
+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';
 
-const Playground = () => {
+// Initialize Lenis
+// eslint-disable-next-line no-unused-vars
+const lenis = new Lenis({
+  autoRaf: true,
+});
+
+const App = () => {
   return (
     <div>
       <Navbar />
       <Hero />
+      <AboutUs />
+      <Gallery />
+      <MeetTheTeam />
       <Footer />
     </div>
   );
 };
 
-export default Playground;
+export default App;
diff --git a/src/components/AboutUs/AboutUs.jsx b/src/components/AboutUs/AboutUs.jsx
@@ -0,0 +1,58 @@
+import Heading from '../shared/Heading';
+import AnimatedButton from './AnimatedButton';
+import TextWithModal from './TextWithModal';
+
+const topics = ['AI/ML', 'Web Dev', 'App Dev', 'Cybersecurity', 'Open-Source'];
+
+const AboutUs = () => {
+  return (
+    <div className="h-screen bg-[#060714] sticky top-0 grid place-items-center text-white -z-10 bg-[linear-gradient(180deg,_#0C0C1D_0%,_#070614FA_10%)]">
+      <img
+        src="https://res.cloudinary.com/dqcrkrtyr/image/upload/v1733829420/dots_rqtxh8.png"
+        alt=""
+        className="absolute h-screen"
+      />
+      <div
+        id="about-us"
+        className="relative w-[80%] h-[80%] rounded-xl inset-shadow overflow-hidden border-gradient grid place-items-center"
+      >
+        <img
+          src="https://res.cloudinary.com/dqcrkrtyr/image/upload/v1733829425/light1_l6gwo2.png"
+          alt=""
+          className="absolute top-0 h-3/5 -z-10 left-4"
+        />
+        <img
+          src="https://res.cloudinary.com/dqcrkrtyr/image/upload/v1733829427/light2_zuok5s.png"
+          alt=""
+          className="absolute top-0 h-3/5 -z-10 -left-8"
+        />
+        <img
+          src="https://res.cloudinary.com/dqcrkrtyr/image/upload/v1733829428/light3_etmaya.png"
+          alt=""
+          className="absolute top-0 h-3/5 -z-10 left-0"
+        />
+
+        <div className="flex flex-col items-center gap-8 justify-center basis-1 py-6">
+          <Heading extraCSS={{ color: '#A546FF', fontFamily: 'Montserrat' }}>
+            About us.
+          </Heading>
+          <TextWithModal />
+        </div>
+        <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="w-fit md:w-1/3 flex justify-center items-center"
+                key={idx}
+              >
+                <AnimatedButton text={item} />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AboutUs;
diff --git a/src/components/AboutUs/AnimatedButton.jsx b/src/components/AboutUs/AnimatedButton.jsx
@@ -0,0 +1,52 @@
+import { useGSAP } from '@gsap/react';
+import gsap from 'gsap';
+
+const AnimatedButton = ({ text }) => {
+  gsap.registerPlugin(useGSAP);
+  useGSAP(() => {
+    gsap.to('#rotate-this', {
+      rotate: '720deg',
+      duration: 4,
+      repeat: -1,
+      ease: 'linear',
+    });
+    gsap.to('#rotate-that', {
+      rotate: '720deg',
+      duration: 4,
+      repeat: -1,
+      ease: 'linear',
+    });
+  });
+  return (
+    <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"
+      ></div>
+      <div
+        id="black-box"
+        className="bg-[#060714] h-full relative rounded-lg z-20 p-[1.2px]"
+      >
+        <div
+          id="inner-container"
+          className="h-full rounded-lg relative overflow-hidden p-[1px]"
+        >
+          <div
+            id="rotate-that"
+            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-xs">
+              {text}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AnimatedButton;
diff --git a/src/components/AboutUs/TextWithModal.jsx b/src/components/AboutUs/TextWithModal.jsx
@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react';
+
+const TextWithModal = () => {
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  const fullText = `At our core, we are a passionate collective of innovators, 
+  developers, and tech enthusiasts dedicated to pushing the boundaries of 
+  technology. Our mission is to create cutting-edge solutions that solve 
+  real-world problems and drive digital transformation. With a diverse team 
+  of experts spanning multiple domains, we blend creativity, technical 
+  expertise, and a relentless pursuit of excellence to deliver impactful 
+  technological solutions.`;
+
+  useEffect(() => {
+    const checkTextTruncation = () => {
+      // Adjust this breakpoint as needed
+      setIsTruncated(window.innerWidth < 768);
+    };
+
+    // Check on mount
+    checkTextTruncation();
+
+    // Add event listener for window resize
+    window.addEventListener('resize', checkTextTruncation);
+
+    // Cleanup listener
+    return () => {
+      window.removeEventListener('resize', checkTextTruncation);
+    };
+  }, []);
+
+  // Function to truncate text
+  const getTruncatedText = () => {
+    return fullText.slice(0, 201) + '...';
+  };
+
+  const handleCLick = () => {
+    console.log('clicked!');
+  };
+
+  return (
+    <div
+      className="w-full md:w-4/5 text-center font-robotoMono relative z-10"
+      onClick={handleCLick}
+    >
+      <div className="text-sm md:text-base text-gray-300 px-4">
+        {isTruncated ? <>{getTruncatedText()}</> : fullText}
+      </div>
+    </div>
+  );
+};
+
+export default TextWithModal;
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>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,7 @@ export default [ @@
             'warn',
             { allowConstantExport: true },
           ],
+          'react/prop-types': 'off',
         },
       },
     ];