From b22998fd5b44f86847da28b5dab9190639ccf40c Mon Sep 17 00:00:00 2001
From: amir-kedis <amir.kedis@gmail.com>
Date: Sat, 23 Dec 2023 10:39:10 +0200
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=A6=B4=20feat:=20landing=20page=20mar?=
 =?UTF-8?q?kup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/package.json                           |  2 +-
 .../assets/styles/components/FancyBlobs.scss  |  9 ++-
 .../components/landingpage/LandingPage.jsx    | 78 ++++++++++++++++---
 3 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/client/package.json b/client/package.json
index c5c6a20a..459e6d93 100644
--- a/client/package.json
+++ b/client/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
diff --git a/client/src/assets/styles/components/FancyBlobs.scss b/client/src/assets/styles/components/FancyBlobs.scss
index 7d2054bc..01000dad 100644
--- a/client/src/assets/styles/components/FancyBlobs.scss
+++ b/client/src/assets/styles/components/FancyBlobs.scss
@@ -6,6 +6,7 @@
   top: 20vh;
   left: 0;
   z-index: -1;
+  --animation-duration: 5s;
 
   > * {
     position: absolute;
@@ -18,7 +19,7 @@
     fill: linear-gradient(82deg, #8900c9 38.7%, #fcf 76.51%);
     filter: blur(150px);
     top: -167px;
-    animation: BlobMove1 10s ease-in-out infinite forwards;
+    animation: BlobMove1 var(--animation-duration) ease-in-out infinite forwards;
   }
 
   .Blob-2 {
@@ -26,7 +27,7 @@
     filter: blur(125px);
     top: 66px;
     left: -71px;
-    animation: BlobMove2 10s ease-in-out infinite forwards;
+    animation: BlobMove2 var(--animation-duration) ease-in-out infinite forwards;
   }
 
   .Blob-3 {
@@ -37,7 +38,7 @@
     filter: blur(150px);
     top: 460px;
     left: 0;
-    animation: BlobMove3 10s ease-in-out infinite forwards;
+    animation: BlobMove3 var(--animation-duration) ease-in-out infinite forwards;
   }
 
   .Blob-4 {
@@ -48,7 +49,7 @@
     filter: blur(150px);
     top: 503px;
     left: 150px;
-    animation: BlobMove4 10s ease-in-out infinite forwards;
+    animation: BlobMove4 var(--animation-duration) ease-in-out infinite forwards;
   }
 }
 
diff --git a/client/src/components/landingpage/LandingPage.jsx b/client/src/components/landingpage/LandingPage.jsx
index 478f5f19..a51bd0c7 100644
--- a/client/src/components/landingpage/LandingPage.jsx
+++ b/client/src/components/landingpage/LandingPage.jsx
@@ -4,18 +4,78 @@ import Footer from "../common/Footer";
 
 import FancyBlobs from "./FancyBlobs";
 
+import {
+  FolderIcon,
+  AcademicCapIcon,
+  PresentationChartLineIcon,
+  PencilSquareIcon,
+  BanknotesIcon,
+  FlagIcon,
+  BellAlertIcon,
+} from "@heroicons/react/24/solid";
+
+const features = [
+  {
+    icon: <FolderIcon />,
+    text: "إدارة الغياب والاشتراك الاسبوعي",
+  },
+  {
+    icon: <AcademicCapIcon />,
+    text: "تقييم الأفراد ووضع النتائج",
+  },
+  {
+    icon: <PresentationChartLineIcon />,
+    text: "وضع الاحصاءيات والتقارير",
+  },
+  {
+    icon: <PencilSquareIcon />,
+    text: "تسجيل المواضيع والانشطة المتنوعة",
+  },
+  {
+    icon: <BanknotesIcon />,
+    text: "إدارة الماليات والخزنة",
+  },
+  {
+    icon: <FlagIcon />,
+    text: "إنشاء التقارير وتسجيل مجالس الشرف",
+  },
+  {
+    icon: <BellAlertIcon />,
+    text: "إرسال التنبيهات والاشعارات للقادة",
+  },
+];
+
 export default function LandingPage() {
   return (
     <>
-      <Nav showIcons={true} />
-      <FancyBlobs />
-      <Button className="Button--primary" linkTo="/login">
-        تسجيل الدخول
-      </Button>
-      <Button className="Button--dark" linkTo="/signUp">
-        إنشاء حساب
-      </Button>
-      <Footer />
+      <Nav showIcons={false} />
+      <header className="hero">
+        <div className="container">
+          <h1>نظام إدارة الكشافة الحديث</h1>
+          <p>
+            نقدم حلول لكل مشاكل اداريات المجموعات من تسجيل الغياب الاشتراكات
+            المواضيع التقييم وغيرهم من الامور.
+          </p>
+          <Button className="Button--primary" linkTo="/login">
+            تسجيل الدخول
+          </Button>
+          <Button className="Button--dark" linkTo="/signUp">
+            إنشاء حساب
+          </Button>
+        </div>
+      </header>
+      <section className="features">
+        <h2 className="features__title">مميزات</h2>
+        {features.map((feature, index) => (
+          <div className="feature" key={index}>
+            <div className="icon">{feature.icon}</div>
+            <p>{feature.text}</p>
+          </div>
+        ))}
+
+        <FancyBlobs />
+        <Footer />
+      </section>
     </>
   );
 }

From 3228b93818459ebf79a068e2c355519cf8a2ba71 Mon Sep 17 00:00:00 2001
From: amir-kedis <amir.kedis@gmail.com>
Date: Sat, 23 Dec 2023 11:02:54 +0200
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=92=85=20feat:=20landing=20page=20sty?=
 =?UTF-8?q?le?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/styles/components/FancyBlobs.scss  |  2 +-
 .../components/landingpage/LandingPage.jsx    | 20 +++---
 .../components/landingpage/LandingPage.scss   | 72 +++++++++++++++++++
 3 files changed, 85 insertions(+), 9 deletions(-)
 create mode 100644 client/src/components/landingpage/LandingPage.scss

diff --git a/client/src/assets/styles/components/FancyBlobs.scss b/client/src/assets/styles/components/FancyBlobs.scss
index 01000dad..5f7eb4cf 100644
--- a/client/src/assets/styles/components/FancyBlobs.scss
+++ b/client/src/assets/styles/components/FancyBlobs.scss
@@ -6,7 +6,7 @@
   top: 20vh;
   left: 0;
   z-index: -1;
-  --animation-duration: 5s;
+  --animation-duration: 8s;
 
   > * {
     position: absolute;
diff --git a/client/src/components/landingpage/LandingPage.jsx b/client/src/components/landingpage/LandingPage.jsx
index a51bd0c7..0419dfba 100644
--- a/client/src/components/landingpage/LandingPage.jsx
+++ b/client/src/components/landingpage/LandingPage.jsx
@@ -4,6 +4,8 @@ import Footer from "../common/Footer";
 
 import FancyBlobs from "./FancyBlobs";
 
+import "./LandingPage.scss";
+
 import {
   FolderIcon,
   AcademicCapIcon,
@@ -47,7 +49,7 @@ const features = [
 
 export default function LandingPage() {
   return (
-    <>
+    <div className="landing_page">
       <Nav showIcons={false} />
       <header className="hero">
         <div className="container">
@@ -56,12 +58,14 @@ export default function LandingPage() {
             نقدم حلول لكل مشاكل اداريات المجموعات من تسجيل الغياب الاشتراكات
             المواضيع التقييم وغيرهم من الامور.
           </p>
-          <Button className="Button--primary" linkTo="/login">
-            تسجيل الدخول
-          </Button>
-          <Button className="Button--dark" linkTo="/signUp">
-            إنشاء حساب
-          </Button>
+          <div className="btn__container">
+            <Button className="Button--primary" linkTo="/login">
+              تسجيل الدخول
+            </Button>
+            <Button className="Button--dark" linkTo="/signUp">
+              إنشاء حساب
+            </Button>
+          </div>
         </div>
       </header>
       <section className="features">
@@ -76,6 +80,6 @@ export default function LandingPage() {
         <FancyBlobs />
         <Footer />
       </section>
-    </>
+    </div>
   );
 }
diff --git a/client/src/components/landingpage/LandingPage.scss b/client/src/components/landingpage/LandingPage.scss
new file mode 100644
index 00000000..f7d2be7d
--- /dev/null
+++ b/client/src/components/landingpage/LandingPage.scss
@@ -0,0 +1,72 @@
+.landing_page {
+  --icon-size: 32px;
+
+  .hero {
+    padding-block: 60px;
+
+    h1 {
+      text-align: center;
+      line-height: 1.2;
+      margin-bottom: 30px;
+    }
+
+    p {
+      text-align: center;
+      margin-bottom: 30px;
+      padding-inline: 5px;
+      line-height: 1.5;
+    }
+    .btn__container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 20px;
+
+      > * {
+        min-width: 70%;
+      }
+    }
+  }
+
+  .features {
+    padding-block: 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 60px;
+
+    .feature {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 20px;
+      position: relative;
+
+      &:nth-child(even)::before {
+        content: "";
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-color: var(--primary-600);
+        z-index: -1;
+        border-radius: 50%;
+        filter: blur(70px);
+      }
+
+      .icon {
+        color: var(--primary-100);
+        > * {
+          width: var(--icon-size);
+          height: var(--icon-size);
+        }
+      }
+
+      p {
+        max-width: 80%;
+        text-align: center;
+      }
+    }
+  }
+}

From 91d1148ec7fecaef12d7a52e047280e0c43dc56e Mon Sep 17 00:00:00 2001
From: amir-kedis <amir.kedis@gmail.com>
Date: Sat, 23 Dec 2023 11:08:31 +0200
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=92=85=20fix:=20error=20with=20footer?=
 =?UTF-8?q?=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/assets/styles/components/Footer.scss   | 7 +++++++
 client/src/components/landingpage/LandingPage.jsx | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/src/assets/styles/components/Footer.scss b/client/src/assets/styles/components/Footer.scss
index 824625cf..37f62e3b 100644
--- a/client/src/assets/styles/components/Footer.scss
+++ b/client/src/assets/styles/components/Footer.scss
@@ -1,8 +1,14 @@
 .Footer {
   padding: 2rem 20px;
+  margin-bottom: 0;
   text-align: center;
   position: relative;
   box-sizing: content-box;
+  margin-bottom: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
 
   &::before {
     content: "";
@@ -23,6 +29,7 @@
   }
 
   a {
+    border-radius: 5px;
     padding: 5px;
     background-color: var(--primary-50);
     color: var(--grey-900);
diff --git a/client/src/components/landingpage/LandingPage.jsx b/client/src/components/landingpage/LandingPage.jsx
index 0419dfba..22835a5d 100644
--- a/client/src/components/landingpage/LandingPage.jsx
+++ b/client/src/components/landingpage/LandingPage.jsx
@@ -78,8 +78,8 @@ export default function LandingPage() {
         ))}
 
         <FancyBlobs />
-        <Footer />
       </section>
+      <Footer />
     </div>
   );
 }

From 60c8480a7358a06618d82bab8377fe30664cb74f Mon Sep 17 00:00:00 2001
From: amir-kedis <amir.kedis@gmail.com>
Date: Sat, 23 Dec 2023 11:10:46 +0200
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=92=85=20fix:=20small=20error=20in=20?=
 =?UTF-8?q?fancy=20blobs=20movement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/assets/styles/components/FancyBlobs.scss | 3 ++-
 client/src/assets/styles/global/global.scss         | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/assets/styles/components/FancyBlobs.scss b/client/src/assets/styles/components/FancyBlobs.scss
index 5f7eb4cf..5ebf7ded 100644
--- a/client/src/assets/styles/components/FancyBlobs.scss
+++ b/client/src/assets/styles/components/FancyBlobs.scss
@@ -7,6 +7,7 @@
   left: 0;
   z-index: -1;
   --animation-duration: 8s;
+  --max-distance: 300px;
 
   > * {
     position: absolute;
@@ -106,7 +107,7 @@
     transform: translate(0, 50px);
   }
   75% {
-    transform: translate(-100px, 0);
+    transform: translate(-var(--max-distance), 0);
   }
   100% {
     transform: translate(0, 0);
diff --git a/client/src/assets/styles/global/global.scss b/client/src/assets/styles/global/global.scss
index 7fee132f..c13b63fc 100644
--- a/client/src/assets/styles/global/global.scss
+++ b/client/src/assets/styles/global/global.scss
@@ -12,6 +12,7 @@ body {
   font-family: var(--font-primary);
   background-color: var(--bg);
   color: var(--grey-50);
+  overflow-x: hidden;
 }
 
 a {