433 lines
8.2 KiB
TypeScript
433 lines
8.2 KiB
TypeScript
import { StyleSheet } from 'react-native';
|
|
|
|
export const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#FAFBFF',
|
|
},
|
|
|
|
// Header Styles
|
|
header: {
|
|
backgroundColor: '#fff',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#F0F2F8',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 8,
|
|
elevation: 3,
|
|
},
|
|
headerContent: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 16,
|
|
},
|
|
logoBox: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
},
|
|
logoCircle: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 21,
|
|
backgroundColor: '#6366F1',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
shadowColor: '#6366F1',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 8,
|
|
elevation: 5,
|
|
},
|
|
logoText: {
|
|
color: '#fff',
|
|
fontSize: 16,
|
|
fontWeight: '800',
|
|
},
|
|
brandText: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
color: '#1F2937',
|
|
},
|
|
headerRight: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
zIndex: 100,
|
|
gap: 12,
|
|
},
|
|
|
|
// Language Select
|
|
langContainer: {
|
|
position: 'relative',
|
|
zIndex: 1000,
|
|
height: 40,
|
|
},
|
|
langTrigger: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
position: 'relative',
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 12,
|
|
borderRadius: 12,
|
|
backgroundColor: '#F9FAFB',
|
|
borderWidth: 1,
|
|
borderColor: '#E5E7EB',
|
|
},
|
|
langIcon: {
|
|
fontSize: 16,
|
|
},
|
|
langText: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: '#374151',
|
|
},
|
|
chevron: {
|
|
fontSize: 10,
|
|
color: '#9CA3AF',
|
|
},
|
|
langMenu: {
|
|
position: 'absolute',
|
|
top: 48,
|
|
right: 0,
|
|
backgroundColor: '#fff',
|
|
borderRadius: 14,
|
|
borderWidth: 1,
|
|
borderColor: '#E5E7EB',
|
|
minWidth: 160,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 12,
|
|
elevation: 20, // oshirdik
|
|
zIndex: 1000, // iOS uchun
|
|
},
|
|
langItem: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 16,
|
|
zIndex: 50,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#F3F4F6',
|
|
},
|
|
langItemActive: {
|
|
backgroundColor: '#EEF2FF',
|
|
},
|
|
langItemText: {
|
|
fontSize: 14,
|
|
color: '#374151',
|
|
},
|
|
langItemTextActive: {
|
|
color: '#6366F1',
|
|
fontWeight: '600',
|
|
},
|
|
checkmark: {
|
|
color: '#6366F1',
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
},
|
|
|
|
// Menu Button
|
|
menuBtn: {
|
|
padding: 8,
|
|
},
|
|
hamburger: {
|
|
width: 24,
|
|
height: 20,
|
|
justifyContent: 'space-between',
|
|
},
|
|
line: {
|
|
width: 24,
|
|
height: 2,
|
|
backgroundColor: '#374151',
|
|
borderRadius: 2,
|
|
},
|
|
lineRotate1: {
|
|
transform: [{ rotate: '45deg' }, { translateY: 9 }],
|
|
},
|
|
lineHide: {
|
|
opacity: 0,
|
|
},
|
|
lineRotate2: {
|
|
transform: [{ rotate: '-45deg' }, { translateY: -9 }],
|
|
},
|
|
|
|
// Mobile Menu
|
|
mobileMenu: {
|
|
backgroundColor: '#fff',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#E5E7EB',
|
|
paddingVertical: 8,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 8,
|
|
elevation: 3,
|
|
},
|
|
menuItem: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingVertical: 14,
|
|
paddingHorizontal: 20,
|
|
marginHorizontal: 12,
|
|
marginVertical: 4,
|
|
borderRadius: 12,
|
|
backgroundColor: '#F9FAFB',
|
|
},
|
|
menuItemPrimary: {
|
|
backgroundColor: '#6366F1',
|
|
},
|
|
menuItemText: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: '#374151',
|
|
},
|
|
menuItemTextPrimary: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: '#fff',
|
|
},
|
|
menuArrow: {
|
|
fontSize: 18,
|
|
color: '#9CA3AF',
|
|
},
|
|
menuArrowPrimary: {
|
|
fontSize: 18,
|
|
color: '#fff',
|
|
},
|
|
|
|
// Scroll Content
|
|
scrollContent: {
|
|
paddingBottom: 20,
|
|
},
|
|
|
|
// Hero Section
|
|
hero: {
|
|
paddingHorizontal: 20,
|
|
marginTop: 20,
|
|
paddingBottom: 32,
|
|
alignItems: 'center',
|
|
},
|
|
badge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 16,
|
|
borderRadius: 20,
|
|
backgroundColor: '#EEF2FF',
|
|
borderWidth: 1,
|
|
borderColor: '#DDD6FE',
|
|
marginBottom: 24,
|
|
},
|
|
badgeDot: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4,
|
|
backgroundColor: '#6366F1',
|
|
},
|
|
badgeText: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
textAlign: 'center',
|
|
color: '#6366F1',
|
|
},
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: '800',
|
|
color: '#1F2937',
|
|
textAlign: 'center',
|
|
lineHeight: 40,
|
|
},
|
|
titleGradient: {
|
|
color: '#6366F1',
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
color: '#6B7280',
|
|
textAlign: 'center',
|
|
lineHeight: 24,
|
|
},
|
|
mainBtn: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 12,
|
|
backgroundColor: '#6366F1',
|
|
paddingVertical: 16,
|
|
paddingHorizontal: 32,
|
|
borderRadius: 16,
|
|
width: 'auto',
|
|
shadowColor: '#6366F1',
|
|
shadowOffset: { width: 0, height: 8 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 16,
|
|
elevation: 8,
|
|
marginTop: 20,
|
|
},
|
|
mainBtnText: {
|
|
color: '#fff',
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
},
|
|
btnArrow: {
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: 14,
|
|
backgroundColor: 'rgba(255,255,255,0.2)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
btnArrowText: {
|
|
color: '#fff',
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
},
|
|
|
|
// Features
|
|
features: {
|
|
paddingHorizontal: 20,
|
|
gap: 16,
|
|
},
|
|
card: {
|
|
backgroundColor: '#fff',
|
|
padding: 24,
|
|
borderRadius: 20,
|
|
borderWidth: 1,
|
|
borderColor: '#F0F2F8',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 12,
|
|
elevation: 3,
|
|
},
|
|
cardIcon: {
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: 16,
|
|
backgroundColor: '#EEF2FF',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
cardIconText: {
|
|
fontSize: 28,
|
|
},
|
|
cardTitle: {
|
|
fontSize: 20,
|
|
fontWeight: '700',
|
|
color: '#1F2937',
|
|
marginBottom: 8,
|
|
},
|
|
cardDesc: {
|
|
fontSize: 15,
|
|
color: '#6B7280',
|
|
lineHeight: 22,
|
|
},
|
|
|
|
// Stats
|
|
stats: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
alignItems: 'center',
|
|
marginHorizontal: 20,
|
|
marginTop: 32,
|
|
padding: 24,
|
|
backgroundColor: '#fff',
|
|
borderRadius: 20,
|
|
borderWidth: 1,
|
|
borderColor: '#F0F2F8',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 12,
|
|
elevation: 3,
|
|
},
|
|
stat: {
|
|
alignItems: 'center',
|
|
},
|
|
statNumber: {
|
|
fontSize: 24,
|
|
fontWeight: '800',
|
|
color: '#6366F1',
|
|
marginBottom: 4,
|
|
},
|
|
statLabel: {
|
|
fontSize: 12,
|
|
color: '#6B7280',
|
|
fontWeight: '500',
|
|
},
|
|
statDivider: {
|
|
width: 1,
|
|
height: 40,
|
|
backgroundColor: '#E5E7EB',
|
|
},
|
|
|
|
// Footer
|
|
footer: {
|
|
position: 'fixed',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
flexDirection: 'column',
|
|
gap: 12,
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 16,
|
|
backgroundColor: '#fff',
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#F0F2F8',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: -2 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 8,
|
|
elevation: 5,
|
|
height: 'auto',
|
|
},
|
|
footerBtnOutline: {
|
|
flex: 1,
|
|
minHeight: 50,
|
|
paddingVertical: 1,
|
|
borderRadius: 14,
|
|
borderWidth: 1,
|
|
borderColor: '#E5E7EB',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
footerBtnOutlineText: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: '#374151',
|
|
},
|
|
footerBtnPrimary: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
paddingVertical: 14,
|
|
borderRadius: 14,
|
|
backgroundColor: '#6366F1',
|
|
shadowColor: '#6366F1',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 12,
|
|
elevation: 5,
|
|
},
|
|
footerBtnPrimaryText: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
color: '#fff',
|
|
},
|
|
footerBtnArrow: {
|
|
fontSize: 18,
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
},
|
|
});
|