footer, feedback, subscribe
This commit is contained in:
Schneider Roland
@@ -1,11 +1,13 @@
|
||||
import YogaImageComponent from "@/components/yoga.image.component";
|
||||
import {YogaBlogPostsComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-blog-posts-component";
|
||||
import BlogSinglePostComponent from "@/components/blog.single.post.component";
|
||||
|
||||
export interface Props {
|
||||
|
||||
config: YogaBlogPostsComponent_Plain
|
||||
}
|
||||
const BlogPostsComponent = ( {config: { title,header,description,posts} }: Props) => {
|
||||
const BlogPostsComponent = ( {config: { title,header,description,posts, button} }: Props) => {
|
||||
const teaserPosts = posts?.length ? posts.slice(0,2) : [];
|
||||
return (<section className="blog_posts_section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
@@ -18,37 +20,10 @@ const BlogPostsComponent = ( {config: { title,header,description,posts} }: Props
|
||||
</div>
|
||||
</div>
|
||||
<div className="row" data-aos="fade-up">
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<div className="blog_posts_image position-relative">
|
||||
<figure className="mb-0"><YogaImageComponent src="/assets/images/blog_posts_1.png" alt=""
|
||||
className="img-fluid"/></figure>
|
||||
<div className="blog_posts_image_content">
|
||||
<span>YOGA</span>
|
||||
<h4>Yoga Effects on Brain Health: A Systematic Review of the Current Literature</h4>
|
||||
<div className="icon_wrapper">
|
||||
<a href="/single-post.html" className="text-decoration-none"><i
|
||||
className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<div className="blog_posts_image position-relative">
|
||||
<figure className="mb-0"><YogaImageComponent src="/assets/images/blog_posts_2.png" alt=""
|
||||
className="img-fluid"/></figure>
|
||||
<div className="blog_posts_image_content">
|
||||
<span>FITNESS</span>
|
||||
<h4>Maintaining a regular yoga practice can provide physical health</h4>
|
||||
<div className="icon_wrapper">
|
||||
<a href="/single-post.html" className="text-decoration-none"><i
|
||||
className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{teaserPosts.map( value =><BlogSinglePostComponent post={value} /> )}
|
||||
</div>
|
||||
<div className="btn_wrapper">
|
||||
<a href="/single-post.html" className="text-decoration-none view_blog">View All Blogs</a>
|
||||
<a href={button?.link} className="text-decoration-none view_blog">{button?.label}</a>
|
||||
</div>
|
||||
<figure className="blog_posts_left_shape left_shape mb-0">
|
||||
<YogaImageComponent src="/assets/images/blog_posts_left_shape.png" alt="" className="img-fluid"/>
|
||||
|
||||
34
yoga-app/src/components/blog.single.post.component.tsx
Normal file
34
yoga-app/src/components/blog.single.post.component.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
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";
|
||||
|
||||
export interface Props {
|
||||
post: YogaBlogPost_Plain & {documentId?: string}
|
||||
}
|
||||
|
||||
const BlogSinglePostComponent = ({post: {header,teaserImage,tags,documentId} }: Props) => {
|
||||
const teaserFile: StrapiFile = teaserImage as StrapiFile;
|
||||
const tagText = tags?.length ? tags[0].tag : null;
|
||||
return (
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<div className="blog_posts_image position-relative">
|
||||
<figure className="mb-0">
|
||||
<YogaImageComponent src={strapiApi.getImageUrl( teaserFile.url ) } alt=""
|
||||
className="img-fluid"/>
|
||||
</figure>
|
||||
<div className="blog_posts_image_content">
|
||||
<span>{tagText}</span>
|
||||
<h4>{header}</h4>
|
||||
<div className="icon_wrapper">
|
||||
<a href={"/blog/"+documentId} className="text-decoration-none"><i
|
||||
className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogSinglePostComponent;
|
||||
65
yoga-app/src/components/feedbackComponent.tsx
Normal file
65
yoga-app/src/components/feedbackComponent.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
'use client'
|
||||
import YogaImageComponent from "@/components/yoga.image.component";
|
||||
import {
|
||||
YogaCustomerFeedbackComponent_Plain
|
||||
} from "@/types/generated-strapi-interfaces/api/yoga-customer-feedback-component";
|
||||
import FeedbackItemComponent from "@/components/feedbackItemComponent";
|
||||
import {useState} from "react";
|
||||
|
||||
export interface Props{
|
||||
config: YogaCustomerFeedbackComponent_Plain
|
||||
}
|
||||
|
||||
const FeedbackComponent = ({ config: { feedbacks }}: Props) => {
|
||||
|
||||
const [index, setIndex] = useState(0);
|
||||
const move = (val: number) =>{
|
||||
setIndex(prevState => {
|
||||
let i = prevState;
|
||||
i = i + val;
|
||||
i = Math.min( Math.max(i,0), feedbacks.length )
|
||||
return i;
|
||||
})
|
||||
}
|
||||
return (
|
||||
<div className="testimonial_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 id="carouselExampleControls" className="carousel slide" data-ride="carousel">
|
||||
<div className="carousel-inner">
|
||||
{feedbacks && feedbacks.map( (feedback,i) => {
|
||||
return (<FeedbackItemComponent active={index == i} config={feedback} />)
|
||||
} )}
|
||||
</div>
|
||||
<a className="carousel-control-prev" href="#carouselExampleControls" role="button"
|
||||
data-slide="prev"
|
||||
onClick={() => move(-1)}
|
||||
>
|
||||
<i className="fa-solid fa-arrow-left-long"></i>
|
||||
<span className="sr-only">Previous</span>
|
||||
</a>
|
||||
<a className="carousel-control-next" href="#carouselExampleControls" role="button"
|
||||
data-slide="next"
|
||||
onClick={() => move(1)}
|
||||
|
||||
>
|
||||
<i className="fa-solid fa-arrow-right-long"></i>
|
||||
<span className="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure className="testimonial_left_shape left_shape mb-0">
|
||||
<YogaImageComponent src="/assets/images/testimonial_left_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
<figure className="testimonial_right_shape right_shape mb-0">
|
||||
<YogaImageComponent src="/assets/images/testimonial_right_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default FeedbackComponent;
|
||||
32
yoga-app/src/components/feedbackItemComponent.tsx
Normal file
32
yoga-app/src/components/feedbackItemComponent.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
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 clsx from "clsx";
|
||||
|
||||
export interface Props {
|
||||
config: YogaCustomerFeedback_Plain,
|
||||
active: boolean
|
||||
}
|
||||
|
||||
const FeedbackComponent = ({active,config: {customerName, feedback, customerImage, customerDescription}}: Props) => {
|
||||
const imageFile: StrapiFile = customerImage as StrapiFile;
|
||||
return (
|
||||
<div className={clsx("carousel-item ", {"active":active })}>
|
||||
<div className="testimonial_content">
|
||||
<i className="fa-solid fa-quote-left"></i>
|
||||
<p className="testimonial_paragraph">“{feedback}”</p>
|
||||
<figure><YogaImageComponent src={strapiApi.getImageUrl(imageFile.url)} alt=""
|
||||
className="img-fluid"/></figure>
|
||||
<p className="testimonial_person_name">{customerName}</p>
|
||||
<span>{customerDescription}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default FeedbackComponent;
|
||||
@@ -1,8 +1,24 @@
|
||||
import Link from "next/link";
|
||||
import YogaImageComponent from "@/components/yoga.image.component";
|
||||
import {YogaFooter_Plain} from "@/types/generated-strapi-interfaces/api/yoga-footer";
|
||||
|
||||
export interface Props{
|
||||
config: YogaFooter_Plain
|
||||
}
|
||||
const FooterComponent = ({ config: {
|
||||
aboutUsHeader,
|
||||
aboutUsContent,
|
||||
quickLinksHeader,
|
||||
links,
|
||||
contactInfoHeader,
|
||||
contactUsEmail,
|
||||
contactUsLocation,
|
||||
contactUsPhoneNumber,
|
||||
copyRight
|
||||
} }: Props) => {
|
||||
|
||||
|
||||
|
||||
const FooterComponent = () => {
|
||||
return (<section className="footer-section" id="footer_section">
|
||||
<div className="container">
|
||||
<div className="middle-portion">
|
||||
@@ -17,11 +33,10 @@ const FooterComponent = () => {
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12">
|
||||
<div className="about_col">
|
||||
<h4>About Us</h4>
|
||||
<h4>{aboutUsHeader}</h4>
|
||||
<ul className="list-unstyled">
|
||||
<li>
|
||||
<p>Quisuam est rui dolorem ipsum quia dolor sit amet, consectetur adipisci velit
|
||||
sea...</p>
|
||||
<p>{aboutUsContent}</p>
|
||||
</li>
|
||||
<li className="icons"><a href="#"><i className="fa-brands fa-facebook-f"
|
||||
aria-hidden="true"></i></a></li>
|
||||
@@ -34,42 +49,33 @@ const FooterComponent = () => {
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-md-block d-none">
|
||||
<div className="links_col">
|
||||
<h4>Quick Links</h4>
|
||||
<ul className="list-unstyled">
|
||||
<li>
|
||||
<Link href="/index.html">Home</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/about.html">About Us</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/services.html">Services</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/team.html">Team</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact.html">Contact Us</Link>
|
||||
</li>
|
||||
<h4>{quickLinksHeader}</h4>
|
||||
{links && <ul className="list-unstyled">
|
||||
{ links.map(link => (
|
||||
<li>
|
||||
<Link href={link.linkHref!}>{link.linkLabel}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-sm-block d-none">
|
||||
<div className="contact_col">
|
||||
<h4>Contact Info</h4>
|
||||
<h4>{contactInfoHeader}</h4>
|
||||
<ul className="list-unstyled">
|
||||
<li className="contact_icons">
|
||||
{ contactUsPhoneNumber && <li className="contact_icons">
|
||||
<i className="fa-solid fa-phone"></i>
|
||||
<a href="tel:+61383766284" className="text-decoration-none">+61 3 8376 6284</a>
|
||||
</li>
|
||||
<a href={contactUsPhoneNumber.linkHref} className="text-decoration-none">{contactUsPhoneNumber.linkLabel}</a>
|
||||
</li>}
|
||||
<li className="contact_icons">
|
||||
<i className="fa-sharp fa-solid fa-envelope"></i>
|
||||
<a href="mailto:Info@yogastic.om"
|
||||
className="text-decoration-none">Info@yogastic.om</a>
|
||||
<a href={contactUsEmail?.linkHref}
|
||||
className="text-decoration-none">{contactUsEmail?.linkLabel}</a>
|
||||
</li>
|
||||
<li className="mb-0">
|
||||
<i className="fa-solid fa-location-dot location"></i>
|
||||
<span>21 King Street Melbourne, 3000, Australia</span>
|
||||
<span>{contactUsLocation?.linkLabel}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -79,7 +85,7 @@ const FooterComponent = () => {
|
||||
</div>
|
||||
<div className="bottom-portion">
|
||||
<div className="copyright col-xl-12">
|
||||
<p>Copyright 2022, Yogastic.com All Rights Reserved.</p>
|
||||
<p>{copyRight}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer_shape right_shape">
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
import YogaImageComponent from "@/components/yoga.image.component";
|
||||
|
||||
|
||||
const QuotesComponent = () => {
|
||||
return (
|
||||
<div className="testimonial_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 id="carouselExampleControls" className="carousel slide" data-ride="carousel">
|
||||
<div className="carousel-inner">
|
||||
<div className="carousel-item active">
|
||||
<div className="testimonial_content">
|
||||
<i className="fa-solid fa-quote-left"></i>
|
||||
<p className="testimonial_paragraph">“Quisuam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consec velit sed ruia non nuam
|
||||
eius modi tempora incidunt ut magnam aliruam auzerat voluptatem autenim rea
|
||||
minima
|
||||
exercita ionem ullam corporis suscitnis officiis debitis aut rerum
|
||||
necessitatibus saepe
|
||||
evenietut aer voluptates”</p>
|
||||
<figure><YogaImageComponent src="/assets/images/testimonial_image.png" alt=""
|
||||
className="img-fluid"/></figure>
|
||||
<p className="testimonial_person_name">Himala Joerge</p>
|
||||
<span>Happy client</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="carousel-item">
|
||||
<div className="testimonial_content">
|
||||
<i className="fa-solid fa-quote-left"></i>
|
||||
<p className="testimonial_paragraph">“Quisuam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consec velit sed ruia non nuam
|
||||
eius modi tempora incidunt ut magnam aliruam auzerat voluptatem autenim rea
|
||||
minima
|
||||
exercita ionem ullam corporis suscitnis officiis debitis aut rerum
|
||||
necessitatibus saepe
|
||||
evenietut aer voluptates”</p>
|
||||
<figure><YogaImageComponent src="/assets/images/testimonial_image.png" alt=""
|
||||
className="img-fluid"/></figure>
|
||||
<p className="testimonial_person_name">Himala Joerge</p>
|
||||
<span>Happy client</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a className="carousel-control-prev" href="#carouselExampleControls" role="button"
|
||||
data-slide="prev">
|
||||
<i className="fa-solid fa-arrow-left-long"></i>
|
||||
<span className="sr-only">Previous</span>
|
||||
</a>
|
||||
<a className="carousel-control-next" href="#carouselExampleControls" role="button"
|
||||
data-slide="next">
|
||||
<i className="fa-solid fa-arrow-right-long"></i>
|
||||
<span className="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure className="testimonial_left_shape left_shape mb-0">
|
||||
<YogaImageComponent src="/assets/images/testimonial_left_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
<figure className="testimonial_right_shape right_shape mb-0">
|
||||
<YogaImageComponent src="/assets/images/testimonial_right_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default QuotesComponent;
|
||||
@@ -1,6 +1,11 @@
|
||||
import YogaImageComponent from "@/components/yoga.image.component";
|
||||
|
||||
const SubscribeComponent = () => {
|
||||
import {
|
||||
YogaSubscribeNowComponent_Plain
|
||||
} from "@/types/generated-strapi-interfaces/api/yoga-subscribe-now-component";
|
||||
export interface Props{
|
||||
config: YogaSubscribeNowComponent_Plain
|
||||
}
|
||||
const SubscribeComponent = ({config: {title,header,placeHolderEmail,buttonSubscribeLabel}}: Props) => {
|
||||
return (
|
||||
<section className="subscribe_section">
|
||||
<div className="container">
|
||||
@@ -8,14 +13,14 @@ const SubscribeComponent = () => {
|
||||
<div className="row">
|
||||
<div className="col-lg-7 col-md-7 col-sm-6 col-xs-12" data-aos="fade-right">
|
||||
<div className="subscribe_content">
|
||||
<h5>Subscribe now</h5>
|
||||
<h2>Get the Latest Updates With Our Newletter</h2>
|
||||
<h5>{title}</h5>
|
||||
<h2>{header}</h2>
|
||||
<form method="POST">
|
||||
<div className="form-row">
|
||||
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<input type="email" name="email" id="emailadd" className="form-control"
|
||||
placeholder="Enter You Email"/>
|
||||
<button type="submit" name="btnsubmit" id="submitbutton">Subscribe</button>
|
||||
placeholder={placeHolderEmail}/>
|
||||
<button type="submit" name="btnsubmit" id="submitbutton">{buttonSubscribeLabel}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user