Update homepage #325
Update homepage #325
Conversation
Asma-95
commented
Jun 25, 2025
Asma-95
commented
- Added two logos behind image on featured
- Added a tonightpass section
- Added a services section
- Added a reviews section
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
Adds new marketing sections to the homepage and enhances the featured banner with decorative SVGs
- Introduces Tonightpass, Services, and Reviews components to the visitor landing page
- Updates the Featured component to include two behind-the-image logos and adjust z-index
- Small config tweak in
tailwind.config.ts(whitespace only)
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| tailwind.config.ts | Added extra blank lines (no functional change) |
| src/screens/marketing/landing/visitor/index.tsx | Imported and inserted Tonightpass, Services, and Reviews in the layout |
| src/components/marketing/landing/visitor/tonightpass/index.tsx | New Tonightpass section component |
| src/components/marketing/landing/visitor/services/index.tsx | New Services section with scroll-driven color cycling |
| src/components/marketing/landing/visitor/reviews/index.tsx | New Reviews section with sticky header and testimonial grid |
| src/components/marketing/landing/visitor/featured/index.tsx | Added two decorative SVGs behind the main image and adjusted z-index |
|
|
||
| const sectionHeight = 300; | ||
| let index = Math.floor(relativeY / sectionHeight); | ||
| index = Math.max(0, Math.min(index, colorSets.length - 1)); |
There was a problem hiding this comment.
The clamp uses colorSets.length but services.length is 3 while colorSets has 4 entries, leading to an extra color state with no corresponding service. Consider clamping against services.length - 1 or aligning the two arrays.
| index = Math.max(0, Math.min(index, colorSets.length - 1)); | |
| index = Math.max(0, Math.min(index, services.length - 1)); |
| setColorIndex(index); | ||
| }; | ||
|
|
||
| window.addEventListener('scroll', handleScroll); |
There was a problem hiding this comment.
Throttling or debouncing the scroll handler would improve performance by reducing the number of state updates during rapid scrolling.
| {services.map((service, index) => ( | ||
| <div key={index} style={{ minHeight: '300px' }}> |
There was a problem hiding this comment.
Using the array index as a key can cause rendering issues if items ever change order. Consider using a unique property (e.g., service.title) or adding an explicit id field.
| {services.map((service, index) => ( | |
| <div key={index} style={{ minHeight: '300px' }}> | |
| {services.map((service) => ( | |
| <div key={service.id} style={{ minHeight: '300px' }}> |
| <div className="relative mt-12 rounded-sm"> | ||
|
|
||
| <div className="absolute -top-20 left-20 z-[-1]"> | ||
| <svg |
There was a problem hiding this comment.
This SVG is purely decorative; add aria-hidden="true" to hide it from assistive technologies.
