feat: updated some sections

components/references-section.tsx

@@ -1,24 +1,55 @@
 "use client";
 
+import { Icon } from "@iconify/react";
 import { ReferenceCards } from "@/components/reference-cards";
+import { useRouter } from "@/i18n/routing";
+import { Button, ButtonIcon, ButtonLabel, Typography } from "poyraz-ui/atoms";
+import { useTranslations } from "next-intl";
 
 export function ReferencesSection() {
+  const t = useTranslations("Home");
+  const router = useRouter();
+
   return (
-    <section className="space-y-8 pt-0 sm:pt-12">
-      <div className="relative overflow-hidden rounded-sm py-4">
+    <section className="space-y-3 pt-0 sm:pt-8">
+      <div className="flex items-center justify-between gap-4">
+        <Typography
+          variant="h3"
+          component="h2"
+          className="tracking-[-0.035em]"
+        >
+          {t("reviewsAndReferences")}
+        </Typography>
+
+        <Button
+          type="button"
+          size="sm"
+          radius="sm"
+          effect="swap"
+          swapTarget="both"
+          onClick={() => router.push("/about/references")}
+        >
+          <ButtonLabel>{t("allReferences")}</ButtonLabel>
+          <ButtonIcon>
+            <Icon icon="mdi:arrow-right" width={15} height={15} />
+          </ButtonIcon>
+        </Button>
+      </div>
+
+      <div className="relative overflow-hidden py-1">
         {/* We use two sets of cards for seamless infinite marquee effect */}
-        <div className="flex items-start w-max gap-4 animate-marquee pause-on-hover">
+        <div className="flex w-max items-start gap-4 animate-marquee pause-on-hover">
           <ReferenceCards className="flex items-start gap-4 shrink-0" lineClamp={true} cardClassName="w-80" />
           <ReferenceCards className="flex items-start gap-4 shrink-0" lineClamp={true} cardClassName="w-80" />
         </div>
         
         <div
           aria-hidden="true"
-          className="pointer-events-none absolute top-0 right-0 h-full w-32 bg-gradient-to-l from-white to-transparent"
+          className="pointer-events-none absolute top-0 right-0 h-full w-32 bg-gradient-to-l from-background to-transparent"
         />
         <div
           aria-hidden="true"
-          className="pointer-events-none absolute top-0 left-0 h-full w-32 bg-gradient-to-r from-white to-transparent"
+          className="pointer-events-none absolute top-0 left-0 h-full w-32 bg-gradient-to-r from-background to-transparent"
         />
       </div>
     </section>