feat: Bose landing page - responsive product showcase with accessibility features#2746
Open
inklynx wants to merge 12 commits intomate-academy:masterfrom
Open
feat: Bose landing page - responsive product showcase with accessibility features#2746inklynx wants to merge 12 commits intomate-academy:masterfrom
inklynx wants to merge 12 commits intomate-academy:masterfrom
Conversation
* add initial project structure and assets * reorganize SCSS into 7-1 inspired structure * add initial HTML structure for hero section * add hamburger menu with a11y attributes * style: hero section & header structure & semantics * style: improve favicon scaling and color contrast * introduced full color palette in --vars (raw colors and semantic tokens) * defined base typography scale * normalized icon sizes and paths * added navigation menu structure and basic toggle logic * expanded --vars pallette (semantic tokens, nav-specific colors) * refactored layout structure: extracted header and button to separate files * improved import order in main.scss
…EO & A11y * added navigation menu panel (#main-menu) with toggle logic in main.js * improved three state hamburger icons with CSS visibility/opacity logic * fixed menu overlay animation symmetry (visibility + opacity transition coordination) * refined icon sizes: normalized header-phone.svg via SVG-viewBox and in Illustrator * expanded --vars system: added semantic spacing/transition vars, refactored letter spacing naming * adjusted header styles: removed fixed height, set transparent background * fixed phone icon visibility on menu open * added hover-only behavior for hamburger (@media hover) to avoid frozen state on touch devices refactor: migrate typography variables from $ in vars.scss to -- in root.scss * added focus trap logic to keep TAB navigation within the open menu * implemented ESC key to close the menu * add fluid-calc() + rem() utils + media mixin * media() mixin based on breakpoint map * semi-transparent header bg on hover/scroll (icon disappearance protection) * adding flow-line under menu links (subtle variety) * locator & ripple around close btn (X) * add grid to header (bad decision, I plan go back flex) * improved composition on breakpoints feat: implemented hero section with SEO optimization * added ToC + separators for readibility * script showing header bg after scroll (50px) * cursor locator around X (< 200px) * subtle ripple (a11y - when bg is transparent) * add light decorative intro icon animation * introduced @supports (backdrop-filter: blur()) to gracefully degrade when hardware acceleration is disabled * base overlay now uses solid color + opacity as default * restriction: blur applied only on tablet and larger viewports (mobile uses full-screen menu) * (hero-icon animation) added centralizd cleanup of setInterval timers to prevent memory leaks * added static circular background behind the close X in opened menu for better visibility * kept the ripple effect on desktop when cursor is nearby refactor: improve soundwave animation using Fisher-Yates shuffle and CSS properties * replaced previous logic with Fisher-Yates algorithm for better, more natural random distribution of animated bars * divided the animation roles into CSS custom properties and JavaScript * refined timing and easing for smoother, more premium visual effect * added overflow-y: auto for proper scrolling on long link lists * improved visual style of custom scrollbar and menu-list container * refactored multiple variables into one, clear variable * fixed font not loading in sidebar on browsers with different default fonts * used Sass interpolation (#{$var}) properly in @font-face declarations
…oyment * added type="module" to main script tag to resolve "JS not working on demo" issue * installed cross-env as dev dependency to fix cross-platform deployment scripts
inklynx
changed the title
feat: implementation of core landing page (hero, header, menu) with a11y & SEO focus
danon321
suggested changes
Apr 12, 2026
danon321
left a comment
danon321
left a comment
There was a problem hiding this comment.
Fajnie to wygląda, czekam na reszte strony :)
Taki moj prywatny komentarz: Widze ze menu troche inaczej zrobiłas na Desktopie. Tutaj z racji tego ze sie uczysz nie ma w tym problemu i fajnie ze wyszłas ze swoja inicjatywą.
Jeżeli jednak bedziesz robic juz strone dla prawdziwego klienta to powinna ona byc 1 do 1 jak w Figmie. Nie wprowadzamy tam swoich inwencji jako programisci.
Author
|
To MEGA cenna uwaga, bardzo mi się przyda na przyszłość (i super że dostałam ją już teraz). |
inklynx
changed the title
* 6-image gallery with data-layout attributes (square/rectangle) * CSS-only responsive breakpoints * lazy-loaded images with srcset for bandwidth optimization * GPU-accelerated hover: zoom + gradient shadow lift * prefers-reduced-motion fallback (static shadow) Fixes: * narrowed products section max-width for better visual balance * aligned product card text (flex-end + min-height safeguard) * corrected hero <picture> class name collision
* increase margin-bottom (clear section boundary) * button margin-top - grid gap (tight cluster with caption) * fixes orphaned button perception (Gestalt proximity principle)
Why Buy Direct: * Two-column layout (title + description) * Responsive: stacks on mobile, side-by-side on desktop Contact form: * semantic HTML with native validation (type="email", required) * two-column layout: inputs (left) + contact info (right) * optical alignment: info text margin matches input padding * dummy submit handler with loading states (Sending -> Sent!) * accessible: hidden labels, autocomplete, focus states Footer: * full-width image with aspect-ratio fallback * lazy-loaded with srcset for mobile/desktop variants Fixes: * increased spacing below Categories "View all" button * resolves visual orphaning between sections (Gestalt proximity)
natalia-klonowska
suggested changes
May 5, 2026
natalia-klonowska
left a comment
natalia-klonowska
left a comment
There was a problem hiding this comment.
w tych miejscach zapomniałaś ustawić odpowiedni font:
zmieniasz layout już przy szerokości 1024px co powoduje pewne problemy:
- sekcja nie jest poprawnie wycentrowana
- tekst jest zbyt ściśnięty w porównaniu z tym jak duże ma marginesy boczne. dodatkowo czasami ważne jest by trzymać się określonego układu tekstu bo na designie możesz zauważyć że tekst "Why buy direct from Bose" zawsze łamie linię w określonym miejscu
- tak samo zdjęcia wyglądają na zbyt wąskie. bardzo ważne jest aby trzymać odpowiednie proporcje aby zdjęcia nie wyglądały na poucinane albo zbyt przybliżone
Author
|
Dziękuję za szczegółowy feedback (w tym zrzuty ekranu, bardzo pomocne!). |
* replace max-width transition with fixed-width + translateX animation * add wrapper for overflow clipping (visual reveal effect) * remove margin-right mutation (Firefox stability) * use translateX(100% -> 0) for layout neutral slide Technical rationale: layout based animations (max-width, margin) trigger flexbox reflow every frame. Firefox renders each mutation explicitly, exposing visual judder. Solution: GPU-only properties (transform, opacity) - zero layout impact. Tested: Chrome, Brave, Forefox - smooth on all.
* optimize breakpoints to ensure fluid layout across intermediate widths * adjust custom pseudo-element shadows for product cards for better visual consistency * enforce explicit font-family on buttons to prevent unintended serif fallbacks * refactor section headers to ensure consistent line breaks across viewports
inklynx
changed the title
Author
|
Naprawiłam - można przejrzeć. Zmiany:
"Known issue":
|
* corrected body font size * reduced header padding on medium breakpoint for better proportions * decreased logo size
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Bose Landing Page - Complete
✨ What's changed
🔄 2026-05-08 -- Responsive Layout Fixes
Adressed UX/UI inconsistencies and optimized rendering performance for interactive elements.
📷 Preview & Details
General UI & Typography
font-familyon buttons to resolve unintended serif fallbacks in specific browsers.Animation Optimization (Phone Number Slide)
Replaced the layout-based transition with a GPU-accelerated approach to eliminate "jank" and reflow issues, particularly in Firefox.
max-widthandmarginmutations triggered expansive layout recalculations on every frame.- Switched to
transform: translateX()andopacityfor a layout-neutral animation.- Added a wrapper with
overflow-hiddenfor a smooth "ATM cash reveal" effect.- Locked the element width to 200px to stabilize the flexbox container.
Testing
Known Issues and ongoing Work
scroll-margin-topissues and event listener execution.🔄 2026-05-03 -- Final Sections
Added final sections: Why Buy Direct, Contact Form, and Footer. Includes interactive form handling and spacing improvements.
📷 Preview & Details
Form handling:
form-handling.mp4
New: Why Buy Direct Section
New: Contact Form
- Hidden labels for screen readers (visually-hidden class)
- Autocomplete attributes (name, email)
- Focus-visible states for keyboard navigation
- "Send" -> "Sending..." -> "Sent!" state progression
- Button disabled during submission
- Form resets after 2s delay
New: Footer
aspect-ratioCSS for layout stability (prevents CLS)Improvements
- Before: visually orphaned between sections)
- After: clear section boundary
- Rationale: Gestalt proximity principle (button belongs to Categories, not next section)
Technical notes
display: blockto eliminate baseline gap🔄 2026-04-22 -- Categories Section
Added Categories section - responsive gallery with 6 products images, lazy-loading, and hover effects. Minor layout improvements to Products section for visual consistency.
📷 Preview & Details
Hover effect:
gallery-hover.mp4
brave_yYsARv7NlK.mp4
New: Categories Section
data layoutattributes for mixed aspect-ratiosloading="lazy"+srcsetfor bandwidth optimizationprefers-reduced-motionfallbackImprovements: Products Section
justify-content: flex-end+ min-height safeguard)Bug Fixes
<picture>class name collision (global replace artifact)🔄 2026-04-16 -- Products Section
Implemented responsive Product section grid with hover lift effect.
📷 Preview & Details
Hover effect:
products-hover.mp4
Technical highlights:
🔄 2026-04-11 -- Hero Section + Nav/Menu Sidebar
Initial major PR delivering the landing page foundation: optimized hero section, responsive header/menu, and robust build setup. Strong emphasis was placed on performance, accessibility, and cross-browser stability.
📷 Details
🎯 Key improvements
Performance and assets
<img>+ WebP withpreloadhints.UX & Accessibility
prefers-reduced-motionsupport.SEO & Connectivity
robots.txt, meta-description,h1hierarchy, andvisually-hiddenhelpers.tel:) and clickable logos.Code Quality & Architecture
fluid-calc,rem,@mixin mq).📸 Screenshots & Demos
📷 Click to see more screenshots
Interactive Menu & Sidebar Preview
menu-sidebar.mp4
🔧 Technical decision & lessons learned
@keyframesdirected by JS (Fisher-Yates) for performance and randomness.type="module"andcross-envto ensure cross-platform deployment stability.Checklist
prefers-reduced-motionsupport.layout_miamichecklist items completed.Next steps: Implementation of the remaining sections and further CSS/JS refinements.