نظرات مشتری/نعمتی - فراغیب

<html>
<head>
</head>
<style>

/*==================================================
  Customer Reviews Component v2.0
  Mobile First + SEO + Accessibility
==================================================*/

:root{

    --review-primary:#ff7900;
    --review-primary-light:#fff6ef;

    --review-success:#198754;
    --review-success-bg:#edf9f2;

    --review-star:#FFC107;

    --review-bg:#ffffff;
    --review-page:#fafafa;

    --review-border:#ececec;

    --review-text:#2f2f2f;
    --review-text-light:#6f6f6f;

    --review-shadow:
        0 10px 35px rgba(0,0,0,.05);

    --review-radius:18px;

    --review-transition:.25s;

}


/*==================================
Reset
==================================*/

*,
*::before,
*::after{

    box-sizing:border-box;

}

.comments-section{

    width:100%;

    max-width:1050px;

    margin:auto;

    padding:clamp(18px,4vw,34px);

    background:var(--review-bg);

    border-radius:24px;

    box-shadow:var(--review-shadow);

    position:relative;

    overflow:hidden;

}


/*==================================
Header
==================================*/

.comments-header{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:32px;

    padding-bottom:22px;

    border-bottom:1px solid var(--review-border);

}

.comments-title{

    display:flex;

    align-items:center;

    gap:12px;

}

.comments-title i{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--review-primary);

    background:var(--review-primary-light);

    font-size:18px;

}

.comments-title h2{

    margin:0;

    font-size:clamp(1.15rem,4vw,1.5rem);

    color:var(--review-text);

    font-weight:700;

}


/*==================================
Aggregate Rating
==================================*/

.review-summary{

    display:flex;

    flex-direction:column;

    gap:15px;

    padding:18px;

    border-radius:18px;

    background:#fcfcfc;

    border:1px solid var(--review-border);

}

.review-score{

    display:flex;

    align-items:center;

    gap:14px;

}

.review-score-number{

    font-size:clamp(2rem,7vw,3rem);

    font-weight:800;

    color:var(--review-primary);

    line-height:1;

}

.review-score-info{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.review-stars{

    display:flex;

    align-items:center;

    gap:5px;

    color:var(--review-star);

    font-size:18px;

}

.review-stars span{

    color:var(--review-text-light);

    font-size:.85rem;

    margin-right:6px;

}

.review-total{

    font-size:.85rem;

    color:var(--review-text-light);

}


/*==================================
Review List
==================================*/

.comments-list{

    display:flex;

    flex-direction:column;

}


/*==================================
Desktop
==================================*/

@media (min-width:768px){

    .comments-header{

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

    }

    .review-summary{

        min-width:320px;

    }

}
/*==================================================
  Customer Review Card
  Part 2
==================================================*/

.comment-card{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:22px 0;

    border-bottom:1px solid var(--review-border);

}

.comment-card:last-child{

    border-bottom:none;

}

/* نوار رنگی کنار هر نظر */

.comment-card::before{

    content:"";

    position:absolute;

    right:-34px;

    top:26px;

    width:6px;

    height:72px;

    border-radius:30px;

    background:linear-gradient(
        180deg,
        #ff7900 0%,
        #ffb26b 100%
    );

}

/*==============================
Meta
==============================*/

.meta-container{

    display:flex;

    flex-direction:column;

    gap:16px;

}

/*==============================
User
==============================*/

.user-info{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

}

/* آواتار */

.user-avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--review-primary-light);

    color:var(--review-primary);

    border:1px solid #ffd9b5;

    font-size:1rem;

    font-weight:700;

    flex-shrink:0;

}

/* اگر FontAwesome استفاده شود */

.user-avatar i{

    font-size:17px;

}

/* نام */

.user-name{

    font-size:.95rem;

    font-weight:700;

    color:var(--review-text);

}

/* تاریخ */

.user-info time{

    color:var(--review-text-light);

    font-size:.82rem;

}

/*==============================
Rating
==============================*/

.rating-side{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:12px;

}

/* پیشنهاد */

.suggest-badge{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:8px 15px;

    background:var(--review-success-bg);

    color:var(--review-success);

    border-radius:30px;

    font-size:.78rem;

    font-weight:700;

    white-space:nowrap;

}

.suggest-badge i{

    font-size:13px;

}

/*==============================
Stars
==============================*/

.stars-box{

    display:flex;

    align-items:center;

    gap:10px;

    background:#fafafa;

    border:1px solid #ededed;

    border-radius:14px;

    padding:9px 14px;

}

.review-rate{

    font-size:.9rem;

    font-weight:700;

    color:#444;

}

.stars-gold{

    color:var(--review-star);

    font-size:.95rem;

    letter-spacing:1px;

}

/*==============================
Content
==============================*/

.comment-content{

    display:flex;

    flex-direction:column;

}

.comment-content h4{

    margin:0 0 12px;

    font-size:1.05rem;

    font-weight:700;

    color:var(--review-text);

    line-height:1.6;

}

.comment-content p{

    margin:0;

    color:var(--review-text-light);

    line-height:2.05;

    font-size:.93rem;

    word-break:break-word;

}

/*==============================
Desktop
==============================*/

@media (min-width:768px){

    .meta-container{

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

    }

    .rating-side{

        justify-content:flex-end;

    }

}

/*==================================================
  Customer Reviews Component
  Part 3
  Admin Reply + Vote Buttons + Accessibility
==================================================*/


/*==================================
Admin Reply
==================================*/

.admin-reply{

    margin-top:18px;

    padding:16px 18px;

    background:#fffaf5;

    border:1px solid #ffe3c4;

    border-right:5px solid var(--review-primary);

    border-radius:16px;

    position:relative;

}

.admin-reply::before{

    content:"";

    position:absolute;

    top:18px;

    right:-1px;

    width:5px;

    height:42px;

    border-radius:10px;

    background:var(--review-primary);

}

.reply-label{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:10px;

    color:var(--review-primary);

    font-size:.90rem;

    font-weight:700;

    line-height:1.6;

}

.reply-label i{

    font-size:15px;

}

.admin-reply p,
.admin-reply{

    color:var(--review-text-light);

    line-height:2;

    font-size:.90rem;

}


/*==================================
Action Area
==================================*/

.action-area{

    display:flex;

    justify-content:flex-start;

    margin-top:18px;

}


/*==================================
Vote Buttons
==================================*/

.vote-btns{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.btn-vote{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:44px;

    padding:10px 18px;

    border:1px solid var(--review-border);

    background:#fff;

    color:#888;

    border-radius:14px;

    font-family:inherit;

    font-size:.85rem;

    cursor:pointer;

    user-select:none;

    outline:none;

}

.btn-vote i{

    font-size:15px;

}

.btn-vote.active{

    color:var(--review-primary);

    border-color:var(--review-primary);

    background:var(--review-primary-light);

}

.btn-vote span{

    font-weight:600;

}


/*==================================
Accessibility
==================================*/

.btn-vote:focus-visible{

    outline:3px solid rgba(255,121,0,.25);

    outline-offset:2px;

}

.comment-card:focus-within{

    border-radius:18px;

}


/*==================================
Small Mobile
==================================*/

@media (max-width:480px){

    .comment-card{

        padding:18px 0;

    }

    .admin-reply{

        padding:14px;

    }

    .reply-label{

        font-size:.85rem;

    }

    .btn-vote{

        flex:1;

        justify-content:center;

        min-width:120px;

        padding:10px 14px;

        font-size:.80rem;

    }

}


/*==================================
Tablet
==================================*/

@media (min-width:768px){

    .vote-btns{

        gap:14px;

    }

}


/*==================================
Desktop
==================================*/

@media (min-width:992px){

    .admin-reply{

        padding:18px 22px;

    }

    .btn-vote{

        min-width:145px;

    }

}


</style>
<!-- ==========================================
     Customer Reviews Section
     SEO + Schema.org + Mobile First
=========================================== -->

<section class="comments-section"

         id="customer-reviews"

         itemscope
         itemtype="https://schema.org/Product">

    <!-- نام کسب و کار -->
    <meta itemprop="name" content="چاپ نعمتی">

    <!-- توضیح کوتاه -->
    <meta itemprop="description"
          content="نظرات مشتریان چاپ نعمتی درباره کیفیت چاپ، طراحی، قیمت، سرعت انجام سفارش و خدمات چاپ.">

    <!-- =========================
         Aggregate Rating
    ========================== -->

    <div itemprop="aggregateRating"
         itemscope
         itemtype="https://schema.org/AggregateRating">

        <meta itemprop="ratingValue" content="4.8">
        <meta itemprop="bestRating" content="5">
        <meta itemprop="worstRating" content="1">
        <meta itemprop="reviewCount" content="124">

    </div>

    <!-- =========================
            Header
    ========================== -->

    <header class="comments-header">

        <div class="comments-title">

            <i class="fa-solid fa-comments"
               aria-hidden="true"></i>

            <div>

                <h2>
                    نظرات مشتریان چاپ نعمتی
                </h2>

                <p class="review-total">
                    تجربه مشتریان از کیفیت چاپ، قیمت، طراحی و سرعت انجام سفارش
                </p>

            </div>

        </div>

        <!-- امتیاز کلی -->

        <aside class="review-summary"
               aria-label="میانگین امتیاز کاربران">

            <div class="review-score">

                <div class="review-score-number">

                    4.8

                </div>

                <div class="review-score-info">

                    <div class="review-stars"
                         aria-label="امتیاز 4.8 از 5">

                        ★★★★★

                        <span>

                            میانگین امتیاز

                        </span>

                    </div>

                    <div class="review-total">

                        بر اساس
                        <strong>124</strong>
                        نظر ثبت شده

                    </div>

                </div>

            </div>

        </aside>

    </header>



    <!-- =========================
            Reviews List
    ========================== -->

    <div class="comments-list">




<!-- ==========================================
            Review 1
=========================================== -->

<article class="comment-card"

         itemprop="review"

         itemscope

         itemtype="https://schema.org/Review">


    <!-- اطلاعات کاربر -->

    <div class="meta-container">

        <div class="user-info">

            <span class="user-avatar"

                  aria-hidden="true">

                ک

            </span>

            <span class="user-name"

                  itemprop="author"

                  itemscope

                  itemtype="https://schema.org/Person">

                <span itemprop="name">

                    کاربر مهمان

                </span>

            </span>

            <span>|</span>

            <time

                itemprop="datePublished"

                datetime="2025-03-21">

                ۰۱ فروردین ۱۴۰۴

            </time>

        </div>



        <!-- امتیاز -->

        <div class="rating-side">

            <span class="suggest-badge">

                <i class="fa-solid fa-circle-check"
                   aria-hidden="true"></i>

                این خدمات را پیشنهاد می‌کنم

            </span>


            <div class="stars-box">

                <span class="review-rate">

                    5.0

                </span>

                <span class="stars-gold">

                    ★★★★★

                </span>

            </div>

        </div>

    </div>



    <!-- امتیاز Schema -->

    <div itemprop="reviewRating"

         itemscope

         itemtype="https://schema.org/Rating">

        <meta itemprop="ratingValue"
              content="5">

        <meta itemprop="bestRating"
              content="5">

        <meta itemprop="worstRating"
              content="1">

    </div>



    <!-- عنوان -->

    <div class="comment-content">

        <h3 itemprop="name">

            کیفیت چاپ عالی و قیمت منصفانه

        </h3>

        <p itemprop="reviewBody">
            دقت چاپ و وضوح رنگ‌ها واقعاً راضی‌کننده بود. پانچ‌ها هم دقیق و تمیز انجام شده بود. از نظر قیمت هم نسبت به کیفیت کاملاً منطقی بود.
        </p>

        <div class="admin-reply">

            <span class="reply-label">
                <i class="fa-solid fa-shield-check" aria-hidden="true"></i>
                پاسخ چاپ نعمتی
            </span>

            <p>
                سلام کاربر مهمان عزیز، ممنون از حسن انتخاب شما و اشتراک‌گذاری تجربه‌تان. رضایت شما باعث افتخار ماست و امیدواریم در سفارش‌های بعدی نیز بهترین کیفیت را ارائه دهیم.
            </p>

        </div>

    </div>

    <div class="action-area">

        <div class="vote-btns">

            <button
                class="btn-vote"
                type="button"
                aria-label="این نظر مفید بود">

                <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>

                <span>مفید بود</span>

            </button>

            <button
                class="btn-vote"
                type="button"
                aria-label="این نظر مفید نبود">

                <i class="fa-regular fa-thumbs-down" aria-hidden="true"></i>

                <span>مفید نبود</span>

            </button>

        </div>

    </div>

</article>





<!-- ==========================================
            Review 2
=========================================== -->

<article class="comment-card"

         itemprop="review"

         itemscope

         itemtype="https://schema.org/Review">

    <div class="meta-container">

        <div class="user-info">

            <span class="user-avatar"
                  aria-hidden="true">

                ا

            </span>

            <span class="user-name"

                  itemprop="author"

                  itemscope

                  itemtype="https://schema.org/Person">

                <span itemprop="name">

                    امیر امیری

                </span>

            </span>

            <span>|</span>

            <time
                itemprop="datePublished"
                datetime="2026-02-10">

                ۲۱ بهمن ۱۴۰۴

            </time>

        </div>



        <div class="rating-side">

            <span class="suggest-badge">

                <i class="fa-solid fa-circle-check"
                   aria-hidden="true"></i>

                این خدمات را پیشنهاد می‌کنم

            </span>

            <div class="stars-box">

                <span class="review-rate">

                    4.5

                </span>

                <span class="stars-gold">

                    ★★★★☆

                </span>

            </div>

        </div>

    </div>



    <div itemprop="reviewRating"

         itemscope

         itemtype="https://schema.org/Rating">

        <meta itemprop="ratingValue"
              content="4.5">

        <meta itemprop="bestRating"
              content="5">

        <meta itemprop="worstRating"
              content="1">

    </div>



    <div class="comment-content">

        <h3 itemprop="name">

            بنر نمایشگاه

        </h3>

        <p itemprop="reviewBody">

            بنر نمایشگاه ما را چاپ کردند. چون حدود چهار سال است مشتری ثابت چاپ نعمتی هستیم، این سفارش را نیز به همین مجموعه سپردیم و مانند همیشه کیفیت چاپ، دقت رنگ‌ها و نتیجه نهایی بسیار رضایت‌بخش بود.

        </p>

    </div>



    <div class="action-area">

        <div class="vote-btns">

            <button
                class="btn-vote"
                type="button"
                aria-label="این نظر مفید بود">

                <i class="fa-regular fa-thumbs-up"
                   aria-hidden="true"></i>

                <span>مفید بود</span>

            </button>

            <button
                class="btn-vote"
                type="button"
                aria-label="این نظر مفید نبود">

                <i class="fa-regular fa-thumbs-down"
                   aria-hidden="true"></i>

                <span>مفید نبود</span>

            </button>

        </div>

    </div>

</article>

<!-- ==========================================
            Review 3
=========================================== -->

<article class="comment-card"

         itemprop="review"

         itemscope

         itemtype="https://schema.org/Review">

    <div class="meta-container">

        <div class="user-info">

            <span class="user-avatar"
                  aria-hidden="true">

                س

            </span>

            <span class="user-name"

                  itemprop="author"

                  itemscope

                  itemtype="https://schema.org/Person">

                <span itemprop="name">

                    سجاد رضایی

                </span>

            </span>

            <span>|</span>

            <time
                itemprop="datePublished"
                datetime="2026-07-06">

                ۱۵ تیر ۱۴۰۵

            </time>

        </div>

        <div class="rating-side">

            <span class="suggest-badge">

                <i class="fa-solid fa-circle-check"
                   aria-hidden="true"></i>

                این خدمات را پیشنهاد می‌کنم

            </span>

            <div class="stars-box">

                <span class="review-rate">

                    4.0

                </span>

                <span class="stars-gold">

                    ★★★★☆

                </span>

            </div>

        </div>

    </div>

    <div itemprop="reviewRating"

         itemscope

         itemtype="https://schema.org/Rating">

        <meta itemprop="ratingValue"
              content="4">

        <meta itemprop="bestRating"
              content="5">

        <meta itemprop="worstRating"
              content="1">

    </div>

    <div class="comment-content">

        <h3 itemprop="name">

            چاپ رنگ‌ها

        </h3>

        <p itemprop="reviewBody">

            چاپ رنگ‌ها کیفیت خوبی داشت، فقط ارسال سفارش کمی با تأخیر انجام شد. با این حال کیفیت کاغذ، وضوح چاپ و بسته‌بندی کاملاً رضایت‌بخش بود و در مجموع تجربه خوبی از سفارش داشتم.

        </p>

        <div class="admin-reply">

            <span class="reply-label">

                <i class="fa-solid fa-shield-check"
                   aria-hidden="true"></i>

                پاسخ چاپ نعمتی

            </span>

            <p>

                سلام سجاد رضایی عزیز، از اینکه تجربه خود را با ما به اشتراک گذاشتید سپاسگزاریم. بابت تأخیر پیش‌آمده از شما عذرخواهی می‌کنیم و تلاش می‌کنیم در سفارش‌های بعدی خدمات سریع‌تر و با همان کیفیت مطلوب ارائه دهیم.

            </p>

        </div>

    </div>

    <div class="action-area">

        <div class="vote-btns">

            <button
                class="btn-vote"
                type="button"
                aria-label="این نظر مفید بود">

                <i class="fa-regular fa-thumbs-up"
                   aria-hidden="true"></i>

                <span>مفید بود</span>

            </button>

            <button
                class="btn-vote"
                type="button"
                aria-label="این نظر مفید نبود">

                <i class="fa-regular fa-thumbs-down"
                   aria-hidden="true"></i>

                <span>مفید نبود</span>

            </button>

        </div>

    </div>

</article>





<!-- ==========================================
            Review 4
=========================================== -->

<article class="comment-card"

         itemprop="review"

         itemscope

         itemtype="https://schema.org/Review">

    <div class="meta-container">

        <div class="user-info">

            <span class="user-avatar"
                  aria-hidden="true">

                م

            </span>

            <span class="user-name"

                  itemprop="author"

                  itemscope

                  itemtype="https://schema.org/Person">

                <span itemprop="name">

                    مریم حسینی

                </span>

            </span>

            <span>|</span>

            <time
                itemprop="datePublished"
                datetime="2026-11-26">

                ۰۵ مرداد ۱۴۰۵

            </time>

        </div>

        <div class="rating-side">

            <span class="suggest-badge">

                <i class="fa-solid fa-circle-check"
                   aria-hidden="true"></i>

                این خدمات را پیشنهاد می‌کنم

            </span>

            <div class="stars-box">

                <span class="review-rate">

                    5.0

                </span>

                <span class="stars-gold">

                    ★★★★★

                </span>

            </div>

        </div>

    </div>

    <div itemprop="reviewRating"

         itemscope

         itemtype="https://schema.org/Rating">

        <meta itemprop="ratingValue"
              content="5">

        <meta itemprop="bestRating"
              content="5">

        <meta itemprop="worstRating"
              content="1">

    </div>

    <div class="comment-content">

        <h3 itemprop="name">

            طراحی کارت ویزیت و تراکت

        </h3>

        <p itemprop="reviewBody">

            واقعاً از طراحی حرفه‌ای، دقت در اجرا و سرعت عمل تیم چاپ نعمتی رضایت کامل دارم. رنگ‌های چاپ‌شده دقیقاً مطابق فایل طراحی بودند و کیفیت نهایی فراتر از انتظارم بود.

        </p>

    </div>

    <div class="action-area">

        <div class="vote-btns">

            <button
                class="btn-vote"
                type="button"
                aria-label="این نظر مفید بود">

                <i class="fa-regular fa-thumbs-up"
                   aria-hidden="true"></i>

                <span>مفید بود</span>

            </button>

            <button
                class="btn-vote"
                type="button"
                aria-label="این نظر مفید نبود">

                <i class="fa-regular fa-thumbs-down"
                   aria-hidden="true"></i>

                <span>مفید نبود</span>

            </button>

        </div>

    </div>

</article>
    </div>
    <!-- /.comments-list -->

</section>
<!-- /#customer-reviews -->


<script>
document.addEventListener('DOMContentLoaded', function () {

    const voteGroups = document.querySelectorAll('.vote-btns');

    voteGroups.forEach(function (group) {

        const buttons = group.querySelectorAll('.btn-vote');

        buttons.forEach(function (button) {

            button.addEventListener('click', function () {

                buttons.forEach(function (btn) {
                    btn.classList.remove('active');
                    btn.setAttribute('aria-pressed', 'false');
                });

                this.classList.add('active');
                this.setAttribute('aria-pressed', 'true');

            });

        });

    });

});
</script>



</html>