Berry Free MUI React Admin Template

هذا التحليل غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.

Overall

admin dashboard, modern, medium density, light

Palette

background #ffffff; surfaces [#e3f2fd, #1e88e5, #5e35b1, #ede7f6]; text #121926; muted text #364152; primary #673ab7; accents [#2196f3, #1e88e5, #5e35b1]

Type

headings Roboto, 500, sentence-case; body Roboto, 14px; scale h3 20px

Shape & spacing

button/card radius 8px/27px, no borders, soft shadows, section spacing 24px, content width 1200px

Sections (top to bottom)

• Header — horizontal layout, logo on left, search bar centered, user avatar and icons on right, white background
• Sidebar — vertical navigation with icon labels, collapsed state shown, light gray background, active item highlighted in purple
• Main content — grid layout with three top cards (purple, blue, blue), stacked bar chart below, popular stocks list on right, all cards have rounded corners and subtle shadow
• Footer — small text at bottom, copyright and links, light gray background

Signature details

• Gradient-filled cards with abstract wave patterns
• Floating action button with gear icon in purple circle
• Stacked bar chart with color-coded segments (investment, loss, profit, maintenance)
• Progress bar with percentage label in sidebar
• Hover states on navigation items with purple highlight
• Consistent use of rounded corners across all components

Other pages

• /free/dashboard/default: Dashboard view with metrics cards, growth chart, and stock list
• /free/sample-page: Minimal card layout with placeholder text and sample content

1. 1

   انقر على «استخدم هذا القالب» لفتحه في Ottermind Studio مع ملء الموجز.

2. 2

   أضف إلى الموجز علامتك التجارية وجمهورك وصفحاتك ومحتواك.

3. 3

   ينشئ Ottermind موقعًا جديدًا مستوحى من هذا التصميم، وتابع تعديله في المحادثة.