mirror of
https://github.com/graphql-hive/console
synced 2026-05-24 09:38:26 +00:00
Add another Get Your API Game Right section (#6495)
This commit is contained in:
Piotr Monwid-Olechnowicz
GitHub
parent
cef7fd88e4
commit
2b01750da2
6 changed files with 109 additions and 5 deletions
|
|
@ -31,7 +31,7 @@ export const metadata = {
|
|||
images: [
|
||||
new URL('./opengraph-image.png', import.meta.url)
|
||||
.toString()
|
||||
// eslint-disable-next-line no-process-env
|
||||
|
||||
.replace(process.env.NEXT_BASE_PATH || '', ''),
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {
|
|||
HiveGatewayIcon,
|
||||
} from '@theguild/components';
|
||||
import { ErrorBoundary } from '../../components/error-boundary';
|
||||
import { GetYourAPIGameRightList } from '../../components/get-your-api-game-right-list';
|
||||
import { LandingPageContainer } from '../../components/landing-page-container';
|
||||
import { metadata as rootMetadata } from '../layout';
|
||||
import { FederationCompatibleBenchmarksSection } from './federation-compatible-benchmarks';
|
||||
|
|
@ -73,7 +74,7 @@ export default function HiveGatewayPage() {
|
|||
>
|
||||
<GatewayLandingFAQ />
|
||||
</FrequentlyAskedQuestions>
|
||||
{/* big get your API game right section */}
|
||||
<GetYourAPIGameRightList className="mx-4 sm:mb-6 md:mx-6" />
|
||||
</LandingPageContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ metadata.openGraph = {
|
|||
images: [
|
||||
new URL('./opengraph-image.png', import.meta.url)
|
||||
.toString()
|
||||
// eslint-disable-next-line no-process-env
|
||||
|
||||
.replace(process.env.NEXT_BASE_PATH || '', ''),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export const metadata = {
|
|||
images: [
|
||||
new URL('./opengraph-image.png', import.meta.url)
|
||||
.toString()
|
||||
// eslint-disable-next-line no-process-env
|
||||
|
||||
.replace(process.env.NEXT_BASE_PATH || '', ''),
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
## Frequently Asked Questions
|
||||
|
||||
- What does "no vendor lock" mean?
|
||||
- What does "no vendor lock-in" mean?
|
||||
|
||||
We value your flexibility and independent decision-making. That means we'll never try to lock you
|
||||
out in our ecosystem and we'll continuously add support for other tools and solutions, so that you
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
import { useId } from 'react';
|
||||
import {
|
||||
CallToAction,
|
||||
cn,
|
||||
ContactButton,
|
||||
DecorationIsolation,
|
||||
Heading,
|
||||
} from '@theguild/components';
|
||||
|
||||
/**
|
||||
* This component differs from the `GetYourAPIGameRightSection`
|
||||
* from `@theguild/components` by having a list of items.
|
||||
*/
|
||||
export function GetYourAPIGameRightList({ className }: { className?: string }) {
|
||||
return (
|
||||
<section className={cn(className, 'bg-primary relative overflow-hidden rounded-3xl')}>
|
||||
<DecorationIsolation>
|
||||
<StrokeDecoration className="absolute right-0 top-[-184px] max-md:size-[312px] max-md:rotate-90 max-md:-scale-y-100 md:bottom-0 lg:right-[696px]" />
|
||||
</DecorationIsolation>
|
||||
<div className="flex items-stretch justify-between gap-x-8 gap-y-10 px-4 py-6 max-lg:flex-col md:items-center md:p-24 md:px-12 xl:px-[120px]">
|
||||
<Heading
|
||||
as="h2"
|
||||
size="md"
|
||||
className="text-[40px] leading-[1.2] tracking-[-0.2px] max-sm:text-balance max-sm:text-center max-sm:text-[32px]/[1.25] md:text-[56px] md:leading-[1.142586] md:tracking-[-0.56px]"
|
||||
>
|
||||
Get your
|
||||
<br className="max-lg:hidden" /> API game right.
|
||||
</Heading>
|
||||
<div>
|
||||
<ul className="flex shrink-0 flex-col gap-6 font-medium md:whitespace-nowrap xl:text-xl">
|
||||
<li className="flex gap-2 md:items-center">
|
||||
<CheckmarkCircle />
|
||||
Built by engineers to improve developer experience
|
||||
</li>
|
||||
<li className="flex gap-2 md:items-center">
|
||||
<CheckmarkCircle />
|
||||
Driven by customers
|
||||
</li>
|
||||
<li className="flex gap-2 md:items-center">
|
||||
<CheckmarkCircle />
|
||||
No vendor lock-in
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-8 flex gap-x-4 gap-y-2 whitespace-pre max-sm:flex-col">
|
||||
<CallToAction variant="secondary-inverted" href="https://app.graphql-hive.com/">
|
||||
Get started for free
|
||||
</CallToAction>
|
||||
<ContactButton variant="tertiary">Talk to us</ContactButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CheckmarkCircle() {
|
||||
return (
|
||||
<div className="h-min grow-0 rounded-full border p-[3px] max-md:mt-px">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 17"
|
||||
fill="currentColor"
|
||||
className="translate-y-[0.5px]"
|
||||
>
|
||||
<path d="M6.66668 10.163L12.7947 4.03564L13.7373 4.97831L6.66668 12.049L2.42401 7.80631L3.36668 6.86364L6.66668 10.163Z" />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StrokeDecoration(props: React.SVGAttributes<SVGSVGElement>) {
|
||||
const id = useId();
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="492"
|
||||
height="409"
|
||||
viewBox="0 0 492 409"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M475.973 311.082C485.909 301.145 491.5 287.658 491.5 273.616L491.5 0.5L389.821 0.499999L389.821 309.081C389.821 353.676 353.676 389.821 309.081 389.821L0.500001 389.821L0.5 491.5L273.616 491.5C287.658 491.5 301.145 485.909 311.082 475.973L388.967 398.088L398.088 388.967L475.973 311.082Z"
|
||||
stroke={`url(#${id})`}
|
||||
fill="none"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={id}
|
||||
x1="246"
|
||||
y1="234.671"
|
||||
x2="476.625"
|
||||
y2="483.908"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#A2C1C4" stopOpacity="0" />
|
||||
<stop offset="1" stopColor="#A2C1C4" stopOpacity="0.8" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue