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

---

This button has creative-fill hover animation

<CustomButton
  hoverEffect="creative-fill"
  class="effect-color-accent"
  label="Creative Fill"
  url="/"
/>

This button has magnetic hover animation

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

This button has text-flip hover animation

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

This button has magnetic and text-flip together hover animation

<CustomButton
  hoverEffect="magnetic-text-flip"
  label="Magnetic With Text Flip"
  url="/"
/>

This button has creative-fill hover animation

Creative Fill

This button has magnetic hover animation

Magnetic

This button has text-flip hover animation

Text Flip

This button has magnetic and text-flip together hover animation

Magnetic With Text Flip

---

Buttons Variants

Each button color can be customize by adding class=“btn-accent” or class=“btn-light”

<CustomButton label="Example Button" url="/" />
<CustomButton class="btn-accent" label="Example Button" url="/" />
<CustomButton
  variant="outline"
  label="With External Link"
  url="https://astro.build"
/>
<CustomButton variant="text" label="Example Button" url="/" />

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>

---

<Accordion label="Example Accordion Label 03" 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>

---

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>

Youtube Video

---

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

Custom Video

---

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

Notice

---

<Notice type="info" title="Information">
  This is an informational message.
</Notice>

<Notice type="warning">This is a warning message without a title.</Notice>

<Notice type="success" title="Success!">
  Your changes have been saved successfully.
</Notice>

<Notice type="error" title="Error!">
  Something went wrong. Please try again.
</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 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>

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 .mt-0! .another-class]
## Heading 2 [.custom-class .mt-0! .another-class4]
### Heading 3 [.custom-class .mt-0! .another-class]
#### Heading 4 [.custom-class .mt-0! .another-class]
##### Heading 5 [.custom-class .mt-0! .another-class]
###### Heading 6 [.custom-class .mt-0! .another-class]

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 Remote Image

Components

Information Block Card

---

<CardGrid>
  <Card
    title="Custom Solutions"
    description="Tailored strategies designed to fit your unique business needs and drive measurable results."
    icon="Plus"
    buttonLabel="Contact Us"
    buttonUrl="/contact/"
  />
  <Card
    title="On-Time Delivery"
    description="We value your time. That’s why we ensure every project is completed on schedule without sacrificing quality."
    icon="Clock"
    buttonLabel="Get Started"
    buttonUrl="/contact/"
  />
  <Card
    title="Scalable Growth"
    description="From startups to enterprises, our solutions grow with you, ensuring long-term success."
    icon="Rocket"
    buttonLabel="Learn More"
    buttonUrl="/contact/"
  />
</CardGrid>

Image List With Video

---

<ImageList>
  <ImageItem
    imageSrc="/images/gallery/1.jpg"
    imageAlt="example alt text"
    videoSrc="LXb3EKWsInQ"
  />
  <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>

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 Folex 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 Folex, we are committed to helping
  businesses like Oloyon revolutionize their customer engagement and drive
  long-term success.
</Testimonial>