Merge pull request 'feature/prettier' (#4) from feature/prettier into develop

Reviewed-on: witel-flix/frontend#4

.dockerignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+.next

.gitignore

@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+/node_modules
 /.idea
 /package-lock.json
 /.pnp

.prettierrc

@@ -0,0 +1,14 @@
+{
+    "plugins": ["prettier-plugin-tailwindcss"],
+
+    "printWidth": 120,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "arrowParens": "always",
+    "endOfLine": "crlf"
+}

README.Docker.md

@@ -0,0 +1 @@
+Hello from docker ReadMe

docker-compose.yaml

@@ -1,16 +1,16 @@
-services:
-  witelflix-front:
-    image: witelflix:${VERSION}
-    container_name: witelflix
-    #        build: #just if we have internet uncomment
-    #            context: .
-    #            dockerfile: Dockerfile
-    ports:
-      - "3000:3000"
-    env_file:
-      - .env
-    restart: unless-stopped
-  #        volumes:
-  #            - .:/app # کل پروژه mount شده به /app در کانتینر
-  #            - /app/node_modules # node_modules داخل کانتینر بماند تا با host override نشود
-  #            - /app/.next # next داخل کانتینر بماند تا با host override نشود
+services:
+    witelflix-front:
+        image: witelflix:${VERSION}
+        container_name: witelflix
+        #        build: #just if we have internet uncomment
+        #            context: .
+        #            dockerfile: Dockerfile
+        ports:
+            - "3000:3000"
+        env_file:
+            - .env
+        restart: unless-stopped
+    #        volumes:
+    #            - .:/app # کل پروژه mount شده به /app در کانتینر
+    #            - /app/node_modules # node_modules داخل کانتینر بماند تا با host override نشود
+    #            - /app/.next # next داخل کانتینر بماند تا با host override نشود

messages/fa.json

@@ -0,0 +1,4 @@
+{
+    "loading": "درحال دریافت داده",
+    "error_fetch_data": "مشکلی در دریافت داده رخ داده است."
+}

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,25 @@
+// next.config.ts
+import type { NextConfig } from "next";
+import createNextIntlPlugin from "next-intl/plugin";
+
+// @ts-ignore – no types for next-pwa
+const withPWA = require("next-pwa")({
+    dest: "public",
+    disable: process.env.NODE_ENV === "development",
+    register: true,
+    skipWaiting: true,
+    navigateFallback: "/offline.html", // fallback page
+});
+
+const withNextIntl = createNextIntlPlugin();
+
+const nextConfig: NextConfig = {
+    // output : "standalone",
+    images: {
+        remotePatterns: [],
+    },
+};
+
+const configWithIntl = withNextIntl(nextConfig);
+
+export default withPWA(configWithIntl);

package.json

@@ -1,23 +1,48 @@
-{
-  "name": "witelflix",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "next": "16.1.6",
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "25.0.10",
-    "@types/react": "19.2.10",
-    "@types/react-dom": "19.2.3",
-    "postcss": "8.5.6",
-    "tailwindcss": "4.1.18",
-    "typescript": "5.9.3"
-  }
-}
+{
+    "name": "witelflix",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "format": "npx prettier . --write"
+    },
+    "dependencies": {
+        "@types/js-cookie": "^3.0.6",
+        "axios": "^1.15.0",
+        "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
+        "date-fns-jalali": "4.1.0-0",
+        "embla-carousel": "^8.6.0",
+        "embla-carousel-autoplay": "^8.6.0",
+        "embla-carousel-react": "^8.6.0",
+        "framer-motion": "^12.38.0",
+        "js-cookie": "^3.0.5",
+        "lucide-react": "^1.8.0",
+        "next": "16.1.6",
+        "next-intl": "^4.9.1",
+        "next-pwa": "^5.6.0",
+        "next-sitemap": "^4.2.3",
+        "next-themes": "^0.4.6",
+        "nextjs-toploader": "^3.9.17",
+        "prettier": "^3.8.2",
+        "prettier-plugin-tailwindcss": "^0.7.2",
+        "radix-ui": "^1.4.3",
+        "react": "19.2.4",
+        "react-dom": "19.2.4",
+        "react-hook-form": "^7.72.1",
+        "react-hot-toast": "^2.6.0",
+        "tailwind-merge": "^3.5.0",
+        "tailwind-scrollbar": "^4.0.2",
+        "zustand": "^5.0.12"
+    },
+    "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.18",
+        "@types/node": "25.0.10",
+        "@types/react": "19.2.10",
+        "@types/react-dom": "19.2.3",
+        "postcss": "8.5.6",
+        "tailwindcss": "4.1.18",
+        "typescript": "5.9.3"
+    }
+}

postcss.config.mjs

@@ -1,6 +1,5 @@
-export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-
+export default {
+    plugins: {
+        "@tailwindcss/postcss": {},
+    },
+};

public/manifest.json

@@ -0,0 +1,38 @@
+{
+    "id": "/",
+    "name": "Theater of dreams",
+    "short_name": "Theater of dreams",
+    "description": "Theater of dreams",
+    "start_url": "/",
+    "display": "standalone",
+    "orientation": "portrait",
+    "theme_color": "#283618",
+    "background_color": "#ffffff",
+    "icons": [
+        {
+            "src": "logo/144px.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        },
+        {
+            "src": "logo/152px.png",
+            "sizes": "152x152",
+            "type": "image/png"
+        },
+        {
+            "src": "logo/192px.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "logo/384px.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        },
+        {
+            "src": "logo/512px.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}

src/app/globals.css

@@ -1 +0,0 @@
-@import "tailwindcss";

src/app/layout.tsx

@@ -1,19 +1,59 @@
-import type { Metadata } from "next";
-import "./globals.css";
-
-export const metadata: Metadata = {
-  title: "Offline App",
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  );
-}
-
+import { ClientAppProvider } from "@/providers/ClientAppProvider";
+import "@/styles/globals.css";
+import type { Metadata } from "next";
+import { getLocale, getMessages } from "next-intl/server";
+import { NextIntlClientProvider } from "next-intl";
+
+export const metadata: Metadata = {
+    title: {
+        template: "%s | Theater of dreams",
+        default: "Theater of dreams",
+    },
+    description: "Theater of dreams",
+    authors: {
+        name: "شرکت دانش بنیان ویرا ارتباطات یکتا تلفن (وایتل)",
+        url: "https://witel.ir",
+    },
+
+    manifest: "/manifest.json",
+    icons: {
+        icon: "/logo/192px.png",
+        apple: "/logo/512px.png",
+    },
+};
+export const viewport = {
+    width: "device-width",
+    initialScale: 1,
+    maximumScale: 1,
+};
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const locale = await getLocale();
+    const messages = await getMessages({ locale });
+    return (
+        <html lang="en" suppressHydrationWarning>
+            <head>
+                {/* Prevent theme flicker before hydration */}
+                <script
+                    dangerouslySetInnerHTML={{
+                        __html: `
+              (function() {
+                try {
+                  const stored = localStorage.getItem('theme');
+                  const theme = stored || 'dark';
+                  document.documentElement.setAttribute('data-theme', theme);
+                } catch (e) {}
+              })();
+            `,
+                    }}
+                />
+            </head>
+
+            <body className="bg-primary">
+                <NextIntlClientProvider locale={locale} messages={messages}>
+                    <ClientAppProvider>{children}</ClientAppProvider>
+                </NextIntlClientProvider>
+            </body>
+        </html>
+    );
+}

src/app/not-found.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+
+export default function NotFound() {
+    return (
+        <div className="bg-pwa-primary text-text flex min-h-screen items-center justify-center">
+            <div className="bg-pwa-primary mx-4 w-full max-w-md rounded-xl p-8 text-center">
+                {/* آیکون خطا */}
+                {/*<div className="mb-4 flex justify-center">*/}
+                {/*    <svg*/}
+                {/*        xmlns="http://www.w3.org/2000/svg"*/}
+                {/*        className="h-16 w-16 text-core-red"*/}
+                {/*        fill="none"*/}
+                {/*        viewBox="0 0 24 24"*/}
+                {/*        stroke="currentColor"*/}
+                {/*    >*/}
+                {/*        <path*/}
+                {/*            strokeLinecap="round"*/}
+                {/*            strokeLinejoin="round"*/}
+                {/*            strokeWidth={2}*/}
+                {/*            d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"*/}
+                {/*        />*/}
+                {/*    </svg>*/}
+                {/*</div>*/}
+
+                {/* متن خطا */}
+                <h2 className="text-text mb-2 text-2xl font-bold">صفحه مورد نظر یافت نشد</h2>
+                <p className="text-text mb-6 leading-relaxed">متاسفانه صفحه‌ای مورد نظر وجود ندارد.</p>
+
+                {/* دکمه بازگشت با استفاده از کامپوننت Link */}
+                <Link
+                    href="/"
+                    className="bg-neo-aqua hover:bg-neo-aqua/70 inline-block rounded-lg px-6 py-3 font-medium text-white shadow-md transition-colors duration-200 hover:shadow-lg"
+                >
+                    بازگشت به صفحه اصلی
+                </Link>
+            </div>
+        </div>
+    );
+}

src/app/page.tsx

@@ -1,9 +1,11 @@
-export default function Home() {
-  return (
-    <main style={{ padding: 40 }}>
-      <h1>Offline Next.js Template 🚀</h1>
-      <p>This project was generated completely offline.</p>
-    </main>
-  );
-}
-
+import ThemeToggle from "@/components/UI/ThemeToggle";
+
+export default function Home() {
+    return (
+        <main>
+            <ThemeToggle />
+            <h1>Offline Next.js Template 🚀</h1>
+            <p>This project was generated completely offline.</p>
+        </main>
+    );
+}

src/components/UI/ThemeToggle.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+export default function ThemeToggle() {
+    const { theme, setTheme } = useTheme();
+
+    return (
+        <button
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            className="flex cursor-pointer items-center py-2"
+        >
+            <motion.div
+                key={theme}
+                initial={{ rotate: -90, opacity: 0 }}
+                animate={{ rotate: 0, opacity: 1 }}
+                exit={{ rotate: 90, opacity: 0 }}
+                transition={{ duration: 0.5, ease: "easeInOut" }}
+            >
+                {theme === "dark" ? <Moon className="text-text size-6" /> : <Sun className="text-text size-6" />}
+            </motion.div>
+        </button>
+    );
+}

src/i18n/request.ts

@@ -0,0 +1,12 @@
+import { cookies } from "next/headers";
+import { getRequestConfig } from "next-intl/server";
+
+export default getRequestConfig(async () => {
+    const cookieStore = await cookies();
+    const locale = cookieStore.get("language")?.value || "fa";
+
+    return {
+        locale,
+        messages: (await import(`../../messages/${locale}.json`)).default,
+    };
+});

src/providers/ClientAppProvider.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { ThemeProvider } from "next-themes";
+import { useEffect, useState } from "react";
+
+export function ClientAppProvider({ children }: { children: React.ReactNode }) {
+    const [mounted, setMounted] = useState(false);
+
+    // wait for hydration
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    return (
+        <ThemeProvider attribute="data-theme" defaultTheme="dark" enableSystem={false}>
+            <AnimatePresence mode="wait">
+                {!mounted ? (
+                    <motion.div
+                        key="splash"
+                        className="bg-map-bg flex h-dvh w-dvw items-center justify-center"
+                        initial={{ opacity: 1 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                    />
+                ) : (
+                    <motion.div
+                        key="app"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ duration: 0.3, ease: "easeOut" }}
+                        className="bg-map-bg"
+                    >
+                        {children}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </ThemeProvider>
+    );
+}

src/styles/globals.css

@@ -0,0 +1,43 @@
+@import "tailwindcss";
+
+*,
+*::before,
+*::after,
+*::-webkit-scrollbar {
+    box-sizing: border-box;
+}
+
+* {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    transition:
+        background-color 0.3s ease,
+        color 0.3s ease,
+        border-color 0.3s ease;
+}
+
+*::-webkit-scrollbar {
+    display: none;
+}
+
+body {
+    margin: 0;
+}
+
+@theme {
+    --color-primary: #cbd5e1;
+    --color-text: #273343;
+
+    /* constants */
+    --color-neo-aqua: #16a795;
+    --color-core-red: #ef4444;
+    --color-warning: #eedd55;
+    --color-information: #0ea5e9;
+    --color-error: #ef4444;
+    --color-success: #22c55e;
+}
+
+[data-theme="dark"] {
+    --color-primary: #273343;
+    --color-text: #cbd5e1;
+}

tsconfig.json

@@ -1,40 +1,28 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "strict": true,
-    "noEmit": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
-  ],
-  "paths": {
-    "@/*": ["./src/*"],
-    "&/*": ["./public/*"]
-  },
-  "exclude": [
-    "node_modules"
-  ]
-}
+{
+    "compilerOptions": {
+        "target": "ES2017",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "react-jsx",
+        "incremental": true,
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ],
+        "paths": {
+            "@/*": ["./src/*"],
+            "&/*": ["./public/*"]
+        }
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
+    "exclude": ["node_modules"]
+}