feat: add references and volunteer community sections with detailed content

2026-03-10 20:53:31 +03:00
parent d732f9b1c3
commit d262b391c9
9 changed files with 302 additions and 36 deletions
@@ -1,8 +1,10 @@
 "use client";

 import Image from "next/image";
-import { Card, Typography } from "poyraz-ui/atoms";
+import Link from "next/link";
+import { Badge, Card, Typography } from "poyraz-ui/atoms";
 import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "poyraz-ui/molecules";
+import { BOOKMARKS } from "@/data/bookmarks";
 import { certificates } from "@/data/certificates";
 import { EDUCATION } from "@/data/education";
 import { EXPERIENCE } from "@/data/experience";
@@ -118,6 +120,78 @@ export function AboutContent() {
          </div>
        </div>
      </div>
+
+      <div className="grid gap-3 md:grid-cols-3">
+        <Link href="/about/references" className="block">
+          <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
+            <Typography variant="large" className="text-base leading-tight">
+              References
+            </Typography>
+            <Typography variant="small" className="mt-1 text-muted-foreground">
+              Open the full reference list in a dedicated detail page.
+            </Typography>
+          </Card>
+        </Link>
+
+        <Link href="/about/volunteer-community" className="block">
+          <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
+            <Typography variant="large" className="text-base leading-tight">
+              Volunteer & Community
+            </Typography>
+            <Typography variant="small" className="mt-1 text-muted-foreground">
+              Timeline and contribution details in a separate detail page.
+            </Typography>
+          </Card>
+        </Link>
+
+        <Sheet>
+          <SheetTrigger asChild>
+            <button
+              type="button"
+              className="cursor-pointer text-left"
+              aria-label="Open bookmarks"
+            >
+              <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
+                <Typography variant="large" className="text-base leading-tight">
+                  Bookmark
+                </Typography>
+                <Typography variant="small" className="mt-1 text-muted-foreground">
+                  Quick access links in a sheet panel.
+                </Typography>
+              </Card>
+            </button>
+          </SheetTrigger>
+
+          <SheetContent side="right" className="w-full max-w-xl p-4">
+            <SheetTitle>Bookmarks</SheetTitle>
+            <div className="mt-4 grid max-h-[90dvh] gap-3 overflow-y-auto pr-1">
+              {BOOKMARKS.map((item) => (
+                <Card key={item.id} className="rounded-sm border-border p-3">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Typography variant="large" className="leading-tight">
+                      {item.title}
+                    </Typography>
+                    <Badge variant="outline" className="rounded-sm">
+                      {item.tag}
+                    </Badge>
+                  </div>
+                  <Typography variant="small" className="mt-1 text-muted-foreground">
+                    {item.description}
+                  </Typography>
+                  <Link
+                    href={item.href}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="mt-2 inline-flex text-sm text-red-600 hover:underline"
+                  >
+                    {item.href.replace("https://", "")}
+                  </Link>
+                </Card>
+              ))}
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
    </section>
  );
 }
@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { TestimonialCard } from "poyraz-ui/molecules";
+import { REFERENCES } from "@/data/references";
+
+type ReferenceCardsProps = {
+  className?: string;
+};
+
+export function ReferenceCards({ className }: ReferenceCardsProps) {
+  return (
+    <div className={className}>
+      {REFERENCES.map((item) => {
+        const card = (
+          <TestimonialCard
+            quote={item.quote}
+            author={item.author}
+            role={item.role}
+            avatar={item.avatar}
+            rating={item.rating}
+            className="h-full w-70 shrink-0 rounded-sm"
+          />
+        );
+
+        if (!item.profileHref) {
+          return <div key={item.id}>{card}</div>;
+        }
+
+        return (
+          <Link
+            key={item.id}
+            href={item.profileHref}
+            target="_blank"
+            rel="noreferrer"
+            aria-label={`${item.author} LinkedIn profile`}
+            className="block"
+          >
+            {card}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
@@ -0,0 +1,17 @@
+import Link from "next/link";
+import { ReferenceCards } from "@/components/reference-cards";
+
+export function ReferencesDetailContent() {
+  return (
+    <section className="flex h-full flex-col gap-4 overflow-y-auto">
+      <Link
+        href="/about"
+        className="inline-flex w-fit items-center rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+      >
+        {"<- Back to about"}
+      </Link>
+
+      <ReferenceCards className="flex flex-wrap gap-3" />
+    </section>
+  );
+}
@@ -1,45 +1,12 @@
 "use client";

-import Link from "next/link";
-import { TestimonialCard } from "poyraz-ui/molecules";
-import { REFERENCES } from "@/data/references";
+import { ReferenceCards } from "@/components/reference-cards";

 export function ReferencesSection() {
  return (
    <section className="space-y-8 md:pt-12">
-
      <div className="relative overflow-hidden rounded-sm">
-        <div className="flex w-max gap-3">
-          {REFERENCES.map((item) => {
-            const card = (
-              <TestimonialCard
-                quote={item.quote}
-                author={item.author}
-                role={item.role}
-                avatar={item.avatar}
-                rating={item.rating}
-                className="h-full w-70 shrink-0 rounded-sm"
-              />
-            );
-
-            if (!item.profileHref) {
-              return <div key={item.id}>{card}</div>;
-            }
-
-            return (
-              <Link
-                key={item.id}
-                href={item.profileHref}
-                target="_blank"
-                rel="noreferrer"
-                aria-label={`${item.author} LinkedIn profile`}
-                className="block"
-              >
-                {card}
-              </Link>
-            );
-          })}
-        </div>
+        <ReferenceCards className="flex w-max gap-3" />
        <div
          aria-hidden="true"
          className="pointer-events-none opacity-95 absolute top-0 right-0 h-full w-48 bg-linear-to-l from-white via-white/80 to-transparent"
@@ -0,0 +1,48 @@
+import Link from "next/link";
+import { Card, Typography } from "poyraz-ui/atoms";
+import { VOLUNTEER_COMMUNITY_ITEMS } from "@/data/volunteer-community";
+
+export function VolunteerCommunityContent() {
+  return (
+    <section className="flex h-full flex-col gap-4 overflow-y-auto">
+      <Link
+        href="/about"
+        className="inline-flex w-fit items-center rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+      >
+        {"<- Back to about"}
+      </Link>
+
+      <div className="grid gap-3">
+        {VOLUNTEER_COMMUNITY_ITEMS.map((item) => (
+          <Card key={item.id} className="rounded-sm border-border p-4">
+            <Typography variant="large" className="text-base leading-tight">
+              {item.title}
+            </Typography>
+
+            <Typography variant="small" className="mt-2 text-muted-foreground">
+              <span className="font-semibold text-foreground">Timeline:</span> {item.timeline}
+            </Typography>
+
+            {item.link ? (
+              <Typography variant="small" className="mt-1 text-muted-foreground">
+                <span className="font-semibold text-foreground">Link:</span>{" "}
+                <Link
+                  href={item.link}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-red-600 hover:underline"
+                >
+                  {item.link.replace("https://", "")}
+                </Link>
+              </Typography>
+            ) : null}
+
+            <Typography variant="small" className="mt-1 text-muted-foreground">
+              <span className="font-semibold text-foreground">Focus:</span> {item.focus}
+            </Typography>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}