# Aurael

> Bilingual (EN/AR) landing page for a home-solar brand, built around a day/night control that re-themes the whole page: a full-height photographic hero that cross-fades between morning and night, then hairline-ruled bands with a sticky meta rail for how it works, cases, about, careers, resources and customers. Self-contained morning/night palettes, Inter + Manrope with Cairo for Arabic, and RTL that follows the surrounding document.

A shadcn/ui block from the [@hirael](https://hirael.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/hirael/aurael).

- Page, with a live preview: https://shadcn.exchange/r/hirael/aurael
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/hirael/aurael-light-1571fa2994baf307.png
- Registry item: https://hirael.com/r/aurael.json
- Categories: templates
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://hirael.com/r/aurael.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`, `motion`
- Registry items: `button`

## Files

### `registry/hirael/bases/radix/templates/aurael/aurael.tsx`

```tsx
// Aurael from Hirael <https://hirael.com/templates/aurael>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

'use client';

import * as React from 'react';

import { cn } from '@/lib/utils';

import { About } from './about';
import { Careers } from './careers';
import { Cases } from './cases';
import { Customers } from './customers';
import { cairo, inter, manrope } from './fonts';
import { Footer } from './footer';
import { Hero } from './hero';
import { HowItWorks } from './how-it-works';
import { useDocumentRtl, useDocumentScene, type Lang, type Scene } from './primitives';
import { Resources } from './resources';
import { AuraelStyles } from './styles';

const Aurael = () => {
  const [langOverride, setLangOverride] = React.useState<Lang | null>(null);
  const [sceneOverride, setSceneOverride] = React.useState<Scene | null>(null);
  const docIsRtl = useDocumentRtl();
  const docScene = useDocumentScene();
  const lang: Lang = langOverride ?? (docIsRtl ? 'ar' : 'en');
  const scene: Scene = sceneOverride ?? docScene;

  return (
    <div
      className={cn(
        'aurael',
        inter.variable,
        manrope.variable,
        cairo.variable,
        'flex flex-col bg-background text-foreground antialiased',
      )}
      data-scene={scene}
      dir={lang === 'ar' ? 'rtl' : 'ltr'}
      lang={lang}
    >
      <AuraelStyles />
      <Hero lang={lang} setLang={setLangOverride} scene={scene} setScene={setSceneOverride} />
      <HowItWorks lang={lang} />
      <Cases lang={lang} />
      <About lang={lang} />
      <Careers lang={lang} />
      <Resources lang={lang} />
      <Customers lang={lang} />
      <Footer lang={lang} />
    </div>
  );
};

export default Aurael;
```

### `registry/hirael/bases/radix/templates/aurael/hero.tsx`

```tsx
// Aurael from Hirael <https://hirael.com/templates/aurael>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

'use client';

import * as React from 'react';
import Image from 'next/image';
import { Languages } from 'lucide-react';
import { motion, useAnimationControls, useReducedMotion } from 'motion/react';

import { cn } from '@/lib/utils';
import { Button } from '@/registry/hirael/bases/radix/ui/button';

import { LOREM, SCENE_IMAGE, SECTION_IDS, type Lang, type Scene } from './primitives';

const SCENES: Scene[] = ['morning', 'night'];

const COPY = {
  en: {
    toLang: 'العربية',
    brandName: 'Aurael',
    nav: ['Lorem', 'Ipsum', 'Dolor', 'Sit amet', 'Consectetur', 'Adipiscing'],
    menu: 'Menu',
    titleLead: 'Lorem ipsum dolor',
    titleAccent: 'sit amet',
    titleTrail: 'consectetur',
    body: LOREM.en.medium,
    toggleLabel: 'Day or night',
    scene: {
      morning: { label: 'Morning', note: 'Lorem ipsum' },
      night: { label: 'Night', note: 'Lorem ipsum' },
    },
    alt: {
      morning: 'A valley at first light, the lake below catching the sun',
      night: 'The same valley after dark, lit by a crescent moon',
    },
  },
  ar: {
    toLang: 'English',
    brandName: 'أورايل',
    nav: ['لوريم', 'إيبسوم', 'دولور', 'سيت أميت', 'كونسيكتيتور', 'أديبيسكينج'],
    menu: 'القائمة',
    titleLead: 'لوريم إيبسوم دولور',
    titleAccent: 'سيت أميت',
    titleTrail: 'كونسيكتيتور',
    body: LOREM.ar.medium,
    toggleLabel: 'النهار أو الليل',
    scene: {
      morning: { label: 'الصباح', note: 'لوريم إيبسوم' },
      night: { label: 'الليل', note: 'لوريم إيبسوم' },
    },
    alt: {
      morning: 'وادٍ عند أوّل الضوء، والبحيرة تحته تعكس الشمس',
      night: 'الوادي نفسه بعد الغروب، يضيئه هلال',
    },
  },
} satisfies Record<Lang, unknown>;

interface HeroProps {
  lang: Lang;
  setLang: (lang: Lang) => void;
  scene: Scene;
  setScene: (scene: Scene) => void;
}

export const Hero = ({ lang, setLang, scene: selected, setScene }: HeroProps) => {
  const [displayScene, setDisplayScene] = React.useState<Scene | null>(null);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const reduced = useReducedMotion();
  const controls = useAnimationControls();
  const animatingRef = React.useRef(false);

  const c = COPY[lang];
  const scene: Scene = displayScene ?? selected;
  const other: Scene = scene === 'night' ? 'morning' : 'night';

  const goToScene = (next: Scene) => {
    if (next === selected || animatingRef.current) return;
    const current = scene;
    setScene(next);
    if (reduced) {
      setDisplayScene(null);

      return;
    }
    animatingRef.current = true;
    setDisplayScene(current);
    controls
      .start({
        y: '20%',
        scale: 1.1,
        opacity: 0.8,
        transition: { duration: 0.3, ease: [0.32, 0, 0.67, 0] },
      })
      .then(() => {
        setDisplayScene(next);
        controls.set({ y: '20%', scale: 1.1, opacity: 1 });

        return controls.start({
          y: '0%',
          scale: 1.1,
          opacity: 1,
          transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 1.4] },
        });
      })
      .then(() => {
        setDisplayScene(null);
        animatingRef.current = false;
      });
  };

  return (
    <section
      data-slot="hero"
      className="relative isolate flex min-h-[680px] w-full flex-col overflow-hidden bg-background text-foreground transition-colors duration-500 md:min-h-svh"
    >
      <div data-slot="hero-backdrop" className="absolute inset-0 -z-10 overflow-hidden">
        {/* Only the visible scene is fetched at high priority; the blurred layer beneath would compete with it. */}
        <div aria-hidden className="absolute inset-0 scale-[1.2] blur-2xl">
          <Image src={SCENE_IMAGE[other]} alt="" fill sizes="100vw" className="object-cover object-center" />
        </div>
        <motion.div
          className="absolute inset-0"
          initial={{ y: '0%', scale: 1.1, opacity: 1 }}
          animate={controls}
          style={{ willChange: 'transform, opacity' }}
        >
          <Image
            src={SCENE_IMAGE[scene]}
            alt={c.alt[scene]}
            fill
            loading="eager"
            fetchPriority="high"
            sizes="100vw"
            className="object-cover object-center"
          />
        </motion.div>
        <div
          aria-hidden
          className="absolute inset-0 bg-gradient-to-t from-background from-3% via-background/65 via-50% to-background/10"
        />
        <div aria-hidden className="absolute inset-x-0 top-0 h-44 bg-gradient-to-b from-background/60 to-transparent" />
        <div
          aria-hidden
          className="absolute inset-0 bg-[radial-gradient(120%_120%_at_50%_50%,transparent_35%,var(--background)_100%)] opacity-60"
        />
      </div>

      <nav
        data-slot="hero-nav"
        className="relative z-20 mx-auto flex w-full max-w-6xl items-center justify-between gap-3 px-5 py-6 transition-colors duration-500 md:px-8"
      >
        <span data-slot="aurael-display" className="truncate text-base font-medium tracking-tight">
          {c.brandName}
        </span>
        <div className="hidden items-center gap-7 text-base text-muted-foreground lg:flex">
          {c.nav.map((link, i) => (
            <a key={link} href={`#${SECTION_IDS[i]}`} className="transition-colors hover:text-foreground">
              {link}
            </a>
          ))}
        </div>

        <div className="flex items-center gap-1.5">
          <Button type="button" variant="ghost" size="sm" onClick={() => setLang(lang === 'en' ? 'ar' : 'en')}>
            <Languages className="size-4" />
            <span className="hidden text-sm font-medium sm:inline">{c.toLang}</span>
          </Button>
          <button
            type="button"
            aria-label={c.menu}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((open) => !open)}
            className="relative z-30 flex size-9 flex-col items-center justify-center gap-1.5 text-foreground lg:hidden"
          >
            <span
              className={cn(
                'h-0.5 w-7 rounded bg-current transition-transform duration-300',
                menuOpen && 'translate-y-2 rotate-45',
              )}
            />
            <span
              className={cn('h-0.5 w-7 rounded bg-current transition-opacity duration-300', menuOpen && 'opacity-0')}
            />
            <span
              className={cn(
                'h-0.5 w-7 rounded bg-current transition-transform duration-300',
                menuOpen && '-translate-y-2 -rotate-45',
              )}
            />
          </button>
        </div>
      </nav>

      <div className="relative z-10 flex flex-1 flex-col items-center px-5 pt-10 pb-12 text-center md:pb-16">
        <h1
          data-slot="aurael-display"
          className={cn(
            'max-w-2xl text-5xl leading-[1.02] font-medium text-balance text-foreground transition-colors duration-500 sm:text-6xl md:text-7xl',
            lang === 'en' ? 'tracking-tight' : 'tracking-normal',
          )}
        >
          {c.titleLead}
          <br />
          <span className="text-muted-foreground">{c.titleAccent}</span> {c.titleTrail}
        </h1>

        <div
          data-slot="hero-scene-toggle"
          role="group"
          aria-label={c.toggleLabel}
          className="mt-auto inline-flex w-full max-w-sm items-stretch gap-1 rounded-2xl border border-border bg-card/40 p-1 backdrop-blur-md transition-colors duration-500 sm:w-auto"
        >
          {SCENES.map((key) => {
            const active = selected === key;
            const s = c.scene[key];

            return (
              <button
                key={key}
                type="button"
                data-slot="hero-scene-option"
                aria-pressed={active}
                onClick={() => goToScene(key)}
                className={cn(
                  'relative flex flex-1 flex-col items-center gap-0.5 rounded-xl px-6 py-2 transition-colors sm:flex-none sm:px-10',
                  active ? 'text-primary-foreground' : 'text-foreground hover:text-foreground/80',
                )}
              >
                {active && (
                  <motion.span
                    layoutId="aurael-scene"
                    aria-hidden
                    className="absolute inset-0 rounded-xl bg-primary shadow-sm"
                    transition={reduced ? { duration: 0 } : { type: 'spring', stiffness: 380, damping: 32 }}
                  />
                )}
                <span className="relative z-10 text-lg leading-tight font-medium">{s.label}</span>
                <span className={cn('relative z-10 text-[11px]', active ? 'opacity-75' : 'text-muted-foreground')}>
                  {s.note}
                </span>
              </button>
            );
          })}
        </div>

        <p className="mt-8 max-w-xl text-base leading-relaxed text-pretty text-muted-foreground transition-colors duration-500">
          {c.body}
        </p>
      </div>

      <div
        className={cn(
          'fixed inset-0 z-10 flex flex-col items-center justify-center gap-8 bg-background transition-transform duration-300 lg:hidden',
          menuOpen ? 'translate-x-0' : 'translate-x-full rtl:-translate-x-full',
        )}
      >
        {c.nav.map((link, i) => (
          <a
            key={link}
            href={`#${SECTION_IDS[i]}`}
            onClick={() => setMenuOpen(false)}
            className="text-2xl font-semibold text-foreground"
          >
            {link}
          </a>
        ))}
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/aurael/how-it-works.tsx`

```tsx
// Aurael from Hirael <https://hirael.com/templates/aurael>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { LOREM, Accent, Band, Lead, Reveal, type Lang } from './primitives';

const COPY = {
  en: {
    label: 'Lorem',
    note: LOREM.en.short,
    title: 'Lorem ipsum dolor sit',
    accent: 'amet consectetur.',
    steps: [
      {
        title: 'Lorem ipsum',
        body: LOREM.en.short,
      },
      {
        title: 'Dolor sit amet',
        body: LOREM.en.short,
      },
      {
        title: 'Consectetur adipiscing',
        body: LOREM.en.short,
      },
      {
        title: 'Sed eiusmod tempor',
        body: LOREM.en.short,
      },
    ],
  },
  ar: {
    label: 'لوريم',
    note: LOREM.ar.short,
    title: 'لوريم إيبسوم دولور سيت',
    accent: 'أميت كونسيكتيتور.',
    steps: [
      {
        title: 'لوريم إيبسوم',
        body: LOREM.ar.short,
      },
      {
        title: 'دولور سيت أميت',
        body: LOREM.ar.short,
      },
      {
        title: 'كونسيكتيتور أديبيسكينج',
        body: LOREM.ar.short,
      },
      {
        title: 'سيد إيوسمود تيمبور',
        body: LOREM.ar.short,
      },
    ],
  },
} satisfies Record<Lang, unknown>;

interface HowItWorksProps {
  lang: Lang;
}

export const HowItWorks = ({ lang }: HowItWorksProps) => {
  const c = COPY[lang];

  return (
    <Band id="how-it-works" index="01" label={c.label} note={c.note} lang={lang}>
      <Reveal>
        <Lead lang={lang}>
          {c.title} <Accent>{c.accent}</Accent>
        </Lead>
      </Reveal>

      <ol className="mt-12">
        {c.steps.map((step, i) => (
          <Reveal key={step.title} delay={i * 0.05}>
            <li className="grid grid-cols-[2.5rem_1fr] gap-5 border-t border-border py-7 sm:grid-cols-[4rem_1fr]">
              <span className="text-sm text-muted-foreground tabular-nums">{String(i + 1).padStart(2, '0')}</span>
              <div>
                <h3 className="text-lg font-medium text-foreground">{step.title}</h3>
                <p className="mt-2 max-w-md text-sm leading-relaxed text-muted-foreground">{step.body}</p>
              </div>
            </li>
          </Reveal>
        ))}
      </ol>
    </Band>
  );
};
```

### `registry/hirael/bases/radix/templates/aurael/cases.tsx`

```tsx
// Aurael from Hirael <https://hirael.com/templates/aurael>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import Image from 'next/image';

import { LOREM, SCENE_IMAGE, Accent, Band, Lead, Reveal, type Lang } from './primitives';

const COPY = {
  en: {
    label: 'Ipsum',
    note: LOREM.en.short,
    title: 'Lorem ipsum dolor sit',
    accent: 'amet consectetur.',
    cases: [
      {
        image: SCENE_IMAGE.morning,
        title: 'Lorem ipsum, dolor sit',
        meta: 'Lorem ipsum, 8.5, 22',
        alt: 'The valley at dawn, mist over the lake below the ridge',
      },
      {
        image: SCENE_IMAGE.night,
        title: 'Lorem ipsum, amet consectetur',
        meta: 'Dolor sit, amet consectetur, 0',
        alt: 'The same valley at night under a crescent moon',
      },
    ],
    statement: 'Lorem ipsum dolor. Sit amet consectetur. Adipiscing elit.',
  },
  ar: {
    label: 'إيبسوم',
    note: LOREM.ar.short,
    title: 'لوريم إيبسوم دولور سيت',
    accent: 'أميت كونسيكتيتور.',
    cases: [
      {
        image: SCENE_IMAGE.morning,
        title: 'لوريم إيبسوم، دولور سيت',
        meta: 'لوريم إيبسوم, ٨٫٥, ٢٢',
        alt: 'الوادي عند الفجر والضباب فوق البحيرة تحت الحافة',
      },
      {
        image: SCENE_IMAGE.night,
        title: 'لوريم إيبسوم، أميت كونسيكتيتور',
        meta: 'دولور سيت, أميت كونسيكتيتور, ٠',
        alt: 'الوادي نفسه ليلاً تحت هلال',
      },
    ],
    statement: 'لوريم إيبسوم دولور. سيت أميت كونسيكتيتور. أديبيسكينج إليت.',
  },
} satisfies Record<Lang, unknown>;

interface CasesProps {
  lang: Lang;
}

export const Cases = ({ lang }: CasesProps) => {
  const c = COPY[lang];

  return (
    <Band id="cases" index="02" label={c.label} note={c.note} lang={lang}>
      <Reveal>
        <Lead lang={lang}>
          {c.title} <Accent>{c.accent}</Accent>
        </Lead>
      </Reveal>

      <div className="mt-12 flex flex-col gap-10">
        {c.cases.map((item, i) => (
          <Reveal key={item.title} delay={i * 0.05}>
            <figure>
              <div className="relative aspect-[16/10] overflow-hidden rounded-xl border border-border">
                <Image
                  src={item.image}
                  alt={item.alt}
                  fill
                  sizes="(min-width: 1024px) 44rem, 90vw"
                  className="object-cover object-center"
                />
              </div>
              <figcaption className="mt-3 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
                <span className="text-base font-medium text-foreground">{item.title}</span>
                <span className="text-sm text-muted-foreground">{item.meta}</span>
              </figcaption>
            </figure>
          </Reveal>
        ))}
      </div>

      <Reveal delay={0.1}>
        <p className="mt-14 border-t border-border pt-10 text-2xl leading-snug font-medium text-foreground sm:text-3xl">
          {c.statement}
        </p>
      </Reveal>
    </Band>
  );
};
```

### `registry/hirael/bases/radix/templates/aurael/about.tsx`

```tsx
// Aurael from Hirael <https://hirael.com/templates/aurael>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { ArrowUpRight } from 'lucide-react';

import { LOREM, Band, Lead, Reveal, type Lang } from './primitives';

const COPY = {
  en: {
    label: 'Dolor',
    note: LOREM.en.short,
    statement: 'Lorem ipsum dolor sit amet consectetur.',
    body: LOREM.en.long,
    cta: 'Lorem ipsum',
    stats: [
      { value: '400+', label: 'Lorem ipsum' },
      { value: '3.2 MWp', label: 'Dolor sit' },
      { value: '9', label: 'Amet' },
      { value: '7 yrs', label: 'Consectetur' },
    ],
  },
  ar: {
    label: 'دولور',
    note: LOREM.ar.short,
    statement: 'لوريم إيبسوم دولور سيت أميت.',
    body: LOREM.ar.long,
    cta: 'لوريم إيبسوم',
    stats: [
      { value: '+٤٠٠', label: 'لوريم إيبسوم' },
      { value: '٣٫٢ ميغاواط', label: 'دولور سيت' },
      { value: '٩', label: 'أميت' },
      { value: '٧ سنوات', label: 'كونسيكتيتور' },
    ],
  },
} satisfies Record<Lang, unknown>;

interface AboutProps {
  lang: Lang;
}

export const About = ({ lang }: AboutProps) => {
  const c = COPY[lang];

  return (
    <Band id="about" index="03" label={c.label} note={c.note} lang={lang}>
      <Reveal>
        <Lead lang={lang}>{c.statement}</Lead>
      </Reveal>
      <Reveal delay={0.06}>
        <p className="mt-6 max-w-xl text-base leading-relaxed text-muted-foreground">{c.body}</p>
      </Reveal>
      <Reveal delay={0.1}>
        <a href="#" className="group mt-6 inline-flex items-center gap-2 text-sm font-medium text-foreground">
          {c.cta}
          <ArrowUpRight className="size-4 text-muted-foreground transition-colors group-hover:text-foreground rtl:-scale-x-100" />
        </a>
      </Reveal>

      <Reveal delay={0.12}>
        <dl className="mt-14 grid grid-cols-2 gap-px overflow-hidden border border-border bg-border sm:grid-cols-4">
          {c.stats.map((stat) => (
            <div key={stat.label} className="bg-background p-5">
              <dt className="text-2xl font-medium tracking-tight text-foreground sm:text-3xl">{stat.value}</dt>
              <dd className="mt-1 text-xs text-muted-foreground">{stat.label}</dd>
            </div>
          ))}
        </dl>
      </Reveal>
    </Band>
  );
};
```

### `registry/hirael/bases/radix/templates/aurael/careers.tsx`

```tsx
// Aurael from Hirael <https://hirael.com/templates/aurael>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { ArrowUpRight } from 'lucide-react';

import { LOREM, Accent, Band, Lead, Reveal, type Lang } from './primitives';

const COPY = {
  en: {
    label: 'Sit amet',
    note: LOREM.en.short,
    title: 'Lorem ipsum dolor sit',
    accent: 'amet consectetur.',
    roles: [
      { title: 'Lorem ipsum', meta: 'Dolor sit, amet' },
      { title: 'Dolor sit amet', meta: 'Consectetur, amet' },
      { title: 'Consectetur adipiscing', meta: 'Elit, amet' },
      { title: 'Sed eiusmod tempor', meta: 'Incididunt, amet' },
    ],
  },
  ar: {
    label: 'سيت أميت',
    note: LOREM.ar.short,
    title: 'لوريم إيبسوم دولور سيت',
    accent: 'أميت كونسيكتيتور.',
    roles: [
      { title: 'لوريم إيبسوم', meta: 'دولور سيت, أميت' },
      { title: 'دولور سيت أميت', meta: 'كونسيكتيتور, أميت' },
      { title: 'كونسيكتيتور أديبيسكينج', meta: 'إليت, أميت' },
      { title: 'سيد إيوسمود تيمبور', meta: 'إنسيديدنت, أميت' },
    ],
  },
} satisfies Record<Lang, unknown>;

interface CareersProps {
  lang: Lang;
}

export const Careers = ({ lang }: CareersProps) => {
  const c = COPY[lang];

  return (
    <Band id="careers" index="04" label={c.label} note={c.note} lang={lang}>
      <Reveal>
        <Lead lang={lang}>
          {c.title} <Accent>{c.accent}</Accent>
        </Lead>
      </Reveal>

      <ul className="mt-12">
        {c.roles.map((role, i) => (
          <Reveal key={role.title} delay={i * 0.04}>
            <li>
              <a href="#" className="group flex items-center justify-between gap-4 border-t border-border py-5">
                <div className="min-w-0">
                  <h3 className="text-base font-medium text-foreground transition-colors sm:text-lg">{role.title}</h3>
                  <p className="mt-1 text-xs text-muted-foreground sm:text-sm">{role.meta}</p>
                </div>
                <ArrowUpRight className="size-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground rtl:-scale-x-100" />
              </a>
            </li>
          </Reveal>
        ))}
      </ul>
    </Band>
  );
};
```

### `registry/hirael/bases/radix/templates/aurael/resources.tsx`

```tsx
// Aurael from Hirael <https://hirael.com/templates/aurael>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { ArrowUpRight } from 'lucide-react';

import { cn } from '@/lib/utils';

import { LOREM, Accent, Band, Lead, Reveal, type Lang } from './primitives';

const COPY = {
  en: {
    label: 'Consectetur',
    note: LOREM.en.short,
    title: 'Lorem ipsum dolor sit',
    accent: 'amet consectetur.',
    items: [
      { tag: 'Lorem', title: 'Lorem ipsum dolor sit amet consectetur', meta: '6 min' },
      { tag: 'Lorem', title: 'Consectetur adipiscing elit sed eiusmod', meta: '4 min' },
      { tag: 'Ipsum', title: 'Tempor incididunt ut labore et dolore', meta: '3 min' },
    ],
  },
  ar: {
    label: 'كونسيكتيتور',
    note: LOREM.ar.short,
    title: 'لوريم إيبسوم دولور سيت',
    accent: 'أميت كونسيكتيتور.',
    items: [
      { tag: 'لوريم', title: 'لوريم إيبسوم دولور سيت أميت كونسيكتيتور', meta: '٦ دقائق' },
      { tag: 'لوريم', title: 'كونسيكتيتور أديبيسكينج إليت سيد إيوسمود', meta: '٤ دقائق' },
      { tag: 'إيبسوم', title: 'تيمبور إنسيديدنت أوت لابوري إت دولوري', meta: '٣ دقائق' },
    ],
  },
} satisfies Record<Lang, unknown>;

interface ResourcesProps {
  lang: Lang;
}

export const Resources = ({ lang }: ResourcesProps) => {
  const c = COPY[lang];

  return (
    <Band id="resources" index="05" label={c.label} note={c.note} lang={lang}>
      <Reveal>
        <Lead lang={lang}>
          {c.title} <Accent>{c.accent}</Accent>
        </Lead>
      </Reveal>

      <ul className="mt-12">
        {c.items.map((item, i) => (
          <Reveal key={item.title} delay={i * 0.04}>
            <li>
              <a
                href="#"
                className="group grid grid-cols-[3.5rem_1fr_auto] items-baseline gap-4 border-t border-border py-5"
              >
                <span className={cn('text-xs text-muted-foreground', lang === 'en' && 'tracking-wider uppercase')}>
                  {item.tag}
                </span>
                <span className="text-base font-medium text-foreground sm:text-lg">{item.title}</span>
                <span className="flex items-center gap-2 text-xs text-muted-foreground">
                  {item.meta}
                  <ArrowUpRight className="size-4 transition-colors group-hover:text-foreground rtl:-scale-x-100" />
                </span>
              </a>
            </li>
          </Reveal>
        ))}
      </ul>
    </Band>
  );
};
```

### `registry/hirael/bases/radix/templates/aurael/customers.tsx`

```tsx
// Aurael from Hirael <https://hirael.com/templates/aurael>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { LOREM, Accent, Band, Lead, Reveal, type Lang } from './primitives';

const COPY = {
  en: {
    label: 'Adipiscing',
    note: LOREM.en.short,
    title: 'Lorem ipsum dolor sit',
    accent: 'amet consectetur.',
    quote: LOREM.en.medium,
    author: 'Lorem Ipsum',
    location: 'Dolor sit amet',
    proof: [
      { value: '4.9/5', label: 'Lorem ipsum' },
      { value: '98%', label: 'Dolor sit' },
      { value: '24/7', label: 'Amet' },
      { value: '5 yr', label: 'Consectetur' },
    ],
  },
  ar: {
    label: 'أديبيسكينج',
    note: LOREM.ar.short,
    title: 'لوريم إيبسوم دولور سيت',
    accent: 'أميت كونسيكتيتور.',
    quote: LOREM.ar.medium,
    author: 'لوريم إيبسوم',
    location: 'دولور سيت أميت',
    proof: [
      { value: '٤٫٩/٥', label: 'لوريم إيبسوم' },
      { value: '٩٨٪', label: 'دولور سيت' },
      { value: '٢٤/٧', label: 'أميت' },
      { value: '٥ سنوات', label: 'كونسيكتيتور' },
    ],
  },
} satisfies Record<Lang, unknown>;

interface CustomersProps {
  lang: Lang;
}

export const Customers = ({ lang }: CustomersProps) => {
  const c = COPY[lang];

  return (
    <Band id="customers" index="06" label={c.label} note={c.note} lang={lang}>
      <Reveal>
        <Lead lang={lang}>
          {c.title} <Accent>{c.accent}</Accent>
        </Lead>
      </Reveal>

      <Reveal delay={0.06}>
        <figure className="mt-12 border-t border-border pt-10">
          <blockquote>
            <p className="max-w-xl text-2xl leading-snug font-medium text-balance text-foreground sm:text-3xl">
              {c.quote}
            </p>
          </blockquote>
          <figcaption className="mt-6 text-sm text-muted-foreground">
            <span className="text-foreground">{c.author}</span>
            {', '}
            {c.location}
          </figcaption>
        </figure>
      </Reveal>

      <Reveal delay={0.1}>
        <dl className="mt-12 grid grid-cols-2 gap-px overflow-hidden border border-border bg-border sm:grid-cols-4">
          {c.proof.map((item) => (
            <div key={item.label} className="bg-background p-5">
              <dt className="text-xl font-medium tracking-tight text-foreground sm:text-2xl">{item.value}</dt>
              <dd className="mt-1 text-xs text-muted-foreground">{item.label}</dd>
            </div>
          ))}
        </dl>
      </Reveal>
    </Band>
  );
};
```

### `registry/hirael/bases/radix/templates/aurael/footer.tsx`

```tsx
// Aurael from Hirael <https://hirael.com/templates/aurael>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { LOREM, type Lang } from './primitives';

const COPY = {
  en: {
    brandName: 'Aurael',
    tagline: LOREM.en.short,
    columns: [
      { heading: 'Lorem', links: ['Lorem ipsum', 'Dolor sit', 'Amet consectetur', 'Adipiscing'] },
      { heading: 'Ipsum', links: ['Sed eiusmod', 'Tempor', 'Incididunt', 'Ut labore'] },
      { heading: 'Dolor', links: ['Et dolore', 'Magna aliqua', 'Ut enim', 'Ad minim'] },
    ],
    rights: 'Lorem ipsum dolor sit amet.',
    note: 'Consectetur adipiscing',
  },
  ar: {
    brandName: 'أورايل',
    tagline: LOREM.ar.short,
    columns: [
      { heading: 'لوريم', links: ['لوريم إيبسوم', 'دولور سيت', 'أميت كونسيكتيتور', 'أديبيسكينج'] },
      { heading: 'إيبسوم', links: ['سيد إيوسمود', 'تيمبور', 'إنسيديدنت', 'أوت لابوري'] },
      { heading: 'دولور', links: ['إت دولوري', 'ماجنا أليكوا', 'أوت إينيم', 'أد مينيم'] },
    ],
    rights: 'لوريم إيبسوم دولور سيت أميت.',
    note: 'كونسيكتيتور أديبيسكينج',
  },
} satisfies Record<Lang, unknown>;

interface FooterProps {
  lang: Lang;
}

export const Footer = ({ lang }: FooterProps) => {
  const c = COPY[lang];
  const year = new Date().getFullYear();

  return (
    <footer className="border-t border-border bg-background px-5 transition-colors duration-500 sm:px-8 md:px-12">
      <div className="mx-auto w-full max-w-6xl">
        <div className="grid gap-x-12 gap-y-10 py-16 lg:grid-cols-[14rem_1fr] lg:gap-x-16">
          <div>
            <span data-slot="aurael-display" className="text-base font-medium tracking-tight text-foreground">
              {c.brandName}
            </span>
            <p className="mt-3 max-w-[14rem] text-sm leading-relaxed text-muted-foreground">{c.tagline}</p>
          </div>

          <div className="grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-3">
            {c.columns.map((column) => (
              <div key={column.heading}>
                <h3 className="text-xs font-medium tracking-[0.14em] text-muted-foreground uppercase">
                  {column.heading}
                </h3>
                <ul className="mt-4 flex flex-col gap-3">
                  {column.links.map((link) => (
                    <li key={link}>
                      <a href="#" className="text-sm text-foreground/70 transition-colors hover:text-foreground">
                        {link}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        <div className="flex flex-col items-start justify-between gap-2 border-t border-border py-7 text-xs text-muted-foreground sm:flex-row sm:items-center">
          <p>
            © {year} {c.brandName}. {c.rights}
          </p>
          <p>{c.note}</p>
        </div>
      </div>
    </footer>
  );
};
```

### `registry/hirael/bases/radix/templates/aurael/primitives.tsx`

```tsx
// Aurael from Hirael <https://hirael.com/templates/aurael>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

'use client';

import * as React from 'react';
import { motion, useReducedMotion } from 'motion/react';

import { cn } from '@/lib/utils';

export type Lang = 'en' | 'ar';

export type Scene = 'morning' | 'night';

export const SECTION_IDS = ['how-it-works', 'cases', 'about', 'careers', 'resources', 'customers'] as const;

export const SCENE_IMAGE: Record<Scene, string> = {
  morning: 'https://hirael.com/media/templates/aurael/morning.jpg',
  night: 'https://hirael.com/media/templates/aurael/night.jpg',
};

export const LOREM: Record<Lang, { short: string; medium: string; long: string }> = {
  en: {
    short: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    medium:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    long: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  },
  ar: {
    short: 'لوريم إيبسوم دولور سيت أميت، كونسيكتيتور أديبيسكينج إليت.',
    medium:
      'لوريم إيبسوم دولور سيت أميت، كونسيكتيتور أديبيسكينج إليت. سيد دو إيوسمود تيمبور إنسيديدنت أوت لابوري إت دولوري ماجنا أليكوا.',
    long: 'لوريم إيبسوم دولور سيت أميت، كونسيكتيتور أديبيسكينج إليت. سيد دو إيوسمود تيمبور إنسيديدنت أوت لابوري إت دولوري ماجنا أليكوا. أوت إينيم أد مينيم فينيام، كويس نوستريد إكسير سيتاشن أولامكو لابوريس نيسي.',
  },
};

export const useDocumentRtl = () => {
  const subscribe = React.useCallback(() => () => {}, []);

  return React.useSyncExternalStore(
    subscribe,
    () => document.documentElement.getAttribute('dir') === 'rtl',
    () => false,
  );
};

const subscribeToDocumentClass = (onChange: () => void) => {
  const observer = new MutationObserver(onChange);
  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });

  return () => observer.disconnect();
};

export const useDocumentScene = () => {
  return React.useSyncExternalStore<Scene>(
    subscribeToDocumentClass,
    () => (document.documentElement.classList.contains('light') ? 'morning' : 'night'),
    () => 'night',
  );
};

interface RevealProps {
  delay?: number;
  className?: string;
  children: React.ReactNode;
}

export const Reveal = ({ delay = 0, className, children }: RevealProps) => {
  const reduced = useReducedMotion();

  return (
    <motion.div
      initial={reduced ? { opacity: 1, y: 0 } : { opacity: 0, y: 12 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-60px' }}
      transition={reduced ? { duration: 0 } : { duration: 0.8, delay, ease: [0.16, 1, 0.3, 1] }}
      className={className}
    >
      {children}
    </motion.div>
  );
};

interface BandProps {
  id: string;
  index: string;
  label: string;
  note?: string;
  lang: Lang;
  className?: string;
  children: React.ReactNode;
}

export const Band = ({ id, index, label, note, lang, className, children }: BandProps) => {
  return (
    <section
      id={id}
      className={cn(
        'scroll-mt-20 border-t border-border bg-background px-5 transition-colors duration-500 sm:px-8 md:px-12',
        className,
      )}
    >
      <div className="mx-auto grid w-full max-w-6xl gap-x-12 gap-y-10 py-16 md:py-24 lg:grid-cols-[14rem_1fr] lg:gap-x-16">
        <Reveal className="lg:sticky lg:top-24 lg:self-start">
          <div className="flex items-center gap-3">
            <span className="text-xs text-muted-foreground tabular-nums">{index}</span>
            <span aria-hidden className="h-px w-6 bg-border" />
            <span className={cn('text-xs text-muted-foreground', lang === 'en' ? 'uppercase' : 'font-medium')}>
              {label}
            </span>
          </div>
          {note ? <p className="mt-5 max-w-[14rem] text-sm leading-relaxed text-muted-foreground">{note}</p> : null}
        </Reveal>
        <div className="min-w-0">{children}</div>
      </div>
    </section>
  );
};

interface LeadProps {
  lang: Lang;
  className?: string;
  children: React.ReactNode;
}

export const Lead = ({ lang, className, children }: LeadProps) => {
  return (
    <h2
      data-slot="aurael-display"
      className={cn(
        'max-w-2xl text-3xl leading-[1.12] font-medium text-balance text-foreground sm:text-4xl',
        lang === 'en' ? 'tracking-tight' : 'tracking-normal',
        className,
      )}
    >
      {children}
    </h2>
  );
};

interface AccentProps {
  children: React.ReactNode;
}

export const Accent = ({ children }: AccentProps) => {
  return <span className="text-muted-foreground">{children}</span>;
};
```

### `registry/hirael/bases/radix/templates/aurael/styles.tsx`

```tsx
// Aurael from Hirael <https://hirael.com/templates/aurael>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

const AURAEL_CSS = `
.aurael {
  --radius: 0.375rem;
  --background: hsl(0 0% 100%);
  --foreground: hsl(0 0% 9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(0 0% 9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(0 0% 9%);
  --primary: hsl(28 88% 46%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(30 20% 96%);
  --secondary-foreground: hsl(0 0% 13%);
  --muted: hsl(30 20% 96%);
  --muted-foreground: hsl(0 0% 40%);
  --accent: hsl(30 20% 96%);
  --accent-foreground: hsl(0 0% 13%);
  --destructive: hsl(0 72% 46%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(30 12% 88%);
  --input: hsl(30 12% 88%);
  --ring: hsl(28 88% 46%);
}

.aurael[data-scene='night'] {
  --background: hsl(220 9% 7%);
  --foreground: hsl(0 0% 91%);
  --card: hsl(220 9% 5%);
  --card-foreground: hsl(0 0% 91%);
  --popover: hsl(220 9% 8%);
  --popover-foreground: hsl(0 0% 91%);
  --primary: hsl(36 92% 62%);
  --primary-foreground: hsl(30 40% 10%);
  --secondary: hsl(220 7% 12%);
  --secondary-foreground: hsl(0 0% 91%);
  --muted: hsl(220 7% 11%);
  --muted-foreground: hsl(220 5% 58%);
  --accent: hsl(220 7% 17%);
  --accent-foreground: hsl(0 0% 100%);
  --destructive: hsl(0 70% 60%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(0 0% 100% / 9%);
  --input: hsl(0 0% 100% / 13%);
  --ring: hsl(36 92% 62%);
}

.aurael {
  --aurael-sans: var(--font-aurael-sans), ui-sans-serif, system-ui, sans-serif;
  --aurael-display: var(--font-aurael-display), ui-sans-serif, system-ui, sans-serif;
  font-family: var(--aurael-sans);
}

.aurael:lang(ar) {
  --aurael-sans: var(--font-aurael-arabic), ui-sans-serif, system-ui, sans-serif;
  --aurael-display: var(--font-aurael-arabic), ui-sans-serif, system-ui, sans-serif;
}

.aurael [data-slot='aurael-display'] {
  font-family: var(--aurael-display);
}
`;

export const AuraelStyles = () => {
  return <style dangerouslySetInnerHTML={{ __html: AURAEL_CSS }} />;
};
```

### `registry/hirael/bases/radix/templates/aurael/fonts.ts`

```ts
// Aurael from Hirael <https://hirael.com/templates/aurael>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { Cairo, Inter, Manrope } from 'next/font/google';

export const inter = Inter({
  variable: '--font-aurael-sans',
  subsets: ['latin'],
  display: 'swap',
});

export const manrope = Manrope({
  variable: '--font-aurael-display',
  subsets: ['latin'],
  display: 'swap',
});

export const cairo = Cairo({
  variable: '--font-aurael-arabic',
  subsets: ['arabic', 'latin'],
  display: 'swap',
});
```