feat: add TemplateGrid and TitleBar components with tests

- Implemented TemplateGrid component for displaying templates in a grid layout.
- Added calculateCardWidth helper function for dynamic card sizing.
- Created TitleBar component for displaying the title and points with interaction.
- Added unit tests for TemplateGrid and TitleBar components to ensure proper functionality.
- Introduced useStickyTabs and useTabNavigation hooks with tests for managing sticky tab behavior and navigation logic.
- Implemented useTemplateFilter hook for filtering templates based on video content.
- Added comprehensive tests for all new hooks and components to validate behavior and edge cases.

components/blocks/home/HeroSlider.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { View, Text, Pressable, ScrollView, StyleSheet } from 'react-native'
+import { Image } from 'expo-image'
+
+interface Activity {
+  id: string
+  title: string
+  titleEn?: string
+  desc: string
+  descEn?: string
+  coverUrl: string
+  link: string
+}
+
+interface HeroSliderProps {
+  activities: Activity[]
+  onActivityPress?: (link: string) => void
+}
+
+export function HeroSlider({
+  activities,
+  onActivityPress,
+}: HeroSliderProps): JSX.Element | null {
+  // 空数据时返回 null
+  if (!activities || activities.length === 0) {
+    return null
+  }
+
+  return (
+    <View testID="hero-slider" style={styles.heroSection}>
+      <ScrollView
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.heroSliderContent}
+      >
+        {activities.map((activity) => (
+          <Pressable
+            key={activity.id}
+            testID={`hero-slide-${activity.id}`}
+            style={styles.heroMainSlide}
+            onPress={() => onActivityPress?.(activity.link)}
+          >
+            <Image
+              source={{ uri: activity.coverUrl }}
+              style={styles.heroMainImage}
+              contentFit="cover"
+            />
+            <View style={styles.heroTextContainer}>
+              <Text style={styles.heroText}>{activity.title}</Text>
+              <Text style={styles.heroSubtext}>{activity.desc}</Text>
+            </View>
+          </Pressable>
+        ))}
+      </ScrollView>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  heroSection: {
+    flexDirection: 'row',
+    paddingLeft: 12,
+    paddingTop: 12,
+    marginBottom: 40,
+    overflow: 'hidden',
+  },
+  heroSliderContent: {
+    gap: 12,
+  },
+  heroMainSlide: {
+    width: '100%',
+  },
+  heroMainImage: {
+    width: 265,
+    height: 150,
+    borderRadius: 12,
+  },
+  heroTextContainer: {
+    paddingTop: 12,
+    paddingHorizontal: 8,
+  },
+  heroText: {
+    color: '#ABABAB',
+    fontSize: 12,
+    marginBottom: 4,
+  },
+  heroSubtext: {
+    color: '#F5F5F5',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+})