fix(layout): padding issues on mobile devices for Main Page, Template Preview, and Footer

[sahilkhan117]

Closes #328

Summary:

• Applied Ant Design's useBreakpoint() with screen.md to dynamically reduce padding on smaller screens.
• Optimized the layout for:
  • Main Page → Reduced excessive padding for better content visibility.
  • Template Preview → Expanded the preview area by decreasing unnecessary whitespace.
  • Footer → Improved spacing and alignment to prevent stacking and hidden links.
• Ensured the changes do not affect larger screens.

Changes

• Applied Ant Design's useBreakpoint() hook to detect screen.md and apply responsive padding adjustments.
• Reduced padding on smaller screens to enhance readability and maximize the viewable area.
• Optimized layout for Main Page, Template Preview, and Footer by dynamically adjusting padding based on screen size.
• Verified that the layout remains consistent on larger screens.

Template Preview	Footer

Tested on Devices:

• Samsung Galaxy Z Fold 5
• Samsung Galaxy S20 Ultra
• Samsung Galaxy F13
• Google Pixel 6 Pro
• OnePlus 9 Pro
• Xiaomi Mi 11 Ultra

Related Issues

• Issue Layout: padding issues on mobile devices for Main Page, Template Preview, and Footer #328
• Related PR: Navbar's Logo and Text disturbed on some mobile devices with large aspect ratios #324
• Previous PR: fix(Navbar): Update alignment for mobile devices with large aspect ratios (#324) #325

Flags

• This solution ensures that the reduced padding only applies to smaller screens, keeping the larger-screen layout unaffected.

Author Checklist:

• DCO sign-off included
• Verified on multiple devices
• Ready for merging into main from fork:sahilkhan117/i328/fix-page-preview-footer-layout

@DianaLease can you please review my PR and Let me know if there is any changes or corrections regarding this problem.

[netlify]

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	6e0c956
🔍 Latest deploy log	https://app.netlify.com/sites/ap-template-playground/deploys/67e3d095aec16e00080ff773
😎 Deploy Preview	https://deploy-preview-329--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.