Added Career page of vigybag #2022
Conversation
|
@SadafKausar2025 is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis update enhances the React application by introducing a dedicated Career page, featuring a new Changes
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (5)
package-lock.jsonis excluded by!**/package-lock.jsonsrc/assets/career.pngis excluded by!**/*.pngsrc/assets/product-engineering.jpgis excluded by!**/*.jpgsrc/assets/uxui designer.jpgis excluded by!**/*.jpgsrc/assets/video editing.jpgis excluded by!**/*.jpg
Files selected for processing (4)
- package.json (1 hunks)
- src/App.jsx (2 hunks)
- src/User/components/About/CarrerHeader.jsx (1 hunks)
- src/User/pages/Career-Page/careerPage.jsx (1 hunks)
Files skipped from review due to trivial changes (1)
- package.json
Additional comments not posted (2)
src/User/components/About/CarrerHeader.jsx (1)
10-13: Verify the image URL.Ensure that the image URL is valid and accessible. If the URL is temporary or subject to change, consider hosting the image within the project's assets.
src/App.jsx (1)
173-174: Verify the path and component reference.Ensure that the path
"Career"and theCareerPagecomponent are correctly referenced. Verify that the component is correctly imported and used.
| function Header() { | ||
| return ( | ||
| <> | ||
| <header className="relative h-96 md:h-[100vh] flex items-center justify-center overflow-hidden"> | ||
| <div className="absolute inset-0 z-0"> | ||
| <img | ||
| src="https://image-assets.eu-2.volcanic.cloud/api/v1/assets/images/67b76b0e206f4f5656559b5c96208131?size=2000x600%3C" | ||
| alt="Background" | ||
| className="w-full h-full object-cover filter " | ||
| /> | ||
| <div className="absolute inset-0 bg-black opacity-50"></div> | ||
| </div> | ||
| <div className="relative z-10 text-center text-white px-4"> | ||
| <h1 className="text-4xl md:text-6xl font-bold mb-2 md:mb-4"> | ||
| Career VigyBag 🌱 | ||
| </h1> | ||
| <p className="text-5xl max-w-3xl mx-auto"> | ||
| <span className="text-yellow-200">Innovate,</span>{" "} | ||
| <span className="text-blue-400">inspire,</span> and{" "} | ||
| <span className="text-green-200">grow</span> with{" "} | ||
| <span className="text-5xl text-green-300 font-bold">VigyBag.</span> | ||
| </p> | ||
| <div className="flex items-center rounded-full border-green-800 border-2 bg-gray-200 px-4 py-2 w-100 mt-7"> | ||
| <input | ||
| type="text" | ||
| placeholder="Explore jobs" | ||
| className="bg-transparent outline-none w-full text-green-700" | ||
| /> | ||
| <FaSearch className="text-green-800" /> | ||
| </div> | ||
| <p className="text-white text-left pl-2 mt-2"> | ||
| <span className="text-yellow-300">197</span> opportunities available | ||
| to be a maximiser. | ||
| </p> | ||
| </div> | ||
| </header> | ||
| </> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Ensure the component is tested.
There are no tests provided for this component. Ensure that the component is covered by unit tests to verify its functionality.
Do you want me to generate the unit testing code or open a GitHub issue to track this task?
| const leadershipData = [ | ||
| { | ||
| name: "UX/UI Designer", | ||
| role: "Graphic Designing", | ||
| image: UX, | ||
| description: | ||
| "A UX/UI designer focuses on creating user-friendly and visually appealing digital interfaces. They blend user experience (UX) and user interface (UI) design to enhance usability and accessibility while ensuring the product is engaging and intuitive.", | ||
| }, | ||
| { | ||
| name: "Video Editor", | ||
| role: "Video Editing", | ||
| image: video, | ||
| description: | ||
| "A video editor is responsible for assembling raw footage into a polished final product. They cut, arrange, and enhance video clips, adding transitions, effects, and audio to create engaging visual stories.", | ||
| }, | ||
| { | ||
| name: "Product Engineer", | ||
| role: "Product Management Engineer", | ||
| image: product, | ||
| description: | ||
| "A product engineer designs, develops, and improves products, focusing on functionality and performance. They work closely with design and manufacturing teams to ensure products meet specifications and quality standards. Their role involves prototyping, testing, and refining products ", | ||
| }, | ||
| { | ||
| name: "Content Writer", | ||
| role: "Writing E-commerce Content", | ||
| image: content, | ||
| description: | ||
| "A content writer creates engaging and informative written material for various platforms, such as websites, blogs, and social media. They research topics, craft clear and compelling content, and tailor their writing to target audiences.", | ||
| }, | ||
| // Add more leadership members as needed | ||
| ]; |
There was a problem hiding this comment.
Consider externalizing the leadership data.
The leadership data is hardcoded within the component. Consider externalizing this data to a JSON file or a CMS for easier updates and maintenance.
// Example of externalizing leadership data
import leadershipData from '../../../data/leadershipData.json';| const CareerPage = () => { | ||
| const leadershipData = [ | ||
| { | ||
| name: "UX/UI Designer", | ||
| role: "Graphic Designing", | ||
| image: UX, | ||
| description: | ||
| "A UX/UI designer focuses on creating user-friendly and visually appealing digital interfaces. They blend user experience (UX) and user interface (UI) design to enhance usability and accessibility while ensuring the product is engaging and intuitive.", | ||
| }, | ||
| { | ||
| name: "Video Editor", | ||
| role: "Video Editing", | ||
| image: video, | ||
| description: | ||
| "A video editor is responsible for assembling raw footage into a polished final product. They cut, arrange, and enhance video clips, adding transitions, effects, and audio to create engaging visual stories.", | ||
| }, | ||
| { | ||
| name: "Product Engineer", | ||
| role: "Product Management Engineer", | ||
| image: product, | ||
| description: | ||
| "A product engineer designs, develops, and improves products, focusing on functionality and performance. They work closely with design and manufacturing teams to ensure products meet specifications and quality standards. Their role involves prototyping, testing, and refining products ", | ||
| }, | ||
| { | ||
| name: "Content Writer", | ||
| role: "Writing E-commerce Content", | ||
| image: content, | ||
| description: | ||
| "A content writer creates engaging and informative written material for various platforms, such as websites, blogs, and social media. They research topics, craft clear and compelling content, and tailor their writing to target audiences.", | ||
| }, | ||
| // Add more leadership members as needed | ||
| ]; | ||
|
|
||
| return ( | ||
| <div className="bg-gradient-to-b from-[#fff0e3] to-white min-h-screen"> | ||
| {/*Header Section */} | ||
| <Header /> | ||
|
|
||
| <section> | ||
| <p className="text-black text-5xl mt-8 font-bold text-center font-baloo gap-2"> | ||
| Come to <span className="text-green-600">VigyBag</span> to maximise | ||
| yourself | ||
| </p> | ||
| <p className="text-black mt-3 text-5xl font-bold text-center font-baloo mb-3"> | ||
| because when you maximise, we maximise. | ||
| </p> | ||
| <div className="mt-2"> | ||
| <img src={career} alt="" className="w-full h-full object-cover" /> | ||
| </div> | ||
| </section> | ||
|
|
||
| {/* Leadership Section */} | ||
| <section className="py-12 bg-green-50 md:py-20"> | ||
| <h2 className="text-3xl md:text-4xl font-bold text-center mb-8 md:mb-16 text-green-800 underline"> | ||
| Our Role | ||
| </h2> | ||
| <div className="container mx-auto px-4"> | ||
| <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 w-[70vw] h-[120vh] ml-56"> | ||
| {leadershipData.map((leader, index) => ( | ||
| <div | ||
| key={index} | ||
| className="bg-white rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105"> | ||
| <div className="relative h-48 md:h-64"> | ||
| <img | ||
| src={leader.image} | ||
| alt={leader.name} | ||
| className="w-full h-full object-cover" | ||
| /> | ||
| <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | ||
| <div className="absolute bottom-0 left-0 right-0 p-4 md:p-6"> | ||
| <h3 className="text-xl md:text-2xl font-semibold text-white"> | ||
| {leader.name} | ||
| </h3> | ||
| <p className="text-green-300">{leader.role}</p> | ||
| </div> | ||
| </div> | ||
| <div className="p-4 md:p-6"> | ||
| <p className="text-sm md:text-base text-gray-600 mb-4"> | ||
| {leader.description} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Ensure the component is tested.
There are no tests provided for this component. Ensure that the component is covered by unit tests to verify its functionality.
Do you want me to generate the unit testing code or open a GitHub issue to track this task?
| <Route path="Career" element={<CareerPage />} />{" "} | ||
| {/* EPR page route */} |
There was a problem hiding this comment.
Ensure the new route is tested.
There are no tests provided for the new route. Ensure that the routing and navigation to the CareerPage are covered by unit tests.
Do you want me to generate the unit testing code or open a GitHub issue to track this task?
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Congratulations, Your pull request has been successfully merged 🥳🎉 Thank you for your contribution to the project 🚀 Keep Contributing!! ✨ |
Fixes Issue #1986
Closes #1986
Changes proposed
Screenshots
Note to reviewers
Summary by CodeRabbit
New Features
Bug Fixes
framer-motiondependency to the latest version, potentially improving performance and fixing issues.Style