Almost updated
This commit is contained in:
mukesh13
@ -104,7 +104,7 @@ export default function Footer3() {
|
||||
</Link>
|
||||
<div className="footer-info mb_51">
|
||||
<a href="#" className="link text-body-2" style={{ color: 'white' }}>
|
||||
themesflat@gmail.com
|
||||
koushik@keystonesolution.in
|
||||
</a>
|
||||
<div className="text-body-2" style={{ color: 'white' }}>
|
||||
No. 3A, 1st Floor, Balaji Nagar,<br />
|
||||
@ -252,7 +252,7 @@ export default function Footer3() {
|
||||
<p className="text-body-2 m-0" style={{ color: 'white' }}>
|
||||
© {new Date().getFullYear()} Copyright by{" "}
|
||||
<a href="#" className="link-black text-body-3" style={{ color: 'white', fontWeight: '600' }}>
|
||||
Keystone
|
||||
Keystone Solutions
|
||||
</a>{" "}
|
||||
. All Rights Reserved.
|
||||
</p>
|
||||
|
||||
@ -21,31 +21,14 @@ export default function Header4() {
|
||||
{ id: 13, title: "Data Processing", href: "/service-details/13" },
|
||||
{ id: 14, title: "Receipt Data Entry Services", href: "/service-details/14" },
|
||||
{ id: 15, title: "Logistics Data Entry Services", href: "/service-details/15" },
|
||||
{ id: 16, title: "Construction", href: "/service-details/16" }
|
||||
{ id: 16, title: "Construction", href: "/#" }
|
||||
];
|
||||
|
||||
const renderServiceLink = (service) => {
|
||||
// Disable Construction service (id: 16) same as in Services component
|
||||
const isDisabled = service.id === 16;
|
||||
|
||||
if (isDisabled) {
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
display: 'block',
|
||||
padding: '8px 16px',
|
||||
color: '#999999',
|
||||
fontSize: '14px',
|
||||
fontWeight: '500',
|
||||
borderLeft: '3px solid transparent',
|
||||
cursor: 'not-allowed',
|
||||
opacity: '0.5'
|
||||
}}
|
||||
>
|
||||
{service.title}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Link
|
||||
|
||||
@ -1,12 +1,4 @@
|
||||
"use client";
|
||||
import {
|
||||
blogPages,
|
||||
homepages,
|
||||
otherPages,
|
||||
servicePages,
|
||||
shopPages,
|
||||
} from "@/data/menu";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import React from "react";
|
||||
@ -14,18 +6,50 @@ import React from "react";
|
||||
export default function Mobilemenu() {
|
||||
const pathname = usePathname();
|
||||
const isActive = (link) => link.split("/")[1] == pathname.split("/")[1];
|
||||
const isActiveParent = (links) => links.some((link) => isActive(link.href));
|
||||
|
||||
// Service items matching Header4 component
|
||||
const serviceItems = [
|
||||
{ id: 11, title: "Data Entry Services", href: "/service-details/11" },
|
||||
{ id: 12, title: "Data Conversion", href: "/service-details/12" },
|
||||
{ id: 13, title: "Data Processing", href: "/service-details/13" },
|
||||
{ id: 14, title: "Receipt Data Entry Services", href: "/service-details/14" },
|
||||
{ id: 15, title: "Logistics Data Entry Services", href: "/service-details/15" },
|
||||
{ id: 16, title: "Construction", href: "/#" }
|
||||
];
|
||||
|
||||
const isServiceActive = () => {
|
||||
return serviceItems.some(service => pathname.includes(service.href));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="offcanvas offcanvas-start canvas-mb" id="menu-mobile">
|
||||
<div className="offcanvas-header top-nav-mobile justify-content-between">
|
||||
<Link href={`/`} className="logo">
|
||||
<Image
|
||||
alt="logo"
|
||||
src="/images/logo/footer-logo.png"
|
||||
width={390}
|
||||
height={80}
|
||||
/>
|
||||
{/* Updated logo to match Header4 SVG logo */}
|
||||
<svg
|
||||
width="140"
|
||||
height={35}
|
||||
viewBox="0 0 150 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<path
|
||||
d="M18.2183 15.7033L29.395 34.7289C29.4936 34.8967 29.6741 34.9994 29.8687 34.9985L41.1397 34.9463C41.3308 34.9455 41.5075 34.8448 41.6058 34.6809L47.5 24.8527L35.944 24.8365C35.7518 24.8362 35.5738 24.7349 35.4754 24.5698L23.9713 5.2667C23.8727 5.10131 23.6944 5 23.5019 5L12.3005 5C12.1083 5 11.9302 5.10099 11.8315 5.26594L5.91087 15.1639L0.167756 24.7208C0.0644005 24.8928 0.0636223 25.1076 0.165723 25.2804L5.75222 34.7316C5.85055 34.8979 6.02941 35 6.22264 35L16.7708 35C17.1948 35 17.4573 34.538 17.2402 34.1738L5.91087 15.1639L17.276 15.1639C17.6635 15.1639 18.022 15.3691 18.2183 15.7033Z"
|
||||
fill="#28285B"
|
||||
/>
|
||||
<text
|
||||
x="55"
|
||||
y="20"
|
||||
fontFamily="Arial, sans-serif"
|
||||
fontSize="20"
|
||||
fontWeight="600"
|
||||
fill="#121416"
|
||||
dominantBaseline="central"
|
||||
>
|
||||
Keystone
|
||||
</text>
|
||||
</svg>
|
||||
</Link>
|
||||
<div className="close-menu" data-bs-dismiss="offcanvas">
|
||||
<i className="icon-times-solid" />
|
||||
@ -35,83 +59,8 @@ export default function Mobilemenu() {
|
||||
<div className="mb-body">
|
||||
<div className="mb-content-top">
|
||||
<ul className="nav-ul-mb" id="wrapper-menu-navigation">
|
||||
<li
|
||||
className={`nav-mb-item ${
|
||||
isActiveParent(homepages) ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<a
|
||||
href="#dropdown-menu-home"
|
||||
className="collapsed mb-menu-link"
|
||||
data-bs-toggle="collapse"
|
||||
aria-expanded="true"
|
||||
aria-controls="dropdown-menu-home"
|
||||
>
|
||||
<span>Home</span>
|
||||
<span className="btn-open-sub" />
|
||||
</a>
|
||||
<div
|
||||
id="dropdown-menu-home"
|
||||
className="collapse"
|
||||
data-bs-parent="#menu-mobile"
|
||||
>
|
||||
<ul className="sub-nav-menu">
|
||||
{homepages.map((item, index) => (
|
||||
<li key={index}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`sub-nav-link ${
|
||||
isActive(item.href) ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{item.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={`nav-mb-item ${
|
||||
isActiveParent(otherPages) ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<a
|
||||
href="#dropdown-menu-pages"
|
||||
className="collapsed mb-menu-link"
|
||||
data-bs-toggle="collapse"
|
||||
aria-expanded="true"
|
||||
aria-controls="dropdown-menu-pages"
|
||||
>
|
||||
<span>Pages</span>
|
||||
<span className="btn-open-sub" />
|
||||
</a>
|
||||
<div
|
||||
id="dropdown-menu-pages"
|
||||
className="collapse"
|
||||
data-bs-parent="#menu-mobile"
|
||||
>
|
||||
<ul className="sub-nav-menu">
|
||||
{otherPages.map((item) => (
|
||||
<li key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`sub-nav-link ${
|
||||
isActive(item.href) ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={`nav-mb-item ${
|
||||
isActiveParent(servicePages) ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{/* Services Menu Item with Dropdown */}
|
||||
<li className={`nav-mb-item ${isServiceActive() ? "active" : ""}`}>
|
||||
<a
|
||||
href="#dropdown-menu-services"
|
||||
className="collapsed mb-menu-link"
|
||||
@ -119,7 +68,7 @@ export default function Mobilemenu() {
|
||||
aria-expanded="true"
|
||||
aria-controls="dropdown-menu-services"
|
||||
>
|
||||
<span>Serivce</span>
|
||||
<span>Services</span>
|
||||
<span className="btn-open-sub" />
|
||||
</a>
|
||||
<div
|
||||
@ -128,104 +77,51 @@ export default function Mobilemenu() {
|
||||
data-bs-parent="#menu-mobile"
|
||||
>
|
||||
<ul className="sub-nav-menu">
|
||||
{servicePages.map((item) => (
|
||||
<li key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`sub-nav-link ${
|
||||
isActive(item.href) ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
{serviceItems.map((service) => {
|
||||
// Disable Construction service (id: 16) same as in Header4
|
||||
|
||||
|
||||
return (
|
||||
<li key={service.id}>
|
||||
<Link
|
||||
href={service.href}
|
||||
className={`sub-nav-link ${
|
||||
isActive(service.href) ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{service.title}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={`nav-mb-item ${
|
||||
isActiveParent(blogPages) ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<a
|
||||
href="#dropdown-menu-blog"
|
||||
className="collapsed mb-menu-link"
|
||||
data-bs-toggle="collapse"
|
||||
aria-expanded="true"
|
||||
aria-controls="dropdown-menu-blog"
|
||||
>
|
||||
<span>Blog</span>
|
||||
<span className="btn-open-sub" />
|
||||
</a>
|
||||
<div
|
||||
id="dropdown-menu-blog"
|
||||
className="collapse"
|
||||
data-bs-parent="#menu-mobile"
|
||||
>
|
||||
<ul className="sub-nav-menu">
|
||||
{blogPages.map((item) => (
|
||||
<li key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`sub-nav-link ${
|
||||
isActive(item.href) ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* About Menu Item */}
|
||||
<li className={`nav-mb-item ${isActive("/about") ? "active" : ""}`}>
|
||||
<Link href={`/about`} className="mb-menu-link">
|
||||
About
|
||||
</Link>
|
||||
</li>
|
||||
<li
|
||||
className={`nav-mb-item ${
|
||||
isActiveParent(shopPages) ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<a
|
||||
href="#dropdown-menu-shop"
|
||||
className="collapsed mb-menu-link"
|
||||
data-bs-toggle="collapse"
|
||||
aria-expanded="true"
|
||||
aria-controls="dropdown-menu-shop"
|
||||
>
|
||||
<span>Shop</span>
|
||||
<span className="btn-open-sub" />
|
||||
</a>
|
||||
<div
|
||||
id="dropdown-menu-shop"
|
||||
className="collapse"
|
||||
data-bs-parent="#menu-mobile"
|
||||
>
|
||||
<ul className="sub-nav-menu">
|
||||
{shopPages.map((item) => (
|
||||
<li key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`sub-nav-link ${
|
||||
isActive(item.href) ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Career Menu Item */}
|
||||
<li className={`nav-mb-item ${isActive("/career") ? "active" : ""}`}>
|
||||
<Link href={`/career`} className="mb-menu-link">
|
||||
Career
|
||||
</Link>
|
||||
</li>
|
||||
<li
|
||||
className={`nav-mb-item ${
|
||||
isActive("/contact-us") ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
|
||||
{/* Contact Menu Item */}
|
||||
<li className={`nav-mb-item ${isActive("/contact-us") ? "active" : ""}`}>
|
||||
<Link href={`/contact-us`} className="mb-menu-link">
|
||||
Contact
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Updated contact information and buttons */}
|
||||
<div className="mb-other-content">
|
||||
<ul className="mb-info mb_20">
|
||||
<li>
|
||||
@ -233,10 +129,10 @@ export default function Mobilemenu() {
|
||||
Address:
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://www.google.com/maps?q=16/9,ScotlandUnitedKingdom"
|
||||
href="https://www.google.com/maps?q=No.3A,1stFloor,BalajiNagar,Dharapadavedu,Vellore-632007,TamilNadu,India"
|
||||
>
|
||||
<span className="fw-5 text_mono-gray-5">
|
||||
16/9, Scotland United Kingdom
|
||||
No. 3A, 1st Floor, Balaji Nagar, Dharapadavedu, Vellore - 632007, Tamil Nadu, India
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
@ -244,9 +140,9 @@ export default function Mobilemenu() {
|
||||
<li>
|
||||
<p className="text_mono-gray">
|
||||
Email:
|
||||
<a href="mailto:themesflat@gmail.com">
|
||||
<a href="mailto:koushik@keystonesolution.in">
|
||||
<span className="fw-5 text_mono-gray-5">
|
||||
themesflat@gmail.com
|
||||
koushik@keystonesolution.in
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
@ -254,16 +150,16 @@ export default function Mobilemenu() {
|
||||
<li>
|
||||
<p className="text_mono-gray">
|
||||
Phone:
|
||||
<a href="tel:+11635565389">
|
||||
<a href="tel:+919095450005">
|
||||
<span className="fw-5 text_mono-gray-5">
|
||||
+1 16355 65389
|
||||
+91 90954 50005
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mb-wrap-btn d-flex gap_12">
|
||||
<Link href={`/pricing`} className="tf-btn">
|
||||
<Link href={`/about`} className="tf-btn">
|
||||
<span>Get Started</span>
|
||||
<span className="bg-effect" />
|
||||
</Link>
|
||||
@ -277,4 +173,4 @@ export default function Mobilemenu() {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user