add nextjs app: yoga-app
This commit is contained in:
Schneider Roland
29
yoga-app/src/app/about/page.tsx
Normal file
29
yoga-app/src/app/about/page.tsx
Normal 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 />
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
11
yoga-app/src/app/api/strapi/strapi-api.ts
Normal file
11
yoga-app/src/app/api/strapi/strapi-api.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
|
||||
class StrapiApi{
|
||||
constructor() {
|
||||
}
|
||||
|
||||
public getHomePage(){
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
47
yoga-app/src/app/globals.scss
Normal file
47
yoga-app/src/app/globals.scss
Normal 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"/>
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
0
yoga-app/src/app/types.ts
Normal file
0
yoga-app/src/app/types.ts
Normal file
Reference in New Issue
Block a user