banner section updated

This commit is contained in:
Alaguraj0361 2025-09-20 20:45:05 +05:30
parent a8cb2f150f
commit bb23a60d5e
4 changed files with 311 additions and 266 deletions

View File

@ -1,5 +1,5 @@
'use client'
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import Link from "next/link";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
@ -61,71 +61,10 @@ export default function Banner() {
const [activeIndex, setActiveIndex] = useState(0);
const [isAnimating, setIsAnimating] = useState(false);
const slides = [
{
id: 0,
variant: 'topToBottom',
bgImage: '/assets/images/banner/desktopBanner/home-banner-1.webp',
upperText: 'Begin Your Health Journey',
title: 'Better',
titleSpan: 'health',
titleEnd: 'Forever',
// subtitle: 'Expert Physiotherapy in Mississauga for You.',
description: 'Our expert physiotherapists help you restore movement, reduce pain, and live healthier with personalized care in Mississauga.',
buttonText: 'Book Your Appointment',
buttonLink: 'tel:+647-722-3434',
// contentStyle: 'mobile-style'
},
{
id: 1,
variant: 'bottomToTop',
bgImage: '/assets/images/banner/desktopBanner/home-banner-2.webp',
upperText: 'Care That Heals Gently',
title: 'Relaxing',
titleSpan: 'Massage',
titleEnd: 'Therapy',
// subtitle: 'Expert Hand Massage Techniques for Relief',
description: 'Experience soothing massage techniques that release tension, promote circulation, and support your overall wellness.',
buttonText: 'Schedule a Massage',
buttonLink: '/contact',
// contentStyle: 'with-background'
},
{
id: 2,
variant: 'leftToRight',
bgImage: '/assets/images/banner/desktopBanner/home-banner-3.webp',
upperText: 'Wellness Near You Always',
title: 'Trusted',
titleSpan: 'Physio',
titleEnd: 'Experts',
// subtitle: 'Physiotherapy Etobicoke & Rehab Care.',
description: 'Comprehensive physiotherapy and rehab services designed to restore your strength, mobility, and long-term wellness.',
buttonText: 'Explore Our Service',
buttonLink: '/etobicoke-treatment-service',
// contentStyle: 'with-background'
},
{
id: 3,
variant: 'rightToLeft',
bgImage: '/assets/images/banner/desktopBanner/home-banner-4.webp',
upperText: 'Healing With Caring Hands',
title: 'Holistic',
titleSpan: 'Wellness',
titleEnd: 'Care',
// subtitle: 'Waterfront Physio and Rehab Services.',
description: 'Discover holistic physiotherapy and rehab services designed to restore balance, ease pain, and support long-term recovery.',
buttonText: 'Visit Our Location',
buttonLink: '/contact',
// contentStyle: 'with-background'
}
];
const handleSlideChange = (swiper) => {
setIsAnimating(true);
setActiveIndex(swiper.realIndex || 0);
setTimeout(() => {
setIsAnimating(false);
}, 1200);
setTimeout(() => setIsAnimating(false), 1200);
};
return (
@ -133,59 +72,66 @@ export default function Banner() {
<Swiper
{...swiperOptions}
className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none"
onSwiper={(swiper) => {
setActiveIndex(swiper.realIndex || 0);
}}
onSwiper={(swiper) => setActiveIndex(swiper.realIndex || 0)}
onSlideChange={handleSlideChange}
>
{slides.map((slide, index) => (
<SwiperSlide key={slide.id}>
{/* Slide 1 */}
<SwiperSlide>
<AnimatePresence mode="wait">
{activeIndex === index && (
{activeIndex === 0 && (
<motion.div
key={`slide-${index}`}
key="slide-0"
className="slide-item banner-slide"
variants={variants[slide.variant]}
variants={variants.topToBottom}
initial="initial"
animate="animate"
exit="exit"
transition={transition}
>
<div
className={`bg-layer ${slide.id === 0 ? "bg-slide-0" : ""}`}
style={{
backgroundImage: `url(${slide.bgImage})`,
}}
></div>
<div className="auto-container">
<div
className={`content-box custom-content-box ${slide.contentStyle || ''}`}
style={slide.contentStyle === 'with-background' ? {
backgroundColor: '#fff',
opacity: 0.8,
borderRadius: '20px',
padding: '30px'
} : {}}
>
<span className="upper-text">
{slide.upperText}
</span>
<h2>
{slide.title} <span>{slide.titleSpan}</span> {slide.titleEnd}
</h2>
<p>
{slide.subtitle}
</p>
<p>
{slide.description}
</p>
<div className="bg-layer bg-slide-0"
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-1.webp)' }}>
</div>
<div className="auto-container" style={{height:"600px"}}>
{/* <div className="content-box custom-content-box">
<span className="upper-text">Begin Your Health Journey</span>
<h2>Better <span>health</span> Forever</h2>
<p>Our expert physiotherapists help you restore movement, reduce pain, and live healthier with personalized care in Mississauga.</p>
<div className="btn-box mt-3">
<Link href={slide.buttonLink} className="theme-btn btn-one">
<span>{slide.buttonText}</span>
<Link href="tel:+647-722-3434" className="theme-btn btn-one">
<span>Book Your Appointment</span>
</Link>
</div>
</div> */}
</div>
</motion.div>
)}
</AnimatePresence>
</SwiperSlide>
{/* Slide 2 */}
<SwiperSlide>
<AnimatePresence mode="wait">
{activeIndex === 1 && (
<motion.div
key="slide-1"
className="slide-item banner-slide"
variants={variants.bottomToTop}
initial="initial"
animate="animate"
exit="exit"
transition={transition}
>
<div className="bg-layer"
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-2.webp)' }}>
</div>
<div className="auto-container" style={{height:"600px", display:"flex", alignItems:"end"}}>
<div className="content-box custom-content-box" style={{ backgroundColor: '#ffffff8a', opacity: 0.8, borderRadius: '20px', padding: '30px' }}>
<span className="upper-text">Care That Heals Gently</span>
<h2>Relaxing <span>Massage</span> Therapy</h2>
<p>Experience soothing massage techniques that release tension, promote circulation, and support your overall wellness.</p>
<div className="btn-box mt-3">
<Link href="/contact" className="theme-btn btn-one">
<span>Schedule a Massage</span>
</Link>
</div>
</div>
@ -194,8 +140,74 @@ export default function Banner() {
)}
</AnimatePresence>
</SwiperSlide>
))}
{/* Slide 3 */}
<SwiperSlide>
<AnimatePresence mode="wait">
{activeIndex === 2 && (
<motion.div
key="slide-2"
className="slide-item banner-slide"
variants={variants.leftToRight}
initial="initial"
animate="animate"
exit="exit"
transition={transition}
>
<div className="bg-layer"
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-3.webp)' }}>
</div>
<div className="auto-container" style={{height:"600px", display:"flex", alignItems:"end"}}>
<div className="content-box custom-content-box" style={{ backgroundColor: '#ffffff8a', opacity: 0.8, borderRadius: '20px', padding: '30px' }}>
<span className="upper-text">Wellness Near You Always</span>
<h2>Trusted <span>Physio</span> Experts</h2>
<p>Comprehensive physiotherapy and rehab services designed to restore your strength, mobility, and long-term wellness.</p>
<div className="btn-box mt-3">
<Link href="/etobicoke-treatment-service" className="theme-btn btn-one">
<span>Explore Our Service</span>
</Link>
</div>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
</SwiperSlide>
{/* Slide 4 */}
<SwiperSlide>
<AnimatePresence mode="wait">
{activeIndex === 3 && (
<motion.div
key="slide-3"
className="slide-item banner-slide"
variants={variants.rightToLeft}
initial="initial"
animate="animate"
exit="exit"
transition={transition}
>
<div className="bg-layer"
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-4.webp)' }}>
</div>
<div className="auto-container" style={{height:"600px", display:"flex", alignItems:"end"}}>
<div className="content-box custom-content-box" style={{ backgroundColor: '#ffffff8a', opacity: 0.8, borderRadius: '20px', padding: '30px' }}>
<span className="upper-text">Healing With Caring Hands</span>
<h2>Holistic <span>Wellness</span> Care</h2>
<p>Discover holistic physiotherapy and rehab services designed to restore balance, ease pain, and support long-term recovery.</p>
<div className="btn-box mt-3">
<Link href="/contact" className="theme-btn btn-one">
<span>Visit Our Location</span>
</Link>
</div>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
</SwiperSlide>
</Swiper>
</section>
);
};
}

View File

@ -1015,9 +1015,9 @@
}
/* Fully transparent header */
.header-style-two,
.header-style-two .header-top,
.header-style-two .header-area {
.header-style-two,
.header-style-two .header-top,
.header-style-two .header-area {
background: transparent !important;
box-shadow: none !important;
border: none !important;
@ -1026,21 +1026,21 @@
left: 0;
width: 100%;
z-index: 999;
}
}
.header-style-two .header-top a,
.header-style-two .header-top .logo {
.header-style-two .header-top a,
.header-style-two .header-top .logo {
color: #bc0000 !important;
}
}
.header-style-two .header-top .top-inner {
.header-style-two .header-top .top-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 100px;
padding-right: 100px;
position: relative;
}
}
.header-top .top-inner {
@ -1274,9 +1274,10 @@
.main-header .header-lower .outer-box {
position: relative;
/* background: #fff; */
border-top: 1px solid #1025487a;
}
.new{
.new {
background-color: #fff !important;
@ -1475,7 +1476,7 @@
transition: all 500ms ease;
}
.new-menu .new-nav>li>a{
.new-menu .new-nav>li>a {
color: #bc0000 !important;
@ -2754,6 +2755,7 @@
position: relative;
padding-left: 100px;
padding-right: 100px;
/* background: #bc000036 !important; */
}
@media only screen and (max-width: 1200px) {
@ -3355,20 +3357,20 @@
background: none;
}
@media (min-width: 768px) and (max-width: 1024px) {
@media (min-width: 768px) and (max-width: 1024px) {
.custom-content-box.mobile-style {
top: 190px;
background: white;
border-radius: 15%;
opacity: 0.8;
}
}
}
@media (min-width: 768px) and (max-width: 991px) {
@media (min-width: 768px) and (max-width: 991px) {
.custom-content-box.with-background {
top: 170px;
}
}
}
@media (max-width: 425px) {
.custom-content-box.mobile-style {
@ -3473,8 +3475,9 @@
align-items: center;
padding-left: 0px !important;
padding-right: 0px !important;
position: relative; /* Needed for flex children alignment */
}
position: relative;
/* Needed for flex children alignment */
}
.info-block-one {
@ -3491,8 +3494,10 @@
align-items: center;
padding-left: 100px;
padding-right: 100px;
position: relative; /* Needed for flex children alignment */
}
position: relative;
/* Needed for flex children alignment */
}
.blog-details-content .news-block-one .inner-box .lower-content h2 {
font-size: 38px !important;
line-height: 36px;
@ -3556,19 +3561,23 @@
align-items: center;
justify-content: center;
z-index: 9999;
}
}
.preloader {
.preloader {
text-align: center;
}
}
.preloader-icon {
.preloader-icon {
font-size: 50px;
animation: spin 1.5s linear infinite;
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

File diff suppressed because one or more lines are too long

View File

@ -4,85 +4,109 @@ const { SitemapStream, streamToPromise } = require("sitemap");
const { pathToFileURL } = require("url");
const hostname = "https://rapharehap.metatronnest.com";
const appDir = path.join(process.cwd(), "app");
const outputPath = path.join(process.cwd(), "public", "sitemap.xml");
const addTrailingSlash = true; // ✅ Set this true if your Next.js uses trailingSlash: true
function getRoutesFromApp(dir = appDir, basePath = "") {
let routes = [];
if (!fs.existsSync(dir)) return routes;
// // 🔧 Utility to format URLs based on config
// const formatUrl = (url) => {
// if (addTrailingSlash && !url.endsWith('/')) return url + '/';
// if (!addTrailingSlash && url.endsWith('/') && url !== '/') return url.slice(0, -1);
// return url;
// };
// Add a trailing slash only for “directory-like” URLs
const shouldAddSlash = (url) => {
// keep "/" as is
if (url === '/') return false;
// don't touch file-like URLs (has extension)
if (/\.[a-z0-9]{2,6}(\?.*)?$/i.test(url)) return false;
return true;
};
const entries = fs.readdirSync(dir, { withFileTypes: true });
for (const entry of entries) {
if (entry.name.startsWith("_") || entry.name === "api" || entry.name.startsWith(".")) continue;
const fullPath = path.join(dir, entry.name);
const formatUrl = (url) => {
// normalize to leading slash
if (!url.startsWith('/')) url = '/' + url;
if (entry.isDirectory()) {
if (!entry.name.startsWith("[")) {
const hasPage =
fs.existsSync(path.join(fullPath, "page.js")) ||
fs.existsSync(path.join(fullPath, "page.jsx")) ||
fs.existsSync(path.join(fullPath, "index.js")) ||
fs.existsSync(path.join(fullPath, "index.jsx"));
if (hasPage) {
const cleaned = path.join(basePath, entry.name).replace(/\\/g, "/");
routes.push(`/${cleaned}/`);
}
}
routes = routes.concat(getRoutesFromApp(fullPath, path.join(basePath, entry.name)));
} else if (entry.isFile()) {
if (["page.js", "page.jsx", "index.js", "index.jsx"].includes(entry.name)) {
const cleaned = basePath.replace(/\\/g, "/");
const route = "/" + (cleaned ? `${cleaned}/` : "");
routes.push(route);
}
if (addTrailingSlash && shouldAddSlash(url) && !url.endsWith('/')) {
return url + '/';
}
if (!addTrailingSlash && url.endsWith('/') && url !== '/') {
return url.slice(0, -1);
}
return url;
};
return [...new Set(routes.map(r => r.replace(/\/{2,}/g, "/")))];
}
// ✅ Static pages
const staticLinks = [
{ url: '/', changefreq: 'daily', priority: 1.0 },
{ url: '/caregivers/', changefreq: 'weekly', priority: 0.7 },
{ url: '/about-us/', changefreq: 'weekly', priority: 0.7 },
{ url: '/careers/', changefreq: 'weekly', priority: 0.7 },
{ url: '/portfolio/', changefreq: 'weekly', priority: 0.7 },
{ url: '/blog/', changefreq: 'weekly', priority: 0.7 },
{ url: '/contact/', changefreq: 'monthly', priority: 0.5 },
{ url: '/faq/', changefreq: 'monthly', priority: 0.5 },
{ url: '/service/website-development-company/', changefreq: 'weekly', priority: 0.6 },
{ url: '/service/mobile-application-development/', changefreq: 'weekly', priority: 0.6 },
{ url: '/service/graphic-designing-company/', changefreq: 'weekly', priority: 0.6 },
{ url: '/service/ui-ux-designing/', changefreq: 'weekly', priority: 0.6 },
{ url: '/service/search-engine-optimization-seo-content-writing/', changefreq: 'weekly', priority: 0.6 },
{ url: '/service/digital-marketing-agency-in-canada/', changefreq: 'weekly', priority: 0.6 },
{ url: '/service/app-development-waterloo/', changefreq: 'weekly', priority: 0.6 },
{ url: '/service/kitchener-waterloo-website-design-services/', changefreq: 'weekly', priority: 0.6 },
{ url: '/service/professional-website-designers-in-waterloo/', changefreq: 'weekly', priority: 0.6 },
{ url: '/service/waterloo-seo-services/', changefreq: 'weekly', priority: 0.6 },
{ url: '/service/web-design-toronto-custom-website-creation-by-metatroncube-software-solutions/', changefreq: 'weekly', priority: 0.6 },
{ url: '/service/web-page-design-in-waterloo/', changefreq: 'weekly', priority: 0.6 },
];
async function loadESModule(relativePath) {
const fullPath = path.join(process.cwd(), relativePath);
if (!fs.existsSync(fullPath)) return null;
const mod = await import(pathToFileURL(fullPath).href);
return mod.default ?? mod.Blogs ?? [];
}
// ✅ Dynamic blog posts
const blogPosts = [
{ slug: '5-tips-to-create-viral-content-that-drives-engagement/' },
{ slug: 'instagram-vs-facebook-choosing-the-right-platform-for-your-business/' },
{ slug: 'how-local-seo-can-drive-more-foot-traffic-to-your-business/' },
{ slug: 'on-page-vs-off-page-seo-what-every-business-owner-needs-to-know/' },
{ slug: 'how-to-create-a-winning-digital-marketing-strategy-for-your-business/' },
{ slug: 'white-hat-vs-black-hat-seo-an-in-depth-link-building-guide/' },
{ slug: 'how-to-boost-your-small-business-with-effective-digital-marketing-strategies/' },
{ slug: 'the-importance-of-local-seo-for-real-estate-agents/' },
{ slug: 'how-to-optimize-your-website-for-voice-search/' },
{ slug: 'how-ai-is-revolutionizing-web-development-and-seo/' },
{ slug: 'top-digital-marketing-agency-in-canada-metatroncube-software-solutions/' },
{ slug: 'best-digital-marketing-company-in-canada-metatroncube-solutions/' },
{ slug: 'web-designers-for-small-business/' },
{ slug: 'mobile-commerce-2024-web-app-development-evolution/' },
];
// Convert blog slugs to sitemap entries
const blogLinks = blogPosts.map(post => ({
url: `/${post.slug}`,
changefreq: 'weekly',
priority: 0.6
}));
const allLinks = [...staticLinks, ...blogLinks].map(link => ({
...link,
url: formatUrl(link.url),
}));
async function generateSitemap() {
try {
const sitemap = new SitemapStream({ hostname: hostname });
const writeStream = fs.createWriteStream(path.resolve(__dirname, '../out/sitemap.xml'));
const staticRoutes = getRoutesFromApp();
const staticLinks = staticRoutes.map(route => ({
url: route,
changefreq: "weekly",
priority: route === "/" ? 1.0 : 0.8,
}));
const Blogs = await loadESModule("utils/Blog.utils.js");
const blogLinks = (Blogs || []).map(post => ({
url: `/blog/${post.slug}/`,
changefreq: "weekly",
priority: 0.8,
}));
const allLinks = [...staticLinks, ...blogLinks];
const sitemap = new SitemapStream({ hostname });
const writeStream = fs.createWriteStream(outputPath);
sitemap.pipe(writeStream);
console.log('📦 Writing URLs to sitemap:');
allLinks.forEach(link => {
console.log(' -', hostname + link.url);
sitemap.write(link);
console.log("✅ writing:", link.url);
});
sitemap.end();
await streamToPromise(sitemap);
console.log(`🎉 sitemap.xml generated at ${outputPath} (${allLinks.length} URLs)`);
} catch (err) {
console.error("❌ Failed to generate sitemap:", err);
process.exit(1);
console.log('✅ sitemap.xml created successfully!');
} catch (error) {
console.error('❌ Error creating sitemap.xml:', error);
}
}