From d0042a187fd27c269ff23bc1f200cd1cb8050be0 Mon Sep 17 00:00:00 2001
From: MD Rehan <mdrehan4650@gmail.com>
Date: Wed, 30 Oct 2024 13:13:28 +0530
Subject: [PATCH] Added Events Page

---
 public/images/calender.svg |  8 ++++++++
 public/images/clock.svg    |  4 ++++
 public/images/edit.svg     |  4 ++++
 public/images/meet.svg     | 10 +++++++++
 public/images/vector.svg   |  4 ++++
 src/components/Event.jsx   | 42 ++++++++++++++++++++++++++++++++++++++
 src/pages/home/index.jsx   |  6 ++++--
 7 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 public/images/calender.svg
 create mode 100644 public/images/clock.svg
 create mode 100644 public/images/edit.svg
 create mode 100644 public/images/meet.svg
 create mode 100644 public/images/vector.svg
 create mode 100644 src/components/Event.jsx

diff --git a/public/images/calender.svg b/public/images/calender.svg
new file mode 100644
index 0000000..d6ba675
--- /dev/null
+++ b/public/images/calender.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 19V7H21.5V19C21.5 20.1 20.6 21 19.5 21H4.5C3.4 21 2.5 20.1 2.5 19Z" fill="#CFD8DC"/>
+<path d="M21.5 5V8H2.5V5C2.5 3.9 3.4 3 4.5 3H19.5C20.6 3 21.5 3.9 21.5 5Z" fill="#F44336"/>
+<path d="M16.5 6.5C17.3284 6.5 18 5.82843 18 5C18 4.17157 17.3284 3.5 16.5 3.5C15.6716 3.5 15 4.17157 15 5C15 5.82843 15.6716 6.5 16.5 6.5Z" fill="#B71C1C"/>
+<path d="M7.5 6.5C8.32843 6.5 9 5.82843 9 5C9 4.17157 8.32843 3.5 7.5 3.5C6.67157 3.5 6 4.17157 6 5C6 5.82843 6.67157 6.5 7.5 6.5Z" fill="#B71C1C"/>
+<path d="M16.5 1.5C15.95 1.5 15.5 1.95 15.5 2.5V5C15.5 5.55 15.95 6 16.5 6C17.05 6 17.5 5.55 17.5 5V2.5C17.5 1.95 17.05 1.5 16.5 1.5ZM7.5 1.5C6.95 1.5 6.5 1.95 6.5 2.5V5C6.5 5.55 6.95 6 7.5 6C8.05 6 8.5 5.55 8.5 5V2.5C8.5 1.95 8.05 1.5 7.5 1.5Z" fill="#B0BEC5"/>
+<path d="M6.5 10H8.5V12H6.5V10ZM9.5 10H11.5V12H9.5V10ZM12.5 10H14.5V12H12.5V10ZM15.5 10H17.5V12H15.5V10ZM6.5 13H8.5V15H6.5V13ZM9.5 13H11.5V15H9.5V13ZM12.5 13H14.5V15H12.5V13ZM15.5 13H17.5V15H15.5V13ZM6.5 16H8.5V18H6.5V16ZM9.5 16H11.5V18H9.5V16ZM12.5 16H14.5V18H12.5V16ZM15.5 16H17.5V18H15.5V16Z" fill="#90A4AE"/>
+</svg>
diff --git a/public/images/clock.svg b/public/images/clock.svg
new file mode 100644
index 0000000..de81cd3
--- /dev/null
+++ b/public/images/clock.svg
@@ -0,0 +1,4 @@
+<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.4265 27.155C21.0662 27.155 26.4487 21.7725 26.4487 15.1329C26.4487 8.49322 21.0662 3.11072 14.4265 3.11072C7.78686 3.11072 2.40435 8.49322 2.40435 15.1329C2.40435 21.7725 7.78686 27.155 14.4265 27.155Z" stroke="#606060" stroke-width="2.40443" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.0332 19.9416L15.1311 17.0394C14.6801 16.5886 14.4267 15.9772 14.4266 15.3395V7.91943" stroke="#606060" stroke-width="2.40443" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/images/edit.svg b/public/images/edit.svg
new file mode 100644
index 0000000..fe50a1a
--- /dev/null
+++ b/public/images/edit.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.474 5.40801L18.592 7.52501M17.836 3.54301L12.109 9.27001C11.8131 9.56551 11.6113 9.94199 11.529 10.352L11 13L13.648 12.47C14.058 12.388 14.434 12.187 14.73 11.891L20.457 6.16401C20.6291 5.99191 20.7656 5.7876 20.8588 5.56275C20.9519 5.33789 20.9998 5.09689 20.9998 4.85351C20.9998 4.61013 20.9519 4.36913 20.8588 4.14427C20.7656 3.91942 20.6291 3.71511 20.457 3.54301C20.2849 3.37091 20.0806 3.2344 19.8557 3.14126C19.6309 3.04812 19.3899 3.00018 19.1465 3.00018C18.9031 3.00018 18.6621 3.04812 18.4373 3.14126C18.2124 3.2344 18.0081 3.37091 17.836 3.54301V3.54301Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 15V18C19 18.5304 18.7893 19.0391 18.4142 19.4142C18.0391 19.7893 17.5304 20 17 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18V7C4 6.46957 4.21071 5.96086 4.58579 5.58579C4.96086 5.21071 5.46957 5 6 5H9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/images/meet.svg b/public/images/meet.svg
new file mode 100644
index 0000000..beed324
--- /dev/null
+++ b/public/images/meet.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_273_909)">
+<path d="M8.45867 4.81972L8.482 4.806L8.58933 4.74429C9.25626 4.37463 9.94859 4.0508 10.6613 3.77515C12.0567 3.238 13.9467 2.71229 16 2.71229C18.0533 2.71229 19.9433 3.238 21.341 3.77515C22.053 4.05079 22.7446 4.37462 23.4107 4.74429C23.4597 4.77172 23.4947 4.79 23.5157 4.806L23.539 4.81972H23.5413C23.8024 4.9753 24.1153 5.02436 24.4128 4.95637C24.7104 4.88837 24.9688 4.70874 25.1326 4.45608C25.2964 4.20342 25.3525 3.89789 25.2888 3.60516C25.2251 3.31242 25.0467 3.05585 24.792 2.89057H24.7897L24.785 2.886L24.7733 2.87915L24.7313 2.854C24.5131 2.72621 24.2913 2.60426 24.0663 2.48829C23.4586 2.17557 22.8339 1.89553 22.195 1.64943C20.6317 1.04372 18.4383 0.426575 16 0.426575C13.5593 0.426575 11.3683 1.04372 9.805 1.64943C8.98117 1.9673 8.1812 2.34156 7.411 2.76943C7.36328 2.79718 7.31584 2.82537 7.26867 2.854L7.22667 2.87686L7.215 2.886L7.21033 2.88829C6.94887 3.05045 6.76388 3.30771 6.69606 3.60349C6.62823 3.89926 6.68313 4.20931 6.84867 4.46543C7.01421 4.72156 7.27683 4.90277 7.57876 4.96921C7.8807 5.03565 8.19721 4.98188 8.45867 4.81972ZM6.66667 7.28372C5.42899 7.28372 4.242 7.76535 3.36683 8.62266C2.49167 9.47997 2 10.6427 2 11.8551V20.998C2 22.2104 2.49167 23.3732 3.36683 24.2305C4.242 25.0878 5.42899 25.5694 6.66667 25.5694H17.1667C18.4043 25.5694 19.5913 25.0878 20.4665 24.2305C21.3417 23.3732 21.8333 22.2104 21.8333 20.998V20.6826L28.2547 24.2757C28.4321 24.375 28.633 24.4269 28.8373 24.4262C29.0416 24.4255 29.2421 24.3723 29.4188 24.2719C29.5955 24.1714 29.7422 24.0273 29.8442 23.8539C29.9462 23.6805 29.9999 23.4839 30 23.2837V9.56943C29.9999 9.3693 29.9462 9.17269 29.8442 8.99927C29.7422 8.82586 29.5955 8.68172 29.4188 8.58129C29.2421 8.48085 29.0416 8.42763 28.8373 8.42695C28.633 8.42627 28.4321 8.47816 28.2547 8.57743L21.8333 12.1706V11.8551C21.8333 10.6427 21.3417 9.47997 20.4665 8.62266C19.5913 7.76535 18.4043 7.28372 17.1667 7.28372H6.66667ZM21.8333 14.8037L27.6667 11.5397V21.3134L21.8333 18.0494V14.8037ZM4.33333 11.8551C4.33333 11.2489 4.57917 10.6676 5.01675 10.2389C5.45434 9.81025 6.04783 9.56943 6.66667 9.56943H17.1667C17.7855 9.56943 18.379 9.81025 18.8166 10.2389C19.2542 10.6676 19.5 11.2489 19.5 11.8551V20.998C19.5 21.6042 19.2542 22.1856 18.8166 22.6142C18.379 23.0429 17.7855 23.2837 17.1667 23.2837H6.66667C6.04783 23.2837 5.45434 23.0429 5.01675 22.6142C4.57917 22.1856 4.33333 21.6042 4.33333 20.998V11.8551ZM8.461 28.0357L8.45867 28.0334C8.19765 27.8779 7.88474 27.8288 7.58718 27.8968C7.28963 27.9648 7.03118 28.1444 6.86738 28.3971C6.70358 28.6497 6.6475 28.9553 6.71119 29.248C6.77488 29.5407 6.95326 29.7973 7.208 29.9626H7.21033L7.215 29.9671L7.22667 29.974L7.26867 29.9991C7.30133 30.022 7.35033 30.0471 7.411 30.0837C7.53467 30.1523 7.70967 30.2506 7.93367 30.3671C8.37933 30.5957 9.01867 30.8997 9.805 31.2037C11.3683 31.8071 13.5617 32.4266 16 32.4266C18.4407 32.4266 20.6317 31.8094 22.195 31.2037C23.0188 30.8858 23.8188 30.5116 24.589 30.0837L24.7313 29.9991L24.7733 29.9763L24.785 29.9671L24.7897 29.9649H24.792C25.0535 29.8024 25.2383 29.5448 25.3059 29.2489C25.3735 28.9529 25.3183 28.6427 25.1525 28.3866C24.9867 28.1305 24.7237 27.9494 24.4216 27.8831C24.1194 27.8169 23.8028 27.871 23.5413 28.0334L23.518 28.0494L23.4107 28.1089C22.7438 28.4786 22.0514 28.8024 21.3387 29.078C19.9433 29.6151 18.0533 30.1409 16 30.1409C13.9467 30.1409 12.0567 29.6151 10.659 29.078C9.94708 28.8022 9.25554 28.4784 8.58933 28.1089C8.55415 28.0886 8.51914 28.068 8.48433 28.0471L8.461 28.0357Z" fill="#606060"/>
+</g>
+<defs>
+<clipPath id="clip0_273_909">
+<rect width="32" height="32" fill="white" transform="translate(0 0.426575)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/vector.svg b/public/images/vector.svg
new file mode 100644
index 0000000..2d3af67
--- /dev/null
+++ b/public/images/vector.svg
@@ -0,0 +1,4 @@
+<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.6399 5.66205H7.21328C4.55742 5.66205 2.40441 7.81505 2.40441 10.4709V22.4931C2.40441 25.1489 4.55742 27.3019 7.21328 27.3019H21.6399C24.2957 27.3019 26.4487 25.1489 26.4487 22.4931V10.4709C26.4487 7.81505 24.2957 5.66205 21.6399 5.66205Z" stroke="#606060" stroke-width="2.40443" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.61765 3.25763V8.06649M19.2354 3.25763V8.06649M2.40435 12.8754H26.4487" stroke="#606060" stroke-width="2.40443" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/Event.jsx b/src/components/Event.jsx
new file mode 100644
index 0000000..b5f7024
--- /dev/null
+++ b/src/components/Event.jsx
@@ -0,0 +1,42 @@
+// import event from "./../../public/images/event.png"
+
+export function EventPage() {
+  return (
+    <div className="w-full h-[80vh] bg-[#f5f5f5] flex flex-col items-center justify-center gap-10">
+      <div className="w-[60%] h-[70%] bg-white shadow-md rounded-3xl flex items-center justify-center gap-14">
+        <img src="./images/event.png" className="w-auto h-[70%]" />
+        <div className=" flex flex-col items-start justify-center h-full w-[40%] gap-4">
+          <div className="space-y-1">
+            <h3 className="text-[#41B883] font-bold text-md flex items-center justify-start gap-1">
+              <img src="./images/calender.svg" />
+              Acara Mendatang
+            </h3>
+            <h1 className=" font-extrabold text-2xl">
+              Loteng Dev Meetup #2: Prepare for Hacktoberfest
+            </h1>
+          </div>
+          <div className="space-y-1">
+            <h3 className=" text-[#606060] text-sm flex items-center justify-start gap-1">
+              <img src="./images/meet.svg" className="size-[1.4rem]" />
+              Online Google Meet
+            </h3>
+            <h3 className=" text-[#606060] text-sm flex items-center justify-start gap-1">
+              <img src="./images/vector.svg" className="size-[1.4rem]" />
+              Minggu, 17 Juli 2022
+            </h3>
+            <h3 className=" text-[#606060] text-sm flex items-center justify-start gap-1">
+              <img src="./images/clock.svg" className="size-[1.4rem]" />
+              20.00 WITA ~ Selesai
+            </h3>
+          </div>
+          <button className="bg-[#007BFF] flex items-center justify-center gap-1 text-xs text-white px-4 py-2 rounded-sm"
+            onClick={() => window.open("https://github.com/lotengdev/MeetupTopics/issues", "__blank")}
+          >
+            <img src="./images/edit.svg" className="size-[1.2rem]" />
+            Ikut Acara
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 6dacfb1..7cc72bf 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import TelegramIcon from '@/assets/icons/telegram.svg';
 import GithubIcon from '@/assets/icons/github.svg';
+import { EventPage } from '../../components/Event';
 
 export function HomePage() {
     const [text, setText] = useState('');
@@ -22,8 +23,8 @@ export function HomePage() {
     }, []);
 
     return (
-        <div className="flex justify-center items-center h-[80vh]" id="home">
-            <div className="lg:flex justify-center p-[32px]">
+        <div className="flex flex-col justify-center items-center h-auto" id="home">
+            <div className="lg:flex justify-center p-[32px] h-[90vh] items-center">
                 <img src="./images/rafiki.png" className="lg:w-[30%] lg:h-[30%]" />
                 <div className="lg:w-[50%] lg:mt-0 mt-[25px]">
                     <div className="lg:mb-[16px] mb-[14px]">
@@ -46,6 +47,7 @@ export function HomePage() {
                     </div>
                 </div>
             </div>
+            <EventPage />
         </div>
     );
 }