ahmido
be314c577f
## Summary - rebuild the public Tenantial homepage around an evidence-first Microsoft tenant governance narrative - replace the old hero visual with a new static dashboard preview and add dedicated Trust Bar and Feature Pillars sections - update the shared public shell, navigation, footer, dark design tokens, assets, and homepage content to match the new brand direction - align website smoke coverage and Spec 400 artifacts with the rebuilt homepage ## Testing - not run in this pass - updated website smoke specs under apps/website/tests/smoke ## Note - `website-dev` was pushed to `origin` so the requested PR base exists remotely - the remote `website-dev` branch is an ancestor of `origin/dev`, so this PR may also show upstream `dev` history relative to that base Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de> Reviewed-on: #387
73 lines
2.1 KiB
Plaintext
73 lines
2.1 KiB
Plaintext
---
|
|
import type { ButtonVariant } from '@/types/site';
|
|
|
|
interface Props {
|
|
ariaLabel?: string;
|
|
class?: string;
|
|
href?: string;
|
|
rel?: string;
|
|
size?: 'lg' | 'md' | 'sm';
|
|
target?: '_blank' | '_self';
|
|
type?: 'button' | 'reset' | 'submit';
|
|
variant?: ButtonVariant;
|
|
}
|
|
|
|
const {
|
|
ariaLabel,
|
|
class: className = '',
|
|
href,
|
|
rel,
|
|
size = 'md',
|
|
target,
|
|
type = 'button',
|
|
variant = 'primary',
|
|
} = Astro.props;
|
|
|
|
const baseClass =
|
|
'inline-flex items-center justify-center rounded-[var(--radius-pill)] border font-semibold tracking-[var(--tracking-tight)] transition-all duration-200 cursor-pointer';
|
|
|
|
const sizeClasses = {
|
|
sm: 'min-h-10 px-5 text-sm',
|
|
md: 'min-h-12 px-6 text-[0.95rem]',
|
|
lg: 'min-h-14 px-8 text-base',
|
|
};
|
|
|
|
const variantClasses = {
|
|
primary:
|
|
'border-transparent bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-[0_2px_14px_rgba(111,229,191,0.2)] hover:bg-[var(--color-mint-300)] hover:shadow-[0_4px_20px_rgba(111,229,191,0.26)] active:scale-[0.98]',
|
|
secondary:
|
|
'border-[color:var(--color-border)] bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)] hover:border-[var(--color-border-strong)] hover:bg-[var(--surface-muted-strong)] active:scale-[0.98]',
|
|
ghost: 'border-transparent bg-transparent text-[var(--color-muted-foreground)] hover:bg-[var(--surface-muted)] hover:text-[var(--color-foreground)]',
|
|
};
|
|
|
|
const classes = [baseClass, sizeClasses[size], variantClasses[variant], className];
|
|
---
|
|
|
|
{
|
|
href ? (
|
|
<a
|
|
href={href}
|
|
target={target}
|
|
rel={rel}
|
|
aria-label={ariaLabel}
|
|
class:list={classes}
|
|
data-button-variant={variant}
|
|
data-cta-weight={variant}
|
|
data-interaction="button"
|
|
>
|
|
<slot />
|
|
</a>
|
|
) : (
|
|
<button
|
|
type={type}
|
|
aria-label={ariaLabel}
|
|
class:list={classes}
|
|
data-button-variant={variant}
|
|
data-cta-weight={variant}
|
|
data-interaction="button"
|
|
>
|
|
<slot />
|
|
</button>
|
|
)
|
|
}
|