SELL 5000+ CATEGORIES WITH

AND CONNECT WITH 5M XOTIC CUSTOMERS

Vendor Testimonials Carousel

Seller spotlight

Built by sellers, loved by shoppers.

Meet the independent vendors turning their ideas into thriving online businesses with a XOTIC platform that grows alongside them.

Portrait of an artisan in a Jodhpur framing shop surrounded by artwork.

Art & framing

The storefront tools helped my handcrafted frames reach collectors far beyond my neighborhood.

Arjun Mehta

Jodhpur Frame House

A smiling businesswoman stands confidently in a modern office environment.

Home décor

Managing orders now feels effortless, so I can spend more time designing collections customers love.

Maya Fernandes

Saffron Living

Smiling young ethnic male waiter in apron standing with arms folded near modern food truck and looking at camera contentedly

Specialty food

Clear insights showed me exactly which products to promote. Our repeat orders doubled in one season.

Kabir Shah

Street Spoon Pantry

African American woman smiling confidently in car showroom, representing automotive sales.

Accessories

I launched my first collection in a weekend and received orders from three new cities immediately.

Nia Okafor

Form & Found

Portrait of a confident man in black shirt smiling against a plain background.

Menswear

The simple inventory view keeps our studio organised even during our busiest festive launches.

Rohan Iyer

North Loom Studio

Florals

Customers can discover our seasonal arrangements easily, and every order arrives clearly organised.

Leena Park

Petal & Stem

A cheerful young man in a white shirt smiling at his desk in a modern office environment.

Stationery

Our personalised stationery finally has a polished online home that matches the quality of our work.

Dev Malhotra

Paperfolk Press

A female vendor takes an order using a smartphone at a lively outdoor food stall.

Street food

Mobile order updates make market days calmer, faster, and much more personal for our regulars.

Linh Tran

Little Saigon Kitchen

A friendly shopkeeper stands behind shelves of homemade preserves.

Gourmet goods

We turned our local preserves shop into a nationwide brand without losing our small-business character.

Tomás Silva

The Village Larder

Confident businesswoman in a modern office space, embodying success and leadership.

Wellness

From product pages to customer messages, everything feels connected and ready for our next stage.

Aisha Bennett

Good Day Rituals

HTML

<!doctype html>
<html lang="en"><head><script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260716-05-1ab63ad"}');</script><script src="/_sdk/f432b76fb310b513.telemetry_sdk.js" integrity="sha512-9FJQ55EKmmqhyyik8BhrMVfm0+iYYfb8uOlRsjtkxJMEI97qOVEI4PnHohDjQAtvAep0IOEpdQ64eki0sz62ug=="></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vendor Testimonials Carousel</title>
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
  <script src="/_sdk/b19ec5e9a6bcccbf.editing_sdk.js" integrity="sha512-zBJgQuXCQdyGFqXgZwfp8p9NowwbyuWhOK/NGHf9nps+IMSAyeeSyv3qhtfcnKWA9sWownxUevRqEhsjnjL55w=="></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Fraunces:opsz,wght@9..144,600;9..144,700&amp;display=swap" rel="stylesheet">
  <script src="/_sdk/e3937a0574eb2d69.data_sdk.js" type="text/javascript" integrity="sha512-xbp/ACqEQy1aDxYMtXTrR3y5MUbzxuggRR/9sD48Gl4VhLMMCiAHsxMaFV6DTdeBpR6ymF+t2zhPKYkWM3+Jfw=="></script>
  <script src="/_sdk/9432170dbd2ae0df.resizing_sdk.js" type="text/javascript" integrity="sha512-FeT+58sb1f9ejWPWFjCbJvTT+SDwGV+ngrHUnlO7TWEOoqwOLj6p256kO3vOL7DIWl1cIgrobiof8v2bOigwPg=="></script>
 </head>
 <body data-template-id="__page-root" style="background: linear-gradient(135deg, rgb(248, 242, 231), rgb(241, 234, 219));">
  <div class="page-shell">
   <div class="decorative-orb orb-one" aria-hidden="true"></div>
   <div class="decorative-orb orb-two" aria-hidden="true"></div>
   <header class="sr-only">
    <p>Seller testimonial showcase</p>
   </header>
   <main>
    <section class="testimonial-section" aria-labelledby="testimonial-heading">
     <div class="section-header">
      <div class="header-copy">
       <p data-template-id="section-eyebrow" class="canva-tag eyebrow" style="background: rgb(255, 250, 241); color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 12px; letter-spacing: 0.12rem;">Seller spotlight</p>
       <h1 id="testimonial-heading" data-template-id="section-title" class="canva-text section-title" style="color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 54px; letter-spacing: -0.04rem; line-height: 1.02;">Built by sellers, loved by shoppers.</h1>
       <p data-template-id="section-description" class="canva-text section-description" style="color: rgb(82, 110, 104); font-weight: 400; font-style: normal; font-size: 18px; line-height: 1.65;">Meet the independent vendors turning their ideas into thriving online businesses with a XOTIC platform that grows alongside them.</p>
      </div>
      <nav class="carousel-controls" aria-label="Testimonial carousel controls"><button data-template-id="previous-button" id="previous-button" class="canva-button nav-button" type="button" aria-label="Show previous testimonial" style="background: rgb(255, 250, 241); color: rgb(23, 60, 54);"> <i data-lucide="arrow-left" aria-hidden="true"></i> </button> <button data-template-id="next-button" id="next-button" class="canva-button nav-button" type="button" aria-label="Show next testimonial" style="background: rgb(240, 107, 63); color: rgb(255, 255, 255);"> <i data-lucide="arrow-right" aria-hidden="true"></i> </button>
      </nav>
     </div>
     <div class="carousel-frame">
      <div id="carousel-viewport" class="carousel-viewport" role="region" aria-roledescription="carousel" aria-label="Seller experiences" aria-live="off" tabindex="0">
       <div id="carousel-track" class="carousel-track">
        <article data-template-id="vendor-card-1" class="canva-card testimonial-card" aria-label="Testimonial 1 of 10" style="background: rgb(255, 250, 241);">
         <div class="photo-wrap"><img data-template-id="vendor-photo-1" class="canva-image vendor-photo" loading="lazy" src="https://images.pexels.com/photos/38178433/pexels-photo-38178433.jpeg" alt="Portrait of an artisan in a Jodhpur framing shop surrounded by artwork."> <span data-template-id="vendor-tag-1" class="canva-tag vendor-tag" style="background: rgb(240, 107, 63); color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 11px;">Art &amp; framing</span>
         </div>
         <div class="card-content">
          <div class="quote-row" aria-hidden="true"><span class="quote-mark">“</span><span class="stars">★★★★★</span>
          </div>
          <p data-template-id="vendor-quote-1" class="canva-text vendor-quote" style="color: rgb(41, 77, 71); font-weight: 400; font-style: normal; font-size: 15px; line-height: 1.55;">The storefront tools helped my handcrafted frames reach collectors far beyond my neighborhood.</p>
          <hr class="vendor-rule">
          <h2 data-template-id="vendor-name-1" class="canva-text vendor-name" style="color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 17px;">Arjun Mehta</h2>
          <p data-template-id="vendor-business-1" class="canva-text vendor-business" style="color: rgb(112, 131, 126); font-weight: 500; font-style: normal; font-size: 13px;">Jodhpur Frame House</p>
         </div>
        </article>
        <article data-template-id="vendor-card-2" class="canva-card testimonial-card" aria-label="Testimonial 2 of 10" style="background: rgb(242, 248, 243);">
         <div class="photo-wrap"><img data-template-id="vendor-photo-2" class="canva-image vendor-photo" loading="lazy" src="https://images.pexels.com/photos/8171180/pexels-photo-8171180.jpeg" alt="A smiling businesswoman stands confidently in a modern office environment."> <span data-template-id="vendor-tag-2" class="canva-tag vendor-tag" style="background: rgb(23, 60, 54); color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 11px;">Home décor</span>
         </div>
         <div class="card-content">
          <div class="quote-row" aria-hidden="true"><span class="quote-mark">“</span><span class="stars">★★★★★</span>
          </div>
          <p data-template-id="vendor-quote-2" class="canva-text vendor-quote" style="color: rgb(41, 77, 71); font-weight: 400; font-style: normal; font-size: 15px; line-height: 1.55;">Managing orders now feels effortless, so I can spend more time designing collections customers love.</p>
          <hr class="vendor-rule">
          <h2 data-template-id="vendor-name-2" class="canva-text vendor-name" style="color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 17px;">Maya Fernandes</h2>
          <p data-template-id="vendor-business-2" class="canva-text vendor-business" style="color: rgb(112, 131, 126); font-weight: 500; font-style: normal; font-size: 13px;">Saffron Living</p>
         </div>
        </article>
        <article data-template-id="vendor-card-3" class="canva-card testimonial-card" aria-label="Testimonial 3 of 10" style="background: rgb(255, 248, 235);">
         <div class="photo-wrap"><img data-template-id="vendor-photo-3" class="canva-image vendor-photo" loading="lazy" src="https://images.pexels.com/photos/5920774/pexels-photo-5920774.jpeg" alt="Smiling young ethnic male waiter in apron standing with arms folded near modern food truck and looking at camera contentedly"> <span data-template-id="vendor-tag-3" class="canva-tag vendor-tag" style="background: rgb(229, 167, 47); color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 11px;">Specialty food</span>
         </div>
         <div class="card-content">
          <div class="quote-row" aria-hidden="true"><span class="quote-mark">“</span><span class="stars">★★★★★</span>
          </div>
          <p data-template-id="vendor-quote-3" class="canva-text vendor-quote" style="color: rgb(41, 77, 71); font-weight: 400; font-style: normal; font-size: 15px; line-height: 1.55;">Clear insights showed me exactly which products to promote. Our repeat orders doubled in one season.</p>
          <hr class="vendor-rule">
          <h2 data-template-id="vendor-name-3" class="canva-text vendor-name" style="color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 17px;">Kabir Shah</h2>
          <p data-template-id="vendor-business-3" class="canva-text vendor-business" style="color: rgb(112, 131, 126); font-weight: 500; font-style: normal; font-size: 13px;">Street Spoon Pantry</p>
         </div>
        </article>
        <article data-template-id="vendor-card-4" class="canva-card testimonial-card" aria-label="Testimonial 4 of 10" style="background: rgb(255, 244, 239);">
         <div class="photo-wrap"><img data-template-id="vendor-photo-4" class="canva-image vendor-photo" loading="lazy" src="https://images.pexels.com/photos/7144255/pexels-photo-7144255.jpeg" alt="African American woman smiling confidently in car showroom, representing automotive sales."> <span data-template-id="vendor-tag-4" class="canva-tag vendor-tag" style="background: rgb(240, 107, 63); color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 11px;">Accessories</span>
         </div>
         <div class="card-content">
          <div class="quote-row" aria-hidden="true"><span class="quote-mark">“</span><span class="stars">★★★★★</span>
          </div>
          <p data-template-id="vendor-quote-4" class="canva-text vendor-quote" style="color: rgb(41, 77, 71); font-weight: 400; font-style: normal; font-size: 15px; line-height: 1.55;">I launched my first collection in a weekend and received orders from three new cities immediately.</p>
          <hr class="vendor-rule">
          <h2 data-template-id="vendor-name-4" class="canva-text vendor-name" style="color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 17px;">Nia Okafor</h2>
          <p data-template-id="vendor-business-4" class="canva-text vendor-business" style="color: rgb(112, 131, 126); font-weight: 500; font-style: normal; font-size: 13px;">Form &amp; Found</p>
         </div>
        </article>
        <article data-template-id="vendor-card-5" class="canva-card testimonial-card" aria-label="Testimonial 5 of 10" style="background: rgb(242, 248, 243);">
         <div class="photo-wrap"><img data-template-id="vendor-photo-5" class="canva-image vendor-photo" loading="lazy" src="https://images.pexels.com/photos/7580989/pexels-photo-7580989.jpeg" alt="Portrait of a confident man in black shirt smiling against a plain background."> <span data-template-id="vendor-tag-5" class="canva-tag vendor-tag" style="background: rgb(23, 60, 54); color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 11px;">Menswear</span>
         </div>
         <div class="card-content">
          <div class="quote-row" aria-hidden="true"><span class="quote-mark">“</span><span class="stars">★★★★★</span>
          </div>
          <p data-template-id="vendor-quote-5" class="canva-text vendor-quote" style="color: rgb(41, 77, 71); font-weight: 400; font-style: normal; font-size: 15px; line-height: 1.55;">The simple inventory view keeps our studio organised even during our busiest festive launches.</p>
          <hr class="vendor-rule">
          <h2 data-template-id="vendor-name-5" class="canva-text vendor-name" style="color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 17px;">Rohan Iyer</h2>
          <p data-template-id="vendor-business-5" class="canva-text vendor-business" style="color: rgb(112, 131, 126); font-weight: 500; font-style: normal; font-size: 13px;">North Loom Studio</p>
         </div>
        </article>
        <article data-template-id="vendor-card-6" class="canva-card testimonial-card" aria-label="Testimonial 6 of 10" style="background: rgb(255, 250, 241);">
         <div class="photo-wrap"><img data-template-id="vendor-photo-6" class="canva-image vendor-photo" loading="lazy" src="https://images.pexels.com/photos/3933017/pexels-photo-3933017.jpeg" alt="From below of young confident Asian female standing with crossed arms at entrance of floral shop and smiling at camera"> <span data-template-id="vendor-tag-6" class="canva-tag vendor-tag" style="background: rgb(62, 139, 126); color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 11px;">Florals</span>
         </div>
         <div class="card-content">
          <div class="quote-row" aria-hidden="true"><span class="quote-mark">“</span><span class="stars">★★★★★</span>
          </div>
          <p data-template-id="vendor-quote-6" class="canva-text vendor-quote" style="color: rgb(41, 77, 71); font-weight: 400; font-style: normal; font-size: 15px; line-height: 1.55;">Customers can discover our seasonal arrangements easily, and every order arrives clearly organised.</p>
          <hr class="vendor-rule">
          <h2 data-template-id="vendor-name-6" class="canva-text vendor-name" style="color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 17px;">Leena Park</h2>
          <p data-template-id="vendor-business-6" class="canva-text vendor-business" style="color: rgb(112, 131, 126); font-weight: 500; font-style: normal; font-size: 13px;">Petal &amp; Stem</p>
         </div>
        </article>
        <article data-template-id="vendor-card-7" class="canva-card testimonial-card" aria-label="Testimonial 7 of 10" style="background: rgb(255, 248, 235);">
         <div class="photo-wrap"><img data-template-id="vendor-photo-7" class="canva-image vendor-photo" loading="lazy" src="https://images.pexels.com/photos/9301461/pexels-photo-9301461.jpeg" alt="A cheerful young man in a white shirt smiling at his desk in a modern office environment."> <span data-template-id="vendor-tag-7" class="canva-tag vendor-tag" style="background: rgb(229, 167, 47); color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 11px;">Stationery</span>
         </div>
         <div class="card-content">
          <div class="quote-row" aria-hidden="true"><span class="quote-mark">“</span><span class="stars">★★★★★</span>
          </div>
          <p data-template-id="vendor-quote-7" class="canva-text vendor-quote" style="color: rgb(41, 77, 71); font-weight: 400; font-style: normal; font-size: 15px; line-height: 1.55;">Our personalised stationery finally has a polished online home that matches the quality of our work.</p>
          <hr class="vendor-rule">
          <h2 data-template-id="vendor-name-7" class="canva-text vendor-name" style="color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 17px;">Dev Malhotra</h2>
          <p data-template-id="vendor-business-7" class="canva-text vendor-business" style="color: rgb(112, 131, 126); font-weight: 500; font-style: normal; font-size: 13px;">Paperfolk Press</p>
         </div>
        </article>
        <article data-template-id="vendor-card-8" class="canva-card testimonial-card" aria-label="Testimonial 8 of 10" style="background: rgb(255, 244, 239);">
         <div class="photo-wrap"><img data-template-id="vendor-photo-8" class="canva-image vendor-photo" loading="lazy" src="https://images.pexels.com/photos/16782668/pexels-photo-16782668.jpeg" alt="A female vendor takes an order using a smartphone at a lively outdoor food stall."> <span data-template-id="vendor-tag-8" class="canva-tag vendor-tag" style="background: rgb(240, 107, 63); color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 11px;">Street food</span>
         </div>
         <div class="card-content">
          <div class="quote-row" aria-hidden="true"><span class="quote-mark">“</span><span class="stars">★★★★★</span>
          </div>
          <p data-template-id="vendor-quote-8" class="canva-text vendor-quote" style="color: rgb(41, 77, 71); font-weight: 400; font-style: normal; font-size: 15px; line-height: 1.55;">Mobile order updates make market days calmer, faster, and much more personal for our regulars.</p>
          <hr class="vendor-rule">
          <h2 data-template-id="vendor-name-8" class="canva-text vendor-name" style="color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 17px;">Linh Tran</h2>
          <p data-template-id="vendor-business-8" class="canva-text vendor-business" style="color: rgb(112, 131, 126); font-weight: 500; font-style: normal; font-size: 13px;">Little Saigon Kitchen</p>
         </div>
        </article>
        <article data-template-id="vendor-card-9" class="canva-card testimonial-card" aria-label="Testimonial 9 of 10" style="background: rgb(242, 248, 243);">
         <div class="photo-wrap"><img data-template-id="vendor-photo-9" class="canva-image vendor-photo" loading="lazy" src="https://images.pexels.com/photos/34674788/pexels-photo-34674788.jpeg" alt="A friendly shopkeeper stands behind shelves of homemade preserves."> <span data-template-id="vendor-tag-9" class="canva-tag vendor-tag" style="background: rgb(23, 60, 54); color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 11px;">Gourmet goods</span>
         </div>
         <div class="card-content">
          <div class="quote-row" aria-hidden="true"><span class="quote-mark">“</span><span class="stars">★★★★★</span>
          </div>
          <p data-template-id="vendor-quote-9" class="canva-text vendor-quote" style="color: rgb(41, 77, 71); font-weight: 400; font-style: normal; font-size: 15px; line-height: 1.55;">We turned our local preserves shop into a nationwide brand without losing our small-business character.</p>
          <hr class="vendor-rule">
          <h2 data-template-id="vendor-name-9" class="canva-text vendor-name" style="color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 17px;">Tomás Silva</h2>
          <p data-template-id="vendor-business-9" class="canva-text vendor-business" style="color: rgb(112, 131, 126); font-weight: 500; font-style: normal; font-size: 13px;">The Village Larder</p>
         </div>
        </article>
        <article data-template-id="vendor-card-10" class="canva-card testimonial-card" aria-label="Testimonial 10 of 10" style="background: rgb(255, 250, 241);">
         <div class="photo-wrap"><img data-template-id="vendor-photo-10" class="canva-image vendor-photo" loading="lazy" src="https://images.pexels.com/photos/3184406/pexels-photo-3184406.jpeg" alt="Confident businesswoman in a modern office space, embodying success and leadership."> <span data-template-id="vendor-tag-10" class="canva-tag vendor-tag" style="background: rgb(62, 139, 126); color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 11px;">Wellness</span>
         </div>
         <div class="card-content">
          <div class="quote-row" aria-hidden="true"><span class="quote-mark">“</span><span class="stars">★★★★★</span>
          </div>
          <p data-template-id="vendor-quote-10" class="canva-text vendor-quote" style="color: rgb(41, 77, 71); font-weight: 400; font-style: normal; font-size: 15px; line-height: 1.55;">From product pages to customer messages, everything feels connected and ready for our next stage.</p>
          <hr class="vendor-rule">
          <h2 data-template-id="vendor-name-10" class="canva-text vendor-name" style="color: rgb(23, 60, 54); font-weight: 700; font-style: normal; font-size: 17px;">Aisha Bennett</h2>
          <p data-template-id="vendor-business-10" class="canva-text vendor-business" style="color: rgb(112, 131, 126); font-weight: 500; font-style: normal; font-size: 13px;">Good Day Rituals</p>
         </div>
        </article>
       </div>
      </div>
     </div>
     <div class="carousel-footer">
      <p data-template-id="trust-message" class="canva-text trust-message" style="color: rgb(82, 110, 104); font-weight: 600; font-style: normal; font-size: 14px;">Real stories from independent sellers</p>
      <div id="carousel-dots" class="carousel-dots" role="group" aria-label="Choose carousel position"></div>
      <div id="slide-status" class="slide-status" aria-live="polite">
       1 / 6
      </div>
     </div>
    </section>
   </main>
   <footer class="sr-only">
    <p>End of seller testimonials</p>
   </footer>
  </div> 
</body>
</html>

CSS

:root {
      --ink: #173c36;
      --cream: #f6f0e4;
      --orange: #f06b3f;
      --gold: #f2b84b;
      --card-gap: 18px;
      --visible-cards: 5;
    }

* {
      box-sizing: border-box;
    }

html {
      width: 100%;
      scroll-behavior: smooth;
    }

body {
      width: 100%;
      margin: 0;
      color: var(--ink);
      font-family: "DM Sans", sans-serif;
      overflow-x: hidden;
    }

button {
      font: inherit;
    }

.page-shell {
      position: relative;
      width: 100%;
      min-height: 100%;
      isolation: isolate;
      overflow: hidden;
    }

.page-shell::before {
      position: absolute;
      inset: 0;
      z-index: -3;
      content: "";
      opacity: 0.35;
      background-image:
        linear-gradient(rgba(23, 60, 54, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 60, 54, 0.055) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(to bottom, black, transparent 92%);
    }

.decorative-orb {
      position: absolute;
      z-index: -2;
      border-radius: 999px;
      pointer-events: none;
      filter: blur(1px);
    }

.orb-one {
      top: -90px;
      right: -100px;
      width: 310px;
      height: 310px;
      background: rgba(240, 107, 63, 0.14);
    }

.orb-two {
      bottom: 30px;
      left: -100px;
      width: 260px;
      height: 260px;
      background: rgba(62, 139, 126, 0.13);
    }

.testimonial-section {
      width: 100%;
      max-width: 1600px;
      margin: 0 auto;
      padding: 76px clamp(18px, 4vw, 64px) 62px;
    }

.section-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 32px;
      margin-bottom: 32px;
    }

.header-copy {
      max-width: 850px;
    }

.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 16px;
      padding: 8px 13px;
      border: 1px solid rgba(23, 60, 54, 0.16);
      border-radius: 999px;
      box-shadow: 0 5px 0 rgba(23, 60, 54, 0.07);
      text-transform: uppercase;
    }

.eyebrow::before {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--orange);
      content: "";
    }

.section-title {
      max-width: 780px;
      margin: 0;
      font-family: "Fraunces", serif;
      letter-spacing: -0.045em;
      line-height: 1.02;
      text-wrap: balance;
    }

.section-description {
      max-width: 680px;
      margin: 18px 0 0;
      line-height: 1.65;
    }

.carousel-controls {
      display: flex;
      gap: 10px;
      padding-bottom: 5px;
    }

.nav-button {
      display: grid;
      width: 52px;
      height: 52px;
      place-items: center;
      border: 1px solid rgba(23, 60, 54, 0.22);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 6px 0 rgba(23, 60, 54, 0.12);
      transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    }

.nav-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 0 rgba(23, 60, 54, 0.12);
      filter: brightness(1.03);
    }

.nav-button:active {
      transform: translateY(3px);
      box-shadow: 0 2px 0 rgba(23, 60, 54, 0.12);
    }

.nav-button:focus-visible,
    .carousel-dot:focus-visible,
    .carousel-viewport:focus-visible {
      outline: 3px solid var(--orange);
      outline-offset: 4px;
    }

.nav-button svg {
      width: 22px;
      height: 22px;
      stroke-width: 2.2;
    }

.carousel-frame {
      position: relative;
    }

.carousel-viewport {
      width: 100%;
      overflow: hidden;
      border-radius: 26px;
      touch-action: pan-y;
      cursor: grab;
    }

.carousel-viewport.is-dragging {
      cursor: grabbing;
    }

.carousel-track {
      display: flex;
      gap: var(--card-gap);
      align-items: stretch;
      will-change: transform;
      transition: transform 660ms cubic-bezier(0.2, 0.82, 0.2, 1);
    }

.carousel-track.no-transition {
      transition: none;
    }

.testimonial-card {
      position: relative;
      display: flex;
      flex: 0 0 calc((100% - (var(--visible-cards) - 1) * var(--card-gap)) / var(--visible-cards));
      min-width: 0;
      min-height: 430px;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(23, 60, 54, 0.13);
      border-radius: 24px;
      box-shadow: 0 15px 32px rgba(23, 60, 54, 0.11);
      transform: translateZ(0);
    }

.testimonial-card:nth-child(even) {
      transform: translateY(12px);
    }

.photo-wrap {
      position: relative;
      height: 190px;
      flex: 0 0 auto;
      overflow: hidden;
    }

.vendor-photo {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 700ms ease;
    }

.testimonial-card:hover .vendor-photo {
      transform: scale(1.045);
    }

.photo-wrap::after {
      position: absolute;
      inset: auto 0 0;
      height: 45%;
      content: "";
      pointer-events: none;
      background: linear-gradient(to top, rgba(15, 42, 37, 0.42), transparent);
    }

.vendor-tag {
      position: absolute;
      right: 14px;
      bottom: 14px;
      z-index: 1;
      max-width: calc(100% - 28px);
      padding: 7px 10px;
      border-radius: 999px;
      box-shadow: 0 5px 14px rgba(15, 42, 37, 0.2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.card-content {
      display: flex;
      min-height: 0;
      flex: 1;
      flex-direction: column;
      padding: 21px 20px 20px;
    }

.quote-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

.quote-mark {
      font-family: "Fraunces", serif;
      font-size: 56px;
      line-height: 0.6;
      color: var(--orange);
    }

.stars {
      color: var(--gold);
      font-size: 14px;
      letter-spacing: 1px;
      white-space: nowrap;
    }

.vendor-quote {
      margin: 0;
      line-height: 1.55;
    }

.vendor-rule {
      width: 42px;
      height: 3px;
      margin: auto 0 14px;
      border: 0;
      border-radius: 99px;
      background: var(--orange);
    }

.vendor-name {
      margin: 0 0 3px;
      line-height: 1.2;
    }

.vendor-business {
      margin: 0;
      line-height: 1.4;
    }

.carousel-footer {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 20px;
      margin-top: 35px;
    }

.trust-message {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      justify-self: start;
      margin: 0;
    }

.trust-message::before {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      content: "";
      background: #3e8b7e;
      box-shadow: 0 0 0 5px rgba(62, 139, 126, 0.13);
    }

.carousel-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
    }

.carousel-dot {
      width: 9px;
      height: 9px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(23, 60, 54, 0.25);
      cursor: pointer;
      transition: width 220ms ease, background 220ms ease;
    }

.carousel-dot.is-active {
      width: 27px;
      background: var(--orange);
    }

.slide-status {
      justify-self: end;
      min-width: 72px;
      color: rgba(23, 60, 54, 0.65);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

@media (max-width: 1199px) {
      :root {
        --visible-cards: 3;
      }

.testimonial-section {
        padding-top: 62px;
      }
    }

@media (max-width: 767px) {
      :root {
        --visible-cards: 2;
        --card-gap: 12px;
      }

.testimonial-section {
        padding: 44px 14px 42px;
      }

.section-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 21px;
        margin-bottom: 24px;
      }

.carousel-controls {
        padding: 0;
      }

.nav-button {
        width: 46px;
        height: 46px;
      }

.carousel-viewport {
        border-radius: 19px;
      }

.testimonial-card {
        min-height: 390px;
        border-radius: 19px;
      }

.testimonial-card:nth-child(even) {
        transform: none;
      }

.photo-wrap {
        height: 150px;
      }

.card-content {
        padding: 17px 15px 16px;
      }

.quote-mark {
        font-size: 45px;
      }

.stars {
        font-size: 11px;
        letter-spacing: 0;
      }

.vendor-tag {
        right: 9px;
        bottom: 9px;
        padding: 5px 8px;
      }

.carousel-footer {
        grid-template-columns: 1fr auto;
        margin-top: 24px;
      }

.trust-message {
        display: none;
      }

.carousel-dots {
        justify-content: flex-start;
        overflow: hidden;
      }
    }

@media (max-width: 410px) {
      .section-description {
        line-height: 1.5;
      }

.photo-wrap {
        height: 132px;
      }

.testimonial-card {
        min-height: 374px;
      }

.stars {
        font-size: 9px;
      }
    }

@media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

.carousel-track,
      .vendor-photo,
      .nav-button,
      .carousel-dot {
        transition: none !important;
      }
    }

JavaScript

document.addEventListener("DOMContentLoaded", () => {
      lucide.createIcons();

const viewport = document.getElementById("carousel-viewport");
      const track = document.getElementById("carousel-track");
      const cards = Array.from(track.children);
      const previousButton = document.getElementById("previous-button");
      const nextButton = document.getElementById("next-button");
      const dotsContainer = document.getElementById("carousel-dots");
      const status = document.getElementById("slide-status");
      const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");

let currentIndex = 0;
      let visibleCards = getVisibleCards();
      let autoplayTimer = null;
      let dragStartX = 0;
      let dragDeltaX = 0;
      let isDragging = false;
      let isPointerInside = false;
      let isFocusInside = false;

function getVisibleCards() {
        if (window.innerWidth >= 1200) return 5;
        if (window.innerWidth >= 768) return 3;
        return 2;
      }

function getMaxIndex() {
        return Math.max(0, cards.length - visibleCards);
      }

function getStepSize() {
        if (!cards[0]) return 0;
        const styles = getComputedStyle(track);
        const gap = parseFloat(styles.columnGap || styles.gap) || 0;
        return cards[0].getBoundingClientRect().width + gap;
      }

function createDots() {
        dotsContainer.replaceChildren();
        const totalPositions = getMaxIndex() + 1;

for (let index = 0; index < totalPositions; index += 1) {
          const dot = document.createElement("button");
          dot.type = "button";
          dot.className = "carousel-dot";
          dot.setAttribute("aria-label", `Show carousel position ${index + 1}`);
          dot.addEventListener("click", () => {
            goTo(index);
            restartAutoplay();
          });
          dotsContainer.appendChild(dot);
        }
      }

function updateDots() {
        Array.from(dotsContainer.children).forEach((dot, index) => {
          const active = index === currentIndex;
          dot.classList.toggle("is-active", active);
          dot.setAttribute("aria-current", active ? "true" : "false");
        });
      }

function updateStatus() {
        status.textContent = `${currentIndex + 1} / ${getMaxIndex() + 1}`;
      }

function updateAccessibleCards() {
        cards.forEach((card, index) => {
          const visible = index >= currentIndex && index < currentIndex + visibleCards;
          card.setAttribute("aria-hidden", visible ? "false" : "true");
        });
      }

function render(animate = true) {
        track.classList.toggle("no-transition", !animate || reducedMotion.matches);
        const offset = currentIndex * getStepSize();
        track.style.transform = `translate3d(${-offset}px, 0, 0)`;
        updateDots();
        updateStatus();
        updateAccessibleCards();
      }

function goTo(index, animate = true) {
        const maximum = getMaxIndex();
        currentIndex = Math.max(0, Math.min(index, maximum));
        render(animate);
      }

function next() {
        const maximum = getMaxIndex();
        goTo(currentIndex >= maximum ? 0 : currentIndex + 1);
      }

function previous() {
        const maximum = getMaxIndex();
        goTo(currentIndex <= 0 ? maximum : currentIndex - 1);
      }

function shouldPause() {
        return isPointerInside || isFocusInside || isDragging || document.hidden;
      }

function stopAutoplay() {
        if (autoplayTimer) {
          window.clearInterval(autoplayTimer);
          autoplayTimer = null;
        }
      }

function startAutoplay() {
        stopAutoplay();
        if (reducedMotion.matches || shouldPause()) return;
        autoplayTimer = window.setInterval(next, 4000);
      }

function restartAutoplay() {
        stopAutoplay();
        startAutoplay();
      }

previousButton.addEventListener("click", () => {
        previous();
        restartAutoplay();
      });

nextButton.addEventListener("click", () => {
        next();
        restartAutoplay();
      });

viewport.addEventListener("keydown", (event) => {
        if (event.key === "ArrowLeft") {
          event.preventDefault();
          previous();
          restartAutoplay();
        }

if (event.key === "ArrowRight") {
          event.preventDefault();
          next();
          restartAutoplay();
        }
      });

viewport.addEventListener("pointerenter", () => {
        isPointerInside = true;
        stopAutoplay();
      });

viewport.addEventListener("pointerleave", () => {
        isPointerInside = false;
        if (!isDragging) startAutoplay();
      });

viewport.addEventListener("focusin", () => {
        isFocusInside = true;
        stopAutoplay();
      });

viewport.addEventListener("focusout", (event) => {
        if (!viewport.contains(event.relatedTarget)) {
          isFocusInside = false;
          startAutoplay();
        }
      });

viewport.addEventListener("pointerdown", (event) => {
        isDragging = true;
        dragStartX = event.clientX;
        dragDeltaX = 0;
        viewport.classList.add("is-dragging");
        track.classList.add("no-transition");
        viewport.setPointerCapture(event.pointerId);
        stopAutoplay();
      });

viewport.addEventListener("pointermove", (event) => {
        if (!isDragging) return;
        dragDeltaX = event.clientX - dragStartX;
        const baseOffset = currentIndex * getStepSize();
        track.style.transform = `translate3d(${(-baseOffset + dragDeltaX)}px, 0, 0)`;
      });

function finishDrag(event) {
        if (!isDragging) return;
        isDragging = false;
        viewport.classList.remove("is-dragging");

if (viewport.hasPointerCapture(event.pointerId)) {
          viewport.releasePointerCapture(event.pointerId);
        }

const threshold = Math.min(70, getStepSize() * 0.22);

if (dragDeltaX < -threshold) {
          next();
        } else if (dragDeltaX > threshold) {
          previous();
        } else {
          render(true);
        }

dragDeltaX = 0;
        startAutoplay();
      }

viewport.addEventListener("pointerup", finishDrag);
      viewport.addEventListener("pointercancel", finishDrag);

document.addEventListener("visibilitychange", () => {
        if (document.hidden) {
          stopAutoplay();
        } else {
          startAutoplay();
        }
      });

reducedMotion.addEventListener("change", () => {
        render(false);
        restartAutoplay();
      });

let resizeFrame = null;
      window.addEventListener("resize", () => {
        if (resizeFrame) cancelAnimationFrame(resizeFrame);
        resizeFrame = requestAnimationFrame(() => {
          const nextVisibleCards = getVisibleCards();

if (nextVisibleCards !== visibleCards) {
            visibleCards = nextVisibleCards;
            currentIndex = Math.min(currentIndex, getMaxIndex());
            createDots();
          }

render(false);
        });
      });

createDots();
      render(false);
      startAutoplay();
    });

Seller Stats Section

HTML

CSS

:root {
      --ink: #14213d;
      --saffron: #f97316;
      --leaf: #177245;
      --cream: #fff8ed;
      --line: rgba(20, 33, 61, 0.11);
    }

* {
      box-sizing: border-box;
    }

html {
      scroll-behavior: smooth;
    }

body {
      width: 100%;
      margin: 0;
      font-family: "DM Sans", sans-serif;
      color: var(--ink);
    }

.seller-shell {
      position: relative;
      width: 100%;
      min-height: calc(100 * min(var(--vh, 1vh), 1vh));
      display: flex;
      align-items: center;
      overflow: hidden;
      isolation: isolate;
    }

.seller-shell::before {
      content: "";
      position: absolute;
      z-index: -2;
      width: 34rem;
      height: 34rem;
      top: -15rem;
      right: -8rem;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(249, 115, 22, 0.20), rgba(249, 115, 22, 0));
      pointer-events: none;
    }

.seller-shell::after {
      content: "";
      position: absolute;
      z-index: -2;
      width: 30rem;
      height: 30rem;
      left: -14rem;
      bottom: -17rem;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(23, 114, 69, 0.16), rgba(23, 114, 69, 0));
      pointer-events: none;
    }

.section-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
      gap: clamp(2.5rem, 5vw, 6.5rem);
      align-items: center;
    }

.photo-frame {
      position: relative;
      min-height: 610px;
      border-radius: 2.2rem 2.2rem 7.5rem 2.2rem;
      overflow: hidden;
      box-shadow: 0 32px 80px rgba(20, 33, 61, 0.18);
      opacity: 0;
      transform: translateX(-26px) scale(0.98);
      animation: reveal-left 0.85s cubic-bezier(.2,.8,.2,1) 0.08s forwards;
    }

.photo-frame::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(12, 29, 25, 0.56), transparent 52%);
      pointer-events: none;
    }

.seller-photo {
      width: 100%;
      height: 100%;
      min-height: 610px;
      object-fit: cover;
      object-position: center;
      transition: transform 700ms cubic-bezier(.2,.8,.2,1);
    }

.photo-frame:hover .seller-photo {
      transform: scale(1.035);
    }

.community-badge {
      position: absolute;
      z-index: 2;
      left: clamp(1rem, 3vw, 2rem);
      right: clamp(1rem, 3vw, 2rem);
      bottom: clamp(1rem, 3vw, 2rem);
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding: 1rem 1.15rem;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 1.1rem;
      backdrop-filter: blur(14px);
      box-shadow: 0 14px 34px rgba(8, 20, 18, 0.24);
    }

.badge-icon {
      display: grid;
      flex: 0 0 auto;
      width: 2.8rem;
      height: 2.8rem;
      place-items: center;
      border-radius: 999px;
      background: #f97316;
      color: white;
    }

.content-panel {
      opacity: 0;
      transform: translateY(24px);
      animation: reveal-up 0.85s cubic-bezier(.2,.8,.2,1) 0.22s forwards;
    }

.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.5rem 0.8rem;
      border-radius: 999px;
      border: 1px solid rgba(249, 115, 22, 0.24);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.48);
    }

.eyebrow-dot {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 999px;
      background: #f97316;
      box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.12);
    }

.display-heading {
      margin-top: 1.25rem;
      max-width: 780px;
      font-family: "Fraunces", serif;
      line-height: 1.02;
      letter-spacing: -0.045em;
      text-wrap: balance;
    }

.accent-swoop {
      position: relative;
      display: inline-block;
      color: #e85d04;
    }

.accent-swoop::after {
      content: "";
      position: absolute;
      left: 2%;
      right: 1%;
      bottom: -0.12em;
      height: 0.14em;
      border-radius: 999px;
      background: #ffb703;
      transform: rotate(-1.5deg);
      opacity: 0.8;
    }

.support-copy {
      max-width: 650px;
      margin-top: 1.5rem;
      line-height: 1.75;
    }

.stats-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      margin-top: 2rem;
    }

.stat-card {
      position: relative;
      overflow: hidden;
      min-height: 178px;
      padding: 1.5rem;
      border: 1px solid var(--line);
      border-radius: 1.35rem;
      box-shadow: 0 16px 36px rgba(20, 33, 61, 0.08);
      transition: transform 220ms ease, box-shadow 220ms ease;
    }

.stat-card::after {
      content: "";
      position: absolute;
      width: 7rem;
      height: 7rem;
      right: -3rem;
      bottom: -3.5rem;
      border-radius: 999px;
      border: 1.3rem solid rgba(249, 115, 22, 0.08);
    }

.stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 22px 44px rgba(20, 33, 61, 0.12);
    }

.stat-icon {
      width: 2.35rem;
      height: 2.35rem;
      padding: 0.55rem;
      border-radius: 0.75rem;
      background: rgba(249, 115, 22, 0.11);
      color: #d9480f;
    }

.stat-value {
      display: flex;
      align-items: baseline;
      margin-top: 0.95rem;
      font-family: "Fraunces", serif;
      font-variant-numeric: tabular-nums;
      line-height: 1;
      letter-spacing: -0.045em;
    }

.stat-label {
      display: block;
      margin-top: 0.55rem;
      line-height: 1.4;
    }

.cta-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem 1.25rem;
      margin-top: 2rem;
    }

.sell-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.7rem;
      min-height: 3.5rem;
      padding: 0.9rem 1.35rem;
      border-radius: 1rem;
      box-shadow: 0 15px 30px rgba(232, 93, 4, 0.24);
      text-decoration: none;
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

.sell-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 38px rgba(232, 93, 4, 0.32);
    }

.sell-button:focus-visible {
      outline: 3px solid #14213d;
      outline-offset: 4px;
    }

.cta-note {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
    }

@keyframes reveal-left {
      to {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }

@keyframes reveal-up {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

@media (max-width: 1100px) {
      .seller-shell {
        min-height: auto;
      }

.section-grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 2.5rem;
      }

.photo-frame,
      .seller-photo {
        min-height: 540px;
      }
    }

@media (max-width: 820px) {
      .section-grid {
        grid-template-columns: 1fr;
      }

.photo-frame,
      .seller-photo {
        min-height: 440px;
      }

.photo-frame {
        border-radius: 1.8rem 1.8rem 5rem 1.8rem;
      }

.content-panel {
        max-width: 720px;
      }
    }

@media (max-width: 560px) {
      .photo-frame,
      .seller-photo {
        min-height: 350px;
      }

.photo-frame {
        border-radius: 1.4rem 1.4rem 3.5rem 1.4rem;
      }

.community-badge {
        padding: 0.8rem;
      }

.stats-grid {
        grid-template-columns: 1fr;
      }

.stat-card {
        min-height: 150px;
      }

.sell-button {
        width: 100%;
      }

.cta-row {
        align-items: stretch;
      }
    }

@media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

.photo-frame,
      .content-panel {
        opacity: 1;
        transform: none;
        animation: none;
      }

.seller-photo,
      .stat-card,
      .sell-button {
        transition: none;
      }
    }

JavaScript

const counters = document.querySelectorAll("[data-target]");
      let countersStarted = false;

const setFinalValues = () => {
        counters.forEach((counter) => {
          const target = Number(counter.dataset.target);
          counter.textContent = target.toLocaleString("en-IN");
        });
      };

const animateCounters = () => {
        if (countersStarted) return;
        countersStarted = true;

if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
          setFinalValues();
          return;
        }

counters.forEach((counter) => {
          const target = Number(counter.dataset.target);
          const duration = 1700;
          const startTime = performance.now();

const update = (currentTime) => {
            const elapsed = Math.min((currentTime - startTime) / duration, 1);
            const eased = 1 - Math.pow(1 - elapsed, 4);
            const value = Math.floor(target * eased);
            counter.textContent = value.toLocaleString("en-IN");

if (elapsed < 1) {
              requestAnimationFrame(update);
            } else {
              counter.textContent = target.toLocaleString("en-IN");
            }
          };

requestAnimationFrame(update);
        });
      };

const stats = document.getElementById("seller-stats");

if ("IntersectionObserver" in window) {
        const observer = new IntersectionObserver((entries) => {
          if (entries.some((entry) => entry.isIntersecting)) {
            animateCounters();
            observer.disconnect();
          }
        }, { threshold: 0.35 });

observer.observe(stats);
      } else {
        animateCounters();
      }
    });
  </script>