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;
    customHref?: string;
    autoHeight?: boolean;
}

const {
    imgSrc,
    imgAlt,
    imgWidth,
    imgHeight,
    logoSrc,
    logoAlt,
    mainTitle,
    subtitle,
    buttonText,
    customXPosition,
    customYPosition,
    autoHeight = false,
    customHref
} = 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 && (
                        <a href={customHref ? customHref : "#"} target="_blank" class="call-to-action-button">
                            {buttonText}
                        </a>
                )
            }
        </div>

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

<style>
    @starting-style {
        .logo-naliia-full {
            translate: -100px 0;
            opacity: 0;
        }

        .main-title {
            translate: -100px 0;
            opacity: 0;
        }

        .subtitle {
            translate: -100px 0;
            opacity: 0;
        }

        .call-to-action-button {
            translate: -100px 0;
            opacity: 0;
        }

        .main-img {
            opacity: 0;
        }
    }

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

        @media (max-width: 1023px) {
            height: auto;
            padding: 0px 48px;
        }

        @media (max-width: 767px) {
            padding: 0px var(--padding-lg-24px);
            gap: var(--space-3xl-64px);
        }
    }

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

        @media (max-width: 1023px) {
            padding-bottom: 0px;
        }
    }

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

        width: 680px;
        height: auto;

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

        transition: opacity 1s ease-in-out;

        @media (max-width: 1023px) {
            display: none;
        }
    }

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

        @media (max-width: 767px) {
            gap: var(--space-3xl-64px);
        }
    }

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

        transition:
            translate 1s ease-in-out,
            opacity 1s ease-in-out;

        @media (max-width: 767px) {
            height: 50px;
        }
    }

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

        @media (max-width: 767px) {
            gap: var(--space-xl-32px);
            width: 100%;
        }
    }

    .text-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-md-16px);
    }
    .main-title {
        font-size: 80px;
        line-height: calc(80px * 1.2);

        transition:
            translate 1s ease-in-out,
            opacity 1s ease-in-out;

        @media (max-width: 767px) {
            font-size: var(--font-mobile-h1);
            line-height: var(--line-height-mobile-h1);
        }
    }
    .subtitle {
        max-width: 630px;

        transition:
            translate 1s ease-in-out,
            opacity 1s ease-in-out;

        @media (max-width: 767px) {
            width: 100%;
        }
    }

    .call-to-action-button {
        height: 56px;
        width: fit-content;
        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;
        animation: fadeAndMoveFromLeft 1s ease-in-out forwards;

        transition:
            translate 1s ease-in-out,
            opacity 1s ease-in-out,
            transform 3s ease-in-out,

        @media (max-width: 1023px) {
            padding: var(--padding-sm-8px) var(--padding-lg-24px);
        }

        @media (max-width: 767px) {
            height: 44px;
            font-size: var(--font-mobile-h6);
            font-weight: bold;
            padding: var(--padding-sm-8px) var(--padding-lg-24px);
        }
    }

    .call-to-action-button:hover {
        background-color: #d9436a;
        transform: scale(1.02);
    }
</style>