Mobile Dashboard - Copy this React, Tailwind Component to your project

Overview: Design a clean, professional, and modern mobile dashboard interface with a focus on a minimalist and intuitive user experience. The dashboard should contain a bottom navigation bar with four essential options: Home, Notifications, Profile, and Logout. The primary area of the dashboard should present three interactive cards with key details, along with small descriptions under each. The dashboard should have a polished, contemporary feel with consistent visual elements, such as color schemes, typography, and iconography. Key Design Elements: Bottom Navigation Bar: The bottom bar should be sleek and have icons representing the following sections: Home: Represented by a home icon (e.g., house symbol). Notifications: Represented by a bell icon to indicate alerts or messages. Profile: Represented by a user icon (e.g., silhouette) for user settings. Logout: Represented by a logout icon (e.g., door exit symbol). The icons should be placed evenly and provide visual feedback when selected. A background color of the bottom navigation should be modern, like a dark shade or gradient, with white or vibrant icon colors. Dashboard Section: The main dashboard area should have three cards, each presenting specific details about past, current, and future rake data. The cards should have a soft shadow effect for a modern look and use rounded corners for a friendly feel. Each card will have: Title: A bold, easily readable heading that describes the data (e.g., "Past Rake Details"). Rake Count: A prominent numerical figure (e.g., a number in bold or large font size to grab attention). One Liner Description: A brief text explaining the data or its significance (e.g., "Total rake generated for the last period"). Card Background: A light, neutral color with a gradient or soft subtle pattern for sophistication. The three cards should be as follows: Past Rake Details: Heading: "Past Rake Details" Count: A numerical value like "350" One Liner: "Total rake generated during the last week." Current Rake Details: Heading: "Current Rake Details" Count: A numerical value like "120" One Liner: "Rake generated so far this week." Future Rake Details: Heading: "Future Rake Predictions" Count: A forecast number like "500" One Liner: "Predicted rake for the upcoming period." Design Aesthetic: Color Palette: Use a modern and professional color palette with a mix of neutral tones and accent colors (such as dark blue, teal, or grey for the background, with bright accents for icons and text). Typography: Use a clean sans serif font for text (such as Helvetica, Roboto, or Open Sans). Ensure font sizes are legible and consistent for headings, numbers, and descriptions. Card Design: Each card should have an elegant border radius (15px to 25px) with a subtle shadow effect to make the cards stand out against the background. Icons: Use simple, flat, and colorful icons for the bottom navigation bar to make the interface look modern. Button Design: Any interactive elements, such as buttons or links, should be clearly distinguishable. These buttons could be rounded with a contrasting background color (e.g., teal or blue). Additional Elements to Enhance Professionalism: Header Section: Above the cards, there could be a small section displaying the user’s name or a greeting (e.g., "Hello, John!" or "Welcome back, User"). Visual Analytics: Add a small graphical element like a progress bar or mini chart on each card to visually represent data (e.g., a progress bar for rake progress in the current period). Notification Indicator: A red dot or badge on the notifications icon in the bottom bar if there are unread notifications. Profile Preview: When the profile icon is clicked, show a small preview of the user’s profile picture and name at the top of the page with a clean, professional layout. Interactive Elements: On tapping or clicking each card, the user should be directed to a detailed view with more in depth information (e.g., detailed rake data or analytics). The app should have smooth transitions between screens and slight animations when selecting cards, ensuring a fluid user experience. The notification icon in the bottom bar can light up with a small badge showing unread notifications, adding a dynamic touch. Overall Feel: The design should feel balanced and easy to navigate, with ample space between each section and card. The dashboard should have a light, bright background that complements the color of the cards and icons, making the layout both readable and visually appealing. Ensure the overall layout is adaptable for different screen sizes, offering a responsive design that looks great on both smartphones and tablets.