rschneider/yogastic
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add nextjs app: yoga-app

Browse Source
This commit is contained in:
Schneider Roland
2025-01-10 07:42:36 +01:00
parent ae5d34c6f5
commit f059417376
12 changed files with 262 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
yoga-app/src/app/layout.tsx
View File

@@ -1,7 +1,7 @@
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";
import MainHeaderComponent from "@/components/mainHeaderComponent";
const generateIconDescriptor = (rel: string, sizes: string, url: string): IconDescriptor => {
@@ -103,7 +103,7 @@ export default function RootLayout({
return (
<html lang="en">
<body>
<HeaderComponent/>
{children}
</body>
</html>

15
yoga-app/src/app/login/page.tsx Normal file
View File

@@ -0,0 +1,15 @@
'use client'
import React from 'react';
const Login: React.FC = () => {
return (
<div className="w-full lg:grid lg:min-h-[100vh] lg:grid-cols-2 xl:min-h-[100vh]">
login
</div>
);
}
export default Login;

2
yoga-app/src/app/page.tsx
View File

@@ -9,10 +9,12 @@ 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";
import MainHeaderComponent from "@/components/mainHeaderComponent";
export default function Home() {
return (
<>
<MainHeaderComponent/>
<OurServicesComponent />
<AboutUsComponent />
<OurSpecialitiesComponent />

7
yoga-app/src/components/header.component.tsx → yoga-app/src/components/mainHeaderComponent.tsx
View File

@@ -1,6 +1,6 @@
import YogaImageComponent from "@/components/yoga.image.component";
const HeaderComponent = () => {
const MainHeaderComponent = () => {
return (
<div className="banner-section-outer">
<header>
@@ -86,8 +86,6 @@ const HeaderComponent = () => {
</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">
@@ -142,7 +140,8 @@ const HeaderComponent = () => {
</div>
</section>
</div>
);
}
export default HeaderComponent;
export default MainHeaderComponent;

75
yoga-app/src/components/nav.component.tsx Normal file
View File

@@ -0,0 +1,75 @@
import {FC} from "react";
import YogaImageComponent from "@/components/yoga.image.component";
import clsx from "clsx";
export interface MenuItem{
href?: string;
label: string;
children?: MenuItem[];
active?: boolean
}
export interface Props{
menuItems: MenuItem[];
}
const Nav: FC<Props> = ({menuItems}:Props) => {
return (
<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"><YogaImageComponent 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">
{menuItems.map( menuItem => <MenuItemComponent menuItem={menuItem} />)}
</ul>
</div>
</nav>
</div>
</div>
</header>
);
}
interface MenuItemProps{
menuItem: MenuItem
}
const MenuItemComponent: FC<MenuItemProps> = ({menuItem}: MenuItemProps) => {
if ( !menuItem ){
return (<></>);
}
if ( !menuItem.children || menuItem.children.length == 0 ){
return (
// <li className="nav-item active">
<li className={clsx("nav-item", {"active": menuItem.active})}>
<a className="nav-link" href={menuItem.href}>{menuItem.label}</a>
</li>
);
}
return (
<li className={clsx("nav-item", "dropdown",{"active": menuItem.active})}>
<a className="nav-link dropdown-toggle dropdown-color navbar-text-color" href="#"
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">
{
menuItem.children.map(item => <MenuItemComponent menuItem={item} />)
}
</ul>
</div>
</li>
);
}

120
yoga-app/src/components/subHeader.component.tsx Normal file
View File

@@ -0,0 +1,120 @@
import YogaImageComponent from "@/components/yoga.image.component";
const SubHeaderComponent = () =>{
return (
<div className="sub-banner-section">
<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"><YogaImageComponent 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">
<a className="nav-link" href="/index">Home</a>
</li>
<li className="nav-item active">
<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>
<section className="banner-section">
<div className="container">
<div className="row">
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div className="banner-section-content">
<h1 data-aos="fade-up">About Us</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">
<span className="sub_home_span">Home </span><i className="fa-solid fa-angles-right" aria-hidden="true"></i><span className="sub_span"> About</span>
</div>
</div>
</div>
</div>
<figure className="banner_left_top_shape left_shape mb-0">
<YogaImageComponent src="/assets/images/banner_left_top_shape.png" alt="" className="img-fluid" />
</figure>
<figure className="banner_left_bottom_shape left_shape mb-0">
<YogaImageComponent src="/assets/images/banner_left_bottom_shape.png" alt="" className="img-fluid" />
</figure>
<figure className="banner_right_top_shape right_shape mb-0">
<YogaImageComponent src="/assets/images/banner_right_top_shape.png" alt="" className="img-fluid" />
</figure>
<figure className="banner_right_bottom_shape right_shape mb-0">
<YogaImageComponent src="/assets/images/banner_right_bottom_shape.png" alt="" className="img-fluid" />
</figure>
</div>
</section>
</div>
);
}
export default SubHeaderComponent;