style: added shadcn-ui

app/globals.css

@@ -1,92 +1,77 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    Fira Sans,
-    Droid Sans,
-    Helvetica Neue,
-    sans-serif;
-  background: #1e1e1e;
-  min-height: 100vh;
-  display: flex;
-  color: rgb(243, 241, 239);
-  justify-content: center;
-  align-items: center;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
 }
 
-.block {
-  display: flex;
-  flex-direction: column;
-}
-
-.name {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.container {
-  font-size: 1.3rem;
-  border-radius: 10px;
-  width: 85%;
-  padding: 50px;
-  box-shadow:
-    0 54px 55px rgb(78 78 78 / 25%),
-    0 -12px 30px rgb(78 78 78 / 25%),
-    0 4px 6px rgb(78 78 78 / 25%),
-    0 12px 13px rgb(78 78 78 / 25%),
-    0 -3px 5px rgb(78 78 78 / 25%);
-}
-
-.container input {
-  font-size: 1.2rem;
-  margin: 10px 0 10px 0px;
-  border-color: rgb(31, 28, 28);
-  padding: 10px;
-  border-radius: 5px;
-  background-color: #e8f0fe;
-}
-
-.container textarea {
-  margin: 10px 0 10px 0px;
-  padding: 5px;
-  border-color: rgb(31, 28, 28);
-  border-radius: 5px;
-  background-color: #e8f0fe;
-  font-size: 20px;
-}
-
-.container h1 {
-  text-align: center;
-  font-weight: 600;
-}
-
-.name div {
-  display: flex;
-  flex-direction: column;
-}
-
-.block button {
-  padding: 10px;
-  font-size: 20px;
-  width: 30%;
-  border: 3px solid black;
-  border-radius: 5px;
-}
-
-.button {
-  display: flex;
-  align-items: center;
-}
-
-textarea {
-  resize: none;
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    @apply bg-custom-background bg-size-cover;
+  }
 }