Reusable layout components, page sections, CTAs, navigation, typography, and shared UI patterns.

@katebtech/layout

Reusable layout components and website-level helpers for Kateb Tech projects.

@katebtech/layout provides shared layout systems such as breadcrumbs, navbars, footers, heroes, CTAs, floating actions, global pages, multilingual sections, metadata helpers, and Swiper-based service carousels.

Purpose

Use this package for reusable website layout patterns that sit above low-level UI primitives and below project-specific website code.

This package depends on:

@katebtech/core for typography, buttons, utility helpers, shared routes, language keys, and shared content constants.
@katebtech/media for image components, image metadata types, blur placeholders, gallery components, and previews.
@katebtech/pages for reusable page-section data types used by page-aware layout components.

Website-specific data, routes, images, SEO config, business logic, server actions, and one-off page content should stay inside the consuming website project and be passed into layout components as props.

Package Overview

This package provides:

Breadcrumb navigation for nested pages.
Loading/action button helpers.
Reusable call-to-action sections.
Floating quick-contact actions.
Versioned footer, hero, and navbar building blocks.
Shared error, loading, and not-found page components.
Multilingual display sections.
Metadata, robots, and sitemap helper APIs.
Swiper-based service carousel layouts.

Reusable page-section components for About, Contact, and Services pages live in @katebtech/pages.

Package version: 2.1.55

Core dependency: @katebtech/core@2.0.48

Media dependency: @katebtech/media@0.0.30

Pages dependency: @katebtech/pages@2.0.6

File Structure

src
├── breadcrumbs
│   ├── Breadcrumbs.tsx
│   ├── index.ts
│   └── types.ts
├── button
│   ├── ActionButton.tsx
│   ├── index.ts
│   └── types.ts
├── cta
│   ├── ServiceCTA.tsx
│   ├── helpers.ts
│   ├── index.ts
│   ├── presets.ts
│   └── types.ts
├── floating-actions
│   ├── WhatsAppFloat.tsx
│   └── index.ts
├── footer
│   └── 1
│       ├── Acknowledgement.tsx
│       ├── FooterHeader.tsx
│       ├── PoweredByKateb.tsx
│       ├── components.tsx
│       ├── index.ts
│       └── types.ts
├── global
│   ├── ErrorPage.tsx
│   ├── GenericLoadingPage.tsx
│   ├── NotFoundPage.tsx
│   ├── index.ts
│   └── types.ts
├── hero
│   └── 1
│       ├── HeroBackground.tsx
│       ├── HeroCta.tsx
│       ├── HeroHeadAndDesc.tsx
│       ├── HeroLogoVisualCard.tsx
│       ├── MultilingualSupport.tsx
│       ├── index.ts
│       └── types.ts
├── languages
│   ├── home-components
│   │   ├── MultiLanguageCapacity.tsx
│   │   ├── components
│   │   │   ├── SecondaryLanguageCard.tsx
│   │   │   ├── ServicesOtherLanguages.tsx
│   │   │   └── index.ts
│   │   └── index.ts
│   ├── index.ts
│   └── types.ts
├── metadata
│   ├── buildMetadata.ts
│   ├── index.ts
│   ├── robots.ts
│   ├── sitemap
│   │   ├── createBaseSitemapPages.ts
│   │   └── index.ts
│   ├── types.ts
│   └── utils.ts
├── navbar
│   └── 1
│       ├── HomeLink.tsx
│       ├── HzLanguages.tsx
│       ├── PrimaryLinks.tsx
│       ├── ServiceMenu.tsx
│       ├── _lib
│       │   ├── DropdownMenu.tsx
│       │   └── useDropdownMenu.ts
│       ├── account
│       │   ├── AccountMenu.tsx
│       │   ├── AccountMenuClient.tsx
│       │   └── LogoutButton.tsx
│       ├── index.ts
│       └── types.ts
└── swiper
    ├── carousels
    │   ├── index.ts
    │   └── services
    │       ├── CarouselSkeleton.tsx
    │       ├── ServiceLeavesCarousel.tsx
    │       ├── components
    │       │   ├── CarouselImage.tsx
    │       │   ├── CarouselNav.tsx
    │       │   ├── CarouselSlide.tsx
    │       │   └── CarouselSlideContent.tsx
    │       ├── hook
    │       │   ├── useCarouselNav.ts
    │       │   └── useMounted.ts
    │       ├── index.ts
    │       ├── modal
    │       │   ├── ServiceLeafModal.tsx
    │       │   └── ServiceLeafModalContent.tsx
    │       └── types.ts
    └── index.ts

Folder purposes:

Folder	Purpose
`src/breadcrumbs`	Breadcrumb navigation for nested pages.
`src/button`	Reusable button and loading/action button components.
`src/cta`	Call-to-action presets, helpers, types, and section components.
`src/floating-actions`	Fixed quick-contact actions such as WhatsApp buttons.
`src/footer/1`	Versioned footer building blocks.
`src/global`	Shared error, loading, and not-found page components.
`src/hero/1`	Versioned hero-section building blocks.
`src/languages`	Multilingual website sections and translated service summary cards.
`src/metadata`	Metadata, robots, keyword, and sitemap helpers.
`src/navbar/1`	Versioned navbar building blocks, account menu, service menu, and language links.
`src/swiper`	Swiper-based carousel components for service sections.

Internal helper folders use leading underscores:

_lib for module-private helpers, hooks, schema, constants, and types.
_ui for module-private UI components that support public module exports.

Import Style

Consumers should use specific package subpaths:

import { ServiceCTA } from "@katebtech/layout/cta";
import { HeroBackground } from "@katebtech/layout/hero/1";
import { buildMetadata } from "@katebtech/layout/metadata";

Inside this package, use relative imports:

import { ServiceCTA } from "../cta";
import type { ServiceCTAProps } from "./types";

Avoid importing the package from itself:

import { ServiceCTA } from "@katebtech/layout/cta";

Image and Cloudinary-aware image behavior belongs to @katebtech/media/images:

import { PreviewImage } from "@katebtech/media/images";
import type { ImageMeta } from "@katebtech/media/images";

Package Rules

Public components, helpers, and useful public types should be exported from the module index.ts.

Public props and shared public data shapes should be exported as types:

export { ServiceCTA } from "./ServiceCTA";
export type { ServiceCTAProps, CtaPresetsKey } from "./types";

Implementation details should stay private to their module.

Versioned layout systems should keep their current version folder stable. If a future footer, hero, or navbar API needs breaking changes, create a new version folder such as footer/2, hero/2, or navbar/2.

Dependency direction should remain:

website project
  -> @katebtech/layout
  -> @katebtech/pages
  -> @katebtech/media
  -> @katebtech/core

Do not reverse this direction. @katebtech/core should not import layout, and @katebtech/layout should not import from a website project.

Avoid hard-coding website-specific values inside layout components. Pass organisation names, routes, phone numbers, images, service labels, metadata values, and content as props or config.

Before publishing, follow the central package publishing documentation. General Git, pnpm, registry, and publishing commands should live in central command documentation rather than this package README.

Module Documentation

Breadcrumbs

Breadcrumb components provide simple page hierarchy navigation.

Import:

import { Breadcrumbs } from "@katebtech/layout/breadcrumbs";
import type { Breadcrumb } from "@katebtech/layout/breadcrumbs";

Basic usage:

const breadcrumbs: Breadcrumb[] = [
  { label: "Home", href: "/" },
  { label: "Services", href: "/services" },
  {
    label: "Website Design",
    href: "/services/website-design",
    active: true,
  },
];

<Breadcrumbs breadcrumbs={breadcrumbs} />;

Exports:

Breadcrumbs
Breadcrumb

Notes:

Uses next/link.
The active breadcrumb should usually be the last item.
Returns null when the breadcrumb list is empty.

Button

Button helpers provide reusable loading/action button behavior for forms and user actions.

Import:

import { ActionButton } from "@katebtech/layout/button";
import type { ActionButtonProps } from "@katebtech/layout/button";

Basic usage:

<ActionButton type="submit" isLoading={isPending} loadingText="Sending...">
  Send Message
</ActionButton>

Exports:

ActionButton
ActionButtonProps
ButtonOnlyProps

Notes:

Uses Button from @katebtech/core/button.
Disables itself and sets aria-busy while loading.
Supports wrapper and button class overrides.

CTA

CTA components provide reusable call-to-action sections for service pages, landing pages, language pages, and enquiry flows.

Import:

import {
  CTA_PRESETS,
  ServiceCTA,
  ctaCall,
  ctaCallHz,
  getCtaCopy,
} from "@katebtech/layout/cta";

import type { CtaPresetsKey, ServiceCTAProps } from "@katebtech/layout/cta";

Basic usage:

<ServiceCTA
  ctaPresetKey="freeConsultation"
  orgProfile={{
    orgName: "Kateb Tech",
    orgNameHz: "کاتب تک",
  }}
  routes={{
    contact: () => "/contact-us",
    freeConsultation: () => "/free-consultation",
  }}
  serviceLabel="Website Design"
/>

Exports:

ServiceCTA
CTA_PRESETS
getCtaCopy
ctaCall
ctaCallHz
ServiceCTAProps
CtaPresetsKey

Notes:

Use generalEnquiry for broad enquiry sections.
Use serviceLabel and serviceLabelHz for service-specific CTA sections.
CTA language keys come from @katebtech/core.
Do not import CTA presets or helpers from @katebtech/core.

Floating Actions

Floating action components provide fixed quick-contact links for websites.

Import:

import { WhatsAppFloat } from "@katebtech/layout/floating-actions";
import type { WhatsAppFloatProps } from "@katebtech/layout/floating-actions";

Basic usage:

<WhatsAppFloat
  textHeading="Hi, I would like to ask about your services."
  whatsAppNumber="61412345678"
/>

Exports:

WhatsAppFloat
WhatsAppFloatProps

Notes:

Uses next/link.
Opens WhatsApp in a new tab with an encoded prefilled message.
WhatsApp numbers should use international format without +, spaces, or brackets.

Footer components provide versioned reusable footer building blocks.

Import:

import {
  Acknowledgement,
  FooterHeader,
  LinkSection,
  PoweredByKateb,
  Section,
} from "@katebtech/layout/footer/1";

Basic usage:

<Section title="Quick Links">
  <LinkSection
    title="Services"
    items={[{ href: "/services", label: "Services" }]}
    listClassName="space-y-2"
    linkClassName="text-sm text-slate-200 hover:text-white"
  />
</Section>

<Acknowledgement orgName="Kateb Tech" />
<PoweredByKateb orgName="Kateb Tech" />

Exports:

Acknowledgement
FooterHeader
PoweredByKateb
Section
LinkSection
AcknowledgementProps
FooterHeaderProps
PoweredByKatebProps
FooterSectionProps
FooterLinkSectionProps
FooterLinkItem

Notes:

Uses Header and P from @katebtech/core.
Uses next/link for footer links.
PoweredByKateb uses KATEB_TECH_LOGO from @katebtech/core.

Global

Global components provide reusable app-level page states.

Import:

import {
  ErrorPage,
  GenericLoadingPage,
  NotFoundPage,
} from "@katebtech/layout/global";

Exports:

ErrorPage
GenericLoadingPage
NotFoundPage
global page prop types from types.ts

Notes:

Use these for shared error, loading, and not-found views across website projects.
Keep route-specific behavior in the website project.

Hero

Hero components provide versioned reusable building blocks for homepage and landing page hero sections.

Import:

import {
  HeroBackground,
  HeroCta,
  HeroHeadAndDesc,
  HeroLogoVisualCard,
  MultilingualSupport,
} from "@katebtech/layout/hero/1";

Basic usage:

<section className="relative overflow-hidden">
  <HeroBackground orgName="Kateb Tech" src={heroImage} />
  <div className="relative z-10">
    <HeroHeadAndDesc
      orgName="Kateb Tech"
      description="Professional websites and digital systems."
    />
    <HeroCta
      actions={[
        {
          label: "Free Consultation",
          href: "/free-consultation",
        },
      ]}
      phone="0400 000 000"
    />
  </div>
</section>

Exports:

HeroBackground
HeroCta
HeroHeadAndDesc
HeroLogoVisualCard
MultilingualSupport
HeroBackgroundProps
HeroCtaProps
HeroCtaAction
HeroHeadAndDescProps
HeroLogoVisualCardProps
MultilingualSupportProps

Notes:

Uses next/image.
Uses Header, P, and Button primitives from @katebtech/core.
Hero images should be passed in by the consuming website project.

Languages

Language components provide reusable multilingual website sections for organisations that serve clients in more than one language.

Import:

import {
  MultiLanguageCapacity,
  SecondaryLanguageCard,
  ServicesOtherLanguages,
} from "@katebtech/layout/languages";

import type {
  MultiLanguageCapacityProps,
  SecondaryLanguageCardProps,
  ServicesOtherLanguagesProps,
} from "@katebtech/layout/languages";

Basic usage:

<MultiLanguageCapacity
  otherLangKeys={["HZ"]}
  orgName="Kateb Tech"
  orgNameHz="کاتب تک"
/>

Exports:

MultiLanguageCapacity
SecondaryLanguageCard
ServicesOtherLanguages
MultiLanguageCapacityProps
SecondaryLanguageCardProps
ServicesOtherLanguagesProps

Notes:

Shared language keys and statements come from @katebtech/core.
Do not import statement maps from @katebtech/layout/languages.
Components return null when there is no relevant secondary language data to render.

Metadata

Metadata helpers provide reusable Next.js metadata, robots, keyword, and sitemap helpers.

Import:

import {
  ROBOTS_INDEX,
  ROBOTS_NOINDEX,
  buildMetadata,
  createBaseSitemapPages,
  createLocationKeywords,
} from "@katebtech/layout/metadata";

import type { PageMetadataConfig } from "@katebtech/layout/metadata";

Basic usage:

const metadata = buildMetadata(
  {
    title: "Website Design",
    description: "Professional website design services.",
    canonicalPathname: "/services/website-design",
  },
  "Kateb Tech",
  "katebtech.com.au",
);

Exports:

buildMetadata
ROBOTS_INDEX
ROBOTS_NOINDEX
createBaseSitemapPages
createLocationKeywords
PageMetadataConfig

Notes:

Uses Next.js Metadata types.
Uses shared URL and route helpers from @katebtech/core.
Website projects should own page-specific metadata values and pass them into these helpers.

Navbar components provide versioned reusable navigation building blocks.

Import:

import {
  AccountMenu,
  HomeLink,
  HzLanguage,
  PrimaryLinks,
  ServicesMenuClient,
} from "@katebtech/layout/navbar/1";

Basic usage:

<PrimaryLinks
  aboutHref="/about-us"
  contactHref="/contact-us"
  hzLanguageHref="/hz"
  hzLanguage="HZ"
  services={[{ label: "Website Design", href: "/services/website-design" }]}
  primaryLinkClass="rounded-xl px-4 py-2 text-sm font-medium"
/>

Exports:

AccountMenu
HomeLink
HzLanguage
PrimaryLinks
ServicesMenuClient
navbar types from types.ts

Notes:

Uses next/link and next/image.
ServicesMenuClient and AccountMenu use the internal DropdownMenu.
Route paths, account links, service links, and language destinations should come from the consuming website.

Swiper

Swiper components provide carousel-based UI sections for services and homepage sections.

Import:

import { ServiceLeavesCarousel } from "@katebtech/layout/swiper";
import type { ServiceLeavesCarouselProps } from "@katebtech/layout/swiper";

Basic usage:

<ServiceLeavesCarousel subcategories={service.subcategories} />

Exports:

ServiceLeavesCarousel
ServiceLeavesCarouselProps
service carousel types from src/swiper/carousels/services/types.ts

Notes:

Uses swiper/react.
Uses useMounted to avoid SSR/CSR mismatch issues.
Returns null when there are no subcategory entries.
Carousel internals such as CarouselSlide, CarouselNav, ServiceLeafModal, useMounted, and useCarouselNav are implementation details.

@katebtech/layout

On this page