Komponenten

Textformatierung

---

Fettgedruckter Text

Um Text fett zu formatieren, verwenden Sie ** oder __ um das Wort oder den Satz:
Beispiel: Dieser Text ist fett oder Dieser Text ist fett

Kursiver Text

Um Text kursiv zu formatieren, verwenden Sie * oder _ um das Wort oder den Satz:
Beispiel: Dieser Text ist kursiv oder Dieser Text ist kursiv

Unterstrichener Text

Um Text zu unterstreichen, verwenden Sie HTML <u>-Tags:

Beispiel:

<u>Dieser Text ist unterstrichen</u>

Ergebnis:

Dieser Text ist unterstrichen

Durchgestrichen

Um Text durchzustreichen, verwenden Sie ~~ um das Wort oder den Satz:
Beispiel: Dieser Text ist durchgestrichen

Button

---

Dieser Button hat eine Hover-Animation mit kreativer Füllung

<CustomButton
  hoverEffect="creative-fill"
  class="effect-color-accent"
  label="Kreative Füllung"
  url="/"
/>

Dieser Button hat eine magnetische Hover-Animation

<CustomButton hoverEffect="magnetic" label="Magnetisch" url="/" />

Dieser Button hat eine Textwechsel-Hover-Animation

<CustomButton hoverEffect="text-flip" label="Textwechsel" url="/" />

Dieser Button hat eine kombinierte magnetische Hover-Animation mit Textwechsel

<CustomButton
  hoverEffect="magnetic-text-flip"
  label="Magnetisch mit Textwechsel"
  url="/"
/>

Dieser Button hat eine Hover-Animation mit kreativer Füllung

Kreative Füllung

Dieser Button hat eine magnetische Hover-Animation

Magnetisch

Dieser Button hat eine Textwechsel-Hover-Animation

Textwechsel

Dieser Button hat eine kombinierte magnetische Hover-Animation mit Textwechsel

Magnetisch mit Textwechsel

---

Button-Varianten

Jede Button-Farbe kann angepasst werden, indem class=“btn-accent” oder class=“btn-light” hinzugefügt wird

<CustomButton label="Beispiel-Button" url="/" />
<CustomButton class="btn-accent" label="Beispiel-Button" url="/" />
<CustomButton
  variant="outline"
  label="Mit externem Link"
  url="https://astro.build"
/>
<CustomButton variant="text" label="Beispiel-Button" url="/" />

Beispiel-Button Mit externem Link Beispiel-Button

Accordion

---

<Accordion label="Accordion-Beispiel 01" group="accordion-01" expanded="true">

Wir bieten ein breites Spektrum an Dienstleistungen, darunter Webentwicklung, Branding und digitales Marketing, um Unternehmen beim Wachstum und Erfolg zu unterstützen.

- **Essentials**: Fokussierter Workshop zur Identifikation von Kernwerten und USP.
- **Growth**: Ausführlicher Workshop zur Etablierung einer klaren und differenzierten Markenidentität.
- **Enterprise**: Umfassende Markenpositionierungsstrategie, die alle Aspekte Ihrer Marke abdeckt.

</Accordion>

<Accordion label="Accordion-Beispiel 02" group="accordion-01" expanded="false">

Wir bieten ein breites Spektrum an Dienstleistungen, darunter Webentwicklung, Branding und digitales Marketing, um Unternehmen beim Wachstum und Erfolg zu unterstützen.

- **Essentials**: Fokussierter Workshop zur Identifikation von Kernwerten und USP.
- **Growth**: Ausführlicher Workshop zur Etablierung einer klaren und differenzierten Markenidentität.
- **Enterprise**: Umfassende Markenpositionierungsstrategie, die alle Aspekte Ihrer Marke abdeckt.

</Accordion>

---

<Accordion label="Accordion-Beispiel 03" group="accordion-01" expanded="false">

Wir bieten ein breites Spektrum an Dienstleistungen, darunter Webentwicklung, Branding und digitales Marketing, um Unternehmen beim Wachstum und Erfolg zu unterstützen.

- **Essentials**: Fokussierter Workshop zur Identifikation von Kernwerten und USP.
- **Growth**: Ausführlicher Workshop zur Etablierung einer klaren und differenzierten Markenidentität.
- **Enterprise**: Umfassende Markenpositionierungsstrategie, die alle Aspekte Ihrer Marke abdeckt.

</Accordion>

---

Tab

---

<Tabs>
  <Tab name="Überblick">
    **Wie können wir Ihnen helfen?** Wir bieten persönliche Beratungen, um Sie
    bei der Erreichung Ihrer persönlichen und beruflichen Ziele zu unterstützen.
    Wählen Sie einen Tab, um unsere Leistungen zu erkunden. - Persönliches
    Coaching - Karriereberatung - Konfliktlösung - Lebensberatung
  </Tab>

  <Tab name="Coaching">
    **Persönliches Coaching: Entfalten Sie Ihr Potenzial** Erhalten Sie
    individuelles Coaching, um Herausforderungen zu meistern und bedeutungsvolle
    Ziele zu setzen. Unsere Schwerpunkte: - Selbstvertrauen aufbauen -
    Emotionale Intelligenz - Prokrastination überwinden
  </Tab>
</Tabs>

YouTube-Video

---

<VideoInline src="" provider="youtube" />

Benutzerdefiniertes Video

---

<VideoInline
  src="/videos/test-video.mp4"
  provider="html5"
  poster="/images/video-thumbnail.jpg"
/>

Hinweis

---

<Notice type="info" title="Information">
  Dies ist eine Informationsmeldung.
</Notice>

<Notice type="warning">Dies ist eine Warnmeldung ohne Titel.</Notice>

<Notice type="success" title="Erfolg!">
  Ihre Änderungen wurden erfolgreich gespeichert.
</Notice>

<Notice type="error" title="Fehler!">
  Etwas ist schiefgelaufen. Bitte versuchen Sie es erneut.
</Notice>

Blockzitat

---

Um ein Blockzitat zu erstellen, beginnen Sie die Zeile mit einem >:
Beispiel:

Dies ist ein Blockzitat.
Es erstreckt sich über mehrere Zeilen.

Autor

Code

---

Um Inline-Code zu formatieren, verwenden Sie Backticks (`):
Beispiel: Dies ist Inline-Code

Für mehrzeilige Codeblöcke verwenden Sie dreifache Backticks (```):
Beispiel:

---
import Base from "@/layouts/Base.astro";
import BenefitsSection from "@/components/sections/BenefitsSection.astro";
import { getEntryCTM } from "@/lib/contentParser.astro";
import { generatePaths } from "@/lib/utils/i18nUtils";
import Team from "@/components/sections/Team.astro";
import Location from "@/components/sections/Location.astro";
import HomeBanner from "@/components/sections/HomeHero.astro";
import Features from "@/components/sections/FeaturesSection.astro";
import HowItWorks from "@/components/sections/HowItWorks.astro";
import CallToAction from "@/components/sections/CallToAction.astro";
import PricingSection from "@/components/sections/PricingSection.astro";
import IntegrationSection from "@/components/sections/IntegrationSection.astro";
import TestimonialSection from "@/components/sections/TestimonialSection.astro";
import BlogSection from "@/components/sections/BlogSection.astro";

export function getStaticPaths() {
  return generatePaths();
}

const homepage = await getEntryCTM("homepage", "-index", Astro.currentLocale);
---

<Base {...homepage.data}>
  <HomeBanner />
  <Features />
  <HowItWorks />
  <Team />
  <BenefitsSection />
  <Location />
  <PricingSection />
  <TestimonialSection />
  <BlogSection />
  <IntegrationSection />
  <CallToAction />
</Base>

Horizontale Linie

---

Um eine horizontale Linie zu erstellen, verwenden Sie drei oder mehr Bindestriche (---), Sternchen (***) oder Unterstriche (___) in einer neuen Zeile:
Beispiel:

---

Überschriften

---

Erstellen Sie Überschriften, indem Sie #-Symbole vor Ihren Text setzen. Fügen Sie benutzerdefinierte Klassen mit eckigen Klammern [.class-name] hinzu.
Beispiel:

# Überschrift 1 [.custom-class .mt-0! .another-class]
## Überschrift 2 [.custom-class .mt-0! .another-class4]
### Überschrift 3 [.custom-class .mt-0! .another-class]
#### Überschrift 4 [.custom-class .mt-0! .another-class]
##### Überschrift 5 [.custom-class .mt-0! .another-class]
###### Überschrift 6 [.custom-class .mt-0! .another-class]

Tabelle

---

Erstellen Sie Tabellen mit senkrechten Strichen (|) und Bindestrichen (-):

Beispiel:

Spalte 1	Spalte 2	Spalte 3
Daten 1	Daten 2	Daten 3
Daten 4	Daten 5	Daten 6

Bilder

---

Lokales Bild Externes Bild

Komponenten

Informationsblock-Karte

---

<CardGrid>
  <Card
    title="Individuelle Lösungen"
    description="Maßgeschneiderte Strategien, die auf Ihre individuellen Geschäftsanforderungen zugeschnitten sind und messbare Ergebnisse liefern."
    icon="Plus"
    buttonLabel="Kontakt"
    buttonUrl="/contact/"
  />
  <Card
    title="Pünktliche Lieferung"
    description="Wir schätzen Ihre Zeit. Deshalb stellen wir sicher, dass jedes Projekt termingerecht abgeschlossen wird – ohne Qualitätseinbußen."
    icon="Clock"
    buttonLabel="Jetzt starten"
    buttonUrl="/contact/"
  />
  <Card
    title="Skalierbares Wachstum"
    description="Von Start-ups bis zu Großunternehmen – unsere Lösungen wachsen mit Ihnen und sichern langfristigen Erfolg."
    icon="Rocket"
    buttonLabel="Mehr erfahren"
    buttonUrl="/contact/"
  />
</CardGrid>

Bildliste mit Video

---

<ImageList>
  <ImageItem
    imageSrc="/images/gallery/1.jpg"
    imageAlt="Beispiel-Alternativtext"
    videoSrc="rFVpSwgCkCo"
  />
  <ImageItem
    imageSrc="/images/gallery/2.jpg"
    imageAlt="Beispiel-Alternativtext"
    videoSrc="/videos/test-video.mp4"
    videoProvider="html5"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/3.jpg"
    imageAlt="Beispiel-Alternativtext"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/4.jpg"
    imageAlt="Beispiel-Alternativtext"
  />
</ImageList>

Testimonial

---

Der folgende Code erzeugt das unten gezeigte Testimonial.

<Testimonial
  customerImage="/images/customers/avatar/1.jpg"
  customerName="Sarah Jones"
  customerRole="CEO, Gründerin"
  customerCompanyLogo="/images/customers/company-logo/acme.png"
  customerCompanyName="Acme Inc."
>
  Unsere Partnerschaft mit Folex zeigt die Kraft einer gut umgesetzten
  Kundenbindungsstrategie. Durch die Integration fortschrittlicher Technologien
  und datengestützter Erkenntnisse haben wir ihnen geholfen, ein
  personalisierteres, konsistenteres und lohnenderes Kundenerlebnis zu
  erreichen. Bei Folex setzen wir uns dafür ein, Unternehmen wie Oloyon dabei
  zu unterstützen, ihre Kundenbindung zu revolutionieren und langfristigen
  Erfolg zu erzielen.
</Testimonial>