feat:onboarding page ui done

lib/feature/common/presentation/widgets/app_button.dart

@@ -42,8 +42,8 @@ class AppButton extends StatelessWidget {
         alignment: Alignment.center,
         padding: const EdgeInsets.symmetric(horizontal: 16),
         decoration: BoxDecoration(
-          color: backgroundColor ?? AppColors.c000000,
-          borderRadius: BorderRadius.circular(borderRadius ?? 0),
+          color: backgroundColor ?? AppColors.cFF6F00,
+          borderRadius: BorderRadius.circular(borderRadius ?? 12),
         ),
         child: isLoading
             ? Center(

lib/feature/common/presentation/widgets/w_animated_dots_indicator.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:food_delivery_client/core/core.dart';
+
+import '../../../../core/theme/app_colors.dart';
+
+/// A simple animated dot indicator that uses AnimatedContainer.
+/// Update [activeIndex] to animate which dot is active.
+class AnimatedDotsIndicator extends StatelessWidget {
+  final int count;
+  final int activeIndex;
+  final double dotSize;
+  final double activeDotWidth;
+  final double spacing;
+  final Duration duration;
+  final Curve curve;
+  final Color activeColor;
+  final Color inactiveColor;
+  final BorderRadius borderRadius;
+
+  const AnimatedDotsIndicator({
+    Key? key,
+    required this.count,
+    required this.activeIndex,
+    this.dotSize = 4,
+    this.activeDotWidth = 32.0,
+    this.spacing =4,
+    this.duration = const Duration(milliseconds: 300),
+    this.curve = Curves.easeInOut,
+    this.activeColor = AppColors.cFF6F00,
+    this.inactiveColor = AppColors.cFFEDCC,
+    this.borderRadius = const BorderRadius.all(Radius.circular(12)),
+  }) : assert(count >= 0),
+       assert(activeIndex >= 0),
+       super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: List.generate(count, (index) {
+        final bool isActive = index == activeIndex;
+        return Padding(
+          padding: EdgeInsets.only(right: index == count - 1 ? 0 : spacing),
+          child: AnimatedContainer(
+            duration: duration,
+            curve: curve,
+            width: activeDotWidth,
+            height: dotSize,
+            decoration: BoxDecoration(
+              color: isActive ? activeColor : inactiveColor,
+              borderRadius: borderRadius,
+            ),
+          ),
+        );
+      }),
+    );
+  }
+}