Add basic content

app/components/Book.tsx

@@ -0,0 +1,46 @@
+import type { PropsWithChildren } from "react";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+
+interface Props extends PropsWithChildren<{}> {
+  title: string;
+  subtitle: string;
+  author: string;
+  href: string;
+  cover: string;
+}
+
+export default function Function({
+  title,
+  subtitle,
+  author,
+  href,
+  cover,
+  children,
+}: Props) {
+  return (
+    <article>
+      <div className="sr-only">
+        <h2>{title}</h2>
+        <h3>{subtitle}</h3>
+        <div>{author}</div>
+      </div>
+      <a
+        href={href}
+        target="_blank"
+        rel="noreferrer"
+        className="group aspect-h-[500] aspect-w-[332] relative block overflow-hidden rounded-xl ring ring-transparent transition hover:ring-red-500 hover:ring-offset-2 dark:ring-offset-stone-900 dark:hover:ring-red-400"
+        aria-label="Pogledaj na Amazonu"
+      >
+        <div>
+          <img alt="" src={cover} className="absolute inset-0 object-cover" />
+          <div className="absolute right-0 top-0 rounded-bl-lg border-b border-l border-black/10 bg-black/30 p-1 transition-colors group-hover:bg-red-500">
+            <ArrowTopRightOnSquareIcon
+              aria-hidden="true"
+              className="h-6 w-6 text-white"
+            />
+          </div>
+        </div>
+      </a>
+    </article>
+  );
+}

app/components/Header.tsx

@@ -0,0 +1,24 @@
+import { Link } from "@remix-run/react";
+import Logo from "./Logo";
+
+export default function Header() {
+  return (
+    <header className="bg-fancy-gradient relative px-4 pb-6 pt-[clamp(theme(spacing.20),15vw,theme(spacing.28))] text-center text-white lg:pb-8">
+      <div className="absolute inset-x-0 top-4 flex justify-center">
+        <div className="w-[clamp(100px,20vw,180px)]">
+          <div className="aspect-h-[299] aspect-w-[270]">
+            <Logo aria-label="logo" className="fade-out" />
+          </div>
+        </div>
+      </div>
+      <div className="relative space-y-2 sm:space-y-2 lg:space-y-3">
+        <div className="text-[min(theme(fontSize.5xl),14vw)] font-black leading-[1] drop-shadow md:text-6xl lg:text-7xl">
+          <Link to="/">Poly Zagreb</Link>
+        </div>
+        <div className="text-sm tracking-wider text-red-200 sm:text-base md:text-lg lg:text-xl">
+          Poliamorna zajednica u Zagrebu
+        </div>
+      </div>
+    </header>
+  );
+}

app/components/Logo.tsx

@@ -0,0 +1,16 @@
+type Props = React.SVGProps<SVGSVGElement>;
+
+export default function Logo(props: Props) {
+  return (
+    <svg viewBox="0 0 270 299" width="270" height="299" {...props}>
+      <path
+        className="fill-red-400"
+        d="M160.688,202.073c9.792,6.139 21.276,9.03 32.608,8.799c-9.722,10.389 -19.244,20.804 -27.804,31.668c-6.34,8.046 -12.237,16.459 -16.719,25.709l-0.276,0.578l-13.807,29.311c-7.459,-16.016 -14.02,-32.583 -24.097,-47.024c-9.84,-14.099 -21.289,-27.029 -33.061,-39.791c0.868,0.065 1.74,0.109 2.613,0.134c11.249,0.32 21.504,-2.754 30.561,-7.968c8.464,9.496 16.621,19.262 24.003,29.718l0.125,0.179c0.382,-0.539 0.768,-1.075 1.154,-1.61c7.597,-10.468 16,-20.204 24.7,-29.703Zm-109.975,-68.425c5.094,7.592 10.773,14.813 16.541,21.746c4.761,5.721 9.689,11.291 14.692,16.793c-5.494,1.439 -11.232,1.353 -16.607,-0.592c-15.101,-5.464 -21.05,-24.373 -14.626,-37.947Zm169.359,-0.654c2.25,5.703 2.727,12.115 1.256,18.001c-3.749,14.995 -17.984,21.031 -32.032,20.477c10.993,-12.024 21.588,-24.521 30.776,-38.478Zm-200.925,6.531c-10.632,-18.511 -18.011,-39.091 -18.095,-60.848l-0.001,0c-0,-32.352 21.729,-64.84 53.688,-74.601c6.921,-2.114 14.227,-3.154 21.387,-3.11c18.593,0.236 35.468,12.647 47.25,25.694c4.299,4.761 8.24,9.834 11.913,15.088c13.954,-19.741 32.362,-38.61 56.239,-40.39c32.659,-2.435 65.586,22.246 74.919,55.662c5.763,20.636 2.431,43.383 -5.569,63.188c-2.802,6.935 -6.103,13.567 -9.795,19.957c-0.1,-1.677 -0.248,-3.35 -0.441,-5.015c-1.528,-13.124 -6.921,-24.895 -14.757,-34.322c2.184,-7.203 3.466,-14.67 3.465,-22.316c-0.001,-23.541 -18.769,-46.53 -43.296,-47.235c-9.404,-0.27 -17.773,6.527 -24.584,13.542c-9.203,9.479 -16.734,20.662 -22.69,32.358l-13.657,27.417c-11.839,-24.09 -21.889,-50.313 -43.932,-67.088c-1.457,-1.109 -2.97,-2.144 -4.55,-3.064c-3.433,-1.997 -7.191,-3.452 -11.181,-3.451c-18.024,0.125 -34.706,12.937 -41.152,30.028c-4.321,11.455 -3.737,24.143 -0.963,35.398c0.221,0.898 0.456,1.791 0.704,2.679c-8.904,11.137 -13.99,25.612 -14.902,40.429Z"
+      />
+      <path
+        className="fill-red-400/60"
+        d="M145.617,152.715c5.57,8.815 12.163,15.471 19.784,19.98c7.614,4.505 16.201,6.761 25.749,6.761c11.487,-0 20.867,-3.359 28.143,-10.066c7.276,-6.812 10.916,-15.475 10.916,-25.989c-0,-10.113 -3.355,-18.526 -10.063,-25.234c-6.71,-6.71 -15.124,-10.065 -25.243,-10.065c-9.32,-0 -17.794,3.405 -25.411,10.214c-7.503,6.71 -15.462,18.176 -23.875,34.399m-20.808,-16.072c-5.57,-8.814 -12.163,-15.424 -19.784,-19.828c-7.503,-4.407 -16.087,-6.609 -25.748,-6.609c-11.602,-0 -21.039,3.304 -28.315,9.914c-7.162,6.609 -10.742,15.222 -10.742,25.837c0,10.113 3.353,18.527 10.06,25.234c6.71,6.71 15.124,10.066 25.243,10.066c9.32,-0 17.794,-3.406 25.411,-10.215c7.614,-6.811 15.576,-18.277 23.875,-34.399m12.11,27.487c-7.961,13.522 -16.429,23.486 -25.411,29.894c-8.868,6.309 -18.646,9.462 -29.334,9.462c-15.465,-0 -28.482,-5.557 -39.056,-16.672c-10.575,-11.216 -15.86,-25.136 -15.86,-41.761c-0,-17.525 4.717,-31.694 14.154,-42.509c9.55,-10.814 21.945,-16.223 37.179,-16.223c10.802,-0 20.523,3.156 29.164,9.462c8.755,6.309 17.225,16.375 25.411,30.194c7.731,-13.819 16.087,-23.983 25.069,-30.494c8.982,-6.609 18.988,-9.914 30.018,-9.914c15.234,-0 28.197,5.658 38.885,16.975c10.688,11.216 16.031,25.187 16.031,41.909c-0,17.525 -4.774,31.644 -14.325,42.361c-9.437,10.717 -21.774,16.072 -37.009,16.072c-10.688,-0 -20.296,-2.954 -28.823,-8.862c-8.413,-6.009 -17.111,-15.974 -26.096,-29.891"
+      />
+    </svg>
+  );
+}

app/components/MeetupCard.tsx

@@ -0,0 +1,31 @@
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+
+export default function MeetupCard() {
+  return (
+    <a
+      href="https://www.meetup.com/poly-zagreb/"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="block w-64 max-w-full overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black/10 transition hover:text-red-700 hover:shadow-red-700/20 hover:ring-red-900/20 dark:bg-stone-800 dark:shadow-none dark:ring-white/20 dark:hover:text-white dark:hover:ring-white/40"
+      aria-label="Poly Zagreb Meetup"
+    >
+      <div className="relative">
+        <img alt="" src="/meetup-cover.jpg" />
+        <img
+          alt="meetup"
+          src="/meetup.svg"
+          className="absolute bottom-2 right-4 w-20"
+        />
+        <ArrowTopRightOnSquareIcon
+          aria-hidden="true"
+          className="absolute right-2 top-2 h-6 w-6 text-white"
+        />
+      </div>
+      <div className="py-3 text-center">
+        <h2 className="text-center font-medium uppercase tracking-wider md:text-lg">
+          Poly Zagreb
+        </h2>
+      </div>
+    </a>
+  );
+}

app/components/NavBar.tsx

@@ -0,0 +1,41 @@
+import { NavLink } from "@remix-run/react";
+import type { ComponentPropsWithoutRef } from "react";
+import clsx from "clsx";
+
+function NavigationLink({
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof NavLink>) {
+  return (
+    <div className="relative">
+      <NavLink
+        {...props}
+        className={({ isActive }) =>
+          clsx(
+            "peer block px-2 py-3 text-sm font-medium sm:px-3 sm:py-4 sm:text-base md:text-lg lg:py-4",
+            props.className,
+            isActive
+              ? "text-red-600 dark:text-white"
+              : "text-stone-500 hover:text-stone-900 dark:text-stone-400 dark:hover:text-white"
+          )
+        }
+      >
+        {children}
+      </NavLink>
+      <div
+        aria-hidden="true"
+        className="absolute inset-x-2 bottom-0 hidden h-0.5 bg-red-500 peer-[[aria-current=page]]:block dark:bg-white"
+      />
+    </div>
+  );
+}
+
+export default function NavBar() {
+  return (
+    <nav className="flex items-center justify-center space-x-2 border-b bg-stone-50 dark:border-b-stone-700 dark:bg-stone-800 dark:text-stone-300">
+      <NavigationLink to="/polyamory">Poliamorija</NavigationLink>
+      <NavigationLink to="/meetups">Meetupovi</NavigationLink>
+      <NavigationLink to="/literature">Literatura</NavigationLink>
+    </nav>
+  );
+}

app/components/Prose.tsx

@@ -0,0 +1,9 @@
+export default function Prose({ children }: { children?: React.ReactNode }) {
+  return (
+    <div className="px-4 py-6 sm:py-8 md:py-10">
+      <div className="prose prose-sm prose-stone mx-auto dark:prose-invert sm:prose-base md:prose-lg lg:prose-xl">
+        {children}
+      </div>
+    </div>
+  );
+}

app/root.tsx

@@ -10,6 +10,8 @@ import {
 } from "@remix-run/react";
 
 import stylesheet from "~/tailwind.css";
+import Header from "~/components/Header";
+import NavBar from "./components/NavBar";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
@@ -25,7 +27,9 @@ export default function App() {
         <Meta />
         <Links />
       </head>
-      <body className="h-full">
+      <body className="h-full bg-white dark:bg-stone-900 dark:text-white">
+        <Header />
+        <NavBar />
         <Outlet />
         <ScrollRestoration />
         <Scripts />

app/routes/_index.tsx

@@ -1,3 +1,4 @@
+import IntroText from "~/text/Intro.mdx";
 import type { V2_MetaFunction } from "@remix-run/node";
 
 export const meta: V2_MetaFunction = () => {
@@ -10,10 +11,10 @@ export const meta: V2_MetaFunction = () => {
   ];
 };
 
-export default function Index() {
+export default function HomePage() {
   return (
-    <main className="grid min-h-screen place-content-center">
-      <h1>Poly Zagreb</h1>
+    <main>
+      <IntroText />
     </main>
   );
 }

app/routes/literature.tsx

@@ -0,0 +1,27 @@
+import LiteratureText from "~/text/Literature.mdx";
+import Book from "~/components/Book";
+
+export default function LiteraturePage() {
+  return (
+    <main>
+      <LiteratureText>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+          <Book
+            title="Sex at Dawn"
+            subtitle="How We Mate, Why We Stray, and What It Means for Modern Relationships"
+            author="Christopher Ryan and Cacilda Jethá"
+            href="https://a.co/d/2AmzaDQ"
+            cover="/literature/sex-at-dawn.jpg"
+          />
+          <Book
+            title="More Than Two"
+            subtitle="A Practical Guide to Ethical Polyamory"
+            author="Franklin Veaux and Eve Rickert"
+            href="https://a.co/d/ji34DGT"
+            cover="/literature/more-than-two.jpg"
+          />
+        </div>
+      </LiteratureText>
+    </main>
+  );
+}

app/routes/meetups.tsx

@@ -0,0 +1,20 @@
+import MeetupsText from "~/text/Meetups.mdx";
+import type { V2_MetaFunction } from "@remix-run/node";
+
+export const meta: V2_MetaFunction = () => {
+  return [
+    { title: "Meetupovi · Poly Zagreb" },
+    {
+      name: "description",
+      content: "Informacije o poliamornim meetupovima u Zagrebu",
+    },
+  ];
+};
+
+export default function MeetupsPage() {
+  return (
+    <main>
+      <MeetupsText />
+    </main>
+  );
+}

app/routes/polyamory.tsx

@@ -0,0 +1,24 @@
+import PolyamoryText from "~/text/Polyamory.mdx";
+import type { V2_MetaFunction } from "@remix-run/node";
+
+export const meta: V2_MetaFunction = () => {
+  return [
+    { title: "Poliamorija · Poly Zagreb" },
+    {
+      name: "description",
+      content: "Saznaj više o poliamoriji i poliamornim odnosima.",
+    },
+    {
+      name: "author",
+      content: "Matija Marohnić",
+    },
+  ];
+};
+
+export default function PolyamoryPage() {
+  return (
+    <main>
+      <PolyamoryText />
+    </main>
+  );
+}

app/tailwind.css

@@ -1,3 +1,59 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .bg-fancy-gradient {
+    /* https://www.gradientmagic.com/collection/complexcircles/gradient/1583798497963 */
+    background-image: radial-gradient(
+        circle at 92% 37%,
+        hsla(94, 0%, 12%, 0.07) 0%,
+        hsla(94, 0%, 12%, 0.07) 39%,
+        transparent 39%,
+        transparent 71%,
+        transparent 71%,
+        transparent 100%
+      ),
+      radial-gradient(
+        circle at 65% 60%,
+        hsla(94, 0%, 12%, 0.07) 0%,
+        hsla(94, 0%, 12%, 0.07) 15%,
+        transparent 15%,
+        transparent 67%,
+        transparent 67%,
+        transparent 100%
+      ),
+      radial-gradient(
+        circle at 18% 57%,
+        hsla(94, 0%, 12%, 0.07) 0%,
+        hsla(94, 0%, 12%, 0.07) 23%,
+        transparent 23%,
+        transparent 31%,
+        transparent 31%,
+        transparent 100%
+      ),
+      radial-gradient(
+        circle at 38% 0%,
+        hsla(94, 0%, 12%, 0.07) 0%,
+        hsla(94, 0%, 12%, 0.07) 27%,
+        transparent 27%,
+        transparent 60%,
+        transparent 60%,
+        transparent 100%
+      ),
+      radial-gradient(
+        circle at 83% 39%,
+        hsla(94, 0%, 12%, 0.07) 0%,
+        hsla(94, 0%, 12%, 0.07) 74%,
+        transparent 74%,
+        transparent 87%,
+        transparent 87%,
+        transparent 100%
+      ),
+      linear-gradient(335deg, rgb(220, 38, 38), rgb(69, 10, 10));
+  }
+
+  .fade-out {
+    mask-image: linear-gradient(to bottom, black 0%, transparent 75%);
+  }
+}

app/text/Intro.mdx

@@ -0,0 +1,24 @@
+import MeetupCard from "~/components/MeetupCard";
+import Prose from "~/components/Prose";
+
+<Prose>
+
+Monogamija je u našem društvu predstavljena kao jedini etičan model veze, ali ne uklapaju se svi u te okvire.
+
+Kako to? Pa, moguća objašnjenja su:
+
+- da još nisu našli onu pravu osobu
+- da nisu dobri u vezama
+- da su sebični i gledaju samo svoje potrebe
+
+Ali to nisu jedina objašnjenja.
+
+**Poly Zagreb** je prostor gdje mi koji se nismo pronašli u monogamiji možemo slobodno razgovarati o svojim iskustvima i problemima neutabanog terena etične nemonogamije.
+
+Zvuči zanimljivo? Možeš naučiti [više o poliamoriji](/polyamory) i pridružiti nam se na sljedećem [meetupu](/meetups)!
+
+<div className="not-prose pt-6">
+  <MeetupCard />
+</div>
+
+</Prose>

app/text/Literature.mdx

@@ -0,0 +1,26 @@
+import Prose from "~/components/Prose";
+
+<Prose>
+
+# Preporučena literatura
+
+Poliamorija je neutaban teren, pogotovo u Hrvatskoj, koja nije baš oličenje liberalnosti. Spoznati svoju poliamornost može biti vrlo oslobađajuće, ali isto tako može biti i usamljujuće. Zato je važno provoditi vrijeme s ljudima koji nas prihvaćaju, i informirati se o ljubavnim orijentacijama, ljudskom seksualnošću i sl.
+
+Da si malo olakšate putovanje, preporučujemo ove knjige:
+
+<div className="not-prose">{props.children}</div>
+
+## Naše recenzije
+
+> U monogamnim vezama nikad nisam shvaćao zašto obećajemo ekskluzivnost u vezama, to mi je bilo nepotrebno i neugodno ograničenje, i ljudi su me osuđivali jer mi monogamija nije dobro išla, pa sam se pitao što nije u redu sa mnom.
+>
+> Knjiga "[Sex at Dawn]" je bila ključna za mene, puno mi je pomogla da protumačim raskorak koji sam osjećao, i zašto objašnjenje ne uspijevam pronaći u svojoj okolini. Knjiga ne propisuje kakve bismo veze trebali imati, nego iznosi stručne činjenice, i ta razina objektivnosti mi je izuzetno pasala. Nakon što sam ju pročitao uspio sam se smiriti i prestati tražiti odobravanje drugih po pitanju poliamorije.
+>
+> Knjiga "[More Than Two]" govori o praksi poliamornih odnosa, tj. odgovorila mi je na pitanje "ok, a što sad?" Preporučuje kako se vezati za druge ljude, na što pripaziti i sl. Prepuna je zanimljive terminologije, zbog čega još ju i danas koristim kao referencu.
+>
+> —Matija Marohnić
+
+</Prose>
+
+[Sex at Dawn]: https://a.co/d/2AmzaDQ
+[More Than Two]: https://a.co/d/ji34DGT