Build Meshkee marketing site with service pages and shared layout.
Add home and service routes (website, app, CMS, SEO, graphic), brand assets, and components aligned with the live meshkee.com design. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
045d507cbe
commit
47bee1ce66
+14
-1
@@ -1,7 +1,20 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "meshkee-templates.sas.amin.parminstorage.ir",
|
||||
pathname: "/**",
|
||||
},
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "www.meshkee.com",
|
||||
pathname: "/**",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "meshkee-tmp",
|
||||
"name": "meshkee",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" aria-hidden="true">
|
||||
<path d="M8 52V12h10.2l9.4 22.6L37 12H48v40h-9.2V27.4L29.6 52h-7.2L13.2 27.4V52H8Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 207 B |
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,98 @@
|
||||
import type { Metadata } from "next";
|
||||
import { ServicePageLayout } from "@/components/ServicePageLayout";
|
||||
import { WebsiteCountries, applicationCountries } from "@/components/WebsiteCountries";
|
||||
import {
|
||||
ProjectsShowcase,
|
||||
applicationProjects,
|
||||
} from "@/components/WebsiteProjects";
|
||||
import { images } from "@/data/assets";
|
||||
|
||||
const CDN =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/meshkee_SEEpb1zypk/assets/files";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "طراحی اختصاصی اپلیکیشن | مشکی",
|
||||
description: "طراحی و توسعه اپلیکیشن موبایل iOS و Android توسط تیم اختصاصی مشکی.",
|
||||
};
|
||||
|
||||
export default function DedicatedApplicationPage() {
|
||||
return (
|
||||
<ServicePageLayout
|
||||
metaTitle="طراحی اختصاصی اپلیکیشن | مشکی"
|
||||
tag="راهکارهای مدرن برای تجارت شما"
|
||||
title="طراحی اختصاصی اپلیکیشن"
|
||||
titleEn="DEDICATED APP DESIGN"
|
||||
lead="برای بعضی از مقاصد، اپلیکیشن فوق‌العاده است؛ وقتی می‌خواهید کاربرتان در سریع‌ترین زمان ممکن به خدمات یا محصولات شما دسترسی پیدا کند، یا به ابزارهایی مثل موقعیت مکانی یا دوربین نیاز دارید. وجود یک اپلیکیشن خوب باعث راحتی و وفاداری بیشتر کاربران شماست."
|
||||
heroImage={images.pages.app}
|
||||
sections={[
|
||||
{
|
||||
tag: "اپلیکیشن موبایل",
|
||||
title: "طراحی و توسعه‌ی اپلیکیشن",
|
||||
titleEn: "APPLICATION DEVELOPMENT",
|
||||
body: "ما صفر تا صد اپلیکیشن را برای شما انجام می‌دهیم. انواع اپلیکیشن‌های فروشگاهی، خبری و همینطور با مقاصد خاص. این اپلیکیشن‌ها به دو صورت استفاده از Meshkee.cms و اختصاصی طراحی می‌شوند.",
|
||||
features: [
|
||||
{
|
||||
title: "مدیریت محصول",
|
||||
titleEn: "PRODUCT MANAGER",
|
||||
icon: `${CDN}/v4ZJpmctXl.png`,
|
||||
description:
|
||||
"طراحی انواع اپلیکیشن‌های شرکتی، فروشگاهی و اتصال آن به سیستم مدیریت یکپارچه‌ی Meshkee.",
|
||||
},
|
||||
{
|
||||
title: "مدیر فنی",
|
||||
titleEn: "TECHNICAL MANAGER",
|
||||
icon: `${CDN}/sbqVWDtc4I.png`,
|
||||
description:
|
||||
"رهبری تیم توسعه، معماری سیستم و اطمینان از کیفیت فنی پروژه در تمام مراحل.",
|
||||
},
|
||||
{
|
||||
title: "طراح گرافیک",
|
||||
titleEn: "GRAPHIC DESIGN",
|
||||
icon: `${CDN}/2DTWtbL3CO.png`,
|
||||
description:
|
||||
"طراحی رابط کاربری زیبا و بهینه برای تجربه‌ای روان و لذت‌بخش در موبایل.",
|
||||
},
|
||||
{
|
||||
title: "تیم فرانت‌اند",
|
||||
titleEn: "FRONT END",
|
||||
icon: `${CDN}/v4ZJpmctXl.png`,
|
||||
description:
|
||||
"توسعه رابط کاربری اپلیکیشن با آخرین تکنولوژی‌های React Native و Flutter.",
|
||||
},
|
||||
{
|
||||
title: "تیم بک‌اند",
|
||||
titleEn: "BACK END",
|
||||
icon: `${CDN}/sbqVWDtc4I.png`,
|
||||
description:
|
||||
"طراحی API و زیرساخت سرور برای پشتیبانی از اپلیکیشن با بالاترین عملکرد.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
eyebrow: "چقدر به راحتی کاربرتون اهمیت میدید؟",
|
||||
title: "طراحی و توسعه‌ی اپلیکیشن",
|
||||
titleEn: "APPLICATION DEVELOP",
|
||||
headline:
|
||||
"فکر می‌کنید وقتش هست برند شما در تلفن همراه مخاطبان باشه؟",
|
||||
body: "برای بعضی از مقاصد، اپلیکیشن فوق‌العاده است. مثلاً وقتی می‌خواهید کاربرتان در سریع‌ترین زمان ممکن به خدمات یا محصولات شما دسترسی پیدا کند. یا مثلاً به ابزارهایی مثل موقعیت یا دوربین در گوشی کاربرتان احتیاج دارید. به‌طور کلی، وجود یک اپلیکیشن خوب باعث راحتی و وفاداری بیشتر کاربران شماست.",
|
||||
image: `${CDN}/5UZE9slUzZ.png`,
|
||||
},
|
||||
]}
|
||||
injectAfter={1}
|
||||
inject={
|
||||
<WebsiteCountries
|
||||
title="انجام پروژه در کشورهای مختلف"
|
||||
body="تجربه همکاری با کسب‌وکارها در ایران، استرالیا، امارات و ژاپن به ما دیدگاه گسترده‌ای در طراحی اپلیکیشن برای بازارهای مختلف داده است."
|
||||
countries={applicationCountries}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ProjectsShowcase
|
||||
title="نمونه‌هایی از اپلیکیشن‌های طراحی‌شده"
|
||||
titleEn="APPLICATION DESIGN"
|
||||
projects={applicationProjects}
|
||||
moreHref="https://www.meshkee.com/portfolios/application"
|
||||
/>
|
||||
</ServicePageLayout>
|
||||
);
|
||||
}
|
||||
+244
-12
@@ -1,26 +1,258 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--ink: #0e1116;
|
||||
--ink-soft: #2a313c;
|
||||
--muted: #5c6672;
|
||||
--line: #d5dbe3;
|
||||
--paper: #eef1f4;
|
||||
--paper-deep: #e2e7ee;
|
||||
--surface: #fafafa;
|
||||
--accent-from: #ff5a7a;
|
||||
--accent-to: #9c4dff;
|
||||
--accent: #c44db8;
|
||||
--accent-deep: #8b3adb;
|
||||
--glow: rgba(196, 77, 184, 0.16);
|
||||
--brand-gradient: linear-gradient(135deg, var(--accent-from), var(--accent-to));
|
||||
--background: var(--paper);
|
||||
--foreground: var(--ink);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-ink: var(--ink);
|
||||
--color-ink-soft: var(--ink-soft);
|
||||
--color-muted: var(--muted);
|
||||
--color-line: var(--line);
|
||||
--color-paper: var(--paper);
|
||||
--color-paper-deep: var(--paper-deep);
|
||||
--color-surface: var(--surface);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-deep: var(--accent-deep);
|
||||
--color-accent-from: var(--accent-from);
|
||||
--color-accent-to: var(--accent-to);
|
||||
--font-sans: var(--font-vazirmatn);
|
||||
--font-display: var(--font-montserrat);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Rule: all interactive elements animate smoothly on hover */
|
||||
button,
|
||||
a {
|
||||
transition:
|
||||
background 0.25s ease,
|
||||
background-color 0.25s ease,
|
||||
color 0.25s ease,
|
||||
border-color 0.25s ease,
|
||||
box-shadow 0.25s ease,
|
||||
transform 0.2s ease,
|
||||
opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* Headings: consistent weight matching hero h1 — titles stay on one row */
|
||||
h1,
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: color-mix(in srgb, var(--accent) 28%, white);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.latin {
|
||||
font-family: var(--font-montserrat), var(--font-vazirmatn), sans-serif;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
}
|
||||
|
||||
/* Gradient hover utilities */
|
||||
.btn-primary {
|
||||
background: var(--ink);
|
||||
color: var(--surface);
|
||||
transition:
|
||||
background 0.25s ease,
|
||||
color 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--brand-gradient);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.link-hover {
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
|
||||
.link-hover:hover {
|
||||
color: var(--accent);
|
||||
background: var(--brand-gradient);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.border-hover {
|
||||
transition:
|
||||
border-color 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
.border-hover:hover,
|
||||
.group:hover .border-hover {
|
||||
border-color: transparent;
|
||||
background:
|
||||
linear-gradient(#fff, #fff) padding-box,
|
||||
var(--brand-gradient) border-box;
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
|
||||
.group-border-hover {
|
||||
transition:
|
||||
border-color 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
.group-border-hover:hover,
|
||||
.group:hover.group-border-hover,
|
||||
.group:hover .group-border-hover,
|
||||
a.group-border-hover:hover {
|
||||
border-color: color-mix(in srgb, var(--accent) 55%, white);
|
||||
}
|
||||
|
||||
.group-text-hover {
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
|
||||
.group:hover .group-text-hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.carousel-mask {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.carousel-mask::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.carousel-track {
|
||||
animation: carousel-scroll 48s linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.carousel-track:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes carousel-scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
.mesh-grid {
|
||||
background-image:
|
||||
linear-gradient(rgba(14, 17, 22, 0.035) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(14, 17, 22, 0.035) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 75%);
|
||||
}
|
||||
|
||||
.mesh-glow {
|
||||
background:
|
||||
radial-gradient(ellipse 55% 45% at 78% 35%, var(--glow), transparent 70%),
|
||||
radial-gradient(ellipse 40% 35% at 12% 70%, rgba(42, 49, 60, 0.08), transparent 65%),
|
||||
linear-gradient(165deg, #f5f7fa 0%, #e8edf3 48%, #eef2f6 100%);
|
||||
}
|
||||
|
||||
@keyframes float-y {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rise-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float-y 7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
transition:
|
||||
opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.reveal.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.reveal-delay-1 {
|
||||
transition-delay: 0.12s;
|
||||
}
|
||||
.reveal-delay-2 {
|
||||
transition-delay: 0.24s;
|
||||
}
|
||||
.reveal-delay-3 {
|
||||
transition-delay: 0.36s;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-float,
|
||||
.reveal,
|
||||
.carousel-track {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,146 @@
|
||||
import type { Metadata } from "next";
|
||||
import { ServicePageLayout } from "@/components/ServicePageLayout";
|
||||
import { GraphicBrands } from "@/components/GraphicBrands";
|
||||
import {
|
||||
ProjectsShowcase,
|
||||
graphicCatalogProjects,
|
||||
graphicIdentityProjects,
|
||||
graphicLogoProjects,
|
||||
} from "@/components/WebsiteProjects";
|
||||
import { images } from "@/data/assets";
|
||||
|
||||
const CDN =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/meshkee_SEEpb1zypk/assets/files";
|
||||
const ASSETS =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/meshkee_SEEpb1zypk/assets";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "طراحی گرافیک و هویت بصری | مشکی",
|
||||
description: "طراحی لوگو، هویت بصری، کاتالوگ، بروشور و گرافیک شبکه‌های اجتماعی توسط تیم مشکی.",
|
||||
};
|
||||
|
||||
export default function GraphicDesignerPage() {
|
||||
return (
|
||||
<ServicePageLayout
|
||||
metaTitle="طراحی گرافیک و هویت بصری | مشکی"
|
||||
tag="خود را بروز و خاص معرفی کنید"
|
||||
title="طراحی گرافیک و هویت بصری"
|
||||
titleEn="GRAPHIC DESIGN & VISUAL IDENTITY"
|
||||
lead="طراحی رابط کاربری وبسایت و اپلیکیشن (UI & UX)، لوگو، هویت بصری و به‌طور کلی برندبوک از تخصص‌های ماست. پر از ایده‌های جدید و خلاقیت، آماده‌ایم تا شخصیت بصری کسب‌وکار شما را شکل دهیم."
|
||||
heroImage={images.pages.graphic}
|
||||
sections={[
|
||||
{
|
||||
title: "در حوزه‌ی گرافیک، چه خدماتی ارائه می‌دهیم؟",
|
||||
titleEn: "GRAPHICAL MATTERS",
|
||||
body: "از اولین تماس بصری با مخاطب تا حضور در فضای دیجیتال و فیزیکی، تیم گرافیک مشکی در تمام مسیر کنار شماست.",
|
||||
featureColumns: 2,
|
||||
features: [
|
||||
{
|
||||
title: "طراحی لوگو",
|
||||
titleEn: "LOGO DESIGN",
|
||||
icon: `${CDN}/laghDUXc8y.png`,
|
||||
description:
|
||||
"لوگو اولین المان گرافیکی یک کسب‌وکار در دنیای امروز می‌باشد. چه کسب‌وکار یک شرکت یا فروشگاه باشد، چه یک فرد. لوگو حتی می‌تواند اساس هویت بصری و یا برندبوک یک مجموعه باشد.",
|
||||
},
|
||||
{
|
||||
title: "طراحی هویت بصری",
|
||||
titleEn: "CORPORATE IDENTITY",
|
||||
icon: `${CDN}/ghctoURx0E.png`,
|
||||
description:
|
||||
"برندبوک یا در مقیاس کوچک‌تر هویت بصری، شامل المان‌های گرافیکی مختلف یک کسب‌وکار می‌باشد. از فونت، رنگ و شکل هندسی گرفته تا کارت ویزیت، سربرگ، پاکت نامه و موارد دیگر.",
|
||||
},
|
||||
{
|
||||
title: "طراحی کاتالوگ و بروشور",
|
||||
titleEn: "CATALOG AND BROCHURE",
|
||||
icon: `${CDN}/n98dGTJsbb.png`,
|
||||
description:
|
||||
"یکی از بهترین راه‌ها برای معرفی خودمان، کاتالوگ یا بروشور است؛ چه فیزیکی چه مجازی. ما برای شما یک بروشور به‌روز و مدرن بر اساس هویت بصری شما طراحی می‌کنیم.",
|
||||
},
|
||||
{
|
||||
title: "گرافیک وبسایت و شبکه‌های اجتماعی",
|
||||
titleEn: "WEBSITE AND SOCIAL MEDIA",
|
||||
icon: `${CDN}/Ms3NprhtRb.png`,
|
||||
description:
|
||||
"یک وبسایت و یک شبکه‌ی اجتماعی خوب، نیاز به طراحی زیبا و درست دارند. طراحی بنرها، پست‌های اینستاگرام، هایلایت‌ها و آیتم‌های گرافیکی وبسایت از تخصص‌های ماست.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
eyebrow: "لوگو خاص و مینیمال",
|
||||
title: "طراحی لوگو",
|
||||
titleEn: "LOGO DESIGN",
|
||||
body: "لوگو مبنای هویت بصری یک مجموعه است؛ آنچه مردم شما را با آن به یاد می‌سپارند. ما حدود ۵ سال است در این زمینه فعالیت داریم و لوگوهای بسیاری طراحی کرده‌ایم. ابتدا زبان سازمان شما را تعیین می‌کنیم — می‌خواهید مردم شما را چگونه بشناسند؟ شیک؟ گران؟ مردمی؟ — سپس بهترین‌های مشابه را پیدا می‌کنیم، ایده‌پردازی می‌کنیم و پس از طراحی چندین طرح، روی یکی متمرکز می‌شویم.",
|
||||
image: `${ASSETS}/img/logo-design.png`,
|
||||
imageFrame: true,
|
||||
},
|
||||
{
|
||||
eyebrow: "شخصیت شما در دنیای هنر",
|
||||
title: "هویت بصری",
|
||||
titleEn: "CORPORATE IDENTITY",
|
||||
body: "اینکه چه فونتی فونت قالب شما باشد، از چه رنگ‌هایی استفاده کنید، چه المان‌هایی به کار برید — همه از مبناهای هویت بصری هستند. هویت بصری برگرفته از لوگو می‌باشد و در طراحی وبسایت شما، شبکه‌های اجتماعی، دفتر و همه‌جا نمود پیدا می‌کند.",
|
||||
image: `${CDN}/5WVlYEa5gc.webp`,
|
||||
imageFrame: true,
|
||||
},
|
||||
{
|
||||
eyebrow: "یک معرفی خاص",
|
||||
title: "طراحی کاتالوگ و بروشور",
|
||||
titleEn: "CATALOG AND BROCHURES",
|
||||
body: "بعد از وبسایت و شبکه‌های اجتماعی، یکی از راه‌های معرفی درست مجموعه، کاتالوگ و بروشور است. ما بر اساس هویت بصری شما، و درک درست از محصول یا خدمتی که می‌خواهید عرضه کنید، اقدام به طراحی کاتالوگ می‌کنیم. این کاتالوگ می‌تواند بسیار سریع اطلاعات ارزشمندی به مخاطب شما انتقال دهد.",
|
||||
image: `${CDN}/vew4NgueAK.webp`,
|
||||
imageFrame: true,
|
||||
},
|
||||
{
|
||||
eyebrow: "هویت شما در فضای دیجیتال",
|
||||
title: "گرافیک وبسایت و شبکه‌های اجتماعی",
|
||||
titleEn: "WEBSITE & SOCIAL MEDIA GRAPHICS",
|
||||
body: "ما می‌توانیم هویت شما در فضای مجازی (اینستاگرام، لینکدین، فیسبوک و ...) را طراحی کنیم. این طراحی شامل قالب پست‌ها، هایلایت‌ها (Highlights) و حتی قالب ویدئوها می‌باشد. علاوه بر شبکه‌های اجتماعی، طراحی بنرها، دسته‌بندی و به‌طور کلی آیتم‌های گرافیکی مورد استفاده در وبسایت نیز جزو تخصص‌های ما می‌باشد.",
|
||||
image: `${CDN}/eIE64N2wNY.png`,
|
||||
},
|
||||
]}
|
||||
injections={[
|
||||
{
|
||||
after: 1,
|
||||
node: (
|
||||
<ProjectsShowcase
|
||||
subtitle="با سلیقه‌ی ما بیشتر آشنا شوید"
|
||||
title="نمونه‌هایی از لوگوهای طراحی‌شده"
|
||||
titleEn="LOGO PORTFOLIOS"
|
||||
projects={graphicLogoProjects}
|
||||
moreHref="https://www.meshkee.com/portfolios/logo"
|
||||
variant="carousel"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
after: 2,
|
||||
node: (
|
||||
<>
|
||||
<ProjectsShowcase
|
||||
subtitle="با سلیقه‌ی ما بیشتر آشنا شوید"
|
||||
title="نمونه‌هایی از هویت‌های بصری طراحی‌شده"
|
||||
titleEn="CORPORATE IDENTITY PORTFOLIOS"
|
||||
projects={graphicIdentityProjects}
|
||||
moreHref="https://www.meshkee.com/portfolios/corporate-identity"
|
||||
variant="carousel"
|
||||
/>
|
||||
<GraphicBrands />
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
after: 3,
|
||||
node: (
|
||||
<ProjectsShowcase
|
||||
subtitle="با سلیقه‌ی ما بیشتر آشنا شوید"
|
||||
title="نمونه‌هایی از کاتالوگ‌های طراحی‌شده"
|
||||
titleEn="CATALOG DESIGN"
|
||||
projects={graphicCatalogProjects}
|
||||
moreHref="https://www.meshkee.com/portfolios/catalog"
|
||||
variant="carousel"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
+19
-11
@@ -1,20 +1,27 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Montserrat, Vazirmatn } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
const vazirmatn = Vazirmatn({
|
||||
variable: "--font-vazirmatn",
|
||||
subsets: ["arabic", "latin"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
const montserrat = Montserrat({
|
||||
variable: "--font-montserrat",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "تیم برنامه‌نویسی و تجارت الکترونیک مشکی | Meshkee",
|
||||
description:
|
||||
"راهکارهای مدرن برای تجارت شما — طراحی وبسایت، اپلیکیشن، سیستم‌های مدیریتی، سئو و گرافیک توسط تیم مشکی.",
|
||||
icons: {
|
||||
icon: "/images/brand/mark-black.png",
|
||||
apple: "/images/brand/mark-black.png",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -24,10 +31,11 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
lang="fa"
|
||||
dir="rtl"
|
||||
className={`${vazirmatn.variable} ${montserrat.variable} h-full antialiased`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col">{children}</body>
|
||||
<body className="min-h-full font-sans text-ink">{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,328 @@
|
||||
import type { Metadata } from "next";
|
||||
import { ServicePageLayout } from "@/components/ServicePageLayout";
|
||||
import { GraphicBrands, cmsBrands } from "@/components/GraphicBrands";
|
||||
import { images } from "@/data/assets";
|
||||
|
||||
const CDN =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/meshkee_SEEpb1zypk/assets/files";
|
||||
const ASSETS =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/meshkee_SEEpb1zypk/assets";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "سیستم مدیریت یکپارچه مشکی | Meshkee CMS",
|
||||
description:
|
||||
"سیستم مدیریت یکپارچه مشکی شامل فروشگاه، مالی، انبار، باشگاه مشتریان و محتوا.",
|
||||
};
|
||||
|
||||
export default function MeshkeeCmsPage() {
|
||||
return (
|
||||
<ServicePageLayout
|
||||
metaTitle="سیستم مدیریت یکپارچه مشکی | Meshkee CMS"
|
||||
tag="قلب تپنده‌ی وبسایت و اپلیکیشن شما"
|
||||
title="سیستم مدیریت یکپارچه‌ی مشکی"
|
||||
titleEn="MESHKEE CMS"
|
||||
lead="برای اینکه بتوان هزینه‌های طراحی و مدیریت یک وبسایت و اپلیکیشن را مدیریت کرد، سیستم‌های مدیریت بسیاری چه به‌صورت آنلاین (Cloud Base) و چه به‌صورت قابل نصب (Self Hosted) طراحی شده‌اند. در واقع این سیستم شامل بخش‌های مدیریتی زیادی از جمله مدیریت مشتریان، فروشگاه، مالی و انبار می‌باشد که وبسایت و اپلیکیشن شما را به‌صورت یکپارچه مدیریت می‌کند."
|
||||
heroImage={images.pages.cms}
|
||||
sections={[
|
||||
{
|
||||
title: "سیستم مدیریت یکپارچه‌ی مشکی چیست؟",
|
||||
titleEn: "MESHKEE.APP",
|
||||
body: "Meshkee.cms برای کنترل هزینه‌های طراحی و مدیریت وبسایت و اپلیکیشن ساخته شده است. این سیستم بخش‌های مدیریتی متعددی از جمله مدیریت مشتریان، فروشگاه، مالی، انبار و محتوا دارد و وبسایت و اپلیکیشن شما را به‌صورت یکپارچه مدیریت می‌کند.",
|
||||
featureColumns: 2,
|
||||
features: [
|
||||
{
|
||||
title: "مدیریت محتوا",
|
||||
titleEn: "DATA MANAGEMENT",
|
||||
icon: `${CDN}/3U0BxgqRqV.png`,
|
||||
description:
|
||||
"مدیریت خبرها، مقالات، رسانه‌ها و ساختار منوها بدون نیاز به دانش فنی.",
|
||||
},
|
||||
{
|
||||
title: "مدیریت انبار",
|
||||
titleEn: "WAREHOUSE MANAGEMENT",
|
||||
icon: `${CDN}/EVcpynPGpj.png`,
|
||||
description:
|
||||
"تعریف ساختار انبار، جایگاه کالا و رهگیری لحظه‌ای موجودی.",
|
||||
},
|
||||
{
|
||||
title: "مدیریت مشتریان",
|
||||
titleEn: "CUSTOMER MANAGEMENT",
|
||||
icon: `${CDN}/6b7tBULBBg.png`,
|
||||
description:
|
||||
"باشگاه مشتریان، ارسال پیام، کد تخفیف و فیلترهای پیشرفته.",
|
||||
},
|
||||
{
|
||||
title: "مدیریت مالی",
|
||||
titleEn: "FINANCE MANAGAMENT",
|
||||
icon: `${CDN}/CIWbgV8W2D.png`,
|
||||
description:
|
||||
"ثبت لحظه‌ای ورودی‌ها، خروجی‌ها، حقوق، اقساط و اعتبارات.",
|
||||
},
|
||||
{
|
||||
title: "مدیریت فروشگاه",
|
||||
titleEn: "STORE MANAGEMENT",
|
||||
icon: `${ASSETS}/img/f1.png`,
|
||||
description:
|
||||
"محصولات، تنوع، سفارشات و اتصال به سیستم مالی و انبار.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
eyebrow: "قلب تپنده‌ی سیستم شما",
|
||||
title: "هسته‌ی مرکزی",
|
||||
titleEn: "MESHKEE.CORE",
|
||||
body: "هسته‌ی مرکزی سیستم مشکی، وظیفه کنترل مباحث پایه‌ی سیستم را دارد. مدیریت ادمین‌ها، سطوح دسترسی هر کدام، و مدیریت ارسال پیامک در کل سیستم از قابلیت‌های اصلی این بخش است.",
|
||||
image: `${CDN}/ypK8jYHp0Z.png`,
|
||||
featureColumns: 2,
|
||||
features: [
|
||||
{
|
||||
title: "حساب کاربری",
|
||||
titleEn: "PAGES MANAGEMENT",
|
||||
icon: `${CDN}/mPog6hCdL5.png`,
|
||||
description:
|
||||
"مدیریت کامل کاربران، ادمین‌ها و حساب‌های کاربری در سراسر سیستم.",
|
||||
},
|
||||
{
|
||||
title: "مدیریت پیامک‌ها",
|
||||
titleEn: "FRAMES MANAGEMENT",
|
||||
icon: `${CDN}/kwxmOnlJAy.png`,
|
||||
description:
|
||||
"تمامی پیامک‌های ارسالی در کل سیستم از طریق این بخش مدیریت می‌شوند.",
|
||||
},
|
||||
{
|
||||
title: "نقش‌ها و دسترسی‌ها",
|
||||
titleEn: "IMAGE HANDLING",
|
||||
icon: `${CDN}/QGdeNr8xDF.png`,
|
||||
description:
|
||||
"تعریف دقیق دسترسی هر کاربر به هر بخش از سیستم.",
|
||||
},
|
||||
{
|
||||
title: "مدیریت ادمین‌ها",
|
||||
titleEn: "TEXTS EDITING",
|
||||
icon: `${CDN}/2DTWtbL3CO.png`,
|
||||
description:
|
||||
"اضافه کردن، ویرایش و حذف ادمین‌های سیستم با کنترل کامل.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
eyebrow: "رگ حیات مجموعه‌ی شما",
|
||||
title: "مدیریت فروشگاه",
|
||||
titleEn: "STORE MANAGEMENT",
|
||||
body: "برای یک فروش درست، ابتدا دسته‌بندی محصولات و خدمات را تعریف می‌کنیم. سپس محصولات را با تصاویر، توضیحات، مشخصات فنی، قیمت و موجودی ثبت می‌کنیم و برای فروش در وبسایت، اپلیکیشن و صندوق فروشگاه آماده می‌کنیم. بعد از فروش، مدیریت سفارشات، هزینه‌های ارسال و مسائل مالی نیز پوشش داده می‌شود.",
|
||||
image: `${CDN}/RadFcgHFRX.png`,
|
||||
featureColumns: 2,
|
||||
features: [
|
||||
{
|
||||
title: "متصل به سیستم مالی و انبار",
|
||||
titleEn: "FINANCE AND STOCK",
|
||||
icon: `${CDN}/W4XcB33sfJ.png`,
|
||||
description:
|
||||
"هر تغییر در فروش به‌صورت خودکار در مالی و انبار ثبت می‌شود.",
|
||||
},
|
||||
{
|
||||
title: "مدیریت سفارشات",
|
||||
titleEn: "ORDERS",
|
||||
icon: `${CDN}/976xV2Uo03.png`,
|
||||
description:
|
||||
"پیگیری کامل سفارشات از ثبت تا تحویل با وضعیت‌های مختلف.",
|
||||
},
|
||||
{
|
||||
title: "تعریف تنوع",
|
||||
titleEn: "VARIATIONS",
|
||||
icon: `${CDN}/Naov6IfDtS.png`,
|
||||
description:
|
||||
"تعریف رنگ، سایز و سایر تنوع‌های محصول با موجودی مستقل.",
|
||||
},
|
||||
{
|
||||
title: "مدیریت محصولات",
|
||||
titleEn: "PRODUCTS",
|
||||
icon: `${CDN}/LyXnsTIXcB.png`,
|
||||
description:
|
||||
"ثبت، ویرایش و مدیریت کامل محصولات با تصاویر، مشخصات و قیمت‌گذاری.",
|
||||
},
|
||||
{
|
||||
title: "مدیریت خدمات",
|
||||
titleEn: "SERVICES",
|
||||
icon: `${CDN}/InxpMjzB8N.png`,
|
||||
description:
|
||||
"تعریف و فروش خدمات در کنار محصولات، با قیمت و زمان‌بندی اختصاصی.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
eyebrow: "مدیریت ارتباط با مشتری",
|
||||
title: "مدیریت مشتریان",
|
||||
titleEn: "CUSTOMERS CLUB - CRM",
|
||||
body: "کاربران از طریق راه‌های مختلف می‌توانند عضو سیستم شما شوند؛ ثبت‌نام در وبسایت و اپلیکیشن، خرید، فرم تماس، ثبت حضوری و کامنت. این کاربران عضو باشگاه مشتریان هستند. می‌توانید به آن‌ها پیام دهید، کد تخفیف بدهید و تولدشان را تبریک بگویید. باشگاه مشتریان یک دارایی ارزشمند و از هدفمندترین کانال‌های تبلیغاتی است.",
|
||||
image: `${CDN}/U37sw2h61o.png`,
|
||||
featureColumns: 2,
|
||||
features: [
|
||||
{
|
||||
title: "تخفیف‌های هوشمند",
|
||||
titleEn: "DISCOUNTS",
|
||||
icon: `${CDN}/9qN7ePr9EZ.png`,
|
||||
description:
|
||||
"تعریف کدهای تخفیف، کمپین‌های فروش و پیشنهادات ویژه برای مشتریان.",
|
||||
},
|
||||
{
|
||||
title: "ارسال پیام و ایمیل",
|
||||
titleEn: "SMS & EMAIL",
|
||||
icon: `${CDN}/qkWtdEoBiJ.png`,
|
||||
description:
|
||||
"ارسال پیام‌های هدفمند به گروه‌های مختلف از مشتریان.",
|
||||
},
|
||||
{
|
||||
title: "یکپارچگی در کل سیستم",
|
||||
titleEn: "INTEGRATION",
|
||||
icon: `${CDN}/Naov6IfDtS.png`,
|
||||
description:
|
||||
"اطلاعات مشتری در تمام بخش‌های سیستم قابل دسترسی است.",
|
||||
},
|
||||
{
|
||||
title: "فیلتر پیشرفته",
|
||||
titleEn: "ADVANCE FILTERS",
|
||||
icon: `${CDN}/xGYrPJZW0k.png`,
|
||||
description:
|
||||
"جستجو و فیلتر کردن مشتریان بر اساس رفتار خرید، سابقه و ویژگی‌ها.",
|
||||
},
|
||||
{
|
||||
title: "سوابق کامل",
|
||||
titleEn: "HISTORY",
|
||||
icon: `${CDN}/NKzmMPR8jR.png`,
|
||||
description:
|
||||
"مشاهده‌ی کامل تاریخچه‌ی خرید، پیام‌ها و تعاملات هر مشتری.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
eyebrow: "هر آنچه مربوط به پول در مجموعه‌ی شماست",
|
||||
title: "مدیریت مالی",
|
||||
titleEn: "FINANCE MANAGEMENT",
|
||||
body: "تصور کنید همه‌ی جریان مالی فروشگاه شما — ورودی‌ها، خروجی‌ها، فروش اقساطی، حقوق کارکنان، اعتبارات و تسویه‌ها — به‌صورت لحظه‌ای و دقیق در یک سیستم هوشمند ثبت شود. سیستم مدیریت مالی مشکی امکان مشاهده، تحلیل و گزارش‌دهی سریع را فراهم می‌کند و شما را از ابزارهای جداگانه بی‌نیاز می‌کند.",
|
||||
image: `${CDN}/6xx1iavfkH.png`,
|
||||
featureColumns: 2,
|
||||
features: [
|
||||
{
|
||||
title: "حقوق و دستمزد",
|
||||
titleEn: "SALARY",
|
||||
icon: `${CDN}/4t8563Kj9b.png`,
|
||||
description:
|
||||
"محاسبه و پرداخت حقوق کارکنان با تاریخچه‌ی کامل.",
|
||||
},
|
||||
{
|
||||
title: "فروش اقساطی",
|
||||
titleEn: "INSTALLMENT SALES",
|
||||
icon: `${CDN}/GPxuRIL3EC.png`,
|
||||
description:
|
||||
"مدیریت فروش‌های قسطی، پیگیری اقساط و یادآوری خودکار.",
|
||||
},
|
||||
{
|
||||
title: "وام و اعتبارات",
|
||||
titleEn: "LOANS AND CREDITS",
|
||||
icon: `${CDN}/QaQZ3P79cR.png`,
|
||||
description:
|
||||
"تعریف اعتبار برای مشتریان و مدیریت وام‌های داخلی.",
|
||||
},
|
||||
{
|
||||
title: "یکپارچه با کل سیستم",
|
||||
titleEn: "INTEGRATED",
|
||||
icon: `${CDN}/Naov6IfDtS.png`,
|
||||
description:
|
||||
"تمام تراکنش‌های فروشگاه و انبار به‌صورت خودکار ثبت می‌شوند.",
|
||||
},
|
||||
{
|
||||
title: "کل ورودی و خروجی",
|
||||
titleEn: "TOTAL INPUT AND OUTPUT",
|
||||
icon: `${CDN}/AE9rqD3RUQ.png`,
|
||||
description:
|
||||
"نمای یکپارچه از تمام جریان‌های مالی ورودی و خروجی مجموعه.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
eyebrow: "محل تغذیه‌ی سیستم",
|
||||
title: "مدیریت انبار",
|
||||
titleEn: "WAREHOUSE",
|
||||
body: "در این بخش می‌توانید ساختار دقیق انبار را تعریف کنید، برای هر کالا جایگاه مشخص تعیین کرده و با ابزارهایی مثل جستجوی پیشرفته و رهگیری لحظه‌ای، سرعت و دقت عملیات را چند برابر کنید. این سیستم به‌صورت یکپارچه به بخش‌های فروش و مالی متصل است؛ هر تغییر در موجودی، در سراسر سیستم اعمال می‌شود.",
|
||||
image: `${CDN}/6kY5CQL4tj.png`,
|
||||
featureColumns: 2,
|
||||
features: [
|
||||
{
|
||||
title: "جستجوی پیشرفته",
|
||||
titleEn: "ADVANCED SEARCH",
|
||||
icon: `${CDN}/OQ3Z8wgiIY.png`,
|
||||
description:
|
||||
"یافتن سریع کالاها بر اساس کد، نام، جایگاه و سایر مشخصات.",
|
||||
},
|
||||
{
|
||||
title: "امکان رهگیری",
|
||||
titleEn: "INTERCEPTION",
|
||||
icon: `${CDN}/2U9hcDxczB.png`,
|
||||
description:
|
||||
"رهگیری لحظه‌ای موجودی و جابه‌جایی کالا در انبار.",
|
||||
},
|
||||
{
|
||||
title: "متصل به سیستم مالی",
|
||||
titleEn: "FINANCIAL SYSTEM",
|
||||
icon: `${ASSETS}/img/f3.png`,
|
||||
description:
|
||||
"هر تغییر موجودی به‌صورت خودکار در سیستم مالی منعکس می‌شود.",
|
||||
},
|
||||
{
|
||||
title: "تعریف ساختار انبار و جایگاه",
|
||||
titleEn: "WAREHOUSE STRUCTURE",
|
||||
icon: `${CDN}/FBa1OV9ZIZ.png`,
|
||||
description:
|
||||
"تعریف انبارها، قفسه‌ها و جایگاه دقیق هر کالا.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
eyebrow: "تمام محتوای سیستم شما",
|
||||
title: "مدیریت محتوا",
|
||||
titleEn: "CONTENT MANAGEMENT",
|
||||
body: "بخش تولید محتوا در مشکی به شما این امکان را می‌دهد تا خبرها، نوشته‌ها، مقالات، انواع رسانه‌ها اعم از ویدئو، پادکست، تصویر و حتی ساختار منوها را بدون نیاز به دانش فنی مدیریت کنید. این ابزار به‌گونه‌ای طراحی شده که با سایر ماژول‌ها مانند سئو، فروشگاه و مدیریت مشتریان کاملاً هماهنگ است.",
|
||||
image: `${CDN}/yNOiYd13rv.png`,
|
||||
featureColumns: 2,
|
||||
features: [
|
||||
{
|
||||
title: "ویدیو",
|
||||
titleEn: "VIDEO",
|
||||
icon: `${CDN}/wv5DGmbkwp.png`,
|
||||
description:
|
||||
"آپلود و مدیریت ویدئوها با قابلیت نمایش در وبسایت و اپلیکیشن.",
|
||||
},
|
||||
{
|
||||
title: "پادکست",
|
||||
titleEn: "PODCAST",
|
||||
icon: `${CDN}/Xb2jVJV6kR.png`,
|
||||
description:
|
||||
"انتشار و مدیریت فایل‌های صوتی با پلیر اختصاصی.",
|
||||
},
|
||||
{
|
||||
title: "مقالات و آموزش‌ها",
|
||||
titleEn: "ARTICLES",
|
||||
icon: `${CDN}/tOpjhq8FzT.png`,
|
||||
description:
|
||||
"ویرایشگر محتوای پیشرفته برای نوشتن مقالات سئو‌شده.",
|
||||
},
|
||||
{
|
||||
title: "خبرنامه",
|
||||
titleEn: "NEWSLETTER",
|
||||
icon: `${CDN}/AwQyu8yGrW.png`,
|
||||
description:
|
||||
"ارسال خبرنامه به مشترکین با قالب‌بندی اختصاصی.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
injections={[
|
||||
{
|
||||
after: 0,
|
||||
node: <GraphicBrands brands={cmsBrands} titleEn="COOPERATION" />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
+26
-60
@@ -1,65 +1,31 @@
|
||||
import Image from "next/image";
|
||||
import { AppSection } from "@/components/AppSection";
|
||||
import { BlogSection } from "@/components/BlogSection";
|
||||
import { CmsSection } from "@/components/CmsSection";
|
||||
import { ContactSection } from "@/components/ContactSection";
|
||||
import { Footer } from "@/components/Footer";
|
||||
import { Header } from "@/components/Header";
|
||||
import { Hero } from "@/components/Hero";
|
||||
import { MediaSection } from "@/components/MediaSection";
|
||||
import { Portfolio } from "@/components/Portfolio";
|
||||
import { RevealObserver } from "@/components/RevealObserver";
|
||||
import { Services } from "@/components/Services";
|
||||
|
||||
export default function Home() {
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
<>
|
||||
<RevealObserver />
|
||||
<Header />
|
||||
<main>
|
||||
<Hero />
|
||||
<Services />
|
||||
<Portfolio />
|
||||
<AppSection />
|
||||
<CmsSection />
|
||||
<MediaSection />
|
||||
<BlogSection />
|
||||
<ContactSection />
|
||||
</main>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import type { Metadata } from "next";
|
||||
import { ServicePageLayout } from "@/components/ServicePageLayout";
|
||||
import { SeoCities } from "@/components/SeoCities";
|
||||
import { ProjectsShowcase, seoProjects } from "@/components/WebsiteProjects";
|
||||
import { images } from "@/data/assets";
|
||||
|
||||
const CDN =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/meshkee_SEEpb1zypk/assets/files";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "سئو و مدیریت وبسایت | مشکی",
|
||||
description: "خدمات سئو حرفه‌ای، بهینه‌سازی موتور جستجو و مدیریت وبسایت توسط تیم مشکی.",
|
||||
};
|
||||
|
||||
export default function SeoPage() {
|
||||
return (
|
||||
<ServicePageLayout
|
||||
metaTitle="سئو و مدیریت وبسایت | مشکی"
|
||||
tag="راهکارهای مدرن برای تجارت شما"
|
||||
title="سئو و مدیریت وبسایت"
|
||||
titleEn="SEO & WEBSITE MANAGEMENT"
|
||||
lead="سئو (SEO) یا بهینه‌سازی برای موتورهای جستجو، مجموعه‌ای از روش‌هاست که باعث می‌شود سایت شما در نتایج جستجوی گوگل بهتر دیده شود. وقتی کاربران به دنبال محصول یا خدماتی مشابه شما هستند، سئو کمک می‌کند سایت‌تان در صفحه اول نمایش داده شود و ترافیک هدفمند جذب کنید."
|
||||
heroImage={images.pages.seo}
|
||||
sections={[
|
||||
{
|
||||
title: "سئو چیست و چرا برای سایت مهم است؟",
|
||||
titleEn: "WHAT IS SEO AND WHY IS IT IMPORTANT FOR THE SITE?",
|
||||
body: "سئو (SEO) یا بهینه‌سازی برای موتورهای جستجو، مجموعه‌ای از روش‌هاست که باعث می‌شود سایت شما در نتایج جستجوی گوگل بهتر دیده شود. وقتی کاربران به دنبال محصول یا خدماتی مشابه شما هستند، سئو کمک می‌کند سایت‌تان در صفحه اول نمایش داده شود و ترافیک هدفمند جذب کنید. بدون سئو، حتی بهترین سایت‌ها هم ممکن است در بین هزاران نتیجه گم شوند. سئو نه‌تنها بازدید سایت را افزایش می‌دهد، بلکه نرخ تبدیل و فروش را هم به‌طور چشمگیری بالا می‌برد.",
|
||||
image: `${CDN}/v9C8SMnGcX.png`,
|
||||
},
|
||||
{
|
||||
title: "خدمات سئو در مشکی",
|
||||
titleEn: "SEO SERVICES IN MASHKEE",
|
||||
body: "در مشکی، خدمات سئو با هدف افزایش رتبه سایت شما در گوگل و جذب مشتری واقعی ارائه می‌شود. ما ابتدا سایت شما را به‌طور کامل آنالیز می‌کنیم تا مشکلات فنی، محتوایی و ساختاری را شناسایی کنیم. سپس با بهینه‌سازی داخلی (On-page)، تولید محتوای سئو‌شده، افزایش سرعت سایت و اجرای استراتژی لینک‌سازی خارجی (Off-page)، مسیر رشد سایت شما را هموار می‌کنیم. تیم ما همیشه مطابق با آخرین الگوریتم‌های گوگل عمل می‌کند تا نتایجی پایدار و قابل اندازه‌گیری به شما ارائه دهد.",
|
||||
image: `${CDN}/5Lpd4SmeVJ.png`,
|
||||
},
|
||||
{
|
||||
title: "چرا سئو سرمایه‌گذاری بلندمدت است؟",
|
||||
titleEn: "WHY IS SEO A LONG-TERM INVESTMENT",
|
||||
body: "سئو برخلاف تبلیغات موقتی، یک استراتژی بلندمدت برای رشد پایدار کسب‌وکار آنلاین شماست. وقتی سایت‌تان با اصول سئو بهینه‌سازی می‌شود، جایگاه آن در نتایج گوگل به‌تدریج بهبود می‌یابد و این جایگاه با حفظ کیفیت، می‌تواند ماه‌ها یا حتی سال‌ها باقی بماند. مهم‌تر از همه، ترافیکی که از طریق سئو به دست می‌آورید کاملاً ارگانیک، هدفمند و بدون نیاز به هزینه‌های تکرارشونده تبلیغاتی است. سئو یعنی سرمایه‌گذاری روی آینده برند شما.",
|
||||
image: `${CDN}/kqPGopeKIR.png`,
|
||||
},
|
||||
{
|
||||
title: "سئو برای چه نوع سایت‌هایی ضروری است؟",
|
||||
titleEn: "FOR WHAT TYPES OF SITES IS SEO NECESSARY",
|
||||
body: "در دنیای رقابتی امروز، سئو برای تقریباً تمام انواع سایت‌ها ضروری است. سایت‌های فروشگاهی برای جذب مشتری و افزایش فروش آنلاین نیاز به دیده شدن در گوگل دارند؛ سایت‌های شرکتی و خدماتی برای جلب اعتماد مخاطب و افزایش تماس‌های ورودی باید در نتایج جستجو حضور فعال داشته باشند. حتی سایت‌های شخصی، وبلاگ‌ها یا نمونه‌کارهای فریلنسری، با سئو می‌توانند بازدید و اعتبار آنلاین خود را چند برابر کنند.",
|
||||
image: `${CDN}/U06jlPumpi.png`,
|
||||
},
|
||||
{
|
||||
title: "مشاوره رایگان سئو با تیم مشکی",
|
||||
titleEn: "FREE SEO CONSULTATION WITH THE MESHKEE TEAM",
|
||||
body: "تیم مشکی با تجربه عملی در سئو سایت‌های فروشگاهی، شرکتی و خدماتی، آماده است تا در یک جلسه مشاوره رایگان، وضعیت فعلی سایت شما را بررسی کرده و مسیر رشد آن در گوگل را ترسیم کند. این مشاوره شامل تحلیل رقبا، بررسی فنی سایت، ارزیابی محتوای فعلی و ارائه پیشنهادهای کاربردی برای بهبود جایگاه سایت شما در نتایج جستجو است. هدف ما کمک به شماست.",
|
||||
image: `${CDN}/pblvKaFLTm.png`,
|
||||
},
|
||||
]}
|
||||
injections={[
|
||||
{
|
||||
after: 1,
|
||||
node: (
|
||||
<ProjectsShowcase
|
||||
title="نمونه از وبسایت های سئو شده"
|
||||
titleEn="WEBSITE DESIGN"
|
||||
projects={seoProjects}
|
||||
moreHref="https://www.meshkee.com/portfolios/website"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
after: 2,
|
||||
node: <SeoCities />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
import type { Metadata } from "next";
|
||||
import { ServicePageLayout } from "@/components/ServicePageLayout";
|
||||
import { WebsiteProjects } from "@/components/WebsiteProjects";
|
||||
import { WebsiteCountries } from "@/components/WebsiteCountries";
|
||||
import { images } from "@/data/assets";
|
||||
|
||||
const CDN =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/meshkee_SEEpb1zypk/assets/files";
|
||||
const ICONS =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/meshkee_SEEpb1zypk/assets/img/icons";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "طراحی اختصاصی وبسایت | مشکی",
|
||||
description: "طراحی و توسعه وبسایت اختصاصی، فروشگاهی، شرکتی و خاص توسط تیم مشکی.",
|
||||
};
|
||||
|
||||
export default function WebsitePage() {
|
||||
return (
|
||||
<ServicePageLayout
|
||||
metaTitle="طراحی اختصاصی وبسایت | مشکی"
|
||||
tag="راهکارهای مدرن برای تجارت شما"
|
||||
title="طراحی اختصاصی وبسایت"
|
||||
titleEn="DEDICATED WEBSITE DESIGN"
|
||||
lead="طراحی و توسعه‌ی انواع وبسایت‌های فروشگاهی، خبری، شرکتی، گالری، ورزشی و همینطور وبسایت با مقاصد خاص. این کار به‌صورت تیمی انجام می‌شود و برای هر یک از بخش‌های گرافیک، برنامه‌نویسی، سرور، سئو و متخصص جداگانه‌ای روی وبسایت شما فعالیت خواهد کرد."
|
||||
heroImage={images.pages.website}
|
||||
sections={[
|
||||
{
|
||||
tag: "چرا طراحی اختصاصی؟",
|
||||
title: "چرا باید طراحی اختصاصی را انتخاب کنیم؟",
|
||||
titleEn: "OUR SOLUTIONS",
|
||||
body: "در پروژه‌های اختصاصی، تمام کد و ساختار سیستم متعلق به شماست. این یعنی انعطاف بی‌نهایت برای توسعه‌های آینده، عدم وابستگی به پلتفرم‌های ثالث، و کنترل کامل بر روی تجربه کاربری.",
|
||||
features: [
|
||||
{
|
||||
title: "طراحی وبسایت با مقاصد خاص",
|
||||
titleEn: "CUSTOM PURPOSE WEBSITES",
|
||||
icon: `${CDN}/v4ZJpmctXl.png`,
|
||||
description:
|
||||
"اگر نیاز به امکاناتی دارید که CMS های موجود قادر به ارائه آن نیستند، طراحی اختصاصی بهترین انتخاب است.",
|
||||
},
|
||||
{
|
||||
title: "دسترسی کامل به سورس کد",
|
||||
titleEn: "FULL SOURCE CODE ACCESS",
|
||||
icon: `${CDN}/sbqVWDtc4I.png`,
|
||||
description:
|
||||
"تمام کد پروژه در اختیار شماست. هیچ وابستگی به سرویس ثالثی ندارید و می‌توانید هر زمان توسعه را ادامه دهید.",
|
||||
},
|
||||
{
|
||||
title: "طراحی ادمین اختصاصی",
|
||||
titleEn: "CUSTOM ADMIN PANEL",
|
||||
icon: `${CDN}/2DTWtbL3CO.png`,
|
||||
description:
|
||||
"محیط مدیریت دقیقاً بر اساس نیازهای شما طراحی می‌شود؛ از مدیریت محصولات تا گزارش‌های مالی.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "تجربه ما",
|
||||
title: "۵ سال تجربه در زمینه طراحی وبسایت",
|
||||
titleEn: "APPLICATION DEVELOP",
|
||||
body: "به عنوان یک تیم، سال‌هاست در زمینه‌ی طراحی، مدیریت و توسعه‌ی پروژه‌های برنامه‌نویسی مشغول به فعالیتیم. در این بازه پروژه‌های زیادی را در ایران و سایر کشورها انجام داده‌ایم. تمام این پروژه‌ها به‌صورت صفر تا صد توسط تیم خودمان انجام شده است؛ از بررسی و تحلیل پروژه، طراحی UI&UX و پروتوتایپ، مدیریت تیم، توسعه پروژه تا QA.",
|
||||
image: `${CDN}/GBXyzVDokx.png`,
|
||||
},
|
||||
{
|
||||
tag: "تیم ما",
|
||||
title: "بخش‌های تیم ما",
|
||||
titleEn: "OUR TEAM SECTIONS",
|
||||
body: "یک پروژه‌ی برنامه‌نویسی موفق نیازمند همکاری متخصصان مختلف است. تیم مشکی از بخش‌های تخصصی زیر تشکیل شده است.",
|
||||
featureLayout: "team",
|
||||
features: [
|
||||
{
|
||||
title: "مدیریت محصول",
|
||||
titleEn: "PRODUCT MANAGER",
|
||||
icon: `${ICONS}/1.png`,
|
||||
description:
|
||||
"تحلیل و ارزیابی پروژه، تشخیص نیازها و ترسیم نقشه‌ی راه. مدیر محصول در تمام مسیر رابط بین کارفرما و تیم اجرایی خواهد بود.",
|
||||
},
|
||||
{
|
||||
title: "طراحی رابط کاربری و پروتوتایپ",
|
||||
titleEn: "UI/UX AND PROTOTYPING",
|
||||
icon: `${ICONS}/2.png`,
|
||||
description:
|
||||
"تیم طراحی یک نسخه‌ی شبیه‌سازی‌شده از پروژه آماده می‌کند تا پیش از توسعه، تصویر کاملی از محصول نهایی داشته باشید.",
|
||||
},
|
||||
{
|
||||
title: "توسعه‌ی نرم‌افزار",
|
||||
titleEn: "DEVELOPMENT",
|
||||
icon: `${ICONS}/3.png`,
|
||||
description:
|
||||
"پس از تایید پروتوتایپ، تیم برنامه‌نویسی شامل بک‌اند، فرانت‌اند و DevOps وارد عمل می‌شود.",
|
||||
},
|
||||
{
|
||||
title: "مدیریت سرور",
|
||||
titleEn: "DEVOPS",
|
||||
icon: `${ICONS}/4.png`,
|
||||
description:
|
||||
"انتخاب درست سرور، راه‌اندازی و مراقبت دائم. سرعت، پایداری و مقرون‌به‌صرفگی از ویژگی‌های کلیدی یک سرور خوب است.",
|
||||
},
|
||||
{
|
||||
title: "کنترل کیفیت",
|
||||
titleEn: "QUALITY ASSURANCE",
|
||||
icon: `${CDN}/kjzjgFvKxZ.png`,
|
||||
description:
|
||||
"فرآیند رفت‌وبرگشتی بررسی و اصلاح، تا پروژه به وضعیت مطلوب برای ارائه به کارفرما برسد.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "طراحی اختصاصی محیط مدیریت",
|
||||
titleEn: "DASHBOARD DESIGN",
|
||||
body: "در پروژه‌های اختصاصی ما محیط ادمین را نیز بر اساس نظر شما طراحی می‌کنیم. محیط ادمین رگ حیات یک پروژه است؛ امکانات آن، نحوه‌ی تعامل با مشتری، مدیریت ادمین‌های سیستم، مدیریت محصولات، مسائل مالی و بسیاری موارد دیگر.",
|
||||
image: `${CDN}/z1ovCzjaqp.png`,
|
||||
},
|
||||
]}
|
||||
injectAfter={1}
|
||||
inject={<WebsiteCountries />}
|
||||
>
|
||||
<WebsiteProjects />
|
||||
</ServicePageLayout>
|
||||
);
|
||||
}
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,47 @@
|
||||
import { images } from "@/data/assets";
|
||||
|
||||
export function AppSection() {
|
||||
return (
|
||||
<section
|
||||
id="app"
|
||||
className="relative overflow-hidden border-t border-line/30 bg-[linear-gradient(180deg,#fafbfc_0%,#f0f2f5_50%,#f6f7f9_100%)]"
|
||||
>
|
||||
<div className="relative mx-auto grid max-w-7xl items-center gap-12 px-5 py-24 lg:grid-cols-2 lg:gap-16 lg:px-8 lg:py-32">
|
||||
<div className="reveal order-2 lg:order-1">
|
||||
<h2 className="mb-4 text-[clamp(1.15rem,3.2vw,2.5rem)] font-normal tracking-tight text-ink">
|
||||
طراحی و توسعه‌ی اپلیکیشن
|
||||
</h2>
|
||||
<p className="latin mb-6 text-xs uppercase tracking-[0.2em] text-accent">
|
||||
Application Develop
|
||||
</p>
|
||||
<p className="mb-4 text-lg font-medium leading-9 text-ink-soft">
|
||||
فکر می‌کنید وقتش هست برند شما در تلفن همراه مخاطبان باشد؟
|
||||
</p>
|
||||
<p className="text-body mb-10 max-w-lg text-sm leading-8 text-muted md:text-base">
|
||||
برای بعضی مقاصد، اپلیکیشن فوق‌العاده است؛ مثلاً وقتی می‌خواهید کاربر در
|
||||
سریع‌ترین زمان به خدمات یا محصولات شما دسترسی پیدا کند، یا به ابزارهایی
|
||||
مثل موقعیت و دوربین گوشی نیاز دارید. یک اپلیکیشن خوب، راحتی و وفاداری
|
||||
بیشتر کاربران را به همراه دارد.
|
||||
</p>
|
||||
<a
|
||||
href="#contact"
|
||||
className="btn-primary inline-flex rounded-full px-6 py-3.5 text-sm"
|
||||
>
|
||||
با ما تماس بگیرید
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="reveal reveal-delay-1 order-1 relative mx-auto w-full max-w-md lg:order-2 lg:max-w-none">
|
||||
<div className="absolute -inset-4 rounded-[2rem] bg-white/50 blur-xl" />
|
||||
<div className="relative aspect-[4/5]">
|
||||
<img
|
||||
src={images.heroApp}
|
||||
alt="طراحی و توسعه‌ی اپلیکیشن"
|
||||
className="h-full w-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { posts } from "@/data/home";
|
||||
|
||||
export function BlogSection() {
|
||||
return (
|
||||
<section id="blog" className="border-t border-line/60 py-24 lg:py-32">
|
||||
<div className="mx-auto max-w-7xl px-5 lg:px-8">
|
||||
<div className="reveal mb-14 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<h2 className="text-[clamp(1.15rem,3.2vw,2.5rem)] font-normal tracking-tight text-ink">
|
||||
رشدنامه، آموزشی و انگیزشی
|
||||
</h2>
|
||||
<p className="latin mt-3 text-xs uppercase tracking-[0.2em] text-muted">
|
||||
Our Blog
|
||||
</p>
|
||||
</div>
|
||||
<p className="max-w-sm text-sm text-muted">
|
||||
با محتوای مشکی همیشه به‌روز باشید.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{posts.map((post, index) => (
|
||||
<article
|
||||
key={post.title}
|
||||
className={`reveal group ${
|
||||
index % 3 === 1
|
||||
? "reveal-delay-1"
|
||||
: index % 3 === 2
|
||||
? "reveal-delay-2"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<a href="#blog" className="block">
|
||||
<div className="relative mb-4 aspect-[4/3] overflow-hidden rounded-2xl bg-paper-deep">
|
||||
<img
|
||||
src={post.image}
|
||||
alt=""
|
||||
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="group-text-hover mb-2 text-lg font-normal leading-8 text-ink">
|
||||
{post.title}
|
||||
</h3>
|
||||
<p className="text-sm leading-7 text-muted">{post.excerpt}</p>
|
||||
</a>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { images } from "@/data/assets";
|
||||
|
||||
export function CmsSection() {
|
||||
return (
|
||||
<section id="cms" className="relative overflow-hidden bg-white py-24 lg:py-32">
|
||||
<div className="mx-auto grid max-w-7xl items-center gap-12 px-5 lg:grid-cols-2 lg:gap-16 lg:px-8">
|
||||
<div className="reveal relative mx-auto w-full max-w-lg">
|
||||
<div className="absolute inset-8 rounded-[2rem] bg-paper-deep/40 blur-xl" />
|
||||
<div className="relative aspect-[5/4]">
|
||||
<img
|
||||
src={images.heroCms}
|
||||
alt="سیستم‌های مدیریت یکپارچه"
|
||||
className="h-full w-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="reveal reveal-delay-1">
|
||||
<h2 className="mb-4 text-[clamp(1.15rem,3.2vw,2.5rem)] font-normal tracking-tight text-ink">
|
||||
سیستم‌های مدیریت یکپارچه
|
||||
</h2>
|
||||
<p className="latin mb-6 text-xs uppercase tracking-[0.2em] text-muted">
|
||||
Integrated Management System
|
||||
</p>
|
||||
<p className="text-body mb-6 max-w-xl text-sm leading-8 text-ink-soft md:text-base">
|
||||
سیستم مدیریت یکپارچه ترکیبی از سیستم‌هایی است که برای مدیریت سازمان
|
||||
نیاز دارید؛ از فروش و صندوق فروشگاهی، حسابداری و امور مالی، باشگاه
|
||||
مشتریان تا مدیریت انبار. Meshkee.cms طوری طراحی شده که سیستم مدیریت
|
||||
داخلی شما با وبسایت و اپلیکیشن یکپارچه عمل کند — مثلاً موجودی یا قیمت
|
||||
کالا به‌صورت خودکار در محیط آنلاین هم اعمال می‌شود.
|
||||
</p>
|
||||
<p className="text-body mb-10 max-w-xl text-sm leading-8 text-muted">
|
||||
سیستم‌های مدیریتی منسجم می‌توانند در نظم و کارآمدی سازمان‌تان کنار شما
|
||||
باشند.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<a
|
||||
href="#contact"
|
||||
className="btn-primary rounded-full px-6 py-3.5 text-sm"
|
||||
>
|
||||
با ما تماس بگیرید
|
||||
</a>
|
||||
<a
|
||||
href="#contact"
|
||||
className="link-hover rounded-full px-5 py-3.5 text-sm text-ink-soft"
|
||||
>
|
||||
دوست دارم بیشتر بدونم
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
"use client";
|
||||
|
||||
import { site } from "@/data/home";
|
||||
|
||||
export function ContactSection() {
|
||||
return (
|
||||
<section id="contact" className="relative overflow-hidden bg-ink text-surface">
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_80%_20%,rgba(196,77,184,0.22),transparent_50%)]" />
|
||||
|
||||
<div className="relative mx-auto grid max-w-7xl gap-14 px-5 py-24 lg:grid-cols-[1fr_1.1fr] lg:px-8 lg:py-32">
|
||||
<div className="reveal">
|
||||
<p className="mb-3 text-sm text-white/55">شما تماس بگیرید …</p>
|
||||
<a
|
||||
href={site.phoneHref}
|
||||
className="latin link-hover mb-8 block text-4xl font-bold tracking-tight text-white md:text-5xl"
|
||||
dir="ltr"
|
||||
>
|
||||
{site.phone}
|
||||
</a>
|
||||
<p className="mb-2 text-sm text-white/55">آدرس</p>
|
||||
<p className="max-w-sm leading-8 text-white/80">{site.address}</p>
|
||||
</div>
|
||||
|
||||
<div className="reveal reveal-delay-1 rounded-[1.75rem] border border-white/10 bg-white/5 p-6 backdrop-blur-sm md:p-8">
|
||||
<h2 className="mb-2 text-2xl font-bold md:text-3xl">تماس با ما</h2>
|
||||
<p className="mb-8 text-sm text-white/60">
|
||||
ما همیشه دنبال دوستای جدید هستیم — یا ما خدمتتون تماس بگیریم.
|
||||
</p>
|
||||
|
||||
<form className="grid gap-4" onSubmit={(e) => e.preventDefault()}>
|
||||
<label className="grid gap-2 text-sm">
|
||||
<span className="text-white/70">نام</span>
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="نام شما"
|
||||
className="rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-surface outline-none transition placeholder:text-white/30 focus:border-accent"
|
||||
/>
|
||||
</label>
|
||||
<label className="grid gap-2 text-sm">
|
||||
<span className="text-white/70">شماره تماس</span>
|
||||
<input
|
||||
name="phone"
|
||||
type="tel"
|
||||
placeholder="۰۹۱۲…"
|
||||
className="rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-surface outline-none transition placeholder:text-white/30 focus:border-accent"
|
||||
dir="ltr"
|
||||
/>
|
||||
</label>
|
||||
<label className="grid gap-2 text-sm">
|
||||
<span className="text-white/70">پیام</span>
|
||||
<textarea
|
||||
name="message"
|
||||
rows={4}
|
||||
placeholder="چطور می‌تونیم کمکتون کنیم؟"
|
||||
className="resize-none rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-surface outline-none transition placeholder:text-white/30 focus:border-accent"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-primary mt-2 rounded-full px-6 py-3.5 text-sm font-medium"
|
||||
>
|
||||
منتظر تماس هستم
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import Link from "next/link";
|
||||
import { nav, site } from "@/data/home";
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-line/70 bg-surface">
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-10 px-5 py-12 lg:flex-row lg:items-start lg:justify-between lg:px-8">
|
||||
<div>
|
||||
<p className="mb-2 text-2xl font-black text-ink">{site.nameFa}</p>
|
||||
<p className="latin text-xs uppercase tracking-[0.18em] text-muted">
|
||||
{site.taglineEn}
|
||||
</p>
|
||||
<p className="mt-4 max-w-xs text-sm leading-7 text-muted">
|
||||
تیم برنامه‌نویسی و تجارت الکترونیک مشکی
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-x-6 gap-y-3 text-sm text-ink-soft">
|
||||
{nav.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="transition link-hover"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-muted" dir="ltr">
|
||||
<a href={site.phoneHref} className="block transition hover:text-ink">
|
||||
{site.phone}
|
||||
</a>
|
||||
<p className="mt-2 max-w-xs text-right" dir="rtl">
|
||||
{site.address}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-line/70 py-5 text-center text-xs text-muted">
|
||||
© 2026 Meshkee — مشکی
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
export function FramedImage({
|
||||
src,
|
||||
alt = "",
|
||||
aspect = "natural",
|
||||
offset = false,
|
||||
}: {
|
||||
src: string;
|
||||
alt?: string;
|
||||
aspect?: "square" | "natural";
|
||||
offset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="relative mx-auto w-full">
|
||||
{offset ? (
|
||||
<div
|
||||
className="absolute -bottom-3 -left-3 h-[calc(100%-12px)] w-[calc(100%-12px)] rounded-2xl bg-[#EBEDF0]"
|
||||
aria-hidden
|
||||
/>
|
||||
) : null}
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
className={`relative w-full rounded-2xl ${
|
||||
aspect === "square"
|
||||
? "aspect-square object-cover"
|
||||
: "object-contain"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
|
||||
const CDN =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/meshkee_SEEpb1zypk/assets";
|
||||
|
||||
export const graphicBrands = [
|
||||
{
|
||||
nameFa: "فرخ وین",
|
||||
nameEn: "FARROKH WIN",
|
||||
logo: `${CDN}/files/tUNXxKZYdG.png`,
|
||||
},
|
||||
{
|
||||
nameFa: "رستوران نمونه",
|
||||
nameEn: "NEMOONEH RESTAURANT",
|
||||
logo: `${CDN}/files/HUMX0LgwBX.png`,
|
||||
},
|
||||
{
|
||||
nameFa: "رستوران پرالین",
|
||||
nameEn: "PERALIN",
|
||||
logo: `${CDN}/files/pmrx1c9FZL.png`,
|
||||
},
|
||||
{
|
||||
nameFa: "فروشگاه کارنو",
|
||||
nameEn: "CARNOW",
|
||||
logo: `${CDN}/files/ZQY2e6T3iC.png`,
|
||||
},
|
||||
{
|
||||
nameFa: "رستوران خاش پز",
|
||||
nameEn: "KHASH PAZ",
|
||||
logo: `${CDN}/files/ZDRTPm468U.png`,
|
||||
},
|
||||
{
|
||||
nameFa: "قنادی بلوط",
|
||||
nameEn: "BALOUT",
|
||||
logo: `${CDN}/files/kp7mWiDY7m.png`,
|
||||
},
|
||||
];
|
||||
|
||||
export const cmsBrands = [
|
||||
{
|
||||
nameFa: "طلا و جواهرات ایوبی فخیم",
|
||||
nameEn: "AYOUBIFAKHIM",
|
||||
logo: `${CDN}/img/brands/2.png`,
|
||||
},
|
||||
{
|
||||
nameFa: "وبسایت لیوتل",
|
||||
nameEn: "LIOTELL",
|
||||
logo: `${CDN}/files/gNtiIymDQa.png`,
|
||||
},
|
||||
{
|
||||
nameFa: "وبسایت دکتر سیف",
|
||||
nameEn: "DR SAFE",
|
||||
logo: `${CDN}/files/xbxAHqiJrm.png`,
|
||||
},
|
||||
{
|
||||
nameFa: "وبسایت صنیع خانی",
|
||||
nameEn: "SANI KHANI",
|
||||
logo: `${CDN}/files/rdLLonb3et.png`,
|
||||
},
|
||||
{
|
||||
nameFa: "وبسایت عسل جهانیان",
|
||||
nameEn: "ASAL JAHANIAN",
|
||||
logo: `${CDN}/files/Lkhnnnh7Zs.png`,
|
||||
},
|
||||
];
|
||||
|
||||
interface BrandItem {
|
||||
nameFa: string;
|
||||
nameEn: string;
|
||||
logo: string;
|
||||
}
|
||||
|
||||
interface GraphicBrandsProps {
|
||||
brands?: BrandItem[];
|
||||
eyebrow?: string;
|
||||
title?: string;
|
||||
titleEn?: string;
|
||||
}
|
||||
|
||||
export function GraphicBrands({
|
||||
brands = graphicBrands,
|
||||
eyebrow = "همکاری با سازمان‌های معتبر",
|
||||
title = "سازمان‌هایی که با آن‌ها همکاری کرده‌ایم",
|
||||
titleEn = "OUR CUSTOMERS",
|
||||
}: GraphicBrandsProps) {
|
||||
const [active, setActive] = useState(0);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const trackRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const centerSlide = useCallback(() => {
|
||||
const container = containerRef.current;
|
||||
const track = trackRef.current;
|
||||
if (!container || !track) return;
|
||||
|
||||
const slide = track.children[active] as HTMLElement | undefined;
|
||||
if (!slide) return;
|
||||
|
||||
const containerCenter = container.offsetWidth / 2;
|
||||
const slideCenter = slide.offsetLeft + slide.offsetWidth / 2;
|
||||
track.style.transform = `translateX(${containerCenter - slideCenter}px)`;
|
||||
}, [active]);
|
||||
|
||||
useEffect(() => {
|
||||
centerSlide();
|
||||
window.addEventListener("resize", centerSlide);
|
||||
return () => window.removeEventListener("resize", centerSlide);
|
||||
}, [centerSlide]);
|
||||
|
||||
useEffect(() => {
|
||||
if (brands.length === 0) return;
|
||||
const timer = window.setInterval(() => {
|
||||
setActive((prev) => (prev + 1) % brands.length);
|
||||
}, 2000);
|
||||
|
||||
return () => window.clearInterval(timer);
|
||||
}, [brands.length]);
|
||||
|
||||
useEffect(() => {
|
||||
setActive(0);
|
||||
}, [brands]);
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden border-t border-line/30 bg-[#FAFAFA] py-12 lg:py-16">
|
||||
<div className="mx-auto max-w-7xl px-5 pt-4 lg:px-8 lg:pt-6">
|
||||
<div className="reveal mb-8 min-w-0 text-center lg:mb-10">
|
||||
<p className="mb-3 text-sm text-muted">{eyebrow}</p>
|
||||
<h2 className="text-[clamp(1.05rem,3vw,2rem)] font-normal tracking-tight text-ink">
|
||||
{title}
|
||||
</h2>
|
||||
<p className="latin mt-3 text-[11px] uppercase tracking-[0.35em] text-muted">
|
||||
{titleEn}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref={containerRef} className="overflow-hidden pb-2">
|
||||
<div
|
||||
ref={trackRef}
|
||||
className="flex items-start gap-[15px] transition-transform duration-1000 ease-in-out will-change-transform lg:gap-20"
|
||||
dir="rtl"
|
||||
>
|
||||
{brands.map((brand, index) => (
|
||||
<figure
|
||||
key={brand.nameEn}
|
||||
className={`w-[42vw] shrink-0 text-center transition-opacity duration-500 sm:w-[180px] md:w-[200px] lg:w-[220px] ${
|
||||
index === active ? "opacity-100" : "opacity-30"
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={brand.logo}
|
||||
alt={brand.nameFa}
|
||||
className="mx-auto w-[60%] object-contain"
|
||||
onLoad={centerSlide}
|
||||
/>
|
||||
<figcaption className="mt-3">
|
||||
<h3 className="text-sm font-normal text-ink">{brand.nameFa}</h3>
|
||||
<p className="latin mt-1 text-[10px] font-light uppercase tracking-[0.3em] text-muted">
|
||||
{brand.nameEn}
|
||||
</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex items-center justify-center gap-2 pb-4">
|
||||
{brands.map((brand, index) => (
|
||||
<button
|
||||
key={brand.nameEn}
|
||||
type="button"
|
||||
aria-label={`نمایش ${brand.nameFa}`}
|
||||
onClick={() => setActive(index)}
|
||||
className={`h-2 rounded-full transition-all duration-300 ${
|
||||
index === active ? "w-6 bg-[#5c5c5c]" : "w-2 bg-[#777]"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { nav, site } from "@/data/home";
|
||||
import { images } from "@/data/assets";
|
||||
|
||||
const socials = [
|
||||
{ label: "اینستاگرام", href: "https://instagram.com", icon: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" },
|
||||
{ label: "یوتیوب", href: "https://youtube.com", icon: "M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" },
|
||||
{ label: "لینکدین", href: "https://linkedin.com", icon: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" },
|
||||
{ label: "فیسبوک", href: "https://facebook.com", icon: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" },
|
||||
{ label: "آپارات", href: "https://aparat.com", icon: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4a8 8 0 110 16A8 8 0 0112 4zm0 2a6 6 0 100 12A6 6 0 0012 6zm-1 3l5 3-5 3V9z" },
|
||||
];
|
||||
|
||||
export function Header() {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="absolute inset-x-0 top-0 z-50">
|
||||
{/* Top bar: social icons + quick links */}
|
||||
<div className="border-b border-line/50 bg-white/80 backdrop-blur-sm">
|
||||
<div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-2 lg:px-8">
|
||||
<div className="flex items-center gap-3">
|
||||
{socials.map((s) => (
|
||||
<a
|
||||
key={s.label}
|
||||
href={s.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={s.label}
|
||||
className="text-muted transition hover:text-ink"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
className="h-[15px] w-[15px]"
|
||||
aria-hidden
|
||||
>
|
||||
<path d={s.icon} />
|
||||
</svg>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="hidden items-center gap-4 md:flex">
|
||||
<Link href="/about" className="text-xs text-muted transition hover:text-ink">
|
||||
درباره ما
|
||||
</Link>
|
||||
<Link href="#contact" className="text-xs text-muted transition hover:text-ink">
|
||||
تماس با ما
|
||||
</Link>
|
||||
<a
|
||||
href={site.phoneHref}
|
||||
className="latin text-xs text-muted transition hover:text-ink"
|
||||
dir="ltr"
|
||||
>
|
||||
{site.phone}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main nav */}
|
||||
<div className="border-b border-line/40 bg-white/80 backdrop-blur-sm">
|
||||
<div className="mx-auto flex max-w-7xl items-center gap-4 px-5 py-3 lg:px-8">
|
||||
{/* Logo + nav grouped on the right (RTL) */}
|
||||
<div className="flex min-w-0 items-center gap-5 lg:gap-8">
|
||||
<Link href="/" className="shrink-0" aria-label={site.nameFa}>
|
||||
<img
|
||||
src={images.brandMark}
|
||||
alt={site.nameFa}
|
||||
className="h-14 w-14 object-contain lg:h-[4.5rem] lg:w-[4.5rem]"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden min-w-0 items-center gap-0.5 lg:flex">
|
||||
{nav.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="whitespace-nowrap px-2.5 py-2 text-[13px] text-ink-soft transition hover:text-ink"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Login + CTA on the left */}
|
||||
<div className="hidden items-center gap-2 md:flex">
|
||||
<a
|
||||
href="/login"
|
||||
className="flex items-center gap-1.5 rounded-full border border-line px-3.5 py-2 text-xs text-ink-soft transition hover:border-ink hover:text-ink"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-3.5 w-3.5" aria-hidden>
|
||||
<circle cx="12" cy="8" r="4"/>
|
||||
<path d="M4 20c0-4 3.582-7 8-7s8 3 8 7"/>
|
||||
</svg>
|
||||
ورود
|
||||
</a>
|
||||
<a
|
||||
href="#contact"
|
||||
className="btn-primary rounded-full px-4 py-2 text-sm"
|
||||
>
|
||||
تماس با ما
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full border border-line bg-white/70 lg:hidden"
|
||||
aria-label={open ? "بستن منو" : "باز کردن منو"}
|
||||
aria-expanded={open}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
<span className="sr-only">منو</span>
|
||||
<span className="flex w-4 flex-col gap-1.5">
|
||||
<span className={`h-px w-full bg-ink transition ${open ? "translate-y-[3.5px] rotate-45" : ""}`} />
|
||||
<span className={`h-px w-full bg-ink transition ${open ? "opacity-0" : ""}`} />
|
||||
<span className={`h-px w-full bg-ink transition ${open ? "-translate-y-[3.5px] -rotate-45" : ""}`} />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
<div className="border-t border-line/70 bg-white/95 px-5 py-4 backdrop-blur-md lg:hidden">
|
||||
<nav className="flex flex-col gap-1">
|
||||
{nav.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="rounded-xl px-3 py-3 text-sm text-ink-soft hover:bg-[#FAFAFA]"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
<div className="mt-3 flex gap-2">
|
||||
<a
|
||||
href="/login"
|
||||
className="flex flex-1 items-center justify-center gap-1.5 rounded-full border border-line py-3 text-sm text-ink-soft"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
ورود
|
||||
</a>
|
||||
<a
|
||||
href="#contact"
|
||||
className="btn-primary flex-1 rounded-full py-3 text-center text-sm"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
تماس با ما
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { site } from "@/data/home";
|
||||
import { images } from "@/data/assets";
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-white">
|
||||
<div className="mx-auto grid max-w-7xl items-center gap-8 px-5 pb-12 pt-32 lg:grid-cols-2 lg:gap-10 lg:px-8 lg:pb-16 lg:pt-36">
|
||||
<div className="order-2 max-w-xl lg:order-1">
|
||||
<p
|
||||
className="mb-5 text-sm text-muted"
|
||||
style={{ animation: "rise-in 0.9s ease both" }}
|
||||
>
|
||||
راهکارهای مدرن برای تجارت شما
|
||||
</p>
|
||||
|
||||
<h1
|
||||
className="mb-4 text-[clamp(1.15rem,3.2vw,2rem)] font-normal tracking-tight text-ink"
|
||||
style={{ animation: "rise-in 1s ease both 0.08s" }}
|
||||
>
|
||||
{site.fullTitle}
|
||||
</h1>
|
||||
|
||||
<p
|
||||
className="latin mb-10 text-sm uppercase text-muted md:text-base"
|
||||
style={{ animation: "rise-in 1s ease both 0.16s" }}
|
||||
>
|
||||
{site.taglineEn}
|
||||
</p>
|
||||
|
||||
<div
|
||||
className="flex flex-wrap items-center gap-4"
|
||||
style={{ animation: "rise-in 1s ease both 0.3s" }}
|
||||
>
|
||||
<a
|
||||
href="#services"
|
||||
className="btn-primary inline-flex items-center gap-2 rounded-full px-6 py-3.5 text-sm"
|
||||
>
|
||||
بریم سراغ راه‌کارها
|
||||
<span aria-hidden className="text-base leading-none">
|
||||
↓
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href={site.phoneHref}
|
||||
className="link-hover inline-flex items-center gap-2 text-sm text-ink-soft"
|
||||
>
|
||||
باهام تماس بگیرید
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="order-1 relative lg:order-2"
|
||||
style={{ animation: "fade-in 1.2s ease both 0.2s" }}
|
||||
>
|
||||
<div className="pointer-events-none absolute inset-8 rounded-full bg-[radial-gradient(circle,var(--glow),transparent_70%)] blur-2xl" />
|
||||
<div className="animate-float relative mx-auto aspect-square w-full max-w-[560px]">
|
||||
<img
|
||||
src={images.hero}
|
||||
alt="تیم تجارت الکترونیک مشکی"
|
||||
className="h-full w-full object-contain object-center drop-shadow-[0_30px_60px_rgba(14,17,22,0.14)]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { mediaItems } from "@/data/home";
|
||||
|
||||
export function MediaSection() {
|
||||
return (
|
||||
<section id="media" className="bg-surface py-24 lg:py-32">
|
||||
<div className="mx-auto max-w-7xl px-5 lg:px-8">
|
||||
<div className="reveal mb-14 max-w-2xl">
|
||||
<h2 className="text-[clamp(1.15rem,3.2vw,2.5rem)] font-normal tracking-tight text-ink">
|
||||
گرافیک و رسانه
|
||||
</h2>
|
||||
<p className="latin mt-3 text-xs uppercase tracking-[0.2em] text-muted">
|
||||
Graphic And Media — Your Identity Matters
|
||||
</p>
|
||||
<p className="text-body mt-6 text-sm leading-8 text-ink-soft md:text-base">
|
||||
هویت بصری درست، تکمیل‌کننده‌ی مسیر موفقیت کسب‌وکار شماست. طراحی لوگو،
|
||||
سربرگ، کارت ویزیت، پاکت نامه، فولدر و سایر آیتم‌های هویت بصری، به‌همراه
|
||||
رابط کاربری وبسایت و اپلیکیشن، بخش جدایی‌ناپذیر پروژه‌های IT است. در
|
||||
حوزهٔ رسانه نیز عکاسی صنعتی، تبلیغاتی، معماری و ساخت تیزر از خدمات ماست.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 md:grid-cols-3 md:gap-4 lg:grid-cols-4">
|
||||
{mediaItems.map((item, index) => (
|
||||
<figure
|
||||
key={`${item.title}-${index}`}
|
||||
className={`reveal group relative overflow-hidden rounded-xl ${
|
||||
index === 1 || index === 4
|
||||
? "row-span-2 min-h-[280px] md:min-h-[420px]"
|
||||
: "min-h-[160px] md:min-h-[200px]"
|
||||
} ${index % 3 === 1 ? "reveal-delay-1" : index % 3 === 2 ? "reveal-delay-2" : ""}`}
|
||||
>
|
||||
<img
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
className="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-105"
|
||||
/>
|
||||
<figcaption className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-ink/80 to-transparent p-4 pt-12 text-sm text-white opacity-0 transition group-hover:opacity-100">
|
||||
{item.title}
|
||||
</figcaption>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import { portfolio } from "@/data/home";
|
||||
|
||||
const loopItems = [...portfolio, ...portfolio];
|
||||
|
||||
export function Portfolio() {
|
||||
return (
|
||||
<section id="portfolio" className="relative overflow-hidden bg-white py-24 lg:py-32">
|
||||
<div className="mx-auto max-w-7xl px-5 lg:px-8">
|
||||
<div className="reveal mb-10 max-w-2xl md:mb-14">
|
||||
<h2 className="text-[clamp(1.15rem,3.2vw,2.5rem)] font-normal tracking-tight text-ink">
|
||||
نمونه‌هایی از وبسایت‌های طراحی‌شده
|
||||
</h2>
|
||||
<p className="latin mt-3 text-xs uppercase tracking-[0.2em] text-muted">
|
||||
Website Design
|
||||
</p>
|
||||
<p className="text-body mt-6 max-w-xl text-sm leading-8 text-ink-soft md:text-base">
|
||||
وبسایت بستری برای معرفی شما، فروش محصولات، خبررسانی و ارتباط بهتر با
|
||||
مشتریان است؛ مهم‌تر از همه، استراتژی استفاده از آن است.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="carousel-mask overflow-hidden" dir="ltr">
|
||||
<div className="carousel-track flex w-max gap-5 px-5 lg:px-[max(1.25rem,calc((100vw-80rem)/2+2rem))]">
|
||||
{loopItems.map((item, index) => (
|
||||
<figure
|
||||
key={`${item.image}-${index}`}
|
||||
className="w-[min(78vw,320px)] shrink-0 rounded-2xl border border-line/70 bg-[linear-gradient(180deg,#f7f8fa_0%,#e8edf3_100%)] p-3 sm:w-[300px] lg:w-[340px]"
|
||||
>
|
||||
<div className="relative h-[min(70vh,620px)] overflow-hidden rounded-xl bg-white">
|
||||
<img
|
||||
src={item.image}
|
||||
alt=""
|
||||
className="h-full w-full object-cover object-top"
|
||||
/>
|
||||
</div>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-10 flex max-w-7xl flex-wrap items-center gap-4 px-5 lg:px-8">
|
||||
<a
|
||||
href="#contact"
|
||||
className="link-hover rounded-full border border-ink/15 bg-white px-5 py-3 text-sm text-ink border-hover"
|
||||
>
|
||||
دوست دارم بیشتر بدونم
|
||||
</a>
|
||||
<a href="#contact" className="link-hover text-sm text-muted">
|
||||
تعرفه‌های طراحی
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
|
||||
export function RevealObserver() {
|
||||
useEffect(() => {
|
||||
const elements = document.querySelectorAll(".reveal");
|
||||
if (!elements.length) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (const entry of entries) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("is-visible");
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
}
|
||||
},
|
||||
{ threshold: 0.16, rootMargin: "0px 0px -8% 0px" },
|
||||
);
|
||||
|
||||
elements.forEach((el) => observer.observe(el));
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
const CDN =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/meshkee_SEEpb1zypk/assets/files";
|
||||
|
||||
const cities = [
|
||||
{
|
||||
nameFa: "تهران",
|
||||
nameEn: "tehran",
|
||||
image: `${CDN}/0tvhyuFDLP.webp`,
|
||||
cols: "lg:col-span-8",
|
||||
},
|
||||
{
|
||||
nameFa: "قم",
|
||||
nameEn: "qom",
|
||||
image: `${CDN}/9xJXfsbuxO.webp`,
|
||||
cols: "lg:col-span-4",
|
||||
},
|
||||
{
|
||||
nameFa: "مشهد",
|
||||
nameEn: "mashhad",
|
||||
image: `${CDN}/inzY9vuguj.webp`,
|
||||
cols: "lg:col-span-4",
|
||||
},
|
||||
{
|
||||
nameFa: "بوشهر",
|
||||
nameEn: "booshehr",
|
||||
image: `${CDN}/Gm0XROiWuC.webp`,
|
||||
cols: "lg:col-span-4",
|
||||
},
|
||||
{
|
||||
nameFa: "ساری",
|
||||
nameEn: "sari",
|
||||
image: `${CDN}/C5UA21d0NM.webp`,
|
||||
cols: "lg:col-span-4",
|
||||
},
|
||||
];
|
||||
|
||||
export function SeoCities() {
|
||||
return (
|
||||
<section className="relative border-t border-line/30 bg-[#FAFAFA] py-16 lg:py-24">
|
||||
<div className="mx-auto max-w-7xl px-5 lg:px-8">
|
||||
<div className="reveal mb-10 min-w-0">
|
||||
<h2 className="text-[clamp(1.05rem,3vw,2rem)] font-normal tracking-tight text-ink">
|
||||
مشتریان ما از تمام ایران می‌باشند
|
||||
</h2>
|
||||
<p className="latin mt-3 text-[11px] uppercase tracking-widest text-muted">
|
||||
COOPERATION
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-12 gap-4 lg:gap-5">
|
||||
{cities.map((city, index) => (
|
||||
<div
|
||||
key={city.nameEn}
|
||||
className={`reveal col-span-12 ${city.cols} ${
|
||||
index % 2 === 1
|
||||
? "reveal-delay-1"
|
||||
: index % 3 === 2
|
||||
? "reveal-delay-2"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="tile-item overflow-hidden rounded-2xl bg-[#F0F1F3] p-3">
|
||||
<img
|
||||
src={city.image}
|
||||
alt={city.nameFa}
|
||||
className="w-full rounded-xl"
|
||||
/>
|
||||
<div className="mt-4 flex items-center justify-between pe-5 ps-2">
|
||||
<h3 className="mb-0 text-sm font-normal text-ink">
|
||||
{city.nameFa}
|
||||
</h3>
|
||||
<span className="latin text-sm lowercase text-muted">
|
||||
{city.nameEn}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,320 @@
|
||||
import Link from "next/link";
|
||||
import { FramedImage } from "@/components/FramedImage";
|
||||
import { Header } from "@/components/Header";
|
||||
import { Footer } from "@/components/Footer";
|
||||
import { RevealObserver } from "@/components/RevealObserver";
|
||||
import { site } from "@/data/home";
|
||||
|
||||
interface Feature {
|
||||
title: string;
|
||||
titleEn?: string;
|
||||
description: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
interface Section {
|
||||
tag?: string;
|
||||
title: string;
|
||||
titleEn?: string;
|
||||
body: string;
|
||||
image?: string;
|
||||
imageFrame?: boolean;
|
||||
eyebrow?: string;
|
||||
headline?: string;
|
||||
features?: Feature[];
|
||||
featureLayout?: "horizontal" | "team";
|
||||
featureColumns?: 2 | 3;
|
||||
}
|
||||
|
||||
interface ServicePageProps {
|
||||
metaTitle: string;
|
||||
tag: string;
|
||||
title: string;
|
||||
titleEn: string;
|
||||
lead: string;
|
||||
heroImage?: string;
|
||||
sections: Section[];
|
||||
injectAfter?: number;
|
||||
inject?: React.ReactNode;
|
||||
injections?: { after: number; node: React.ReactNode }[];
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
function SolutionFeatureCard({ feature }: { feature: Feature }) {
|
||||
return (
|
||||
<div className="group group-border-hover flex h-full gap-3 rounded-2xl border border-line/70 bg-white/90 p-6 transition hover:shadow-[0_16px_40px_rgba(14,17,22,0.06)] md:gap-4 md:p-7">
|
||||
{feature.icon ? (
|
||||
<img
|
||||
src={feature.icon}
|
||||
alt=""
|
||||
width={48}
|
||||
height={48}
|
||||
className="h-12 w-12 shrink-0 object-contain"
|
||||
/>
|
||||
) : null}
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="whitespace-nowrap text-[0.95rem] font-normal text-ink md:text-base">
|
||||
{feature.title}
|
||||
</h3>
|
||||
{feature.titleEn && (
|
||||
<p className="latin mt-0.5 text-[10px] uppercase tracking-wider text-muted">
|
||||
{feature.titleEn}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-body mt-3 w-full text-sm leading-8 text-ink-soft">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TeamFeatureCard({ feature }: { feature: Feature }) {
|
||||
return (
|
||||
<div className="group group-border-hover flex h-full flex-col overflow-hidden rounded-2xl bg-white transition hover:shadow-[0_16px_40px_rgba(14,17,22,0.06)]">
|
||||
<div className="flex items-center gap-4 bg-[#F8F9FA] p-3">
|
||||
{feature.icon ? (
|
||||
<img
|
||||
src={feature.icon}
|
||||
alt=""
|
||||
width={43}
|
||||
height={43}
|
||||
className="h-[43px] w-[43px] shrink-0 object-contain"
|
||||
/>
|
||||
) : null}
|
||||
<div className="min-w-0">
|
||||
<h3 className="mb-1 text-base font-normal text-ink">
|
||||
{feature.title}
|
||||
</h3>
|
||||
{feature.titleEn && (
|
||||
<p className="latin text-[10px] uppercase tracking-[0.35em] text-muted">
|
||||
{feature.titleEn}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-body p-3 text-justify text-[17px] leading-8 text-ink-soft">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeatureCard({
|
||||
feature,
|
||||
layout = "horizontal",
|
||||
}: {
|
||||
feature: Feature;
|
||||
layout?: "horizontal" | "team";
|
||||
}) {
|
||||
if (layout === "team") {
|
||||
return <TeamFeatureCard feature={feature} />;
|
||||
}
|
||||
|
||||
return <SolutionFeatureCard feature={feature} />;
|
||||
}
|
||||
|
||||
export function ServicePageLayout({
|
||||
tag,
|
||||
title,
|
||||
titleEn,
|
||||
lead,
|
||||
heroImage,
|
||||
sections,
|
||||
injectAfter,
|
||||
inject,
|
||||
injections,
|
||||
children,
|
||||
}: ServicePageProps) {
|
||||
const sectionInjections =
|
||||
injections ??
|
||||
(injectAfter !== undefined && inject
|
||||
? [{ after: injectAfter, node: inject }]
|
||||
: []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<RevealObserver />
|
||||
<Header />
|
||||
|
||||
<section className="relative overflow-hidden bg-white pt-40 pb-16 lg:pt-48 lg:pb-20">
|
||||
<div className="mx-auto max-w-7xl px-5 lg:px-8">
|
||||
<div className="grid gap-10 lg:grid-cols-2 lg:items-center lg:gap-16">
|
||||
<div className="min-w-0 max-w-xl">
|
||||
<h1
|
||||
className="mb-3 text-[clamp(1.15rem,3.6vw,2.75rem)] font-normal tracking-tight text-ink"
|
||||
style={{ animation: "rise-in 0.9s ease both 0.06s" }}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
<p
|
||||
className="latin mb-8 text-xs uppercase tracking-widest text-muted"
|
||||
style={{ animation: "rise-in 0.9s ease both 0.12s" }}
|
||||
>
|
||||
{titleEn}
|
||||
</p>
|
||||
<p
|
||||
className="text-body mb-8 text-sm leading-8 text-ink-soft md:text-base"
|
||||
style={{ animation: "rise-in 1s ease both 0.18s" }}
|
||||
>
|
||||
{lead}
|
||||
</p>
|
||||
<a
|
||||
href={site.phoneHref}
|
||||
className="latin link-hover inline-flex text-sm text-ink-soft"
|
||||
dir="ltr"
|
||||
style={{ animation: "rise-in 1s ease both 0.28s" }}
|
||||
>
|
||||
{site.phone}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{heroImage && (
|
||||
<div
|
||||
className="relative hidden lg:block"
|
||||
style={{ animation: "fade-in 1.2s ease both 0.2s" }}
|
||||
>
|
||||
<div className="pointer-events-none absolute inset-8 rounded-full bg-[radial-gradient(circle,var(--glow),transparent_70%)] blur-2xl" />
|
||||
<div className="animate-float relative mx-auto aspect-square w-full max-w-[480px]">
|
||||
<img
|
||||
src={heroImage}
|
||||
alt={title}
|
||||
className="h-full w-full object-contain drop-shadow-[0_24px_48px_rgba(14,17,22,0.12)]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{sections.map((sec, i) => (
|
||||
<div key={i}>
|
||||
<section
|
||||
className={`relative border-t border-line/30 py-16 lg:py-24 ${
|
||||
i % 2 === 0 ? "bg-[#FAFAFA]" : "bg-white"
|
||||
}`}
|
||||
>
|
||||
<div className="mx-auto max-w-7xl px-5 lg:px-8">
|
||||
{sec.image ? (
|
||||
<div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
|
||||
<div className="reveal order-2 min-w-0 lg:order-1">
|
||||
{sec.eyebrow ? (
|
||||
<p className="mb-4 text-sm text-muted">{sec.eyebrow}</p>
|
||||
) : null}
|
||||
<h2 className="text-[clamp(1.05rem,3vw,2rem)] font-normal tracking-tight text-ink">
|
||||
{sec.title}
|
||||
</h2>
|
||||
{sec.titleEn && (
|
||||
<p className="latin mt-3 text-[11px] uppercase tracking-widest text-muted">
|
||||
{sec.titleEn}
|
||||
</p>
|
||||
)}
|
||||
{sec.headline ? (
|
||||
<h2 className="mt-8 text-[clamp(1rem,2.5vw,1.65rem)] font-normal tracking-tight text-ink">
|
||||
{sec.headline}
|
||||
</h2>
|
||||
) : null}
|
||||
<p className="text-body mt-5 text-sm leading-8 text-ink-soft md:text-base">
|
||||
{sec.body}
|
||||
</p>
|
||||
</div>
|
||||
<div className="reveal reveal-delay-1 order-1 relative mx-auto w-full lg:order-2">
|
||||
{sec.imageFrame ? (
|
||||
<FramedImage src={sec.image} alt={sec.title} aspect="natural" />
|
||||
) : (
|
||||
<img
|
||||
src={sec.image}
|
||||
alt={sec.title}
|
||||
className="mx-auto w-full max-w-xl object-contain lg:max-w-none"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="reveal mb-10 min-w-0">
|
||||
<h2 className="text-[clamp(1.05rem,3vw,2rem)] font-normal tracking-tight text-ink">
|
||||
{sec.title}
|
||||
</h2>
|
||||
{sec.titleEn && (
|
||||
<p className="latin mt-3 text-[11px] uppercase tracking-widest text-muted">
|
||||
{sec.titleEn}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-body mt-5 w-full text-sm leading-8 text-ink-soft md:text-base">
|
||||
{sec.body}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sec.features && sec.features.length > 0 && (
|
||||
<ul
|
||||
className={`grid gap-4 lg:gap-5 ${
|
||||
sec.featureColumns === 2
|
||||
? "sm:grid-cols-2"
|
||||
: sec.featureLayout === "team"
|
||||
? "sm:grid-cols-2"
|
||||
: "sm:grid-cols-2 lg:grid-cols-3"
|
||||
} ${sec.image ? "mt-12" : ""}`}
|
||||
>
|
||||
{sec.features.map((f, fi) => (
|
||||
<li
|
||||
key={fi}
|
||||
className={`reveal ${
|
||||
fi % 3 === 1
|
||||
? "reveal-delay-1"
|
||||
: fi % 3 === 2
|
||||
? "reveal-delay-2"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<FeatureCard
|
||||
feature={f}
|
||||
layout={sec.featureLayout ?? "horizontal"}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
{sectionInjections
|
||||
.filter((item) => item.after === i)
|
||||
.map((item, injectionIndex) => (
|
||||
<div key={`inject-${i}-${injectionIndex}`}>{item.node}</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{children}
|
||||
|
||||
<section className="border-t border-line/30 bg-ink py-14 text-center">
|
||||
<div className="mx-auto max-w-2xl px-5">
|
||||
<h2 className="mb-3 text-[clamp(1.1rem,2.8vw,1.75rem)] font-normal text-surface">
|
||||
آماده‌اید شروع کنیم؟
|
||||
</h2>
|
||||
<p className="mb-8 text-sm leading-8 text-surface/60">
|
||||
با تیم مشکی تماس بگیرید تا درباره پروژه‌تان صحبت کنیم.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<a
|
||||
href={site.phoneHref}
|
||||
className="latin inline-flex items-center gap-2 rounded-full bg-white px-6 py-3.5 text-sm text-ink transition hover:[background:var(--brand-gradient)] hover:text-white"
|
||||
dir="ltr"
|
||||
>
|
||||
{site.phone}
|
||||
</a>
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center gap-2 rounded-full border border-surface/20 px-6 py-3.5 text-sm text-surface/80 transition hover:border-surface/60 hover:text-surface"
|
||||
>
|
||||
بازگشت به خانه
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import Link from "next/link";
|
||||
import { services } from "@/data/home";
|
||||
|
||||
export function Services() {
|
||||
return (
|
||||
<section
|
||||
id="services"
|
||||
className="relative border-t border-line/30 bg-[linear-gradient(180deg,#fafafa_0%,#f0f2f5_50%,#fafafa_100%)] py-14 lg:py-20"
|
||||
>
|
||||
<div className="relative mx-auto max-w-7xl px-5 lg:px-8">
|
||||
<div className="reveal mb-10 min-w-0">
|
||||
<h2 className="text-[clamp(1.15rem,3.2vw,2.5rem)] font-normal tracking-tight text-ink">
|
||||
خدمات ما
|
||||
</h2>
|
||||
<p className="latin mt-3 text-xs uppercase tracking-[0.2em] text-muted">
|
||||
Our Solutions
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul className="grid gap-5 sm:grid-cols-2 lg:gap-6">
|
||||
{services.map((service, index) => (
|
||||
<li
|
||||
key={service.title}
|
||||
className={`reveal ${index % 2 === 1 ? "reveal-delay-1" : ""}`}
|
||||
>
|
||||
<Link
|
||||
href={service.href}
|
||||
className="group group-border-hover flex h-full flex-col rounded-2xl border border-line/70 bg-white/90 p-6 transition hover:shadow-[0_16px_40px_rgba(14,17,22,0.06)] md:p-8"
|
||||
>
|
||||
<div className="mb-5 flex items-center gap-3">
|
||||
<img
|
||||
src={service.icon}
|
||||
alt=""
|
||||
width={48}
|
||||
height={48}
|
||||
className="h-12 w-12 shrink-0 object-contain"
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<h3 className="whitespace-nowrap text-[0.95rem] font-normal text-ink md:text-base">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="latin mt-0.5 text-[10px] uppercase tracking-wider text-muted">
|
||||
{service.titleEn}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-body mt-auto text-sm leading-8 text-ink-soft">
|
||||
{service.description}
|
||||
</p>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
const CDN =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/meshkee_SEEpb1zypk/assets";
|
||||
|
||||
export const websiteCountries = [
|
||||
{
|
||||
nameFa: "ایران",
|
||||
nameEn: "iran",
|
||||
image: `${CDN}/files/XV96o9YJXK.webp`,
|
||||
flag: `${CDN}/img/cities/iran-flag.png`,
|
||||
cols: "lg:col-span-8",
|
||||
},
|
||||
{
|
||||
nameFa: "استرالیا",
|
||||
nameEn: "australia",
|
||||
image: `${CDN}/files/NEa3xsnLkf.webp`,
|
||||
flag: `${CDN}/img/cities/australia-flag.png`,
|
||||
cols: "lg:col-span-4",
|
||||
},
|
||||
{
|
||||
nameFa: "امارات",
|
||||
nameEn: "enirates",
|
||||
image: `${CDN}/files/X0Y7csP5LY.webp`,
|
||||
flag: `${CDN}/img/cities/emirates-flag.png`,
|
||||
cols: "lg:col-span-6",
|
||||
},
|
||||
{
|
||||
nameFa: "ژاپن",
|
||||
nameEn: "japan",
|
||||
image: `${CDN}/files/fVx6q5vfUA.webp`,
|
||||
flag: `${CDN}/img/cities/japan-flag.png`,
|
||||
cols: "lg:col-span-6",
|
||||
},
|
||||
];
|
||||
|
||||
export const applicationCountries = [
|
||||
{
|
||||
nameFa: "ایران",
|
||||
nameEn: "iran",
|
||||
image: `${CDN}/files/MrKwuNTRVI.webp`,
|
||||
flag: `${CDN}/img/cities/iran-flag.png`,
|
||||
cols: "lg:col-span-8",
|
||||
},
|
||||
{
|
||||
nameFa: "استرالیا",
|
||||
nameEn: "australia",
|
||||
image: `${CDN}/img/cities/australia.png`,
|
||||
flag: `${CDN}/img/cities/australia-flag.png`,
|
||||
cols: "lg:col-span-4",
|
||||
},
|
||||
{
|
||||
nameFa: "امارات",
|
||||
nameEn: "enirates",
|
||||
image: `${CDN}/img/cities/emirates.png`,
|
||||
flag: `${CDN}/img/cities/emirates-flag.png`,
|
||||
cols: "lg:col-span-6",
|
||||
},
|
||||
{
|
||||
nameFa: "ژاپن",
|
||||
nameEn: "japan",
|
||||
image: `${CDN}/img/cities/japan.png`,
|
||||
flag: `${CDN}/img/cities/japan-flag.png`,
|
||||
cols: "lg:col-span-6",
|
||||
},
|
||||
];
|
||||
|
||||
interface CountryItem {
|
||||
nameFa: string;
|
||||
nameEn: string;
|
||||
image: string;
|
||||
flag: string;
|
||||
cols: string;
|
||||
}
|
||||
|
||||
interface WebsiteCountriesProps {
|
||||
title?: string;
|
||||
titleEn?: string;
|
||||
body?: string;
|
||||
countries?: CountryItem[];
|
||||
}
|
||||
|
||||
export function WebsiteCountries({
|
||||
title = "انجام پروژه در کشورها",
|
||||
titleEn = "COOPERATION",
|
||||
body,
|
||||
countries = websiteCountries,
|
||||
}: WebsiteCountriesProps) {
|
||||
return (
|
||||
<section className="relative border-t border-line/30 bg-white py-16 lg:py-24">
|
||||
<div className="mx-auto max-w-7xl px-5 lg:px-8">
|
||||
<div className="reveal mb-10 min-w-0">
|
||||
<h2 className="text-[clamp(1.05rem,3vw,2rem)] font-normal tracking-tight text-ink">
|
||||
{title}
|
||||
</h2>
|
||||
<p className="latin mt-3 text-[11px] uppercase tracking-widest text-muted">
|
||||
{titleEn}
|
||||
</p>
|
||||
{body ? (
|
||||
<p className="text-body mt-5 max-w-3xl text-sm leading-8 text-ink-soft md:text-base">
|
||||
{body}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-12 gap-4 lg:gap-5">
|
||||
{countries.map((country, index) => (
|
||||
<div
|
||||
key={country.nameEn}
|
||||
className={`reveal col-span-12 ${country.cols} ${
|
||||
index % 2 === 1
|
||||
? "reveal-delay-1"
|
||||
: index % 3 === 2
|
||||
? "reveal-delay-2"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="tile-item">
|
||||
<img
|
||||
src={country.image}
|
||||
alt={country.nameFa}
|
||||
className="aspect-[16/10] w-full rounded-2xl object-cover"
|
||||
/>
|
||||
<div className="mt-4 flex items-center justify-between pe-5 ps-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<img
|
||||
src={country.flag}
|
||||
alt=""
|
||||
className="h-6 w-auto rounded-md object-contain"
|
||||
/>
|
||||
<h3 className="mb-0 text-sm font-normal text-ink">
|
||||
{country.nameFa}
|
||||
</h3>
|
||||
</div>
|
||||
<span className="latin text-sm lowercase text-ink">
|
||||
{country.nameEn}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
import { FramedImage } from "@/components/FramedImage";
|
||||
|
||||
const CDN =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/meshkee_SEEpb1zypk/assets/files";
|
||||
|
||||
export const websiteProjects = [
|
||||
{ src: `${CDN}/FmXwLrTfoV.webp` },
|
||||
{ src: `${CDN}/aNkJKqDchY.webp` },
|
||||
{ src: `${CDN}/AqWe2zfGLb.jpg` },
|
||||
{ src: `${CDN}/ifnT6QdNsr.webp` },
|
||||
];
|
||||
|
||||
export const applicationProjects = [
|
||||
{ src: `${CDN}/vVBied8Og6.webp` },
|
||||
{ src: `${CDN}/pXvH3hqSdS.jpg` },
|
||||
{ src: `${CDN}/9RT7qexPXH.jpg` },
|
||||
{ src: `${CDN}/HP72QvIPPU.jpg` },
|
||||
];
|
||||
|
||||
export const seoProjects = [
|
||||
{ src: `${CDN}/B5lPbimKui.webp` },
|
||||
{ src: `${CDN}/4j1aVADzm8.webp` },
|
||||
{ src: `${CDN}/4sgg4zQsTc.webp` },
|
||||
];
|
||||
|
||||
export const graphicLogoProjects = [
|
||||
{ src: `${CDN}/ATolOFILtk.jpg` },
|
||||
{ src: `${CDN}/8xlSNcn8cL.webp` },
|
||||
{ src: `${CDN}/FRhOrUDQxK.webp` },
|
||||
{ src: `${CDN}/Z6Xu9fMGjL.jpg` },
|
||||
{ src: `${CDN}/8eNAfUtFNo.jpg` },
|
||||
];
|
||||
|
||||
export const graphicIdentityProjects = [
|
||||
{ src: `${CDN}/EGRdN6bXU2.jpg` },
|
||||
{ src: `${CDN}/OfPtIOoudd.webp` },
|
||||
{ src: `${CDN}/nX5EqK3OtS.jpg` },
|
||||
{ src: `${CDN}/A2iAd7kEhm.webp` },
|
||||
{ src: `${CDN}/U9VRzvYjIf.webp` },
|
||||
];
|
||||
|
||||
export const graphicCatalogProjects = [
|
||||
{ src: `${CDN}/ItCvr2jXRu.webp` },
|
||||
{ src: `${CDN}/hbfVqlZi18.webp` },
|
||||
{ src: `${CDN}/gTsPVWqh24.webp` },
|
||||
];
|
||||
|
||||
interface ProjectItem {
|
||||
src: string;
|
||||
}
|
||||
|
||||
interface ProjectsShowcaseProps {
|
||||
title?: string;
|
||||
titleEn?: string;
|
||||
subtitle?: string;
|
||||
projects?: ProjectItem[];
|
||||
moreHref?: string;
|
||||
variant?: "grid" | "carousel";
|
||||
}
|
||||
|
||||
export function ProjectsShowcase({
|
||||
title = "انجام ۱۰ پروژه‌ی اختصاصی بزرگ در طول این سال‌ها",
|
||||
titleEn = "WEBSITE DESIGN",
|
||||
subtitle,
|
||||
projects = websiteProjects,
|
||||
moreHref = "/#portfolio",
|
||||
variant = "grid",
|
||||
}: ProjectsShowcaseProps) {
|
||||
const loopProjects = [...projects, ...projects];
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden border-t border-line/30 bg-white py-16 lg:py-24">
|
||||
<div className="mx-auto max-w-7xl px-5 lg:px-8">
|
||||
<div className="reveal mb-10 flex min-w-0 flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
{subtitle ? (
|
||||
<p className="mb-3 text-sm text-muted">{subtitle}</p>
|
||||
) : null}
|
||||
<h2 className="text-[clamp(0.95rem,2.8vw,1.85rem)] font-normal tracking-tight text-ink">
|
||||
{title}
|
||||
</h2>
|
||||
<p className="latin mt-3 text-[11px] uppercase tracking-widest text-muted">
|
||||
{titleEn}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={moreHref}
|
||||
className="link-hover inline-flex shrink-0 items-center gap-2 rounded-full bg-[#FAFAFA] px-5 py-3 text-sm text-ink-soft ring-1 ring-line/60"
|
||||
>
|
||||
مشاهده بیشتر
|
||||
<span aria-hidden>↓</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{variant === "carousel" ? (
|
||||
<div className="carousel-mask overflow-hidden" dir="ltr">
|
||||
<div className="carousel-track flex w-max gap-5 px-5 lg:px-[max(1.25rem,calc((100vw-80rem)/2+2rem))]">
|
||||
{loopProjects.map((project, index) => (
|
||||
<figure
|
||||
key={`${project.src}-${index}`}
|
||||
className="w-[min(72vw,280px)] shrink-0 sm:w-[260px] lg:w-[300px]"
|
||||
>
|
||||
<FramedImage src={project.src} offset />
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mx-auto max-w-7xl px-5 lg:px-8">
|
||||
<div
|
||||
className={`grid gap-4 sm:grid-cols-2 lg:gap-5 ${
|
||||
projects.length === 3 ? "lg:grid-cols-3" : "lg:grid-cols-4"
|
||||
}`}
|
||||
>
|
||||
{projects.map((project, index) => (
|
||||
<figure
|
||||
key={project.src}
|
||||
className={`reveal group ${
|
||||
index % 4 === 1
|
||||
? "reveal-delay-1"
|
||||
: index % 4 === 2
|
||||
? "reveal-delay-2"
|
||||
: index % 4 === 3
|
||||
? "reveal-delay-3"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="group-border-hover overflow-hidden rounded-2xl border border-line/70 transition hover:shadow-[0_16px_40px_rgba(14,17,22,0.06)]">
|
||||
<img
|
||||
src={project.src}
|
||||
alt=""
|
||||
className="aspect-[3/5] w-full object-cover object-top transition duration-700 group-hover:scale-[1.03]"
|
||||
/>
|
||||
</div>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function WebsiteProjects() {
|
||||
return <ProjectsShowcase />;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
const CDN =
|
||||
"https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/meshkee_SEEpb1zypk/assets";
|
||||
|
||||
export const images = {
|
||||
hero: `${CDN}/files/BUUvn1ssFu.webp`,
|
||||
heroApp: `${CDN}/files/Z8yZ4ZGj5f.webp`,
|
||||
heroCms: `${CDN}/files/F4qO7A8vsU.webp`,
|
||||
brandLogo: "/images/brand/logo-black.png",
|
||||
brandLogoWhite: "/images/brand/logo-white.png",
|
||||
brandMark: "/images/brand/mark-black.png",
|
||||
brandMarkWhite: "/images/brand/mark-white.png",
|
||||
services: {
|
||||
web: `${CDN}/files/ecXmIxV0te.png`,
|
||||
app: `${CDN}/files/L3esyJkRFC.png`,
|
||||
cms: `${CDN}/files/ScJdqzoK18.png`,
|
||||
seo: `${CDN}/files/W5V2j5WwJb.png`,
|
||||
graphic: `${CDN}/files/n98K6K9jyG.png`,
|
||||
},
|
||||
pages: {
|
||||
website: `${CDN}/files/Rp3QX3m8FE.webp`,
|
||||
app: `${CDN}/files/tdRtWz7Q2l.webp`,
|
||||
cms: `${CDN}/files/SwYRnHKWPd.png`,
|
||||
seo: `${CDN}/files/JXLo625dyC.webp`,
|
||||
graphic: `${CDN}/files/zJZkmuK6tr.webp`,
|
||||
},
|
||||
portfolio: [
|
||||
`${CDN}/files/3xXv8TLPsX.jpg`,
|
||||
`${CDN}/files/gyG38oiy8O.webp`,
|
||||
`${CDN}/files/fvJfINwpLk.webp`,
|
||||
`${CDN}/files/AV8xufJxJG.webp`,
|
||||
`${CDN}/files/TMSkameY2t.webp`,
|
||||
`${CDN}/files/LIWk9CwaR5.webp`,
|
||||
],
|
||||
media: [
|
||||
`${CDN}/img/portfolios/6.jpg`,
|
||||
`${CDN}/img/portfolios/5.jpg`,
|
||||
`${CDN}/img/portfolios/7.jpg`,
|
||||
`${CDN}/files/TzK4ghgvjU.webp`,
|
||||
`${CDN}/img/portfolios/9.jpg`,
|
||||
`${CDN}/img/portfolios/10.jpg`,
|
||||
`${CDN}/img/portfolios/11.jpg`,
|
||||
`${CDN}/img/portfolios/12.jpg`,
|
||||
`${CDN}/img/portfolios/13.jpg`,
|
||||
],
|
||||
blog: [
|
||||
`${CDN}/files/3xXv8TLPsX.jpg`,
|
||||
`${CDN}/files/gyG38oiy8O.webp`,
|
||||
`${CDN}/files/fvJfINwpLk.webp`,
|
||||
`${CDN}/files/AV8xufJxJG.webp`,
|
||||
`${CDN}/files/TMSkameY2t.webp`,
|
||||
`${CDN}/files/LIWk9CwaR5.webp`,
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,126 @@
|
||||
import { images } from "./assets";
|
||||
|
||||
export const site = {
|
||||
nameFa: "مشکی",
|
||||
fullTitle: "تیم برنامه‌نویسی و تجارت الکترونیک مشکی",
|
||||
nameEn: "Meshkee",
|
||||
tagline: "تیم تجارت الکترونیک مشکی",
|
||||
taglineEn: "MESHKEE E-COMMERCE TEAM",
|
||||
phone: "0902 4200 240",
|
||||
phoneHref: "tel:+989024200240",
|
||||
email: "info@meshkee.com",
|
||||
address: "قم، بلوار امام رضا، مجتمع فردوس، طبقهٔ اول تجاری، واحد ۳۰۹ و ۳۱۰",
|
||||
};
|
||||
|
||||
export const nav = [
|
||||
{ label: "وبسایت", href: "/website" },
|
||||
{ label: "سئو", href: "/seo" },
|
||||
{ label: "اپلیکیشن", href: "/dedicated-application" },
|
||||
{ label: "سیستم‌های مدیریتی", href: "/meshkee-cms" },
|
||||
{ label: "گرافیک و رسانه", href: "/graphic-designer" },
|
||||
{ label: "نمونه‌کارها", href: "/#portfolio" },
|
||||
{ label: "مقالات", href: "/#blog" },
|
||||
];
|
||||
|
||||
export const services = [
|
||||
{
|
||||
title: "طراحی و توسعه‌ی وبسایت",
|
||||
titleEn: "WEBSITE DESIGN & DEVELOPMENT",
|
||||
description:
|
||||
"طراحی و توسعه‌ی انواع وبسایت‌های فروشگاهی، خبری، شرکتی، گالری، ورزشی و همینطور وبسایت با مقاصد خاص. این کار به‌صورت تیمی انجام می‌شود و برای هر یک از بخش‌های گرافیک، برنامه‌نویسی، سرور، سئو و … متخصص جداگانه‌ای روی وبسایت شما فعالیت خواهد کرد.",
|
||||
icon: images.services.web,
|
||||
href: "/website",
|
||||
},
|
||||
{
|
||||
title: "طراحی و توسعه‌ی اپلیکیشن",
|
||||
titleEn: "APPLICATION DESIGN & DEVELOPMENT",
|
||||
description:
|
||||
"همانند وبسایت، ما صفر تا صد اپلیکیشن را برای شما انجام می‌دهیم. انواع اپلیکیشن‌های فروشگاهی، خبری و همینطور با مقاصد خاص. این اپلیکیشن‌ها به دو صورت استفاده از Meshkee.cms و همینطور اختصاصی طراحی می‌شوند.",
|
||||
icon: images.services.app,
|
||||
href: "/dedicated-application",
|
||||
},
|
||||
{
|
||||
title: "سیستم‌های مدیریتی",
|
||||
titleEn: "MESHKEE.CMS",
|
||||
description:
|
||||
"سیستم مدیریتی Meshkee.cms دارای امکاناتی از قبیل سیستم فروشگاهی و صندوق، سیستم مدیریت مالی، باشگاه مشتریان، انبار و … می‌باشد. این بخش‌ها همگی به وبسایت و اپلیکیشن شما متصل هستند.",
|
||||
icon: images.services.cms,
|
||||
href: "/meshkee-cms",
|
||||
},
|
||||
{
|
||||
title: "بهینه‌سازی وبسایت و سئو",
|
||||
titleEn: "WEBSITE MANAGEMENT & SEO",
|
||||
description:
|
||||
"ما می‌توانیم مدیریت کامل وبسایت شما را در دست بگیریم؛ از تولید محتوا و امور گرافیکی، مسائل تکنیکال، مدیریت تبلیغات و کمپین‌ها تا مهم‌ترین موضوع که حضور در جستجوها و سئو است.",
|
||||
icon: images.services.seo,
|
||||
href: "/seo",
|
||||
},
|
||||
{
|
||||
title: "گرافیک و رسانه",
|
||||
titleEn: "GRAPHIC & MEDIA",
|
||||
description:
|
||||
"طراحی رابط کاربری وبسایت و اپلیکیشن (UI & UX)، لوگو، هویت بصری و به‌طور کلی برند بوک (Brand Book) از تخصص‌های ماست.",
|
||||
icon: images.services.graphic,
|
||||
href: "/graphic-designer",
|
||||
},
|
||||
];
|
||||
|
||||
export const portfolio = [
|
||||
{ image: images.portfolio[0] },
|
||||
{ image: images.portfolio[1] },
|
||||
{ image: images.portfolio[2] },
|
||||
{ image: images.portfolio[3] },
|
||||
{ image: images.portfolio[4] },
|
||||
{ image: images.portfolio[5] },
|
||||
];
|
||||
|
||||
export const mediaItems = [
|
||||
{ title: "عکاسی صنعتی محصول", image: images.media[0] },
|
||||
{ title: "طراحی رابط کاربری اپلیکیشن", image: images.media[1] },
|
||||
{ title: "عکاسی معماری داخلی", image: images.media[2] },
|
||||
{ title: "وبسایت و سئو", image: images.media[3] },
|
||||
{ title: "طراحی هویت بصری", image: images.media[4] },
|
||||
{ title: "عکاسی صنعتی محصول — جزئیات", image: images.media[5] },
|
||||
{ title: "طراحی لوگو", image: images.media[6] },
|
||||
{ title: "عکاسی معماری — بیرونی", image: images.media[7] },
|
||||
{ title: "طراحی لوگو", image: images.media[8] },
|
||||
];
|
||||
|
||||
export const posts = [
|
||||
{
|
||||
title: "SaaS چیست و چرا شرکت‌های بزرگ به آن مهاجرت می‌کنند؟",
|
||||
excerpt:
|
||||
"SaaS چیست و چگونه مدل نرم‌افزارهای اشتراکی هزینه‌ها را کاهش و رشد کسب‌وکار را سریع‌تر می‌کند؟",
|
||||
image: images.blog[0],
|
||||
},
|
||||
{
|
||||
title: "طراحی پروتوتایپ تعاملی چیست و چرا فروش شما را متحول می‌کند؟",
|
||||
excerpt:
|
||||
"نقش طراحی پروتوتایپ تعاملی در کاهش ریسک و افزایش فروش را اینجا بررسی کرده‌ایم.",
|
||||
image: images.blog[1],
|
||||
},
|
||||
{
|
||||
title: "تست A/B چیست؟ راهنمای کامل افزایش نرخ تبدیل و بهبود UX",
|
||||
excerpt:
|
||||
"چگونه با تحلیل داده‌ها، تجربه کاربری و نرخ تبدیل سایت یا اپلیکیشن را بهبود دهیم؟",
|
||||
image: images.blog[2],
|
||||
},
|
||||
{
|
||||
title: "اشتباهات رایج در طراحی دکمه CTA",
|
||||
excerpt:
|
||||
"اشتباهات رایج در طراحی دکمه CTA را بشناسید و نرخ تبدیل سایت را بهبود دهید.",
|
||||
image: images.blog[3],
|
||||
},
|
||||
{
|
||||
title: "بودجه خزش (Crawl Budget)",
|
||||
excerpt:
|
||||
"با مدیریت هوشمندانه بودجه خزش، ایندکس سریع‌تر صفحات و بهبود رتبه سایت را تجربه کنید.",
|
||||
image: images.blog[4],
|
||||
},
|
||||
{
|
||||
title: "۴ مرحله طلایی قیف فروش دیجیتال",
|
||||
excerpt:
|
||||
"قیف فروش دیجیتال مسیر کاربران را از آگاهی تا مشتری وفادار نشان می‌دهد.",
|
||||
image: images.blog[5],
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user