108 lines
4.2 KiB
TypeScript
108 lines
4.2 KiB
TypeScript
import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
|
|
import { ReactElement } from 'react';
|
|
import { ChevronRightIcon } from '@heroicons/react/20/solid';
|
|
import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
|
|
|
|
export function Hero(): ReactElement {
|
|
return (
|
|
<section className="relative isolate overflow-hidden">
|
|
<svg
|
|
focusable="false"
|
|
aria-hidden="true"
|
|
role="presentation"
|
|
className="absolute inset-0 -z-10 size-full stroke-slate-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:stroke-slate-800"
|
|
>
|
|
<defs>
|
|
<pattern
|
|
x="50%"
|
|
y={-1}
|
|
id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
|
|
width={200}
|
|
height={200}
|
|
patternUnits="userSpaceOnUse"
|
|
>
|
|
<path d="M.5 200V.5H200" fill="none" />
|
|
</pattern>
|
|
</defs>
|
|
<rect
|
|
fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)"
|
|
width="100%"
|
|
height="100%"
|
|
strokeWidth={0}
|
|
/>
|
|
</svg>
|
|
<div className="mx-auto max-w-7xl px-6 pb-24 pt-32 lg:flex lg:px-8 lg:pt-56">
|
|
<div className="mx-auto max-w-2xl lg:mx-0 lg:-mt-12 lg:shrink-0">
|
|
{/*<p>*/}
|
|
{/* <a*/}
|
|
{/* href="https://bit.ly/3B0Ebfe"*/}
|
|
{/* title="See live event in details"*/}
|
|
{/* className="group/event-link inline-flex space-x-6"*/}
|
|
{/* >*/}
|
|
{/* <span className="rounded-full bg-blue-600/10 px-3 py-1 text-sm/6 font-semibold text-blue-600 ring-1 ring-inset ring-blue-600/10 dark:bg-cyan-600/10 dark:text-cyan-600 dark:ring-cyan-600/10">*/}
|
|
{/* Live event*/}
|
|
{/* </span>*/}
|
|
{/* <span className="inline-flex items-center space-x-2 text-sm/6 font-medium">*/}
|
|
{/* <span>Webinar + live Q&A on Dec 10th</span>*/}
|
|
{/* <ChevronRightIcon*/}
|
|
{/* aria-hidden="true"*/}
|
|
{/* className="size-5 transform transition-all group-hover/event-link:translate-x-1"*/}
|
|
{/* />*/}
|
|
{/* </span>*/}
|
|
{/* </a>*/}
|
|
{/*</p>*/}
|
|
<SectionHeading
|
|
id="get-speed-and-scale"
|
|
as="h1"
|
|
variant="display"
|
|
className="mt-8 text-pretty tracking-tight"
|
|
>
|
|
Solving the Performance Paradox,{' '}
|
|
<span className="rounded-lg bg-gradient-to-r from-pink-500 to-fuchsia-500 bg-clip-text text-transparent">
|
|
get speed and scale
|
|
</span>
|
|
</SectionHeading>
|
|
<SectionHeading
|
|
as="p"
|
|
variant="subtitle"
|
|
className="mx-auto mt-6 max-w-3xl lg:pr-20"
|
|
>
|
|
Accelerate your organization's journey to tighter collaboration,
|
|
better developer experience, and speed…lots of speed.
|
|
</SectionHeading>
|
|
<div className="mt-8 flex items-center gap-x-6">
|
|
<ButtonLink
|
|
href="/contact/sales"
|
|
title="Request a free trial"
|
|
variant="primary"
|
|
size="default"
|
|
onClick={() =>
|
|
sendCustomEvent(
|
|
'request-trial-click',
|
|
'enterprise-hero',
|
|
'enterprise'
|
|
)
|
|
}
|
|
>
|
|
Request a free trial
|
|
</ButtonLink>
|
|
</div>
|
|
</div>
|
|
<div className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-8 lg:max-w-none lg:flex-none xl:ml-32">
|
|
<div className="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
|
|
<div className="-m-2 rounded-xl bg-slate-900/5 p-2 ring-1 ring-inset ring-slate-900/10 lg:-m-4 lg:rounded-2xl lg:p-4 dark:bg-slate-100/5 dark:ring-slate-100/10">
|
|
<img
|
|
alt="nx cloud application dashboard screenshot"
|
|
src="/images/home/nx-app-dashboard.avif"
|
|
width={2500}
|
|
height={1616}
|
|
className="w-[764px] rounded-md shadow-2xl ring-1 ring-slate-900/10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|