development/062d9987-da2c-454a-97e4-1c7f939e0cd6
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Compare commits

base: development:version_2
Branches Tags
development:main development:version_4 development:version_5 development:version_6 development:version_3 development:version_2 development:version_1
..
compare: development:version_3
Branches Tags
development:main development:version_4 development:version_5 development:version_6 development:version_3 development:version_2 development:version_1

1 Commits
version_2 ... version_3

Author SHA1 Message Date
kudindmitriy
b2db0f9c80 Bob AI: Editing h1 ([data-webild-id="webild-1770279235209-... 2026-02-05 08:14:45 +00:00
1 changed files with 114 additions and 114 deletions
Expand all files Collapse all files

228
src/components/sections/hero/HeroLogoBillboard.tsx
View File

@@ -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={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>
</section>
);
}; };
HeroLogoBillboard.displayName = "HeroLogoBillboard"; HeroLogoBillboard.displayName = "HeroLogoBillboard";