Feature: NCore welcome example page completed.

example/src/navigation/type.ts

@@ -1,5 +1,5 @@
 type RootStackParamList = {
-    TestSubPage: undefined;
+    TextPage: undefined;
     Home: undefined;
 };
 export type {

example/src/pages/home/index.tsx

@@ -2,12 +2,15 @@ import {
     useLayoutEffect
 } from "react";
 import {
-    Image
+    Image,
+    View
 } from "react-native";
 import stylesheet from "./stylesheet";
 import {
+    NCoreUIKitLocalize,
     NCoreUIKitTheme,
     PageContainer,
+    RowCard,
     Text
 } from "ncore-ui-kit";
 import {
@@ -17,12 +20,21 @@ import type RootStackParamList from "../../navigation/type";
 import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
+import {
+    ChevronRight
+} from "lucide-react-native";
+import packageJSON from "../../../../package.json";
 
 const Home = () => {
     const {
-        colors
+        colors,
+        spaces
     } = NCoreUIKitTheme.useContext();
 
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     useLayoutEffect(() => {
@@ -43,25 +55,75 @@ const Home = () => {
             }
         }}
     >
-        <Image
-            source={{
-                uri: "https://ncore.nibgat.space/assets/images/ncorelogo.png"
-            }}
+        <View
             style={{
-                height: 300,
-                width: 300
+                justifyContent: "center",
+                alignItems: "center",
+                maxWidth: 850,
+                width: "100%"
             }}
-        />
-        <Text
-            variant="displayMediumSize"
-        >
-            NCore | Design System
-        </Text>
-        <Text
-            variant="headlineLargeSize"
         >
-            UI Kit - Library
-        </Text>
+            <Image
+                source={{
+                    uri: "https://ncore.nibgat.space/assets/images/ncorelogo.png"
+                }}
+                style={{
+                    height: 300,
+                    width: 300
+                }}
+            />
+            <Text
+                variant="displayMediumSize"
+                style={{
+                    marginBottom: spaces.spacingMd,
+                    textAlign: "center"
+                }}
+            >
+                {localize("ncore-design-system")}
+            </Text>
+            <Text
+                variant="headlineLargeSize"
+                style={{
+                    marginBottom: spaces.spacingLg,
+                    textAlign: "center"
+                }}
+            >
+                {localize("ui-kit-library")}
+            </Text>
+            <Text
+                variant="bodyLargeSize"
+                style={{
+                    marginBottom: spaces.spacingMd,
+                    textAlign: "center"
+                }}
+            >
+                {localize("ncore-about")}
+            </Text>
+            <Text
+                color="low"
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            >
+                {localize("version")}: {packageJSON.version}
+            </Text>
+            <RowCard
+                title={localize("text")}
+                rightIcon={({
+                    customColor,
+                    color,
+                    size
+                }) => {
+                    return <ChevronRight
+                        color={customColor ? customColor : colors.content.icon[color]}
+                        size={size}
+                    />;
+                }}
+                onPress={() => {
+                    navigation.navigate("TextPage");
+                }}
+            />
+        </View>
     </PageContainer>;
 };
 export default Home;

example/src/pages/text/index.tsx

@@ -1,10 +1,16 @@
 import {
-    useLayoutEffect
+    useLayoutEffect,
+    useState
 } from "react";
+import {
+    View
+} from "react-native";
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    NCoreUIKitTheme,
     PageContainer,
+    Button,
     Header,
     Text
 } from "ncore-ui-kit";
@@ -17,36 +23,73 @@ import type {
 } from "@react-navigation/native-stack";
 
 const TextPage = () => {
+    const {
+        typography,
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
     const {
         localize
     } = NCoreUIKitLocalize.useContext();
 
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
+    const [
+        variant,
+        setVariant
+    ] = useState<number>(0);
+
     useLayoutEffect(() => {
         navigation.setOptions({
             header: () => <Header
-                title={localize("home") + " dsgpıojsdf ıogjsdoıgjsdg lkjslkgjdskl gjsdklgjsdg asfkasf aslfk aslfşk aslşfkasfaslşkf asfasflşk"}
+                title={localize("text")}
                 navigation={navigation}
-                actions={[
-                    {
-                        onPress: () => {
-                        },
-                        size: "medium",
-                        title: "Tamam"
-                    }
-                ]}
+                isGoBackEnable={true}
             />
         });
     }, []);
 
     return <PageContainer
+        isScrollable={false}
         style={[
             stylesheet.container
         ]}
     >
-        <Text>This is test sub page.</Text>
-
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <View
+                style={{
+                    borderColor: colors.content.border.subtle,
+                    marginBottom: spaces.spacingMd,
+                    borderRadius: radiuses.form,
+                    borderWidth: borders.line,
+                    padding: spaces.spacingMd,
+                    minHeight: 120
+                }}
+            >
+                <Text
+                    variant={Object.keys(typography)[variant] as keyof NCoreUIKit.Typography}
+                    style={{
+                        marginBottom: spaces.spacingLg
+                    }}
+                >
+                    {localize("this-is-test-sub-page")}
+                </Text>
+            </View>
+            <Button
+                title={`variant = ${Object.keys(typography)[variant]}`}
+                spreadBehaviour="stretch"
+                onPress={() => {
+                    setVariant(variant + 1 > Object.keys(typography).length - 1 ? 0 : variant + 1);
+                }}
+            />
+        </View>
     </PageContainer>;
 };
 export default TextPage;

example/src/pages/text/stylesheet.ts

@@ -4,7 +4,12 @@ import {
 
 const stylesheet = StyleSheet.create({
     container: {
+        alignItems: "center",
         flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
     }
 });
 export default stylesheet;

example/src/variants/locales/default.json

@@ -3,14 +3,26 @@
         "locale": "tr-TR",
         "isRTL": false,
         "translations": {
-            "home": "Ana Sayfa"
+            "ncore-about": "NCore, başta NİBGAT® ve NİBGAT® | Topluluk olmak üzere herkes için geliştirilmiş bir tasarım sistemi ve bileşen kütüphanesidir. Hızlı geliştirme süreçleri ve yüksek stabilizasyon ile şık sistemler üretmek üzere tasarlanmıştır.",
+            "this-is-test-sub-page": "Bu bir test alt sayfasıdır.",
+            "ncore-design-system": "NCore | Tasarım Sistemi",
+            "ui-kit-library": "KA Araçları - Kütüphanesi",
+            "text": "Text ( Metin )",
+            "home": "Ana Sayfa",
+            "version": "Sürüm"
         }
     },
     {
         "locale": "en-US",
         "isRTL": false,
         "translations": {
-            "home": "Home Page"
+            "ncore-about": "NCore is a design system and component library developed for everyone, primarily NİBGAT® and NİBGAT® | Community. It is designed to build elegant systems with rapid development processes and high stability.",
+            "this-is-test-sub-page": "This is test sub-page.",
+            "design-system": "NCore | Design System",
+            "ui-kit-library": "UI Kit - Library",
+            "version": "Version",
+            "home": "Home Page",
+            "text": "Text"
         }
     }
 ]

src/components/rowCard/stylesheet.ts

@@ -13,7 +13,8 @@ import type {
 const stylesheet = StyleSheet.create({
     container: {
         flexDirection: "row",
-        alignItems: "center"
+        alignItems: "center",
+        alignSelf: "stretch"
     },
     iconContainer: {
         justifyContent: "center",