updated color pallette

Reviewed-on: witel-flix/frontend#4

.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/ar.json

@@ -0,0 +1,5 @@
+{
+    "Home": {
+        "title": "مرحبا"
+    }
+}

messages/en.json

@@ -0,0 +1,5 @@
+{
+    "Home": {
+        "title": "hello"
+    }
+}

messages/fa.json

@@ -0,0 +1,5 @@
+{
+    "Home": {
+        "title": "سلام"
+    }
+}

messages/ku.json

@@ -0,0 +1,5 @@
+{
+    "Home": {
+        "title": "مرحبا"
+    }
+}

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,47 +1,48 @@
-{
-  "name": "witelflix",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "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"
-  }
-}
+{
+    "name": "cinematales",
+    "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/[locale]/layout.tsx

@@ -0,0 +1,55 @@
+import { getDirection } from "@/i18n/direction";
+import { routing } from "@/i18n/routing";
+import { ClientAppProvider } from "@/providers/ClientAppProvider";
+import "@/styles/globals.css";
+import type { Metadata } from "next";
+import { hasLocale, NextIntlClientProvider } from "next-intl";
+import { getMessages } from "next-intl/server";
+import { notFound } from "next/navigation";
+
+export const metadata: Metadata = {
+    title: "Theater of dreams",
+};
+
+export default async function RootLayout({
+    children,
+    params,
+}: Readonly<{
+    children: React.ReactNode;
+    params: Promise<{ locale: string }>;
+}>) {
+    const { locale } = await params;
+    if (!hasLocale(routing.locales, locale)) {
+        notFound();
+    }
+
+    const messages = await getMessages();
+    const dir = getDirection(locale);
+
+    return (
+        <html dir={dir} lang={locale} 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-background">
+                <NextIntlClientProvider locale={locale} messages={messages}>
+                    <ClientAppProvider>{children}</ClientAppProvider>
+                </NextIntlClientProvider>
+            </body>
+        </html>
+    );
+}

src/app/[locale]/page.tsx

@@ -0,0 +1,14 @@
+import ComponentsConteiner from "@/components/ComponentsConteiner";
+import { useTranslations } from "next-intl";
+
+export default function Home() {
+    const t = useTranslations("Home");
+    return (
+        <main>
+            <h1>{t("title")}</h1>
+            <p>This project was generated completely offline.</p>
+            <ComponentsConteiner />
+        </main>
+    );
+}
+

src/app/layout.tsx

@@ -1,38 +0,0 @@
-import { ClientAppProvider } from '@/providers/ClientAppProvider'
-import '@/styles/globals.css'
-import type { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Theater of dreams',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  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'>
-        <ClientAppProvider>{children}</ClientAppProvider>
-      </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,11 +0,0 @@
-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/ComponentsConteiner.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useState } from "react";
+import PrimaryButton from "./buttons/PrimaryButton";
+import ThemeToggle from "./UI/ThemeToggle";
+import { Home } from "lucide-react";
+
+export default function ComponentsConteiner() {
+    const [isLoading, setIsloading] = useState(false);
+    function dummyLoading() {
+        setIsloading(true);
+        setTimeout(() => {
+            setIsloading(false);
+        }, 1500);
+    }
+    return (
+        <div className="flex flex-col items-start gap-2 p-4">
+            <ThemeToggle />
+            <div className="w-36">
+                <PrimaryButton onClick={() => dummyLoading()} loading={isLoading}>
+                    <Home size={20} />
+                    <p>test icon</p>
+                </PrimaryButton>
+            </div>
+        </div>
+    );
+}

src/components/UI/ThemeToggle.tsx

@@ -1,30 +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>
-  )
-}
+"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/components/buttons/PrimaryButton.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import { LoaderPinwheel } from "lucide-react";
+
+type PrimaryButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    loading?: boolean;
+    children: React.ReactNode;
+};
+
+export default function PrimaryButton({ children, loading, className, onClick }: PrimaryButtonProps) {
+    return (
+        <button
+            onClick={onClick}
+            className={cn(
+                "bg-primary grid w-full place-items-center overflow-hidden rounded-xl px-4 py-2 text-white hover:scale-102 active:scale-98",
+                className
+            )}
+        >
+            <AnimatePresence mode="wait">
+                {loading ? (
+                    <motion.div
+                        key={"loading"}
+                        initial={{
+                            opacity: 0,
+                            x: -80,
+                        }}
+                        animate={{
+                            opacity: 1,
+                            x: 0,
+                        }}
+                        exit={{
+                            opacity: 0,
+                            x: -80,
+                        }}
+                        transition={{
+                            duration: 0.2,
+                        }}
+                    >
+                        <LoaderPinwheel className="animate-spin" />
+                    </motion.div>
+                ) : (
+                    <motion.div
+                        key="content"
+                        initial={{
+                            opacity: 0,
+                            x: 80,
+                        }}
+                        animate={{
+                            opacity: 1,
+                            x: 0,
+                        }}
+                        exit={{
+                            opacity: 0,
+                            x: 80,
+                        }}
+                        transition={{
+                            duration: 0.2,
+                        }}
+                        className="flex items-center justify-center gap-2"
+                    >
+                        {children}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </button>
+    );
+}

src/i18n/direction.ts

@@ -0,0 +1,12 @@
+export type Direction = "ltr" | "rtl";
+
+export const localeDirectionMap: Record<string, Direction> = {
+    en: "ltr",
+    ar: "rtl",
+    ku: "rtl",
+    fa: "rtl",
+};
+
+export function getDirection(locale: string): Direction {
+    return localeDirectionMap[locale] ?? "ltr";
+}

src/i18n/navigation.ts

@@ -0,0 +1,4 @@
+import { createNavigation } from 'next-intl/navigation'
+import { routing } from './routing'
+
+export const { Link, redirect, usePathname, useRouter, getPathname } = createNavigation(routing)

src/i18n/request.ts

@@ -0,0 +1,13 @@
+import { getRequestConfig } from "next-intl/server";
+import { hasLocale } from "next-intl";
+import { routing } from "./routing";
+
+export default getRequestConfig(async ({ requestLocale }) => {
+    const requested = await requestLocale;
+    const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale;
+
+    return {
+        locale,
+        messages: (await import(`../../messages/${locale}.json`)).default,
+    };
+});

src/i18n/routing.ts

@@ -0,0 +1,7 @@
+import { defineRouting } from "next-intl/routing";
+
+export const routing = defineRouting({
+    locales: ["en", "ar", "ku", "fa"],
+    defaultLocale: "en",
+    localePrefix: "never",
+});

src/i18n/useDirection.ts

@@ -0,0 +1,9 @@
+'use client'
+
+import { useLocale } from 'next-intl'
+import { Direction, getDirection } from './direction'
+
+export function useDirection(): Direction {
+  const locale = useLocale()
+  return getDirection(locale)
+}

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/providers/ClientAppProvider.tsx

@@ -1,44 +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>
-  )
-}
+"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/proxy.ts

@@ -0,0 +1,8 @@
+import createMiddleware from 'next-intl/middleware'
+import { routing } from './i18n/routing'
+
+export default createMiddleware(routing)
+
+export const config = {
+  matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)',
+}

src/styles/globals.css

@@ -1,43 +1,81 @@
-@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;
-}
+@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;
+}
+
+button {
+    cursor: pointer;
+}
+
+@theme {
+    /* Core */
+    --color-background: #f4f6f8;
+    --color-text: #1e242e;
+
+    /* Brand */
+    --color-primary: #2a7fff;
+    --color-secondary: #64748b;
+    --color-accent: #ff6b3d;
+
+    /* Feedback */
+    --color-warning: #f5c04f;
+    --color-information: #3abff8;
+    --color-error: #ef5350;
+    --color-success: #4ade80;
+
+    /* Surfaces */
+    --color-surface: #ffffff;
+    --color-surface-alt: #e9eef2;
+    --color-border: #d4d9df;
+    --color-muted-text: #6c7480;
+
+    /* Overlays */
+    --color-overlay-light: rgba(0, 0, 0, 0.05);
+    --color-overlay-medium: rgba(0, 0, 0, 0.15);
+    --color-overlay-strong: rgba(0, 0, 0, 0.35);
+
+    /* Gradients */
+    --gradient-primary: linear-gradient(135deg, #2a7fff, #1a5fd1);
+    --gradient-accent: linear-gradient(135deg, #ff6b3d, #ff784d);
+}
+
+[data-theme="dark"] {
+    --color-background: #1a1f27;
+    --color-text: #e5e9f0;
+
+    --color-secondary: #94a3b8;
+    --color-accent: #ff8a5c;
+
+    --color-surface: #232833;
+    --color-surface-alt: #2c323e;
+    --color-border: #3a404c;
+    --color-muted-text: #a6aebc;
+
+    --color-overlay-light: rgba(255, 255, 255, 0.05);
+    --color-overlay-medium: rgba(255, 255, 255, 0.12);
+    --color-overlay-strong: rgba(255, 255, 255, 0.25);
+
+    --gradient-primary: linear-gradient(135deg, #63a6ff, #3d7dce);
+    --gradient-accent: linear-gradient(135deg, #ff8a5c, #ff9c75);
+}

tsconfig.json

@@ -1,34 +1,28 @@
-{
-  "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"]
-}
+{
+    "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"]
+}