From 05a441abbaa5ec302ed7bf92130b41f652ec3eff Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 19 Apr 2024 19:48:28 +0530
Subject: [PATCH] enent ecostytem page

---
 src/components/Card/HappenCard.jsx           |   3 +-
 src/components/Community/Happen.jsx          |   2 +-
 src/components/EventsPage/EventsSec.jsx      |  82 ++++++++++++
 src/components/EventsPage/NewestEvents.jsx   | 117 +++++++++++++++++
 src/components/EventsPage/UpcomingEvents.jsx | 128 +++++++++++++++++++
 src/pages/Events.jsx                         |  16 +++
 src/routes/_routes.jsx                       |   5 +
 7 files changed, 351 insertions(+), 2 deletions(-)
 create mode 100644 src/components/EventsPage/EventsSec.jsx
 create mode 100644 src/components/EventsPage/NewestEvents.jsx
 create mode 100644 src/components/EventsPage/UpcomingEvents.jsx
 create mode 100644 src/pages/Events.jsx

diff --git a/src/components/Card/HappenCard.jsx b/src/components/Card/HappenCard.jsx
index e0e5a3a..3830e55 100644
--- a/src/components/Card/HappenCard.jsx
+++ b/src/components/Card/HappenCard.jsx
@@ -48,7 +48,7 @@ const HappenCard = ({ key, date, text, para, month, curentDate }) => {
           </Text>
           <Text
             color={"#fff"}
-            fontSize={"20px"}
+            fontSize={"18px"}
             marginBottom={"10px"}
             sx={{
               "@media (max-width: 500px)": {
@@ -61,6 +61,7 @@ const HappenCard = ({ key, date, text, para, month, curentDate }) => {
           </Text>
           <Text
             color={"#E1E1E1"}
+            fontSize={"14px"}
             sx={{
               "@media (max-width: 500px)": {
                 fontSize: "14px",
diff --git a/src/components/Community/Happen.jsx b/src/components/Community/Happen.jsx
index 4baa60a..39fc63d 100644
--- a/src/components/Community/Happen.jsx
+++ b/src/components/Community/Happen.jsx
@@ -41,7 +41,7 @@ const Content = {
 };
 
 const Happen = () => {
-  return (
+  return ( 
     <Box
       // height={"100vh"}
       background={"#000"}
diff --git a/src/components/EventsPage/EventsSec.jsx b/src/components/EventsPage/EventsSec.jsx
new file mode 100644
index 0000000..60fb62f
--- /dev/null
+++ b/src/components/EventsPage/EventsSec.jsx
@@ -0,0 +1,82 @@
+import { Badge, Box, Container, Text } from "@chakra-ui/react";
+
+const EventsSec = () => {
+  return (
+    <Box
+      height={"80vh"}
+      backgroundColor={"#000"}
+      display={"grid"}
+      alignContent={"center"}
+      sx={{
+        "@media (max-width: 1024px)": {
+          height: "70vh",
+        },
+        "@media (max-width: 600px)": {
+          height: "400px",
+        },
+      }}
+    >
+      <Container
+        maxW="container.xl"
+        textAlign={"left"}
+        marginTop={"2rem"}
+        paddingLeft={"3.5rem"}
+        sx={{
+          "@media (max-width: 600px)": {
+            paddingLeft: "1rem",
+          },
+        }}
+      >
+        <Text
+          as={"h2"}
+          fontWeight={700}
+          fontSize={"52px"}
+          color={"#fff"}
+          lineHeight={"62px"}
+          letterSpacing={"1px"}
+          sx={{
+            "@media (max-width: 996px)": {
+              fontSize: "46px",
+            },
+            "@media (max-width: 600px)": {
+              fontSize: "40px",
+              marginBottom: "0rem",
+              lineHeight: "54px",
+            },
+          }}
+        >
+          Events
+        </Text>
+        <Box
+          marginTop={"1.5rem"}
+          sx={{
+            "@media (max-width: 500px)": {
+              width: "100%",
+            },
+          }}
+        >
+          <Text
+            color={"#fff"}
+            fontSize={"20px"}
+            fontWeight={"400"}
+            lineHeight={"37.5px"}
+            fontFamily={"Poppins"}
+            // textTransform={"capitalize"}
+            sx={{
+              "@media (max-width: 600px)": {
+                fontSize: "14px",
+                lineHeight: "28px",
+              },
+            }}
+          >
+            Stay up to date on what’s happening with Rubix,
+            <br /> learn about upcoming events and access
+            <br /> important resources.
+          </Text>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default EventsSec;
diff --git a/src/components/EventsPage/NewestEvents.jsx b/src/components/EventsPage/NewestEvents.jsx
new file mode 100644
index 0000000..908ecfd
--- /dev/null
+++ b/src/components/EventsPage/NewestEvents.jsx
@@ -0,0 +1,117 @@
+import { Badge, Box, Container, Image, Text } from "@chakra-ui/react";
+import pic from "../../assets/images/eventsPic.png";
+
+const NewestEvent = () => {
+  return (
+    <Box backgroundColor={"#000"}>
+      <Container
+        maxW="container.xl"
+        textAlign={"left"}
+        padding={"0rem 3.5rem"}
+        sx={{
+          "@media (max-width: 600px)": {
+            padding: "1rem",
+          },
+        }}
+      >
+        <Box
+          backgroundColor={"#101015"}
+          padding={"2rem"}
+          borderRadius={"5px"}
+          sx={{
+            "@media (max-width: 600px)": {
+              padding: "1rem",
+            },
+          }}
+        >
+          <Text
+            paddingBottom={"1rem"}
+            color={"#fff"}
+            fontSize={"18px"}
+            fontWeight={"500"}
+          >
+            Newest Post
+          </Text>
+          <Box
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"start"}
+            gap={"2rem"}
+            position={"relative"}
+            sx={{
+              "@media (max-width: 500px)": {
+                display: "block",
+              },
+            }}
+          >
+            <Text
+              color={"#fff"}
+              backgroundColor={"#DE858E"}
+              position={"absolute"}
+              top={"0"}
+              left={"17"}
+              padding={"6px 13px"}
+              textAlign={"center"}
+              sx={{
+                "@media (max-width: 500px)": {
+                  fontSize: "14px",
+                },
+              }}
+            >
+              May <br /> 04
+            </Text>
+            <Text>
+              <Image src={pic} />
+            </Text>
+            <Box flex={"1"}>
+              <Badge
+                backgroundColor={"transparent"}
+                color={"#fff"}
+                fontWeight={"500"}
+                fontFamily={"Poppins"}
+                fontSize={"14px"}
+                marginBottom={"1rem"}
+                sx={{
+                  "@media (max-width: 500px)": {
+                    marginTop: "2rem",
+                  },
+                }}
+              >
+                Events
+              </Badge>
+              <Text
+                as={"h2"}
+                marginBottom={"1rem"}
+                color={"#fff"}
+                fontSize={"25px"}
+                sx={{
+                  "@media (max-width: 500px)": {
+                    fontSize: "20px",
+                  },
+                }}
+              >
+                The Proofchain Technical Whitepaper
+              </Text>
+              <Text className="rubix-text-small" >
+                How do we align digital asset markets with UN Sustainable
+                Development Goals? Is the blockchain the missing piece to
+                bringing the world back on track to a two degree temperature
+                rise?
+              </Text>
+              <Text
+                color={"#A4A4A4"}
+                fontWeight={"300"}
+                fontSize={"14px"}
+                marginTop={"18px"}
+              >
+                Sunday, 10 May 2024
+              </Text>
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default NewestEvent;
diff --git a/src/components/EventsPage/UpcomingEvents.jsx b/src/components/EventsPage/UpcomingEvents.jsx
new file mode 100644
index 0000000..4a54416
--- /dev/null
+++ b/src/components/EventsPage/UpcomingEvents.jsx
@@ -0,0 +1,128 @@
+/* eslint-disable no-unused-vars */
+import {
+  Box,
+  Container,
+  Text,
+  Image,
+  Button,
+  SimpleGrid,
+} from "@chakra-ui/react";
+import HappenCard from "../Card/HappenCard";
+
+const Latest = [
+  {
+    id: 1,
+    date: `Sunday, 10 May 2024`,
+    text: `Financial Times Crypto & Digital Assets Summit Panel`,
+    para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
+    curentDate: "10",
+    month: "MAY",
+  },
+  {
+    id: 2,
+    date: `Sunday, 15 Jan 2024`,
+    text: `Financial Times Crypto & Digital Assets Summit Panel`,
+    para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
+    curentDate: "10",
+    month: "MAY",
+  },
+  {
+    id: 3,
+    date: `Sunday, 14 Feb 2024`,
+    text: `Financial Times Crypto & Digital Assets Summit Panel`,
+    para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
+    curentDate: "10",
+    month: "MAY",
+  },
+];
+
+const Content = {
+  heading: `Upcoming Events`,
+};
+
+const UpcomingEvents = () => {
+  return (
+    <Box
+      // height={"100vh"}
+      background={"#000"}
+      backgroundSize={"cover"}
+      backgroundRepeat={"no-repeat"}
+      paddingTop={"2rem"}
+      sx={{
+        "@media (max-width: 500px)": {
+          paddingTop: "0px",
+        },
+      }}
+    >
+      <Container
+        maxW={"container.xl"}
+        padding={"0 5rem"}
+        paddingBottom={"2rem"}
+        sx={{
+          "@media (max-width: 1024px)": {
+            padding: "3rem",
+          },
+          "@media (max-width: 500px)": {
+            padding: "1rem",
+          },
+        }}
+      >
+        <Text
+          as={"h2"}
+          paddingTop={"2rem"}
+          paddingBottom={"2rem"}
+          fontWeight={700}
+          fontSize={"26px"}
+          textTransform={"capitalize"}
+          color={"#fff"}
+          sx={{
+            "@media (max-width: 500px)": {
+              fontSize: "22px",
+              fontWeight: "400",
+            },
+          }}
+        >
+          {Content.heading}
+        </Text>
+        <Box
+          paddingBottom={"2rem"}
+          // height={"50vh"}
+          sx={{
+            "@media (max-width: 500px)": {
+              paddingLeft: "0rem",
+            },
+          }}
+        >
+          <Box>
+            <SimpleGrid
+              spacing={5}
+              templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
+              sx={{
+                "@media (max-width: 500px)": {
+                  display: "flex",
+                  overflowX: "scroll",
+                  "&::-webkit-scrollbar": {
+                    width: "0px",
+                  },
+                },
+              }}
+            >
+              {Latest.map((item) => (
+                <HappenCard
+                  key={item.id}
+                  date={item.date}
+                  text={item.text}
+                  para={item.para}
+                  curentDate={item.curentDate}
+                  month={item.month}
+                />
+              ))}
+            </SimpleGrid>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default UpcomingEvents;
diff --git a/src/pages/Events.jsx b/src/pages/Events.jsx
new file mode 100644
index 0000000..e5dc203
--- /dev/null
+++ b/src/pages/Events.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import EventsSec from "../components/EventsPage/EventsSec";
+import NewestEvent from "../components/EventsPage/NewestEvents";
+import UpcomingEvents from "../components/EventsPage/UpcomingEvents";
+
+const Events = () => {
+  return (
+    <>
+      <EventsSec />
+      <NewestEvent />
+      <UpcomingEvents />
+    </>
+  );
+};
+
+export default Events;
diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx
index d9654d0..1224605 100644
--- a/src/routes/_routes.jsx
+++ b/src/routes/_routes.jsx
@@ -24,6 +24,7 @@ import Form from "../components/Contact/Form";
 import UseCase from "../components/UseCase/UseCase";
 import ResourcesPage from "../pages/ResourcesPage";
 import Ecosystem from "../pages/Ecosystem";
+import Events from "../pages/Events";
 
 export const route = [
   {
@@ -83,6 +84,10 @@ export const route = [
     path: "ecosystem",
     element: <Ecosystem />,
   },
+  {
+    path: "events",
+    element: <Events />,
+  },
   {
     path: "*",
     element: <NotFound />,