Initial commit

src/screens/welcome/SecondStep.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+import {
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import Banner from 'screens/../../assets/bootsplash/Step_2.png';
+import ArrowRight from 'svg/ArrowRight';
+
+const SecondStep = ({
+  onNext,
+  lang,
+}: {
+  onNext: () => void;
+  lang: 'uz' | 'ru';
+}) => {
+  const texts = {
+    uz: {
+      title: 'Yetkazib berishni real vaqtda kuzating',
+      description:
+        'Har bir zakazingizning statusini kuzatib boring. Qayerda va qaysi bosqichda ekanini bilib oling.',
+    },
+    ru: {
+      title: 'Отслеживайте доставку в режиме реального времени',
+      description:
+        'Следите за статусом каждого вашего заказа. Где и какой Узнайте, что находится на этапе.',
+    },
+  };
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+  const scale = screenWidth < 360 ? 0.95 : 0.95;
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.banner,
+          {
+            width: screenWidth,
+            height: screenHeight * 0.6 * scale,
+            borderBottomRightRadius: 40 * scale,
+            borderBottomLeftRadius: 40 * scale,
+          },
+        ]}
+      >
+        <Image
+          source={Banner}
+          style={[
+            styles.bannerImage,
+            {
+              width: screenWidth,
+              height: '100%',
+            },
+          ]}
+          resizeMode="contain"
+        />
+      </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: 10 * scale },
+          ]}
+        >
+          {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,
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.inactiveDot,
+            {
+              width: screenWidth * 0.1 * scale,
+              height: 5 * scale,
+              marginLeft: 0,
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.activeDot,
+            {
+              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',
+    backgroundColor: '#28A7E8',
+  },
+  banner: {
+    zIndex: 20,
+    backgroundColor: '#DBFFFF',
+    overflow: 'hidden',
+  },
+  bannerImage: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    zIndex: -1,
+  },
+  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,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  activeDot: {
+    backgroundColor: '#fff',
+    borderRadius: 20,
+  },
+  inactiveDot: {
+    backgroundColor: 'rgba(255,255,255,0.4)',
+    borderRadius: 20,
+  },
+});
+
+export default SecondStep;