home and about page

This commit is contained in:
Schneider Roland
2025-01-26 11:06:15 +01:00
parent 86dda89db9
commit 04c436cb34
76 changed files with 2036 additions and 176 deletions

View File

@@ -4,7 +4,7 @@ import {
YogaAboutUsComponent_Plain
} from "@/types/generated-strapi-interfaces/api/yoga-about-us-component";
import {StrapiFile} from "@/types/types";
import strapiApi from "@/app/api/strapi/strapi-api";
import strapiApi from "@/api/strapi/strapi-api";
export interface Props{
data: YogaAboutUsComponent_Plain

View File

@@ -0,0 +1,60 @@
import YogaImageComponent from "@/components/yoga.image.component";
import {
YogaAboutUsWithBoxesComponent_Plain
} from "@/types/generated-strapi-interfaces/api/yoga-about-us-with-boxes-component";
export interface Props{
config: YogaAboutUsWithBoxesComponent_Plain
}
export default function AboutUsWithBoxesComponent({ config: {title,header,description,image, box1,box2,box3,box4}}: Props){
return (
<section className="aboutpage_aboutus_section">
<div className="container">
<div className="row">
<div className="col-lg-7 col-md-6 col-sm-12 col-xs-12">
<div className="aboutpage_aboutus_image">
<figure className="mb-0"><YogaImageComponent src="./assets/images/about_page_aboutus_image.png" alt="" className="img-fluid" /></figure>
</div>
<figure className="aboutus_top_shape left_shape mb-0">
<YogaImageComponent src="./assets/images/aboutus_top_shape.png" alt="" className="img-fluid" />
</figure>
<figure className="aboutus_bottom_shape left_shape mb-0">
<YogaImageComponent src="./assets/images/aboutus_bottom_shape.png" alt="" className="img-fluid" />
</figure>
</div>
<div className="col-lg-5 col-md-6 col-sm-12 col-xs-12" data-aos="fade-right">
<div className="aboutpage_aboutus_content">
<h5>{title}</h5>
<h2>{header}</h2>
<p className="margin_bottom">{description}</p>
<div className="box_wrapper">
<div className="box">
<i className="fa-solid fa-check" aria-hidden="true"></i>
<span>{box1}</span>
</div>
<div className="box mr-0">
<i className="fa-solid fa-check" aria-hidden="true"></i>
<span>{box2}</span>
</div>
</div>
<div className="box_wrapper">
<div className="box">
<i className="fa-solid fa-check" aria-hidden="true"></i>
<span>{box3}</span>
</div>
<div className="box mr-0">
<i className="fa-solid fa-check" aria-hidden="true"></i>
<span>{box4}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
)
}

View File

@@ -0,0 +1,34 @@
import {YogaAchivementsComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-achivements-component";
import AchievementsItemComponent from "@/components/achievements.item.component";
export interface Props{
config: YogaAchivementsComponent_Plain
}
export default function AchievementsComponent({
config: {
achievements,
title,header,description
}
}: Props){
console.info("achievements",achievements)
return (
<section className="achievement_section">
<div className="container">
<div className="row">
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div className="achievement_content">
<h5>{title}</h5>
<h2>{header}</h2>
<p>{description}</p>
</div>
</div>
</div>
<div className="row" data-aos="fade-up">
{achievements && achievements.map( achievement => <AchievementsItemComponent key={achievement.id} achievement={achievement} />)}
</div>
</div>
</section>
);
}

View File

@@ -0,0 +1,24 @@
import YogaImageComponent from "@/components/yoga.image.component";
import {YogaAchivement_Plain} from "@/types/generated-strapi-interfaces/api/yoga-achivement";
import {StrapiFile} from "@/types/types";
import strapiApi from "@/api/strapi/strapi-api";
export interface Props{
achievement: YogaAchivement_Plain
}
export default function AchievementsItemComponent({achievement
:{ image,title}
}: Props){
const imageFile: StrapiFile = image as StrapiFile;
return (
<div className="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div className="logo_wrapper">
<figure className="mb-0"><YogaImageComponent src={strapiApi.getImageUrl(imageFile?.url)} alt="" className="img-fluid"/></figure>
</div>
</div>
);
}

View File

@@ -5,6 +5,7 @@ import AOS from "aos";
const AosComponent = ( ) => {
useEffect(() => {
AOS.init({
duration: 1000,
offset: 120,

View File

@@ -20,7 +20,7 @@ const BlogPostsComponent = ( {config: { title,header,description,posts, button}
</div>
</div>
<div className="row" data-aos="fade-up">
{teaserPosts.map( value =><BlogSinglePostComponent post={value} /> )}
{teaserPosts.map( value =><BlogSinglePostComponent key={value.name} post={value} /> )}
</div>
<div className="btn_wrapper">
<a href={button?.link} className="text-decoration-none view_blog">{button?.label}</a>

View File

@@ -2,7 +2,7 @@ import YogaImageComponent from "@/components/yoga.image.component";
import {YogaBlogPostsComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-blog-posts-component";
import {YogaBlogPost_Plain} from "@/types/generated-strapi-interfaces/api/yoga-blog-post";
import {StrapiFile} from "@/types/types";
import strapiApi from "@/app/api/strapi/strapi-api";
import strapiApi from "@/api/strapi/strapi-api";
export interface Props {
post: YogaBlogPost_Plain & {documentId?: string}

View File

@@ -29,7 +29,7 @@ const FeedbackComponent = ({ config: { feedbacks }}: Props) => {
<div id="carouselExampleControls" className="carousel slide" data-ride="carousel">
<div className="carousel-inner">
{feedbacks && feedbacks.map( (feedback,i) => {
return (<FeedbackItemComponent active={index == i} config={feedback} />)
return (<FeedbackItemComponent key={feedback.id} active={index == i} config={feedback} />)
} )}
</div>
<a className="carousel-control-prev" href="#carouselExampleControls" role="button"

View File

@@ -1,10 +1,7 @@
import YogaImageComponent from "@/components/yoga.image.component";
import {
YogaCustomerFeedbackComponent_Plain
} from "@/types/generated-strapi-interfaces/api/yoga-customer-feedback-component";
import {YogaCustomerFeedback_Plain} from "@/types/generated-strapi-interfaces/api/yoga-customer-feedback";
import {StrapiFile} from "@/types/types";
import strapiApi from "@/app/api/strapi/strapi-api";
import strapiApi from "@/api/strapi/strapi-api";
import clsx from "clsx";
export interface Props {

View File

@@ -52,7 +52,7 @@ const FooterComponent = ({ config: {
<h4>{quickLinksHeader}</h4>
{links && <ul className="list-unstyled">
{ links.map(link => (
<li>
<li key={link.linkHref}>
<Link href={link.linkHref!}>{link.linkLabel}</Link>
</li>
))}

View File

@@ -1,17 +1,26 @@
'use client'
import { useEffect} from "react";
import {useEffect, useState} from "react";
import { init } from 'ityped'
const ITypedComponent = ( ) => {
export interface Props{
text: string;
}
const ITypedComponent = ( {text}: Props ) => {
const [ready, setReady] = useState(true);
useEffect(() => {
// if ( ready ){
// return;
// }
init(document.querySelector('.ityped') as Element,{
strings: ['Body & Soul'],
strings: [text],
typeSpeed: 150,
backSpeed: 150,
loop: true
})
}, []);
setReady(true)
}, [ready]);
return (<></> );
}

View File

@@ -1,6 +1,18 @@
import YogaImageComponent from "@/components/yoga.image.component";
import {YogaMainHeaderComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-main-header-component";
export interface Props{
config: YogaMainHeaderComponent_Plain
}
const MainHeaderComponent = ({ config: {
title,
header,
headerIType,
description,
button,
image
}}: Props) => {
const MainHeaderComponent = () => {
return (
<div className="banner-section-outer">
<header>
@@ -106,11 +118,11 @@ const MainHeaderComponent = () => {
<div className="row" data-aos="fade-up">
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 text-md-left text-center">
<div className="banner-section-content">
<h5>Start a Happy Life</h5>
<h1 data-aos="fade-up">Start Healing Your Mind, <span className="ityped"></span></h1>
<p data-aos="fade-right">Duis aute irure dolor in reprehenderit in volurate velit cillum nulla pariatur nostrud exercitation.</p>
<h5>{title}</h5>
<h1 data-aos="fade-up">{header} <span className="ityped"></span></h1>
<p data-aos="fade-right">{description}</p>
<div className="btn_wrapper" data-aos="fade-up">
<a className="text-decoration-none getstarted_btn" href="/index">Get Started</a>
{button && <a className="text-decoration-none getstarted_btn" href={button.link}>{button.label}</a> }
</div>
<a className="top-btn" href="/index#footer_section">
<i className="fa-solid fa-arrow-down-long"></i>

View File

@@ -1,7 +1,7 @@
import {YogaPrice_Plain} from "@/types/generated-strapi-interfaces/api/yoga-price";
import YogaImageComponent from "@/components/yoga.image.component";
import {StrapiFile} from "@/types/types";
import strapiApi from "@/app/api/strapi/strapi-api";
import strapiApi from "@/api/strapi/strapi-api";
export interface Props{
config: YogaPrice_Plain

View File

@@ -0,0 +1,16 @@
import TextWithRightImage from "@/components/text.with.right.image.component";
import TextWithLeftImage from "@/components/text.with.right.left.component";
import {YogaTextWithImageComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-text-with-image-component";
export interface Props{
config: YogaTextWithImageComponent_Plain
}
export default function TextWithImageComponent({ config}: Props){
const {imagePosition} = config || {};
return (
<>
{ imagePosition == 'Right' && <TextWithRightImage config={config} /> }
{ imagePosition == 'Left' && <TextWithLeftImage config={config} /> }
</>
);
}

View File

@@ -0,0 +1,44 @@
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 TextWithRightImage ({config: {
title,header,image,description,button
}}: Props){
const strapiFile = image as StrapiFile;
const imageUrl = strapiApi.getImageUrl(strapiFile.url)
return (
<section className="mission_section">
<div className="container">
<div className="mission_box">
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12" data-aos="fade-up">
<div className="mission_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 className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div className="mission_image">
<figure className="mb-0"><YogaImageComponent src={imageUrl} alt="" className="img-fluid" /></figure>
</div>
</div>
</div>
</div>
<figure className="mission_right_shape right_shape mb-0">
<YogaImageComponent src="./assets/images/our_mission_shape.png" alt="" className="img-fluid" />
</figure>
</div>
</section>
)
}

View File

@@ -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>
)
}

View File

@@ -0,0 +1,27 @@
import {YogaDiscountComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-discount-component";
export interface Props{
config: YogaDiscountComponent_Plain
}
export default function YogaDiscountComponent({config: {
headerPart1,headerDiscount,headerPart2,button,description
}}: Props){
return (
<section className="discount_section">
<div className="container">
<div className="row" data-aos="fade-up">
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div className="discount_content">
<h2>{headerPart1}<span>{headerDiscount}</span>{headerPart2}</h2>
<p>{description}</p>
{button && <div className="btn_wrapper">
<a href={button.link} className="text-decoration-none get_started">{button.label}</a>
</div>
}
</div>
</div>
</div>
</div>
</section>
);
}