sync page

lib/common/theme/app_color.dart

@@ -12,7 +12,7 @@ class AppColor {
   static const Color secondaryDark = Color(0xFF388E3C);
 
   // Background Colors
-  static const Color background = Color(0xFFF8F9FA);
+  static const Color background = Color(0xFFF1F5F9);
   static const Color backgroundLight = Color(0xFFFFFFFF);
   static const Color backgroundDark = Color(0xFF1A1A1A);
   static const Color surface = Color(0xFFFFFFFF);

lib/presentation/pages/sync/sync_page.dart

@@ -1,5 +1,9 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+
+import '../../../common/extension/extension.dart';
+import '../../../common/theme/theme.dart';
+import '../../components/spaces/space.dart';
 
 @RoutePage()
 class SyncPage extends StatelessWidget {
@@ -7,6 +11,61 @@ class SyncPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const Placeholder();
+    return Scaffold(
+      backgroundColor: AppColor.background,
+      body: SafeArea(
+        child: Padding(
+          padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
+          child: Row(
+            children: [
+              Expanded(
+                flex: 2,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [_buildHeader()],
+                ),
+              ),
+              SpaceWidth(40),
+              SizedBox(width: 40),
+              Expanded(
+                flex: 3,
+                child: Container(height: context.deviceHeight * 0.8),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildHeader() {
+    return Column(
+      children: [
+        Container(
+          width: 60,
+          height: 60,
+          decoration: BoxDecoration(
+            color: AppColor.primary.withOpacity(0.1),
+            borderRadius: BorderRadius.circular(15),
+          ),
+          child: Icon(Icons.sync, size: 30, color: AppColor.primary),
+        ),
+        SizedBox(height: 12),
+        Text(
+          'Sinkronisasi Data',
+          style: TextStyle(
+            fontSize: 24,
+            fontWeight: FontWeight.bold,
+            color: Colors.grey.shade800,
+          ),
+        ),
+        SizedBox(height: 8),
+        Text(
+          'Mengunduh kategori dan produk terbaru',
+          style: TextStyle(fontSize: 16, color: Colors.grey.shade600),
+          textAlign: TextAlign.center,
+        ),
+      ],
+    );
   }
 }