Elements

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

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

This button has magnetic hover animation

<Button hoverEffect="magnetic" label="Magnetic" url="/" class="w-fit" />

This button has text-flip hover animation

<Button hoverEffect="text-flip" label="Text Flip" url="/" class="w-fit" />

This button has magnetic and text-flip together hover animation

<Button
  hoverEffect="magnetic-text-flip"
  label="Magnetic With Text Flip"
  url="/"
  class="w-fit"
/>
<Button
  variant="circle"
  hoverEffect="magnetic-text-flip"
  label="Magnetic With Text Flip"
  url="/"
  class="w-fit"
/>

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”

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

Example Button Example Button 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="" provider="youtube" />

Custom Video

---

<VideoInline
  src="/videos/test-video.mp4"
  provider="html5"
  poster="/images/banner/banner-common.png"
/>

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: This example uses the Taxo theme’s section component pattern with AboutSection.astro and theme helpers.

---
import Base from "@/layouts/Base.astro";
import { getEntryCTM } from "@/lib/contentParser.astro";
import { generatePaths } from "@/lib/utils/i18nUtils.ts";
import FaqSection from "@/components/sections/FaqSection.astro";
import CTASection from "@/components/sections/CTASection.astro";
import TeamSection from "@/components/sections/TeamSection.astro";
import BlogSection from "@/components/sections/BlogSection.astro";
import HeroSection from "@/components/sections/HeroSection.astro";
import FeaturesGrid from "@/components/sections/FeaturesGrid.astro";
import StatsSection from "@/components/sections/StatsSection.astro";
import AboutSection from "@/components/sections/AboutSection.astro";
import ServicesSection from "@/components/sections/ServicesSection.astro";
import CTAVideoSection from "@/components/sections/CTAVideoSection.astro";
import TestimonialSection from "@/components/sections/TestimonialSection.astro";
import CaseStudiesSection from "@/components/sections/CaseStudiesSection.astro";

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

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

<Base {...page?.data} headerLayout="header-1">
  <HeroSection />
  <FeaturesGrid />
  <ServicesSection />
  <StatsSection />
  <AboutSection />
  <CTAVideoSection hasLightBackground={true} />
  <TestimonialSection />
  <CaseStudiesSection hasSectionSpacingBottom={true} />
  <FaqSection
    mode="dark"
    badgeVariant="default"
    hasSectionSpacingBottom={true}
  />
  <TeamSection hasSectionSpacingBottom={true} />
  <BlogSection />
  <CTASection />
</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

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>

Information Block Card

---

<CardWrapper>
  <Card
    title="Custom Solution"
    description="We care success relationships fuel success we love building"
    icon="/images/icons/svg/location.svg"
    buttonLabel="Contact Us"
    buttonUrl="/contact/"
  />
  <Card
    title="In-time Result"
    description="We care success relationships fuel success we love building"
    icon="/images/icons/svg/location.svg"
    buttonLabel="Contact Us"
    buttonUrl="/contact/"
  />
</CardWrapper>

Image List With Video

---

<ImageList>
  <ImageItem
    imageSrc="/images/banner/banner-common.png"
    imageAlt="example alt text"
    videoSrc="rFVpSwgCkCo"
  />
  <ImageItem
    imageSrc="/images/banner/banner-common.png"
    imageAlt="example alt text"
    videoSrc="/videos/test-video.mp4"
    videoProvider="html5"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/banner/banner-common.png"
    imageAlt="example alt text"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/banner/banner-common.png"
    imageAlt="example alt text"
  />
</ImageList>

Testimonial

---

The following code generates the testimonial shown below.

<Testimonial
  customerImage="/images/customers/avatar/customer-1.png"
  customerName="Sarah Jones"
  customerRole="CEO, Founder"
  rating={3.5}
>
  Our partnership with Taxo 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 Taxo, we are committed to helping businesses
  like Oloyon revolutionize their customer engagement and drive long-term
  success.
</Testimonial>

Block Quote Card

---

<BlockQuoteCard
  content="Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur dolores voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,"
  name="Jhone Marko"
  position="CEO"
  location="California"
/>