O K R Educational Screen - Copy this React, Tailwind Component to your project

import-'package:flutter/material.dart';-class-EducateOKRsScreen-extends-StatelessWidget-{-@override-Widget-build(BuildContext-context)-{-return-Scaffold(-backgroundColor:-Colors.white,-body:-Padding(-padding:-const-EdgeInsets.all(16.0),-child:-Column(-mainAxisAlignment:-MainAxisAlignment.center,-crossAxisAlignment:-CrossAxisAlignment.center,-children:-[-//-Headline-Text(-"What-are-OKRs?",-style:-TextStyle(-fontSize:-24,-fontWeight:-FontWeight.bold,-color:-Colors.blue[900],-),-textAlign:-TextAlign.center,-),-SizedBox(height:-16),-//-Body-Text-Text(-"OKRs-(Objectives-and-Key-Results)-help-you-align-your-efforts-to-measurable-outcomes.-It’s-a-proven-framework-to-focus-on-what-truly-matters-and-track-progress-in-real-time.\n\nObjective-=-What-you-want-to-achieve.\nKey-Results-=-How-you-measure-success.",-style:-TextStyle(-fontSize:-16,-color:-Colors.grey[700],-height:-1.5,-),-textAlign:-TextAlign.center,-),-SizedBox(height:-32),-//-Flow-Chart-Visual-FlowChartWidget(),-SizedBox(height:-32),-//-CTA-Button-ElevatedButton(-onPressed:-()-{-//-Navigate-to-Learn-More-Screen-},-style:-ElevatedButton.styleFrom(-backgroundColor:-Colors.blue,-shape:-RoundedRectangleBorder(-borderRadius:-BorderRadius.circular(12),-),-padding:-EdgeInsets.symmetric(horizontal:-24,-vertical:-12),-),-child:-Text(-"Learn-More-About-OKRs",-style:-TextStyle(-fontSize:-16,-color:-Colors.white,-),-),-),-],-),-),-);-}-}-class-FlowChartWidget-extends-StatelessWidget-{-@override-Widget-build(BuildContext-context)-{-return-Column(-crossAxisAlignment:-CrossAxisAlignment.center,-children:-[-//-Objective-Text(-"Objective",-style:-TextStyle(fontSize:-18,-fontWeight:-FontWeight.bold),-),-SizedBox(height:-8),-Icon(Icons.flag,-size:-40,-color:-Colors.green),-Text("Improve-Customer-Satisfaction"),-SizedBox(height:-16),-//-Connecting-Arrow-Icon(Icons.arrow_downward,-size:-24,-color:-Colors.grey),-SizedBox(height:-16),-//-Key-Results-Column(-children:-[-_buildKeyResult("Increase-NPS-to-50",-Icons.bar_chart),-SizedBox(height:-8),-_buildKeyResult("Resolve-90%-of-tickets-in-24h",-Icons.timer),-SizedBox(height:-8),-_buildKeyResult("Achieve-80%-positive-feedback",-Icons.thumb_up),-],-),-],-);-}-Widget-_buildKeyResult(String-text,-IconData-icon)-{-return-Row(-mainAxisAlignment:-MainAxisAlignment.center,-children:-[-Icon(icon,-size:-32,-color:-Colors.blue),-SizedBox(width:-8),-Text(-text,-style:-TextStyle(fontSize:-16),-),-],-);-}-}