2025 header - #30
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new design for the 2025 homepage by replacing a simple text placeholder with a comprehensive landing experience featuring animated components and styled content.
- Refactors the Home component to import and render new Landing and Description page components
- Creates an animated landing page with Lottie animations, responsive design, and a prominent registration button
- Adds a description section with animated cars and welcome content for the R|P conference
Reviewed Changes
Copilot reviewed 3 out of 14 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| apps/site/src/routes/Home.tsx | Replaces placeholder text with Landing and Description components |
| apps/site/src/pages/Landing.tsx | Creates new animated landing page with title, background animation, and registration button |
| apps/site/src/pages/Description.tsx | Implements description section with animated car elements and conference information |
| objectFit: "fill", | ||
| zIndex: 0, | ||
| maskImage: | ||
| "linear-gradient(to top, black var(--pct), transparent var(--pct))", |
There was a problem hiding this comment.
Using CSS custom properties (--pct) in inline styles with TypeScript may cause type issues. Consider defining this as a proper CSS variable or using Chakra UI's theme system for better type safety.
| "linear-gradient(to top, black var(--pct), transparent var(--pct))" | ||
| }} | ||
| initial={{ "--pct": "0%" }} | ||
| animate={inView ? { "--pct": "100%" } : {}} |
There was a problem hiding this comment.
TypeScript may not recognize CSS custom property keys in motion component props. Consider using a ref with direct style manipulation or a proper CSS-in-JS solution for better type safety.
| animate={inView ? { "--pct": "100%" } : {}} | |
| initial={{ "--pct": "0%" } as any} | |
| animate={inView ? ({ "--pct": "100%" } as any) : {}} |
| color="black" | ||
| rounded="lg" | ||
| _hover={{ bg: "gray.800", color: "white" }} | ||
| _active={{ bg: "#EAA001" }} |
There was a problem hiding this comment.
Hard-coded color value should be moved to a theme variable or constant for consistency and easier maintenance across the application.
| _active={{ bg: "#EAA001" }} | |
| bg={REGISTER_BUTTON_BG} | |
| color="black" | |
| rounded="lg" | |
| _hover={{ bg: "gray.800", color: "white" }} | |
| _active={{ bg: REGISTER_BUTTON_BG }} |
| color="black" | ||
| rounded="lg" | ||
| _hover={{ bg: "gray.800", color: "white" }} | ||
| _active={{ bg: "#EAA001" }} |
There was a problem hiding this comment.
Duplicate hard-coded color value should be moved to a theme variable or constant for consistency and easier maintenance across the application.
| _active={{ bg: "#EAA001" }} | |
| bg={ACCENT_COLOR} | |
| color="black" | |
| rounded="lg" | |
| _hover={{ bg: "gray.800", color: "white" }} | |
| _active={{ bg: ACCENT_COLOR }} |
Deploying rp-web-hype with
|
| Latest commit: |
4f998a1
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1e49e83b.rp-web-hype.pages.dev |
| Branch Preview URL: | https://2025-header.rp-web-hype.pages.dev |
Deploying rp-web-admin with
|
| Latest commit: |
4f998a1
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://dc5eb84a.rp-web-admin.pages.dev |
| Branch Preview URL: | https://2025-header.rp-web-admin.pages.dev |
Deploying rp-web-sponsor with
|
| Latest commit: |
4f998a1
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d7a2501f.rp-web-sponsor.pages.dev |
| Branch Preview URL: | https://2025-header.rp-web-sponsor.pages.dev |
No description provided.