Merge changes

package.json

@@ -14,9 +14,15 @@
         "laravel-vite-plugin": "^0.7.2",
         "lodash": "^4.17.19",
         "postcss": "^8.4.18",
+        "postcss-import": "^15.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "tailwindcss": "^3.2.1",
         "vite": "^4.0.0"
+    },
+    "dependencies": {
+        "@heroicons/react": "^2.0.18",
+        "@tremor/react": "^3.7.3",
+        "framer-motion": "^10.16.4"
     }
 }

postcss.config.js

@@ -1,5 +1,7 @@
 module.exports = {
     plugins: {
+        'postcss-import': {},
+        'tailwindcss/nesting': {},
         tailwindcss: {},
         autoprefixer: {},
     },

resources/css/app.css

@@ -1,3 +1,53 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+    font-family: 'Vazirmatn', sans-serif;
+    direction: rtl;
+    text-align: right;
+
+    .nav {
+        @apply hidden md:flex;
+    }
+
+    .progress-bar {
+        @apply absolute z-30 h-2 inset-0 bg-blue-500 origin-[0];
+    }
+
+    .hero-section {
+        @apply px-4 pt-60 pb-28 bg-white dark:bg-slate-800;
+
+        .tremor-TextInput-root {
+            @apply max-w-4xl p-3;
+        }
+    }
+
+    .main-section {
+        @apply max-w-[1600px] mx-auto p-6 lg:p-8 bg-slate-50 dark:bg-slate-900 dark:bg-opacity-60;
+
+        .products-wrapper {
+            @apply gap-6;
+
+            .product-card {
+                .bookmark-btn {
+                    svg {
+                        @apply m-0;
+                    }
+                }
+
+                .meta {
+                    @apply hidden;
+
+                }
+
+                &:hover {
+                    .meta {
+                        @apply block;
+                    }
+                }
+            }
+        }
+    }
+
+}

resources/js/Components/Badge.jsx

@@ -0,0 +1,27 @@
+import { Icon } from "@tremor/react";
+import { PlayIcon, ArrowTrendingUpIcon } from "@heroicons/react/24/outline";
+
+export default function Badge(props) {
+    switch (props.type) {
+        case "vip":
+            return (
+                <Icon
+                    icon={ArrowTrendingUpIcon}
+                    title={props.title}
+                    variant="solid"
+                    size="lg"
+                    color="cyan"
+                />
+            );
+        case "video_guide":
+            return (
+                <Icon
+                    icon={PlayIcon}
+                    title={props.title}
+                    variant="solid"
+                    size="lg"
+                    color="orange"
+                />
+            );
+    }
+}

resources/js/Components/DangerButton.jsx

@@ -3,7 +3,7 @@ export default function DangerButton({ className = '', disabled, children, ...pr
         <button
             {...props}
             className={
-                `inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150 ${
+                `inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150 ${
                     disabled && 'opacity-25'
                 } ` + className
             }

resources/js/Components/Dropdown.jsx

@@ -75,7 +75,7 @@ const DropdownLink = ({ className = '', children, ...props }) => {
         <Link
             {...props}
             className={
-                'block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out ' +
+                'text-right block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out ' +
                 className
             }
         >

resources/js/Components/Header.jsx

@@ -0,0 +1,63 @@
+import { Link } from "@inertiajs/react";
+import { Flex } from "@tremor/react";
+
+export default function Header(props) {
+    const menu = [
+        {
+            name: "صفحه اصلی",
+            link: "",
+        },
+        {
+            name: "افزونه های وردپرس",
+            link: "",
+        },
+        {
+            name: "قالب های وردپرس",
+            link: "",
+        },
+        {
+            name: "سیستم های سفارشی",
+            link: "",
+        },
+    ];
+
+    return (
+        <div className="sm:fixed sm:top-0 sm:right-0 left-0 flex p-6 bg-white dark:bg-gray-800 z-10">
+            <Flex
+                flexDirection="row"
+                style={{ gap: "15px", justifyContent: "start" }}
+                className="nav"
+            >
+                {menu.map((item) => (
+                    <Link key={item.name} className="font-semibold p-2 rounded-lg text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white duration-200 hover:ring-2 hover:ring-blue-500 focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">
+                        {item.name}
+                    </Link>
+                ))}
+            </Flex>
+            {props.auth.user ? (
+                <Link
+                    href={route("dashboard")}
+                    className="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
+                >
+                    پنل کاربری
+                </Link>
+            ) : (
+                <Flex style={{ gap: "40px", justifyContent: "end" }}>
+                    <Link
+                        href={route("login")}
+                        className="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
+                    >
+                        ورود
+                    </Link>
+
+                    <Link
+                        href={route("register")}
+                        className="ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
+                    >
+                        عضویت
+                    </Link>
+                </Flex>
+            )}
+        </div>
+    );
+}

resources/js/Components/PrimaryButton.jsx

@@ -3,7 +3,7 @@ export default function PrimaryButton({ className = '', disabled, children, ...p
         <button
             {...props}
             className={
-                `inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 ${
+                `inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 ${
                     disabled && 'opacity-25'
                 } ` + className
             }

resources/js/Components/SecondaryButton.jsx

@@ -4,7 +4,7 @@ export default function SecondaryButton({ type = 'button', className = '', disab
             {...props}
             type={type}
             className={
-                `inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150 ${
+                `inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150 ${
                     disabled && 'opacity-25'
                 } ` + className
             }

resources/js/Layouts/AuthenticatedLayout.jsx

@@ -22,7 +22,7 @@ export default function Authenticated({ auth, header, children }) {
 
                             <div className="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
                                 <NavLink href={route('dashboard')} active={route().current('dashboard')}>
-                                    Dashboard
+                                    پنل کاربری
                                 </NavLink>
                             </div>
                         </div>
@@ -39,7 +39,7 @@ export default function Authenticated({ auth, header, children }) {
                                                 {auth.user.name}
 
                                                 <svg
-                                                    className="ml-2 -mr-0.5 h-4 w-4"
+                                                    className="mr-2 -ml-0.5 h-4 w-4"
                                                     xmlns="http://www.w3.org/2000/svg"
                                                     viewBox="0 0 20 20"
                                                     fill="currentColor"
@@ -55,9 +55,9 @@ export default function Authenticated({ auth, header, children }) {
                                     </Dropdown.Trigger>
 
                                     <Dropdown.Content>
-                                        <Dropdown.Link href={route('profile.edit')}>Profile</Dropdown.Link>
+                                        <Dropdown.Link href={route('profile.edit')}>حساب کاربری</Dropdown.Link>
                                         <Dropdown.Link href={route('logout')} method="post" as="button">
-                                            Log Out
+                                            خروج
                                         </Dropdown.Link>
                                     </Dropdown.Content>
                                 </Dropdown>
@@ -93,7 +93,7 @@ export default function Authenticated({ auth, header, children }) {
                 <div className={(showingNavigationDropdown ? 'block' : 'hidden') + ' sm:hidden'}>
                     <div className="pt-2 pb-3 space-y-1">
                         <ResponsiveNavLink href={route('dashboard')} active={route().current('dashboard')}>
-                            Dashboard
+                            پنل کاربری
                         </ResponsiveNavLink>
                     </div>
 
@@ -108,7 +108,7 @@ export default function Authenticated({ auth, header, children }) {
                         <div className="mt-3 space-y-1">
                             <ResponsiveNavLink href={route('profile.edit')}>Profile</ResponsiveNavLink>
                             <ResponsiveNavLink method="post" href={route('logout')} as="button">
-                                Log Out
+                                خروج
                             </ResponsiveNavLink>
                         </div>
                     </div>

resources/js/Pages/Auth/ConfirmPassword.jsx

@@ -32,12 +32,12 @@ export default function ConfirmPassword() {
             <Head title="Confirm Password" />
 
             <div className="mb-4 text-sm text-gray-600">
-                This is a secure area of the application. Please confirm your password before continuing.
+                برای ادامه لطفا رمز عبور خود را وارد کنید.
             </div>
 
             <form onSubmit={submit}>
                 <div className="mt-4">
-                    <InputLabel htmlFor="password" value="Password" />
+                    <InputLabel htmlFor="password" value="رمز عبور" />
 
                     <TextInput
                         id="password"
@@ -54,7 +54,7 @@ export default function ConfirmPassword() {
 
                 <div className="flex items-center justify-end mt-4">
                     <PrimaryButton className="ml-4" disabled={processing}>
-                        Confirm
+                        تایید
                     </PrimaryButton>
                 </div>
             </form>

resources/js/Pages/Auth/ForgotPassword.jsx

@@ -24,8 +24,8 @@ export default function ForgotPassword({ status }) {
             <Head title="Forgot Password" />
 
             <div className="mb-4 text-sm text-gray-600">
-                Forgot your password? No problem. Just let us know your email address and we will email you a password
-                reset link that will allow you to choose a new one.
+                رمز عبور خود را فراموش کرده اید؟
+                مشکلی نیست. لطفا آدرس ایمیل خود را جهت ارسال لینک بازنشانی رمز عبور وارد کنید.
             </div>
 
             {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
@@ -44,8 +44,8 @@ export default function ForgotPassword({ status }) {
                 <InputError message={errors.email} className="mt-2" />
 
                 <div className="flex items-center justify-end mt-4">
-                    <PrimaryButton className="ml-4" disabled={processing}>
-                        Email Password Reset Link
+                    <PrimaryButton disabled={processing}>
+                        ارسال لینک بازنشانی رمز عبور
                     </PrimaryButton>
                 </div>
             </form>

resources/js/Pages/Auth/Login.jsx

@@ -32,13 +32,13 @@ export default function Login({ status, canResetPassword }) {
 
     return (
         <GuestLayout>
-            <Head title="Log in" />
+            <Head title="ورود به حساب کاربری" />
 
             {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
 
             <form onSubmit={submit}>
                 <div>
-                    <InputLabel htmlFor="email" value="Email" />
+                    <InputLabel htmlFor="email" value="ایمیل" />
 
                     <TextInput
                         id="email"
@@ -55,7 +55,7 @@ export default function Login({ status, canResetPassword }) {
                 </div>
 
                 <div className="mt-4">
-                    <InputLabel htmlFor="password" value="Password" />
+                    <InputLabel htmlFor="password" value="رمز عبور" />
 
                     <TextInput
                         id="password"
@@ -73,22 +73,22 @@ export default function Login({ status, canResetPassword }) {
                 <div className="block mt-4">
                     <label className="flex items-center">
                         <Checkbox name="remember" value={data.remember} onChange={handleOnChange} />
-                        <span className="ml-2 text-sm text-gray-600">Remember me</span>
+                        <span className="mr-2 text-sm text-gray-600">مرا به یاد داشته باش!</span>
                     </label>
                 </div>
 
-                <div className="flex items-center justify-end mt-4">
+                <div className="flex items-center justify-between mt-4">
                     {canResetPassword && (
                         <Link
                             href={route('password.request')}
                             className="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                         >
-                            Forgot your password?
+                            فراموشی رمز
                         </Link>
                     )}
 
-                    <PrimaryButton className="ml-4" disabled={processing}>
-                        Log in
+                    <PrimaryButton disabled={processing}>
+                        ورود
                     </PrimaryButton>
                 </div>
             </form>