Skip to content

Commit

Permalink
Merge pull request #156 from SpaceyaTech/feat/community
Browse files Browse the repository at this point in the history 
Feat/community and Gallery pages
  • Loading branch information
@JimmyTron
JimmyTron authored Apr 23, 2024
2 parents d4e856c + 451c451 commit 982ef22
Show file tree
Hide file tree
Showing 21 changed files with 594 additions and 428 deletions.
20 changes: 11 additions & 9 deletions src/APP/pages/community/CommunityPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
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(() => {
window.scrollTo(0, 0);
}, []);

return (
<div className="w-screen max-w-[1440px] mx-auto flex flex-col">
<WelcomeSection />
<EventsSection showAllEventsLink />
<ChaptersSection />
<PartnerSection />
<GallerySection />
</div>
<section className="bg-[#d9d9d9]/30 ">
<div className="max-w-[1440px] mx-auto">
<WelcomeSection />
<EventsSection showAllEventsLink />
{/* <ChaptersSection /> */}
{/* <PartnerSection /> */}
<GallerySection />
</div>
</section>
);
}

Expand Down
116 changes: 29 additions & 87 deletions src/APP/pages/community/sections/WelcomeSection.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div
className="bg-cover bg-no-repeat py-24 text-center"
style={{ backgroundImage: `url(${community}` }}
>
<div className="flex h-full items-center justify-center content-between md:px-20">
<div className="text-white max-w-4xl flex flex-col items-center">
<h2 className="mb-10 text-3xl font-medium">
Welcome to The SpaceYaTech Community
</h2>
<section className="py-16 flex items-center justify-center flex-col md:gap-10 max-w-1440 mx-auto">
{/* Hero section Description */}
<div className="px-3 md:px-0 max-w-[625px] flex flex-col items-center gap-4">
<h1 className="md:text-[40px] text-2xl leading-tight font-medium text-gray-900 text-center">
A community{" "}
<span className="text-primary">made for and by you to help you</span>
</h1>

<p className="mb-10 text-base font-medium p-2">
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.
</p>
<p className="text-sm md:text-xl font-normal leading-normal text-center">
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.
</p>

{/* <p className="mb-20 text-base font-semibold underline">
View Community Guidelines
</p> */}

<div className="flex flex-col items-center justify-center md:flex-row">
<a
href="https://discord.com/invite/T6zTMWsnnS"
target="_blank"
rel="noopener noreferrer"
className="text-white bg-[#7289DA] hover:bg-[#7289DA]/90 focus:ring-4 focus:outline-none focus:ring-[#24292F]/50 font-medium rounded-lg text-sm px-5 py-3.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 mr-6 mb-6"
>
<svg
className="w-4 h-4 mr-2"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z" />
</svg>
Join our Discord
</a>

<a
href="https://github.com/spaceyatech"
target="_blank"
rel="noopener noreferrer"
className="text-white bg-[#171515] hover:bg-[#171515]/90 focus:ring-4 focus:outline-none focus:ring-[#24292F]/50 font-medium rounded-lg text-sm px-5 py-3.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 mr-6 mb-6"
>
<svg
className="w-4 h-4 mr-2"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
clipRule="evenodd"
/>
</svg>
Explore our Github
</a>
<a
href="https://x.com/SpaceYaTech"
target="_blank"
rel="noopener noreferrer"
className="text-white bg-[#1da1f2] hover:bg-[#1da1f2]/90 focus:ring-4 focus:outline-none focus:ring-[#1da1f2]/50 font-medium rounded-lg text-sm px-5 py-3.5 text-center inline-flex items-center dark:focus:ring-[#1da1f2]/55 mr-6 mb-6"
>
<svg
className="w-4 h-4 mr-2"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 17"
>
<path
fillRule="evenodd"
d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
clipRule="evenodd"
/>
</svg>
Follow our Twitter
</a>
</div>
</div>
<Link
to="/community"
preventScrollReset
className="text-white bg-gradient-to-b to-primary from-green-dark border-0 py-3 px-4 md:px-8 focus:outline-none rounded-lg text-sm md:text-base w-fit text-center"
>
Join SpaceYaTech
</Link>
</div>
</div>
<LazyLoadImage
effect="blur"
src={NewHero}
alt="Hero"
className="w-full h-[500px] object-cover"
/>
</section>
);
}

Expand Down
86 changes: 66 additions & 20 deletions src/APP/pages/community/sections/gallerySection/GallerySection.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className="pb-8 text-center">
<h2 className="mb-10 text-3xl font-medium">Gallery</h2>
<div>
<div className="pb-10 sm:pb-24 text-center">
<div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4 my-8">
<div className="w-full h-0.5 rounded-sm bg-gray-300" />
<h3 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
Our Gallery
</h3>
<div className="w-full h-0.5 bg-gray-300" />
</div>
<h2 className="md:text-3xl text-2xl font-semibold title-font text-green-dark text-center">
A memory bank of our special
<br /> moments
</h2>
<div className="overflow-x-auto flex gap-8 mt-10">
{photosData.slice(0, 6).map((photo) => (
<LazyLoadImage
key={crypto.randomUUID()}
src={photo.src}
alt={photo.alt}
className="block h-[530px] max-w-[384px] rounded-xl object-cover object-center"
/>
))}
</div>

<Link
to="/gallery"
className="flex items-center border rounded-full bg-white p-1 w-fit mx-auto"
>
<div className="flex items-center bg-green-light rounded-full px-3 py-1.5 gap-2">
<span className="capitalize text-green-header text-sm font-semibold">
View more
</span>
<LazyLoadImage
src={arrowRight}
alt="arrow right"
className="size-5"
/>
</div>
</Link>
{/* <div>
<div className="-m-1 flex md:-m-2">
<div className="flex w-3/8 flex-wrap">
<div className="w-1/3">
Expand Down Expand Up @@ -84,8 +130,8 @@ function GallerySection() {
</div>
</div>
</div>
</div>
<div className="flex items-center justify-center gap-2 mt-8">
</div> */}
{/* <div className="flex items-center justify-center gap-2 mt-8">
<Link
to="/gallery"
// "https://photos.google.com/share/AF1QipMS-aFHdarbFZVIYs7kOFkWL5Cit3EEXG2CbwU0K0wq-8Fw93Akn-IxfAdYSKYb2g?pli=1&key=d2wwd1VtUHdhN29INDVmb1YxN0xtNHpaV2t6LUtB"
Expand All @@ -107,7 +153,7 @@ function GallerySection() {
/>
</svg>
</Link>
</div>
</div> */}
</div>
);
}
Expand Down
Loading

0 comments on commit 982ef22

Please sign in to comment.