SectionHero

const dataMedia = {
    alt: "title-hình",
    ratio: "16/9",
    src: "https://homepage.momocdn.net/img/momo-upload-api-210824105517-637653993173728505.jpg",
    youtubeId: "nGbpiYDca4M",
    type: null,
};

import { HeroSection } from "@momo-webplatform/mobase";

const DATA_DUMMY: DATA_DUMMY_PROPS = {
  template: 1,
  idSection: "hero-1",
  dataHeading: {
    title:
      "Mua mọi thẻ game trên <span class='text-pink-500'>Napthengay.vn</span> thanh toán tiện lợi qua Ví MoMo",
    tagline: "MUA THẺ GAME",
    description:
      "Website bán thẻ game hàng đầu Việt Nam với tất cả các loại thẻ game của các Nhà phát hành game hot nhất tại Việt Nam như Garena, Zing, Gate, VCoin,..",
    tagHeading: "h1",
    sizeHeading: "large", 
  },
  dataFeatures: [
    {
      name: "Đủ mọi loại thẻ, đa dạng mệnh giá",
    },
    {
      name: "Chiết khấu cao 2.5% và nhiều ưu đãi hàng tháng",
    },
    {
      name: "Thanh toán nhanh mọi lúc mọi nơi",
    },
    {
      name: "Bảo mật thông tin chuẩn quốc tế với Ví MoMo",
    },
  ],
  dataButtons: {
    isFullInMobile: true,
    buttons: [
      {
        btnName: "Nạp ngay",
        dialogQrProps: {
          qrLink: "https://page.momoapp.vn/hhUEFfcGDcf",
          title: "Nạp tiền ngay",
          shortTitle: "Quét mã để tải ứng dụng hoặc Nạp tiền ngay",
        },
      },
      {
        btnName: "Xem chi tiết",
        action: "https://www.momo.vn/gioi-thieu-momo",
        newTab: true,
        variant: "secondary",
      },
    ],
  },
  dataStats: [
    {
      value: 1, 
      suffix: "+",
      unit: "ngàn",
      description: "Dự án đã được gây quỹ thành công",
    },
    {
      value: 79, 
      suffix: "+",
      unit: "tỷ",
      description: "Số tiền quyên góp",
    },
  ],
  dataMedia: {
    alt: "title-hình",
    ratio: "1/1",
    src: "https://homepage.momocdn.net/img/momo-upload-api-240515172455-638513906950378103.png",
  },
};
 
function HeroSectionDemo() {
  return (
    <>
      <HeroSection
        idSection={DATA_DUMMY?.idSection}
        template={DATA_DUMMY?.template}
        dataHeading={DATA_DUMMY?.dataHeading} 
        dataButtons={DATA_DUMMY?.dataButtons}
        dataFeatures={DATA_DUMMY?.dataFeatures}
        dataStats={DATA_DUMMY?.dataStats}
        dataMedia={DATA_DUMMY?.dataMedia}
      />
    </>
  );
}
 
export default HeroSectionDemo;

****
 
interface HeadingBlockProps {
  tagline?: string ; // The tagline of the heading.
  title?: string; // The title of the heading.
  description?: string; // The description of the heading.
  tagHeading?: "h1" | "h2"; // HTML Tag heading. Default is "h2". 
  align?: "center" | "left" | "right"; // Align the heading. Default is "center".
  sizeHeading?: "small" | "large"; // Size of the heading. Default is "small".
  className?: string; // CSS class to be appended to the root element heading.
}
 
interface HeroContentListFeatureProps {
  name?: string; // The name of the feature.
  image?: string; // The image of the feature.
}
 
 
interface ButtonsBlockProps {
  className?: string; // CSS class to be appended to the root element.
  align?: "center" | "left" | "right"; // ALign the button.
  isFullInMobile?: boolean; // Button is full width in mobile.
  buttons?: dataButton[];  // Button group data.
}
 
interface dataButton extends ActionButtonProps {
  btnName?: string; // Button name.
  // ... ActionButtonProps  
}
 
interface HeroContentListStats {
  value?: number; // Value of the stats.  
  suffix?: string; // Suffix of the stats.
  unit?: string; // Unit of the stats.
  description?: string; // Description of the stats.  
}
 
interface HeroContentMediaProps {
  src: string; // The source of the media.
  ratio?: string;  // The ratio of the media.".
  onClickFC?: () => void; // The function to be called when the media is clicked.
  className?: string; // CSS class to be appended to the root element.
  youtubeId?: string;  // The youtube id of the media.
  type?: number | null; // The type of the media.
  alt?: string; // The alt of the media.
}