fitst commit
This commit is contained in:
Samandar Turgunboyev
432
screens/welcome/styles/welcomeStyle.ts
Normal file
432
screens/welcome/styles/welcomeStyle.ts
Normal file
@@ -0,0 +1,432 @@
|
||||
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',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user