add nextjs app: yoga-app
This commit is contained in:
Schneider Roland
38
yoga-app/src/components/about.us.component.tsx
Normal file
38
yoga-app/src/components/about.us.component.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
|
||||
const AboutUsComponent = () =>{
|
||||
return (
|
||||
<section className="aboutus_section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-7 col-md-7 col-sm-12 col-xs-12">
|
||||
<div className="aboutus_image">
|
||||
<figure className="mb-0"><img src="/assets/images/aboutus_image.png" alt="" className="img-fluid"/></figure>
|
||||
</div>
|
||||
<figure className="aboutus_top_shape left_shape mb-0">
|
||||
<img src="/assets/images/aboutus_top_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
<figure className="aboutus_bottom_shape left_shape mb-0">
|
||||
<img src="/assets/images/aboutus_bottom_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
<div className="col-lg-5 col-md-5 col-sm-12 col-xs-12" data-aos="fade-right">
|
||||
<div className="aboutus_content">
|
||||
<h5>About us</h5>
|
||||
<h2>Take Your Yoga to the Next Level</h2>
|
||||
<p>Quis autem vel eum iure reprehenderit qui in eao voluptate velit esse quam nihil molestiae consequatur vel illum.</p>
|
||||
<div className="aboutus_line_wrapper">
|
||||
<h6>Modi tempora incidunt ut labore dolore magnam aliquam auerat volutaem.</h6>
|
||||
<figure className="mb-0 purple_line"><img src="/assets/images/aboutus_line.png" alt="" className="img-fluid" /></figure>
|
||||
</div>
|
||||
<div className="btn_wrapper">
|
||||
<a href="/about" className="text-decoration-none get_started_btn">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default AboutUsComponent;
|
||||
17
yoga-app/src/components/aos.component.tsx
Normal file
17
yoga-app/src/components/aos.component.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect} from "react";
|
||||
import AOS from "aos";
|
||||
|
||||
const AosComponent = ( ) => {
|
||||
useEffect(() => {
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
offset: 120,
|
||||
easing: 'ease-in-out'
|
||||
})
|
||||
}, []);
|
||||
return (<></> );
|
||||
}
|
||||
|
||||
export default AosComponent;
|
||||
60
yoga-app/src/components/blog.posts.component.tsx
Normal file
60
yoga-app/src/components/blog.posts.component.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
|
||||
|
||||
const BlogPostsComponent = () => {
|
||||
return (<section className="blog_posts_section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<div className="blog_posts_content">
|
||||
<h5>Blog Posts</h5>
|
||||
<h2>Our News Feed</h2>
|
||||
<p>Autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
|
||||
consequatur vel illum qui dolorem eum fugiat</p>
|
||||
</div>
|
||||
</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"><img 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"><img 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>
|
||||
</div>
|
||||
<div className="btn_wrapper">
|
||||
<a href="/single-post.html" className="text-decoration-none view_blog">View All Blogs</a>
|
||||
</div>
|
||||
<figure className="blog_posts_left_shape left_shape mb-0">
|
||||
<img src="/assets/images/blog_posts_left_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
<figure className="blog_posts_right_shape right_shape mb-0">
|
||||
<img src="/assets/images/blog_posts_right_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogPostsComponent;
|
||||
74
yoga-app/src/components/contact.us.component.tsx
Normal file
74
yoga-app/src/components/contact.us.component.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
|
||||
|
||||
const ContactUsComponent = () => {
|
||||
return (
|
||||
<section className="get_in_touch_section">
|
||||
<div className="container">
|
||||
<div className="row" data-aos="fade-up">
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<div className="get_in_touch_content">
|
||||
<h5>Get in touch</h5>
|
||||
<h2>Get a Free Consultation Now</h2>
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-md-6 col-sm-6">
|
||||
<div className="form-group mb-0">
|
||||
<input type="text" name="fname" id="fname" className="form-control"
|
||||
placeholder="First Name"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6 col-sm-6">
|
||||
<div className="form-group mb-0">
|
||||
<input type="text" name="lname" id="lname"
|
||||
className="form-control form_style" placeholder="Last Name"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6 col-sm-6">
|
||||
<div className="form-group mb-0">
|
||||
<input type="tel" name="phonenum" id="phonenum" className="form-control"
|
||||
placeholder="Phone"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6 col-sm-6">
|
||||
<div className="form-group mb-0">
|
||||
<input type="email" name="emailaddrs" id="emailaddrs"
|
||||
className="form-control form_style" placeholder="Email"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className=" form-group mb-0">
|
||||
<textarea rows="3" name="comment" id="msg" className="form-control"
|
||||
placeholder="Message"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="btn_wrapper">
|
||||
<button type="submit" name="get_started" id="started">Get Started</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-3 col-sm-2 col-xs-12 d-md-block d-none"></div>
|
||||
<div className="col-lg-3 col-md-3 col-sm-12 col-xs-12">
|
||||
<div className="get_in_touch_video position-relative">
|
||||
<a className="popup-vimeo"
|
||||
href="https://previews.customer.envatousercontent.com/6720474d-ddc3-4b86-acf1-8d093cb37b6d/watermarked_preview/watermarked_preview.mp4">
|
||||
<figure className="video_img mb-0">
|
||||
<img className="thumb img-fluid" style={{"cursor": "pointer"}}
|
||||
src="/assets/images/get_in_touch_video_icon.png" alt=""/>
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure className="get_in_touch_shape left_shape mb-0">
|
||||
<img src="/assets/images/get_in_touch_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default ContactUsComponent;
|
||||
91
yoga-app/src/components/footer.component.tsx
Normal file
91
yoga-app/src/components/footer.component.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
|
||||
|
||||
const FooterComponent = () => {
|
||||
return (<section className="footer-section" id="footer_section">
|
||||
<div className="container">
|
||||
<div className="middle-portion">
|
||||
<div className="row">
|
||||
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-lg-block d-none">
|
||||
<div className="footer_logo">
|
||||
<a href="/index.html" className="text-decoration-none">
|
||||
<figure className="mb-0"><img src="/assets/images/footer_logo.png" alt=""
|
||||
className="img-fluid"/></figure>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12">
|
||||
<div className="about_col">
|
||||
<h4>About Us</h4>
|
||||
<ul className="list-unstyled">
|
||||
<li>
|
||||
<p>Quisuam est rui dolorem ipsum quia dolor sit amet, consectetur adipisci velit
|
||||
sea...</p>
|
||||
</li>
|
||||
<li className="icons"><a href="#"><i className="fa-brands fa-facebook-f"
|
||||
aria-hidden="true"></i></a></li>
|
||||
<li className="icons"><a href="#"><i className="fa-brands fa-twitter"
|
||||
aria-hidden="true"></i></a></li>
|
||||
<li className="icons"><a href="#"><i className="fa-brands fa-linkedin-in mr-0"
|
||||
aria-hidden="true"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
<a href="/index.html">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about.html">About Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/services.html">Services</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/team.html">Team</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contact.html">Contact Us</a>
|
||||
</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>
|
||||
<ul className="list-unstyled">
|
||||
<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>
|
||||
<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>
|
||||
</li>
|
||||
<li className="mb-0">
|
||||
<i className="fa-solid fa-location-dot location"></i>
|
||||
<span>21 King Street Melbourne, 3000, Australia</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bottom-portion">
|
||||
<div className="copyright col-xl-12">
|
||||
<p>Copyright 2022, Yogastic.com All Rights Reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer_shape right_shape">
|
||||
<figure className="mb-0"><img src="/assets/images/footer_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default FooterComponent;
|
||||
147
yoga-app/src/components/header.component.tsx
Normal file
147
yoga-app/src/components/header.component.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
|
||||
const HeaderComponent = () => {
|
||||
return (
|
||||
<div className="banner-section-outer">
|
||||
<header>
|
||||
<div className="main_header">
|
||||
<div className="container-fluid">
|
||||
<nav className="navbar navbar-expand-lg navbar-light p-0">
|
||||
<a className="navbar-brand" href="/index"><figure className="mb-0"><img src="/assets/images/yogastic_logo.png" alt=""/></figure></a>
|
||||
<button className="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul className="navbar-nav">
|
||||
<li className="nav-item active">
|
||||
<a className="nav-link" href="/index">Home</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="/about">About Us</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="/services">Services</a>
|
||||
</li>
|
||||
<li className="nav-item dropdown">
|
||||
<a className="nav-link dropdown-toggle dropdown-color navbar-text-color" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false"> Pages </a>
|
||||
<div className="dropdown-menu drop-down-content">
|
||||
<ul className="list-unstyled drop-down-pages">
|
||||
<li className="nav-item">
|
||||
<a className="dropdown-item nav-link" href="/pricing">Pricing</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="dropdown-item nav-link" href="/faq">Faq</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="/team">Team</a>
|
||||
</li>
|
||||
<li className="nav-item dropdown">
|
||||
<a className="nav-link dropdown-toggle dropdown-color navbar-text-color" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false"> Blog </a>
|
||||
<div className="dropdown-menu drop-down-content">
|
||||
<ul className="list-unstyled drop-down-pages">
|
||||
<li className="nav-item">
|
||||
<a className="dropdown-item nav-link" href="/single-post">Single Post</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="dropdown-item nav-link" href="/infinite-scroll">Infinite Scroll</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="dropdown-item nav-link" href="/load-more">Load More</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="dropdown-item nav-link" href="/one-column">One Column</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="dropdown-item nav-link" href="/two-column">Two Column</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="dropdown-item nav-link" href="/three-column">Three Column</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="dropdown-item nav-link" href="/three-colum-sidbar">Three Column Sidebar</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="dropdown-item nav-link" href="/four-column">Four Column</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="dropdown-item nav-link" href="/six-column">Six Column</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link contact_us" href="/contact">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{/*<!-- SOCIAL ICONS -->*/}
|
||||
{/*<!-- SOCIAL ICONS -->*/}
|
||||
|
||||
<div className="social-icons left_icons float-left d-table" data-aos="fade-down">
|
||||
<div className="icon_content d-table-cell align-middle">
|
||||
<ul className="list-unstyled p-0 m-0">
|
||||
<li>
|
||||
<a href="#"><i className="fa-brands fa-facebook-f" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i className="fa-brands fa-twitter" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i className="fa-brands fa-linkedin-in" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<section className="banner-section">
|
||||
<div className="container-fluid">
|
||||
<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>
|
||||
<div className="btn_wrapper" data-aos="fade-up">
|
||||
<a className="text-decoration-none getstarted_btn" href="/index">Get Started</a>
|
||||
</div>
|
||||
<a className="top-btn" href="/index#footer_section">
|
||||
<i className="fa-solid fa-arrow-down-long"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<div className="banner-section-image">
|
||||
<figure className="mb-0">
|
||||
<img src="/assets/images/banner_right_image.png" alt="" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure className="banner_left_top_shape left_shape mb-0">
|
||||
<img src="/assets/images/banner_left_top_shape.png" alt="" className="img-fluid" />
|
||||
</figure>
|
||||
<figure className="banner_left_bottom_shape left_shape mb-0">
|
||||
<img src="/assets/images/banner_left_bottom_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
<figure className="banner_right_top_shape right_shape mb-0">
|
||||
<img src="/assets/images/banner_right_top_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
<figure className="banner_right_bottom_shape right_shape mb-0">
|
||||
<img src="/assets/images/banner_right_bottom_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeaderComponent;
|
||||
17
yoga-app/src/components/ityped.component.tsx
Normal file
17
yoga-app/src/components/ityped.component.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect} from "react";
|
||||
import AOS from "aos";
|
||||
|
||||
const AosComponent = ( ) => {
|
||||
useEffect(() => {
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
offset: 120,
|
||||
easing: 'ease-in-out'
|
||||
})
|
||||
}, []);
|
||||
return (<></> );
|
||||
}
|
||||
|
||||
export default AosComponent;
|
||||
90
yoga-app/src/components/our.services.component.tsx
Normal file
90
yoga-app/src/components/our.services.component.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
const OurServiceComponent = () => {
|
||||
return (
|
||||
<section className="services_section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<div className="services_content">
|
||||
<h5>Our Services</h5>
|
||||
<h2>Practice Whereever You Want Whenever You Need </h2>
|
||||
<p>Taciti fames lacinia orci finibus metus elit tempus faucibus urna nunc dui rhoncus
|
||||
aibendum vea porttitor volutrat felis massa feugiat</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row" data-aos="fade-up">
|
||||
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
|
||||
<div className="services_box_content">
|
||||
<div className="services_box_upper_portion">
|
||||
<figure className="mb-0"><img src="/assets/images/services_img_1.png" alt=""
|
||||
className="img-fluid"/></figure>
|
||||
</div>
|
||||
<div className="services_box_lower_portion">
|
||||
<h3>Prenatal Yoga</h3>
|
||||
<p>Finibus metus elit tempus faucibus urna nunc aui.</p>
|
||||
<div className="btn_wrapper">
|
||||
<a href="/services" className="text-decoration-none"><i
|
||||
className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
|
||||
<div className="services_box_content">
|
||||
<div className="services_box_upper_portion">
|
||||
<figure className="mb-0"><img src="/assets/images/services_img_2.png" alt=""
|
||||
className="img-fluid"/></figure>
|
||||
</div>
|
||||
<div className="services_box_lower_portion">
|
||||
<h3>Meditation</h3>
|
||||
<p>Ainibus metus elit tempus faucibus urna nunc cui.</p>
|
||||
<div className="btn_wrapper">
|
||||
<a href="/services" className="text-decoration-none"><i
|
||||
className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
|
||||
<div className="services_box_content">
|
||||
<div className="services_box_upper_portion">
|
||||
<figure className="mb-0"><img src="/assets/images/services_img_3.png" alt=""
|
||||
className="img-fluid"/></figure>
|
||||
</div>
|
||||
<div className="services_box_lower_portion">
|
||||
<h3>Nutrition Consultation</h3>
|
||||
<p>Binibus metus elit tempus faucibus urna nunc eui.</p>
|
||||
<div className="btn_wrapper">
|
||||
<a href="/services" className="text-decoration-none"><i
|
||||
className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
|
||||
<div className="services_box_content">
|
||||
<div className="services_box_upper_portion">
|
||||
<figure className="mb-0"><img src="/assets/images/services_img_4.png" alt=""
|
||||
className="img-fluid"/></figure>
|
||||
</div>
|
||||
<div className="services_box_lower_portion">
|
||||
<h3>Hatha Yoga</h3>
|
||||
<p>Dinibus metus elit tempus faucibus urna nunc rui.</p>
|
||||
<div className="btn_wrapper">
|
||||
<a href="/services" className="text-decoration-none"><i
|
||||
className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure className="services_left_shape left_shape mb-0">
|
||||
<img src="/assets/images/services_left_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default OurServiceComponent;
|
||||
78
yoga-app/src/components/our.specialities.component.tsx
Normal file
78
yoga-app/src/components/our.specialities.component.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
|
||||
|
||||
const OurSpecialitiesComponent = () => {
|
||||
return (
|
||||
|
||||
<section className="our_specialties_section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<div className="our_specialties_heading_content">
|
||||
<h5>Our Specialties</h5>
|
||||
<h2>Why Choose Us</h2>
|
||||
<p>Quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores nostrum exercitationem ullam corporis suscipit laboriosam</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12" data-aos="fade-right">
|
||||
<div className="specialties_content_wrapper">
|
||||
<div className="specialties_content s1">
|
||||
<p className="specialties_name">Vinyasa Yoga</p>
|
||||
<p className="specialties_paragraph">Dolor reaellendus temorius maiores alia</p>
|
||||
</div>
|
||||
<div className="specialties_content s2">
|
||||
<p className="specialties_name">Slow Yoga</p>
|
||||
<p className="specialties_paragraph">Rabore et dolore maga eiusmo rute aliua</p>
|
||||
</div>
|
||||
<div className="specialties_content s3">
|
||||
<p className="specialties_name">Intuitive Yoga</p>
|
||||
<p className="specialties_paragraph">Earum rerum hic tene sapiente delectus</p>
|
||||
</div>
|
||||
<div className="specialties_content s4">
|
||||
<p className="specialties_name">Aroma Yoga</p>
|
||||
<p className="specialties_paragraph">Neque orro quisquam est raui dolorem</p>
|
||||
</div>
|
||||
<figure className="specialties_left_line mb-0">
|
||||
<img src="/assets/images/specialties_left_line.png" alt="" className="img-fluid" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-4 col-sm-6 col-xs-12 d-md-block d-none">
|
||||
<figure className="specialties_image mb-0">
|
||||
<img src="/assets/images/specialties_image.png" alt="" className="img-fluid" />
|
||||
</figure>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12" data-aos="fade-right">
|
||||
<div className="specialties_content_wrapper">
|
||||
<div className="specialties_content specialties_content2 s5">
|
||||
<p className="specialties_name">Kundalini Yoga</p>
|
||||
<p className="specialties_paragraph">Dolor reaellendus temorius maiores alia</p>
|
||||
</div>
|
||||
<div className="specialties_content specialties_content2 s6">
|
||||
<p className="specialties_name">Bikram Yoga</p>
|
||||
<p className="specialties_paragraph">Rabore et dolore mae eiusmo rute aliua</p>
|
||||
</div>
|
||||
<div className="specialties_content specialties_content2 s7">
|
||||
<p className="specialties_name">Mindfulness Training</p>
|
||||
<p className="specialties_paragraph">Earum rerum hic tene sapiente delectus</p>
|
||||
</div>
|
||||
<div className="specialties_content specialties_content2 s8">
|
||||
<p className="specialties_name">Workout Routines</p>
|
||||
<p className="specialties_paragraph">Neque orro quisquam est raui dolorem</p>
|
||||
</div>
|
||||
<figure className="specialties_right_line mb-0">
|
||||
<img src="/assets/images/specialties_right_line.png" alt="" className="img-fluid" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure className="our_specialties_right_shape right_shape mb-0">
|
||||
<img src="/assets/images/our_specialties_right_shape.png" alt="" className="img-fluid" />
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default OurSpecialitiesComponent;
|
||||
124
yoga-app/src/components/pricing.component.tsx
Normal file
124
yoga-app/src/components/pricing.component.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
|
||||
|
||||
const PricingComponent = () => {
|
||||
return (
|
||||
<section className="pricing_plans_section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<div className="pricing_plans_content">
|
||||
<h5>What We Offer</h5>
|
||||
<h2>Our Pricing Plans</h2>
|
||||
<p>Molestiae non recusandae itaque earum rerum hic teneaur a sapiente delectus, rae aut
|
||||
reiciendis officia deserunt mollitia animi omnis dolor</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row" data-aos="fade-up">
|
||||
<div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">
|
||||
<div className="pricing_plans_box_content">
|
||||
<div className="pricing_plans_box_upper_portion">
|
||||
<figure className="pricing_plans_image mb-0">
|
||||
<img src="/assets/images/pricing_plan_1.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
<div className="pricing_plans_box_image_content">
|
||||
<figure className="mb-0">
|
||||
<img src="/assets/images/pricing_plan_icon_1.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pricing_plans_box_lower_portion">
|
||||
<h3>Standard</h3>
|
||||
<ul className="list-unstyled">
|
||||
<li>
|
||||
<i className="fa-solid fa-check" aria-hidden="true"></i>Pay as you go
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-check" aria-hidden="true"></i>Perfect for
|
||||
non-residence
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing_plans_span_wrapper">
|
||||
<span className="price">$30</span>
|
||||
<span className="per_month">/per month</span>
|
||||
</div>
|
||||
<div className="btn_wrapper">
|
||||
<a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll
|
||||
Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">
|
||||
<div className="pricing_plans_box_content">
|
||||
<div className="pricing_plans_box_upper_portion">
|
||||
<figure className="pricing_plans_image mb-0">
|
||||
<img src="/assets/images/pricing_plan_2.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
<div className="pricing_plans_box_image_content">
|
||||
<figure className="mb-0">
|
||||
<img src="/assets/images/pricing_plan_icon_2.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pricing_plans_box_lower_portion second_lower_portion">
|
||||
<h3>Professional</h3>
|
||||
<ul className="list-unstyled">
|
||||
<li>
|
||||
<i className="fa-solid fa-check" aria-hidden="true"></i>Short-term comitment
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-check" aria-hidden="true"></i>Online training for all
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing_plans_span_wrapper">
|
||||
<span className="price">$120</span>
|
||||
<span className="per_month">/per month</span>
|
||||
</div>
|
||||
<div className="btn_wrapper">
|
||||
<a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll
|
||||
Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">
|
||||
<div className="pricing_plans_box_content">
|
||||
<div className="pricing_plans_box_upper_portion">
|
||||
<figure className="pricing_plans_image mb-0">
|
||||
<img src="/assets/images/pricing_plan_3.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
<div className="pricing_plans_box_image_content">
|
||||
<figure className="mb-0">
|
||||
<img src="/assets/images/pricing_plan_icon_3.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pricing_plans_box_lower_portion third_lower_portion">
|
||||
<h3>Private</h3>
|
||||
<ul className="list-unstyled">
|
||||
<li>
|
||||
<i className="fa-solid fa-check" aria-hidden="true"></i>Long-term comitment
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-check" aria-hidden="true"></i>24/7 Available
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing_plans_span_wrapper">
|
||||
<span className="price">$250</span>
|
||||
<span className="per_month">/per month</span>
|
||||
</div>
|
||||
<div className="btn_wrapper">
|
||||
<a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll
|
||||
Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default PricingComponent;
|
||||
69
yoga-app/src/components/quotes.component.tsx
Normal file
69
yoga-app/src/components/quotes.component.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
|
||||
|
||||
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><img 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><img 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">
|
||||
<img src="/assets/images/testimonial_left_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
<figure className="testimonial_right_shape right_shape mb-0">
|
||||
<img src="/assets/images/testimonial_right_shape.png" alt="" className="img-fluid"/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default QuotesComponent;
|
||||
36
yoga-app/src/components/subscribe.component.tsx
Normal file
36
yoga-app/src/components/subscribe.component.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
|
||||
const SubscribeComponent = () => {
|
||||
return (
|
||||
<section className="subscribe_section">
|
||||
<div className="container">
|
||||
<div className="subscribe_background_image">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5 col-md-5 col-sm-6 col-xs-12">
|
||||
<figure className="subscribe_image mb-0">
|
||||
<img src="/assets/images/subscribe_image.png" alt=""/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default SubscribeComponent;
|
||||
Reference in New Issue
Block a user