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

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

This button has magnetic hover animation

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

This button has text-flip hover animation

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

This button has magnetic and text-flip together hover animation

<Button
  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”

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

---

The Tabs component renders a filter tab bar. Pass a tabs array of { label, slug } objects and an optional allLabel for the “show all” button.

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

  <Tab name="Counseling">
    **Career Counseling: Find Your Path** Need help with your career? We
    provide: - Career Path Guidance - Resume & Interview Prep - Job Market
    Insights
  </Tab>

  <Tab name="Resolution">
    **Conflict Resolution: Build Stronger Relationships** Resolve disputes
    effectively with: - Mediation Services - Communication Strategies - Anger
    Management Techniques
  </Tab>
</Tabs>

Youtube Video

---

<VideoInline src="rFVpSwgCkCo" 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 { generatePaths } from "@/lib/utils/i18nUtils";
import { getEntryCTM } from "@/lib/contentParser.astro";
import HomeBanner from "@/components/sections/HomeBanner.astro";
import AboutCompanySection from "@/components/sections/AboutCompanySection.astro";
import MarqueeTickerSection from "@/components/sections/MarqueeTickerSection.astro";
import OurServicesSection from "@/components/sections/OurServicesSection.astro";
import NumbersStatsSection from "@/components/sections/NumbersStatsSection.astro";
import TestimonialSection from "@/components/sections/TestimonialSection.astro";
import FeaturesSplitSection from "@/components/sections/FeaturesSplitSection.astro";
import PortfolioSection from "@/components/sections/PortfolioSection.astro";
import CustomersSection from "@/components/sections/CustomersSection.astro";
import GetInTouchSection from "@/components/sections/GetInTouchSection.astro";
import RecentBlogsSection from "@/components/sections/RecentBlogsSection.astro";
import ContactSection from "@/components/sections/ContactSection.astro";
import MarqueeSection from "@/components/sections/MarqueeSection.astro";

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

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

<Base {...homepage.data} homepage={true}>
  <HomeBanner />
  <AboutCompanySection />
  <MarqueeTickerSection />
  <OurServicesSection />
  <NumbersStatsSection />
  <TestimonialSection hasSectionSpacing={false} />
  <FeaturesSplitSection hasSectionSpacing={false} />
  <PortfolioSection />
  <CustomersSection />
  <GetInTouchSection hasSectionSpacing={false} />
  <RecentBlogsSection />
  <ContactSection />
  <MarqueeSection hasSectionSpacing={false} />
</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="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>

Info Block List

---

<InfoBlockList
  imageSrc="/images/service/security-pic.png"
  imageAlt="Security Services"
>
  <InfoBlockItem title="Information Technology">
    Nemo enim ipsam voluptatem quia aut consequuntur on magni dolores eos qui
    ratione voluptatem sequi in neque porro quisquam est,
  </InfoBlockItem>
  <InfoBlockItem title="Cloud Services">
    Nemo enim ipsam voluptatem quia aut consequuntur on magni dolores eos qui
    ratione voluptatem sequi in neque porro quisquam est,
  </InfoBlockItem>
  <InfoBlockItem title="Cyber Security">
    Nemo enim ipsam voluptatem quia aut consequuntur on magni dolores eos qui
    ratione voluptatem sequi in neque porro quisquam est,
  </InfoBlockItem>
</InfoBlockList>

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>