NaliiaWebsite/src/components/InitialSection.astro

---
export interface SectionProps {
    imgSrc: string;
    imgAlt: string;
    imgWidth?: number;
    imgHeight?: number;
    customXPosition?: string;
    customYPosition?: string;
    logoSrc: string;
    logoAlt: string;
    mainTitle: string;
    subtitle: string;
    buttonText?: string;
    autoHeight?: boolean;
}

const {
    imgSrc,
    imgAlt,
    imgWidth,
    imgHeight,
    logoSrc,
    logoAlt,
    mainTitle,
    subtitle,
    buttonText,
    customXPosition,
    customYPosition,
    autoHeight = false,
} = Astro.props as SectionProps;
---

<section class="section-1 first-sect-container" data-auto-height={autoHeight}>
    <img
        src={imgSrc}
        alt={imgAlt}
        class="main-img"
        fetchpriority="high"
        style={`width: ${imgWidth ? imgWidth : "auto"}px; height: ${imgHeight ? imgHeight : "auto"}px; ${customXPosition || customYPosition ? `transform: translate(${customXPosition ? customXPosition : "0"}, ${customYPosition ? customYPosition : "0"});` : ""}`}
    />

    <div class="landing-content">
        <div class="logo-container">
            <img src={logoSrc} alt={logoAlt} class="logo-naliia-full" />
        </div>

        <div class="text-and-button-container">
            <div class="text-content">
                <h1 class="main-title">
                    {mainTitle}
                </h1>
                <h5 class="subtitle">
                    {subtitle}
                </h5>
            </div>

            {
                buttonText && (
                    <div class="button-container">
                        <button class="button call-to-action-button">
                            {buttonText}
                        </button>
                    </div>
                )
            }
        </div>

        <slot name="extraContent" />
    </div>
</section>

<style>
    .section-1 {
        position: relative;
        background-color: transparent;
        height: 100vh;
        display: flex;
        flex-direction: column;
        gap: var(--space-4xl-96px);
        padding: 80px 300px 0px 300px;
    }

    .section-1[data-auto-height="true"] {
        height: auto;
        min-height: 100vh;
        padding-bottom: 80px;
    }

    .main-img {
        position: absolute;
        top: 20px;
        right: 0px;

        width: 680px;
        height: auto;

        transform: translateX(-32%);
        z-index: -1;
        pointer-events: none;
    }

    .landing-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-4xl-96px);
    }

    .logo-container {
        display: flex;
        align-items: center;
        justify-content: start;
    }
    .logo-naliia-full {
        height: 81px;
        width: auto;
    }

    .text-and-button-container {
        display: flex;
        flex-direction: column;
        gap: var(--space-3xl-64px);
        max-width: 780px;
    }

    .text-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-md-16px);
    }
    .main-title {
        font-size: 80px;
    }
    .subtitle {
        max-width: 630px;
    }

    .call-to-action-button {
        height: 56px;
        width: auto;
        padding: var(--space-sm-8px) var(--space-lg-24px);
        border: none;
        border-radius: 16px;
        background-color: #e54c75;
        font-size: var(--font-desktop-h5);
        font-weight: bold;
        font-family: var(--font-family-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
    }
</style>