feat(ui): make pages responsive

[calebephrem]

What does this PR do?

Makes individual landing pages and twitter card responsive

Closes

• Closes [none]

Type of change(s)

• Bug fix
• New feature
• Documentation update
• Style / UI change
• Refactor (no functional change)
• Performance improvement
• Other

Checklist

• I've tested this change locally and it works as expected
• bun run lint or npm run lint completes without warnings or errors
• bun run build or npm run build completes successfully
• My commit messages follow Conventional Commits (e.g. feat: ..., fix: ..., chore: ...)
• I've updated relevant documentation (README, comments, etc.) if needed
• I've removed any temporary debugging code (e.g. console.log)

[beetle-ai]

Summary by Beetle

This PR implements comprehensive responsive design improvements across the DevHub website. The changes focus on making the UI adapt gracefully to mobile, tablet, and desktop viewports by restructuring layout components from horizontal to vertical stacking on smaller screens and adding responsive typography scaling. The PR addresses a critical UX issue where content was not properly optimized for mobile devices, ensuring the website provides an excellent experience across all device sizes.

📁 File Changes Summary (Consolidated across all commits):

File	Status	Changes	Description
app/globals.css	Modified	+1/-1	Updated .card class to use flex-col on mobile and md:flex-row on medium+ screens, removing fixed max-h-52 constraint to allow flexible card heights on smaller viewports.
app/page.tsx	Modified	+12/-12	Restructured hero section text content to break into multiple spans for better mobile wrapping. Updated CTA section heading and description to use responsive line breaks and flex column layout with center alignment.
app/blog/page.tsx	Modified	+3/-2	Split blog description text into multiple spans with flex column and center alignment for improved mobile readability.
app/partners/page.tsx	Modified	+1/-1	Added responsive flex direction (flex-col sm:flex-row) to partner cards for vertical stacking on mobile and horizontal layout on small+ screens.
app/resources/page.tsx	Modified	+2/-4	Simplified and restructured resource page description text into responsive spans for better mobile text wrapping.
app/rules/page.tsx	Modified	+3/-5	Added responsive text sizing (text-xs sm:text-sm md:text-md lg:text-lg) and restructured rule description text into multiple spans for improved mobile layout.

Total Changes: 6 files changed, +22 additions, -25 deletions

🎯 Key Changes:

• Responsive Card Layout: Modified the base .card component in globals.css to stack vertically on mobile (flex-col) and horizontally on medium screens and up (md:flex-row), improving content visibility on small screens.
• Text Wrapping & Line Breaking: Restructured text content across multiple pages (home, blog, partners, resources, rules) by splitting long descriptions into multiple <span> elements, allowing natural text wrapping on mobile devices instead of overflow or truncation.
• Responsive Typography: Added granular responsive text sizing to the rules page (text-xs sm:text-sm md:text-md lg:text-lg) to ensure readability across all viewport sizes, with smaller text on mobile and progressively larger text on bigger screens.
• Flex Direction Adjustments: Applied responsive flex direction changes (flex-col sm:flex-row) to partner cards and other layout components, ensuring vertical stacking on mobile and horizontal layouts on larger screens.
• Centered Content Alignment: Added flex flex-col items-center to description sections across multiple pages, ensuring text is centered and properly aligned on mobile viewports.

📊 Impact Assessment:

• Security: No security implications. These are purely UI/styling changes with no modifications to authentication, data handling, or backend logic.
• Performance: Minimal performance impact. Changes are CSS-based responsive design patterns using Tailwind utility classes. No additional JavaScript or DOM elements added. The removal of max-h-52 constraint on cards may slightly improve rendering on mobile by allowing natural content flow.
• Maintainability: Improved maintainability through consistent use of Tailwind's responsive prefixes (sm:, md:, lg:). The pattern of splitting text into multiple spans is now consistently applied across pages, making future responsive updates easier. However, splitting text into multiple spans increases JSX verbosity slightly.
• Testing: Visual regression testing recommended to verify responsive behavior across breakpoints (mobile: 320px, tablet: 640px, desktop: 1024px+). No unit test changes required as these are presentation-only modifications. Manual testing on actual devices or browser DevTools responsive mode should validate the improvements.

⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only. — Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide

• Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
• Comment @beetle on any PR to start analysis manually
• Comment @beetle stop to stop any ongoing analysis

---

Follow us: Beetle · X · LinkedIn

[beetle-ai]

✅ You're good to merge this PR! No issues found. Great job!

Settings

⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only. — Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide

• Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
• Comment @beetle on any PR to start analysis manually
• Comment @beetle stop to stop any ongoing analysis

[devhub-bot]

Note

Linting checks passed successfully 🎉

All formatting and code quality checks are clean.

You're good to merge 🚀