38 lines
1.6 KiB
TypeScript
38 lines
1.6 KiB
TypeScript
import { Link } from '@inertiajs/react';
|
|
import { common } from '@/content/common';
|
|
import { company } from '@/data/site';
|
|
import { useContent } from '@/hooks/use-locale';
|
|
import { home } from '@/routes';
|
|
|
|
/** Logo mark with company name, linking back to the home page. */
|
|
export default function Brand() {
|
|
const t = useContent(common);
|
|
|
|
return (
|
|
<Link
|
|
href={home()}
|
|
title={t.header.backHome}
|
|
className="group flex items-center gap-3.5"
|
|
>
|
|
<div className="border-outline-variant/50 group-hover:border-primary/60 dark:bg-surface-container-low flex items-center justify-center rounded-xl border bg-white p-1.5 transition-all duration-300 group-hover:shadow-[0_0_20px_rgba(163,29,36,0.35)]">
|
|
<img
|
|
src={company.logo}
|
|
alt={company.name}
|
|
className="h-8 w-auto object-contain transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="font-display text-on-surface text-base font-bold tracking-wider uppercase">
|
|
{company.brand}
|
|
</span>
|
|
<span className="bg-primary h-1.5 w-1.5 animate-pulse rounded-full" />
|
|
</div>
|
|
<span className="text-on-surface-variant hidden font-mono text-[11px] font-medium sm:block">
|
|
{company.name}
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|