build(deps): bump prismjs and react-syntax-highlighter

package.json

@@ -50,7 +50,7 @@
     "react-select": "5.7.3",
     "react-simple-maps": "^3.0.0",
     "react-string-replace": "^0.4.4",
-    "react-syntax-highlighter": "^15.6.1",
+    "react-syntax-highlighter": "^16.1.0",
     "react-tooltip": "^5.28.0",
     "react-waypoint": "^10.1.0",
     "remark-gfm": "^4.0.0",

pages/about.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 
 import TopBar from '../src/components/shared/TopBar';
 import InctfIntro from '../src/components/about/Intro';
 import Footer from '../src/components/shared/Footer';
 import AboutAchievements from '../src/components/about/Achievements';
 import UNSDGSection from '../src/components/about/unsdg';
-// import { data } from '../src/components/about/stats/66';
-import Parallax from '../src/components/Parallax';
 import SiteView from '../src/components/SiteView';
+
 const eventID = process.env.EVENT_ID || process.env.NEXT_PUBLIC_EVENT_ID;
 const data = require(`../src/data/${eventID}/about.json`);
 
@@ -47,6 +47,64 @@ const AboutPage = () => {
     <Footer />
   </SiteView>);
 
+        <TopBar />
+
+        {/* Hero Cover Image with Overlay */}
+        <section className="relative z-10">
+          <div className="relative h-[500px] md:h-[600px] overflow-hidden">
+            <motion.img
+              initial={{ scale: 1.1, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ duration: 1.2 }}
+              src={`/${eventID}/${data.coverImage1}`}
+              alt="Cover"
+              className="w-full h-full object-cover"
+              draggable="false"
+            />
+            <div className="absolute inset-0 bg-gradient-to-b from-obsidian/60 via-transparent to-obsidian"></div>
+            <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-obsidian to-transparent"></div>
+          </div>
+        </section>
+
+        {/* Intro Section */}
+        <section className="relative z-10">
+          <InctfIntro />
+        </section>
+
+        {/* Second Cover Image */}
+        <section className="relative z-10 py-12">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="text-center px-4"
+          >
+            <div className="relative inline-block">
+              <img
+                draggable="false"
+                src={`/${eventID}/${data.CoverImage2}`}
+                alt="Cover Image"
+                className="rounded-xl border border-sky-digital/20 shadow-[0_0_30px_rgba(56,189,248,0.1)]"
+              />
+            </div>
+          </motion.div>
+        </section>
+
+        {/* Achievements Section */}
+        <section className="relative z-10">
+          <AboutAchievements />
+        </section>
+
+        {/* UNSDG Section */}
+        <section className="relative z-10">
+          <UNSDGSection />
+        </section>
+
+        <Footer />
+      </div>
+    </SiteView>
+  );
 };
 
 export default AboutPage;