Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 789d59717f | |||
| b2db0f9c80 |
@@ -32,127 +32,127 @@ type HeroLogoBillboardBackgroundProps = Extract<
|
|||||||
>;
|
>;
|
||||||
|
|
||||||
interface HeroLogoBillboardProps {
|
interface HeroLogoBillboardProps {
|
||||||
logoText: string;
|
logoText: string;
|
||||||
description: string;
|
description: string;
|
||||||
buttons: ButtonConfig[];
|
buttons: ButtonConfig[];
|
||||||
background: HeroLogoBillboardBackgroundProps;
|
background: HeroLogoBillboardBackgroundProps;
|
||||||
imageSrc?: string;
|
imageSrc?: string;
|
||||||
videoSrc?: string;
|
videoSrc?: string;
|
||||||
imageAlt?: string;
|
imageAlt?: string;
|
||||||
videoAriaLabel?: string;
|
videoAriaLabel?: string;
|
||||||
frameStyle?: "card" | "browser";
|
frameStyle?: "card" | "browser";
|
||||||
ariaLabel?: string;
|
ariaLabel?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
containerClassName?: string;
|
containerClassName?: string;
|
||||||
logoContainerClassName?: string;
|
logoContainerClassName?: string;
|
||||||
logoClassName?: string;
|
logoClassName?: string;
|
||||||
descriptionClassName?: string;
|
descriptionClassName?: string;
|
||||||
buttonContainerClassName?: string;
|
buttonContainerClassName?: string;
|
||||||
buttonClassName?: string;
|
buttonClassName?: string;
|
||||||
buttonTextClassName?: string;
|
buttonTextClassName?: string;
|
||||||
mediaWrapperClassName?: string;
|
mediaWrapperClassName?: string;
|
||||||
imageClassName?: string;
|
imageClassName?: string;
|
||||||
browserBarClassName?: string;
|
browserBarClassName?: string;
|
||||||
addressBarClassName?: string;
|
addressBarClassName?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const HeroLogoBillboard = ({
|
const HeroLogoBillboard = ({
|
||||||
logoText,
|
logoText,
|
||||||
description,
|
description,
|
||||||
buttons,
|
buttons,
|
||||||
background,
|
background,
|
||||||
imageSrc,
|
imageSrc,
|
||||||
videoSrc,
|
videoSrc,
|
||||||
imageAlt = "",
|
imageAlt = "",
|
||||||
videoAriaLabel = "Hero video",
|
videoAriaLabel = "Hero video",
|
||||||
frameStyle = "card",
|
frameStyle = "card",
|
||||||
ariaLabel = "Hero section",
|
ariaLabel = "Hero section",
|
||||||
className = "",
|
className = "",
|
||||||
containerClassName = "",
|
containerClassName = "",
|
||||||
logoContainerClassName = "",
|
logoContainerClassName = "",
|
||||||
logoClassName = "",
|
logoClassName = "",
|
||||||
descriptionClassName = "",
|
descriptionClassName = "",
|
||||||
buttonContainerClassName = "",
|
buttonContainerClassName = "",
|
||||||
buttonClassName = "",
|
buttonClassName = "",
|
||||||
buttonTextClassName = "",
|
buttonTextClassName = "",
|
||||||
mediaWrapperClassName = "",
|
mediaWrapperClassName = "",
|
||||||
imageClassName = "",
|
imageClassName = "",
|
||||||
browserBarClassName = "",
|
browserBarClassName = "",
|
||||||
addressBarClassName = "",
|
addressBarClassName = "",
|
||||||
}: HeroLogoBillboardProps) => {
|
}: HeroLogoBillboardProps) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
aria-label={ariaLabel}
|
aria-label={ariaLabel}
|
||||||
className={cls("relative w-full py-hero-page-padding", className)}
|
className={cls("relative w-full py-hero-page-padding", className)}
|
||||||
>
|
>
|
||||||
<HeroBackgrounds {...background} />
|
<HeroBackgrounds {...background} />
|
||||||
<div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15 relative z-10", containerClassName)}>
|
<div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15 relative z-10", containerClassName)}>
|
||||||
<div className={cls("w-full flex flex-col items-end gap-6 md:gap-8", logoContainerClassName)}>
|
<div className={cls("w-full flex flex-col items-end gap-6 md:gap-8", logoContainerClassName)}>
|
||||||
<div className="relative w-full flex">
|
<div className="relative w-full flex">
|
||||||
<FillWidthText className={cls("text-foreground", logoClassName)}>
|
<FillWidthText className={cls("text-foreground", logoClassName)}>
|
||||||
{logoText}
|
{logoText}
|
||||||
</FillWidthText>
|
</FillWidthText>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative w-full md:w-1/2" >
|
<div className="relative w-full md:w-1/2">
|
||||||
<TextAnimation
|
<TextAnimation
|
||||||
type={theme.defaultTextAnimation}
|
type={theme.defaultTextAnimation}
|
||||||
text={description}
|
text={description}
|
||||||
variant="words-trigger"
|
variant="words-trigger"
|
||||||
start="top 100%"
|
start="top 100%"
|
||||||
className={cls("text-lg md:text-3xl text-foreground/75 text-balance text-end leading-[1.2]", descriptionClassName)}
|
className={cls("text-lg md:text-3xl text-foreground/75 text-balance text-end leading-[1.2]", descriptionClassName)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={cls("flex flex-wrap justify-end gap-3", buttonContainerClassName)}>
|
<div className={cls("flex flex-wrap justify-end gap-3", buttonContainerClassName)}>
|
||||||
{buttons.slice(0, 2).map((button, index) => (
|
{buttons.slice(0, 2).map((button, index) => (
|
||||||
<Button
|
<Button
|
||||||
key={`${button.text}-${index}`}
|
key={`${button.text}-${index}`}
|
||||||
{...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)}
|
{...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{frameStyle === "browser" ? (
|
{frameStyle === "browser" ? (
|
||||||
<div className={cls("w-full overflow-hidden rounded-theme-capped card", mediaWrapperClassName)}>
|
<div className={cls("w-full overflow-hidden rounded-theme-capped card", mediaWrapperClassName)}>
|
||||||
<div className={cls("relative z-1 bg-background border-b border-foreground/10 px-4 py-3 flex items-center gap-4", browserBarClassName)}>
|
<div className={cls("relative z-1 bg-background border-b border-foreground/10 px-4 py-3 flex items-center gap-4", browserBarClassName)}>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="h-3 w-auto aspect-square rounded-theme bg-foreground/10" />
|
<div className="h-3 w-auto aspect-square rounded-theme bg-foreground/10" />
|
||||||
<div className="h-3 w-auto aspect-square rounded-theme bg-foreground/10" />
|
<div className="h-3 w-auto aspect-square rounded-theme bg-foreground/10" />
|
||||||
<div className="h-3 w-auto aspect-square rounded-theme bg-foreground/10" />
|
<div className="h-3 w-auto aspect-square rounded-theme bg-foreground/10" />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2 flex-1">
|
<div className="flex items-center gap-2 flex-1">
|
||||||
<div className={cls("w-15 md:w-10 h-8 rounded-theme bg-foreground/10", addressBarClassName)} />
|
<div className={cls("w-15 md:w-10 h-8 rounded-theme bg-foreground/10", addressBarClassName)} />
|
||||||
<div className="w-15 md:w-10 h-8 rounded-theme bg-foreground/10" />
|
<div className="w-15 md:w-10 h-8 rounded-theme bg-foreground/10" />
|
||||||
<div className="hidden md:block w-10 h-8 rounded-theme bg-foreground/10" />
|
<div className="hidden md:block w-10 h-8 rounded-theme bg-foreground/10" />
|
||||||
</div>
|
</div>
|
||||||
<Plus className="h-[var(--text-sm)] w-auto text-foreground" />
|
<Plus className="h-[var(--text-sm)] w-auto text-foreground" />
|
||||||
</div>
|
|
||||||
<div className="relative z-1 p-0">
|
|
||||||
<MediaContent
|
|
||||||
imageSrc={imageSrc}
|
|
||||||
videoSrc={videoSrc}
|
|
||||||
imageAlt={imageAlt}
|
|
||||||
videoAriaLabel={videoAriaLabel}
|
|
||||||
imageClassName={cls("z-1 rounded-none! aspect-square md:aspect-video", imageClassName)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className={cls("w-full overflow-hidden rounded-theme-capped card p-4", mediaWrapperClassName)}>
|
|
||||||
<MediaContent
|
|
||||||
imageSrc={imageSrc}
|
|
||||||
videoSrc={videoSrc}
|
|
||||||
imageAlt={imageAlt}
|
|
||||||
videoAriaLabel={videoAriaLabel}
|
|
||||||
imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div className="relative z-1 p-0">
|
||||||
);
|
<MediaContent
|
||||||
|
imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80"
|
||||||
|
videoSrc={videoSrc}
|
||||||
|
imageAlt={imageAlt}
|
||||||
|
videoAriaLabel={videoAriaLabel}
|
||||||
|
imageClassName={cls("z-1 rounded-none! aspect-square md:aspect-video", imageClassName)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className={cls("w-full overflow-hidden rounded-theme-capped card p-4", mediaWrapperClassName)}>
|
||||||
|
<MediaContent
|
||||||
|
imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80"
|
||||||
|
videoSrc={videoSrc}
|
||||||
|
imageAlt={imageAlt}
|
||||||
|
videoAriaLabel={videoAriaLabel}
|
||||||
|
imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
HeroLogoBillboard.displayName = "HeroLogoBillboard";
|
HeroLogoBillboard.displayName = "HeroLogoBillboard";
|
||||||
|
|||||||
Reference in New Issue
Block a user