a9b4e8c0dc
Refactored the image URL in testimonials and reduced redundancy in the FeaturesStats and accordion components, enhancing code readability. Also, implemented dynamic id generation in the FAQ component, improving scalability and maintainability. Added new pages to the website and updated the meta information, improving SEO.
49 lines
1.8 KiB
Text
49 lines
1.8 KiB
Text
---
|
|
const { id, collapseId, heading, content, first } = Astro.props;
|
|
|
|
interface Props {
|
|
id: string;
|
|
collapseId: string;
|
|
heading: string;
|
|
content: string;
|
|
first?: boolean;
|
|
}
|
|
const ACCORDION_CLASS_DEFAULT = "hs-accordion pb-3 active";
|
|
const ACCORDION_CLASS_COLLAPSED = "hs-accordion pt-6 pb-3";
|
|
const ACCORDION_CONTENT_CLASS = "hs-accordion-content w-full overflow-hidden transition-[height] duration-300";
|
|
function getAccordionClass(first: boolean) {
|
|
return first ? ACCORDION_CLASS_DEFAULT : ACCORDION_CLASS_COLLAPSED;
|
|
}
|
|
const SVG_PARAMS = { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" };
|
|
---
|
|
|
|
<div
|
|
class={getAccordionClass(first)}
|
|
id={id}
|
|
>
|
|
<button
|
|
class="hs-accordion-toggle group inline-flex w-full items-center justify-between gap-x-3 text-balance rounded-lg pb-3 text-start font-bold text-neutral-800 outline-none ring-zinc-500 transition hover:text-neutral-500 focus-visible:ring dark:text-neutral-200 dark:ring-zinc-200 dark:hover:text-neutral-400 dark:focus:outline-none md:text-lg"
|
|
aria-controls={collapseId}
|
|
>
|
|
{heading}
|
|
<svg
|
|
class="block h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:hidden dark:text-neutral-400"
|
|
{...SVG_PARAMS}
|
|
><path d="m6 9 6 6 6-6"></path></svg
|
|
>
|
|
<svg
|
|
class="hidden h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:block dark:text-neutral-400"
|
|
{...SVG_PARAMS}
|
|
><path d="m18 15-6-6-6 6"></path></svg
|
|
>
|
|
</button>
|
|
<div
|
|
aria-labelledby={id}
|
|
class={`${first ? ACCORDION_CONTENT_CLASS : 'hidden ' + ACCORDION_CONTENT_CLASS}`}
|
|
id={collapseId}
|
|
>
|
|
<p class="text-pretty text-neutral-600 dark:text-neutral-400">
|
|
{content}
|
|
</p>
|
|
</div>
|
|
</div>
|