---
import { getEntry } from "astro:content";
import Button from "./user-components/Button.astro";
import Section from "./Section.astro";
const locale = Astro.currentLocale || "en";
const cta = await getEntry(
"ctaSection",
`${locale === "en" ? "" : `${locale}/`}call-to-action`
);
const { title, description, enable, fill_button, outline_button } =
cta?.data ?? {};
---
{
enable && (
<div class="cta-container">
<Section title={title} description={description}>
{fill_button?.enable && (
<Button
label={fill_button.label || "Get Started"}
link={fill_button.link || "/getting-started/introduction/overview/"}
variant="primary"
/>
)}
{outline_button?.enable && (
<Button
label={outline_button.label || "Get a live demo"}
link={
outline_button.link || "/getting-started/introduction/overview/"
}
variant="outline-primary"
/>
)}
</Section>
</div>
)
}
<style>
/* Ensure background image is visible in light mode */
:global([data-theme="light"]) .cta-container {
background-blend-mode: multiply;
background-color: #f9fafb; /* Light background color */
}
/* Dark mode styling */
:global([data-theme="dark"]) .cta-container {
background: url("/src/assets/cta-bg.png") no-repeat center;
background-size: cover;
padding: 1rem;
position: relative;
}
</style>
<script>
const ctaContainerButton = document.querySelector(".cta-container a");
const buttonParent = ctaContainerButton?.parentElement;
if (buttonParent) {
buttonParent.style.display = "flex";
buttonParent.style.justifyContent = "center";
buttonParent.style.gap = "1rem";
}
</script>