mukeshs/keystone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Almost updated

Browse Source
This commit is contained in:
mukesh13
2025-08-13 20:21:20 +05:30
parent c6629e4daa
commit a286215d0f
31 changed files with 1163 additions and 665 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/(otherPages)/about/page.jsx
View File

@ -1,61 +1,58 @@
import Contact from "@/components/common/Contact"; import Footer3 from "@/components/footers/Footer3";
import Faqs from "@/components/common/Faqs"; import Header4 from "@/components/headers/Header4";
import Testimonials from "@/components/common/Testimonials";
import Footer1 from "@/components/footers/Footer1";
import Header1 from "@/components/headers/Header1";
import About from "@/components/otherPages/About"; import About from "@/components/otherPages/About";
import Process from "@/components/otherPages/Process";
import Team from "@/components/otherPages/Team";
import React from "react"; import React from "react";
import Link from "next/link"; import Link from "next/link";
export const metadata = { export const metadata = {
title: title: "About || Keystone Solutions",
"About || Advitex - Finance and Business Consulting React Nextjs Template",
description: description:
"Advitex - Finance and Business Consulting React Nextjs Template", "Keystone Solutions - Your trusted BPO partner for global excellence and specialized data solutions",
}; };
export default function AboutPage() { export default function AboutPage() {
return ( return (
<> <>
<div className="primary-3">
<div className="wrap-page-header"> <div className="wrap-page-header">
<Header1 /> <Header4 />
<div className="page-title style-default">
{/* Page Title Section */}
<section className="page-title tf-spacing-47 bg-color-1">
<div className="tf-container"> <div className="tf-container">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="heading mb_51"> {/* Breadcrumb */}
<h1 className="text_black mb_16 letter-spacing-1"> <div className="breadcrumb-trail mb-3">
Play a key role in <br /> <Link href="/" className="home-link text-body-2 text-dark">
business advancement
</h1>
<p className="sub-heading text_mono-gray-7">
Promote innovation by introducing breakthrough ideas and
technologies <br />
to improve business and customer experience.
</p>
</div>
<ul className="breadcrumb">
<li>
<Link href={`/`} className="link">
Home Home
</Link> </Link>
</li> <span className="separator text-body-2 mx-2">&gt;</span>
<li>About us</li> <span className="current-page text-body-2 text-primary">About Us</span>
</ul> </div>
{/* Page Title */}
<div className="page-title-content">
<h1 className="page-title-main display-4 mb-3">
About Keystone Solutions
</h1>
<p className="page-subtitle text-body-1 mb-0">
Discover our journey, mission, and commitment to delivering
world-class business process outsourcing solutions.
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section>
</div> </div>
<div className="main-content style-1"> <div className="main-content style-1">
<About /> <About />
<Team />
<Process />
<Testimonials />
<Faqs parentClass="section-faqs style-1 tf-spacing-8" />
<Contact />
</div> </div>
<Footer1 /> </div>
<Footer3 />
</> </>
); );
} }

68
app/(otherPages)/career/page.jsx
View File

@ -1,56 +1,62 @@
// CareerPage Component
import Contact from "@/components/common/Contact"; import Contact from "@/components/common/Contact";
import Footer3 from "@/components/footers/Footer3";
import Footer1 from "@/components/footers/Footer1"; import Header4 from "@/components/headers/Header4";
import Header1 from "@/components/headers/Header1"; import Careerform from "@/components/common/Careerform";
import Benefits from "@/components/otherPages/Benefits";
import Oppertunities from "@/components/otherPages/Oppertunities"; import Oppertunities from "@/components/otherPages/Oppertunities";
import Link from "next/link"; import Link from "next/link";
import React from "react"; import React from "react";
export const metadata = { export const metadata = {
title: title: "Career || Keystone Solutions",
"Career || Advitex - Finance and Business Consulting React Nextjs Template",
description: description:
"Advitex - Finance and Business Consulting React Nextjs Template", "Join our team at Keystone Solutions and build your career in business process outsourcing and data solutions",
}; };
export default function CareerPage() { export default function CareerPage() {
return ( return (
<> <>
<div className="primary-3 bg-color-1">
<div className="wrap-page-header"> <div className="wrap-page-header">
<Header1 /> <Header4 />
<div className="page-title style-default">
{/* Page Title Section */}
<section className="page-title tf-spacing-47 bg-color-1">
<div className="tf-container"> <div className="tf-container">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="heading mb_51"> {/* Breadcrumb */}
<h1 className="text_black mb_18 letter-spacing-1">Career</h1> <div className="breadcrumb-trail mb-3">
<p className="sub-heading text_mono-gray-7"> <Link href="/" className="home-link text-body-2 text-dark">
A typical day is a mix of strategic thinking,
problem-solving, and client interaction. The work is
demanding <br />
but rewarding, offering opportunities to tackle complex
challenges and drive positive change.
</p>
</div>
<ul className="breadcrumb">
<li>
<Link href={`/`} className="link">
Home Home
</Link> </Link>
</li> <span className="separator text-body-2 mx-2">&gt;</span>
<li>Career</li> <span className="current-page text-body-2 text-primary">Career</span>
</ul> </div>
{/* Page Title */}
{/* Page Title */}
<div className="page-title-content">
<h1 className="page-title-main display-4 mb-3">
Career
</h1>
<p className="page-subtitle text-body-1 mb-0">
Join our team to take on meaningful challenges, grow your skills, and make an impact.
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section>
</div> </div>
<div className="main-content style-1">
<Benefits /> <div className="main-content">
<Oppertunities /> <Careerform />
<Contact />
</div> </div>
<Footer1 /> </div>
<Footer3 />
</> </>
); );
} }

48
app/(otherPages)/contact-us/page.jsx
View File

@ -1,26 +1,58 @@
// ContactUsPage
import Footer3 from "@/components/footers/Footer3"; import Footer3 from "@/components/footers/Footer3";
import Header4 from "@/components/headers/Header4"; import Header4 from "@/components/headers/Header4";
import Contact from "@/components/otherPages/Contact"; import Contact from "@/components/otherPages/Contact";
// import OfficeLocations from "@/components/otherPages/OfficeLocations";
import React from "react"; import React from "react";
import Link from "next/link";
export const metadata = { export const metadata = {
title: title: "Contact Us || Keystone Solutions",
"Contact Us || Advitex - Finance and Business Consulting React Nextjs Template",
description: description:
"Advitex - Finance and Business Consulting React Nextjs Template", "Get in touch with Keystone Solutions for all your business process outsourcing needs and data solutions",
}; };
export default function ContactUsPage() { export default function ContactUsPage() {
return ( return (
<> <>
<div className="primary-3 bg-color-1">
<div className="wrap-page-header"> <div className="wrap-page-header">
<Header4 /> <Header4 />
{/* Page Title Section */}
<section className="page-title tf-spacing-47 bg-color-1">
<div className="tf-container">
<div className="row">
<div className="col-12">
{/* Breadcrumb */}
<div className="breadcrumb-trail mb-3">
<Link href="/" className="home-link text-body-2 text-dark">
Home
</Link>
<span className="separator text-body-2 mx-2">&gt;</span>
<span className="current-page text-body-2 text-primary">Contact Us</span>
</div>
{/* Page Title */}
<div className="page-title-content">
<h1 className="page-title-main display-4 mb-3">
Contact Us
</h1>
<p className="page-subtitle text-body-1 mb-0">
Get in touch with our team to discuss your business needs and
discover how we can help you achieve your goals.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
<div className="main-content">
<Contact /> <Contact />
</div> </div>
{/* <div className="main-content style-1"> </div>
<OfficeLocations />
</div> */}
<Footer3 /> <Footer3 />
</> </>
); );

64
app/(services)/service-details/[id]/page.jsx
View File

@ -1,61 +1,67 @@
import Contact from "@/components/common/Contact"; import Contact from "@/components/common/Contact";
import Faqs from "@/components/common/Faqs"; import Faqs from "@/components/common/Faqs";
import Pricing from "@/components/common/Pricing"; import Pricing from "@/components/common/Pricing";
import Testimonials from "@/components/common/Testimonials"; import Testimonials from "@/components/common/Testimonials";
import Footer1 from "@/components/footers/Footer1"; import Footer3 from "@/components/footers/Footer3";
import Header1 from "@/components/headers/Header1"; import Header4 from "@/components/headers/Header4";
import Link from "next/link"; import Link from "next/link";
import ServiceDetails from "@/components/otherPages/ServiceDetails"; import ServiceDetails from "@/components/otherPages/ServiceDetails";
export const metadata = {
title:
"Service Details || Advitex - Finance and Business Consulting React Nextjs Template",
description:
"Advitex - Finance and Business Consulting React Nextjs Template",
};
import React from "react"; import React from "react";
import { allServices } from "@/data/services"; import { allServices } from "@/data/services";
export const metadata = {
title: "Service Details || Keystone Solutions",
description:
"Explore our comprehensive business process outsourcing services and data solutions at Keystone Solutions",
};
export default async function ServiceDetailsPage({ params }) { export default async function ServiceDetailsPage({ params }) {
const { id } = await params; const { id } = await params;
const service = allServices.filter((p) => p.id == id)[0] || allServices[0]; const service = allServices.filter((p) => p.id == id)[0] || allServices[0];
return ( return (
<> <>
<div className="primary-3">
<div className="wrap-page-header"> <div className="wrap-page-header">
<Header1 /> <Header4 />
<div className="page-title style-default">
{/* Page Title Section */}
<section className="page-title tf-spacing-47">
<div className="tf-container"> <div className="tf-container">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="heading mb_43"> {/* Breadcrumb */}
<h1 <div className="breadcrumb-trail mb-3">
className="text_black letter-spacing-1" <Link href="/" className="home-link text-body-2">
dangerouslySetInnerHTML={{ __html: service.title }}
></h1>
</div>
<ul className="breadcrumb">
<li>
<Link href={`/`} className="link">
Home Home
</Link> </Link>
</li> <span className="separator text-body-2 mx-2">&gt;</span>
<li>Services</li> <span className="text-body-2">Services</span>
<li dangerouslySetInnerHTML={{ __html: service.title }}></li> <span className="separator text-body-2 mx-2">&gt;</span>
</ul> <span
</div> className="current-page text-body-2"
dangerouslySetInnerHTML={{ __html: service.title }}
></span>
</div>
</div> </div>
</div> </div>
</div> </div>
</section>
</div> </div>
<div className="main-content style-1"> <div className="main-content style-1">
<ServiceDetails /> <ServiceDetails service={service} />
<Pricing parentClass="section tf-spacing-13" /> {/* <Pricing parentClass="section tf-spacing-13" />
<Testimonials /> <Testimonials />
<Faqs parentClass="section-faqs style-1 tf-spacing-8" /> <Faqs parentClass="section-faqs style-1 tf-spacing-8" />
<Contact /> <Contact /> */}
</div> </div>
<Footer1 /> </div>
<Footer3 />
</> </>
); );
} }

28
app/page.jsx
View File

@ -1,9 +1,7 @@
import Header4 from "@/components/headers/Header4"; import Header4 from "@/components/headers/Header4";
import About from "@/components/homes/insurance-consulting/About"; import About from "@/components/homes/insurance-consulting/About";
// import Approach from "@/components/homes/insurance-consulting/Approach";
// import Blogs from "@/components/homes/insurance-consulting/Blogs"; import Contact from "../components/common/Contact";
// import CaseStudies from "@/components/homes/insurance-consulting/CaseStudies";
import Contact from "@/components/common/Contact";
// import Cta from "@/components/homes/insurance-consulting/Cta"; // import Cta from "@/components/homes/insurance-consulting/Cta";
import Testimonials from "@/components/common/Testimonials"; import Testimonials from "@/components/common/Testimonials";
// import Faqs from "@/components/homes/insurance-consulting/Faqs"; // import Faqs from "@/components/homes/insurance-consulting/Faqs";
@ -25,18 +23,18 @@ export default function HomePage() {
<Header4 /> <Header4 />
<Hero /> <Hero />
<div className="main-content"> <div className="main-content">
<section id="services">
<Services /> <Services />
</section>
<div className="tf-container tf-spacing-47"> <div className="tf-container tf-spacing-47">
<div className="divider" /> <div />
</div> </div>
<About /> <About />
<div className="tf-container tf-spacing-47"> <div className="tf-container tf-spacing-47">
<div className="divider" /> <div />
</div>
<Testimonials />
<div className="tf-container tf-spacing-47">
<div className="divider" />
</div> </div>
<Contact /> <Contact />
{/* <div className="tf-container tf-spacing-32"> {/* <div className="tf-container tf-spacing-32">
<div className="divider" /> <div className="divider" />
@ -49,16 +47,14 @@ export default function HomePage() {
<div className="tf-container tf-spacing-33"> <div className="tf-container tf-spacing-33">
<div className="divider" /> <div className="divider" />
</div> </div>
<Blogs /> <Blogs />*/}
<div className="tf-container tf-spacing-34"> <div className="tf-container tf-spacing-47">
<div className="divider" /> <div />
</div> </div>
<Faqs />
<Cta /> */}
<Footer3 />
</div>{" "} </div>{" "}
</div> </div>
</div> </div>
<Footer3 />
</> </>
); );
} }

222
components/common/Careerform.jsx Normal file
View File

@ -0,0 +1,222 @@
"use client";
import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
export default function Careerform() {
const [formData, setFormData] = useState({
fullName: '',
email: '',
phone: '',
roles: '',
resume: null
});
const [uploadStatus, setUploadStatus] = useState('');
const handleInputChange = (e) => {
const { id, value } = e.target;
setFormData(prev => ({
...prev,
[id]: value
}));
};
const handleFileUpload = (e) => {
const file = e.target.files[0];
if (file) {
// Validate file type
const allowedTypes = ['.pdf', '.doc', '.docx'];
const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
if (!allowedTypes.includes(fileExtension)) {
setUploadStatus('Please upload a PDF, DOC, or DOCX file');
return;
}
// Validate file size (5MB limit)
if (file.size > 5 * 1024 * 1024) {
setUploadStatus('File size must be less than 5MB');
return;
}
setFormData(prev => ({
...prev,
resume: file
}));
setUploadStatus(`${file.name} uploaded successfully`);
}
};
const handleSubmit = (e) => {
e.preventDefault();
// Basic form validation
if (!formData.fullName || !formData.email || !formData.phone || !formData.roles) {
alert('Please fill in all required fields');
return;
}
if (!formData.resume) {
alert('Please upload your resume');
return;
}
// Here you would typically send the form data to your backend
console.log('Form submitted:', formData);
// Example of how you might handle the form submission
const submitData = new FormData();
submitData.append('fullName', formData.fullName);
submitData.append('email', formData.email);
submitData.append('phone', formData.phone);
submitData.append('roles', formData.roles);
submitData.append('resume', formData.resume);
// Replace with your actual API endpoint
// fetch('/api/submit-application', {
// method: 'POST',
// body: submitData
// }).then(response => {
// // Handle response
// });
alert('Application submitted successfully!');
// Reset form
setFormData({
fullName: '',
email: '',
phone: '',
roles: '',
resume: null
});
setUploadStatus('');
// Reset file input
const fileInput = document.getElementById('resume-upload');
if (fileInput) fileInput.value = '';
};
return (
<div className="page-title style-default -mb_11">
<div className="section-contact style-default position-relative py-0">
<div className="tf-container">
<div className="row">
<div className="col-lg-6">
<div className="left">
<div className="heading">
<h2 className="mb_21 text_primary">
Ready to join our team? Let's build something amazing together!
</h2>
</div>
<div className="bot">
<div className="content mb-0 ">
<h6 className="text_primary">+91 90954 50005</h6>
<p className="text-body-2 text_primary">
Call us for career inquiries
</p>
</div>
</div>
</div>
</div>
<div className="col-lg-6">
<form className="form-contact" onSubmit={handleSubmit}>
<fieldset>
<label className="mb_15" htmlFor="fullName">
Full Name*
</label>
<input
type="text"
placeholder="Full Name"
id="fullName"
value={formData.fullName}
onChange={handleInputChange}
required
/>
</fieldset>
<div className="grid-2 gap_24">
<fieldset>
<label className="mb_15" htmlFor="email">
Email Address*
</label>
<input
type="email"
placeholder="Your email address*"
id="email"
value={formData.email}
onChange={handleInputChange}
required
/>
</fieldset>
<fieldset>
<label className="mb_15" htmlFor="phone">
Phone Number*
</label>
<input
type="text"
placeholder="Your phone number"
id="phone"
value={formData.phone}
onChange={handleInputChange}
required
/>
</fieldset>
</div>
<fieldset className="">
<label className="mb_15" htmlFor="roles">
Roles of Interest*
</label>
<input
type="text"
placeholder="e.g., Frontend Developer, UI/UX Designer, Project Manager"
id="roles"
value={formData.roles}
onChange={handleInputChange}
required
/>
</fieldset>
{/* File Upload Section */}
<div className="file-upload-section mt_20">
<label className="link attachment" htmlFor="resume-upload" style={{ cursor: 'pointer' }}>
<i className="icon-paperclip-solid" />
{formData.resume ? `Selected: ${formData.resume.name}` : 'Upload CV*'}
</label>
<input
type="file"
id="resume-upload"
accept=".pdf,.doc,.docx"
onChange={handleFileUpload}
style={{ display: 'none' }}
required
/>
{uploadStatus && (
<p className={`upload-status mt_10 ${uploadStatus.includes('successfully') ? 'text-success' : 'text-danger'}`}>
{uploadStatus}
</p>
)}
<small className="text-muted d-block mt_5">
Accepted formats: PDF, DOC, DOCX (Max size: 5MB)
</small>
</div>
<button type="submit" className="tf-btn btn-primary2 mt_22">
<span>Submit Application</span>
<span className="bg-effect" />
</button>
</form>
</div>
</div>
</div>
{/* <div className="shape position-absolute">
<Image
alt="item"
src="/images/item/shape-5.png"
width={1105}
height={720}
/>
</div> */}
</div>
</div>
);
}

62
components/common/Contact.jsx
View File

@ -2,43 +2,54 @@
import React from "react"; import React from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
export default function Contact() { export default function Contact() {
return ( return (
<div className="section-contact style-default position-relative"> <div className="section-contact style-default position-relative" style={{ paddingLeft: "30px", paddingRight: "30px" }}>
<div className="tf-container"> <div className="tf-container-2" style={{ padding:"30px", background: "linear-gradient(89.8deg, #ff3a2d -0.43%, #ffa13f 100.84%)", borderRadius: "26px" }}>
<div className="row"> <div className="row">
<div className="col-lg-6"> <div className="col-lg-6">
<div className="left"> <div className="left">
<div className="heading"> <div className="heading">
<div className="h1 split-text split-lines-rotation-x"> <div className="h1 split-text split-lines-rotation-x text-white">
Success is a team play, right? Let's work together! Let's Start Building Solutions Together
</div> </div>
</div> </div>
<div className="bot"> <div className="bot">
<div className="content"> <div className="content">
<h6 className="mb_5">+91 90954 50005</h6> <h6 className="mb_5 text-white">+91 90954 50005</h6>
<p className="text-body-2 text_mono-gray-6"> <p className="text-body-2 text-white">
Call us for urgent Call us for urgent Inquiry
</p> </p>
</div> </div>
<Link href={`/contact-us`} className="tf-btn btn-primary2 h36"> {/* <Link
<span className="text-caption">Get Direction</span> href="https://maps.app.goo.gl/pznAE2GE6p3YUhrE7?g_st=com.google.maps.preview.copy"
target="_blank"
rel="noopener noreferrer"
className="tf-btn btn-primary2 h36"
style={{
backgroundColor: 'white',
color: 'black',
border: '1px solid #ddd'
}}
>
<span className="text-caption" style={{ color: 'black' }}>Get Direction</span>
<span className="bg-effect" /> <span className="bg-effect" />
</Link> </Link> */}
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-6"> <div className="col-lg-6">
<form onSubmit={(e) => e.preventDefault()} className="form-contact"> <form onSubmit={(e) => e.preventDefault()} className="form-contact" style={{ gap: "10px !important" }}>
<fieldset> <fieldset style={{ marginBottom: "5px !important" }}>
<label className="mb_15" htmlFor="name"> <label htmlFor="name" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
Full Name* Full Name*
</label> </label>
<input type="text" placeholder="Full Name" id="name" required /> <input type="text" placeholder="Full Name" id="name" required />
</fieldset> </fieldset>
<div className="grid-2 gap_24"> <div className="grid-2 gap_24" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "5px !important", marginBottom: "5px !important" }}>
<fieldset> <fieldset style={{ marginBottom: "0px !important" }}>
<label className="mb_15" htmlFor="email"> <label htmlFor="email" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
Email Address* Email Address*
</label> </label>
<input <input
@ -48,21 +59,20 @@ export default function Contact() {
required required
/> />
</fieldset> </fieldset>
<fieldset> <fieldset style={{ marginBottom: "0px !important" }}>
<label className="mb_15" htmlFor="phone"> <label htmlFor="phone" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
Phone Number Phone Number
<span className="text_mono-gray-5">(Optional)</span> <span style={{ opacity: "0.6", color: "black" }}> (Optional)</span>
</label> </label>
<input <input
type="text" type="text"
placeholder="Your phone number" placeholder="Your phone number"
id="phone" id="phone"
required
/> />
</fieldset> </fieldset>
</div> </div>
<fieldset className=""> <fieldset style={{ marginBottom: "5px !important" }}>
<label className="mb_15" htmlFor="message"> <label htmlFor="message" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
Message Message
</label> </label>
<textarea <textarea
@ -72,11 +82,11 @@ export default function Contact() {
defaultValue={""} defaultValue={""}
/> />
</fieldset> </fieldset>
<a href="#" className="link attachment"> <a href="#" className="link attachment text-dark" style={{ marginBottom: "5px !important", display: "inline-block" }}>
<i className="icon-paperclip-solid" /> <i className="icon-paperclip-solid" />
Add an attachment Add an attachment
</a> </a>
<button type="submit" className="tf-btn btn-primary2 mt_27"> <button type="submit" className="tf-btn btn-primary2">
<span>Send Message</span> <span>Send Message</span>
<span className="bg-effect" /> <span className="bg-effect" />
</button> </button>
@ -84,14 +94,14 @@ export default function Contact() {
</div> </div>
</div> </div>
</div> </div>
<div className="shape position-absolute"> {/* <div className="shape position-absolute">
<Image <Image
alt="item" alt="item"
src="/images/item/shape-5.png" src="/images/item/shape-5.png"
width={1105} width={1105}
height={720} height={720}
/> />
</div> </div> */}
</div> </div>
); );
} }

2
components/common/Testimonials.jsx
View File

@ -10,7 +10,7 @@ export default function Testimonials() {
<div className="col-lg-6"> <div className="col-lg-6">
<div className="wrap"> <div className="wrap">
<div className="heading-section"> <div className="heading-section">
<h2 className="heading-title split-text split-lines-rotation-x"> <h2 className="heading-title split-text split-lines-rotation-x text_primary">
Client Satisfaction, Our Reputation Client Satisfaction, Our Reputation
</h2> </h2>
<p <p

182
components/footers/Footer3.jsx
View File

@ -3,15 +3,18 @@ import React, { useEffect, useState } from "react";
import axios from "axios"; import axios from "axios";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
export default function Footer3() { export default function Footer3() {
const [success, setSuccess] = useState(true); const [success, setSuccess] = useState(true);
const [showMessage, setShowMessage] = useState(false); const [showMessage, setShowMessage] = useState(false);
const handleShowMessage = () => { const handleShowMessage = () => {
setShowMessage(true); setShowMessage(true);
setTimeout(() => { setTimeout(() => {
setShowMessage(false); setShowMessage(false);
}, 2000); }, 2000);
}; };
const sendEmail = async (e) => { const sendEmail = async (e) => {
e.preventDefault(); // Prevent default form submission behavior e.preventDefault(); // Prevent default form submission behavior
const email = e.target.email.value; const email = e.target.email.value;
@ -39,6 +42,7 @@ export default function Footer3() {
e.target.reset(); // Reset the form e.target.reset(); // Reset the form
} }
}; };
useEffect(() => { useEffect(() => {
const headings = document.querySelectorAll(".footer-heading-mobile"); const headings = document.querySelectorAll(".footer-heading-mobile");
@ -68,7 +72,7 @@ export default function Footer3() {
}, []); // Empty dependency array means this will run only once on mount }, []); // Empty dependency array means this will run only once on mount
return ( return (
<footer id="footer" className="footer style-2"> <footer id="footer" className="footer style-2" style={{ backgroundColor: '#272727' }}>
<div className="footer-wrap"> <div className="footer-wrap">
<div className="tf-container"> <div className="tf-container">
<div className="footer-body"> <div className="footer-body">
@ -76,136 +80,103 @@ export default function Footer3() {
<div className="col-lg-4"> <div className="col-lg-4">
<div className="footer-about"> <div className="footer-about">
<Link href={`/`} className="footer-logo"> <Link href={`/`} className="footer-logo">
<Image <svg
alt="logo" width="139.5"
src="/images/logo/footer-logo-3.png" height={40}
width={390} viewBox="0 0 140 40"
height={80} fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<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="white"
/> />
<text
x="55"
y="30"
fontFamily="Arial, sans-serif"
fontSize="20"
fill="white"
>
Keystone
</text>
</svg>
</Link> </Link>
<div className="footer-info mb_51"> <div className="footer-info mb_51">
<a href="#" className="link text-body-2 text_dark"> <a href="#" className="link text-body-2" style={{ color: 'white' }}>
themesflat@gmail.com themesflat@gmail.com
</a> </a>
<div className="text-body-2 text_dark"> <div className="text-body-2" style={{ color: 'white' }}>
No. 3A, 1st Floor, Balaji Nagar,<br /> No. 3A, 1st Floor, Balaji Nagar,<br />
Dharapadavedu, Vellore - 632007,<br /> Dharapadavedu, Vellore - 632007,<br />
Tamil Nadu, India Tamil Nadu, India
</div> </div>
<div className="text-body-2 text_dark">+91 90954 50005</div> <div className="text-body-2" style={{ color: 'white' }}>+91 90954 50005</div>
</div> </div>
<div className="tf-social"> <div className="tf-social">
<a href="#" className="icon-twitter-x" /> <a href="#" className="icon-twitter-x" style={{ color: 'white' }} />
<a href="#" className="icon-facebook-f" /> <a href="#" className="icon-facebook-f" style={{ color: 'white' }} />
<a href="#" className="icon-github" /> <a href="#" className="icon-github" style={{ color: 'white' }} />
<a href="#" className="icon-instagram" /> <a href="#" className="icon-instagram" style={{ color: 'white' }} />
<a href="#" className="icon-youtube" /> <a href="#" className="icon-youtube" style={{ color: 'white' }} />
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-2 col-md-6"> <div className="col-lg-2 col-md-6">
<div className="footer-col-block"> <div className="footer-col-block">
<h6 className="footer-heading footer-heading-mobile text_dark fw-6"> <h6 className="footer-heading footer-heading-mobile fw-6" style={{ color: 'white' }}>
Company Company
</h6> </h6>
<div className="tf-collapse-content"> <div className="tf-collapse-content">
<ul className="footer-menu-list"> <ul className="footer-menu-list">
<li className="text-body-2 text_mono-gray-5"> <li className="text-body-2">
<Link href={`/#`} className="link footer-menu_item"> <Link href={`/about`} className="link footer-menu_item" style={{ color: 'white' }}>
About Advitex About Keystone
</Link> </Link>
</li> </li>
<li className="text-body-2 text_mono-gray-5"> <li className="text-body-2">
<Link <Link
href={`/contact-us`} href={`/contact-us`}
className="link footer-menu_item" className="link footer-menu_item"
style={{ color: 'white' }}
> >
Contact us Contact us
</Link> </Link>
</li> </li>
<li className="text-body-2 text_mono-gray-5">
<Link <li className="text-body-2">
href={`/#`} <Link href={`/career`} className="link footer-menu_item" style={{ color: 'white' }}>
className="link footer-menu_item" Careers
> </Link>
Portfolio </li>
</Link> {/* <li className="text-body-2">
</li>
<li className="text-body-2 text_mono-gray-5">
<Link href={`/#`} className="link footer-menu_item">
How We Work
</Link>
</li>
<li className="text-body-2 text_mono-gray-5">
<Link <Link
href={`/#`} href={`/#`}
className="link footer-menu_item" className="link footer-menu_item"
style={{ color: 'white' }}
> >
Career Career
</Link> </Link>
</li> </li> */}
<li className="text-body-2 text_mono-gray-5">
<Link href={`/#`} className="link footer-menu_item">
Our Team
</Link>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-2 col-md-6"> <div className="col-lg-2 col-md-6">
<div> {/* Links section commented out */}
<div className="footer-col-block">
<h6 className="footer-heading footer-heading-mobile text_dark fw-6">
Links
</h6>
<div className="tf-collapse-content">
<ul className="footer-menu-list">
<li className="text-body-2 text_mono-gray-5">
<Link
href={`/contact-us`}
className="link footer-menu_item"
>
Help Center
</Link>
</li>
<li className="text-body-2 text_mono-gray-5">
<Link
href={`/#`}
className="link footer-menu_item"
>
Privacy Policy
</Link>
</li>
<li className="text-body-2 text_mono-gray-5">
<a href="#" className="link footer-menu_item">
Term &amp; Conditon
</a>
</li>
<li className="text-body-2 text_mono-gray-5">
<Link
href={`/#`}
className="link footer-menu_item"
>
FAQs
</Link>
</li>
</ul>
</div>
</div>
</div>
</div> </div>
<div className="col-lg-4"> <div className="col-lg-4">
<div className="footer-newsletter"> <div className="footer-newsletter">
<h6 className="footer-heading text_dark fw-6"> <h6 className="footer-heading fw-6" style={{ color: 'white' }}>
Sign Up for Email Contact Us
</h6> </h6>
<div className="tf-collapse-content"> <div className="tf-collapse-content">
<div className="wrap-newsletter"> <div className="wrap-newsletter">
<p className="text-body-2 text_mono-gray-5 mb_17"> <p className="text-body-2 mb_17" style={{ color: 'white' }}>
Sign up to get first dibs on new arrivals, sales Get in touch with us for your data processing needs.
<br /> <br />
exclusive content, events and more! We're here to help with your business requirements!
</p> </p>
<div <div
className={`tfSubscribeMsg footer-sub-element ${showMessage ? "active" : "" className={`tfSubscribeMsg footer-sub-element ${showMessage ? "active" : ""
@ -213,7 +184,7 @@ export default function Footer3() {
> >
{success ? ( {success ? (
<p style={{ color: "rgb(52, 168, 83)" }}> <p style={{ color: "rgb(52, 168, 83)" }}>
You have successfully subscribed. Your message has been sent successfully.
</p> </p>
) : ( ) : (
<p style={{ color: "red" }}>Something went wrong</p> <p style={{ color: "red" }}>Something went wrong</p>
@ -240,6 +211,7 @@ export default function Footer3() {
placeholder="Enter your e-mail" placeholder="Enter your e-mail"
tabIndex={0} tabIndex={0}
aria-required="true" aria-required="true"
style={{ backgroundColor: 'white', color: '#272727' }}
/> />
</fieldset> </fieldset>
<div className="button-submit"> <div className="button-submit">
@ -248,19 +220,19 @@ export default function Footer3() {
className="subscribe-button tf-btn btn-dark" className="subscribe-button tf-btn btn-dark"
type="submit" type="submit"
> >
<span>Subscribe</span> <span>Submit</span>
<span className="bg-effect" /> <span className="bg-effect" />
</button> </button>
</div> </div>
<div className="icon"> <div className="icon">
<i className="icon-envelope-solid" /> <i className="icon-envelope-solid" style={{ color: 'white' }} />
</div> </div>
</div> </div>
<div id="subscribe-msg" className="subscribe-msg" /> <div id="subscribe-msg" className="subscribe-msg" />
</form> </form>
<p className="description text-body-2 text_dark"> <p className="description text-body-2" style={{ color: 'white' }}>
By subscribing, you accepted the our{" "} By contacting us, you agree to our{" "}
<a href="#" className="link text_dark"> <a href="#" className="link" style={{ color: 'white', textDecoration: 'underline' }}>
Privacy Policy Privacy Policy
</a> </a>
</p> </p>
@ -272,38 +244,18 @@ export default function Footer3() {
</div> </div>
</div> </div>
</div> </div>
<div className="footer-bottom"> <div className="footer-bottom" style={{ backgroundColor: '#1f1f1f', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
<div className="tf-container"> <div className="tf-container">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="wrapper d-flex align-items-center flex-wrap gap_12"> <div className="wrapper d-flex align-items-center flex-wrap gap_12">
<p className="text-body-2"> <p className="text-body-2 m-0" style={{ color: 'white' }}>
© {new Date().getFullYear()} Copyright by{" "} © {new Date().getFullYear()} Copyright by{" "}
<a href="#" className="link-black text_primary text-body-3"> <a href="#" className="link-black text-body-3" style={{ color: 'white', fontWeight: '600' }}>
Themesflat Keystone
</a>{" "} </a>{" "}
. All Right Reserved. . All Rights Reserved.
</p> </p>
<ul className="right d-flex align-items-center">
<li>
<Link
href={`/pricing`}
className="link text_mono-gray-5 text-body-1"
>
Privacy Policy
</Link>
</li>
<li>
<a href="#" className="link text_mono-gray-5 text-body-1">
Terms of Services
</a>
</li>
<li>
<a href="#" className="link text_mono-gray-5 text-body-1">
Virtual Reality
</a>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>

191
components/headers/Header4.jsx
View File

@ -1,24 +1,100 @@
import React from "react"; 'use client'
import React, { useState } from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import Nav from "./Nav";
export default function Header4() { export default function Header4() {
const [isServicesDropdownOpen, setIsServicesDropdownOpen] = useState(false);
const handleServicesMouseEnter = () => {
setIsServicesDropdownOpen(true);
};
const handleServicesMouseLeave = () => {
setIsServicesDropdownOpen(false);
};
// Service items with ID-based URLs (matching Services component behavior)
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: "/service-details/16" }
];
const renderServiceLink = (service) => {
// Disable Construction service (id: 16) same as in Services component
const isDisabled = service.id === 16;
if (isDisabled) {
return ( return (
<header id="header-main" className="header style-3"> <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
href={service.href}
style={{
display: 'block',
padding: '8px 16px',
color: '#333333',
textDecoration: 'none',
fontSize: '14px',
fontWeight: '500',
transition: 'all 0.2s ease',
borderLeft: '3px solid transparent'
}}
onMouseEnter={(e) => {
e.target.style.backgroundColor = '#f8f9ff';
e.target.style.color = '#28285B';
e.target.style.borderLeftColor = '#28285B';
e.target.style.paddingLeft = '20px';
}}
onMouseLeave={(e) => {
e.target.style.backgroundColor = 'transparent';
e.target.style.color = '#333333';
e.target.style.borderLeftColor = 'transparent';
e.target.style.paddingLeft = '16px';
}}
>
{service.title}
</Link>
);
};
return (
<header id="header-main" className="header style-3" style={{ backgroundColor: 'white', borderBottom: '1px solid #e5e5e5'}}>
<div className="header-inner"> <div className="header-inner">
<div className="tf-container"> <div className="tf-container">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="header-inner-wrap"> <div className="header-inner-wrap">
<div className="header-left d-flex align-items-center"> <div className="header-left d-flex align-items-center">
<div className="header-logo"> <div className="header-logo" style={{ display: 'flex', alignItems: 'center' }}>
<Link href={`/`} className="site-logo"> <Link href={`/`} className="site-logo" style={{ display: 'flex', alignItems: 'center' }}>
<svg <svg
width="139.5" width="160"
height={40} height={40}
viewBox="0 0 140 40" viewBox="0 0 150 40"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
style={{ display: 'block' }}
> >
<path <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" 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"
@ -26,35 +102,106 @@ export default function Header4() {
/> />
<text <text
x="55" x="55"
y="30" y="20"
fontFamily="Arial, sans-serif" fontFamily="Arial, sans-serif"
fontSize="20" fontSize="22"
fontWeight="600"
fill="#121416" fill="#121416"
dominantBaseline="central"
> >
Keystone Keystone
</text> </text>
</svg> </svg>
</Link> </Link>
</div> </div>
<nav className="main-menu style-3"> <nav className="main-menu style-3">
<ul className="navigation"> <ul className="navigation">
<Nav /> <li
className="menu-item"
style={{ position: 'relative' }}
onMouseEnter={handleServicesMouseEnter}
onMouseLeave={handleServicesMouseLeave}
>
<Link
href="/#"
style={{
display: 'flex',
alignItems: 'center',
gap: '4px',
textDecoration: 'none',
color: '#333333',
transition: 'color 0.3s ease'
}}
>
Services
<svg
width="12"
height="8"
viewBox="0 0 12 8"
fill="none"
style={{
transform: isServicesDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',
transition: 'transform 0.3s ease'
}}
>
<path
d="M1 1.5L6 6.5L11 1.5"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Link>
{/* Dropdown Menu */}
<div
style={{
position: 'absolute',
top: '100%',
left: '0',
minWidth: '220px',
backgroundColor: '#ffffff',
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.1)',
borderRadius: '8px',
padding: '8px 0',
opacity: isServicesDropdownOpen ? '1' : '0',
visibility: isServicesDropdownOpen ? 'visible' : 'hidden',
transform: isServicesDropdownOpen ? 'translateY(0px)' : 'translateY(-10px)',
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
zIndex: '1000',
border: '1px solid rgba(0, 0, 0, 0.08)',
backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)'
}}
>
<ul
style={{
listStyle: 'none',
margin: '0',
padding: '0'
}}
>
{serviceItems.map((service, index) => (
<li key={index}>
{renderServiceLink(service)}
</li>
))}
</ul>
</div>
</li>
<li className="menu-item">
<Link href="/about" style={{ color: '#333333', textDecoration: 'none' }}>About</Link>
</li>
<li className="menu-item">
<Link href="/career" style={{ color: '#333333', textDecoration: 'none' }}>Career</Link>
</li>
</ul> </ul>
</nav> </nav>
</div> </div>
<div className="header-right d-flex align-items-center"> <div className="header-right d-flex align-items-center">
<div className="support text-body-2 d-flex gap_12 align-items-center text_mono-dark-9">
<i className="icon-customer-support" />
24/7 Support: +91 90954 50005
</div>
<Link
href={`/about`}
className="tf-btn btn-border border-1 hide-sm h36 rounded-12"
>
<span className="text-caption">Get Started</span>
<span className="bg-effect" />
</Link>
<Link <Link
href={`/contact-us`} href={`/contact-us`}
className="tf-btn hide-sm rounded-12 h36" className="tf-btn hide-sm rounded-12 h36"

44
components/headers/Nav.jsx
View File

@ -23,46 +23,8 @@ export default function Nav() {
isActiveParent(homepages) ? "current-menu" : "" isActiveParent(homepages) ? "current-menu" : ""
} `} } `}
> >
<a href="#">Home</a> <a href="#">Services</a>
{/* <div className="submenu mega-menu"> <ul className="submenu">
<div className="wrap-demo-item tf-grid-layout-lg lg-col-3">
{homepages.map((item, index) => (
<div
key={index}
className={`demo-item ${
isActive(item.href) ? "current-menu-item" : ""
}`}
>
<Link href={item.href}>
<div className="demo-image">
<Image
className="lazyload"
data-src={item.src}
src={item.src}
alt={item.alt}
width={480}
height={228}
/>
</div>
<h6 className="demo-name fw-4">{item.title}</h6>
</Link>
</div>
))}
<div className="comming-soon">
<Link href={`/coming-soon`} className="wrap">
<h5 className="demo-name">Coming Soon</h5>
</Link>
</div>
</div>
</div> */}
</li>
<li
className={`has-child position-relative ${
isActiveParent(otherPages) ? "current-menu" : ""
} `}
>
<a href="#">Pages</a>
{/* <ul className="submenu">
{otherPages.map((item) => ( {otherPages.map((item) => (
<li <li
key={item.href} key={item.href}
@ -73,7 +35,7 @@ export default function Nav() {
<Link href={item.href}>{item.label}</Link> <Link href={item.href}>{item.label}</Link>
</li> </li>
))} ))}
</ul> */} </ul>
</li> </li>
<li <li
className={`has-child position-relative ${ className={`has-child position-relative ${

2
components/homes/finance-consulting/Features.jsx
View File

@ -3,7 +3,7 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
export default function Features() { export default function Features() {
return ( return (
<div className="section-about tf-spacing-19"> <div className="section-about">
<div className="tf-container-3"> <div className="tf-container-3">
<div className="box-choose style-1"> <div className="box-choose style-1">
<div className="content"> <div className="content">

25
components/homes/insurance-consulting/About.jsx
View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
export default function About() { export default function About() {
return ( return (
<div className="section"> <div className="section">
@ -12,8 +13,8 @@ export default function About() {
<span className="item" /> <span className="item" />
About Us About Us
</div> </div>
<h3 className="heading-title text_mono-dark-9"> <h3 className="heading-title text_primary">
We’re A Trusted And Professional Insurance Company,{" "} We're a Trusted and Professional BPO Partner,{" "}
<Image <Image
alt="item" alt="item"
className="wow animate__rollIn animate__animated" className="wow animate__rollIn animate__animated"
@ -22,11 +23,11 @@ export default function About() {
width={48} width={48}
height={48} height={48}
/>{" "} />{" "}
Committed To Your Financial Security. Committed to Driving Your Business Success.
</h3> </h3>
</div> </div>
<div className="bot"> <div className="bot">
<div className="clutch-rating-item style-1 d-flex align-items-center mb_16"> {/* <div className="clutch-rating-item style-1 d-flex align-items-center mb_16">
<div className="logo"> <div className="logo">
<svg <svg
width={34} width={34}
@ -63,12 +64,18 @@ export default function About() {
</div> </div>
<p className="text-body-4">Based on 24 reviews</p> <p className="text-body-4">Based on 24 reviews</p>
</div> </div>
</div> </div> */}
<p className="text-body-1 text_mono-gray-6 mb_31"> <p className="text-body-1 text_mono-gray-6 mb_31">
As a trusted and professional insurance company, we are At Keystone Solution, we combine technology, expertise, and innovation
committed to providing comprehensive coverage and exceptional to deliver world-class BPO services to clients across the globe.
service to our <br /> As a trusted outsourcing partner to diverse industries, we provide
valued clients. end-to-end solutions that help businesses operate smarter, faster,
and more efficiently.
<br />
Our integrated approach ensures that every service—from data entry
and conversion to processing and logistics—works together to
support your growth. With a highly skilled team and cutting-edge
tools, we deliver consistent, scalable, and reliable results you can trust.
</p> </p>
<Link <Link
href={`/about`} href={`/about`}

26
components/homes/insurance-consulting/Hero.jsx
View File

@ -13,47 +13,45 @@ export default function Hero() {
<div className="heading-title d-flex flex-wrap-lg mb_40 justify-content-between"> <div className="heading-title d-flex flex-wrap-lg mb_40 justify-content-between">
<div className="left"> <div className="left">
<p className="sub text-body-1 text_primary point"> <p className="sub text-body-1 text_primary point">
<span className="item" /> Ultimate Peace Of Mind <span className="item" /> Ultimate Accuracy & Efficiency
</p> </p>
<div className="text_primary text-display-3 title"> <div className="text_primary text-display-3 title">
Shaping{" "} Transforming{" "}
<img <img
className="icon animate__rollIn animate__animated" className="icon animate__rollIn animate__animated"
data-wow-delay="0s" data-wow-delay="0s"
alt="icon" alt="icon"
src="/images/box-icon/check-verified-01.svg" src="/images/box-icon/check-verified-01.svg"
/>{" "} />{" "}
Futures <br /> Data <br />
With{" "} Into{" "}
<img <img
className="icon heart animate__rollIn animate__animated" className="icon heart animate__rollIn animate__animated"
alt="icon" alt="icon"
src="/images/box-icon/heart-circle.svg" src="/images/box-icon/heart-circle.svg"
/>{" "} />{" "}
Insurance Solutions Business Power
</div> </div>
</div> </div>
<div className="right"> <div className="right">
<p className="sub-heading text_mono-dark-9 mb_24 split-text split-lines-transform"> <p className="sub-heading text_mono-dark-9 mb_24 split-text split-lines-transform">
Maximize your coverage, minimize your worries. We're committed Streamline your operations with fast, accurate, and affordable data entry, conversion, and processing services tailored to your business needs.
to providing exceptional customer service and comprehensive
insurance solutions that exceed your expectations.
</p> </p>
<div className="d-flex gap_10 wrap-btn flex-wrap-sm"> <div className="d-flex gap_10 wrap-btn flex-wrap-sm">
<Link {/* <Link
href={`/#`} href={`/contact-us`}
className="tf-btn btn-border border-1 rounded-12 height-3" className="tf-btn btn-border border-1 rounded-12 height-3"
> >
<span className="text-body-1 text_primary"> <span className="text-body-1 text_primary">
Book a Free Consulting Request a Free Consultation
</span> </span>
<span className="bg-effect" /> <span className="bg-effect" />
</Link> </Link> */}
<Link <Link
href={`/contact-us`} href="#services"
className="tf-btn rounded-12 height-3" className="tf-btn rounded-12 height-3"
> >
<span className="text-body-1">Find your plan</span> <span className="text-body-1">Explore Our Services</span>
<span className="bg-effect" /> <span className="bg-effect" />
</Link> </Link>
</div> </div>

23
components/homes/insurance-consulting/Services.jsx
View File

@ -2,9 +2,10 @@ import React from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { services2 } from "@/data/services"; import { services2 } from "@/data/services";
export default function Services() { export default function Services() {
return ( return (
<div className="section tf-spacing-46 pb-0"> <div className="section tf-spacing-46 pb-0" style={{ backgroundColor: "#fff" }}>
<div className="tf-container"> <div className="tf-container">
<div className="heading-section d-flex gap_12 justify-content-between align-items-end flex-wrap-md mb_57"> <div className="heading-section d-flex gap_12 justify-content-between align-items-end flex-wrap-md mb_57">
<div className="left"> <div className="left">
@ -24,17 +25,9 @@ export default function Services() {
to you, avoiding unnecessary expenses to you, avoiding unnecessary expenses
</p> </p>
</div> </div>
<div className="right">
<Link
href={`/#`}
className="tf-btn height-3 rounded-12 btn-px-28"
>
<span>See our services</span>
<span className="bg-effect" />
</Link>
</div> </div>
</div> {/* Updated for 3x2 grid layout */}
<div className="tf-grid-layout lg-col-3"> <div className="tf-grid-layout lg-col-3 md-col-2 sm-col-1">
{services2.map((service, index) => ( {services2.map((service, index) => (
<div <div
key={index} key={index}
@ -54,6 +47,8 @@ export default function Services() {
</Link> </Link>
</h3> </h3>
<p className="text-body-1 mb_23">{service.description}</p> <p className="text-body-1 mb_23">{service.description}</p>
{/* Conditionally render Learn more - disabled for Construction (id: 16) */}
{service.id !== 16 ? (
<Link <Link
href={`/service-details/${service.id}`} href={`/service-details/${service.id}`}
className="tf-btn-link" className="tf-btn-link"
@ -61,6 +56,12 @@ export default function Services() {
<span> Learn more </span> <span> Learn more </span>
<i className="icon-arrow-top-right"> </i> <i className="icon-arrow-top-right"> </i>
</Link> </Link>
) : (
<span className="tf-btn-link disabled" style={{ opacity: 0.5, cursor: 'not-allowed' }}>
<span> Learn more </span>
<i className="icon-arrow-top-right"> </i>
</span>
)}
</div> </div>
<div <div
className="item scroll-tranform" className="item scroll-tranform"

37
components/homes/marketing-consulting/Services.jsx
View File

@ -3,6 +3,7 @@ import React, { useState } from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { services3 } from "@/data/services"; import { services3 } from "@/data/services";
export default function Services() { export default function Services() {
const [activeService, setActiveService] = useState(1); const [activeService, setActiveService] = useState(1);
return ( return (
@ -22,38 +23,50 @@ export default function Services() {
</div> </div>
<div className="right"> <div className="right">
<p className="text-body-1 text_mono-gray-7 split-text split-lines-transform"> <p className="text-body-1 text_mono-gray-7 split-text split-lines-transform">
Explore our range of expert services designed to <br /> Explore our range of expert services designed to
elevate your business. From strategic planning to <br /> elevate your business. From strategic planning to
execution, we deliver solutions. execution, we deliver solutions.
</p> </p>
</div> </div>
</div> </div>
<div className="top mb_48"> <div className="top mb_48">
<div className="navigation-bar overflow-x-auto"> <div className="navigation-bar">
<div <div
className={`nav-item ${activeService == 1 ? "is-active" : ""} `} className={`nav-item ${activeService == 1 ? "is-active" : ""} `}
onClick={() => setActiveService(1)} onClick={() => setActiveService(1)}
> >
Market Research &amp; Analysis Data Entry Services
</div> </div>
<div <div
className={`nav-item ${activeService == 2 ? "is-active" : ""} `} className={`nav-item ${activeService == 2 ? "is-active" : ""} `}
onClick={() => setActiveService(2)} onClick={() => setActiveService(2)}
> >
Brand Development &amp; Positioning Data Conversion
</div> </div>
<div <div
className={`nav-item ${activeService == 3 ? "is-active" : ""} `} className={`nav-item ${activeService == 3 ? "is-active" : ""} `}
onClick={() => setActiveService(3)} onClick={() => setActiveService(3)}
> >
Digital Marketing Data Processing
</div>
<div
className={`nav-item ${activeService == 4 ? "is-active" : ""} `}
onClick={() => setActiveService(4)}
>
Receipt Data Entry Services
</div>
<div
className={`nav-item ${activeService == 5 ? "is-active" : ""} `}
onClick={() => setActiveService(5)}
>
Logistics Data Entry Services
</div> </div>
</div> </div>
<div className="navigation-arrows"> <div className="navigation-arrows">
<div <div
className="arrow" className="arrow"
onClick={() => onClick={() =>
setActiveService((pre) => (pre == 1 ? 3 : pre - 1)) setActiveService((pre) => (pre == 1 ? 5 : pre - 1))
} }
id="prevButton" id="prevButton"
> >
@ -83,7 +96,7 @@ export default function Services() {
<div <div
className="arrow" className="arrow"
onClick={() => onClick={() =>
setActiveService((pre) => (pre == 3 ? 1 : pre + 1)) setActiveService((pre) => (pre == 5 ? 1 : pre + 1))
} }
id="nextButton" id="nextButton"
> >
@ -148,7 +161,7 @@ export default function Services() {
</div> </div>
</div> </div>
<div className="right"> <div className="right">
<div className="img-style"> <div className="img-style" style={{ maxWidth: '100%', overflow: 'hidden' }}>
<Image <Image
className="lazyload" className="lazyload"
data-src={service.image} data-src={service.image}
@ -156,6 +169,12 @@ export default function Services() {
src={service.image} src={service.image}
width={393} width={393}
height={417} height={417}
style={{
width: '100%',
height: 'auto',
maxWidth: '393px',
objectFit: 'cover'
}}
/> />
</div> </div>
</div> </div>

92
components/otherPages/About.jsx
View File

@ -1,19 +1,19 @@
import React from "react"; import React from "react";
import Image from "next/image"; import Image from "next/image";
import { counterItems5 } from "@/data/facts";
import OdometerComponent from "../common/OdometerComponent";
export default function About() { export default function About() {
return ( return (
<> <>
{/* .section-about */} {/* Section 1: Trusted BPO Partner */}
<div className="text-with-img-2 tf-spacing-4"> <div className="bg-color-1">
<div className="text-with-img-2 tf-spacing-47">
<div className="tf-container"> <div className="tf-container">
<div className="row"> <div className="row">
<div className="col-lg-6"> <div className="col-lg-6">
<div className="wrap-img"> <div className="wrap-img">
<div className="shape-img-bg shape-border"> <div className="shape-img-bg shape-border">
<Image <Image
alt="shape" alt="Trusted BPO Partner"
className="img-custom-anim-left wow" className="img-custom-anim-left wow"
src="/images/section/img-with-shape-3.jpg" src="/images/section/img-with-shape-3.jpg"
width={692} width={692}
@ -54,7 +54,6 @@ export default function About() {
c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7 c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7
c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z; c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z;
M51,171.3c-6.1-17.7-15.3-17.2-20.7-32c-8-21.9,0.7-54.6,20.7-67.1c19.5-12.3,32.8,5.5,67.7-3.4C145.2,62,145,49.9,173,43.4 M51,171.3c-6.1-17.7-15.3-17.2-20.7-32c-8-21.9,0.7-54.6,20.7-67.1c19.5-12.3,32.8,5.5,67.7-3.4C145.2,62,145,49.9,173,43.4
c12-2.8,41.4-9.6,60.2,6.6c19,16.4,16.7,47.5,16,57.7c-1.7,22.8-10.3,25.5-9.4,46.4c1,22.5,11.2,25.8,9.1,42.6 c12-2.8,41.4-9.6,60.2,6.6c19,16.4,16.7,47.5,16,57.7c-1.7,22.8-10.3,25.5-9.4,46.4c1,22.5,11.2,25.8,9.1,42.6
c-2.2,17.6-16.3,37.5-33.5,40.8c-22,4.1-29.4-22.4-54.9-22.6c-31-0.2-40.8,39-68.3,35.7c-17.3-2-32.2-19.8-37.3-34.8 c-2.2,17.6-16.3,37.5-33.5,40.8c-22,4.1-29.4-22.4-54.9-22.6c-31-0.2-40.8,39-68.3,35.7c-17.3-2-32.2-19.8-37.3-34.8
@ -74,76 +73,59 @@ export default function About() {
<div className="col-lg-6"> <div className="col-lg-6">
<div className="content mb-0"> <div className="content mb-0">
<h2 className="title split-text split-lines-rotation-x"> <h2 className="title split-text split-lines-rotation-x">
Innovate to streamline operations Trusted BPO Partner
<br /> <br />
and accelerate growth. for Global Excellence
</h2> </h2>
<p <p
className="description text-body-1 text_mono-gray-7 description-1 wow animate__fadeInUp animate__animated" className="description text-body-1 text_mono-gray-7 description-1 wow animate__fadeInUp animate__animated"
data-wow-delay="0s" data-wow-delay="0s"
> >
We are committed to driving innovation and delivering At Keystone Solution, we combine technology, expertise, and innovation to deliver world-class BPO services to clients across the globe. As a trusted outsourcing partner to diverse industries, we provide end-to-end solutions that help businesses operate smarter, faster, and more efficiently.
cutting-edge software solutions. Our team of skilled
developers and industry experts collaborate closely to create
tailored solutions that address the unique needs of our
clients.
</p> </p>
<p <p
className="description text-body-1 text_mono-gray-7 description-2 wow animate__fadeInUp animate__animated" className="description text-body-1 text_mono-gray-7 description-2 wow animate__fadeInUp animate__animated"
data-wow-delay="0s" data-wow-delay="0s"
> >
By leveraging the latest technologies and industry best Our strength lies in our ability to deliver consistent, scalable, and reliable services—powered by cutting-edge technology and a highly skilled team. We are committed to excellence, ensuring every project meets the highest standards of quality and precision.
practices, we empower our clients to streamline their
operations, reduce costs, and achieve sustainable business
growth. Our innovative software solutions are designed to
increase efficiency, improve productivity, and enhance overall
business performance.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* /.section-about */} </div>
{/* .section-about */}
<div className="text-with-img-2 tf-spacing-5 pt-0"> {/* Section 2: Specialized Data Solutions */}
<div className="text-with-img-2 tf-spacing-47 pt-0">
<div className="tf-container"> <div className="tf-container">
<div className="row"> <div className="row">
<div className="col-xl-6"> <div className="col-lg-6">
<div className="content"> <div className="content mb-0">
<h2 className="title split-text split-lines-rotation-x"> <h2 className="title split-text split-lines-rotation-x">
Innovate to streamline operations Specialized Data Solutions
<br /> <br />
and accelerate growth. for Business Growth
</h2> </h2>
<p <p
className="description text-body-1 text_mono-gray-7 description-1 wow animate__fadeInUp animate__animated" className="description text-body-1 text_mono-gray-7 description-1 wow animate__fadeInUp animate__animated"
data-wow-delay="0s" data-wow-delay="0s"
> >
We are committed to driving innovation and delivering At Keystone Solution, we specialize in delivering top-quality outsourcing solutions that help businesses across India work smarter and faster. With a strong focus on precision, speed, and reliability, we take the hassle out of data management so our clients can concentrate on growing their business.
cutting-edge software solutions. Our team of skilled
developers and industry experts collaborate closely to create
tailored solutions that address the unique needs of our
clients.
</p> </p>
<p <p
className="description text-body-1 text_mono-gray-7 description-2 wow animate__fadeInUp animate__animated" className="description text-body-1 text_mono-gray-7 description-2 wow animate__fadeInUp animate__animated"
data-wow-delay="0s" data-wow-delay="0s"
> >
By leveraging the latest technologies and industry best Our expertise covers a wide spectrum of services, including data entry, data conversion, and data processing, as well as specialized receipt data entry and logistics data entry. By combining our skilled team with the latest technology, we deliver results that are not only error-free but also on time—every time.
practices, we empower our clients to streamline their
operations, reduce costs, and achieve sustainable business
growth. Our innovative software solutions are designed to
increase efficiency, improve productivity, and enhance overall
business performance.
</p> </p>
</div> </div>
</div> </div>
<div className="col-xl-6"> <div className="col-lg-6">
<div className="wrap-img mb-0"> <div className="wrap-img">
<div className="shape-img-bg"> <div className="shape-img-bg shape-border">
<Image <Image
alt="shape" alt="Specialized Data Solutions"
className="img-custom-anim-right wow" className="img-custom-anim-right wow"
src="/images/section/img-with-shape-4.jpg" src="/images/section/img-with-shape-4.jpg"
width={695} width={695}
@ -157,7 +139,7 @@ export default function About() {
viewBox="0 0 288 288" viewBox="0 0 288 288"
> >
<linearGradient <linearGradient
id="imagewave" id="imagewave-2"
x1="70.711%" x1="70.711%"
x2="0%" x2="0%"
y1="70.711%" y1="70.711%"
@ -174,7 +156,7 @@ export default function About() {
stopOpacity={1} stopOpacity={1}
/> />
</linearGradient> </linearGradient>
<path fill="url(#imagewave)" d=""> <path fill="url(#imagewave-2)" d="">
<animate <animate
repeatCount="indefinite" repeatCount="indefinite"
attributeName="d" attributeName="d"
@ -184,7 +166,6 @@ export default function About() {
c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7 c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7
c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z; c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z;
M51,171.3c-6.1-17.7-15.3-17.2-20.7-32c-8-21.9,0.7-54.6,20.7-67.1c19.5-12.3,32.8,5.5,67.7-3.4C145.2,62,145,49.9,173,43.4 M51,171.3c-6.1-17.7-15.3-17.2-20.7-32c-8-21.9,0.7-54.6,20.7-67.1c19.5-12.3,32.8,5.5,67.7-3.4C145.2,62,145,49.9,173,43.4
c12-2.8,41.4-9.6,60.2,6.6c19,16.4,16.7,47.5,16,57.7c-1.7,22.8-10.3,25.5-9.4,46.4c1,22.5,11.2,25.8,9.1,42.6 c12-2.8,41.4-9.6,60.2,6.6c19,16.4,16.7,47.5,16,57.7c-1.7,22.8-10.3,25.5-9.4,46.4c1,22.5,11.2,25.8,9.1,42.6
c-2.2,17.6-16.3,37.5-33.5,40.8c-22,4.1-29.4-22.4-54.9-22.6c-31-0.2-40.8,39-68.3,35.7c-17.3-2-32.2-19.8-37.3-34.8 c-2.2,17.6-16.3,37.5-33.5,40.8c-22,4.1-29.4-22.4-54.9-22.6c-31-0.2-40.8,39-68.3,35.7c-17.3-2-32.2-19.8-37.3-34.8
@ -202,29 +183,6 @@ export default function About() {
</div> </div>
</div> </div>
</div> </div>
<div className="wrap-counter style-4">
<div className="row">
{counterItems5.map((item, index) => (
<div key={index} className="col-md-4">
<div className="counter-item style-default">
<div className="sub-heading text_black text-uppercase mb_22">
{item.title}
</div>
<div className="counter-number">
<div className="odometer text_primary mb_15">
<OdometerComponent max={item.value} />
</div>
<span className="sub text_primary">{item.unit}</span>
</div>
<p
className="sub-heading text_mono-gray-5"
dangerouslySetInnerHTML={{ __html: item.description }}
/>
</div>
</div>
))}
</div>
</div>
</div> </div>
</div> </div>
</> </>

17
components/otherPages/Contact.jsx
View File

@ -2,6 +2,7 @@
import React from "react"; import React from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
export default function Contact() { export default function Contact() {
return ( return (
<div className="page-title style-default -mb_11"> <div className="page-title style-default -mb_11">
@ -11,22 +12,22 @@ export default function Contact() {
<div className="col-lg-6"> <div className="col-lg-6">
<div className="left"> <div className="left">
<div className="heading"> <div className="heading">
<h1 className="mb_21"> <h1 className="mb_21 text_primary">
Success is a team play, right? Let's work together! Let's Start Building Solutions Together
</h1> </h1>
<ul className="breadcrumb"> {/* <ul className="breadcrumb">
<li> <li>
<Link href={`/`} className="link"> <Link href={`/`} className="link">
Home Home
</Link> </Link>
</li> </li>
<li>Contact</li> <li>Contact</li>
</ul> </ul> */}
</div> </div>
<div className="bot"> <div className="bot">
<div className="content mb-0 "> <div className="content mb-0 ">
<h6>+91 90954 50005</h6> <h6 className="text_primary">+91 90954 50005</h6>
<p className="text-body-2 text_mono-gray-6"> <p className="text-body-2 text_primary">
Call us for urgent Call us for urgent
</p> </p>
</div> </div>
@ -97,14 +98,14 @@ export default function Contact() {
</div> </div>
</div> </div>
</div> </div>
<div className="shape position-absolute"> {/* <div className="shape position-absolute">
<Image <Image
alt="item" alt="item"
src="/images/item/shape-5.png" src="/images/item/shape-5.png"
width={1105} width={1105}
height={720} height={720}
/> />
</div> </div> */}
</div> </div>
</div> </div>
); );

173
components/otherPages/ServiceDetails.jsx
View File

@ -1,32 +1,156 @@
import React from "react"; import React from "react";
import Image from "next/image"; import Image from "next/image";
import ServiceInfo from "./ServiceInfo";
export default function ServiceDetails() { // Service-specific data
const serviceDetailsData = {
11: { // Health Insurance
title: "Data Entry Services",
description:
"Keystone offers quality data entry services for various businesses and industries. We guarantee timely delivery without compromising the exceptional quality we are known for. Using the latest technologies, we ensure fast turnaround times and accurate results. Our commitment is to provide reliable, high-quality services at costs that remain affordable to all our clients.Our Data Entry Services include:",
image: "/images/section/img-with-shape-6.jpg",
features: [
"Online Data Entry",
"Offline Data Entry",
"MS Access Data Entry",
"Excel Data Entry",
"XML Data Entry",
"Web Data Entry",
"Questionnaire Data Entry",
"Insurance Claims Data Entry",
"Data Capture",
"Book Data Entry",
"Online Typing Services",
"XML Conversion",
"Data Input Services",
"Data Purchasing",
"Medical Billing",
"MSDS Data",
"Data Keying Services"
]
},
12: { // Property Insurance
title: "Data Conversion",
description:
"Keystone provides professional data conversion services, transforming your existing physical or digital data into the required format with zero risk of data loss. Our skilled team and proven technologies ensure accurate, high-quality results delivered on time.",
image: "/images/section/img-with-shape-6.jpg",
features: [
"XML / XHTML Conversion",
"PDF Conversion",
"TEXT / TXT Conversion",
"Document OCR Conversion",
"Catalogue Conversion",
"File Conversion",
"HTML Conversion",
"Audio Conversion",
"Book Conversion",
"XLS / CSV Conversion",
"Image Conversion"
]
},
13: { // Business Insurance
title: "Data Processing",
description:
"Keystone offers superior data processing services 365x24x7. We undertake all types of data processing services at affordable costs. We ensure advanced analysis, summary, and synthesis of complex and unsorted raw data. We undertake bulk data processing, providing valuable information out of raw and unstructured data. Our Data Processing Services include:",
image: "/images/section/img-with-shape-6.jpg",
features: [
"Word Processing",
"Check Processing",
"Form Processing",
"OCR Cleanup",
"Survey Processing",
"Resume Processing",
"Image Processing",
"Catalogue Processing",
"Credit Card Processing",
"Medical Data Processing",
"Insurance Claims Processing"
]
},
14: { // Life Insurance
title: "Receipt Data Entry Services",
description:
"Keystone offers reliable Receipt Data Entry Services to help businesses maintain accurate digital records of their receipts. Our advanced technology and skilled professionals ensure high-quality data, consistency, and quick turnaround times to support your business operations.",
image: "/images/section/img-with-shape-6.jpg",
features: [] // no subcategories in brochure
},
15: { // Auto Insurance
title: "Logistics Data Entry Services",
description:
"Keystone provides high-quality Logistics Data Entry Services to clients worldwide. We prioritize accuracy and timely delivery, ensuring you have reliable information at your fingertips to manage your logistics business efficiently. Our skilled team delivers superior data entry performance, handles bulk projects with ease, and offers services at affordable rates—allowing you to focus on timely deliveries. Our services in Logistics Data Entry Services include:",
image: "/images/section/img-with-shape-6.jpg",
features: [
"Freight Bill Data Entry",
"Freight Bill Processing",
"Contract Management",
"Bill of Lading Verification & Data Entry",
"Invoice Processing"
]
}
};
export default function ServiceDetails({ service }) {
// Get service-specific data or fall back to default
const serviceData = serviceDetailsData[service?.id] || {
title: "INSURANCE SERVICES",
description: "Keystone offers comprehensive insurance solutions tailored to your specific needs. Our experienced team provides personalized service and competitive rates to ensure you get the coverage that's right for you.",
image: "/images/section/img-with-shape-6.jpg",
features: [
"Personalized Consultation",
"Competitive Rates",
"24/7 Customer Support",
"Claims Assistance",
"Policy Management",
"Risk Assessment",
"Coverage Reviews",
"Multi-policy Discounts"
]
};
// Inline styles for the list container
const listContainerStyles = {
columns: 2,
columnGap: '20px',
listStyleType: 'disc',
paddingLeft: '20px',
marginLeft: '15px',
display: 'block'
};
// Inline styles for list items
const listItemStyles = {
marginBottom: '8px',
paddingLeft: '5px',
breakInside: 'avoid',
listStyleType: 'disc',
display: 'list-item',
listStylePosition: 'outside'
};
return ( return (
<> <>
<div className="text-with-img-2 v2 tf-spacing-11"> <div className="text-with-img-2 v2 tf-spacing-47">
<div className="tf-container"> <div className="tf-container">
<div className="row"> <div className="row">
<div className="col-xl-6"> <div className="col-xl-6">
<div className="content"> <div className="content">
<h2 className="title"> <h2 className="title">
Tailor The Message To Resonate With Your Apecific Audience. {serviceData.title}
</h2> </h2>
<p className="description text-body-1 text_mono-gray-7 description-1"> <p className="description text-body-1 text_mono-gray-7 description-1">
Business strategy planning is the cornerstone of {serviceData.description}
organizational success. It involves a systematic process of
defining a company's long-term goals and objectives, and then
devising a plan to achieve them. A well-crafted strategy
provides a roadmap for the entire organization, ensuring
alignment and focus.
</p>
<p className="description text-body-1 text_mono-gray-7 description-2">
By investing time and effort in strategic planning,
organizations can position themselves for long-term success.
Regular review and adjustment of the strategy is crucial to
adapt to changing market conditions and emerging
opportunities.
</p> </p>
{serviceData.features.length > 0 && (
<ul
className="description text-body-1 text_mono-gray-7 description-2"
style={listContainerStyles}
>
{serviceData.features.map((feature, index) => (
<li key={index} style={listItemStyles}>
{feature}
</li>
))}
</ul>
)}
</div> </div>
</div> </div>
<div className="col-xl-6"> <div className="col-xl-6">
@ -34,7 +158,7 @@ export default function ServiceDetails() {
<div className="shape-img-bg mgl-auto"> <div className="shape-img-bg mgl-auto">
<Image <Image
alt="shape" alt="shape"
src="/images/section/img-with-shape-6.jpg" src={serviceData.image}
width={696} width={696}
height={598} height={598}
/> />
@ -93,19 +217,6 @@ export default function ServiceDetails() {
</div> </div>
</div> </div>
</div> </div>
<div className="section-service style-3 tf-spacing-9">
<div className="tf-container">
<div className="heading-secion mb_88">
<h2>Comprehensive Service Information</h2>
<p className="text-body-1 text_mono-gray-7 mt_18">
Our comprehensive service offerings are designed to elevate your
business and <br />
drive sustainable growth.
</p>
</div>
<ServiceInfo />
</div>
</div>
</> </>
); );
} }

168
data/services.js
View File

@ -70,120 +70,176 @@ export const services = [
export const services2 = [ export const services2 = [
{ {
id: 11, id: 11,
title: "Health Insurance", title: "Data Entry Services",
description: description:
"Health insurance covers medical expenses, such as doctor visits, hospital stays & prescription drugs.", "Keystone provides fast, accurate, and affordable data entry services for all industries, ensuring quality without compromise.",
icon: "/images/box-icon/medical-circle.svg", icon: "/images/box-icon/medical-circle.svg",
bgColor: "bg-color-yellow", bgColor: "bg-color-yellow",
delay: "0s", delay: "0s",
}, },
{ {
id: 12, id: 12,
title: "Property Insurance", title: "Data Conversion",
description: description:
"Property insurance protects your belongings from damage or loss caused by events like fire, theft, or natural disasters", "Keystone converts data to your desired format quickly and accurately, with zero data loss risk.",
icon: "/images/box-icon/coins-stacked.svg", icon: "/images/box-icon/coins-stacked.svg",
bgColor: "bg-color-green", bgColor: "bg-color-green",
delay: ".2s", delay: ".2s",
}, },
{ {
id: 13, id: 13,
title: "Business Insurance", title: "Data Processing",
description: description:
"Business insurance protects your company from various risks, such as property damage", "Maximize your online presence with data-driven digital marketing strategies. We help you reach, engage, and convert your target audience across the digital landscape.",
icon: "/images/box-icon/building-07.svg", icon: "/images/box-icon/building-07.svg",
bgColor: "bg-color-red", bgColor: "bg-color-red",
delay: ".3s", delay: ".3s",
}, },
{
id: 14,
title: "Receipt Data Entry Services",
description:
"Keystone delivers fast, accurate receipt data entry, ensuring consistent and reliable digital records for your business.",
icon: "/images/box-icon/coins-stacked.svg",
bgColor: "bg-color-blue",
delay: ".4s",
},
{
id: 15,
title: "Logistics Data Entry Services",
description:
"Keystone delivers accurate, affordable logistics data entry, helping you manage operations efficiently and meet delivery schedules.",
icon: "/images/box-icon/medical-circle.svg",
bgColor: "bg-color-purple",
delay: ".5s",
},
{
id: 16,
title: "Constructions",
description:
"Keystone delivers accurate, affordable construction service, helping you manage operations efficiently and meet delivery schedules.",
icon: "/images/box-icon/building-07.svg",
bgColor: "bg-color-skygreen",
delay: ".5s",
}
]; ];
export const services3 = [ export const services3 = [
{ {
id: 14, id: 14,
number: "01", number: "01",
title: "Market Research & Analysis", title: "Data Entry Services",
description: description:
"Gain actionable insights with our comprehensive market research and analysis services. We help you understand your audience, competitors, and industry trends.", "Keystone provides fast, accurate, and affordable data entry services for all industries, ensuring quality without compromise.",
image: "/images/section/service-9.jpg", image: "/images/section/service-9.jpg",
}, },
{ {
id: 15, id: 15,
number: "02", number: "02",
title: "Brand Development & Positioning", title: "Data Conversion",
description: description:
"Craft a compelling identity that sets you apart. Our tailored brand development and positioning services help you define who you are, communicate your value", "Keystone converts data to your desired format quickly and accurately, with zero data loss risk.",
image: "/images/section/service-10.jpg", image: "/images/section/service-10.jpg",
}, },
{ {
id: 16, id: 16,
number: "03", number: "03",
title: "Digital Marketing", title: "Data Processing",
description: description:
"Maximize your online presence with data-driven digital marketing strategies. We help you reach, engage, and convert your target audience across the digital landscape.", "Maximize your online presence with data-driven digital marketing strategies. We help you reach, engage, and convert your target audience across the digital landscape.",
image: "/images/section/service-11.jpg", image: "/images/section/service-11.jpg",
}, },
{
id: 17,
number: "04",
title: "Receipt Data Entry Services",
description:
"Keystone delivers fast, accurate receipt data entry, ensuring consistent and reliable digital records for your business.",
image: "/images/section/service-9.jpg",
},
{
id: 18,
number: "05",
title: "Logistics Data Entry Services",
description:
"Keystone delivers accurate, affordable logistics data entry, helping you manage operations efficiently and meet delivery schedules.",
image: "/images/section/service-10.jpg",
},
]; ];
export const services4 = [ export const services4 = [
{ {
id: 17, id: 14,
title: "Business Strategy <br /> Planning", title: "Data Entry Services",
imgSrc: "/images/section/service-9.jpg",
imgSrc: "/images/box-icon/business-idea.png",
description: description:
"Market analysis and research, Competitive landscape assessment, SWOT analysis, Strategic goal setting.", "Keystone provides fast, accurate, and affordable data entry services for all industries, ensuring quality without compromise.",
delay: "0s", delay: "0s",
items: [ items: [
"Financial Planning", "Online Data Entry",
"Strategic Goal Setting", "Offline Data Entry",
"Market Analysis", "MS Access Data Entry",
"SWOT Analysis", "Excel Data Entry",
"XML Data Entry"
], ],
}, },
{
id: 15,
title: "Data Conversion",
imgSrc: "/images/section/service-10.jpg",
description:
"Keystone converts data to your desired format quickly and accurately, with zero data loss risk.",
delay: ".15s",
items: [
"XML / XHTML Conversion",
"PDF Conversion",
"TEXT / TXT Conversion",
"Document OCR Conversion",
"Catalogue Conversion"
],
},
{
id: 16,
title: "Data Processing",
imgSrc: "/images/section/service-11.jpg",
description:
"Maximize your online presence with data-driven digital marketing strategies. We help you reach, engage, and convert your target audience across the digital landscape.",
delay: ".25s",
items: [
"Word Processing",
"Check Processing",
"Form Processing",
"OCR Cleanup",
"Survey Processing"
],
},
{
id: 17,
title: "Receipt Data Entry Services",
imgSrc: "/images/section/service-9.jpg",
description:
"Keystone delivers fast, accurate receipt data entry, ensuring consistent and reliable digital records for your business.",
delay: ".35s",
items: [],
},
{ {
id: 18, id: 18,
title: "Financial Consulting <br /> &amp; Strategy", title: "Logistics Data Entry Services",
imgSrc: "/images/box-icon/currency-exchange.png", imgSrc: "/images/section/service-10.jpg",
description: description:
"Financial statement analysis, Cost-benefit analysis, Budgeting and forecasting, Risk management.", "Keystone delivers accurate, affordable logistics data entry, helping you manage operations efficiently and meet delivery schedules.",
delay: ".15s", delay: ".45s",
items: [ items: [
"Risk Management", "Freight Bill Data Entry",
"Financial Planning and Analysis", "Freight Bill Processing",
"Mergers and Acquisitions", "Contract Management",
"Capital Raising", "Bill of Lading Verification & Data Entry",
], "Invoice Processing"
},
{
id: 19,
title: "Operations &amp; Analyst <br /> Improvement",
imgSrc: "/images/box-icon/stock-market.png",
description:
"Process Optimization, Lean Manufacturing, Supply Chain Management, Quality Control.",
delay: ".25s",
items: [
"Process Optimization",
"Data-Driven Decision Making",
"Technology Implementation",
"Continuous Improvement",
],
},
{
id: 20,
title: "Tailor Personnel <br /> Consulting",
imgSrc: "/images/box-icon/email-marketing.png",
description:
"Talent Acquisition, Employee Development, Performance Management, Organizational Culture Development.",
delay: ".35s",
items: [
"Customized Recruitment Solutions",
"Comprehensive Talent Acquisition",
"Strategic Talent Management",
"Executive Search",
], ],
}, },
]; ];
export const allServices = [ export const allServices = [
...serviceBoxes, ...serviceBoxes,
...services, ...services,

2
public/css/bootstrap.css vendored
View File

@ -5377,7 +5377,7 @@ fieldset:disabled .btn {
float: left; float: left;
padding-right: var(--bs-breadcrumb-item-padding-x); padding-right: var(--bs-breadcrumb-item-padding-x);
color: var(--bs-breadcrumb-divider-color); color: var(--bs-breadcrumb-divider-color);
content: var(--bs-breadcrumb-divider, "/") content: var(--bs-breadcrumb-divider, "")
} }
.breadcrumb-item.active { .breadcrumb-item.active {

BIN
public/images/item/item-title.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
public/images/section/img-with-shape-3.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 65 KiB

BIN
public/images/section/img-with-shape-4.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 46 KiB

BIN
public/images/section/img-with-shape-6.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 94 KiB

8
public/scss/_reset.scss
View File

@ -1804,6 +1804,12 @@ a {
.bg-color-blue { .bg-color-blue {
background-color: var(--Primary-ic-blue); background-color: var(--Primary-ic-blue);
} }
.bg-color-purple{
background-color: var(--Primary-ic-purple);
}
.bg-color-skygreen{
background-color: var(--Primary-ic-skygreen);
}
.bg-mono-gray-1 { .bg-mono-gray-1 {
background-color: var(--Mono-gray-1); background-color: var(--Mono-gray-1);
} }
@ -1882,7 +1888,7 @@ a {
} }
.wrap-page-header { .wrap-page-header {
background: linear-gradient(103.01deg, #eff4ff 0%, #c9d9ff 100.23%); background: var(--Bg-color-1);
} }
.grid-2 { .grid-2 {

2
public/scss/_responsive.scss
View File

@ -653,7 +653,7 @@
} }
&.v2 { &.v2 {
.content { .content {
padding-top: 114px; padding-top: 4px;
} }
.shape-img-bg { .shape-img-bg {
margin-left: auto; margin-left: auto;

25
public/scss/_sections.scss
View File

@ -9,8 +9,8 @@
.page-title { .page-title {
&.style-default { &.style-default {
padding-top: 111px; padding-top: 44px;
padding-bottom: 133px; padding-bottom: 44px;
margin-bottom: -27px; margin-bottom: -27px;
&.v2 { &.v2 {
padding-bottom: 204px; padding-bottom: 204px;
@ -291,7 +291,7 @@
.section-testimonial { .section-testimonial {
&.style-1 { &.style-1 {
background-color: var(--Sub-color-1); background-color: var(--Bg-color-1);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.wrap { .wrap {
@ -313,7 +313,7 @@
right: 0; right: 0;
z-index: 4; z-index: 4;
background-color: transparent; background-color: transparent;
background-image: linear-gradient(180deg, #f2f6ff 35%, #1357f000 100%); background-image: linear-gradient(180deg, #f9f5f1 35%, #1357f000 100%);
height: 150px; height: 150px;
} }
&::before { &::before {
@ -321,7 +321,7 @@
content: ""; content: "";
position: absolute; position: absolute;
background-color: transparent; background-color: transparent;
background-image: linear-gradient(180deg, #f2f6ff00 0%, #f2f6ff 70%); background-image: linear-gradient(180deg, #f2f6ff00 0%, #f9f5f1 70%);
height: 200px; height: 200px;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -567,9 +567,7 @@
.section-contact { .section-contact {
&.style-default { &.style-default {
overflow: hidden; overflow: hidden;
background: linear-gradient(103.01deg, #eff4ff 0%, #c9d9ff 100.23%); background: var(--Bg-color-1);
padding-top: 110px;
padding-bottom: 122px;
border-radius: 40px; border-radius: 40px;
.bot { .bot {
.content { .content {
@ -1133,3 +1131,14 @@
} }
} }
} }
.features-list {
list-style-type: disc !important;
list-style-position: outside !important;
padding-left: 20px !important;
margin-top: 10px;
}
.features-list li {
margin-bottom: 6px;
}

2
public/scss/abstracts/_variable.scss
View File

@ -35,6 +35,8 @@ $fontIcon: "icomoon";
--Primary-ic-red: #ff8283; --Primary-ic-red: #ff8283;
--Primary-ic-green: #a7decf; --Primary-ic-green: #a7decf;
--Primary-ic-yellow: #fedc6e; --Primary-ic-yellow: #fedc6e;
--Primary-ic-purple: #d457d8;
--Primary-ic-skygreen: #80d370;
// Business Consulting // Business Consulting
--Primary: #0075ff; --Primary: #0075ff;
--Primary-1: #e2ecf9; --Primary-1: #e2ecf9;

2
public/scss/component/_footer.scss
View File

@ -181,7 +181,7 @@
margin-top: 0; margin-top: 0;
} }
.footer-bottom { .footer-bottom {
padding-top: 107px; padding-top: 20px;
} }
} }
&.style-3 { &.style-3 {

4
public/scss/component/_header.scss
View File

@ -65,8 +65,8 @@
} }
&.style-3 { &.style-3 {
.header-inner-wrap { .header-inner-wrap {
padding: 37px 0 22px; padding: 20px 0 22px;
border-bottom: 1px dashed #a7a7a7;
} }
.header-left { .header-left {