adding
@@ -1,24 +1,30 @@
|
||||
/* Atlas — توکنهای دیزاینسیستم (از claude.ai/design، پروژهی
|
||||
"Flutter Design System"، برند accent: کاسبیار — سبز اکسل) برای لندینگ
|
||||
بازاستفاده شده تا ظاهر وب با اپ یکی باشد. بدون build step، بدون فریمورک —
|
||||
دقیقا روحیهی خودِ سیستم: "Performance یک تصمیم طراحی است».
|
||||
فونت Vazirmatn با <link> در <head> صفحه بارگذاری میشود (نه @import اینجا)
|
||||
— @import رندر CSS را قفل میکند تا فونت خارجی هم دانلود شود. */
|
||||
/* Atlas — توکنهای دیزاینسیستمِ فعلیِ اپ شاپ شیپ (سرمهای/صورتی/مرجانی/کرم،
|
||||
گردیِ زیاد، سایهی نرم) برای لندینگ بازاستفاده شده تا ظاهر وب دقیقا با اپ
|
||||
یکی باشد. بدون build step، بدون فریمورک. فونت Vazirmatn با <link> در
|
||||
<head> صفحه بارگذاری میشود (نه @import اینجا) — @import رندر CSS را
|
||||
قفل میکند. */
|
||||
|
||||
:root {
|
||||
--color-bg: #f3f2f2;
|
||||
--color-surface: #eae9e9;
|
||||
--color-surface-elevated: #f8f4f4;
|
||||
--color-text: #201e1d;
|
||||
--color-text-secondary: #605d5d;
|
||||
--color-text-tertiary: #7d7979;
|
||||
--color-accent: #107c41;
|
||||
--color-accent-600: #0e6837;
|
||||
--color-accent-700: #185c37;
|
||||
--color-accent-100: #e2efda;
|
||||
--color-accent-800: #0b3d21;
|
||||
--color-divider: rgba(32, 30, 29, 0.4);
|
||||
--color-divider-subtle: #d7d3d3;
|
||||
--color-bg: #fdf8f3;
|
||||
--color-bg-secondary: #f6efe4;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-interactive: #f6efe4;
|
||||
--color-text: #201e3d;
|
||||
--color-text-secondary: #6b6889;
|
||||
--color-text-tertiary: #9591ac;
|
||||
--color-brand: #2d2a55;
|
||||
--color-on-brand: #ffffff;
|
||||
--color-pink: #f2467d;
|
||||
--color-coral: #e8635b;
|
||||
--color-cream: #fbeedd;
|
||||
--color-peach: #fadec0;
|
||||
--color-lavender: #e3e1f7;
|
||||
--color-blue: #4c6fe0;
|
||||
--color-teal: #2e9e9e;
|
||||
--color-amber: #e0a93b;
|
||||
--color-divider: #e3d9c7;
|
||||
--color-divider-subtle: #eee6d8;
|
||||
--shadow-color: rgba(32, 30, 61, 0.12);
|
||||
|
||||
--font-heading: 'Vazirmatn', system-ui, sans-serif;
|
||||
--font-body: 'Vazirmatn', system-ui, sans-serif;
|
||||
@@ -27,50 +33,69 @@
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
--space-16: 64px;
|
||||
|
||||
--radius: 0px; /* امضای بصری سیستم: گوشهی صفر همهجا */
|
||||
--radius-sm: 12px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 20px;
|
||||
--radius-xl: 28px;
|
||||
--radius-pill: 999px;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--color-bg: #161514;
|
||||
--color-surface: #201e1d;
|
||||
--color-surface-elevated: #2d2b2b;
|
||||
--color-text: #f5f3f2;
|
||||
--color-text-secondary: #bab6b6;
|
||||
--color-text-tertiary: #9b9797;
|
||||
--color-accent: #21a366;
|
||||
--color-accent-600: #34b378;
|
||||
--color-accent-700: #6bcb9a;
|
||||
--color-accent-100: #112a1c;
|
||||
--color-accent-800: #c6efce;
|
||||
--color-divider: #2d2b2b;
|
||||
--color-divider-subtle: #2d2b2b;
|
||||
--color-bg: #14132a;
|
||||
--color-bg-secondary: #1c1a3b;
|
||||
--color-surface: #262452;
|
||||
--color-surface-interactive: #383468;
|
||||
--color-text: #f5f3fc;
|
||||
--color-text-secondary: #c3bfe2;
|
||||
--color-text-tertiary: #9793bc;
|
||||
--color-brand: #b3aeff;
|
||||
--color-on-brand: #1b1938;
|
||||
--color-pink: #ff7cae;
|
||||
--color-coral: #ff9789;
|
||||
--color-cream: #423c74;
|
||||
--color-peach: #4e4780;
|
||||
--color-lavender: #423c74;
|
||||
--color-blue: #7c8cf5;
|
||||
--color-teal: #4fc7c7;
|
||||
--color-amber: #e0a93b;
|
||||
--color-divider: #3a366e;
|
||||
--color-divider-subtle: #2e2b60;
|
||||
--shadow-color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--color-bg: #161514;
|
||||
--color-surface: #201e1d;
|
||||
--color-surface-elevated: #2d2b2b;
|
||||
--color-text: #f5f3f2;
|
||||
--color-text-secondary: #bab6b6;
|
||||
--color-text-tertiary: #9b9797;
|
||||
--color-accent: #21a366;
|
||||
--color-accent-600: #34b378;
|
||||
--color-accent-700: #6bcb9a;
|
||||
--color-accent-100: #112a1c;
|
||||
--color-accent-800: #c6efce;
|
||||
--color-divider: #2d2b2b;
|
||||
--color-divider-subtle: #2d2b2b;
|
||||
--color-bg: #14132a;
|
||||
--color-bg-secondary: #1c1a3b;
|
||||
--color-surface: #262452;
|
||||
--color-surface-interactive: #383468;
|
||||
--color-text: #f5f3fc;
|
||||
--color-text-secondary: #c3bfe2;
|
||||
--color-text-tertiary: #9793bc;
|
||||
--color-brand: #b3aeff;
|
||||
--color-on-brand: #1b1938;
|
||||
--color-pink: #ff7cae;
|
||||
--color-coral: #ff9789;
|
||||
--color-cream: #423c74;
|
||||
--color-peach: #4e4780;
|
||||
--color-lavender: #423c74;
|
||||
--color-blue: #7c8cf5;
|
||||
--color-teal: #4fc7c7;
|
||||
--color-amber: #e0a93b;
|
||||
--color-divider: #3a366e;
|
||||
--color-divider-subtle: #2e2b60;
|
||||
--shadow-color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html { direction: rtl; }
|
||||
html { direction: rtl; scroll-behavior: smooth; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--color-bg);
|
||||
@@ -78,122 +103,303 @@ body {
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
h1, h2, h3, h4 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
line-height: 1.3;
|
||||
margin: 0 0 var(--space-3);
|
||||
color: var(--color-text);
|
||||
}
|
||||
h1 { font-size: 40px; letter-spacing: -0.02em; }
|
||||
h2 { font-size: 28px; }
|
||||
h3 { font-size: 20px; }
|
||||
h1 { font-size: clamp(25px, 4.6vw + 10px, 42px); letter-spacing: -0.01em; }
|
||||
h2 { font-size: clamp(22px, 1.6vw + 16px, 30px); }
|
||||
h3 { font-size: 19px; }
|
||||
p { margin: 0 0 var(--space-4); color: var(--color-text-secondary); }
|
||||
a { color: var(--color-accent); text-decoration: none; }
|
||||
a { color: var(--color-brand); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
img { max-width: 100%; display: block; }
|
||||
.container { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-6); }
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
.container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6); }
|
||||
|
||||
.hairline { border: none; border-top: 2px solid var(--color-divider); margin: 0; }
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-brand);
|
||||
outline-offset: 3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* بخشهایی که ناوبریِ چسبان با اسکرول به آنها میپرد، باید زیرِ هدر پنهان
|
||||
نشوند — همان مقدارِ ارتفاعِ هدر بهعنوان فاصلهی امن اسکرول رزرو میشود. */
|
||||
#tools, #who, #how, #pricing, #cta { scroll-margin-top: 84px; }
|
||||
|
||||
/* — nav — */
|
||||
.nav-wrap {
|
||||
position: sticky; top: 0; z-index: 40;
|
||||
background: transparent;
|
||||
transition: background-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
|
||||
}
|
||||
.nav-wrap.is-scrolled {
|
||||
background: color-mix(in srgb, var(--color-bg) 88%, transparent);
|
||||
backdrop-filter: blur(12px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(1.2);
|
||||
box-shadow: 0 4px 24px var(--shadow-color);
|
||||
}
|
||||
.nav {
|
||||
display: flex; align-items: center; gap: var(--space-6);
|
||||
padding: var(--space-4) 0; border-bottom: 2px solid var(--color-divider);
|
||||
padding: var(--space-4) 0;
|
||||
}
|
||||
.nav-brand { font-family: var(--font-heading); font-weight: 800; font-size: 19px; color: var(--color-text); }
|
||||
.nav-links { display: flex; gap: var(--space-6); margin-inline-start: auto; font-size: 14px; flex-wrap: wrap; }
|
||||
.nav-links a { color: var(--color-text); }
|
||||
.nav-links a:hover { color: var(--color-accent); }
|
||||
.nav-brand { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--color-brand); }
|
||||
.nav-brand:hover { text-decoration: none; }
|
||||
.nav-brand-icon { border-radius: 8px; }
|
||||
.nav-links { display: flex; gap: var(--space-6); margin-inline-start: auto; font-size: 14px; font-weight: 500; flex-wrap: wrap; }
|
||||
.nav-links a { color: var(--color-text); position: relative; }
|
||||
.nav-links a:hover { color: var(--color-brand); text-decoration: none; }
|
||||
|
||||
/* — buttons — */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||
font-family: var(--font-heading); font-weight: 700; font-size: 15px;
|
||||
padding: 12px 22px; border: 2px solid transparent; cursor: pointer;
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 26px; border: 2px solid transparent; cursor: pointer;
|
||||
border-radius: var(--radius-pill);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
.btn-primary { background: var(--color-accent); color: #f3f2f2; }
|
||||
.btn-primary:hover { background: var(--color-accent-600); text-decoration: none; }
|
||||
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
|
||||
.btn-secondary:hover { background: var(--color-surface); text-decoration: none; }
|
||||
.btn:hover { text-decoration: none; }
|
||||
.btn:active { transform: scale(0.97); }
|
||||
.btn-sm { padding: 10px 20px; font-size: 14px; }
|
||||
.btn-primary {
|
||||
background: var(--color-brand); color: var(--color-on-brand);
|
||||
box-shadow: 0 8px 24px var(--shadow-color);
|
||||
}
|
||||
.btn-primary:hover { box-shadow: 0 10px 28px var(--shadow-color); transform: translateY(-1px); }
|
||||
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); background: var(--color-surface); }
|
||||
.btn-secondary:hover { background: var(--color-surface-interactive); transform: translateY(-1px); }
|
||||
|
||||
/* — hero — */
|
||||
.hero { padding: var(--space-16) 0 var(--space-12); text-align: center; }
|
||||
.hero {
|
||||
position: relative;
|
||||
padding: var(--space-16) 0 var(--space-12);
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: var(--space-12);
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-copy { position: relative; z-index: 1; text-align: start; }
|
||||
.hero .kicker {
|
||||
display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
|
||||
color: var(--color-accent); background: var(--color-accent-100);
|
||||
padding: 4px 12px; margin-bottom: var(--space-4);
|
||||
color: var(--color-brand); background: var(--color-lavender);
|
||||
padding: 6px 16px; border-radius: var(--radius-pill); margin-bottom: var(--space-4);
|
||||
}
|
||||
.hero h1 { max-width: 18ch; margin-inline: auto; }
|
||||
.hero p { max-width: 56ch; margin-inline: auto; font-size: 18px; }
|
||||
.hero-actions { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }
|
||||
.hero h1 { max-width: 16ch; }
|
||||
.hero-copy p { max-width: 48ch; font-size: 18px; }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
|
||||
|
||||
/* بلابهای تزئینیِ پشتِ هیرو — همان زبانِ بصریِ AtlasBlobHeader توی اپ */
|
||||
.hero-blobs { position: absolute; inset: -10% -10% auto auto; width: 60%; height: 140%; z-index: 0; pointer-events: none; }
|
||||
.blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.9; }
|
||||
|
||||
/* موکاپِ گوشی — نمایِ سادهشده و انتزاعیِ صفحهی اول اپ، بدون دیتای واقعیِ
|
||||
هیچ کاربری؛ فقط برای نشاندادنِ زبانِ بصری (کاشیهای رنگی، کارتِ سرمهای). */
|
||||
.phone-mock {
|
||||
position: relative; z-index: 1;
|
||||
width: 260px; margin: 0 auto;
|
||||
background: var(--color-text);
|
||||
border-radius: 40px;
|
||||
padding: 14px;
|
||||
box-shadow: 0 30px 60px var(--shadow-color);
|
||||
}
|
||||
.phone-screen {
|
||||
background: var(--color-bg);
|
||||
border-radius: 28px;
|
||||
padding: var(--space-4);
|
||||
overflow: hidden;
|
||||
}
|
||||
.phone-hero-card {
|
||||
background: var(--color-brand);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
color: var(--color-on-brand);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.phone-hero-card .line { height: 10px; background: rgba(255,255,255,0.85); border-radius: var(--radius-pill); width: 60%; margin-bottom: 8px; }
|
||||
.phone-hero-card .line.short { width: 35%; background: rgba(255,255,255,0.5); }
|
||||
.phone-stats {
|
||||
background: var(--color-surface); border-radius: var(--radius-lg);
|
||||
padding: var(--space-3); display: flex; justify-content: space-around;
|
||||
margin-bottom: var(--space-3); box-shadow: 0 8px 20px var(--shadow-color);
|
||||
}
|
||||
.phone-stats .dot { width: 28px; height: 28px; border-radius: var(--radius-sm); margin: 0 auto 4px; }
|
||||
.phone-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
||||
.phone-tile { aspect-ratio: 1; border-radius: var(--radius-md); }
|
||||
|
||||
/* — sections — */
|
||||
section { padding: var(--space-12) 0; }
|
||||
section.alt { background: var(--color-surface); }
|
||||
section { padding: var(--space-12) 0; position: relative; }
|
||||
section.alt { background: var(--color-bg-secondary); }
|
||||
.section-head { text-align: center; max-width: 60ch; margin: 0 auto var(--space-8); }
|
||||
.section-head .kicker { display: inline-block; font-size: 12px; font-weight: 700; color: var(--color-pink); margin-bottom: var(--space-2); }
|
||||
|
||||
/* — grid / cards — */
|
||||
.grid { display: grid; gap: 2px; background: var(--color-divider-subtle); }
|
||||
.grid { display: grid; gap: var(--space-4); }
|
||||
.grid-3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.grid-4 { grid-template-columns: repeat(4, 1fr); }
|
||||
.grid-5 { grid-template-columns: repeat(5, 1fr); }
|
||||
.card { background: var(--color-bg); padding: var(--space-6); }
|
||||
.card .icon { font-size: 28px; margin-bottom: var(--space-3); }
|
||||
.card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-divider-subtle);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-6);
|
||||
box-shadow: 0 12px 28px var(--shadow-color);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 18px 36px var(--shadow-color);
|
||||
}
|
||||
.card .icon-tile {
|
||||
width: 52px; height: 52px; border-radius: var(--radius-md);
|
||||
display: grid; place-items: center; font-size: 24px;
|
||||
margin-bottom: var(--space-4); color: #fff;
|
||||
}
|
||||
.card h3 { font-size: 17px; margin-bottom: var(--space-2); }
|
||||
.card p { font-size: 14px; margin: 0; }
|
||||
|
||||
/* — channels — */
|
||||
.channels { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
|
||||
.channel-tag {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 8px 16px; border: 2px solid var(--color-divider); font-size: 14px; font-weight: 500;
|
||||
}
|
||||
/* چرخهی رنگِ کاشی — دقیقا همراستا با atlasTileAccents توی اپ */
|
||||
.accent-0 { background: var(--color-pink); }
|
||||
.accent-1 { background: var(--color-blue); }
|
||||
.accent-2 { background: var(--color-coral); }
|
||||
.accent-3 { background: var(--color-teal); }
|
||||
.accent-4 { background: var(--color-brand); }
|
||||
.accent-5 { background: var(--color-amber); }
|
||||
|
||||
/* — stats — */
|
||||
.stats-band { background: var(--color-brand); color: var(--color-on-brand); }
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); text-align: center; }
|
||||
.stat-num { font-family: var(--font-heading); font-weight: 800; font-size: 32px; }
|
||||
.stat-label { font-size: 13px; opacity: 0.8; }
|
||||
|
||||
/* — steps — */
|
||||
.steps { counter-reset: step; display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; margin: 0 auto; }
|
||||
.step { display: flex; gap: var(--space-4); align-items: flex-start; }
|
||||
.step::before {
|
||||
counter-increment: step; content: counter(step);
|
||||
flex: none; width: 36px; height: 36px; display: grid; place-items: center;
|
||||
background: var(--color-accent); color: #f3f2f2; font-weight: 800; font-family: var(--font-heading);
|
||||
.steps { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; margin: 0 auto; }
|
||||
.step { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-divider-subtle); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: 0 8px 20px var(--shadow-color); transition: transform 0.2s ease, box-shadow 0.2s ease; }
|
||||
.step:hover { transform: translateY(-3px); box-shadow: 0 14px 28px var(--shadow-color); }
|
||||
.step-num {
|
||||
flex: none; width: 40px; height: 40px; display: grid; place-items: center;
|
||||
background: var(--color-pink); color: #fff; font-weight: 800; font-family: var(--font-heading);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
.step h3 { margin-bottom: 4px; font-size: 16px; }
|
||||
.step p { margin: 0; font-size: 14px; }
|
||||
|
||||
/* — trust row (بهجای تستیمونیال ساختگی) — */
|
||||
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
|
||||
.trust-item { text-align: center; padding: var(--space-4); border-radius: var(--radius-lg); transition: transform 0.2s ease, background-color 0.2s ease; }
|
||||
.trust-item:hover { transform: translateY(-3px); background: var(--color-surface); }
|
||||
.trust-item .icon-tile { margin-inline: auto; }
|
||||
|
||||
/* — pricing explainer (بدون رقمِ ساختگی، چون قیمتِ واقعی جممحور و پویاست) — */
|
||||
.pricing-card {
|
||||
background: var(--color-surface); border: 1px solid var(--color-divider-subtle);
|
||||
border-radius: var(--radius-xl); padding: var(--space-8); text-align: center;
|
||||
box-shadow: 0 16px 36px var(--shadow-color);
|
||||
max-width: 560px; margin: 0 auto;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.pricing-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px var(--shadow-color); }
|
||||
.pricing-card .badge {
|
||||
display: inline-flex; align-items: center; gap: 6px; background: var(--color-cream);
|
||||
color: var(--color-coral); padding: 6px 16px; border-radius: var(--radius-pill);
|
||||
font-weight: 700; font-size: 13px; margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
/* — CTA band — */
|
||||
.cta-band { background: var(--color-text); color: var(--color-bg); text-align: center; }
|
||||
.cta-band h2 { color: var(--color-bg); }
|
||||
.cta-band p { color: rgba(243, 242, 242, 0.75); }
|
||||
.cta-band { background: var(--color-brand); color: var(--color-on-brand); text-align: center; border-radius: var(--radius-xl); margin: 0 var(--space-6); padding: var(--space-12) var(--space-6); }
|
||||
.cta-band h2 { color: var(--color-on-brand); }
|
||||
.cta-band p { color: rgba(255,255,255,0.8); max-width: 50ch; margin-inline: auto; }
|
||||
.cta-band .btn-secondary { border-color: rgba(255,255,255,0.35); color: #fff; background: transparent; }
|
||||
.cta-band .btn-secondary:hover { background: rgba(255,255,255,0.1); }
|
||||
|
||||
/* — footer — */
|
||||
footer { border-top: 2px solid var(--color-divider); padding: var(--space-8) 0; }
|
||||
footer { padding: var(--space-8) 0; }
|
||||
footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); font-size: 13px; color: var(--color-text-tertiary); }
|
||||
footer a { color: var(--color-text-secondary); }
|
||||
footer .footer-brand { display: flex; flex-direction: column; gap: 2px; }
|
||||
footer .footer-brand strong { color: var(--color-text-secondary); font-weight: 600; }
|
||||
|
||||
/* — articles — */
|
||||
.article-list { display: flex; flex-direction: column; gap: 2px; background: var(--color-divider-subtle); }
|
||||
.article-row { background: var(--color-bg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.article-list { display: flex; flex-direction: column; gap: var(--space-3); }
|
||||
.article-row { background: var(--color-surface); border: 1px solid var(--color-divider-subtle); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); box-shadow: 0 8px 20px var(--shadow-color); transition: transform 0.2s ease, box-shadow 0.2s ease; }
|
||||
.article-row:hover { transform: translateY(-3px); box-shadow: 0 14px 28px var(--shadow-color); }
|
||||
.article-row .meta { font-size: 12px; color: var(--color-text-tertiary); }
|
||||
.article-row h2 { font-size: 20px; margin-bottom: 0; }
|
||||
.article-row h2 a { color: var(--color-text); }
|
||||
.article-row h2 a:hover { color: var(--color-brand); text-decoration: none; }
|
||||
.article-body { max-width: 68ch; margin: 0 auto; font-size: 16px; }
|
||||
.article-body h2 { font-size: 22px; margin-top: var(--space-8); }
|
||||
.article-body strong { color: var(--color-text); }
|
||||
.article-header { max-width: 68ch; margin: 0 auto var(--space-8); }
|
||||
.article-header .meta { font-size: 13px; color: var(--color-text-tertiary); margin-bottom: var(--space-3); }
|
||||
.back-link { display: inline-block; margin-bottom: var(--space-6); font-size: 14px; }
|
||||
.related-articles { max-width: 68ch; margin: var(--space-12) auto 0; padding-top: var(--space-8); border-top: 1px solid var(--color-divider-subtle); }
|
||||
.related-articles h2 { font-size: 18px; }
|
||||
.related-articles ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.related-articles a { font-weight: 600; }
|
||||
|
||||
@media (max-width: 760px) {
|
||||
/* — ورودِ تدریجیِ بخشها هنگامِ اسکرول — با جاوااسکریپتِ صفحه کلاسِ reveal
|
||||
اضافه و بعد از دیدهشدن reveal-visible را ست میکند؛ اگر جاوااسکریپت
|
||||
غیرفعال باشد یا کاربر حرکتِ کمتر خواسته باشد، محتوا همیشه دیده میماند. */
|
||||
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
|
||||
.reveal-visible { opacity: 1; transform: none; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal { opacity: 1; transform: none; transition: none; }
|
||||
.card, .step, .trust-item, .pricing-card, .btn, .article-row { transition: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero { grid-template-columns: 1fr; text-align: center; padding-top: var(--space-12); gap: var(--space-8); }
|
||||
.hero-copy { text-align: center; }
|
||||
.hero h1, .hero-copy p { margin-inline: auto; }
|
||||
.hero-blobs { display: none; }
|
||||
.phone-mock { order: -1; }
|
||||
.grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
|
||||
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
|
||||
.trust-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
|
||||
}
|
||||
|
||||
/* بین تبلت و موبایل — فاصلههای درشتِ دسکتاپ روی این سایز زیادی باز بهنظر
|
||||
میرسند؛ همهجا یک پله جمعتر میشوند، نه فقط شکستنِ گرید. */
|
||||
@media (max-width: 700px) {
|
||||
section { padding: 40px 0; }
|
||||
.hero { padding: 32px 0 40px; }
|
||||
.section-head { margin-bottom: var(--space-6); }
|
||||
.card { padding: var(--space-5); }
|
||||
.card .icon-tile { width: 46px; height: 46px; font-size: 21px; margin-bottom: var(--space-3); }
|
||||
.phone-mock { width: min(240px, 62vw); }
|
||||
.steps { gap: var(--space-3); }
|
||||
.step { padding: var(--space-4); gap: var(--space-3); }
|
||||
.pricing-card { padding: var(--space-6); }
|
||||
.cta-band { padding: var(--space-8) var(--space-6); }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
|
||||
.hero h1 { font-size: 30px; }
|
||||
footer .container { flex-direction: column; }
|
||||
.hero-copy p { font-size: 16px; }
|
||||
.kicker { font-size: 11px; }
|
||||
footer .container { flex-direction: column; text-align: center; }
|
||||
footer .footer-brand { align-items: center; }
|
||||
.nav { flex-wrap: wrap; row-gap: var(--space-3); }
|
||||
.nav-links { order: 3; width: 100%; gap: var(--space-4); }
|
||||
.nav-links { order: 3; width: 100%; gap: var(--space-4); justify-content: center; }
|
||||
.cta-band { margin: 0 var(--space-4); padding: var(--space-8) var(--space-4); }
|
||||
.hero-actions { gap: var(--space-2); }
|
||||
.hero-actions .btn { flex: 1 1 200px; }
|
||||
.stats-grid { gap: var(--space-4); }
|
||||
.stat-num { font-size: 26px; }
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.container { padding: 0 var(--space-4); }
|
||||
.hero h1 { font-size: 26px; }
|
||||
.hero p { font-size: 16px; }
|
||||
.hero-copy p { font-size: 15px; }
|
||||
.btn { padding: 12px 20px; font-size: 14px; }
|
||||
.hero-actions .btn, .cta-band .hero-actions .btn { flex: 1 1 100%; }
|
||||
.phone-mock { width: min(210px, 58vw); padding: 10px; border-radius: 32px; }
|
||||
.phone-screen { border-radius: 22px; padding: var(--space-3); }
|
||||
.pricing-card { padding: var(--space-5); }
|
||||
.step { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
|
||||
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 820 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 156 KiB |
|
After Width: | Height: | Size: 168 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
@@ -2,18 +2,43 @@
|
||||
<html lang="fa" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>کاسبیار — اپ مدیریت کسبوکارهای کوچک (فاکتور، پیامک گروهی، مشتریان، انبار، نوبتدهی)</title>
|
||||
<meta name="description" content="کاسبیار یک اپ برای ادارهی کسبوکار کوچک است: فاکتور رسمی، پیام گروهی با شماره (پیامک/واتساپ/تلگرام/بله/ایتا)، مشتریان، دفتر درآمد و هزینه، انبارداری و نوبتدهی — همه در یک اپ ساده. یک هفته کاملا رایگان.">
|
||||
<meta name="keywords" content="اپ مدیریت کسب و کار, پیام گروهی با شماره, نرم افزار فاکتور, نرم افزار انبارداری, نرم افزار نوبت دهی, دفتر درآمد و هزینه, نرم افزار مدیریت مشتریان">
|
||||
<link rel="canonical" href="https://mobiniqow.ir/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>شاپ شیپ — اپ مدیریت کسبوکارهای کوچک | فاکتور، پیامک گروهی، انبار، دفتر درآمد و هزینه</title>
|
||||
<meta name="description" content="شاپ شیپ اپ مدیریت کسبوکار کوچک است: صدور فاکتور رسمی، ارسال پیامک/واتساپ/تلگرام گروهی، مدیریت مشتریان، دفتر درآمد و هزینهی حرفهای با تفکیک فروش قسطی، انبارداری و پیگیری سفارش آنلاینشاپ — همه در یک اپ ساده با تقویم شمسی. یک هفته کاملا رایگان.">
|
||||
<meta name="keywords" content="شاپ شیپ, shopship, نرم افزار مدیریت کسب و کار, اپ مدیریت کسب و کار, نرم افزار فروشگاهی, نرم افزار حسابداری کوچک, نرم افزار صدور فاکتور, فاکتور رسمی با لوگو, ارسال پیامک انبوه, پیامک تبلیغاتی گروهی, ارسال واتساپ گروهی, نرم افزار مدیریت مشتریان, دفتر درآمد و هزینه, نرم افزار حسابداری فروش قسطی, پیگیری بدهی مشتری, نرم افزار انبارداری, کنترل موجودی انبار, پیگیری سفارش آنلاین شاپ, نرم افزار مغازه, اپ کسب و کار خرد, حسابداری فروشگاه با موبایل">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="author" content="niqow.ir">
|
||||
<link rel="canonical" href="https://shopship.ir/">
|
||||
<link rel="alternate" hreflang="fa-ir" href="https://shopship.ir/">
|
||||
<link rel="alternate" hreflang="x-default" href="https://shopship.ir/">
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="assets/img/icon-192.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
|
||||
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="کاسبیار — اپ مدیریت کسبوکارهای کوچک">
|
||||
<meta property="og:description" content="فاکتور، پیام گروهی، مشتریان، دفتر درآمد و هزینه، انبارداری و نوبتدهی — همه در یک اپ. یک هفته کاملا رایگان.">
|
||||
<meta property="og:url" content="https://mobiniqow.ir/">
|
||||
<meta property="og:site_name" content="شاپ شیپ">
|
||||
<meta property="og:title" content="شاپ شیپ — اپ مدیریت کسبوکارهای کوچک">
|
||||
<meta property="og:description" content="فاکتور، پیام گروهی، مشتریان، دفتر درآمد و هزینهی حرفهای، انبارداری و پیگیری سفارش — همه در یک اپ. یک هفته کاملا رایگان.">
|
||||
<meta property="og:url" content="https://shopship.ir/">
|
||||
<meta property="og:locale" content="fa_IR">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="theme-color" content="#107c41">
|
||||
<meta property="og:image" content="https://shopship.ir/assets/img/og-image.png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:image:alt" content="شاپ شیپ — اپ مدیریت کسبوکارهای کوچک">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="شاپ شیپ — اپ مدیریت کسبوکارهای کوچک">
|
||||
<meta name="twitter:description" content="فاکتور، پیام گروهی، مشتریان، دفتر درآمد و هزینه، انبارداری و پیگیری سفارش — همه در یک اپ.">
|
||||
<meta name="twitter:image" content="https://shopship.ir/assets/img/og-image.png">
|
||||
|
||||
<meta name="theme-color" content="#2d2a55">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-title" content="شاپ شیپ">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700;800&display=swap">
|
||||
@@ -22,100 +47,124 @@
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "کاسبیار",
|
||||
"name": "شاپ شیپ",
|
||||
"alternateName": "ShopShip",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Android, iOS",
|
||||
"description": "اپ مدیریت کسبوکارهای کوچک: فاکتور، پیام گروهی با شماره، مشتریان، دفتر درآمد و هزینه، انبارداری و نوبتدهی.",
|
||||
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "IRR", "description": "یک هفته اول رایگان" }
|
||||
"applicationSubCategory": "Invoicing, CRM, Inventory, Messaging",
|
||||
"operatingSystem": "Android",
|
||||
"inLanguage": "fa-IR",
|
||||
"url": "https://shopship.ir/",
|
||||
"installUrl": "https://cafebazaar.ir/app/ir.niqow.kangelo",
|
||||
"description": "اپ مدیریت کسبوکارهای کوچک: فاکتور، پیام گروهی با شماره، مشتریان، دفتر درآمد و هزینه، انبارداری و پیگیری سفارش.",
|
||||
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "IRR", "description": "یک هفته اول رایگان" },
|
||||
"publisher": { "@type": "Organization", "name": "niqow.ir", "url": "https://niqow.ir" },
|
||||
"author": { "@type": "Organization", "name": "niqow.ir", "url": "https://niqow.ir" }
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="nav container">
|
||||
<span class="nav-brand">کاسبیار</span>
|
||||
<nav class="nav-links">
|
||||
<a href="#tools">بخشهای اپ</a>
|
||||
<a href="#who">برای کیه</a>
|
||||
<a href="#how">نحوهی کار</a>
|
||||
<a href="/articles/">مقالات</a>
|
||||
</nav>
|
||||
<a class="btn btn-primary" href="#cta">دریافت اپ</a>
|
||||
<header class="nav-wrap" id="siteHeader">
|
||||
<div class="nav container">
|
||||
<a class="nav-brand" href="#top">
|
||||
<img src="assets/img/icon-192.png" alt="" width="28" height="28" class="nav-brand-icon">
|
||||
شاپ شیپ
|
||||
</a>
|
||||
<nav class="nav-links">
|
||||
<a href="#tools">بخشهای اپ</a>
|
||||
<a href="#who">برای کیه</a>
|
||||
<a href="#how">نحوهی کار</a>
|
||||
<a href="#pricing">قیمتگذاری</a>
|
||||
<a href="/articles/">مقالات</a>
|
||||
</nav>
|
||||
<a class="btn btn-primary btn-sm" href="#cta">دریافت اپ</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero container">
|
||||
<span class="kicker">اپ مدیریت کسبوکار کوچک</span>
|
||||
<h1>هرچی برای ادارهی کسبوکارت لازمه، توی یک اپ</h1>
|
||||
<p>
|
||||
کاسبیار فاکتور رسمی صادر میکند، پیام گروهی با شماره میفرستد
|
||||
(پیامک، واتساپ، تلگرام، بله، ایتا)، حساب مشتریها و دخلوخرجت را نگه
|
||||
میدارد، انبارت را زیر نظر میگیرد و نوبتدهیات را مدیریت میکند —
|
||||
بدون اینکه کاسبی که تازهکار با موبایل است گیج شود.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-primary" href="#cta">یک هفته رایگان امتحان کن</a>
|
||||
<a class="btn btn-secondary" href="#tools">ببین چی داره</a>
|
||||
<section class="hero container" id="top">
|
||||
<div class="hero-blobs" aria-hidden="true">
|
||||
<svg viewBox="0 0 400 500" width="100%" height="100%">
|
||||
<circle cx="330" cy="70" r="120" fill="var(--color-pink)" opacity="0.55"/>
|
||||
<circle cx="260" cy="40" r="60" fill="var(--color-coral)" opacity="0.5"/>
|
||||
<circle cx="360" cy="260" r="90" fill="var(--color-lavender)" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hero-copy">
|
||||
<span class="kicker">اپ مدیریت کسبوکار کوچک</span>
|
||||
<h1>هرچی برای ادارهی کسبوکارت لازمه، توی یک اپ</h1>
|
||||
<p>
|
||||
شاپ شیپ فاکتور رسمی صادر میکند، پیام گروهی با شماره میفرستد
|
||||
(پیامک، واتساپ، تلگرام، بله، ایتا)، حساب مشتریها و دخلوخرجت را نگه
|
||||
میدارد، انبارت را زیر نظر میگیرد و سفارشهایت را پیگیری میکند —
|
||||
بدون اینکه کاسبی که تازهکار با موبایل است گیج شود.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-primary" href="#cta">یک هفته رایگان امتحان کن</a>
|
||||
<a class="btn btn-secondary" href="#tools">ببین چی داره</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phone-mock" aria-hidden="true">
|
||||
<div class="phone-screen">
|
||||
<div class="phone-hero-card">
|
||||
<div class="line"></div>
|
||||
<div class="line short"></div>
|
||||
</div>
|
||||
<div class="phone-stats">
|
||||
<div><div class="dot accent-0"></div></div>
|
||||
<div><div class="dot accent-1"></div></div>
|
||||
<div><div class="dot accent-2"></div></div>
|
||||
</div>
|
||||
<div class="phone-tiles">
|
||||
<div class="phone-tile accent-0"></div>
|
||||
<div class="phone-tile accent-1"></div>
|
||||
<div class="phone-tile accent-2"></div>
|
||||
<div class="phone-tile accent-3"></div>
|
||||
<div class="phone-tile accent-4"></div>
|
||||
<div class="phone-tile accent-5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="hairline">
|
||||
|
||||
<section id="tools" class="container">
|
||||
<div class="section-head">
|
||||
<h2>بخشهای کاسبیار</h2>
|
||||
<p>هرکدام جدا فعال میشود، پس فقط برای چیزی که لازم داری هزینه میکنی.</p>
|
||||
</div>
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<div class="icon">🧾</div>
|
||||
<h3>فاکتور</h3>
|
||||
<p>فاکتور رسمی با لوگو، چند نوع مالیات، تخفیف روی هر قلم کالا، و پیگیری پرداختشده/نشده — کاملا محلی روی گوشی.</p>
|
||||
<section id="tools">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<span class="kicker">بخشهای شاپ شیپ</span>
|
||||
<h2>هرکدام جدا فعال میشود</h2>
|
||||
<p>فقط برای چیزی که کسبوکارت لازم دارد هزینه میکنی — نه یک بستهی سنگین که نصفش را استفاده نمیکنی.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon">📨</div>
|
||||
<h3>پیام گروهی</h3>
|
||||
<p>یک قالب بنویس، به مخاطبینت پیامک/واتساپ/تلگرام/بله/ایتا بفرست — از مسیر رسمی هر پلتفرم، بدون ترفندهای دور زدن قانون.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon">👥</div>
|
||||
<h3>مشتریان</h3>
|
||||
<p>برای هر مشتری تاریخچهی خریدش را ببین — خودش از فاکتورهایی که برایش صادر کردی ساخته میشود.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon">💰</div>
|
||||
<h3>دفتر درآمد و هزینه</h3>
|
||||
<p>هرچه وارد و خارج میشود را ثبت کن، نمودار هفتگیاش را ببین، بر اساس درآمد یا هزینه فیلتر کن.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon">📦</div>
|
||||
<h3>انبارداری</h3>
|
||||
<p>موجودی کالاهایت را دستهبندی کن، با یک ضربه کموزیاد کن، و وقتی چیزی کم شد هشدار بگیر.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon">📅</div>
|
||||
<h3>نوبتدهی</h3>
|
||||
<p>برای آرایشگاه، مطب، کارگاه یا هر جای دیگری که نوبت میگیرد — لیست نوبتهای امروز و فردا همیشه دم دست.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon">✅</div>
|
||||
<h3>گزارش سریع</h3>
|
||||
<p>قالب کلید-مقدار بساز (مثلا لیست کالاهای روزانه)؛ اپ یکییکی مقدارش را میپرسد و برایت آماده میفرستد.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon">🚚</div>
|
||||
<h3>پیگیری سفارش</h3>
|
||||
<p>برای آنلاینشاپهای کوچک: مراحل کارت را تعریف کن (آمادهسازی، بستهبندی، ارسال، تحویل) و با هر «مرحلهی بعد» یک پیامک خودکار از روی قالب دلخواهت برای مشتری میرود.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon">🎁</div>
|
||||
<h3>دعوت دوستان</h3>
|
||||
<p>کد معرف خودت را با دوستانت به اشتراک بگذار — هر دوتون جم جایزه میگیرید و میتوانید اشتراک را با آن تمدید کنید.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon">🔒</div>
|
||||
<h3>امن و ساده</h3>
|
||||
<p>قفل اثرانگشت برای اطلاعات حساس کسبوکارت، تاریخ شمسی همهجا، و ظاهری که کار کردن باهاش راحت است.</p>
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<div class="icon-tile accent-1">🧾</div>
|
||||
<h3>فاکتور</h3>
|
||||
<p>فاکتور رسمی با لوگو، چند نوع مالیات، تخفیف روی هر قلم کالا، اتصال به انبار، و پیگیری پرداختشده/نشده.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon-tile accent-3">📨</div>
|
||||
<h3>پیام گروهی</h3>
|
||||
<p>یک قالب بنویس، به مخاطبینت پیامک/واتساپ/تلگرام/بله/ایتا بفرست — از مسیر رسمی هر پلتفرم، بدون ترفندهای دور زدن قانون.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon-tile accent-0">👥</div>
|
||||
<h3>مشتریان</h3>
|
||||
<p>برای هر مشتری تاریخچهی خریدش و ماندهی بدهیاش را ببین — خودش از فاکتورها و دفترت ساخته میشود.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon-tile accent-4">💰</div>
|
||||
<h3>دفتر درآمد و هزینه</h3>
|
||||
<p>ثبتِ ساده برای خودت، حسابداریِ درست پشتِ صحنه — فروش قسطی را جدا از نقدی میشناسد، اقساط را پیگیری میکند و خروجی CSV میدهد.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon-tile accent-5">📦</div>
|
||||
<h3>انبارداری</h3>
|
||||
<p>موجودی کالاهایت را دستهبندی کن، با یک ضربه کموزیاد کن، ارزش کل انبارت را ببین و وقتی چیزی کم شد هشدار بگیر.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon-tile accent-2">🚚</div>
|
||||
<h3>پیگیری سفارش</h3>
|
||||
<p>مراحل کارت را تعریف کن (آمادهسازی، بستهبندی، ارسال، تحویل) و با هر «مرحلهی بعد» یک پیامک خودکار از روی قالب دلخواهت برای مشتری میرود.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -123,84 +172,192 @@
|
||||
<section id="who" class="alt">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2>کاسبیار برای کیه؟</h2>
|
||||
<span class="kicker">برای کی مناسبه</span>
|
||||
<h2>شاپ شیپ برای کیه؟</h2>
|
||||
<p>برای هر کسی که یک کسبوکار کوچک دارد و نمیخواهد وقتش را صرف نرمافزارهای پیچیده کند.</p>
|
||||
</div>
|
||||
<div class="grid grid-5">
|
||||
<div class="card">
|
||||
<div class="icon">🛍️</div>
|
||||
<div class="icon-tile accent-0">🛍️</div>
|
||||
<h3>فروشگاهدارها</h3>
|
||||
<p>فاکتور بزن، انبارت را زیر نظر بگیر، به مشتریهایت خبر بده.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon">💇</div>
|
||||
<h3>آرایشگاه و سالنها</h3>
|
||||
<p>نوبتدهی منظم و یادآوری نوبت با پیامک.</p>
|
||||
<div class="icon-tile accent-1">🛒</div>
|
||||
<h3>آنلاینشاپهای کوچک</h3>
|
||||
<p>برای هر سفارش، شمارهی مشتری را وارد کن و با «پیگیری سفارش» در هر مرحله خودکار برایش پیامک بفرست.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon">🥬</div>
|
||||
<div class="icon-tile accent-2">🥬</div>
|
||||
<h3>میوه/سبزی و توزیعکنندهها</h3>
|
||||
<p>هر روز با «گزارش سریع» موجودی را به مشتریهای ثابت اعلام کن.</p>
|
||||
<p>گزارش روزانهی موجودی را با یک قالبِ آماده به مشتریهای ثابتت بفرست.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon">🧰</div>
|
||||
<div class="icon-tile accent-3">🧰</div>
|
||||
<h3>کسبوکارهای خدماتی</h3>
|
||||
<p>از تعمیرکار تا مشاور — حساب مشتری، دخلوخرج و پیام گروهی یکجا.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="icon">🛒</div>
|
||||
<h3>آنلاینشاپهای کوچک</h3>
|
||||
<p>برای هر سفارش، شمارهی مشتری را وارد کن و با «پیگیری سفارش» در هر مرحله (آمادهسازی، بستهبندی، ارسال، تحویل + کد پیگیری پستی) خودکار برایش پیامک بفرست.</p>
|
||||
<div class="icon-tile accent-4">💼</div>
|
||||
<h3>فروش قسطی/نسیه</h3>
|
||||
<p>وقتی جنسی را قسطی میدهی، دفترت خودش میفهمد این یک نوع بدهکاری است، نه فقط یک عدد در لیست درآمد.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="how" class="container">
|
||||
<div class="section-head">
|
||||
<h2>در سه قدم شروع کن</h2>
|
||||
<section class="stats-band">
|
||||
<div class="container">
|
||||
<div class="stats-grid">
|
||||
<div>
|
||||
<div class="stat-num">۶</div>
|
||||
<div class="stat-label">ابزار در یک اپ</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-num">۵</div>
|
||||
<div class="stat-label">کانال پیامرسانی</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-num">۷</div>
|
||||
<div class="stat-label">روز اول رایگان</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-num">۱</div>
|
||||
<div class="stat-label">اپ بهجای چندتا نرمافزار جدا</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div>
|
||||
<h3>با شمارهات وارد شو</h3>
|
||||
<p>فقط شماره موبایل و یک کد تایید — همان لحظه یک هفته رایگان برایت فعال میشود.</p>
|
||||
</section>
|
||||
|
||||
<section id="how">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<span class="kicker">شروع سریع</span>
|
||||
<h2>در سه قدم شروع کن</h2>
|
||||
</div>
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-num">۱</div>
|
||||
<div>
|
||||
<h3>با شمارهات وارد شو</h3>
|
||||
<p>فقط شماره موبایل و یک کد تایید — همان لحظه یک هفته رایگان برایت فعال میشود.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">۲</div>
|
||||
<div>
|
||||
<h3>بخشی که لازم داری را فعال کن</h3>
|
||||
<p>هر بخش قیمت جدا دارد؛ فقط برای همانی که کسبوکارت لازم دارد هزینه کن.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">۳</div>
|
||||
<div>
|
||||
<h3>کارت را شروع کن</h3>
|
||||
<p>فاکتور بزن، پیام بفرست، انبار و دخلوخرجت را ثبت کن — همه از یک اپ.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div>
|
||||
<h3>بخشی که لازم داری را فعال کن</h3>
|
||||
<p>هر بخش قیمت جدا دارد؛ فقط برای همانی که کسبوکارت لازم دارد هزینه کن.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="alt">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<span class="kicker">چرا شاپ شیپ</span>
|
||||
<h2>ساده برای تو، درست پشتِ صحنه</h2>
|
||||
</div>
|
||||
<div class="trust-grid">
|
||||
<div class="trust-item">
|
||||
<div class="icon-tile accent-4">🔒</div>
|
||||
<h3>امن و شخصی</h3>
|
||||
<p>قفل اثرانگشت برای اطلاعات حساس کسبوکارت، و دیتای تو فقط مالِ خودت است.</p>
|
||||
</div>
|
||||
<div class="trust-item">
|
||||
<div class="icon-tile accent-0">📆</div>
|
||||
<h3>بدون قرارداد بلندمدت</h3>
|
||||
<p>هر ابزار را ماهانه یا چندماهه فعال میکنی — هر وقت خواستی تمدید نکن.</p>
|
||||
</div>
|
||||
<div class="trust-item">
|
||||
<div class="icon-tile accent-3">🗓️</div>
|
||||
<h3>تاریخ شمسی همهجا</h3>
|
||||
<p>فاکتور، دفتر، پیگیری سفارش — همهجا با تقویم شمسیِ خودمان.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div>
|
||||
<h3>کارت را شروع کن</h3>
|
||||
<p>فاکتور بزن، پیام بفرست، انبار و دخلوخرجت را ثبت کن — همه از یک اپ.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pricing">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<span class="kicker">قیمتگذاری</span>
|
||||
<h2>فقط برای همون ابزاری که استفاده میکنی</h2>
|
||||
</div>
|
||||
<div class="pricing-card">
|
||||
<span class="badge">۷ روز اول، همهچیز رایگان</span>
|
||||
<p style="font-size:16px; margin-bottom: var(--space-6);">
|
||||
شاپ شیپ اشتراکِ همهیاهیچ نمیفروشد. هر بخش (فاکتور، پیام گروهی،
|
||||
دفتر، انبار، مشتریان، پیگیری سفارش) را جدا و فقط وقتی لازمش داری
|
||||
با جم فعال میکنی — قیمتِ هر بخش و مدتش داخل خودِ اپ، توی فروشگاه،
|
||||
شفاف نوشته شده.
|
||||
</p>
|
||||
<a class="btn btn-primary" href="#cta">شروع رایگان</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="cta" class="cta-band">
|
||||
<div class="container">
|
||||
<h2>یک هفته کاملا رایگان امتحانش کن</h2>
|
||||
<p>کاسبیار را نصب کن، با شمارهات وارد شو، و همین امروز اولین فاکتورت را بزن.</p>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-primary" href="#">دانلود برای اندروید</a>
|
||||
<a class="btn btn-secondary" href="#" style="border-color:rgba(243,242,242,0.3); color:#f3f2f2;">دانلود برای iOS</a>
|
||||
</div>
|
||||
<h2>یک هفته کاملا رایگان امتحانش کن</h2>
|
||||
<p>شاپ شیپ را نصب کن، با شمارهات وارد شو، و همین امروز اولین فاکتورت را بزن.</p>
|
||||
<div class="hero-actions" style="justify-content:center;">
|
||||
<a class="btn btn-primary" href="https://cafebazaar.ir/app/ir.niqow.kangelo" target="_blank" rel="noopener" style="background:#fff; color:var(--color-brand);">دانلود از کافهبازار</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<span>© کاسبیار — اپ مدیریت کسبوکارهای کوچک</span>
|
||||
<div class="footer-brand">
|
||||
<strong>شاپ شیپ</strong>
|
||||
<span>محصولی از <a href="https://niqow.ir" target="_blank" rel="noopener">niqow.ir</a></span>
|
||||
</div>
|
||||
<span><a href="/articles/">مقالات</a></span>
|
||||
<span>قدرت گرفته از <a href="https://niqow.ir" target="_blank" rel="noopener">niqow.ir</a></span>
|
||||
<span>© شاپ شیپ — اپ مدیریت کسبوکارهای کوچک</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
var header = document.getElementById('siteHeader');
|
||||
if (header) {
|
||||
var onScroll = function () {
|
||||
header.classList.toggle('is-scrolled', window.scrollY > 8);
|
||||
};
|
||||
onScroll();
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
}
|
||||
|
||||
var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
if (!prefersReducedMotion && 'IntersectionObserver' in window) {
|
||||
var revealTargets = document.querySelectorAll(
|
||||
'.card, .step, .trust-item, .pricing-card, .section-head, .stats-grid > div'
|
||||
);
|
||||
revealTargets.forEach(function (el, i) {
|
||||
el.classList.add('reveal');
|
||||
el.style.transitionDelay = (i % 6) * 60 + 'ms';
|
||||
});
|
||||
var observer = new IntersectionObserver(
|
||||
function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('reveal-visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.15, rootMargin: '0px 0px -40px 0px' }
|
||||
);
|
||||
revealTargets.forEach(function (el) { observer.observe(el); });
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://mobiniqow.ir/sitemap.xml
|
||||
Sitemap: https://shopship.ir/sitemap.xml
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url><loc>https://mobiniqow.ir/</loc><changefreq>weekly</changefreq><priority>1.0</priority></url>
|
||||
<url><loc>https://mobiniqow.ir/articles/</loc><changefreq>weekly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://mobiniqow.ir/articles/peyam-goruhi-ba-shomare/</loc><priority>0.6</priority></url>
|
||||
<url><loc>https://mobiniqow.ir/articles/field-sefareshi-dar-template/</loc><priority>0.6</priority></url>
|
||||
<url><loc>https://mobiniqow.ir/articles/merge-mokhatebin-ganoshi/</loc><priority>0.6</priority></url>
|
||||
<url><loc>https://mobiniqow.ir/articles/sms-ya-whatsapp-business/</loc><priority>0.6</priority></url>
|
||||
<url><loc>https://shopship.ir/</loc><changefreq>weekly</changefreq><priority>1.0</priority></url>
|
||||
<url><loc>https://shopship.ir/articles/</loc><changefreq>weekly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://shopship.ir/articles/peyam-goruhi-ba-shomare/</loc><lastmod>2025-08-23</lastmod><priority>0.6</priority></url>
|
||||
<url><loc>https://shopship.ir/articles/field-sefareshi-dar-template/</loc><lastmod>2025-08-23</lastmod><priority>0.6</priority></url>
|
||||
<url><loc>https://shopship.ir/articles/merge-mokhatebin-ganoshi/</loc><lastmod>2025-08-23</lastmod><priority>0.6</priority></url>
|
||||
<url><loc>https://shopship.ir/articles/sms-ya-whatsapp-business/</loc><lastmod>2025-08-23</lastmod><priority>0.6</priority></url>
|
||||
<url><loc>https://shopship.ir/articles/forosh-ghesti-hesabdari/</loc><lastmod>2026-08-30</lastmod><priority>0.7</priority></url>
|
||||
<url><loc>https://shopship.ir/articles/fatoore-rasmi-baraye-maghaze/</loc><lastmod>2026-09-02</lastmod><priority>0.7</priority></url>
|
||||
<url><loc>https://shopship.ir/articles/kontorol-mojoodi-anbar-ba-mobile/</loc><lastmod>2026-09-05</lastmod><priority>0.7</priority></url>
|
||||
<url><loc>https://shopship.ir/articles/peygiri-sefaresh-online-shop-etemad/</loc><lastmod>2026-09-08</lastmod><priority>0.7</priority></url>
|
||||
</urlset>
|
||||
|
||||