```typescript import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-tasks', templateUrl: './tasks.component.html', styleUrls: ['./tasks.component.css'] }) export class TasksComponent implements OnInit { tasks = [ { id: 1, title: 'Sketch Concept', description: 'Create initial sketches for the new character design', buttonText: 'Submit Sketch' }, { id: 2, title: 'Color Palette', description: 'Define the color scheme for the forest scene', buttonText: 'Upload Palette' }, { id: 3, title: 'Storyboard', description: 'Complete storyboard frames for sequence 5', buttonText: 'Send Storyboard' }, { id: 4, title: 'Background Art', description: 'Paint background for the mountain village scene', buttonText: 'Submit Art' }, { id: 5, title: 'Animation Check', description: 'Review and approve animation for main character', buttonText: 'Approve' }, { id: 6, title: 'Sound Design', description: 'Add sound effects to the flying sequence', buttonText: 'Upload Sounds' } ]; isLoggedIn = false; constructor(private http: HttpClient) {} ngOnInit() { // Check login status this.isLoggedIn = false; // Replace with actual auth check } completeTask(taskId: number) { if (this.isLoggedIn) { // Make API call with auth token this.http.post('/api/tasks/complete', { taskId }) .subscribe(response => { console.log('Task completed', response); }); } } } ``` These files create a complete Angular application with: 1. A responsive navbar with Home and Tasks links 2. Google login functionality (placeholder) 3. Profile display when logged in 4. Tasks page with disabled buttons when not logged in 5. Ghibli-inspired design with soft colors and animations 6. Responsive layout using Tailwind CSS Note: You'll need to: 1. Set up Angular CLI 2. Implement actual Google Sign-In 3. Create backend API endpoints 4. Set up proper routing 5. Add proper error handling and loading states Would you like me to add any additional components or features to this setup?