import { Heading, HStack, Text, VStack } from '@cdx-ui/components';

export function HeroSection() {
  return (
    <VStack className="gap-3 py-1">
      <VStack className="gap-1">
        <HStack space="sm" className="items-center">
          <Text size="md">Deposit Checking</Text>
          <Text size="sm" className="text-content-secondary">
            ···· 4642
          </Text>
        </HStack>
        <HStack className="items-start justify-between">
          <Heading size="xl">$6,214.88</Heading>
        </HStack>
        <Text size="sm" className="text-content-secondary">
          Available balance
        </Text>
      </VStack>
    </VStack>
  );
}