Merge pull request #17 from CS-ZSC/feat/components/home/events

feat: event component

Author: hulxv

app/page.tsx

@@ -6,6 +6,7 @@ import HeroSection from "@/components/ui/internal/home/hero-section";
 import SloganTypingEffect from "@/components/ui/internal/home/slogan-typing-effect";
 import { useWindowType } from "@/hooks/use-window-type";
 import { useEffect, useRef } from "react";
+import Events from "@/components/ui/internal/home/events";
 // import data from "../fakedata.json";
 // import Image from "next/image";
 
@@ -113,9 +114,8 @@ export default function Home() {
             pointerEvents: "none",
             left: 0,
             top: 0,
-            transform: `translate(-${gradientSize / 2}px, -${
-              gradientSize / 2
-            }px)`,
+            transform: `translate(-${gradientSize / 2}px, -${gradientSize / 2
+              }px)`,
             zIndex: -1,
             willChange: "transform",
             opacity: 0,
@@ -125,272 +125,8 @@ export default function Home() {
         <HeroSection />
         <SloganTypingEffect />
       </Flex>
-      <Flex flexDirection={"column"} padding={"var(--global-spacing)"}>
-        {/* <Flex
-        bgColor={"card-bg-1"}
-        w={"full"}
-        padding={"var(--card-padding)"}
-        rounded={"2xl"}
-        fontSize={"2rem"}
-        flexDirection={"column"}
-      >
-        {data.data.map((item, i) => {
-          return (
-            <Flex
-              key={item.id}
-              justifyContent={"center"}
-              alignItems={"center"}
-              flexWrap={"wrap"}
-              height={"fit-content"}
-            >
-              {i}:<p>{item.title}</p>
-              <p>{item.description}</p>
-              <Image
-                src={item.photo}
-                alt={item.title}
-                width={160}
-                height={80}
-                layout="responsive"
-              />
-            </Flex>
-          );
-        })}
-      </Flex> */}
-        <div>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae,
-          maiores. Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam.
-        </div>
-        <div>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae,
-          maiores. Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam.
-        </div>
-        <div>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae,
-          maiores. Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam.
-        </div>
-        <div>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae,
-          maiores. Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor sit amet
-          consectetur adipisicing elit. Fuga totam ducimus est molestiae tempore
-          voluptas, iusto ut aliquam porro ipsum, aliquid quos aut commodi nemo?
-          Hic cum nesciunt repellendus saepe! Lorem ipsum dolor sit amet
-          consectetur adipisicing elit. Beatae, maiores. Consectetur enim fugiat
-          reiciendis dicta facilis, ipsa quis perferendis debitis voluptatibus
-          quibusdam reprehenderit unde eum nemo! Officia temporibus laborum
-          magnam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga
-          totam ducimus est molestiae tempore voluptas, iusto ut aliquam porro
-          ipsum, aliquid quos aut commodi nemo? Hic cum nesciunt repellendus
-          saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          Beatae, maiores. Consectetur enim fugiat reiciendis dicta facilis,
-          ipsa quis perferendis debitis voluptatibus quibusdam reprehenderit
-          unde eum nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor
-          sit amet consectetur adipisicing elit. Fuga totam ducimus est
-          molestiae tempore voluptas, iusto ut aliquam porro ipsum, aliquid quos
-          aut commodi nemo? Hic cum nesciunt repellendus saepe! Lorem ipsum
-          dolor sit amet consectetur adipisicing elit. Beatae, maiores.
-          Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor sit amet
-          consectetur adipisicing elit. Fuga totam ducimus est molestiae tempore
-          voluptas, iusto ut aliquam porro ipsum, aliquid quos aut commodi nemo?
-          Hic cum nesciunt repellendus saepe! Lorem ipsum dolor sit amet
-          consectetur adipisicing elit. Beatae, maiores. Consectetur enim fugiat
-          reiciendis dicta facilis, ipsa quis perferendis debitis voluptatibus
-          quibusdam reprehenderit unde eum nemo! Officia temporibus laborum
-          magnam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga
-          totam ducimus est molestiae tempore voluptas, iusto ut aliquam porro
-          ipsum, aliquid quos aut commodi nemo? Hic cum nesciunt repellendus
-          saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          Beatae, maiores. Consectetur enim fugiat reiciendis dicta facilis,
-          ipsa quis perferendis debitis voluptatibus quibusdam reprehenderit
-          unde eum nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor
-          sit amet consectetur adipisicing elit. Fuga totam ducimus est
-          molestiae tempore voluptas, iusto ut aliquam porro ipsum, aliquid quos
-          aut commodi nemo? Hic cum nesciunt repellendus saepe! Lorem ipsum
-          dolor sit amet consectetur adipisicing elit. Beatae, maiores.
-          Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor sit amet
-          consectetur adipisicing elit. Fuga totam ducimus est molestiae tempore
-          voluptas, iusto ut aliquam porro ipsum, aliquid quos aut commodi nemo?
-          Hic cum nesciunt repellendus saepe! Lorem ipsum dolor sit amet
-          consectetur adipisicing elit. Beatae, maiores. Consectetur enim fugiat
-          reiciendis dicta facilis, ipsa quis perferendis debitis voluptatibus
-          quibusdam reprehenderit unde eum nemo! Officia temporibus laborum
-          magnam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga
-          totam ducimus est molestiae tempore voluptas, iusto ut aliquam porro
-          ipsum, aliquid quos aut commodi nemo? Hic cum nesciunt repellendus
-          saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          Beatae, maiores. Consectetur enim fugiat reiciendis dicta facilis,
-          ipsa quis perferendis debitis voluptatibus quibusdam reprehenderit
-          unde eum nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor
-          sit amet consectetur adipisicing elit. Fuga totam ducimus est
-          molestiae tempore voluptas, iusto ut aliquam porro ipsum, aliquid quos
-          aut commodi nemo? Hic cum nesciunt repellendus saepe! Lorem ipsum
-          dolor sit amet consectetur adipisicing elit. Beatae, maiores.
-          Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor sit amet
-          consectetur adipisicing elit. Fuga totam ducimus est molestiae tempore
-          voluptas, iusto ut aliquam porro ipsum, aliquid quos aut commodi nemo?
-          Hic cum nesciunt repellendus saepe! Lorem ipsum dolor sit amet
-          consectetur adipisicing elit. Beatae, maiores. Consectetur enim fugiat
-          reiciendis dicta facilis, ipsa quis perferendis debitis voluptatibus
-          quibusdam reprehenderit unde eum nemo! Officia temporibus laborum
-          magnam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga
-          totam ducimus est molestiae tempore voluptas, iusto ut aliquam porro
-          ipsum, aliquid quos aut commodi nemo? Hic cum nesciunt repellendus
-          saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          Beatae, maiores. Consectetur enim fugiat reiciendis dicta facilis,
-          ipsa quis perferendis debitis voluptatibus quibusdam reprehenderit
-          unde eum nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor
-          sit amet consectetur adipisicing elit. Fuga totam ducimus est
-          molestiae tempore voluptas, iusto ut aliquam porro ipsum, aliquid quos
-          aut commodi nemo? Hic cum nesciunt repellendus saepe! Lorem ipsum
-          dolor sit amet consectetur adipisicing elit. Beatae, maiores.
-          Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor sit amet
-          consectetur adipisicing elit. Fuga totam ducimus est molestiae tempore
-          voluptas, iusto ut aliquam porro ipsum, aliquid quos aut commodi nemo?
-          Hic cum nesciunt repellendus saepe! Lorem ipsum dolor sit amet
-          consectetur adipisicing elit. Beatae, maiores. Consectetur enim fugiat
-          reiciendis dicta facilis, ipsa quis perferendis debitis voluptatibus
-          quibusdam reprehenderit unde eum nemo! Officia temporibus laborum
-          magnam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga
-          totam ducimus est molestiae tempore voluptas, iusto ut aliquam porro
-          ipsum, aliquid quos aut commodi nemo? Hic cum nesciunt repellendus
-          saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          Beatae, maiores. Consectetur enim fugiat reiciendis dicta facilis,
-          ipsa quis perferendis debitis voluptatibus quibusdam reprehenderit
-          unde eum nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor
-          sit amet consectetur adipisicing elit. Fuga totam ducimus est
-          molestiae tempore voluptas, iusto ut aliquam porro ipsum, aliquid quos
-          aut commodi nemo? Hic cum nesciunt repellendus saepe! Lorem ipsum
-          dolor sit amet consectetur adipisicing elit. Beatae, maiores.
-          Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor sit amet
-          consectetur adipisicing elit. Fuga totam ducimus est molestiae tempore
-          voluptas, iusto ut aliquam porro ipsum, aliquid quos aut commodi nemo?
-          Hic cum nesciunt repellendus saepe! Lorem ipsum dolor sit amet
-          consectetur adipisicing elit. Beatae, maiores. Consectetur enim fugiat
-          reiciendis dicta facilis, ipsa quis perferendis debitis voluptatibus
-          quibusdam reprehenderit unde eum nemo! Officia temporibus laborum
-          magnam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga
-          totam ducimus est molestiae tempore voluptas, iusto ut aliquam porro
-          ipsum, aliquid quos aut commodi nemo? Hic cum nesciunt repellendus
-          saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          Beatae, maiores. Consectetur enim fugiat reiciendis dicta facilis,
-          ipsa quis perferendis debitis voluptatibus quibusdam reprehenderit
-          unde eum nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor
-          sit amet consectetur adipisicing elit. Fuga totam ducimus est
-          molestiae tempore voluptas, iusto ut aliquam porro ipsum, aliquid quos
-          aut commodi nemo? Hic cum nesciunt repellendus saepe! Lorem ipsum
-          dolor sit amet consectetur adipisicing elit. Beatae, maiores.
-          Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor sit amet
-          consectetur adipisicing elit. Fuga totam ducimus est molestiae tempore
-          voluptas, iusto ut aliquam porro ipsum, aliquid quos aut commodi nemo?
-          Hic cum nesciunt repellendus saepe! Lorem ipsum dolor sit amet
-          consectetur adipisicing elit. Beatae, maiores. Consectetur enim fugiat
-          reiciendis dicta facilis, ipsa quis perferendis debitis voluptatibus
-          quibusdam reprehenderit unde eum nemo! Officia temporibus laborum
-          magnam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga
-          totam ducimus est molestiae tempore voluptas, iusto ut aliquam porro
-          ipsum, aliquid quos aut commodi nemo? Hic cum nesciunt repellendus
-          saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          Beatae, maiores. Consectetur enim fugiat reiciendis dicta facilis,
-          ipsa quis perferendis debitis voluptatibus quibusdam reprehenderit
-          unde eum nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor
-          sit amet consectetur adipisicing elit. Fuga totam ducimus est
-          molestiae tempore voluptas, iusto ut aliquam porro ipsum, aliquid quos
-          aut commodi nemo? Hic cum nesciunt repellendus saepe! Lorem ipsum
-          dolor sit amet consectetur adipisicing elit. Beatae, maiores.
-          Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor sit amet
-          consectetur adipisicing elit. Fuga totam ducimus est molestiae tempore
-          voluptas, iusto ut aliquam porro ipsum, aliquid quos aut commodi nemo?
-          Hic cum nesciunt repellendus saepe! Lorem ipsum dolor sit amet
-          consectetur adipisicing elit. Beatae, maiores. Consectetur enim fugiat
-          reiciendis dicta facilis, ipsa quis perferendis debitis voluptatibus
-          quibusdam reprehenderit unde eum nemo! Officia temporibus laborum
-          magnam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga
-          totam ducimus est molestiae tempore voluptas, iusto ut aliquam porro
-          ipsum, aliquid quos aut commodi nemo? Hic cum nesciunt repellendus
-          saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          Beatae, maiores. Consectetur enim fugiat reiciendis dicta facilis,
-          ipsa quis perferendis debitis voluptatibus quibusdam reprehenderit
-          unde eum nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor
-          sit amet consectetur adipisicing elit. Fuga totam ducimus est
-          molestiae tempore voluptas, iusto ut aliquam porro ipsum, aliquid quos
-          aut commodi nemo? Hic cum nesciunt repellendus saepe! Lorem ipsum
-          dolor sit amet consectetur adipisicing elit. Beatae, maiores.
-          Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor sit amet
-          consectetur adipisicing elit. Fuga totam ducimus est molestiae tempore
-          voluptas, iusto ut aliquam porro ipsum, aliquid quos aut commodi nemo?
-          Hic cum nesciunt repellendus saepe! Lorem ipsum dolor sit amet
-          consectetur adipisicing elit. Beatae, maiores. Consectetur enim fugiat
-          reiciendis dicta facilis, ipsa quis perferendis debitis voluptatibus
-          quibusdam reprehenderit unde eum nemo! Officia temporibus laborum
-          magnam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga
-          totam ducimus est molestiae tempore voluptas, iusto ut aliquam porro
-          ipsum, aliquid quos aut commodi nemo? Hic cum nesciunt repellendus
-          saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          Beatae, maiores. Consectetur enim fugiat reiciendis dicta facilis,
-          ipsa quis perferendis debitis voluptatibus quibusdam reprehenderit
-          unde eum nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor
-          sit amet consectetur adipisicing elit. Fuga totam ducimus est
-          molestiae tempore voluptas, iusto ut aliquam porro ipsum, aliquid quos
-          aut commodi nemo? Hic cum nesciunt repellendus saepe! Lorem ipsum
-          dolor sit amet consectetur adipisicing elit. Beatae, maiores.
-          Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor sit amet
-          consectetur adipisicing elit. Fuga totam ducimus est molestiae tempore
-          voluptas, iusto ut aliquam porro ipsum, aliquid quos aut commodi nemo?
-          Hic cum nesciunt repellendus saepe! Lorem ipsum dolor sit amet
-          consectetur adipisicing elit. Beatae, maiores. Consectetur enim fugiat
-          reiciendis dicta facilis, ipsa quis perferendis debitis voluptatibus
-          quibusdam reprehenderit unde eum nemo! Officia temporibus laborum
-          magnam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga
-          totam ducimus est molestiae tempore voluptas, iusto ut aliquam porro
-          ipsum, aliquid quos aut commodi nemo? Hic cum nesciunt repellendus
-          saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          Beatae, maiores. Consectetur enim fugiat reiciendis dicta facilis,
-          ipsa quis perferendis debitis voluptatibus quibusdam reprehenderit
-          unde eum nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor
-          sit amet consectetur adipisicing elit. Fuga totam ducimus est
-          molestiae tempore voluptas, iusto ut aliquam porro ipsum, aliquid quos
-          aut commodi nemo? Hic cum nesciunt repellendus saepe! Lorem ipsum
-          dolor sit amet consectetur adipisicing elit. Beatae, maiores.
-          Consectetur enim fugiat reiciendis dicta facilis, ipsa quis
-          perferendis debitis voluptatibus quibusdam reprehenderit unde eum
-          nemo! Officia temporibus laborum magnam. Lorem, ipsum dolor sit amet
-          consectetur adipisicing elit. Fuga totam ducimus est molestiae tempore
-          voluptas, iusto ut aliquam porro ipsum, aliquid quos aut commodi nemo?
-          Hic cum nesciunt repellendus saepe! Lorem ipsum dolor sit amet
-          consectetur adipisicing elit. Beatae, maiores. Consectetur enim fugiat
-          reiciendis dicta facilis, ipsa quis perferendis debitis voluptatibus
-          quibusdam reprehenderit unde eum nemo! Officia temporibus laborum
-          magnam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga
-          totam ducimus est molestiae tempore voluptas, iusto ut aliquam porro
-          ipsum, aliquid quos aut commodi nemo? Hic cum nesciunt repellendus
-          saepe!
-        </div>
-      </Flex>
+      <Events />
+
     </PageWrapper>
   );
 }

components/ui/internal/footer/index.tsx

@@ -41,7 +41,6 @@ export default function Footer() {
 
   const textopacity = 0.8;
   return (
-    <Flex px={"var(--global-spacing)"}>
       <Card>
         <Logo
           logoType={LogoType.White}
@@ -193,7 +192,6 @@ export default function Footer() {
           </Text>
         </Stack>
       </Card>
-    </Flex>
   );
 }