109 lines
5.2 KiB
TypeScript
109 lines
5.2 KiB
TypeScript
import logo from '@/assets/logo.png';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Highlighter } from '@/components/ui/highlighter';
|
|
import {
|
|
AiWebBrowsingIcon,
|
|
ArrowRight01Icon,
|
|
InstagramIcon,
|
|
PenTool01Icon,
|
|
} from '@hugeicons/core-free-icons';
|
|
import { HugeiconsIcon } from '@hugeicons/react';
|
|
export default function Header() {
|
|
return (
|
|
<>
|
|
<div className="relative flex flex-col items-center justify-center py-32">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="flex items-center gap-2 rounded-full border border-neutral-300 px-1 py-1 pr-3">
|
|
<div className="flex shrink-0 items-start -space-x-1.5">
|
|
<img
|
|
src={logo}
|
|
alt="logo"
|
|
className="size-5 rounded-full border-2 border-white bg-red-200"
|
|
/>
|
|
<img
|
|
src={logo}
|
|
alt="logo"
|
|
className="size-5 rounded-full border-2 border-white bg-red-200"
|
|
/>{' '}
|
|
<img
|
|
src={logo}
|
|
alt="logo"
|
|
className="size-5 rounded-full border-2 border-white bg-red-200"
|
|
/>{' '}
|
|
<img
|
|
src={logo}
|
|
alt="logo"
|
|
className="size-5 rounded-full border-2 border-white bg-red-200"
|
|
/>
|
|
</div>
|
|
<hr className="h-3 border border-neutral-300" />
|
|
<p className="text-sm text-neutral-400">
|
|
Brands who trust us for their solutions
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center justify-center gap-8">
|
|
<div className="flex flex-col items-center">
|
|
<h1 className="text-center text-7xl leading-20 font-medium tracking-tight">
|
|
<Highlighter action="highlight" color="#A21AE9">
|
|
Marketing
|
|
</Highlighter>{' '}
|
|
& IT Solutions <br />
|
|
That Solves Real{' '}
|
|
<Highlighter
|
|
action="underline"
|
|
color="#FF9800"
|
|
iterations={2}
|
|
strokeWidth={2}
|
|
>
|
|
Problems
|
|
</Highlighter>
|
|
</h1>
|
|
<p className="text-3xl tracking-tight text-neutral-400">
|
|
Zero Marketing fluff, and real result delivered
|
|
to you!
|
|
</p>
|
|
</div>
|
|
|
|
<Button
|
|
size={'lg'}
|
|
className="font-600 !h-auto cursor-pointer !rounded-lg bg-linear-[180deg,#A21AE9_-35%,#4F17D5_132%] !px-6 !py-2.5 text-lg inset-shadow-[0_-4px_1px_0_#500BBC] hover:shadow-lg hover:shadow-[#4f0bbc4a]"
|
|
>
|
|
Get Solving
|
|
<HugeiconsIcon
|
|
icon={ArrowRight01Icon}
|
|
size={32}
|
|
color="currentColor"
|
|
strokeWidth={3}
|
|
/>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<HugeiconsIcon
|
|
icon={AiWebBrowsingIcon}
|
|
size={72}
|
|
color="#a1a1a1"
|
|
strokeWidth={1.2}
|
|
className="absolute top-5 right-[20%] rotate-12 rounded-lg border border-[#a11ae92a] bg-white p-2 shadow-lg inset-shadow-[0_-3px_2px_0_#A21AE930] shadow-[#a11ae930]"
|
|
></HugeiconsIcon>
|
|
<HugeiconsIcon
|
|
icon={PenTool01Icon}
|
|
size={72}
|
|
color="#a1a1a1"
|
|
strokeWidth={1.2}
|
|
className="absolute top-32 left-[15%] -rotate-12 rounded-lg border border-[#a11ae92a] bg-white p-2 shadow-lg inset-shadow-[0_-3px_2px_0_#A21AE930] shadow-[#a11ae930]"
|
|
></HugeiconsIcon>
|
|
<HugeiconsIcon
|
|
icon={InstagramIcon}
|
|
size={72}
|
|
color="#a1a1a1"
|
|
strokeWidth={1.2}
|
|
className="absolute right-[10%] bottom-32 -rotate-12 rounded-lg border border-[#a11ae92a] bg-white p-2 shadow-lg inset-shadow-[0_-3px_2px_0_#A21AE930] shadow-[#a11ae930]"
|
|
></HugeiconsIcon>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|