هویت بصری

import { RollButton } from "@/components/ui/roll-button";
import { TbDownload } from "react-icons/tb";

<RollButton
  href="/download"
  rollLabel={<>دانلود <TbDownload /></>}
>
  دانلود
</RollButton>

• اگر کاربر «حرکت کمتر» را در سیستم‌عاملش فعال کرده باشد، چرخش حذف می‌شود و فقط تغییر رنگ می‌ماند.
• متن دکمه با نتیجه‌اش یکی بماند: دکمه‌ی «دانلود» باید به دانلود برسد، نه به صفحه‌ای دیگر.
• کلاس‌های چیدمان (مثل حاشیه یا نمایش در بریک‌پوینت) از طریق className داده می‌شوند؛ رنگ و اندازه از tone و size.

هدر مشترک همه‌ی صفحه‌ها. روی لبه‌ی بالای پنجره ثابت می‌ماند و با اسکرول جمع می‌شود تا فضای کمتری از صفحه را بگیرد. زیر بریک‌پوینت مویاد، لینک‌ها به یک منوی تمام‌صفحه می‌روند.

نمونه‌ی زنده‌اش همین هدر بالای این صفحه است. در یک صفحه بیش از یکی از آن نگذارید؛ دو هدر یعنی دو ناحیه‌ی راهبری برای صفحه‌خوان‌ها.

• لینک‌های هدر در خود فایل کامپوننت نگهداری می‌شوند تا ترتیبشان در همه‌ی صفحه‌ها یکی بماند.
• با فعال بودن «حرکت کمتر»، باز و بسته شدن منو بدون انیمیشن انجام می‌شود.

بلوک پایانی همه‌ی صفحه‌ها: یک پنل نارنجی تمام‌عرض که لینک‌های اصلی، راه‌های تماس و شبکه‌های اجتماعی را کنار هم می‌گذارد. دکمه‌ی بازگشت به بالا در گوشه‌ی خودش نشسته است.

فوتر شناسه‌ی site-footer را می‌گیرد. کنترل‌های چسبیده به پایین پنجره همین شناسه را می‌پایند و به محض رسیدن فوتر کنار می‌روند، تا دو دکمه‌ی بازگشت به بالا هم‌زمان روی صفحه نباشند.

ورودی‌ای نمی‌گیرد. محتوایش — لینک‌ها، شماره‌ها و شبکه‌ها — در خود فایل کامپوننت ویرایش می‌شود، تا در همه‌ی صفحه‌ها یکی بماند.

نمونه‌ی زنده‌اش انتهای همین صفحه است.

راه رسیدن به هدر و فوتر، به‌جای صدا زدن جداگانه‌ی آن‌ها. هر سه جزء ثابت صفحه — هدر، فوتر و دکمه‌ی بازگشت به بالا — را با هم و همیشه به یک ترتیب می‌گذارد. صفحه‌ی تازه فقط محتوای خودش را می‌نویسد.

import HeaderFooterWrapper from "@/components/HeaderFooterWrapper";

export default function Page() {
  return (
    <HeaderFooterWrapper>
      <main>...</main>
    </HeaderFooterWrapper>
  );
}