feat: quest page with gui only, no functions

launcher/components/Marketplace/Button/index.tsx

@@ -85,9 +85,10 @@ export const UnderRealmButton: FC<Props> = ({
 					</Fragment>
 				</Fragment>
 			)}
-			<View>
+			{/* <View>
 				{children || <Text style={[styles.titleStyle, texStyle]}>{title}</Text>}
-			</View>
+			</View> */}
+
 			<Hoverable
 				style={{ ...middle, left: 0, right: 0, justifyContent: 'center' }}
 				animatedStyle={useHoveredStyle}

launcher/components/Navigation/Internal/Item.tsx

@@ -26,6 +26,7 @@ export const NavigationItem: FC<Props> = ({ item, onNavigate }) => {
 		return name;
 	};
 	const isActive = item.route === getRouteName();
+
 	const isHovered = useSharedValue(false);
 	const imageAnimated = useAnimatedStyle(() => {
 		return {

launcher/components/Navigation/shared.ts

@@ -56,6 +56,11 @@ const storyNav: NavigationConfig = {
 	route: 'Story',
 };
 
+const questNav: NavigationConfig = {
+	title: 'Quest',
+	route: 'Quest',
+};
+
 // Temporarily disable Mint route
 // export const mintNav: NavigationConfig = {
 // 	title: 'NFT Mint (coming in Jun)',
@@ -67,6 +72,7 @@ export const localNavigations: NavigationConfig[] = [
 	homeNav,
 	howToPlayNav,
 	storyNav,
+	questNav,
 	// mintNav,
 ];
 

launcher/components/icons/Refresh.tsx

@@ -0,0 +1,27 @@
+import type { FC } from 'react';
+import type { ViewStyle } from 'react-native';
+import { Svg } from 'react-native-svg';
+
+interface Props {
+	style?: ViewStyle;
+	size?: number;
+	color?: string;
+}
+
+export const Refresh: FC<Props> = ({ style, size, color }) => {
+	return (
+		<Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+			<path
+				d="M16.3337 10.5288C15.8682 10.458 15.4548 10.7771 15.388 11.232C15.2204 12.3746 14.693 13.4171 13.863 14.2472C11.7503 16.3598 8.31529 16.3582 6.20346 14.2472C4.09204 12.1353 4.09204 8.69909 6.20346 6.58768C6.99771 5.79384 8.00037 5.27626 9.12254 5.08784C9.60512 4.99626 10.124 4.98043 10.6623 5.04143C11.4015 5.12651 12.0895 5.37176 12.7173 5.73184L11.6324 5.91709C11.1791 5.99484 10.8739 6.42534 10.952 6.87901C11.0212 7.28509 11.3736 7.57193 11.7724 7.57193C11.8188 7.57193 11.866 7.56826 11.914 7.56009L14.8225 7.06284C15.0397 7.02543 15.2342 6.90334 15.362 6.72268C15.4898 6.54243 15.5403 6.31859 15.5028 6.10051L15.0047 3.19243C14.9282 2.73918 14.5034 2.43559 14.0428 2.51168C13.5895 2.58943 13.2843 3.02034 13.3625 3.47401L13.4935 4.23943C12.687 3.78693 11.7972 3.49418 10.8519 3.38534C10.1439 3.30476 9.45704 3.32718 8.82837 3.44759C7.38104 3.69009 6.06596 4.36843 5.02504 5.40926C2.26379 8.17051 2.26379 12.6635 5.02504 15.4255C6.40562 16.8065 8.21962 17.4967 10.0332 17.4967C11.8472 17.4967 13.6603 16.8066 15.0414 15.4255C16.1262 14.3407 16.8163 12.9743 17.0368 11.4745C17.1036 11.0188 16.7886 10.5955 16.3337 10.5288Z"
+				fill={color}
+			/>
+		</Svg>
+	);
+};
+
+Refresh.defaultProps = {
+	size: 24,
+	color: 'white',
+};
+
+export default Refresh;

launcher/screens/Quest/HeadingSection.tsx

@@ -0,0 +1,54 @@
+import type { FC } from 'react';
+import { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { DimensionState } from '@metacraft/ui';
+import { dimensionState, Text } from '@metacraft/ui';
+import UnderRealmLogo from 'components/Home/visuals/UnderRealmLogo';
+import { useSnapshot } from 'valtio';
+
+const HeadingSection: FC = () => {
+	const { windowSize, isMobile } = useSnapshot<DimensionState>(dimensionState);
+	const logoSize = useMemo(() => {
+		if (isMobile) return (360 * windowSize.width) / 430;
+
+		return (785 * windowSize.width) / 1440;
+	}, [windowSize.width, isMobile]);
+
+	const subtitleStyle = useMemo(() => {
+		if (isMobile)
+			return {
+				fontSize: 14,
+			};
+
+		return {
+			maxWidth: (windowSize.width * 580) / 1440,
+			marginTop: (-22 * windowSize.height) / 1024,
+		};
+	}, [windowSize, isMobile]);
+
+	return (
+		<View style={styles.container}>
+			<UnderRealmLogo size={logoSize} />
+			<Text style={[styles.subtitle, subtitleStyle]}>
+				Embark on a thrilling adventure in UnderRealm, where strategic card play
+				meets cooperative quests!
+			</Text>
+		</View>
+	);
+};
+
+export default HeadingSection;
+
+const styles = StyleSheet.create({
+	container: {
+		alignItems: 'center',
+	},
+	subtitle: {
+		color: '#ffffff',
+		fontWeight: '500',
+		fontSize: 18,
+		textAlign: 'center',
+		maxWidth: 280,
+		marginTop: 20,
+	},
+});

launcher/screens/Quest/QuestContent.tsx

@@ -0,0 +1,124 @@
+import type { FC } from 'react';
+import { useMemo } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import type { DimensionState } from '@metacraft/ui';
+import { dimensionState, Text } from '@metacraft/ui';
+import resources from 'utils/resources';
+import { useSnapshot } from 'valtio';
+
+import { mockQuests } from './internal';
+import QuestItem from './QuestItem';
+import TabSelection from './TabSelection';
+
+const QuestContent: FC = () => {
+	const { windowSize, isMobile } = useSnapshot<DimensionState>(dimensionState);
+
+	const frameCharmStyle = useMemo(() => {
+		return {
+			width: (windowSize.width * 400) / 1440,
+			height: (windowSize.height * 20) / 1362,
+			marginTop: -(windowSize.height * 20) / 1362,
+		};
+	}, [windowSize]);
+
+	const containerStyle = useMemo(() => {
+		if (isMobile)
+			return {
+				width: windowSize.width - (windowSize.width * 24) / 430,
+				marginTop: (windowSize.height * 80) / 960,
+			};
+		return {
+			marginTop: (windowSize.height * 360) / 1362,
+			width: windowSize.width - (windowSize.width * 120) / 720,
+		};
+	}, [windowSize, isMobile]);
+
+	const titleCharmStyle = useMemo(() => {
+		return {
+			width: (windowSize.width * 400) / 1440,
+			height: (windowSize.height * 13) / 1024,
+			bottom: -(windowSize.height * 13) / 1024,
+		};
+	}, [windowSize]);
+
+	return (
+		<View style={[styles.container, containerStyle]}>
+			<Image
+				style={[styles.frameCharm, frameCharmStyle]}
+				source={resources.quest.charm}
+			/>
+
+			<View style={styles.titleContainer}>
+				<Text style={styles.title}>Quest To Conquer</Text>
+				<Image
+					source={resources.quest.titleCharm}
+					style={[titleCharmStyle, styles.titleCharm]}
+				/>
+			</View>
+
+			<View style={styles.tabsContainer}>
+				<TabSelection title="Social Quest" isActive={true} />
+				<TabSelection title="Referral" />
+			</View>
+
+			<View style={[styles.quests, isMobile ? styles.questsOnMobile : {}]}>
+				{mockQuests.map((quest) => (
+					<QuestItem key={quest.title} {...quest} />
+				))}
+			</View>
+		</View>
+	);
+};
+
+export default QuestContent;
+
+const styles = StyleSheet.create({
+	frameCharm: {
+		alignSelf: 'center',
+	},
+	imageBackground: {
+		flex: 1,
+		alignItems: 'center',
+		justifyContent: 'center',
+	},
+	container: {
+		borderColor: '#9F835F',
+		borderWidth: 1,
+		alignItems: 'stretch',
+		paddingBottom: 80,
+		marginBottom: 40,
+		marginTop: 80,
+	},
+	title: {
+		fontFamily: 'Volkhov',
+		color: '#ffffff',
+		fontSize: 22,
+	},
+	titleCharm: {
+		position: 'absolute',
+	},
+	mapDescription: {
+		marginBottom: 60,
+		paddingHorizontal: 15,
+	},
+	quests: {
+		alignItems: 'stretch',
+		paddingHorizontal: 40,
+		marginTop: 40,
+		gap: 16,
+	},
+	questsOnMobile: {
+		paddingHorizontal: 12,
+	},
+	titleContainer: {
+		paddingVertical: 20,
+		alignItems: 'center',
+		alignSelf: 'center',
+	},
+	tabsContainer: {
+		flexDirection: 'row',
+		borderBottomColor: '#2E2E2E',
+		borderBottomWidth: 1,
+		justifyContent: 'center',
+	},
+});