refactor: rename aris to aelis (#59)

Rename all references across the codebase: package names,
imports, source IDs, directory names, docs, and configs.

Co-authored-by: Ona <no-reply@ona.com>

apps/aelis-client/src/components/parallax-scroll-view.tsx

@@ -0,0 +1,82 @@
+import type { PropsWithChildren, ReactElement } from "react"
+
+import { StyleSheet } from "react-native"
+import Animated, {
+	interpolate,
+	useAnimatedRef,
+	useAnimatedStyle,
+	useScrollOffset,
+} from "react-native-reanimated"
+
+import { ThemedView } from "@/components/themed-view"
+import { useColorScheme } from "@/hooks/use-color-scheme"
+import { useThemeColor } from "@/hooks/use-theme-color"
+
+const HEADER_HEIGHT = 250
+
+type Props = PropsWithChildren<{
+	headerImage: ReactElement
+	headerBackgroundColor: { dark: string; light: string }
+}>
+
+export default function ParallaxScrollView({
+	children,
+	headerImage,
+	headerBackgroundColor,
+}: Props) {
+	const backgroundColor = useThemeColor({}, "background")
+	const colorScheme = useColorScheme() ?? "light"
+	const scrollRef = useAnimatedRef<Animated.ScrollView>()
+	const scrollOffset = useScrollOffset(scrollRef)
+	const headerAnimatedStyle = useAnimatedStyle(() => {
+		return {
+			transform: [
+				{
+					translateY: interpolate(
+						scrollOffset.value,
+						[-HEADER_HEIGHT, 0, HEADER_HEIGHT],
+						[-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75],
+					),
+				},
+				{
+					scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
+				},
+			],
+		}
+	})
+
+	return (
+		<Animated.ScrollView
+			ref={scrollRef}
+			style={{ backgroundColor, flex: 1 }}
+			scrollEventThrottle={16}
+		>
+			<Animated.View
+				style={[
+					styles.header,
+					{ backgroundColor: headerBackgroundColor[colorScheme] },
+					headerAnimatedStyle,
+				]}
+			>
+				{headerImage}
+			</Animated.View>
+			<ThemedView style={styles.content}>{children}</ThemedView>
+		</Animated.ScrollView>
+	)
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	header: {
+		height: HEADER_HEIGHT,
+		overflow: "hidden",
+	},
+	content: {
+		flex: 1,
+		padding: 32,
+		gap: 16,
+		overflow: "hidden",
+	},
+})