diff --git a/package-lock.json b/package-lock.json
index 38f824c..897518e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,7 +60,7 @@
         "react-icons": "^5.3.0",
         "resend": "^4.0.0",
         "sonner": "^1.5.0",
-        "tailwind-merge": "^2.5.2",
+        "tailwind-merge": "^2.5.3",
         "tailwindcss-animate": "^1.0.7",
         "three": "^0.169.0",
         "uploadthing": "^7.0.2",
@@ -5183,6 +5183,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -6897,6 +6898,7 @@
       "version": "11.11.1",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.1.tgz",
       "integrity": "sha512-Ucr9eHSrk0d+l6vyl9fvq6omh/PAWHjS+PlczpsoUdhJo1TuF3ULWJNuAMnpWQ1dGyPOyoUVuYlUKjE/s8dyCA==",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.4.0"
       },
@@ -12067,9 +12069,10 @@
       }
     },
     "node_modules/tailwind-merge": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
-      "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.3.tgz",
+      "integrity": "sha512-d9ZolCAIzom1nf/5p4LdD5zvjmgSxY0BGgdSvmXIoMYAiPdAW/dSpP7joCDYFY7r/HkEa2qmPtkgsu0xjQeQtw==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"
diff --git a/package.json b/package.json
index 66362e1..2c4e113 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "react-icons": "^5.3.0",
     "resend": "^4.0.0",
     "sonner": "^1.5.0",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
     "three": "^0.169.0",
     "uploadthing": "^7.0.2",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5a2ebba..d1a7e1d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,46 +3,32 @@
 import React from "react";
 import HorizontalScroll from "@/components/common/HorizontalScrollCarousel";
 import TextReveal from "@/components/ui/text-reveal";
-import HeroVideoDialog from "@/components/ui/hero-video-dialog";
 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 />
         </div>
-
-        <div className="relative h-screen md:p-32 p-8 py-24 backdrop-invert flex flex-col justify-center items-center">
-          <h1 className="text-black text-center md:text-5xl text-2xl w-full font-bold leading-tight mt-10">
-            Check out the <br /> Previous Editions
-          </h1>
-          <div className="mt-24 md:w-2/3 w-full">
-            <HeroVideoDialog
-              className="block"
-              animationStyle="from-center"
-              videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
-              thumbnailSrc="https://startup-template-sage.vercel.app/hero-dark.png"
-              thumbnailAlt="Hero Video"
-            />
-          </div>
+        <div className=" bg-gradient-to-b bg-black from-black via-red-600  to-white to-95%">
+          <PreviousEdition />
         </div>
-
         <div className="backdrop-invert mb-[100vh]">
           <HorizontalScroll />
         </div>
-
       </div>
-
-
       <ParallaxFooter />
     </>
   );
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/common/Container-Scroll.tsx b/src/components/common/Container-Scroll.tsx
new file mode 100644
index 0000000..d62ce43
--- /dev/null
+++ b/src/components/common/Container-Scroll.tsx
@@ -0,0 +1,24 @@
+"use client";
+import React from "react";
+import { ContainerScroll } from "../ui/container-scroll-animation";
+
+export function PreviousEdition() {
+  return (
+    <div className="flex flex-col overflow-hidden">
+      <ContainerScroll
+        titleComponent={
+          <>
+            <h1 className="md:text-7xl text-3xl font-semibold text-black dark:text-white">
+              Check out the Previous Edition
+            </h1>
+          </>
+        }
+      >
+        <video width="100%" height="100%" controls preload="none" poster="">
+          <source src="/path/to/video.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      </ContainerScroll>
+    </div>
+  );
+}
diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
index 3540ef4..313a80f 100644
--- a/src/components/common/Footer.tsx
+++ b/src/components/common/Footer.tsx
@@ -1,88 +1,127 @@
 import Link from "next/link";
 import React from "react";
 import TextGlitch from "../edil-ozi/text-glitch";
+import Image from "next/image";
+import { tedxsjecAssetsPrefix } from "@/lib/utils";
 
 type Props = {};
 
 const Footer = (props: Props) => {
   return (
     <>
-      <footer className="h-screen md:py-20 md:px-12 py-8 px-4 w-screen fixed bottom-0 z-10">
-        <h1 className="text-5xl font-bold">Contact</h1>
-        <section className="flex md:flex-row flex-col w-full h-full mt-10">
-          <div className="flex flex-col md:w-2/5 w-full">
-            <div>
-              <div className="flex  h-min w-full items-center">
-                <div className="inline-block h-[150px] min-h-[1em] w-1 self-stretch bg-red-600 "></div>
-                <div className="mx-8">
-                  <h1 className="text-2xl font-bold mb-4">
-                    St Joseph Engineering College
-                  </h1>
-                  <p className="font-light">
-                    St Joseph Engineering College,
-                    <br /> Vamanjoor,Mangalore - 575028
-                    <br /> Karnataka, India
-                  </p>
+      <footer className="h-screen md:pt-32 pt-24 flex flex-col justify-between overflow-scroll lg:px-12 md:px-7  py-8 px-4 w-screen fixed bottom-0 z-10">
+        <div>
+          <h1 className="md:text-5xl text-3xl font-bold mb-4 text-center sm:text-left">
+            Contact
+          </h1>
+          <h1 className="lg:text-xl text-sm">
+            To get in touch with us regarding sponsorships and other queries,
+            drop an email to:{" "}
+            <a href="mailto:tedx@sjec.ac.in" className="text-red-600 pt-4">
+              tedx@sjec.ac.in
+            </a>
+          </h1>
+          <section className="flex md:flex-row flex-col w-full h-full md:mt-10 mt-4">
+            <div className="flex flex-col md:w-2/5 w-full">
+              <div>
+                <div className="flex  h-min w-full items-center">
+                  <div className="inline-block h-[150px] min-h-[1em] w-1 self-stretch bg-red-600 "></div>
+                  <div className="mx-8">
+                    <h1 className="md:text-2xl text-lg font-bold mb-4">
+                      St Joseph Engineering College
+                    </h1>
+                    <p className="font-light md:text-base text-sm">
+                      St Joseph Engineering College,
+                      <br /> Vamanjoor,Mangalore - 575028
+                      <br /> Karnataka, India
+                    </p>
+                  </div>
                 </div>
-              </div>
-              <div className="flex flex-col mt-8">
-                <div className="flex flex-col mx-8">
-                  <h1 className="text-xl font-bold my-4">Contact</h1>
-                  <p className="text-lg">
-                    Dr. Binu K G :{" "}
-                    <a href="tel:+91-9739866947" className="text-red-600">
-                      +91-9739866947
-                    </a>
-                  </p>
-                </div>
-                <div className="flex flex-col mx-8 font-semibold ">
-                  <h1 className="text-2xl font-bold my-4 no-underline">
-                    Socials
-                  </h1>
-                  <Link
-                    href={"https://instagram.com/tedxsjec"}
-                    className=" my-8 py-8 text-xl"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    <TextGlitch
-                      textOne="PERFORMERS"
-                      textTwo="PERFORMERS"
-                      className="font-bold text-black  text-[40px] md:text-[50px] leading-tight"
-                    />
-                  </Link>
-                  <Link
-                    href={"https://www.linkedin.com/company/tedxsjec"}
-                    className="text-xl"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    <TextGlitch
-                      textOne="PERFORMERS"
-                      textTwo="PERFORMERS"
-                      className="font-bold text-black  text-[40px] md:text-[50px] leading-tight"
-                    />
-                  </Link>
+                <div className="flex flex-col md:mt-8 my-2">
+                  <div className="flex flex-col mx-8 text-center sm:text-left">
+                    <h1 className="md:text-2xl text-lg font-bold lg:my-4">
+                      Contact
+                    </h1>
+                    <p className="md:text-lg text-md ">
+                      Dr. Binu K G :{" "}
+                      <a href="tel:+91-9739866947" className="text-red-600">
+                        +91-9739866947
+                      </a>
+                    </p>
+                  </div>
+                  <div className="flex flex-col mx-8 font-semibold text-white ">
+                    <h1 className="md:text-2xl text-lg text-center sm:text-left font-bold mt-4 md:mt-8 no-underline">
+                      Socials
+                    </h1>
+                    <section className="flex sm:flex-col justify-evenly">
+                      <Link
+                        href={"https://instagram.com/tedxsjec"}
+                        className=" text-sm "
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        <TextGlitch
+                          textOne="INSTAGRAM"
+                          textTwo="tedxsjec"
+                          className="font-bold text-black  text-[15px] lg:text-[20px] leading-tight"
+                        />
+                      </Link>
+                      <Link
+                        href={"https://www.linkedin.com/company/tedxsjec"}
+                        className="text-sm "
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        <TextGlitch
+                          textOne="LINKEDIN"
+                          textTwo="tedxsjec"
+                          className="font-bold text-black  text-[15 px] lg:text-[20px] leading-tight"
+                        />
+                      </Link>
+                    </section>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          <div className="w-full flex justify-center mt-8">
-            <iframe
-              className=" md:block hidden"
-              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.9520361386985!2d74.89609701022555!3d12.910804316156533!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba359dfac132663%3A0xa7bf228838232d32!2sSt%20Joseph%20Engineering%20College!5e0!3m2!1sen!2sin!4v1713257369845!5m2!1sen!2sin"
-              width="80%"
-              height="60%"
-              loading="lazy"
-            ></iframe>
-            <iframe
-              className=" md:hidden block"
-              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.9520361386985!2d74.89609701022555!3d12.910804316156533!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba359dfac132663%3A0xa7bf228838232d32!2sSt%20Joseph%20Engineering%20College!5e0!3m2!1sen!2sin!4v1713257369845!5m2!1sen!2sin"
-              width="100%"
-              height="100%"
-              loading="lazy"
-            ></iframe>
+            <div className="xl:w-full md:w-1/2 w-full md:h-[500px] lg:h-full h-[150px] px-8 md:px-0 flex justify-end">
+              <iframe
+                className=" md:block hidden"
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.9520361386985!2d74.89609701022555!3d12.910804316156533!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba359dfac132663%3A0xa7bf228838232d32!2sSt%20Joseph%20Engineering%20College!5e0!3m2!1sen!2sin!4v1713257369845!5m2!1sen!2sin"
+                width="70%"
+                height="90%"
+                loading="lazy"
+              ></iframe>
+              <iframe
+                className=" md:hidden block"
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.9520361386985!2d74.89609701022555!3d12.910804316156533!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba359dfac132663%3A0xa7bf228838232d32!2sSt%20Joseph%20Engineering%20College!5e0!3m2!1sen!2sin!4v1713257369845!5m2!1sen!2sin"
+                width="100%"
+                height="100%"
+                loading="lazy"
+              ></iframe>
+            </div>
+          </section>
+        </div>
+
+        <section className="text-center w-full flex md:flex-row flex-col justify-between mt-4 items-center">
+          <div className="flex flex-row items-center md:divide-x divide-white">
+            <Image
+              src={`${tedxsjecAssetsPrefix}/logo/whiteLogo.png`}
+              height={150}
+              width={150}
+              alt="logo"
+              layout="fixed"
+              priority={true}
+              className="hidden md:block"
+            />
+            <h1 className="text-white text-xs lg:text-base pl-2 h-full">
+              © 2024 All Rights Reserved
+            </h1>
+          </div>
+          <div>
+            <h1 className="text-white text-xs lg:text-base pl-2 h-full items-center capitalize">
+              This Independent TEDx Event is Operated under license from TED
+            </h1>
           </div>
         </section>
       </footer>
diff --git a/src/components/common/HorizontalScrollCarousel.tsx b/src/components/common/HorizontalScrollCarousel.tsx
index ea1a6ff..cc6cd25 100644
--- a/src/components/common/HorizontalScrollCarousel.tsx
+++ b/src/components/common/HorizontalScrollCarousel.tsx
@@ -38,7 +38,7 @@ const Card = ({ card }: { card: CardType }) => {
   return (
     <div
       key={card.id}
-      className="group relative md:h-[450px] md:w-[450px] h-[300px] w-[400px] rounded-3xl mr-4 overflow-hidden bg-neutral-200"
+      className="group relative md:h-[450px] md:w-[450px] h-[300px] w-[400px] rounded-3xl mr-4 overflow-hidden bg-neutral-200 "
     >
       <div
         style={{
@@ -46,7 +46,7 @@ const Card = ({ card }: { card: CardType }) => {
           backgroundSize: "cover",
           backgroundPosition: "center",
         }}
-        className="absolute inset-0 z-0 transition-transform duration-300 group-hover:scale-110"
+        className="absolute inset-0 z-0 duration-300 group-hover:scale-110 transition saturate-0 hover:saturate-100"
       ></div>
       <div className="absolute bottom-0 w-full z-10 grid place-content-left">
         <div className="bg-gradient-to-b w-full  from-black/0 to-black/30 p-8 py-4 text-5xl font-black uppercase text-white ">
diff --git a/src/components/edil-ozi/text-glitch.tsx b/src/components/edil-ozi/text-glitch.tsx
index ff21317..5161bcb 100644
--- a/src/components/edil-ozi/text-glitch.tsx
+++ b/src/components/edil-ozi/text-glitch.tsx
@@ -3,21 +3,24 @@ import { FC } from "react";
 import { cn } from "@/lib/utils";
 
 interface Props {
-  textOne: string; 
-  textTwo: string; 
+  textOne: string;
+  textTwo: string;
   className?: string;
 }
 
 const TextGlitchEffect: FC<Props> = ({ textOne, textTwo, className }) => {
   return (
     <div
-      className={cn("group relative inline-block overflow-hidden leading-tight", className)}
+      className={cn(
+        "group relative inline-block overflow-hidden leading-tight",
+        className
+      )}
     >
       <span className="invisible whitespace-nowrap">{textOne}</span>
-      <span className="absolute left-0 top-0 text-black transition-transform duration-300 ease-in-out group-hover:-translate-y-full whitespace-nowrap">
+      <span className="absolute left-0 top-0 text-red-600 transition-transform duration-300 ease-in-out group-hover:-translate-y-full whitespace-nowrap">
         {textOne}
       </span>
-      <span className="absolute left-0 top-0 translate-y-full transition-transform duration-300 ease-in-out group-hover:translate-y-0 text-red-600 whitespace-nowrap">
+      <span className="absolute left-0 top-0 translate-y-full transition-transform duration-300 ease-in-out group-hover:translate-y-0 text-white whitespace-nowrap">
         {textTwo}
       </span>
     </div>
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 {
diff --git a/src/components/ui/container-scroll-animation.tsx b/src/components/ui/container-scroll-animation.tsx
new file mode 100644
index 0000000..42910e6
--- /dev/null
+++ b/src/components/ui/container-scroll-animation.tsx
@@ -0,0 +1,95 @@
+"use client";
+import React, { useRef } from "react";
+import { useScroll, useTransform, motion, MotionValue } from "framer-motion";
+
+export const ContainerScroll = ({
+  titleComponent,
+  children,
+}: {
+  titleComponent: string | React.ReactNode;
+  children: React.ReactNode;
+}) => {
+  const containerRef = useRef<any>(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+  });
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
+  }, []);
+
+  const scaleDimensions = () => {
+    return isMobile ? [0.7, 0.9] : [1.05, 1];
+  };
+
+  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
+  const scale = useTransform(scrollYProgress, [0, 1], scaleDimensions());
+  const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);
+
+  return (
+    <div
+      className="h-[60rem] md:h-[80rem] flex items-center justify-center relative p-2 md:p-20"
+      ref={containerRef}
+    >
+      <div
+        className="py-10 md:py-40 mt-96 w-full relative "
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <Header translate={translate} titleComponent={titleComponent} />
+        <Card rotate={rotate} translate={translate} scale={scale}>
+          {children}
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export const Header = ({ translate, titleComponent }: any) => {
+  return (
+    <motion.div
+      style={{
+        translateY: translate,
+      }}
+      className="div max-w-5xl mx-auto text-center"
+    >
+      {titleComponent}
+    </motion.div>
+  );
+};
+
+export const Card = ({
+  rotate,
+  scale,
+  children,
+}: {
+  rotate: MotionValue<number>;
+  scale: MotionValue<number>;
+  translate: MotionValue<number>;
+  children: React.ReactNode;
+}) => {
+  return (
+    <motion.div
+      style={{
+        rotateX: rotate,
+        scale,
+        boxShadow:
+          "2px 2px #0000004d, 4px 2px 5px #0000004a, 9px 9px 9px #00000042, 12px 21px 12px #00000026, 15px 37px 15px #0000000a, 17px 58px 17px #00000003",
+      }}
+      className="max-w-5xl -mt-12 mx-auto h-fit  w-full border-4 border-[#6C6C6C] p-2 md:p-6 bg-[#222222] rounded-[30px] shadow-2xl"
+    >
+      <div className=" h-full w-full  overflow-hidden rounded-2xl bg-gray-100 dark:bg-zinc-900 md:rounded-2xl md:p-4 ">
+        {children}
+      </div>
+    </motion.div>
+  );
+};