Feature/contact us responsive 231 #247

Sendi0011 · 2025-09-04T15:05:30Z

Make Contact Us Page Responsive (Mobile → 4K) #231

📋 Overview

Implemented comprehensive responsive design for the Contact Us page, ensuring optimal user experience across all device sizes from mobile (320px) to 4K displays (3840px).

🔧 Changes Made

ContactForm.tsx

Responsive Container: Updated max-width system to scale appropriately across all breakpoints
- Mobile: max-w-xs (320px+)
- Small: max-w-sm (384px+)
- Medium: max-w-md (768px+)
- Large: max-w-2xl (1024px+)
- XL: max-w-3xl (1280px+)
- 2XL+: max-w-4xl (1536px+) for 4K constraint
Touch-Optimized Inputs:
- Added min-h-[44px] for proper touch targets
- Implemented touch-manipulation for better mobile performance
- Responsive padding: px-3 py-2.5 sm:px-4 sm:py-3
Typography & Spacing:
- Responsive text sizing: text-sm sm:text-base
- Scalable spacing system: space-y-4 sm:space-y-5 lg:space-y-6
- Grid gaps: gap-4 sm:gap-5 lg:gap-6
Fixed Critical Issues:
- Privacy Policy: Removed fixed w-[610px] causing horizontal overflow
- Textarea: Responsive min-heights and proper scaling
- Error Messages: Responsive typography for better readability

contact/page.tsx

Logo Responsiveness: Hidden on mobile/tablet (hidden lg:flex) to give form full space
Container Layout: Maintained original window approach with responsive padding
Grid System: Single column on mobile, two-column on desktop (1024px+)
Responsive Padding: Scales from px-4 py-12 (mobile) to 2xl:px-20 (4K)

🎯 Key Features Delivered

✅ Responsive Behavior

No horizontal overflow at any tested width
Typography and spacing scale appropriately
Single-column mobile layout with stacked fields
Two-column desktop layout with proper grid spacing
4K constraint with centered max-width

✅ Accessibility & UX

Touch targets meet minimum 44px requirement
Proper focus states and keyboard navigation
Readable contrast maintained across all breakpoints
Labels properly associated with form controls
Error messages scale appropriately

✅ Mobile Optimization

Clean single-column layout
Logo hidden to maximize form space
Touch-friendly input sizes
Appropriate spacing for small screens

✅ Desktop Enhancement

Two-column layout with logo
Proper grid spacing and alignment
Maintains design system consistency

📱 Screenshots & Video

Screenshots

* feat: implemented layout components * chore: cleanup app layout * fix: typography * fix: connect wallet btn border * chore: moved components dir to dapp dir

* feat: swap page * feat: token select dropdown * fix: build error * chore: add dummy connection comment * fix: cta colors * feat: swap success modal

* feat: add burn/claim page this first commit is a draft for the ongoing work on this page. for starters, i've updated the useTheme hook to be type-safe. i also went on to create a global store to sync the wallet state, although this is just a PoC for the entire implementation, using local state proved inefficient, as the click of "connect wallet" on the main card did not update the button state in the TopBar component. i believe that this sets up a ground work for how we can manage reactivity and sync UI state accorss the application with zustand. the UI still needs to match what's on the design, which i'll work on, and also finalize the process of adding new design tokens (color codes, basically) from figma, so i can properly implement the dark/light theme styles. * feat(ui): a complete refactor of the page to match what's on Figma i've also included more components to proper reflect these changes. the "connect wallet" button is now extensible with a new Gradient component to mimick the gradient border we have on most of the UI components on Figma. i also included new design tokens for the dark mode. moving on to the "light mode" implementation now. * feat: add light theme styles and refactor the theme hook to use a context provider the previous approach of enabling theming in the UI was buggy as there were stale values, and the body of the page doesn't recieve the correct theme value when it is switched. each component tries to call it on its own, which led to race conditions. when you switch to dark mode, some components' style would still retain light mode style (and vice versa, unless you do a "hard-reload"), which is problematic. the solution here was to move the logic into a global store with React context, so all components, irrespective of where they are in the tree have access to the same theme context.

…novations#128) i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it.

* feat: made updates to lock tokens page * feat: made updates to lock tokens page * feat: added themeprovider * feat: completed lock tokens page * feat: fixing bug and adding connect wallet functionality * feat: made updates to lock tokens page * feat: merging branch to local * feat: merging branch to local * feat: merging branch to local * feat: updated theme styling * feat: updated lock tokens ui * feat: made updates to lock tokens page * feat: merging branch to local * feat: merging branch to local * feat: merging branch to local * feat: updated lock tokens files

* feat: Coming soon page * changes done * made responsive

* fix: fixed mismatched imports due to the recent PR i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * feat: add dashboard UI this is a work-in-progress for the dashboard UI. for now, i have teh cards and the charts hooked-up onto dummy data. next stop is refactoring to match the designs acurately and fixing the modal UI for connecting a new wallet. * feat: add "connect wallet" modal. a tabbed-chart UI and realtime asset data this commit included a refactor of the dashboard to macth the UI design on figma, the connected wallet state, "connect wallet" modal, ensuring that the dashbaord content doesn't stretch on extra-large screens, and pulling asset data from a live DEX API * feat: add ability to connect to a real wallet this commit introduces the feature that lets people connect their real wallet accoun from the Ethereum or Starknet network with support for various wallets * feat: add dynamic wallet provider detection to the wallet-connection flow we still need to circle back on the idea of listing the available starknet providers when people have more than one starknet wallet installed. should be a rare case. but we shall consider it. * fix: show a list of starknet wallet providers when people have more than one extension installed * render modal in the app layout

* feat/add analytics page * adjust the chartcard * implemented coderabbit changes * fix: fixed mismatched imports due to the recent PR (Explore-Beyond-Innovations#128) i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * made the analytics page in sync with existing repo --------- Co-authored-by: Caleb! <48127194+kaf-lamed-beyt@users.noreply.github.com>

* feat/add analytics page * adjust the chartcard * implemented coderabbit changes * fix: fixed mismatched imports due to the recent PR (Explore-Beyond-Innovations#128) i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * made the analytics page in sync with existing repo * minor tweaks --------- Co-authored-by: icedoutskay <somkeneodikpo@gmail.com> Co-authored-by: Caleb! <48127194+kaf-lamed-beyt@users.noreply.github.com>

…re-Beyond-Innovations#160) * fix: fixed mismatched imports due to the recent PR i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * fix: make mobile sidebar responsive across missing breakpoints

…ations#161) * fix: fixed mismatched imports due to the recent PR i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * refactor coming soon page to match Figma layout

…nd-Innovations#161)" (Explore-Beyond-Innovations#164) This reverts commit d5fcd3a.

…re-Beyond-Innovations#165) * fix: fixed mismatched imports due to the recent PR i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * refactor coming soon page to match Figma layout * chore: get sidebar updates into local and fix the layout issue

…ns#163) * fix: style inconsistencies on the dashboard * refactor coming soon page to match Figma layout (Explore-Beyond-Innovations#161) * fix: fixed mismatched imports due to the recent PR i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * refactor coming soon page to match Figma layout * Revert "refactor coming soon page to match Figma layout (Explore-Beyond-Innovations#161)" (Explore-Beyond-Innovations#164) This reverts commit d5fcd3a. * chore: get sidebar updates into local and fix the layout issue (Explore-Beyond-Innovations#165) * fix: fixed mismatched imports due to the recent PR i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * refactor coming soon page to match Figma layout * chore: get sidebar updates into local and fix the layout issue * chore: reduced the padding of the dashboard on mobile screens --------- Co-authored-by: Caleb! <48127194+kaf-lamed-beyt@users.noreply.github.com> Co-authored-by: Ugonna Paul Dike <ugonnadike001@gmail.com>

* fix: improves the organization and visual structure to better match the Figma design specifications * fix: fixed scroll issue

* Lock tokens page responsive * Changes done

* added the proloader to the dapp * little fix

…plore-Beyond-Innovations#196) * feat: add skeleton loading states to swap page components * removed skeleton for button

…ations#207)

…ations#208)

…nnovations#198) * feat: Implement internationalization support with i18next integration * updates * fix resposniveness * updates --------- Co-authored-by: martinvibes <martinmachiebe21@gmail>

… (Explore-Beyond-Innovations#210) * feat: Add Mock Loading Skeletons Explore-Beyond-Innovations#187 * feat: Lock Tokens loading skeleton Explore-Beyond-Innovations#187 * Update lock-tokens.tsx

* fix * fix

* feat: implement custom 404 error page with animations - Add animated 404 page with Framer Motion effects - Include ZeroXBridge branding with purple gradients - Add Back to Home and Go Back buttons - Include helpful links to About and Dashboard - Responsive design for all screen sizes - Accessibility features with proper semantic structure Fixes Explore-Beyond-Innovations#176 * feat: implement custom 500 error page with retry functionality - Add animated 500 page with rotating icon and pulsing effects - Include Try Again button with reset capability - Add Back to Home navigation button - Show error details in development mode - Include support contact information - Consistent design matching 404 page with ZeroXBridge branding Part of Explore-Beyond-Innovations#176 * assets: add error icon for custom error pages - Add custom error-404-500.png icon for both error pages - High-quality image with consistent branding - Used by both 404 and 500 error pages Part of Explore-Beyond-Innovations#176 * test: configure Jest testing environment for Next.js - Add Jest configuration with Next.js integration - Set up testing environment with jsdom - Add module name mapping for path aliases - Configure transform ignore patterns for node_modules - Set up mocks for Next.js navigation, Image, and framer-motion - Configure ResizeObserver and matchMedia mocks Part of Explore-Beyond-Innovations#176 * test: add comprehensive error page test suite - Test 404 and 500 error page rendering and functionality - Verify error icons display correctly - Test button functionality (Back to Home, Go Back, Try Again) - Validate helpful links and support information - Check error details display in development mode - Test accessibility with semantic structure - Verify responsive design classes - All 18 tests passing with proper mocks Part of Explore-Beyond-Innovations#176 * chore: add testing dependencies and scripts - Add Jest and React Testing Library dependencies - Include @testing-library/jest-dom for custom matchers - Add test scripts: test, test:watch, test:coverage - Update @types/jest to latest version Part of Explore-Beyond-Innovations#176 * docs: add manual testing script for error pages - Add comprehensive manual testing checklist - Include tests for animations, responsiveness, and accessibility - Verify error page files and icon existence - Provide testing instructions for both 404 and 500 pages - Mark issue Explore-Beyond-Innovations#176 as complete with summary Completes Explore-Beyond-Innovations#176 * fix: resolve dependency issues in error pages - Replace Button component import with inline implementation - Remove problematic @/lib/utils dependency chain - Fix 'Cannot read properties of undefined' runtime error - Error pages now load correctly without console errors - Animations and functionality preserved Fixes runtime errors in Explore-Beyond-Innovations#176 * refactor: use proper Button component in error pages - Replace temporary button implementation with official Button component - Create clean Button component in app/components/ui/button.tsx - Add clean cn utility function without problematic dependencies - Fix error pages to use consistent design system - Resolve all dependency chain issues that caused runtime errors Improves Explore-Beyond-Innovations#176 * fix: resolve Next.js metadata and dependency issues - Update Next.js from 15.1.7 to 15.5.0 - Fix next.config.ts configuration for proper metadata handling - Remove class-variance-authority and @radix-ui/react-slot dependencies from Button - Create simplified Button component without problematic dependencies - Clean reinstall all dependencies to resolve icon-mark.js errors - Remove temporary test-500 page that was causing errors - Ensure both 404 and 500 error pages work as Next.js error views Resolves metadata generation issues and improves stability Fixes Explore-Beyond-Innovations#176 * fix: resolve React type compatibility and simplify error pages - Downgrade @types/react from 19.1.11 to 18.3.24 (compatible with React 18.3.1) - Downgrade @types/react-dom from 19.1.7 to 18.3.7 - Simplify error pages to eliminate complex dependencies causing 'call' errors - Remove Framer Motion, complex Button components, and other problematic dependencies - Create clean, functional 404 and 500 pages with minimal dependencies - Maintain design consistency with purple theme and proper styling Resolves 'Cannot read properties of undefined (reading "call")' errors Fixes Explore-Beyond-Innovations#176 * fix: add 'use client' directive and fix Next.js config warnings - Add 'use client' directive to Button component for client-side interactivity - Remove deprecated 'swcMinify' option from next.config.ts - Ensure all interactive components have proper client directives - Clear cache to apply configuration changes Resolves Next.js warnings and ensures proper client/server component boundaries Fixes Explore-Beyond-Innovations#176 * fix: add empty service worker to prevent sw.js 404 errors - Add minimal service worker to handle browser requests for sw.js - Prevents 'Failed to load resource' errors in browser console - Improves error page debugging experience Fixes service worker related console errors * feat: restore complete error page design with icon and visual effects - Add error-404-500.png icon to both 404 and 500 pages - Restore background gradient effects and floating elements - Include full descriptive text and help links - Maintain all previous error fixes (React types, use client, etc.) - Use CSS transforms instead of Framer Motion to avoid dependencies - Preserve purple theme (#a26dff) and responsive design - Add hover effects and transitions using pure CSS Completes Explore-Beyond-Innovations#176 with full visual design as requested

…ions#224)

…der (Explore-Beyond-Innovations#225)

…plore-Beyond-Innovations#181) * feat: add NextAuth integration with Ethereum credentials provider * Updated package.json to include next-auth dependency * Implemented authentication route for Ethereum address verification * Extended next-auth types to include user address in session and JWT Signed-off-by: Pushkar Mishra <pushkarmishra029@gmail.com> * feat: enhance NextAuth Ethereum provider with SIWE support * Added SIWE (Sign-In with Ethereum) message handling to the authentication flow * Introduced nonce validation to prevent replay attacks * Improved input validation for address and signature formats * Updated package.json to include the 'siwe' library Signed-off-by: Pushkar Mishra <pushkarmishra029@gmail.com> --------- Signed-off-by: Pushkar Mishra <pushkarmishra029@gmail.com>

* fear: support page guildescard created * fix: addressed PR review comments

* Fix issue 189 (Explore-Beyond-Innovations#228) * cleanup/initial * tailwind config cleanup * file changes * feat: implemented layout components (Explore-Beyond-Innovations#121) * feat: implemented layout components * chore: cleanup app layout * fix: typography * fix: connect wallet btn border * chore: moved components dir to dapp dir * feat: swap page (Explore-Beyond-Innovations#123) * feat: swap page * feat: token select dropdown * fix: build error * chore: add dummy connection comment * fix: cta colors * feat: swap success modal * feat: add burn/claim page (Explore-Beyond-Innovations#122) * feat: add burn/claim page this first commit is a draft for the ongoing work on this page. for starters, i've updated the useTheme hook to be type-safe. i also went on to create a global store to sync the wallet state, although this is just a PoC for the entire implementation, using local state proved inefficient, as the click of "connect wallet" on the main card did not update the button state in the TopBar component. i believe that this sets up a ground work for how we can manage reactivity and sync UI state accorss the application with zustand. the UI still needs to match what's on the design, which i'll work on, and also finalize the process of adding new design tokens (color codes, basically) from figma, so i can properly implement the dark/light theme styles. * feat(ui): a complete refactor of the page to match what's on Figma i've also included more components to proper reflect these changes. the "connect wallet" button is now extensible with a new Gradient component to mimick the gradient border we have on most of the UI components on Figma. i also included new design tokens for the dark mode. moving on to the "light mode" implementation now. * feat: add light theme styles and refactor the theme hook to use a context provider the previous approach of enabling theming in the UI was buggy as there were stale values, and the body of the page doesn't recieve the correct theme value when it is switched. each component tries to call it on its own, which led to race conditions. when you switch to dark mode, some components' style would still retain light mode style (and vice versa, unless you do a "hard-reload"), which is problematic. the solution here was to move the logic into a global store with React context, so all components, irrespective of where they are in the tree have access to the same theme context. * fix: fixed mismatched imports due to the recent PR (Explore-Beyond-Innovations#128) i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * Feat/lock tokens (Explore-Beyond-Innovations#124) * feat: made updates to lock tokens page * feat: made updates to lock tokens page * feat: added themeprovider * feat: completed lock tokens page * feat: fixing bug and adding connect wallet functionality * feat: made updates to lock tokens page * feat: merging branch to local * feat: merging branch to local * feat: merging branch to local * feat: updated theme styling * feat: updated lock tokens ui * feat: made updates to lock tokens page * feat: merging branch to local * feat: merging branch to local * feat: merging branch to local * feat: updated lock tokens files * feat: Coming soon page (Explore-Beyond-Innovations#127) * feat: Coming soon page * changes done * made responsive * coming-soon little fix * ui fixes * fixed build error * feat: add dashboard UI (Explore-Beyond-Innovations#129) * fix: fixed mismatched imports due to the recent PR i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * feat: add dashboard UI this is a work-in-progress for the dashboard UI. for now, i have teh cards and the charts hooked-up onto dummy data. next stop is refactoring to match the designs acurately and fixing the modal UI for connecting a new wallet. * feat: add "connect wallet" modal. a tabbed-chart UI and realtime asset data this commit included a refactor of the dashboard to macth the UI design on figma, the connected wallet state, "connect wallet" modal, ensuring that the dashbaord content doesn't stretch on extra-large screens, and pulling asset data from a live DEX API * feat: add ability to connect to a real wallet this commit introduces the feature that lets people connect their real wallet accoun from the Ethereum or Starknet network with support for various wallets * feat: add dynamic wallet provider detection to the wallet-connection flow we still need to circle back on the idea of listing the available starknet providers when people have more than one starknet wallet installed. should be a rare case. but we shall consider it. * fix: show a list of starknet wallet providers when people have more than one extension installed * render modal in the app layout * Style fixes * Feat/analytics page (Explore-Beyond-Innovations#125) * feat/add analytics page * adjust the chartcard * implemented coderabbit changes * fix: fixed mismatched imports due to the recent PR (Explore-Beyond-Innovations#128) i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * made the analytics page in sync with existing repo --------- Co-authored-by: Caleb! <48127194+kaf-lamed-beyt@users.noreply.github.com> * Icedoutskay feat/analytics page (Explore-Beyond-Innovations#132) * feat/add analytics page * adjust the chartcard * implemented coderabbit changes * fix: fixed mismatched imports due to the recent PR (Explore-Beyond-Innovations#128) i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * made the analytics page in sync with existing repo * minor tweaks --------- Co-authored-by: icedoutskay <somkeneodikpo@gmail.com> Co-authored-by: Caleb! <48127194+kaf-lamed-beyt@users.noreply.github.com> * fix: build errors (Explore-Beyond-Innovations#133) * fix: make mobile sidebar responsive across missing breakpoints (Explore-Beyond-Innovations#160) * fix: fixed mismatched imports due to the recent PR i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * fix: make mobile sidebar responsive across missing breakpoints * refactor coming soon page to match Figma layout (Explore-Beyond-Innovations#161) * fix: fixed mismatched imports due to the recent PR i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * refactor coming soon page to match Figma layout * Revert "refactor coming soon page to match Figma layout (Explore-Beyond-Innovations#161)" (Explore-Beyond-Innovations#164) This reverts commit d5fcd3a. * chore: get sidebar updates into local and fix the layout issue (Explore-Beyond-Innovations#165) * fix: fixed mismatched imports due to the recent PR i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * refactor coming soon page to match Figma layout * chore: get sidebar updates into local and fix the layout issue * fix: style inconsistencies on the dashboard (Explore-Beyond-Innovations#163) * fix: style inconsistencies on the dashboard * refactor coming soon page to match Figma layout (Explore-Beyond-Innovations#161) * fix: fixed mismatched imports due to the recent PR i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * refactor coming soon page to match Figma layout * Revert "refactor coming soon page to match Figma layout (Explore-Beyond-Innovations#161)" (Explore-Beyond-Innovations#164) This reverts commit d5fcd3a. * chore: get sidebar updates into local and fix the layout issue (Explore-Beyond-Innovations#165) * fix: fixed mismatched imports due to the recent PR i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it. * refactor coming soon page to match Figma layout * chore: get sidebar updates into local and fix the layout issue * chore: reduced the padding of the dashboard on mobile screens --------- Co-authored-by: Caleb! <48127194+kaf-lamed-beyt@users.noreply.github.com> Co-authored-by: Ugonna Paul Dike <ugonnadike001@gmail.com> * feat: fix the swap page (Explore-Beyond-Innovations#167) * Fix/analytics page (Explore-Beyond-Innovations#169) * fix: improves the organization and visual structure to better match the Figma design specifications * fix: fixed scroll issue * Lock tokens page responsive (Explore-Beyond-Innovations#162) * Lock tokens page responsive * Changes done * added the proloader to the dapp (Explore-Beyond-Innovations#179) * added the proloader to the dapp * little fix * governance * Add skeleton/shimmer states to the Swap page using mocked loading (Explore-Beyond-Innovations#196) * feat: add skeleton loading states to swap page components * removed skeleton for button * Fix-185 Add Mock Loading Skeletons – Claim/Burn (Explore-Beyond-Innovations#207) * fix conflict error (Explore-Beyond-Innovations#203) * Fix-184: Add Mock Loading Skeletons – Dashboard (Explore-Beyond-Innovations#208) * feat: add internationalization support with i18next (Explore-Beyond-Innovations#198) * feat: Implement internationalization support with i18next integration * updates * fix resposniveness * updates --------- Co-authored-by: martinvibes <martinmachiebe21@gmail> * add Mock Loading Skeletons – Lock Tokens Explore-Beyond-Innovations#187 (Explore-Beyond-Innovations#210) * feat: Add Mock Loading Skeletons Explore-Beyond-Innovations#187 * feat: Lock Tokens loading skeleton Explore-Beyond-Innovations#187 * Update lock-tokens.tsx * support * fix (Explore-Beyond-Innovations#221) * fix * fix * fixed-issue --------- Co-authored-by: Ugo-X <ugonnadike001@gmail.com> Co-authored-by: Isaac Onyemaechi <amaechiisaac450@gmail.com> Co-authored-by: Oshioke Salaki <salaki1902@gmail.com> Co-authored-by: Caleb! <48127194+kaf-lamed-beyt@users.noreply.github.com> Co-authored-by: Abdulhakeem Abdulazeez Ayodeji <44169294+Ayoazeez26@users.noreply.github.com> Co-authored-by: Yakshit Agarwal <153830716+YakshitAgarwal@users.noreply.github.com> Co-authored-by: Odikpo Somkenechukwu <somkeneodikpo@gmail.com> Co-authored-by: wheval <whevalmezeegbe@gmail.com> Co-authored-by: Ugochukwu Nebolisa <nebolisaugochukwu@gmail.com> Co-authored-by: James Victor <112592627+JamesVictor-O@users.noreply.github.com> Co-authored-by: Jay <111138366+Jayrodri088@users.noreply.github.com> Co-authored-by: Ochulor Freedom <154595610+FreddyJ23@users.noreply.github.com> Co-authored-by: Raymond Joseph <162983930+raymondjoseph02@users.noreply.github.com> Co-authored-by: Atunwa Vincent <125933139+Sirvincee@users.noreply.github.com> Co-authored-by: martin machiebe <127976766+martinvibes@users.noreply.github.com> Co-authored-by: martinvibes <martinmachiebe21@gmail> Co-authored-by: Emmanuel Nweke <69096827+CodexpathCommunity@users.noreply.github.com> Co-authored-by: Damigurl <damigurldox@gmail.com> * unknown --------- Co-authored-by: Angel Mba <70325824+Michelle031@users.noreply.github.com> Co-authored-by: Ugo-X <ugonnadike001@gmail.com> Co-authored-by: Isaac Onyemaechi <amaechiisaac450@gmail.com> Co-authored-by: Oshioke Salaki <salaki1902@gmail.com> Co-authored-by: Caleb! <48127194+kaf-lamed-beyt@users.noreply.github.com> Co-authored-by: Abdulhakeem Abdulazeez Ayodeji <44169294+Ayoazeez26@users.noreply.github.com> Co-authored-by: Yakshit Agarwal <153830716+YakshitAgarwal@users.noreply.github.com> Co-authored-by: Odikpo Somkenechukwu <somkeneodikpo@gmail.com> Co-authored-by: wheval <whevalmezeegbe@gmail.com> Co-authored-by: Ugochukwu Nebolisa <nebolisaugochukwu@gmail.com> Co-authored-by: James Victor <112592627+JamesVictor-O@users.noreply.github.com> Co-authored-by: Jay <111138366+Jayrodri088@users.noreply.github.com> Co-authored-by: Ochulor Freedom <154595610+FreddyJ23@users.noreply.github.com> Co-authored-by: Raymond Joseph <162983930+raymondjoseph02@users.noreply.github.com> Co-authored-by: Atunwa Vincent <125933139+Sirvincee@users.noreply.github.com> Co-authored-by: martin machiebe <127976766+martinvibes@users.noreply.github.com> Co-authored-by: martinvibes <martinmachiebe21@gmail> Co-authored-by: Emmanuel Nweke <69096827+CodexpathCommunity@users.noreply.github.com> Co-authored-by: Damigurl <damigurldox@gmail.com>

…vations#236)

* feat: create helper for message signing * fix: coderabbit suggestions

…ons#230 (Explore-Beyond-Innovations#239) - Add ContactForm.tsx component with form validation - Create contact/page.tsx with proper layout structure - Import existing Navbar, OnlyDust banner, and Footer components - Implement form fields: Name, Email, Subject, Message textarea - Add inline privacy policy link - Include client-side form validation - Style for desktop (PC) baseline layout - Add supporting UI components and assets

…reum signature (Explore-Beyond-Innovations#240) Co-authored-by: tusharshah21 <tusahrkumarshah14394@gmail.com>

- Update ContactForm.tsx with responsive container widths, spacing, and typography - Fix touch targets (min 44px height) and add touch-manipulation for mobile - Remove fixed width from privacy policy section to prevent overflow - Hide logo on mobile/tablet (320px-1023px) to give form full space - Add responsive padding and grid gaps across all breakpoints - Ensure proper scaling from mobile (320px) to 4K (3840px) Fixes Explore-Beyond-Innovations#231

coderabbitai · 2025-09-04T15:05:42Z

Important

Review skipped

More than 25% of the files skipped due to max files limit. The review is being skipped to prevent a low-quality review.

50 files out of 188 files are above the max files limit of 100. Please upgrade to Pro plan to get higher limits.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

Ugo-X and others added 30 commits July 28, 2025 10:50

cleanup/initial

6153f1e

tailwind config cleanup

2c4f296

file changes

9699935

feat: implemented layout components (Explore-Beyond-Innovations#121)

062eb7e

* feat: implemented layout components * chore: cleanup app layout * fix: typography * fix: connect wallet btn border * chore: moved components dir to dapp dir

feat: swap page (Explore-Beyond-Innovations#123)

37c2813

* feat: swap page * feat: token select dropdown * fix: build error * chore: add dummy connection comment * fix: cta colors * feat: swap success modal

fix: fixed mismatched imports due to the recent PR (Explore-Beyond-In…

f23cb4e

…novations#128) i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it.

feat: Coming soon page (Explore-Beyond-Innovations#127)

fbac532

* feat: Coming soon page * changes done * made responsive

coming-soon little fix

90faa42

ui fixes

1a9ae2a

fixed build error

6a4c714

Style fixes

c64b9a1

fix: build errors (Explore-Beyond-Innovations#133)

a6df082

Revert "refactor coming soon page to match Figma layout (Explore-Beyo…

fa3d2d8

…nd-Innovations#161)" (Explore-Beyond-Innovations#164) This reverts commit d5fcd3a.

feat: fix the swap page (Explore-Beyond-Innovations#167)

824e8a3

Fix/analytics page (Explore-Beyond-Innovations#169)

7fc3729

* fix: improves the organization and visual structure to better match the Figma design specifications * fix: fixed scroll issue

Lock tokens page responsive (Explore-Beyond-Innovations#162)

ca52788

* Lock tokens page responsive * Changes done

added the proloader to the dapp (Explore-Beyond-Innovations#179)

36c7416

* added the proloader to the dapp * little fix

governance

6c74fa9

Add skeleton/shimmer states to the Swap page using mocked loading (Ex…

98d28bf

…plore-Beyond-Innovations#196) * feat: add skeleton loading states to swap page components * removed skeleton for button

Fix-185 Add Mock Loading Skeletons – Claim/Burn (Explore-Beyond-Innov…

5ab08ff

…ations#207)

fix conflict error (Explore-Beyond-Innovations#203)

e91bac9

Sirvincee and others added 18 commits August 22, 2025 00:48

Fix-184: Add Mock Loading Skeletons – Dashboard (Explore-Beyond-Innov…

c0ff772

…ations#208)

feat: add internationalization support with i18next (Explore-Beyond-I…

95b389f

…nnovations#198) * feat: Implement internationalization support with i18next integration * updates * fix resposniveness * updates --------- Co-authored-by: martinvibes <martinmachiebe21@gmail>

add Mock Loading Skeletons – Lock Tokens Explore-Beyond-Innovations#187…

66dd0b8

… (Explore-Beyond-Innovations#210) * feat: Add Mock Loading Skeletons Explore-Beyond-Innovations#187 * feat: Lock Tokens loading skeleton Explore-Beyond-Innovations#187 * Update lock-tokens.tsx

support

1e19b4a

fix (Explore-Beyond-Innovations#221)

c40f0f1

* fix * fix

Added VotingProposals page in dapp/governance (Explore-Beyond-Innovat…

22815b4

…ions#224)

feat(ui): implemented the community-card component in the support fol…

fa99abd

…der (Explore-Beyond-Innovations#225)

Feat/design (Explore-Beyond-Innovations#229)

61592af

* fear: support page guildescard created * fix: addressed PR review comments

feat: add Delegates component to governance page (Explore-Beyond-Inno…

0d154a0

…vations#236)

feat: create helper for message signing (Explore-Beyond-Innovations#233)

d9afffb

* feat: create helper for message signing * fix: coderabbit suggestions

integrate registerUser flow for Starknet pubkey registration via Ethe…

c92383a

…reum signature (Explore-Beyond-Innovations#240) Co-authored-by: tusharshah21 <tusahrkumarshah14394@gmail.com>

Fix issue 215 (Explore-Beyond-Innovations#243)

8c7f423

feat: add faqscard(215) (Explore-Beyond-Innovations#246)

a38ef3a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature/contact us responsive 231 #247

Feature/contact us responsive 231 #247

Uh oh!

Sendi0011 commented Sep 4, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Sep 4, 2025

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Status, Documentation and Community

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

Feature/contact us responsive 231 #247

Are you sure you want to change the base?

Feature/contact us responsive 231 #247

Uh oh!

Conversation

Sendi0011 commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Make Contact Us Page Responsive (Mobile → 4K) #231

📋 Overview

🔧 Changes Made

ContactForm.tsx

contact/page.tsx

🎯 Key Features Delivered

✅ Responsive Behavior

✅ Accessibility & UX

✅ Mobile Optimization

✅ Desktop Enhancement

📱 Screenshots & Video

Screenshots

🔍 Testing Checklist

Responsiveness

Functionality

🚀 Performance Impact

Uh oh!

coderabbitai bot commented Sep 4, 2025

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Status, Documentation and Community

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

Sendi0011 commented Sep 4, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)