From 17ec09f8abc28d0f04c52f7870adf6de6bf40550 Mon Sep 17 00:00:00 2001
From: poyrazavsever <poyrazavsever@hotmail.com>
Date: Tue, 10 Mar 2026 21:43:46 +0300
Subject: [PATCH] feat: add HomeVideosSection component with YouTube video
 integration

---
 app/page.tsx                       |  2 ++
 components/home-videos-section.tsx | 52 ++++++++++++++++++++++++++++++
 data/youtube-videos.ts             |  5 +++
 3 files changed, 59 insertions(+)
 create mode 100644 components/home-videos-section.tsx
 create mode 100644 data/youtube-videos.ts

diff --git a/app/page.tsx b/app/page.tsx
index 2ed5761..3f27958 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,5 @@
 import { HomeHero } from "@/components/home-hero";
+import { HomeVideosSection } from "@/components/home-videos-section";
 import { ReferencesSection } from "@/components/references-section";
 
 export default function Home() {
@@ -6,6 +7,7 @@ export default function Home() {
     <section className="flex h-full flex-col gap-4 overflow-hidden">
       <HomeHero />
       <ReferencesSection />
+      <HomeVideosSection />
     </section>
   );
 }
diff --git a/components/home-videos-section.tsx b/components/home-videos-section.tsx
new file mode 100644
index 0000000..1ab2632
--- /dev/null
+++ b/components/home-videos-section.tsx
@@ -0,0 +1,52 @@
+import { Card, Typography } from "poyraz-ui/atoms";
+import { YOUTUBE_VIDEO_LINKS } from "@/data/youtube-videos";
+
+function getYoutubeEmbedUrl(link: string) {
+  try {
+    const url = new URL(link);
+    const videoId = url.searchParams.get("v");
+    return videoId ? `https://www.youtube.com/embed/${videoId}` : null;
+  } catch {
+    return null;
+  }
+}
+
+export function HomeVideosSection() {
+  return (
+    <section className="space-y-2">
+      <Typography variant="large" className="text-base">
+        YouTube
+      </Typography>
+
+      <div className="grid gap-2 md:grid-cols-3">
+        {YOUTUBE_VIDEO_LINKS.map((link) => {
+          const embedUrl = getYoutubeEmbedUrl(link);
+
+          return (
+            <Card key={link} className="overflow-hidden rounded-sm border-border p-0">
+              {embedUrl ? (
+                <div className="aspect-video w-full">
+                  <iframe
+                    src={embedUrl}
+                    title="YouTube video player"
+                    className="h-full w-full"
+                    loading="lazy"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerPolicy="strict-origin-when-cross-origin"
+                    allowFullScreen
+                  />
+                </div>
+              ) : (
+                <div className="p-3">
+                  <Typography variant="small" className="text-muted-foreground">
+                    Invalid video link.
+                  </Typography>
+                </div>
+              )}
+            </Card>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
diff --git a/data/youtube-videos.ts b/data/youtube-videos.ts
new file mode 100644
index 0000000..ee923fe
--- /dev/null
+++ b/data/youtube-videos.ts
@@ -0,0 +1,5 @@
+export const YOUTUBE_VIDEO_LINKS = [
+  "https://www.youtube.com/watch?v=9JEOGCX5aSQ&t=22s",
+  "https://www.youtube.com/watch?v=H8sP8HejI7A",
+  "https://www.youtube.com/watch?v=XWUeVzf0t6Y&t=2s",
+] as const;