SK
Sair Khan

App - Copy this React, Tailwind Component to your project

Header: Keep the header simple and clean, featuring the app's name in Arabic on the left and a notification bell icon on the right. Use modern fonts, white space, and a soft shadow to create a sleek look. Add a small profile picture or initials next to the notification icon to make it more personal and accessible. Profile Card: Create a profile card with rounded edges and a soft gradient background, showing the parent's name, branch, and assigned teacher in a visually appealing format. Include a small chevron (arrow) on the right to indicate that tapping the card will lead to detailed profile information. Add subtle shadows and smooth ripple effects for interactive feedback. Sections: Design the sections (Messages, Surveys, Events, Weekly Reports, Announcements, Appointments, Leaves, Payments, Attendance) as large, colorful tiles or cards with unique icons or SVG images. Use a modern iconography style (flat, colorful, and simple) for a fresh, contemporary feel. Organize the sections in a grid layout, making it easy for users to quickly access key features. Provide subtle hover or tap animations to enhance the modern touch. Recent Activities: Create a wide, rounded card for "Recent Activities," showcasing four key activities like "Meal at 2 PM" and "Lunch at 12 PM" with large, readable fonts. Use icons or small illustrations next to each activity for added visual engagement. Include a "See All Activities" button at the bottom of the card, clearly marked and easily tappable. Tab Bar: Add a floating tab bar at the bottom with modern, bold icons. The tab bar should have five elements: "Dashboard" icon for easy navigation back to the main screen. "Weekly Reports" icon. A large, circular "+" button in the center for quick actions (e.g., adding events, tasks). "Messages" and "Settings" icons on the right side. Use vibrant accent colors for the active tab to draw attention and create a responsive feel when switching between tabs.

Prompt
Component Preview

About

App - A sleek header with Arabic name, profile card, colorful section tiles, rounded activity cards, and a bold tab bar, built with r. Copy component code!

Share

Last updated 1 month ago