Revamp wizard to include all app features

app/lib/screens/wizard/page1.dart

@@ -1,19 +1,104 @@
 import 'package:flutter/material.dart';
-import 'package:threebotlogin/widgets/wizard/common_page.dart';
+import 'package:flutter_svg/svg.dart';
 
-class Page1 extends StatelessWidget {
+class Page1 extends StatefulWidget {
   const Page1({super.key});
 
+  @override
+  State<Page1> createState() => _Page1State();
+}
+
+class _Page1State extends State<Page1> with SingleTickerProviderStateMixin {
+  late AnimationController _animationController;
+  late Animation<double> _fadeAnimation;
+  late Animation<Offset> _slideAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    _animationController = AnimationController(
+      duration: const Duration(milliseconds: 800),
+      vsync: this,
+    );
+
+    _fadeAnimation = Tween<double>(
+      begin: 0.0,
+      end: 1.0,
+    ).animate(CurvedAnimation(
+      parent: _animationController,
+      curve: Curves.easeOut,
+    ));
+
+    _slideAnimation = Tween<Offset>(
+      begin: const Offset(0, 0.3),
+      end: Offset.zero,
+    ).animate(CurvedAnimation(
+      parent: _animationController,
+      curve: Curves.easeOut,
+    ));
+
+    _animationController.forward();
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return const CommonPage(
-      title: 'WELCOME TO',
-      subtitle: '',
-      imagePath: 'assets/TF_logo.svg',
-      widthPercentage: 0.65,
-      heightPercentage: 0.25,
-      description:
-          'ThreeFold Connect is your main access point to the ThreeFold Grid, ThreeFold Token, and more. Please allow us to quickly show you around!',
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+
+    return FadeTransition(
+      opacity: _fadeAnimation,
+      child: SlideTransition(
+        position: _slideAnimation,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 32),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              const Spacer(flex: 1),
+              // Logo
+              SvgPicture.asset(
+                'assets/TF_logo.svg',
+                width: MediaQuery.of(context).size.width * 0.6,
+                colorFilter: ColorFilter.mode(
+                  colorScheme.primary,
+                  BlendMode.srcIn,
+                ),
+              ),
+              SizedBox(height: MediaQuery.of(context).size.height * 0.08),
+
+              // Title
+              Text(
+                'Welcome to\nThreeFold Connect',
+                textAlign: TextAlign.center,
+                style: theme.textTheme.headlineLarge!.copyWith(
+                  color: colorScheme.onSurface,
+                  fontWeight: FontWeight.bold,
+                  height: 1.2,
+                ),
+              ),
+              SizedBox(height: MediaQuery.of(context).size.height * 0.04),
+
+              // Description
+              Text(
+                'Your secure gateway to the ThreeFold Grid, managing your digital identity, tokens, and more.',
+                textAlign: TextAlign.center,
+                style: theme.textTheme.bodyLarge!.copyWith(
+                  color: colorScheme.onSurface.withOpacity(0.7),
+                  height: 1.5,
+                  fontSize: 16,
+                ),
+              ),
+              const Spacer(flex: 2),
+            ],
+          ),
+        ),
+      ),
     );
   }
 }

app/lib/screens/wizard/page2.dart

@@ -1,19 +1,153 @@
 import 'package:flutter/material.dart';
-import 'package:threebotlogin/widgets/wizard/common_page.dart';
 
-class Page2 extends StatelessWidget {
+class Page2 extends StatefulWidget {
   const Page2({super.key});
 
+  @override
+  State<Page2> createState() => _Page2State();
+}
+
+class _Page2State extends State<Page2>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _animationController;
+  late Animation<double> _fadeAnimation;
+  late Animation<double> _scaleAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    _animationController = AnimationController(
+      duration: const Duration(milliseconds: 800),
+      vsync: this,
+    );
+
+    _fadeAnimation = Tween<double>(
+      begin: 0.0,
+      end: 1.0,
+    ).animate(CurvedAnimation(
+      parent: _animationController,
+      curve: const Interval(0.0, 0.6, curve: Curves.easeOut),
+    ));
+
+    _scaleAnimation = Tween<double>(
+      begin: 0.8,
+      end: 1.0,
+    ).animate(CurvedAnimation(
+      parent: _animationController,
+      curve: const Interval(0.2, 1.0, curve: Curves.easeOut),
+    ));
+
+    _animationController.forward();
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return const CommonPage(
-      title: 'MAXIMUM',
-      subtitle: 'SECURITY',
-      imagePath: 'assets/finger_outline.png',
-      widthPercentage: 0.6,
-      heightPercentage: 0.4,
-      description:
-          'The app provides a secure authentication mechanism that creates your virtual identity on the ThreeFold Grid.',
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+
+    return FadeTransition(
+      opacity: _fadeAnimation,
+      child: ScaleTransition(
+        scale: _scaleAnimation,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 32),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              const Spacer(flex: 1),
+
+              // Icon with background
+              Container(
+                width: 160,
+                height: 160,
+                decoration: BoxDecoration(
+                  color: colorScheme.primaryContainer.withOpacity(0.3),
+                  shape: BoxShape.circle,
+                ),
+                child: Icon(
+                  Icons.account_balance_wallet_rounded,
+                  size: 80,
+                  color: colorScheme.primary,
+                ),
+              ),
+              SizedBox(height: MediaQuery.of(context).size.height * 0.06),
+
+              // Title
+              Text(
+                'Manage Your Wallet',
+                textAlign: TextAlign.center,
+                style: theme.textTheme.headlineMedium!.copyWith(
+                  color: colorScheme.onSurface,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+              SizedBox(height: MediaQuery.of(context).size.height * 0.03),
+
+              // Description
+              Text(
+                'Send and receive ThreeFold Tokens (TFT) across multiple networks. Bridge tokens between TFChain, Stellar, and Solana.',
+                textAlign: TextAlign.center,
+                style: theme.textTheme.bodyLarge!.copyWith(
+                  color: colorScheme.onSurface.withOpacity(0.7),
+                  height: 1.6,
+                  fontSize: 16,
+                ),
+              ),
+
+              // Features list
+              SizedBox(height: MediaQuery.of(context).size.height * 0.04),
+              _buildFeatureItem(
+                context,
+                'Multi-chain wallet support',
+                Icons.link_rounded,
+              ),
+              const SizedBox(height: 12),
+              _buildFeatureItem(
+                context,
+                'Real-time balance tracking',
+                Icons.trending_up_rounded,
+              ),
+              const SizedBox(height: 12),
+              _buildFeatureItem(
+                context,
+                'Secure transactions',
+                Icons.shield_rounded,
+              ),
+
+              const Spacer(flex: 2),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildFeatureItem(BuildContext context, String text, IconData icon) {
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Icon(
+          icon,
+          size: 20,
+          color: colorScheme.primary,
+        ),
+        const SizedBox(width: 12),
+        Text(
+          text,
+          style: theme.textTheme.bodyMedium!.copyWith(
+            color: colorScheme.onSurface.withOpacity(0.8),
+          ),
+        ),
+      ],
     );
   }
 }