Merge pull request #6 from CMP26Projects/footer-and-buttons

Footer and buttons
CMP26Projects · Dec 16, 2023 · 748d6a7 · 748d6a7
2 parents c9137e2 + 5bf7d30
commit 748d6a7
Show file tree

Hide file tree

Showing 8 changed files with 333 additions and 0 deletions.
diff --git a/client/src/assets/images/github-logo.svg b/client/src/assets/images/github-logo.svg
diff --git a/client/src/assets/styles/components/Button.scss b/client/src/assets/styles/components/Button.scss
@@ -0,0 +1,24 @@
+.Button {
+  outline: none;
+  border: none;
+  padding: 12px 20px;
+  border-radius: 6px;
+
+  a {
+    color: inherit;
+    font-size: 19px;
+    font-weight: 500;
+  }
+
+  &--primary {
+    background-color: var(--primary-100);
+    color: var(--grey-900);
+  }
+
+  &--dark {
+    background-color: var(--primary-900);
+    color: var(--grey-50);
+  }
+
+  // TODO: Add more button styles and maybe sizes
+}
diff --git a/client/src/assets/styles/components/FancyBlobs.scss b/client/src/assets/styles/components/FancyBlobs.scss
@@ -0,0 +1,113 @@
+.FancyBlobs {
+  width: 100vw;
+  height: 120vh;
+  overflow-x: clip;
+  position: absolute;
+  top: 20vh;
+  left: 0;
+  z-index: -1;
+
+  > * {
+    position: absolute;
+    bottom: 0;
+    transition: all 0.5s ease-in-out;
+  }
+
+  .Blob-1 {
+    transform: rotate(11.588deg);
+    fill: linear-gradient(82deg, #8900c9 38.7%, #fcf 76.51%);
+    filter: blur(150px);
+    top: -167px;
+    animation: BlobMove1 10s ease-in-out infinite forwards;
+  }
+
+  .Blob-2 {
+    fill: #ff29a8;
+    filter: blur(125px);
+    top: 66px;
+    left: -71px;
+    animation: BlobMove2 10s ease-in-out infinite forwards;
+  }
+
+  .Blob-3 {
+    width: 292.12px;
+    height: 286.919px;
+    border-radius: 292.12px;
+    background: #ff4473;
+    filter: blur(150px);
+    top: 460px;
+    left: 0;
+    animation: BlobMove3 10s ease-in-out infinite forwards;
+  }
+
+  .Blob-4 {
+    width: 420.837px;
+    height: 293.732px;
+    border-radius: 420.837px;
+    background: #fb0;
+    filter: blur(150px);
+    top: 503px;
+    left: 150px;
+    animation: BlobMove4 10s ease-in-out infinite forwards;
+  }
+}
+
+@keyframes BlobMove1 {
+  0% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(0, 50px);
+  }
+  75% {
+    transform: translate(100px, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes BlobMove2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(0, 50px);
+  }
+  75% {
+    transform: translate(-100px, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes BlobMove3 {
+  0% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(0, 50px);
+  }
+  75% {
+    transform: translate(100px, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes BlobMove4 {
+  0% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(0, 50px);
+  }
+  75% {
+    transform: translate(-100px, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
diff --git a/client/src/assets/styles/components/Footer.scss b/client/src/assets/styles/components/Footer.scss
@@ -0,0 +1,35 @@
+.Footer {
+  padding: 2rem 20px;
+  text-align: center;
+  position: relative;
+  box-sizing: content-box;
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #150a25;
+    z-index: -1;
+    filter: blur(100px);
+  }
+
+  p {
+    color: var(--grey-400, #9ca3af);
+    line-height: normal;
+  }
+
+  a {
+    padding: 5px;
+    background-color: var(--primary-50);
+    color: var(--grey-900);
+    font-size: 13.33px;
+    font-weight: 700;
+    display: inline-flex;
+    gap: 5px;
+    align-items: center;
+  }
+}
diff --git a/client/src/components/common/Button.jsx b/client/src/components/common/Button.jsx
@@ -0,0 +1,21 @@
+import { Link } from "react-router-dom";
+import { PropTypes } from "prop-types";
+
+// Styles
+import "../../assets/styles/components/Button.scss";
+
+export default function Button(props) {
+  const { children, className, linkTo, ...rest } = props;
+
+  return (
+    <button className={`Button ${className}`} {...rest}>
+      {linkTo ? <Link to={linkTo}>{children}</Link> : <>{children}</>}
+    </button>
+  );
+}
+
+Button.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  linkTo: PropTypes.string,
+};
diff --git a/client/src/components/common/Footer.jsx b/client/src/components/common/Footer.jsx
@@ -0,0 +1,25 @@
+// style
+import "../../assets/styles/components/Footer.scss";
+
+// GitHub icon
+import GitHubLogo from "../../assets/images/github-logo.svg";
+
+export default function Footer() {
+  return (
+    <footer className="Footer">
+      <p>
+        أعمال التصميم والتطوير تمت بواسطة فريق من طلاب هندسة القاهرة قسم حاسبات.
+        للمزيد من المعلومات
+      </p>
+
+      <a
+        target="_blank"
+        rel="noreferrer"
+        href="https://github.com/CMP26Projects/ScoutManagementSystem"
+      >
+        <img src={GitHubLogo} alt="github logo" />
+        <span>github</span>
+      </a>
+    </footer>
+  );
+}
diff --git a/client/src/components/landingpage/FancyBlobs.jsx b/client/src/components/landingpage/FancyBlobs.jsx
@@ -0,0 +1,100 @@
+import "./../../assets/styles/components/FancyBlobs.scss";
+
+export default function FancyBlobs() {
+  return (
+    <div className="FancyBlobs">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="360"
+        height="882"
+        viewBox="0 0 360 882"
+        fill="none"
+        className="Blob-1"
+      >
+        <g filter="url(#filter0_f_71_1543)">
+          <path
+            d="M28.9326 444.67C60.0433 380.541 123.206 346.94 204.633 328.13C304.305 305.105 556.184 268.938 604.43 352.549C637.644 410.111 556.454 449.215 489.196 458.174C301.06 483.234 184.43 595.077 93.8789 580.368C29.6292 569.931 -1.13528 506.649 28.9326 444.67Z"
+            fill="url(#paint0_linear_71_1543)"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter0_f_71_1543"
+            x="-282.665"
+            y="0.232281"
+            width="1194.78"
+            height="881.463"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="150"
+              result="effect1_foregroundBlur_71_1543"
+            />
+          </filter>
+          <linearGradient
+            id="paint0_linear_71_1543"
+            x1="68.8451"
+            y1="481.485"
+            x2="478.203"
+            y2="477.608"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0.422952" stopColor="#8900c9" />
+            <stop offset="1" stopColor="#FFCCFF" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="360"
+        height="684"
+        viewBox="0 0 360 684"
+        fill="none"
+        className="Blob-2"
+      >
+        <g filter="url(#filter0_f_71_1544)">
+          <ellipse
+            cx="180.615"
+            cy="342.099"
+            rx="93.6478"
+            ry="91.6021"
+            fill="#FF29A8"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter0_f_71_1544"
+            x="-163.033"
+            y="0.49646"
+            width="687.296"
+            height="683.204"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="125"
+              result="effect1_foregroundBlur_71_1544"
+            />
+          </filter>
+        </defs>
+      </svg>
+      <div className="Blob-3"></div>
+      <div className="Blob-4"></div>
+    </div>
+  );
+}
diff --git a/client/src/components/landingpage/LandingPage.jsx b/client/src/components/landingpage/LandingPage.jsx
@@ -1,9 +1,21 @@
 import Nav from "../common/nav";
+import Button from "../common/Button";
+import Footer from "../common/Footer";
+
+import FancyBlobs from "./FancyBlobs";
 
 export default function LandingPage() {
   return (
     <>
       <Nav showIcons={true} />
+      <FancyBlobs />
+      <Button className="Button--primary" linkTo="/login">
+        تسجيل الدخول
+      </Button>
+      <Button className="Button--dark" linkTo="/signUp">
+        إنشاء حساب
+      </Button>
+      <Footer />
     </>
   );
 }