React Review Audit

**Score: 92/100** · 1 error · 18 warnings

Copy as prompt

```text
Fix the following React Review diagnostics in my codebase.

## Errors (1)

1. [error] require-reduced-motion — package.json:0
Project uses a motion library but has no prefers-reduced-motion handling — required for accessibility (WCAG 2.3.3)

## Warnings (18)

2. [warning] design-no-default-tailwind-palette — app/_components/header.tsx:20
text-gray-600 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

3. [warning] design-no-default-tailwind-palette — app/_components/header.tsx:24
text-gray-600 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

4. [warning] nextjs-no-img-element — app/_components/footer.tsx:5
Use next/image instead of — provides automatic optimization, lazy loading, and responsive srcset

5. [warning] use-lazy-motion — app/_components/testimonials.tsx:3
Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

6. [warning] design-no-default-tailwind-palette — app/_components/testimonials.tsx:23
text-gray-500 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

7. [warning] nextjs-no-img-element — app/_components/testimonials.tsx:24
Use next/image instead of — provides automatic optimization, lazy loading, and responsive srcset

8. [warning] design-no-redundant-size-axes — app/_components/testimonials.tsx:24
w-10 h-10 → use the shorthand size-10 (Tailwind v3.4+)

9. [warning] no-array-index-as-key — app/_components/testimonials.tsx:89
Array index "index" used as key — causes bugs when list is reordered or filtered

10. [warning] nextjs-missing-metadata — app/page.tsx:1
Page without metadata or generateMetadata export — hurts SEO

11. [warning] design-no-redundant-size-axes — app/_components/privacy.tsx:16
w-[6.4375rem] h-[6.4375rem] → use the shorthand size-[6.4375rem] (Tailwind v3.4+)

12. [warning] nextjs-no-img-element — app/_components/privacy.tsx:19
Use next/image instead of — provides automatic optimization, lazy loading, and responsive srcset

13. [warning] use-lazy-motion — app/_components/hero.tsx:3
Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

14. [warning] no-gradient-text — app/_components/hero.tsx:15
Gradient text (bg-clip-text + bg-gradient) is decorative rather than meaningful — a common AI tell. Use solid colors for text

15. [warning] no-pure-black-background — app/_components/hero.tsx:35
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

16. [warning] no-array-index-as-key — app/_components/use-cases.tsx:44
Array index "index" used as key — causes bugs when list is reordered or filtered

17. [warning] design-no-space-on-flex-children — app/_components/use-cases.tsx:45
space-y-4 on a flex/grid parent — use gap-y-4 instead. Per-sibling margins phantom-gap on conditional render and don't mirror in RTL

18. [warning] design-no-space-on-flex-children — app/_components/use-cases.tsx:47
space-y-4 on a flex/grid parent — use gap-y-4 instead. Per-sibling margins phantom-gap on conditional render and don't mirror in RTL

19. [warning] design-no-redundant-size-axes — app/_components/use-cases.tsx:48
w-12 h-12 → use the shorthand size-12 (Tailwind v3.4+)
```

---

### ❌ Errors (1)

**`require-reduced-motion`**

Project uses a motion library but has no prefers-reduced-motion handling — required for accessibility (WCAG 2.3.3)

> Add `useReducedMotion()` from your animation library, or a `@media (prefers-reduced-motion: reduce)` CSS query

[`package.json:0`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/package.json#L0)

---

### ⚠️ Warnings (18)

**`design-no-default-tailwind-palette`**

text-gray-600 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

> Replace `indigo-*` / `gray-*` / `slate-*` with project tokens, your brand color, or a less-default neutral (`zinc`, `neutral`, `stone`)

[`app/_components/header.tsx:20`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/header.tsx#L20)
[`app/_components/header.tsx:24`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/header.tsx#L24)
[`app/_components/testimonials.tsx:23`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/testimonials.tsx#L23)

**`nextjs-no-img-element`**

Use next/image instead of <img> — provides automatic optimization, lazy loading, and responsive srcset

> `import Image from 'next/image'` — provides automatic WebP/AVIF, lazy loading, and responsive srcset

[`app/_components/footer.tsx:5`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/footer.tsx#L5)
[`app/_components/testimonials.tsx:24`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/testimonials.tsx#L24)
[`app/_components/privacy.tsx:19`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/privacy.tsx#L19)

**`design-no-redundant-size-axes`**

w-10 h-10 → use the shorthand size-10 (Tailwind v3.4+)

> Collapse `w-N h-N` to `size-N` (Tailwind v3.4+) when both axes match

[`app/_components/testimonials.tsx:24`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/testimonials.tsx#L24)
[`app/_components/privacy.tsx:16`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/privacy.tsx#L16)
[`app/_components/use-cases.tsx:48`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/use-cases.tsx#L48)

**`use-lazy-motion`**

Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

> Use `import { LazyMotion, m } from "framer-motion"` with `domAnimation` features — saves ~30kb

[`app/_components/testimonials.tsx:3`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/testimonials.tsx#L3)
[`app/_components/hero.tsx:3`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/hero.tsx#L3)

**`no-array-index-as-key`**

Array index "index" used as key — causes bugs when list is reordered or filtered

> Use a stable unique identifier: `key={item.id}` or `key={item.slug}` — index keys break on reorder/filter

[`app/_components/testimonials.tsx:89`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/testimonials.tsx#L89)
[`app/_components/use-cases.tsx:44`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/use-cases.tsx#L44)

**`design-no-space-on-flex-children`**

space-y-4 on a flex/grid parent — use gap-y-4 instead. Per-sibling margins phantom-gap on conditional render and don't mirror in RTL

> Use `gap-*` on the flex/grid parent. `space-x-*` / `space-y-*` produce phantom gaps when a sibling is conditionally rendered, lose vertical spacing on wrapped lines, and don't mirror in RTL

[`app/_components/use-cases.tsx:45`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/use-cases.tsx#L45)
[`app/_components/use-cases.tsx:47`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/use-cases.tsx#L47)

**`nextjs-missing-metadata`**

Page without metadata or generateMetadata export — hurts SEO

> Add `export const metadata = { title: '...', description: '...' }` or `export async function generateMetadata()`

[`app/page.tsx:1`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/page.tsx#L1)

**`no-gradient-text`**

Gradient text (bg-clip-text + bg-gradient) is decorative rather than meaningful — a common AI tell. Use solid colors for text

> Use solid text colors for readability. If you need emphasis, use font weight, size, or a distinct color instead of gradients

[`app/_components/hero.tsx:15`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/hero.tsx#L15)

**`no-pure-black-background`**

Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

> Tint the background slightly toward your brand hue — e.g. `#0a0a0f` or Tailwind's `bg-gray-950`. Pure black looks harsh on modern displays

[`app/_components/hero.tsx:35`](https://github.com/celeroncoder/notebooklm-ui-clone/blob/738f685821eaa2c88bedc2bdfefda0fc74ab9f37/app/_components/hero.tsx#L35)

---

_{Last scored May 14, 2026 at 9:39 AM UTC. Maintained by [React Review](https://github.com/millionco/react-review).}