Refactor code structure for improved readability and maintainability

.prettierrc.json

@@ -3,5 +3,6 @@
   "singleQuote": true,
   "printWidth": 80,
   "tabWidth": 2,
+  "plugins": ["prettier-plugin-tailwindcss"],
   "trailingComma": "all"
 }

package-lock.json

@@ -24,6 +24,7 @@
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-prettier": "^5.4.1",
         "prettier": "^3.5.3",
+        "prettier-plugin-tailwindcss": "^0.6.12",
         "tailwindcss": "^4",
         "typescript": "^5"
       }
@@ -4767,6 +4768,84 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.12",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.12.tgz",
+      "integrity": "sha512-OuTQKoqNwV7RnxTPwXWzOFXy6Jc4z8oeRZYGuMpRyG3WbuR3jjXdQFK8qFBMBx8UHWdHrddARz2fgUenild6aw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

package.json

@@ -25,6 +25,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.4.1",
     "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.12",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

src/app/globals.css

@@ -69,30 +69,36 @@
   --gray-300: #81848A;
   --gray-400: #777;
   --gray-500: #222;
+  --white: #FFFFFF;
+  --black: #000000;
+  --transparent: transparent;
+}
 
-  .dark{
-    --primary: #FA003F;
-    --secondary: #7C3AED;
-    --textColorLight: #FA003F;
-    --textColorGray: #FA003F;
-    --bgPrimary: #FA003F;
-    --gray-100: #EBEBEB;
-    --gray-200: #F5F5F5;
-    --gray-300: #81848A;
-    --gray-400: #777;
-    --gray-500: #222;
-  }
+.dark{
+  --primary: #FA003F;
+  --secondary: #7C3AED;
+  --textColorLight: #FA003F;
+  --textColorGray: #FA003F;
+  --bgPrimary: #FA003F;
+  --gray-100: #EBEBEB;
+  --gray-200: #F5F5F5;
+  --gray-300: #81848A;
+  --gray-400: #777;
+  --gray-500: #222;
 }
 
 @theme inline {
-  --color-primary: var(--primary-default);
-  --color-secondary: var(--secondary-default);
-  --color-text-light: var(--textColorLight-default);
-  --color-text-gray: var(--textColorGray-default);
-  --color-bg-primary: var(--bgPrimary-default);
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-text-light: var(--textColorLight);
+  --color-text-gray: var(--textColorGray);
+  --color-bg-primary: var(--bgPrimary);
   --color-gray-100: var(--gray-100);
   --color-gray-200: var(--gray-200);
   --color-gray-300: var(--gray-300);
   --color-gray-400: var(--gray-400);
   --color-gray-500: var(--gray-500);
+  --color-white: var(--white);
+  --color-black: var(--black);
+  --color-transparent: var(--transparent);
 }

src/app/layout.tsx

@@ -1,5 +1,3 @@
-'use client'
-import type { Metadata } from 'next';
 import './globals.css';
 import { cookies } from 'next/headers';
 
@@ -18,7 +16,7 @@ export default async function RootLayout({
 
   return (
     <html lang={locale} dir={locale === 'fa' ? 'rtl' : 'ltr'}>
-      <body>{children}</body>
+      <body className="min-h-svh w-full overflow-x-hidden">{children}</body>
     </html>
   );
 }

src/app/page.tsx

@@ -10,7 +10,7 @@ export default async function Home() {
   const data = await getData();
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24 text-gray-300">
+    <main className="flex flex-col items-center justify-between">
       <Header />
     </main>
   );