The hydration errors is very hard to debug because the error message doesn't specify where the is error. What you can do is divide and conquer. Comment out half of your codes and narrow down until you find the part that is causing the hydration error. There is no better way.
Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error
<Row> in <Card.Text><Card.Text> will generate <p> whereas <Row> will generate <div>.
Therefore, hydration error will occur when you put <div> inside <p>.
// This will cause hydration error.
<Card.Text>
<Row>{quote}</Row>
</Card.Text>