Elgato_dark/console
1
0
Fork 0
mirror of https://github.com/graphql-hive/console synced 2026-05-23 09:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add a highlight and arch decoration & mobile tweaks (#6387)

Browse source
This commit is contained in:
Piotr Monwid-Olechnowicz 2025-01-17 17:31:40 +01:00 committed by GitHub
parent 39363163e5
commit d32f2ca20b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/web/docs/src/components/landing-page.tsx
View file

@ -207,19 +207,32 @@ function UltimatePerformanceCards() {
function LearnGraphQLFederationSection(props: { className?: string }) {
return (
<section className={cn('bg-green-1000 rounded-3xl p-24 text-center', props.className)}>
<Heading as="h2" size="md" className="flex items-center justify-center gap-4 text-white">
<section
className={cn(
'to-green-1000 relative rounded-3xl bg-gradient-to-br from-[#003834] p-8 sm:py-12 md:px-6 md:text-center lg:p-24',
props.className,
)}
>
<DecorationIsolation className="opacity-80">
<ArchDecoration className="absolute -right-1/2 top-1/2 sm:-right-1/4 md:right-[-105px] md:top-[120px] [&>path]:fill-none [&>path]:stroke-white/30" />
<HighlightDecoration className="absolute -bottom-16 -right-1 size-[600px] rotate-180 -scale-x-100 overflow-visible" />
</DecorationIsolation>
<Heading
as="h2"
size="md"
className="flex items-center justify-center gap-4 text-pretty text-white"
>
What Is GraphQL Federation?
</Heading>
<p className="mt-8 font-medium text-white/80">
<p className="mt-4 text-pretty font-medium text-white/80">
Understand what federated GraphQL API is, how it works, and why it may be the right choice
for your API.
</p>
<CallToAction
variant="secondary"
href="/federation"
className="mx-auto mt-8"
className="mx-auto mt-6 md:mt-8"
title="Introduction to federated GraphQL APIs"
>
Introduction to Federation