From 0e2ea9b85b07e60cc67678cbb40ee3ea6064540e Mon Sep 17 00:00:00 2001
From: "ar.azizan" <ar.azizan@gmail.com>
Date: Sun, 8 Feb 2026 19:54:54 +0330
Subject: [PATCH] feat: update logo component to support caption display in
 footer

- Modified the Logo component to accept a new 'hasCaption' prop for conditional rendering of a caption.
- Updated the FooterSection to utilize the new 'hasCaption' prop, enhancing the logo presentation with additional text and a separator.
---
 components/footer.tsx |  2 +-
 components/logo.tsx   | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/footer.tsx b/components/footer.tsx
index 15208ec..7a6c44a 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -20,7 +20,7 @@ export default function FooterSection() {
   return (
     <footer className="py-16 md:py-16 bg-muted border-t">
       <div className="mx-auto max-w-5xl px-6 flex items-center flex-col">
-        <Logo className="mx-auto" />
+        <Logo hasCaption className="mx-auto" />
 
         <div className="my-4 flex flex-wrap justify-center gap-6 text-sm">
           {links.map((link, index) => (
diff --git a/components/logo.tsx b/components/logo.tsx
index 1dc6227..58cef73 100644
--- a/components/logo.tsx
+++ b/components/logo.tsx
@@ -1,18 +1,30 @@
 import { cn } from "@/lib/utils";
 import Image from "next/image";
 import Link from "next/link";
+import { Separator } from "./ui/separator";
 
 export const Logo = ({
   className,
   uniColor,
+  hasCaption
 }: {
   className?: string;
   uniColor?: boolean;
+  hasCaption?: boolean;
 }) => {
+  const _feep = <span className="font-bold text-xl leading-tight">فـــیــپ</span>
   return (
-    <Link href="/" className="flex items-center">
+    <Link href="/" className={`flex items-center ${hasCaption ? 'flex-col' : 'gap-2'}`}>
       <LogoIcon className={className} uniColor={uniColor} />
-      <span className="font-bold text-xl">فـــیــپ</span>
+      {hasCaption ?
+        <span className="flex flex-col items-center">
+          {_feep}
+          <span className="text-xs text-muted-foreground font-normal leading-tight">
+            داده‌ها فهمیده می‌شوند
+          </span>
+          <Separator className="mt-2 max-w-10" />
+        </span>
+        : _feep}
     </Link>
   );
 };