Commit that shit v2

[ashworks1706]

No description provided.

[Copilot]

Pull request overview

Adds an informational points breakdown panel to the Shop landing page hero carousel and adjusts Shop UI layout to better accommodate the new content.

Changes:

• Add PointsBreakdownTable and render it as an optional rightPanel in ProductCarousel.
• Update ProductCarousel layout/animations to support a two-column (text + panel) hero section.
• Adjust CategorySection visuals (title sizing, spacing, and a new static section title overlay).

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
src/pages/Shop/ShopIndex.tsx	Injects the points breakdown table into the hero carousel via the new rightPanel prop.
src/components/Shop/ProductCarousel.tsx	Adds rightPanel support and updates responsive layout/animation behavior.
src/components/Shop/PointsBreakdownTable.tsx	New component rendering a points breakdown table for the Shop hero panel.
src/components/Shop/CategorySection.tsx	Removes hover state logic and revises sizing/spacing + adds a static title overlay.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

---

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

---

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

isMobile is initialized by reading window.innerWidth during render. This will throw in any non-browser runtime (e.g., SSR/prerendering or node-based tooling). Consider guarding with typeof window !== "undefined" (or initializing to a safe default and setting it inside useEffect/matchMedia).

Suggested change

	const [isMobile, setIsMobile] = useState(() => window.innerWidth < 1024);
	useEffect(() => {
	const handleResize = () => setIsMobile(window.innerWidth < 1024);
	window.addEventListener("resize", handleResize);
	return () => window.removeEventListener("resize", handleResize);
	const [isMobile, setIsMobile] = useState(false);
	useEffect(() => {
	if (typeof window === "undefined") {
	return;
	}
	const handleResize = () => setIsMobile(window.innerWidth < 1024);
	// Set initial value on mount in the browser
	handleResize();
	window.addEventListener("resize", handleResize);
	return () => {
	window.removeEventListener("resize", handleResize);
	};

[Copilot]

For better table accessibility, consider adding an (sr-only) <caption> describing the table and using scope="col" on the header cells so screen readers can correctly associate headers with data cells.

[Copilot]

The table rows use an index-based key (${ci}-${ri}), which can lead to unnecessary remounts if categories/rows are reordered. Prefer a stable key derived from the data (e.g., cat.label + row.activity, or add an explicit id).