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">
+      <body className="h-dvh overflow-hidden 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">
+        <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;