@magmamath/students-features 1.3.26-rc.6 → 1.3.26-rc.7

package/src/features/fluency/components/fluency-solving/components/EquationContent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useRef } from 'react'
 import { View, StyleSheet, TextInput, Platform } from 'react-native'
 import {
   COLORS,
@@ -7,6 +7,7 @@ import {
   SPACING,
   Typography,
 } from '@magmamath/react-native-ui'
+import { useText } from '../../../../../i18n/i18n'
 import { useFluencySolvingPreset } from '../../../hooks/useFluencySolvingPreset'
 import { usePreventWebKeys } from '../../../hooks/usePreventWebKeys'
 import { MAX_INPUT_LENGTH } from '../../../fluency.constants'
@@ -28,6 +29,7 @@ export const EquationContent = ({
   readOnly = false,
   onChange,
 }: EquationContentProps) => {
+  const t = useText()
   const modePreset = useFluencySolvingPreset()
 
   const inputRef = useRef<TextInput>(null)
@@ -36,7 +38,7 @@ export const EquationContent = ({
   return (
     <>
       <Typography variant={HeadingVariants.H9} style={styles.cardLabel}>
-        Type your answer
+        {t('student.fluency.typeYourAnswer')}
       </Typography>
       <View style={styles.equationRow}>
         <Typography style={styles.number}>{leftOperand}</Typography>
@@ -45,7 +47,12 @@ export const EquationContent = ({
         </Typography>
         <Typography style={styles.number}>{rightOperand}</Typography>
         <Typography style={styles.equals}>=</Typography>
-        <View style={[styles.answerBox, value.length > 0 && { borderBottomColor: modePreset.colors.accent }]}>
+        <View
+          style={[
+            styles.answerBox,
+            value.length > 0 && { borderBottomColor: modePreset.colors.accent },
+          ]}
+        >
           {!readOnly ? (
             <TextInput
               ref={inputRef}
@@ -73,7 +80,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: '700',
     letterSpacing: 1.3,
-    marginBottom: SPACING[300],
+    marginBottom: SPACING[500],
     color: COLORS.NEUTRAL_7,
   },
   equationRow: {
@@ -83,20 +90,21 @@ const styles = StyleSheet.create({
     marginTop: SPACING[600],
   },
   number: {
-    fontSize: 60,
+    fontSize: 75,
     color: COLORS.NEUTRAL_10,
     fontWeight: '700',
     fontFamily: FONT_FAMILY.buenosAires,
   },
   equals: {
-    fontSize: 60,
+    fontSize: 75,
     color: COLORS.NEUTRAL_7,
     fontWeight: '700',
     fontFamily: FONT_FAMILY.buenosAires,
   },
   answerBox: {
-    width: 110,
+    width: 130,
     height: 44,
+    marginBottom: -SPACING[800],
     alignItems: 'center',
     borderBottomWidth: 8,
     borderBottomColor: COLORS.NEUTRAL_10,

package/src/features/fluency/components/fluency-solving/components/FluencySolvingProgress.tsx

@@ -1,32 +1,47 @@
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { COLORS, SPACING } from '@magmamath/react-native-ui'
-import { AttemptStatus } from '../../../fluency.constants'
+import { AttemptStatus, SESSION_LENGTH } from '../../../fluency.constants'
 import type { QuestionOutcome } from '../fluencySolving.types'
+import { FluencySolvingProgressDot } from './FluencySolvingProgressDot'
+import { useFluency } from '../../../context/FluencyContext'
+import { useUnit } from 'effector-react'
 
-type FluencySolvingProgressProps = {
-  total: number
+const GROUP_SIZE = 5
+
+type ProgressDotProps = {
+  index: number
   activeIndex: number
-  outcomes: QuestionOutcome[]
+  outcome: QuestionOutcome | undefined
+}
+
+const ProgressDot = ({ index, activeIndex, outcome }: ProgressDotProps) => {
+  if (index === activeIndex) return <FluencySolvingProgressDot />
+  if (index < activeIndex && outcome) return <View style={DOT_STYLE_BY_OUTCOME[outcome.status]} />
+  return <View style={styles.dot} />
 }
 
-export const FluencySolvingProgress = ({
-  total,
-  activeIndex,
-  outcomes,
-}: FluencySolvingProgressProps) => {
+export const FluencySolvingProgress = () => {
+  const { model } = useFluency()
+  const outcomes = useUnit(model.solving.$outcomes)
+
   return (
     <View style={styles.container}>
-      {Array.from({ length: total }).map((_, index) => {
-        if (index === activeIndex) return <View key={index} style={styles.dotActive} />
-        if (index < activeIndex) {
-          const outcome = outcomes[index]
-          return (
-            <View key={index} style={outcome ? DOT_STYLE_BY_OUTCOME[outcome.status] : styles.dot} />
-          )
-        }
-        return <View key={index} style={styles.dot} />
-      })}
+      {Array.from({ length: SESSION_LENGTH / GROUP_SIZE }, (_, groupIndex) => (
+        <View key={groupIndex} style={styles.group}>
+          {Array.from({ length: GROUP_SIZE }, (_, dotIndex) => {
+            const index = groupIndex * GROUP_SIZE + dotIndex
+            return (
+              <ProgressDot
+                key={index}
+                index={index}
+                activeIndex={outcomes.length}
+                outcome={outcomes[index]}
+              />
+            )
+          })}
+        </View>
+      ))}
     </View>
   )
 }
@@ -34,33 +49,33 @@ export const FluencySolvingProgress = ({
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    gap: SPACING[200],
+    gap: SPACING[500],
     paddingHorizontal: SPACING[600],
     paddingVertical: 14,
     justifyContent: 'center',
+    alignItems: 'center',
+  },
+  group: {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center',
   },
   dot: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
+    width: 10,
+    height: 10,
+    borderRadius: 5,
     backgroundColor: COLORS.NEUTRAL_4,
   },
-  dotActive: {
-    width: 34,
-    height: 12,
-    backgroundColor: COLORS.NEUTRAL_10,
-    borderRadius: 9999,
-  },
   dotCorrect: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
+    width: 10,
+    height: 10,
+    borderRadius: 5,
     backgroundColor: COLORS.PRIMARY_GREEN,
   },
   dotWrong: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
+    width: 10,
+    height: 10,
+    borderRadius: 5,
     backgroundColor: COLORS.PRIMARY_RED,
   },
 })

package/src/features/fluency/components/fluency-solving/components/FluencySolvingProgressDot.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect } from 'react'
+import { View, StyleSheet } from 'react-native'
+import Animated, {
+  cancelAnimation,
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated'
+import { COLORS } from '@magmamath/react-native-ui'
+
+const DOT_SIZE = 16
+const RING_SPREAD_MIN = 4
+const RING_SPREAD_MAX = 8
+const RING_SIZE = DOT_SIZE + RING_SPREAD_MAX * 2
+const RING_SCALE_MIN = (DOT_SIZE + RING_SPREAD_MIN * 2) / RING_SIZE
+const RING_OPACITY_MIN = 0.06
+const RING_OPACITY_MAX = 0.12
+const PULSE_DURATION_MS = 800
+
+export const FluencySolvingProgressDot = () => {
+  const progress = useSharedValue(0)
+
+  useEffect(() => {
+    progress.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: PULSE_DURATION_MS, easing: Easing.inOut(Easing.ease) }),
+        withTiming(0, { duration: PULSE_DURATION_MS, easing: Easing.inOut(Easing.ease) })
+      ),
+      -1,
+      false
+    )
+    return () => cancelAnimation(progress)
+  }, [progress])
+
+  const ringStyle = useAnimatedStyle(() => {
+    const scale = interpolate(progress.value, [0, 1], [RING_SCALE_MIN, 1])
+    const opacity = interpolate(progress.value, [0, 1], [RING_OPACITY_MAX, RING_OPACITY_MIN])
+    return {
+      opacity,
+      transform: [{ scale }],
+    }
+  }, [progress])
+
+  return (
+    <View style={styles.dot}>
+      <Animated.View style={[styles.ring, ringStyle]} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  dot: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: DOT_SIZE / 2,
+    backgroundColor: COLORS.NEUTRAL_10,
+  },
+  ring: {
+    position: 'absolute',
+    top: -RING_SPREAD_MAX,
+    left: -RING_SPREAD_MAX,
+    width: RING_SIZE,
+    height: RING_SIZE,
+    borderRadius: RING_SIZE / 2,
+    backgroundColor: COLORS.NEUTRAL_10,
+  },
+})

package/src/features/fluency/components/matrix/components/CellTooltip.tsx

@@ -28,13 +28,13 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 13,
-    lineHeight: 16,
     color: COLORS.NEUTRAL_9,
     textAlign: 'center',
   },
   arrow: {
     width: 0,
     height: 0,
+    marginTop: -4,
     borderLeftWidth: 9,
     borderRightWidth: 9,
     borderTopWidth: 12,

package/src/features/fluency/components/matrix/components/MatrixCell.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { Pressable, View, Text, StyleSheet } from 'react-native'
-import { BORDER_RADIUS, COLORS, SPACING } from '@magmamath/react-native-ui'
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
 import { getMasteryLevelByBox } from '../../../fluency.helpers'
 import { FluencyMasteryLevel } from '../../../fluency.constants'
 import { StarFillIcon } from '../../../assets/StarFillIcon'
@@ -13,7 +14,13 @@ type MatrixCellProps = Omit<GridCell, 'label'> & {
   tooltipLabel: string | null
 }
 
-export const MatrixCell = ({ label, box, isHeader, levelColors, tooltipLabel }: MatrixCellProps) => {
+export const MatrixCell = ({
+  label,
+  box,
+  isHeader,
+  levelColors,
+  tooltipLabel,
+}: MatrixCellProps) => {
   const [isActive, setIsActive] = useState(false)
   const masteryLevel = box ? getMasteryLevelByBox(box) : null
   const isMastered = masteryLevel === FluencyMasteryLevel.MASTERED
@@ -32,9 +39,13 @@ export const MatrixCell = ({ label, box, isHeader, levelColors, tooltipLabel }:
   return (
     <View style={[styles.wrapper, showTooltip && styles.wrapperActive]}>
       {showTooltip && (
-        <View style={styles.tooltipContainer} pointerEvents="none">
+        <Animated.View
+          entering={FadeIn.duration(200)}
+          exiting={FadeOut.duration(200)}
+          style={[styles.tooltipContainer, { pointerEvents: 'none' }]}
+        >
           <CellTooltip label={tooltipLabel} />
-        </View>
+        </Animated.View>
       )}
       <Pressable
         style={[styles.cell, { backgroundColor: bgColor }]}
@@ -70,16 +81,18 @@ const styles = StyleSheet.create({
   },
   tooltipContainer: {
     position: 'absolute',
-    bottom: '100%',
+    bottom: '80%',
     left: 0,
     right: 0,
     alignItems: 'center',
     paddingBottom: SPACING[50],
+    zIndex: 1,
   },
   headerText: {
     fontSize: 12,
     fontWeight: '600',
-    color: COLORS.NEUTRAL_8,
+    color: COLORS.NEUTRAL_2,
+    fontFamily: FONT_FAMILY.buenosAires,
   },
   symbolText: {
     fontSize: 24,

package/src/features/fluency/components/select-math-operator/ProgressBar.tsx

@@ -8,6 +8,7 @@ import {
   SPACING,
   Typography,
 } from '@magmamath/react-native-ui'
+import { ProgressBarSparkles } from './ProgressBarSparkles'
 
 const PRIMARY_COLOR_MAP: Record<SelectOptionColor, string> = {
   [SelectOptionColor.GREEN]: COLORS.PRIMARY_GREEN,
@@ -20,22 +21,38 @@ const PRIMARY_COLOR_MAP: Record<SelectOptionColor, string> = {
   [SelectOptionColor.SUNSET]: COLORS.PRIMARY_RED,
 }
 
+const SPARKLE_COLOR_MAP: Record<SelectOptionColor, string> = {
+  [SelectOptionColor.GREEN]: COLORS.GREEN_3,
+  [SelectOptionColor.ORANGE]: COLORS.ORANGE_3,
+  [SelectOptionColor.BLUE]: COLORS.BLUE_3,
+  [SelectOptionColor.RED]: COLORS.RED_3,
+  [SelectOptionColor.YELLOW]: COLORS.YELLOW_3,
+  [SelectOptionColor.PURPLE]: COLORS.PURPLE_3,
+  [SelectOptionColor.GREY]: COLORS.NEUTRAL_4,
+  [SelectOptionColor.SUNSET]: COLORS.RED_3,
+}
+
 export type ProgressBarProps = {
   progress: number
   color: SelectOptionColor
 }
 
 export const ProgressBar = ({ progress, color = SelectOptionColor.GREEN }: ProgressBarProps) => {
-  const normalized = Math.round(Math.min(100, Math.max(0, progress)))
-  const fillColor = PRIMARY_COLOR_MAP[color]
-  const textColor = PRIMARY_COLOR_MAP[color]
+  const progressRounded = Math.round(Math.min(100, Math.max(0, progress)))
+  const variantColor = PRIMARY_COLOR_MAP[color]
+  const isComplete = progressRounded === 100
   return (
     <View style={styles.container}>
-      <View style={styles.track}>
-        <View style={[styles.fill, { backgroundColor: fillColor, width: `${normalized}%` }]} />
+      <View style={styles.trackWrapper}>
+        <View style={styles.track}>
+          <View
+            style={[styles.fill, { backgroundColor: variantColor, width: `${progressRounded}%` }]}
+          />
+        </View>
+        {isComplete && <ProgressBarSparkles color={SPARKLE_COLOR_MAP[color]} />}
       </View>
-      <Typography variant={HeadingVariants.H10} style={{ color: textColor }}>
-        {normalized}%
+      <Typography variant={HeadingVariants.H10} style={{ color: variantColor }}>
+        {progressRounded}%
       </Typography>
     </View>
   )
@@ -48,8 +65,10 @@ const styles = StyleSheet.create({
     gap: SPACING[200],
     alignItems: 'center',
   },
-  track: {
+  trackWrapper: {
     flex: 1,
+  },
+  track: {
     height: 18,
     backgroundColor: COLORS.NEUTRAL_3,
     borderRadius: BORDER_RADIUS[450],

package/src/features/fluency/components/select-math-operator/ProgressBarSparkles.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect } from 'react'
+import { StyleSheet } from 'react-native'
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated'
+import { SparkleIcon } from '../../assets/SparkleIcon'
+
+// QUICK easing from Figma ≈ cubic-bezier(0.2, 0, 0, 1)
+const QUICK = Easing.bezier(0.2, 0, 0, 1)
+
+// Hold duration at End state before dissolving back to Start
+const END_HOLD_MS = 800
+
+type SparkleItemConfig = {
+  leftPercent: number
+  topOffset: number
+  size: number
+  triggerDelay: number
+  appearDuration: number
+  dissolveDuration: number
+}
+
+// Positions derived from Figma (15,73,87,135,204 px within ~230 px container)
+// Timing values from Figma interaction table
+const SPARKLE_CONFIGS: SparkleItemConfig[] = [
+  { leftPercent: 6.5, topOffset: -3, size: 14, triggerDelay: 550, appearDuration: 868, dissolveDuration: 744 },
+  { leftPercent: 31.7, topOffset: 7, size: 14, triggerDelay: 550, appearDuration: 868, dissolveDuration: 744 },
+  { leftPercent: 37.8, topOffset: -5, size: 14, triggerDelay: 250, appearDuration: 744, dissolveDuration: 868 },
+  { leftPercent: 58.7, topOffset: 5, size: 20, triggerDelay: 50, appearDuration: 868, dissolveDuration: 868 },
+  { leftPercent: 88.7, topOffset: -5, size: 14, triggerDelay: 250, appearDuration: 744, dissolveDuration: 868 },
+]
+
+type SparkleItemProps = {
+  config: SparkleItemConfig
+  color: string
+}
+
+const SparkleItem = ({ config, color }: SparkleItemProps) => {
+  const loop = useSharedValue(0)
+
+  useEffect(() => {
+    // Loop value: 0 = Start (invisible), 1 = End (visible), 2 = dissolved back to Start
+    // Cycle: wait → SMART_ANIMATE to End → hold → DISSOLVE back → instant reset → repeat
+    loop.value = withRepeat(
+      withSequence(
+        withDelay(config.triggerDelay, withTiming(1, { duration: config.appearDuration, easing: QUICK })),
+        withDelay(END_HOLD_MS, withTiming(2, { duration: config.dissolveDuration, easing: QUICK })),
+        withTiming(0, { duration: 0 })
+      ),
+      -1,
+      false
+    )
+    return () => cancelAnimation(loop)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const v = loop.value
+    if (v <= 1) {
+      // SMART_ANIMATE phase: scale + rotation morph from Start → End
+      return {
+        opacity: v,
+        transform: [{ scale: v }, { rotate: `${(-90 + v * 90).toFixed(1)}deg` }],
+      }
+    }
+    // DISSOLVE phase: fade out only, shape stays at End
+    return {
+      opacity: 2 - v,
+      transform: [{ scale: 1 }, { rotate: '0deg' }],
+    }
+  }, [loop])
+
+  return (
+    <Animated.View
+      style={[
+        styles.sparkle,
+        animatedStyle,
+        {
+          left: `${config.leftPercent}%`,
+          top: config.topOffset,
+          width: config.size,
+          height: config.size,
+        },
+      ]}
+    >
+      <SparkleIcon size={config.size} color={color} />
+    </Animated.View>
+  )
+}
+
+export type ProgressBarSparklesProps = {
+  color: string
+}
+
+export const ProgressBarSparkles = ({ color }: ProgressBarSparklesProps) => (
+  <>
+    {SPARKLE_CONFIGS.map((config, index) => (
+      <SparkleItem key={index} config={config} color={color} />
+    ))}
+  </>
+)
+
+const styles = StyleSheet.create({
+  sparkle: {
+    position: 'absolute',
+  },
+})

package/src/features/fluency/components/select-math-operator/SelectMathOperator.tsx

@@ -65,6 +65,7 @@ const styles = StyleSheet.create({
   symbol: {
     fontSize: 32,
     fontWeight: '100',
+    color: COLORS.NEUTRAL_9,
   },
   symbolSelected: {
     color: COLORS.NEUTRAL_1,

package/src/features/fluency/components/session-results/FluencySessionResults.tsx

@@ -15,6 +15,7 @@ import {
 } from '@magmamath/react-native-ui'
 import { useUnit } from 'effector-react'
 import { CloseIcon } from '@magmamath/students-features'
+import { useText } from '../../../../i18n/i18n'
 import { useFluency } from '../../context/FluencyContext'
 import { AttemptStatus } from '../../fluency.constants'
 import {
@@ -27,23 +28,26 @@ import { SnurrisnurrBg } from '../../assets/SnurrisnurrBg'
 import { TrophyBg } from '../../assets/TrophyBg'
 
 type FluencySessionResultsProps = {
-  studentName: string
   onEndModalPress?: () => void
   onClosePress?: () => void
 }
 
 export const FluencySessionResults = ({
-  studentName,
   onClosePress,
   onEndModalPress,
 }: FluencySessionResultsProps) => {
   const [isOpen, setIsOpen] = useState(true)
+  const t = useText()
   const { model } = useFluency()
-  const { outcomes, completedDurationMs } = useUnit({
+  const { outcomes, completedDurationMs, isSessionComplete, config } = useUnit({
     outcomes: model.solving.$outcomes,
     completedDurationMs: model.solving.$completedDurationMs,
+    isSessionComplete: model.solving.$isSessionComplete,
+    config: model.$config,
   })
 
+  if (!isSessionComplete) return null
+
   const correctCount = outcomes.filter((o) => o.status === AttemptStatus.CORRECT).length
   const maxStreak = calculateMaxStreak(outcomes)
   const durationDisplay = formatSessionDuration(completedDurationMs)
@@ -52,10 +56,10 @@ export const FluencySessionResults = ({
     <Modal visible={isOpen} transparent animationType="fade">
       <View style={styles.overlay}>
         <View style={styles.container}>
-          <View style={styles.snurrisnurrLayer} pointerEvents="none">
+          <View style={[styles.snurrisnurrLayer, { pointerEvents: 'none' }]}>
             <SnurrisnurrBg />
           </View>
-          <View style={styles.trophyLayer} pointerEvents="none">
+          <View style={[styles.trophyLayer, { pointerEvents: 'none' }]}>
             <TrophyBg />
           </View>
           <View style={styles.close}>
@@ -70,20 +74,22 @@ export const FluencySessionResults = ({
           </View>
 
           <View style={styles.titleContainer}>
-            <Text style={styles.title}>Checked and done</Text>
-            <Text style={styles.subtitle}>Nice job {studentName}!</Text>
+            <Text style={styles.title}>{t('student.fluency.resultTitle')}</Text>
+            <Text style={styles.subtitle}>
+              {t('student.fluency.resultSubtitle', { name: config?.name ?? '' })}
+            </Text>
           </View>
 
           <View style={styles.resultsContainer}>
             <SessionStatCard
               value={String(correctCount)}
-              label="Wow there!"
+              label={t('student.fluency.resultCorrectCardLabel')}
               icon={<CorrectIcon size={30} color={COLORS.NEUTRAL_1} />}
               color={COLORS.PRIMARY_GREEN}
             />
             <SessionStatCard
               value={durationDisplay}
-              label="Fast!"
+              label={t('student.fluency.fast')}
               icon={
                 <View style={styles.timerIconOffset}>
                   <TimerIcon size={30} color={COLORS.NEUTRAL_1} />
@@ -93,7 +99,7 @@ export const FluencySessionResults = ({
             />
             <SessionStatCard
               value={String(maxStreak)}
-              label="Nice streak!"
+              label={t('student.fluency.resultStreakCardLabel')}
               icon={<FlameIcon size={30} color={COLORS.NEUTRAL_1} />}
               color={COLORS.PRIMARY_ORANGE}
             />
@@ -110,7 +116,7 @@ export const FluencySessionResults = ({
               colorScheme={ButtonColor.YELLOW}
               raiseLevel={6}
             >
-              CLAIM PROGRESS
+              {t('student.fluency.claimProgress')}
             </Button>
           </View>
         </View>

package/src/features/fluency/components/start-banner/StartBanner.tsx

@@ -21,10 +21,12 @@ import { FlashIcon } from '../../assets/FlashIcon'
 const GradientBackground = Platform.select({
   web: () => (
     <View
-      pointerEvents="none"
       style={[
         StyleSheet.absoluteFill,
-        { backgroundImage: 'linear-gradient(90deg, #FFFFFF 23.1%, #FFF7E9 81.73%)' } as any,
+        {
+          backgroundImage: 'linear-gradient(90deg, #FFFFFF 23.1%, #FFF7E9 81.73%)',
+          pointerEvents: 'none',
+        } as any,
       ]}
     />
   ),
@@ -36,8 +38,7 @@ const GradientBackground = Platform.select({
         locations={[0.231, 0.8173]}
         start={{ x: 0, y: 0 }}
         end={{ x: 1, y: 0 }}
-        style={StyleSheet.absoluteFill}
-        pointerEvents="none"
+        style={[StyleSheet.absoluteFill, { pointerEvents: 'none' }]}
       />
     )
   },
@@ -49,7 +50,9 @@ export const StartBanner = () => {
 
   return (
     <View style={styles.container}>
-      <GradientBackground />
+      <View style={styles.gradientClip}>
+        <GradientBackground />
+      </View>
 
       <View style={styles.buttonContainer}>
         <View style={styles.buttonGroup}>
@@ -97,6 +100,11 @@ const styles = StyleSheet.create({
     borderRadius: BORDER_RADIUS[400],
     ...SHADOWS[1],
   },
+  gradientClip: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: BORDER_RADIUS[400],
+    overflow: 'hidden',
+  },
   buttonContainer: {
     alignItems: 'flex-start',
     zIndex: 4,
@@ -112,9 +120,10 @@ const styles = StyleSheet.create({
   },
   buttonSubtitle: {
     fontSize: 13,
-    fontWeight: '400',
+    fontWeight: '700',
     color: COLORS.BLACK,
     fontFamily: FONT_FAMILY.buenosAires,
+    textTransform: 'uppercase',
   },
   flashcard: {
     position: 'absolute',