Hero

1'use client';
2 
3import { Button } from '@/components/ui/button';
4import type { ReactNode } from 'react';
5import { demoHeroDefault } from './demo/miscellaneous';
6 
7/**
8 * Represents a logo in the hero section.
9 * @interface HeroLogo
10 * @property {string} [url] - URL of the logo image (shown in light mode)
11 * @property {string} [urlLight] - URL of the light version logo (shown in dark mode for visibility)
12 * @property {string} [alt] - Alt text for the logo
13 * @property {string} [text] - Text to display if no URL is provided (e.g., "Acme")
14 */
15export interface HeroLogo {
16  url?: string;
17  urlLight?: string;
18  alt?: string;
19  text?: string;
20}
21 
22/**
23 * Represents a tech/partner logo in the footer section.
24 * @interface TechLogo
25 * @property {string} [url] - URL of the tech logo image
26 * @property {string} [alt] - Alt text for the logo
27 * @property {string} [name] - Name of the technology (used for tooltip)
28 */
29export interface TechLogo {
30  url?: string;
31  alt?: string;
32  name?: string;
33}
34 
35/**
36 * Represents a button configuration in the hero section.
37 * @interface HeroButton
38 * @property {string} [label] - Text label for the button (optional)
39 * @property {ReactNode} [icon] - Icon to display in the button (optional)
40 */
41export interface HeroButton {
42  label?: string;
43  icon?: ReactNode;
44}
45 
46/**
47 * ═══════════════════════════════════════════════════════════════════════════
48 * HeroProps
49 * ═══════════════════════════════════════════════════════════════════════════
50 *
51 * Props for the Hero component. A landing hero section with optional logos,
52 * title, subtitle, call-to-action buttons, and tech logos footer.
53 */
54export interface HeroProps {
55  data?: {
56    /** Primary logo displayed in the hero. Can be an image URL or text. */
57    logo1?: HeroLogo;
58    /** Secondary logo displayed next to the primary logo (shows separator between them). */
59    logo2?: HeroLogo;
60    /** Separator text between logos (e.g., "x", "&", "and"). Only shown when both logos are present. */
61    logoSeparator?: string;
62    /** Main title/heading of the hero section. */
63    title?: string;
64    /** Subtitle or description text below the title. */
65    subtitle?: string;
66// … truncated