You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
28 lines
2.0 KiB
JavaScript
28 lines
2.0 KiB
JavaScript
import React from "react";
|
|
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
|
|
import { AiOutlineClockCircle } from "@react-icons/all-files/ai/AiOutlineClockCircle";
|
|
import { AiOutlineTeam } from "@react-icons/all-files/ai/AiOutlineTeam";
|
|
const Hero = ({title, img, time, members, formats}) => {
|
|
return (
|
|
<section className="h-[60vh] min-h-[300px]">
|
|
<div className="mr-0 relative h-full flex items-center bg-gray-50">
|
|
<div className="relative h-full max-sm:w-full ml-[calc(50%-768px)] max-lg:ml-[calc(50%-384px)] max-xl:ml-[calc(50%-512px)] max-2xl:ml-[calc(50%-640px)] max-md:mx-auto z-10 flex">
|
|
<h1 className="relative max-sm:w-full left-1/3 max-md:left-0 max-md:text-center leading-tight text-7xl max-lg:text-5xl max-xl:text-6xl max-md:text-4xl max-md:bg-white max-md:bg-opacity-70 max-md:p-3 font-bold italic min-w-[650px] max-md:min-w-0 max-lg:min-w-[430px] max-xl:min-w-[540px] text-slate-800 drop-shadow-[0_5px_5px_rgba(255,255,255,.3)] self-center">{title}</h1>
|
|
{(time || members || formats) &&
|
|
<div className="absolute bottom-3 max-md:bottom-0 flex items-center last:[&>p]:!mr-0 flex-wrap max-md:p-3 max-md:bg-gray-100">
|
|
{time && <p className="flex mr-4 items-center text-lg max-sm:text-sm text-slate-800"><AiOutlineClockCircle/>: {time}</p>}
|
|
{members && <p className="flex mr-4 items-center text-lg max-sm:text-sm text-slate-800"><AiOutlineTeam/>: {members}</p>}
|
|
{formats && <p className="max-sm:text-sm"><b>Доступные форматы:</b> {formats}</p>}
|
|
</div>
|
|
}
|
|
|
|
</div>
|
|
<div className="basis-full h-[60vh] min-h-[300px] max-md:absolute max-md:w-full">
|
|
<GatsbyImage className='w-full h-[inherit]' image={getImage(img)} alt="logo" placeholder="none"/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default Hero; |