Addpage

src/App.css

@@ -13,14 +13,30 @@
   }
 }
 
+.joinBtn {
+  width: 10em;
+  height: 5ex;
+  background-color: orange;
+  border: 2px solid black;
+  border-radius: 10px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.joinBtn:hover {
+  width: 15em;
+  height: 8ex;
+  background-color: bisque;
+}
+
 .App-header {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: none;
 }
 
 @keyframes App-logo-spin {

src/App.js

@@ -1,21 +1,48 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+import "./App.css";
+import { useState } from "react";
 
 function App() {
+  let [countlive, setCount] = useState(0);
+  let [countbad, setCountb] = useState(0);
   return (
     <div className="App">
-      <header className="App-header bg-wed">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p className="text-wed-dark">
-          Welcome to <code>WED</code> Community.
+      <header className="App-header bg-cookie text-3xl">
+        <img
+          src={
+            "https://www.japan-ex.net/resources/upload/products/SN00012_b.jpg"
+          }
+          className="App-logo"
+          alt="logo"
+        />
+        <p className="text-chocolate text-3xl">
+          里に <code></code> にようこそ
         </p>
         <a
-          className="text-wed-dark underline"
-          href="https://wed.company/"
+          className="text-chocolate underline"
+          href="https://www.meiji.co.jp/products/brand/kinotake/"
           target="_blank"
           rel="noopener noreferrer"
         >
-          Learn WED
+          移住する
+        </a>
+        <p
+          onClick={() => {
+            setCount(countlive + 1);
+          }}
+        >
+          <boton class="joinBtn">🏠{countlive}</boton>
+        </p>
+        <p
+          onClick={() => {
+            setCountb(countbad + 1);
+          }}
+        >
+          <boton class="joinBtn">👎{countbad}</boton>
+        </p>
+
+        <a href="/newpage" className="text-pastel-red underline">
+          コミュニティページ
         </a>
       </header>
     </div>

src/NewPage.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function NewPage() {
+  return (
+    <div className="NewPage">
+      <h1>コミュニティページ</h1>
+      <a>10月のイベントについて</a>
+    </div>
+  );
+}
+export default NewPage;

src/index.js

@@ -1,16 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import NewPage from "./NewPage";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<App />} />
+        <Route path="/newpage" element={<NewPage />} />
       </Routes>
     </BrowserRouter>
   </React.StrictMode>

tailwind.config.js

@@ -7,6 +7,8 @@ module.exports = {
     colors: {
       wed: '#D2D2C6',
       'wed-dark': '#6D695D',
+      'cookie' :'#f5deb3',
+      'chocolate': '#8b4513'
     },
     extend: {
     },