mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

chore(blog): improve image quality and fix list item alignment; fix(hero): refactor title rendering to resolve console error; bump version to 2.0.3
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 8s
Details
Build & Deploy / 🏗️ Build (push) Has been cancelled
Details
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Details
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled
Details
Build & Deploy / 🔔 Notify (push) Has been cancelled
Details
Build & Deploy / 🧪 QA (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-03-01 11:17:30 +01:00
parent ec227d614f
commit 4adf547265
5 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/home/Hero.tsx
View File

@@ -23,19 +23,27 @@ export default function Hero({ data }: { data?: any }) {
className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
>
{data?.title ? (
<span
dangerouslySetInnerHTML={{
__html: data.title
.replace(
/<green>/g,
'<span class="relative inline-block"><span class="relative z-10 text-accent italic inline-block">',
)
.replace(
/<\/green>/g,
'</span><div class="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both" style="animation-delay: 500ms;"><Scribble variant="circle" /></div></span>',
),
}}
/>
<>
{data.title.split(/(<green>.*?<\/green>)/g).map((part: string, i: number) => {
if (part.startsWith('<green>') && part.endsWith('</green>')) {
const content = part.replace(/<\/?green>/g, '');
return (
<span key={i} className="relative inline-block">
<span className="relative z-10 text-accent italic inline-block">
{content}
</span>
<div
className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both"
style={{ animationDelay: '500ms' }}
>
<Scribble variant="circle" />
</div>
</span>
);
}
return <span key={i}>{part}</span>;
})}
</>
) : (
t.rich('title', {
green: (chunks) => (