feat: Add About page with team, tech stack, and contact form#4
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a new About page to the React app, wires it into the existing React Router setup, and exposes it via the top navigation.
Changes:
- Added
Aboutpage with Team, Tech Stack, and Contact sections. - Added About page styling in a new
About.css. - Updated navigation and routing to include
/about.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/pages/About.js | New About page component with team cards, tech stack list, and a contact form. |
| src/pages/About.css | New styles for the About page layout (intro, team grid/cards, tech badges, contact form textarea). |
| src/components/Navbar.js | Adds an “About” link to the navbar. |
| src/App.js | Registers the /about route and imports the About page. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <form id="contact-form" onSubmit={(e) => e.preventDefault()}> | ||
| <div className="form-group"> | ||
| <label htmlFor="name">Name</label> | ||
| <input type="text" id="name" placeholder="Your name" /> | ||
| </div> | ||
| <div className="form-group"> | ||
| <label htmlFor="email">Email</label> | ||
| <input type="email" id="email" placeholder="Your email" /> | ||
| </div> | ||
| <div className="form-group"> | ||
| <label htmlFor="message">Message</label> | ||
| <textarea id="message" rows="4" placeholder="Your message"></textarea> |
There was a problem hiding this comment.
@copilot apply changes based on this feedback
There was a problem hiding this comment.
The .form-group, .form-group label, and .form-group input styles have been added to About.css (lines 67-83), scoped under .about-contact to ensure the Name and Email inputs match the textarea styling. All form fields now have consistent padding (0.6rem), border (1px solid #ccc), border-radius (4px), and font-size (1rem). Fixed in commit aace370.
| .about-contact form { | ||
| max-width: 500px; | ||
| } | ||
|
|
||
| .about-contact textarea { | ||
| width: 100%; | ||
| padding: 0.6rem; | ||
| border: 1px solid #ccc; | ||
| border-radius: 4px; | ||
| font-size: 1rem; | ||
| font-family: inherit; | ||
| resize: vertical; | ||
| } |
There was a problem hiding this comment.
@copilot apply changes based on this feedback
There was a problem hiding this comment.
Added .form-group, .form-group label, and .form-group input styles directly to About.css, scoped under .about-contact to avoid leaking into other components. The Name/Email inputs now match the textarea styling (same padding, border, border-radius, and font-size). Fixed in commit aace370.
…act form styling Agent-Logs-Url: https://github.com/microsoft/sample-webapp/sessions/584a16a9-6793-4a19-93d3-b43c7924ace1 Co-authored-by: kashish2508 <[email protected]>
What's New\n\n- Added About page with:\n - Team section with member cards\n - Tech stack badges (React 18, React Router, Playwright, CSS3)\n - Contact form (name, email, message)\n- Updated Navbar with About link\n- Updated App.js routing to include
/about\n\n## Testing\n\nThis page adds multiple interactive elements ideal for Playwright testing:\n- Contact form with inputs and textarea\n- Team cards grid layout\n- Navigation link\n\n---\n\n> Tip: Request a review from Copilot on this PR to start generating Copilot Memories for the repo.