feat: improve tailwind inconsistencies

Author: mvriu5

src/app/(landing)/[locale]/blog/[slug]/page.tsx

@@ -51,9 +51,9 @@ export default async function Page({ params }: { params: Promise<{ locale: strin
                                 <div className={"pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_20%,rgba(255,255,255,0.14),transparent_24%),radial-gradient(circle_at_50%_22%,rgba(191,90,242,0.18),transparent_34%),radial-gradient(circle_at_50%_18%,rgba(255,255,255,0.08),transparent_20%)] md:bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.14),transparent_32%),radial-gradient(circle_at_20%_50%,rgba(191,90,242,0.14),transparent_38%),radial-gradient(circle_at_78%_48%,rgba(255,255,255,0.08),transparent_28%)]"} />
 
                                 <div className={"relative z-20 flex w-full max-w-4xl flex-col items-center gap-8 text-center md:flex-row md:items-center md:text-left"}>
-                                    <div className={"relative flex size-32 md:size-40 shrink-0 items-center justify-center rounded-[1.75rem] border border-white/10 bg-white/5 shadow-[0_18px_46px_rgba(0,0,0,0.24)] backdrop-blur-md"}>
+                                    <div className={"relative flex size-32 shrink-0 items-center justify-center rounded-3xl border border-white/10 bg-white/5 shadow-[0_18px_46px_rgba(0,0,0,0.24)] backdrop-blur-md md:size-40"}>
                                         <div className={"relative isolate flex items-center justify-center rounded-3xl ring ring-white/10 px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]"}>
-                                            <div aria-hidden="true" className="pointer-events-none absolute inset-0 rounded-3xl bg-linear-to-br from-primary via-primary to-[#2a1638]" />
+                                            <div aria-hidden="true" className="pointer-events-none absolute inset-0 rounded-[1.25rem] bg-linear-to-br from-primary via-primary to-secondary" />
                                             <Image src={"/code0_logo_white.png"} width={"120"} height={"120"} alt={"Code0 Logo"} className={"z-20"} />
                                         </div>
                                     </div>
@@ -68,7 +68,7 @@ export default async function Page({ params }: { params: Promise<{ locale: strin
                                         <HapticButtonLink
                                             href={"/contact"}
                                             variant="normal"
-                                            className={"h-11 rounded-xl px-8! bg-white/88! text-primary! shadow-[0_12px_28px_rgba(255,255,255,0.12)] hover:bg-white!"}
+                                            className={"h-11 rounded-xl px-8! bg-white/90! text-primary! shadow-[0_12px_28px_rgba(255,255,255,0.12)] hover:bg-white!"}
                                         >
                                             Contact us
                                         </HapticButtonLink>
@@ -118,4 +118,3 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
         },
     })
 }
-

src/app/(landing)/[locale]/not-found.tsx

@@ -1,4 +1,4 @@
- "use client"
+"use client"
 
 import { DEFAULT_LOCALE, isSupportedLocale } from "@/lib/i18n"
 import Link from "next/link"
@@ -12,15 +12,15 @@ export default function LocalizedNotFound() {
     const locale = rawLocale && isSupportedLocale(rawLocale) ? rawLocale : DEFAULT_LOCALE
 
     return (
-        <section className="flex flex-col items-center pt-60 justify-center text-center bg-primary text-white px-4">
-            <div className="rounded-4xl p-6 mb-8 border-2 border-dashed border-[#e5464c]/50 bg-[#e5464c]/10 shadow-md">
-                <svg id="a" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="#e5464c"><path d="M11.996,10.545c.739,0,1.272-.213,1.6-.64.329-.427.493-.985.493-1.674v-3.718c0-.706.09-1.333.271-1.884.18-.549.48-1.013.898-1.391s.977-.665,1.674-.862c.697-.197,1.563-.295,2.598-.295h.492v2.93h-.615c-.739,0-1.235.164-1.49.493-.255.328-.382.837-.382,1.526v3.274c0,.854-.115,1.576-.345,2.167s-.689,1.1-1.378,1.526c.689.427,1.148.936,1.378,1.526.23.591.345,1.313.345,2.167v3.274c0,.689.127,1.198.382,1.527.254.328.751.492,1.49.492h.615v2.93h-.492c-1.034,0-1.9-.099-2.598-.296-.698-.197-1.256-.484-1.674-.861-.418-.378-.718-.842-.898-1.391-.181-.55-.271-1.178-.271-1.884v-3.718c0-.689-.164-1.247-.493-1.674-.328-.427-.861-.64-1.6-.64v-2.905Z"/><path d="M12.002,13.451c-.739,0-1.272.213-1.601.64-.329.427-.492.985-.492,1.674v3.718c0,.706-.091,1.333-.271,1.884-.181.549-.48,1.013-.899,1.391-.418.377-.977.665-1.674.861-.698.197-1.563.296-2.598.296h-.493v-2.93h.616c.739,0,1.235-.164,1.49-.492.254-.329.381-.837.381-1.527v-3.274c0-.854.115-1.576.345-2.167.229-.591.689-1.099,1.379-1.526-.689-.427-1.149-.936-1.379-1.526-.23-.591-.345-1.313-.345-2.167v-3.274c0-.689-.127-1.198-.381-1.526-.255-.329-.751-.493-1.49-.493h-.616V.082h.493c1.034,0,1.899.098,2.598.295.697.197,1.255.484,1.674.862.419.377.718.841.899,1.391.18.55.271,1.178.271,1.884v3.718c0,.689.164,1.248.492,1.674.328.427.862.64,1.601.64v2.905Z"/></svg>
+        <section className="h-dvh flex flex-col items-center justify-center bg-primary px-4 text-center text-white">
+            <div className="mb-8 rounded-4xl border-2 border-dashed border-error/50 bg-error/10 p-6 shadow-md">
+                <svg id="a" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="var(--color-error)"><path d="M11.996,10.545c.739,0,1.272-.213,1.6-.64.329-.427.493-.985.493-1.674v-3.718c0-.706.09-1.333.271-1.884.18-.549.48-1.013.898-1.391s.977-.665,1.674-.862c.697-.197,1.563-.295,2.598-.295h.492v2.93h-.615c-.739,0-1.235.164-1.49.493-.255.328-.382.837-.382,1.526v3.274c0,.854-.115,1.576-.345,2.167s-.689,1.1-1.378,1.526c.689.427,1.148.936,1.378,1.526.23.591.345,1.313.345,2.167v3.274c0,.689.127,1.198.382,1.527.254.328.751.492,1.49.492h.615v2.93h-.492c-1.034,0-1.9-.099-2.598-.296-.698-.197-1.256-.484-1.674-.861-.418-.378-.718-.842-.898-1.391-.181-.55-.271-1.178-.271-1.884v-3.718c0-.689-.164-1.247-.493-1.674-.328-.427-.861-.64-1.6-.64v-2.905Z"/><path d="M12.002,13.451c-.739,0-1.272.213-1.601.64-.329.427-.492.985-.492,1.674v3.718c0,.706-.091,1.333-.271,1.884-.181.549-.48,1.013-.899,1.391-.418.377-.977.665-1.674.861-.698.197-1.563.296-2.598.296h-.493v-2.93h.616c.739,0,1.235-.164,1.49-.492.254-.329.381-.837.381-1.527v-3.274c0-.854.115-1.576.345-2.167.229-.591.689-1.099,1.379-1.526-.689-.427-1.149-.936-1.379-1.526-.23-.591-.345-1.313-.345-2.167v-3.274c0-.689-.127-1.198-.381-1.526-.255-.329-.751-.493-1.49-.493h-.616V.082h.493c1.034,0,1.899.098,2.598.295.697.197,1.255.484,1.674.862.419.377.718.841.899,1.391.18.55.271,1.178.271,1.884v3.718c0,.689.164,1.248.492,1.674.328.427.862.64,1.601.64v2.905Z"/></svg>
             </div>
-            <h1 className="text-5xl font-bold font-mono mb-2 tracking-tighter">404 NOT FOUND</h1>
-            <p className="text-md mb-4 text-white/75">The page you are looking for does not exist.</p>
+            <h1 className="mb-2 font-mono text-5xl font-bold tracking-tighter">404 Not Found</h1>
+            <p className="mb-4 text-white/75">The page you are looking for does not exist.</p>
             <Link href={`/${locale}`}>
                 <Button variant="filled">
-                    <IconArrowBackUp size={16} className="-mt-0.5 text-gray-400" />
+                    <IconArrowBackUp size={16} className="-mt-0.5 text-white/50" />
                     Go back
                 </Button>
             </Link>

src/app/(landing)/not-found.tsx

@@ -1,22 +1,22 @@
 "use client"
 
-import Link from 'next/link'
-import './globals.css'
-import { Button } from '@code0-tech/pictor'
-import { IconArrowBackUp } from '@tabler/icons-react'
+import Link from "next/link"
+import "./globals.css"
+import { Button } from "@code0-tech/pictor"
+import { IconArrowBackUp } from "@tabler/icons-react"
 
 export default function NotFound() {
     return (
-        <div className="flex flex-col items-center justify-center pt-60 text-center bg-primary text-white">
-            <div className="rounded-4xl p-6 mb-8 border-2 border-dashed border-[#e5464c]/50 bg-[#e5464c]/10 shadow-md">
-                <svg aria-hidden="true" id="a" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="#e5464c"><path d="M11.996,10.545c.739,0,1.272-.213,1.6-.64.329-.427.493-.985.493-1.674v-3.718c0-.706.09-1.333.271-1.884.18-.549.48-1.013.898-1.391s.977-.665,1.674-.862c.697-.197,1.563-.295,2.598-.295h.492v2.93h-.615c-.739,0-1.235.164-1.49.493-.255.328-.382.837-.382,1.526v3.274c0,.854-.115,1.576-.345,2.167s-.689,1.1-1.378,1.526c.689.427,1.148.936,1.378,1.526.23.591.345,1.313.345,2.167v3.274c0,.689.127,1.198.382,1.527.254.328.751.492,1.49.492h.615v2.93h-.492c-1.034,0-1.9-.099-2.598-.296-.698-.197-1.256-.484-1.674-.861-.418-.378-.718-.842-.898-1.391-.181-.55-.271-1.178-.271-1.884v-3.718c0-.689-.164-1.247-.493-1.674-.328-.427-.861-.64-1.6-.64v-2.905Z"/><path d="M12.002,13.451c-.739,0-1.272.213-1.601.64-.329.427-.492.985-.492,1.674v3.718c0,.706-.091,1.333-.271,1.884-.181.549-.48,1.013-.899,1.391-.418.377-.977.665-1.674.861-.698.197-1.563.296-2.598.296h-.493v-2.93h.616c.739,0,1.235-.164,1.49-.492.254-.329.381-.837.381-1.527v-3.274c0-.854.115-1.576.345-2.167.229-.591.689-1.099,1.379-1.526-.689-.427-1.149-.936-1.379-1.526-.23-.591-.345-1.313-.345-2.167v-3.274c0-.689-.127-1.198-.381-1.526-.255-.329-.751-.493-1.49-.493h-.616V.082h.493c1.034,0,1.899.098,2.598.295.697.197,1.255.484,1.674.862.419.377.718.841.899,1.391.18.55.271,1.178.271,1.884v3.718c0,.689.164,1.248.492,1.674.328.427.862.64,1.601.64v2.905Z"/></svg>
+        <div className="h-dvh flex flex-col items-center justify-center bg-primary px-4 text-center text-white">
+            <div className="mb-8 rounded-4xl border-2 border-dashed border-error/50 bg-error/10 p-6 shadow-md">
+                <svg aria-hidden="true" id="a" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="var(--color-error)"><path d="M11.996,10.545c.739,0,1.272-.213,1.6-.64.329-.427.493-.985.493-1.674v-3.718c0-.706.09-1.333.271-1.884.18-.549.48-1.013.898-1.391s.977-.665,1.674-.862c.697-.197,1.563-.295,2.598-.295h.492v2.93h-.615c-.739,0-1.235.164-1.49.493-.255.328-.382.837-.382,1.526v3.274c0,.854-.115,1.576-.345,2.167s-.689,1.1-1.378,1.526c.689.427,1.148.936,1.378,1.526.23.591.345,1.313.345,2.167v3.274c0,.689.127,1.198.382,1.527.254.328.751.492,1.49.492h.615v2.93h-.492c-1.034,0-1.9-.099-2.598-.296-.698-.197-1.256-.484-1.674-.861-.418-.378-.718-.842-.898-1.391-.181-.55-.271-1.178-.271-1.884v-3.718c0-.689-.164-1.247-.493-1.674-.328-.427-.861-.64-1.6-.64v-2.905Z"/><path d="M12.002,13.451c-.739,0-1.272.213-1.601.64-.329.427-.492.985-.492,1.674v3.718c0,.706-.091,1.333-.271,1.884-.181.549-.48,1.013-.899,1.391-.418.377-.977.665-1.674.861-.698.197-1.563.296-2.598.296h-.493v-2.93h.616c.739,0,1.235-.164,1.49-.492.254-.329.381-.837.381-1.527v-3.274c0-.854.115-1.576.345-2.167.229-.591.689-1.099,1.379-1.526-.689-.427-1.149-.936-1.379-1.526-.23-.591-.345-1.313-.345-2.167v-3.274c0-.689-.127-1.198-.381-1.526-.255-.329-.751-.493-1.49-.493h-.616V.082h.493c1.034,0,1.899.098,2.598.295.697.197,1.255.484,1.674.862.419.377.718.841.899,1.391.18.55.271,1.178.271,1.884v3.718c0,.689.164,1.248.492,1.674.328.427.862.64,1.601.64v2.905Z"/></svg>
             </div>
-            <h1 className="text-5xl font-bold font-mono mb-2 tracking-tighter">404 Not Found</h1>
-            <p className="text-md mb-4 text-white/75">The page you are looking for does not exist.</p>
+            <h1 className="mb-2 font-mono text-5xl font-bold tracking-tighter">404 Not Found</h1>
+            <p className="mb-4 text-white/75">The page you are looking for does not exist.</p>
             <Link href="/">
                 <Button variant="filled">
-                    <IconArrowBackUp size={16} className='-mt-0.5 text-gray-400'/>
-                    Go back home
+                    <IconArrowBackUp size={16} className="-mt-0.5 text-white/50"/>
+                    Go back
                 </Button>
             </Link>
         </div>

src/components/DeploymentImage.tsx

@@ -41,7 +41,7 @@ export function DeploymentImage({ color, icon, text }: DeploymentImageProps) {
     const Icon = icons[icon]
 
     return (
-        <div className="relative overflow-hidden rounded-[1.2rem] border border-white/8 bg-primary/40">
+        <div className="relative overflow-hidden rounded-2xl border border-white/8 bg-primary/40">
             <div
                 className={cn("absolute inset-x-[6%] -top-1/2 h-full rounded-full", accent.glow)}
                 aria-hidden="true"
@@ -100,7 +100,7 @@ export function DeploymentImage({ color, icon, text }: DeploymentImageProps) {
                     />
                 </svg>
                 <div className="relative flex h-full items-center justify-center">
-                    <div className="relative size-24 overflow-hidden flex items-center justify-center rounded-2xl border border-white/10 bg-linear-to-br from-[#0f0b27] to-[#252342] shadow-[0_14px_40px_rgba(0,0,0,0.28)]">
+                    <div className="relative flex size-24 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-linear-to-br from-secondary to-primary shadow-[0_14px_40px_rgba(0,0,0,0.28)]">
                         <Icon
                             aria-hidden="true"
                             stroke={2}

src/components/JobsPageClient.tsx

@@ -143,7 +143,7 @@ export function JobsPageClient({ jobs, locale, content }: JobsPageClientProps) {
             {Object.entries(groupedJobs).map(([category, items]) => (
                 <div key={category} className="flex flex-col gap-4">
                     <div className="flex items-center gap-2 w-full">
-                        <h2 className="text-md text-white/30">{category}</h2>
+                        <h2 className="text-white/50">{category}</h2>
                         <div className="h-0.5 flex-1 bg-white/10 rounded-full" />
                     </div>
                     {items.map((job) => (

src/components/SubscriptionConfigurator.tsx

@@ -213,7 +213,7 @@ function FeatureRow({ icon, title, description }: { icon: ReactNode, title: stri
                 </div>
                 <p className="text-base font-semibold tracking-wider text-white">{title}</p>
             </div>
-            <p className="text-sm text-white/68">{description}</p>
+            <p className="text-sm text-white/70">{description}</p>
         </div>
     )
 }

src/components/animations/RoleSystemAnimation.tsx

@@ -50,7 +50,7 @@ export function RoleSystemAnimation({ roles }: RoleSystemAnimationProps) {
             className="w-full p-3.5! shadow-md sm:p-4 md:p-5"
         >
             <p className="text-sm text-white/75 sm:text-sm">{role.name}</p>
-            <div className="mt-1 flex flex-wrap items-center gap-1 text-[10px] leading-4.5 text-white/60 sm:gap-1.5 sm:text-[11px] sm:leading-5">
+            <div className="mt-1 flex flex-wrap items-center gap-1 text-[10px] leading-5 text-white/60 sm:gap-1.5 sm:text-[11px] sm:leading-5">
                 <span>{role.description}</span>
                 {role.badges.map((badge) => (
                     <StableBadge

src/components/blog/TableOfContents.tsx

@@ -230,7 +230,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
             <AnimatePresence initial={false}>
                 {showMobileToc && (
                     <motion.div
-                        className="lg:hidden fixed left-0 right-0 top-18 z-60 px-[20%]"
+                        className="fixed left-0 right-0 top-18 z-50 px-4 lg:hidden md:px-[20%]"
                         initial={{ opacity: 0, y: -10 }}
                         animate={{ opacity: 1, y: 0 }}
                         exit={{ opacity: 0, y: -10 }}

src/components/cards/FeatureCard.tsx

@@ -53,7 +53,7 @@ export function FeatureCard({
     return (
         <div
             className={cn(
-                "glass-card-shell group h-full rounded-[1.6rem] shadow-[0_14px_42px_rgba(0,0,0,0.3)]! translate-y-8 opacity-0 transition-[transform,opacity] duration-700 ease-out group-data-[in-view=true]/section:translate-y-0 group-data-[in-view=true]/section:opacity-100 before:pointer-events-none before:absolute before:inset-1px before:rounded-[calc(1.6rem-1px)] before:border before:border-white/6 before:content-['']",
+                "glass-card-shell group h-full rounded-3xl shadow-[0_14px_42px_rgba(0,0,0,0.3)]! translate-y-8 opacity-0 transition-[transform,opacity] duration-700 ease-out group-data-[in-view=true]/section:translate-y-0 group-data-[in-view=true]/section:opacity-100 before:pointer-events-none before:absolute before:inset-1px before:rounded-[calc(1.5rem-1px)] before:border before:border-white/6 before:content-['']",
                 className,
             )}
             style={{ transitionDelay: `${animationDelay}ms` }}

src/components/cards/SwipeCard.tsx

@@ -24,7 +24,7 @@ export function SwipeCard({ title, description, image, link, className }: SwipeC
     return (
         <div
             className={cn(
-                "glass-card-shell group relative flex flex-col rounded-3xl transition-all duration-500 ease-out before:pointer-events-none before:absolute before:inset-1px before:rounded-[calc(1.6rem-1px)] before:border before:border-white/6 before:content-['']",
+                "glass-card-shell group relative flex flex-col rounded-3xl transition-all duration-500 ease-out before:pointer-events-none before:absolute before:inset-1px before:rounded-[calc(1.5rem-1px)] before:border before:border-white/6 before:content-['']",
                 className
             )}
         >