diff --git a/packages/flat-components/src/assets/buttons/create-small.svg b/packages/flat-components/src/assets/buttons/create-small.svg
new file mode 100644
index 00000000000..67fe9dc1b7a
--- /dev/null
+++ b/packages/flat-components/src/assets/buttons/create-small.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/packages/flat-components/src/assets/buttons/create.svg b/packages/flat-components/src/assets/buttons/create.svg
new file mode 100644
index 00000000000..7d95216dc4e
--- /dev/null
+++ b/packages/flat-components/src/assets/buttons/create.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/packages/flat-components/src/assets/buttons/join-small.svg b/packages/flat-components/src/assets/buttons/join-small.svg
new file mode 100644
index 00000000000..06b5008eba8
--- /dev/null
+++ b/packages/flat-components/src/assets/buttons/join-small.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/packages/flat-components/src/assets/buttons/join.svg b/packages/flat-components/src/assets/buttons/join.svg
new file mode 100644
index 00000000000..9d048ee8dd1
--- /dev/null
+++ b/packages/flat-components/src/assets/buttons/join.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/packages/flat-components/src/assets/buttons/schedule-small.svg b/packages/flat-components/src/assets/buttons/schedule-small.svg
new file mode 100644
index 00000000000..aa7ccebce99
--- /dev/null
+++ b/packages/flat-components/src/assets/buttons/schedule-small.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/packages/flat-components/src/assets/buttons/schedule.svg b/packages/flat-components/src/assets/buttons/schedule.svg
new file mode 100644
index 00000000000..3a964ee0549
--- /dev/null
+++ b/packages/flat-components/src/assets/buttons/schedule.svg
@@ -0,0 +1,17 @@
+
+
\ No newline at end of file
diff --git a/packages/flat-components/src/components/HomePageHeroButton/HomePageHeroButton.stories.tsx b/packages/flat-components/src/components/HomePageHeroButton/HomePageHeroButton.stories.tsx
new file mode 100644
index 00000000000..71b3a9b2009
--- /dev/null
+++ b/packages/flat-components/src/components/HomePageHeroButton/HomePageHeroButton.stories.tsx
@@ -0,0 +1,53 @@
+import { Meta, Story } from "@storybook/react";
+import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
+import React from "react";
+import { HomePageHeroButtons, HomePageHeroButtonsProps } from ".";
+
+const storyMeta: Meta = {
+ title: "Components/HomePageHeroButtons",
+ component: HomePageHeroButtons,
+ parameters: {
+ backgrounds: {
+ default: "flat",
+ values: [
+ {
+ name: "flat",
+ value: "#F3F6F9",
+ },
+ ],
+ },
+ viewport: {
+ viewports: {
+ ...MINIMAL_VIEWPORTS,
+ tablet2: {
+ name: "Large Tablet",
+ styles: { width: "659px", height: "1000px" },
+ },
+ },
+ },
+ },
+};
+
+export default storyMeta;
+
+export const Overview: Story = args => (
+
+);
+
+export const TabletScreen: Story = args => (
+
+);
+TabletScreen.parameters = {
+ viewport: {
+ defaultViewport: "tablet2",
+ },
+};
+
+export const SmallScreen: Story = args => (
+
+);
+SmallScreen.parameters = {
+ viewport: {
+ defaultViewport: "mobile1",
+ },
+};
diff --git a/packages/flat-components/src/components/HomePageHeroButton/index.tsx b/packages/flat-components/src/components/HomePageHeroButton/index.tsx
new file mode 100644
index 00000000000..7898180a7b8
--- /dev/null
+++ b/packages/flat-components/src/components/HomePageHeroButton/index.tsx
@@ -0,0 +1,77 @@
+import "./style.less";
+import React from "react";
+import classNames from "classnames";
+import { Button } from "antd";
+
+type HomePageHeroButtonType = "join" | "create" | "schedule";
+
+interface HomePageHeroButtonBaseProps {
+ type: HomePageHeroButtonType;
+ longText: string;
+ shortText: string;
+ onClick?: () => void;
+}
+
+const HomePageHeroButtonBase: React.FC = ({
+ type,
+ longText,
+ shortText,
+ onClick,
+}) => {
+ return (
+
+ );
+};
+
+export interface HomePageHeroButtonProps {
+ type: HomePageHeroButtonType;
+ onClick?: () => void;
+}
+
+const Presets: Record<
+ HomePageHeroButtonType,
+ Pick
+> = {
+ join: {
+ longText: "加入房间",
+ shortText: "加入",
+ },
+ create: {
+ longText: "创建房间",
+ shortText: "创建",
+ },
+ schedule: {
+ longText: "预定房间",
+ shortText: "预定",
+ },
+};
+
+export const HomePageHeroButton: React.FC = ({ type, onClick }) => {
+ return ;
+};
+
+export interface HomePageHeroButtonsProps {
+ onJoin?: () => void;
+ onCreate?: () => void;
+ onSchedule?: () => void;
+}
+
+export const HomePageHeroButtons: React.FC = ({
+ onJoin,
+ onCreate,
+ onSchedule,
+}) => {
+ return (
+
+
+
+
+
+ );
+};
diff --git a/packages/flat-components/src/components/HomePageHeroButton/style.less b/packages/flat-components/src/components/HomePageHeroButton/style.less
new file mode 100644
index 00000000000..2d9f3fcba8d
--- /dev/null
+++ b/packages/flat-components/src/components/HomePageHeroButton/style.less
@@ -0,0 +1,80 @@
+.home-page-hero-buttons {
+ display: flex;
+ align-items: center;
+}
+
+.home-page-hero-button {
+ height: 72px !important;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 8px;
+ background-color: white;
+ font-size: 16px;
+ border-color: white;
+ margin-right: 16px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ .icon {
+ display: inline-block;
+ width: 44px;
+ height: 44px;
+ &.join {
+ background-image: url(../../assets/buttons/join.svg);
+ }
+ &.create {
+ background-image: url(../../assets/buttons/create.svg);
+ }
+ &.schedule {
+ background-image: url(../../assets/buttons/schedule.svg);
+ }
+ @media screen and (max-width: 660px) {
+ width: 24px;
+ height: 24px;
+ &.join {
+ background-image: url(../../assets/buttons/join-small.svg);
+ }
+ &.create {
+ background-image: url(../../assets/buttons/create-small.svg);
+ }
+ &.schedule {
+ background-image: url(../../assets/buttons/schedule-small.svg);
+ }
+ }
+ }
+
+ .text {
+ font-size: 16px;
+ font-weight: 400;
+ color: #444e60;
+ padding-left: 14px;
+ padding-right: 25px;
+
+ &.short {
+ display: none;
+ }
+
+ @media screen and (max-width: 660px) {
+ font-size: 14px;
+ padding-left: 6px;
+ padding-right: 8px;
+
+ &.long {
+ display: none;
+ }
+ &.short {
+ display: inline;
+ }
+ }
+ }
+
+ @media screen and (max-width: 660px) {
+ flex: 1;
+ height: 44px !important;
+ border-radius: 9999px;
+ margin-right: 8px;
+ }
+}