import Link from "next/link";
import Image from "next/image";
import ozonLogo from "@/shared/assets/images/озон.svg";
import wildBerriesLogo from "@/shared/assets/images/вб.svg";
import yandexMarketLogo from "@/shared/assets/images/ям.svg";
import person from "@/shared/assets/images/парень-и-лого-мп.png";
import {Container} from "@/shared/components/Container/Container";
import styles from './HeroSection.module.css';


export function HeroSection() {
    return (
        <section className={styles.root}>
            <Container>
                <div className={styles.containerInner}>
                    <div className={styles.infoBlock}>
                        <h2 className={styles.infoHeading}>Бизнес на маркетплейсе из любой точки мира</h2>
                        <p className={styles.infoAdditional}>Дропшиппинг, фулфилмент и внутренняя аналитика в одном
                            сервисе</p>
                        <Link href={''} className={styles.joinButton}>Стать партнёром</Link>
                    </div>
                </div>
                <div className={styles.bgWrap}>
                    <Image
                        src={person}
                        placeholder={"blur"}
                        alt={""}
                        sizes="100vw"
                    />
                </div>
            </Container>
            <div className={styles.marketPlaces}>
                <Image src={ozonLogo} alt={'Логотип озона'}/>
                <Image src={wildBerriesLogo} alt={'Логотип вайлдберис'}/>
                <Image src={yandexMarketLogo} alt={'Логотип яндекс маркета'}/>
            </div>
        </section>
    );
};