feat: added projects section and updated layout

app/[locale]/page.tsx

@@ -1,4 +1,5 @@
 import { HomeHero } from "@/components/home-hero";
+import { HomeProjectsSection } from "@/components/home-projects-section";
 import { HomeVideosSection } from "@/components/home-videos-section";
 import { ReferencesSection } from "@/components/references-section";
 import { SponsorsSection } from "@/components/sponsors-section";
@@ -13,8 +14,9 @@ export default async function Home({
   const homeNews = await getHomeBlogNews(locale, 6);
 
   return (
-    <section className="flex h-full flex-col gap-4 overflow-y-auto overflow-x-hidden">
+    <section className="flex h-full flex-col gap-12 overflow-y-auto overflow-x-hidden md:gap-14">
       <HomeHero news={homeNews} />
+      <HomeProjectsSection />
       <ReferencesSection />
       <HomeVideosSection />
       <SponsorsSection />

components/home-projects-section.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Icon } from "@iconify/react";
+import { useLocale, useTranslations } from "next-intl";
+import { Button, ButtonIcon, ButtonLabel, Typography } from "poyraz-ui/atoms";
+import { ImageCard } from "poyraz-ui/molecules";
+import { useRouter } from "@/i18n/routing";
+import { WEB_APPS } from "@/data/projects";
+import { getLocalizedValue } from "@/lib/locale";
+
+export function HomeProjectsSection() {
+  const t = useTranslations("Home");
+  const locale = useLocale();
+  const router = useRouter();
+  const projects = WEB_APPS.slice(0, 4);
+
+  return (
+    <section className="space-y-3">
+      <div className="flex items-center justify-between gap-4">
+        <Typography
+          variant="h3"
+          component="h2"
+          className="tracking-[-0.035em]"
+        >
+          {t("projectsTitle")}
+        </Typography>
+
+        <Button
+          type="button"
+          size="sm"
+          radius="sm"
+          effect="swap"
+          swapTarget="both"
+          onClick={() => router.push("/projects")}
+        >
+          <ButtonLabel>{t("allProjects")}</ButtonLabel>
+          <ButtonIcon>
+            <Icon icon="mdi:arrow-right" width={15} height={15} />
+          </ButtonIcon>
+        </Button>
+      </div>
+
+      <div className="relative overflow-hidden py-1">
+        <div className="flex w-max items-stretch gap-3">
+          {projects.map((project) => (
+            <ImageCard
+              key={project.id}
+              image={project.image}
+              title={project.title}
+              description={getLocalizedValue(project.description, locale)}
+              badge={
+                project.badge
+                  ? getLocalizedValue(project.badge, locale)
+                  : undefined
+              }
+              href={project.href}
+              className="aspect-square w-72 shrink-0 rounded-sm border-border"
+            />
+          ))}
+        </div>
+
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute top-0 right-0 h-full w-24 bg-linear-to-l from-background via-background/80 to-transparent"
+        />
+      </div>
+    </section>
+  );
+}

components/home-videos-section.tsx

@@ -1,4 +1,7 @@
-import { Card } from "poyraz-ui/atoms";
+"use client";
+
+import { Icon } from "@iconify/react";
+import { Button, ButtonIcon, ButtonLabel, Card, Typography } from "poyraz-ui/atoms";
 import { YOUTUBE_VIDEO_LINKS } from "@/data/youtube-videos";
 import { YoutubeLiteEmbed } from "@/components/youtube-lite-embed";
 import { useTranslations } from "next-intl";
@@ -7,7 +10,37 @@ export function HomeVideosSection() {
   const t = useTranslations("Content");
 
   return (
-    <section className="space-y-2">
+    <section className="space-y-3">
+      <div className="flex items-center justify-between gap-4">
+        <Typography
+          variant="h3"
+          component="h2"
+          className="tracking-[-0.035em]"
+        >
+          {t("youtubeTitle")}
+        </Typography>
+
+        <Button
+          type="button"
+          size="sm"
+          radius="sm"
+          effect="swap"
+          swapTarget="both"
+          onClick={() =>
+            window.open(
+              "https://youtube.com/@poyrazavsever",
+              "_blank",
+              "noopener,noreferrer",
+            )
+          }
+        >
+          <ButtonLabel>{t("youtubeChannel")}</ButtonLabel>
+          <ButtonIcon>
+            <Icon icon="mdi:youtube" width={16} height={16} />
+          </ButtonIcon>
+        </Button>
+      </div>
+
       <div className="grid gap-2 md:grid-cols-3">
         {YOUTUBE_VIDEO_LINKS.map((link) => (
           <Card

components/reference-cards.tsx

@@ -27,7 +27,7 @@ export function ReferenceCards({ className, cardClassName, lineClamp }: Referenc
             role={getLocalizedValue(item.role, locale)}
             avatar={item.avatar}
             rating={item.rating}
-            className={`flex flex-col rounded-sm ${lineClamp ? "[&_p]:line-clamp-4" : ""} ${hoverClassName} ${cardClassName || "w-70 shrink-0"}`}
+            className={`flex flex-col rounded-sm ${lineClamp ? "[&_blockquote]:line-clamp-4" : ""} ${hoverClassName} ${cardClassName || "w-70 shrink-0"}`}
           />
         );
 

components/references-section.tsx

@@ -11,7 +11,7 @@ export function ReferencesSection() {
   const router = useRouter();
 
   return (
-    <section className="space-y-3 pt-0 sm:pt-8">
+    <section className="space-y-3">
       <div className="flex items-center justify-between gap-4">
         <Typography
           variant="h3"

messages/en.json

@@ -20,6 +20,8 @@
     "downloadCv": "Download CV",
     "readMyPosts": "Have You Read My Posts?",
     "allPosts": "All posts",
+    "projectsTitle": "Projects",
+    "allProjects": "All projects",
     "reviewsAndReferences": "Reviews & References",
     "allReferences": "All references",
     "sections": {
@@ -105,6 +107,7 @@
   },
   "Content": {
     "youtubeTitle": "Latest YouTube Videos",
+    "youtubeChannel": "My YouTube channel",
     "youtubeEmbedTitle": "YouTube video player",
     "pdfTitle": "LinkedIn PDF Notes",
     "pdfPreviewError": "Preview could not be loaded",

messages/tr.json

@@ -20,6 +20,8 @@
     "downloadCv": "CV indir",
     "readMyPosts": "Yazılarımı Okudun Mu",
     "allPosts": "Tüm yazılar",
+    "projectsTitle": "Projeler",
+    "allProjects": "Tüm projeler",
     "reviewsAndReferences": "Yorumlar & Referanslar",
     "allReferences": "Tüm referanslar",
     "sections": {
@@ -105,6 +107,7 @@
   },
   "Content": {
     "youtubeTitle": "Son YouTube Videoları",
+    "youtubeChannel": "YouTube kanalım",
     "youtubeEmbedTitle": "YouTube video oynatıcı",
     "pdfTitle": "LinkedIn PDF Notları",
     "pdfPreviewError": "Önizleme yüklenemedi",