Aurael

// 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;