Skip to content

Commit 78808b5

Browse files
prc5prc5
committed
docs: ✏️ update
1 parent 20e894d commit 78808b5

1 file changed

Lines changed: 50 additions & 34 deletions

File tree

  • documentation/src/components/landing/about

‎documentation/src/components/landing/about/about.tsx‎

Lines changed: 50 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -89,53 +89,69 @@ export const About = () => {
8989
</Description>
9090
</motion.div>
9191
</div>
92-
<div className="hidden pb-4 text-xs font-semibold uppercase tracking-[0.24em] text-zinc-500 lg:grid lg:grid-cols-[1fr_72px_1fr]">
93-
<div>Common problem</div>
94-
<div />
95-
<div>HyperFetch answer</div>
92+
<div className="pb-4 text-xs font-semibold uppercase tracking-[0.24em] text-zinc-500 flex flex-wrap gap-x-4 gap-y-1 lg:grid lg:grid-cols-[1fr_72px_1fr]">
93+
<div className="flex items-center gap-2">
94+
<span className="size-2 rounded-full bg-rose-400/50 lg:hidden" />
95+
Common problem
96+
</div>
97+
<div className="hidden lg:block" />
98+
<div className="flex items-center gap-2 lg:justify-start">
99+
<span className="size-2 rounded-full bg-emerald-400/50 lg:hidden" />
100+
HyperFetch answer
101+
</div>
96102
</div>
97103

98104
<div className="space-y-4">
99105
{problems.map((problem, index) => {
100106
const Icon = problem.icon;
107+
const isLast = index === problems.length - 1;
101108

102109
return (
103-
<motion.div
104-
key={problem.title}
105-
initial={{ opacity: 0, y: 20 }}
106-
whileInView={{ opacity: 1, y: 0 }}
107-
transition={{ duration: 0.6, delay: 0.1 + index * 0.08 }}
108-
viewport={{ once: true }}
109-
className="grid gap-3 lg:grid-cols-[1fr_72px_1fr] lg:items-stretch"
110-
>
111-
<div className="h-full rounded-2xl border border-rose-400/10 bg-rose-950/[0.08] p-5">
112-
<div className="flex gap-4">
113-
<div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-rose-400/15 bg-rose-400/10">
114-
<Icon className="size-5 text-rose-300" />
115-
</div>
116-
<div>
117-
<h3 className="text-base font-extrabold tracking-tight text-zinc-100">{problem.title}</h3>
118-
<p className="mt-1 text-sm leading-6 text-zinc-400">{problem.description}</p>
110+
<div key={problem.title}>
111+
<motion.div
112+
initial={{ opacity: 0, y: 20 }}
113+
whileInView={{ opacity: 1, y: 0 }}
114+
transition={{ duration: 0.6, delay: 0.1 + index * 0.08 }}
115+
viewport={{ once: true }}
116+
className="grid gap-3 lg:grid-cols-[1fr_72px_1fr] lg:items-stretch"
117+
>
118+
<div className="h-full rounded-2xl border border-rose-400/10 bg-rose-950/[0.08] p-5">
119+
<div className="flex gap-4">
120+
<div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-rose-400/15 bg-rose-400/10">
121+
<Icon className="size-5 text-rose-300" />
122+
</div>
123+
<div>
124+
<h3 className="text-base font-extrabold tracking-tight text-zinc-100">{problem.title}</h3>
125+
<p className="mt-1 text-sm leading-6 text-zinc-400">{problem.description}</p>
126+
</div>
119127
</div>
120128
</div>
121-
</div>
122129

123-
<div className="relative flex items-center justify-center">
124-
<ArrowRight className="size-5 rotate-90 text-zinc-500 lg:rotate-0" />
125-
</div>
130+
<div className="relative hidden items-center justify-center lg:flex">
131+
<ArrowRight className="size-5 text-zinc-500" />
132+
</div>
126133

127-
<div className="h-full rounded-2xl border border-emerald-400/15 bg-emerald-950/[0.08] p-5">
128-
<div className="flex gap-4">
129-
<div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-emerald-400/20 bg-emerald-400/10">
130-
<CheckCircle2 className="size-5 text-emerald-300" />
131-
</div>
132-
<div>
133-
<h3 className="text-base font-extrabold tracking-tight text-zinc-100">{problem.solutionTitle}</h3>
134-
<p className="mt-1 text-sm leading-6 text-zinc-400">{problem.solutionDescription}</p>
134+
<div className="h-full rounded-2xl border border-emerald-400/15 bg-emerald-950/[0.08] p-5">
135+
<div className="flex gap-4">
136+
<div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-emerald-400/20 bg-emerald-400/10">
137+
<CheckCircle2 className="size-5 text-emerald-300" />
138+
</div>
139+
<div>
140+
<h3 className="text-base font-extrabold tracking-tight text-zinc-100">{problem.solutionTitle}</h3>
141+
<p className="mt-1 text-sm leading-6 text-zinc-400">{problem.solutionDescription}</p>
142+
</div>
135143
</div>
136144
</div>
137-
</div>
138-
</motion.div>
145+
</motion.div>
146+
147+
{!isLast && (
148+
<div className="flex items-center justify-center gap-1.5 py-4 lg:hidden">
149+
<span className="size-1 rounded-full bg-zinc-600" />
150+
<span className="size-1 rounded-full bg-zinc-700" />
151+
<span className="size-1 rounded-full bg-zinc-600" />
152+
</div>
153+
)}
154+
</div>
139155
);
140156
})}
141157
</div>

0 commit comments

Comments
 (0)