51 lines
2.6 KiB
TypeScript
51 lines
2.6 KiB
TypeScript
import YogaImageComponent from "@/components/yoga.image.component";
|
|
import NextBlocksRenderer from "@/components/next.blocks.renderer";
|
|
import {BlockWithImageComponentProps} from "@/components/block.with.image.component";
|
|
import styles from './block.with.left.image.component.module.css';
|
|
import clsx from "clsx";
|
|
|
|
|
|
export default function BlockWithLeftImage ( {
|
|
id,title,header, image: {
|
|
url,
|
|
},block,button
|
|
} : BlockWithImageComponentProps){
|
|
|
|
|
|
return (
|
|
<section className={clsx("block_with_left_image_section","block_with_image","block_with_left_image",styles.blockWithLeftImage)} id={id}>
|
|
<div className="container">
|
|
<div className="block_with_left_image_box">
|
|
<div className="row">
|
|
{ url && <div className="block_with_left_image_image d-lg-none d-md-none col-sm-12 col-xs-12">
|
|
<figure className="mb-0">
|
|
<YogaImageComponent src={url} alt=""
|
|
className={clsx("img-fluid", styles.leftImage)}/>
|
|
</figure>
|
|
</div>
|
|
}
|
|
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
|
|
<div className={ clsx("block_with_image_content","block_with_image_content","block_with_left_image_content",styles.blockLeftblock_with_imageContent)}>
|
|
{url && <div className="block_with_left_image_image d-lg-block d-md-block d-sm-none d-xs-none d-none">
|
|
<figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-left", styles.leftImage)}/></figure>
|
|
</div>
|
|
}
|
|
<h5>{title}</h5>
|
|
<h2>{header}</h2>
|
|
<NextBlocksRenderer content={ block } />
|
|
<div className="btn_wrapper">
|
|
{button && <a href={button.link} className="text-decoration-none read_more_btn">{button.label}</a>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<figure className="block_with_image_left_shape left_shape mb-0">
|
|
<YogaImageComponent src="./assets/images/our_block_with_image_shape.png" alt="" className="img-fluid" />
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
)
|
|
}
|