Skip to content

fix(reports): wire up the CTA slide's scan-line/badge animation #5822

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rafavalls wants to merge 1 commit into
base: main
Choose a base branch
from
+43 −7
Open

fix(reports): wire up the CTA slide's scan-line/badge animation #5822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/web/src/i18n/en/reports.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,9 @@ export const reports = {
"reports.ctaTemplate.cadence.inReviewValue": "2",
"reports.ctaTemplate.cadence.title": "Delivery cadence",
"reports.ctaTemplate.cta.label": "See the full diagnostic",
"reports.ctaTemplate.finding.cls": "CLS · 0.18",
"reports.ctaTemplate.finding.lcp": "LCP · 4.2s",
"reports.ctaTemplate.finding.ogImage": "No OG image",
"reports.ctaTemplate.fixTask.altImages": "Add alt text to 18 images",
"reports.ctaTemplate.fixTask.canonical": "Add canonical to 12 pages",
"reports.ctaTemplate.fixTask.checkout": "Cut checkout down to 3 fields",
Expand Down
3 changes: 3 additions & 0 deletions apps/web/src/i18n/pt-br/reports.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@ export const reports = {
"reports.ctaTemplate.cadence.inReviewValue": "2",
"reports.ctaTemplate.cadence.title": "Ritmo de entrega",
"reports.ctaTemplate.cta.label": "Ver diagnóstico completo",
"reports.ctaTemplate.finding.cls": "CLS · 0,18",
"reports.ctaTemplate.finding.lcp": "LCP · 4,2s",
"reports.ctaTemplate.finding.ogImage": "Sem imagem OG",
"reports.ctaTemplate.fixTask.altImages": "Adicionar alt em 18 imagens",
"reports.ctaTemplate.fixTask.canonical": "Adicionar canonical em 12 páginas",
"reports.ctaTemplate.fixTask.checkout": "Reduzir checkout para 3 campos",
Expand Down
44 changes: 37 additions & 7 deletions apps/web/src/routes/reports/templates/cta-template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,7 +413,7 @@ export default function CtaTemplate({
const hasCoverage =
typeof checksProbed === "number" && typeof checksTotal === "number";
return (
<div className="h-full w-full sm:px-6 lg:px-10 sm:pb-2">
<div className="h-full w-full sm:px-6 lg:px-10">
<div
className="relative flex h-full w-full flex-col items-center gap-8 overflow-hidden rounded-none px-6 pb-0 pt-8 sm:rounded-3xl sm:px-8 sm:pt-10 lg:gap-10 lg:pt-14 [@media(max-height:780px)]:lg:gap-6 [@media(max-height:780px)]:lg:pt-10"
style={{ background: CARD }}
Expand Down Expand Up @@ -523,17 +523,47 @@ export default function CtaTemplate({
<TaskStream />
</div>

{/* center: the diagnostic report card */}
{/* center: the diagnostic report card, scanned by the lime sweep
line with finding badges popping in around it (gated on
[data-play] so it only runs while this slide is active) */}
<div
className="reveal relative z-20 shrink-0"
data-show={show}
data-play={show}
style={{ transitionDelay: active ? "380ms" : "0ms" }}
>
<ReportCard
domain={domain}
faviconUrl={faviconUrl}
initial={initial}
/>
<div className="relative overflow-hidden rounded-t-2xl">
<ReportCard
domain={domain}
faviconUrl={faviconUrl}
initial={initial}
/>
<div aria-hidden className="report-scan-line" />
</div>
<div
aria-hidden
className="report-badge report-badge-1 pointer-events-none"
style={{ top: "6%", left: "8%" }}
>
<span className="report-dot" style={{ background: "#ef4444" }} />
{t("reports.ctaTemplate.finding.lcp")}
</div>
<div
aria-hidden
className="report-badge report-badge-2 pointer-events-none"
style={{ top: "20%", right: "8%" }}
>
<span className="report-dot" style={{ background: "#f59e0b" }} />
{t("reports.ctaTemplate.finding.cls")}
</div>
<div
aria-hidden
className="report-badge report-badge-3 pointer-events-none"
style={{ top: "34%", left: "14%" }}
>
<span className="report-dot" style={{ background: "#a855f7" }} />
{t("reports.ctaTemplate.finding.ogImage")}
</div>
</div>

{/* right: delivery cadence card (behind, tilted) */}
Expand Down