AKOR

// AKOR from Hirael <https://hirael.com/templates/akor>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

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

import { About } from './about';
import { sora } from './fonts';
import { Footer } from './footer';
import { Hero } from './hero';
import { Navbar } from './navbar';
import { Services } from './services';
import { AkorStyles } from './styles';

const Akor = () => {
  return (
    <div
      className={cn(
        'akor',
        sora.variable,
        'relative min-h-svh bg-background [font-family:var(--font-akor-sans),ui-sans-serif,sans-serif] text-foreground antialiased',
      )}
    >
      <AkorStyles />
      <Navbar />
      <Hero />
      <Services />
      <About />
      <Footer />
    </div>
  );
};

export default Akor;

// AKOR from Hirael <https://hirael.com/templates/akor>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

'use client';

import * as React from 'react';
import { Menu, X } from 'lucide-react';

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

import { Wordmark } from './primitives';

export const NAV_LINKS = [
  { label: 'Services', href: '#services' },
  { label: 'About Us', href: '#about' },
  { label: 'Projects', href: '#projects' },
  { label: 'Team', href: '#team' },
  { label: 'Contacts', href: '#contacts' },
] as const;

const QUOTE_BUTTON = 'h-11 active:scale-[0.97]';

export const Navbar = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <header data-slot="navbar" className="fixed inset-x-0 top-0 z-50 px-8 py-5 lg:px-16">
      <nav className="flex items-center justify-between gap-6">
        <a href="#home" aria-label="AKOR home">
          <Wordmark />
        </a>

        <div className="hidden items-center gap-8 md:flex">
          {NAV_LINKS.map((link) => (
            <a
              key={link.label}
              href={link.href}
              className="text-sm tracking-widest text-muted-foreground uppercase transition-colors hover:text-foreground"
            >
              {link.label}
            </a>
          ))}
        </div>

        <Button type="button" variant="secondary" size="lg" className={cn(QUOTE_BUTTON, 'hidden md:inline-flex')}>
          Get Quote
        </Button>
        <Button
          type="button"
          variant="secondary"
          size="icon-lg"
          aria-label={isOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={isOpen}
          onClick={() => setIsOpen((value) => !value)}
          className="md:hidden"
        >
          {isOpen ? <X className="size-5" /> : <Menu className="size-5" />}
        </Button>
      </nav>

      {isOpen ? (
        <div className="mt-4 flex flex-col gap-1 rounded-lg border border-border bg-background p-2 md:hidden">
          {NAV_LINKS.map((link) => (
            <a
              key={link.label}
              href={link.href}
              onClick={() => setIsOpen(false)}
              className="rounded-md px-4 py-3 text-sm tracking-widest text-muted-foreground uppercase transition-colors hover:bg-secondary hover:text-foreground"
            >
              {link.label}
            </a>
          ))}
          <Button type="button" variant="secondary" size="lg" className={cn(QUOTE_BUTTON, 'mt-1')}>
            Get Quote
          </Button>
        </div>
      ) : null}
    </header>
  );
};

// AKOR from Hirael <https://hirael.com/templates/akor>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

'use client';

import * as React from 'react';

import { CtaButton, TextLink } from './primitives';

const HERO_VIDEO = 'https://hirael.com/media/templates/akor/hero.mp4';

interface HeroProps {
  videoSrc?: string;
  posterSrc?: string;
}

export const Hero = ({ videoSrc = HERO_VIDEO, posterSrc }: HeroProps) => {
  const [hasVideoFailed, setHasVideoFailed] = React.useState(false);

  return (
    <section
      id="home"
      data-slot="hero"
      className="relative flex min-h-svh flex-col justify-end overflow-hidden bg-[var(--akor-hero)]"
    >
      {hasVideoFailed ? (
        <div
          aria-hidden
          className="absolute inset-0 bg-gradient-to-br from-muted via-[var(--akor-hero)] to-background bg-cover bg-center"
          style={posterSrc ? { backgroundImage: `url(${posterSrc})` } : undefined}
        />
      ) : (
        <video
          className="absolute inset-0 h-full w-full object-cover"
          src={videoSrc}
          poster={posterSrc}
          autoPlay
          loop
          muted
          playsInline
          aria-hidden
          tabIndex={-1}
          onError={() => setHasVideoFailed(true)}
        />
      )}

      <div className="relative z-10 px-8 pt-32 pb-20 lg:px-16 lg:pb-28">
        <h1 className="rise text-5xl leading-[0.95] font-light tracking-tight text-foreground [animation-delay:0.2s] sm:text-6xl lg:text-[5.5rem]">
          Intelligent
          <br />
          Security Systems
        </h1>

        <p className="rise mt-6 mb-10 max-w-xl text-base text-muted-foreground [animation-delay:0.45s] lg:text-lg">
          Innovative security, automation, and AI solutions for businesses and smart cities
        </p>

        <div className="fade-up flex flex-wrap items-center gap-8 [animation-delay:0.65s]">
          <CtaButton>Get Consultation</CtaButton>
          <TextLink href="#about">Learn More</TextLink>
        </div>
      </div>
    </section>
  );
};

// AKOR from Hirael <https://hirael.com/templates/akor>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import * as React from 'react';

import { CtaButton, SectionLabel } from './primitives';

const SERVICES = [
  {
    icon: 'https://hirael.com/media/templates/akor/service-1.webp',
    title: 'AI-Driven\nSecurity Solutions',
    description:
      'Camera, access and sensor networks watched by models trained on real incidents, so threats are flagged before they become events.',
  },
  {
    icon: 'https://hirael.com/media/templates/akor/service-2.webp',
    title: 'Smart Building\nAutomation',
    description:
      'Lighting, climate, access and alarms run from one control plane that adapts to occupancy, schedules and live risk.',
  },
  {
    icon: 'https://hirael.com/media/templates/akor/service-3.webp',
    title: 'AI Consulting\nand Integration',
    description:
      'We audit what you already run, design the target system and integrate it with the platforms your teams use today.',
  },
  {
    icon: 'https://hirael.com/media/templates/akor/service-4.webp',
    title: 'Training\nand Support',
    description:
      'Operator training, runbooks and round-the-clock support, so the system keeps working the way it was designed to.',
  },
] as const;

const ROWS = [SERVICES.slice(0, 2), SERVICES.slice(2)];

export const Services = () => {
  return (
    <section id="services" data-slot="services" className="bg-foreground px-8 py-24 text-background lg:px-16 lg:py-32">
      <SectionLabel>Services</SectionLabel>

      <div className="flex flex-col gap-16 lg:flex-row lg:gap-24">
        <div className="flex flex-col justify-center lg:w-[38%]">
          <h2 className="text-3xl leading-[1.15] font-normal tracking-tight text-background sm:text-4xl">
            Security, automation, and AI, helping businesses enhance efficiency
          </h2>
          <div className="mt-10">
            <CtaButton>Get Consultation</CtaButton>
          </div>
        </div>

        <div className="lg:w-[62%]">
          {ROWS.map((row, rowIndex) => (
            <React.Fragment key={rowIndex}>
              {rowIndex > 0 ? <div aria-hidden className="my-12 h-px w-full bg-muted-foreground/20" /> : null}
              <div className="grid grid-cols-1 gap-12 sm:grid-cols-2">
                {row.map((service, index) => {
                  const number = rowIndex * 2 + index + 1;

                  return (
                    <article key={service.title} className="border-s border-border/20 ps-8">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        src={service.icon}
                        alt=""
                        width={64}
                        height={64}
                        className="size-16 object-contain mix-blend-multiply"
                      />
                      <p className="mt-6 text-xs text-muted-foreground/40 tabular-nums">
                        {String(number).padStart(2, '0')}
                      </p>
                      <h3 className="mt-2 text-xl leading-tight font-medium whitespace-pre-line text-background">
                        {service.title}
                      </h3>
                      <p className="mt-3 text-sm leading-relaxed text-muted-foreground/50">{service.description}</p>
                    </article>
                  );
                })}
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
};

// AKOR from Hirael <https://hirael.com/templates/akor>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { CtaButton, SectionLabel } from './primitives';

const ABOUT_VIDEO = 'https://hirael.com/media/templates/akor/about.mp4';

export const About = () => {
  return (
    <section id="about" data-slot="about" className="bg-[var(--akor-ink)] px-8 pt-12 pb-24 lg:px-16 lg:pt-16 lg:pb-32">
      <SectionLabel>About Us</SectionLabel>

      <div className="flex flex-col items-stretch gap-12 lg:flex-row lg:gap-0">
        <div className="lg:w-[45%]">
          <video
            className="h-auto w-full rounded-sm"
            src={ABOUT_VIDEO}
            autoPlay
            loop
            muted
            playsInline
            aria-hidden
            tabIndex={-1}
          />
        </div>

        <div aria-hidden className="mx-10 mt-8 hidden w-px bg-muted-foreground/20 lg:block" />

        <div className="flex min-h-[500px] flex-1 flex-col justify-between lg:min-h-[600px]">
          <h2 className="text-3xl leading-[1.15] font-normal tracking-tight text-foreground sm:text-4xl">
            AI-powered security, automation for businesses and smart infrastructures
          </h2>

          <div className="mt-auto pt-12">
            <p className="max-w-xl text-base leading-relaxed text-muted-foreground">
              AKOR designs and runs security systems that learn. We pair on-site hardware and building automation with
              models trained on real incidents, so the places people work and live respond to risk before it becomes an
              event.
            </p>
            <CtaButton className="mt-10">Get Quote</CtaButton>
          </div>
        </div>
      </div>
    </section>
  );
};

// AKOR from Hirael <https://hirael.com/templates/akor>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { NAV_LINKS } from './navbar';
import { Wordmark } from './primitives';

export const Footer = () => {
  return (
    <footer data-slot="footer" className="border-t border-border bg-[var(--akor-ink)] px-8 py-10 lg:px-16">
      <div className="flex flex-col items-start justify-between gap-8 md:flex-row md:items-center">
        <Wordmark />
        <nav className="flex flex-wrap gap-x-8 gap-y-3">
          {NAV_LINKS.map((link) => (
            <a
              key={link.label}
              href={link.href}
              className="text-xs tracking-widest text-muted-foreground uppercase transition-colors hover:text-foreground"
            >
              {link.label}
            </a>
          ))}
        </nav>
      </div>
      <p className="mt-10 text-xs text-muted-foreground/60">&copy; 2026 AKOR. All rights reserved.</p>
    </footer>
  );
};

// AKOR from Hirael <https://hirael.com/templates/akor>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import * as React from 'react';

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

interface WordmarkProps {
  className?: string;
}

export const Wordmark = ({ className }: WordmarkProps) => {
  return <span className={cn('text-xl font-semibold tracking-tight text-foreground', className)}>AKOR</span>;
};

interface SectionLabelProps {
  children: React.ReactNode;
}

export const SectionLabel = ({ children }: SectionLabelProps) => {
  return (
    <div>
      <p className="mb-8 text-xs tracking-[0.25em] text-muted-foreground/60 uppercase">{children}</p>
      <div aria-hidden className="mb-16 h-px w-full bg-muted-foreground/20" />
    </div>
  );
};

type CtaButtonProps = React.ComponentProps<typeof Button>;

export const CtaButton = ({ className, ...props }: CtaButtonProps) => {
  return <Button type="button" size="lg" className={cn('h-11 active:scale-[0.97]', className)} {...props} />;
};

type TextLinkProps = React.ComponentProps<'a'>;

export const TextLink = ({ className, ...props }: TextLinkProps) => {
  return (
    <a
      className={cn(
        'border-b border-primary pb-1 text-xs tracking-widest text-foreground uppercase transition-colors hover:text-primary active:scale-[0.97]',
        className,
      )}
      {...props}
    />
  );
};

// AKOR from Hirael <https://hirael.com/templates/akor>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

const AKOR_CSS = `
.akor {
  --background: hsl(0 0% 10%);
  --foreground: hsl(0 0% 96%);
  --card: hsl(0 0% 12%);
  --card-foreground: hsl(0 0% 96%);
  --popover: hsl(0 0% 12%);
  --popover-foreground: hsl(0 0% 96%);
  --primary: hsl(119 99% 46%);
  --primary-foreground: hsl(0 0% 4%);
  --secondary: hsl(0 0% 18%);
  --secondary-foreground: hsl(0 0% 96%);
  --muted: hsl(0 0% 18%);
  --muted-foreground: hsl(0 0% 60%);
  --accent: hsl(0 0% 18%);
  --accent-foreground: hsl(0 0% 96%);
  --border: hsl(0 0% 20%);
  --input: hsl(0 0% 20%);
  --ring: hsl(119 99% 46%);
  --radius: 0.5rem;
  --akor-hero: hsl(0 0% 8%);
  --akor-ink: hsl(0 0% 0%);
}
.akor ::selection {
  background: hsl(119 99% 46% / 0.35);
}
.akor .fade-up,
.akor .rise {
  animation-name: akor-fade-up;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
/* Headline text keeps full opacity: a fade from 0 holds back Largest Contentful Paint. */
.akor .rise {
  animation-name: akor-rise;
}
@keyframes akor-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes akor-rise {
  from {
    transform: translateY(16px);
  }
  to {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .akor .fade-up,
  .akor .rise {
    animation: none;
  }
}
`;

export const AkorStyles = () => {
  return <style dangerouslySetInnerHTML={{ __html: AKOR_CSS }} />;
};

// AKOR from Hirael <https://hirael.com/templates/akor>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { Sora } from 'next/font/google';

export const sora = Sora({
  variable: '--font-akor-sans',
  subsets: ['latin'],
  weight: ['300', '400', '500', '600', '700'],
  display: 'swap',
});