Skip to content

[codex] polish hero loading and footer layout#81

Merged
ilyar merged 2 commits into
mainfrom
codex/hero-load-footer-polish
Jun 25, 2026
Merged

[codex] polish hero loading and footer layout#81
ilyar merged 2 commits into
mainfrom
codex/hero-load-footer-polish

Conversation

@Glazlk

@Glazlk Glazlk commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Rework the hero right-side visual into animated glass fact cards with smoother hover and shimmer behavior.
  • Add a JS preboot state, page fade-in, deferred section loading, and skeletons to prevent unstyled first paint.
  • Remove the header contact link, tune card sizing/spacing, and fix the empty scroll area below the footer by clipping the fixed background layer.
  • Update DESIGN.md with the current Ever Guild visual contract and implementation rules.
  • Update visual acceptance baselines for the approved landing changes.

Validation

  • npm run lint
  • npm run acceptance:test � 31 passed
  • npm run lighthouse

@ilyar ilyar marked this pull request as ready for review June 25, 2026 18:02

@ilyar ilyar left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed the PR diff, GitHub checks, local quality gate, and desktop/mobile runtime behavior. No blocking issues found.

@ilyar ilyar merged commit c5a80c0 into main Jun 25, 2026
4 checks passed
@ilyar ilyar deleted the codex/hero-load-footer-polish branch June 25, 2026 18:07

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: f16102160e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread index.html
.preboot__fallback{max-width:760px;color:#f4efe2;line-height:1.6;}
.preboot__fallback a{color:#f1b800;}
.has-js .preboot__brand{display:inline-flex;}
.has-js .preboot__fallback{display:none;}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Keep the fallback visible until the app mounts

When JavaScript is enabled but /src/main.tsx is slow, blocked, or fails to load, this rule hides the only real fallback content while the replacement brand is aria-hidden, leaving crawlers, URL scanners, and assistive tech with an effectively empty page; if the module never runs, visitors are stuck on a decorative loader instead of the static Ever Guild content. Hide the fallback only once React has mounted or keep it accessible during preboot.

Useful? React with 👍 / 👎.

Comment thread src/App.tsx
Comment on lines +65 to +69
<Suspense fallback={<DeferredSectionsFallback />}>
<Team />
<Services />
<Contact />
</Suspense>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Preserve anchors while deferred sections load

When the Team/Services chunks are still loading, this Suspense fallback renders no #team or #services elements, so clicking the fixed navbar links during that window only updates the hash and the browser has no target to scroll to; after the lazy section mounts, native fragment scrolling is not retried. Keep lightweight anchor shells with these ids outside the Suspense boundary, or explicitly handle the pending hash after the sections load.

Useful? React with 👍 / 👎.

Comment on lines +21 to +22
grid-template-columns: minmax(0, 40rem) minmax(28rem, 1fr);
gap: clamp(1.5rem, 4vw, 5rem);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Stack hero facts before the field is wide enough

At common narrow-desktop widths such as 1024–1366px, this two-column layout leaves the signal field around 28–32rem wide while each absolute fact card has a 16.4rem minimum width and the first two cards are positioned at left: 8% and right: 4%; their horizontal ranges overlap, and their top offsets also overlap vertically. The stacked tablet rules only start below 1024px, so those viewports render colliding hero fact cards instead of the intended glass-card layout.

Useful? React with 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants