Components

Text Formatting

Bold Text

To make text bold, use ** or __ around the word or phrase:
Example: This text is bold or This text is bold

Italic Text

To italicize text, use * or _ around the word or phrase:
Example: This text is italic or This text is italic

Underline Text

To underline text, use HTML <u> tags:

Example:

<u>This text is underlined</u>

Result:

This text is underlined

Strikethrough

To strike through text, use ~~ around the word or phrase:
Example: This text is struck through

Button

<CustomButton
  hoverEffect="magnetic"
  showIcon="false"
  label="Magnetic Hover"
  url="/"
/>
<CustomButton
  showIcon="false"
  variant="outline"
  hoverEffect="magnetic-text-flip"
  label="Magnetic Hover With Text Flip"
  url="/"
/>
<CustomButton
  showIcon="false"
  variant="outline"
  hoverEffect="creative-fill"
  label="Creative Fill Effect"
  url="/"
/>
<CustomButton showIcon="true" label="Example Button" url="/" />
<CustomButton
  variant="outline"
  label="With External Link"
  showIcon="true"
  url="https://astro.build"
/>
<CustomButton variant="text" label="Example Button" url="/" />

The above code generates the following buttons

Magnetic Hover

Magnetic Hover With Text Flip

Creative Fill Effect

Example Button

With External Link

Example Button

Accordion

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

We offer a wide range of services including web development, branding, and digital marketing to help businesses grow and succeed.

* **Essentials**: Focused workshop to identify core values and USP.
* **Growth**: In-depth workshop to establish a clear and differentiated brand identity.
* **Enterprise**: Comprehensive brand positioning strategy encompassing all aspects of your brand.

</Accordion>

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

We offer a wide range of services including web development, branding, and digital marketing to help businesses grow and succeed.

* **Essentials**: Focused workshop to identify core values and USP.
* **Growth**: In-depth workshop to establish a clear and differentiated brand identity.
* **Enterprise**: Comprehensive brand positioning strategy encompassing all aspects of your brand.

</Accordion>

The above code generates the following accordions

Tab

<Tabs>
  <Tab name="Overview">
    **How Can We Assist You?** We offer personalized consultations to help you
    achieve your personal and professional goals. Choose a tab below to explore
    our services. - Personal Coaching - Career Counseling - Conflict Resolution
    - Life Advice
  </Tab>

  <Tab name="Coaching">
    **Personal Coaching: Unlock Your Potential** Get personalized coaching to
    overcome challenges and set meaningful goals. We focus on: - Confidence
    Building - Emotional Intelligence - Overcoming Procrastination
  </Tab>
</Tabs>

The above code generates the following accordions

Youtube Video

Custom Video

Notice

Blockquote

To create a blockquote, start the line with a >:
Example:

This is a blockquote.
It spans multiple lines.

Author

Code

To format inline code, use backticks (`):
Example: This is inline code

For multi-line code blocks, use triple backticks (```):
Example:

---
import Base from "@/layouts/Base.astro";
import { getEntryCTM } from "@/lib/contentParser.astro";
import AboutUs from "@/components/sections/AboutUs.astro";
import Customers from "@/components/sections/Customers.astro";
import { generatePaths } from "@/lib/utils/i18nUtils.ts";
import HomeBanner from "@/components/sections/HomeBanner.astro";
import HowItWorks from "@/components/sections/HowItWorks.astro";
import BlogSection from "@/components/sections/BlogSection.astro";
import CallToAction from "@/components/sections/CallToAction.astro";
import Testimonial from "@/components/sections/TestimonialSection.astro";
import ServicesSection from "@/components/sections/ServicesSection.astro";
import PortfolioSection from "@/components/sections/PortfolioSection.astro";

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

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

<Base {...homepage?.data} homepage={true}>
  <HomeBanner />
  <Customers />
  <AboutUs />
  <ServicesSection content={homepage?.data.servicesSection} />
  <HowItWorks />
  <PortfolioSection />
  <Testimonial />
  <BlogSection />
  <CallToAction content={homepage?.data.callToActionSection} />
</Base>

Horizontal Rule

To create a horizontal rule, use three or more dashes (---), asterisks (***), or underscores (___) on a new line:
Example:

---

Headings

Create headings by adding # symbols before your text. Add custom class by bracket [.class-name].
Example:

# Heading 1 [.custom-class .another-class]
## Heading 2 [.custom-class .another-class4]
### Heading 3 [.custom-class .another-class]
#### Heading 4 [.custom-class .another-class]
##### Heading 5 [.custom-class .another-class] [.text-h4]
###### Heading 6 [.custom-class .another-class] [.text-h5]

Table

Create tables using pipes (|) and dashes (-):

Example:

Column 1	Column 2	Column 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Images

Local Image

Components

Styled List

---

<ListCheck>

- **Inconsistent Customer Interactions**: Customers experienced varying levels of service quality across different channels.
- **Lack of Personalization**: Limited data integration led to generic, one-size-fits-all communication.
- **Customer Retention**: Difficulty in retaining customers due to inadequate follow-up and engagement.

</ListCheck>

The above code generates the following styled list

Information Block Card

---

<StatsWrapper>
  <StatsItem
    icon="UserRoundCheck"
    title="200+"
    description="Increased Customer Satisfaction"
  />
  <StatsItem
    icon="DollarSign"
    title="25+"
    description="Enhanced Personalization"
  />
  <StatsItem icon="Star" title="10:1" description="Improved Retention" />
</StatsWrapper>

The above code generates the following styled block

Image List With Video

---

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

The above code generates the following gallery images

Testimonial

---

The following code generates the testimonial shown below.

<Testimonial
  customerImage="/images/customers/avatar/1.jpg"
  customerName="Sarah Jones"
  customerRole="CEO, Founder"
  customerCompanyLogo="/images/customers/company-logo/acme.png"
  customerCompanyName="Acme Inc."
>
  Our partnership with Looka demonstrates the power of a well-executed customer
  engagement strategy. By integrating advanced technologies and data-driven
  insights, we helped them achieve a more personalized, consistent, and
  rewarding customer experience. At Looka, we are committed to helping
  businesses like Oloyon revolutionize their customer engagement and drive
  long-term success.
</Testimonial>