chore: add warning message

pnpm-workspace.yaml

@@ -59,7 +59,7 @@ catalogs:
     turbo: ^2.5.8
   setup:
     dotenv: ^17.2.3
-    dotenv-caster: ^2.1.23
+    dotenv-caster: ^2.2.1
 
 ignoredBuiltDependencies:
   - '@swc/core'

products/frontend/src/index.css

@@ -2,3 +2,33 @@
   margin: 0;
   padding: 0;
 }
+
+:root {
+  --text-xs: calc(1rem * 8 / 10);
+  --text-sm: calc(1rem * 8 / 9);
+  --text-base: calc(1rem * 8 / 8);
+  --text-lg: calc(1rem * 8 / 7);
+  --text-xl: calc(1rem * 8 / 6);
+  --text-2xl: calc(1rem * 8 / 5);
+  --text-3xl: calc(1rem * 8 / 4);
+  --text-4xl: calc(1rem * 8 / 3);
+  --text-5xl: calc(1rem * 8 / 2);
+  --text-6xl: calc(1rem * 8 / 1);
+
+  --color-base: #b09757;
+  --color-error: #de474a;
+  --color-disabled: #a3a3a3;
+
+  --background-color-base: #001c32;
+
+  --space-xs: calc(0.5rem * 1);
+  --space-sm: calc(0.5rem * 2);
+  --space-base: calc(0.5rem * 3);
+  --space-lg: calc(0.5rem * 5);
+  --space-xl: calc(0.5rem * 8);
+  --space-2xl: calc(0.5rem * 13);
+  --space-3xl: calc(0.5rem * 21);
+  --space-4xl: calc(0.5rem * 34);
+  --space-5xl: calc(0.5rem * 55);
+  --space-6xl: calc(0.5rem * 89);
+}

products/frontend/src/routes/Root/components/WarningMessage/WarningMessage.module.css

@@ -0,0 +1,48 @@
+.warningMessageWrapper {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.container {
+  width: fit-content;
+  margin: 0 auto;
+  padding: var(--space-lg) 0;
+}
+
+.content {
+  text-align: center;
+  margin: var(--space-base) 0 0 0;
+  color: var(--color-error);
+}
+
+.loader {
+  display: grid;
+  grid-template-columns: repeat(5, 20px);
+  gap: 20px;
+  width: fit-content;
+  margin: 0 auto;
+}
+
+.box {
+  width: 20px;
+  height: 20px;
+  background-color: var(--color-error);
+  animation: fade 1s infinite ease-in-out;
+}
+
+@keyframes fade {
+  0%,
+  100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.box:nth-child(2n) {
+  animation-delay: 0s;
+}
+.box:nth-child(2n + 1) {
+  animation-delay: 0.6s;
+}

products/frontend/src/routes/Root/components/WarningMessage/WarningMessage.tsx

@@ -0,0 +1,25 @@
+import { type FC } from 'react';
+// css
+import styles from './WarningMessage.module.css';
+
+const WarningMessage: FC = () => {
+  return (
+    <div className={styles.warningMessageWrapper}>
+      <div className={styles.container}>
+        <div className={styles.loader}>
+          <span className={styles.box}></span>
+          <span className={styles.box}></span>
+          <span className={styles.box}></span>
+          <span className={styles.box}></span>
+          <span className={styles.box}></span>
+        </div>
+        <p className={styles.content}>
+          Pay Crewは、サービスを終了しました。そのため、予告なくデータを消滅させる可能性があります。 これらを含む「Pay
+          Crew」の利用について、一切の責任を負いかねますのでご了承ください
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default WarningMessage;

products/frontend/src/routes/Root/components/index.ts

@@ -1,4 +1,5 @@
 export { default as DeleteHistory } from './DeleteHistory/DeleteHistory';
 export { default as HistoryForm } from './HistoryForm/HistoryForm';
 export { default as History } from './History/History';
-export { default as ReminderTest } from './ReminderTest/ReminderTest.tsx'
+export { default as ReminderTest } from './ReminderTest/ReminderTest';
+export { default as WarningMessage } from './WarningMessage/WarningMessage';

products/frontend/src/routes/Root/index.tsx

@@ -1,5 +1,5 @@
 // import { Link } from 'react-router';
-import { HistoryForm, History } from './components';
+import { HistoryForm, History, WarningMessage } from './components';
 import styles from './index.module.css';
 import type { FC } from 'react';
 
@@ -19,7 +19,7 @@ const Root: FC = () => {
           </div>
         </div>
 
-        {/* <Link to="/receipt" className={styles.ReceiptLink}>レシートから入力</Link> */}
+        <WarningMessage />
 
         <HistoryForm />