biancassantos

type NumberInfoProps = {
  number: string;
  info: string;
}

function NumberInfoItem({ number, info }: NumberInfoProps) {
  return (
    <div className="max-w-[150px] text-center sm:text-start">
      <span className="text-3xl font-tilt text-blue mb-2">{number}</span>
      <br/>

biancassantos

type ValueCardProps = {
  img: string;
  title: string;
  text: string;
}

function ValueCard({ img, title, text }: ValueCardProps) {
  return (
    <article className="flex flex-col items-center gap-4 bg-white p-5 rounded-[5px] w-full max-w-[300px] h-full max-h-[280px] shadow-xs">
      <img src={img} alt={`ícone de ${title}`} className="size-15 mb-1" />

biancassantos

import ValueCard from "./components/ValueCard";
import NumberInfoItem from "./components/NumberInfoItem";
import handAndPaw from "@/assets/imgs/sobre-img-1.jpg";
import adoptMeDog from "@/assets/imgs/sobre-img-2.jpg";
import responsabilidade from "@/assets/icons/responsabilidade.png";
import amor from "@/assets/icons/amor.png";
import honestidade from "@/assets/icons/honestidade.png";

function SobrePage() {
  return (