add nextjs app: yoga-app

This commit is contained in:
Schneider Roland
2025-01-06 22:13:54 +01:00
parent 72681846d8
commit bed409f77c
283 changed files with 11753 additions and 331 deletions

View File

@@ -0,0 +1,29 @@
import React from "react";
import AosComponent from "@/components/aos.component";
import OurServicesComponent from "@/components/our.services.component";
import AboutUsComponent from "@/components/about.us.component";
import OurSpecialitiesComponent from "@/components/our.specialities.component";
import ContactUsComponent from "@/components/contact.us.component";
import PricingComponent from "@/components/pricing.component";
import QuotesComponent from "@/components/quotes.component";
import BlogPostsComponent from "@/components/blog.posts.component";
import FooterComponent from "@/components/footer.component";
import SubscribeComponent from "@/components/subscribe.component";
export default function About() {
return (
<>
<OurServicesComponent />
<AboutUsComponent />
<OurSpecialitiesComponent />
<ContactUsComponent />
<PricingComponent />
<QuotesComponent />
<BlogPostsComponent />
<SubscribeComponent />
<FooterComponent />
<AosComponent />
</>
);
}

View File

@@ -0,0 +1,11 @@
class StrapiApi{
constructor() {
}
public getHomePage(){
}
}

View File

@@ -1,42 +0,0 @@
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}

View File

@@ -0,0 +1,47 @@
@import "node_modules/bootstrap/scss/bootstrap.scss";
// importing core styling file
@import 'node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
// our project needs Classic Solid, Brands, and Sharp Solid
@import 'node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
@import 'node_modules/@fortawesome/fontawesome-free/scss/brands.scss';
@import 'node_modules/@fortawesome/fontawesome-free/scss/regular.scss';
@import '../styles/style';
@import '../styles/mediaqueries';
@import '../styles/custom-style';
@import '../styles/special-classes';
@import 'node_modules/aos/src/sass/aos.scss';
//<!-- Latest compiled and minified CSS -->
//<link
// href="assets/bootstrap/bootstrap.min.css"
//rel="stylesheet"/>
//<link rel="stylesheet"
//href="./assets/js/bootstrap.min.js"/>
//<!-- Font Awesome link -->
//<link rel="stylesheet"
//href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
//<!-- StyleSheet link CSS -->
//<link
// href="assets/css/style.css"
//rel="stylesheet /"
//type="text/css"/>
//<link
// href="assets/css/mediaqueries.css"
//rel="stylesheet"
//type="text/css"/>
//<link
// href="assets/css/custom-style.css"
//rel="stylesheet"
//type="text/css"/>
//<link
// href="assets/css/special-classes.css"
//rel="stylesheet"
//type="text/css"/>
//<link
// href="https://unpkg.com/aos@2.3.1/dist/aos.css"
//rel="stylesheet"/>
//<link
// rel="stylesheet"
//href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css"/>

View File

@@ -1,32 +1,111 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import type {Metadata, Viewport} from "next";
import "./globals.scss";
import {IconDescriptor} from "next/dist/lib/metadata/types/metadata-types";
import HeaderComponent from "@/components/header.component";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
const generateIconDescriptor = (rel: string, sizes: string, url: string): IconDescriptor => {
// <link rel="apple-touch-icon" sizes="76x76"*/}
{/* href="./assets/images/favicon/apple-icon-76x76.png"/>*/}
return {
rel, sizes, url
};
}
const generateAppleIcons = ( ): IconDescriptor[] => {
const allSizes: string[] = [
"57x57",
"60x60",
"72x72",
"76x76",
"114x114",
"120x120",
"144x144",
"152x152",
"180x180",
];
const linkBase = "./assets/images/favicon/apple-icon-";
const rel ="apple-touch-icon";
// <link rel="apple-touch-icon" sizes="76x76"*/}
{/* href="./assets/images/favicon/apple-icon-76x76.png"/>*/}
return allSizes.map((sizes) => {
return generateIconDescriptor(rel,sizes,linkBase+sizes+".png");
}) ;
}
const generateAndroidIcons = (): IconDescriptor[] =>{
const allSizes = [
"192x192",
];
const linkBase = "./assets/images/favicon/android-icon-";
const rel ="icon";
{/* <link rel="icon" type="image/png" sizes="192x192"*/}
{/* href="./assets/images/favicon/android-icon-192x192.png"/>*/}
return allSizes.map((sizes) => {
return generateIconDescriptor(rel,sizes,linkBase+sizes+".png");
}) ;
}
const generateFavIcons = (): IconDescriptor[] =>{
const allSizes = [
"32x32",
"96x96",
"16x16",
];
const linkBase = "./assets/images/favicon/favicon-";
const rel ="icon";
{/* <link rel="icon" type="image/png" sizes="16x16"*/}
{/* href="./assets/images/favicon/favicon-16x16.png"/>*/}
return allSizes.map((sizes) => {
return generateIconDescriptor(rel,sizes,linkBase+sizes+".png");
}) ;
}
const generateIcons = ( ): IconDescriptor[] => {
return [
...generateAppleIcons(),
...generateAndroidIcons(),
...generateFavIcons()
];
}
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "Yoga App",
description: "Yoga App",
icons: generateIcons(),
manifest: "./assets/images/favicon/manifest.json",
other: {
"msapplication-TileColor": "#ffffff",
"msapplication-TileImage": "/ms-icon-144x144.png"
}
};
{/*<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>*/}
export const viewport: Viewport = {
initialScale: 1,
maximumScale: 1,
userScalable: false,
width: "device-width",
themeColor: "#ffffff",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
{children}
</body>
</html>
);
return (
<html lang="en">
<body>
<HeaderComponent/>
{children}
</body>
</html>
);
}

View File

@@ -1,168 +0,0 @@
.page {
--gray-rgb: 0, 0, 0;
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
--button-primary-hover: #383838;
--button-secondary-hover: #f2f2f2;
display: grid;
grid-template-rows: 20px 1fr 20px;
align-items: center;
justify-items: center;
min-height: 100svh;
padding: 80px;
gap: 64px;
font-family: var(--font-geist-sans);
}
@media (prefers-color-scheme: dark) {
.page {
--gray-rgb: 255, 255, 255;
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
--button-primary-hover: #ccc;
--button-secondary-hover: #1a1a1a;
}
}
.main {
display: flex;
flex-direction: column;
gap: 32px;
grid-row-start: 2;
}
.main ol {
font-family: var(--font-geist-mono);
padding-left: 0;
margin: 0;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.01em;
list-style-position: inside;
}
.main li:not(:last-of-type) {
margin-bottom: 8px;
}
.main code {
font-family: inherit;
background: var(--gray-alpha-100);
padding: 2px 4px;
border-radius: 4px;
font-weight: 600;
}
.ctas {
display: flex;
gap: 16px;
}
.ctas a {
appearance: none;
border-radius: 128px;
height: 48px;
padding: 0 20px;
border: none;
border: 1px solid transparent;
transition:
background 0.2s,
color 0.2s,
border-color 0.2s;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 20px;
font-weight: 500;
}
a.primary {
background: var(--foreground);
color: var(--background);
gap: 8px;
}
a.secondary {
border-color: var(--gray-alpha-200);
min-width: 180px;
}
.footer {
grid-row-start: 3;
display: flex;
gap: 24px;
}
.footer a {
display: flex;
align-items: center;
gap: 8px;
}
.footer img {
flex-shrink: 0;
}
/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
a.primary:hover {
background: var(--button-primary-hover);
border-color: transparent;
}
a.secondary:hover {
background: var(--button-secondary-hover);
border-color: transparent;
}
.footer a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
}
@media (max-width: 600px) {
.page {
padding: 32px;
padding-bottom: 80px;
}
.main {
align-items: center;
}
.main ol {
text-align: center;
}
.ctas {
flex-direction: column;
}
.ctas a {
font-size: 14px;
height: 40px;
padding: 0 16px;
}
a.secondary {
min-width: auto;
}
.footer {
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
}
@media (prefers-color-scheme: dark) {
.logo {
filter: invert();
}
}

View File

@@ -1,96 +1,29 @@
import Image from "next/image";
import styles from "./page.module.css";
import React from "react";
import AosComponent from "@/components/aos.component";
import OurServicesComponent from "@/components/our.services.component";
import AboutUsComponent from "@/components/about.us.component";
import OurSpecialitiesComponent from "@/components/our.specialities.component";
import ContactUsComponent from "@/components/contact.us.component";
import PricingComponent from "@/components/pricing.component";
import QuotesComponent from "@/components/quotes.component";
import BlogPostsComponent from "@/components/blog.posts.component";
import FooterComponent from "@/components/footer.component";
import SubscribeComponent from "@/components/subscribe.component";
export default function Home() {
return (
<div className={styles.page}>
<h1>hello</h1>
<main className={styles.main}>
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol>
<li>
Get started by editing <code>src/app/page.tsx</code>.
</li>
<li>Save and see your changes instantly.</li>
</ol>
<>
<OurServicesComponent />
<AboutUsComponent />
<OurSpecialitiesComponent />
<ContactUsComponent />
<PricingComponent />
<QuotesComponent />
<BlogPostsComponent />
<SubscribeComponent />
<FooterComponent />
<AosComponent />
</>
<div className={styles.ctas}>
<a
className={styles.primary}
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className={styles.logo}
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className={styles.secondary}
>
Read our docs
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org
</a>
</footer>
</div>
);
}

View File

View 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;

View 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;

View 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;

View 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;

View 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;

View 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;

View 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;

View 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;

View 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;

View 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;

View 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;

View 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;

BIN
yoga-app/src/images/1.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 470 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 647 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 493 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 937 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 619 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 243 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 283 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 937 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 253 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 B

View File

@@ -0,0 +1 @@
<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>

After

Width:  |  Height:  |  Size: 215 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 589 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 553 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 248 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 248 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 248 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 283 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 283 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 219 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 219 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Some files were not shown because too many files have changed in this diff Show More