geneza gractwa & api persons of note preparation

data/links.json

@@ -31,6 +31,10 @@
 		"href": "/o-gractwie#sklad-administracji",
 		"hrefalias": ["/profil"]
 	},
+	{
+		"href": "https://youtu.be/NNv2RHR62Rs",
+		"hrefalias": ["/pgtf-theme"]
+	},
 	{
 		"name": "Kod Źródłowy",
 		"href": "https://github.com/gractwo/gractwo-web",

pages/o-gractwie.tsx

@@ -8,14 +8,15 @@ import links from "../data/links.json";
 import { useEffect, useState } from "react";
 
 const PageInfo = () => {
-	const [adminList, setAdminList] = useState([]);
+	const [personsList, setPersonsList] = useState([]);
 	type apiResType = {
 		Id: string;
 		Name: string;
-		Desc: string;
-		Img: string;
-		DevBadge: string;
-		AssignedUser: string;
+		Desc?: string;
+		Img?: string;
+		IsAdmin?: boolean;
+		DevBadge?: boolean;
+		AssignedUser?: string;
 	};
 	useEffect(() => {
 		fetch("https://gractwo.pl/api/v1/admincards")
@@ -23,7 +24,7 @@ const PageInfo = () => {
 				return res.json();
 			})
 			.then((data) => {
-				setAdminList(data);
+				setPersonsList(data);
 			})
 			.catch((err) => {
 				console.log(err);
@@ -66,35 +67,86 @@ const PageInfo = () => {
 					</Link>
 				</div>
 			</main>
+			<main id="geneza-gractwa">
+				<h2>geneza gractwa</h2>
+				<p style={{ textAlign: "justify" }}>
+					Gractwo zostało założone w 2020 roku w odpowiedzi na{" "}
+					<Link href="/pgtf-theme">rozłam / przewrót władzy w PGTF</Link>
+					{". "}Serwer discordowy PGTF, pozostający nadal pod kontrolą naszej
+					administracji został przeniesiony w stan przejściowy do czasu podjęcia
+					decyzji o powstaniu Gractwa. W pierwszych dniach została utworzona
+					grupa facebookowa i strona internetowa. Aktywność na grupie
+					facebookowej nigdy nie rozwinęła się wystarczająco by przekształcić
+					się w pełnoprawną społeczność, ale serwer discord cały czas
+					funkcjonuje jako nasze małe, ciasne ale własne miejsce spotkań.
+				</p>
+			</main>
 			<main id="sklad-administracji">
 				<h2>skład administracji</h2>
 				<div className={styles.persons}>
-					{adminList.map((el: apiResType) => {
-						return (
-							<Link
-								key={el.Id}
-								href={`/profil/${el.Name.replaceAll(
-									" ",
-									"-"
-								).toLocaleLowerCase()}`}
-							>
-								<article>
-									<img src={el.Img} alt={`zdjęcie profilowe ${el.Name}`} />
-									<div>
-										<h3>{el.Name}</h3>
-										<p>{el.Desc || "brak opisu."}</p>
-										{el.DevBadge ? (
-											<span className={styles.devBadge}>DEV</span>
-										) : (
-											""
-										)}
-									</div>
-								</article>
-							</Link>
-						);
-					})}
+					{personsList
+						.filter((el: apiResType) => {
+							return !el.IsAdmin;
+						})
+						.map((el: apiResType) => {
+							return (
+								<Link
+									key={el.Id}
+									href={`/profil/${el.Name.replaceAll(
+										" ",
+										"-"
+									).toLocaleLowerCase()}`}
+								>
+									<article>
+										<img src={el.Img} alt={`zdjęcie profilowe ${el.Name}`} />
+										<div>
+											<h3>{el.Name}</h3>
+											<p>{el.Desc || "brak opisu."}</p>
+											{el.DevBadge ? (
+												<span className={styles.devBadge}>DEV</span>
+											) : (
+												""
+											)}
+										</div>
+									</article>
+								</Link>
+							);
+						})}
 				</div>
 			</main>
+			{/* <main id="osoby-godne-uwagi">
+				<h2>osoby godne uwagi</h2>
+				<div className={styles.persons}>
+					{personsList
+						.filter((el: apiResType) => {
+							return !el.IsAdmin;
+						})
+						.map((el: apiResType) => {
+							return (
+								<Link
+									key={el.Id}
+									href={`/profil/${el.Name.replaceAll(
+										" ",
+										"-"
+									).toLocaleLowerCase()}`}
+								>
+									<article>
+										<img src={el.Img} alt={`zdjęcia profilowe ${el.Name}`} />
+										<div>
+											<h3>{el.Name}</h3>
+											<p>{el.Desc || "brak opisu."}</p>
+											{el.DevBadge ? (
+												<span className={styles.devBadge}>DEV</span>
+											) : (
+												""
+											)}
+										</div>
+									</article>
+								</Link>
+							);
+						})}
+				</div>
+			</main> */}
 			<main id="linki">
 				<h2>linki i przekierowania</h2>
 				<div className="chips">

styles/globals.scss

@@ -39,6 +39,9 @@ main {
 	margin: 0 auto;
 	padding: 1rem;
 }
+a {
+	color: rgb(251, 99, 107);
+}
 
 .chips {
 	display: flex;

styles/oGractwie.module.scss

@@ -44,7 +44,9 @@
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	justify-content: center;
+	@media screen and (max-width: 800px) {
+		justify-content: center;
+	}
 	margin-top: 1rem;
 	gap: 1.5rem;
 	a {