Student Profile Page with Purple EdTech Theme

I'll create a comprehensive student profile page with all the requested information and activity cards using a purple EdTech theme.

Key Features

1. Student Profile Header

   • Displays all personal information: name, email, registration number, user ID, phone, qualification, gender
   • Shows college details: name, place, district, state
   • Clean layout with purple-themed icons and styling

2. Activity Cards

   • Plantation Card: Shows plants planted count, initiative name, batch, and course info
   • Blood Donation Card: Displays donation count, blood group, last donation date, and certificates
   • Senior Service Card: Shows service hours, projects, location, and last activity date
   • Enrolled Batch Card: Displays current course, progress, instructor, and course dates

3. Design Elements

   • Purple EdTech theme throughout the interface
   • Responsive layout that works on mobile and desktop
   • Card-based design for easy information scanning
   • Progress indicators for visual feedback
   • Consistent iconography and styling

The profile page is fully responsive and follows modern design principles with the requested purple EdTech theme. The information is organized in a clean, easy-to-read format with visual elements to enhance the user experience.

Converting to Chakra UI v3

I'll convert the student profile page from shadcn/ui and Tailwind CSS to Chakra UI v3 with the same purple EdTech theme.

Chakra UI v3 Conversion Details

I've converted the student profile page from shadcn/ui and Tailwind CSS to Chakra UI v3, maintaining the same purple EdTech theme and functionality. Here are the key changes:

1. Chakra UI Setup

• Added ChakraProvider in the layout file
• Created a custom theme with the purple color palette
• Configured component variants for consistent styling

2. Component Conversions

• Replaced all shadcn components with Chakra UI equivalents:

  • Card → Chakra Card
  • Button → Chakra Button
  • Avatar → Chakra Avatar
  • Progress → Chakra Progress
  • Badge → Chakra Badge

3. Styling Changes

• Replaced Tailwind utility classes with Chakra UI's prop-based styling
• Used Chakra UI's responsive props for layout (e.g., direction={{ base: "column", md: "row" }})
• Maintained the same purple color scheme using Chakra UI's theming system

4. Layout Components

• Used Chakra UI's layout components:

  • Box instead of div
  • Flex for flexbox layouts
  • Stack and HStack for vertical and horizontal spacing
  • SimpleGrid for responsive grid layouts

5. Theme Customization

• Created a custom theme with the purple color palette
• Configured component variants for consistent styling across the application
• Set up default styles for buttons, badges, and cards

The converted code maintains all the functionality and visual design of the original implementation while using Chakra UI's component system and styling approach.