The logos on hero section are color on hover make it color by default

[tiluckdave]

The logos on hero section are color on hover make it color by default

[sweep-ai-bot]

🚀 Here's the PR! #17

Sweep is feeling awesome today.

Actions

• ↻ Restart Sweep

Step 1: 🔎 Searching

(Click to expand) Here are the code search results. I'm now analyzing these search results to write the PR.

angler-landing/components/CatalogExperts.js

Lines 1 to 13 in 2acc8e9

	import Image from "next/image"
	export default function CatalogExpert() {
	return (
	<div className="container flex flex-col gap-8 mx-auto px-4 md:px-0 my-8 md:my-16 overflow-x-hidden">
	<p className="text-xl font-light text-neutral-500 text-center ">Built by catalog experts from</p>
	<div className="flex mx-auto w-full md:w-4/5 lg:w-2/3 animate-marquee md:animate-none whitespace-nowrap items-center justify-around gap-10">
	<Image src="/microsoft.svg" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 grayscale hover:grayscale-0" />
	<Image src="/meta-logo.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 grayscale hover:grayscale-0" />
	<Image src="/uber-eats.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 grayscale hover:grayscale-0" />
	<Image src="/stanford.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 grayscale hover:grayscale-0" />
	</div>
	</div>

angler-landing/styles/globals.css

Lines 1 to 42 in 2acc8e9

	@tailwind base;
	@tailwind components;
	@tailwind utilities;
	#hero {
	background-image: url("/bg.png");
	background-size: cover;
	background-repeat: no-repeat;
	}
	#heroa {
	height: calc(100vh - 80px);
	}
	@keyframes fadeInUp {
	0% {
	opacity: 0;
	transform: translateY(30px);
	}
	100% {
	opacity: 1;
	transform: translateY(0);
	}
	}
	@keyframes fadeOutDown {
	0% {
	opacity: 1;
	transform: translateY(0);
	}
	100% {
	opacity: 0;
	transform: translateY(-20px);
	}
	}
	.fade-in-up {
	animation: fadeInUp 0.5s ease forwards;
	}
	.fade-out-down {
	animation: fadeOutDown 0.5s ease forwards;

angler-landing/components/Hero.js

Lines 1 to 44 in 2acc8e9

	import { useEffect, useState } from "react";
	import Image from "next/image";
	import Link from "next/link";
	import { CTAButton } from "./Button";
	export default function Hero() {
	const productForList = ['Distributors', 'Retailers', 'Brands', 'Marketplaces'];
	const [productFor, setProductFor] = useState(0);
	const [animationClass, setAnimationClass] = useState('fade-in-up');
	useEffect(() => {
	const interval = setInterval(() => {
	setAnimationClass('fade-out-down');
	setTimeout(() => {
	setProductFor((prev) => (prev + 1) % productForList.length);
	setAnimationClass('fade-in-up');
	}, 500); // Match the duration of fade-out-down animation
	}, 2000);
	return () => clearInterval(interval);
	}, [productForList.length]);
	return (
	<div id="heroa" className="container mx-auto flex flex-col gap-10 justify-center items-center">
	<div className="flex font-light justify-center items-center gap-2 text-md text-neutral-800 bg-white/30 shadow px-6 rounded-full animate-slidein opacity-0 [--slidein-delay:300ms]">
	Backed By
	<Image src="/yc.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-28" />
	</div>
	<h1 className="text-[2.75rem] xs:text-5xl sm:text-6xl xl:text-7xl leading-tight font-bold w-4/5 text-center animate-slidein opacity-0 [--slidein-delay:500ms]">
	Catalog Management For{" "}
	<div className={`bg-gradient-to-tr from-blue-800 to-sky-700 mt-4 text-transparent bg-clip-text ${animationClass}`}>
	{productForList[productFor]}
	</div>
	</h1>
	<p className="text-xl text-center font-light text-neutral-700 animate-slidein opacity-0 [--slidein-delay:700ms]">Create a rich, standardized, and accurate<br />
	product catalog to <b className="font-semibold">drive more sales.</b></p>
	<div className="animate-slidein opacity-0 [--slidein-delay:900ms]">
	<Link href="https://calendly.com/amay-angler/chat-with-angler">
	<CTAButton bck='light'>Book a Demo</CTAButton>
	</Link>
	</div>
	</div>
	);

Step 2: ⌨️ Coding

I'm going to follow the following steps to help you solve the GitHub issue:

1. Remove the grayscale class from the Image components in the CatalogExperts component.
2. Remove the hover:grayscale-0 class from the Image components in the CatalogExperts component.

Here are the changes we decided to make. I'm done making edits and now I'm just validating the changes using a linter to catch any mistakes like syntax errors or undefined variables:

components/CatalogExperts.js

Remove the `grayscale` class from the `Image` components in the `CatalogExpert` function.

--- 
+++ 
@@ -3,10 +3,10 @@
         <div className="container flex flex-col gap-8 mx-auto px-4 md:px-0 my-8 md:my-16 overflow-x-hidden">
             <p className="text-xl font-light text-neutral-500 text-center ">Built by catalog experts from</p>
             <div className="flex mx-auto w-full md:w-4/5 lg:w-2/3 animate-marquee md:animate-none whitespace-nowrap items-center justify-around gap-10">
-                <Image src="/microsoft.svg" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 grayscale hover:grayscale-0" />
-                <Image src="/meta-logo.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 grayscale hover:grayscale-0" />
-                <Image src="/uber-eats.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 grayscale hover:grayscale-0" />
-                <Image src="/stanford.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 grayscale hover:grayscale-0" />
+                <Image src="/microsoft.svg" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 hover:grayscale-0" />
+                <Image src="/meta-logo.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 hover:grayscale-0" />
+                <Image src="/uber-eats.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 hover:grayscale-0" />
+                <Image src="/stanford.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 hover:grayscale-0" />
             </div>
         </div>
     )

components/CatalogExperts.js

Remove the `hover:grayscale-0` class from the `Image` components in the `CatalogExpert` function.

--- 
+++ 
@@ -3,10 +3,10 @@
         <div className="container flex flex-col gap-8 mx-auto px-4 md:px-0 my-8 md:my-16 overflow-x-hidden">
             <p className="text-xl font-light text-neutral-500 text-center ">Built by catalog experts from</p>
             <div className="flex mx-auto w-full md:w-4/5 lg:w-2/3 animate-marquee md:animate-none whitespace-nowrap items-center justify-around gap-10">
-                <Image src="/microsoft.svg" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 hover:grayscale-0" />
-                <Image src="/meta-logo.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 hover:grayscale-0" />
-                <Image src="/uber-eats.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 hover:grayscale-0" />
-                <Image src="/stanford.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36 hover:grayscale-0" />
+                <Image src="/microsoft.svg" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36" />
+                <Image src="/meta-logo.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36" />
+                <Image src="/uber-eats.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36" />
+                <Image src="/stanford.png" alt="Hero Image" width="0" height="0" sizes="100vw" className="w-[7.5rem] lg:w-36" />
             </div>
         </div>
     )

Step 3: 🔄️ Validating

Your changes have been successfully made to the branch sweep/the_logos_on_hero_section_are_color_on_h. I have validated these changes using a syntax checker and a linter.

---

Tip

To recreate the pull request, edit the issue title or description.

Thank You.