feat: add references and volunteer community sections with detailed content

components/about-content.tsx

@@ -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>
   );
 }