diff --git a/assets/icons/esim_camera.png b/assets/icons/esim_camera.png new file mode 100644 index 0000000..93503d9 Binary files /dev/null and b/assets/icons/esim_camera.png differ diff --git a/assets/icons/esim_location.png b/assets/icons/esim_location.png new file mode 100644 index 0000000..6eb1339 Binary files /dev/null and b/assets/icons/esim_location.png differ diff --git a/assets/icons/esim_people.png b/assets/icons/esim_people.png new file mode 100644 index 0000000..b484881 Binary files /dev/null and b/assets/icons/esim_people.png differ diff --git a/assets/icons/esim_phone.png b/assets/icons/esim_phone.png new file mode 100644 index 0000000..801c614 Binary files /dev/null and b/assets/icons/esim_phone.png differ diff --git a/assets/icons/process_phone.png b/assets/icons/process_phone.png new file mode 100644 index 0000000..dab9da4 Binary files /dev/null and b/assets/icons/process_phone.png differ diff --git a/assets/icons/process_qr.png b/assets/icons/process_qr.png new file mode 100644 index 0000000..c7538e2 Binary files /dev/null and b/assets/icons/process_qr.png differ diff --git a/assets/icons/process_wifi.png b/assets/icons/process_wifi.png new file mode 100644 index 0000000..c61270f Binary files /dev/null and b/assets/icons/process_wifi.png differ diff --git a/assets/images/esim_bottom_banner.png b/assets/images/esim_bottom_banner.png new file mode 100644 index 0000000..9f9cbb3 Binary files /dev/null and b/assets/images/esim_bottom_banner.png differ diff --git a/assets/images/esim_top_bg.png b/assets/images/esim_top_bg.png new file mode 100644 index 0000000..12139ff Binary files /dev/null and b/assets/images/esim_top_bg.png differ diff --git a/lib/common_packages/custom_filled_button.dart b/lib/common_packages/custom_filled_button.dart index 6a6e706..29a849a 100644 --- a/lib/common_packages/custom_filled_button.dart +++ b/lib/common_packages/custom_filled_button.dart @@ -7,6 +7,7 @@ class CustomFilledButton extends StatelessWidget { final String label; final bool? showArrow; final GestureTapCallback onTap; + final double? height; CustomFilledButton({ super.key, @@ -14,6 +15,7 @@ class CustomFilledButton extends StatelessWidget { required this.onTap, required this.label, this.showArrow = false, + this.height = 42 }); @override @@ -21,7 +23,7 @@ class CustomFilledButton extends StatelessWidget { return GestureDetector( onTap: onTap, child: Container( - height: 42.h, + height: height, width: width, decoration: BoxDecoration( color: Color(0xFFF95F62), diff --git a/lib/core/app_router.dart b/lib/core/app_router.dart index 6fc3de0..6bdf4a8 100644 --- a/lib/core/app_router.dart +++ b/lib/core/app_router.dart @@ -2,6 +2,7 @@ import 'package:citycards_customer/Profile/profile_page_view.dart'; import 'package:citycards_customer/common_bloc/language_selection_bloc.dart'; import 'package:citycards_customer/contact_us/contact_us_view.dart'; import 'package:citycards_customer/edit_profile/edit_profile_view.dart'; +import 'package:citycards_customer/esim_offer/esim_offer_view.dart'; import 'package:citycards_customer/faq/faq_view.dart'; import 'package:citycards_customer/itinerary_creation/bloc/itinerary_steps_selection_bloc.dart'; import 'package:citycards_customer/itinerary_creation/itinerary_creation_start_view.dart'; @@ -78,11 +79,19 @@ class AppRouter { case RouteConstants.itineraryCreation: return MaterialPageRoute( builder: (_) { - return BlocProvider(create: (_) => ItineraryStepNavigationBloc(), - child: ItineraryCreationPage(), + return BlocProvider( + create: (_) => ItineraryStepNavigationBloc(), + child: ItineraryCreationPage(), ); }, ); + + case RouteConstants.esimOffer: + return MaterialPageRoute( + builder: (_) { + return EsimOfferPage(); + }, + ); default: return MaterialPageRoute( builder: (_) => diff --git a/lib/core/route_constants.dart b/lib/core/route_constants.dart index 104d921..66e8b17 100644 --- a/lib/core/route_constants.dart +++ b/lib/core/route_constants.dart @@ -14,4 +14,8 @@ class RouteConstants { static const String itineraryCreationStart = '/itineraryCreationStart'; static const String itineraryCreation = '/itineraryCreation'; + + /**************************** ESIM Page *****************************************/ + + static const String esimOffer = '/esim_offer'; } diff --git a/lib/esim_offer/esim_offer_view.dart b/lib/esim_offer/esim_offer_view.dart new file mode 100644 index 0000000..71317f6 --- /dev/null +++ b/lib/esim_offer/esim_offer_view.dart @@ -0,0 +1,405 @@ +import 'package:citycards_customer/common_packages/app_bar.dart'; +import 'package:citycards_customer/common_packages/custom_filled_button.dart'; +import 'package:citycards_customer/common_packages/custom_text.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class EsimOfferPage extends StatelessWidget { + const EsimOfferPage({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: SafeArea( + child: SingleChildScrollView( + child: Column( + children: [ + Container( + color: Colors.white, + padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), + child: CommonAppBar(isWhiteLogo: false, isProfilePage: false), + ), + + /************************* Top Banner ***********************/ + Stack( + children: [ + Image.asset( + "assets/images/esim_top_bg.png", + width: double.infinity, + ), + Positioned( + top: 32.h, + left: 24.w, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + height: 48.h, + width: 48.w, + decoration: BoxDecoration( + color: Color(0xFFFFFFFF).withOpacity(.2), + borderRadius: BorderRadius.circular(20.r), + ), + child: Icon(Icons.wifi, color: Colors.white), + ), + + SizedBox(height: 24.h), + SizedBox( + width: 350.w, + child: CustomText( + text: + "Stay Connected Instantly with Your Complimentary eSIM", + size: 22.sp, + color: Color(0xFFFFFFFF), + ), + ), + SizedBox(height: 12.h), + SizedBox( + width: 350, + child: CustomText( + text: + "Because every unforgettable trip starts with seamless connectivity.", + size: 14.sp, + color: Colors.white, + ), + ), + SizedBox(height: 22.h), + Container( + height: 48.h, + width: 165.w, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(38.r), + boxShadow: [ + BoxShadow( + color: Colors.black12, + offset: Offset(4, 4), + blurRadius: 5, + ), + ], + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + CustomText( + text: "View Plans", + size: 16.sp, + color: Color(0xFFF95F62), + ), + SizedBox(width: 6.w), + Icon( + Icons.arrow_forward, + color: Color(0xFFF95F62), + size: 18, + ), + ], + ), + ), + ], + ), + ), + ], + ), + + SizedBox(height: 32.h), + + Text.rich( + TextSpan( + children: [ + TextSpan( + text: "With your ", + style: TextStyle( + fontSize: 26.sp, + fontWeight: FontWeight.w300, + ), + ), + TextSpan( + text: "eSIM", + style: TextStyle( + color: Color(0xFFF95F62), + fontSize: 26.sp, + fontWeight: FontWeight.w700, + ), + ), + TextSpan( + text: ", you can:", + style: TextStyle( + fontSize: 26.sp, + fontWeight: FontWeight.w300, + ), + ), + ], + ), + ), + SizedBox(height: 37.h), + ServiceCard( + "assets/icons/esim_location.png", + "Navigate the city with ease", + "Access real-time maps and directions wherever you go", + ), + SizedBox(height: 28.h), + ServiceCard( + "assets/icons/esim_phone.png", + "Book rides, access maps, and find attractions in real time", + "Stay connected to all essential travel services", + ), + SizedBox(height: 28.h), + ServiceCard( + "assets/icons/esim_camera.png", + "Share photos and memories instantly", + "Upload and share your travel moments without delay", + ), + SizedBox(height: 28.h), + ServiceCard( + "assets/icons/esim_people.png", + "Stay connected with friends, family, and travel plans", + "Never miss important updates or messages while traveling", + ), + + SizedBox(height: 75.h), + + Container( + width: double.infinity, + padding: EdgeInsets.only( + left: 33.w, + right: 33.w, + top: 70.h, + bottom: 37.h, + ), + color: Color(0xFFFFF5F5), + child: Column( + children: [ + Text.rich( + TextSpan( + children: [ + TextSpan( + text: "Simple ", + style: TextStyle(fontSize: 26.sp), + ), + TextSpan( + text: "3-Step Process", + style: TextStyle( + color: Color(0xFFF95F62), + fontSize: 26.sp, + fontWeight: FontWeight.w700, + ), + ), + ], + ), + ), + SizedBox(height: 16.h), + CustomText( + text: "Get connected in seconds", + size: 17.5, + color: Color(0xFF4B5563), + ), + SizedBox(height: 56.h), + ProcessCard( + "Receive QR Code", + "Get your unique eSIM QR code with your CityCard", + "1", + "assets/icons/process_qr.png", + ), + SizedBox(height: 28.h), + ProcessCard( + "Scan Code", + "Open your phone camera and scan the QR code", + "2", + "assets/icons/process_phone.png", + ), + SizedBox(height: 28.h), + ProcessCard( + "Connected", + "You're online instantly - start exploring!", + "3", + "assets/icons/process_wifi.png", + ), + ], + ), + ), + + Stack( + children: [ + Image.asset( + 'assets/images/esim_bottom_banner.png', + fit: BoxFit.contain, + ), + Positioned.fill( + child: Container( + height: double.infinity, + width: double.infinity, + color: Colors.black.withOpacity(.68), + ), + ), + Positioned.fill( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text.rich( + TextSpan( + children: [ + TextSpan( + text: "It's one more way", + style: TextStyle( + color: Colors.white, + fontSize: 21.sp, + fontWeight: FontWeight.w400, + ), + ), + TextSpan( + text: " CityCard", + style: TextStyle( + color: Color(0xFFF95F62), + fontSize: 21.sp, + fontWeight: FontWeight.w700, + ), + ), + ], + ), + ), + SizedBox(height: 4.h,), + Text.rich( + TextSpan( + children: [ + TextSpan( + text: "makes your journey", + style: TextStyle( + color: Colors.white, + fontSize: 21.sp, + fontWeight: FontWeight.w400, + ), + ), + TextSpan( + text: " smarter", + style: TextStyle( + color: Color(0xFFF95F62), + fontSize: 21.sp, + fontWeight: FontWeight.w700, + ), + ), + ], + ), + ), + SizedBox(height: 4.h,), + Text.rich( + TextSpan( + children: [ + TextSpan( + text: "and more", + style: TextStyle( + color: Colors.white, + fontSize: 21.sp, + fontWeight: FontWeight.w400, + ), + ), + TextSpan( + text: " effortless", + style: TextStyle( + color: Color(0xFFF95F62), + fontSize: 21.sp, + fontWeight: FontWeight.w700, + ), + ), + ], + ), + ), + SizedBox(height: 28.h,), + CustomFilledButton(onTap: (){}, label: "Start Your Journey Today", height: 60.h, width: 300.w,showArrow: true,), + ], + ), + ), + ], + ), + SizedBox(height: 150.h,) + ], + ), + ), + ), + ); + } + + Widget ServiceCard(String icon, String title, String subTitle) { + return Padding( + padding: EdgeInsets.symmetric(horizontal: 28.w), + child: Container( + padding: EdgeInsets.symmetric(vertical: 21.h, horizontal: 21.w), + decoration: BoxDecoration( + color: Color(0xFFFFF5F5), + borderRadius: BorderRadius.circular(14.r), + ), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Image.asset(icon, scale: 4), + SizedBox(width: 14.w), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + title, + style: TextStyle( + fontSize: 16.sp, + fontWeight: FontWeight.w600, + ), + softWrap: true, + ), + SizedBox(height: 6.h), + Text( + subTitle, + style: TextStyle(fontSize: 14.sp, color: Color(0xFF4B5563)), + softWrap: true, + ), + ], + ), + ), + ], + ), + ), + ); + } + + Widget ProcessCard(String title, String subTitle, String count, String icon) { + return Container( + padding: EdgeInsets.symmetric(vertical: 28.h, horizontal: 28.w), + decoration: BoxDecoration( + color: Colors.white, + boxShadow: [ + BoxShadow(color: Colors.black12, offset: Offset(0, 5), blurRadius: 5), + ], + borderRadius: BorderRadius.circular(14.sp), + ), + child: Column( + children: [ + Container( + height: 56.h, + width: 56.w, + decoration: BoxDecoration( + color: Color(0xFFF95F62), + borderRadius: BorderRadius.circular(30.r), + ), + child: Center( + child: CustomText( + text: count, + size: 21.sp, + weight: FontWeight.w700, + color: Colors.white, + ), + ), + ), + SizedBox(height: 21.h), + Image.asset(icon, scale: 4), + SizedBox(height: 14.h), + CustomText(text: title, size: 18.sp, weight: FontWeight.w700), + SizedBox(height: 10.h), + Text( + subTitle, + style: TextStyle(fontSize: 14.sp, color: Color(0xFF4B5563)), + textAlign: TextAlign.center, + ), + ], + ), + ); + } +} diff --git a/lib/hotel_offer/hotel_offer_view.dart b/lib/hotel_offer/hotel_offer_view.dart new file mode 100644 index 0000000..e69de29 diff --git a/lib/itinerary_creation/itinerary_creation_start_view.dart b/lib/itinerary_creation/itinerary_creation_start_view.dart index 9f8905f..389f223 100644 --- a/lib/itinerary_creation/itinerary_creation_start_view.dart +++ b/lib/itinerary_creation/itinerary_creation_start_view.dart @@ -11,78 +11,80 @@ class ItineraryCreationStartPage extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( backgroundColor: Color(0xFFFFF5F5), - body: Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Container( - height: 103.h, - width: 103.w, - - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(24.r), - boxShadow: [ - BoxShadow( - color: Colors.black12, - offset: Offset(0, 4), - blurRadius: 5, - ), - ], - ), - child: Center( - child: Image.asset("assets/icons/magic_creation.png", scale: 4), - ), - ), - - SizedBox(height: 34.h), - Text.rich( - TextSpan( - children: [ - TextSpan( - text: "Create your", - style: TextStyle( - color: Color(0xFF101828), - fontSize: 24.sp, - fontWeight: FontWeight.w500, + body: SafeArea( + child: Center( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + height: 103.h, + width: 103.w, + + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(24.r), + boxShadow: [ + BoxShadow( + color: Colors.black12, + offset: Offset(0, 4), + blurRadius: 5, ), - ), - TextSpan( - text: " magic itinerary", - style: TextStyle( - color: Color(0xFFF95F62), - fontSize: 24.sp, - fontWeight: FontWeight.w500, + ], + ), + child: Center( + child: Image.asset("assets/icons/magic_creation.png", scale: 4), + ), + ), + + SizedBox(height: 34.h), + Text.rich( + TextSpan( + children: [ + TextSpan( + text: "Create your", + style: TextStyle( + color: Color(0xFF101828), + fontSize: 24.sp, + fontWeight: FontWeight.w500, + ), ), - ), - ], + TextSpan( + text: " magic itinerary", + style: TextStyle( + color: Color(0xFFF95F62), + fontSize: 24.sp, + fontWeight: FontWeight.w500, + ), + ), + ], + ), ), - ), - - SizedBox(height: 13.h), - Padding( - padding: EdgeInsets.symmetric(horizontal: 25.w), - child: Text( - "Answer a few quick questions and we'll craft a personalized travel experience just for you ✨", - style: TextStyle(fontSize: 14, color: Color(0xFF4A5565)), - textAlign: TextAlign.center, + + SizedBox(height: 13.h), + Padding( + padding: EdgeInsets.symmetric(horizontal: 25.w), + child: Text( + "Answer a few quick questions and we'll craft a personalized travel experience just for you ✨", + style: TextStyle(fontSize: 14, color: Color(0xFF4A5565)), + textAlign: TextAlign.center, + ), ), - ), - SizedBox(height: 47.h), - CustomFilledButton( - onTap: () { - Navigator.pushNamed(context, RouteConstants.itineraryCreation); - }, - showArrow: true, - label: "Let’s Get Started", - ), - SizedBox(height: 38.h), - CustomText( - text: "Takes only 2 minutes ⏱️", - color: Color(0xFF6A7282), - size: 14.sp, - ), - ], + SizedBox(height: 47.h), + CustomFilledButton( + onTap: () { + Navigator.pushNamed(context, RouteConstants.itineraryCreation); + }, + showArrow: true, + label: "Let’s Get Started", + ), + SizedBox(height: 38.h), + CustomText( + text: "Takes only 2 minutes ⏱️", + color: Color(0xFF6A7282), + size: 14.sp, + ), + ], + ), ), ), ); diff --git a/lib/itinerary_creation/itinerary_creation_view.dart b/lib/itinerary_creation/itinerary_creation_view.dart index 5fa296d..ee4e00e 100644 --- a/lib/itinerary_creation/itinerary_creation_view.dart +++ b/lib/itinerary_creation/itinerary_creation_view.dart @@ -64,57 +64,59 @@ class _ItineraryCreationPageState extends State { curve: Curves.easeInOut, ); }, - child: Column( - children: [ - Padding( - padding: EdgeInsets.only( - left: 20.w, - right: 20.w, - bottom: 20.h, - ), - child: ClipRRect( - borderRadius: BorderRadius.circular(10), - child: - BlocBuilder< - ItineraryStepNavigationBloc, - ItineraryStepNavigationState - >( - builder: (context, state) { - return LinearProgressIndicator( - value: state.selectedIndex / 10, - borderRadius: BorderRadius.circular(10), - backgroundColor: Colors.white, - color: const Color(0xFFF95F62), - minHeight: 6.h, - ); - }, - ), - ), - ), - - Expanded( - child: Padding( - padding: EdgeInsets.symmetric(horizontal: 20.w), - child: PageView( - controller: _pageController, - physics: const NeverScrollableScrollPhysics(), - children: [ - DateSelectionView(), - CitySelectionView(), - EnergySelectionView(), - KidsSelectionView(), - DietarySelectionView(), - ArtGallerySelectionView(), - ScenicViewpointsRatingView(), - HistoricalSiteRatingView(), - WildlifeRatingView(), - ShoppingRatingView(), - ItineraryCompletionView(), - ], + child: SafeArea( + child: Column( + children: [ + Padding( + padding: EdgeInsets.only( + left: 20.w, + right: 20.w, + bottom: 20.h, + ), + child: ClipRRect( + borderRadius: BorderRadius.circular(10), + child: + BlocBuilder< + ItineraryStepNavigationBloc, + ItineraryStepNavigationState + >( + builder: (context, state) { + return LinearProgressIndicator( + value: state.selectedIndex / 10, + borderRadius: BorderRadius.circular(10), + backgroundColor: Colors.white, + color: const Color(0xFFF95F62), + minHeight: 6.h, + ); + }, + ), ), ), - ), - ], + + Expanded( + child: Padding( + padding: EdgeInsets.symmetric(horizontal: 20.w), + child: PageView( + controller: _pageController, + physics: const NeverScrollableScrollPhysics(), + children: [ + DateSelectionView(), + CitySelectionView(), + EnergySelectionView(), + KidsSelectionView(), + DietarySelectionView(), + ArtGallerySelectionView(), + ScenicViewpointsRatingView(), + HistoricalSiteRatingView(), + WildlifeRatingView(), + ShoppingRatingView(), + ItineraryCompletionView(), + ], + ), + ), + ), + ], + ), ), ), );