refactor: standardize Tailwind class syntax and component usage

- Replaced arbitrary CSS values with standard Tailwind utilities (e.g., `bottom-[-18rem]` → `-bottom-72`, `mt-[-2rem]` → `-mt-8`)
- Fixed invalid gradient syntax by removing `bg-` prefix from gradient utilities
- Consolidated text styling by replacing inline elements with CT/CP text components
- Adjusted CT component typography from semibold to medium for better visual hierarchy
This commit is contained in:
2025-11-10 15:28:17 +01:00
parent 2865b1e1fd
commit d16d4e02e0
10 changed files with 30 additions and 18 deletions

View File

@@ -38,7 +38,7 @@ export function ComputeDesign() {
<div className="mx-auto max-w-7xl border-gray-100">
<dl className="grid grid-cols-1 gap-4 lg:gap-14 overflow-hidden text-center lg:grid-cols-3">
{stats.map((stat) => (
<div key={stat.id} className="flex flex-col items-center bg-gray-400/5 py-8 px-12 border border-gray-100 lg:border-t-0 lg:border-b-0">
<div key={stat.id} className="flex flex-col items-center bg-gray-100 py-8 px-12 border border-gray-100 lg:border-t-0 lg:border-b-0">
<stat.icon className="h-8 w-8 fill-cyan-500 mb-4" aria-hidden="true" />
<CT className="">{stat.value}</CT>
<CP className="mt-1">{stat.name}</CP>

View File

@@ -31,9 +31,9 @@ export function ComputeOverview() {
/>
<CircleBackground
color="#22d3ee"
className="absolute bottom-[-18rem] left-[15%] h-[420px] w-[420px] opacity-15 blur-3xl"
className="absolute -bottom-72 left-[15%] h-[420px] w-[420px] opacity-15 blur-3xl"
/>
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(0,0,0,0.03),_transparent_55%)]" />
<div className="absolute inset-0 bg-radial-gradient(circle_at_top,_rgba(0,0,0,0.03),_transparent_55%)]" />
</div>
<Container className="relative py-12 bg-white mx-auto s border border-t-0 border-b-0 border-gray-100">
@@ -69,7 +69,7 @@ export function ComputeOverview() {
key={card.title}
className="group relative overflow-hidden rounded-md border border-gray-100 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
>
<div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-cyan-100 opacity-0 transition group-hover:opacity-70" />
<div className="absolute inset-0 bg-linear-to-br from-cyan-50 via-white to-cyan-100 opacity-0 transition group-hover:opacity-70" />
<div className="relative">
<p className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-cyan-600">