feat: Add coming soon page (#346)

* feat: Draft ComingSoon page structure.

* chore: Update assets for coming soon page.

* chore: Update assets for coming soon page.

* feat: Add Coming Soon page with text animations.

* chore: Adjust routes to display Coming Soon page.

* chore: Remove guard from home route.

* chore: Adjust spelling and linting.

.config/dictionaries/project.dic

@@ -135,6 +135,7 @@ timelike
 tojunit
 Traceback
 TXNZD
+Typer
 unmanaged
 UTXO
 vitss

catalyst_voices/lib/app/view/app_content.dart

@@ -29,7 +29,7 @@ final class AppContent extends StatelessWidget {
         localeListResolutionCallback: basicLocaleListResolution,
         routerConfig: _routeConfig(context),
         theme: ThemeData(
-          brightness: Brightness.dark,
+          //brightness: Brightness.dark,
           bottomNavigationBarTheme: const BottomNavigationBarThemeData(
             type: BottomNavigationBarType.fixed,
           ),

catalyst_voices/lib/pages/coming_soon/coming_soon.dart

@@ -0,0 +1,53 @@
+import 'package:catalyst_voices/pages/coming_soon/description.dart';
+import 'package:catalyst_voices/pages/coming_soon/logo.dart';
+import 'package:catalyst_voices/pages/coming_soon/title.dart';
+import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
+import 'package:catalyst_voices_shared/catalyst_voices_shared.dart';
+import 'package:flutter/material.dart';
+
+final class ComingSoonPage extends StatelessWidget {
+  static const comingSoonPageKey = Key('ComingSoon');
+
+  const ComingSoonPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      key: comingSoonPageKey,
+      body: Container(
+        constraints: const BoxConstraints.expand(),
+        decoration: BoxDecoration(
+          image: DecorationImage(
+            image: CatalystImage.asset(
+                VoicesAssets.images.comingSoonBkg.path,
+              ).image,
+            fit: BoxFit.cover,
+          ),
+        ),
+        child: ResponsivePadding(
+          xs: const EdgeInsets.only(left: 17),
+          sm: const EdgeInsets.only(left: 119),
+          md: const EdgeInsets.only(left: 150),
+          lg: const EdgeInsets.only(left: 150),
+          other: const EdgeInsets.only(left: 150),
+          child: Align(
+            alignment: Alignment.centerLeft,
+            child: ConstrainedBox(
+              constraints: const BoxConstraints(maxWidth: 356),
+              child: const Column(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  ComingSoonLogo(),
+                  ComingSoonTitle(),
+                  ComingSoonDescription(),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

catalyst_voices/lib/pages/coming_soon/description.dart

@@ -0,0 +1,36 @@
+import 'package:animated_text_kit/animated_text_kit.dart';
+import 'package:catalyst_voices_assets/generated/colors.gen.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class ComingSoonDescription extends StatelessWidget {
+  const ComingSoonDescription({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 66,
+      child: DefaultTextStyle(
+        style: GoogleFonts.notoSans(
+          textStyle: const TextStyle(color: VoicesColors.blueText),
+          fontSize: 16,
+          fontWeight: FontWeight.w400,
+        ),
+        child: AnimatedTextKit(
+          pause: const Duration(milliseconds: 2000),
+          animatedTexts: [
+            // We need an empty initial text to trigger an initial
+            // pause
+            TyperAnimatedText('', speed: Duration.zero),
+            TyperAnimatedText(
+              context.l10n.comingSoonDescription,
+              speed: const Duration(milliseconds: 30),
+            ),
+          ],
+          totalRepeatCount: 1,
+        ),
+      ),
+    );
+  }
+}

catalyst_voices/lib/pages/coming_soon/logo.dart

@@ -0,0 +1,32 @@
+import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class ComingSoonLogo extends StatelessWidget {
+  const ComingSoonLogo({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.end,
+      children: [
+        CatalystImage.asset(
+          VoicesAssets.images.logo.path,
+        ),
+        Container(
+          margin: const EdgeInsets.only(left: 13, bottom: 6),
+          child: Text(
+            l10n.comingSoonSubtitle,
+            style: GoogleFonts.notoSans(
+              textStyle: const TextStyle(color: VoicesColors.blue),
+              fontSize: 19,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

catalyst_voices/lib/pages/coming_soon/title.dart

@@ -0,0 +1,62 @@
+import 'package:animated_text_kit/animated_text_kit.dart';
+import 'package:catalyst_voices_assets/generated/colors.gen.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class ComingSoonTitle extends StatelessWidget {
+  const ComingSoonTitle({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    return Container(
+      height: 122,
+      margin: const EdgeInsets.symmetric(vertical: 16),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          DefaultTextStyle(
+            style: GoogleFonts.poppins(
+              textStyle: const TextStyle(color: VoicesColors.blue),
+              fontSize: 53,
+              height: 1.15,
+              fontWeight: FontWeight.w700,
+            ),
+            child: AnimatedTextKit(
+              animatedTexts: [
+                TyperAnimatedText(
+                  l10n.comingSoonTitle1,
+                  speed: const Duration(milliseconds: 200),
+                ),
+              ],
+              totalRepeatCount: 1,
+            ),
+          ),
+          DefaultTextStyle(
+            style: GoogleFonts.poppins(
+              textStyle: const TextStyle(color: VoicesColors.blue),
+              fontSize: 53,
+              height: 1.15,
+              fontWeight: FontWeight.w700,
+            ),
+            child: AnimatedTextKit(
+              pause: const Duration(milliseconds: 1200),
+              animatedTexts: [
+                TyperAnimatedText(
+                  '',
+                  speed: Duration.zero,
+                ),
+                TyperAnimatedText(
+                  l10n.comingSoonTitle2,
+                  speed: const Duration(milliseconds: 200),
+                ),
+              ],
+              totalRepeatCount: 1,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

catalyst_voices/lib/routes/app_router.dart

@@ -28,18 +28,8 @@ final class AppRouter {
     AuthenticationBloc authenticationBloc,
     GoRouterState state,
   ) {
-    final isAuthenticated = authenticationBloc.isAuthenticated;
-    final signingIn = state.matchedLocation == login_route.loginPath;
-
-    if (!isAuthenticated) {
-      return login_route.loginPath;
-    }
-
-    if (signingIn) {
-      return home_route.homePath;
-    }
-
-    return null;
+    // Always return home route that defaults to coming soon page.
+    return home_route.homePath;
   }
 
   static String? _isWeb() {

catalyst_voices/lib/routes/home_page_route.dart

@@ -1,15 +1,15 @@
-import 'package:catalyst_voices/pages/home/home_page.dart';
+import 'package:catalyst_voices/pages/coming_soon/coming_soon.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
 part 'home_page_route.g.dart';
 
-const homePath = '/home';
+const homePath = '/';
 
 @TypedGoRoute<HomeRoute>(path: homePath)
 final class HomeRoute extends GoRouteData {
   @override
   Widget build(BuildContext context, GoRouterState state) {
-    return const HomePage();
+    return const ComingSoonPage();
   }
 }

catalyst_voices/packages/catalyst_voices_assets/assets/colors/colors.xml

@@ -9,4 +9,6 @@
     <color name="green">#7CAE7A</color>
     <color name="red">#B02E0C</color>
     <color name="today">#565656</color>
+    <color name="blue">#1235C7</color>
+    <color name="blue_text">#506288</color>
 </resources>

catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart

@@ -151,6 +151,30 @@ abstract class VoicesLocalizations {
   /// In en, this message translates to:
   /// **'Catalyst Voices'**
   String get homeScreenText;
+
+  /// Text shown after logo in coming soon page
+  ///
+  /// In en, this message translates to:
+  /// **'Voices'**
+  String get comingSoonSubtitle;
+
+  /// Text shown as main title in coming soon page
+  ///
+  /// In en, this message translates to:
+  /// **'Coming'**
+  String get comingSoonTitle1;
+
+  /// Text shown as main title in coming soon page
+  ///
+  /// In en, this message translates to:
+  /// **'soon'**
+  String get comingSoonTitle2;
+
+  /// Text shown as description in coming soon page
+  ///
+  /// In en, this message translates to:
+  /// **'Project Catalyst is the world\'s largest decentralized innovation engine for solving real-world challenges.'**
+  String get comingSoonDescription;
 }
 
 class _VoicesLocalizationsDelegate extends LocalizationsDelegate<VoicesLocalizations> {

catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_en.dart

@@ -33,4 +33,16 @@ class VoicesLocalizationsEn extends VoicesLocalizations {
 
   @override
   String get homeScreenText => 'Catalyst Voices';
+
+  @override
+  String get comingSoonSubtitle => 'Voices';
+
+  @override
+  String get comingSoonTitle1 => 'Coming';
+
+  @override
+  String get comingSoonTitle2 => 'soon';
+
+  @override
+  String get comingSoonDescription => 'Project Catalyst is the world\'s largest decentralized innovation engine for solving real-world challenges.';
 }

catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_es.dart

@@ -33,4 +33,16 @@ class VoicesLocalizationsEs extends VoicesLocalizations {
 
   @override
   String get homeScreenText => 'Catalyst Voices';
+
+  @override
+  String get comingSoonSubtitle => 'Voices';
+
+  @override
+  String get comingSoonTitle1 => 'Coming';
+
+  @override
+  String get comingSoonTitle2 => 'soon';
+
+  @override
+  String get comingSoonDescription => 'Project Catalyst is the world\'s largest decentralized innovation engine for solving real-world challenges.';
 }

catalyst_voices/packages/catalyst_voices_localization/lib/l10n/intl_en.arb

@@ -39,5 +39,21 @@
   "homeScreenText": "Catalyst Voices",
   "@homeScreenText": {
     "description": "Text shown in the home screen"
+  },
+  "comingSoonSubtitle": "Voices",
+  "@comingSoonSubtitle": {
+    "description": "Text shown after logo in coming soon page"
+  },
+  "comingSoonTitle1": "Coming",
+  "@comingSoonTitle1": {
+    "description": "Text shown as main title in coming soon page"
+  },
+  "comingSoonTitle2": "soon",
+  "@comingSoonTitle2": {
+    "description": "Text shown as main title in coming soon page"
+  },
+  "comingSoonDescription": "Project Catalyst is the world's largest decentralized innovation engine for solving real-world challenges.",
+  "@comingSoonDescription": {
+    "description": "Text shown as description in coming soon page"
   }
 }

catalyst_voices/packages/catalyst_voices_shared/test/src/responsive_builder_test.dart

@@ -76,7 +76,7 @@ void main() {
                 other: const EdgeInsets.all(32),
                 builder: (context, padding) => Padding(
                   padding: padding!,
-                  child: const Text('Test')
+                  child: const Text('Test'),
                 ),
               ),
             ),