Merge branch 'main' into feat/community

SpaceyaTech · Apr 18, 2024 · c059880 · c059880
2 parents 5afe5ef + d4e856c
commit c059880
Show file tree

Hide file tree

Showing 87 changed files with 1,704 additions and 1,038 deletions.
diff --git a/src/APP/components/ViewMoreBtn.jsx → src/APP/components/Button.jsx b/src/APP/components/ViewMoreBtn.jsx → src/APP/components/Button.jsx
@@ -3,17 +3,17 @@ import { Link } from "react-router-dom";
 
 import { arrowRight } from "@/assets/images/icons";
 
-function ViewMoreBtn({ link }) {
+function Button({ link, title }) {
   return (
     <Link to={link} className="border rounded-full bg-white p-1 w-fit">
       <div className="flex-center bg-green-light rounded-full px-3 py-1.5 gap-2">
         <span className="capitalize text-green-header text-sm font-semibold">
-          Learn more
+          {title}
         </span>
         <img src={arrowRight} alt="arrow-right" className="size-5" />
       </div>
     </Link>
   );
 }
 
-export default ViewMoreBtn;
+export default Button;
diff --git a/src/APP/components/Caroussel.jsx b/src/APP/components/Caroussel.jsx
@@ -2,6 +2,7 @@ import { faBriefcase } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 import { useRef } from "react";
+import { LazyLoadImage } from "react-lazy-load-image-component";
 import {
   arrowCircleLeft,
   arrowCircleRight,
@@ -33,7 +34,7 @@ function Caroussel({ CarousselData }) {
             key={crypto.randomUUID()}
             className="border bg-white p-2 max-w-[400px] rounded-2xl md:rounded-[20px]"
           >
-            <img
+            <LazyLoadImage
               className="rounded-t-2xl h-4/6 w-[400px] object-cover"
               src={image}
               alt={name}

diff --git a/src/APP/components/Footer.jsx b/src/APP/components/Footer.jsx
@@ -5,6 +5,7 @@ import {
   twitter,
 } from "../../assets/images/socials";
 import logo from "../../assets/images/sytLogo.png";
+import { LazyLoadImage } from "react-lazy-load-image-component";
 
 function Footer() {
   var now = new Date();
@@ -15,27 +16,48 @@ function Footer() {
         <div className="md:flex md:justify-between">
           {/* logo and socials  */}
           <div className="mb-8 md:mb-0 mr-6 flex flex-col justify-start items-center md:w-1/4 w-1/2">
-            <img
+            <LazyLoadImage
+              effect="blur"
               src={logo}
-              className="h-24 md:mx-8 mx-0 object-contain"
               alt="FlowBite Logo"
+              className="h-24 md:mx-8 mx-0 object-contain"
             />
             {/* social logos  */}
             <div className="flex flex-row items-center  md:justify-between gap-4 justify-start my-4">
               <a href="/">
-                <img src={facebook} alt="facebook" className="w-7 h-7" />
+                <LazyLoadImage
+                  effect="blur"
+                  src={facebook}
+                  alt="facebook"
+                  className="w-7 h-7"
+                />
               </a>
 
               <a href="/">
-                <img src={instagram} alt="instagram" className="w-7 h-7" />
+                <LazyLoadImage
+                  effect="blur"
+                  src={instagram}
+                  alt="instagram"
+                  className="w-7 h-7"
+                />
               </a>
 
               <a href="/">
-                <img src={twitter} alt="twitter" className="w-7 h-7" />
+                <LazyLoadImage
+                  effect="blur"
+                  src={twitter}
+                  alt="twitter"
+                  className="w-7 h-7"
+                />
               </a>
 
               <a href="/">
-                <img src={linkedin} alt="linkedIn" className="w-7 h-7" />
+                <LazyLoadImage
+                  effect="blur"
+                  src={linkedin}
+                  alt="linkedIn"
+                  className="w-7 h-7"
+                />
               </a>
             </div>
           </div>