پرش به محتوا

صفحهٔ اصلی - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۲۳ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
{{صفحه اصلی/عنوان}}
{{صفحه اصلی/ویدیو3}}
{{صفحه اصلی/دسته بندی}}
<html>
<html>
<div class="faraghaib-portal">
<a referrerpolicy='origin' target='_blank' href='https://trustseal.enamad.ir/?id=687037&Code=eVsgbI1qChlMKnFcfzSa5zWlNR79IALh'><img referrerpolicy='origin' src='https://trustseal.enamad.ir/logo.aspx?id=687037&Code=eVsgbI1qChlMKnFcfzSa5zWlNR79IALh' alt='' style='cursor:pointer' code='eVsgbI1qChlMKnFcfzSa5zWlNR79IALh'></a>
  <!-- ==================== HERO SECTION ==================== -->
  <section class="hero-section">
    <div class="hero-content">
      <h1 class="hero-title">خدمات جامع فراغیب</h1>
      <p class="hero-subtitle">درگاه ورود به پروژه‌ها، خدمات تخصصی فراغیب</p>
    </div>
  </section>
  <!-- ==================== VIDEO SECTION ==================== -->
  <section class="video-section">
    <div class="video-container-wrapper">
      <!-- پیش‌نمایش تصویر ویدیو جهت بهینه‌سازی لود اول صفحه (lazy load) -->
      <div class="video-poster" id="videoPoster" onclick="playPortalVideo()">
        <div class="play-btn">
          <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
        </div>
        <!-- کاور پیش‌فرض ویدیو (می‌توانی آدرس عکس دلخواهت را جایگزین کنی) -->
        <img src="https://dl.faraghaib.ir/bfa.png" alt="">
      </div>
      <video id="portalVideo" controls preload="none">
        <source src="https://dl.faraghaib.ir/faraghaib.mp4" type="video/mp4">
        مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
      </video>
    </div>
  </section>
 
  <!-- ==================== SERVICES GRID ==================== -->
  <section class="services-section">
    <h2 class="section-title">خدمات و دسترسی‌ها</h2>
    <div class="services-grid">
     
      <!-- کارت ۱: ویکی -->
      <a href="https://fa.faraghaib.ir/wiki/" class="service-card wiki-card">
        <div class="card-icon">📚</div>
        <h3>ویکی شخصی</h3>
        <p>دانشنامه، یادداشت‌ها و مستندات فنی من در حوزه‌های مختلف.</p>
      </a>
 
      <!-- کارت ۲ -->
      <div class="service-card">
        <div class="card-icon">🏢</div>
        <h3>ثبت شرکت</h3>
        <p>انجام تمام مراحل ثبت شرکت و امور حقوقی مربوطه به صورت آنلاین.</p>
      </div>
 
      <!-- کارت ۳ -->
      <div class="service-card">
        <div class="card-icon">🏷️</div>
        <h3>ثبت برند</h3>
        <p>تثبیت مالکیت معنوی، لوگو و نشان تجاری کسب‌وکار شما.</p>
      </div>
 
      <!-- کارت ۴ -->
      <div class="service-card">
        <div class="card-icon">🖨️</div>
        <h3>طراحی کارت ویزیت و تراکت</h3>
        <p>طراحی هویت بصری، اقلام تبلیغاتی و فایل‌های آماده چاپ.</p>
      </div>
 
      <!-- کارت ۵ -->
      <div class="service-card">
        <div class="card-icon">📸</div>
        <h3>چاپ عکس</h3>
        <p>سفارش آنلاین چاپ تصاویر روی انواع کاغذهای عکاسی باکیفیت.</p>
      </div>
 
      <!-- کارت ۶ -->
      <div class="service-card">
        <div class="card-icon">📶</div>
        <h3>نماینده رسمی ایرانسل</h3>
        <p>خدمات سیم‌کارت، مودم، بسته‌های اینترنتی و پشتیبانی رسمی.</p>
      </div>
 
      <!-- کارت ۷ -->
      <div class="service-card">
        <div class="card-icon">🌐</div>
        <h3>طراحی وب‌سایت</h3>
        <p>توسعه سایت‌های مدرن، ریسپانسیو و بهینه‌سازی شده برای گوگل.</p>
      </div>
 
      <!-- کارت ۸ -->
      <div class="service-card">
        <div class="card-icon">✍️</div>
        <h3>تولید محتوا</h3>
        <p>تولید مقالات متنی، سناریونویسی و محتوای جذاب شبکه‌های اجتماعی.</p>
      </div>
 
      <!-- کارت ۹ -->
      <div class="service-card">
        <div class="card-icon">⚡</div>
        <h3>برندسازی</h3>
        <p>ایجاد استراتژی هویت برند و رشد آگاهی از کسب‌وکار در بازار.</p>
      </div>
 
      <!-- کارت ۱۰ -->
      <div class="service-card">
        <div class="card-icon">🔍</div>
        <h3>تبلیغات در گوگل</h3>
        <p>راه‌اندازی و مدیریت کمپین‌های تبلیغاتی Google Ads جهت افزایش فروش.</p>
      </div>
 
      <!-- کارت ۱۱ -->
      <div class="service-card">
        <div class="card-icon">🖥️</div>
        <h3>کافی‌نت آنلاین</h3>
        <p>انجام کلیه خدمات اینترنتی، ثبت‌نام‌های دولتی و دانشجویی به صورت غیرحضوری.</p>
      </div>
 
    </div>
  </section>
 
  <!-- ==================== FOOTER SECTION ==================== -->
  <footer class="portal-footer">
    <div class="footer-container">
      <div class="footer-right">
        <p> تمام حقوق مادی و معنوی معلق به گروه برنامه نویسی فراغیب می باشد.</p>
      </div>
      <div class="footer-left">
        <!-- محل قرارگیری لوگوی اینماد و زرین‌پال -->
        <div class="trust-badges">
         
          <!-- بلوک زرین‌پال (کد رسمی خود را جایگزین این بخش کنید) -->
          <div class="badge-item" id="zarinpal-wrapper">
            <!-- تصویر موقت زرین‌پال - پس از دریافت کد، اسکریپت را اینجا بگذارید -->
            <a href="https://zarinpal.com" target="_blank" rel="nofollow">
              <img src="https://cdn.zarinpal.com/brand/logo-zarinpal-icon.svg" alt="زرین‌پال" style="width: 45px; height: 45px; filter: grayscale(1) invert(1);">
            </a>
          </div>
 
          <!-- بلوک اینماد (کد رسمی خود را جایگزین این بخش کنید) -->
          <div class="badge-item" id="enemad-wrapper">
            <!-- جایگاه کد اینماد شما -->
            <span style="color: #6b7280; font-size: 11px;">[محل کد اینماد]</span>
          </div>
 
        </div>
      </div>
    </div>
  </footer>
 
</div>
 
<!-- ==================== CSS STYLES ==================== -->
<style>
  /* تنظیمات کلی ظاهر درگاه */
  .faraghaib-portal {
    font-family: 'Vazirmatn', ;
    background-color: #eaebe8;
    color: #c9d1d9;
    padding: 0;
    margin: 0;
    direction: rtl;
    text-align: right;
  }
 
  /* استایل هیرو */
  .hero-section {
    padding: 80px 24px 40px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at top, #161b22 0%, #0d1117 100%);
  }
  .hero-content {
    max-width: 800px;
    text-align: center;
  }
  .hero-title {
    font-size: 3rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.4;
  }
  .hero-subtitle {
    font-size: 1.25rem;
    color: #8b949e;
    margin-bottom: 30px;
    line-height: 1.8;
  }
  .cta-button {
    display: inline-block;
    background-color: #238636;
    color: #ffffff;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(35, 134, 54, 0.3);
  }
  .cta-button:hover {
    background-color: #2ea043;
    transform: translateY(-2px);
  }
 
  /* استایل بخش ویدیو */
  .video-section {
    padding: 20px 24px 60px 24px;
    display: flex;
    justify-content: center;
  }
  .video-container-wrapper {
    width: 100%;
    max-width: 900px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background-color: #161b22;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    aspect-ratio: 16 / 9;
  }
  .video-container-wrapper video {
    width: 100%;
    height: 100%;
    display: none; /* تا زمان فشرده شدن دکمه پلی پنهان است */
    object-fit: cover;
  }
  .video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: opacity 0.3s ease;
  }
  .video-poster:hover img {
    opacity: 0.75;
  }
  .play-btn {
    position: absolute;
    width: 70px;
    height: 70px;
    background: rgba(35, 134, 54, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: transform 0.3s ease, background 0.3s ease;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
  }
  .play-btn svg {
    width: 32px;
    height: 32px;
    fill: #fff;
    margin-right: -4px; /* برای وسط‌چین به نظر رسیدن مثلث پخش */
  }
  .video-poster:hover .play-btn {
    transform: scale(1.1);
    background: #2ea043;
  }
 
  /* استایل گرید کارت‌ها */
  .services-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 80px 24px;
  }
  .section-title {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 40px;
    text-align: center;
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .service-card {
    background-color: #161b22;
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 24px;
    text-decoration: none;
    color: #c9d1d9;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .service-card:hover {
    transform: translateY(-5px);
    border-color: #58a6ff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }
  .wiki-card {
    border-color: #238636;
  }
  .wiki-card:hover {
    border-color: #2ea043;
  }
  .card-icon {
    font-size: 2.2rem;
    margin-bottom: 16px;
  }
  .service-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
  }
  .service-card p {
    font-size: 0.95rem;
    color: #8b949e;
    line-height: 1.6;
    margin: 0;
  }
 
  /* استایل فوتر و نمادها */
  .portal-footer {
    border-top: 1px solid #30363d;
    background-color: #090d13;
    padding: 30px 24px;
  }
  .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-right p {
    font-size: 0.9rem;
    color: #8b949e;
    margin: 0;
  }
  .trust-badges {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .badge-item {
    background-color: #161b22;
    border: 1px solid #30363d;
    padding: 8px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    min-width: 80px;
  }
 
  /* ==================== RESPONSIVE STYLES ==================== */
 
  /* نمایش تبلت (زیر 1024 پیکسل) */
  @media (max-width: 1024px) {
    .services-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .hero-title {
      font-size: 2.5rem;
    }
  }
 
  /* نمایش موبایل (زیر 768 پیکسل) */
  @media (max-width: 767px) {
    .hero-section {
      padding: 60px 16px 30px 16px;
    }
    .hero-title {
      font-size: 2rem;
    }
    .hero-subtitle {
      font-size: 1.1rem;
    }
    .video-section {
      padding: 10px 16px 40px 16px;
    }
    .services-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .service-card {
      padding: 20px;
    }
    .footer-container {
      flex-direction: column-reverse;
      gap: 20px;
      text-align: center;
    }
    .trust-badges {
      justify-content: center;
    }
  }
</style>
 
<!-- ==================== JAVASCRIPT ==================== -->
<script>
  function playPortalVideo() {
    var video = document.getElementById("portalVideo");
    var poster = document.getElementById("videoPoster");
   
    // پنهان کردن کاور و نمایش تگ ویدیو
    poster.style.display = "none";
    video.style.display = "block";
   
    // پخش خودکار ویدیو
    video.play();
  }
</script>
 




</html>
</html>
{{صفحه اصلی/دسته بندی موضوعی}}
{{#seo:
{{#seo:
|title= فراغیب | صفحه کسب و کار شما
|title= فراغیب | مدرسه مجازی شما
|title_mode=append
|title_mode=append
|keywords=فراغیب,دانشنامه
|keywords=فراغیب,دانشنامه

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

به فراغیب خوش آمدید

مدرسه مجازی برای توسعه شخصی و مهارتی و کاری شما وابسته به گروه برنامه نویسی فراغیب

خدمات فراغیب

آموزشگاه دوره های آموزشی مشاغل موسیقی کتابخانه ویدیو عکس بازی سینما ورزش خبرگزاری اپلیکیشن کافی نت کاریابی اینستاگرام کانال های اجتماعی

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=صفحهٔ_اصلی&oldid=6204»