feat: migrate leaf components to TypeScript

[devin-ai-integration]

Summary

Adds TypeScript support to the project and migrates the four leaf-level React components (Footer, Product, HeroBanner, FooterBanner) from JSX to TSX with typed props.

Infrastructure changes:

• Installed typescript@^6.0.3, @types/react@^17.0.39, @types/react-dom@^17.0.11, @types/node
• Removed .babelrc and Babel dependencies (@babel/core, @babel/preset-react) — Next.js 12 SWC handles compilation
• Added tsconfig.json with strict: true and allowJs: true for incremental adoption
• Created types/index.ts with shared SanityProduct, CartItem, and SanityBanner interfaces

Component migrations:

• Footer.tsx — typed as React.FC (no props)
• Product.tsx — ProductProps interface with product: SanityProduct
• HeroBanner.tsx — HeroBannerProps interface with heroBanner: SanityBanner
• FooterBanner.tsx — FooterBannerProps interface with footerBanner: SanityBanner

npx tsc --noEmit and npm run build both pass.

Review & Testing Checklist for Human

• Verify urlFor() casts are safe — urlFor() returns an ImageUrlBuilder, not a string. The original JSX relied on implicit coercion; this PR uses as unknown as string to silence TS. Confirm this works at runtime (it should, via toString()), and consider whether calling .url() on the builder would be a cleaner long-term fix.
• Confirm Babel removal has no side effects — @babel/core was listed under dependencies (not devDependencies). Verify no other part of the app or tooling depends on it.
• Smoke test the app — Run npm run dev, navigate the storefront, and verify product cards, hero banner, footer banner, and footer all render correctly.

Notes

• tsconfig.json uses moduleResolution: "node10" with ignoreDeprecations: "6.0" to suppress a TS 6.x deprecation warning for the Node resolution strategy, which is required for compatibility with Next.js 12.
• @types/react is pinned to ^17.0.39 because newer versions include an exports map that breaks Next.js 12's type detection.
• The CartItem interface in types/index.ts is not used by any migrated component but is included for use by future migrations (e.g., Cart.jsx, context).

Link to Devin session: https://app.devin.ai/sessions/cadd4a6658b94488bb8cc9dfaa72f0d0
Requested by: @WesternConcrete

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 4 additional findings.

[devin-ai-integration]

Testing Results

Ran the app locally (npm run dev) on the feature branch and verified all 4 migrated TSX components render correctly.

All 5 tests passed:

• HeroBanner.tsx — Renders smallText, heading, Sanity image, and "Shop Now" button
• Product.tsx — 5 product cards with images, names, prices. Navigation to /product/speaker works
• FooterBanner.tsx — Renders discount text, headings, sale dates, image, and button
• Footer.tsx — Renders copyright text with Instagram/Twitter icons
• Console errors — None (clean console)

Screenshots

Homepage — HeroBanner + Product cards

Homepage — FooterBanner + Footer

Product detail page (navigation test)

Build verification

• npx tsc --noEmit — 0 errors
• npm run build — compiled successfully, all pages generated

Devin session