feat: add Acid Tools footer badge

apps/web/components/landing-page.test.tsx

@@ -469,6 +469,45 @@ describe('LandingPage', () => {
         expect(foundrListBadgeImage.getAttribute('width')).toBe('150');
         expect(foundrListBadgeImage.getAttribute('height')).toBe('48');
 
+        const acidToolsBadgeLink = screen.getByRole('link', {
+            name: /Acid Tools/i
+        });
+        expect(acidToolsBadgeLink).toHaveProperty(
+            'href',
+            'https://acidtools.com/ai/xpenser-cleverbrush'
+        );
+        expect(acidToolsBadgeLink.getAttribute('target')).toBe('_blank');
+        expect(acidToolsBadgeLink.getAttribute('rel')).toBe(
+            'noopener noreferrer'
+        );
+
+        const acidToolsBadgeImages = screen.getAllByAltText('Acid Tools');
+        expect(acidToolsBadgeImages).toHaveLength(2);
+
+        const acidToolsLightBadgeImage = acidToolsBadgeImages.find(
+            image =>
+                image.getAttribute('src') ===
+                'https://acidtools.com/assets/images/badge.png'
+        );
+        expect(acidToolsLightBadgeImage).toBeTruthy();
+        expect(acidToolsLightBadgeImage?.getAttribute('width')).toBeNull();
+        expect(acidToolsLightBadgeImage?.getAttribute('height')).toBe('54');
+        expect(acidToolsLightBadgeImage?.getAttribute('loading')).toBe('lazy');
+        expect(acidToolsLightBadgeImage?.className).toContain('block');
+        expect(acidToolsLightBadgeImage?.className).toContain('dark:hidden');
+
+        const acidToolsDarkBadgeImage = acidToolsBadgeImages.find(
+            image =>
+                image.getAttribute('src') ===
+                'https://acidtools.com/assets/images/badge-dark.png'
+        );
+        expect(acidToolsDarkBadgeImage).toBeTruthy();
+        expect(acidToolsDarkBadgeImage?.getAttribute('width')).toBeNull();
+        expect(acidToolsDarkBadgeImage?.getAttribute('height')).toBe('54');
+        expect(acidToolsDarkBadgeImage?.getAttribute('loading')).toBe('lazy');
+        expect(acidToolsDarkBadgeImage?.className).toContain('hidden');
+        expect(acidToolsDarkBadgeImage?.className).toContain('dark:block');
+
         const openHuntsBadgeLink = screen.getByRole('link', {
             name: /OpenHunts Club Member/i
         });

apps/web/components/landing-page.tsx

@@ -266,6 +266,14 @@ const foundrListBadge = {
     width: 150
 } as const;
 
+const acidToolsBadge = {
+    alt: 'Acid Tools',
+    darkSrc: 'https://acidtools.com/assets/images/badge-dark.png',
+    height: 54,
+    href: 'https://acidtools.com/ai/xpenser-cleverbrush',
+    lightSrc: 'https://acidtools.com/assets/images/badge.png'
+} as const;
+
 const openHuntsBadge = {
     alt: 'OpenHunts Club Member',
     height: 105,
@@ -901,6 +909,35 @@ function FoundrListBadge() {
     );
 }
 
+function AcidToolsBadge() {
+    return (
+        <a
+            aria-label={acidToolsBadge.alt}
+            className="block w-fit rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            href={acidToolsBadge.href}
+            rel="noopener noreferrer"
+            target="_blank"
+        >
+            {/* biome-ignore lint/performance/noImgElement: Acid Tools provides this hosted badge snippet, and next/image would need remote config for a tiny footer badge. */}
+            <img
+                alt={acidToolsBadge.alt}
+                className="block dark:hidden"
+                height={acidToolsBadge.height}
+                loading="lazy"
+                src={acidToolsBadge.lightSrc}
+            />
+            {/* biome-ignore lint/performance/noImgElement: Acid Tools provides this hosted badge snippet, and next/image would need remote config for a tiny footer badge. */}
+            <img
+                alt={acidToolsBadge.alt}
+                className="hidden dark:block"
+                height={acidToolsBadge.height}
+                loading="lazy"
+                src={acidToolsBadge.darkSrc}
+            />
+        </a>
+    );
+}
+
 function OpenHuntsBadge() {
     return (
         <a
@@ -938,6 +975,7 @@ function FooterBadges() {
             <FindlyToolsBadge />
             <NeeedDirectoryBadge />
             <FoundrListBadge />
+            <AcidToolsBadge />
             <OpenHuntsBadge />
         </div>
     );

tests/e2e/public-auth.spec.ts

@@ -53,10 +53,37 @@ test('shows sign in and create account actions on the public index', async ({
     await expect(lightBadge).toBeVisible();
     await expect(darkBadge).toBeHidden();
 
+    const acidToolsBadge = page.getByRole('link', { name: 'Acid Tools' });
+    await expect(acidToolsBadge).toHaveAttribute(
+        'href',
+        'https://acidtools.com/ai/xpenser-cleverbrush'
+    );
+    await expect(acidToolsBadge).toHaveAttribute('target', '_blank');
+    await expect(acidToolsBadge).toHaveAttribute(
+        'rel',
+        'noopener noreferrer'
+    );
+
+    const acidToolsLightBadge = acidToolsBadge.locator(
+        'img[src="https://acidtools.com/assets/images/badge.png"]'
+    );
+    const acidToolsDarkBadge = acidToolsBadge.locator(
+        'img[src="https://acidtools.com/assets/images/badge-dark.png"]'
+    );
+    await acidToolsBadge.scrollIntoViewIfNeeded();
+    await expect(acidToolsLightBadge).toBeVisible();
+    await expect(acidToolsLightBadge).toHaveAttribute('height', '54');
+    await expect(acidToolsLightBadge).toHaveAttribute('loading', 'lazy');
+    await expect(acidToolsDarkBadge).toBeHidden();
+    await expect(acidToolsDarkBadge).toHaveAttribute('height', '54');
+    await expect(acidToolsDarkBadge).toHaveAttribute('loading', 'lazy');
+
     await page.emulateMedia({ colorScheme: 'dark' });
     await expect(page.locator('html')).toHaveClass(/dark/);
     await expect(lightBadge).toBeHidden();
     await expect(darkBadge).toBeVisible();
+    await expect(acidToolsLightBadge).toBeHidden();
+    await expect(acidToolsDarkBadge).toBeVisible();
 
     const foundrListBadge = page.getByRole('link', {
         name: 'Featured on FoundrList'