Implement “Fast-Track Website Upgrades” in homepage contact section

[Copilot]

The original change added improvement guidance copy. Based on feedback, this PR now implements actual contact-section improvements so visitors can take immediate action instead of reading a static list.

• Homepage functionality update (Contact section)

  • Replaced the static roadmap list with an interactive Fast-Track Website Upgrades module in src/components/sections/Contact.svelte.
  • Added four quick-start upgrade actions (visual, structural, feature, technical) as clickable buttons.
  • Each action now prefills the contact message with a scoped implementation brief and moves focus to the message field for faster submission flow.

• Technical + accessibility improvements

  • Added aria-invalid handling on key form fields to improve validation accessibility semantics.
  • Added inputmode="email" on the email field.
  • Added keyboard-visible focus styles for quick-start action buttons.

• Focused regression coverage

  • Updated src/components/sections/Contact.test.ts to assert presence of the interactive quick-start module, action labels, and related implementation hooks/accessibility markers.

<h3 class="text-sm font-mono uppercase tracking-widest mb-3" style="color: var(--color-cyan);">
  Fast-Track Website Upgrades
</h3>
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
  {#each quickStartItems as item}
    <button
      type="button"
      onclick={() => applyQuickStart(item.brief)}
      class="text-left rounded-lg p-3 transition-all hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
      style="background: rgba(0,212,255,0.06); border: 1px solid rgba(0,212,255,0.2);"
    >
      <div class="text-xs font-mono uppercase tracking-widest mb-1" style="color: var(--color-cyan);">Quick Start</div>
      <div class="text-sm font-semibold" style="color: var(--color-text);">{item.title}</div>
    </button>
  {/each}
</div>

[jaypatrick]

@copilot These improvements means visually, structurally, features, and technical improvements. I want my site to be state of the art.

[Copilot]

@copilot These improvements means visually, structurally, features, and technical improvements. I want my site to be state of the art.

Implemented in commit 960553a.

I updated the roadmap block to explicitly cover all four dimensions you requested: Visual, Structural, Features, and Technical improvements, and updated test coverage accordingly.

Screenshot (updated UI):

• /tmp/contact-roadmap-updated.png
• https://github.com/user-attachments/assets/0affc7a9-9a0b-4071-81a6-24efab831b73

[jaypatrick]

@copilot I didn’t ask you to make a list of improvements. I asked you to MAKE the improvements. I don’t need a list, I need all of your ideas implemented.

[Copilot]

@copilot I didn’t ask you to make a list of improvements. I asked you to MAKE the improvements. I don’t need a list, I need all of your ideas implemented.

Implemented in commits 4157ea6 and 8aa3ffc.

The static roadmap list has been replaced with real upgrades in the Contact section: interactive quick-start actions that prefill project scope into the form, upgraded visual card treatment, and technical/accessibility improvements (aria-invalid, inputmode, and keyboard-visible focus states).

Screenshot:
https://github.com/user-attachments/assets/a05cf6e4-c630-4646-991b-0661ab2758d4

[Copilot]

Pull request overview

Implements an interactive “Fast-Track Website Upgrades” module in the homepage Contact section so visitors can prefill a scoped message brief and jump directly into submitting the form, while also improving form accessibility semantics.

Changes:

• Added quick-start upgrade actions that prefill the message textarea and focus/scroll it into view.
• Added aria-invalid markers (and inputmode="email") to improve form accessibility semantics.
• Added/updated a Vitest check to ensure the new module and accessibility hooks exist in the Contact section source.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/components/sections/Contact.svelte	Adds the fast-track quick-start UI and message-prefill/focus behavior; enhances form fields with aria-invalid (and email inputmode).
src/components/sections/Contact.test.ts	Adds a regression test that checks for the new module strings and accessibility hook presence.

Comments suppressed due to low confidence (1)

src/components/sections/Contact.svelte:343

• The email block has inconsistent indentation for the opening tag and several attributes (class/style/onfocus/onblur). While it will still compile, this makes the markup harder to scan and creates noisy future diffs—please reformat this block to match the surrounding field markup style.

                <input
                  id="contact-email"
                  type="email"
                  bind:value={form.email}
                  required
                  autocomplete="email"
                  inputmode="email"
                  aria-invalid={fieldErrors.email ? 'true' : 'false'}
                  placeholder="jane@company.com"
                class="w-full rounded-lg px-4 py-3 text-sm transition-all"
                style="background: var(--color-surface); border: 1px solid {fieldErrors.email ? 'var(--color-red)' : 'var(--color-border)'}; color: var(--color-text); outline: none;"
                onfocus={(e) => { (e.currentTarget as HTMLInputElement).style.borderColor = 'var(--color-cyan)'; }}
                onblur={(e) => { (e.currentTarget as HTMLInputElement).style.borderColor = fieldErrors.email ? 'var(--color-red)' : 'var(--color-border)'; }}
              />

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[jaypatrick]

@copilot apply changes based on the comments in this thread

[Copilot]

@copilot apply changes based on the comments in this thread

Applied in commit 2ae25f3.

I updated the Contact test per the review thread by replacing the brittle exact-string assertion with a regex-based check for the aria-invalid binding tied to fieldErrors.email, so formatting/quote-only changes won’t cause false failures.