Thinkport

Referenzen

Beispiel Testimonials

"Eine fantastische Komponente, die sich perfekt in unser Design einfügt."

John Doe

Product Manager

"Einfach zu implementieren und sehr flexibel in der Anpassung."

Jane Smith

Lead Developer

TestimonialsSlider

Testimonial Slider

Die TestimonialsSlider-Komponente ermöglicht es, Testimonials in einem automatisch rotierenden Slider zu präsentieren. Die Komponente unterstützt Bilder, Text und Autorendetails und bietet eine intuitive Navigation durch Punkte.

Codebeispiel

<TestimonialsSlider
  title="Was unsere Kunden sagen"
  tagline="Testimonials"
  interval={5000}
  isDark={false}
  testimonials={[
    {
      testimonial: "Ein hervorragendes Produkt, das unsere Erwartungen übertroffen hat.",
      name: "Max Mustermann",
      job: "CEO, Example GmbH",
      image: {
        src: "~/assets/images/personen/anonymous-male.png",
        alt: "Max Mustermann"
      }
    },
    {
      testimonial: "Ausgezeichnete Zusammenarbeit und professionelle Umsetzung.",
      name: "Erika Musterfrau",
      job: "CTO, Sample AG",
      image: {
        src: "~/assets/images/personen/anonymous-female.png",
        alt: "Erika Musterfrau"
      }
    }
  ]}
  classes={{
    container: "max-w-6xl mx-auto",
    title: "text-center"
  }}
/>

Parameter

Bezeichner	Typ	Beschreibung	Default
title	string	Titel der Komponente	-
tagline	string	Tagline über dem Titel	-
testimonials	array	Array von Testimonial-Objekten mit testimonial (Text), name, job und image (src & alt)	[]
interval	number	Zeitintervall in Millisekunden zwischen Slide-Wechseln	5000
isDark	boolean	Aktiviert das dunkle Design	false
classes	object	Zusätzliche CSS-Klassen für Container und Titel	{}

Wiki-Dokumentation Quellcode

Testimonials

Kundenstimmen

"Hervorragende Zusammenarbeit und schnelle Umsetzung."

Thomas Schmidt

Geschäftsführer, Beispiel AG

"Professionelle Beratung und exzellente Ergebnisse."

Maria Weber

CTO, Muster GmbH

Standard Slider

Standard-Konfiguration mit hellem Design und Standard-Intervall.

Codebeispiel

<TestimonialsSlider
  title="Kundenstimmen"
  tagline="Testimonials"
  testimonials={[
    {
      testimonial: "Hervorragende Zusammenarbeit und schnelle Umsetzung.",
      name: "Thomas Schmidt",
      job: "Geschäftsführer, Beispiel AG",
      image: {
        src: "~/assets/images/personen/anonymous-male.png",
        alt: "Thomas Schmidt"
      }
    },
    {
      testimonial: "Professionelle Beratung und exzellente Ergebnisse.",
      name: "Maria Weber",
      job: "CTO, Muster GmbH",
      image: {
        src: "~/assets/images/personen/anonymous-female.png",
        alt: "Maria Weber"
      }
    }
  ]}
/>

Wiki-Dokumentation Quellcode

Testimonials

Kundenstimmen

"Hervorragende Zusammenarbeit und schnelle Umsetzung."

Thomas Schmidt

Geschäftsführer, Beispiel AG

"Professionelle Beratung und exzellente Ergebnisse."

Maria Weber

CTO, Muster GmbH

Dunkles Design

Slider mit aktiviertem dunklem Design für dunkle Hintergründe.

Codebeispiel

<TestimonialsSlider
  title="Kundenstimmen"
  tagline="Testimonials"
  testimonials={testimonials}
  isDark={true}
/>

Wiki-Dokumentation Quellcode

Testimonials

Kundenstimmen

"Hervorragende Zusammenarbeit und schnelle Umsetzung."

Thomas Schmidt

Geschäftsführer, Beispiel AG

"Professionelle Beratung und exzellente Ergebnisse."

Maria Weber

CTO, Muster GmbH

Angepasstes Intervall

Slider mit längerem Intervall (7 Sekunden) für längere Lesezeiten.

Codebeispiel

<TestimonialsSlider
  title="Kundenstimmen"
  tagline="Testimonials"
  testimonials={testimonials}
  interval={7000}
/>

Wiki-Dokumentation Quellcode