From 77dab0e0dabeda36cabcae7ff97221928682e6f3 Mon Sep 17 00:00:00 2001
From: pranavvraja <pranavvraja@gmail.com>
Date: Tue, 8 Oct 2024 13:11:49 +0530
Subject: [PATCH] add: about section

---
 src/app/page.tsx                          | 10 ++--
 src/components/common/About.tsx           | 62 +++++++++++++++++++++++
 src/components/stacking-cards/stacked.css |  1 +
 3 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 src/components/common/About.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3ea88c9..d1a7e1d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,14 +6,18 @@ import TextReveal from "@/components/ui/text-reveal";
 import ParallaxFooter from "@/components/common/Footer";
 import StackedCards from "@/components/stacking-cards/stacked";
 import { PreviousEdition } from "@/components/common/Container-Scroll";
+import About from "@/components/common/About";
 
 export default function Home() {
   return (
     <>
       <div className="z-20 relative bg-black overflow-x-clip">
-        <div className="flex flex-col items-center justify-center h-screen p-4"></div>
-        <div className="z-10 flex min-h-64 items-center justify-center rounded-lg ">
-          <TextReveal text="TEDxSJEC is a platform that brings together curious, creative, and progressive thinkers from St. Joseph Engineering College." />
+        <div
+          className="flex flex-col items-center justify-center h-screen p-4  bg-gradient-to-tr from-red-600 via-black to-black  "
+          id="hero"
+        ></div>
+        <div className="h-screen" id="about">
+          <About />
         </div>
         <div>
           <StackedCards />
diff --git a/src/components/common/About.tsx b/src/components/common/About.tsx
new file mode 100644
index 0000000..75e7a64
--- /dev/null
+++ b/src/components/common/About.tsx
@@ -0,0 +1,62 @@
+import { motion } from "framer-motion";
+
+const AboutSection: React.FC = () => {
+  return (
+    <section className="relative flex items-center justify-center min-h-screen bg-black text-white">
+      {/* Background decorative layers */}
+      <div className="absolute inset-0">
+        <motion.div
+          className="absolute w-full h-full bg-gradient-to-br from-red-600 via-black to-black opacity-70"
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          transition={{ duration: 1 }}
+        />
+        <motion.div
+          className="absolute -top-20 -left-20 w-64 h-64 md:w-96 md:h-96 bg-gradient-to-r from-red-600 to-black opacity-30 rounded-full"
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 1.5, ease: "easeOut" }}
+        />
+        <motion.div
+          className="absolute -bottom-20 -right-20 w-64 h-64 md:w-96 md:h-96 bg-gradient-to-r from-red-600 to-black opacity-30 rounded-full"
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 1.5, ease: "easeOut", delay: 0.3 }}
+        />
+      </div>
+
+      {/* About content */}
+      <motion.div
+        className="relative z-10 max-w-4xl p-4 md:p-8 text-center"
+        initial={{ y: 50, opacity: 0 }}
+        whileInView={{ y: 0, opacity: 1 }}
+        transition={{ duration: 1, ease: "easeOut" }}
+      >
+        <h2 className="text-4xl md:text-7xl font-bold text-red-600 mb-4 md:mb-6 leading-tight">
+          About TEDxSJEC
+        </h2>
+        <p className="text-base md:text-lg leading-relaxed mb-4 md:mb-6 text-gray-300">
+          TEDxSJEC is an independently organized event bringing together
+          innovators, thinkers, and visionaries from around the world. Our goal
+          is to inspire change, provoke deep discussions, and foster creativity
+          through groundbreaking ideas.
+        </p>
+        <p className="text-base md:text-lg leading-relaxed text-gray-300">
+          Join us for a day of inspiring talks, immersive experiences, and
+          powerful conversations. Together, we will explore the future and share
+          ideas that are truly worth spreading.
+        </p>
+
+        {/* Decorative line */}
+        <motion.div
+          className="mt-8 md:mt-12 mx-auto w-20 md:w-24 h-1 bg-red-600 rounded-full"
+          initial={{ scaleX: 0 }}
+          animate={{ scaleX: 1 }}
+          transition={{ duration: 1.2, ease: "easeOut", delay: 0.5 }}
+        />
+      </motion.div>
+    </section>
+  );
+};
+
+export default AboutSection;
diff --git a/src/components/stacking-cards/stacked.css b/src/components/stacking-cards/stacked.css
index eb069b6..98fc47b 100644
--- a/src/components/stacking-cards/stacked.css
+++ b/src/components/stacking-cards/stacked.css
@@ -1,6 +1,7 @@
 .sticky-section {
   box-sizing: border-box;
   position: relative;
+  margin-top: 200px;
 }
 
 .cards__item {