Initial commit

src/screens/welcome/FirstStep.tsx

@@ -0,0 +1,208 @@
+import React from 'react';
+import {
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import Banner from 'screens/../../assets/bootsplash/Step_1.png';
+import ArrowRight from 'svg/ArrowRight';
+
+const FirstStep = ({
+  onNext,
+  lang,
+}: {
+  onNext: () => void;
+  lang: 'uz' | 'ru';
+}) => {
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+
+  const texts = {
+    uz: {
+      title: 'CPOST',
+      description:
+        'Yuklarni kuzatish va yetkazib berishni endi bir joydan boshqaring.',
+    },
+    ru: {
+      title: 'CPOST',
+      description:
+        'Теперь управляйте отслеживанием и доставкой грузов в одном месте.',
+    },
+  };
+  const scale = screenWidth < 360 ? 0.95 : 0.95;
+
+  return (
+    <View style={[styles.container, { backgroundColor: '#28A7E8' }]}>
+      <View
+        style={[
+          styles.banner,
+          {
+            width: screenWidth,
+            height: '60%',
+            borderBottomRightRadius: 40 * scale,
+            borderBottomLeftRadius: 40 * scale,
+          },
+        ]}
+      >
+        <Image
+          source={Banner}
+          style={[
+            styles.bannerImage,
+            {
+              width: screenWidth,
+              objectFit: 'contain',
+            },
+          ]}
+          resizeMode="cover"
+        />
+      </View>
+
+      <View
+        style={[
+          styles.textContainer,
+          {
+            bottom: screenHeight * 0.22 * scale,
+            width: screenWidth * 0.75,
+            left: screenWidth * 0.05,
+          },
+        ]}
+      >
+        <Text style={[styles.title, { fontSize: screenWidth * 0.075 * scale }]}>
+          {texts[lang].title}
+        </Text>
+        <Text
+          style={[
+            styles.text,
+            { fontSize: screenWidth * 0.04 * scale, marginTop: 8 * scale },
+          ]}
+          numberOfLines={4}
+          ellipsizeMode="tail"
+        >
+          {texts[lang].description}
+        </Text>
+      </View>
+
+      <View
+        style={[
+          styles.nextButtonWrapper,
+          {
+            bottom: screenHeight * 0.12 * scale,
+            right: screenWidth * 0.05,
+          },
+        ]}
+      >
+        <TouchableOpacity
+          style={[
+            styles.button,
+            {
+              width: screenWidth * 0.15 * scale,
+              height: screenWidth * 0.15 * scale,
+              borderRadius: (screenWidth * 0.15 * scale) / 2,
+            },
+          ]}
+          onPress={onNext}
+          activeOpacity={0.7}
+        >
+          <ArrowRight width={24 * scale} height={24 * scale} />
+        </TouchableOpacity>
+      </View>
+
+      <View
+        style={[
+          styles.paginationWrapper,
+          {
+            bottom: screenHeight * 0.15 * scale,
+            left: screenWidth * 0.05,
+            flexDirection: 'row',
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.activeDot,
+            { width: screenWidth * 0.1 * scale, height: 5 * scale },
+          ]}
+        />
+        <View
+          style={[
+            styles.inactiveDot,
+            {
+              width: screenWidth * 0.1 * scale,
+              height: 5 * scale,
+              marginLeft: 10 * scale,
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.inactiveDot,
+            {
+              width: screenWidth * 0.1 * scale,
+              height: 5 * scale,
+              marginLeft: 10 * scale,
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+  },
+  banner: {
+    zIndex: 20,
+    backgroundColor: '#DBFFFF',
+    borderBottomRightRadius: 40,
+    borderBottomLeftRadius: 40,
+    overflow: 'hidden',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
+  },
+  bannerImage: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    zIndex: -1,
+    height: '100%',
+  },
+  textContainer: {
+    position: 'absolute',
+    zIndex: 20,
+  },
+  title: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  text: {
+    color: '#fff',
+  },
+  nextButtonWrapper: {
+    position: 'absolute',
+    zIndex: 20,
+  },
+  button: {
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  paginationWrapper: {
+    position: 'absolute',
+    zIndex: 20,
+  },
+  activeDot: {
+    backgroundColor: '#fff',
+    borderRadius: 20,
+  },
+  inactiveDot: {
+    backgroundColor: 'rgba(255,255,255, 0.4)',
+    borderRadius: 20,
+  },
+});
+
+export default FirstStep;