home and about page

yoga-app/src/components/text.with.right.left.component.tsx

@@ -0,0 +1,47 @@
+import YogaImageComponent from "@/components/yoga.image.component";
+import {YogaTextWithImageComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-text-with-image-component";
+import {StrapiFile} from "@/types/types";
+import strapiApi from "@/api/strapi/strapi-api";
+
+export interface Props{
+    config: YogaTextWithImageComponent_Plain
+}
+
+export default function TextWithLeftImage ({config: {
+    title,header,image,description,button
+}}: Props){
+
+    const strapiFile = image as StrapiFile;
+    const imageUrl = strapiApi.getImageUrl(strapiFile.url)
+
+
+    return (
+        <section className="vision_section">
+            <div className="container">
+                <div className="vision_box">
+                    <div className="row">
+                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                            <div className="vision_image">
+                                <figure className="mb-0"><YogaImageComponent src={imageUrl} alt="" className="img-fluid" /></figure>
+                            </div>
+                        </div>
+                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12" data-aos="fade-up">
+                            <div className="vision_content">
+                                <h5>{title}</h5>
+                                <h2>{header}</h2>
+                                <p>{description}</p>
+                                <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="vision_left_shape left_shape mb-0">
+                    <YogaImageComponent src="./assets/images/our_vision_shape.png" alt="" className="img-fluid" />
+                </figure>
+            </div>
+        </section>
+        
+    )
+}