Ensteins-Coding-Hub · rankell05 · Dec 23, 2025 · Dec 23, 2025 · Dec 23, 2025 · Dec 25, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/your-image.jpg b/public/your-image.jpg
diff --git a/src/app/contact-us/page.jsx b/src/app/contact-us/page.jsx
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
@@ -1,5 +1,4 @@
 import "@/src/app/globals.css";
-import NavigationBar from "../components/NavigationBar";
 
 export const metadata = {
   title: "Ensteins",
@@ -10,9 +9,6 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className="bg-[#06021A]" >
-        <div className="pb-12 z-[1000]" >
-          <NavigationBar />
-        </div>
         {children}
       </body>
     </html>

diff --git a/src/app/memories/page.jsx b/src/app/memories/page.jsx
diff --git a/src/app/page.jsx b/src/app/page.jsx
@@ -1,46 +1,9 @@
-import BackgroundPaths from "@/src/components/BackgroundPaths";
-import Carousel from "@/src/components/Carousel";
-import Footer from "@/src/components/Footer";
-import HeroSection from "@/src/components/HeroSection";
-import EventsSection from "@/src/components/EventsSection";
-import DropDownLine from "@/src/components/DropDownLine";
-import Stats from "@/src/components/Stats";
-import ReachUs from "../components/ReachUs";
+import AboutUsInfo from "@/src/components/AboutUsInfo";
 
 export default function Home() {
   return (
     <main className="w-screen z-0">
-      <BackgroundPaths />
-      <div className="flex justify-center items-center h-screen w-screen relative">
-        <HeroSection />
-      </div>
-
-      <div className="w-full flex justify-center">
-        <Stats />
-      </div>
-
-      <div id="about">
-        <DropDownLine />
-      </div>
-
-      <div id="events">
-        <EventsSection />
-      </div>
-
-      <div id="memos" className="w-full h-full flex justify-center p-[100px]">
-        <Carousel
-          slides={[
-            "memo1.jpg",
-            "memo2.jpg",
-            "memo3.jpg",
-            "memo4.jpg",
-          ]}
-        />
-      </div>
-
-      <ReachUs />
-
-      <Footer />
+      <AboutUsInfo />
     </main>
   );
-}
+}
diff --git a/src/components/AboutUsCard.jsx b/src/components/AboutUsCard.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+const AboutUsCard = ({
+  title = "ENSTA RACE",
+  description = "waiting you to join idk what to write",
+  imageUrl = "/your-image.jpg", 
+  isReversed = false,
+}) => {
+  return (
+    <section
+      className={
+        `w-full max-w-[900px]
+        rounded-2xl p-5 sm:p-8
+        flex flex-col ${isReversed ? 'sm:flex-row-reverse' : 'sm:flex-row'}  
+        items-center sm:items-start 
+        gap-6 sm:gap-8
+        bg-white/5 backdrop-blur-md 
+        border border-white/20
+        transition-all
+        mx-auto`
+      }
+    >
+      {/* Text Content Section */}
+      <div
+        className="
+          w-full sm:w-[500px]
+          rounded-2xl 
+          flex flex-col 
+          items-start justify-center
+          gap-4 sm:gap-4
+        "
+      >
+        <span className="text-white text-4xl sm:text-4xl font-bold">
+          {title}
+        </span>
+
+        {/* Divider Line */}
+        <div
+          className="
+            w-full 
+            h-1
+            bg-SpecialBlueHovered
+            rounded-full
+          "
+        />
+
+        <span className="text-white text-sm sm:text-xl font-light">
+          {description}
+        </span>
+      </div>
+
+      {/* Image/Visual Section */}
+      <div
+        className="
+          w-full sm:w-[400px]
+          h-48 sm:h-auto
+          bg-amber-300
+          rounded-2xl
+          overflow-hidden
+        "
+      >
+         <img src={imageUrl} alt={title} className="w-full h-full object-cover" /> 
+      </div>
+    </section>
+  );
+};
+
+export default AboutUsCard;
diff --git a/src/components/AboutUsInfo.jsx b/src/components/AboutUsInfo.jsx
@@ -0,0 +1,60 @@
+import React from "react";
+import AboutUsCard from "./AboutUsCard";
+
+const AboutUsInfo = () => {
+  const aboutUsCards = [
+    {
+      id: 0,
+      title: "ENSTA RACE",
+      description: "May the Gloriest Empire Win the Battle",
+      imageUrl: "/your-image.jpg",
+
+    },
+    {
+      id: 1,
+      title: "InTech",
+      description: "Learn new technologies and network with professionals",
+      imageUrl: "/your-image.jpg",
+
+    },
+    {
+      id: 2,
+      title: "WeeHack",
+      description: "Problem, solution.. Something is being cooked!",
+      imageUrl: "/your-image.jpg",
+
+    },
+  ];
+
+  return (
+
+    <div className="flex flex-col items-center justify-center gap-14 px-4 py-20 relative overflow-hidden">
+      {/* Background effects */}
+      <div className="absolute w-[30vw] h-[30vw] rounded-full bg-linear-to-bl from-transparent via-[#5c92ff] to-transparent opacity-40 blur-3xl animate-pulse" />
+      <div className="absolute -right-30 w-[80vw] h-[80vw] rounded-full bg-linear-to-l from-[#5c92ff]/40 via-transparent to-transparent opacity-40 blur-3xl" />
+      <div className="absolute -left-30 w-[70vw] h-[70vw] rounded-full bg-linear-to-r from-[#5c92ff]/40 via-transparent to-transparent opacity-40 blur-3xl" />
+
+      {/* Section Header */}
+      <h1 className="text-center relative z-10">
+        <span className="text-4xl sm:text-6xl text-white font-bold">
+          ABOUT US
+        </span>
+      </h1>
+
+      {/* Cards Container*/}
+      <div className="flex flex-col items-center gap-12 w-full max-w-full relative z-10">
+        {aboutUsCards.map((card) => (
+          <AboutUsCard
+            key={card.id}
+            title={card.title}
+            description={card.description}
+            imageUrl={card.imageUrl}
+            isReversed={card.id % 2 === 1}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AboutUsInfo;