Fix Career page layout and improve UI #2627
Conversation
|
@gouri138 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. |
WalkthroughMigrates head management to react-helmet-async with HelmetProvider, adds a Meet The Makers page and route, updates navbar links, and applies large UI redesigns across Home, Career, Certification, Contributors and several card components; also adds a Tailwind smooth-bounce animation. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Root as main.jsx
participant Store as Provider
participant Helmet as HelmetProvider
participant Router as Router
participant App as App
User->>Root: Load app
Root->>Store: Initialize store
Store->>Helmet: Wrap app tree
Helmet->>Router: Initialize routing
Router->>App: Render routes (pages use Helmet)
sequenceDiagram
autonumber
actor User
participant Page as MeetTheMakers.jsx
User->>Page: Fill form (name, location, story)
User->>Page: Submit
Page->>Page: setState(submitted=true)
Page-->>User: Show acknowledgement (pending admin approval)
sequenceDiagram
autonumber
actor User
participant Cert as Certification.jsx
participant GH as GitHub API
User->>Cert: Enter GitHub username
User->>Cert: Verify Contribution
Cert->>GH: checkContribution / fetchGitHubName
GH-->>Cert: contributor? / name
alt Success
Cert->>Cert: set userId/name
User->>Cert: Generate Certificate
Cert->>Cert: Render preview (ref)
User->>Cert: Download PNG/PDF
Cert-->>User: File download
else Failure
Cert-->>User: Error alert
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
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: 10
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
src/User/pages/Popular_Categories/Beauty-Wellness.jsx (1)
20-26: Category slug bug: use “fragrances” (plural) to avoid 404s and failed fetches.DummyJSON’s category is “fragrances”, not “fragrance”. Current code will cause the loop to throw and the entire fetch to fail early. (dummyjson.com)
Apply this diff:
- const categoriesToFetch = ["beauty", "fragrance", "skin-care"]; // desired categories + const categoriesToFetch = ["beauty", "fragrances", "skin-care"]; // desired categoriessrc/User/pages/Popular_Categories/Furniture-Decor.jsx (1)
86-89: Fix meta description: page says “Furniture & Decor” but description is for Beauty.This is user-facing and impacts SEO/snippets.
Apply this diff:
<Helmet> <title>Furniture & Decor | VigyBag</title> - <meta name="description" content="Explore a wide range of beauty and wellness products at VigyBag. Find the best products to enhance your beauty and wellbeing." /> + <meta + name="description" + content="Discover sustainable furniture and home decor at VigyBag. Shop eco-friendly pieces to style your living spaces." + /> </Helmet>src/User/pages/Popular_Categories/Printing-Stationery.jsx (1)
85-90: Fix meta description: currently references Beauty & Wellness.Correct the description to match Printing & Stationery.
Apply this diff:
<Helmet> <title>Printing & Stationery | VigyBag</title> - <meta name="description" content="Explore a wide range of beauty and wellness products at VigyBag. Find the best products to enhance your beauty and wellbeing." /> + <meta + name="description" + content="Shop printing and stationery essentials at VigyBag. Explore notebooks, papers, organizers, and office supplies." + /> </Helmet>src/User/pages/Popular_Categories/Health-Supplements.jsx (1)
21-21: Align the page title with actual category slugs or adjust the fetched categoriesIt turns out DummyJSON does not expose a “supplements” or “health-supplements” category—only these slugs (among others):
• beauty
• fragrances
• furniture
…
• skin-care
…
• groceries
…
• womens-jewellery
(no “supplements”)To resolve this mismatch, choose one of the following refactors:
• Rename the page (and its URL) from “Health Supplements” to something that matches one of the existing slugs—e.g. “Skin Care” if you intend to fetch
skin-care.
• UpdatecategoriesToFetchto use slugs that align with your intended content. For example, if you want broader beauty products, you might fetch bothbeautyandskin-care:- const categoriesToFetch = ["skin-care"]; + const categoriesToFetch = ["beauty", "skin-care"];• If you truly need a “supplements” section, consider implementing a custom mapping or extending the DummyJSON API with your own “supplements” data source—since it isn’t provided out of the box.
Please apply the refactor that best matches the UX you’re aiming for.
🧹 Nitpick comments (65)
src/User/pages/Career-Page/careerPage.jsx (6)
43-43: Avoid w-fit on the root container to prevent horizontal overflow; use w-full.
w-fiton the page wrapper can introduce unexpected horizontal scrolling on narrow screens. Usew-fullto make the layout reliably responsive.- <div className="bg-gradient-to-b from-[#fff0e3] to-white min-h-screen md:w-auto w-fit"> + <div className="bg-gradient-to-b from-[#fff0e3] to-white min-h-screen w-full md:w-auto">
68-68: Avoid inline styles for colors; keep styling in Tailwind utilities for consistency.Replace the inline
style={{ background: "#97c49f" }}with a Tailwind arbitrary color class.- <div className="absolute bottom-0 left-0 w-full h-1/2" style={{ background: "#97c49f" }} /> + <div className="absolute bottom-0 left-0 w-full h-1/2 bg-[#97c49f]" />
76-81: Use a stable key instead of array index and prefer utilities over inline minWidth style.
key={index}can cause subtle bugs on reordering; use a stable identifier likeleader.name.- Replace
style={{ minWidth: 0 }}with Tailwind’smin-w-0for consistency.- {leadershipData.map((leader, index) => ( + {leadershipData.map((leader) => ( <div - key={index} - className="bg-white rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 w-full" - style={{ minWidth: 0 }} + key={leader.name} + className="bg-white rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 w-full min-w-0" >
82-87: Defer non-hero images to improve performance and reduce CLS.Add
loading="lazy"and intrinsicwidth/height(or use Tailwind aspect utilities) to stabilize layout and improve LCP/CLS. If exact dimensions are unknown, at least enforce an aspect ratio.- <div className="relative h-40 md:h-48"> + <div className="relative h-40 md:h-48 aspect-[16/10]"> <img src={leader.image} alt={leader.name} - className="w-full h-full object-cover" + className="w-full h-full object-cover" + loading="lazy" + decoding="async" />
7-7: Minor naming consistency: “CarrerHeader” vs “CareerHeader”.If you ever rename files, consider aligning the component/file name to “CareerHeader” to avoid future confusion. No action needed in this PR if other imports rely on the current name.
47-59: Enhance CareerPage Hero for Consistent Layout, Readability, and Avoid DuplicationThe career hero section currently uses an
<img>withalt=""(which is correct for a purely decorative background) but lacks a defined container height, an explicit decorative role, and a contrast overlay—resulting in potential layout shifts and hard-to-read text. Additionally, you’re rendering two full-page heroes (<Header/>at 100vh and this image block), which may be redundant.Please consider:
- Defining an explicit height on the career hero container to ensure predictable rendering.
- Marking the background image as decorative (e.g. keep
alt=""and addaria-hidden="true"or use a CSSbackground-imageon a<div>).- Introducing a semi-transparent overlay for consistent text contrast.
- Reviewing whether both
<Header/>and this hero section are needed; if not, remove one for a cleaner UX.Suggested refactor (in
src/User/pages/Career-Page/careerPage.jsxaround lines 47–59):- <div className="relative mt-8"> - <img src={career} alt="" className="w-full h-full object-cover mx-auto" /> - <div className="absolute top-1/2 right-0 transform -translate-y-1/2 w-1/2 flex flex-col items-center justify-center px-4 md:px-8"> + <div className="relative mt-8 h-64 sm:h-80 md:h-[28rem] rounded-lg overflow-hidden"> + <img + src={career} + alt="" + aria-hidden="true" + className="absolute inset-0 w-full h-full object-cover" + /> + <div className="absolute inset-0 bg-black/40" aria-hidden="true"></div> + <div className="absolute top-1/2 right-0 transform -translate-y-1/2 w-full sm:w-2/3 md:w-1/2 flex flex-col items-center justify-center px-4 md:px-8"> <h2 className="font-bold text-white text-center"> <span className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold drop-shadow-lg"> Maximise </span> </h2> <p className="font-bold text-white mt-4 text-center text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl"> Come to VigyBag to maximise yourself because when you maximise, we maximise. </p> </div>• Also evaluate whether to remove either the
<Header />(full-page hero insrc/User/components/About/CarrerHeader.jsx) or this career hero to avoid two back-to-back banners.src/User/pages/Latest_in_the_Market/NaturalCosmetics.jsx (4)
88-91: Tailor the meta description to this page for better SEO relevance.The description is generic. Consider aligning it with “Natural Cosmetics” and the filters present.
Apply this diff:
<Helmet> <title>Natural Cosmetics | VigyBag</title> - <meta name="description" content="Explore a wide range of beauty and wellness products at VigyBag. Find the best products to enhance your beauty and wellbeing." /> + <meta + name="description" + content="Shop natural cosmetics at VigyBag—skin-care and fragrance picks with ratings, prices, and filters by category, price, and rating." + /> </Helmet>
71-73: Specify radix in parseInt to avoid subtle parsing pitfalls.Explicit radix improves robustness and keeps intent clear.
- updatedProducts = updatedProducts.filter( - (product) => product.price <= parseInt(priceFilter) - ); + updatedProducts = updatedProducts.filter( + (product) => product.price <= parseInt(priceFilter, 10) + );
75-78: Revisit rating comparison; rounding can over-include items.Math.round(3.6) becomes 4, which may include products slightly below the chosen threshold. A direct comparison is typically expected for rating filters.
- updatedProducts = updatedProducts.filter( - (product) => Math.round(product.rating.rate) >= ratingFilter - ); + updatedProducts = updatedProducts.filter( + (product) => product.rating.rate >= ratingFilter + );
20-44: Consider extracting the repeated fetch+filter logic into a shared hook/util.Multiple pages replicate the same categories→fetch→map→filter flow. A small hook (e.g., useProductsByCategories) would reduce duplication and centralize error handling and mapping.
Example hook (new file suggestion):
// src/User/hooks/useProductsByCategories.js import { useEffect, useState } from "react"; import axios from "axios"; export function useProductsByCategories(categories = []) { const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); const [err, setErr] = useState(null); useEffect(() => { let ignore = false; (async () => { try { const all = []; for (const category of categories) { const { data } = await axios.get(`https://dummyjson.com/products/category/${category}`); if (data?.products?.length) { all.push( ...data.products.map((p) => ({ id: p.id, title: p.title, price: p.price, category: p.category, image: p.images?.[0] || "", discountPercentage: p.discountPercentage, rating: { rate: p.rating, count: p.reviews ? p.reviews.length : 0 }, })) ); } } if (!ignore) setProducts(all); } catch (e) { if (!ignore) setErr(e); } finally { if (!ignore) setLoading(false); } })(); return () => { ignore = true; }; }, [categories]); return { products, loading, error: err }; }Then pages can do:
const { products, loading, error } = useProductsByCategories(["beauty", "fragrance", "skin-care"]);Also applies to: 62-85
src/User/pages/Popular_Categories/Fashion-Accessories.jsx (2)
85-87: Meta description doesn’t match “Fashion Accessories”; tune for relevance.Current copy references “beauty and wellness”. Consider a category-specific description for better SEO/snippets.
<Helmet> <title>Fashion Accessories | VigyBag</title> - <meta name="description" content="Explore a wide range of beauty and wellness products at VigyBag. Find the best products to enhance your beauty and wellbeing." /> + <meta + name="description" + content="Discover fashion accessories at VigyBag—bags, jewelry, watches, sunglasses, and more. Filter by category, price, and rating to find your style." + /> </Helmet>
68-70: Add radix to parseInt (or use Number) for clarity.Small robustness/readability win.
- updatedProducts = updatedProducts.filter( - (product) => product.price <= parseInt(priceFilter) - ); + updatedProducts = updatedProducts.filter( + (product) => product.price <= parseInt(priceFilter, 10) + );src/User/pages/Latest_in_the_Market/HandMadeSoaps.jsx (3)
101-103: Fix heading text spacing/casing in the grid title.“HandMadeSoaps” reads as a code identifier. Prefer a human-readable title.
- headingText="HandMadeSoaps" + headingText="Handmade Soaps"
88-90: Refine meta description to match handmade soaps.More specific copy can improve CTR and search relevance.
- <meta name="description" content="Explore a wide range of beauty and wellness products at VigyBag. Find the best products to enhance your beauty and wellbeing." /> + <meta + name="description" + content="Explore handmade soaps at VigyBag—artisanal bars and skin-care picks with natural fragrances. Filter by category, price, and rating." + />
70-72: Specify parseInt radix for correctness.- updatedProducts = updatedProducts.filter( - (product) => product.price <= parseInt(priceFilter) - ); + updatedProducts = updatedProducts.filter( + (product) => product.price <= parseInt(priceFilter, 10) + );src/User/pages/Popular_Categories/Customized-Gifts.jsx (2)
85-87: Use a gifts-focused meta description.Current copy is about “beauty and wellness”. Tailor it to gifts.
<Helmet> <title>Customized Gifts | VigyBag</title> - <meta name="description" content="Explore a wide range of beauty and wellness products at VigyBag. Find the best products to enhance your beauty and wellbeing." /> + <meta + name="description" + content="Find customized gifts at VigyBag—personalized watches, accessories, and more. Filter by category, price, and rating to pick the perfect gift." + /> </Helmet>
68-70: Add radix to parseInt for clarity.- updatedProducts = updatedProducts.filter( - (product) => product.price <= parseInt(priceFilter) - ); + updatedProducts = updatedProducts.filter( + (product) => product.price <= parseInt(priceFilter, 10) + );src/User/pages/Popular_Categories/Body-Care.jsx (2)
86-88: Optional: make the meta description more body-care specific.Current copy is generic; consider a short, targeted description.
- <meta name="description" content="Explore a wide range of beauty and wellness products at VigyBag. Find the best products to enhance your beauty and wellbeing." /> + <meta + name="description" + content="Shop body care at VigyBag—skin-care and fragrance essentials with ratings and price filters to refine your search." + />
68-70: Specify parseInt radix (or use Number) to avoid surprises.- updatedProducts = updatedProducts.filter( - (product) => product.price <= parseInt(priceFilter) - ); + updatedProducts = updatedProducts.filter( + (product) => product.price <= parseInt(priceFilter, 10) + );src/User/pages/Order/MyOrders.jsx (4)
114-116: Avoid duplicate title management; rely on Helmet to prevent flicker and inconsistencies.You’re setting the document title in both useEffect and . Prefer a single source of truth (Helmet).
Apply this diff to remove the redundant effect:
- useEffect(() => { - document.title = "VigyBag | My Orders"; - }, []);Additionally, update the import to drop useEffect (outside the selected range):
-import React, { useEffect } from "react"; +import React from "react";Also applies to: 118-130
18-28: Clipboard: add a non-secure-context fallback and avoid blocking alerts.navigator.clipboard.writeText may be unavailable (e.g., non-HTTPS or older browsers). Provide a fallback and use a non-blocking UX (toast) for consistency with the rest of the app.
Apply this diff to harden copy and keep alert as a minimal UX (feel free to swap alert with toast if available here):
-const copyToClipboard = (text) => { - navigator.clipboard - .writeText(text) - .then(() => { - alert("Order ID copied to clipboard!"); - }) - .catch((err) => { - alert("Failed to copy. Please try again!"); - console.error("Clipboard copy failed:", err); - }); -}; +const copyToClipboard = async (text) => { + try { + if (navigator.clipboard?.writeText) { + await navigator.clipboard.writeText(text); + } else { + const el = document.createElement("textarea"); + el.value = text; + el.setAttribute("readonly", ""); + el.style.position = "absolute"; + el.style.left = "-9999px"; + document.body.appendChild(el); + el.select(); + document.execCommand("copy"); + document.body.removeChild(el); + } + alert("Order ID copied to clipboard!"); + } catch (err) { + console.error("Clipboard copy failed:", err); + alert("Failed to copy. Please try again!"); + } +};
61-63: Nit: prefer Tailwind utilities over inline border styles for consistency.Inline styles block Tailwind/theming. Use border utilities instead.
Apply this diff:
- <div - className={`${containerBg} p-4 rounded-lg mb-4`} - style={{ border: "1px solid black" }}> + <div className={`${containerBg} p-4 rounded-lg mb-4 border border-black`}> @@ - <button - type="button" - className={`bg-zinc-200 text-zinc-700 ${buttonBase}`} - style={{ border: "1px solid black" }}> + <button + type="button" + className={`bg-zinc-200 text-zinc-700 ${buttonBase} border border-black`}>Also applies to: 83-83
41-47: Minor a11y: consider adding an accessible label tooltip.The emoji button has aria-label (good). Adding title="Copy order ID" will also provide a native tooltip.
- <button + <button onClick={() => copyToClipboard(orderNumber)} type="button" - className="ml-2 p-1 bg-zinc-200 hover:bg-zinc-300 rounded" - aria-label="Copy order ID"> + className="ml-2 p-1 bg-zinc-200 hover:bg-zinc-300 rounded" + aria-label="Copy order ID" + title="Copy order ID">src/User/pages/Popular_Categories/Beauty-Wellness.jsx (1)
24-41: Fetch concurrently to reduce latency (~3x faster for 3 categories).The sequential for..of adds avoidable delay. Promise.all keeps behavior and error handling simple.
Replace the loop with:
- // Fetch products from each category - for (let category of categoriesToFetch) { - const response = await axios.get(`https://dummyjson.com/products/category/${category}`); - if (response.data && Array.isArray(response.data.products)) { - const mappedProducts = response.data.products.map((product) => ({ - id: product.id, - title: product.title, - price: product.price, - category: product.category, - image: product.images[0] || "", - discountPercentage: product.discountPercentage, - rating: { - rate: product.rating, - count: product.reviews ? product.reviews.length : 0, - }, - })); - allProducts = [...allProducts, ...mappedProducts]; - } - } + // Fetch products concurrently from each category + const responses = await Promise.all( + categoriesToFetch.map((category) => + axios.get(`https://dummyjson.com/products/category/${category}`) + ) + ); + const allFetched = responses.flatMap((response) => + Array.isArray(response.data?.products) ? response.data.products : [] + ); + const mappedProducts = allFetched.map((product) => ({ + id: product.id, + title: product.title, + price: product.price, + category: product.category, + image: product.images?.[0] || "", + discountPercentage: product.discountPercentage, + rating: { + rate: product.rating, + count: product.reviews ? product.reviews.length : 0, + }, + })); + allProducts = mappedProducts;src/User/pages/Popular_Categories/Furniture-Decor.jsx (1)
24-42: Optional: parallelize category requests with Promise.all.Same pattern as other pages; parallel fetching reduces time-to-render.
I can provide a ready-to-paste Promise.all version mirroring the Beauty-Wellness suggestion if you want it here too.
src/User/pages/Order/Orderdetails.jsx (2)
64-68: Conflicting Tailwind classes: bg-white vs bg-[#fff0e3ff].Both background utilities are present; last one wins. Remove redundancy for clarity.
Apply this diff:
-const Card = ({ title, children }) => ( - <div className="bg-white p-4 rounded shadow bg-[#fff0e3ff] border-2 border-black"> +const Card = ({ title, children }) => ( + <div className="bg-[#fff0e3ff] p-4 rounded shadow border-2 border-black">
51-53: Breadcrumb a11y: mark the current page.Use aria-current on the last breadcrumb link.
- <Link to="/orderDetails" className="hover:underline"> + <Link to="/orderDetails" aria-current="page" className="hover:underline"> Order Details </Link>src/User/pages/Popular_Categories/Printing-Stationery.jsx (2)
22-23: Content/data mismatch: categories don’t align with “Printing & Stationery”.The dummyjson dataset doesn’t provide a “stationery/printing” category list, and the chosen categories are electronics/accessories. Consider either:
- Option A: Rename this page and SEO to “Electronics & Accessories”, keeping the current categories.
- Option B: Keep “Printing & Stationery” but curate results by filtering titles/keywords across categories, or switch to a dataset that includes stationery SKUs.
For reference, DummyJSON’s category list includes items like “laptops”, “smartphones”, “mobile-accessories”, “sports-accessories”, “skin-care”, “fragrances”, etc., but not “stationery”. (dummyjson.com)
If you want, I can:
- draft Option A diffs (title/heading/routes),
- or implement Option B with a keyword-based filter over a few broader categories (e.g., home-decoration, tops) to simulate stationery-like items.
24-43: Optional: parallelize category requests as in other pages.Same Promise.all suggestion applies here for faster loads.
src/User/pages/Popular_Categories/Health-Supplements.jsx (2)
88-89: Tune the meta description for page relevance (SEO nit).
Current copy targets “beauty and wellness” while this page is “Health Supplements.” Consider making it page-specific.Apply:
- <meta name="description" content="Explore a wide range of beauty and wellness products at VigyBag. Find the best products to enhance your beauty and wellbeing." /> + <meta + name="description" + content="Discover curated health supplements, vitamins, and wellness essentials at VigyBag. Compare prices, ratings, and find the right nutrition for you." + />
70-70: Parsing price with parseInt may drop decimals; prefer Number() or radix 10.
If priceFilter includes decimals (e.g., "199.99"), parseInt will truncate. Use Number() for numeric comparison or specify radix.- (product) => product.price <= parseInt(priceFilter) + (product) => product.price <= Number(priceFilter)package.json (3)
30-30: Unusual dependency: “node” should not be listed as an app dependency.
The runtime is provided by the environment; keeping "node" in dependencies can bloat installs and cause confusion.- "node": "^22.7.0",
50-51: Duplicate/typo dependency: styled-component vs styled-components.
Having both can confuse the bundler and developers. The canonical lib is styled-components.- "styled-component": "^2.8.0", "styled-components": "^6.1.15",
14-14: Three EmailJS packages present; consolidate to a single, intended one.
Having @emailjs/browser, emailjs, and emailjs-com together is redundant and risks version drift.Consider keeping only @emailjs/browser (the current recommendation) and removing the others:
"@emailjs/browser": "^4.3.3", - "emailjs": "^4.0.3", - "emailjs-com": "^3.2.0",Also applies to: 19-20
src/User/pages/Latest_in_the_Market/ArtSupplies.jsx (2)
23-23: Category list seems misaligned with “Art Supplies.”
"tablets", "sports-accessories", and "womens-bags" don’t map to art supplies. Consider categories that better fit, or adjust the page title/content to match.
89-91: Align meta description with page content (SEO nit).
Copy references “beauty and wellness” on an Art Supplies page.- <meta name="description" content="Explore a wide range of beauty and wellness products at VigyBag. Find the best products to enhance your beauty and wellbeing." /> + <meta + name="description" + content="Shop paints, brushes, sketchbooks, and premium art supplies at VigyBag. Compare ratings and prices to fuel your creativity." + />src/User/pages/Popular_Categories/Food-Beverages.jsx (1)
86-88: Meta description references the wrong vertical.
This page is “Food & Beverages” but the copy says “beauty and wellness.”- <meta name="description" content="Explore a wide range of beauty and wellness products at VigyBag. Find the best products to enhance your beauty and wellbeing." /> + <meta + name="description" + content="Explore snacks, pantry staples, and gourmet beverages at VigyBag. Filter by price and rating to find your next favorite." + />src/User/pages/Latest_in_the_Market/CeramicDinnerware.jsx (2)
103-103: Minor UI polish: add a space in the heading text.
Improves presentation consistency.- headingText="CeramicDinnerware" + headingText="Ceramic Dinnerware"
89-91: Page-specific meta description (SEO nit).
Tailor to “Ceramic Dinnerware” for better search relevance.- <meta name="description" content="Explore a wide range of beauty and wellness products at VigyBag. Find the best products to enhance your beauty and wellbeing." /> + <meta + name="description" + content="Browse ceramic plates, bowls, and dinner sets at VigyBag. Quality, style, and great prices for your dining table." + />src/User/components/Navbar/UserNavbar.jsx (1)
117-118: Decide visibility: “Meet the Makers” is commented out in the public navIf the intent is to expose this page publicly (not just via the user dropdown), uncomment this entry.
If intended to be visible, apply:
- // { to: "/meet-the-makers", text: "Meet the Makers" }, + { to: "/meet-the-makers", text: "Meet the Makers" },If it should remain members-only, consider adding a short comment clarifying the intent to avoid future confusion.
tailwind.config.js (1)
15-23: Account for reduced motion to improve accessibilityThe bounce motion can bother motion-sensitive users. Recommend using Tailwind’s motion variants at usage sites: add
motion-reduce:animate-none(and optionallymotion-safe:animate-smooth-bounce) where this animation is applied.src/User/pages/MeetTheMakers/MeetTheMakers.jsx (7)
251-257: Lazy-load maker images to improve LCP and bandwidthAdd
loading="lazy"anddecoding="async"to defer non-critical images.- <img src={maker.image} alt={maker.name} className="w-full h-56 object-cover" /> + <img + src={maker.image} + alt={maker.name} + loading="lazy" + decoding="async" + className="w-full h-56 object-cover" + />
264-270: Also lazy-load item thumbnailsThumbnails are below the fold and can be deferred.
- <img src={item.image} alt={item.name} className="h-16 w-16 rounded object-cover mb-2" /> + <img + src={item.image} + alt={item.name} + loading="lazy" + decoding="async" + className="h-16 w-16 rounded object-cover mb-2" + />
259-261: Use stable keys for listsUsing
ias a key can cause subtle UI bugs on reordering. Use the value (it’s unique) for stability.- {maker.highlights.map((h, i) => ( - <li key={i}> {h}</li> + {maker.highlights.map((h) => ( + <li key={h}>{h}</li> ))}
265-269: Use a stable key for item gridPrefer
item.nameover index.- {maker.items.map((item, idx) => ( - <div key={idx} className="mx-2 my-2"> + {maker.items.map((item) => ( + <div key={item.name} className="mx-2 my-2"> ... </div> ))}
227-235: Announce the success state to assistive techMark the waiting/confirmation view as status text so screen readers are notified.
- <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-pink-50 to-yellow-50 p-6"> + <div + className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-pink-50 to-yellow-50 p-6" + role="status" + aria-live="polite" + >
239-244: Add page metadata with react-helmet-asyncGiven the app migrated to react-helmet-async, set a title/description for SEO.
Outside these lines, add:
import { Helmet } from "react-helmet-async";And inside the component’s return (top of the section):
<Helmet> <title>Meet the Makers • VigyBag</title> <meta name="description" content="Discover vibrant artisan stories and their beautiful crafts across India." /> </Helmet>I can push a small commit wiring Helmet if helpful.
39-211: Consider externalizing static contentThe large
makersarray with many asset imports bloats this bundle. Consider moving data to a JSON (and images to a CMS/CDN) or at least to a separate module that can be code-split if this page is route-level.src/User/components/HomPageCard/CategoryCard.jsx (2)
6-9: Improve focus-visible and animation performance
- Mirror hover effects for keyboard users with
group-focus-visible:*.- Use
transform-gpu will-change-transformon the animated container.- <Link to={path} className="block group"> + <Link to={path} className="block group focus:outline-none"> <div - className="relative w-full aspect-square max-w-[240px] mx-auto flex items-center justify-center overflow-hidden rounded-2xl shadow-lg transition-all duration-500 cursor-pointer group-hover:shadow-2xl group-hover:scale-[1.02] border border-white/20" + className="relative w-full aspect-square max-w-[240px] mx-auto flex items-center justify-center overflow-hidden rounded-2xl shadow-lg transition-all duration-500 cursor-pointer border border-white/20 transform-gpu will-change-transform group-hover:shadow-2xl group-hover:scale-[1.02] group-focus-visible:shadow-2xl group-focus-visible:scale-[1.02]" style={{
37-44: Mark decorative SVG as hidden from assistive techThe center arrow is purely decorative; hide it from screen readers.
- <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> + <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" focusable="false">src/User/components/HomPageCard/LatestInMarketCard.jsx (2)
13-17: Lazy-load product imagesDefer image loading to improve scroll performance.
- <img - src={img} - alt={name} - className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" - /> + <img + src={img} + alt={name} + loading="lazy" + decoding="async" + className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" + />
74-81: Wire up “Add to cart” or accept a callback propCurrently a no-op. Either integrate with the existing cart action or accept an
onAddToCart(product)prop.-function LatestInMarketCard({ product }) { +function LatestInMarketCard({ product, onAddToCart }) { ... onClick={(e) => { e.preventDefault(); - // Add to cart logic here + onAddToCart?.(product); }}I can refactor call sites to pass
onAddToCart(using your existingmanageCartItem) if you want.src/User/pages/Contributors/Contributors.jsx (5)
337-341: Avoid using array index as key for leadership cardsUse a stable key to prevent reconciliation issues.
- {leadershipData.map((leader, index) => ( - <div - key={index} + {leadershipData.map((leader) => ( + <div + key={leader.name} className="group ..."
436-439: Avoid using array index as key for contributors gridUse a stable key such as
contributor.name.- {displayedContributors.map((contributor, index) => ( - <div - key={index} + {displayedContributors.map((contributor) => ( + <div + key={contributor.name} className="group ..."
444-447: ProproleColoris passed but not used by ContributorCard
ContributorCardcurrently hardcodestext-green-300for the role (see its snippet). Either remove this prop here or update ContributorCard to accept and apply it.Proposed change in ContributorCard.jsx (outside this file):
-const ContributorCard = ({ name, role, image, socialLinks }) => { +const ContributorCard = ({ name, role, image, socialLinks, roleColor = "text-green-300" }) => { ... - <p className="text-sm text-green-300 font-medium">{role}</p> + <p className={\`text-sm font-medium \${roleColor}\`}>{role}</p>
299-303: Animation delay utilities don’t affect CSS animations
delay-1000/delay-2000affect transition delays, not animation delays. If you want staggeredanimate-pulse, set inlinestyle={{ animationDelay: "1s" }}or extend Tailwind with an animation-delay plugin.Example fix:
- <div className="absolute bottom-40 right-32 w-48 h-48 bg-orange-200 rounded-full opacity-10 blur-3xl animate-pulse delay-1000"></div> + <div className="absolute bottom-40 right-32 w-48 h-48 bg-orange-200 rounded-full opacity-10 blur-3xl animate-pulse" style={{ animationDelay: "1s" }}></div>
531-559:<style jsx>is Next.js specific; without styled-jsx it won’t scope CSSIf this project isn’t using styled-jsx, the
jsxattribute is ignored and the CSS leaks globally. Either:
- Move this CSS to a module/global stylesheet, or
- Replace with Tailwind utilities, or
- Install and configure styled-jsx.
Minimal safe change in this file:
- <style jsx>{` + <style>{` /* styles ... */ `}</style>Or migrate rules to Tailwind where feasible.
src/User/pages/Certification/Certification.jsx (5)
100-123: Confetti runs for 15s; consider reducing duration and respecting reduced-motion15 seconds of continuous confetti at ~10 particles/frame can be heavy on low-end devices. Honor prefers-reduced-motion and cut duration to ~2–3s.
Apply this diff to tone down the effect:
- const end = Date.now() + (15 * 1000); + const prefersReduced = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; + const end = Date.now() + (prefersReduced ? 0 : 3000);Optionally short-circuit the animation if
prefersReducedis true.
153-165: html2canvas options: disable verbose logging and use correct boolean type
letterRenderingexpects a boolean; alsologging: trueis noisy in production.html2canvas(certificateRef.current, { - scale: 4, - useCORS: true, - logging: true, - letterRendering: 1, + scale: 4, + useCORS: true, + logging: false, + letterRendering: true, }).then((canvas) => {Also note: quality parameter in
canvas.toDataURL("image/png", 1.0)is ignored for PNG; safe to remove for clarity.
167-192: PDF rendering scale 10 is memory-heavy; consider a saner upper boundScale 10 can create extremely large canvases and crash mobile Safari. Cap scale to 3–4 or compute dynamically from DPR.
- html2canvas(certificateRef.current, { - scale: 10, + html2canvas(certificateRef.current, { + scale: Math.min(window.devicePixelRatio * 2, 4), useCORS: true, - logging: true, - letterRendering: 1, + logging: false, + letterRendering: true, }).then((canvas) => {If fidelity is insufficient, consider rendering the base certificate as an image inside jsPDF and overlaying text with jsPDF text APIs to avoid massive canvases.
21-53: Client-side GitHub API polling can hit rate limits and leak UX errorsLooping through all contributor pages from the browser is fragile (60 unauth’d reqs/hour/IP). A spike of verifications can exhaust quota.
- Move contribution verification behind a lightweight serverless endpoint that caches results (ETag/If-None-Match) and uses an app token.
- Return a compact {isContributor, userId, name} payload; keep the UI unchanged.
- Add progressive error messaging for 403 rate-limit responses (X-RateLimit-Remaining/Reset).
If you’d like, I can draft a minimal Cloudflare Worker/Netlify Function for this.
Also applies to: 55-65
291-303: Name field becomes read-only after verification—confirm intended UXLocking the name prevents users from correcting casing or using a preferred display name differing from GitHub. Consider allowing edits post-verify while preserving the verified GitHub username separately.
src/User/components/DownArrow/downArrow.jsx (1)
6-10: Make the arrow actually interactive and accessibleIt looks clickable (
cursor-pointer) but has no handler. Accept anonClickprop and add keyboard support.Apply this diff:
-const DownArrow = () => { - return ( - <img - src={Arrow} - alt="Down Arrow" - className="w-10 animate-smooth-bounce cursor-pointer" - /> - ); -}; +const DownArrow = ({ onClick }) => ( + <img + src={Arrow} + alt="Scroll down" + role="button" + tabIndex={0} + onClick={onClick} + onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onClick?.(e)} + className="w-10 animate-smooth-bounce cursor-pointer outline-none focus:ring-2 focus:ring-emerald-500 rounded-full" + /> +);Then pass
onClickfrom the caller (see Home.jsx comment).src/User/pages/Home/Home.jsx (2)
242-246: Hook up DownArrow to scroll for better UX + a11yCurrently decorative only. Wire it to
scrollToSectionand add an accessible label (handled in the component change).- <div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 z-20"> - <DownArrow /> + <div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 z-20"> + <DownArrow onClick={scrollToSection} /> </div>
290-297: Heavy background animations—respect reduced motionMultiple infinite
bounce/ping/pulseshapes can be distracting and battery-heavy. Add motion-reduce fallbacks.- <div className="absolute top-20 left-20 w-24 h-24 bg-emerald-400 rounded-full animate-bounce"></div> - <div className="absolute bottom-32 right-32 w-20 h-20 bg-orange-400 rounded-full animate-pulse"></div> - <div className="absolute top-1/2 left-1/3 w-16 h-16 bg-teal-400 rounded-full animate-ping"></div> + <div className="absolute top-20 left-20 w-24 h-24 bg-emerald-400 rounded-full animate-bounce motion-reduce:animate-none"></div> + <div className="absolute bottom-32 right-32 w-20 h-20 bg-orange-400 rounded-full animate-pulse motion-reduce:animate-none"></div> + <div className="absolute top-1/2 left-1/3 w-16 h-16 bg-teal-400 rounded-full animate-ping motion-reduce:animate-none"></div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (35)
package-lock.jsonis excluded by!**/package-lock.jsonsrc/assets/aarti.jpegis excluded by!**/*.jpegsrc/assets/ashaben.jpegis excluded by!**/*.jpegsrc/assets/career_page_cover.pngis excluded by!**/*.pngsrc/assets/chair.jpegis excluded by!**/*.jpegsrc/assets/chairs.jpegis excluded by!**/*.jpegsrc/assets/clutch.jpegis excluded by!**/*.jpegsrc/assets/embellscarf.jpegis excluded by!**/*.jpegsrc/assets/embrbags.jpegis excluded by!**/*.jpegsrc/assets/envelope.jpegis excluded by!**/*.jpegsrc/assets/kantha.jpgis excluded by!**/*.jpgsrc/assets/kanthasaree.jpegis excluded by!**/*.jpegsrc/assets/kashmir.jpgis excluded by!**/*.jpgsrc/assets/lamp.jpegis excluded by!**/*.jpegsrc/assets/leaf.jpegis excluded by!**/*.jpegsrc/assets/mat.jpegis excluded by!**/*.jpegsrc/assets/oil.jpgis excluded by!**/*.jpgsrc/assets/paper.jpegis excluded by!**/*.jpegsrc/assets/pashmina.jpegis excluded by!**/*.jpegsrc/assets/patchwork.jpegis excluded by!**/*.jpegsrc/assets/penstand.jpegis excluded by!**/*.jpegsrc/assets/potlibag.jpegis excluded by!**/*.jpegsrc/assets/quilt.jpegis excluded by!**/*.jpegsrc/assets/rani.jpgis excluded by!**/*.jpgsrc/assets/saree.jpegis excluded by!**/*.jpegsrc/assets/scarf.jpegis excluded by!**/*.jpegsrc/assets/shawl.jpegis excluded by!**/*.jpegsrc/assets/suresh.jpgis excluded by!**/*.jpgsrc/assets/teainfused.jpegis excluded by!**/*.jpegsrc/assets/teaset.jpegis excluded by!**/*.jpegsrc/assets/temple.jpegis excluded by!**/*.jpegsrc/assets/toys.jpegis excluded by!**/*.jpegsrc/assets/wallart.jpegis excluded by!**/*.jpegsrc/assets/wood.jpegis excluded by!**/*.jpegsrc/assets/wrap.jpegis excluded by!**/*.jpeg
📒 Files selected for processing (32)
package.json(1 hunks)src/App.jsx(3 hunks)src/User/components/DownArrow/downArrow.jsx(1 hunks)src/User/components/HomPageCard/CategoryCard.jsx(1 hunks)src/User/components/HomPageCard/LatestInMarketCard.jsx(1 hunks)src/User/components/Navbar/UserNavbar.jsx(2 hunks)src/User/pages/Career-Page/careerPage.css(1 hunks)src/User/pages/Career-Page/careerPage.jsx(2 hunks)src/User/pages/Certification/Certification.jsx(3 hunks)src/User/pages/Contributors/Contributors.jsx(6 hunks)src/User/pages/Home/Home.jsx(1 hunks)src/User/pages/Latest_in_the_Market/ArtSupplies.jsx(1 hunks)src/User/pages/Latest_in_the_Market/BambooProducts.jsx(1 hunks)src/User/pages/Latest_in_the_Market/CeramicDinnerware.jsx(1 hunks)src/User/pages/Latest_in_the_Market/HandMadeSoaps.jsx(1 hunks)src/User/pages/Latest_in_the_Market/NaturalCosmetics.jsx(1 hunks)src/User/pages/Latest_in_the_Market/OrganicSoaps.jsx(1 hunks)src/User/pages/Latest_in_the_Market/OrganicTea.jsx(1 hunks)src/User/pages/Latest_in_the_Market/StorageBaskets.jsx(1 hunks)src/User/pages/MeetTheMakers/MeetTheMakers.jsx(1 hunks)src/User/pages/Order/MyOrders.jsx(1 hunks)src/User/pages/Order/Orderdetails.jsx(1 hunks)src/User/pages/Popular_Categories/Beauty-Wellness.jsx(1 hunks)src/User/pages/Popular_Categories/Body-Care.jsx(1 hunks)src/User/pages/Popular_Categories/Customized-Gifts.jsx(1 hunks)src/User/pages/Popular_Categories/Fashion-Accessories.jsx(1 hunks)src/User/pages/Popular_Categories/Food-Beverages.jsx(1 hunks)src/User/pages/Popular_Categories/Furniture-Decor.jsx(1 hunks)src/User/pages/Popular_Categories/Health-Supplements.jsx(1 hunks)src/User/pages/Popular_Categories/Printing-Stationery.jsx(1 hunks)src/main.jsx(2 hunks)tailwind.config.js(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2024-08-10T11:21:57.939Z
Learnt from: techy4shri
PR: codervivek5/VigyBag#2198
File: src/User/pages/Latest_in_the_Market/ArtSupplies.jsx:6-7
Timestamp: 2024-08-10T11:21:57.939Z
Learning: When the user techy4shri prefers using `react-helmet` over `react-helmet-async` due to errors encountered with the latter, acknowledge their choice and avoid suggesting the change again without new context.
Applied to files:
src/User/pages/Latest_in_the_Market/HandMadeSoaps.jsxsrc/User/pages/Popular_Categories/Fashion-Accessories.jsxsrc/User/pages/Popular_Categories/Customized-Gifts.jsxpackage.jsonsrc/User/pages/Popular_Categories/Printing-Stationery.jsxsrc/User/pages/Order/Orderdetails.jsxsrc/User/pages/Latest_in_the_Market/NaturalCosmetics.jsxsrc/User/pages/Latest_in_the_Market/OrganicTea.jsxsrc/User/pages/Latest_in_the_Market/ArtSupplies.jsxsrc/User/pages/Latest_in_the_Market/OrganicSoaps.jsxsrc/User/pages/Popular_Categories/Body-Care.jsxsrc/User/pages/Popular_Categories/Health-Supplements.jsx
📚 Learning: 2024-07-05T14:59:58.269Z
Learnt from: codervivek5
PR: codervivek5/VigyBag#1686
File: src/pages/Order/Cart.jsx:53-55
Timestamp: 2024-07-05T14:59:58.269Z
Learning: When replacing a `script` tag in a React component, consider using a React-compatible library or component such as `react-lord-icon` for `lord-icon` functionality.
Applied to files:
src/User/pages/Order/Orderdetails.jsx
🧬 Code graph analysis (6)
src/main.jsx (1)
src/App.jsx (1)
App(88-274)
src/User/components/HomPageCard/LatestInMarketCard.jsx (1)
src/User/components/Popular_Categories/ProductGrid.jsx (1)
ProductCard(35-142)
src/App.jsx (1)
src/User/pages/MeetTheMakers/MeetTheMakers.jsx (1)
MeetTheMakers(213-313)
src/User/pages/Career-Page/careerPage.jsx (2)
src/User/components/About/CarrerHeader.jsx (1)
Header(4-42)src/User/pages/Service-Page/service.jsx (2)
leadershipData(16-144)leader(105-138)
src/User/pages/Contributors/Contributors.jsx (1)
src/User/components/About/ContributorCard.jsx (1)
ContributorCard(3-32)
src/User/pages/Home/Home.jsx (4)
src/User/pages/Home/SearchBar.jsx (1)
SearchBar(4-28)src/User/components/DownArrow/downArrow.jsx (1)
DownArrow(4-12)src/User/components/HomPageCard/CategoryCard.jsx (1)
CategoryCard(4-51)src/User/components/HomPageCard/LatestInMarketCard.jsx (1)
product(5-5)
| className="group backdrop-blur-xl bg-white/80 rounded-3xl shadow-2xl border border-white/20 overflow-hidden transform transition-all duration-700 hover:scale-[1.02] hover:shadow-3xl" | ||
| style={{ | ||
| animationDelay: `${index * 200}ms` | ||
| }} | ||
| > |
There was a problem hiding this comment.
Make card container positioned and fix unsupported shadow class
- Add
relativeso the absolute border glow at lines 407–409 anchors correctly. - Tailwind doesn’t include
shadow-3xlby default. Useshadow-2xlor extendboxShadowin the config.
- className="group backdrop-blur-xl bg-white/80 rounded-3xl shadow-2xl border border-white/20 overflow-hidden transform transition-all duration-700 hover:scale-[1.02] hover:shadow-3xl"
+ className="group relative backdrop-blur-xl bg-white/80 rounded-3xl shadow-2xl border border-white/20 overflow-hidden transform transition-all duration-700 hover:scale-[1.02] hover:shadow-2xl"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className="group backdrop-blur-xl bg-white/80 rounded-3xl shadow-2xl border border-white/20 overflow-hidden transform transition-all duration-700 hover:scale-[1.02] hover:shadow-3xl" | |
| style={{ | |
| animationDelay: `${index * 200}ms` | |
| }} | |
| > | |
| className="group relative backdrop-blur-xl bg-white/80 rounded-3xl shadow-2xl border border-white/20 overflow-hidden transform transition-all duration-700 hover:scale-[1.02] hover:shadow-2xl" | |
| style={{ | |
| animationDelay: `${index * 200}ms` | |
| }} | |
| > |
🤖 Prompt for AI Agents
In src/User/pages/Contributors/Contributors.jsx around lines 340–344 (affects
absolute border glow at lines 407–409), the card container needs positioning and
the shadow utility is unsupported; add the "relative" class to the container's
className so the absolute glow elements anchor correctly, and replace the
unsupported "shadow-3xl" with a valid Tailwind shadow like "shadow-2xl" (or
alternatively extend boxShadow in tailwind.config.js if you require a larger
custom shadow).
There was a problem hiding this comment.
@codervivek5, I can see the CodeRabbit comment is highlighting valid CSS issues in the Contributors.jsx file:
-
Missing positioning context: The card container needs
relativeclass so the absolute border glow effect (at lines 407-409) anchors correctly to the card instead of the viewport. -
Unsupported shadow utility:
shadow-3xlisn't a default Tailwind class. It should beshadow-2xlor you'd need to extend theboxShadowconfiguration intailwind.config.js.
The suggested fix is correct:
className="group relative backdrop-blur-xl bg-white/80 rounded-3xl shadow-2xl border border-white/20 overflow-hidden transform transition-all duration-700 hover:scale-[1.02] hover:shadow-2xl"This will ensure proper positioning for the border glow overlay and use valid Tailwind utilities. Would you like me to help identify any similar issues in other parts of the codebase?
| {displayedContributors.map((contributor, index) => ( | ||
| <div | ||
| key={index} | ||
| {...contributor} | ||
| roleColor="text-green-600" | ||
| /> | ||
| className="group backdrop-blur-sm bg-white/90 rounded-2xl shadow-xl border border-white/50 overflow-hidden transform transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl" | ||
| style={{ | ||
| animationDelay: `${index * 100}ms` | ||
| }} | ||
| > | ||
| <ContributorCard | ||
| {...contributor} | ||
| roleColor="text-emerald-600" | ||
| /> | ||
|
|
||
| {/* ENHANCED: Hover overlay */} | ||
| <div className="absolute inset-0 bg-gradient-to-t from-emerald-600/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-2xl"></div> | ||
| </div> | ||
| ))} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Contributor card wrapper should be positioned for the hover overlay
Add relative to ensure the absolute overlay at line 450 anchors correctly.
- <div
+ <div
key={index}
- className="group backdrop-blur-sm bg-white/90 rounded-2xl shadow-xl border border-white/50 overflow-hidden transform transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl"
+ className="group relative backdrop-blur-sm bg-white/90 rounded-2xl shadow-xl border border-white/50 overflow-hidden transform transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl"
style={{
animationDelay: `${index * 100}ms`
}}
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {displayedContributors.map((contributor, index) => ( | |
| <div | |
| key={index} | |
| {...contributor} | |
| roleColor="text-green-600" | |
| /> | |
| className="group backdrop-blur-sm bg-white/90 rounded-2xl shadow-xl border border-white/50 overflow-hidden transform transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl" | |
| style={{ | |
| animationDelay: `${index * 100}ms` | |
| }} | |
| > | |
| <ContributorCard | |
| {...contributor} | |
| roleColor="text-emerald-600" | |
| /> | |
| {/* ENHANCED: Hover overlay */} | |
| <div className="absolute inset-0 bg-gradient-to-t from-emerald-600/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-2xl"></div> | |
| </div> | |
| ))} | |
| {displayedContributors.map((contributor, index) => ( | |
| <div | |
| key={index} | |
| className="group relative backdrop-blur-sm bg-white/90 rounded-2xl shadow-xl border border-white/50 overflow-hidden transform transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl" | |
| style={{ | |
| animationDelay: `${index * 100}ms` | |
| }} | |
| > | |
| <ContributorCard | |
| {...contributor} | |
| roleColor="text-emerald-600" | |
| /> | |
| {/* ENHANCED: Hover overlay */} | |
| <div className="absolute inset-0 bg-gradient-to-t from-emerald-600/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-2xl"></div> | |
| </div> | |
| ))} |
🤖 Prompt for AI Agents
In src/User/pages/Contributors/Contributors.jsx around lines 436 to 452, the
outer wrapper div that contains the ContributorCard and the absolute hover
overlay is missing relative positioning, so the absolute overlay has no proper
anchor; update the wrapper div's className to include "relative" (add it to the
existing class string) so the absolute inset-0 overlay positions correctly and
continues to inherit the rounded corners.
There was a problem hiding this comment.
@codervivek5, CodeRabbit's suggestion is spot-on! The wrapper div needs relative positioning for the absolute hover overlay to anchor correctly.
Without relative on the wrapper, the absolute inset-0 overlay will position itself relative to the nearest positioned ancestor (likely the viewport), not the intended card wrapper. Adding relative ensures the overlay stays within the card boundaries and inherits the rounded corners properly.
The suggestion correctly identifies this CSS positioning issue and provides the right fix - simply adding relative to the existing className.
🐰
(\ /)
( ._. )
o_(")(")
| keyframes: { | ||
| 'smooth-bounce': { | ||
| '0%, 100%': { transform: 'translateY(0)' }, | ||
| '50%': { transform: 'translateY(20px)' }, | ||
| }, | ||
| }, | ||
| animation: { | ||
| 'smooth-bounce': 'smooth-bounce 2s infinite ease-in-out', | ||
| }, |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Line-clamp utilities are used elsewhere but the plugin isn’t enabled
LatestInMarketCard uses line-clamp-1 and line-clamp-2. Unless the line-clamp plugin is enabled, those classes will be ignored. Consider adding the official plugin.
Outside the selected lines, update tailwind.config.js as follows:
-/** @type {import('tailwindcss').Config} */
-export default {
+/** @type {import('tailwindcss').Config} */
+import lineClamp from '@tailwindcss/line-clamp';
+export default {
// ...
- plugins: [],
+ plugins: [lineClamp],
}If the plugin is already present elsewhere in the repo, feel free to ignore. Otherwise, after adding it, run a quick build to confirm line-clamp-* utilities are generated.
🏁 Script executed:
#!/bin/bash
# Search for line-clamp plugin references in the repository
# 1. Check for package dependency
grep -R '"@tailwindcss/line-clamp"' -n package.json
# 2. Search for import or require usage
rg -n "@tailwindcss/line-clamp"
# 3. Search for plugin registration in Tailwind config
rg -n "plugins" -C3 tailwind.config.js
# 4. Look for any lineClamp identifier references
rg -n "lineClamp"Length of output: 195
Add the official Tailwind Line-Clamp plugin
Our inspection confirms that the @tailwindcss/line-clamp package isn’t installed (no entry in package.json) and isn’t imported or registered in tailwind.config.js (the plugins array is empty). Without it, classes like line-clamp-1 and line-clamp-2 won’t be generated.
Please make the following updates:
- Install the plugin as a dev dependency:
npm install -D @tailwindcss/line-clamp
- In
tailwind.config.js, import and register the plugin. For example:/** @type {import('tailwindcss').Config} */ -export default { +import lineClamp from '@tailwindcss/line-clamp'; +export default { // ... - plugins: [], + plugins: [lineClamp], } - After applying these changes, run your build (e.g.,
npm run build) to verify thatline-clamp-*utilities are now generated.
🤖 Prompt for AI Agents
In tailwind.config.js around lines 15 to 23, the config currently defines
keyframes and animations but does not import or register the official Tailwind
line-clamp plugin; install the plugin as a dev dependency (npm install -D
@tailwindcss/line-clamp), then import it at the top of tailwind.config.js and
add it to the plugins array so Tailwind generates line-clamp-* utilities, and
finally run your build (e.g., npm run build) to verify the utilities are
produced.
codervivek5
added
the
3⭐⭐⭐
src/assets/career_page_cover.png
Outdated
There was a problem hiding this comment.
try to use any SVG or WebP image instead of this big size image because it will take more time to load ... 9.36 MB is very big size
There was a problem hiding this comment.
Good point. I've replaced it with a WebP file. Now it is 176kb.
There was a problem hiding this comment.
Add a screenshot of new generate certification with your changes and whole certificate page as well
| className="group backdrop-blur-xl bg-white/80 rounded-3xl shadow-2xl border border-white/20 overflow-hidden transform transition-all duration-700 hover:scale-[1.02] hover:shadow-3xl" | ||
| style={{ | ||
| animationDelay: `${index * 200}ms` | ||
| }} | ||
| > |
| { | ||
| name: "Twitter", | ||
| url: "https://twitter.com/MahimaGupt6433", | ||
| url: "https://twitter.com/MahimatestGithub", |
There was a problem hiding this comment.
your have change the username but it is not exit ?
so why you have change it ?
| {displayedContributors.map((contributor, index) => ( | ||
| <div | ||
| key={index} | ||
| {...contributor} | ||
| roleColor="text-green-600" | ||
| /> | ||
| className="group backdrop-blur-sm bg-white/90 rounded-2xl shadow-xl border border-white/50 overflow-hidden transform transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl" | ||
| style={{ | ||
| animationDelay: `${index * 100}ms` | ||
| }} | ||
| > | ||
| <ContributorCard | ||
| {...contributor} | ||
| roleColor="text-emerald-600" | ||
| /> | ||
|
|
||
| {/* ENHANCED: Hover overlay */} | ||
| <div className="absolute inset-0 bg-gradient-to-t from-emerald-600/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-2xl"></div> | ||
| </div> | ||
| ))} |
|
Also solve the merge conflict and I suggest you that test it properly in your local because if any things will occur in the production then I have to revert it back |
|
Just to clarify — the only file I authored changes in is careerPage.jsx. The other commits and file changes are from upstream that came during a rebase, and were not written by me. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (7)
src/User/pages/Career-Page/careerPage.jsx (7)
47-47: Stabilize hero height to prevent CLS and anchor the overlay.Apply:
- <div className="relative mt-8"> + <div className="relative mt-8 min-h-[300px] md:min-h-[480px]">
64-69: Use Tailwind class instead of inline style; mark decorative bg as hidden from AT.Apply:
- <div className="absolute inset-0 w-full h-full pointer-events-none z-0"> + <div className="absolute inset-0 w-full h-full pointer-events-none z-0" aria-hidden="true"> <div className="absolute top-0 left-0 w-full h-1/2 bg-[#f0fdf4]" /> - <div className="absolute bottom-0 left-0 w-full h-1/2" style={{ background: "#97c49f" }} /> + <div className="absolute bottom-0 left-0 w-full h-1/2 bg-[#97c49f]" /> </div>
75-75: Enhance grid responsiveness at tablet widths.Apply:
- <div className="grid grid-cols-1 md:grid-cols-4 gap-6 md:gap-8 w-full max-w-7xl mx-auto"> + <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 w-full max-w-7xl mx-auto">
76-81: Use stable keys and drop unnecessary minWidth in a CSS grid.Apply:
- {leadershipData.map((leader, index) => ( + {leadershipData.map((leader) => ( <div - key={index} + key={leader.name} className="bg-white rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 w-full" - style={{ minWidth: 0 }} >
83-87: Lazy-load non-hero images to improve page performance.Apply:
<img src={leader.image} alt={leader.name} className="w-full h-full object-cover" + loading="lazy" + decoding="async" />
50-58: Copy consistency: “Maximise” vs “Maximize”.If your brand voice targets US English elsewhere, align spelling (“Maximize”) for consistency. If UK English is intentional, ignore.
12-17: Tighten role labels for clarity.Consider “UI/UX Design” (not “Graphic Designing”) and “E‑commerce Content Writing” for concise, industry-standard phrasing.
Also applies to: 33-38
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
src/User/pages/Career-Page/careerPage.jsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/User/pages/Career-Page/careerPage.jsx (2)
src/User/components/About/CarrerHeader.jsx (1)
Header(4-42)src/User/pages/Service-Page/service.jsx (2)
leadershipData(16-144)leader(105-138)
🔇 Additional comments (3)
src/User/pages/Career-Page/careerPage.jsx (3)
71-74: LGTM: Section structure and visual hierarchy are solid.Clear H2, layered background, and contained grid improve scannability.
44-61: Double-hero check: confirm intent.Header renders a full-viewport hero (CarrerHeader) followed by this page-specific hero. If not intentional, consider removing one to reduce scroll depth and improve FCP.
Would you like a follow-up patch to conditionally show only the page hero on Career?
48-59: Added descriptive alt text, image loading hints, contrast overlay & responsive text container
Please manually verify at ≤375 px and ~768 px widths that the headings don’t wrap awkwardly.
|
I’ve resolved the merge conflict in package.json and tested it locally. Everything looks good now. Please let me know if you face any issues. |
|
Hi! I noticed CodeRabbit is generating a massive number of comments, sometimes even repeating the same feedback and, oddly enough, even generating poems. Though some suggestions are useful, the volume makes it hard to focus on the actual review. Would you be open to tuning or limiting Coderrabbit’s config so the feedback is less noisy? |
Actually this is a exteral service so i can do anything in their responce .... you can update only required changes do not need to use the whole code generated by the code rabbit |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
[17:30:47.042] Running build in Washington, D.C., USA (East) – iad1 look at this error uring eployement in vercel |
|
The Vercel build error looks related to Rollup dependencies (@rollup/rollup-linux-x64-gnu) and not to my changes — I only modified careerPage.jsx. |
3 participants
Fixes Issue
Closes #2615
Changes proposed
Screenshots
Before:
After:
Summary by CodeRabbit
New Features
Style
Chores