Customer Stories

The Customer Stories component is a compact and interactive customer stories, ideal for responsive navigation. It offers a toggleable design with smooth animations, making it a versatile choice for modern web applications.

Customer stories

“Step Events' s expertise transformed my vision into success!”

Kabir Shah

Founder of Chipsland

Facts & numbers

91%

Clients recommend our design services.

Customer stories

Their creativity and attention to detail transformed our brand completely!

Customer stories

“Step Events brought our ideas to life with exceptional creativity and precision, exceeding expectations.”

Kabir Shah

Founder of Chipsland

Usage

Follow the steps below to add the Customer Stories Component to your project.

Add the import statement for the component

import {ImageBackgroundCard, StatsCard, ImageContentCard, TextContentCard} from"@/components/elixir-ui/customer-stories";

Import the component in your project and use it

<section className="flex flex-col justify-center gap-10 md:gap-20">
  <div className="max-w-6xl my-10 mx-auto flex flex-col gap-6">
    <div className="flex flex-col md:flex-row gap-6 ">

      {/* ---------------------------------------------------------> Image Background Card */}
      <ImageBackgroundCard
        subtitle="Customer stories"
        description="Step Events&apos;s expertise transformed my vision into success!"
        title="Kabir Shah"
        statLabel="Founder of Chipsland"
        bgImage="/components/background-user-image.jpg"
      />

      {/* ---------------------------------------------------------> Stats Card */}
      <StatsCard
        subtitle="Facts & numbers"
        statValue="91%"
        description="Clients recommend our design services."
      />
    </div>

    <div className="flex flex-col md:flex-row gap-6 h-full">

      {/* ---------------------------------------------------------> Image Content Card */}
      <ImageContentCard
        subtitle="Customer stories"
        description="Their creativity and attention to detail transformed our brand completely!"
        image="/components/creativity-banner-image.jpg"
      />

      {/* ---------------------------------------------------------> Text Content Card */}
      <TextContentCard
        subtitle="Customer stories"
        description="Step Events brought our ideas to life with exceptional creativity and precision, exceeding expectations."
        title="Kabir Shah"
        statLabel="Founder of Chipsland"
      />

    </div>
  </div>

</section>

Props

Prop	Type	Default	Description
subtitle	string	-	The subtitle of the card
description	string	-	The description of the card
title	string	-	The title of the card
statLabel	string	-	The stat label of the card
image	string	-	The image of the card
bgImage	string	-	The background image of the card
statValue	string	-	The stat value of the card