From 9fbaca3acc3022014ddce59adfbce7ebd672d651 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Wed, 3 Dec 2025 17:19:50 +0800
Subject: [PATCH] Updated index page

---
 lib/pages/index_page.dart | 57 ++++++++++++++++++++++++++++++++-------
 1 file changed, 47 insertions(+), 10 deletions(-)

diff --git a/lib/pages/index_page.dart b/lib/pages/index_page.dart
index 5f632e1..723a6a8 100644
--- a/lib/pages/index_page.dart
+++ b/lib/pages/index_page.dart
@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
+import 'package:go_router/go_router.dart';
+import 'package:ocbo_esign_validator/widgets/circle_widget.dart';
 import 'package:ocbo_esign_validator/widgets/image_widget.dart';
 import 'package:ocbo_esign_validator/widgets/text_widget.dart';
 
@@ -8,17 +10,52 @@ class IndexPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    void gotoApproval() {
+      context.push('/approval');
+    }
+
+    void gotoValidation() {
+      context.push('/validate');
+    }
+
     return Scaffold(
-      body: Center(
-        child: Column(
-          children: [
-            const Gap(88),
-            const ImageWidget(imagePath: 'assets/logo.png', size: 140, measureByHeight: true),
-            const Gap(20),
-            const TextWidget(text: "OCBO e-Sign", color: Colors.black, bold: true, size: 32),
-            const Gap(2),
-            const TextWidget(text: "Mobile", color: Colors.black, bold: true),
-          ],
+      resizeToAvoidBottomInset: false,
+      body: Container(
+        alignment: Alignment.center,
+        height: MediaQuery.of(context).size.height,
+        decoration: const BoxDecoration(color: Color.fromRGBO(21, 31, 42, 1)),
+        child: Center(
+          child: Column(
+            children: [
+              const Gap(88),
+              const ImageWidget(imagePath: 'assets/logo.png', size: 140, measureByHeight: true),
+              const Gap(20),
+              const TextWidget(text: "OCBO e-Sign", color: Color.fromARGB(255, 244, 243, 243), bold: true, size: 32),
+              const Gap(2),
+              const TextWidget(text: "Mobile", color: Color.fromARGB(255, 244, 243, 243), bold: true),
+              const Gap(200),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                spacing: 32,
+                children: <Widget>[
+                  CircleWidget(
+                    icon: Icons.thumb_up,
+                    text: 'Approval',
+                    onPressed: () {
+                      gotoApproval();
+                    },
+                  ),
+                  CircleWidget(
+                    icon: Icons.qr_code,
+                    text: 'Validate',
+                    onPressed: () {
+                      gotoValidation();
+                    },
+                  ),
+                ],
+              ),
+            ],
+          ),
         ),
       ),
     );