<Background isDark={false}>
  <div class="relative z-10">
    <!-- Ihr Inhalt hier -->
  </div>
</Background>

<DListItem dt="Begriff">
  <p>Dies ist die Beschreibung des Begriffs. Sie kann beliebigen Inhalt enthalten.</p>
</DListItem>

<Headline title="Überschrift" subtitle="Untertitel" tagline="Tagline" />

<HeroText title="Willkommen bei Thinkport" subtitle="Ihr Partner für digitale Transformation" />

<Hero title="Title" subtitle="Subtitle" tagline="Tagline" />

<Hero2
  title="Title"
  subtitle="Subtitle"
  tagline="Tagline"
  image={{
    src: 'https://placehold.co/800x600.png',
    alt: 'Digitale Transformation'
  }}
/>

<BlogLatestPosts
      title="Neueste Blogartikel"
      information="Entdecken Sie unsere aktuellsten Beiträge"
      linkText="Alle Artikel anzeigen"
      linkUrl="/blog"
      count={4}
      isDark={false}
      classes={{
        container: 'custom-container-class'
      }}
      bg={<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>}
    />

<BlogHighlightedPosts
      title="Ausgewählte Artikel"
      information="Entdecken Sie unsere wichtigsten Beiträge"
      linkText="Alle Artikel anzeigen"
      linkUrl="/blog"
      postIds={['article-1', 'article-2', 'article-3']}
      isDark={false}
      classes={{
        container: 'custom-container-class'
      }}
      bg={<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>}
    />

<Brands
  title="Unsere Partner"
  subtitle="Wir arbeiten mit führenden Unternehmen zusammen"
  tagline="Partnerschaften"
  icons={[
    { name: 'tabler:brand-linkedin', title: 'LinkedIn', description: 'LinkedIn - Professionelles Netzwerk' },
    { name: 'tabler:brand-azure', title: 'Microsoft Azure', description: 'Microsoft Azure - Cloud-Plattform' },
    { name: 'tabler:brand-google', description: 'Google - Technologie-Gigant' }
  ]}
  images={[ ... ]}
/>

<CallToAction
      title="Bereit für den nächsten Schritt?"
      subtitle="Kontaktieren Sie uns für eine kostenlose Beratung"
      tagline="Kontakt"
      actions={[
        {
          variant: 'primary',
          text: 'Jetzt Kontakt aufnehmen',
          href: '/kontakt',
          target: '_blank'
        },
        {
          variant: 'secondary',
          text: 'Mehr erfahren',
          href: '/ueber-uns'
        }
      ]}
      isDark={false}
      classes={{
        container: 'custom-container-class'
      }}
      bg={<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>}
    />

<CallToActionMember
      title="Unsere Expertin"
      subtitle="Kontaktieren Sie uns direkt"
      slug="annemarie"
      description="Unser Expertin steht Ihnen für Ihre Fragen zur Verfügung."
      callToAction={{
        variant: 'primary',
        text: 'Kontakt aufnehmen',
        href: '/kontakt'
      }}
      isDark={false}
    />

<Certificates
      title="Unsere Zertifikate"
      subtitle="Professionelle Qualifikationen"
      personSlug="andreas-engelhardt"
    />

<Cite
      title="Zitat von unserem Experten"
      subtitle="Ein inspirierendes Zitat"
      slug="annemarie"
      isDark={false}
      classes={{
        container: 'custom-container-class'
      }}
      bg={<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>}
    >
      "Die Digitalisierung ist keine Option mehr, sondern eine Notwendigkeit für jedes Unternehmen, das langfristig erfolgreich sein möchte."
    </Cite>

<Content
      title="Unsere Leistungen"
      subtitle="Entdecken Sie unsere umfassenden Lösungen"
      tagline="Leistungen"
      items={[
        {
          title: 'Digitale Transformation',
          description: 'Wir unterstützen Sie bei der digitalen Transformation Ihres Unternehmens mit maßgeschneiderten Lösungen.',
          icon: 'tabler:device-laptop'
        },
        {
          title: 'Cloud Services',
          description: 'Professionelle Cloud-Lösungen für maximale Flexibilität und Skalierbarkeit.',
          icon: 'tabler:cloud'
        }
      ]}
      isReversed={false}
      isDark={false}
      classes={{
        container: 'custom-container-class'
      }}
    >
      <Fragment slot="image">
        <img src="https://placehold.co/800x600.png" alt="Digitale Transformation" class="mx-auto w-full rounded-lg bg-gray-500 shadow" />
      </Fragment>
      <Fragment slot="content">
        <p class="text-lg text-gray-600 dark:text-gray-300">
          Unsere Experten stehen Ihnen mit Rat und Tat zur Seite, um Ihr Unternehmen erfolgreich in die digitale Zukunft zu führen.
        </p>
      </Fragment>
      <Fragment slot="bg">
        <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
      </Fragment>
    </Content>

<Features2
      title="Unsere Features"
      subtitle="Entdecken Sie unsere wichtigsten Funktionen"
      tagline="Features"
      items={[
        {
          title: 'Benutzerfreundlichkeit',
          description: 'Intuitive Bedienung für maximale Effizienz',
          icon: 'tabler:user-check'
        },
        {
          title: 'Sicherheit',
          description: 'Höchste Sicherheitsstandards für Ihre Daten',
          icon: 'tabler:shield-check'
        }
      ]}
      isDark={false}
      classes={{
        container: 'custom-container-class'
      }}
      bg={<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>}
    />

<Features3
      title="Premium Features"
      subtitle="Entdecken Sie unsere exklusiven Funktionen"
      tagline="Premium"
      items={[
        {
          title: '24/7 Support',
          description: 'Rund um die Uhr Unterstützung durch unsere Experten',
          icon: 'tabler:headset',
          image: {
            src: 'https://placehold.co/800x600.png',
            alt: 'Support Team'
          },
          action: {
            text: 'Mehr erfahren',
            href: '/support'
          }
        }
      ]}
      isDark={false}
      classes={{
        container: 'custom-container-class'
      }}
      bg={<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>}
    />

<Form
  inputs={[
        {
          type: 'text',
          name: 'name',
          label: 'Name',
      placeholder: 'Ihr Name'
        },
        {
          type: 'email',
          name: 'email',
          label: 'E-Mail',
      placeholder: 'Ihre E-Mail-Adresse'
    }
  ]}
  textarea={{
    label: 'Nachricht',
    name: 'message',
    placeholder: 'Ihre Nachricht an uns...',
    rows: 4
  }}
  disclaimer={{ useStandardPrivacy: true, required: true }}
  button="Nachricht senden"
  description="Wir werden uns innerhalb von 24 Stunden bei Ihnen melden."
/>

<FormContact
  title="Kontakt"
  subtitle="Lass uns über Ihr Projekt sprechen"
  tagline="Kontakt aufnehmen"
  inputs={[
    { type: 'text', name: 'name', label: 'Name', placeholder: 'Ihr Name', required: true },
    { type: 'email', name: 'email', label: 'E-Mail', placeholder: 'ihre.email@example.com', required: true },
    { type: 'tel', name: 'phone', label: 'Telefon', placeholder: '+49 123 456789' }
  ]}
  textarea={{ label: 'Nachricht', name: 'message', placeholder: 'Beschreiben Sie Ihr Anliegen...', rows: 6, required: true }}
  disclaimer={{ useStandardPrivacy: true, required: true }}
  button="Absenden"
  description="Füllen Sie das Formular aus und wir melden uns innerhalb von 24 Stunden bei Ihnen."
  formName="contact"
/>

<FormWebinarRegistration
  webinar={{
    id: '1',
    slug: 'example-webinar',
    title: 'Cloud-Architektur Best Practices',
    duration: '60 Minuten',
    liveDate: '2024-01-15',
    liveTime: '14:00',
    attachments: [{ type: 'url', downloadUrl: 'https://example.com/recording', name: 'Aufzeichnung ansehen' }],
    keyTakeaways: ['Takeaway 1', 'Takeaway 2']
  }}
/>

<Timeline
  items={[
    {
      title: "Gründung",
      description: "Thinkport wird als IT-Beratungsunternehmen gegründet.",
      icon: "tabler:building-store",
      classes: {
        panel: "mb-8",
        title: "text-primary"
      }
    },
    {
      title: "Erste Kundenprojekte",
      description: "Erfolgreiche Umsetzung erster Digitalisierungsprojekte für mittelständische Unternehmen.",
      icon: "tabler:rocket"
    },
    {
      title: "Expansion",
      description: "Eröffnung neuer Standorte in Deutschland und Europa.",
      icon: "tabler:world"
    }
  ]}
  defaultIcon="tabler:circle"
  classes={{
    container: "max-w-3xl mx-auto",
    panel: "p-4",
    title: "text-xl font-bold",
    description: "text-gray-600 dark:text-gray-300"
  }}
/>

<TeaserContent
  title="Unsere Whitepapers"
  subtitle="Entdecken Sie unsere Fachartikel"
  information="Wertvolle Einblicke und Fachwissen"
  count={4}
  tags={['digital', 'transformation', 'cloud']}
  categories={['finance']}
  contentTypes={['page', 'post']}
  showViewAllLink={true}
  excludeIds={['cloud-end-to-end', 'daten-und-ai']}
/>

<TeaserContentHighlighted
  title="Kompetenzen und Lösungen"
  subtitle="Unsere Expert:innen entwickeln ganzheitliche Strategien und Lösungen"
  information="Entdecken Sie unsere Kernkompetenzen"
  pageUrls={[
    'cloud-end-to-end',
    'daten-und-ai',
    'exitready-360',
    'we-save-your-money'
  ]}
  isDark={false}
  classes={{
    container: "max-w-6xl mx-auto"
  }}
/>

<Pricing
      title="Unsere Preise"
      subtitle="Wählen Sie das passende Paket"
      prices={[
        {
          title: 'Basic',
          subtitle: 'Einfache Version',
          price: '49',
          period: 'monatlich',
          items: [{
            title: '5 Benutzer',
            description: '10 GB Speicher',
            icon: 'tabler:users',
            callToAction: {
              text: 'Jetzt starten',
              href: '/basic',
            },
            image: {
              src: 'https://i.pravatar.cc/300?id=47',
              alt: 'Alex Weber',
            },
          },
          {
            title: 'E-Mail Support',
            icon: 'tabler:email',
          },

        ],
          callToAction: {
            text: 'Jetzt starten',
            href: '/basic',
          },
        },
        {
          title: 'Pro',
          subtitle: 'Vollfunktionalität',
          price: '99',
          hasRibbon: true,
          ribbonTitle: 'Bestseller',
          period: 'monatlich',
            items: [{
            title: '20 Benutzer',
            description: '50 GB Speicher',
            icon: 'tabler:users',
          },
          {
            title: 'Prioritäts-Support',
            icon: 'tabler:support',
          },
          ],
          callToAction: {
            text: 'Jetzt starten',
            href: '/pro',
          },
        },
        {
          title: 'Enterprise',
          subtitle: 'Premium-Lösung',
          price: '199',
          period: 'monatlich',
          items: [{
            title: 'Unbegrenzte Benutzer',
            description: 'Unbegrenzter Speicher',
            icon: 'tabler:users',
          },
          {
            title: 'Prioritäts-Support',
            icon: 'tabler:support',
          },
          ],
          callToAction: {
            text: 'Jetzt starten',
            href: '/enterprise',
          },
        }
      ]}
    />

<Stats
  title="Unsere Erfolge"
  subtitle="Zahlen sprechen für sich"
  tagline="Statistiken"
  stats={[
    {
      value: "100+",
      label: "Kunden"
    },
    {
      value: "50+",
      label: "Projekte"
    },
    {
      value: "10+",
      label: "Jahre Erfahrung"
    }
  ]}
  isDark={false}
  classes={{
    container: "max-w-6xl mx-auto"
  }}
/>

<Steps
      title="Unser Prozess"
      subtitle="So arbeiten wir"
      tagline="Prozess"
      steps={[
        {
          title: "Analyse",
          description: "Wir analysieren Ihre Anforderungen und Ziele.",
          icon: "tabler:search"
        },
        {
          title: "Konzeption",
          description: "Wir entwickeln ein maßgeschneidertes Konzept.",
          icon: "tabler:bulb"
        },
        {
          title: "Umsetzung",
          description: "Wir setzen das Konzept professionell um.",
          icon: "tabler:rocket"
        }
      ]}
      isDark={false}
      classes={{
        container: "max-w-6xl mx-auto"
      }}
    />

<Steps2
  title="Unser Ansatz"
  subtitle="So erreichen wir Ihre Ziele"
  tagline="Ansatz"
  steps={[
    {
      title: "Beratung",
      description: "Wir beraten Sie umfassend zu Ihren Möglichkeiten.",
      icon: "tabler:bulb",
      image: {
        src: "https://placehold.co/800x600.png",
        alt: "Beratung"
      },
      action: {
        text: "Mehr erfahren",
        href: "/beratung"
      }
    }
  ]}
  isDark={false}
  classes={{
    container: "max-w-6xl mx-auto"
  }}
/>

<Button
  variant="primary"
  text="Klicken Sie hier"
  icon="tabler:arrow-right"
  type="button"
/>

<Button
  variant="secondary"
  href="/kontakt"
  target="_blank"
>
  Kontakt aufnehmen
</Button>

<pre class="language-typescript">
function example() {
  console.log('Hello World');
}
</pre>

<Image
  src="/path/to/image.jpg"
  alt="Beschreibung des Bildes"
  width={800}
  height={600}
  class="rounded-lg shadow"
  loading="lazy"
/>

<ItemGrid
  items={[
    {
      title: 'Feature 1',
      description: 'Beschreibung des ersten Features',
      icon: 'tabler:star'
    },
    {
      title: 'Feature 2',
      description: 'Beschreibung des zweiten Features',
      icon: 'tabler:rocket'
    }
  ]}
  columns={3}
/>

<ItemGrid2
  items={[
    {
      title: 'Service 1',
      description: 'Beschreibung des ersten Services',
      icon: 'tabler:bulb',
      image: {
        src: '/path/to/image.jpg',
        alt: 'Service 1'
      }
    }
  ]}
  columns={4}
/>

<Testimonials
  title="Was unsere Kunden sagen"
  subtitle="Erfahrungsberichte"
  testimonials={[
    {
      testimonial: "Ausgezeichneter Service!",
      name: "Alex Weber",
      job: "CEO, Firma GmbH",
      image: {
        src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
        alt: "Alex Weber"
      }
    }
  ]}
/>

<Timeline
  items={[
    {
      title: "Ereignis 1",
      description: "Beschreibung des ersten Ereignisses",
      icon: "tabler:flag"
    },
    {
      title: "Ereignis 2",
      description: "Beschreibung des zweiten Ereignisses",
      icon: "tabler:star"
    }
  ]}
  defaultIcon="tabler:circle"
/>

<Tooltip text="Dies ist ein Tooltip!" title="Tooltip-Titel">
  <button class="px-4 py-2 bg-primary text-white rounded">Mit Tooltip</button>
</Tooltip>

<WidgetWrapper
  id="custom-section"
  containerClass="max-w-6xl mx-auto"
  bg={<div class="absolute inset-0 bg-blue-50"></div>}
>
  <div class="text-center">
    <h2>Inhalt</h2>
    <p>Beschreibung</p>
  </div>
</WidgetWrapper>