-
Notifications
You must be signed in to change notification settings - Fork 0
[FEATURE] Comprehensive Frontend UI/UX Enhancement with Branch Conflict Resolution and Modern Web Standards Implementation #39
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
Copilot
wants to merge
5
commits into
main
Choose a base branch
from
copilot/fix-37
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+231
−32
Open
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
7dac84c
Initial plan
Copilot 00a163e
Complete comprehensive UI/UX review with critical accessibility, perf…
Copilot 1254572
Resolve conflicts and implement comprehensive frontend UI/UX best pra…
Copilot 9ce6b84
Fix JSX main tag closure and implement comprehensive frontend UI/UX b…
Copilot 384532b
Fix failing HomePage tests to match actual implementation
Copilot File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,77 +9,94 @@ import { ArrowRightIcon, HeartIcon, CalendarDaysIcon, PhotoIcon, MapPinIcon, Env | |
| export default function HomePage() { | ||
| return ( | ||
| <div className="min-h-screen overflow-x-hidden"> | ||
| {/* Skip Links for Accessibility - Best Practice for screen readers */} | ||
| <a | ||
| href="#main-content" | ||
| className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-primary text-white px-4 py-2 rounded-md z-50 focus:z-50 transition-all duration-300" | ||
| aria-label="Skip to main content of the page" | ||
| > | ||
| Skip to main content | ||
| </a> | ||
| <Navigation /> | ||
|
|
||
| {/* Hero Section */} | ||
| <section id="home" className="min-h-screen flex items-center justify-center gradient-hero pt-16"> | ||
| <main id="main-content"> | ||
| <section | ||
| id="home" | ||
| className="min-h-screen flex items-center justify-center gradient-hero pt-16" | ||
| aria-label="Wedding announcement and save the date" | ||
| > | ||
| <div className="text-center px-4 sm:px-6 lg:px-8 w-full max-w-6xl"> | ||
| <div className="animate-fadeInUp"> | ||
| <h2 className="pt-2 sm:pt-3 text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-serif font-light text-secondary mb-4 sm:mb-6 leading-tight"> | ||
| <h1 className="pt-2 sm:pt-3 text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-serif font-light text-secondary mb-4 sm:mb-6 leading-tight"> | ||
| Incia & Arvin | ||
| </h2> | ||
| </h1> | ||
| <div className="w-16 sm:w-20 md:w-24 h-1 bg-primary mx-auto mb-6 sm:mb-8"></div> | ||
| <p className="text-lg sm:text-xl md:text-2xl text-muted mb-6 sm:mb-8 max-w-2xl mx-auto leading-relaxed"> | ||
| From childhood friends at AISD to forever partners | ||
| </p> | ||
|
|
||
| {/* Heart Collage Component with enhanced presentation */} | ||
| <div className="my-6 sm:my-8 relative overflow-hidden"> | ||
| {/* Heart Collage Component with enhanced presentation and accessibility */} | ||
| <div className="my-6 sm:my-8 relative overflow-hidden" role="img" aria-label="Romantic collage of Incia and Arvin's memorable moments together"> | ||
| {/* Subtle background glow for the collage - no scaling to prevent overflow */} | ||
| <div className="absolute inset-0 bg-gradient-radial from-primary/8 via-primary/3 to-transparent rounded-full blur-xl opacity-50"></div> | ||
| <div className="absolute inset-0 bg-gradient-radial from-primary/8 via-primary/3 to-transparent rounded-full blur-xl opacity-50" aria-hidden="true"></div> | ||
| <HeartCollage /> | ||
| </div> | ||
|
|
||
| <p className="text-base sm:text-lg text-muted mb-8 sm:mb-12"> | ||
| Join us as we celebrate our love story across continents | ||
| </p> | ||
|
|
||
| {/* Wedding Date */} | ||
| <div className="bg-white rounded-2xl p-6 sm:p-8 max-w-sm sm:max-w-md mx-auto mb-8 sm:mb-12 shadow-xl border border-cream-200"> | ||
| {/* Wedding Date - Enhanced with better accessibility */} | ||
| <div className="bg-white rounded-2xl p-6 sm:p-8 max-w-sm sm:max-w-md mx-auto mb-8 sm:mb-12 shadow-xl border border-cream-200" role="region" aria-labelledby="wedding-date-heading"> | ||
| <div className="flex items-center justify-center gap-2 mb-3"> | ||
| <CalendarDaysIcon className="h-6 w-6 text-primary" /> | ||
| <h3 className="text-xl sm:text-2xl font-serif font-semibold text-secondary"> | ||
| <CalendarDaysIcon className="h-6 w-6 text-primary" aria-hidden="true" /> | ||
| <h2 id="wedding-date-heading" className="text-xl sm:text-2xl font-serif font-semibold text-secondary"> | ||
| Save the Date | ||
| </h3> | ||
| </h2> | ||
|
Comment on lines
+54
to
+56
|
||
| </div> | ||
| <p className="text-2xl sm:text-3xl font-light text-secondary mb-3"> | ||
| December 16, 2025 | ||
| </p> | ||
| <p className="text-sm text-muted mb-4">Tuesday • Starts at 6:00 PM</p> | ||
| {/* Countdown Timer */} | ||
| <p className="text-sm text-muted mb-4">Tuesday • 6:00 PM Bangladesh Standard Time (GMT+6)</p> | ||
| {/* Countdown Timer with accessibility */} | ||
| <Countdown | ||
| targetDate="2025-12-16T00:00:00+06:00" | ||
| className="mb-4" | ||
| aria-label="Time remaining until the wedding ceremony" | ||
| /> | ||
| <p className="text-muted font-medium"> | ||
| Dhaka, Bangladesh | ||
| 📍 Dhaka, Bangladesh | ||
| </p> | ||
| <p className="text-sm text-muted mt-1"> | ||
| After-party in Phu Quoc, Vietnam | ||
| </p> | ||
| </div> | ||
|
|
||
| {/* CTA Buttons */} | ||
| {/* CTA Buttons - Enhanced with better accessibility and micro-animations */} | ||
| <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center max-w-md mx-auto mb-10 sm:mb-12"> | ||
| <Link | ||
| href="/rsvp" | ||
| className="w-full sm:w-auto bg-primary hover:bg-primary-dark text-white px-6 sm:px-8 py-3 rounded-full font-medium transition-all duration-300 shadow-lg hover:shadow-xl" | ||
| className="w-full sm:w-auto bg-primary hover:bg-primary-dark text-white px-6 sm:px-8 py-3 rounded-full font-medium transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2" | ||
| aria-label="RSVP for Incia and Arvin's wedding ceremony" | ||
| > | ||
| RSVP Now | ||
| </Link> | ||
| <Link | ||
| href="#story" | ||
| className="w-full sm:w-auto border-2 border-primary text-primary hover:bg-primary hover:text-white px-6 sm:px-8 py-3 rounded-full font-medium transition-all duration-300" | ||
| className="w-full sm:w-auto border-2 border-primary text-primary hover:bg-primary hover:text-white px-6 sm:px-8 py-3 rounded-full font-medium transition-all duration-300 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2" | ||
| aria-label="Read about our love story journey" | ||
| > | ||
| Our Story | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </main> | ||
|
|
||
| {/* Our Story Section */} | ||
| <section id="story" className="py-20 bg-white relative overflow-hidden"> | ||
| {/* Our Story Section - Enhanced design with accessibility */} | ||
| <section id="story" className="py-20 bg-white relative overflow-hidden" aria-label="Our love story timeline"> | ||
| {/* Decorative Background Elements */} | ||
| <div className="absolute top-0 left-0 w-full h-full" aria-hidden="true"> | ||
| <div className="absolute top-20 left-10 w-32 h-32 bg-primary/5 rounded-full blur-3xl"></div> | ||
|
|
@@ -133,7 +150,7 @@ export default function HomePage() { | |
| <div className="relative h-80 lg:h-96 rounded-2xl overflow-hidden shadow-2xl mb-4"> | ||
| <Image | ||
| src="/images/story/Where It All Began 1.jpeg" | ||
| alt="AISD memories - Where it all began" | ||
| alt="Incia and Arvin as students at American International School of Dhaka, sharing happy moments during their school years" | ||
| fill | ||
| className="object-cover object-[50%_24%] sm:object-[50%_28%] lg:object-[50%_32%] scale-[1.06] hover:scale-[1.1] transition-transform duration-700 brightness-110 contrast-105 saturate-105 motion-reduce:transform-none motion-reduce:transition-none" | ||
| sizes="(max-width: 768px) 100vw, 60vw" | ||
|
|
@@ -149,8 +166,9 @@ export default function HomePage() { | |
| <div className="relative h-40 sm:h-36 lg:h-36 rounded-xl overflow-hidden shadow-lg md:transform md:-rotate-1 md:hover:rotate-0 transition-transform duration-500 motion-reduce:transform-none motion-reduce:transition-none"> | ||
| <Image | ||
| src="/images/story/Where It All Began 2.jpeg" | ||
| alt="AISD school days together" | ||
| alt="Incia and Arvin during their early friendship at AISD, showcasing their close bond during school activities" | ||
| fill | ||
| loading="lazy" | ||
| className="object-cover scale-[1.1] hover:scale-[1.15] transition-transform duration-700 brightness-125 contrast-110 saturate-110 motion-reduce:transform-none motion-reduce:transition-none" | ||
| sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 30vw" | ||
| style={{ objectPosition: '48% 32%' }} | ||
|
|
@@ -160,8 +178,9 @@ export default function HomePage() { | |
| <div className="relative h-40 sm:h-36 lg:h-36 rounded-xl overflow-hidden shadow-lg md:transform md:rotate-1 md:hover:rotate-0 transition-transform duration-500 motion-reduce:transform-none motion-reduce:transition-none"> | ||
| <Image | ||
| src="/images/story/Where It All Began 3.jpeg" | ||
| alt="Early friendship moments" | ||
| alt="Heartwarming moments of Incia and Arvin's blossoming friendship during their teenage years at school" | ||
| fill | ||
| loading="lazy" | ||
| className="object-cover scale-[1.1] hover:scale-[1.15] transition-transform duration-700 brightness-105 saturate-105 motion-reduce:transform-none motion-reduce:transition-none" | ||
| sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 30vw" | ||
| style={{ objectPosition: '50% 28%' }} | ||
|
|
||
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Manually adding a tag in layout.tsx is unnecessary and potentially problematic with Next.js App Router. The metadata export already handles head elements automatically. This could cause duplicate head tags or override issues.