GHHub/src/views/reservation/NameCard.jsx

import { observer } from "mobx-react";
import { Row, Col, Space, Table, Typography, List, Watermark } from 'antd';
import { useStore } from '@/stores/StoreContext.js';

const { Title } = Typography;

function NameCard() {
  const { reservationStore } = useStore();
  const { meetAndGreet } = reservationStore;

  return (
    <Watermark content={['Global Highlights', 'Discovery Your Way!']}>
    <Space direction="vertical" style={{ width: '100%' }}>
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
          <Title level={1}>{meetAndGreet.customerNames}</Title>
        </Col>
      </Row>
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
          <Title level={1}>{meetAndGreet.pax}</Title>
        </Col>
      </Row>
    </Space>
    </Watermark>
  );
}

export default observer(NameCard);