Current state with latest updates

This commit is contained in:
2026-08-23 13:28:34 +02:00
parent 5af95f6533
commit f52879edbb
74 changed files with 5174 additions and 960 deletions
+16 -16
View File
@@ -628,7 +628,7 @@ function PromptFilledExampleCard({ example, analytics, contentId, index }) {
</div>
) : null}
{example?.prompt ? <pre className="mt-5 whitespace-pre-wrap rounded-[24px] border border-white/10 bg-slate-950/80 p-4 text-sm leading-7 text-slate-100">{example.prompt}</pre> : null}
{example?.prompt ? <pre className="mt-5 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[24px] border border-white/10 bg-slate-950/80 p-4 text-sm leading-7 text-slate-100 [overflow-wrap:anywhere]">{example.prompt}</pre> : null}
{example?.negative_prompt ? (
<div className="mt-4 rounded-[24px] border border-white/10 bg-slate-950/60 p-4">
@@ -803,7 +803,7 @@ function PromptHelperPromptCard({ helperPrompt, analytics, contentId }) {
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">Prompt text</p>
<PromptCopyButton prompt={helperPrompt.prompt} label="Copy helper prompt" analytics={analytics} contentId={contentId} eventType="academy_prompt_helper_copy" metadata={{ copy_type: 'helper_prompt', helper_prompt_title: helperPrompt.title || '', source: 'prompt_helper' }} />
</div>
<pre className="mt-4 whitespace-pre-wrap rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-100">{helperPrompt.prompt}</pre>
<pre className="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-100 [overflow-wrap:anywhere]">{helperPrompt.prompt}</pre>
</div>
</details>
)
@@ -839,7 +839,7 @@ function PromptVariantCard({ variant, analytics, contentId }) {
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">Variant prompt</p>
<PromptCopyButton prompt={variant.prompt} label="Copy variant" analytics={analytics} contentId={contentId} eventType="academy_prompt_variant_copy" metadata={{ copy_type: 'prompt_variant', variant_title: variant.title || '', source: 'prompt_variant' }} />
</div>
<pre className="mt-4 whitespace-pre-wrap rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-100">{variant.prompt}</pre>
<pre className="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-100 [overflow-wrap:anywhere]">{variant.prompt}</pre>
</div>
{variant.negative_prompt ? (
@@ -848,7 +848,7 @@ function PromptVariantCard({ variant, analytics, contentId }) {
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">Negative prompt</p>
<PromptCopyButton prompt={variant.negative_prompt} label="Copy negative" analytics={analytics} contentId={contentId} eventType="academy_prompt_variant_negative_copy" metadata={{ copy_type: 'prompt_variant_negative', variant_title: variant.title || '', source: 'prompt_variant' }} />
</div>
<pre className="mt-4 whitespace-pre-wrap rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-200">{variant.negative_prompt}</pre>
<pre className="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-200 [overflow-wrap:anywhere]">{variant.negative_prompt}</pre>
</div>
) : null}
@@ -1082,7 +1082,7 @@ function AiComparisonSection({ block }) {
</div>
<PromptCopyButton prompt={payload.prompt} />
</div>
<pre className="mt-4 whitespace-pre-wrap rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-100">{payload.prompt}</pre>
<pre className="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-100 [overflow-wrap:anywhere]">{payload.prompt}</pre>
{hasNegativePrompt ? (
<div className="mt-4 rounded-[22px] border border-white/10 bg-white/[0.03] p-4">
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">Negative prompt</p>
@@ -1735,7 +1735,7 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(59,130,246,0.14),_transparent_26%),linear-gradient(180deg,_#0b1220_0%,_#111827_46%,_#0f172a_100%)] px-4 py-8 sm:px-6 lg:px-8">
<SeoHead seo={seo || {}} title={item?.title} description={item?.excerpt || item?.description} />
<div className="mx-auto max-w-[1320px] space-y-6">
<div className="mx-auto min-w-0 max-w-[1320px] space-y-6">
{flash.success ? <div className="rounded-2xl border border-emerald-300/20 bg-emerald-300/10 px-4 py-3 text-sm text-emerald-100">{flash.success}</div> : null}
{flash.error ? <div className="rounded-2xl border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-100">{flash.error}</div> : null}
@@ -2017,13 +2017,13 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
</div>
</div>
) : pageType === 'prompt' ? (
<div className="space-y-8">
<section className="relative overflow-hidden rounded-[40px] border border-rose-200/12 bg-[linear-gradient(150deg,rgba(244,63,94,0.14),rgba(15,23,42,0.96)_36%,rgba(45,212,191,0.14))] shadow-[0_24px_90px_rgba(15,23,42,0.34)]">
<div className="min-w-0 max-w-full space-y-8 overflow-x-clip">
<section className="relative w-full min-w-0 max-w-full overflow-hidden rounded-[40px] border border-rose-200/12 bg-[linear-gradient(150deg,rgba(244,63,94,0.14),rgba(15,23,42,0.96)_36%,rgba(45,212,191,0.14))] shadow-[0_24px_90px_rgba(15,23,42,0.34)]">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_18%_14%,rgba(251,113,133,0.15),transparent_24%),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(180deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[length:auto,24px_24px,24px_24px] opacity-75" />
<div className="absolute -left-8 top-10 h-36 w-36 rounded-full bg-rose-300/16 blur-3xl" />
<div className="absolute -right-10 bottom-0 h-40 w-40 rounded-full bg-cyan-300/14 blur-3xl" />
<div className="relative grid gap-6 p-5 md:p-6 lg:grid-cols-[minmax(0,1fr)_minmax(320px,0.72fr)] lg:p-7">
<div className="relative grid min-w-0 grid-cols-1 gap-6 p-5 md:p-6 lg:grid-cols-[minmax(0,1fr)_minmax(320px,0.72fr)] lg:p-7">
<div className="min-w-0">
{academyBreadcrumbs.length ? (
<div className="mb-5">
@@ -2092,7 +2092,7 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
</div>
<div className="grid gap-4 lg:pt-2">
<div className="grid min-w-0 w-full gap-4 lg:pt-2">
<div className="flex h-full flex-col rounded-[30px] border border-white/10 bg-black/20 p-4 shadow-[0_18px_42px_rgba(2,6,23,0.18)] backdrop-blur-sm md:p-5">
<div className="flex items-center justify-between gap-3">
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-rose-100/80">Preview artwork</p>
@@ -2102,7 +2102,7 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
<button
type="button"
onClick={openPromptPreviewImage}
className="group mt-4 flex min-h-[420px] flex-1 flex-col overflow-hidden rounded-[28px] border border-white/10 bg-black/30 text-left shadow-[0_24px_80px_rgba(2,6,23,0.26)] transition hover:border-sky-300/25 focus:outline-none focus:ring-2 focus:ring-sky-300/35 lg:min-h-[640px]"
className="group mt-4 flex min-h-[420px] w-full min-w-0 flex-1 flex-col overflow-hidden rounded-[28px] border border-white/10 bg-black/30 text-left shadow-[0_24px_80px_rgba(2,6,23,0.26)] transition hover:border-sky-300/25 focus:outline-none focus:ring-2 focus:ring-sky-300/35 lg:min-h-[640px]"
disabled={!promptPreviewImage}
aria-label={promptPreviewImage ? `Open preview image for ${item.title}` : 'Preview image unavailable'}
>
@@ -2135,8 +2135,8 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
</div>
</section>
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_360px]">
<div className="space-y-8">
<div className="grid min-w-0 grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_360px]">
<div className="min-w-0 space-y-8">
{!promptHasFullAccess && (promptPreviewImage || promptPublicExamples.length) ? (
<section className="academy-public-examples rounded-[32px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.045),rgba(148,163,184,0.03))] p-6 text-slate-200 shadow-[0_24px_70px_rgba(2,6,23,0.2)] md:p-8">
<div className="flex flex-wrap items-end justify-between gap-4">
@@ -2228,7 +2228,7 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
/>
) : null}
</div>
<pre className="mt-4 whitespace-pre-wrap rounded-[24px] border border-white/10 bg-slate-950/80 p-4 text-sm leading-7 text-slate-100 md:p-5">{promptBody || 'Prompt text is not available yet.'}</pre>
<pre className="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[24px] border border-white/10 bg-slate-950/80 p-4 text-sm leading-7 text-slate-100 [overflow-wrap:anywhere] md:p-5">{promptBody || 'Prompt text is not available yet.'}</pre>
{!promptHasFullAccess ? (
<div className="mt-4 rounded-[24px] border border-amber-300/20 bg-amber-300/10 p-4 text-amber-50">
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-amber-100/80">{promptUnlockTitle || 'Unlock the full prompt'}</p>
@@ -2251,7 +2251,7 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
metadata={{ copy_type: 'negative_prompt', source: 'prompt_body' }}
/>
</div>
<pre className="mt-4 whitespace-pre-wrap rounded-[24px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-200 md:p-5">{item.negative_prompt}</pre>
<pre className="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[24px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-200 [overflow-wrap:anywhere] md:p-5">{item.negative_prompt}</pre>
</div>
) : null}
</div>
@@ -2401,7 +2401,7 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
) : null}
</div>
<aside className="space-y-6 lg:sticky lg:top-6 lg:self-start">
<aside className="min-w-0 space-y-6 lg:sticky lg:top-6 lg:self-start">
{lessonTags.length ? (
<section className="rounded-[32px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(15,23,42,0.84))] p-6 text-slate-200 shadow-[0_18px_50px_rgba(2,6,23,0.18)]">
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-400">Microtags</p>