feat: add ReferencesSection component and integrate AnnouncementBar with news updates

2026-03-10 10:39:15 +03:00
parent 449f22bf0e
commit bef1cbc901
8 changed files with 147 additions and 5 deletions
@@ -44,10 +44,10 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
-      <body className="min-h-dvh bg-background text-foreground antialiased">
-        <div className="mx-auto flex min-h-dvh w-full max-w-4xl flex-col px-4 py-8 sm:px-6 sm:py-10">
+      <body className="h-dvh overflow-hidden bg-background text-foreground antialiased">
+        <div className="mx-auto flex h-dvh w-full max-w-4xl flex-col overflow-hidden px-4 py-8 sm:px-6 sm:py-10">
          <SiteNavbar />
-          <main className="flex-1 py-8">{children}</main>
+          <main className="flex-1 overflow-hidden py-8">{children}</main>
        </div>
      </body>
    </html>
@@ -1,8 +1,31 @@
+import { Icon } from "@iconify/react";
+import Link from "next/link";
+import { AnnouncementBar } from "poyraz-ui/organisms";
+import { HomeHero } from "@/components/home-hero";
+import { ReferencesSection } from "@/components/references-section";

 export default function Home() {
  return (
-    <div>
+    <section className="flex h-full flex-col gap-4 overflow-hidden">
+      <AnnouncementBar
+        variant="branded"
+        icon={<Icon icon="mdi:sparkles" width={16} height={16} />}
+        action={
+          <Link
+            href="https://ui.poyrazavsever.com"
+            target="_blank"
+            rel="noreferrer"
+            className="text-xs font-bold underline"
+          >
+            Learn More -&gt;
+          </Link>
+        }
+      >
+        New components added this week!
+      </AnnouncementBar>

-    </div>
+      <HomeHero />
+      <ReferencesSection />
+    </section>
  );
 }
@@ -0,0 +1,54 @@
+"use client";
+
+import Link from "next/link";
+import { Typography } from "poyraz-ui/atoms";
+import { TestimonialCard } from "poyraz-ui/molecules";
+import { REFERENCES } from "@/data/references";
+
+export function ReferencesSection() {
+  return (
+    <section className="space-y-3">
+      <Typography variant="h3" className="text-foreground">
+        References
+      </Typography>
+
+      <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-[280px] 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>
+        <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"
+        />
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,40 @@
+export type Reference = {
+  id: string;
+  quote: string;
+  author: string;
+  role: string;
+  avatar: string;
+  rating?: number;
+  profileHref?: string;
+};
+
+export const REFERENCES: Reference[] = [
+  {
+    id: "ali-korkmaz",
+    author: "Ali Korkmaz",
+    role: "Client - 2025",
+    rating: 5,
+    avatar: "/avatars/ali.png",
+    quote:
+      "The website turned out exactly as I wanted. Poyraz considered the details I missed, explained every decision transparently, and delivered something even better than I expected.",
+  },
+  {
+    id: "halil-ibrahim-sabo",
+    author: "Halil Ibrahim Sabo",
+    role: "Product Manager - 2024",
+    rating: 5,
+    avatar: "/avatars/halil.png",
+    profileHref: "https://www.linkedin.com/in/halil-ibrahim-sabo-18a03a251/",
+    quote:
+      "Poyraz is a hardworking builder with an honest, transparent approach. Collaborating with him feels effortless because he keeps everyone aligned and handles edge cases calmly.",
+  },
+  {
+    id: "berat-arslan",
+    author: "Berat Arslan",
+    role: "Graphic Designer - 2025",
+    avatar: "/avatars/berat.png",
+    profileHref: "https://www.linkedin.com/in/beratarslan21/",
+    quote:
+      "A teammate who is both ambitious and deeply passionate about his craft. Working with Poyraz was a pleasure; he stayed curious, delivered reliably, and made the collaboration feel easy.",
+  },
+];
@@ -0,0 +1,25 @@
+export const HOME_NEWS = [
+  {
+    id: "news-performance",
+    category: "Technology",
+    title: "Next.js 16 Released with Major Performance Improvements",
+    date: "Mar 6, 2026",
+    image: "/news/performance.svg",
+    href: "/blog",
+  },
+  {
+    id: "news-design",
+    category: "Design",
+    title: "Minimalism in Modern UI: Less Is Truly More",
+    date: "Mar 5, 2026",
+    image: "/news/design.svg",
+    href: "/blog",
+  },
+  {
+    id: "news-launch",
+    category: "Open Source",
+    title: "Poyraz UI v1.0 Launched - A Minimal React Component Library",
+    date: "Mar 4, 2026",
+    href: "/projects",
+  },
+] as const;