Skip to content

Commit e24421d

Browse files
hasparushasparus
committed
Fix Proven Solution mobile styles
1 parent bb9855c commit e24421d

File tree

1 file changed

+68
-79
lines changed
  • src/components/index-page/proven-solution

1 file changed

+68
-79
lines changed

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

Lines changed: 68 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -4,58 +4,68 @@ import { SectionLabel } from "@/app/conf/_design-system/section-label"
44
import CheckIcon from "@/app/conf/_design-system/pixelarticons/check.svg?svgr"
55

66
import blurBean from "./blur-bean.webp"
7+
import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
78

89
export function ProvenSolution() {
910
return (
10-
<section className="gql-container relative overflow-hidden bg-pri-dark text-white dark:bg-pri-darker xl:py-20">
11+
<section className="dark relative overflow-hidden bg-pri-dark text-white dark:bg-pri-darker xl:py-20">
1112
<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-
/>
13+
<div className="gql-container py-8">
14+
<div className="gql-section relative">
15+
<SectionLabel className="mb-6 !text-sec-light">
16+
Business perspective
17+
</SectionLabel>
18+
<h2 className="typography-h2 mb-6 lg:mb-16">
19+
A proven solution for startups and enterprises
20+
</h2>
21+
<div className="mb-12 grid gap-y-6 lg:grid-cols-3 lg:backdrop-blur-[6.4px] lg:[&>*:not(:first-child)]:border-l-0">
22+
<ProvenSolutionCard
23+
title={
24+
<>
25+
The best user{" "}
26+
<br className="@[530px]/card:hidden max-lg:hidden" />
27+
experience
28+
</>
29+
}
30+
description="Deliver high-performing user experiences at scale. The world’s leading apps use GraphQL to create faster, more responsive digital experiences."
31+
bullets={[
32+
"Faster data retrieval and load times",
33+
"Improved bandwith efficiency",
34+
]}
35+
/>
36+
<ProvenSolutionCard
37+
title={
38+
<>
39+
Stability &{" "}
40+
<br className="@[530px]/card:hidden max-lg:hidden" />
41+
Security
42+
</>
43+
}
44+
description="Protect your APIs while maintaining full visibility into data consumption. GraphQL allows you to monitor, secure, and optimize API usage while ensuring compliance."
45+
bullets={[
46+
"Stronger access control",
47+
"Improved business intelligence & cost analysis",
48+
]}
49+
/>
50+
<ProvenSolutionCard
51+
title={
52+
<>
53+
Efficient distributed{" "}
54+
<br className="@[530px]/card:hidden max-lg:hidden" />
55+
development
56+
</>
57+
}
58+
description="Let your teams ship faster with GraphQL’s flexible, decoupled architecture. GraphQL allows frontend and backend teams to work independently and efficiently."
59+
bullets={[
60+
"More rapid iterations",
61+
"Improved cross-team collaboration",
62+
]}
63+
/>
64+
</div>
65+
<Button className="mx-auto mt-8 w-fit lg:mt-16" href="/learn">
66+
Learn more
67+
</Button>
5568
</div>
56-
<Button className="mx-auto mt-8 w-fit lg:mt-16" href="/learn">
57-
Learn more
58-
</Button>
5969
</div>
6070
</section>
6171
)
@@ -71,8 +81,10 @@ function ProvenSolutionCard({
7181
bullets: string[]
7282
}) {
7383
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>
84+
<div className="flex flex-col border border-pri-light bg-pri-lighter/20 @container/card dark:bg-pri-base/20 max-lg:backdrop-blur-[6.4px]">
85+
<h3 className="border-b border-pri-light p-6 text-2xl @[331px]/card:typography-h3">
86+
{title}
87+
</h3>
7688
<p className="typography-body-lg p-6">{description}</p>
7789
<ul className="typography-body-md mt-auto flex flex-col gap-2 p-6 pt-0">
7890
{bullets.map(bullet => (
@@ -86,48 +98,25 @@ function ProvenSolutionCard({
8698
)
8799
}
88100

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-
94101
function Stripes() {
102+
// todo: rotate to top right corner on mobile
95103
return (
96104
<ImageLoaded
97105
role="presentation"
98106
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%]"
107+
// eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value
108+
className="pointer-events-none absolute inset-0 opacity-0 transition-[translate] duration-[400ms] ease-linear [mask-position:center_calc(100%+65vw)] [mask-size:200%] data-[loaded=true]:opacity-100 max-lg:rotate-[180deg] max-lg:scale-x-[-1] lg:[mask-position:center_500px] lg:[mask-size:150%] xl:translate-y-1/2 xl:[mask-position:center_top] xl:max-3xl:translate-y-[50%]"
100109
style={{
101110
maskImage: `url(${blurBean.src})`,
102111
WebkitMaskImage: `url(${blurBean.src})`,
103112
maskRepeat: "no-repeat",
104113
WebkitMaskRepeat: "no-repeat",
105114
}}
106115
>
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-
}}
116+
{/* todo: ensure colors in dark mode are correct */}
117+
<StripesDecoration
118+
evenClassName="bg-[linear-gradient(180deg,hsl(var(--color-pri-light)/0.2)_20%,hsl(var(--color-pri-base))_150%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-pri-base))_20%,hsl(var(--color-pri-darker))_150%)]"
119+
oddClassName="bg-[linear-gradient(180deg,hsl(var(--color-pri-light))_20%,hsl(var(--color-pri-lighter)/.9)_150%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-pri-darker)/.9)_20%,hsl(var(--color-pri-base)/.8)_150%)]"
131120
/>
132121
</ImageLoaded>
133122
)

0 commit comments

Comments
 (0)