@vvedantb/ui 0.7.2 → 0.9.0

package/app/src/time/compactRelativeTime.ts

@@ -0,0 +1,89 @@
+export type CompactRelativeTimeOptions = {
+  /** Clock in ms. Defaults to `Date.now()`. */
+  now?: number;
+  /**
+   * Returned for anything under a minute old, including future times. When
+   * unset the result is whole seconds (`"42s"`), and a future time gives zero
+   * or a negative count (`"0s"`, `"-300s"`).
+   */
+  justNow?: string;
+  /**
+   * `false` (default): elapsed time only. A day is 24 hours, a month 30 days,
+   * a year 12 of those months.
+   * `true`: days count local calendar days across a DST change, and months and
+   * years are calendar months, as `dayjs().diff(date, unit)` counts them.
+   */
+  calendar?: boolean;
+};
+
+const MS_PER_MINUTE = 60_000;
+const MS_PER_DAY = 86_400_000;
+
+/** Rounds toward zero; `-0` becomes `0`. */
+function truncate(n: number): number {
+  return n < 0 ? Math.ceil(n) || 0 : Math.floor(n);
+}
+
+/** Local UTC offset in minutes, rounded to 15 minutes. */
+function utcOffset(ms: number): number {
+  return -Math.round(new Date(ms).getTimezoneOffset() / 15) * 15;
+}
+
+/** Adds calendar months in local time and clamps the day to the target month. */
+function addMonths(ms: number, months: number): number {
+  const date = new Date(ms);
+  const day = date.getDate();
+  date.setDate(1);
+  date.setMonth(date.getMonth() + months);
+  const daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+  date.setDate(Math.min(day, daysInMonth));
+  return date.getTime();
+}
+
+/** Fractional calendar months from `a` to `b`, negated (the moment.js formula). */
+function monthDiff(a: number, b: number): number {
+  if (new Date(a).getDate() < new Date(b).getDate()) return -monthDiff(b, a);
+  const from = new Date(a);
+  const to = new Date(b);
+  const whole = (to.getFullYear() - from.getFullYear()) * 12 + (to.getMonth() - from.getMonth());
+  const anchor = addMonths(a, whole);
+  const before = b - anchor < 0;
+  const anchor2 = addMonths(a, whole + (before ? -1 : 1));
+  return +(-(whole + (b - anchor) / (before ? anchor - anchor2 : anchor2 - anchor)) || 0);
+}
+
+/**
+ * Time since `date` as one compact unit: `"now"` or `"42s"`, then `"5m"`,
+ * `"3h"`, `"2d"`, `"4mo"`, `"1y"`. Strings are parsed with `new Date(string)`.
+ * An invalid date gives `"NaNy"`, or `"0mo"` with `calendar`.
+ */
+export function formatCompactRelativeTime(
+  date: string | number | Date,
+  options: CompactRelativeTimeOptions = {},
+): string {
+  const now = options.now ?? Date.now();
+  const then = new Date(date).getTime();
+  const diff = now - then;
+
+  const seconds = truncate(diff / 1000);
+  if (seconds < 60) return options.justNow ?? `${seconds}s`;
+  const minutes = truncate(diff / MS_PER_MINUTE);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = truncate(diff / (60 * MS_PER_MINUTE));
+  if (hours < 24) return `${hours}h`;
+
+  if (!options.calendar) {
+    const days = Math.floor(hours / 24);
+    if (days < 30) return `${days}d`;
+    const months = Math.floor(days / 30);
+    if (months < 12) return `${months}mo`;
+    return `${Math.floor(months / 12)}y`;
+  }
+
+  const zoneDelta = (utcOffset(then) - utcOffset(now)) * MS_PER_MINUTE;
+  const days = truncate((diff - zoneDelta) / MS_PER_DAY);
+  if (days < 30) return `${days}d`;
+  const months = monthDiff(now, then);
+  if (truncate(months) < 12) return `${truncate(months)}mo`;
+  return `${truncate(months / 12)}y`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.7.2",
+  "version": "0.9.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",
@@ -35,6 +35,7 @@
       "types": "./tokens/src/tailwind-preset.d.mts",
       "default": "./tokens/src/tailwind-preset.mjs"
     },
+    "./landing.css": "./src/marketing/landing.css",
     "./package.json": "./package.json"
   },
   "types": "./src/index.ts",
@@ -50,13 +51,14 @@
     "!**/*.test.tsx"
   ],
   "sideEffects": [
-    "./src/ui/sonner.css"
+    "./src/ui/sonner.css",
+    "./src/marketing/landing.css"
   ],
   "scripts": {
     "check:tokens": "node tokens/scripts/check-component-tokens.mjs",
     "build": "node tokens/scripts/check-exports.mjs && node tokens/scripts/check-component-tokens.mjs && tsc -p tsconfig.json",
     "typecheck": "tsc -p tsconfig.json && tsc -p tokens/tsconfig.json",
-    "test": "node tokens/scripts/check-component-tokens.mjs && vitest run && node --test tokens/test/*.test.mjs",
+    "test": "node tokens/scripts/check-component-tokens.mjs && vitest run && node --test tokens/test/*.test.mjs app/tests-node/*.test.mjs",
     "verify": "node tokens/scripts/check-component-tokens.mjs && node tokens/verify/run.mjs",
     "analyze": "node tokens/verify/analyze.mjs",
     "prepack": "node tokens/scripts/check-exports.mjs"
@@ -140,10 +142,12 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "dayjs": "1.11.19",
     "embla-carousel-react": "^8.6.0",
     "happy-dom": "^18.0.0",
     "motion": "^12.0.0",
     "nanoid": "^5.1.0",
+    "next-themes": "0.4.6",
     "radix-ui": "^1.4.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

package/shell/src/SidebarAccountMenu.tsx

@@ -1,14 +1,19 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { useState, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { IconLogout, IconMoon, IconSun } from "@tabler/icons-react";
+import { ConfirmSkipHint, skipConfirmTitle } from "../../app/src/confirm/ConfirmSkipHint";
+import { useRequestConfirm } from "../../app/src/confirm/useRequestConfirm";
 import { Button, type ButtonProps } from "../../src/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../../src/ui/dropdown-menu";
 import { cn } from "../../src/utils/cn";
 import { accountEmailClass, railTileClass, railTileStateClass } from "./app-shell-classes";
+import { SignOutDialog } from "./SignOutDialog";
 
 type ContentProps = ComponentPropsWithoutRef<typeof DropdownMenuContent>;
 
@@ -45,6 +50,20 @@ export type SidebarAccountMenuProps = {
   >;
   /** Menu items after the label and separator. */
   children?: ReactNode;
+  /** Adds a "Light mode" / "Dark mode" item after `children`. */
+  themeToggle?: { isDark: boolean; onToggle: () => void };
+  /**
+   * Adds a separator and a danger "Sign out" item last. Selecting it opens
+   * `SignOutDialog` (Alt-click skips it, with `ConfirmSkipHint`). The menu owns
+   * the dialog state; `onSignOut` failing re-enables the dialog.
+   */
+  signOut?: {
+    onSignOut: () => Promise<void>;
+    /** Second line of the dialog. */
+    description?: string;
+  };
+  /** `size` of the theme and sign-out item icons. Default: the icon's own size (24). */
+  itemIconSize?: number;
 };
 
 /** Account menu on a rail tile: avatar trigger, identity label, then the app's items. Composed from `Sidebar.Account*` parts. */
@@ -62,8 +81,25 @@ export function SidebarAccountMenu({
   triggerProps,
   contentProps,
   children,
+  themeToggle,
+  signOut,
+  itemIconSize,
 }: SidebarAccountMenuProps) {
-  return (
+  const [signOutOpen, setSignOutOpen] = useState(false);
+  const [signingOut, setSigningOut] = useState(false);
+  const { request } = useRequestConfirm();
+
+  const handleSignOut = async () => {
+    if (!signOut) return;
+    setSigningOut(true);
+    try {
+      await signOut.onSignOut();
+    } catch {
+      setSigningOut(false);
+    }
+  };
+
+  const menu = (
     <AccountMenu badge={badge}>
       <AccountTrigger {...triggerProps} userName={name} imageUrl={imageUrl} />
       <AccountContent
@@ -77,9 +113,49 @@ export function SidebarAccountMenu({
         <AccountLabel userName={name} email={email} imageUrl={imageUrl} stacked={stackedLabel} />
         <AccountSeparator />
         {children}
+        {themeToggle ? (
+          <DropdownMenuItem onSelect={() => themeToggle.onToggle()}>
+            {themeToggle.isDark ? <IconSun size={itemIconSize} /> : <IconMoon size={itemIconSize} />}
+            {themeToggle.isDark ? "Light mode" : "Dark mode"}
+          </DropdownMenuItem>
+        ) : null}
+        {signOut ? (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={() =>
+                request(
+                  () => setSignOutOpen(true),
+                  () => {
+                    void handleSignOut();
+                  },
+                )
+              }
+              className="text-danger focus:text-danger data-[highlighted]:text-danger"
+              title={skipConfirmTitle("Sign out")}
+            >
+              <IconLogout size={itemIconSize} />
+              Sign out
+              <ConfirmSkipHint />
+            </DropdownMenuItem>
+          </>
+        ) : null}
       </AccountContent>
     </AccountMenu>
   );
+  if (!signOut) return menu;
+  return (
+    <>
+      {menu}
+      <SignOutDialog
+        open={signOutOpen}
+        onOpenChange={setSignOutOpen}
+        pending={signingOut}
+        onConfirm={handleSignOut}
+        description={signOut.description}
+      />
+    </>
+  );
 }
 
 export type SidebarAccountMenuRootProps = ComponentPropsWithoutRef<typeof DropdownMenu> & {

package/shell/src/SidebarRail.tsx

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpandFilled } from "@tabler/icons-react";
 import { cn } from "../../src/utils/cn";
 import { railTileClass, railTileStateClass } from "./app-shell-classes";
 import { SidebarIconTooltip } from "./SidebarIconTooltip";
@@ -199,3 +200,22 @@ export type RailDividerProps = { className?: string };
 export function RailDivider({ className }: RailDividerProps) {
   return <RailSeparator className={className} />;
 }
+
+export type RailCollapseTileProps = {
+  /** Panel is collapsed: shows the expand icon and "Show sidebar". */
+  collapsed: boolean;
+  onToggle: () => void;
+};
+
+/** Rail tile that shows or hides the sidebar panel. */
+export function RailCollapseTile({ collapsed, onToggle }: RailCollapseTileProps) {
+  return (
+    <RailItem label={collapsed ? "Show sidebar" : "Hide sidebar"} onClick={onToggle}>
+      {collapsed ? (
+        <IconLayoutSidebarLeftExpandFilled className="size-[22px]" />
+      ) : (
+        <IconLayoutSidebarLeftCollapse className="size-[22px]" />
+      )}
+    </RailItem>
+  );
+}

package/shell/src/index.ts

@@ -22,8 +22,8 @@ export { AppSidebar } from "./AppSidebar.js";
 export type { AppSidebarProps } from "./AppSidebar.js";
 // Composable sidebar parts (`Sidebar.Root`, `Sidebar.Rail`, ...) and their prop types.
 export * from "./Sidebar.js";
-export { SidebarRail, RailTile, RailDivider } from "./SidebarRail.js";
-export type { SidebarRailProps, RailTileProps, RailDividerProps } from "./SidebarRail.js";
+export { SidebarRail, RailTile, RailDivider, RailCollapseTile } from "./SidebarRail.js";
+export type { SidebarRailProps, RailTileProps, RailDividerProps, RailCollapseTileProps } from "./SidebarRail.js";
 export { SidebarResizeHandle, useAppShellResize } from "./SidebarResize.js";
 export type {
   AppShellResize,

package/src/index.ts

@@ -135,8 +135,13 @@ export { AppSidebar } from "../shell/src/AppSidebar";
 export type { AppSidebarProps } from "../shell/src/AppSidebar";
 // Composable sidebar parts (`Sidebar.Root`, `Sidebar.Rail`, ...) and their prop types.
 export * from "../shell/src/Sidebar";
-export { SidebarRail, RailTile, RailDivider } from "../shell/src/SidebarRail";
-export type { SidebarRailProps, RailTileProps, RailDividerProps } from "../shell/src/SidebarRail";
+export { SidebarRail, RailTile, RailDivider, RailCollapseTile } from "../shell/src/SidebarRail";
+export type {
+  SidebarRailProps,
+  RailTileProps,
+  RailDividerProps,
+  RailCollapseTileProps,
+} from "../shell/src/SidebarRail";
 export { SidebarResizeHandle, useAppShellResize } from "../shell/src/SidebarResize";
 export type {
   AppShellResize,
@@ -172,6 +177,51 @@ export {
 } from "../shell/src/app-shell-classes";
 export type { SidebarNavItemClassOptions } from "../shell/src/app-shell-classes";
 
+// Marketing: landing kit, site footer and pricing dialog. Router- and Motion-free;
+// `createLandingKit` takes the app's `motion`. Styles: `@vvedantb/ui/landing.css`.
+export {
+  LandingFeatureCard,
+  LandingFooter,
+  LandingLattice,
+  LandingNavMenu,
+  LandingPageLayout,
+  LandingSection,
+  LandingSectionHeading,
+  landingItemVariants,
+} from "./marketing/landing";
+export type {
+  LandingFeature,
+  LandingFooterProps,
+  LandingLatticeProps,
+  LandingLink,
+  LandingNavMenuProps,
+  LandingPageLayoutProps,
+  LandingSectionHeadingProps,
+  LandingSectionProps,
+} from "./marketing/landing";
+export { createLandingKit } from "./marketing/createLandingKit";
+export type {
+  LandingCtaProps,
+  LandingHeroProps,
+  LandingKit,
+  LandingKitOptions,
+  LandingMotion,
+  LandingNavProps,
+  LandingRevealItemProps,
+  LandingRevealProps,
+} from "./marketing/createLandingKit";
+export {
+  landingFooterButtonClass,
+  landingFooterLinkClass,
+  landingPanelClass,
+  landingShellClass,
+} from "./marketing/marketing-classes";
+export type { PricingModalTone, SiteFooterVariant } from "./marketing/marketing-classes";
+export { SiteFooter } from "./marketing/SiteFooter";
+export type { SiteFooterLink, SiteFooterProps, SiteFooterSocial } from "./marketing/SiteFooter";
+export { PricingModal } from "./marketing/PricingModal";
+export type { PricingModalProps } from "./marketing/PricingModal";
+
 // App helpers: confirm skip, update watcher, settings chrome, stable auth.
 export * from "../app/src/index";
 

package/src/marketing/PricingModal.tsx

@@ -0,0 +1,126 @@
+import type { ReactElement, ReactNode } from "react";
+import { IconCheck, IconX } from "@tabler/icons-react";
+import { Button } from "../ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../ui/dialog";
+import { VisuallyHidden } from "../ui/visually-hidden";
+import { pricingModalClasses, type PricingModalTone } from "./marketing-classes";
+
+export type PricingModalProps = {
+  open: boolean;
+  /** Called when the dialog asks to close and by the `closeButton`. */
+  onClose: () => void;
+  /** Accessible dialog title, for example "Pro". Not visible. */
+  title: string;
+  /** Accessible description. Not visible. When set, the title is an `sr-only` `DialogTitle` followed by this. */
+  description?: string;
+  /** Logo before the wordmark: `dark` shows in dark mode, `light` in light mode. 28px. */
+  logo: { dark: string; light: string };
+  /** Text after the logo, before the PRO badge. */
+  wordmark: string;
+  /** For example "$9". */
+  price: string;
+  tagline: ReactNode;
+  /** Extra font class on the tagline, placed after `max-w-[28ch]`. */
+  taglineFontClassName?: string;
+  /** Plan features under "What you get". */
+  features: readonly string[];
+  /** Label of the full-width checkout button. Default "Get Pro". */
+  ctaLabel?: string;
+  /** Wraps the checkout button, for example in the billing provider's checkout and signed-in gates. */
+  renderCheckout: (button: ReactElement) => ReactNode;
+  /** Second, compact close button in the top-right corner. Default `false`. */
+  closeButton?: boolean;
+  /** Secondary text colour class. Default `"muted"`. */
+  tone?: PricingModalTone;
+};
+
+/** Single-plan upgrade dialog: brand header with price and tagline, checkout button and feature list. */
+export function PricingModal({
+  open,
+  onClose,
+  title,
+  description,
+  logo,
+  wordmark,
+  price,
+  tagline,
+  taglineFontClassName,
+  features,
+  ctaLabel = "Get Pro",
+  renderCheckout,
+  closeButton = false,
+  tone = "muted",
+}: PricingModalProps) {
+  const c = pricingModalClasses[tone];
+  const taglineClass = ["mt-4 max-w-[28ch]", taglineFontClassName, c.tagline].filter(Boolean).join(" ");
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
+      <DialogContent className="gap-0 overflow-hidden p-0 sm:max-w-md">
+        {description ? (
+          <>
+            <DialogTitle className="sr-only">{title}</DialogTitle>
+            <DialogDescription className="sr-only">{description}</DialogDescription>
+          </>
+        ) : (
+          <VisuallyHidden>
+            <DialogTitle>{title}</DialogTitle>
+          </VisuallyHidden>
+        )}
+
+        {closeButton ? (
+          <button
+            onClick={onClose}
+            className="absolute right-4 top-4 z-10 flex size-7 items-center justify-center rounded-md text-muted-foreground transition-[background-color,transform] duration-100 ease-out active:scale-[0.96] hover:bg-surface-tertiary hover:text-foreground"
+          >
+            <IconX className="size-4" />
+            <span className="sr-only">Close</span>
+          </button>
+        ) : null}
+
+        <div className="bg-surface-secondary px-8 pb-8 pt-10 dark:bg-surface-secondary/40">
+          <div className="flex items-center">
+            <img src={logo.dark} alt="" width={28} height={28} className="hidden dark:block" />
+            <img src={logo.light} alt="" width={28} height={28} className="block dark:hidden" />
+            <span className="font-michroma text-xl tracking-wider text-foreground">{wordmark}</span>
+            <span className="ml-2 rounded-md bg-segment px-2 py-0.5 font-michroma text-[10px] tracking-[0.25em] text-segment-foreground">
+              PRO
+            </span>
+          </div>
+
+          <div className="mt-8 flex items-end gap-2">
+            <span className="text-5xl font-medium tabular-nums leading-none tracking-tight text-foreground">
+              {price}
+            </span>
+            <span className={c.period}>/ month</span>
+          </div>
+
+          <p className={taglineClass}>{tagline}</p>
+        </div>
+
+        <div className="px-8 pb-8 pt-6">
+          {renderCheckout(
+            <Button size="lg" className="h-11 w-full rounded-xl">
+              {ctaLabel}
+            </Button>,
+          )}
+
+          <p className={c.note}>Cancel anytime. Billed monthly.</p>
+
+          <div className="mt-8">
+            <p className={c.featuresHeading}>What you get</p>
+            <ul className="space-y-3">
+              {features.map((feature) => (
+                <li key={feature} className="flex items-start gap-3">
+                  <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-md bg-default dark:bg-default/80">
+                    <IconCheck className="size-3 text-foreground" strokeWidth={2.5} />
+                  </span>
+                  <span className="text-sm leading-snug text-foreground">{feature}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/marketing/SiteFooter.tsx

@@ -0,0 +1,135 @@
+import type { ComponentType, ReactNode } from "react";
+import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
+import { siteFooterClasses, type SiteFooterVariant } from "./marketing-classes";
+
+export type SiteFooterLink = {
+  href: string;
+  label: string;
+  /** Opens in a new tab (`target="_blank" rel="noopener noreferrer"`). */
+  external?: boolean;
+  /** 20px round image before the label. */
+  image?: { src: string; alt: string };
+};
+
+export type SiteFooterSocial = {
+  href: string;
+  /** Rendered with the variant's `w-4 h-4` muted class, for example a Tabler brand icon. */
+  icon: ComponentType<{ className?: string }>;
+  /** `aria-label` on the link. */
+  label?: string;
+};
+
+export type SiteFooterProps = {
+  /** Wordmark text above the tagline. */
+  brand: ReactNode;
+  tagline: ReactNode;
+  /** Icon buttons under the tagline. Always open in a new tab. */
+  socials: readonly SiteFooterSocial[];
+  /** Link columns to the right of the brand block. */
+  columns: readonly { heading: string; links: readonly SiteFooterLink[] }[];
+  /** Name in "Copyright © {year} {name}". */
+  name: string;
+  /** Default: the current year. */
+  year?: number;
+  /** Bottom-right links, for example Privacy Policy and Terms of Service. Always open in a new tab. */
+  legalLinks: readonly { href: string; label: string }[];
+  /**
+   * `"muted"` (default) and `"muted-foreground"` pick the secondary text
+   * colour class. `"touch"` uses `text-muted-foreground`, `max-sm:hit-target`
+   * links and a safe-area bottom padding.
+   */
+  variant?: SiteFooterVariant;
+};
+
+/** Marketing site footer: brand, socials, link columns, then copyright and legal links under a separator. */
+export function SiteFooter({
+  brand,
+  tagline,
+  socials,
+  columns,
+  name,
+  year = new Date().getFullYear(),
+  legalLinks,
+  variant = "muted",
+}: SiteFooterProps) {
+  const c = siteFooterClasses[variant];
+  return (
+    <footer className={c.footer}>
+      <div className="relative z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8 lg:gap-12">
+            <div className="flex-1 lg:flex-none">
+              <div className="text-lg font-michroma font-normal tracking-wider mb-3 md:mb-4">{brand}</div>
+              <p className={c.tagline}>{tagline}</p>
+              <div className="flex gap-3 md:gap-4">
+                {socials.map(({ href, icon: Icon, label }) => (
+                  <a key={href} href={href} target="_blank" rel="noopener noreferrer" aria-label={label}>
+                    <Button variant="ghost" size="icon" className={c.socialButton}>
+                      <Icon className={c.socialIcon} />
+                    </Button>
+                  </a>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex flex-col sm:flex-row gap-8 md:gap-12 lg:gap-16 xl:gap-20">
+              {columns.map((column) => (
+                <div key={column.heading} className="flex-1 sm:flex-none">
+                  <h4 className={c.heading}>{column.heading}</h4>
+                  <div className={c.links}>
+                    {column.links.map((link) => (
+                      <a
+                        key={link.label}
+                        href={link.href}
+                        {...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                        className={link.image ? c.imageLink : c.link}
+                      >
+                        {link.image ? (
+                          <img
+                            src={link.image.src}
+                            alt={link.image.alt}
+                            width={20}
+                            height={20}
+                            className="rounded-full object-cover w-5 h-5 md:w-5 md:h-5"
+                          />
+                        ) : null}
+                        {link.label}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <Separator className="my-6 md:my-8 bg-separator" />
+
+          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 sm:gap-0">
+            <div className="flex flex-col gap-1 text-center sm:text-left">
+              <p className={c.copyright}>
+                Copyright &copy; {year}
+                {` ${name}`}
+              </p>
+              <p className={c.rights}>All rights reserved.</p>
+            </div>
+
+            <div className="flex flex-col gap-1 text-center sm:text-right">
+              {legalLinks.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={c.legalLink}
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}