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

refactoring , add YogaImageComponent, bcryptjs

Browse Source
This commit is contained in:
Schneider Roland 2025-01-09 08:48:50 +01:00
parent 9d7bb39769
commit 166b26c6a4
14 changed files with 91 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
yoga-app/package-lock.json generated
View File

@ -11,10 +11,13 @@
"@fortawesome/fontawesome-free": "^6.7.2", "@fortawesome/fontawesome-free": "^6.7.2",
"@types/aos": "^3.0.7", "@types/aos": "^3.0.7",
"@types/bcrypt": "^5.0.2", "@types/bcrypt": "^5.0.2",
"@types/bcryptjs": "^2.4.6",
"@types/pg": "^8.11.10", "@types/pg": "^8.11.10",
"aos": "^2.3.4", "aos": "^2.3.4",
"bcrypt": "^5.1.1", "bcrypt": "^5.1.1",
"bcryptjs": "^2.4.3",
"bootstrap": "^4.6.2", "bootstrap": "^4.6.2",
"clsx": "^2.1.1",
"dotenv": "^16.4.7", "dotenv": "^16.4.7",
"next": "15.1.3", "next": "15.1.3",
"pg": "^8.13.1", "pg": "^8.13.1",
@ -1131,6 +1134,11 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"node_modules/@types/bcryptjs": {
"version": "2.4.6",
"resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
"integrity": "sha512-9xlo6R2qDs5uixm0bcIqCeMCE6HiQsIyel9KQySStiyqNl2tnj2mP3DX1Nf56MD6KMenNNlBBsy3LJ7gUEQPXQ=="
},
"node_modules/@types/estree": { "node_modules/@types/estree": {
"version": "1.0.6", "version": "1.0.6",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@ -1792,6 +1800,11 @@
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz", "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
"integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==" "integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA=="
}, },
"node_modules/bcryptjs": {
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
"integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ=="
},
"node_modules/bootstrap": { "node_modules/bootstrap": {
"version": "4.6.2", "version": "4.6.2",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
@ -1970,6 +1983,14 @@
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
}, },
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"engines": {
"node": ">=6"
}
},
"node_modules/color": { "node_modules/color": {
"version": "4.2.3", "version": "4.2.3",
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",

3
yoga-app/package.json
View File

@ -12,10 +12,13 @@
"@fortawesome/fontawesome-free": "^6.7.2", "@fortawesome/fontawesome-free": "^6.7.2",
"@types/aos": "^3.0.7", "@types/aos": "^3.0.7",
"@types/bcrypt": "^5.0.2", "@types/bcrypt": "^5.0.2",
"@types/bcryptjs": "^2.4.6",
"@types/pg": "^8.11.10", "@types/pg": "^8.11.10",
"aos": "^2.3.4", "aos": "^2.3.4",
"bcrypt": "^5.1.1", "bcrypt": "^5.1.1",
"bcryptjs": "^2.4.3",
"bootstrap": "^4.6.2", "bootstrap": "^4.6.2",
"clsx": "^2.1.1",
"dotenv": "^16.4.7", "dotenv": "^16.4.7",
"next": "15.1.3", "next": "15.1.3",
"pg": "^8.13.1", "pg": "^8.13.1",

2
yoga-app/src/app/seed/route.ts
View File

@ -1,4 +1,4 @@
import bcrypt from 'bcrypt'; import bcrypt from 'bcryptjs';
import { invoices, customers, revenue, users } from './placeholder-data'; import { invoices, customers, revenue, users } from './placeholder-data';
import strapiApi from "@/app/api/strapi/strapi-api"; import strapiApi from "@/app/api/strapi/strapi-api";

10
yoga-app/src/components/about.us.component.tsx
View File

@ -1,4 +1,4 @@
import Image from "next/image"; import YogaImageComponent from "@/components/yoga.image.component";
const AboutUsComponent = () =>{ const AboutUsComponent = () =>{
return ( return (
@ -7,13 +7,13 @@ const AboutUsComponent = () =>{
<div className="row"> <div className="row">
<div className="col-lg-7 col-md-7 col-sm-12 col-xs-12"> <div className="col-lg-7 col-md-7 col-sm-12 col-xs-12">
<div className="aboutus_image"> <div className="aboutus_image">
<figure className="mb-0"><Image src="/assets/images/aboutus_image.png" alt="" className="img-fluid"/></figure> <figure className="mb-0"><YogaImageComponent src="/assets/images/aboutus_image.png" alt="" className="img-fluid"/></figure>
</div> </div>
<figure className="aboutus_top_shape left_shape mb-0"> <figure className="aboutus_top_shape left_shape mb-0">
<Image src="/assets/images/aboutus_top_shape.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/aboutus_top_shape.png" alt="" className="img-fluid"/>
</figure> </figure>
<figure className="aboutus_bottom_shape left_shape mb-0"> <figure className="aboutus_bottom_shape left_shape mb-0">
<Image src="/assets/images/aboutus_bottom_shape.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/aboutus_bottom_shape.png" alt="" className="img-fluid"/>
</figure> </figure>
</div> </div>
<div className="col-lg-5 col-md-5 col-sm-12 col-xs-12" data-aos="fade-right"> <div className="col-lg-5 col-md-5 col-sm-12 col-xs-12" data-aos="fade-right">
@ -23,7 +23,7 @@ const AboutUsComponent = () =>{
<p>Quis autem vel eum iure reprehenderit qui in eao voluptate velit esse quam nihil molestiae consequatur vel illum.</p> <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"> <div className="aboutus_line_wrapper">
<h6>Modi tempora incidunt ut labore dolore magnam aliquam auerat volutaem.</h6> <h6>Modi tempora incidunt ut labore dolore magnam aliquam auerat volutaem.</h6>
<figure className="mb-0 purple_line"><Image src="/assets/images/aboutus_line.png" alt="" className="img-fluid" /></figure> <figure className="mb-0 purple_line"><YogaImageComponent src="/assets/images/aboutus_line.png" alt="" className="img-fluid" /></figure>
</div> </div>
<div className="btn_wrapper"> <div className="btn_wrapper">
<a href="/about" className="text-decoration-none get_started_btn">Get Started</a> <a href="/about" className="text-decoration-none get_started_btn">Get Started</a>

10
yoga-app/src/components/blog.posts.component.tsx
View File

@ -1,4 +1,4 @@
import Image from "next/image"; import YogaImageComponent from "@/components/yoga.image.component";
const BlogPostsComponent = () => { const BlogPostsComponent = () => {
@ -17,7 +17,7 @@ const BlogPostsComponent = () => {
<div className="row" data-aos="fade-up"> <div className="row" data-aos="fade-up">
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div className="blog_posts_image position-relative"> <div className="blog_posts_image position-relative">
<figure className="mb-0"><Image src="/assets/images/blog_posts_1.png" alt="" <figure className="mb-0"><YogaImageComponent src="/assets/images/blog_posts_1.png" alt=""
className="img-fluid"/></figure> className="img-fluid"/></figure>
<div className="blog_posts_image_content"> <div className="blog_posts_image_content">
<span>YOGA</span> <span>YOGA</span>
@ -31,7 +31,7 @@ const BlogPostsComponent = () => {
</div> </div>
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div className="blog_posts_image position-relative"> <div className="blog_posts_image position-relative">
<figure className="mb-0"><Image src="/assets/images/blog_posts_2.png" alt="" <figure className="mb-0"><YogaImageComponent src="/assets/images/blog_posts_2.png" alt=""
className="img-fluid"/></figure> className="img-fluid"/></figure>
<div className="blog_posts_image_content"> <div className="blog_posts_image_content">
<span>FITNESS</span> <span>FITNESS</span>
@ -48,10 +48,10 @@ const BlogPostsComponent = () => {
<a href="/single-post.html" className="text-decoration-none view_blog">View All Blogs</a> <a href="/single-post.html" className="text-decoration-none view_blog">View All Blogs</a>
</div> </div>
<figure className="blog_posts_left_shape left_shape mb-0"> <figure className="blog_posts_left_shape left_shape mb-0">
<Image src="/assets/images/blog_posts_left_shape.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/blog_posts_left_shape.png" alt="" className="img-fluid"/>
</figure> </figure>
<figure className="blog_posts_right_shape right_shape mb-0"> <figure className="blog_posts_right_shape right_shape mb-0">
<Image src="/assets/images/blog_posts_right_shape.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/blog_posts_right_shape.png" alt="" className="img-fluid"/>
</figure> </figure>
</div> </div>
</section> </section>

6
yoga-app/src/components/contact.us.component.tsx
View File

@ -1,4 +1,4 @@
import Image from "next/image"; import YogaImageComponent from "@/components/yoga.image.component";
const ContactUsComponent = () => { const ContactUsComponent = () => {
@ -57,7 +57,7 @@ const ContactUsComponent = () => {
<a className="popup-vimeo" <a className="popup-vimeo"
href="https://previews.customer.envatousercontent.com/6720474d-ddc3-4b86-acf1-8d093cb37b6d/watermarked_preview/watermarked_preview.mp4"> href="https://previews.customer.envatousercontent.com/6720474d-ddc3-4b86-acf1-8d093cb37b6d/watermarked_preview/watermarked_preview.mp4">
<figure className="video_img mb-0"> <figure className="video_img mb-0">
<Image className="thumb img-fluid" style={{"cursor": "pointer"}} <YogaImageComponent className="thumb img-fluid" style={{"cursor": "pointer"}}
src="/assets/images/get_in_touch_video_icon.png" alt=""/> src="/assets/images/get_in_touch_video_icon.png" alt=""/>
</figure> </figure>
</a> </a>
@ -65,7 +65,7 @@ const ContactUsComponent = () => {
</div> </div>
</div> </div>
<figure className="get_in_touch_shape left_shape mb-0"> <figure className="get_in_touch_shape left_shape mb-0">
<Image src="/assets/images/get_in_touch_shape.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/get_in_touch_shape.png" alt="" className="img-fluid"/>
</figure> </figure>
</div> </div>
</section> </section>

6
yoga-app/src/components/footer.component.tsx
View File

@ -1,5 +1,5 @@
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import YogaImageComponent from "@/components/yoga.image.component";
const FooterComponent = () => { const FooterComponent = () => {
@ -10,7 +10,7 @@ const FooterComponent = () => {
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-lg-block d-none"> <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-lg-block d-none">
<div className="footer_logo"> <div className="footer_logo">
<Link href="/index.html" className="text-decoration-none"> <Link href="/index.html" className="text-decoration-none">
<figure className="mb-0"><Image src="/assets/images/footer_logo.png" alt="" <figure className="mb-0"><YogaImageComponent src="/assets/images/footer_logo.png" alt=""
className="img-fluid"/></figure> className="img-fluid"/></figure>
</Link> </Link>
</div> </div>
@ -83,7 +83,7 @@ const FooterComponent = () => {
</div> </div>
</div> </div>
<div className="footer_shape right_shape"> <div className="footer_shape right_shape">
<figure className="mb-0"><Image src="/assets/images/footer_shape.png" alt="" className="img-fluid"/> <figure className="mb-0"><YogaImageComponent src="/assets/images/footer_shape.png" alt="" className="img-fluid"/>
</figure> </figure>
</div> </div>
</section> </section>

14
yoga-app/src/components/header.component.tsx
View File

@ -1,4 +1,4 @@
import Image from "next/image"; import YogaImageComponent from "@/components/yoga.image.component";
const HeaderComponent = () => { const HeaderComponent = () => {
return ( return (
@ -7,7 +7,7 @@ const HeaderComponent = () => {
<div className="main_header"> <div className="main_header">
<div className="container-fluid"> <div className="container-fluid">
<nav className="navbar navbar-expand-lg navbar-light p-0"> <nav className="navbar navbar-expand-lg navbar-light p-0">
<a className="navbar-brand" href="/index"><figure className="mb-0"><Image src="/assets/images/yogastic_logo.png" alt=""/></figure></a> <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"> <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> <span className="navbar-toggler-icon"></span>
@ -122,22 +122,22 @@ const HeaderComponent = () => {
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div className="banner-section-image"> <div className="banner-section-image">
<figure className="mb-0"> <figure className="mb-0">
<Image src="/assets/images/banner_right_image.png" alt="" /> <YogaImageComponent src="/assets/images/banner_right_image.png" alt="" />
</figure> </figure>
</div> </div>
</div> </div>
</div> </div>
<figure className="banner_left_top_shape left_shape mb-0"> <figure className="banner_left_top_shape left_shape mb-0">
<Image src="/assets/images/banner_left_top_shape.png" alt="" className="img-fluid" /> <YogaImageComponent src="/assets/images/banner_left_top_shape.png" alt="" className="img-fluid" />
</figure> </figure>
<figure className="banner_left_bottom_shape left_shape mb-0"> <figure className="banner_left_bottom_shape left_shape mb-0">
<Image src="/assets/images/banner_left_bottom_shape.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/banner_left_bottom_shape.png" alt="" className="img-fluid"/>
</figure> </figure>
<figure className="banner_right_top_shape right_shape mb-0"> <figure className="banner_right_top_shape right_shape mb-0">
<Image src="/assets/images/banner_right_top_shape.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/banner_right_top_shape.png" alt="" className="img-fluid"/>
</figure> </figure>
<figure className="banner_right_bottom_shape right_shape mb-0"> <figure className="banner_right_bottom_shape right_shape mb-0">
<Image src="/assets/images/banner_right_bottom_shape.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/banner_right_bottom_shape.png" alt="" className="img-fluid"/>
</figure> </figure>
</div> </div>
</section> </section>

12
yoga-app/src/components/our.services.component.tsx
View File

@ -1,4 +1,4 @@
import Image from "next/image"; import YogaImageComponent from "@/components/yoga.image.component";
const OurServiceComponent = () => { const OurServiceComponent = () => {
return ( return (
@ -18,7 +18,7 @@ const OurServiceComponent = () => {
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12"> <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="services_box_content"> <div className="services_box_content">
<div className="services_box_upper_portion"> <div className="services_box_upper_portion">
<figure className="mb-0"><Image src="/assets/images/services_img_1.png" alt="" <figure className="mb-0"><YogaImageComponent src="/assets/images/services_img_1.png" alt=""
className="img-fluid"/></figure> className="img-fluid"/></figure>
</div> </div>
<div className="services_box_lower_portion"> <div className="services_box_lower_portion">
@ -34,7 +34,7 @@ const OurServiceComponent = () => {
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12"> <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="services_box_content"> <div className="services_box_content">
<div className="services_box_upper_portion"> <div className="services_box_upper_portion">
<figure className="mb-0"><Image src="/assets/images/services_img_2.png" alt="" <figure className="mb-0"><YogaImageComponent src="/assets/images/services_img_2.png" alt=""
className="img-fluid"/></figure> className="img-fluid"/></figure>
</div> </div>
<div className="services_box_lower_portion"> <div className="services_box_lower_portion">
@ -50,7 +50,7 @@ const OurServiceComponent = () => {
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12"> <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="services_box_content"> <div className="services_box_content">
<div className="services_box_upper_portion"> <div className="services_box_upper_portion">
<figure className="mb-0"><Image src="/assets/images/services_img_3.png" alt="" <figure className="mb-0"><YogaImageComponent src="/assets/images/services_img_3.png" alt=""
className="img-fluid"/></figure> className="img-fluid"/></figure>
</div> </div>
<div className="services_box_lower_portion"> <div className="services_box_lower_portion">
@ -66,7 +66,7 @@ const OurServiceComponent = () => {
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12"> <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="services_box_content"> <div className="services_box_content">
<div className="services_box_upper_portion"> <div className="services_box_upper_portion">
<figure className="mb-0"><Image src="/assets/images/services_img_4.png" alt="" <figure className="mb-0"><YogaImageComponent src="/assets/images/services_img_4.png" alt=""
className="img-fluid"/></figure> className="img-fluid"/></figure>
</div> </div>
<div className="services_box_lower_portion"> <div className="services_box_lower_portion">
@ -81,7 +81,7 @@ const OurServiceComponent = () => {
</div> </div>
</div> </div>
<figure className="services_left_shape left_shape mb-0"> <figure className="services_left_shape left_shape mb-0">
<Image src="/assets/images/services_left_shape.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/services_left_shape.png" alt="" className="img-fluid"/>
</figure> </figure>
</div> </div>
</section> </section>

10
yoga-app/src/components/our.specialities.component.tsx
View File

@ -1,4 +1,4 @@
import Image from "next/image"; import YogaImageComponent from "@/components/yoga.image.component";
const OurSpecialitiesComponent = () => { const OurSpecialitiesComponent = () => {
@ -35,13 +35,13 @@ const OurSpecialitiesComponent = () => {
<p className="specialties_paragraph">Neque orro quisquam est raui dolorem</p> <p className="specialties_paragraph">Neque orro quisquam est raui dolorem</p>
</div> </div>
<figure className="specialties_left_line mb-0"> <figure className="specialties_left_line mb-0">
<Image src="/assets/images/specialties_left_line.png" alt="" className="img-fluid" /> <YogaImageComponent src="/assets/images/specialties_left_line.png" alt="" className="img-fluid" />
</figure> </figure>
</div> </div>
</div> </div>
<div className="col-lg-6 col-md-4 col-sm-6 col-xs-12 d-md-block d-none"> <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"> <figure className="specialties_image mb-0">
<Image src="/assets/images/specialties_image.png" alt="" className="img-fluid" /> <YogaImageComponent src="/assets/images/specialties_image.png" alt="" className="img-fluid" />
</figure> </figure>
</div> </div>
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12" data-aos="fade-right"> <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12" data-aos="fade-right">
@ -63,13 +63,13 @@ const OurSpecialitiesComponent = () => {
<p className="specialties_paragraph">Neque orro quisquam est raui dolorem</p> <p className="specialties_paragraph">Neque orro quisquam est raui dolorem</p>
</div> </div>
<figure className="specialties_right_line mb-0"> <figure className="specialties_right_line mb-0">
<Image src="/assets/images/specialties_right_line.png" alt="" className="img-fluid" /> <YogaImageComponent src="/assets/images/specialties_right_line.png" alt="" className="img-fluid" />
</figure> </figure>
</div> </div>
</div> </div>
</div> </div>
<figure className="our_specialties_right_shape right_shape mb-0"> <figure className="our_specialties_right_shape right_shape mb-0">
<Image src="/assets/images/our_specialties_right_shape.png" alt="" className="img-fluid" /> <YogaImageComponent src="/assets/images/our_specialties_right_shape.png" alt="" className="img-fluid" />
</figure> </figure>
</div> </div>
</section> </section>

14
yoga-app/src/components/pricing.component.tsx
View File

@ -1,4 +1,4 @@
import Image from "next/image"; import YogaImageComponent from "@/components/yoga.image.component";
const PricingComponent = () => { const PricingComponent = () => {
@ -20,11 +20,11 @@ const PricingComponent = () => {
<div className="pricing_plans_box_content"> <div className="pricing_plans_box_content">
<div className="pricing_plans_box_upper_portion"> <div className="pricing_plans_box_upper_portion">
<figure className="pricing_plans_image mb-0"> <figure className="pricing_plans_image mb-0">
<Image src="/assets/images/pricing_plan_1.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/pricing_plan_1.png" alt="" className="img-fluid"/>
</figure> </figure>
<div className="pricing_plans_box_image_content"> <div className="pricing_plans_box_image_content">
<figure className="mb-0"> <figure className="mb-0">
<Image src="/assets/images/pricing_plan_icon_1.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/pricing_plan_icon_1.png" alt="" className="img-fluid"/>
</figure> </figure>
</div> </div>
</div> </div>
@ -54,11 +54,11 @@ const PricingComponent = () => {
<div className="pricing_plans_box_content"> <div className="pricing_plans_box_content">
<div className="pricing_plans_box_upper_portion"> <div className="pricing_plans_box_upper_portion">
<figure className="pricing_plans_image mb-0"> <figure className="pricing_plans_image mb-0">
<Image src="/assets/images/pricing_plan_2.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/pricing_plan_2.png" alt="" className="img-fluid"/>
</figure> </figure>
<div className="pricing_plans_box_image_content"> <div className="pricing_plans_box_image_content">
<figure className="mb-0"> <figure className="mb-0">
<Image src="/assets/images/pricing_plan_icon_2.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/pricing_plan_icon_2.png" alt="" className="img-fluid"/>
</figure> </figure>
</div> </div>
</div> </div>
@ -87,11 +87,11 @@ const PricingComponent = () => {
<div className="pricing_plans_box_content"> <div className="pricing_plans_box_content">
<div className="pricing_plans_box_upper_portion"> <div className="pricing_plans_box_upper_portion">
<figure className="pricing_plans_image mb-0"> <figure className="pricing_plans_image mb-0">
<Image src="/assets/images/pricing_plan_3.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/pricing_plan_3.png" alt="" className="img-fluid"/>
</figure> </figure>
<div className="pricing_plans_box_image_content"> <div className="pricing_plans_box_image_content">
<figure className="mb-0"> <figure className="mb-0">
<Image src="/assets/images/pricing_plan_icon_3.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/pricing_plan_icon_3.png" alt="" className="img-fluid"/>
</figure> </figure>
</div> </div>
</div> </div>

10
yoga-app/src/components/quotes.component.tsx
View File

@ -1,4 +1,4 @@
import Image from "next/image"; import YogaImageComponent from "@/components/yoga.image.component";
const QuotesComponent = () => { const QuotesComponent = () => {
@ -19,7 +19,7 @@ const QuotesComponent = () => {
exercita ionem ullam corporis suscitnis officiis debitis aut rerum exercita ionem ullam corporis suscitnis officiis debitis aut rerum
necessitatibus saepe necessitatibus saepe
evenietut aer voluptates”</p> evenietut aer voluptates”</p>
<figure><Image src="/assets/images/testimonial_image.png" alt="" <figure><YogaImageComponent src="/assets/images/testimonial_image.png" alt=""
className="img-fluid"/></figure> className="img-fluid"/></figure>
<p className="testimonial_person_name">Himala Joerge</p> <p className="testimonial_person_name">Himala Joerge</p>
<span>Happy client</span> <span>Happy client</span>
@ -35,7 +35,7 @@ const QuotesComponent = () => {
exercita ionem ullam corporis suscitnis officiis debitis aut rerum exercita ionem ullam corporis suscitnis officiis debitis aut rerum
necessitatibus saepe necessitatibus saepe
evenietut aer voluptates”</p> evenietut aer voluptates”</p>
<figure><Image src="/assets/images/testimonial_image.png" alt="" <figure><YogaImageComponent src="/assets/images/testimonial_image.png" alt=""
className="img-fluid"/></figure> className="img-fluid"/></figure>
<p className="testimonial_person_name">Himala Joerge</p> <p className="testimonial_person_name">Himala Joerge</p>
<span>Happy client</span> <span>Happy client</span>
@ -56,10 +56,10 @@ const QuotesComponent = () => {
</div> </div>
</div> </div>
<figure className="testimonial_left_shape left_shape mb-0"> <figure className="testimonial_left_shape left_shape mb-0">
<Image src="/assets/images/testimonial_left_shape.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/testimonial_left_shape.png" alt="" className="img-fluid"/>
</figure> </figure>
<figure className="testimonial_right_shape right_shape mb-0"> <figure className="testimonial_right_shape right_shape mb-0">
<Image src="/assets/images/testimonial_right_shape.png" alt="" className="img-fluid"/> <YogaImageComponent src="/assets/images/testimonial_right_shape.png" alt="" className="img-fluid"/>
</figure> </figure>
</div> </div>
</div> </div>

4
yoga-app/src/components/subscribe.component.tsx
View File

@ -1,4 +1,4 @@
import Image from "next/image"; import YogaImageComponent from "@/components/yoga.image.component";
const SubscribeComponent = () => { const SubscribeComponent = () => {
return ( return (
@ -23,7 +23,7 @@ const SubscribeComponent = () => {
</div> </div>
<div className="col-lg-5 col-md-5 col-sm-6 col-xs-12"> <div className="col-lg-5 col-md-5 col-sm-6 col-xs-12">
<figure className="subscribe_image mb-0"> <figure className="subscribe_image mb-0">
<Image src="/assets/images/subscribe_image.png" alt=""/> <YogaImageComponent src="/assets/images/subscribe_image.png" alt=""/>
</figure> </figure>
</div> </div>
</div> </div>

18
yoga-app/src/components/yoga.image.component.tsx Normal file
View File

@ -0,0 +1,18 @@
import clsx from "clsx";
import {CSSProperties} from "react";
export interface Properties {
src: string;
alt?: string;
className?: string;
style?: CSSProperties;
}
const YogaImageComponent = ( {src,alt,className,style}: Properties ) => {
return (
<img src={src} alt={alt || ""} className={ clsx( className )} style={style} />
);
}
export default YogaImageComponent;