Blog dynamic and images updated

This commit is contained in:
akash 2025-08-30 19:01:27 +05:30
parent 68af7fad77
commit 92fcae3143
37 changed files with 303 additions and 356 deletions

View File

@ -2,6 +2,7 @@
import Layout from "@/components/layout/Layout"
import Link from "next/link"
import { useState } from 'react'
import { teamMembers } from "@/utils/constant.utils";
export default function Home() {
const [isOpen, setOpen] = useState(false)
@ -16,24 +17,24 @@ export default function Home() {
const contents = [
{
title: "Mission",
img: "/assets/images/resource/process-1.jpg",
text: "Physiotherapy Etobicoke is committed to providing quality and innovative health care in a comfortable and professional environment. Our interdisciplinary team will work collaboratively to offer a comprehensive and patient-centered approach to ensure the highest level of client experience through our evidence-based clinical practice."
img: "/assets/images/about-us/section2/mission.webp",
text: "Physiotherapy etobicoke is committed to providing quality and innovative health care in a comfortable and professional environment. Our interdisciplinary team will work collaboratively to offer a comprehensive and patient centered approach to ensure the highest level of client experience through our evidence-based clinical practice"
},
{
title: "Vision",
img: "/assets/images/resource/process-2.jpg",
text: "To be regarded as the most reliable and effective health care therapy practice backed by the team of innovative healthcare professionals driven by passion."
img: "/assets/images/about-us/section2/vision.webp",
text: "To be regarded as the most reliable and effective health care therapy practice backed by the team of innovative healthcare professionals driven by passion"
},
{
title: "Values",
img: "/assets/images/resource/process-3.jpg",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non massa nec justo lacinia suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non massa nec justo lacinia suscipit."
img: "/assets/images/about-us/section2/values.webp",
text: "We value compassion, excellence, innovation, collaboration, and integrity. By combining empathy with evidence-based care, we create a supportive and professional environment that helps every patient achieve long-term health and well-being."
}
];
return (
<>
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="About Us">
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="About Us" bannerImage="/assets/images/about-us/about-us-banner.webp">
{/* about-section */}
<section className="about-style-three pt_120 pb_120 bg-color-1">
<div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-35.png)' }}></div>
@ -49,9 +50,9 @@ export default function Home() {
<div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.png)' }}></div>
</div>
<figure className="image image-1"><img src="/assets/images/resource/about-2.jpg" alt="" /></figure>
<figure className="image image-2"><img src="/assets/images/resource/about-3.jpg" alt="" /></figure>
<div className="icon-box"><i className="icon-14"></i></div>
<figure className="image image-1"><img src="/assets/images/about-us/section1/about-right.webp" alt="" /></figure>
<figure className="image image-2"><img src="/assets/images/about-us/section1/about-left.webp" alt="" /></figure>
<div className="icon-box"><img src="/assets/images/about-us/section1/about-icon.webp" alt="" /></div>
</div>
</div>
</div>
@ -60,13 +61,13 @@ export default function Home() {
<div className="content-box">
<div className="sec-title mb_15">
<span className="sub-title">About Us</span>
<h2>Rapha Rehab Physiotherapy</h2>
<h2>Comprehensive Physiotherapy & Rehabilitation Clinic in Etobicoke</h2>
</div>
<div className="text-box mb_40">
<p>physiotherapy clinic in etobicoke managed by Registered Physiotherapists offering reliable physiotherapy treatment Services, Sports injury physiotherapy, Pelvic floor physiotherapy, Chiropractor, Massage therapy , Acupuncture treatment, Foot Reflexology, Osteopathy, custom knee braces, orthotics, spinal decompression therapy, concussion management, chronic pain management, workplace injury management, Naturopathy and home care physiotherapy Services in Etobicoke</p>
<p>Welcome to Rapha Rehab Physiotherapy Massage Therapy Clinic Etobicoke physiotherapy clinic in etobicoke managed by Registered Physiotherapists offering reliable physiotherapy treatment Services, Sports injury physiotherapy, Pelvic floor physiotherapy, Chiropractor, Massage therapy , Acupuncture treatment, Foot Reflexology, Osteopathy, custom knee braces, orthotics, spinal decompression therapy, concussion management, chronic pain management, workplace injury management, Naturopathy and home care physiotherapy Services in Etobicoke</p>
</div>
<div className="btn-box">
<Link href="index-2" className="theme-btn btn-one"><span>Explore Our Service</span></Link>
<Link href="index-2" className="theme-btn btn-one"><span>Book Appointment</span></Link>
</div>
</div>
</div>
@ -129,27 +130,24 @@ export default function Home() {
<div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
<div className="image_block_two pl_30">
<div className="image-box">
<figure className="image image-1"><img src="/assets/images/why-us/back-2.webp" alt="" /></figure>
<figure className="image image-2"><img src="/assets/images/why-us/front-2.webp" alt="" /></figure>
<div className="icon-box"><img src="/assets/images/why-us/icon-2.webp" alt="" /></div>
<figure className="image image-1"><img src="/assets/images/about-us/section3/top.webp" alt="" /></figure>
<figure className="image image-2"><img src="/assets/images/about-us/section3/bottom.webp" alt="" /></figure>
<div className="icon-box"><img src="/assets/images/about-us/section3/icon.webp" alt="" /></div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-12 col-sm-12 content-column order-1 order-lg-2">
<div className="content_block_one pr_30">
<div className="col-lg-6 col-md-12 col-sm-12 content-column mb-5">
<div className="content_block_one">
<div className="content-box">
<div className="sec-title mb_15">
<span className="sub-title">About Us</span>
<h2>Medical services & diagnostics</h2>
<span className="sub-title">Why Choos Us</span>
<h2>Your Trusted Physiotherapy Team in Etobicoke</h2>
</div>
<div className="text-box mb_40">
<ul className="list-style-one clearfix">
<li>Top-Notch Treatment Under our care, you will be placed in a supportive and comfortable environment helping you receive care in comfortable and supportive environment designed to address your issues</li>
<li>Personalized Treatment Plan We offer One-on-one care with a skilled therapist allows us to develop a plan specific to your particular needs results in a faster recovery.</li>
<li>We listen & take time We listen & take time to get to know you properly Right from the start with your inquiry, we are here to listen and help find the root cause of your problem.</li>
<li>Our treatment rooms Our treatment rooms are fully equipped and private.</li>
<li>Strong network of health professionals We have a strong network of health professionals to refer to, making sure you get the right diagnosis and correct treatment for your condition.</li>
</ul>
<p>Physiotherapy etobicoke is a team of health care professionals working together to help get you better, faster. This helps us in rendering our best possible services to our clients</p>
</div>
<div className="btn-box">
<Link href="index-2" className="theme-btn btn-one"><span>Book Appointment</span></Link>
</div>
</div>
</div>
@ -163,96 +161,67 @@ export default function Home() {
{/* team-section-style-two */}
<section className="team-section sec-pad centred">
<div className="shape">
<div className="shape-1 float-bob-y" style={{ backgroundImage: "url(/assets/images/shape/shape-15.png)" }}></div>
<div
className="shape-1 float-bob-y"
style={{ backgroundImage: "url(/assets/images/shape/shape-15.png)" }}
></div>
<div className="shape-2"></div>
<div className="shape-3 float-bob-x" style={{ backgroundImage: "url(/assets/images/shape/shape-16.png)" }}></div>
<div
className="shape-3 float-bob-x"
style={{ backgroundImage: "url(/assets/images/shape/shape-16.png)" }}
></div>
</div>
<div className="auto-container">
<div className="sec-title mb_50">
<span className="sub-title">Our Team</span>
<h2>Meet our experienced doctors <br />for the best treatment</h2>
<h2>
Meet our experienced doctors <br />for the best treatment
</h2>
</div>
<div className="row clearfix">
<div className="col-lg-3 col-md-6 col-sm-12 team-block">
<div className="team-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box">
<div className="image-box">
<figure className="image"><img src="/assets/images/team/team-1.jpg" alt="" /></figure>
<ul className="social-links clearfix">
<li><Link href="/"><i className="icon-4"></i></Link></li>
<li><Link href="/"><i className="icon-5"></i></Link></li>
<li><Link href="/"><i className="icon-6"></i></Link></li>
<li><Link href="/"><i className="icon-7"></i></Link></li>
</ul>
</div>
<div className="lower-content">
<h3><Link href="team-details/">Black Marvin</Link></h3>
<span className="designation">Medical Assistant</span>
<div className="row clearfix justify-content-center">
{teamMembers.map((member, index) => (
<div
key={member.id}
className="col-lg-3 col-md-6 col-sm-12 team-block"
>
<div
className="team-block-one wow fadeInUp animated"
data-wow-delay={`${index * 200}ms`}
data-wow-duration="1500ms"
>
<div className="inner-box">
<div className="image-box">
<figure className="image">
<img src={member.image} alt={member.name} />
</figure>
<ul className="social-links clearfix">
{member.socials.map((social, idx) => (
<li key={idx}>
<Link href={social.link}>
<i className={social.icon}></i>
</Link>
</li>
))}
</ul>
</div>
<div className="lower-content">
<h3>
<Link href={`/our-team-physiotherapy-etobicoke/${member.slug}`}>
{member.name}
</Link>
</h3>
<span className="designation">{member.designation}</span>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 team-block">
<div className="team-block-one wow fadeInUp animated" data-wow-delay="200ms" data-wow-duration="1500ms">
<div className="inner-box">
<div className="image-box">
<figure className="image"><img src="/assets/images/team/team-2.jpg" alt="" /></figure>
<ul className="social-links clearfix">
<li><Link href="/"><i className="icon-4"></i></Link></li>
<li><Link href="/"><i className="icon-5"></i></Link></li>
<li><Link href="/"><i className="icon-6"></i></Link></li>
<li><Link href="/"><i className="icon-7"></i></Link></li>
</ul>
</div>
<div className="lower-content">
<h3><Link href="team-details">Eleanor Pena</Link></h3>
<span className="designation">Doctor</span>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 team-block">
<div className="team-block-one wow fadeInUp animated" data-wow-delay="400ms" data-wow-duration="1500ms">
<div className="inner-box">
<div className="image-box">
<figure className="image"><img src="/assets/images/team/team-3.jpg" alt="" /></figure>
<ul className="social-links clearfix">
<li><Link href="/"><i className="icon-4"></i></Link></li>
<li><Link href="/"><i className="icon-5"></i></Link></li>
<li><Link href="/"><i className="icon-6"></i></Link></li>
<li><Link href="/"><i className="icon-7"></i></Link></li>
</ul>
</div>
<div className="lower-content">
<h3><Link href="team-details">Arlene Maccy</Link></h3>
<span className="designation">Nursing Assistant</span>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 team-block">
<div className="team-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
<div className="inner-box">
<div className="image-box">
<figure className="image"><img src="/assets/images/team/team-4.jpg" alt="" /></figure>
<ul className="social-links clearfix">
<li><Link href="/"><i className="icon-4"></i></Link></li>
<li><Link href="/"><i className="icon-5"></i></Link></li>
<li><Link href="/"><i className="icon-6"></i></Link></li>
<li><Link href="/"><i className="icon-7"></i></Link></li>
</ul>
</div>
<div className="lower-content">
<h3><Link href="team-details">Jenny Wilson</Link></h3>
<span className="designation">Senior Doctor</span>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</section>
{/* team-section-style-two end */}
</Layout>
</>
)

51
app/blog/[slug]/page.js Normal file
View File

@ -0,0 +1,51 @@
import Layout from "@/components/layout/Layout";
import Link from "next/link";
import Blogs from "@/utils/Blog.utils";
import { notFound } from "next/navigation";
export async function generateStaticParams() {
return Blogs.map((item) => ({
slug: item.slug,
}));
}
export default function BlogDetails({ params }) {
const blog = Blogs.find((item) => item.slug === params.slug);
if (!blog) return notFound();
return (
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Blog Details">
<section className="sidebar-page-container sec-pad-2">
<div className="auto-container">
<div className="row clearfix">
<div className="col-lg-12 col-md-12 col-sm-12 content-side">
<div className="blog-details-content">
<div className="news-block-one">
<div className="inner-box">
<figure className="image-box">
<img
src={blog.banner}
alt={blog.title}
style={{ width: "100%", height: "auto" }}
/>
</figure>
<div className="lower-content">
{/* <ul className="post-info mb_15 clearfix">
<li><Link href="#">{blog.author}</Link></li>
<li>{blog.date}</li>
<li>{blog.comments}</li>
</ul> */}
<h2>{blog.title}</h2>
<div dangerouslySetInnerHTML={{ __html: blog.content }} />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</Layout>
);
}

View File

@ -1,172 +1,54 @@
'use client'
import Layout from "@/components/layout/Layout";
import Link from "next/link";
import Blogs from "@/utils/Blog.utils";
import Layout from "@/components/layout/Layout"
import Link from "next/link"
export default function Home() {
return (
<>
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Blog Grid">
<div>
{/* news-style-two */}
<section className="news-section sec-pad bg-color-1">
<div className="auto-container">
<div className="sec-title mb_50 centred">
<span className="sub-title">Our Blog</span>
<h2>Take a look at our most <br />recent articles</h2>
</div>
<div className="row clearfix">
<div className="col-lg-4 col-md-6 col-sm-12 news-block">
<div className="news-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box">
<figure className="image-box"><Link href="blog-details"><img src="assets/images/news/news-1.jpg" alt="" /></Link></figure>
<div className="lower-content">
<ul className="post-info mb_15 clearfix">
<li><Link href="blog-details">Admin</Link></li>
<li>12 Jan 2022</li>
<li>03 Comt</li>
</ul>
<h3><Link href="blog-details">How do Inherited Retinal of Diseases Happen?</Link></h3>
<p>Tincidunt Maur nemi sit Interdum praesento eget morbi lacinia volutpat pellentesque Tincidunt aurna suspit.</p>
<div className="link">
<Link href="blog-details"><span>Read More</span></Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12 news-block">
<div className="news-block-one wow fadeInUp animated" data-wow-delay="300ms" data-wow-duration="1500ms">
<div className="inner-box">
<figure className="image-box"><Link href="blog-details"><img src="assets/images/news/news-2.jpg" alt="" /></Link></figure>
<div className="lower-content">
<ul className="post-info mb_15 clearfix">
<li><Link href="blog-details">Admin</Link></li>
<li>11 Jan 2022</li>
<li>0 Comt</li>
</ul>
<h3><Link href="blog-details">Prepare to Speak with Your Eye Specialist.</Link></h3>
<p>Tincidunt Maur nemi sit Interdum praesento eget morbi lacinia volutpat pellentesque Tincidunt aurna suspit.</p>
<div className="link">
<Link href="blog-details"><span>Read More</span></Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12 news-block">
<div className="news-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
<div className="inner-box">
<figure className="image-box"><Link href="blog-details"><img src="assets/images/news/news-3.jpg" alt="" /></Link></figure>
<div className="lower-content">
<ul className="post-info mb_15 clearfix">
<li><Link href="blog-details">Admin</Link></li>
<li>11 Jan 2022</li>
<li>02 Comt</li>
</ul>
<h3><Link href="blog-details">How reliece can help you manage diabetes</Link></h3>
<p>Tincidunt Maur nemi sit Interdum praesento eget morbi lacinia volutpat pellentesque Tincidunt aurna suspit.</p>
<div className="link">
<Link href="blog-details"><span>Read More</span></Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12 news-block">
<div className="news-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box">
<figure className="image-box"><Link href="blog-details"><img src="assets/images/news/news-4.jpg" alt="" /></Link></figure>
<div className="lower-content">
<ul className="post-info mb_15 clearfix">
<li><Link href="blog-details">Admin</Link></li>
<li>12 Jan 2022</li>
<li>03 Comt</li>
</ul>
<h3><Link href="blog-details">What Causes Inherited Retinal Diseases?</Link></h3>
<p>Tincidunt Maur nemi sit Interdum praesento eget morbi lacinia volutpat pellentesque Tincidunt aurna suspit.</p>
<div className="link">
<Link href="blog-details"><span>Read More</span></Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12 news-block">
<div className="news-block-one wow fadeInUp animated" data-wow-delay="300ms" data-wow-duration="1500ms">
<div className="inner-box">
<figure className="image-box"><Link href="blog-details"><img src="assets/images/news/news-5.jpg" alt="" /></Link></figure>
<div className="lower-content">
<ul className="post-info mb_15 clearfix">
<li><Link href="blog-details">Admin</Link></li>
<li>10 Jan 2022</li>
<li>7 Comt</li>
</ul>
<h3><Link href="blog-details">Get The Exercise Limited Mobility</Link></h3>
<p>Tincidunt Maur nemi sit Interdum praesento eget morbi lacinia volutpat pellentesque Tincidunt aurna suspit.</p>
<div className="link">
<Link href="blog-details"><span>Read More</span></Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12 news-block">
<div className="news-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
<div className="inner-box">
<figure className="image-box"><Link href="blog-details"><img src="assets/images/news/news-6.jpg" alt="" /></Link></figure>
<div className="lower-content">
<ul className="post-info mb_15 clearfix">
<li><Link href="blog-details">Admin</Link></li>
<li>08 Jan 2022</li>
<li>02 Comt</li>
</ul>
<h3><Link href="blog-details">What Leads to Inherited Eye Conditions?</Link></h3>
<p>Tincidunt Maur nemi sit Interdum praesento eget morbi lacinia volutpat pellentesque Tincidunt aurna suspit.</p>
<div className="link">
<Link href="blog-details"><span>Read More</span></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* news-style-two end */}
{/* subscribe-two */}
<section className="subscribe-section">
<div className="auto-container">
<div className="inner-container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-12 col-sm-12 text-column">
<div className="text-box">
<h2><span>Subscribe</span> for the exclusive updates!</h2>
</div>
</div>
<div className="col-lg-6 col-md-12 col-sm-12 form-column">
<div className="form-inner">
<form method="post" action="contact">
<div className="form-group">
<input type="email" name="email" placeholder="Enter Your Email Address" required />
<button type="submit" className="theme-btn btn-one"><span>Subscribe Now</span></button>
</div>
<div className="form-group">
<div className="check-box">
<input className="check" type="checkbox" id="checkbox1" />
<label htmlFor="checkbox1">I agree to the <Link href="/">Privacy Policy.</Link></label>
</div>
</div>
</form>
</div>
</div>
export default function Blog() {
return (
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Blog">
<section className="news-section sec-pad bg-color-1">
<div className="auto-container">
<div className="sec-title mb_50 centred">
<span className="sub-title">Our Blog</span>
<h2>Take a look at our most <br />recent articles</h2>
</div>
</div>
</div>
</section>
{/* subscribe end */}
</div>
</Layout>
</>
)
}
<div className="row clearfix">
{Blogs.map((blog, i) => (
<div key={i} className="col-lg-4 col-md-6 col-sm-12 news-block">
<div
className="news-block-one wow fadeInUp animated"
data-wow-delay={`${i * 300}ms`}
data-wow-duration="1500ms"
>
<div className="inner-box">
<figure className="image-box">
<Link href={`/blog/${blog.slug}`}>
<img src={blog.thumbnail} alt={blog.title} />
</Link>
</figure>
<div className="lower-content">
{/* <ul className="post-info mb_15 clearfix">
<li><Link href="#">{blog.author}</Link></li>
<li>{blog.date}</li>
<li>{blog.comments}</li>
</ul> */}
<h3>
<Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
</h3>
<p>{blog.shortDesc}</p>
<div className="link">
<Link href={`/blog/${blog.slug}`}><span>Read More</span></Link>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</section>
</Layout>
);
}

View File

@ -100,7 +100,7 @@ export default function Contact() {
return (
<>
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Contact Us">
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Contact Us" bannerImage="/assets/images/contact/contact-us-banner.webp">
<div>
{/* Contact Info Section */}
<section className="contact-info-section pt_120">
@ -134,7 +134,7 @@ export default function Contact() {
<div className="info-block-one">
<h3>Mailing Address</h3>
<div className="inner-box">
<div className="icon-box"><img src="assets/images/icons/icon-2.png" alt="" /></div>
<div className="icon-box"><img src="/assets/images/icons/icon-2.png" alt="" /></div>
<p>6 4335 Bloor Street West <br />Etobicoke, M9C5S2</p>
</div>
</div>
@ -246,7 +246,7 @@ export default function Contact() {
<div className="col-lg-4 col-md-12 col-sm-12 image-column">
<figure className="image-box">
<img src="/assets/images/resource/contact-1.jpg" alt="" />
<img src="/assets/images/contact/img.webp" alt="" />
</figure>
</div>
</div>

View File

@ -161,16 +161,16 @@ const servicesCols = [
<img
src="/assets/images/icons/icon-1.png"
alt=""
/>3891 Ranchview Dr. Richardson, California USA
/>6 4335 Bloor Street West Etobicoke, M9C5S2
</li>
<li>
<i className="icon-2"></i>
<Link href="tel:01989526503">0198-9526503</Link>
<Link href="tel:647-722-3434">647-722-3434</Link>
</li>
<li>
<i className="icon-26"></i>
<Link href="mailto:example@info.com">
example@info.com
<Link href="mailto:info@rapharehab.ca">
info@rapharehab.ca
</Link>
</li>
</ul>

View File

@ -161,11 +161,11 @@ const servicesCols = [
<img
src="/assets/images/icons/icon-1.png"
alt=""
/>3891 Ranchview Dr. Richardson, California USA
/>6 4335 Bloor Street West Etobicoke, M9C5S2
</li>
<li>
<i className="icon-2"></i>
<Link href="tel:01989526503">0198-9526503</Link>
<Link href="tel:647-722-3434">647-722-3434</Link>
</li>
<li>
<i className="icon-26"></i>

View File

@ -55,15 +55,15 @@ export default function Header2({ scroll, isMobileMenu, handleMobileMenu, isSide
</div>
{/* Menu Right Content */}
<ul className="menu-right-content">
{/* <ul className="menu-right-content">
{/* <li className="search-box-outer search-toggler" onClick={handlePopup}>
<li className="search-box-outer search-toggler" onClick={handlePopup}>
<i className="icon-27"></i>
</li>
<li className="nav-btn nav-toggler navSidebar-button clearfix" onClick={handleSidebar}>
<i className="icon-28"></i>
</li> */}
</ul>
</li>
</ul> */}
<div className="menu-area">
{/* Mobile Navigation Toggler */}
<div className="mobile-nav-toggler" onClick={handleMobileMenu}>

View File

@ -1,73 +1,50 @@
import React from 'react';
import Link from "next/link"
import Blogs from "@/utils/Blog.utils";
export default function News() {
return (
<section className="news-section sec-pad bg-color-1">
<div className="auto-container">
<div className="sec-title mb_50 centred">
<span className="sub-title">Our Blog</span>
<h2>Take a look at our most <br />recent articles</h2>
<section className="news-section sec-pad bg-color-1">
<div className="auto-container">
<div className="sec-title mb_50 centred">
<span className="sub-title">Our Blog</span>
<h2>Take a look at our most <br />recent articles</h2>
</div>
<div className="row clearfix">
{Blogs.map((blog, i) => (
<div key={i} className="col-lg-4 col-md-6 col-sm-12 news-block">
<div
className="news-block-one wow fadeInUp animated"
data-wow-delay={`${i * 300}ms`}
data-wow-duration="1500ms"
>
<div className="inner-box">
<figure className="image-box">
<Link href={`/blog/${blog.slug}`}>
<img src={blog.thumbnail} alt={blog.title} />
</Link>
</figure>
<div className="lower-content">
{/* <ul className="post-info mb_15 clearfix">
<li><Link href="#">{blog.author}</Link></li>
<li>{blog.date}</li>
<li>{blog.comments}</li>
</ul> */}
<h3>
<Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
</h3>
<p>{blog.shortDesc}</p>
<div className="link">
<Link href={`/blog/${blog.slug}`}><span>Read More</span></Link>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
<div className="row clearfix">
<div className="col-lg-4 col-md-6 col-sm-12 news-block">
<div className="news-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box">
<figure className="image-box"><Link href="blog-details"><img src="assets/images/news/news-1.jpg" alt="" /></Link></figure>
<div className="lower-content">
<ul className="post-info mb_15 clearfix">
<li><Link href="blog-details">Admin</Link></li>
<li>12 Jan 2022</li>
<li>03 Comt</li>
</ul>
<h3><Link href="blog-details">How do Inherited Retinal of Diseases Happen?</Link></h3>
<p>Tincidunt Maur nemi sit Interdum praesento eget morbi lacinia volutpat pellentesque Tincidunt aurna suspit.</p>
<div className="link">
<Link href="blog-details"><span>Read More</span></Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12 news-block">
<div className="news-block-one wow fadeInUp animated" data-wow-delay="300ms" data-wow-duration="1500ms">
<div className="inner-box">
<figure className="image-box"><Link href="blog-details"><img src="assets/images/news/news-2.jpg" alt="" /></Link></figure>
<div className="lower-content">
<ul className="post-info mb_15 clearfix">
<li><Link href="blog-details">Admin</Link></li>
<li>11 Jan 2022</li>
<li>0 Comt</li>
</ul>
<h3><Link href="blog-details">Prepare to Speak with Your Eye Specialist.</Link></h3>
<p>Tincidunt Maur nemi sit Interdum praesento eget morbi lacinia volutpat pellentesque Tincidunt aurna suspit.</p>
<div className="link">
<Link href="blog-details"><span>Read More</span></Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12 news-block">
<div className="news-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
<div className="inner-box">
<figure className="image-box"><Link href="blog-details"><img src="assets/images/news/news-3.jpg" alt="" /></Link></figure>
<div className="lower-content">
<ul className="post-info mb_15 clearfix">
<li><Link href="blog-details">Admin</Link></li>
<li>11 Jan 2022</li>
<li>02 Comt</li>
</ul>
<h3><Link href="blog-details">How reliece can help you manage diabetes</Link></h3>
<p>Tincidunt Maur nemi sit Interdum praesento eget morbi lacinia volutpat pellentesque Tincidunt aurna suspit.</p>
<div className="link">
<Link href="blog-details"><span>Read More</span></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
);
};

View File

@ -10,7 +10,7 @@
font-size: 36px;
line-height: 46px;
font-weight: 600;
margin-bottom: 30px;
margin-bottom: 15px;
}
.blog-details-content .news-block-one .inner-box .lower-content{
@ -31,7 +31,8 @@
}
.blog-details-content .news-block-one .inner-box .lower-content h3{
margin-bottom: 30px;
margin-bottom: 15px;
margin-top: 30px;
}
.blog-details-content .news-block-one .inner-box .two-image .image{

View File

@ -93,7 +93,7 @@
}
.news-block-one .inner-box .lower-content p{
margin-bottom: 30px;
margin-bottom: 15px;
}
.news-block-one .inner-box .lower-content .link a{

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 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: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 337 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 318 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 365 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 346 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 183 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

67
utils/Blog.utils.js Normal file
View File

@ -0,0 +1,67 @@
const Blogs = [
{
id: 1,
slug: "inherited-retinal-diseases",
title: "How do Inherited Retinal Diseases Happen?",
author: "Admin",
date: "12 Jan 2022",
comments: "03 Comt",
thumbnail: "/assets/images/news/news-1.jpg",
banner: "/assets/images/news/news-11.jpg",
shortDesc:
"Tincidunt Maur nemi sit Interdum praesento eget morbi lacinia volutpat pellentesque Tincidunt aurna suspit.",
content: `
<p>The abbreviation IRD refers to a group of hereditary conditions called retinal diseases...</p>
<p>A mistake or alteration in one or more genes causes IRDs. Because of this, retinal cells dont function properly, which eventually results in vision loss. Already, 250 genes have been linked to IRD.</p>
<h3>Results Are Easy To Obtain</h3>
<p>Nullam elit elit, vehicula sit amet lobortis quis, luctus vitae purus. Etiam vitae leo non magna venenatis congue.</p>
<div class="two-image row clearfix mt-4">
<div class="col-lg-6 col-md-6 col-sm-12 image-column">
<figure class="image mb_30"><img src="/assets/images/news/news-12.jpg" alt=""/></figure>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 image-column">
<figure class="image mb_30"><img src="/assets/images/news/news-13.jpg" alt=""/></figure>
</div>
</div>
<blockquote>
<div class="icon-box"><i class="icon-23"></i></div>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<h4>Ralph Edwards</h4>
<span class="designation">Dog Trainer</span>
</blockquote>
`,
},
{
id: 2,
slug: "prepare-to-speak-eye-specialist",
title: "Prepare to Speak with Your Eye Specialist",
author: "Admin",
date: "11 Jan 2022",
comments: "0 Comt",
thumbnail: "/assets/images/news/news-2.jpg",
banner: "/assets/images/news/news-11.jpg",
shortDesc:
"Tincidunt Maur nemi sit Interdum praesento eget morbi lacinia volutpat pellentesque Tincidunt aurna suspit.",
content: `
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
`,
},
{
id: 3,
slug: "manage-diabetes",
title: "How relief can help you manage diabetes",
author: "Admin",
date: "11 Jan 2022",
comments: "02 Comt",
thumbnail: "/assets/images/news/news-3.jpg",
banner: "/assets/images/news/news-11.jpg",
shortDesc:
"Tincidunt Maur nemi sit Interdum praesento eget morbi lacinia volutpat pellentesque Tincidunt aurna suspit.",
content: `
<p>Managing diabetes can be challenging, but relief techniques can support better lifestyle management.</p>
`,
},
];
export default Blogs;