Skip to content

Commit a0f0cd4

Browse files
hasparushasparus
committed
Use proper blur blob (wrong stripes colors tho)
1 parent 00526da commit a0f0cd4

File tree

2 files changed

+126
-9
lines changed

2 files changed

+126
-9
lines changed

‎src/components/index-page/proven-solution/blur-bean.webp

509 KB
Binary file not shown.

‎src/components/index-page/proven-solution/index.tsx

Lines changed: 126 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,134 @@
1+
import { ImageLoaded } from "@/app/conf/2025/components/image-loaded"
12
import { Button } from "@/app/conf/_design-system/button"
23
import { SectionLabel } from "@/app/conf/_design-system/section-label"
4+
import CheckIcon from "@/app/conf/_design-system/pixelarticons/check.svg?svgr"
5+
6+
import blurBean from "./blur-bean.webp"
37

48
export function ProvenSolution() {
59
return (
6-
<section className="gql-container gql-section xl:py-20">
7-
<SectionLabel className="mb-6">Business perspective</SectionLabel>
8-
<h2 className="typography-h2 mb-6 lg:mb-16">
9-
A proven solution for startups and enterprises
10-
</h2>
11-
12-
<Button className="mx-auto mt-8 w-fit lg:mt-16" href="/learn">
13-
Learn more
14-
</Button>
10+
<section className="gql-container relative overflow-hidden bg-pri-dark text-white dark:bg-pri-darker xl:py-20">
11+
<Stripes />
12+
<div className="gql-section relative">
13+
<SectionLabel className="mb-6 !text-sec-light">
14+
Business perspective
15+
</SectionLabel>
16+
<h2 className="typography-h2 mb-6 lg:mb-16">
17+
A proven solution for startups and enterprises
18+
</h2>
19+
<div className="mb-12 grid gap-y-6 lg:grid-cols-3 lg:[&>*:not(:first-child)]:border-l-0">
20+
<ProvenSolutionCard
21+
title={
22+
<>
23+
The best user
24+
<br className="max-lg:hidden" />
25+
experience
26+
</>
27+
}
28+
description="Deliver high-performing user experiences at scale. The world’s leading apps use GraphQL to create faster, more responsive digital experiences."
29+
bullets={[
30+
"Faster data retrieval and load times",
31+
"Improved bandwith efficiency",
32+
]}
33+
/>
34+
<ProvenSolutionCard
35+
title={
36+
<>
37+
Stability &<br className="max-lg:hidden" />
38+
Security
39+
</>
40+
}
41+
description="Protect your APIs while maintaining full visibility into data consumption. GraphQL allows you to monitor, secure, and optimize API usage while ensuring compliance."
42+
bullets={[
43+
"Stronger access control",
44+
"Improved business intelligence & cost analysis",
45+
]}
46+
/>
47+
<ProvenSolutionCard
48+
title="Efficient distributed development"
49+
description="Let your teams ship faster with GraphQL’s flexible, decoupled architecture. GraphQL allows frontend and backend teams to work independently and efficiently."
50+
bullets={[
51+
"More rapid iterations",
52+
"Improved cross-team collaboration",
53+
]}
54+
/>
55+
</div>
56+
<Button className="mx-auto mt-8 w-fit lg:mt-16" href="/learn">
57+
Learn more
58+
</Button>
59+
</div>
1560
</section>
1661
)
1762
}
63+
64+
function ProvenSolutionCard({
65+
title,
66+
description,
67+
bullets,
68+
}: {
69+
title: React.ReactNode
70+
description: React.ReactNode
71+
bullets: string[]
72+
}) {
73+
return (
74+
<div className="flex flex-col border border-pri-light bg-pri-lighter/20 backdrop-blur-md dark:bg-pri-base/20">
75+
<h3 className="typography-h3 border-b border-pri-light p-6">{title}</h3>
76+
<p className="typography-body-lg p-6">{description}</p>
77+
<ul className="typography-body-md mt-auto flex flex-col gap-2 p-6 pt-0">
78+
{bullets.map(bullet => (
79+
<li key={bullet} className="flex items-center gap-2">
80+
<CheckIcon className="size-4 shrink-0 text-sec-base" aria-hidden />
81+
<span>{bullet}</span>
82+
</li>
83+
))}
84+
</ul>
85+
</div>
86+
)
87+
}
88+
89+
const maskEven =
90+
"repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)"
91+
const maskOdd =
92+
"repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)"
93+
94+
function Stripes() {
95+
return (
96+
<ImageLoaded
97+
role="presentation"
98+
image={blurBean}
99+
className="pointer-events-none absolute inset-x-0 bottom-[-385px] top-[-203px] translate-y-12 opacity-0 transition duration-[400ms] ease-linear [mask-position:70%_60%] [mask-size:cover] data-[loaded=true]:translate-y-0 data-[loaded=true]:opacity-100 max-3xl:[mask-size:220%] max-md:[mask-size:800%]"
100+
style={{
101+
maskImage: `url(${blurBean.src})`,
102+
WebkitMaskImage: `url(${blurBean.src})`,
103+
maskRepeat: "no-repeat",
104+
WebkitMaskRepeat: "no-repeat",
105+
}}
106+
>
107+
{/* TODO: StripesDecoration with proper colors for dark mode. */}
108+
{/* light-1: background: linear-gradient(180deg, rgba(255, 204, 239, 0.20) 0%, var(--Primary-Base, #E10098) 100%);
109+
*/}
110+
{/* light-2: background: linear-gradient(180deg, var(--Primary-Light, #FF99DF) 0%, var(--Primary-Lighter, #FFCCEF) 100%); */}
111+
{/* dark-1: background: linear-gradient(180deg, var(--Primary-Base, #E10098) 0%, var(--Primary-Darker, #660046) 100%);
112+
// dark 2: background: linear-gradient(180deg, var(--Primary-Darker, #660046) 0%, var(--Primary-Base, #E10098) 100%);
113+
*/}
114+
<div
115+
className="absolute inset-0"
116+
style={{
117+
backgroundImage:
118+
"linear-gradient(180deg, hsl(var(--color-pri-light)) 0%, hsl(var(--color-pri-lighter)) 100%)",
119+
maskImage: maskEven,
120+
WebkitMaskImage: maskEven,
121+
}}
122+
/>
123+
<div
124+
className="absolute inset-0"
125+
style={{
126+
backgroundImage:
127+
"linear-gradient(180deg,hsl(319deg 100% 90% / 0.2) 0%, hsl(var(--color-pri-base)) 100%)",
128+
maskImage: maskOdd,
129+
WebkitMaskImage: maskOdd,
130+
}}
131+
/>
132+
</ImageLoaded>
133+
)
134+
}

0 commit comments

Comments
 (0)