3D黏土风

【整体风格】
3D 黏土质感 + 柔和粉彩 + 圆润膨胀感

【适用应用】
儿童教育、健康生活、社交娱乐、轻量工具、趣味电商

【配色】
主色：#7C5CFC（黏土紫）
辅色：#FF8FAB（黏土粉）
点缀：#FFCB57（黏土黄）
成功色：#5ED6A0（黏土绿）
背景：#F0EDFA（浅薰衣草灰）
卡片：#FFFFFF
文字主：#2D2B3D（深紫灰）
文字副：#8B87A0（中灰紫）
文字白：#FFFFFF

【布局】
页面容器：flex: 1, backgroundColor: '#F0EDFA'
内容滚动：`<ScrollView>`
  contentContainerStyle: paddingBottom: 100
栅格间距：marginBottom: 20
卡片区域：paddingHorizontal: 20
响应式：useWindowDimensions()，大屏加大留白

【核心样式手法】
黏土凸起阴影（核心）：
  外层阴影模拟 3D 凸出——
  iOS:
    shadowColor: '#7C5CFC',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.25,
    shadowRadius: 16
  Android:
    elevation: 8
  内描边模拟高光：
    borderWidth: 1.5,
    borderColor: 'rgba(255,255,255,0.6)'
  → 白色半透内边 + 彩色外阴影 = 黏土膨胀感

大圆角：
  卡片 borderRadius: 24
  按钮 borderRadius: 20
  头像/图标容器 borderRadius: 9999（全圆）
  → 一切棱角磨圆，模拟手捏黏土

柔色渐变背景块：
  `<LinearGradient`
    colors={['#F0EDFA','#E8E3F8','#F0EDFA']}
    start={{x:0,y:0}} end={{x:0,y:1}}>
  → 模拟柔光照射在黏土表面

图标气泡底座：
  width: 56, height: 56, borderRadius: 20,
  backgroundColor: '#EDE8FF',（或各色淡底）
  alignItems: 'center', justifyContent: 'center',
  borderWidth: 1.5, borderColor: 'rgba(255,255,255,0.7)',
  shadowColor: '#7C5CFC', shadowOffset:{width:0,height:4},
  shadowOpacity: 0.18, shadowRadius: 8

文字排版：
  标题 fontSize: 22, fontWeight: '800', color: '#2D2B3D'
  正文 fontSize: 15, fontWeight: '500', color: '#8B87A0', lineHeight: 22
  → 粗圆字重，配合圆润视觉

【技术栈】
图标：@expo/vector-icons（MaterialCommunityIcons / Ionicons — 圆润填充风格）
渐变：expo-linear-gradient（柔色背景、按钮渐变）
字体：expo-font 加载 Nunito（圆润无衬线全系列）
动画：react-native-reanimated（弹性入场：
  withSpring({ damping: 12, stiffness: 120 })，
  入场 scale: 0.85→1 + translateY: 20→0，
  按压 scale: withSpring(0.95) 模拟按捏手感）
样式方案：StyleSheet.create

【UI 组件风格】
ClayHero（顶部黏土头图区）：
  `<View style={{`
    backgroundColor: '#7C5CFC',
    borderRadius: 32,
    marginHorizontal: 20,
    marginTop: 12,
    paddingVertical: 40,
    paddingHorizontal: 24,
    alignItems: 'center',
    borderWidth: 1.5,
    borderColor: 'rgba(255,255,255,0.25)',
    shadowColor: '#5A3ED9',
    shadowOffset: { width: 0, height: 12 },
    shadowOpacity: 0.35,
    shadowRadius: 24,
    elevation: 10,
  }}>
    <Text style={{ flexDirection: 'row', alignItems: 'center' }}>
      <MaterialCommunityIcons name="star-four-points" size={14} color="#FFCB57" />
      <Text style={{ color: '#FFCB57', fontSize: 13,
        fontWeight: '800', letterSpacing: 1, marginLeft: 4 }}>
        今日推荐
      </Text>
    </Text>
    <Text style={{ color: '#FFFFFF',
      fontFamily: 'Nunito-ExtraBold',
      fontSize: 28, marginTop: 12, textAlign: 'center' }}>
      开启你的创造之旅
    </Text>
    <Text style={{ color: 'rgba(255,255,255,0.7)',
      fontSize: 14, fontWeight: '500', marginTop: 8 }}>
      发现更多有趣的可能
    </Text>
  `</View>`

ClayCard（通用内容卡片）：
  `<View style={{`
    backgroundColor: '#FFFFFF',
    borderRadius: 24,
    overflow: 'hidden',
    borderWidth: 1.5,
    borderColor: 'rgba(255,255,255,0.7)',
    shadowColor: '#7C5CFC',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.15,
    shadowRadius: 20,
    elevation: 6,
  }}>
    <Image source={img}
      style={{ width: '100%', aspectRatio: 4/3,
        borderTopLeftRadius: 24, borderTopRightRadius: 24 }} />
    <View style={{ padding: 20 }}>
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <View style={{ width: 10, height: 10, borderRadius: 5,
          backgroundColor: '#5ED6A0', marginRight: 8 }} />
        <Text style={{ fontSize: 12, color: '#8B87A0',
          fontWeight: '700' }}>标签文字</Text>
      </View>
      <Text style={{ fontSize: 18, fontWeight: '800',
        color: '#2D2B3D', marginTop: 10 }}>
        卡片标题
      </Text>
      <Text style={{ fontSize: 14, color: '#8B87A0',
        fontWeight: '500', marginTop: 6, lineHeight: 20 }}>
        描述文字内容放在此处
      </Text>
    </View>
  `</View>`

ClayIconBadge（图标气泡组）：
  `<View style={{ flexDirection:'row', justifyContent:'space-around',`
    paddingHorizontal: 20, marginVertical: 16 }}>
    {items.map(item => (
      <View style={{ alignItems:'center' }}>
        <View style={{
          width: 56, height: 56, borderRadius: 20,
          backgroundColor: item.bgColor,（如 '#EDE8FF','#FFE8EE','#FFF4DD','#E0F8EC'）
          alignItems:'center', justifyContent:'center',
          borderWidth: 1.5,
          borderColor: 'rgba(255,255,255,0.7)',
          shadowColor: item.shadowColor,
          shadowOffset:{width:0,height:4},
          shadowOpacity: 0.2, shadowRadius: 8,
          elevation: 4,
        }}>
          <Ionicons name={item.icon} size={24} color={item.color} />
        </View>
        <Text style={{ marginTop: 8, fontSize: 12,
          fontWeight: '700', color: '#2D2B3D' }}>
          {item.label}
        </Text>
      </View>
    ))}
  `</View>`

ClayButton：
  // 实心主按钮
  `<Pressable style={{`
    backgroundColor: '#7C5CFC',
    borderRadius: 20,
    paddingVertical: 16, paddingHorizontal: 32,
    borderWidth: 1.5,
    borderColor: 'rgba(255,255,255,0.3)',
    shadowColor: '#5A3ED9',
    shadowOffset:{ width:0, height:6 },
    shadowOpacity: 0.3, shadowRadius: 12,
    elevation: 6,
  }}>
    <Text style={{ color:'#FFF', fontSize: 16,
      fontWeight: '800', textAlign:'center' }}>
      开始使用
    </Text>
  `</Pressable>`
  // 柔色副按钮
  `<Pressable style={{`
    backgroundColor: '#EDE8FF',
    borderRadius: 20,
    paddingVertical: 16, paddingHorizontal: 32,
    borderWidth: 1.5,
    borderColor: 'rgba(255,255,255,0.7)',
    shadowColor: '#7C5CFC',
    shadowOffset:{ width:0, height:4 },
    shadowOpacity: 0.12, shadowRadius: 8,
    elevation: 3,
  }}>
    <Text style={{ color:'#7C5CFC', fontSize: 16,
      fontWeight: '700', textAlign:'center' }}>
      了解更多
    </Text>
  `</Pressable>`

ClayDivider（黏土分隔条）：
  `<View style={{ flexDirection:'row', alignItems:'center',`
    marginVertical: 24, paddingHorizontal: 24 }}>
    <View style={{ flex:1, height:3, borderRadius:2,
      backgroundColor:'#EDE8FF' }} />
    <View style={{ width:8, height:8, borderRadius:4,
      backgroundColor:'#FFCB57', marginHorizontal: 12,
      shadowColor:'#FFCB57', shadowOffset:{width:0,height:2},
      shadowOpacity:0.3, shadowRadius:4 }} />
    <View style={{ flex:1, height:3, borderRadius:2,
      backgroundColor:'#EDE8FF' }} />
  `</View>`

底部导航：
  backgroundColor: '#FFFFFF',
  borderTopWidth: 0,（无描线，纯阴影浮起）
  shadowColor: '#7C5CFC',
  shadowOffset: { width: 0, height: -4 },
  shadowOpacity: 0.08, shadowRadius: 12,
  borderTopLeftRadius: 24, borderTopRightRadius: 24,
  图标: 填充圆润风格（Ionicons filled 系列）
  未选中: '#C5C0DB'、选中: '#7C5CFC'
  选中指示器: 图标上方小圆点
    width: 5, height: 5, borderRadius: 3,
    backgroundColor: '#7C5CFC'
  文字: fontSize: 11, fontWeight: '700'