I'll center-align both the values and labels in the footer section:
I've updated the footer section to center-align both the values and their labels. The changes include:
items-center class to each flex column to vertically center the contenttext-center class to ensure the text itself is centered within each columnNow both metrics are displayed with their values and labels perfectly centered in their respective columns, creating a balanced and visually appealing footer section.
I'll update the dashboard layout to center the widgets in the viewport and make them smaller:
I've made several changes to center the widgets in the viewport and make them smaller:
min-h-screen that centers content both horizontally and verticallybg-gray-50) to distinguish the dashboard areamax-w-5xl)max-w-md to constrain each widget's widthmx-auto to center each widget in its columnshadow-md for better visual separationMade text elements smaller:
text-basetext-xsh-7 and text-xstext-base for values and text-xs for labelspb-4 to the card footersapp/page.tsx that renders the DashboardWidgets componentThe result is a cleaner, more compact dashboard with both widgets centered in the viewport. The widgets maintain their functionality but take up less space and have a more refined appearance.