Initial commit

src/components/BackButton.css

@@ -0,0 +1,36 @@
+.back-button {
+  position: relative;
+  width: 395px;
+  height: 112px;
+  background: url("../assets/buttons/back-button.png") center center no-repeat;
+  background-size: 100% 100%;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.back-button:hover {
+  transform: scale(1.02);
+  opacity: 0.9;
+}
+
+.back-button:active {
+  transform: scale(0.98);
+}
+
+.back-button-text {
+  width: 99px;
+  height: 49px;
+  overflow-wrap: break-word;
+  color: rgba(0, 45, 93, 1);
+  font-size: 51px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 51px;
+}

src/components/BackButton.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "./BackButton.css";
+
+interface BackButtonProps {
+  text: string;
+  onClick?: () => void;
+}
+
+const BackButton: React.FC<BackButtonProps> = ({ text, onClick }) => {
+  return (
+    <div className="back-button" onClick={onClick}>
+      <span className="back-button-text">{text}</span>
+    </div>
+  );
+};
+
+export default BackButton;

src/components/ConfirmButton.css

@@ -0,0 +1,37 @@
+.confirm-button {
+  position: relative;
+  width: 395px;
+  height: 112px;
+  background: url("../assets/buttons/confirm-button.png") center center
+    no-repeat;
+  background-size: 100% 100%;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.confirm-button:hover {
+  transform: scale(1.02);
+  opacity: 0.9;
+}
+
+.confirm-button:active {
+  transform: scale(0.98);
+}
+
+.confirm-button-text {
+  width: 151px;
+  height: 49px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 51px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 51px;
+}

src/components/ConfirmButton.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "./ConfirmButton.css";
+
+interface ConfirmButtonProps {
+  text: string;
+  onClick?: () => void;
+}
+
+const ConfirmButton: React.FC<ConfirmButtonProps> = ({ text, onClick }) => {
+  return (
+    <div className="confirm-button" onClick={onClick}>
+      <span className="confirm-button-text">{text}</span>
+    </div>
+  );
+};
+
+export default ConfirmButton;

src/components/DecorLine.css

@@ -0,0 +1,4 @@
+.decor-line {
+  margin-top: 3%;
+  margin-bottom: 3%;
+}

src/components/DecorLine.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import "./DecorLine.css";
+import decorLineImg from "../assets/redstrip.png";
+
+const DecorLine: React.FC = () => {
+  return (
+    <img className="decor-line" src={decorLineImg} alt="decorative line" />
+  );
+};
+
+export default DecorLine;

src/components/LongButton.css

@@ -0,0 +1,34 @@
+.long-button {
+  position: relative;
+  width: 594px;
+  height: 108px;
+  background: url("../assets/buttons/button.png") center center no-repeat;
+  background-size: 100% 100%;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.long-button:hover {
+  transform: translateY(-2px);
+}
+
+.long-button:active {
+  transform: translateY(0);
+}
+
+.long-button-text {
+  height: 48px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 49px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 43px;
+}

src/components/LongButton.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "./LongButton.css";
+
+interface LongButtonProps {
+  text: string;
+  onClick?: () => void;
+}
+
+const LongButton: React.FC<LongButtonProps> = ({ text, onClick }) => {
+  return (
+    <div className="long-button" onClick={onClick}>
+      <span className="long-button-text">{text}</span>
+    </div>
+  );
+};
+
+export default LongButton;

src/components/LongButtonLoading.css

@@ -0,0 +1,35 @@
+.long-button-loading {
+  position: relative;
+  width: 594px;
+  height: 108px;
+  background: url("../assets/buttons/button-loading.png") center center
+    no-repeat;
+  background-size: 100% 100%;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.long-button-loading:hover {
+  transform: translateY(-2px);
+}
+
+.long-button-loading:active {
+  transform: translateY(0);
+}
+
+.long-button-loading-text {
+  height: 48px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 49px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 43px;
+}

src/components/LongButtonLoading.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "./LongButtonLoading.css";
+
+interface LongButtonProps {
+  text: string;
+  onClick?: () => void;
+}
+
+const LongButtonLoading: React.FC<LongButtonProps> = ({ text, onClick }) => {
+  return (
+    <div className="long-button-loading" onClick={onClick}>
+      <span className="long-button-loading-text">{text}</span>
+    </div>
+  );
+};
+
+export default LongButtonLoading;

src/components/WaitButton.css

@@ -0,0 +1,36 @@
+.wait-button {
+  position: relative;
+  width: 395px;
+  height: 112px;
+  background: url("../assets/buttons/wait-button.png") center center no-repeat;
+  background-size: 100% 100%;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.wait-button:hover {
+  transform: scale(1.02);
+  opacity: 0.9;
+}
+
+.wait-button:active {
+  transform: scale(0.98);
+}
+
+.wait-button-text {
+  width: 151px;
+  height: 49px;
+  overflow-wrap: break-word;
+  color: #e0e0e0;
+  font-size: 51px;
+  font-family: NotoSansCJKsc-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 51px;
+}

src/components/WaitButton.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "./WaitButton.css";
+
+interface WaitButtonProps {
+  text: string;
+  onClick?: () => void;
+}
+
+const WaitButton: React.FC<WaitButtonProps> = ({ text, onClick }) => {
+  return (
+    <div className="wait-button" onClick={onClick}>
+      <span className="wait-button-text">{text}</span>
+    </div>
+  );
+};
+
+export default WaitButton;