feat: updated some sections

components/home-hero.tsx

@@ -1,10 +1,18 @@
 "use client";
 
+import { Icon } from "@iconify/react";
 import Image from "next/image";
-import { useRef, useState } from "react";
-import { Card, Typography } from "poyraz-ui/atoms";
+import { useLocale, useTranslations } from "next-intl";
+import { useRouter } from "@/i18n/routing";
+import {
+  Button,
+  ButtonIcon,
+  ButtonLabel,
+  TextEffect,
+  Typography,
+} from "poyraz-ui/atoms";
 import { NewsCard } from "poyraz-ui/molecules";
-import { useTranslations } from "next-intl";
+import { getResumeHref } from "@/lib/links";
 
 type HomeHeroProps = {
   news: {
@@ -18,78 +26,131 @@ type HomeHeroProps = {
 };
 
 export function HomeHero({ news }: HomeHeroProps) {
-  const [frame, setFrame] = useState<1 | 2>(1);
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const t = useTranslations("Home");
-
-  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);
-  };
+  const locale = useLocale();
+  const router = useRouter();
 
   return (
-    <section className="grid gap-3 md:h-65 md:grid-cols-2">
-      <div className="grid gap-2 md:grid-rows-3">
-        {news.map((item) => (
-          <div key={item.id}>
-            <NewsCard
-              className="rounded-sm border-border md:h-full"
-              category={item.category}
-              title={item.title}
-              date={item.date}
-              image={item.image}
-              href={item.href}
-            />
+    <section className="space-y-4">
+      <div className="relative grid min-h-[150px] overflow-hidden border-b border-border py-4 sm:grid-cols-[1fr_180px] sm:py-5">
+        <div className="flex max-w-2xl flex-col justify-center gap-2">
+          <Typography
+            variant="h2"
+            component="h1"
+            className="leading-none tracking-[-0.045em] font-secondary font-semibold text-foreground text-2xl"
+          >
+            Poyraz{" "}
+            <TextEffect
+              effect="hand-drawn"
+              tone="primary"
+              className="tracking-[-0.04em]"
+            >
+              Avsever
+            </TextEffect>
+          </Typography>
+
+          <Typography
+            variant="small"
+            className="max-w-xl text-xs leading-5 text-muted-foreground sm:text-sm"
+          >
+            {t("heroDescription")}
+          </Typography>
+
+          <div className="flex flex-wrap items-center gap-2 pt-1">
+            <Button
+              type="button"
+              size="sm"
+              radius="sm"
+              effect="swap"
+              swapTarget="both"
+              onClick={() => router.push("/contact")}
+            >
+              <ButtonLabel>{t("hireMe")}</ButtonLabel>
+              <ButtonIcon>
+                <Icon icon="mdi:arrow-right" width={15} height={15} />
+              </ButtonIcon>
+            </Button>
+
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              radius="sm"
+              effect="swap"
+              swapTarget="both"
+              onClick={() => window.open(getResumeHref(locale), "_blank", "noopener,noreferrer")}
+            >
+              <ButtonIcon>
+                <Icon icon="mdi:download" width={15} height={15} />
+              </ButtonIcon>
+              <ButtonLabel>{t("downloadCv")}</ButtonLabel>
+            </Button>
           </div>
-        ))}
+        </div>
+
+        <div className="pointer-events-none absolute right-0 bottom-0 hidden h-full w-44 overflow-hidden sm:block">
+          <Image
+            src="/images/hero1.png"
+            alt="Poyraz Avsever"
+            width={220}
+            height={220}
+            sizes="180px"
+            priority
+            className="absolute right-0 bottom-0 h-auto w-36 object-contain"
+          />
+          <div
+            aria-hidden="true"
+            className="absolute right-0 bottom-0 h-px w-36 bg-border"
+          />
+        </div>
       </div>
 
-      <Card className="grid grid-cols-[112px_1fr] items-stretch gap-2 rounded-sm border-border sm:grid-cols-[168px_1fr] 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{" "}
-              <span className="font-secondary text-red-600">Avsever</span>
-            </Typography>
-          </div>
-          <Typography variant="small" className="text-xs leading-relaxed text-muted-foreground sm:text-sm">
-            {t.rich("role", {
-              strong: (chunks) => (
-                <strong className="font-semibold text-foreground">{chunks}</strong>
-              ),
-            })}
+      <section className="space-y-3">
+        <div className="flex items-center justify-between gap-4">
+          <Typography
+            variant="h3"
+            component="h2"
+            className="tracking-[-0.035em]"
+          >
+            {t("readMyPosts")}
           </Typography>
+
+          <Button
+            type="button"
+            size="sm"
+            radius="sm"
+            effect="swap"
+            swapTarget="both"
+            onClick={() => router.push("/blog")}
+          >
+            <ButtonLabel>{t("allPosts")}</ButtonLabel>
+            <ButtonIcon>
+              <Icon icon="mdi:arrow-right" width={15} height={15} />
+            </ButtonIcon>
+          </Button>
         </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}
-              sizes="(max-width: 768px) 80px, 192px"
-              priority
-              className="absolute right-0 bottom-0 h-auto w-20 object-contain md:w-48"
-            />
+        <div className="relative overflow-hidden py-1">
+          <div className="flex w-max items-stretch gap-3">
+            {news.map((item) => (
+              <NewsCard
+                key={item.id}
+                className="w-72 shrink-0 rounded-sm border-border"
+                category={item.category}
+                title={item.title}
+                date={item.date}
+                image={item.image}
+                href={item.href}
+              />
+            ))}
           </div>
+
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute top-0 right-0 h-full w-24 bg-gradient-to-l from-background via-background/80 to-transparent"
+          />
         </div>
-      </Card>
+      </section>
     </section>
   );
 }