456 lines
19 KiB
Dart
456 lines
19 KiB
Dart
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: Column(
|
|
children: [
|
|
Container(
|
|
color: Colors.white,
|
|
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
|
|
child: CommonAppBar(
|
|
isWhiteLogo: false,
|
|
isProfilePage: false,
|
|
showDivider: true,
|
|
),
|
|
),
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
/************************* Top Banner ***********************/
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.only(
|
|
bottomLeft: Radius.circular(24.r),
|
|
bottomRight: Radius.circular(24.r),
|
|
),
|
|
child: Container(
|
|
height: 340.h,
|
|
width: double.infinity,
|
|
child: Stack(
|
|
children: [
|
|
Positioned.fill(
|
|
child: Image.asset(
|
|
"assets/images/esim_top_bg.png",
|
|
width: double.infinity,
|
|
height: double.infinity,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
// Black gradient overlay from top to bottom
|
|
Positioned.fill(
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [
|
|
Colors.black.withOpacity(0.6),
|
|
Colors.black.withOpacity(0.3),
|
|
Colors.transparent,
|
|
],
|
|
stops: [0.0, 0.4, 1.0],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 32.h,
|
|
left: 24.w,
|
|
right: 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:
|
|
"Connect instantly with your free eSIM",
|
|
size: 22.sp,
|
|
color: Color(0xFFFFFFFF),
|
|
),
|
|
),
|
|
SizedBox(height: 12.h),
|
|
SizedBox(
|
|
width: 350,
|
|
child: CustomText(
|
|
text:
|
|
"Every great journey begins with smooth 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: 24.sp),
|
|
),
|
|
TextSpan(
|
|
text: "3-Step Process",
|
|
style: TextStyle(
|
|
color: Color(0xFFF95F62),
|
|
fontSize: 24.sp,
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
SizedBox(height: 16.h),
|
|
CustomText(
|
|
text: "Get connected in seconds",
|
|
size: 16,
|
|
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: " CityCards",
|
|
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,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
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,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
} |