Skip to content

Commit dc64a7a

Browse files
micahdbakNakul727
micahdbak
and
Nakul727
authored
Add Documents and Affiliates pages (#60)
--------- Co-authored-by: Nakul Bansal <[email protected]> Co-authored-by: Nakul Bansal <[email protected]>
1 parent e4c10ad commit dc64a7a

File tree

16 files changed

+208
-6
lines changed

16 files changed

+208
-6
lines changed

‎public/static/files/main/dsss.png

10.9 KB
Loading

‎public/static/files/main/esss.png

21.9 KB
Loading

‎public/static/files/main/msess.png

9.8 KB
Loading

‎public/static/files/main/msu.png

11 KB
Loading

‎public/static/files/main/seess.png

23 KB
Loading

‎public/static/files/main/ssss.png

21.3 KB
Loading

‎public/static/files/main/wics.png

31.5 KB
Loading

‎public/static/files/main/wie.png

26.7 KB
Loading

‎src/main/components/Footer.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from '@fortawesome/free-brands-svg-icons';
99
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
1010

11-
const Footer = () => {
11+
export const Footer = () => {
1212
return (
1313
<footer className="bg-zinc-950 text-white py-8 mt-8">
1414
<div className="max-w-4xl mx-auto px-4">
@@ -58,5 +58,3 @@ const Footer = () => {
5858
</footer>
5959
);
6060
};
61-
62-
export default Footer;

‎src/main/components/Page.js

+5
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ export const Page = ({ children }) => {
3131
<VSCode.NavItem text="README.md" to="/" />
3232
<VSCode.NavFolder text="The CSSS">
3333
<VSCode.NavItem isInFolder={true} text="About.md" to="/about" />
34+
<VSCode.NavItem
35+
isInFolder={true}
36+
text="Affiliates.md"
37+
to="/affiliates"
38+
/>
3439
<VSCode.NavItem
3540
isInFolder={true}
3641
text="Common Rooms.md"

‎src/main/components/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from './Page.js';
2+
export * from './Footer.js';

‎src/main/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import React from 'react';
22
import { createRoot } from 'react-dom/client';
33
import { createHashRouter, RouterProvider } from 'react-router-dom';
44

5-
import { Home, Profile, NotFound } from './pages';
5+
import { Home, Profile, NotFound, Affiliates, Documents } from './pages';
66

77
const router = createHashRouter([
88
{ path: '/', element: <Home /> },
99
{ path: '/profile', element: <Profile /> },
10+
{ path: '/affiliates', element: <Affiliates /> },
11+
{ path: '/documents', element: <Documents /> },
1012
{ path: '*', element: <NotFound /> }
1113
]);
1214

‎src/main/pages/Affiliates.js

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React from 'react';
2+
import { Page, Footer } from '../components';
3+
import { useSpring, animated } from 'react-spring';
4+
5+
// Affiliates data
6+
const affiliates = [
7+
{
8+
text: 'WiCS',
9+
image: '/static/files/main/wics.png',
10+
link: 'https://www.sfu.ca/computing/wics/'
11+
},
12+
{
13+
text: 'SSSS',
14+
image: '/static/files/main/ssss.png',
15+
link: 'https://sfussss.org/'
16+
},
17+
{
18+
text: 'ESSS',
19+
image: '/static/files/main/esss.png',
20+
link: 'https://www.sfu.ca/esss/?page=home'
21+
},
22+
{
23+
text: 'WiE',
24+
image: '/static/files/main/wie.png',
25+
link: 'https://www.sfu.ca/clubs/wie.html'
26+
},
27+
{
28+
text: 'MSESS',
29+
image: '/static/files/main/msess.png',
30+
link: 'https://msess.ca/'
31+
},
32+
{
33+
text: 'SEE',
34+
image: '/static/files/main/seess.png',
35+
link: 'https://seess.ca/'
36+
},
37+
{
38+
text: 'DSSS',
39+
image: '/static/files/main/dsss.png',
40+
link: 'https://discord.com/invite/kdj7F82mgn'
41+
},
42+
{
43+
text: 'MSU',
44+
image: '/static/files/main/msu.png',
45+
link: 'https://sfumsu.github.io/'
46+
}
47+
];
48+
49+
export const Affiliates = () => {
50+
return (
51+
<Page>
52+
<div className="p-16 max-w-4xl mx-auto">
53+
<h1
54+
className="text-3xl sm:text-4xl md:text-5xl font-bold text-center mb-4"
55+
style={{ fontFamily: 'Poppins, sans-serif' }}
56+
>
57+
Affiliates
58+
</h1>
59+
<p
60+
className="flex items-center justify-center text-lg sm:text-xl md:text-2xl mb-8"
61+
style={{ fontFamily: 'Poppins, sans-serif' }}
62+
>
63+
Links to our affiliated organizations.
64+
</p>
65+
66+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
67+
{affiliates.map((affiliate, index) => (
68+
<a key={index} href={affiliate.link} target="_blank">
69+
<div className="relative w-full h-80 overflow-hidden rounded-2xl shadow-lg transform transition-transform duration-300 hover:scale-105">
70+
<img
71+
src={affiliate.image}
72+
alt={affiliate.text}
73+
className="absolute inset-0 w-full h-full object-cover"
74+
/>
75+
<div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-90"></div>
76+
<div className="absolute inset-x-0 bottom-0 flex items-center justify-center pb-8">
77+
<h2
78+
className="text-lg sm:text-xl md:text-2xl font-bold text-white"
79+
style={{ fontFamily: 'Poppins, sans-serif' }}
80+
>
81+
{affiliate.text}
82+
</h2>
83+
</div>
84+
</div>
85+
</a>
86+
))}
87+
</div>
88+
</div>
89+
<Footer />
90+
</Page>
91+
);
92+
};

‎src/main/pages/Documents.js

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React from 'react';
2+
import { Page, Footer } from '../components';
3+
4+
export const Documents = () => {
5+
return (
6+
<Page>
7+
<div className="px-16 py-12 max-w-4xl mx-auto">
8+
<h1
9+
className="text-3xl sm:text-4xl md:text-5xl font-bold text-center mb-12"
10+
style={{ fontFamily: 'Poppins, sans-serif' }}
11+
>
12+
Documents
13+
</h1>
14+
<p
15+
className="text-lg sm:text-xl md:text-2xl mb-12"
16+
style={{ fontFamily: 'Poppins, sans-serif' }}
17+
>
18+
Welcome to our document repository. Here, you can access the two key
19+
CSSS documents: The Constitution and Policies. Simply click on the
20+
links below to download them.
21+
</p>
22+
23+
{/* CSS Documents */}
24+
<div className="flex flex-wrap justify-center gap-8 mb-12">
25+
<a
26+
href="https://raw.githubusercontent.com/CSSS/public-docs/dev-update-constitution-policies/constitutions/Constitution_July_2024.pdf"
27+
download
28+
className="relative flex-grow w-full sm:w-1/2 md:w-1/3"
29+
>
30+
<div className="relative w-full px-4 py-6 rounded flex flex-col items-center justify-center">
31+
<svg
32+
xmlns="http://www.w3.org/2000/svg"
33+
viewBox="0 0 64 64"
34+
fill="none"
35+
stroke="#cfcfcf"
36+
className="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24"
37+
>
38+
<polyline points="44 8 44 16 52 16" />
39+
<polygon points="52 16 44 8 12 8 12 56 52 56 52 16" />
40+
<line x1="20" y1="20" x2="28" y2="20" />
41+
<line x1="20" y1="28" x2="44" y2="28" />
42+
<line x1="36" y1="36" x2="20" y2="36" />
43+
<line x1="20" y1="44" x2="44" y2="44" />
44+
</svg>
45+
<p className="mb-2 text-lg text-center sm:text-xl md:text-2xl">
46+
Download Constitution
47+
</p>
48+
<p className="text-sm">July 2024</p>
49+
<div className="absolute inset-0 rounded-xl hover:bg-gray-200 opacity-10 transition-opacity duration-300"></div>
50+
</div>
51+
</a>
52+
<a
53+
href="https://raw.githubusercontent.com/CSSS/public-docs/dev-update-constitution-policies/policies/Policies_July_2024.pdf"
54+
download
55+
className="relative flex-grow w-full sm:w-1/2 md:w-1/3"
56+
>
57+
<div className="relative w-full px-4 py-6 rounded flex flex-col items-center justify-center">
58+
<svg
59+
xmlns="http://www.w3.org/2000/svg"
60+
viewBox="0 0 64 64"
61+
fill="none"
62+
stroke="#cfcfcf"
63+
className="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24"
64+
>
65+
<polyline points="44 8 44 16 52 16" />
66+
<polygon points="52 16 44 8 12 8 12 56 52 56 52 16" />
67+
<line x1="20" y1="20" x2="28" y2="20" />
68+
<line x1="20" y1="28" x2="44" y2="28" />
69+
<line x1="36" y1="36" x2="20" y2="36" />
70+
<line x1="20" y1="44" x2="44" y2="44" />
71+
</svg>
72+
<p className="mb-2 text-lg text-center sm:text-xl md:text-2xl">
73+
Download Policies
74+
</p>
75+
<p className="text-sm">July 2024</p>
76+
<div className="absolute inset-0 rounded-xl hover:bg-gray-200 opacity-10 transition-opacity duration-300"></div>
77+
</div>
78+
</a>
79+
</div>
80+
81+
<p
82+
className="text-lg sm:text-xl md:text-2xl leading-relaxed text-left"
83+
style={{ fontFamily: 'Poppins, sans-serif' }}
84+
>
85+
For those who want to stay up-to-date, we also provide access to the
86+
General Meeting Minutes. These are updated weekly and are available in
87+
our
88+
<a
89+
href="https://github.com/CSSS/minutes"
90+
target="_blank"
91+
rel="noopener noreferrer"
92+
className="text-blue-500 hover:text-blue-700 ml-1"
93+
style={{ fontFamily: 'Poppins, sans-serif' }}
94+
>
95+
GitHub repository
96+
</a>
97+
.
98+
</p>
99+
</div>
100+
<Footer />
101+
</Page>
102+
);
103+
};

‎src/main/pages/Home.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState } from 'react';
2-
import { Page } from '../components';
2+
import { Page, Footer } from '../components';
33
import { useSpring, animated } from 'react-spring';
44
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
55
import {
@@ -9,7 +9,6 @@ import {
99
faLinkedin
1010
} from '@fortawesome/free-brands-svg-icons';
1111
import { faEnvelope, faArrowDown } from '@fortawesome/free-solid-svg-icons';
12-
import Footer from '../components/Footer';
1312

1413
// Updated images and routes
1514
const sections = [

‎src/main/pages/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
export * from './Home.js';
22
export * from './NotFound.js';
33
export * from './Profile.js';
4+
export * from './Affiliates.js';
5+
export * from './Documents.js';

0 commit comments

Comments
 (0)