ahmido
c261b1c632
## Summary - tighten homepage messaging, hero support copy, trust teaser flow, and CTA routing for the website public-content rollout - align shared website copy, smoke expectations, and spec 404 artifacts with the latest messaging pass - replace the previously closed PR for `404-public-content-messaging` ## Commits - `44d27395` feat(website): tighten homepage messaging and trust flow - `1ddbd28b` feat(website): refine public content messaging rollout ## Validation - `git diff --check` ## Notes - local Playwright MCP output remains untracked and was not included Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de> Reviewed-on: #398
115 lines
2.9 KiB
Plaintext
115 lines
2.9 KiB
Plaintext
---
|
|
// Import the necessary dependencies
|
|
import { Image } from 'astro:assets';
|
|
import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
|
|
import SecondaryCTA from '@components/ui/buttons/SecondaryCTA.astro';
|
|
import ReviewComponent from '@components/ui/blocks/ReviewComponent.astro';
|
|
|
|
// Define props from Astro
|
|
const {
|
|
title,
|
|
subTitle,
|
|
supportingLine,
|
|
primaryBtn,
|
|
primaryBtnURL,
|
|
secondaryBtn,
|
|
secondaryBtnURL,
|
|
withReview,
|
|
avatars,
|
|
rating,
|
|
reviews,
|
|
src,
|
|
alt,
|
|
} = Astro.props;
|
|
|
|
// Define TypeScript interface for props
|
|
interface Props {
|
|
title: string;
|
|
subTitle?: string;
|
|
supportingLine?: string;
|
|
primaryBtn?: string;
|
|
primaryBtnURL?: string;
|
|
secondaryBtn?: string;
|
|
secondaryBtnURL?: string;
|
|
withReview?: boolean;
|
|
avatars?: Array<string>;
|
|
rating?: string;
|
|
reviews?: string;
|
|
src?: any;
|
|
alt?: string;
|
|
}
|
|
---
|
|
|
|
{/* Defining a grid container that holds all the content */}
|
|
<section
|
|
class="mx-auto grid max-w-[85rem] gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full"
|
|
>
|
|
{/* Title and description */}
|
|
<div>
|
|
{
|
|
/* Each h1 and p tag renders a portion of the title and subTitle defined above */
|
|
}
|
|
<h1
|
|
class="block text-3xl font-bold tracking-tight text-balance text-neutral-800 sm:text-4xl lg:text-6xl lg:leading-tight dark:text-neutral-200"
|
|
>
|
|
{
|
|
/* About Fragment: https://docs.astro.build/en/basics/astro-syntax/#fragments */
|
|
}
|
|
<Fragment set:html={title} />
|
|
</h1>
|
|
{
|
|
subTitle && (
|
|
<p class="mt-3 text-lg leading-relaxed text-pretty text-neutral-700 lg:w-4/5 dark:text-neutral-400">
|
|
{subTitle}
|
|
</p>
|
|
)
|
|
}
|
|
{
|
|
supportingLine && (
|
|
<p class="mt-4 max-w-2xl text-sm font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
|
|
{supportingLine}
|
|
</p>
|
|
)
|
|
}
|
|
{
|
|
/* Action Button Section: This section includes two CTAs with their own styles and URL */
|
|
}
|
|
<div class="mt-7 grid w-full gap-3 sm:inline-flex">
|
|
{primaryBtn && <PrimaryCTA title={primaryBtn} url={primaryBtnURL} />}
|
|
{
|
|
secondaryBtn && (
|
|
<SecondaryCTA title={secondaryBtn} url={secondaryBtnURL} />
|
|
)
|
|
}
|
|
</div>
|
|
|
|
{
|
|
/* Review Section: This section presents avatars, review ratings and the number of reviews */
|
|
}
|
|
{
|
|
withReview ? (
|
|
<ReviewComponent avatars={avatars} rating={rating} reviews={reviews} />
|
|
) : (
|
|
''
|
|
)
|
|
}
|
|
</div>
|
|
{/* Hero Image Section */}
|
|
<div class="flex w-full">
|
|
<div class="top-12 overflow-hidden">
|
|
{
|
|
src && alt && (
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
class="h-full w-full scale-110 object-cover object-center"
|
|
draggable={'false'}
|
|
loading={'eager'}
|
|
format={'avif'}
|
|
/>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|