Fixed: Footer Section UI

[Monoartiam99]

Summary

• Added placeholder SVGs for payment icons (visa, mastercard, paypal) to public/images/

• Updated app/page.tsx to reference the placeholders and fixed malformed JSX that caused build errors.

• Temporarily disabled next-pwa in development to avoid SW build/parse errors on Windows paths.

• Closes Improve the footer section #87

Verification:

• npm run dev starts and reports PWA disabled in development.
• Footer icons render locally at http://localhost:3000

Notes:

• PWA remains enabled in production builds. Test with:
• npm run build && npm start.

🎯 Rationale

This PR fixes two issues causing the dev server to fail and the footer to display missing images:

Missing payment images in the footer caused 404s and broke the visual layout.
During development, next-pwa generated a service worker that failed to parse on Windows when the repository path contains special characters (an apostrophe). That, plus accidental malformed JSX that had been inserted into [page.tsx] caused parse/runtime errors (Unterminated regexp literal / Unexpected token) preventing the app from compiling.

📝 Summary of Changes:

• Added placeholder SVGs for payment icons:

• public/images/visa.svg

• public/images/mastercard.svg

• public/images/paypal.svg

• Updated [page.tsx]:

• Replaced references to missing PNGs with the new SVGs.

• Removed stray/malformed JSX and fixed tag balance that caused parsing errors.

• Updated [next.config.mjs]:

• Configured next-pwa to disable service worker generation in development using [disable: process.env.NODE_ENV !== 'production'] (PWA remains enabled in production).

🔧 Technical Details

• The approach is low-risk: placeholder SVGs avoid runtime 404s and PWA is only disabled in development to avoid build-time SW parsing problems associated with Windows path quirks.
• Minimal changes to [page.tsx]and [next.config.mjs]No heavy refactors.
• No new dependencies were added. next-pwa config was adjusted only.
• SVG placeholders are small and won't significantly impact performance.
• Production PWA behavior and caching remains unaffected.

✅ Testing

• Started dev server: npm run dev. The dev server starts and reports PWA disabled in development.
• Opened and verified that the footer renders and payment icons are visible (placeholder SVGs).
• Verified that [page.tsx] compiles (no parse errors shown in terminal).

Test Details

• Unit tests added/updated
• Integration tests added/updated
• Manual testing completed (dev server compiles, footer renders)
• All existing tests pass (no tests in this change set were modified)

📚 Documentation

• Code comments added/updated
• README updated (if needed)
• API documentation updated (if needed)
• Migration guide provided (for breaking changes)

🔄 Breaking Changes

This PR does not introduce breaking changes. PWA behavior changes only in the dev environment (disabled) and remains active in production builds.

🎨 User-Facing Changes

Frontend Changes:
Footer icons updated (appear as placeholders).
No UX workflow changes.
Backend/API Changes:
None.

📸 Screenshots:

🙏 Reviewer Notes:

Focus review on:

• [page.tsx]changes where the malformed JSX was removed.
• [next.config.mjs] to confirm the PWA disable logic is acceptable for development.
• If maintainers prefer PWA during dev, recommend moving the repo to a path without apostrophes or updating the SW generation pipeline to avoid absolute paths containing problematic characters.
• I can replace placeholder assets with official brand images if provided.

[vercel]

@Monoartiam99 is attempting to deploy a commit to the larythelord's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Monoartiam99]

@LarytheLord Please check it once.