home and about page
This commit is contained in:
@@ -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
|
||||
|
||||
60
yoga-app/src/components/about.us.with.boxes.component.tsx
Normal file
60
yoga-app/src/components/about.us.with.boxes.component.tsx
Normal 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>
|
||||
|
||||
)
|
||||
}
|
||||
34
yoga-app/src/components/achievements.component.tsx
Normal file
34
yoga-app/src/components/achievements.component.tsx
Normal 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>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
24
yoga-app/src/components/achievements.item.component.tsx
Normal file
24
yoga-app/src/components/achievements.item.component.tsx
Normal 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>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import AOS from "aos";
|
||||
|
||||
const AosComponent = ( ) => {
|
||||
useEffect(() => {
|
||||
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
offset: 120,
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
))}
|
||||
|
||||
@@ -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 (<></> );
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
16
yoga-app/src/components/text.with.image.component.tsx
Normal file
16
yoga-app/src/components/text.with.image.component.tsx
Normal 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} /> }
|
||||
</>
|
||||
);
|
||||
}
|
||||
44
yoga-app/src/components/text.with.right.image.component.tsx
Normal file
44
yoga-app/src/components/text.with.right.image.component.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
47
yoga-app/src/components/text.with.right.left.component.tsx
Normal file
47
yoga-app/src/components/text.with.right.left.component.tsx
Normal 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>
|
||||
|
||||
)
|
||||
}
|
||||
27
yoga-app/src/components/yogaDiscountComponent.tsx
Normal file
27
yoga-app/src/components/yogaDiscountComponent.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user