Skip to content

Commit

Permalink
Merge pull request #117 from SpaceyaTech/gallery-page-build
Browse files Browse the repository at this point in the history
Gallery page build
  • Loading branch information
Ase020 authored Jan 24, 2024
2 parents 327bc73 + bd4f643 commit be21b91
Show file tree
Hide file tree
Showing 11 changed files with 530 additions and 54 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,12 @@
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.6.2",
"react-hook-form": "^7.48.2",
"react-photo-album": "^2.3.0",
"react-query": "^3.39.3",
"react-router-dom": "^6.11.2",
"react-simple-wysiwyg": "^2.2.5",
"tailwind-scrollbar-hide": "^1.1.7",
"yet-another-react-lightbox": "^3.15.6",
"yup": "^1.3.2"
},
"devDependencies": {
Expand Down
92 changes: 58 additions & 34 deletions src/APP/components/Footer2.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
twitter,
spotify,
youtube,
instagram,
facebook,
} from "../../assets/images/socials";

function Footer2() {
Expand All @@ -16,8 +18,8 @@ function Footer2() {
return (
<footer className="bg-[#252533] text-white ">
<div className="md:p-12 py-8 px-4 relative max-w-[1440px] mx-auto">
<div className="flex lg:flex-row flex-col md:gap-16 gap-8 ">
<div className="flex-3 flex flex-col lg:items-center items-start">
<div className="flex lg:flex-row flex-col md:gap-16 gap-8">
<div className="flex-3 flex flex-col sm:items-start items-center">
{/* logo */}
<img
src={logo}
Expand All @@ -26,38 +28,55 @@ function Footer2() {
/>

{/* socials */}
<div className="flex items-center md:gap-5 gap-3 py-4">
<a
href="https://x.com/SpaceYaTech"
target="_blank"
rel="noopener noreferrer"
>
<img src={twitter} alt="twitter" className="w-7 h-7" />
</a>

<a
href="https://linkedin.com/company/spaceyatech"
target="_blank"
rel="noopener noreferrer"
>
<img src={linkedin} alt="linkedin" className="w-7 h-7" />
</a>

<a
href="https://www.youtube.com/@spaceyatech"
target="_blank"
rel="noopener noreferrer"
>
<img src={youtube} alt="youtube" className="w-7 h-7" />
</a>

<a
href="https://open.spotify.com/show/4nUYzhacDAw1v9ClqPY89n"
target="_blank"
rel="noopener noreferrer"
>
<img src={spotify} alt="spotify" className="w-7 h-7" />
</a>
<div className="flex flex-col items-center">
<div className="flex items-center md:gap-5 gap-3 py-4">
<a
href="https://www.facebook.com/spaceyatech"
target="_blank"
rel="noopener noreferrer"
>
<img src={facebook} alt="facebook" className="w-7 h-7" />
</a>
<a
href="https://www.instagram.com/spaceyatech/"
target="_blank"
rel="noopener noreferrer"
>
<img src={instagram} alt="instagram" className="w-7 h-7" />
</a>
<a
href="https://x.com/SpaceYaTech"
target="_blank"
rel="noopener noreferrer"
>
<img src={twitter} alt="twitter" className="w-7 h-7" />
</a>

<a
href="https://linkedin.com/company/spaceyatech"
target="_blank"
rel="noopener noreferrer"
>
<img src={linkedin} alt="linkedin" className="w-7 h-7" />
</a>
</div>
<div className="flex items-center md:gap-5 gap-3">
<a
href="https://www.youtube.com/@spaceyatech"
target="_blank"
rel="noopener noreferrer"
>
<img src={youtube} alt="youtube" className="w-7 h-7" />
</a>

<a
href="https://open.spotify.com/show/4nUYzhacDAw1v9ClqPY89n"
target="_blank"
rel="noopener noreferrer"
>
<img src={spotify} alt="spotify" className="w-7 h-7" />
</a>
</div>
</div>
</div>

Expand Down Expand Up @@ -103,6 +122,11 @@ function Footer2() {
Mentorship
</a>
</li>
<li>
<a href="/gallery" className="hover:underline text-white">
Gallery
</a>
</li>
</ul>
</div>

Expand Down
2 changes: 2 additions & 0 deletions src/APP/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import Error403 from "./pages/errorPages/Error403";
import Error404 from "./pages/errorPages/Error404";
import Error500 from "./pages/errorPages/Error500";
import ProductDisplay from "./pages/shop/pages/ProductDisplay";
import GalleryPage from "./pages/gallery/GalleryPage";

export {
LandingPage,
Expand All @@ -46,4 +47,5 @@ export {
Error404,
Error500,
ProductDisplay,
GalleryPage,
};
1 change: 0 additions & 1 deletion src/APP/pages/aboutUs/sections/PartnerCTA.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ function PartnerCTA() {
<p>
<a
href="/src/assets/reports/spaceyatech-internship-program.pdf"
download="SpaceYaTech_Internship_Program_2023.pdf"
target="_blank"
rel="noopener noreferrer"
className="text-primary text-sm sm:text-base"
Expand Down
40 changes: 21 additions & 19 deletions src/APP/pages/community/sections/gallerySection/GallerySection.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable react/prop-types */

import React from "react";
import { Link } from "react-router-dom";
import {
galleryimage1,
galleryimage2,
Expand Down Expand Up @@ -84,26 +85,27 @@ function GallerySection() {
</div>
</div>
<div className="flex items-center justify-center gap-2 mt-8">
<a
href="https://photos.google.com/share/AF1QipMS-aFHdarbFZVIYs7kOFkWL5Cit3EEXG2CbwU0K0wq-8Fw93Akn-IxfAdYSKYb2g?pli=1&key=d2wwd1VtUHdhN29INDVmb1YxN0xtNHpaV2t6LUtB"
target="_blank"
rel="noopener noreferrer"
className="text-lg text-primary text-center font-normal hover:underline"
<Link
to="/gallery"
// "https://photos.google.com/share/AF1QipMS-aFHdarbFZVIYs7kOFkWL5Cit3EEXG2CbwU0K0wq-8Fw93Akn-IxfAdYSKYb2g?pli=1&key=d2wwd1VtUHdhN29INDVmb1YxN0xtNHpaV2t6LUtB"
// target="_blank"
// rel="noopener noreferrer"
className="text-lg text-primary text-center flex items-center gap-2 font-normal hover:underline"
>
View More{" "}
</a>
<svg
width="16"
height="14"
viewBox="0 0 16 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.3172 7.44254L9.69219 13.0675C9.57491 13.1848 9.41585 13.2507 9.25 13.2507C9.08415 13.2507 8.92509 13.1848 8.80781 13.0675C8.69054 12.9503 8.62465 12.7912 8.62465 12.6253C8.62465 12.4595 8.69054 12.3004 8.80781 12.1832L13.3664 7.62535H1.125C0.95924 7.62535 0.800269 7.5595 0.683058 7.44229C0.565848 7.32508 0.5 7.16611 0.5 7.00035C0.5 6.83459 0.565848 6.67562 0.683058 6.55841C0.800269 6.4412 0.95924 6.37535 1.125 6.37535H13.3664L8.80781 1.81753C8.69054 1.70026 8.62465 1.5412 8.62465 1.37535C8.62465 1.2095 8.69054 1.05044 8.80781 0.93316C8.92509 0.815885 9.08415 0.75 9.25 0.75C9.41585 0.75 9.57491 0.815885 9.69219 0.93316L15.3172 6.55816C15.3753 6.61621 15.4214 6.68514 15.4529 6.76101C15.4843 6.83688 15.5005 6.91821 15.5005 7.00035C15.5005 7.08248 15.4843 7.16381 15.4529 7.23969C15.4214 7.31556 15.3753 7.38449 15.3172 7.44254Z"
fill="#009975"
/>
</svg>
<svg
width="16"
height="14"
viewBox="0 0 16 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.3172 7.44254L9.69219 13.0675C9.57491 13.1848 9.41585 13.2507 9.25 13.2507C9.08415 13.2507 8.92509 13.1848 8.80781 13.0675C8.69054 12.9503 8.62465 12.7912 8.62465 12.6253C8.62465 12.4595 8.69054 12.3004 8.80781 12.1832L13.3664 7.62535H1.125C0.95924 7.62535 0.800269 7.5595 0.683058 7.44229C0.565848 7.32508 0.5 7.16611 0.5 7.00035C0.5 6.83459 0.565848 6.67562 0.683058 6.55841C0.800269 6.4412 0.95924 6.37535 1.125 6.37535H13.3664L8.80781 1.81753C8.69054 1.70026 8.62465 1.5412 8.62465 1.37535C8.62465 1.2095 8.69054 1.05044 8.80781 0.93316C8.92509 0.815885 9.08415 0.75 9.25 0.75C9.41585 0.75 9.57491 0.815885 9.69219 0.93316L15.3172 6.55816C15.3753 6.61621 15.4214 6.68514 15.4529 6.76101C15.4843 6.83688 15.5005 6.91821 15.5005 7.00035C15.5005 7.08248 15.4843 7.16381 15.4529 7.23969C15.4214 7.31556 15.3753 7.38449 15.3172 7.44254Z"
fill="#009975"
/>
</svg>
</Link>
</div>
</div>
);
Expand Down
85 changes: 85 additions & 0 deletions src/APP/pages/gallery/GalleryPage.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";

import photosData from "./data";
import ImageCard from "./sections/ImageCard";
import processPhotos from "../../../utilities/processPhotos";

function GalleryPage() {
const [isActive, setIsActive] = useState(false);

const photos = processPhotos(photosData);

return (
<main className="max-w-[1440px] mx-auto flex flex-col gap-8 ">
<div className="flex flex-col gap-2 pt-2 px-5 md:px-10">
<Link
to="/community"
className="flex items-center gap-1 text-sm font-medium"
onMouseEnter={() => setIsActive(true)}
onMouseLeave={() => setIsActive(false)}
>
{isActive ? (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.68281 10.4425L8.30781 16.0675C8.42509 16.1848 8.58415 16.2507 8.75 16.2507C8.91585 16.2507 9.07491 16.1848 9.19219 16.0675C9.30946 15.9503 9.37535 15.7912 9.37535 15.6253C9.37535 15.4595 9.30946 15.3004 9.19219 15.1832L4.63359 10.6253H16.875C17.0408 10.6253 17.1997 10.5595 17.3169 10.4423C17.4342 10.3251 17.5 10.1661 17.5 10.0003C17.5 9.83459 17.4342 9.67562 17.3169 9.55841C17.1997 9.4412 17.0408 9.37535 16.875 9.37535H4.63359L9.19219 4.81753C9.30946 4.70026 9.37535 4.5412 9.37535 4.37535C9.37535 4.2095 9.30946 4.05044 9.19219 3.93316C9.07491 3.81588 8.91585 3.75 8.75 3.75C8.58415 3.75 8.42509 3.81588 8.30781 3.93316L2.68281 9.55816C2.6247 9.61621 2.5786 9.68514 2.54715 9.76101C2.5157 9.83688 2.49951 9.91821 2.49951 10.0003C2.49951 10.0825 2.5157 10.1638 2.54715 10.2397C2.5786 10.3156 2.6247 10.3845 2.68281 10.4425Z"
fill="#009975"
/>
</svg>
) : (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.68281 10.4425L8.30781 16.0675C8.42509 16.1848 8.58415 16.2507 8.75 16.2507C8.91585 16.2507 9.07491 16.1848 9.19219 16.0675C9.30946 15.9503 9.37535 15.7912 9.37535 15.6253C9.37535 15.4595 9.30946 15.3004 9.19219 15.1832L4.63359 10.6253H16.875C17.0408 10.6253 17.1997 10.5595 17.3169 10.4423C17.4342 10.3251 17.5 10.1661 17.5 10.0003C17.5 9.83459 17.4342 9.67562 17.3169 9.55841C17.1997 9.4412 17.0408 9.37535 16.875 9.37535H4.63359L9.19219 4.81753C9.30946 4.70026 9.37535 4.5412 9.37535 4.37535C9.37535 4.2095 9.30946 4.05044 9.19219 3.93316C9.07491 3.81588 8.91585 3.75 8.75 3.75C8.58415 3.75 8.42509 3.81588 8.30781 3.93316L2.68281 9.55816C2.6247 9.61621 2.5786 9.68514 2.54715 9.76101C2.5157 9.83688 2.49951 9.91821 2.49951 10.0003C2.49951 10.0825 2.5157 10.1638 2.54715 10.2397C2.5786 10.3156 2.6247 10.3845 2.68281 10.4425Z"
fill="#323433"
/>
</svg>
)}

<span
className={`${
isActive ? "text-[#009975]" : "text-black"
} text-base`}
>
BACK
</span>
</Link>

<div className="flex flex-col gap-3 items-center text-center mt-5 md:items-start md:text-left max-w-4xl">
<h3 className="text-3xl font-normal">SpaceYaTech Gallery</h3>

<p className="text-base font-normal text-[#323433]">
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>
</div>
</div>

{/* <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-0 grid-flow-dense">
{photosData.map((photo) => (
<ImageCard key={photo.id} photo={photo} />
))}
</div> */}

<div className="overflow-y-auto h-full">
<ImageCard photos={photos} />
</div>
</main>
);
}

export default GalleryPage;
Loading

0 comments on commit be21b91

Please sign in to comment.