feat: implement HomeHero component with image carousel and news cards

2026-03-10 10:29:50 +03:00
parent 98f8f7f175
commit 449f22bf0e
5 changed files with 113 additions and 0 deletions
@@ -0,0 +1,78 @@
+"use client";
+
+import Image from "next/image";
+import { useRef, useState } from "react";
+import { Card, Typography } from "poyraz-ui/atoms";
+import { NewsCard } from "poyraz-ui/molecules";
+import { HOME_NEWS } from "@/lib/home-news";
+
+export function HomeHero() {
+  const [frame, setFrame] = useState<1 | 2>(1);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const handleMouseEnter = () => {
+    if (intervalRef.current) return;
+
+    intervalRef.current = setInterval(() => {
+      setFrame((prev) => (prev === 1 ? 2 : 1));
+    }, 260);
+  };
+
+  const handleMouseLeave = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setFrame(1);
+  };
+
+  return (
+    <section className="grid gap-3 md:h-65 md:grid-cols-2">
+      <div className="grid gap-2 md:grid-rows-3">
+        {HOME_NEWS.map((item) => (
+          <NewsCard
+            key={item.id}
+            className="rounded-sm border-border md:h-full"
+            category={item.category}
+            title={item.title}
+            date={item.date}
+            image={item.image}
+            href={item.href}
+          />
+        ))}
+      </div>
+
+      <Card className="grid grid-cols-[112px_1fr] sm:grid-cols-[168px_1fr] items-stretch gap-2 rounded-sm border-border md:h-full">
+        <div className="flex flex-col justify-center gap-1 px-3 py-2">
+          <div className="flex items-center gap-1">
+            <Typography variant="h2" className="leading-tight">
+              Poyraz
+            </Typography>
+            <Typography variant="h2" secondaryFont className="leading-tight text-red-600">
+               Avsever
+            </Typography>
+          </div>
+          <Typography variant="small" className="text-muted-foreground">
+            A young person exploring technology.
+          </Typography>
+        </div>
+
+        <div className="relative h-full overflow-hidden">
+          <div
+            className="relative h-full w-full"
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <Image
+              src={frame === 1 ? "/images/hero1.png" : "/images/hero2.png"}
+              alt="Poyraz Avsever"
+              width={240}
+              height={240}
+              className="absolute right-0 bottom-0 h-auto w-48 object-contain"
+            />
+          </div>
+        </div>
+      </Card>
+    </section>
+  );
+}
@@ -0,0 +1,19 @@
+<svg width="320" height="220" viewBox="0 0 320 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bgB" x1="19" y1="12" x2="287" y2="209" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#102A43"/>
+      <stop offset="1" stop-color="#243B53"/>
+    </linearGradient>
+  </defs>
+  <rect width="320" height="220" rx="12" fill="url(#bgB)"/>
+  <rect x="40" y="30" width="108" height="70" rx="8" fill="#D9E2EC" fill-opacity="0.92"/>
+  <rect x="56" y="48" width="76" height="6" rx="3" fill="#486581"/>
+  <rect x="56" y="62" width="54" height="6" rx="3" fill="#829AB1"/>
+  <rect x="176" y="52" width="106" height="138" rx="10" fill="#F0F4F8"/>
+  <rect x="192" y="70" width="74" height="8" rx="4" fill="#334E68"/>
+  <rect x="192" y="86" width="52" height="8" rx="4" fill="#627D98"/>
+  <rect x="40" y="122" width="108" height="68" rx="8" fill="#9FB3C8"/>
+  <circle cx="72" cy="156" r="14" fill="#F0F4F8"/>
+  <rect x="92" y="146" width="40" height="6" rx="3" fill="#D9E2EC"/>
+  <rect x="92" y="158" width="30" height="6" rx="3" fill="#D9E2EC"/>
+</svg>
@@ -0,0 +1,16 @@
+<svg width="320" height="220" viewBox="0 0 320 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bgA" x1="26" y1="14" x2="291" y2="198" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#202733"/>
+      <stop offset="1" stop-color="#0B0F15"/>
+    </linearGradient>
+    <radialGradient id="glowA" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(82 66) rotate(43) scale(98 92)">
+      <stop stop-color="#FFC857" stop-opacity="0.95"/>
+      <stop offset="1" stop-color="#FFC857" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="320" height="220" rx="12" fill="url(#bgA)"/>
+  <circle cx="82" cy="66" r="98" fill="url(#glowA)"/>
+  <path d="M28 182L98 121L140 154L222 84L292 148" stroke="#F7FAFC" stroke-opacity="0.8" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="26" y="24" width="72" height="22" rx="11" fill="#F7FAFC" fill-opacity="0.12"/>
+</svg>