feat: onboarding page

lib/presentation/components/assets/assets.gen.dart

@@ -21,8 +21,26 @@ class $AssetsImagesGen {
   /// File path: assets/images/logo.png
   AssetGenImage get logo => const AssetGenImage('assets/images/logo.png');
 
+  /// File path: assets/images/onboarding1.png
+  AssetGenImage get onboarding1 =>
+      const AssetGenImage('assets/images/onboarding1.png');
+
+  /// File path: assets/images/onboarding2.png
+  AssetGenImage get onboarding2 =>
+      const AssetGenImage('assets/images/onboarding2.png');
+
+  /// File path: assets/images/onboarding3.png
+  AssetGenImage get onboarding3 =>
+      const AssetGenImage('assets/images/onboarding3.png');
+
   /// List of all assets
-  List<AssetGenImage> get values => [launcher, logo];
+  List<AssetGenImage> get values => [
+    launcher,
+    logo,
+    onboarding1,
+    onboarding2,
+    onboarding3,
+  ];
 }
 
 class Assets {

lib/presentation/components/button/button.dart

@@ -0,0 +1,5 @@
+import 'package:flutter/material.dart';
+
+import '../../../common/theme/theme.dart';
+
+part 'elevated_button.dart';

lib/presentation/components/button/elevated_button.dart

@@ -0,0 +1,34 @@
+part of 'button.dart';
+
+class AppElevatedButton extends StatelessWidget {
+  const AppElevatedButton({
+    super.key,
+    required this.onPressed,
+    required this.title,
+    this.width = double.infinity,
+    this.height = 48.0,
+  });
+
+  final Function()? onPressed;
+  final String title;
+  final double width;
+  final double height;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: width,
+      height: height,
+      child: ElevatedButton(
+        onPressed: onPressed,
+        child: Text(
+          title,
+          style: AppStyle.lg.copyWith(
+            color: AppColor.white,
+            fontWeight: FontWeight.w700,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/presentation/components/image/image.dart

@@ -0,0 +1,6 @@
+import 'package:flutter/material.dart';
+
+import '../../../common/theme/theme.dart';
+import '../assets/assets.gen.dart';
+
+part 'image_placeholder.dart';

lib/presentation/components/image/image_placeholder.dart

@@ -0,0 +1,83 @@
+part of 'image.dart';
+
+class ImagePlaceholder extends StatelessWidget {
+  const ImagePlaceholder({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      decoration: const BoxDecoration(
+        color: Color(0x4DD9D9D9), // Light gray with opacity
+        borderRadius: BorderRadius.only(
+          bottomLeft: Radius.circular(20),
+          bottomRight: Radius.circular(20),
+        ),
+      ),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          // Hand holding coffee illustration
+          Container(
+            width: 120,
+            height: 160,
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(60),
+            ),
+            child: Stack(
+              children: [
+                // Hand
+                Positioned(
+                  bottom: 20,
+                  left: 30,
+                  child: Container(
+                    width: 60,
+                    height: 80,
+                    decoration: BoxDecoration(
+                      color: const Color(0xFFFFDBB3),
+                      borderRadius: BorderRadius.circular(30),
+                    ),
+                  ),
+                ),
+                // Coffee cup
+                Positioned(
+                  top: 30,
+                  left: 25,
+                  child: Container(
+                    width: 70,
+                    height: 90,
+                    decoration: BoxDecoration(
+                      color: const Color(0xFFF4E4BC),
+                      borderRadius: BorderRadius.circular(10),
+                    ),
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        // Fore logo
+                        Assets.images.logo.image(
+                          width: 40,
+                          height: 40,
+                          fit: BoxFit.contain,
+                        ),
+                        const SizedBox(height: 8),
+                        Text(
+                          'Enaklo',
+                          style: TextStyle(
+                            color: AppColor.primary,
+                            fontSize: 12,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}