Consolidated UI Improvements and Homepage Restructure by google-labs-jules[bot] · Pull Request #2497 · arii/tech-dancer

google-labs-jules · 2026-06-18T00:27:29Z

This PR consolidates multiple UI tasks to improve the landing page, merch page, and overall site functionality.

Key changes:

Homepage Restructure: Replaced the oversized hero image and sidebar with a modern split-hero layout featuring equal weight for the DevAI portfolio and BoomTick brand. Tagline updated to "Code by day. Dance by night."
Merch Page Enhancements: Added a sticky filter bar for better navigation, grouped products into collection sections with headers, and implemented a "Bundle" badge system for multi-item sets.
Metadata & System Improvements: Standardized metadata across content cards and research project cards. Added category badges, reading time indicators, and technical complexity metrics.
UI Polish & Accessibility:
- Increased CTA tap targets to min 44px in DevLabCallout.
- Added a reading progress indicator to article pages.
- Implemented subtle fade transitions between pages.
- Standardized card hover effects (translateY, shadow, glow).
- Added skeleton states for search results.
Data & Policy:
- Updated sorting logic to prevent future-dated posts from appearing in "Latest" feeds.
- Extended the product data model to support collections and bundles.
- Updated AGENTS.md with strict policies for affiliate compliance, SEO, and URL stability.

All changes follow the repository's design system and layout primitives.

PR created automatically by Jules for task 8678555418170047605 started by @arii

- Restructured homepage with a new SplitHeroGrid (DevAIPanel and BoomTickPanel) and HeroBanner. - Updated Merch page with sticky filter bar, collection grouping, and bundle badges. - Enhanced ContentCard and Research metadata display (category badges, reading time, complexity, tech count). - Improved search placement and quick navigation in Hero. - Implemented UI polish: hover animations, reading progress indicator, and page transitions. - Fixed data issues: filtered future-dated posts and extended merch data model. - Updated AGENTS.md with affiliate, SEO, and URL stability policies. - Resolved UI anti-patterns by replacing hardcoded colors/sizes with design tokens.

google-labs-jules · 2026-06-18T00:27:30Z

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

github-actions · 2026-06-18T00:30:20Z

🚀 Impact Analysis Details (Last updated: Jun 18, 2026, 11:54 AM PST)

✅ Impact Analysis Complete

Commit SHA: 09895e8
Link to artifacts

Deployment Review

Summary

Impact Level: HIGH

📝 Changed Files (20)

AGENTS.md
src/components/editorial/EditorialLayout.tsx
src/components/products/ProductCard.tsx
src/components/ui/BaseCard.tsx
src/components/ui/ContentCard.tsx
src/components/ui/FolioGrid.tsx
src/components/ui/HeroBanner.tsx
src/components/ui/HeroSection.tsx
src/data/merch.ts
src/data/products/catalog.ts
src/features/home/BoomTickPanel.tsx
src/features/home/DevAIPanel.tsx
src/features/home/DevLabCallout.tsx
src/features/home/FeaturedGuidePanel.tsx
src/features/home/SplitHeroGrid.tsx
src/index.css
src/layouts/MainLayout.tsx
src/lib/content.ts
src/pages/Home.tsx
src/pages/Merch.tsx

Routes Reviewed

/ (Visual Diff: 16.34%)

Severity: HIGH
Review Required: Yes

DOM Changes:

Removed nodes: 52
Removed images: 1
Added links: 5

Artifacts:

Before screenshot: artifacts/visual-review/home/before.png
After screenshot: artifacts/visual-review/home/after.png
Visual diff: artifacts/visual-review/home/diff.png
Before (cropped): artifacts/visual-review/home/cropped/before.png
After (cropped): artifacts/visual-review/home/cropped/after.png
Visual diff (cropped): artifacts/visual-review/home/cropped/diff.png
DOM diff: artifacts/dom-review/home/diff.txt

/about (Visual Diff: 0.02%)

Severity: LOW
Review Required: No

DOM Changes:
None

Artifacts:

Before screenshot: artifacts/visual-review/about/before.png
After screenshot: artifacts/visual-review/about/after.png
Visual diff: artifacts/visual-review/about/diff.png
Before (cropped): artifacts/visual-review/about/cropped/before.png
After (cropped): artifacts/visual-review/about/cropped/after.png
Visual diff (cropped): artifacts/visual-review/about/cropped/diff.png
DOM diff: artifacts/dom-review/about/diff.txt

/blog (Visual Diff: 18.18%)

Severity: HIGH
Review Required: Yes

DOM Changes:

Added nodes: 3

Artifacts:

Before screenshot: artifacts/visual-review/blog/before.png
After screenshot: artifacts/visual-review/blog/after.png
Visual diff: artifacts/visual-review/blog/diff.png
Before (cropped): artifacts/visual-review/blog/cropped/before.png
After (cropped): artifacts/visual-review/blog/cropped/after.png
Visual diff (cropped): artifacts/visual-review/blog/cropped/diff.png
DOM diff: artifacts/dom-review/blog/diff.txt

/merch (Visual Diff: 4.24%)

Severity: MEDIUM
Review Required: Yes

DOM Changes:

Added nodes: 19

Artifacts:

Before screenshot: artifacts/visual-review/merch/before.png
After screenshot: artifacts/visual-review/merch/after.png
Visual diff: artifacts/visual-review/merch/diff.png
Before (cropped): artifacts/visual-review/merch/cropped/before.png
After (cropped): artifacts/visual-review/merch/cropped/after.png
Visual diff (cropped): artifacts/visual-review/merch/cropped/diff.png
DOM diff: artifacts/dom-review/merch/diff.txt

/research (Visual Diff: 0.02%)

Severity: LOW
Review Required: No

DOM Changes:
None

Artifacts:

Before screenshot: artifacts/visual-review/research/before.png
After screenshot: artifacts/visual-review/research/after.png
Visual diff: artifacts/visual-review/research/diff.png
Before (cropped): artifacts/visual-review/research/cropped/before.png
After (cropped): artifacts/visual-review/research/cropped/after.png
Visual diff (cropped): artifacts/visual-review/research/cropped/diff.png
DOM diff: artifacts/dom-review/research/diff.txt

- Restructured homepage with a new SplitHeroGrid (DevAIPanel and BoomTickPanel) and HeroBanner. - Updated Merch page with sticky filter bar, collection grouping, and bundle badges. - Enhanced ContentCard and Research metadata display (category badges, reading time, complexity, tech count). - Improved search placement and quick navigation in Hero. - Implemented UI polish: hover animations, reading progress indicator, and page transitions. - Fixed data issues: filtered future-dated posts and extended merch data model. - Updated AGENTS.md with affiliate, SEO, and URL stability policies. - Resolved UI anti-patterns by replacing hardcoded colors/sizes with design tokens.

github-actions · 2026-06-18T00:42:07Z

🚀 Deployment Details (Last updated: Jun 18, 2026, 6:41 PM PST)

🚀 Pushed to gh-pages; publish in progress

Preview URL: https://arii.github.io/tech-dancer/feat/consolidated-ui-updates-8678555418170047605/
Preview Dashboard: https://arii.github.io/tech-dancer/previews/index.html
Commit SHA: 29ff28a
Marker File: verify here

arii · 2026-06-18T03:47:07Z

/ai-review

- Restructured homepage with a new SplitHeroGrid (DevAIPanel and BoomTickPanel) and HeroBanner. - Updated Merch page with sticky filter bar, collection grouping, and bundle badges. - Enhanced ContentCard and Research metadata display (category badges, reading time, complexity, tech count). - Improved search placement and quick navigation in Hero. - Implemented UI polish: hover animations, reading progress indicator, and page transitions. - Fixed data issues: filtered future-dated posts and extended merch data model. - Updated AGENTS.md with affiliate, SEO, and URL stability policies. - Resolved UI anti-patterns by replacing hardcoded colors/sizes with design tokens.

- Restructured homepage with SplitHeroGrid and HeroBanner. - Enhanced Merch page with sticky filters and collection grouping. - Standardized metadata and badges on ContentCard and Research cards. - Implemented UI polish: page transitions, reading progress, and hover lifts. - Fixed future-dated post sorting in lib/content.ts. - Updated AGENTS.md with compliance and stability policies. - Resolved audit anti-patterns by removing hardcoded colors and inline styles.

arii

ANTI-AI-SLOP\n\n\n## FINDINGS\n
\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

:1:

arii

ANTI-AI-SLOP\n\n\n## FINDINGS\n
\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

:1:

arii

ANTI-AI-SLOP\n\n\n## FINDINGS\n
\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

:1:

arii

ANTI-AI-SLOP\n\n\n## FINDINGS\n
\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

:1:

arii

ANTI-AI-SLOP\n\n\n## FINDINGS\n
\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

:1:

arii · 2026-06-18T16:31:25Z

Automated Agent Review

✅ UI Modifications: Your UI component updates look clean. Please ensure you verify the responsive layout on mobile viewports (down to 375px width) to ensure no horizontal scrolling or overflow occurs.

This is an automated review generated by Jules.

arii

ANTI-AI-SLOP\n\n\n## FINDINGS\n
\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

:1:

arii

ANTI-AI-SLOP\n\n\n## FINDINGS\n
\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

:1:

arii · 2026-06-18T16:57:53Z

🔍 PR #2497 Feedback — Consolidated UI Improvements and Homepage Restructure

CI Status

✅ All checks passed.

Code Audit Findings

No violations found.

Impact Analysis

Impact: No UI Files Touched.

Next Steps

All checks passed — ready to merge

arii

ANTI-AI-SLOP\n\n\n## FINDINGS\n
\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

:1:

- Standardized DevLabCallout tap targets to 44px for accessibility. - Optimized HeroSection and FeaturedGuidePanel for better desktop layout and policy compliance. - Restructured homepage into a split-hero layout with DevAIPanel and BoomTickPanel. - Enhanced the Merch page with sticky filters, collection grouping, and bundle badges. - Standardized metadata (uppercase badges, date/reading-time) across content cards. - Implemented UI polish: page fade transitions, reading progress bar, and enhanced card hover effects. - Fixed content data issues by filtering future-dated blog posts. - Updated AGENTS.md with comprehensive SEO, affiliate, and URL stability policies. - Verified changes with Playwright on mobile (375px) and desktop (1440px) viewports.

arii

ANTI-AI-SLOP\n\n\n## FINDINGS\n
\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

:1:

arii

ANTI-AI-SLOP\n\n\n## FINDINGS\n
\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

:1:

arii

⚠️ BLOCKING CI FAILURE: Approval overridden to COMMENT because the following checks are failing: Oxlint Scan, Deployment Impact Analysis, Lint & Type Check, Anti-Pattern Audit, Deployment Impact Analysis, Anti-Pattern Audit, Lint & Type Check. Please resolve CI issues before approval.

AUTO-AUDIT

FINAL RECOMMENDATION

Approved

arii

⚠️ BLOCKING CI FAILURE: Approval overridden to COMMENT because the following checks are failing: Oxlint Scan, Deployment Impact Analysis, Lint & Type Check, Anti-Pattern Audit, Deployment Impact Analysis, Anti-Pattern Audit, Lint & Type Check. Please resolve CI issues before approval.

AUTO-AUDIT

FINAL RECOMMENDATION

Approved

arii

⚠️ BLOCKING CI FAILURE: Approval overridden to COMMENT because the following checks are failing: Oxlint Scan, Deployment Impact Analysis, Lint & Type Check, Anti-Pattern Audit, Deployment Impact Analysis, Anti-Pattern Audit, Lint & Type Check. Please resolve CI issues before approval.

AUTO-AUDIT

FINAL RECOMMENDATION

Approved

arii

⚠️ BLOCKING CI FAILURE: Approval overridden to COMMENT because the following checks are failing: Oxlint Scan, Deployment Impact Analysis, Lint & Type Check, Anti-Pattern Audit, Deployment Impact Analysis, Anti-Pattern Audit, Lint & Type Check. Please resolve CI issues before approval.

AUTO-AUDIT

FINAL RECOMMENDATION

Approved

…7605

github-actions · 2026-06-18T18:55:51Z

🐙 GitHub Models Code Review

Powered by GitHub Models

Reviewing: PR #2497

Code Review Feedback

High Severity Review

Below are the blocking/high-severity issues found in the provided diff, with evidence and actionable feedback:

1. Incorrect Type Usage: `isBundle` and `bundleNote` on ProductCard

Evidence:

In src/components/products/ProductCard.tsx, lines such as:

{item.isBundle && (
  ...
)}
{item.bundleNote && (
  ...
)}

The ProductCard component receives item: ProductCatalogItem.
In src/data/products/catalog.ts, the ProductCatalogItem interface is updated to include isBundle?: boolean; and bundleNote?: string;.
However, in src/data/merch.ts, the MerchProduct interface is also updated with these fields, but the actual MERCH_PRODUCTS array does not provide isBundle or bundleNote for any product.

Why this is blocking:

If ProductCard is used with a MerchProduct (which is possible, as the codebase seems to use both for merch), and the data does not provide isBundle or bundleNote, the code will not error (since the fields are optional), but the new UI elements will never render.
More importantly, if any code expects these fields to be present (e.g., for filtering, grouping, or badges elsewhere), but the data is not updated, this is a regression in feature completeness: the UI expects a "Bundle" badge, but no product will ever show it.

Actionable Feedback:

Update the MERCH_PRODUCTS and any other product data sources to actually include isBundle and bundleNote for relevant products.
If this is not intentional, remove the UI logic for these fields.
If the intention is to support bundles, add at least one product with isBundle: true and a bundleNote to verify the UI.

2. Incorrect Usage of `uppercase` Prop on `<Text>`

Evidence:

In multiple places (e.g., BoomTickPanel.tsx, DevAIPanel.tsx, ContentCard.tsx), you use:
```
<Text ... uppercase ...>
```
The Text component is imported from @/layouts/Primitives.
Unless the Text component is explicitly typed to accept an uppercase prop (which is not standard for most design systems), this will result in a TypeScript error: Property 'uppercase' does not exist on type ....

Why this is blocking:

This is a type error: the code will not compile if uppercase is not a valid prop.
Even if the code compiles (e.g., due to loose typing), the prop will be ignored, and the intended uppercase styling will not apply.

Actionable Feedback:

Replace uppercase prop with a className="uppercase" or ensure the Text component supports an uppercase prop.
Example:
```
<Text className="uppercase" ...>
```
Do this for all instances in the diff.

3. Incorrect Usage of `tracking="widest"` and `tracking="wide"` on `<Text>`

Evidence:

In multiple places, e.g.:
```
<Text ... tracking="widest" ...>
```
As with uppercase, unless the Text component supports a tracking prop, this is a type error.

Why this is blocking:

TypeScript will error if tracking is not a valid prop.
The intended letter-spacing will not be applied.

Actionable Feedback:

Replace tracking="widest" with className="tracking-widest" (or similar for tracking-wide).
Example:
```
<Text className="tracking-widest" ...>
```
Do this for all instances in the diff.

4. Incorrect Usage of `weight="font-black"` and `weight="font-bold"`

Evidence:

In multiple places, e.g.:
```
<Text ... weight="font-black" ...>
```
Most design systems use weight="black" or weight="bold", not font-black.

Why this is blocking:

If weight only accepts 'normal' | 'bold' | 'black' | ..., passing font-black will cause a type error.

Actionable Feedback:

Replace weight="font-black" with weight="black" and weight="font-bold" with weight="bold" (or as per your design system).

Generated by github-models-code-review

github-actions · 2026-06-18T18:56:24Z

🐙 GitHub Models Visual Review

Powered by GitHub Models Vision + Blast-Radius Analyzer

Summary: 🔴 2 high · 🟡 0 medium · 🟢 0 low
Reviewing: PR #2497

🔴 `/ (mobile)`

Pixel diff: 29.05%

Review Summary:

Pixel difference: 29.05% (HIGH)
DOM Text Diff: No diff available (must treat all visual changes as layout/UI only, not text-related)
Severity: HIGH

Evaluation

❌ BUG/REGRESSION

Major layout shifts in the hero section and throughout the page, with new elements and rearranged blocks.
Spacing and alignment issues: Several blocks (especially hero CTAs and portfolio cards) have inconsistent vertical spacing and alignment compared to BEFORE.
Contrast and button visibility: The new "Explore Research" and "Read Articles" buttons have questionable contrast against the background, potentially failing accessibility standards.
Clipping and overflow: Some text and icons in the "Explore by Topic" section appear clipped or misaligned, especially in the DIFF image.
Broken visual hierarchy: The new layout disrupts the previous clear separation between sections, making the page harder to scan.
Footer spacing: The footer is visually compressed and lacks breathing room compared to BEFORE.

Recommendations for Improvement

Fix vertical spacing: Add at least 8–12px more padding between hero CTAs and section cards to restore visual clarity and hierarchy.
Improve button contrast: Ensure all CTA buttons meet WCAG AA contrast ratios (minimum 4.5:1). Consider using a lighter background or bolder text color.
Resolve clipping issues: Review icon and text rendering in the "Explore by Topic" section; ensure all elements are fully visible and not cut off.
Restore section separation: Reinstate clear section dividers or increase margin between major blocks for easier navigation.
Footer padding: Add 12–16px padding above and below the footer content for improved readability and touch accessibility.

Action Required:
This PR introduces significant visual regressions and layout bugs. Address the above issues before merging.

🔴 `/blog`

Pixel diff: 18.18%

Review Summary:

❌ BUG/REGRESSION — No DOM text diff provided, but pixel diff is extremely high (18.18%, Severity: HIGH). This is not explainable by minor UI tweaks or intentional design changes alone.
Major layout shifts are visible:
- The filter bar and search input have swapped positions, causing a significant reflow.
- The grid/list toggle button has moved, and spacing around it has changed.
- Blog cards have shifted vertically, and their spacing appears inconsistent compared to BEFORE.
Contrast/Clipping Issues:
- No obvious contrast issues, but the pixel diff shows heavy changes in card images and text regions, suggesting possible clipping or rendering bugs.
Footer: The footer has shifted, and the copyright/version text appears to have changed.

Recommendations for Improvement:

Restore layout stability: Revert the filter/search bar order unless this was a deliberate UX change, and ensure consistent spacing between UI elements.
Grid/List Toggle: Maintain alignment and spacing with the filter/search bar for visual clarity.
Blog Card Spacing: Add 8–12px vertical padding between cards to prevent crowding and improve readability.
Footer: Ensure footer content and spacing remain consistent across releases.

Action Required:

Provide a DOM text diff and a clear explanation for the layout changes.
If intentional, update visual regression tests and documentation to reflect new layout.
If not intentional, revert changes and fix layout/spacing bugs.

Generated by impact-github-models-review — Blast-Radius Analyzer

…7605

arii

ANTI-AI-SLOP\n\n\n## FINDINGS\n
\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

:1:

arii

ANTI-AI-SLOP\n\n\n## FINDINGS\n
\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

:1:

arii

Automated Review for PR #2497

CI Status: Failing checks detected.

Failing Checks:

Lint & Type Check
Anti-Pattern Audit
Oxlint Scan
Deployment Impact Analysis

Recommendation: Please review the failing CI logs and apply fixes.

FINAL RECOMMENDATION

Not Approved

arii

Automated Review for PR #2497

CI Status: Failing checks detected.

Failing Checks:

Lint & Type Check
Anti-Pattern Audit
Oxlint Scan
Deployment Impact Analysis

Recommendation: Please review the failing CI logs and apply fixes.

FINAL RECOMMENDATION

Not Approved

arii

Comprehensive Review for PR #2497

CI Status: Failing checks detected.

Failing Checks:

Lint & Type Check
Anti-Pattern Audit
Oxlint Scan
Deployment Impact Analysis

Recommendation: Please review the failing CI logs and apply fixes before requesting another review.

FINAL RECOMMENDATION

Not Approved

google-labs-jules Bot mentioned this pull request Jun 18, 2026

Epic: Consolidate Ui Tasks #2488

Closed

10 tasks

google-labs-jules Bot added 2 commits June 18, 2026 03:54