کانتینر متن و کارت - فراغیب

نسخهٔ کنونی تا ‏۲۶ ژوئیهٔ ۲۰۲۶، ساعت ۰۸:۵۶

همراه و در کنار شماییم

با کافی نت من به بیش از صدها خدمات اینترنتی بصورت کاملاً غیرحضوری دسترسی دارین. فقط با چند کلیک ساده سفارش شما در دستان شما قرار دارد.

+50k

خدمت ارائه شده

+500k

کاربر فعال

100%

رضایت مشتریان

+2000

روز حضور در مارکت

@@ خط ۱: / خط ۱: @@
 <html>
-<section class="about-cafenet">
+<head>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <div class="container">
+</head>
+<section class="stats-section">
-        <!-- ===========================
+  <div class="container">
-                متن (سمت راست)
+    <div class="text-side">
-        ============================ -->
+      <h2>همراه و در کنار شماییم</h2>
+      <p>با کافی نت من به بیش از صدها خدمات اینترنتی بصورت کاملاً غیرحضوری دسترسی دارین. فقط با چند کلیک ساده سفارش شما در دستان شما قرار دارد.</p>
-        <div class="about-content">
+    </div>
-            <span class="section-subtitle">
-                خدمات کافی نت
-            </span>
-            <h3>
-                همراه مطمئن شما در انجام خدمات اینترنتی
-            </h3>
-            <p>
-                کافی نت ما با ارائه صدها خدمت اینترنتی، اداری و ثبت‌نامی، انجام تمامی امور آنلاین شما را با سرعت، دقت و امنیت بالا بر عهده دارد. از ثبت‌نام سامانه‌های دولتی، خدمات بانکی، بیمه، مالیات، ترجمه مدارک، رزرو بلیط و ثبت شرکت گرفته تا بسیاری از خدمات تخصصی دیگر، همه در کوتاه‌ترین زمان و با پشتیبانی کامل انجام می‌شود.
-            </p>
-            <a href="/services" class="main-btn">
-                مشاهده خدمات
-                <i class="fa-solid fa-arrow-left"></i>
-            </a>
+    <div class="stats-grid">
+      <article class="stat-card">
+        <i class="icon fa fa-check-circle"></i>
+        <div class="stat-info">
+          <span class="number">+50k</span>
+          <p>خدمت ارائه شده</p>
+        </div>
+      </article>
+      <article class="stat-card">
+        <i class="icon fa fa-users"></i>
+        <div class="stat-info">
+          <span class="number">+500k</span>
+          <p>کاربر فعال</p>
+        </div>
+      </article>
+      <article class="stat-card">
+        <i class="icon fa fa-smile"></i>
+        <div class="stat-info">
+          <span class="number">100%</span>
+          <p>رضایت مشتریان</p>
          </div>
+      </article>
-        <!-- ===========================
+      <article class="stat-card">
-                کارت‌ها (سمت چپ)
+        <i class="icon fa fa-calendar-alt"></i>
-        ============================ -->
+        <div class="stat-info">
+          <span class="number">+2000</span>
-        <div class="stats-wrapper">
+          <p>روز حضور در مارکت</p>
-            <!-- کارت اول -->
-            <article class="stat-card">
-                <div class="card-top">
-                    <span class="card-title">
-                        خدمات انجام شده
-                    </span>
-                    <div class="icon">
-                        <i class="fa-solid fa-file-circle-check"></i>
-                    </div>
-                </div>
-                <h3>+۵۰ هزار</h3>
-            </article>
-            <!-- کارت دوم -->
-            <article class="stat-card">
-                <div class="card-top">
-                    <span class="card-title">
-                        مشتریان دائمی
-                    </span>
-                    <div class="icon">
-                        <i class="fa-solid fa-users"></i>
-                    </div>
-                </div>
-                <h3>+۵ هزار</h3>
-            </article>
-            <!-- کارت سوم -->
-            <article class="stat-card">
-                <div class="card-top">
-                    <span class="card-title">
-                        رضایت مشتریان
-                    </span>
-                    <div class="icon">
-                        <i class="fa-solid fa-face-smile"></i>
-                    </div>
-                </div>
-                <h3>۹۹٪</h3>
-            </article>
-            <!-- کارت چهارم -->
-            <article class="stat-card">
-                <div class="card-top">
-                    <span class="card-title">
-                        سابقه فعالیت
-                    </span>
-                    <div class="icon">
-                        <i class="fa-solid fa-calendar-check"></i>
-                    </div>
-                </div>
-                <h3>۱۰+ سال</h3>
-            </article>
          </div>
+      </article>
      </div>
+  </div>
 </section>
 </html>