feat: otp page

android/app/build.gradle.kts

@@ -8,7 +8,7 @@ plugins {
 android {
     namespace = "com.appskel.enaklo"
     compileSdk = flutter.compileSdkVersion
-    ndkVersion = flutter.ndkVersion
+    ndkVersion = "27.0.12077973"
 
     compileOptions {
         sourceCompatibility = JavaVersion.VERSION_11

lib/common/theme/app_color.dart

@@ -2,7 +2,7 @@ part of 'theme.dart';
 
 class AppColor {
   // Primary Colors (Merah)
-  static const Color primary = Color(0xFFD90000); // #d90000
+  static const Color primary = Color.fromARGB(255, 196, 2, 2); // #d90000
   static const Color primaryLight = Color(0xFFFF4D4D); // merah terang
   static const Color primaryDark = Color(0xFF990000); // merah gelap
 

lib/common/theme/theme.dart

@@ -1,11 +1,57 @@
 import 'package:flutter/material.dart';
 
+import '../../presentation/components/assets/fonts.gen.dart';
+
 part 'app_color.dart';
 part 'app_style.dart';
 part 'app_value.dart';
 
+UnderlineInputBorder _inputBorder = UnderlineInputBorder(
+  borderSide: BorderSide(color: AppColor.borderDark, width: 1),
+);
+
 class ThemeApp {
   static ThemeData get theme => ThemeData(
     useMaterial3: true,
+    fontFamily: FontFamily.quicksand,
+    primaryColor: AppColor.primary,
+    scaffoldBackgroundColor: AppColor.white,
+    appBarTheme: AppBarTheme(
+      backgroundColor: AppColor.white,
+      foregroundColor: AppColor.textPrimary,
+      elevation: 0,
+      titleTextStyle: AppStyle.xl.copyWith(
+        color: AppColor.primary,
+        fontWeight: FontWeight.w600,
+      ),
+      centerTitle: true,
+      iconTheme: IconThemeData(color: AppColor.primary),
+    ),
+    elevatedButtonTheme: ElevatedButtonThemeData(
+      style: ElevatedButton.styleFrom(
+        backgroundColor: AppColor.primary,
+        foregroundColor: Colors.white,
+        elevation: 0,
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
+      ),
+    ),
+    inputDecorationTheme: InputDecorationTheme(
+      border: _inputBorder,
+      focusedBorder: _inputBorder.copyWith(
+        borderSide: BorderSide(color: AppColor.primary, width: 2),
+      ),
+      enabledBorder: _inputBorder,
+      disabledBorder: _inputBorder.copyWith(
+        borderSide: BorderSide(color: AppColor.border),
+      ),
+      errorBorder: _inputBorder.copyWith(
+        borderSide: BorderSide(color: AppColor.error),
+      ),
+      hintStyle: AppStyle.md.copyWith(
+        color: AppColor.textLight,
+        fontWeight: FontWeight.w500,
+      ),
+      contentPadding: const EdgeInsets.symmetric(vertical: 12),
+    ),
   );
 }

lib/main.dart

@@ -11,8 +11,9 @@ void main() async {
 
   SystemChrome.setSystemUIOverlayStyle(
     const SystemUiOverlayStyle(
-      statusBarColor: Colors.transparent,
+      statusBarColor: Colors.white, // background putih
-      statusBarIconBrightness: Brightness.dark,
+      statusBarIconBrightness: Brightness.dark, // ikon/tulisan hitam
+      statusBarBrightness: Brightness.light, // khusus iOS biar teksnya gelap
     ),
   );
 

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/field/field.dart

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

lib/presentation/components/field/text_form_field.dart

@@ -0,0 +1,59 @@
+part of 'field.dart';
+
+class AppTextFormField extends StatelessWidget {
+  const AppTextFormField({
+    super.key,
+    this.hintText,
+    required this.title,
+    this.controller,
+    this.focusNode,
+    this.prefixIcon,
+    this.suffixIcon,
+    this.keyboardType,
+    this.onChanged,
+  });
+
+  final String? hintText;
+  final String title;
+  final TextEditingController? controller;
+  final FocusNode? focusNode;
+  final Widget? prefixIcon;
+  final Widget? suffixIcon;
+  final TextInputType? keyboardType;
+  final ValueChanged<String>? onChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(title, style: AppStyle.lg.copyWith(fontWeight: FontWeight.w600)),
+        const SizedBox(height: 8),
+        TextFormField(
+          controller: controller,
+          focusNode: focusNode,
+          keyboardType: keyboardType,
+          onChanged: onChanged,
+          cursorColor: AppColor.primary,
+          style: AppStyle.md.copyWith(
+            color: AppColor.textPrimary,
+            fontWeight: FontWeight.w500,
+          ),
+          decoration: InputDecoration(
+            hintText: hintText,
+            prefixIcon: prefixIcon,
+            suffixIcon: suffixIcon,
+            prefixIconConstraints: const BoxConstraints(
+              minWidth: 0,
+              minHeight: 0,
+            ),
+            suffixIconConstraints: const BoxConstraints(
+              minWidth: 0,
+              minHeight: 0,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

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,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/pages/auth/login/login_page.dart

@@ -0,0 +1,78 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+
+import '../../../../common/theme/theme.dart';
+import '../../../components/button/button.dart';
+import '../../../router/app_router.gr.dart';
+import 'widgets/phone_field.dart';
+
+@RoutePage()
+class LoginPage extends StatelessWidget {
+  const LoginPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Masuk')),
+      body: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 24.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const SizedBox(height: 40),
+
+            // Title
+            LoginPhoneField(),
+
+            const SizedBox(height: 50),
+
+            // Continue Button
+            AppElevatedButton(
+              onPressed: () {
+                context.router.push(RegisterRoute());
+              },
+              title: 'Lanjutkan',
+            ),
+
+            const SizedBox(height: 24),
+
+            // Terms and Conditions
+            Center(
+              child: RichText(
+                textAlign: TextAlign.center,
+                text: TextSpan(
+                  style: AppStyle.md.copyWith(
+                    color: AppColor.textSecondary,
+                    height: 1.4,
+                  ),
+                  children: [
+                    const TextSpan(
+                      text: 'Dengan masuk Enaklo, kamu telah\nmenyetujui ',
+                    ),
+                    TextSpan(
+                      text: 'Syarat & Ketentuan',
+                      style: AppStyle.md.copyWith(
+                        color: AppColor.primary,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                    const TextSpan(text: ' dan\n'),
+                    TextSpan(
+                      text: 'Kebijakan Privasi',
+                      style: AppStyle.md.copyWith(
+                        color: AppColor.primary,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+
+            const SizedBox(height: 40),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/presentation/pages/auth/login/widgets/phone_field.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+
+import '../../../../../common/theme/theme.dart';
+import '../../../../components/field/field.dart';
+
+class LoginPhoneField extends StatefulWidget {
+  const LoginPhoneField({super.key});
+
+  @override
+  State<LoginPhoneField> createState() => _LoginPhoneFieldState();
+}
+
+class _LoginPhoneFieldState extends State<LoginPhoneField> {
+  final TextEditingController _controller = TextEditingController();
+  final FocusNode _focusNode = FocusNode();
+  bool _hasFocus = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _focusNode.addListener(() {
+      setState(() {
+        _hasFocus = _focusNode.hasFocus;
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    _focusNode.dispose();
+    super.dispose();
+  }
+
+  void _clearText() {
+    _controller.clear();
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AppTextFormField(
+      title: 'Masukkan no telepon',
+      hintText: '8712671212',
+      controller: _controller,
+      focusNode: _focusNode,
+      keyboardType: TextInputType.phone,
+      prefixIcon: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        child: Text(
+          '+62',
+          style: AppStyle.md.copyWith(
+            color: AppColor.textPrimary,
+            fontWeight: FontWeight.w500,
+          ),
+        ),
+      ),
+      suffixIcon: (_hasFocus && _controller.text.isNotEmpty)
+          ? IconButton(
+              onPressed: _clearText,
+              icon: Icon(Icons.close, color: AppColor.primary, size: 20),
+              constraints: const BoxConstraints(),
+              padding: const EdgeInsets.all(8),
+            )
+          : null,
+      onChanged: (value) {
+        setState(() {});
+      },
+    );
+  }
+}

lib/presentation/pages/auth/otp/otp_page.dart

@@ -0,0 +1,252 @@
+import 'dart:async';
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../../../../common/theme/theme.dart';
+import '../../../components/button/button.dart';
+
+@RoutePage()
+class OtpPage extends StatefulWidget {
+  const OtpPage({super.key});
+
+  @override
+  State<OtpPage> createState() => _OtpPageState();
+}
+
+class _OtpPageState extends State<OtpPage> {
+  final List<TextEditingController> _controllers = List.generate(
+    6,
+    (index) => TextEditingController(),
+  );
+  final List<FocusNode> _focusNodes = List.generate(6, (index) => FocusNode());
+
+  Timer? _timer;
+  int _secondsRemaining = 18;
+  bool _canResend = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _startTimer();
+  }
+
+  void _startTimer() {
+    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
+      if (_secondsRemaining > 0) {
+        setState(() {
+          _secondsRemaining--;
+        });
+      } else {
+        setState(() {
+          _canResend = true;
+        });
+        _timer?.cancel();
+      }
+    });
+  }
+
+  void _resendCode() {
+    setState(() {
+      _secondsRemaining = 18;
+      _canResend = false;
+    });
+    _startTimer();
+    // Add your resend logic here
+  }
+
+  String _formatTime(int seconds) {
+    int minutes = seconds ~/ 60;
+    int remainingSeconds = seconds % 60;
+    return '${minutes.toString().padLeft(2, '0')}:${remainingSeconds.toString().padLeft(2, '0')}';
+  }
+
+  void _onCodeChanged(String value, int index) {
+    if (value.isNotEmpty) {
+      // Move to next field
+      if (index < 5) {
+        _focusNodes[index + 1].requestFocus();
+      } else {
+        // Last field, unfocus
+        _focusNodes[index].unfocus();
+        _verifyCode();
+      }
+    } else {
+      // Handle backspace - move to previous field
+      if (index > 0) {
+        _focusNodes[index - 1].requestFocus();
+      }
+    }
+  }
+
+  void _verifyCode() {
+    String code = _controllers.map((controller) => controller.text).join();
+    if (code.length == 6) {
+      // Add your verification logic here
+      print('Verifying code: $code');
+    }
+  }
+
+  @override
+  void dispose() {
+    _timer?.cancel();
+    for (var controller in _controllers) {
+      controller.dispose();
+    }
+    for (var focusNode in _focusNodes) {
+      focusNode.dispose();
+    }
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('Verifikasi')),
+      body: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 20.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const SizedBox(height: 20),
+
+            // Title
+            Text(
+              'Masukan Kode Verifikasi',
+              style: AppStyle.xl.copyWith(
+                fontWeight: FontWeight.w600,
+                color: AppColor.textPrimary,
+              ),
+            ),
+
+            const SizedBox(height: 12),
+
+            // Description
+            RichText(
+              text: TextSpan(
+                children: [
+                  TextSpan(
+                    text: 'Kami telah mengirimkan kode verifikasi melalui ',
+                    style: AppStyle.sm.copyWith(
+                      color: AppColor.textSecondary,
+                      height: 1.4,
+                    ),
+                  ),
+                  TextSpan(
+                    text: 'Whatsapp',
+                    style: AppStyle.sm.copyWith(
+                      color: AppColor.success,
+                      fontWeight: FontWeight.w500,
+                      height: 1.4,
+                    ),
+                  ),
+                  TextSpan(
+                    text: ' ke ',
+                    style: AppStyle.sm.copyWith(
+                      color: AppColor.textSecondary,
+                      height: 1.4,
+                    ),
+                  ),
+                  TextSpan(
+                    text: '+6288976680234',
+                    style: AppStyle.sm.copyWith(
+                      color: AppColor.textPrimary,
+                      fontWeight: FontWeight.w500,
+                      height: 1.4,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+
+            const SizedBox(height: 6),
+
+            // Hidden text fields for input
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: List.generate(6, (index) {
+                return Expanded(
+                  child: Padding(
+                    padding: EdgeInsets.only(right: index == 5 ? 0 : 8.0),
+                    child: TextFormField(
+                      controller: _controllers[index],
+                      focusNode: _focusNodes[index],
+                      keyboardType: TextInputType.number,
+                      maxLength: 1,
+                      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
+                      decoration: InputDecoration(counterText: ''),
+                      textAlign: TextAlign.center,
+                      style: AppStyle.lg.copyWith(
+                        color: AppColor.primary,
+                        fontWeight: FontWeight.w600,
+                      ),
+                      cursorColor: AppColor.primary,
+                      onChanged: (value) {
+                        setState(() {});
+                        _onCodeChanged(value, index);
+                      },
+                    ),
+                  ),
+                );
+              }),
+            ),
+
+            const SizedBox(height: 40),
+
+            // Timer and Resend Section
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                Text(
+                  'Mohon tunggu untuk kirim ulang kode ',
+                  style: AppStyle.xs.copyWith(color: AppColor.textSecondary),
+                ),
+                Text(
+                  _formatTime(_secondsRemaining),
+                  style: AppStyle.xs.copyWith(
+                    color: AppColor.textSecondary,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ],
+            ),
+
+            if (_canResend) ...[
+              const SizedBox(height: 12),
+              Center(
+                child: TextButton(
+                  onPressed: _resendCode,
+                  child: Text(
+                    'Kirim Ulang Kode',
+                    style: AppStyle.sm.copyWith(
+                      color: AppColor.success,
+                      fontWeight: FontWeight.w500,
+                    ),
+                  ),
+                ),
+              ),
+            ],
+
+            const Spacer(),
+
+            // Continue Button
+            AppElevatedButton(
+              title: 'Verifikasi',
+              onPressed: () {
+                String code = _controllers
+                    .map((controller) => controller.text)
+                    .join();
+                if (code.length == 6) {
+                  _verifyCode();
+                }
+              },
+            ),
+
+            const SizedBox(height: 24),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/presentation/pages/auth/register/register_page.dart

@@ -0,0 +1,45 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+
+import '../../../components/button/button.dart';
+import '../../../router/app_router.gr.dart';
+import 'widgets/name_field.dart';
+import 'widgets/phone_field.dart';
+
+@RoutePage()
+class RegisterPage extends StatelessWidget {
+  const RegisterPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Masuk')),
+      body: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 24.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const SizedBox(height: 40),
+
+            // Title
+            RegisterPhoneField(),
+            SizedBox(height: 24),
+            RegisterNameField(),
+
+            const SizedBox(height: 50),
+
+            Spacer(),
+
+            // Continue Button
+            AppElevatedButton(
+              onPressed: () => context.router.push(const OtpRoute()),
+              title: 'Daftar & Lanjutkan',
+            ),
+
+            const SizedBox(height: 24),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/presentation/pages/auth/register/widgets/name_field.dart

@@ -0,0 +1,12 @@
+import 'package:flutter/material.dart';
+
+import '../../../../components/field/field.dart';
+
+class RegisterNameField extends StatelessWidget {
+  const RegisterNameField({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return AppTextFormField(title: 'Masukkan nama', hintText: 'John Doe');
+  }
+}

lib/presentation/pages/auth/register/widgets/phone_field.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+
+import '../../../../../common/theme/theme.dart';
+import '../../../../components/field/field.dart';
+
+class RegisterPhoneField extends StatefulWidget {
+  const RegisterPhoneField({super.key});
+
+  @override
+  State<RegisterPhoneField> createState() => _RegisterPhoneFieldState();
+}
+
+class _RegisterPhoneFieldState extends State<RegisterPhoneField> {
+  final TextEditingController _controller = TextEditingController();
+  final FocusNode _focusNode = FocusNode();
+  bool _hasFocus = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _focusNode.addListener(() {
+      setState(() {
+        _hasFocus = _focusNode.hasFocus;
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    _focusNode.dispose();
+    super.dispose();
+  }
+
+  void _clearText() {
+    _controller.clear();
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AppTextFormField(
+      title: 'Masukkan no telepon',
+      hintText: '8712671212',
+      controller: _controller,
+      focusNode: _focusNode,
+      keyboardType: TextInputType.phone,
+      prefixIcon: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        child: Text(
+          '+62',
+          style: AppStyle.md.copyWith(
+            color: AppColor.textPrimary,
+            fontWeight: FontWeight.w500,
+          ),
+        ),
+      ),
+      suffixIcon: (_hasFocus && _controller.text.isNotEmpty)
+          ? IconButton(
+              onPressed: _clearText,
+              icon: Icon(Icons.close, color: AppColor.primary, size: 20),
+              constraints: const BoxConstraints(),
+              padding: const EdgeInsets.all(8),
+            )
+          : null,
+      onChanged: (value) {
+        setState(() {});
+      },
+    );
+  }
+}

lib/presentation/pages/onboarding/onboarding_page.dart

@@ -0,0 +1,208 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:carousel_slider/carousel_slider.dart';
+
+import '../../../common/theme/theme.dart';
+import '../../components/assets/assets.gen.dart';
+import '../../components/button/button.dart';
+import '../../components/image/image.dart';
+import '../../router/app_router.gr.dart';
+
+@RoutePage()
+class OnboardingPage extends StatefulWidget {
+  const OnboardingPage({super.key});
+
+  @override
+  State<OnboardingPage> createState() => _OnboardingPageState();
+}
+
+class _OnboardingPageState extends State<OnboardingPage> {
+  int currentIndex = 0;
+  final CarouselSliderController _carouselController =
+      CarouselSliderController();
+
+  final List<OnboardingData> onboardingData = [
+    OnboardingData(
+      image: Assets.images.onboarding1.path,
+      title: 'Nikmati Hidangan Kapanpun, Dimanapun',
+      subtitle:
+          'Bebas pilih cara penyajian, bisa dine-in di restoran atau pesan antar langsung ke lokasimu',
+    ),
+    OnboardingData(
+      image: Assets.images.onboarding2.path,
+      title: 'Bahan Berkualitas Premium',
+      subtitle:
+          'Kami hanya menggunakan bahan segar pilihan untuk menghadirkan cita rasa terbaik di setiap hidangan',
+    ),
+    OnboardingData(
+      image: Assets.images.onboarding3.path,
+      title: 'Pesan dengan Praktis',
+      subtitle:
+          'Aplikasi dengan tampilan sederhana memudahkanmu memesan makanan favorit kapan saja',
+    ),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    final screenHeight = MediaQuery.of(context).size.height;
+    final imageHeight = screenHeight * 0.6; // 60% dari tinggi layar
+
+    return Scaffold(
+      backgroundColor: Colors.white, // Changed to white background
+      body: Column(
+        children: [
+          // Image carousel - 60% of screen height
+          SizedBox(height: imageHeight, child: _buildImageCarousel()),
+
+          // Bottom content - remaining space
+          Expanded(child: _buildBottomContent()),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildImageCarousel() {
+    return Stack(
+      children: [
+        // Carousel
+        CarouselSlider.builder(
+          carouselController: _carouselController,
+          itemCount: onboardingData.length,
+          itemBuilder: (context, index, realIndex) {
+            return SizedBox(
+              width: double.infinity, // Full width
+              child: ClipRRect(
+                child: Image.asset(
+                  onboardingData[index].image,
+                  fit: BoxFit.fill,
+                  width: double.infinity,
+                  errorBuilder: (context, error, stackTrace) {
+                    return ImagePlaceholder();
+                  },
+                ),
+              ),
+            );
+          },
+          options: CarouselOptions(
+            height: double.infinity,
+            viewportFraction: 1.0,
+            enableInfiniteScroll: true,
+            autoPlay: true,
+            onPageChanged: (index, reason) {
+              setState(() {
+                currentIndex = index;
+              });
+            },
+          ),
+        ),
+
+        // White overlay gradient at bottom
+        Positioned(
+          bottom: 0,
+          left: 0,
+          right: 0,
+          child: Container(
+            height: 100,
+            decoration: BoxDecoration(
+              gradient: LinearGradient(
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
+                colors: [
+                  Colors.white.withOpacity(0.1),
+                  Color(0x80FFFFFF), // White with 50% opacity
+                  Colors.white, // Pure white
+                ],
+              ),
+            ),
+          ),
+        ),
+
+        // Dots indicator positioned over the white overlay
+        Positioned(
+          bottom: 30,
+          left: 0,
+          right: 0,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: List.generate(
+              onboardingData.length,
+              (index) => Container(
+                margin: const EdgeInsets.symmetric(horizontal: 4),
+                height: 8,
+                width: currentIndex == index ? 24 : 8,
+                decoration: BoxDecoration(
+                  color: currentIndex == index
+                      ? AppColor.primary
+                      : AppColor.borderLight,
+                  borderRadius: BorderRadius.circular(4),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildBottomContent() {
+    return Padding(
+      padding: const EdgeInsets.all(24),
+      child: Column(
+        children: [
+          const SizedBox(height: 16),
+
+          // Title
+          Text(
+            onboardingData[currentIndex].title,
+            textAlign: TextAlign.center,
+            style: AppStyle.xl.copyWith(fontWeight: FontWeight.w800),
+          ),
+
+          const SizedBox(height: 12),
+
+          // Subtitle
+          Text(
+            onboardingData[currentIndex].subtitle,
+            textAlign: TextAlign.center,
+            style: AppStyle.md.copyWith(
+              fontWeight: FontWeight.w500,
+              color: AppColor.textSecondary,
+            ),
+          ),
+
+          const Spacer(),
+
+          AppElevatedButton(
+            onPressed: () => context.router.push(const LoginRoute()),
+            title: 'Masuk',
+          ),
+
+          const SizedBox(height: 12),
+
+          TextButton(
+            onPressed: () {},
+            child: Text(
+              'Lewati tahap ini',
+              style: AppStyle.md.copyWith(
+                color: AppColor.textSecondary,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class OnboardingData {
+  final String image;
+  final String title;
+  final String subtitle;
+
+  OnboardingData({
+    required this.image,
+    required this.title,
+    required this.subtitle,
+  });
+}

lib/presentation/pages/splash/splash_page.dart

@@ -1,5 +1,10 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
+import 'dart:async';
+
+import '../../../common/theme/theme.dart';
+import '../../components/assets/assets.gen.dart';
+import '../../router/app_router.gr.dart';
 
 @RoutePage()
 class SplashPage extends StatefulWidget {
@@ -9,12 +14,107 @@ class SplashPage extends StatefulWidget {
   State<SplashPage> createState() => _SplashPageState();
 }
 
-class _SplashPageState extends State<SplashPage> {
+class _SplashPageState extends State<SplashPage>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _logoController;
+
+  late Animation<double> _logoScaleAnimation;
+  late Animation<double> _logoOpacityAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    _initAnimations();
+    _startAnimations();
+    _navigateToHome();
+  }
+
+  void _initAnimations() {
+    // Logo Animation Controller
+    _logoController = AnimationController(
+      duration: const Duration(milliseconds: 1500),
+      vsync: this,
+    );
+
+    // Logo Animations
+    _logoScaleAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
+      CurvedAnimation(parent: _logoController, curve: Curves.elasticOut),
+    );
+
+    _logoOpacityAnimation = Tween<double>(
+      begin: 0.0,
+      end: 1.0,
+    ).animate(CurvedAnimation(parent: _logoController, curve: Curves.easeIn));
+  }
+
+  void _startAnimations() {
+    // Start logo animation
+    _logoController.forward();
+  }
+
+  void _navigateToHome() {
+    Timer(const Duration(milliseconds: 2500), () {
+      context.router.push(OnboardingRoute());
+    });
+  }
+
+  @override
+  void dispose() {
+    _logoController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Center(
+      body: Container(
-        child: Text("Splash Page"),
+        width: double.infinity,
+        height: double.infinity,
+        decoration: const BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.topLeft,
+            end: Alignment.bottomRight,
+            colors: [AppColor.backgroundLight, AppColor.background],
+          ),
+        ),
+        child: Center(
+          child: AnimatedBuilder(
+            animation: _logoController,
+            builder: (context, child) {
+              return Transform.scale(
+                scale: _logoScaleAnimation.value,
+                child: Opacity(
+                  opacity: _logoOpacityAnimation.value,
+                  child: Container(
+                    width: 140,
+                    height: 140,
+                    decoration: BoxDecoration(
+                      gradient: const LinearGradient(
+                        colors: AppColor.primaryGradient,
+                        begin: Alignment.topLeft,
+                        end: Alignment.bottomRight,
+                      ),
+                      shape: BoxShape.circle,
+                      boxShadow: [
+                        BoxShadow(
+                          color: AppColor.primaryWithOpacity(0.4),
+                          blurRadius: 25,
+                          offset: const Offset(0, 12),
+                        ),
+                      ],
+                    ),
+                    child: ClipOval(
+                      child: Padding(
+                        padding: const EdgeInsets.all(20),
+                        child: Assets.images.logo.image(fit: BoxFit.contain),
+                      ),
+                    ),
+                  ),
+                ),
+              );
+            },
+          ),
+        ),
       ),
     );
   }

lib/presentation/router/app_router.dart

@@ -7,5 +7,13 @@ class AppRouter extends RootStackRouter {
   List<AutoRoute> get routes => [
     // Splash
     AutoRoute(page: SplashRoute.page, initial: true),
+
+    // Onboarding
+    AutoRoute(page: OnboardingRoute.page),
+
+    // Auth
+    AutoRoute(page: LoginRoute.page),
+    AutoRoute(page: RegisterRoute.page),
+    AutoRoute(page: OtpRoute.page),
   ];
 }

lib/presentation/router/app_router.gr.dart

@@ -9,21 +9,91 @@
 // coverage:ignore-file
 
 // ignore_for_file: no_leading_underscores_for_library_prefixes
-import 'package:auto_route/auto_route.dart' as _i2;
+import 'package:auto_route/auto_route.dart' as _i6;
-import 'package:enaklo/presentation/pages/splash/splash_page.dart' as _i1;
+import 'package:enaklo/presentation/pages/auth/login/login_page.dart' as _i1;
+import 'package:enaklo/presentation/pages/auth/otp/otp_page.dart' as _i3;
+import 'package:enaklo/presentation/pages/auth/register/register_page.dart'
+    as _i4;
+import 'package:enaklo/presentation/pages/onboarding/onboarding_page.dart'
+    as _i2;
+import 'package:enaklo/presentation/pages/splash/splash_page.dart' as _i5;
 
 /// generated route for
-/// [_i1.SplashPage]
+/// [_i1.LoginPage]
-class SplashRoute extends _i2.PageRouteInfo<void> {
+class LoginRoute extends _i6.PageRouteInfo<void> {
-  const SplashRoute({List<_i2.PageRouteInfo>? children})
+  const LoginRoute({List<_i6.PageRouteInfo>? children})
+    : super(LoginRoute.name, initialChildren: children);
+
+  static const String name = 'LoginRoute';
+
+  static _i6.PageInfo page = _i6.PageInfo(
+    name,
+    builder: (data) {
+      return const _i1.LoginPage();
+    },
+  );
+}
+
+/// generated route for
+/// [_i2.OnboardingPage]
+class OnboardingRoute extends _i6.PageRouteInfo<void> {
+  const OnboardingRoute({List<_i6.PageRouteInfo>? children})
+    : super(OnboardingRoute.name, initialChildren: children);
+
+  static const String name = 'OnboardingRoute';
+
+  static _i6.PageInfo page = _i6.PageInfo(
+    name,
+    builder: (data) {
+      return const _i2.OnboardingPage();
+    },
+  );
+}
+
+/// generated route for
+/// [_i3.OtpPage]
+class OtpRoute extends _i6.PageRouteInfo<void> {
+  const OtpRoute({List<_i6.PageRouteInfo>? children})
+    : super(OtpRoute.name, initialChildren: children);
+
+  static const String name = 'OtpRoute';
+
+  static _i6.PageInfo page = _i6.PageInfo(
+    name,
+    builder: (data) {
+      return const _i3.OtpPage();
+    },
+  );
+}
+
+/// generated route for
+/// [_i4.RegisterPage]
+class RegisterRoute extends _i6.PageRouteInfo<void> {
+  const RegisterRoute({List<_i6.PageRouteInfo>? children})
+    : super(RegisterRoute.name, initialChildren: children);
+
+  static const String name = 'RegisterRoute';
+
+  static _i6.PageInfo page = _i6.PageInfo(
+    name,
+    builder: (data) {
+      return const _i4.RegisterPage();
+    },
+  );
+}
+
+/// generated route for
+/// [_i5.SplashPage]
+class SplashRoute extends _i6.PageRouteInfo<void> {
+  const SplashRoute({List<_i6.PageRouteInfo>? children})
     : super(SplashRoute.name, initialChildren: children);
 
   static const String name = 'SplashRoute';
 
-  static _i2.PageInfo page = _i2.PageInfo(
+  static _i6.PageInfo page = _i6.PageInfo(
     name,
     builder: (data) {
-      return const _i1.SplashPage();
+      return const _i5.SplashPage();
     },
   );
 }

pubspec.lock

@@ -137,6 +137,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "8.11.1"
+  carousel_slider:
+    dependency: "direct main"
+    description:
+      name: carousel_slider
+      sha256: bcc61735345c9ab5cb81073896579e735f81e35fd588907a393143ea986be8ff
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.1.1"
   characters:
     dependency: transitive
     description:

pubspec.yaml

@@ -27,6 +27,7 @@ dependencies:
   freezed_annotation: ^2.4.1
   json_annotation: ^4.9.0
   shared_preferences: ^2.5.3
+  carousel_slider: ^5.1.1
 
 dev_dependencies:
   flutter_test: