reui-blocks/blocks/blogpost4.tsx

"use client";

import {
  ArrowUp,
  Clock,
  Facebook,
  Home,
  Instagram,
  Lightbulb,
  Linkedin,
  Twitter,
} from "lucide-react";
import { useEffect, useRef, useState } from "react";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface Blogpost4Props {
  className?: string;
}

const formatPersianDate = (date: Date) =>
  new Intl.DateTimeFormat("fa-IR", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(date);

const Blogpost4 = ({ className }: Blogpost4Props) => {
  const [activeSection, setActiveSection] = useState<string | null>(null);
  const sectionRefs = useRef<Record<string, HTMLElement>>({});

  useEffect(() => {
    const sections = Object.keys(sectionRefs.current);

    const observerCallback = (entries: IntersectionObserverEntry[]) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setActiveSection(entry.target.id);
        }
      });
    };

    let observer: IntersectionObserver | null = new IntersectionObserver(
      observerCallback,
      {
        root: null,
        rootMargin: "0px",
        threshold: 1,
      },
    );

    sections.forEach((sectionId) => {
      const element = sectionRefs.current[sectionId];
      if (element) {
        observer?.observe(element);
      }
    });

    return () => {
      observer?.disconnect();
      observer = null;
    };
  }, []);

  const addSectionRef = (id: string, ref: HTMLElement | null) => {
    if (ref) {
      sectionRefs.current[id] = ref;
    }
  };

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="/">
                <Home className="h-4 w-4" />
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="/">کامپوننت‌ها</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>وبلاگ</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
        <h1 className="mt-7 mb-6 max-w-3xl text-start text-3xl font-semibold md:text-2xll">
          چگونه نرخ تبدیل لیدها را ۴۰٪ با CRM هوشمند افزایش دهید
        </h1>
        <div className="flex flex-wrap items-center gap-3 text-sm">
          <Avatar className="h-8 w-8 border">
            <AvatarImage
              src="/block-media/shadcnblocks/block/avatar-2.webp"
              alt="علی رضایی"
            />
          </Avatar>
          <span>
            <a href="#" className="font-medium">
              علی رضایی
            </a>
            <span className="ms-1 text-muted-foreground">
              در {formatPersianDate(new Date("2024-09-23"))}
            </span>
          </span>

          <span className="flex items-center gap-1 text-muted-foreground">
            <Clock className="h-4 w-4" />
            ۱۰ دقیقه مطالعه
          </span>
        </div>
        <Separator className="mt-8 mb-16" />
        <div className="relative grid grid-cols-12 gap-6 lg:grid">
          <div className="col-span-12 lg:col-span-8 lg:col-start-4">
            <div>
              <h3 className="mt-3 text-start text-xl font-semibold">
                اتوماسیون بازاریابی چیست و چرا مهم است؟
              </h3>
              <p className="mt-2 text-start text-lg text-muted-foreground">
                اتوماسیون بازاریابی به معنای اجرای خودکار جریان‌های ایمیل،
                امتیازدهی لید و اختصاص معامله به فروشندگان بر اساس رفتار
                دیجیتال مخاطب است. تیم‌های B2B با این رویکرد، زمان پاسخ‌گویی
                را از ۴۸ ساعت به کمتر از ۲ ساعت کاهش داده‌اند.
              </p>
            </div>
            <section
              id="section1"
              ref={(ref) => addSectionRef("section1", ref)}
              className="my-8 prose dark:prose-invert"
            >
              <h2>راه‌اندازی امتیازدهی لید</h2>
              <p>
                تیم بازاریابی CloudStar با{" "}
                <a href="#">مدل امتیازدهی رفتاری</a> لیدهای آماده خرید را
                شناسایی کرد.
              </p>
              <blockquote>
                لیدهایی که صفحه قیمت را بازدید کرده و وایت‌پیپر را دانلود
                کرده‌اند، اولویت تماس فروش را دریافت می‌کنند.
              </blockquote>
              <p>
                معیارهای امتیازدهی بر اساس تعامل دیجیتال تعریف شد و لیدهای
                بالای ۳۰ امتیاز به‌صورت خودکار به فروش اختصاص یافتند.
              </p>
              <Alert>
                <Lightbulb className="h-4 w-4" />
                <AlertTitle>نکته عملی</AlertTitle>
                <AlertDescription>
                  ایمیل‌های با موضوع شخصی‌سازی‌شده (نام شرکت مخاطب) نرخ باز
                  شدن ۴۲٪ بالاتری نسبت به قالب‌های عمومی داشتند.
                </AlertDescription>
              </Alert>
            </section>

            <section
              id="section2"
              ref={(ref) => addSectionRef("section2", ref)}
              className="prose mb-8 dark:prose-invert"
            >
              <h2>نتایج کمپین ۹۰ روزه</h2>
              <p>
                پس از اجرای جریان‌های ایمیل و امتیازدهی، تیم فروش شاهد
                بهبود قابل‌توجهی در معیارهای کلیدی بود.
              </p>
              <div>
                <table>
                  <thead>
                    <tr>
                      <th>تعداد لید</th>
                      <th>نرخ تبدیل</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>{(120).toLocaleString("fa-IR")}</td>
                      <td>{(8).toLocaleString("fa-IR")}٪</td>
                    </tr>
                    <tr className="m-0 border-t p-0 even:bg-muted">
                      <td>{(340).toLocaleString("fa-IR")}</td>
                      <td>{(14).toLocaleString("fa-IR")}٪</td>
                    </tr>
                    <tr className="m-0 border-t p-0 even:bg-muted">
                      <td>{(520).toLocaleString("fa-IR")}</td>
                      <td>{(22).toLocaleString("fa-IR")}٪</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                لیدهایی که حداقل ۳ ایمیل از دنباله را باز کرده بودند، ۲.۸
                برابر بیشتر احتمال تبدیل به مشتری داشتند.
              </p>
            </section>

            <section
              id="section3"
              ref={(ref) => addSectionRef("section3", ref)}
              className="prose mb-8 dark:prose-invert"
            >
              <h2>بهینه‌سازی جریان ایمیل</h2>
              <p>
                تیم بازاریابی با{" "}
                <a href="#">تست A/B موضوع ایمیل</a> نرخ باز شدن را از ۱۸٪
                به ۲۶٪ رساند.
              </p>
              <blockquote>
                ایمیل‌های کوتاه با یک CTA واضح، نرخ کلیک ۳۵٪ بالاتری نسبت
                به ایمیل‌های چندبخشی داشتند.
              </blockquote>
              <p>
                سه نوع دنباله ایمیل برای بخش‌های مختلف قیف فروش طراحی شد:
              </p>
              <ul>
                <li>آگاهی: معرفی مشکل و راه‌حل</li>
                <li>بررسی: مقایسه با رقبا و مطالعه موردی</li>
                <li>تصمیم: دعوت به دمو و پیشنهاد آزمایشی</li>
              </ul>
              <p>
                زمان پاسخ فروش به لیدهای داغ از ۲۴ ساعت به کمتر از ۲ ساعت
                رسید و نرخ بستن معامله ۴۰٪ افزایش یافت.
              </p>
            </section>
          </div>
          <div className="sticky top-8 col-span-3 col-start-1 hidden h-fit text-start lg:block">
            <span className="text-lg font-medium">در این صفحه</span>
            <nav className="mt-4 text-sm">
              <ul className="space-y-1">
                <li>
                  <a
                    href="#section1"
                    className={cn(
                      "block py-1 transition-colors duration-200",
                      activeSection === "section1"
                        ? "text-primary"
                        : "text-muted-foreground hover:text-primary",
                    )}
                  >
                    راه‌اندازی امتیازدهی لید
                  </a>
                </li>
                <li>
                  <a
                    href="#section2"
                    className={cn(
                      "block py-1 transition-colors duration-200",
                      activeSection === "section2"
                        ? "text-primary"
                        : "text-muted-foreground hover:text-primary",
                    )}
                  >
                    نتایج کمپین ۹۰ روزه
                  </a>
                </li>
                <li>
                  <a
                    href="#section3"
                    className={cn(
                      "block py-1 transition-colors duration-200",
                      activeSection === "section3"
                        ? "text-primary"
                        : "text-muted-foreground hover:text-primary",
                    )}
                  >
                    بهینه‌سازی جریان ایمیل
                  </a>
                </li>
              </ul>
            </nav>
            <Separator className="my-6" />
            <div className="flex items-center justify-between gap-2">
              <p className="text-sm font-medium">اشتراک‌گذاری این مطلب</p>
              <ul className="flex gap-2">
                <li>
                  <a
                    href="#"
                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
                    aria-label="اشتراک در فیسبوک"
                  >
                    <Facebook className="h-4 w-4" />
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
                    aria-label="اشتراک در توییتر"
                  >
                    <Twitter className="h-4 w-4" />
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
                    aria-label="اشتراک در لینکدین"
                  >
                    <Linkedin className="h-4 w-4" />
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
                    aria-label="اشتراک در اینستاگرام"
                  >
                    <Instagram className="h-4 w-4" />
                  </a>
                </li>
              </ul>
            </div>
            <div className="mt-6">
              <Button
                variant="outline"
                onClick={() =>
                  window.scrollTo({
                    top: 0,
                    behavior: "smooth",
                  })
                }
              >
                <ArrowUp className="h-4 w-4" />
                بازگشت به بالا
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Blogpost4 };