feat: initial screen

lib/app/view/app.dart

@@ -1,5 +1,5 @@
 import 'package:api_client/api_client.dart';
-import 'package:dash_ai_search/counter/counter.dart';
+import 'package:dash_ai_search/home/home.dart';
 import 'package:dash_ai_search/l10n/l10n.dart';
 import 'package:flutter/material.dart';
 
@@ -22,7 +22,7 @@ class App extends StatelessWidget {
       ),
       localizationsDelegates: AppLocalizations.localizationsDelegates,
       supportedLocales: AppLocalizations.supportedLocales,
-      home: const CounterPage(),
+      home: const HomePage(),
     );
   }
 }

lib/home/home.dart

@@ -0,0 +1,2 @@
+export 'view/home_page.dart';
+export 'widgets/widgets.dart';

lib/home/view/home_page.dart

@@ -0,0 +1,61 @@
+import 'package:app_ui/app_ui.dart';
+import 'package:dash_ai_search/home/home.dart';
+import 'package:flutter/material.dart';
+
+class HomePage extends StatelessWidget {
+  const HomePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Scaffold(
+      backgroundColor: Color(0xFFF8FAFF),
+      body: Stack(
+        children: [
+          Positioned(
+            top: 0,
+            bottom: 0,
+            child: Background(),
+          ),
+          Positioned(
+            top: 40,
+            left: 48,
+            child: Logo(),
+          ),
+          InitialScreen(),
+          Positioned(
+            bottom: 50,
+            left: 50,
+            child: DashAnimation(),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class DashAnimation extends StatelessWidget {
+  @visibleForTesting
+  const DashAnimation({super.key});
+
+  static const dashSize = Size(800, 800);
+
+  @override
+  Widget build(BuildContext context) {
+    final screenSize = MediaQuery.sizeOf(context);
+
+    return Container(
+      alignment: Alignment.center,
+      height: screenSize.height / 3,
+      width: screenSize.height / 3,
+      child: const AnimatedSprite(
+        showLoadingIndicator: false,
+        sprites: Sprites(
+          asset: 'dash_animation.png',
+          size: dashSize,
+          frames: 34,
+          stepTime: 0.07,
+        ),
+      ),
+    );
+  }
+}

lib/home/widgets/background.dart

@@ -0,0 +1,143 @@
+import 'package:flutter/material.dart';
+import 'package:path_drawing/path_drawing.dart';
+
+class Background extends StatelessWidget {
+  const Background({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    const leftOffset = -50.0;
+    const baseRadius = 303.0;
+    const baseMediumRadius = 255.0;
+    const baseSmallRadius = 185.0;
+    const horizontalOffset = baseRadius * 2;
+
+    return const SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Row(
+        children: [
+          Circle(
+            offset: Offset(leftOffset, 0),
+          ),
+          Circle(
+            offset: Offset(horizontalOffset + leftOffset, 0),
+            child: Circle(
+              offset: Offset(horizontalOffset + leftOffset, 0),
+              radius: baseMediumRadius,
+              borderColor: Color(0xFFDDE2F6),
+              child: Circle(
+                offset: Offset(horizontalOffset + leftOffset, 0),
+                radius: baseSmallRadius,
+                borderColor: Color(0xFFDDE2F6),
+                dotted: true,
+              ),
+            ),
+          ),
+          Circle(
+            offset: Offset(horizontalOffset * 2 + leftOffset, 0),
+          ),
+          Circle(
+            offset: Offset(horizontalOffset * 3 + leftOffset, 0),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class Circle extends StatelessWidget {
+  @visibleForTesting
+  const Circle({
+    this.offset = Offset.zero,
+    this.radius = 303,
+    this.borderColor = Colors.white,
+    this.dotted = false,
+    this.child,
+    super.key,
+  });
+
+  final Offset offset;
+  final double radius;
+  final Color borderColor;
+  final bool dotted;
+  final Widget? child;
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      painter: CirclePainter(
+        offset: offset,
+        radius: radius,
+        borderColor: borderColor,
+        dotted: dotted,
+      ),
+      child: child,
+    );
+  }
+}
+
+class CirclePainter extends CustomPainter {
+  CirclePainter({
+    required this.offset,
+    required this.radius,
+    required this.borderColor,
+    required this.dotted,
+  }) {
+    _paintCircle = Paint()
+      ..color = Colors.white
+      ..style = PaintingStyle.fill;
+    _paintBorder = Paint()
+      ..color = borderColor
+      ..strokeWidth = 2
+      ..strokeCap = StrokeCap.butt
+      ..style = PaintingStyle.stroke;
+  }
+
+  final Offset offset;
+  final double radius;
+  final Color borderColor;
+  final bool dotted;
+
+  late final Paint _paintCircle;
+  late final Paint _paintBorder;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.drawCircle(
+      offset,
+      radius,
+      _paintCircle,
+    );
+
+    if (dotted) {
+      const dashPattern = <double>[4, 4];
+      final s = radius * 2;
+
+      var path = Path()
+        ..addRRect(
+          RRect.fromRectAndRadius(
+            Rect.fromLTWH(
+              offset.dx - s / 2,
+              offset.dy / 2 - s / 2,
+              s,
+              s,
+            ),
+            Radius.circular(s / 2),
+          ),
+        );
+      path = dashPath(path, dashArray: CircularIntervalList(dashPattern));
+      canvas.drawPath(path, _paintBorder);
+    } else {
+      canvas.drawCircle(
+        offset,
+        radius,
+        _paintBorder,
+      );
+    }
+  }
+
+  // coverage:ignore-start
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+  // coverage:ignore-end
+}