Figma to Production Code with 99% Accuracy

import { CreditCard,
  TransactionRow,
  BottomNav } from '@component-hub';
import { gradients } from
  '@styles/gradients';
import AppleIcon from
  '@icons/ic_apple.svg';

export default function HomeScreen() {
  return (
    <SafeAreaView>
      <Header
        user="John Doe"
        balance="$12,458.50" />

      <CreditCard
        type="VISA"
        balance="$423.812.00"
        background={gradients.visaPrimary}
      />

      <Section title="Recent Transactions">
        <TransactionRow
          icon={<AppleIcon />}
          title="Apple Invoice"
          amount="-$20.00" />
      </Section>

      <BottomNav active="Home" />
    </SafeAreaView>
  );
}