start /o-gractwie content fill + icons

pages/index.tsx

@@ -21,7 +21,6 @@ const PageIndex = () => {
 				return res.text();
 			})
 			.then((data) => {
-				console.log(data);
 				setMemberCount(data);
 			})
 			.catch((err) => {
@@ -41,8 +40,6 @@ const PageIndex = () => {
 						„{splash || "..."}”
 					</h1>
 					<p>{welcometext}</p>
-					<br />
-					<p>Warto naznaczyć, że strona jest w trakcie remontu.</p>
 				</div>
 			</div>
 			<div className={styles.statscontainer}>
@@ -65,17 +62,17 @@ const PageIndex = () => {
 					</article>
 				</main>
 			</div>
-			<main className={styles.chips}>
-				<Link href="/discord" className={styles.chip}>
+			<main className="chips">
+				<Link href="/discord" className="chip">
 					discord <Icon icon={IconSet.Discord} />
 				</Link>
-				<Link href="/youtube" className={styles.chip}>
+				<Link href="/youtube" className="chip">
 					youtube <Icon icon={IconSet.YouTube} />
 				</Link>
-				<Link href="/twitter" className={styles.chip}>
+				<Link href="/twitter" className="chip">
 					twitter <Icon icon={IconSet.Twitter} />
 				</Link>
-				<Link href="/github" className={styles.chip}>
+				<Link href="/github" className="chip">
 					github <Icon icon={IconSet.GitHub} />
 				</Link>
 			</main>

pages/o-gractwie.tsx

@@ -1,10 +1,76 @@
+import { GractwoLogo } from "../components/Logo";
 import { SEO } from "../components/SEO";
+import styles from "../styles/oGractwie.module.scss";
+import Link from "next/link";
+import { Icon, IconSet } from "../components/Icon";
+import administracja from "../data/administracja.json";
+import links from "../data/links.json";
 
 const PageInfo = () => {
 	return (
 		<>
 			<SEO title="o gractwie" />
-			<main>Miejsce na stronkę od informacji nt. Gractwa.</main>
+			<main>
+				<div className={styles.biglogocontainer}>
+					<GractwoLogo />
+					<article>
+						<h1>
+							<GractwoLogo />
+							Gractwo
+						</h1>
+						<p style={{ textAlign: "justify" }}>
+							Gractwo jest nieformalną organizacją i społecznością osób
+							zainteresowanych grami, anime, popkulturą. Powstałe w 2020 roku
+							jest zreszeniem ludzi w dużej mierze znających się nawzajem i
+							spędzających razem „na Gractwie” czas. Genezą nazwy jest złączenie
+							słów „Gracz” i „Bractwo”.
+							{/* discordowa społeczność kryptogenshinowa która jest yyy często
+							charakteryzuje się łączeniem przez relacje interpersonalne
+							kluczowych członków, chyba że jeszcze bardziej chcemy ukrywać
+							naszą kryptogenshinowość */}
+							{/* THANKS, MOLLIN */}
+						</p>
+					</article>
+				</div>
+				{/* <div className="chips">
+					<Link href="#sklad-administracji" className="chip">
+						skład administracji
+						<Icon icon={IconSet.Users} />
+					</Link>
+					<Link href="#linki" className="chip">
+						linki i przekierowania
+						<Icon icon={IconSet.Link2} />
+					</Link>
+				</div> */}
+			</main>
+			<main id="sklad-administracji">
+				<h2>skład administracji</h2>
+				<div className={styles.persons}>
+					{administracja.map((el) => {
+						return (
+							<article>
+								<img src={el.img} alt={`zdjęcie profilowe ${el.name}`} />
+								<div>
+									<h3>{el.name}</h3>
+									<p>{el.desc || "brak opisu."}</p>
+								</div>
+							</article>
+						);
+					})}
+				</div>
+			</main>
+			{/* <main id="linki">
+				<h2>linki i przekierowania</h2>
+				<div className="chips">
+					{links.map((el) => {
+						return (
+							<Link className="chip" href={el.href}>
+								{el.name}
+							</Link>
+						);
+					})}
+				</div>
+			</main> */}
 		</>
 	);
 };