diff --git a/src/APP/pages/community/CommunityPage.jsx b/src/APP/pages/community/CommunityPage.jsx index 0ca4a941..414cc3f7 100644 --- a/src/APP/pages/community/CommunityPage.jsx +++ b/src/APP/pages/community/CommunityPage.jsx @@ -1,11 +1,11 @@ -import React, { useEffect } from "react"; +import { useEffect } from "react"; +import EventsSection from "../events/sections/eventsSection/EventsSection"; import { WelcomeSection, ChaptersSection, PartnerSection, GallerySection, } from "./sections"; -import EventsSection from "../events/sections/eventsSection/EventsSection"; function CommunityPage() { useEffect(() => { @@ -13,13 +13,15 @@ function CommunityPage() { }, []); return ( -
- - - - - -
+
+
+ + + {/* */} + {/* */} + +
+
); } diff --git a/src/APP/pages/community/sections/WelcomeSection.jsx b/src/APP/pages/community/sections/WelcomeSection.jsx index 41b7987e..6d9cb75f 100644 --- a/src/APP/pages/community/sections/WelcomeSection.jsx +++ b/src/APP/pages/community/sections/WelcomeSection.jsx @@ -1,96 +1,38 @@ -import React from "react"; -import { community } from "../../../../assets/images/community"; +import { LazyLoadImage } from "react-lazy-load-image-component"; +import { Link } from "react-router-dom"; +import { NewHero } from "../../../../assets/images/community"; function WelcomeSection() { return ( -
-
-
-

- Welcome to The SpaceYaTech Community -

+
+ {/* Hero section Description */} +
+

+ A community{" "} + made for and by you to help you +

-

- SpaceYaTech is a fast growing tech community born out of a need for - a space for young techies to find communities to help them - accelerate in their careers. The community targets all sectors in - the tech industry and provides online communities to network, learn - and grow for techies at all stages in their career. -

+

+ SpaceYaTech is a dynamic tech community fostering career growth for + young professionals across all tech sectors, offering networking and + learning opportunities for all career stages. +

- {/*

- View Community Guidelines -

*/} - - -
+ + Join SpaceYaTech +
-
+ + ); } diff --git a/src/APP/pages/community/sections/gallerySection/GallerySection.jsx b/src/APP/pages/community/sections/gallerySection/GallerySection.jsx index f9aef2ee..4afc85f3 100644 --- a/src/APP/pages/community/sections/gallerySection/GallerySection.jsx +++ b/src/APP/pages/community/sections/gallerySection/GallerySection.jsx @@ -1,25 +1,71 @@ /* eslint-disable react/prop-types */ -import React from "react"; -import { Link } from "react-router-dom"; -import { - galleryimage1, - galleryimage2, - galleryimage3, - galleryimage4, - galleryimage5, - galleryimage6, - galleryimage7, - galleryimage8, - galleryimage9, -} from "../../../../../assets/images/community"; import { LazyLoadImage } from "react-lazy-load-image-component"; +import { Link } from "react-router-dom"; +// import { +// galleryimage1, +// galleryimage2, +// galleryimage3, +// galleryimage4, +// galleryimage5, +// galleryimage6, +// galleryimage7, +// galleryimage8, +// galleryimage9, +// } from "../../../../../assets/images/community"; +import { arrowRight } from "../../../../../assets/images/icons"; +import photosData from "../../../gallery/data"; -// const photos = [{ image:galleryimage1}, { image:galleryimage2 }, { image: galleryimage3 }, { image: galleryimage4}, { image: galleryimage5 }, { image: galleryimage6}, { image: galleryimage7}, { image: galleryimage8}] +// const photos = [ +// { image: galleryimage1 }, +// // { image: galleryimage2 }, +// // { image: galleryimage3 }, +// { image: galleryimage4 }, +// { image: galleryimage5 }, +// { image: galleryimage6 }, +// { image: galleryimage7 }, +// { image: galleryimage8 }, +// ]; function GallerySection() { return ( -
-

Gallery

-
+
+
+
+

+ Our Gallery +

+
+
+

+ A memory bank of our special +
moments +

+
+ {photosData.slice(0, 6).map((photo) => ( + + ))} +
+ + +
+ + View more + + +
+ + {/*
@@ -84,8 +130,8 @@ function GallerySection() {
-
-
+
*/} + {/*
-
+
*/}
); } diff --git a/src/APP/pages/events/sections/eventsSection/Events.jsx b/src/APP/pages/events/sections/eventsSection/Events.jsx index 75053f1f..f727656d 100644 --- a/src/APP/pages/events/sections/eventsSection/Events.jsx +++ b/src/APP/pages/events/sections/eventsSection/Events.jsx @@ -1,101 +1,161 @@ -import React from "react"; -import { Link } from "react-router-dom"; +/* eslint-disable operator-linebreak */ +/* eslint-disable camelcase */ +/* eslint-disable indent */ +/* eslint-disable linebreak-style */ import PropTypes from "prop-types"; - -import formatEventDates from "../../../../../utilities/formatEventDate"; import { LazyLoadImage } from "react-lazy-load-image-component"; +import { Link } from "react-router-dom"; +import { LocationTag } from "../../../community/sections/eventsSection/SingleEvents/sections"; +import { + lightEventCard, + darkEventCard, +} from "../../../../../assets/images/community"; +import formatEventDates from "../../../../../utilities/formatEventDate"; +import { format, parseISO } from "date-fns"; +import { + clock, + tag, + calendar, + globe, +} from "../../../../../assets/images/icons"; -function Events({ events, isVertical }) { - const verticalContainer = - "my-6 grid grid-cols-1 gap-x-3 gap-y-10 sm:grid-cols-2 lg:grid-cols-5 xl:gap-x-8"; - const horizontalContainer = - "flex overflow-x-auto px-0 md:px-4 gap-2 sm:gap-4 w-full"; - - // Event Card classes - const verticalWrapper = - "max-w-sm bg-white border border-gray-200 rounded-lg h-auto"; - const horizontalWrapper = - "m-3 md:m-6 bg-white rounded-lg w-4/5 sm:w-72 flex flex-shrink-0"; +function Events({ events }) { + // const formattedDate = format(parseISO(start_date), "do, MMMM"); return ( -
- {events && Array.isArray(events) - ? events.map( - ({ - id, - name, - start_date, - start_time, - end_date, - end_time, - location, - mode, - poster, - city, - }) => { - const date = formatEventDates( - start_date, - start_time, - end_date, - end_time - ); +
+ {events && + Array.isArray(events) && + events.map( + ({ + id, + name, + start_date, + start_time, + end_date, + end_time, + location, + mode, + poster, + city, + }) => { + // const date = formatEventDates( + // start_date, + // start_time, + // end_date, + // end_time + // ); - const buttonColor = - mode === "Virtual" - ? "bg-red-800 hover:bg-red-800" - : "bg-blue-800 hover:bg-blue-800"; - return ( -
- - + const [hours, minutes] = start_time.split(":"); -
-
{name}
+ const date = new Date(); + date.setHours(hours); + date.setMinutes(minutes); -

- {date} EAT + return ( + +

+ +
+ +

+ {name} +

+
+
+ +
+
+
+

+ + {format(parseISO(start_date), "do, MMMM")}

-

- {location}{" "} - {mode.toLowerCase() === "physical" && ( - • {city} + +

+ + {mode.toLowerCase() === "physical" ? ( + location + ) : ( + + Online + )}

-
- +
+

+ + {format(date, "HHmm") + " HRS"} +

+

+ + Development +

+
+
+ +
- ); - } - ) - : ""} + + ); + } + )}
); } export default Events; -Events.defaultProps = { - isVertical: true, -}; - Events.propTypes = { events: PropTypes.array, - isVertical: PropTypes.bool.isRequired, }; diff --git a/src/APP/pages/events/sections/eventsSection/EventsSection.jsx b/src/APP/pages/events/sections/eventsSection/EventsSection.jsx index 07e7d93d..55515406 100644 --- a/src/APP/pages/events/sections/eventsSection/EventsSection.jsx +++ b/src/APP/pages/events/sections/eventsSection/EventsSection.jsx @@ -7,7 +7,9 @@ import Error500 from "../../../errorPages/Error500"; import Events from "./Events"; import EventsTab from "./EventsTab"; import EventsUpdateSection from "./EventsUpdateSection"; - +import { LazyLoadImage } from "react-lazy-load-image-component"; +import { Link } from "react-router-dom"; +import { arrowRight } from "../../../../../assets/images/icons"; function EventsSection({ showTabs, showAllEventsLink }) { const [filters, setFilters] = useState({}); @@ -44,20 +46,19 @@ function EventsSection({ showTabs, showAllEventsLink }) { }, [filters]); return ( -
- {isErrorTopEvents &&

Error loading cities!

} - {isLoadingTopEvents &&

Loading cities...

} - {isSuccessTopEvents && ( - - )} - - {showTabs && } +
+
+
+

+ Our Events +

+
+
+

+ Notable events within the
+ SpaceYaTech ecosphere +

{isError && } {isPending && (
@@ -65,16 +66,30 @@ function EventsSection({ showTabs, showAllEventsLink }) {

Loading events...

)} - {isSuccess && ( - <> - {topEventsData?.count === 0 ? ( -

No events found!

- ) : ( - - )} - - )} -
+ {isSuccess && + (topEventsData?.count === 0 ? ( +

No events found!

+ ) : ( + + ))} +
+ +
+ + View more + + +
+ +
+
); } diff --git a/src/APP/pages/gallery/GalleryPage.jsx b/src/APP/pages/gallery/GalleryPage.jsx index 63bbeea6..e049b695 100644 --- a/src/APP/pages/gallery/GalleryPage.jsx +++ b/src/APP/pages/gallery/GalleryPage.jsx @@ -1,9 +1,9 @@ import React, { useState } from "react"; import { Link } from "react-router-dom"; - +import { arrowCircleLeft } from "../../../assets/images/icons"; +import processPhotos from "../../../utilities/processPhotos"; import photosData from "./data"; import ImageCard from "./sections/ImageCard"; -import processPhotos from "../../../utilities/processPhotos"; function GalleryPage() { const [isActive, setIsActive] = useState(false); @@ -11,72 +11,97 @@ function GalleryPage() { const photos = processPhotos(photosData); return ( -
-
- setIsActive(true)} - onMouseLeave={() => setIsActive(false)} - > - {isActive ? ( - - - - ) : ( - - - - )} - - +
+
+ - BACK - - - -
-

SpaceYaTech Gallery

+
+ arrow-left + + Go Back + +
+ -

- SpaceYaTech is a fast growing tech community born out of a need for - a space for young techies to find communities to help them - accelerate in their careers. The community targets all sectors in - the tech industry and provides online communities to network, learn - and grow for techies at all stages in their career. -

+

+ SpaceYaTech Gallery | Collection 2024 +

-
- {/*
- {photosData.map((photo) => ( - - ))} -
*/} + {/*
+ {photosData.map((photo) => ( + + ))} +
*/} + + {/*
+ {photosData.map((photo, index) => { + let style = {}; + switch (index % 7) { + case 0: + style = { + gridColumn: "span 2", + gridRow: "span 1", + }; + break; + case 1: + case 2: + style = { gridColumn: "span 1", gridRow: "span 1" }; + break; + case 3: + style = { gridColumn: "span 1", gridRow: "span 2" }; + break; + case 4: + case 5: + style = { gridColumn: "span 1", gridRow: "span 1" }; + break; + case 6: + style = { gridColumn: "span 2", gridRow: "span 2" }; + break; + default: + break; + } + return ; + })} +
*/} + + {/*
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
*/} -
- + {/* Gallery library */} +
+ +
); diff --git a/src/APP/pages/gallery/data.js b/src/APP/pages/gallery/data.js index b1031bbb..b030eb9e 100644 --- a/src/APP/pages/gallery/data.js +++ b/src/APP/pages/gallery/data.js @@ -1,239 +1,242 @@ -const photosData = [ +import { hasWindow } from "yet-another-react-lightbox"; + +const breakpoints = [1080, 640, 384, 256, 128, 96, 64, 48]; +const unsplashLink = (id, width, height) => + `https://lh3.googleusercontent.com/pw/${id}=w${width}-h${height}-s-no-gm?authuser=0`; + +const photos = [ { - id: 1, - src: "https://lh3.googleusercontent.com/pw/ABLVV85T37FaDQSvXN_A2bzscnLDsT-TPW3_YfUNOGehQug_0uAOWsBFhSh-WWnAZGRD14dGgMaWYWegNUrDoJTU2c4Qff1H0a5uswRr34OzeadOJXzkhhTouSimkGzZjppa-8MDJiAfJ76XBAOaBi9qp8Dq=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV8416CJz7pYJvXAh8I1flaXDAYhQ0KpaFdQGx0l-R8gf5E-_wn2Ere_lLdVAT9e5unuA6ab_gUF-0oiW5fiHqK8Dc6YWpTzHO0pJ_L1rkFqcY--me9Cu_WDQbL3YYVEnVPiu8Zrc2pNhSryFifFzf4pW", alt: "image", width: 1303, - height: 560, - date: "15th, April 2023", - event: "#DevOpsNairobi", + height: 869, + // width: 507, + // height: 217, + date: "15/04/2023", + event: "DevOps Nairobi", + }, + + { + id: "ABLVV85LYmVtaBpHZCc0o0EeFFc8Gk2ICusZF-CnQIX7lGEIuBqHpEfFbY2qFqHZqBeR-SEPzLEalTnP8hD6vScDCyCzZI95lmHtYayEI1g0X-IuM8k1o-m2-cvYLvkH8dv9u6BVhufL-ZFhtmeG8_83doEr", + alt: "image", + // width: 1303, + // height: 450, + width: 330, + height: 218, + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 2, - src: "https://lh3.googleusercontent.com/pw/ABLVV86B1RokBcefoXvm6apr9QgDg3xKY_gAn5VWlXH1cE1mXoguGukO-yz07HNMICP5Jj2uYqcxr2glT12wZQulj7mBfYPirY8HHwBTfG6tUaDNDgehcYPkDXMAK66eufsF3Ov6JTbo_SNGR64BLcVLiHYv=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV86B1RokBcefoXvm6apr9QgDg3xKY_gAn5VWlXH1cE1mXoguGukO-yz07HNMICP5Jj2uYqcxr2glT12wZQulj7mBfYPirY8HHwBTfG6tUaDNDgehcYPkDXMAK66eufsF3Ov6JTbo_SNGR64BLcVLiHYv", alt: "image", - width: 1240, - height: 940, - date: "15th, April 2023", - event: "#DevOpsNairobi", + // width: 1240, + // height: 940, + width: 300, + height: 217, + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 3, - src: "https://lh3.googleusercontent.com/pw/ABLVV87POpzD2JQecFa8tI0LOUFNCMWfTXP_QyuF4zVqa24xyv5oLDtBggT_9YgWHjpxI8rHH7_QPmSsJltnm02sYEx7um1kP83CjdBIJQ9UoFDxyO39mRvAuryqhIPp9hgxYWFm4Op4xhFsNGIRquJAcO33=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV87POpzD2JQecFa8tI0LOUFNCMWfTXP_QyuF4zVqa24xyv5oLDtBggT_9YgWHjpxI8rHH7_QPmSsJltnm02sYEx7um1kP83CjdBIJQ9UoFDxyO39mRvAuryqhIPp9hgxYWFm4Op4xhFsNGIRquJAcO33", alt: "image", width: 1440, height: 1220, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 4, - src: "https://lh3.googleusercontent.com/pw/ABLVV86ruasiYYt5XpoNCqgWIBIX5tWxpMadDJCLSY5l0rzqfbSH-e1QebvBvfj7r-snKk9htxAjkHyweWfAlys5oP3vTfFDP8Ksceiw985XAhKEABHSf3fuQLWoq52Hf7Lex7RoGm7cew4q9yxL-e8d1uEy=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV86ruasiYYt5XpoNCqgWIBIX5tWxpMadDJCLSY5l0rzqfbSH-e1QebvBvfj7r-snKk9htxAjkHyweWfAlys5oP3vTfFDP8Ksceiw985XAhKEABHSf3fuQLWoq52Hf7Lex7RoGm7cew4q9yxL-e8d1uEy", alt: "image", width: 1480, height: 1100, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 5, - src: "https://lh3.googleusercontent.com/pw/ABLVV86M02jcJePIcBgC1UE1iuagaYIYK4zJR5fSuY0aW2k40f01iXjT3mT9YkqFje5YO_7dTSNJ3nFJiIU_XQ1GpS4QgR0jX1nlb4rssJSDFTmUpDgj0mEt9CGnok9_U4hR4P2gSzg5E1mo4kRAqxDzi7ac=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV86M02jcJePIcBgC1UE1iuagaYIYK4zJR5fSuY0aW2k40f01iXjT3mT9YkqFje5YO_7dTSNJ3nFJiIU_XQ1GpS4QgR0jX1nlb4rssJSDFTmUpDgj0mEt9CGnok9_U4hR4P2gSzg5E1mo4kRAqxDzi7ac", alt: "image", width: 1203, height: 260, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 6, - src: "https://lh3.googleusercontent.com/pw/ABLVV8416CJz7pYJvXAh8I1flaXDAYhQ0KpaFdQGx0l-R8gf5E-_wn2Ere_lLdVAT9e5unuA6ab_gUF-0oiW5fiHqK8Dc6YWpTzHO0pJ_L1rkFqcY--me9Cu_WDQbL3YYVEnVPiu8Zrc2pNhSryFifFzf4pW=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV87ClpVurGHzeYOZ_o_vPr67WNXQGBqAdcXpWBDthGlesGHjUlMXiDAeEIKwrhHSqH0F2dkj3CN3YQ1RVMz7Vl6OUcoax7vy4ttGkD-99bTxdgj1iRXFQUhpuqSvU06qf9NQwVZIklCaMAgS6wIGQepO", alt: "image", width: 1303, height: 869, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 7, - src: "https://lh3.googleusercontent.com/pw/ABLVV87ClpVurGHzeYOZ_o_vPr67WNXQGBqAdcXpWBDthGlesGHjUlMXiDAeEIKwrhHSqH0F2dkj3CN3YQ1RVMz7Vl6OUcoax7vy4ttGkD-99bTxdgj1iRXFQUhpuqSvU06qf9NQwVZIklCaMAgS6wIGQepO=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV85g5Wrz5_f0CQfFm0CBQZRNiUN_pheMK7FDI0eQvTBSQ1Vd8kxd1z3n3W63M9aQ58r1eh-xYt76Y0CTKPoPyc4qe1WYohdP6eb_vSbrOxKQEH9uMQSH9wP6m4AGonvv-Ol6vaVI026aS29QRIj3nCVF", alt: "image", width: 1303, height: 869, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 8, - src: "https://lh3.googleusercontent.com/pw/ABLVV85g5Wrz5_f0CQfFm0CBQZRNiUN_pheMK7FDI0eQvTBSQ1Vd8kxd1z3n3W63M9aQ58r1eh-xYt76Y0CTKPoPyc4qe1WYohdP6eb_vSbrOxKQEH9uMQSH9wP6m4AGonvv-Ol6vaVI026aS29QRIj3nCVF=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV87jIfmr9Ic2Q8qfWhFGCjakWkgChn71vLFheO1mRk5uXzsglTPHZ36K-LvhR47exjdb7V53DVvPt_nkPWQbQuN8fTTQG35HUAr2d3dXH6tl6WgqTQ15uSN3FdrOtSIqyWuiJBowj39753BoVPFBpk7O", alt: "image", width: 1303, height: 869, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 9, - src: "https://lh3.googleusercontent.com/pw/ABLVV87jIfmr9Ic2Q8qfWhFGCjakWkgChn71vLFheO1mRk5uXzsglTPHZ36K-LvhR47exjdb7V53DVvPt_nkPWQbQuN8fTTQG35HUAr2d3dXH6tl6WgqTQ15uSN3FdrOtSIqyWuiJBowj39753BoVPFBpk7O=w1303-h869-s-no-gm?authuser=0", - alt: "image", - width: 1303, - height: 869, - date: "15th, April 2023", - event: "#DevOpsNairobi", - }, - { - id: 10, - src: "https://lh3.googleusercontent.com/pw/ABLVV85xssZHOgPtfsdksjArgXMP6NDPxC3fgqsS3SnerHyTUiWZiiiCvIJvEAA2gzrM-3Utsf5exhiFAk4XSnlIV1atXB7Mqiqbg0SOjQmUyaoVJryaG549chSzhrZ6pfMHj2x-cK77c3qdGTOyhaFhkZvb=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV85xssZHOgPtfsdksjArgXMP6NDPxC3fgqsS3SnerHyTUiWZiiiCvIJvEAA2gzrM-3Utsf5exhiFAk4XSnlIV1atXB7Mqiqbg0SOjQmUyaoVJryaG549chSzhrZ6pfMHj2x-cK77c3qdGTOyhaFhkZvb", alt: "image", width: 1280, height: 864, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 11, - src: "https://lh3.googleusercontent.com/pw/ABLVV84cAA69Z4Hb0Paa9pEGfvRsiogi1UgPKoOzWcN2mofcfbkYIhx7bvmpoC9ox-2Cqn3zwTfAEu7fl8zIAWnuDtwsy10wQbCIsoNQEqRZWDsCLaVh4wffZpPUBBzmjimgHVlBGq3W_F4Y-BuatE9Ff5RP=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV84cAA69Z4Hb0Paa9pEGfvRsiogi1UgPKoOzWcN2mofcfbkYIhx7bvmpoC9ox-2Cqn3zwTfAEu7fl8zIAWnuDtwsy10wQbCIsoNQEqRZWDsCLaVh4wffZpPUBBzmjimgHVlBGq3W_F4Y-BuatE9Ff5RP", alt: "image", width: 1208, height: 870, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 12, - src: "https://lh3.googleusercontent.com/pw/ABLVV86tqYk_1GD2kbTRSKzJuqPCth0Z-DoCp9c-3RurvHq4dKznep4x8IjFWoe_r2S5CALLkeQaQAhs6XtUARQR5Nf9KOz-QIwGBEIR6RD0UhousBvkK8rMnEurn9lEuFtK1zGB_kLDvSGUrX9f23H2sofG=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV86tqYk_1GD2kbTRSKzJuqPCth0Z-DoCp9c-3RurvHq4dKznep4x8IjFWoe_r2S5CALLkeQaQAhs6XtUARQR5Nf9KOz-QIwGBEIR6RD0UhousBvkK8rMnEurn9lEuFtK1zGB_kLDvSGUrX9f23H2sofG", alt: "image", width: 1603, height: 780, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 13, - src: "https://lh3.googleusercontent.com/pw/ABLVV86Q6-j-it6IAbQFTzeSzk1acqyl2fM-SM2opyzhaJakAgo-odEifVgmwr0nMfq2v8fhL1GK454Bb8o6yPD-HOQ7ucZsbO5OTXatcQfgOiGirzqPA_Te8u9AJEs-efTSQIh8vXN4aSQ97CTFp76nT6Vv=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV86Q6-j-it6IAbQFTzeSzk1acqyl2fM-SM2opyzhaJakAgo-odEifVgmwr0nMfq2v8fhL1GK454Bb8o6yPD-HOQ7ucZsbO5OTXatcQfgOiGirzqPA_Te8u9AJEs-efTSQIh8vXN4aSQ97CTFp76nT6Vv", alt: "image", width: 1140, height: 840, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 14, - src: "https://lh3.googleusercontent.com/pw/ABLVV87V9AST5GeBCI-eHkG5eGXEwa_ft7vJTlLNwmL7VZWGlywmquvSwU46JXU5cxR5_C27IWAiaKn4drNVUXHFUQd4px88S7WxOwr0K9dsSzU0dunfQ1ZvlpENbkdtGYFfMbUTyan0JNr78ZdNNCdyvDG9=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV87V9AST5GeBCI-eHkG5eGXEwa_ft7vJTlLNwmL7VZWGlywmquvSwU46JXU5cxR5_C27IWAiaKn4drNVUXHFUQd4px88S7WxOwr0K9dsSzU0dunfQ1ZvlpENbkdtGYFfMbUTyan0JNr78ZdNNCdyvDG9", alt: "image", width: 1303, height: 720, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 15, - src: "https://lh3.googleusercontent.com/pw/ABLVV86sf8HrLwsLczItEES_GaOtE90RQKLH1HE2LmDW73Z1cfGRU8KITOVR1xfBdLtDc-wFc4C1My5-K_YVX1pXN4txOlPctMF9D3vAkK1MwBNbCdSKdwDvLNNBCDOBeiRvvKCE6-sTWVJyNKuvX3hkyyJs=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV86sf8HrLwsLczItEES_GaOtE90RQKLH1HE2LmDW73Z1cfGRU8KITOVR1xfBdLtDc-wFc4C1My5-K_YVX1pXN4txOlPctMF9D3vAkK1MwBNbCdSKdwDvLNNBCDOBeiRvvKCE6-sTWVJyNKuvX3hkyyJs", alt: "image", width: 1303, height: 652, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 16, - src: "https://lh3.googleusercontent.com/pw/ABLVV85LYmVtaBpHZCc0o0EeFFc8Gk2ICusZF-CnQIX7lGEIuBqHpEfFbY2qFqHZqBeR-SEPzLEalTnP8hD6vScDCyCzZI95lmHtYayEI1g0X-IuM8k1o-m2-cvYLvkH8dv9u6BVhufL-ZFhtmeG8_83doEr=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV85T37FaDQSvXN_A2bzscnLDsT-TPW3_YfUNOGehQug_0uAOWsBFhSh-WWnAZGRD14dGgMaWYWegNUrDoJTU2c4Qff1H0a5uswRr34OzeadOJXzkhhTouSimkGzZjppa-8MDJiAfJ76XBAOaBi9qp8Dq", alt: "image", width: 1303, - height: 450, - date: "15th, April 2023", - event: "#DevOpsNairobi", + height: 560, + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 17, - src: "https://lh3.googleusercontent.com/pw/ABLVV84p033km8rrlP5TTcwereWv7q53kbQQU4xUoXSCUHVGl4d_Ha71KkRJ_2vxHfSsSIOevEXnnqEnSZrHdvkV7xfQ7SMJlTJYp-t6r3AT81FUkkqfqJIJun1UKp2f1GXk-_-CyAeg7sUsstc_xYo0KOZE=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV84p033km8rrlP5TTcwereWv7q53kbQQU4xUoXSCUHVGl4d_Ha71KkRJ_2vxHfSsSIOevEXnnqEnSZrHdvkV7xfQ7SMJlTJYp-t6r3AT81FUkkqfqJIJun1UKp2f1GXk-_-CyAeg7sUsstc_xYo0KOZE", alt: "image", width: 1303, height: 350, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 18, - src: "https://lh3.googleusercontent.com/pw/ABLVV87y7F035CPvfDNfl0yMD4gpSa0RSJgBs8XZVu7n2TDa7NcUjJxD50r99ZBt8bHkroPuoULdpForWhVn38HwP2UIlN_bwapty-7PJ_OfRxWFq9B4z5ZMRfPMf4rzM3IhgJugsLHq_HTzyUOrBxbV63B3=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV87y7F035CPvfDNfl0yMD4gpSa0RSJgBs8XZVu7n2TDa7NcUjJxD50r99ZBt8bHkroPuoULdpForWhVn38HwP2UIlN_bwapty-7PJ_OfRxWFq9B4z5ZMRfPMf4rzM3IhgJugsLHq_HTzyUOrBxbV63B3", alt: "image", width: 1640, height: 780, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 19, - src: "https://lh3.googleusercontent.com/pw/ABLVV850WT8FXDmnhCmp6YXWodWld3P5pXh4BaDzMMOfTNH3yKOee7UsIudu71yacBXrmw_uwliPZEh6crNm7LyKdRD3-0ssLrXHSGukUS_igD2i2Ml2fEXHFW1XHiL4cxLm1LLFistqjX41fVQaEAdkFt5F=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV850WT8FXDmnhCmp6YXWodWld3P5pXh4BaDzMMOfTNH3yKOee7UsIudu71yacBXrmw_uwliPZEh6crNm7LyKdRD3-0ssLrXHSGukUS_igD2i2Ml2fEXHFW1XHiL4cxLm1LLFistqjX41fVQaEAdkFt5F", alt: "image", width: 900, height: 540, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 20, - src: "https://lh3.googleusercontent.com/pw/ABLVV84lA0xQDSObyvAq7SoOdHa-cvGTZ4BK8s_U_26qjXaRDf6uw23Yjvf1fwubZgsq6cBD8PkpOxd2JgLsKFSQ7s_ft6i4T25HPDuIbJ0y0RXvP8whaXv8TvFJsO17uJR-U6EjWl451Vj9kR947C3Mj57a=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV84lA0xQDSObyvAq7SoOdHa-cvGTZ4BK8s_U_26qjXaRDf6uw23Yjvf1fwubZgsq6cBD8PkpOxd2JgLsKFSQ7s_ft6i4T25HPDuIbJ0y0RXvP8whaXv8TvFJsO17uJR-U6EjWl451Vj9kR947C3Mj57a", alt: "image", width: 1308, height: 764, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 21, - src: "https://lh3.googleusercontent.com/pw/ABLVV85rXYkttzLvpF1WVpCym5MTl4dfBtVdWlSZ6Bq2tt1kksYg_sKTVJF_ltEK6R1m7HwcZI62c6DAWVPoiSbpFoQPc1UtpmIyNwnZ-VIZ6U5Kht2Ma3YJTegkTBTp9WSrCRXsSAfcyv1rWM3A2BdY9qAP=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV85rXYkttzLvpF1WVpCym5MTl4dfBtVdWlSZ6Bq2tt1kksYg_sKTVJF_ltEK6R1m7HwcZI62c6DAWVPoiSbpFoQPc1UtpmIyNwnZ-VIZ6U5Kht2Ma3YJTegkTBTp9WSrCRXsSAfcyv1rWM3A2BdY9qAP", alt: "image", width: 1804, height: 964, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 22, - src: "https://lh3.googleusercontent.com/pw/ABLVV86iqgxDFzy0dpRpyTkgutLqQ83BWOqlXk9H5HYS6TGEZOimU7RDS63SlW4DYX8IuWquXbWoT6wdKTHiYGEWD3VL4k_sHKenG1Dgap60UxCR7YbQd3raxpH9MJSODHOkTiLd_FHPjQjifvbXU3TpLt3l=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV86iqgxDFzy0dpRpyTkgutLqQ83BWOqlXk9H5HYS6TGEZOimU7RDS63SlW4DYX8IuWquXbWoT6wdKTHiYGEWD3VL4k_sHKenG1Dgap60UxCR7YbQd3raxpH9MJSODHOkTiLd_FHPjQjifvbXU3TpLt3l", alt: "image", width: 1604, height: 874, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 23, - src: "https://lh3.googleusercontent.com/pw/ABLVV84PNbT4NiZV_h49lDnT-8rjlghNYFtnZ6oYQpgA4k6FbZsUAEXJiigQ7HrgCI2tpPeg4Yg9pHNmb2vwxJG40nFCMW1Em6paIHqkPrNcnZ3nVVqRdwDsl_oJqcUJPp1e9cUnxtxx2-OCaNQqIulfb00E=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV84PNbT4NiZV_h49lDnT-8rjlghNYFtnZ6oYQpgA4k6FbZsUAEXJiigQ7HrgCI2tpPeg4Yg9pHNmb2vwxJG40nFCMW1Em6paIHqkPrNcnZ3nVVqRdwDsl_oJqcUJPp1e9cUnxtxx2-OCaNQqIulfb00E", alt: "image", width: 1080, height: 720, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 24, - src: "https://lh3.googleusercontent.com/pw/ABLVV85AXn-w2evhSLYLCHMle5adi5atPbXmCqIrdvUYceQ3E7pnKjOZ5qcuoEhRiXZKed6U3mr0A9QC6H0skhtQrPkq_dxi-h4OTMdBqfHfynrD8OGS0yCktFm365kw2PWrmJD8qNcu3sdIPia4hL-7ccPy=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV85AXn-w2evhSLYLCHMle5adi5atPbXmCqIrdvUYceQ3E7pnKjOZ5qcuoEhRiXZKed6U3mr0A9QC6H0skhtQrPkq_dxi-h4OTMdBqfHfynrD8OGS0yCktFm365kw2PWrmJD8qNcu3sdIPia4hL-7ccPy", alt: "image", width: 1204, height: 640, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 25, - src: "https://lh3.googleusercontent.com/pw/ABLVV84HMZUMWYDFM7Vmuo1FTXv4HoeD6WNxnjHm8LvmvG6w088Nk7aWY6IAttvQivX0aHy5WAP4Ef20e-P4ee_DF5cfVnkSFK5IQosflgtz17ETndmqPepClX3uiMDBrIqSV0r-vVBIcmAfFjtg-y9xgs59=w580-h869-s-no-gm?authuser=0", + id: "ABLVV84HMZUMWYDFM7Vmuo1FTXv4HoeD6WNxnjHm8LvmvG6w088Nk7aWY6IAttvQivX0aHy5WAP4Ef20e-P4ee_DF5cfVnkSFK5IQosflgtz17ETndmqPepClX3uiMDBrIqSV0r-vVBIcmAfFjtg-y9xgs59", alt: "image", width: 1480, height: 869, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, { - id: 26, - src: "https://lh3.googleusercontent.com/pw/ABLVV86SCGS66SJSmsdyBRVK6Z4yDKS73QBYf1NwBMvfm6kHSFLY5nbGz4IAVFg6LWqMDyTCOsyIQmxrJBbutRlioRJniZyK5aIbq4Smrn3KZFOwmuXN6TVCg6A74IOwNwC5v48yqqAIZwLSONTD4-hDwqej=w1303-h869-s-no-gm?authuser=0", + id: "ABLVV86SCGS66SJSmsdyBRVK6Z4yDKS73QBYf1NwBMvfm6kHSFLY5nbGz4IAVFg6LWqMDyTCOsyIQmxrJBbutRlioRJniZyK5aIbq4Smrn3KZFOwmuXN6TVCg6A74IOwNwC5v48yqqAIZwLSONTD4-hDwqej", alt: "image", width: 1503, height: 840, - date: "15th, April 2023", - event: "#DevOpsNairobi", + date: "15/04/2023", + event: "DevOps Nairobi", }, ]; +const photosData = photos.map((photo) => ({ + src: unsplashLink(photo.id, photo.width, photo.height), + width: photo.width, + height: photo.height, + srcSet: breakpoints.map((breakpoint) => { + const height = Math.round((photo.height / photo.width) * breakpoint); + return { + src: unsplashLink(photo.id, breakpoint, height), + width: breakpoint, + height, + }; + }), + date: "15/04/2023", + event: "DevOps Nairobi", +})); + export default photosData; diff --git a/src/APP/pages/gallery/sections/ImageCard.jsx b/src/APP/pages/gallery/sections/ImageCard.jsx index 3e78a4fb..685a9719 100644 --- a/src/APP/pages/gallery/sections/ImageCard.jsx +++ b/src/APP/pages/gallery/sections/ImageCard.jsx @@ -2,7 +2,7 @@ /* eslint-disable prettier/prettier */ /* eslint-disable linebreak-style */ /* eslint-disable import/no-unresolved */ -import React, { useState } from "react"; +import { useState } from "react"; import PhotoAlbum from "react-photo-album"; @@ -17,18 +17,25 @@ import "yet-another-react-lightbox/plugins/thumbnails.css"; function ImageCard({ photos }) { const [index, setIndex] = useState(-1); + return (
setIndex(index)} + // columns={3} + // padding={8} // targetRowHeight={450} renderPhoto={({ wrapperStyle, renderDefaultPhoto }) => ( -
+
+

22/12/2024

{renderDefaultPhoto({ wrapped: true })} - +

Collection 2024 | SYT MEETUP

{/*
diff --git a/src/APP/pages/gallery/sections/ImageCardLatest.jsx b/src/APP/pages/gallery/sections/ImageCardLatest.jsx new file mode 100644 index 00000000..b4d426ea --- /dev/null +++ b/src/APP/pages/gallery/sections/ImageCardLatest.jsx @@ -0,0 +1,30 @@ +import React from "react"; +import { LazyLoadImage } from "react-lazy-load-image-component"; + +function ImageCard({ photo, style }) { + const { width, src, alt, date, event, height } = photo; + + return ( +
+

{date}

+ + +

Collection 2024 | {event}

+
+ ); +} + +export default ImageCard; diff --git a/src/APP/pages/gallery/sections/ImageCardss.jsx b/src/APP/pages/gallery/sections/ImageCardss.jsx index 0f8d94be..8b13b955 100644 --- a/src/APP/pages/gallery/sections/ImageCardss.jsx +++ b/src/APP/pages/gallery/sections/ImageCardss.jsx @@ -1,29 +1,29 @@ -// import React from "react"; -// import { LazyLoadImage } from "react-lazy-load-image-component"; +import React from "react"; +import { LazyLoadImage } from "react-lazy-load-image-component"; -// function ImageCard({ photo }) { -// const { width, src, alt, date, event, height } = photo; -// return ( -//
-// +function ImageCard({ photo }) { + const { width, src, alt, date, event, height } = photo; + return ( +
+ -//
-//
-//
-// {date} +
+
+
+ {date} -//
+
-//

{event}

-//
-//
-//
-// ); -// } +

{event}

+
+
+
+ ); +} -// export default ImageCard; +export default ImageCard; diff --git a/src/assets/images/community/NewHero.png b/src/assets/images/community/NewHero.png new file mode 100644 index 00000000..241d3413 Binary files /dev/null and b/src/assets/images/community/NewHero.png differ diff --git a/src/assets/images/community/darkEventCard.png b/src/assets/images/community/darkEventCard.png new file mode 100644 index 00000000..7264ee43 Binary files /dev/null and b/src/assets/images/community/darkEventCard.png differ diff --git a/src/assets/images/community/index.js b/src/assets/images/community/index.js index 5e56b18c..eca6511d 100644 --- a/src/assets/images/community/index.js +++ b/src/assets/images/community/index.js @@ -1,10 +1,11 @@ import Akinyi from "./Akinyi.png"; import akinyiux from "./akinyiux.png"; import community from "./community.png"; +import darkEventCard from "./darkEventCard.png"; import eakinyi from "./eakinyi.png"; import Emmy from "./Emmy.png"; -import eventCardVirtual from "./event-card-bg-virtual.png"; import eventCardPhysical from "./event-card-bg-physical.png"; +import eventCardVirtual from "./event-card-bg-virtual.png"; import eventsVirtualBg from "./events-bg-physical.png"; import eventsPhysicalBg from "./events-bg-virtual.png"; import galleryimage1 from "./galleryimage1.png"; @@ -20,6 +21,7 @@ import google from "./google.png"; import google2 from "./google2.png"; import Group from "./Group.png"; import individualchapter from "./individualchapter.png"; +import lightEventCard from "./lightEventCard.png"; import MasterBase from "./MasterBase.png"; import mentorlst from "./mentorlst.png"; import Mombasa from "./Mombasa.png"; @@ -27,6 +29,7 @@ import mpesapayments from "./mpesapayments.png"; import Nairobi from "./Nairobi.png"; import nairobi1 from "./nairobi1.png"; import nairobi2 from "./nairobi2.png"; +import NewHero from "./NewHero.png"; import Pam from "./Pam.png"; import singleEvents from "./singleEvents.png"; import Tanzania from "./Tanzania.png"; @@ -68,10 +71,13 @@ export { Akinyi, akinyiux, eakinyi, + Emmy, + Pam, + NewHero, eventCardVirtual, eventCardPhysical, eventsPhysicalBg, eventsVirtualBg, - Emmy, - Pam, + lightEventCard, + darkEventCard, }; diff --git a/src/assets/images/community/lightEventCard.png b/src/assets/images/community/lightEventCard.png new file mode 100644 index 00000000..b3171db2 Binary files /dev/null and b/src/assets/images/community/lightEventCard.png differ diff --git a/src/assets/images/icons/calendar.svg b/src/assets/images/icons/calendar.svg new file mode 100644 index 00000000..054766fa --- /dev/null +++ b/src/assets/images/icons/calendar.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/clock.svg b/src/assets/images/icons/clock.svg new file mode 100644 index 00000000..de1dd8b4 --- /dev/null +++ b/src/assets/images/icons/clock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/globe.svg b/src/assets/images/icons/globe.svg new file mode 100644 index 00000000..aacc3dcd --- /dev/null +++ b/src/assets/images/icons/globe.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/icons/index.js b/src/assets/images/icons/index.js index 2887f789..4da607dd 100644 --- a/src/assets/images/icons/index.js +++ b/src/assets/images/icons/index.js @@ -3,13 +3,17 @@ import arrowCircleLeft from "./ArrowCircleLeft.svg"; import arrowCircleRight from "./ArrowCircleRight.svg"; import bellIcon from "./bell-icon.svg"; import briefcase from "./briefcase.svg"; +import calendar from "./calendar.svg"; import cancel from "./cancel.svg"; import cartIcon from "./cart-icon.svg"; +import clock from "./clock.svg"; import closeIcon from "./close-icon.svg"; import deleteIcon from "./delete-icon.svg"; +import globe from "./globe.svg"; import greyLinkedin from "./linkedin-grey.svg"; import menu from "./menu.svg"; import searchIcon from "./search-icon.svg"; +import tag from "./tag.svg"; import teams from "./teams.svg"; import greyTwitter from "./twitter-grey.svg"; import upleft from "./up-left.svg"; @@ -32,4 +36,8 @@ export { arrowCircleRight, greyTwitter, greyLinkedin, + calendar, + globe, + tag, + clock, }; diff --git a/src/assets/images/icons/tag.svg b/src/assets/images/icons/tag.svg new file mode 100644 index 00000000..66491254 --- /dev/null +++ b/src/assets/images/icons/tag.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/index.css b/src/index.css index 5f5ffbca..44fd47e1 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,6 @@ @import url("https://fonts.googleapis.com/css2?family=Sora&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;500;600;700;800;900&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap'); @tailwind base; @tailwind components; diff --git a/tailwind.config.js b/tailwind.config.js index d0e8bec4..264a00c2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,6 +4,11 @@ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { + fontFamily: { + spaceGrotesk: ["Space Grotesk", "sans-serif"], + poppins: ["Poppins", "sans-serif"], + sora: ["Sora", "sans-serif"], + }, backgroundImage: { landingPageBg: "url('/landing-bg.png')", },