chore: visual rework

[hmbanan666]

Summary by CodeRabbit

• New Features

  • Click-to-play hero video with controls and autoplay.
  • New “orange” button color variant applied to the Register action.

• Style

  • Improved contrast in countdown items (background and text adjustments).
  • Updated speaker and section backgrounds to muted/elevated for consistency.
  • More compact, horizontal header layout with tighter spacing.
  • Visual refinements across the homepage sections.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds an “orange” button color variant to app config and applies related styling updates across webinar components. Refactors Header layout to horizontal. Introduces click-to-reveal video behavior in HeroVideo using a reactive toggle. Other components receive background/text token adjustments; no data or API changes.

Changes

Cohort / File(s)	Summary of changes
Theme config update apps/webinar/app/app.config.ts	Added ui.button.variants.color.orange with class string !bg-[#f57e20] hover:!bg-orange-500 !text-white disabled:!bg-inverted/25.
Styling token adjustments & orange usage apps/webinar/app/components/Countdown.vue, apps/webinar/app/components/CountdownTimerItem.vue, apps/webinar/app/components/SpeakerCard.vue, apps/webinar/app/pages/index.vue	Countdown: container bg-accented→bg-elevated; button color="orange" with ui.base override bg-[#f57e20] text-white. TimerItem: bg-default→bg-inverted, heading text-inverted, label text-muted→text-dimmed. SpeakerCard: placeholder bg-accented→bg-muted. Index: sections bg-accented→bg-muted.
Header layout tweak apps/webinar/app/components/Header.vue	Layout from vertical to horizontal (flex-col→flex-row), margin reduced (mt-10→mt-4, retains md:mt-10), gaps adjusted (gap-y-6→gap-2).
Hero video toggle behavior apps/webinar/app/components/HeroVideo.vue	Replaced static video with click-to-toggle UI: placeholder card with play icon and label; on click sets isVideoShown (ref) true to render video with controls/autoplay.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant HeroVideo as HeroVideo.vue
  participant DOM as DOM / UI
  participant Video as <video> Element

  User->>HeroVideo: Click placeholder card
  Note right of HeroVideo: isVideoShown = true
  HeroVideo->>DOM: Render <video controls autoplay>
  DOM->>Video: Mount and load
  Video-->>User: Playback starts (autoplay)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: webinar app #181 — Adds the same orange button variant in app.config and uses it in Countdown.vue, overlapping the UI config and component usage in this PR.

Poem

I nibble code like carrots bright,
An orange button takes its flight,
A header hops from tall to wide,
The video waits, then leaps inside—
With muted hues and dimmed delight,
This bunny signs: ship it tonight! 🥕✨

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch webinar-update

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5b45158 and bda49ae.

📒 Files selected for processing (7)

• apps/webinar/app/app.config.ts (1 hunks)
• apps/webinar/app/components/Countdown.vue (2 hunks)
• apps/webinar/app/components/CountdownTimerItem.vue (1 hunks)
• apps/webinar/app/components/Header.vue (1 hunks)
• apps/webinar/app/components/HeroVideo.vue (1 hunks)
• apps/webinar/app/components/SpeakerCard.vue (1 hunks)
• apps/webinar/app/pages/index.vue (2 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud