ahmido
eeb5c98450
## Summary - rebuild `apps/website` on the pinned ScrewFast Astro foundation - replace the legacy page/content/component structure with the new section and UI architecture - add Starlight-based docs and the new public route set for platform, pricing, trust, legal, and guides - refresh website tooling, dependencies, and Playwright smoke coverage for the new site shell ## Scope - touches `apps/website` and the matching spec artifacts for feature 402 - does not modify `apps/platform` ## Testing - not run in this step Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de> Reviewed-on: #393
67 lines
2.1 KiB
Plaintext
67 lines
2.1 KiB
Plaintext
---
|
|
// Define props from Astro
|
|
const {
|
|
heading,
|
|
content,
|
|
isAddressVisible,
|
|
addressContent,
|
|
isLinkVisible,
|
|
linkTitle,
|
|
linkURL,
|
|
isArrowVisible,
|
|
} = Astro.props;
|
|
|
|
// Define TypeScript interface for props
|
|
interface Props {
|
|
heading?: string;
|
|
content?: string;
|
|
isAddressVisible?: boolean;
|
|
addressContent?: string;
|
|
isLinkVisible?: boolean;
|
|
linkTitle?: string;
|
|
linkURL?: string;
|
|
isArrowVisible?: boolean;
|
|
}
|
|
|
|
// Define SVG arrow to be used in the component
|
|
const arrowSVG: string = `<svg
|
|
class="h-4 w-4 shrink-0 transition ease-in-out group-hover:translate-x-1"
|
|
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /> </svg>`;
|
|
---
|
|
|
|
{/* Root container, which arranges the heading and content */}
|
|
<div class="flex gap-x-7 py-6">
|
|
{/* Slot to allow for extensibility of the component */}
|
|
<slot />
|
|
<div class="grow">
|
|
{/* Heading of the section */}
|
|
<h3 class="font-bold text-neutral-700 dark:text-neutral-300">
|
|
{heading}
|
|
</h3>
|
|
{/* Content of the section */}
|
|
<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">{content}</p>
|
|
{/* Conditional rendering of address content if isAddressVisible is true */}
|
|
{
|
|
isAddressVisible ? (
|
|
<p class="mt-1 text-sm text-neutral-500 italic">{addressContent}</p>
|
|
) : null
|
|
}
|
|
{
|
|
/* Conditional rendering of a link if isLinkVisible is true.
|
|
The link also conditionally includes an arrow SVG if isArrowVisible is true */
|
|
}
|
|
{
|
|
isLinkVisible ? (
|
|
<a
|
|
class="group mt-2 inline-flex items-center gap-x-2 rounded-lg text-sm font-medium text-zinc-600 ring-zinc-500 outline-hidden transition duration-300 hover:text-zinc-800 focus-visible:ring-3 dark:text-zinc-400 dark:ring-zinc-200 dark:hover:text-zinc-200 dark:focus:ring-1 dark:focus:outline-hidden"
|
|
href={linkURL}
|
|
>
|
|
{linkTitle}
|
|
{isArrowVisible ? <Fragment set:html={arrowSVG} /> : null}
|
|
</a>
|
|
) : null
|
|
}
|
|
</div>
|
|
</div>
|