feat: added sponsors section in homepage

[rohansen856]

This pull request introduces a new "Sponsors" section to the homepage, visually highlighting both sponsors and food partners with animated logos and a thank-you message. The main changes involve importing and integrating the new Sponsors component into the homepage, and implementing the component itself with styled layouts and floating animations.

Homepage integration:

• Added the Sponsors component import to src/app/page.tsx, and inserted a new section for sponsors between the prizes and contact sections. [1] [2]

New Sponsors section implementation:

• Created src/components/Sponsors.tsx with:
  • A list of sponsors and food partners, each with a name, type, and logo.
  • Distinct display areas for sponsors and food partners, each showing logos with floating animations and styled cards.
  • Responsive design and custom CSS for floating effects, including keyframe animations and mobile adjustments.
  • A thank-you message to acknowledge sponsor support.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
code-rumble2-0	Ready	Preview	Comment	Sep 16, 2025 8:00pm

[Copilot]

Pull Request Overview

This PR adds a new sponsors section to the homepage that showcases sponsors and food partners with animated floating logos and a thank-you message.

Key changes:

• Added a new Sponsors component with floating animations for sponsor logos
• Integrated the sponsors section into the homepage between prizes and contact sections

Reviewed Changes

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

File	Description
src/components/Sponsors.tsx	New component with sponsor/partner data, floating animations, and responsive design
src/app/page.tsx	Added import and section for the new Sponsors component

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Duplicate key prop detected. The key prop is already defined on line 56 for the parent div element. Remove the duplicate key from line 60.

Suggested change

key={sponsor.name}

[Copilot]

[nitpick] The hardcoded positioning logic with nested ternary operators is difficult to maintain. Consider using a position mapping object or array to make the positioning more readable and maintainable.

[Copilot]

[nitpick] Duplicate positioning logic from the sponsors section. This hardcoded positioning with nested ternary operators should be extracted into a shared utility function or configuration object to reduce code duplication.

Suggested change

	{sponsors
	.filter((sponsor) => sponsor.type === "Food Partner")
	.map((sponsor, index) => (
	<div
	key={sponsor.name}
	className={`absolute floating-sponsor floating-sponsor-${
	index + 2
	}`}
	style={{
	left: index === 0 ? "20%" : index === 1 ? "50%" : "80%",
	top: index === 0 ? "45%" : index === 1 ? "75%" : "40%",
	transform: "translate(-50%, -50%)",
	animationDelay: `${(index + 1) * 0.5}s`,
	}}
	>
	{/*
	Extracted positioning for Food Partners.
	If more partners are added, extend this array accordingly.
	*/}
	{(() => {
	const foodPartnerPositions = [
	{ left: "20%", top: "45%" },
	{ left: "50%", top: "75%" },
	{ left: "80%", top: "40%" },
	];
	return sponsors
	.filter((sponsor) => sponsor.type === "Food Partner")
	.map((sponsor, index) => {
	const pos = foodPartnerPositions[index] || { left: "50%", top: "50%" };
	return (
	<div
	key={sponsor.name}
	className={`absolute floating-sponsor floating-sponsor-${index + 2}`}
	style={{
	left: pos.left,
	top: pos.top,
	transform: "translate(-50%, -50%)",
	animationDelay: `${(index + 1) * 0.5}s`,
	}}
	>

[Copilot]

[nitpick] Using inline styles with styled-jsx in a Next.js component is not the recommended approach. Consider moving these styles to a CSS module, global CSS file, or using Tailwind CSS classes for better maintainability and performance.

Suggested change

	<style jsx>{`
	@keyframes float {
	0%,
	100% {
	transform: translate(-50%, -50%) translateY(0px);
	}
	50% {
	transform: translate(-50%, -50%) translateY(-20px);
	}
	}
	@keyframes floatReverse {
	0%,
	100% {
	transform: translate(-50%, -50%) translateY(0px);
	}
	50% {
	transform: translate(-50%, -50%) translateY(20px);
	}
	}
	@keyframes floatSlow {
	0%,
	100% {
	transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
	}
	50% {
	transform: translate(-50%, -50%) translateY(-15px) rotate(5deg);
	}
	}
	.floating-sponsor {
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	}
	.floating-sponsor-1 {
	animation-name: float;
	}
	.floating-sponsor-2 {
	animation-name: floatReverse;
	animation-duration: 4s;
	}
	.floating-sponsor-3 {
	animation-name: floatSlow;
	animation-duration: 5s;
	}
	.floating-sponsor-4 {
	animation-name: float;
	animation-duration: 3.5s;
	}
	@media (max-width: 768px) {
	.floating-sponsor {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	margin: 1rem auto;
	display: block;
	}
	}
	`}</style>