پرش به محتوا

تست5 - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
خط ۱: خط ۱:
/*
<!--
  Faraghaib / فراغیب
صفحهٔ اصلی مدرن برند «فراغیب» برای MediaWiki و پوستهٔ Vector 2022
  Paste this file into: MediaWiki:Common.css
  All selectors are scoped to .fg-home to reduce skin conflicts.
  Optional remote assets:
  https://dl.faraghaib.ir/mediawiki/faraghaib/
*/


@font-face {
نصب:
font-family: "FaraghaibVazirmatn";
۱) این متن را در صفحهٔ اصلی ویکی قرار دهید.
src: url("https://dl.faraghaib.ir/mediawiki/faraghaib/Vazirmatn-Variable.woff2") format("woff2");
۲) فایل MediaWiki-Common.css را در MediaWiki:Common.css قرار دهید.
font-style: normal;
۳) فایل MediaWiki-Common.js را در MediaWiki:Common.js قرار دهید.
font-weight: 100 900;
۴) نام فایل‌های رسانه‌ای را با فایل‌های واقعی ویکی خود جایگزین کنید.
font-display: swap;
۵) مسیر فایل‌های اختیاری سرور دانلود در CSS برابر است با:
}
  https://dl.faraghaib.ir/mediawiki/faraghaib/
-->
__NOTOC__
__NOEDITSECTION__


.mw-parser-output .fg-home {
<div class="fg-home" dir="rtl" lang="fa">
--fg-ink: #172033;
--fg-muted: #667085;
--fg-soft: #f6f7fb;
--fg-border: rgba(23, 32, 51, 0.1);
--fg-primary: #6d28d9;
--fg-primary-dark: #4c1d95;
--fg-cyan: #06b6d4;
--fg-lime: #b7f34a;
--fg-white: #ffffff;
--fg-shadow: 0 24px 70px rgba(30, 27, 75, 0.12);
box-sizing: border-box;
color: var(--fg-ink);
font-family: "FaraghaibVazirmatn", Vazirmatn, Tahoma, Arial, sans-serif;
font-size: 16px;
line-height: 1.8;
margin: 0 auto;
max-width: 100%;
}


.mw-parser-output .fg-home *,
<div class="fg-shell">
.mw-parser-output .fg-home *::before,
<div class="fg-hero" id="fg-top">
.mw-parser-output .fg-home *::after {
<div class="fg-hero__content">
box-sizing: border-box;
<div class="fg-eyebrow"><span class="fg-eyebrow__dot"></span> فراغیب؛ مهندسی ایده‌های دیجیتال</div>
}
<h1 class="fg-hero__title">ساختن آینده، با کدهای دقیق و خلاقانه</h1>
<p class="fg-hero__lead">فراغیب یک مجموعهٔ فناوری برای طراحی، توسعه و رشد محصولات دیجیتال است؛ از اولین ایده تا یک تجربهٔ سریع، امن و ماندگار.</p>
<div class="fg-actions">
[[#fg-services|<span class="fg-button fg-button--primary">مشاهدهٔ خدمات <span aria-hidden="true">←</span></span>]]
[[#fg-contact|<span class="fg-button fg-button--ghost">شروع گفتگو</span>]]
</div>
<div class="fg-trust-row">
<span class="fg-trust-row__item"><span class="fg-check" aria-hidden="true">✓</span> طراحی انسان‌محور</span>
<span class="fg-trust-row__item"><span class="fg-check" aria-hidden="true">✓</span> معماری قابل توسعه</span>
<span class="fg-trust-row__item"><span class="fg-check" aria-hidden="true">✓</span> همراهی بلندمدت</span>
</div>
</div>


.mw-parser-output .fg-home a {
<div class="fg-hero__visual" aria-label="نمونه‌ای از فضای کاری فراغیب">
color: inherit;
<div class="fg-orbit fg-orbit--one"></div>
}
<div class="fg-orbit fg-orbit--two"></div>
<div class="fg-code-window">
<div class="fg-code-window__bar"><span></span><span></span><span></span><b>faraghaib.dev</b></div>
<pre class="fg-code-window__body"><code><span class="fg-code-keyword">const</span> vision = {
  <span class="fg-code-property">brand</span>: <span class="fg-code-string">"فراغیب"</span>,
  <span class="fg-code-property">focus</span>: [<span class="fg-code-string">"web"</span>, <span class="fg-code-string">"software"</span>],
  <span class="fg-code-property">quality</span>: <span class="fg-code-boolean">true</span>,
  <span class="fg-code-property">future</span>: <span class="fg-code-string">"in progress"</span>
};</code></pre>
<div class="fg-code-window__status"><span class="fg-status-dot"></span> محصول شما آمادهٔ شروع است</div>
</div>
</div>
</div>


.mw-parser-output .fg-home h1,
<div class="fg-stats" aria-label="آمار فراغیب">
.mw-parser-output .fg-home h2,
<div class="fg-stat">
.mw-parser-output .fg-home h3,
<strong class="fg-stat__number" data-fg-count="7">۰</strong>
.mw-parser-output .fg-home p {
<span class="fg-stat__label">سال تجربهٔ فنی</span>
margin-top: 0;
</div>
}
<div class="fg-stat">
<strong class="fg-stat__number" data-fg-count="42">۰</strong>
<span class="fg-stat__label">پروژه و راهکار دیجیتال</span>
</div>
<div class="fg-stat">
<strong class="fg-stat__number" data-fg-count="18">۰</strong>
<span class="fg-stat__label">فناوری در جعبه‌ابزار</span>
</div>
<div class="fg-stat">
<strong class="fg-stat__number" data-fg-count="100" data-fg-suffix="%">۰</strong>
<span class="fg-stat__label">تعهد به کیفیت</span>
</div>
</div>


.mw-parser-output .fg-home h2 {
<div class="fg-section-heading" id="fg-services">
font-size: clamp(1.65rem, 3vw, 2.55rem);
<div>
letter-spacing: -0.04em;
<span class="fg-kicker">توانمندی‌های فراغیب</span>
line-height: 1.35;
<h2>هر چیزی که یک محصول دیجیتال برای رشد نیاز دارد</h2>
margin-bottom: 0.55rem;
</div>
}
<p>ترکیبی از استراتژی، طراحی و مهندسی نرم‌افزار برای ساختن تجربه‌ای که هم زیباست و هم نتیجه می‌دهد.</p>
</div>


.mw-parser-output .fg-home h3 {
<div class="fg-service-grid">
font-size: 1.18rem;
<div class="fg-service-card fg-service-card--featured">
line-height: 1.5;
<div class="fg-service-card__number">۰۱</div>
margin-bottom: 0.55rem;
<div class="fg-service-card__icon" aria-hidden="true">&lt;/&gt;</div>
}
<h3>توسعهٔ وب و نرم‌افزار</h3>
<p>ساخت وب‌سایت‌ها، پنل‌ها و سامانه‌های اختصاصی با کد تمیز، امنیت مناسب و معماری قابل نگهداری.</p>
[[خدمات#توسعه-نرم‌افزار|<span class="fg-service-card__link">جزئیات خدمت <span aria-hidden="true">←</span></span>]]
</div>
<div class="fg-service-card">
<div class="fg-service-card__number">۰۲</div>
<div class="fg-service-card__icon" aria-hidden="true">UX</div>
<h3>طراحی تجربه و رابط کاربری</h3>
<p>تبدیل نیازهای واقعی کاربران به مسیرهای ساده، رابط‌های چشم‌نواز و تجربه‌ای که اعتماد می‌سازد.</p>
[[خدمات#طراحی-رابط-کاربری|<span class="fg-service-card__link">جزئیات خدمت <span aria-hidden="true">←</span></span>]]
</div>
<div class="fg-service-card">
<div class="fg-service-card__number">۰۳</div>
<div class="fg-service-card__icon" aria-hidden="true">API</div>
<h3>اتصال سرویس و اتوماسیون</h3>
<p>یکپارچه‌سازی APIها، خودکارسازی فرایندها و حذف کارهای تکراری برای سرعت بیشتر کسب‌وکار.</p>
[[خدمات#اتوماسیون|<span class="fg-service-card__link">جزئیات خدمت <span aria-hidden="true">←</span></span>]]
</div>
<div class="fg-service-card">
<div class="fg-service-card__number">۰۴</div>
<div class="fg-service-card__icon" aria-hidden="true">+</div>
<h3>مشاوره و پشتیبانی فنی</h3>
<p>از انتخاب فناوری تا بازبینی کد و بهبود محصول، در تصمیم‌های فنی مهم کنار تیم شما هستیم.</p>
[[تماس با ما|<span class="fg-service-card__link">دریافت مشاوره <span aria-hidden="true">←</span></span>]]
</div>
</div>


.mw-parser-output .fg-shell {
<div class="fg-story fg-reveal" id="fg-about">
margin: 0 auto;
<div class="fg-story__media">
max-width: 1240px;
[[File:فراغیب-تصویر-تیم.webp|frameless|alt=تیم و فضای کاری فراغیب|تصویر تیم و فضای کاری فراغیب]]
padding: 24px 18px 46px;
<div class="fg-story__badge"><strong>از ایده</strong><span>تا اثر واقعی</span></div>
}
</div>
<div class="fg-story__content">
<span class="fg-kicker">دربارهٔ فراغیب</span>
<h2>فناوری وقتی ارزشمند است که مسئله‌ای واقعی را حل کند</h2>
<p>ما در فراغیب باور داریم یک محصول خوب فقط با انتخاب زبان برنامه‌نویسی ساخته نمی‌شود؛ نتیجهٔ خوب از شناخت مسئله، تصمیم‌های درست، اجرای دقیق و یادگیری مداوم به‌وجود می‌آید.</p>
<p>به همین دلیل، پروژه‌ها را از نگاه کسب‌وکار و کاربر بررسی می‌کنیم و بعد راهکاری می‌سازیم که بتواند همراه رشد شما تغییر کند.</p>
<div class="fg-story__points">
<span><b>الف</b> گفت‌وگوی شفاف</span>
<span><b>ب</b> تحویل مرحله‌ای</span>
<span><b>ج</b> مستندسازی فنی</span>
</div>
[[درباره ما|<span class="fg-text-link">بیشتر دربارهٔ فراغیب <span aria-hidden="true">←</span></span>]]
</div>
</div>


.mw-parser-output .fg-hero {
<div class="fg-media-section" id="fg-media">
background:
<div class="fg-section-heading">
radial-gradient(circle at 80% 15%, rgba(6, 182, 212, 0.2), transparent 30%),
<div>
linear-gradient(135deg, #1b1248 0%, #30206d 48%, #6d28d9 100%);
<span class="fg-kicker">فراغیب را ببینید و بشنوید</span>
border-radius: 32px;
<h2>یک معرفی کوتاه، یک تصویر روشن</h2>
box-shadow: var(--fg-shadow);
</div>
color: #fff;
<p>رسانه‌های زیر را با فایل‌های واقعی خود جایگزین کنید. فایل‌های صوتی و ویدیویی با افزونهٔ رسمی TimedMediaHandler نمایش داده می‌شوند.</p>
display: grid;
</div>
gap: 22px;
grid-template-columns: minmax(0, 1.07fr) minmax(330px, 0.93fr);
min-height: 540px;
overflow: hidden;
padding: clamp(30px, 5vw, 72px);
position: relative;
}


.mw-parser-output .fg-hero::after {
<div class="fg-media-grid">
background: linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.08) 55%, transparent 55%);
<div class="fg-media-card fg-media-card--video">
background-size: 28px 28px;
<div class="fg-media-card__heading"><span class="fg-media-card__label">ویدیو</span><h3>داستان فراغیب در چند دقیقه</h3></div>
content: "";
<div class="fg-media-frame">
inset: 0;
[[File:فراغیب-ویدیوی-معرفی.webm|frameless|center|alt=ویدیوی معرفی فراغیب|ویدیوی معرفی فراغیب]]
opacity: 0.25;
</div>
pointer-events: none;
<p>با مسیر، نگاه و توانمندی‌های فراغیب آشنا شوید.</p>
position: absolute;
</div>
}
<div class="fg-media-card fg-media-card--audio">
<div class="fg-media-card__heading"><span class="fg-media-card__label">صوت</span><h3>پیام صوتی بنیان‌گذار</h3></div>
<div class="fg-media-frame fg-media-frame--audio">
[[File:فراغیب-پیام-صوتی.ogg|frameless|center|alt=پیام صوتی معرفی فراغیب|پخش پیام صوتی معرفی فراغیب]]
</div>
<p>چرا فراغیب شکل گرفت و قرار است چه مسئله‌ای را حل کند؟</p>
</div>
</div>
</div>


.mw-parser-output .fg-hero__content,
<div class="fg-slider-section fg-reveal" id="fg-projects">
.mw-parser-output .fg-hero__visual {
<div class="fg-section-heading">
position: relative;
<div>
z-index: 1;
<span class="fg-kicker">نمونه‌هایی از مسیر ما</span>
}
<h2>هر پروژه، یک روایت تازه</h2>
</div>
<p>تصاویر نمونه‌کار، جلسات یا فرایند تولید را در اسلایدر زیر نمایش دهید.</p>
</div>


.mw-parser-output .fg-hero__content {
<div class="fg-slider" aria-label="اسلایدر تصاویر فراغیب">
align-self: center;
<div class="fg-slider__viewport">
max-width: 680px;
<div class="fg-slide is-active" id="fg-slide-1">
}
[[File:فراغیب-اسلاید-۱.webp|frameless|center|alt=تصویر اول از فعالیت فراغیب|شناخت مسئله و کشف فرصت]]
<div class="fg-slide__caption"><strong>شناخت مسئله و کشف فرصت</strong><span>شروع هر راهکار از یک سؤال درست است.</span></div>
</div>
<div class="fg-slide" id="fg-slide-2">
[[File:فراغیب-اسلاید-۲.webp|frameless|center|alt=تصویر دوم از فعالیت فراغیب|طراحی مسیر تجربه]]
<div class="fg-slide__caption"><strong>طراحی مسیر تجربه</strong><span>پیچیدگی را به تجربه‌ای ساده تبدیل می‌کنیم.</span></div>
</div>
<div class="fg-slide" id="fg-slide-3">
[[File:فراغیب-اسلاید-۳.webp|frameless|center|alt=تصویر سوم از فعالیت فراغیب|ساخت با مهندسی دقیق]]
<div class="fg-slide__caption"><strong>ساخت با مهندسی دقیق</strong><span>کدی که امروز خوب کار کند و فردا هم قابل توسعه بماند.</span></div>
</div>
<div class="fg-slide" id="fg-slide-4">
[[File:فراغیب-اسلاید-۴.webp|frameless|center|alt=تصویر چهارم از فعالیت فراغیب|تحویل و رشد مستمر]]
<div class="fg-slide__caption"><strong>تحویل و رشد مستمر</strong><span>پایان پروژه، آغاز مرحلهٔ بعدی رشد است.</span></div>
</div>
</div>
<div class="fg-slider__controls">
<button type="button" class="fg-slider__button fg-slider__button--prev" aria-label="تصویر قبلی">→</button>
<div class="fg-slider__dots" role="tablist" aria-label="انتخاب تصویر">
<button type="button" class="fg-slider__dot is-active" role="tab" aria-selected="true" aria-controls="fg-slide-1" aria-label="تصویر ۱"></button>
<button type="button" class="fg-slider__dot" role="tab" aria-selected="false" aria-controls="fg-slide-2" aria-label="تصویر ۲"></button>
<button type="button" class="fg-slider__dot" role="tab" aria-selected="false" aria-controls="fg-slide-3" aria-label="تصویر ۳"></button>
<button type="button" class="fg-slider__dot" role="tab" aria-selected="false" aria-controls="fg-slide-4" aria-label="تصویر ۴"></button>
</div>
<button type="button" class="fg-slider__button fg-slider__button--next" aria-label="تصویر بعدی">←</button>
</div>
</div>
</div>


.mw-parser-output .fg-eyebrow,
<div class="fg-process" id="fg-process">
.mw-parser-output .fg-kicker {
<div class="fg-section-heading">
color: var(--fg-cyan);
<div>
display: inline-flex;
<span class="fg-kicker">روش همکاری</span>
font-size: 0.82rem;
<h2>چهار گام تا یک نتیجهٔ قابل اتکا</h2>
font-weight: 800;
</div>
letter-spacing: 0.08em;
</div>
line-height: 1.4;
<div class="fg-process__grid">
text-transform: uppercase;
<div class="fg-process__item"><span>۰۱</span><h3>شناخت</h3><p>هدف، مخاطب و مسئله را دقیق می‌کنیم.</p></div>
}
<div class="fg-process__item"><span>۰۲</span><h3>طراحی</h3><p>راهکار و مسیر اجرای قابل سنجش می‌سازیم.</p></div>
<div class="fg-process__item"><span>۰۳</span><h3>اجرا</h3><p>محصول را مرحله‌ای، شفاف و قابل آزمون توسعه می‌دهیم.</p></div>
<div class="fg-process__item"><span>۰۴</span><h3>رشد</h3><p>با داده و بازخورد، محصول را بهتر می‌کنیم.</p></div>
</div>
</div>


.mw-parser-output .fg-eyebrow {
<div class="fg-contact" id="fg-contact">
align-items: center;
<div class="fg-contact__content">
color: var(--fg-lime);
<span class="fg-kicker">آمادهٔ شروع هستید؟</span>
gap: 9px;
<h2>بیایید ایدهٔ شما را به یک تجربهٔ دیجیتال ماندگار تبدیل کنیم.</h2>
margin-bottom: 18px;
<p>برای مشاوره، همکاری یا دریافت برآورد اولیه، از طریق صفحهٔ تماس با ما پیام بفرستید.</p>
}
<div class="fg-actions">
[[تماس با ما|<span class="fg-button fg-button--light">تماس با فراغیب <span aria-hidden="true">←</span></span>]]
<a class="fg-contact__email" href="mailto:info@faraghaib.ir">info@faraghaib.ir</a>
</div>
</div>
<div class="fg-contact__mark" aria-hidden="true">ف</div>
</div>


.mw-parser-output .fg-eyebrow__dot,
<div class="fg-footer">
.mw-parser-output .fg-status-dot {
<span>© فراغیب — مهندسی ایده‌های دیجیتال</span>
background: var(--fg-lime);
<span>[[#fg-top|بازگشت به بالا ↑]]</span>
border-radius: 50%;
</div>
box-shadow: 0 0 0 5px rgba(183, 243, 74, 0.16);
</div>
display: inline-block;
</div>
height: 8px;
width: 8px;
}
 
.mw-parser-output .fg-hero__title {
font-size: clamp(2.55rem, 6vw, 5.6rem);
font-weight: 900;
letter-spacing: -0.07em;
line-height: 1.05;
margin: 0 0 22px;
max-width: 750px;
}
 
.mw-parser-output .fg-hero__lead {
color: rgba(255, 255, 255, 0.78);
font-size: clamp(1rem, 1.5vw, 1.18rem);
line-height: 2;
margin-bottom: 26px;
max-width: 650px;
}
 
.mw-parser-output .fg-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
 
.mw-parser-output .fg-button {
align-items: center;
border: 1px solid transparent;
border-radius: 999px;
display: inline-flex;
font-size: 0.95rem;
font-weight: 800;
gap: 10px;
justify-content: center;
min-height: 48px;
padding: 9px 19px;
text-decoration: none;
transition: box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease, color 180ms ease;
}
 
.mw-parser-output .fg-button:hover,
.mw-parser-output .fg-button:focus-visible {
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.16);
transform: translateY(-2px);
text-decoration: none;
}
 
.mw-parser-output .fg-button:focus-visible,
.mw-parser-output .fg-text-link:focus-visible,
.mw-parser-output .fg-contact__email:focus-visible,
.mw-parser-output .fg-service-card__link:focus-visible,
.mw-parser-output .fg-footer a:focus-visible {
outline: 3px solid var(--fg-lime);
outline-offset: 3px;
}
 
.mw-parser-output .fg-button--primary {
background: var(--fg-lime);
color: #18220c;
}
 
.mw-parser-output .fg-button--ghost {
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
 
.mw-parser-output .fg-button--ghost:hover,
.mw-parser-output .fg-button--ghost:focus-visible {
background: rgba(255, 255, 255, 0.12);
}
 
.mw-parser-output .fg-button--light {
background: #fff;
color: var(--fg-primary-dark);
}
 
.mw-parser-output .fg-trust-row {
color: rgba(255, 255, 255, 0.66);
display: flex;
flex-wrap: wrap;
font-size: 0.83rem;
gap: 15px 22px;
margin-top: 26px;
}
 
.mw-parser-output .fg-trust-row__item {
align-items: center;
display: inline-flex;
gap: 7px;
}
 
.mw-parser-output .fg-check {
color: var(--fg-lime);
font-weight: 900;
}
 
.mw-parser-output .fg-hero__visual {
align-items: center;
display: flex;
justify-content: center;
min-height: 360px;
}
 
.mw-parser-output .fg-orbit {
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
height: 350px;
position: absolute;
width: 350px;
}
 
.mw-parser-output .fg-orbit--one {
transform: rotate(28deg) scaleX(0.55);
}
 
.mw-parser-output .fg-orbit--two {
border-color: rgba(183, 243, 74, 0.42);
height: 270px;
transform: rotate(-36deg) scaleX(0.5);
width: 270px;
}
 
.mw-parser-output .fg-code-window {
background: rgba(13, 12, 37, 0.8);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 20px;
box-shadow: 0 24px 60px rgba(3, 3, 16, 0.35);
max-width: 440px;
overflow: hidden;
position: relative;
transform: rotate(4deg);
width: 100%;
}
 
.mw-parser-output .fg-code-window__bar {
align-items: center;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.6);
display: flex;
font-size: 0.72rem;
gap: 6px;
padding: 12px 15px;
}
 
.mw-parser-output .fg-code-window__bar span {
background: #ff6b6b;
border-radius: 50%;
height: 7px;
width: 7px;
}
 
.mw-parser-output .fg-code-window__bar span:nth-child(2) {
background: #ffd166;
}
 
.mw-parser-output .fg-code-window__bar span:nth-child(3) {
background: #7be495;
}
 
.mw-parser-output .fg-code-window__bar b {
font-weight: 600;
margin-right: auto;
}
 
.mw-parser-output .fg-code-window__body {
color: #d7d5ff;
direction: ltr;
font-family: Consolas, "Courier New", monospace;
font-size: clamp(0.72rem, 1.2vw, 0.88rem);
line-height: 1.9;
margin: 0;
overflow: auto;
padding: 23px 20px;
text-align: left;
white-space: pre;
}
 
.mw-parser-output .fg-code-keyword {
color: #c084fc;
}
 
.mw-parser-output .fg-code-property {
color: #67e8f9;
}
 
.mw-parser-output .fg-code-string {
color: #bef264;
}
 
.mw-parser-output .fg-code-boolean {
color: #fbbf24;
}
 
.mw-parser-output .fg-code-window__status {
align-items: center;
background: rgba(183, 243, 74, 0.08);
color: rgba(255, 255, 255, 0.72);
display: flex;
font-size: 0.75rem;
gap: 9px;
padding: 11px 15px;
}
 
.mw-parser-output .fg-status-dot {
height: 6px;
width: 6px;
}
 
.mw-parser-output .fg-stats {
display: grid;
gap: 12px;
grid-template-columns: repeat(4, 1fr);
margin: -34px auto 76px;
max-width: 1060px;
position: relative;
z-index: 3;
}
 
.mw-parser-output .fg-stat {
background: rgba(255, 255, 255, 0.94);
border: 1px solid var(--fg-border);
border-radius: 18px;
box-shadow: 0 18px 46px rgba(30, 27, 75, 0.1);
padding: 22px 16px;
text-align: center;
}
 
.mw-parser-output .fg-stat__number {
color: var(--fg-primary);
display: block;
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 900;
line-height: 1.2;
}
 
.mw-parser-output .fg-stat__label {
color: var(--fg-muted);
display: block;
font-size: 0.82rem;
margin-top: 6px;
}
 
.mw-parser-output .fg-section-heading {
align-items: end;
display: flex;
gap: 36px;
justify-content: space-between;
margin: 0 0 28px;
}
 
.mw-parser-output .fg-section-heading > div {
max-width: 680px;
}
 
.mw-parser-output .fg-section-heading > p {
color: var(--fg-muted);
font-size: 0.95rem;
margin-bottom: 4px;
max-width: 430px;
}
 
.mw-parser-output .fg-kicker {
color: var(--fg-primary);
margin-bottom: 9px;
}
 
.mw-parser-output .fg-service-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: 92px;
}
 
.mw-parser-output .fg-service-card {
background: var(--fg-white);
border: 1px solid var(--fg-border);
border-radius: 22px;
box-shadow: 0 10px 30px rgba(30, 27, 75, 0.04);
display: flex;
flex-direction: column;
min-height: 315px;
padding: 24px;
position: relative;
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
 
.mw-parser-output .fg-service-card:hover {
border-color: rgba(109, 40, 217, 0.38);
box-shadow: 0 20px 42px rgba(30, 27, 75, 0.1);
transform: translateY(-6px);
}
 
.mw-parser-output .fg-service-card--featured {
background: linear-gradient(160deg, #6d28d9, #4c1d95);
color: #fff;
}
 
.mw-parser-output .fg-service-card__number {
color: var(--fg-primary);
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.08em;
}
 
.mw-parser-output .fg-service-card--featured .fg-service-card__number {
color: var(--fg-lime);
}
 
.mw-parser-output .fg-service-card__icon {
align-items: center;
background: rgba(109, 40, 217, 0.1);
border-radius: 12px;
color: var(--fg-primary);
display: flex;
font-family: Consolas, monospace;
font-size: 0.78rem;
font-weight: 900;
height: 46px;
justify-content: center;
margin: 21px 0 18px;
width: 46px;
}
 
.mw-parser-output .fg-service-card--featured .fg-service-card__icon {
background: rgba(255, 255, 255, 0.14);
color: var(--fg-lime);
}
 
.mw-parser-output .fg-service-card p {
color: var(--fg-muted);
font-size: 0.9rem;
line-height: 1.9;
margin-bottom: 19px;
}
 
.mw-parser-output .fg-service-card--featured p {
color: rgba(255, 255, 255, 0.74);
}
 
.mw-parser-output .fg-service-card__link,
.mw-parser-output .fg-text-link {
align-items: center;
color: var(--fg-primary);
display: inline-flex;
font-size: 0.85rem;
font-weight: 900;
gap: 8px;
margin-top: auto;
text-decoration: none;
}
 
.mw-parser-output .fg-service-card--featured .fg-service-card__link {
color: var(--fg-lime);
}
 
.mw-parser-output .fg-service-card__link:hover,
.mw-parser-output .fg-text-link:hover {
text-decoration: underline;
text-underline-offset: 5px;
}
 
.mw-parser-output .fg-story {
align-items: center;
background: var(--fg-soft);
border: 1px solid var(--fg-border);
border-radius: 28px;
display: grid;
gap: clamp(28px, 5vw, 72px);
grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
margin-bottom: 90px;
overflow: hidden;
padding: clamp(20px, 4vw, 42px);
}
 
.mw-parser-output .fg-story__media {
height: 360px;
min-height: 360px;
position: relative;
}
 
.mw-parser-output .fg-story__media > .mw-file-element,
.mw-parser-output .fg-story__media img {
border-radius: 20px;
height: 100%;
object-fit: cover;
width: 100%;
}
 
.mw-parser-output .fg-story__media .image,
.mw-parser-output .fg-story__media .thumb,
.mw-parser-output .fg-story__media .mw-file-description {
display: block;
height: 100%;
}
 
.mw-parser-output .fg-story__media .thumbinner {
background: transparent;
border: 0;
padding: 0;
width: 100% !important;
}
 
.mw-parser-output .fg-story__media .thumbcaption {
display: none;
}
 
.mw-parser-output .fg-story__badge {
background: var(--fg-lime);
border-radius: 16px;
bottom: 18px;
box-shadow: 0 12px 30px rgba(16, 24, 40, 0.18);
display: flex;
flex-direction: column;
left: 18px;
line-height: 1.4;
padding: 13px 16px;
position: absolute;
}
 
.mw-parser-output .fg-story__badge strong {
font-size: 1.1rem;
}
 
.mw-parser-output .fg-story__badge span {
font-size: 0.75rem;
}
 
.mw-parser-output .fg-story__content {
max-width: 620px;
}
 
.mw-parser-output .fg-story__content p {
color: var(--fg-muted);
font-size: 0.96rem;
line-height: 2;
}
 
.mw-parser-output .fg-story__points {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 23px 0;
}
 
.mw-parser-output .fg-story__points span {
align-items: center;
background: #fff;
border: 1px solid var(--fg-border);
border-radius: 999px;
color: var(--fg-muted);
display: inline-flex;
font-size: 0.78rem;
gap: 7px;
padding: 7px 11px;
}
 
.mw-parser-output .fg-story__points b {
align-items: center;
background: rgba(109, 40, 217, 0.1);
border-radius: 50%;
color: var(--fg-primary);
display: inline-flex;
font-size: 0.7rem;
height: 22px;
justify-content: center;
width: 22px;
}
 
.mw-parser-output .fg-media-section {
margin-bottom: 92px;
}
 
.mw-parser-output .fg-media-grid {
display: grid;
gap: 15px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
 
.mw-parser-output .fg-media-card {
background: var(--fg-white);
border: 1px solid var(--fg-border);
border-radius: 22px;
box-shadow: 0 10px 30px rgba(30, 27, 75, 0.04);
overflow: hidden;
padding: 24px;
}
 
.mw-parser-output .fg-media-card__heading {
margin-bottom: 18px;
}
 
.mw-parser-output .fg-media-card__label {
color: var(--fg-primary);
display: block;
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.08em;
margin-bottom: 4px;
text-transform: uppercase;
}
 
.mw-parser-output .fg-media-card__heading h3 {
margin-bottom: 0;
}
 
.mw-parser-output .fg-media-frame {
align-items: center;
background: #16122d;
border-radius: 16px;
display: flex;
justify-content: center;
min-height: 240px;
overflow: hidden;
}
 
.mw-parser-output .fg-media-frame .image,
.mw-parser-output .fg-media-frame .thumb,
.mw-parser-output .fg-media-frame .mw-file-description {
display: block;
max-width: 100%;
width: 100%;
}
 
.mw-parser-output .fg-media-frame img {
display: block;
height: auto;
max-height: 390px;
max-width: 100%;
margin: 0 auto;
object-fit: contain;
width: auto;
}
 
.mw-parser-output .fg-media-frame .thumbinner {
background: transparent;
border: 0;
padding: 0;
width: 100% !important;
}
 
.mw-parser-output .fg-media-frame .thumbcaption {
display: none;
}
 
.mw-parser-output .fg-media-frame--audio {
background:
radial-gradient(circle at 22% 30%, rgba(183, 243, 74, 0.16), transparent 23%),
linear-gradient(135deg, #171238, #3a1e76);
min-height: 240px;
}
 
.mw-parser-output .fg-media-card > p {
color: var(--fg-muted);
font-size: 0.88rem;
margin: 15px 0 0;
}
 
.mw-parser-output .fg-slider-section {
margin-bottom: 92px;
}
 
.mw-parser-output .fg-slider {
background: #15102f;
border-radius: 28px;
box-shadow: var(--fg-shadow);
color: #fff;
overflow: hidden;
}
 
.mw-parser-output .fg-slider__viewport {
min-height: 430px;
position: relative;
}
 
.mw-parser-output .fg-slide {
align-items: stretch;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
min-height: 430px;
padding: clamp(20px, 4vw, 44px);
}
 
.mw-parser-output .fg-slider--ready .fg-slide {
display: none;
}
 
.mw-parser-output .fg-slider--ready .fg-slide.is-active {
display: flex;
}
 
.mw-parser-output .fg-slide > .image,
.mw-parser-output .fg-slide > .thumb,
.mw-parser-output .fg-slide > .mw-file-description {
align-items: center;
display: flex;
flex: 1;
justify-content: center;
min-height: 260px;
}
 
.mw-parser-output .fg-slide .thumbinner {
background: transparent;
border: 0;
padding: 0;
width: 100% !important;
}
 
.mw-parser-output .fg-slide .thumbcaption {
display: none;
}
 
.mw-parser-output .fg-slide img {
border-radius: 17px;
display: block;
height: 285px;
margin: 0 auto;
max-width: 100%;
object-fit: cover;
width: min(760px, 100%);
}
 
.mw-parser-output .fg-slide__caption {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 20px;
}
 
.mw-parser-output .fg-slide__caption strong {
font-size: 1.25rem;
}
 
.mw-parser-output .fg-slide__caption span {
color: rgba(255, 255, 255, 0.62);
font-size: 0.86rem;
}
 
.mw-parser-output .fg-slider__controls {
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
gap: 15px;
justify-content: space-between;
padding: 16px 22px;
}
 
.mw-parser-output .fg-slider__button,
.mw-parser-output .fg-slider__dot {
appearance: none;
border: 0;
cursor: pointer;
}
 
.mw-parser-output .fg-slider__button {
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: #fff;
font-size: 1.1rem;
height: 38px;
line-height: 1;
width: 38px;
}
 
.mw-parser-output .fg-slider__button:hover,
.mw-parser-output .fg-slider__button:focus-visible {
background: var(--fg-primary);
}
 
.mw-parser-output .fg-slider__dots {
display: flex;
gap: 8px;
}
 
.mw-parser-output .fg-slider__dot {
background: rgba(255, 255, 255, 0.25);
border-radius: 999px;
height: 7px;
padding: 0;
transition: background-color 180ms ease, width 180ms ease;
width: 22px;
}
 
.mw-parser-output .fg-slider__dot.is-active {
background: var(--fg-lime);
width: 42px;
}
 
.mw-parser-output .fg-slider__button:focus-visible,
.mw-parser-output .fg-slider__dot:focus-visible {
outline: 3px solid var(--fg-lime);
outline-offset: 3px;
}
 
.mw-parser-output .fg-process {
margin-bottom: 92px;
}
 
.mw-parser-output .fg-process__grid {
border-bottom: 1px solid var(--fg-border);
border-top: 1px solid var(--fg-border);
display: grid;
grid-template-columns: repeat(4, 1fr);
}
 
.mw-parser-output .fg-process__item {
border-left: 1px solid var(--fg-border);
padding: 25px 22px;
}
 
.mw-parser-output .fg-process__item:first-child {
border-left: 0;
}
 
.mw-parser-output .fg-process__item > span {
color: var(--fg-primary);
font-size: 0.82rem;
font-weight: 900;
}
 
.mw-parser-output .fg-process__item h3 {
margin: 18px 0 6px;
}
 
.mw-parser-output .fg-process__item p {
color: var(--fg-muted);
font-size: 0.86rem;
line-height: 1.8;
margin: 0;
}
 
.mw-parser-output .fg-contact {
align-items: center;
background:
radial-gradient(circle at 20% 20%, rgba(183, 243, 74, 0.2), transparent 25%),
linear-gradient(135deg, #4c1d95, #6d28d9);
border-radius: 28px;
color: #fff;
display: flex;
gap: 30px;
justify-content: space-between;
margin-bottom: 22px;
overflow: hidden;
padding: clamp(28px, 5vw, 55px);
position: relative;
}
 
.mw-parser-output .fg-contact__content {
max-width: 780px;
position: relative;
z-index: 1;
}
 
.mw-parser-output .fg-contact .fg-kicker {
color: var(--fg-lime);
}
 
.mw-parser-output .fg-contact h2 {
font-size: clamp(1.75rem, 4vw, 3.3rem);
margin-bottom: 14px;
}
 
.mw-parser-output .fg-contact p {
color: rgba(255, 255, 255, 0.72);
margin-bottom: 24px;
max-width: 680px;
}
 
.mw-parser-output .fg-contact__email {
color: rgba(255, 255, 255, 0.78);
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
}
 
.mw-parser-output .fg-contact__email:hover {
color: var(--fg-lime);
text-decoration: underline;
}
 
.mw-parser-output .fg-contact__mark {
color: rgba(255, 255, 255, 0.11);
font-size: 20rem;
font-weight: 900;
line-height: 0.7;
position: absolute;
left: 1%;
top: 27%;
transform: rotate(-10deg);
}
 
.mw-parser-output .fg-footer {
align-items: center;
color: var(--fg-muted);
display: flex;
font-size: 0.78rem;
justify-content: space-between;
padding: 12px 4px;
}
 
.mw-parser-output .fg-footer a {
color: var(--fg-primary);
font-weight: 800;
text-decoration: none;
}
 
.mw-parser-output .fg-footer a:hover {
text-decoration: underline;
}
 
.mw-parser-output .fg-reveal {
opacity: 1;
transform: none;
}
 
.mw-parser-output .fg-reveal.fg-reveal--pending {
opacity: 0;
transform: translateY(18px);
transition: opacity 600ms ease, transform 600ms ease;
}
 
.mw-parser-output .fg-reveal.fg-reveal--visible {
opacity: 1;
transform: translateY(0);
}
 
@media (max-width: 1050px) {
.mw-parser-output .fg-service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
 
.mw-parser-output .fg-service-card {
min-height: 270px;
}
}
 
@media (max-width: 820px) {
.mw-parser-output .fg-hero {
grid-template-columns: 1fr;
min-height: auto;
padding: 34px 25px 26px;
}
 
.mw-parser-output .fg-hero__visual {
min-height: 310px;
}
 
.mw-parser-output .fg-stats {
margin-top: -18px;
}
 
.mw-parser-output .fg-story {
grid-template-columns: 1fr;
}
 
.mw-parser-output .fg-story__media {
height: 300px;
min-height: 300px;
}
 
.mw-parser-output .fg-process__grid {
grid-template-columns: repeat(2, 1fr);
}
 
.mw-parser-output .fg-process__item:nth-child(odd) {
border-left: 0;
}
 
.mw-parser-output .fg-process__item:nth-child(-n + 2) {
border-bottom: 1px solid var(--fg-border);
}
}
 
@media (max-width: 620px) {
.mw-parser-output .fg-shell {
padding: 12px 10px 30px;
}
 
.mw-parser-output .fg-hero,
.mw-parser-output .fg-contact {
border-radius: 22px;
}
 
.mw-parser-output .fg-hero__title {
font-size: clamp(2.35rem, 12vw, 3.4rem);
}
 
.mw-parser-output .fg-hero__lead {
line-height: 1.9;
}
 
.mw-parser-output .fg-code-window {
transform: rotate(0);
}
 
.mw-parser-output .fg-orbit {
height: 280px;
width: 280px;
}
 
.mw-parser-output .fg-stats,
.mw-parser-output .fg-service-grid,
.mw-parser-output .fg-media-grid {
grid-template-columns: 1fr 1fr;
}
 
.mw-parser-output .fg-stat {
padding: 16px 8px;
}
 
.mw-parser-output .fg-stat__label {
font-size: 0.7rem;
}
 
.mw-parser-output .fg-section-heading {
align-items: start;
flex-direction: column;
gap: 3px;
}
 
.mw-parser-output .fg-service-card {
min-height: 0;
padding: 18px;
}
 
.mw-parser-output .fg-story,
.mw-parser-output .fg-media-card {
border-radius: 20px;
padding: 18px;
}
 
.mw-parser-output .fg-story__media {
height: 230px;
min-height: 230px;
}
 
.mw-parser-output .fg-story__badge {
bottom: 10px;
left: 10px;
}
 
.mw-parser-output .fg-process__grid {
grid-template-columns: 1fr;
}
 
.mw-parser-output .fg-process__item,
.mw-parser-output .fg-process__item:nth-child(odd) {
border-bottom: 1px solid var(--fg-border);
border-left: 0;
}
 
.mw-parser-output .fg-process__item:last-child {
border-bottom: 0;
}
 
.mw-parser-output .fg-contact {
align-items: flex-start;
flex-direction: column;
}
 
.mw-parser-output .fg-contact__mark {
font-size: 12rem;
left: 8%;
top: 56%;
}
 
.mw-parser-output .fg-footer {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
}
 
@media (prefers-reduced-motion: reduce) {
.mw-parser-output .fg-home *,
.mw-parser-output .fg-home *::before,
.mw-parser-output .fg-home *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}

نسخهٔ کنونی تا ‏۱۲ اوت ۲۰۲۶، ساعت ۱۷:۵۵



فراغیب؛ مهندسی ایده‌های دیجیتال

ساختن آینده، با کدهای دقیق و خلاقانه

فراغیب یک مجموعهٔ فناوری برای طراحی، توسعه و رشد محصولات دیجیتال است؛ از اولین ایده تا یک تجربهٔ سریع، امن و ماندگار.

مشاهدهٔ خدمات شروع گفتگو

طراحی انسان‌محور معماری قابل توسعه همراهی بلندمدت

faraghaib.dev
<code><span class="fg-code-keyword">const</span> vision = {
  <span class="fg-code-property">brand</span>: <span class="fg-code-string">"فراغیب"</span>,
  <span class="fg-code-property">focus</span>: [<span class="fg-code-string">"web"</span>, <span class="fg-code-string">"software"</span>],
  <span class="fg-code-property">quality</span>: <span class="fg-code-boolean">true</span>,
  <span class="fg-code-property">future</span>: <span class="fg-code-string">"in progress"</span>
};</code>
محصول شما آمادهٔ شروع است

۰ سال تجربهٔ فنی

۰ پروژه و راهکار دیجیتال

۰ فناوری در جعبه‌ابزار

۰ تعهد به کیفیت

توانمندی‌های فراغیب

هر چیزی که یک محصول دیجیتال برای رشد نیاز دارد

ترکیبی از استراتژی، طراحی و مهندسی نرم‌افزار برای ساختن تجربه‌ای که هم زیباست و هم نتیجه می‌دهد.

۰۱

توسعهٔ وب و نرم‌افزار

ساخت وب‌سایت‌ها، پنل‌ها و سامانه‌های اختصاصی با کد تمیز، امنیت مناسب و معماری قابل نگهداری.

جزئیات خدمت

۰۲

طراحی تجربه و رابط کاربری

تبدیل نیازهای واقعی کاربران به مسیرهای ساده، رابط‌های چشم‌نواز و تجربه‌ای که اعتماد می‌سازد.

جزئیات خدمت

۰۳

اتصال سرویس و اتوماسیون

یکپارچه‌سازی APIها، خودکارسازی فرایندها و حذف کارهای تکراری برای سرعت بیشتر کسب‌وکار.

جزئیات خدمت

۰۴

مشاوره و پشتیبانی فنی

از انتخاب فناوری تا بازبینی کد و بهبود محصول، در تصمیم‌های فنی مهم کنار تیم شما هستیم.

دریافت مشاوره

تیم و فضای کاری فراغیب

از ایدهتا اثر واقعی

دربارهٔ فراغیب

فناوری وقتی ارزشمند است که مسئله‌ای واقعی را حل کند

ما در فراغیب باور داریم یک محصول خوب فقط با انتخاب زبان برنامه‌نویسی ساخته نمی‌شود؛ نتیجهٔ خوب از شناخت مسئله، تصمیم‌های درست، اجرای دقیق و یادگیری مداوم به‌وجود می‌آید.

به همین دلیل، پروژه‌ها را از نگاه کسب‌وکار و کاربر بررسی می‌کنیم و بعد راهکاری می‌سازیم که بتواند همراه رشد شما تغییر کند.

الف گفت‌وگوی شفاف ب تحویل مرحله‌ای ج مستندسازی فنی

بیشتر دربارهٔ فراغیب

فراغیب را ببینید و بشنوید

یک معرفی کوتاه، یک تصویر روشن

رسانه‌های زیر را با فایل‌های واقعی خود جایگزین کنید. فایل‌های صوتی و ویدیویی با افزونهٔ رسمی TimedMediaHandler نمایش داده می‌شوند.

ویدیو

داستان فراغیب در چند دقیقه

ویدیوی معرفی فراغیب
ویدیوی معرفی فراغیب

با مسیر، نگاه و توانمندی‌های فراغیب آشنا شوید.

صوت

پیام صوتی بنیان‌گذار

پیام صوتی معرفی فراغیب
پخش پیام صوتی معرفی فراغیب

چرا فراغیب شکل گرفت و قرار است چه مسئله‌ای را حل کند؟

نمونه‌هایی از مسیر ما

هر پروژه، یک روایت تازه

تصاویر نمونه‌کار، جلسات یا فرایند تولید را در اسلایدر زیر نمایش دهید.

تصویر اول از فعالیت فراغیب
شناخت مسئله و کشف فرصت
شناخت مسئله و کشف فرصتشروع هر راهکار از یک سؤال درست است.
تصویر دوم از فعالیت فراغیب
طراحی مسیر تجربه
طراحی مسیر تجربهپیچیدگی را به تجربه‌ای ساده تبدیل می‌کنیم.
تصویر سوم از فعالیت فراغیب
ساخت با مهندسی دقیق
ساخت با مهندسی دقیقکدی که امروز خوب کار کند و فردا هم قابل توسعه بماند.
تصویر چهارم از فعالیت فراغیب
تحویل و رشد مستمر
تحویل و رشد مستمرپایان پروژه، آغاز مرحلهٔ بعدی رشد است.

<button type="button" class="fg-slider__button fg-slider__button--prev" aria-label="تصویر قبلی">→</button>

<button type="button" class="fg-slider__dot is-active" role="tab" aria-selected="true" aria-controls="fg-slide-1" aria-label="تصویر ۱"></button> <button type="button" class="fg-slider__dot" role="tab" aria-selected="false" aria-controls="fg-slide-2" aria-label="تصویر ۲"></button> <button type="button" class="fg-slider__dot" role="tab" aria-selected="false" aria-controls="fg-slide-3" aria-label="تصویر ۳"></button> <button type="button" class="fg-slider__dot" role="tab" aria-selected="false" aria-controls="fg-slide-4" aria-label="تصویر ۴"></button>

<button type="button" class="fg-slider__button fg-slider__button--next" aria-label="تصویر بعدی">←</button>

روش همکاری

چهار گام تا یک نتیجهٔ قابل اتکا

۰۱

شناخت

هدف، مخاطب و مسئله را دقیق می‌کنیم.

۰۲

طراحی

راهکار و مسیر اجرای قابل سنجش می‌سازیم.

۰۳

اجرا

محصول را مرحله‌ای، شفاف و قابل آزمون توسعه می‌دهیم.

۰۴

رشد

با داده و بازخورد، محصول را بهتر می‌کنیم.

آمادهٔ شروع هستید؟

بیایید ایدهٔ شما را به یک تجربهٔ دیجیتال ماندگار تبدیل کنیم.

برای مشاوره، همکاری یا دریافت برآورد اولیه، از طریق صفحهٔ تماس با ما پیام بفرستید.

تماس با فراغیب <a class="fg-contact__email" href="mailto:info@faraghaib.ir">info@faraghaib.ir</a>

© فراغیب — مهندسی ایده‌های دیجیتال بازگشت به بالا ↑

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=تست5&oldid=6336»