完成

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "next": "14.2.3",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "styled-components": "^6.1.11"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.39.1",

panda.config.ts

@@ -12,7 +12,18 @@ export default defineConfig({
 
   // Useful for theme customization
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        fadein: {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
+        fadeout: {
+          "0%": { opacity: "1" },
+          "100%": { opacity: "0" },
+        },
+      },
+    },
   },
 
   // The output directory for your css system

src/app/layout.tsx

@@ -5,8 +5,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "はま寿司 or ポポヤシ",
+  description: "はま寿司なのか、ポポヤシなのか",
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -1,20 +1,121 @@
 "use client";
-import { useState } from 'react';
+import { useState } from "react";
+import { styled, keyframes } from "styled-components";
+import { css } from "../../styled-system/css";
+import { Mochiy_Pop_One } from "next/font/google";
+
+const Mochiy = Mochiy_Pop_One({
+  weight: "400",
+  subsets: ["latin"],
+});
+
+const body = css({
+  height: "100vh",
+  backgroundColor: "#f9f9f9",
+  padding: "20px",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  flexDirection: "column",
+});
+
+const flex = css({
+  display: "flex",
+  justifyContent: "space-around",
+  alignItems: "center",
+  flexDirection: "column",
+});
+
+const flexBox = css({
+  height: "10dvh",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  flexDirection: "column",
+  margin: "20px",
+});
+
+const heading = css({
+  fontSize: "2rem",
+  marginBottom: "20px",
+  color: "#333",
+});
+
+const animation = keyframes`
+  100% { background-position-x: 200%; }
+`;
+
+const Button = styled.button`
+  padding: 10px 20px;
+  font-size: 1.2rem;
+  color: #fff;
+  background: linear-gradient(to right, Magenta, yellow, Cyan, Magenta) 0%
+    center/200%;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
+  animation: ${animation} 2s linear infinite;
+`;
+
+const textStyle = css({
+  margin: "20px",
+  fontSize: "3rem",
+  color: "#333",
+});
+
+const tweetButton = css({
+  padding: "10px 20px",
+  color: "#fff",
+  background: "#1da1f2",
+  border: "none",
+  borderRadius: "5px",
+  cursor: "pointer",
+  transition: "background 0.3s ease",
+  textDecoration: "none",
+  display: "inline-block",
+  "&:hover": {
+    background: "#0d95e8",
+  },
+});
 
 export default function Home() {
-  const [text, setText] = useState('');
+  const [pushed, setPushed] = useState(false);
+  const [text, setText] = useState("");
 
   const generateText = () => {
     const part1 = Math.random() < 0.5 ? "は" : "ポ";
     const part2 = Math.random() < 0.5 ? "は" : "ポ";
     const part3 = Math.random() < 0.5 ? "はま寿司" : "ポポヤシ";
     setText(`${part1}！${part2}！${part3}‼️`);
-  }
+    setPushed(true);
+  };
   return (
-    <div>
-      <h1>はま寿司 or ポポヤシ</h1>
-      <button onClick={generateText}>ガチャ</button>
-      <p>{text}</p>
+    <div className={body}>
+      <div className={flex}>
+        <div className={flexBox}>
+          <h1 className={`${heading} ${Mochiy.className}`}>
+            はま寿司 or ポポヤシ
+          </h1>
+          <Button onClick={generateText} className={Mochiy.className}>
+            ガチャ
+          </Button>
+        </div>
+        <div className={flexBox}>
+          <p className={`${textStyle} ${Mochiy.className}`}>{text}</p>
+          {pushed && (
+            <div>
+              <a
+                href={`https://x.com/intent/post?text=${text}&url=${encodeURI("https://hamaorpopo.iorin.io")}`}
+                className={`${tweetButton} ${Mochiy.className}`}
+              >
+                ツイートする
+              </a>
+            </div>
+          )}
+        </div>
+      </div>
     </div>
   );
-}
+}