feat: Introduce component and standardized spacing utilities, then refactor and to use them.

[jahrulezfrancis]

Summary

This PR introduces a standardized responsive spacing system for marketplace sections, replacing inconsistent hardcoded margins with a reusable and scalable pattern. It improves layout consistency, maintainability, and readability across the application.

Closes #48

---

Key Changes

1. Responsive Spacing Tokens

• Added custom spacing variables in index.css
• Implemented fluid spacing using clamp() for responsiveness across breakpoints:
  • compact
  • default
  • relaxed
  • major

---

2. MarketplaceSection Component

• Created MarketplaceSection.tsx
• Encapsulates:
  • Standard vertical spacing
  • Container width constraints
  • Section layout consistency
• Eliminates repeated margin logic across pages

---

3. SectionDivider Improvements

• Updated SectionDivider.tsx to use new spacing tokens
• Ensures consistent spacing across all divider-based layouts

---

4. Landing Page Refactor

• Refactored LandingPage.tsx to adopt:
  • MarketplaceSection component
  • New spacing tokens
• Removed hardcoded spacing values and redundant Tailwind classes

---

Impact

• Consistency: Unified spacing rhythm across all sections and screen sizes
• Maintainability: Centralized spacing logic for easier updates
• Readability: Reduced "magic numbers" and improved JSX clarity

---

Verification

• Build successful: pnpm build (includes TypeScript and Tailwind compilation)
• Verified consistent spacing across all marketplace sections
• Confirmed responsive behavior across breakpoints

---

Notes

• Establishes a foundation for scalable layout patterns across future pages

• Can be extended to other sections beyond the marketplace for full design consistency

Testing

• pnpm lint
• pnpm build

Checklist

• Linked issue or backlog item
• Scope is limited to the stated change
• Updated docs if behavior or setup changed
• Added screenshots for UI changes when relevant

[drips-wave]

@jahrulezfrancis Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits