Skip to content

Issue #82 Resolved : Added and Updated Categories dropdown section to Navbar on HomePage #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Issue #82 Resolved : Added and Updated Categories dropdown section to Navbar on HomePage #85

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
575b81a
Categories section in navbar created
ssz2605 Jul 4, 2025
9230415
fix: close categories dropdown on mouse leave
ssz2605 Jul 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
292 changes: 162 additions & 130 deletions Frontend/src/pages/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,97 +10,171 @@ import {
Users,
} from "lucide-react";
import { Button } from "../components/ui/button";
import { MainNav } from "../components/main-nav";
import { ModeToggle } from "../components/mode-toggle";
import { UserNav } from "../components/user-nav";
import Onboarding from "../components/Onboarding";

const features = [
{
icon: Handshake,
title: "AI-Driven Sponsorship Matchmaking",
desc: "Connect with brands based on audience demographics, engagement rates, and content style.",
},
{
icon: Users,
title: "Creator Collaboration Hub",
desc: "Find and partner with creators who have complementary audiences and content niches.",
},
{
icon: Layers,
title: "AI-Based Pricing Optimization",
desc: "Get fair sponsorship pricing recommendations based on engagement and market trends.",
},
{
icon: MessageSquare,
title: "Negotiation & Contract Assistant",
desc: "Structure deals, generate contracts, and optimize terms using AI insights.",
},
{
icon: BarChart3,
title: "Performance Analytics",
desc: "Track sponsorship performance, audience engagement, and campaign success.",
},
{
icon: Rocket,
title: "ROI Tracking",
desc: "Measure and optimize return on investment for both creators and brands.",
},
];
// ---------------- MainNav Component ------------------

Comment on lines +17 to +18
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider extracting MainNav to a separate component file.

For better code organization and reusability, consider moving the MainNav component to a separate file (e.g., components/MainNav.tsx). This aligns with the single responsibility principle and makes the codebase more maintainable.

🤖 Prompt for AI Agents 
In Frontend/src/pages/HomePage.tsx around lines 17 to 18, the MainNav component
should be extracted into its own file for better organization and reusability.
Create a new file named components/MainNav.tsx, move the MainNav component code
there, and then import MainNav into HomePage.tsx. This separation follows the
single responsibility principle and improves maintainability.

const MainNav = () => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [hoveredCategory, setHoveredCategory] = useState<string | null>(null);
const dropdownWrapperRef = useRef<HTMLDivElement | null>(null);
const closeTimeout = useRef<NodeJS.Timeout | null>(null);

const categoryGroups: Record<string, string[]> = {
Lifestyle: ["Fashion", "Makeup", "Skincare", "Parenting", "DIY"],
Wellness: ["Fitness", "Health"],
Media: ["Photography", "Travel"],
Tech: ["Electronics & Gadgets", "Gaming"],
Money: ["Finance", "Education"],
Others: ["Food", "Pets"],
};
Comment on lines +25 to +32
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider externalizing category configuration.

The categoryGroups object is hardcoded within the component. For better maintainability and flexibility, consider:

  1. Moving it to a configuration file
  2. Passing it as props
  3. Fetching it from an API if categories are dynamic

This would make it easier to update categories without modifying the component code.

🤖 Prompt for AI Agents 
In Frontend/src/pages/HomePage.tsx around lines 25 to 32, the categoryGroups
object is hardcoded inside the component, which reduces maintainability. To fix
this, move the categoryGroups data to a separate configuration file and import
it into the component, or alternatively pass it as props from a parent
component. If categories are dynamic, implement fetching them from an API and
update the component to use the fetched data instead of the hardcoded object.


const handleClick = () => {
setIsDropdownOpen((prev) => !prev);
};

useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownWrapperRef.current &&
!dropdownWrapperRef.current.contains(event.target as Node)
) {
setIsDropdownOpen(false);
setHoveredCategory(null);
}
};

document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
Comment on lines +38 to +53
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Clear timeout on component unmount to prevent memory leaks.

The closeTimeout ref should be cleared when the component unmounts to prevent potential memory leaks.

Apply this diff to fix the issue:

     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
+      if (closeTimeout.current) {
+        clearTimeout(closeTimeout.current);
+      }
     };
📝 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.

Suggested change
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownWrapperRef.current &&
!dropdownWrapperRef.current.contains(event.target as Node)
) {
setIsDropdownOpen(false);
setHoveredCategory(null);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownWrapperRef.current &&
!dropdownWrapperRef.current.contains(event.target as Node)
) {
setIsDropdownOpen(false);
setHoveredCategory(null);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
if (closeTimeout.current) {
clearTimeout(closeTimeout.current);
}
};
}, []);
🤖 Prompt for AI Agents 
In Frontend/src/pages/HomePage.tsx around lines 38 to 53, the useEffect hook
adds an event listener but does not clear any existing closeTimeout, which can
cause memory leaks. To fix this, add code in the cleanup function to check if
closeTimeout.current exists and clear it using clearTimeout. This ensures any
pending timeouts are properly cleared when the component unmounts.


return (
<nav className="hidden md:flex items-center gap-6 px-4 py-2 relative">
<Link to="/features" className="text-sm font-medium hover:text-purple-600">Features</Link>
<Link to="/pricing" className="text-sm font-medium hover:text-purple-600">Pricing</Link>
<Link to="/about" className="text-sm font-medium hover:text-purple-600">About</Link>
<Link to="/contact" className="text-sm font-medium hover:text-purple-600">Contact</Link>

<div className="relative" ref={dropdownWrapperRef}>
<button onClick={handleClick} className="text-sm font-medium hover:text-purple-600">
Categories
</button>
Comment on lines +63 to +65
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add accessibility support to the dropdown button.

The dropdown button lacks essential accessibility features:

  • No aria-expanded attribute
  • No aria-haspopup attribute
  • No keyboard navigation support

Apply this diff to improve accessibility:

-        <button onClick={handleClick} className="text-sm font-medium hover:text-purple-600">
+        <button 
+          onClick={handleClick} 
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              handleClick();
+            }
+          }}
+          aria-expanded={isDropdownOpen}
+          aria-haspopup="true"
+          className="text-sm font-medium hover:text-purple-600"
+        >
📝 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.

Suggested change
<button onClick={handleClick} className="text-sm font-medium hover:text-purple-600">
Categories
</button>
<button
onClick={handleClick}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleClick();
}
}}
aria-expanded={isDropdownOpen}
aria-haspopup="true"
className="text-sm font-medium hover:text-purple-600"
>
Categories
</button>
🤖 Prompt for AI Agents 
In Frontend/src/pages/HomePage.tsx around lines 63 to 65, the dropdown button
lacks accessibility attributes and keyboard support. Add the aria-expanded
attribute to reflect the dropdown state, aria-haspopup to indicate it controls a
menu, and ensure the button supports keyboard navigation by handling key events
like Enter and Space to trigger the dropdown. Update the button element
accordingly to include these attributes and event handlers.


{isDropdownOpen && (
<div
className="absolute left-0 mt-2 flex flex-col bg-white shadow-lg rounded-md w-auto min-w-[12rem] z-50"
Comment on lines +68 to +69
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add dark mode support to dropdown styling.

The dropdown uses hardcoded colors (bg-white, hover:bg-gray-100) that won't adapt to dark mode. Since the app includes a ModeToggle component, consider using theme-aware classes.

Apply this diff to support dark mode:

-            className="absolute left-0 mt-2 flex flex-col bg-white shadow-lg rounded-md w-auto min-w-[12rem] z-50"
+            className="absolute left-0 mt-2 flex flex-col bg-white dark:bg-gray-800 shadow-lg rounded-md w-auto min-w-[12rem] z-50"
-                  className="relative hover:bg-gray-100 cursor-pointer"
+                  className="relative hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
-                    <div className="absolute top-0 left-full ml-2 flex flex-col bg-white shadow-lg rounded-md min-w-max z-50">
+                    <div className="absolute top-0 left-full ml-2 flex flex-col bg-white dark:bg-gray-800 shadow-lg rounded-md min-w-max z-50">

Also applies to: 93-93

🤖 Prompt for AI Agents 
In Frontend/src/pages/HomePage.tsx around lines 68-69 and line 93, the dropdown
styling uses hardcoded light mode colors like bg-white and hover:bg-gray-100,
which do not support dark mode. Update these class names to use theme-aware
Tailwind CSS classes that adapt to dark mode, such as replacing bg-white with
bg-white dark:bg-gray-800 and hover:bg-gray-100 with hover:bg-gray-100
dark:hover:bg-gray-700, to ensure the dropdown looks appropriate in both light
and dark modes.

onMouseEnter={() => {
if (closeTimeout.current) clearTimeout(closeTimeout.current);
}}
onMouseLeave={() => {
closeTimeout.current = setTimeout(() => {
setIsDropdownOpen(false);
setHoveredCategory(null);
}, 150);
}}
>
<ul className="py-2 divide-y divide-gray-100 text-sm">
{Object.entries(categoryGroups).map(([group, items]) => (
<li
key={group}
className="relative hover:bg-gray-100 cursor-pointer"
onMouseEnter={() => setHoveredCategory(group)}
>
<div className="flex justify-between items-center px-4 py-2">
<span>{group}</span>
<span className="ml-2">›</span>
</div>

{hoveredCategory === group && (
<div className="absolute top-0 left-full ml-2 flex flex-col bg-white shadow-lg rounded-md min-w-max z-50">
<ul className="py-2 text-sm">
{items.map((cat) => (
<li key={cat}>
<Link
to={`/categories/${cat.toLowerCase().replace(/\s+/g, "-")}`}
className="block px-4 py-2 hover:bg-gray-100 whitespace-nowrap"
>
{cat}
</Link>
</li>
))}
</ul>
</div>
)}
</li>
))}
</ul>
</div>
)}
</div>
</nav>
);
};

// ---------------- HomePage Component ------------------

export default function HomePage() {
// Refs for scroll detection
const featuresRef = useRef(null);
const footerRef = useRef(null);

// State to track visibility
const [isFeaturesVisible, setIsFeaturesVisible] = useState(false);
const [isFooterVisible, setIsFooterVisible] = useState(false);

// Set up intersection observer for scroll detection
useEffect(() => {
const featuresObserver = new IntersectionObserver(
(entries) => {
const [entry] = entries;
setIsFeaturesVisible(entry.isIntersecting);
},
{
root: null,
rootMargin: "0px",
threshold: 0.1, // Trigger when 10% of the element is visible
}
([entry]) => setIsFeaturesVisible(entry.isIntersecting),
{ threshold: 0.1 }
);

const footerObserver = new IntersectionObserver(
(entries) => {
const [entry] = entries;
setIsFooterVisible(entry.isIntersecting);
},
{
root: null,
rootMargin: "0px",
threshold: 0.1,
}
([entry]) => setIsFooterVisible(entry.isIntersecting),
{ threshold: 0.1 }
);

if (featuresRef.current) {
featuresObserver.observe(featuresRef.current);
}

if (footerRef.current) {
footerObserver.observe(footerRef.current);
}
if (featuresRef.current) featuresObserver.observe(featuresRef.current);
if (footerRef.current) footerObserver.observe(footerRef.current);

return () => {
if (featuresRef.current) {
featuresObserver.unobserve(featuresRef.current);
}
if (footerRef.current) {
footerObserver.unobserve(footerRef.current);
}
if (featuresRef.current) featuresObserver.unobserve(featuresRef.current);
if (footerRef.current) footerObserver.unobserve(footerRef.current);
};
}, []);

const features = [
{
icon: Handshake,
title: "AI-Driven Sponsorship Matchmaking",
desc: "Connect with brands based on audience demographics, engagement rates, and content style.",
},
{
icon: Users,
title: "Creator Collaboration Hub",
desc: "Find and partner with creators who have complementary audiences and content niches.",
},
{
icon: Layers,
title: "AI-Based Pricing Optimization",
desc: "Get fair sponsorship pricing recommendations based on engagement and market trends.",
},
{
icon: MessageSquare,
title: "Negotiation & Contract Assistant",
desc: "Structure deals, generate contracts, and optimize terms using AI insights.",
},
{
icon: BarChart3,
title: "Performance Analytics",
desc: "Track sponsorship performance, audience engagement, and campaign success.",
},
{
icon: Rocket,
title: "ROI Tracking",
desc: "Measure and optimize return on investment for both creators and brands.",
},
];

Comment on lines +145 to +177
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Move static features array outside the component to avoid recreation on each render.

The features array is static data that gets recreated on every render. This is inefficient and goes against React best practices.

Move the array outside the component:

+const features = [
+  {
+    icon: Handshake,
+    title: "AI-Driven Sponsorship Matchmaking",
+    desc: "Connect with brands based on audience demographics, engagement rates, and content style.",
+  },
+  // ... rest of the features
+];

 export default function HomePage() {
   const featuresRef = useRef(null);
   const footerRef = useRef(null);
   const [isFeaturesVisible, setIsFeaturesVisible] = useState(false);
   const [isFooterVisible, setIsFooterVisible] = useState(false);
-
-  const features = [
-    // ... features array
-  ];
📝 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.

Suggested change
const features = [
{
icon: Handshake,
title: "AI-Driven Sponsorship Matchmaking",
desc: "Connect with brands based on audience demographics, engagement rates, and content style.",
},
{
icon: Users,
title: "Creator Collaboration Hub",
desc: "Find and partner with creators who have complementary audiences and content niches.",
},
{
icon: Layers,
title: "AI-Based Pricing Optimization",
desc: "Get fair sponsorship pricing recommendations based on engagement and market trends.",
},
{
icon: MessageSquare,
title: "Negotiation & Contract Assistant",
desc: "Structure deals, generate contracts, and optimize terms using AI insights.",
},
{
icon: BarChart3,
title: "Performance Analytics",
desc: "Track sponsorship performance, audience engagement, and campaign success.",
},
{
icon: Rocket,
title: "ROI Tracking",
desc: "Measure and optimize return on investment for both creators and brands.",
},
];
// Move this to the top of the file, above the component
const features = [
{
icon: Handshake,
title: "AI-Driven Sponsorship Matchmaking",
desc: "Connect with brands based on audience demographics, engagement rates, and content style.",
},
{
icon: Users,
title: "Creator Collaboration Hub",
desc: "Find and partner with creators who have complementary audiences and content niches.",
},
{
icon: Layers,
title: "AI-Based Pricing Optimization",
desc: "Get fair sponsorship pricing recommendations based on engagement and market trends.",
},
{
icon: MessageSquare,
title: "Negotiation & Contract Assistant",
desc: "Structure deals, generate contracts, and optimize terms using AI insights.",
},
{
icon: BarChart3,
title: "Performance Analytics",
desc: "Track sponsorship performance, audience engagement, and campaign success.",
},
{
icon: Rocket,
title: "ROI Tracking",
desc: "Measure and optimize return on investment for both creators and brands.",
},
];
export default function HomePage() {
const featuresRef = useRef(null);
const footerRef = useRef(null);
const [isFeaturesVisible, setIsFeaturesVisible] = useState(false);
const [isFooterVisible, setIsFooterVisible] = useState(false);
// (Removed the inner `const features = […]` here)
return (
<main>
{/* … */}
<section ref={featuresRef}>
{features.map((feature) => (
<FeatureCard key={feature.title} {...feature} />
))}
</section>
{/* … */}
</main>
);
}
🤖 Prompt for AI Agents 
In Frontend/src/pages/HomePage.tsx around lines 145 to 177, the static features
array is currently defined inside the component, causing it to be recreated on
every render. To fix this, move the entire features array declaration outside
the component function so it is only created once and reused, improving
performance and adhering to React best practices.

return (
<div className="flex min-h-screen flex-col bg-gray-50 text-gray-900">
{/* Header */}
Expand All @@ -117,9 +191,7 @@ export default function HomePage() {
<ModeToggle />
<div className="hidden md:flex gap-2">
<Button variant="ghost">
<Link to="/login" className="text-gray-900">
Login
</Link>
<Link to="/login" className="text-gray-900">Login</Link>
</Button>
<Button className="bg-purple-600 text-white hover:bg-purple-700">
<Link to="/signup">Sign Up</Link>
Expand All @@ -130,77 +202,50 @@ export default function HomePage() {
</div>
</header>

{/* Hero Section - Full Screen */}
{/* Hero Section */}
<main className="flex-1">
<section className="w-full min-h-screen flex items-center bg-purple-100 pt-16">
<div className="container ml-23 px-6 md:px-12 flex flex-col-reverse lg:flex-row items-center gap-12">
<div className="container px-6 md:px-12 flex flex-col-reverse lg:flex-row items-center gap-12">
<div className="text-center lg:text-left max-w-2xl">
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl text-gray-900">
<h1 className="text-4xl font-bold tracking-tight sm:text-4xl text-gray-900">
AI-Powered Creator Collaboration Platform
</h1>
<p className="mt-4 text-lg text-gray-700 md:text-xl">
Connect with brands, collaborate with creators, and optimize
your partnerships through data-driven insights.
Connect with brands, collaborate with creators, and optimize your partnerships through data-driven insights.
</p>
<div className="mt-6 flex flex-col gap-3 sm:flex-row">
<Button
size="lg"
className="bg-purple-600 text-white hover:bg-purple-700"
>
<Button size="lg" className="bg-purple-600 text-white hover:bg-purple-700">
<Link to="/dashboard" className="flex items-center">
Get Started <ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
<Button
variant="outline"
size="lg"
className="border-gray-300 text-gray-900 hover:bg-gray-100"
>
<Button variant="outline" size="lg" className="border-gray-300 text-gray-900 hover:bg-gray-100">
Learn More
</Button>
</div>
</div>
<div className="relative w-full max-w-lg">
<img
src="/Home.png"
alt="Hero Image"
className="rounded-xl shadow-xl object-cover w-full h-auto"
/>
<img src="/Home.png" alt="Hero Image" className="rounded-xl shadow-xl object-cover w-full h-auto" />
</div>
</div>
</section>

{/* Onboarding Section */}
<Onboarding />

{/* Features Section - Revealed on Scroll */}
{/* Features Section */}
<section ref={featuresRef} className="w-full py-24 bg-white">
<div
className={`container px-6 md:px-12 text-center transition-all duration-1000 transform ${
isFeaturesVisible
? "opacity-100 translate-y-0"
: "opacity-0 translate-y-20"
}`}
>
<h2 className="text-3xl font-bold sm:text-4xl text-gray-900">
Key Features
</h2>
<div className={`container px-6 md:px-12 text-center transition-all duration-1000 transform ${isFeaturesVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-20"}`}>
<h2 className="text-3xl font-bold sm:text-4xl text-gray-900">Key Features</h2>
<p className="mt-4 text-lg text-gray-700">
Leverage AI to transform your creator partnerships and brand
sponsorships.
Leverage AI to transform your creator partnerships and brand sponsorships.
</p>
<div className="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map(({ icon: Icon, title, desc }, idx) => (
<div
key={idx}
className="flex flex-col items-center text-center p-6 bg-gray-100 rounded-xl shadow-md"
>
<div key={idx} className="flex flex-col items-center text-center p-6 bg-gray-100 rounded-xl shadow-md">
<div className="flex items-center justify-center h-20 w-20 rounded-full bg-purple-100 mb-4">
<Icon className="h-10 w-10 text-purple-600" />
</div>
<h3 className="text-xl font-semibold text-gray-900">
{title}
</h3>
<h3 className="text-xl font-semibold text-gray-900">{title}</h3>
<p className="mt-2 text-gray-600">{desc}</p>
</div>
))}
Expand All @@ -209,26 +254,13 @@ export default function HomePage() {
</section>
</main>

{/* Footer - Revealed on Scroll */}
<footer
ref={footerRef}
className="mr-12 ml-12 border-t border-gray-200 bg-gray-50 py-6"
>
<div
className={`container flex flex-col md:flex-row items-center justify-between text-gray-600 transition-all duration-1000 transform ${
isFooterVisible
? "opacity-100 translate-y-0"
: "opacity-0 translate-y-10"
}`}
>
{/* Footer */}
<footer ref={footerRef} className="mx-12 border-t border-gray-200 bg-gray-50 py-6">
<div className={`container flex flex-col md:flex-row items-center justify-between text-gray-600 transition-all duration-1000 transform ${isFooterVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`}>
<p>© 2024 Inpact. All rights reserved.</p>
<div className="flex gap-4 mt-4 md:mt-0">
<Link to="/terms" className="hover:underline">
Terms
</Link>
<Link to="/privacy" className="hover:underline">
Privacy
</Link>
<Link to="/terms" className="hover:underline">Terms</Link>
<Link to="/privacy" className="hover:underline">Privacy</Link>
</div>
</div>
</footer>
Expand Down