Add landing page link to logo #22
Conversation
Landing page
Background configurations
note: still need to check mobile functionaility
Main to Landing Page
Updated the app's branding from 'tomeeto' to 'plancake' across layout, header, and metadata. Redesigned the landing page with new sections, improved visual hierarchy, and updated color scheme. Added new CSS utility classes for fonts and text outlines. Refactored header navigation for better accessibility and branding consistency.
Replaces 'tomeeto' branding with 'plancake', updates color variables and classes in globals.css, and introduces new visual styles and assets for the homepage. Feature icons are now images instead of react-icons, and new utility classes are added for text styling. The homepage sections and buttons have updated colors and typography to match the new brand identity.
Replaces image-based logo in the header with a new custom Logo component and updates header layout. Refactors the hero section for improved typography and layout. Adds new color variables and utility classes to globals.css, and introduces a Tailwind config file with custom colors and fonts.
Last thing to do is fix the hamburger menu issues.
Replaced inline styles in ScheduleGrid with Tailwind utility classes and custom grid column utilities. Added support for .mdx files and new gridTemplateColumns to Tailwind config for improved maintainability and consistency.
Co-authored-by: Copilot <[email protected]>
This reverts commit 6117651.
We finally have a real logout button.
This might be a slight accessibility issue, but we'll see.
The log in button was changed to a Link so it wasn't needed.
Now when logging in and out, the account button will update immediately with your new login status.
When on the /new-event page, it will hide the button. Makes sense.
It looked weird to have both the new event and log in buttons be red around the frosted glass theme toggle. Also, the log in button has an annoying 1.5 padding instead of 2, just to keep the size consistent with the theme toggle and account buttons. The joys of using outlines.
Update header elements
Schedule preview
Fixed dark/light for dark system
I missed these on the initial header folder creation.
There was a problem hiding this comment.
Pull Request Overview
This PR implements a comprehensive refactor that adds a landing page link to the logo while significantly reorganizing the application's component structure. The changes establish a new header layout with navigation and reorganize UI components into more logical folder hierarchies.
- Implements new header system with logo link, navigation, and user controls
- Refactors component organization from flat
/ui/componentsto structured/ui/components/headerand other specialized folders - Adds new authentication pages and scheduling functionality with timezone support
Reviewed Changes
Copilot reviewed 75 out of 79 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updates Next.js version and adds new dependencies for UI components |
| next.config.ts | Adds API proxy configuration for backend communication |
| app/layout.tsx | Updates to use new header component and providers structure |
| app/ui/components/header/ | New header components including logo with landing page link |
| app/ui/components/schedule/ | Refactored scheduling components with improved architecture |
| app/_lib/ | New library structure for shared utilities and types |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| console.error("Fetch error:", err); | ||
| alert("An error occurred. Please try again."); |
There was a problem hiding this comment.
Generic error message 'An error occurred. Please try again.' is not helpful for debugging email verification issues. Consider providing more specific error messages for different failure scenarios.
| } | ||
| } | ||
|
|
||
| // REPLACE THIS WITH API DATA !!!!!!!!! |
There was a problem hiding this comment.
TODO comment with excessive exclamation marks should be replaced with proper implementation or converted to a more professional TODO/FIXME format.
| // REPLACE THIS WITH API DATA !!!!!!!!! | |
| // TODO: Confirm this uses the correct API data source |
| <Link href="/"> | ||
| <div className="font-display text-2xl leading-[20px] font-normal text-lion [-webkit-text-stroke:1px_white]"> | ||
| plan | ||
| </div> | ||
| <div className="font-display text-2xl leading-[20px] font-normal text-lion [-webkit-text-stroke:1px_black]"> | ||
| cake | ||
| </div> | ||
| </Link> |
There was a problem hiding this comment.
Logo link lacks accessible text for screen readers. Add aria-label='Go to homepage' or similar descriptive text to the Link component.
|
|
||
| return ( | ||
| <div className="relative"> | ||
| <button type="button" onClick={toggleMenu} className="focus:outline-none"> |
There was a problem hiding this comment.
Hamburger menu button lacks accessible labeling. Add aria-label='Toggle navigation menu' and aria-expanded={isOpen} for screen reader users.
| <button type="button" onClick={toggleMenu} className="focus:outline-none"> | |
| <button | |
| type="button" | |
| onClick={toggleMenu} | |
| className="focus:outline-none" | |
| aria-label="Toggle navigation menu" | |
| aria-expanded={isOpen} | |
| > |
| eventLink={ | ||
| window.location.origin | ||
| ? `${window.location.origin}/event/${eventCode}` | ||
| : "" |
There was a problem hiding this comment.
Accessing window.location.origin during server-side rendering will cause hydration errors. Use useEffect to set this value client-side or use Next.js useRouter hook.
| placeholder="add event name" | ||
| className="w-full border-b-1 border-violet p-1 text-2xl focus:outline-none md:w-2/4 dark:border-gray-400" | ||
| /> | ||
| <button className="hidden rounded-full border-2 border-blue bg-blue px-4 py-2 text-sm text-white transition-shadow hover:shadow-[0px_0px_32px_0_rgba(61,115,163,.70)] md:flex dark:border-red dark:bg-red dark:hover:shadow-[0px_0px_32px_0_rgba(255,92,92,.70)]"> |
There was a problem hiding this comment.
Button is missing type='button' attribute and should have a more descriptive aria-label since it's a primary action button.
| <button className="hidden rounded-full border-2 border-blue bg-blue px-4 py-2 text-sm text-white transition-shadow hover:shadow-[0px_0px_32px_0_rgba(61,115,163,.70)] md:flex dark:border-red dark:bg-red dark:hover:shadow-[0px_0px_32px_0_rgba(255,92,92,.70)]"> | |
| <button | |
| type="button" | |
| aria-label="Create new event" | |
| className="hidden rounded-full border-2 border-blue bg-blue px-4 py-2 text-sm text-white transition-shadow hover:shadow-[0px_0px_32px_0_rgba(61,115,163,.70)] md:flex dark:border-red dark:bg-red dark:hover:shadow-[0px_0px_32px_0_rgba(255,92,92,.70)]" | |
| > |
What?
This PR adds a link on the logo to the landing page.
It also further organizes the header components from the
/ui/componentsfolder into the /ui/components/headerfolder.Why?
It was driving me crazy having to change the URL instead of clicking on the logo when testing.
It's also just a thing that every website does.
How?
The
Linkcomponent works wonders.Testing?
I clicked on the logo. It took me to the landing page. Seems fine to me.