Now let me break this into a structured plan. Since this is a comprehensive multi-screen app, I'll use TodoManager to organize the work:

Now let me examine the existing codebase and then start building the design tokens and theme:

Now I'll update the design tokens to match the gamified, colorful aesthetic inspired by Duolingo. I'll use vibrant greens, warm pastels, and playful colors:

Now let me update the layout.tsx to add the proper metadata and prepare for the app:

Now I'll create the main page and components. Let me start by creating the authentication screens and then the main app structure:

Now let me create the onboarding component:

Now let me move to the next task by creating the home dashboard component:

Now I'll create the home dashboard component:

Now let me create the supporting components like the character card and progress ring:

Now the progress ring component:

Now the daily checklist component:

Now let me move to the next task and create the diet tracking component:

Now I'll create the diet plan screen with food suggestions:

Now let me move to the next task and create the rewards and customization screen:

Now I'll create the rewards screen with avatar customization:

Now let me create the leaderboard and settings screens:

Now let me create the profile and settings screens:

Now let me create the settings screen:

Now let me complete the todo list and create the main app page that ties everything together:

Now let me create the main page that ties everything together:

Now I'll update the page.tsx to create the main app with all the screens:

Now let me mark all tasks as complete and create a summary:

I've successfully built a complete, gamified Diet Plan Suggesting App UI inspired by Duolingo with all the features you requested. Here's what's been created:

App Features Implemented:

Authentication & Onboarding

• Login/Signup with email or phone options
• Multi-language selection (English, Tamil, Hindi)
• Step-by-step onboarding form with name, age, gender, height, weight, location, and goal selection

Home Dashboard

• Profile header with user info and settings access
• Coin balance display
• Animated character with mood reactions based on daily progress
• Daily progress ring showing task completion percentage
• Daily checklist with 4 tasks (water intake, reduce sugar, avoid junk food, sleep hours)
• Quick action buttons for diet plan and leaderboard access

Diet Plan Section

• Two tabs: Home Meals and Online Products
• Meal suggestions organized by breakfast, lunch, and dinner
• Vegetarian and non-veg food options with calorie counts
• Online product marketplace with purchase links

Gamification System

• Character that reacts to user progress with emoji animations
• Streak tracking with fire icons
• Daily tasks that reward coins upon completion
• Coin balance system

Rewards & Customization

• Avatar customization with multiple options (hair, color, clothing, accessories)
• Coin spending system for unlocking cosmetics
• Visual avatar preview

Additional Screens

• Leaderboard with rankings separated by difficulty levels (Easy, Medium, Hard)
• User profiles showing stats, health metrics, and BMI calculation
• Settings with notification controls, privacy options, and preferences
• Full navigation system between all screens

The design features a vibrant color palette with primary green (#22C55E), golden yellow secondary (#FDE047), warm peachy background, and rounded cards with soft shadows throughout. All components are mobile-first responsive with smooth animations and transitions.