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

first commit

Browse Source
This commit is contained in:
mukesh13
2025-07-30 13:44:47 +05:30
commit 6c0c0e3d1d
494 changed files with 57695 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
components/common/Challanges.jsx Normal file
View File

@ -0,0 +1,127 @@
import React from "react";
import Image from "next/image";
export default function Challanges() {
return (
<div className="section tf-spacing-7">
<div className="tf-container">
<div className="heading-section text-center mb_87">
<h2 className="split-text effect-right">
Solving IT Challenges in Every Industry
</h2>
<p
className="text_color-text-2 text-body-1 mt_20 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
From an early stage start-up’s growth strategies to helping existing
businesses, we have done it all!
</p>
</div>
<div className="wrap-challenges-item">
<a href="#" className="challenges-item">
<Image
alt="challenges-item"
src="/images/section/challenges-item-1.jpg"
width={96}
height={96}
/>
<p className="text-body-2 text_black">Agribussiness</p>
</a>
<a href="#" className="challenges-item">
<Image
alt="challenges-item"
src="/images/section/challenges-item-2.jpg"
width={96}
height={96}
/>
<p className="text-body-2 text_black">Advanced Manufacturing</p>
</a>
<a href="#" className="challenges-item">
<Image
alt="challenges-item"
src="/images/section/challenges-item-3.jpg"
width={96}
height={96}
/>
<p className="text-body-2 text_black">Automotive &amp; Mobility</p>
</a>
<a href="#" className="challenges-item">
<Image
alt="challenges-item"
src="/images/section/challenges-item-4.jpg"
width={96}
height={96}
/>
<p className="text-body-2 text_black">Financial Services</p>
</a>
<a href="#" className="challenges-item">
<Image
alt="challenges-item"
src="/images/section/challenges-item-5.jpg"
width={96}
height={96}
/>
<p className="text-body-2 text_black">
Healthcare &amp; Life Sciences
</p>
</a>
<a href="#" className="challenges-item">
<Image
alt="challenges-item"
src="/images/section/challenges-item-6.jpg"
width={96}
height={96}
/>
<p className="text-body-2 text_black">
Ener &amp; Natural Resources
</p>
</a>
<a href="#" className="challenges-item">
<Image
alt="challenges-item"
src="/images/section/challenges-item-7.jpg"
width={96}
height={96}
/>
<p className="text-body-2 text_black">Media &amp; Entertainment</p>
</a>
<a href="#" className="challenges-item">
<Image
alt="challenges-item"
src="/images/section/challenges-item-8.jpg"
width={96}
height={96}
/>
<p className="text-body-2 text_black">Telecommunication</p>
</a>
<a href="#" className="challenges-item">
<Image
alt="challenges-item"
src="/images/section/challenges-item-9.jpg"
width={96}
height={96}
/>
<p className="text-body-2 text_black">Social &amp; Public Sector</p>
</a>
<a href="#" className="challenges-item">
<Image
alt="challenges-item"
src="/images/section/challenges-item-10.jpg"
width={96}
height={96}
/>
<p className="text-body-2 text_black">Technology</p>
</a>
<a href="#" className="challenges-item">
<Image
alt="challenges-item"
src="/images/section/challenges-item-11.jpg"
width={96}
height={96}
/>
<p className="text-body-2 text_black">Forest Products</p>
</a>
</div>
</div>
</div>
);
}

97
components/common/Contact.jsx Normal file
View File

@ -0,0 +1,97 @@
"use client";
import React from "react";
import Link from "next/link";
import Image from "next/image";
export default function Contact() {
return (
<div className="section-contact style-default position-relative">
<div className="tf-container">
<div className="row">
<div className="col-lg-6">
<div className="left">
<div className="heading">
<div className="h1 split-text split-lines-rotation-x">
Success is a team play, right? Let's work together!
</div>
</div>
<div className="bot">
<div className="content">
<h6 className="mb_5">+91 90954 50005</h6>
<p className="text-body-2 text_mono-gray-6">
Call us for urgent
</p>
</div>
<Link href={`/contact-us`} className="tf-btn btn-primary2 h36">
<span className="text-caption">Get Direction</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
<div className="col-lg-6">
<form onSubmit={(e) => e.preventDefault()} className="form-contact">
<fieldset>
<label className="mb_15" htmlFor="name">
Full Name*
</label>
<input type="text" placeholder="Full Name" id="name" 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"
required
/>
</fieldset>
<fieldset>
<label className="mb_15" htmlFor="phone">
Phone Number
<span className="text_mono-gray-5">(Optional)</span>
</label>
<input
type="text"
placeholder="Your phone number"
id="phone"
required
/>
</fieldset>
</div>
<fieldset className="">
<label className="mb_15" htmlFor="message">
Message
</label>
<textarea
className="message"
placeholder="Write your message here..."
id="message"
defaultValue={""}
/>
</fieldset>
<a href="#" className="link attachment">
<i className="icon-paperclip-solid" />
Add an attachment
</a>
<button type="submit" className="tf-btn btn-primary2 mt_27">
<span>Send Message</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>
);
}

206
components/common/Countdown.jsx Normal file
View File

@ -0,0 +1,206 @@
"use client";
import React, { useState, useEffect } from "react";
const CountdownTimer = ({ style = 1, targetDate = "2025-06-31T23:59:59" }) => {
const [showTimer, setShowTimer] = useState(false);
useEffect(() => {
setShowTimer(true);
}, []);
const calculateTimeLeft = () => {
const difference = +new Date(targetDate) - +new Date();
if (difference > 0) {
return {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
}
return null; // Time is up
};
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
useEffect(() => {
const timer = setInterval(() => {
setTimeLeft(calculateTimeLeft());
}, 1000);
return () => clearInterval(timer); // Cleanup the timer on component unmount
}, [targetDate]);
if (!timeLeft) {
return <div>Time's up!</div>;
}
return (
<>
{showTimer ? (
<>
{style == 1 && (
<div aria-hidden="true" className="countdown__timer">
<span className="countdown__item">
<span className="countdown__value countdown__value--0 js-countdown__value--0">
{timeLeft.days}
</span>
<span className="countdown__label">D :</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--1 js-countdown__value--1">
{timeLeft.hours}
</span>
<span className="countdown__label">H :</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--2 js-countdown__value--2">
{timeLeft.minutes}
</span>
<span className="countdown__label">M :</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--3 js-countdown__value--3">
{timeLeft.seconds}
</span>
<span className="countdown__label">S</span>
</span>
</div>
)}
{style == 2 && (
<div aria-hidden="true" className="countdown__timer">
<span className="countdown__item">
<span className="countdown__value countdown__value--0 js-countdown__value--0">
{timeLeft.days}
</span>
<span className="countdown__label">Days</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--1 js-countdown__value--1">
{timeLeft.hours}
</span>
<span className="countdown__label">Hours</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--2 js-countdown__value--2">
{timeLeft.minutes}
</span>
<span className="countdown__label">Mins</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--3 js-countdown__value--3">
{timeLeft.seconds}
</span>
<span className="countdown__label">Secs</span>
</span>
</div>
)}
{style == 3 && (
<div aria-hidden="true" className="countdown__timer">
<span className="countdown__item">
<span className="countdown__value countdown__value--0 js-countdown__value--0">
{timeLeft.days}
</span>
<span className="countdown__label">DAYS</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--1 js-countdown__value--1">
{timeLeft.hours}
</span>
<span className="countdown__label">HOURS</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--2 js-countdown__value--2">
{timeLeft.minutes}
</span>
<span className="countdown__label">MINUTES</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--3 js-countdown__value--3">
{timeLeft.seconds}
</span>
<span className="countdown__label">SECONDS</span>
</span>
</div>
)}
{style == 4 && (
<div aria-hidden="true" class="countdown__timer">
<span class="countdown__item">
<span class="countdown__value countdown__value--2 js-countdown__value--2">
{timeLeft.minutes}
</span>
<span class="countdown__label">:</span>
</span>
<span class="countdown__item">
<span class="countdown__value countdown__value--3 js-countdown__value--3">
{timeLeft.seconds}
</span>
<span class="countdown__label"></span>
</span>
</div>
)}
{style == 5 && (
<div aria-hidden="true" className="countdown__timer">
<span className="countdown__item">
<span className="countdown__value countdown__value--0 js-countdown__value--0">
{timeLeft.days}
</span>
<span className="countdown__label">d :</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--1 js-countdown__value--1">
{timeLeft.hours}
</span>
<span className="countdown__label">h :</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--2 js-countdown__value--2">
{timeLeft.minutes}
</span>
<span className="countdown__label">m :</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--3 js-countdown__value--3">
{timeLeft.seconds}
</span>
<span className="countdown__label">s</span>
</span>
</div>
)}
</>
) : (
""
)}
{style == 6 && (
<div aria-hidden="true" className="countdown__timer">
<span className="countdown__item">
<span className="countdown__value countdown__value--0 js-countdown__value--0">
{timeLeft.days}
</span>
<span className="countdown__label">D</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--1 js-countdown__value--1">
{timeLeft.hours}
</span>
<span className="countdown__label">H</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--2 js-countdown__value--2">
{timeLeft.minutes}
</span>
<span className="countdown__label">M</span>
</span>
<span className="countdown__item">
<span className="countdown__value countdown__value--3 js-countdown__value--3">
{timeLeft.seconds}
</span>
<span className="countdown__label">S</span>
</span>
</div>
)}
</>
);
};
export default CountdownTimer;

91
components/common/DropdownSelect.jsx Normal file
View File

@ -0,0 +1,91 @@
"use client";
import { useEffect, useRef, useState } from "react";
const optionsDefault = ["Newest", "Oldest", "3 days"];
export default function DropdownSelect({
onChange = (elm) => {},
options = optionsDefault,
defaultOption,
selectedValue,
addtionalParentClass = "",
}) {
const selectRef = useRef();
const optionsRef = useRef();
const [selected, setSelected] = useState("");
const toggleDropdown = () => {
selectRef.current.classList.toggle("open");
};
useEffect(() => {
const handleClickOutside = (event) => {
if (!selectRef.current.contains(event.target)) {
selectRef.current.classList.remove("open");
}
};
// Add event listeners to each dropdown element
// Add a global click event listener to detect outside clicks
document.addEventListener("click", handleClickOutside);
// Cleanup event listeners on component unmount
return () => {
document.removeEventListener("click", handleClickOutside);
};
}, []);
useEffect(() => {
// Function to handle clicks outside the select or options
const handleClickOutside = (event) => {
if (
selectRef.current &&
selectRef.current.contains(event.target) &&
optionsRef.current &&
!optionsRef.current.contains(event.target)
) {
// Close the options if clicked outside
toggleDropdown();
}
};
// Add event listener on mount
document.addEventListener("click", handleClickOutside);
// Cleanup event listener on unmount
return () => {
document.removeEventListener("click", handleClickOutside);
};
}, []);
return (
<>
<div className={`nice-select ${addtionalParentClass}`} ref={selectRef}>
<span className="current">
{selectedValue || selected || defaultOption || options[0]}
</span>
<ul className="list" ref={optionsRef}>
{options.map((elm, i) => (
<li
key={i}
onClick={() => {
setSelected(elm);
onChange(elm);
toggleDropdown();
}}
className={`option ${
!selectedValue
? selected == elm
? "selected"
: ""
: selectedValue == elm
? "selected"
: ""
} text text-1`}
>
{elm}
</li>
))}
</ul>
</div>
</>
);
}

212
components/common/Faqs.jsx Normal file
View File

@ -0,0 +1,212 @@
import React from "react";
export default function Faqs({
parentClass = "section-faqs style-1 tf-spacing-8 pt-0",
headingClass = "heading-title split-text effect-right",
header2 = false,
}) {
return (
<div className={parentClass}>
<div className="tf-container">
<div
className={`heading-section text-center ${
header2 ? "mb_86" : "mb_92"
} `}
>
{header2 ? (
<h2 className={headingClass}>Got a question? Get your answer</h2>
) : (
<h1 className={headingClass}>Got a question? Get your answer</h1>
)}
<p
className="text-body-1 text_mono-gray-7 mt_20 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
We revolutionize industries with dynamic digital solutions, tailored
to meet contemporary demands and <br />
drive impactful transformations for businesses of all sectors.
</p>
</div>
<ul
className="accordion-wrap gap-16 style-faqs d-grid gap_16"
id="accordion-faq-1"
>
<li className="accordion-item action_click scrolling-effect effectBottom style-default v2">
<a
href="#accordion-1"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-1"
>
<div className="heading">
<h5 className="title">
How benefit that We got when choose Basic plan?
</h5>
</div>
<span className="icon" />
</a>
<div
id="accordion-1"
className="collapse"
data-bs-parent="#accordion-faq-1"
>
<div className="accordion-faqs-content">
<p className="text-body-2 lh-20">
Through the collaboration with customers in discussing needs
and demand, we’re able to attain <br />
mutual understand again customer trust to offer appropriate
advice.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectBottom active style-default v2">
<a
href="#accordion-2"
className="accordion-title action current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-2"
>
<div className="heading">
<h5 className="title">Our project will 100% Secure?</h5>
</div>
<span className="icon" />
</a>
<div
id="accordion-2"
className="collapse show"
data-bs-parent="#accordion-faq-1"
>
<div className="accordion-faqs-content">
<p className="text-body-2 lh-20">
Through the collaboration with customers in discussing needs
and demand, we’re able to attain <br />
mutual understand again customer trust to offer appropriate
advice.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectBottom style-default v2">
<a
href="#accordion-3"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-3"
>
<div className="heading">
<h5 className="title">NDA Agreement will include?</h5>
</div>
<span className="icon" />
</a>
<div
id="accordion-3"
className="collapse"
data-bs-parent="#accordion-faq-1"
>
<div className="accordion-faqs-content">
<p className="text-body-2 lh-20">
Through the collaboration with customers in discussing needs
and demand, we’re able to attain <br />
mutual understand again customer trust to offer appropriate
advice.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectBottom style-default v2">
<a
href="#accordion-4"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-4"
>
<div className="heading">
<h5 className="title">
Can my premium license be used for all devices?
</h5>
</div>
<span className="icon" />
</a>
<div
id="accordion-4"
className="collapse"
data-bs-parent="#accordion-faq-1"
>
<div className="accordion-faqs-content">
<p className="text-body-2 lh-20">
Through the collaboration with customers in discussing needs
and demand, we’re able to attain <br />
mutual understand again customer trust to offer appropriate
advice.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectBottom style-default v2">
<a
href="#accordion-5"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-5"
>
<div className="heading">
<h5 className="title">
What things that we need provide when choose your service
</h5>
</div>
<span className="icon" />
</a>
<div
id="accordion-5"
className="collapse"
data-bs-parent="#accordion-faq-1"
>
<div className="accordion-faqs-content">
<p className="text-body-2 lh-20">
Through the collaboration with customers in discussing needs
and demand, we’re able to attain <br />
mutual understand again customer trust to offer appropriate
advice.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectBottom style-default v2">
<a
href="#accordion-6"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-6"
>
<div className="heading">
<h5 className="title">How long for a standard project?</h5>
</div>
<span className="icon" />
</a>
<div
id="accordion-6"
className="collapse"
data-bs-parent="#accordion-faq-1"
>
<div className="accordion-faqs-content">
<p className="text-body-2 lh-20">
Through the collaboration with customers in discussing needs
and demand, we’re able to attain <br />
mutual understand again customer trust to offer appropriate
advice.
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
);
}

311
components/common/LayoutWrapper.jsx Normal file
View File

@ -0,0 +1,311 @@
"use client";
import { usePathname } from "next/navigation";
import React, { useEffect } from "react";
import SplitText from "@/utlis/splitText";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
export default function LayoutWrapper({ children }) {
const pathname = usePathname();
useEffect(() => {
if (typeof window !== "undefined") {
// Import the script only on the client side
import("bootstrap/dist/js/bootstrap.esm").then(() => {
// Module is imported, you can access any exported functionality if
});
}
}, []);
useEffect(() => {
let lastScrollTop = 0;
const delta = 10;
const header = document.querySelector(".header");
const handleScroll = () => {
const scrollTop = window.scrollY;
if (scrollTop < 350) {
header?.classList.remove("is-sticky");
if (scrollTop < 200) {
header?.classList.remove("header-sticky");
} else {
header?.classList.add("header-sticky");
}
return;
}
if (scrollTop > lastScrollTop + delta) {
header?.classList.add("header-sticky");
header?.classList.remove("is-sticky");
} else if (scrollTop < lastScrollTop - delta) {
header?.classList.add("is-sticky");
}
lastScrollTop = scrollTop;
};
setTimeout(() => {
window.addEventListener("scroll", handleScroll);
window.dispatchEvent(new Event("scroll"));
});
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, [pathname]);
useEffect(() => {
// Scrolling Effect
const scrollingEffect = () => {
const elements = document.querySelectorAll(".scrolling-effect");
if (!elements.length) return;
elements.forEach((el) => {
const settings = {
scrollTrigger: {
trigger: el,
scrub: 3,
toggleActions: "play none none reverse",
start: "top bottom",
end: "bottom bottom",
delay: 3,
},
duration: 0.8,
ease: "power3.out",
};
if (el.classList.contains("effectRight")) {
settings.opacity = 0;
settings.x = "80";
}
if (el.classList.contains("effectLeft")) {
settings.opacity = 0;
settings.x = "-80";
}
if (el.classList.contains("effectBottom")) {
settings.opacity = 0;
settings.y = "100";
}
if (el.classList.contains("effectTop")) {
settings.opacity = 0;
settings.y = "-80";
}
if (el.classList.contains("effectZoomIn")) {
settings.opacity = 0;
settings.scale = 0.5;
}
gsap.from(el, settings);
});
};
// Animation Text
const animationText = () => {
const splitTextElements = document.querySelectorAll(".split-text");
if (!splitTextElements.length) return;
splitTextElements.forEach((el) => {
const target = el.querySelector("p, a") || el;
const pxlSplit = new SplitText(target, {
type: "words, chars, lines",
lineThreshold: 0.5,
wordsClass: "word",
linesClass: "split-line",
});
// Handle gradient characters
const gradientChars = el.querySelectorAll(".text-gradient > .word > *");
if (gradientChars.length) {
let offset = 0;
gradientChars.forEach((char) => {
const parent = char.parentElement;
const parentWidth = parent.offsetWidth;
char.style.backgroundSize = `${parentWidth}px 100%`;
offset += char.previousElementSibling?.offsetWidth || 0;
char.style.backgroundPosition = `${parentWidth - offset}px 0%`;
});
}
let splitTypeSet = pxlSplit.chars;
gsap.set(target, { perspective: 400 });
const settings = {
scrollTrigger: {
trigger: target,
start: "top 86%",
once: true,
},
duration: 0.9,
stagger: 0.02,
ease: "power3.out",
};
const hasClass = (className) => el.classList.contains(className);
if (hasClass("effect-fade")) settings.opacity = 0;
if (hasClass("effect-right")) {
settings.opacity = 0;
settings.x = "50";
}
if (hasClass("effect-left")) {
settings.opacity = 0;
settings.x = "-50";
}
if (hasClass("effect-up")) {
settings.opacity = 0;
settings.y = "80";
}
if (hasClass("effect-down")) {
settings.opacity = 0;
settings.y = "-80";
}
if (hasClass("effect-rotate")) {
settings.opacity = 0;
settings.rotateX = "50deg";
}
if (hasClass("effect-scale")) {
settings.opacity = 0;
settings.scale = "0.5";
}
if (
hasClass("split-lines-transform") ||
hasClass("split-lines-rotation-x")
) {
pxlSplit.split({
type: "lines",
lineThreshold: 0.5,
linesClass: "split-line",
});
splitTypeSet = pxlSplit.lines;
settings.opacity = 0;
settings.stagger = 0.5;
if (hasClass("split-lines-rotation-x")) {
settings.rotationX = -120;
settings.transformOrigin = "top center -50";
} else {
settings.yPercent = 100;
settings.autoAlpha = 0;
}
}
if (hasClass("split-words-scale")) {
pxlSplit.split({ type: "words" });
splitTypeSet = pxlSplit.words;
splitTypeSet.forEach((elw, index) => {
gsap.set(
elw,
{
opacity: 0,
scale: index % 2 === 0 ? 0 : 2,
force3D: true,
duration: 0.1,
ease: "power3.out",
stagger: 0.02,
},
index * 0.01
);
});
gsap.to(splitTypeSet, {
scrollTrigger: {
trigger: el,
start: "top 86%",
},
rotateX: "0",
scale: 1,
opacity: 1,
});
} else {
gsap.from(splitTypeSet, settings);
}
});
};
// Initialize effects
setTimeout(() => {
scrollingEffect();
animationText();
});
}, [pathname]);
useEffect(() => {
const WOW = require("@/utlis/wow");
const wow = new WOW.default({
mobile: false,
live: false,
});
wow.init();
}, [pathname]);
useEffect(() => {
// Dynamically import Bootstrap
import("bootstrap")
.then((bootstrap) => {
// Close any open modal
const modalElements = document.querySelectorAll(".modal.show");
modalElements.forEach((modal) => {
const modalInstance = bootstrap.Modal.getInstance(modal);
if (modalInstance) {
modalInstance.hide();
}
});
// Close any open offcanvas
const offcanvasElements = document.querySelectorAll(".offcanvas.show");
offcanvasElements.forEach((offcanvas) => {
const offcanvasInstance = bootstrap.Offcanvas.getInstance(offcanvas);
if (offcanvasInstance) {
offcanvasInstance.hide();
}
});
})
.catch((error) => {
console.error("Error loading Bootstrap:", error);
});
}, [pathname]); // Runs every time the route changes
useEffect(() => {
const scrollTransformElements =
document.querySelectorAll(".scroll-tranform");
if (scrollTransformElements.length > 0) {
scrollTransformElements.forEach((element) => {
const direction = element.dataset.direction || "up";
const distance = element.dataset.distance || "10%";
let animationProperty;
switch (direction.toLowerCase()) {
case "left":
animationProperty = { x: `-${distance}` };
break;
case "right":
animationProperty = { x: `${distance}` };
break;
case "up":
animationProperty = { y: `-${distance}` };
break;
case "down":
animationProperty = { y: `${distance}` };
break;
default:
animationProperty = { y: `-${distance}` };
}
gsap.to(element, {
...animationProperty,
scrollTrigger: {
trigger: element,
start: "top center",
end: "bottom top",
scrub: 2,
},
});
});
}
// Optional cleanup
return () => {
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
};
}, [pathname]);
return <>{children}</>;
}

70
components/common/OdometerComponent.jsx Normal file
View File

@ -0,0 +1,70 @@
"use client";
import React, { useEffect, useRef, useState } from "react";
const OdometerComponent = ({ max }) => {
const odometerRef = useRef(null);
const [value, setValue] = useState(0);
const odometerInitRef = useRef();
useEffect(() => {
import("odometer").then((Odometer) => {
// Initialize Odometer or do something with it
// Example usage of Odometer
if (Odometer && odometerRef.current) {
odometerInitRef.current = new Odometer.default({
el: odometerRef.current,
value,
});
}
});
}, []);
useEffect(() => {
if (odometerRef.current && odometerInitRef.current) {
odometerInitRef.current.update(value); // Update odometer when value changes
}
}, [value]);
const startCountup = () => {
setValue(max);
};
useEffect(() => {
const handleIntersection = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
startCountup();
observer.unobserve(entry.target);
}
});
};
const options = {
root: null,
rootMargin: "0px",
threshold: 0.5,
};
const observer = new IntersectionObserver(handleIntersection, options);
if (odometerRef.current) {
observer.observe(odometerRef.current);
}
return () => {
if (odometerRef.current) {
observer.unobserve(odometerRef.current);
}
};
}, []);
return (
<>
<div ref={odometerRef} className="odometer">
0
</div>
</>
);
};
export default OdometerComponent;

59
components/common/Pricing.jsx Normal file
View File

@ -0,0 +1,59 @@
import { pricingPlans } from "@/data/pricing";
import React from "react";
export default function Pricing({
parentClass = "section-pricing style-1 tf-spacing-6",
}) {
return (
<div className={parentClass}>
<div className="tf-container">
<div className="wrap">
<div className="heading-section mb_88">
<h2>Choose A Plan, Start Now.</h2>
<p className="text-body-1 text_mono-gray-7 mt_20">
Whether you’re just getting started with rapid testing or scaling
across the <br />
organization, we’ve got you covered
</p>
</div>
<div className="tf-grid-layout lg-col-3">
{pricingPlans.map((plan, index) => (
<div
key={index}
className={`pricing-item${plan.isHighlighted ? " center" : ""}`}
>
<div className="content">
<div className="heading">
<h5 className="title mb_4">{plan.title}</h5>
<p className="text-body-2 text_mono-gray-7">
{plan.description}
</p>
</div>
<div className="price d-flex align-items-end">
<h3 className="text_primary price-value">{plan.price}</h3>
<span className="text_mono-gray-7 sub-heading">/month</span>
</div>
<ul className="list d-grid gap_16">
{plan.features.map((feature, i) => (
<li
key={i}
className="sub-heading d-flex gap_16 align-items-center"
>
<i className="icon-check-solid text_primary" />
{feature}
</li>
))}
</ul>
</div>
<a href="#" className={plan.buttonStyle}>
<span className="text-body-3">Get Started Now</span>
<span className="bg-effect" />
</a>
</div>
))}
</div>
</div>
</div>
</div>
);
}

90
components/common/ScrollTop.jsx Normal file
View File

@ -0,0 +1,90 @@
"use client";
import { useEffect } from "react";
export default function ScrollTop() {
useEffect(() => {
const box = document.querySelector(".scrollTop");
const liquid = document.querySelector(".liquid");
const offset = 200;
const handleScroll = () => {
const scrollPosition = window.scrollY;
const docHeight =
document.documentElement.scrollHeight - window.innerHeight;
const percent = Math.min(
Math.floor((scrollPosition / docHeight) * 100),
100
);
if (liquid) {
liquid.style.transform = `translate(0, ${100 - percent}%)`;
}
if (scrollPosition >= offset) {
box?.classList.add("active-progress");
} else {
box?.classList.remove("active-progress");
}
};
const handleClick = (event) => {
event.preventDefault();
window.scrollTo({ top: 0, behavior: "smooth" });
};
window.addEventListener("scroll", handleScroll);
box?.addEventListener("click", handleClick);
return () => {
window.removeEventListener("scroll", handleScroll);
box?.removeEventListener("click", handleClick);
};
}, []);
return (
<div className="scrollTop effect-icon">
<div className="icon">
<i className="icon-long-arrow-alt-up-solid" />
</div>
<div className="liquid">
<svg viewBox="0 0 560 20" className="liquid_wave liquid_wave_back">
<use xlinkHref="#wave" />
</svg>
<svg viewBox="0 0 560 20" className="liquid_wave liquid_wave_front">
<use xlinkHref="#liquid" />
</svg>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 560 20"
style={{ display: "none" }}
>
<symbol id="liquid">
<path
d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"
fill="#"
style={{
transition: "stroke-dashoffset 10ms linear",
strokeDasharray: "301.839, 301.839",
strokeDashoffset: "251.895px",
}}
/>
<path
d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"
fill="#"
/>
<path
d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"
fill="#"
/>
<path
d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"
fill="#"
/>
</symbol>
</svg>
</div>
</div>
);
}

153
components/common/Services.jsx Normal file
View File

@ -0,0 +1,153 @@
"use client";
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper/modules";
const services = [
{
title: (
<>
Business Strategy <br /> Planning
</>
),
imgSrc: "/images/box-icon/business-idea.png",
description:
"Market analysis and research, Competitive landscape assessment, SWOT analysis, Strategic goal setting.",
delay: "0s",
},
{
title: (
<>
Financial Consulting
<br />
&amp; Strategy
</>
),
imgSrc: "/images/box-icon/currency-exchange.png",
description:
"Financial statement analysis, Cost-benefit analysis, Budgeting and forecasting, Risk management.",
delay: ".15s",
},
{
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",
},
{
title: (
<>
Tailor Personnel <br /> Consulting
</>
),
imgSrc: "/images/box-icon/email-marketing.png",
description:
"Talent Acquisition, Employee Development, Performance Management, Organizational Culture Development.",
delay: ".35s",
},
];
export default function Services() {
return (
<div className="section section-service style-1 bg-sub-color tf-spacing-16">
<div className="tf-container">
<div className="heading-section d-flex justify-content-between flex-wrap-md gap_12 align-items-end mb_112">
<div className="left">
<h2 className="heading-title split-text effect-right">
Tailored Solutions For Your Growth
</h2>
<p
className="text-body-1 text_mono-gray-7 mt_20 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
With custom services, we empower the development, provide support
from your unique vision.
</p>
</div>
<Link href={`/services`} className="tf-btn btn-primary2">
<span>View Services</span>
<span className="bg-effect" />
</Link>
</div>
<Swiper
className="swiper tf-sw-mobile bg_1 swiper-active-576"
data-screen={576}
spaceBetween={15}
modules={[Pagination]}
pagination={{
clickable: true,
el: ".spd16",
}}
>
{services.map((service, index) => (
<SwiperSlide
key={index}
className="swiper-slide wow animate__fadeInRight animate__animated"
data-wow-delay={service.delay}
>
<div className="tf-box-icon style-1 hover-border">
<h5 className="mb_53 title">
<a href="#" className="link hover-line-text line-clamp-2">
{service.title}
</a>
</h5>
<div className="icon">
<Image
alt="icon"
src={service.imgSrc}
width={160}
height={160}
/>
</div>
<p className="text-body-1 text_mono-gray-7">
{service.description}
</p>
</div>
</SwiperSlide>
))}
<div className="sw-dots style-default spd16 sw-pagination-mb mt_20 justify-content-center d-flex d-md-none" />
</Swiper>
<div className="swiper tf-sw-mobile bg_1 swiper-inActive-576">
<div className="swiper-wrapper tf-grid-layout-sm xl-col-4 sm-col-2 gap_24">
{services.map((service, index) => (
<div
key={index}
className="swiper-slide wow animate__fadeInRight animate__animated"
data-wow-delay={service.delay}
>
<div className="tf-box-icon style-1 hover-border">
<h5 className="mb_53 title">
<a href="#" className="link hover-line-text line-clamp-2">
{service.title}
</a>
</h5>
<div className="icon">
<Image
alt="icon"
src={service.imgSrc}
width={160}
height={160}
/>
</div>
<p className="text-body-1 text_mono-gray-7">
{service.description}
</p>
</div>
</div>
))}
</div>
<div className="sw-dots style-default sw-pagination-mb mt_20 justify-content-center d-flex d-md-none" />
</div>
</div>
</div>
);
}

136
components/common/Testimonials.jsx Normal file
View File

@ -0,0 +1,136 @@
"use client";
import React from "react";
import Image from "next/image";
import { testimonials3 } from "@/data/testimonials";
export default function Testimonials() {
return (
<div className="section-testimonial style-1">
<div className="tf-container">
<div className="row">
<div className="col-lg-6">
<div className="wrap">
<div className="heading-section">
<h2 className="heading-title split-text split-lines-rotation-x">
Client Satisfaction, Our Reputation
</h2>
<p
className="text-body-1 text_mono-gray-7 mt_20 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
We’ve helped hundreds of partners, to achieve their goals and
stellar feedback, is our reward!
</p>
</div>
<div className="item">
<Image
alt="item"
src="/images/item/item-testimonial1.png"
width={715}
height={330}
/>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="tf-grid-layout md-col-2">
<div
className="infiniteslide_wrap"
style={{ overflow: "hidden", height: 2370 }}
>
<div className="infiniteslide infiniteSlideVertical">
{[...testimonials3, ...testimonials3].map(
(testimonial, index) => (
<div
key={`${testimonial.id}-${index}`}
className={`testimonial style-default ${
index >= 6 ? "infiniteslide_clone" : ""
}`}
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="icon mb_30">
<i className="icon-quote" />
</div>
<div className="text sub-heading mb_30">
“ {testimonial.quote} ”
</div>
<div className="box-user d-flex align-items-center">
<div className="avatar">
<Image
alt="avatar"
src={testimonial.avatar}
width={100}
height={100}
/>
</div>
<div className="content">
<p className="text-body-3 sub font3 text_mono-gray-6">
{testimonial.position}
</p>
<div className="text-body-2 text_black name text-uppercase">
<a href="#" className="link">
{testimonial.name}
</a>
</div>
</div>
</div>
</div>
)
)}
</div>
</div>
<div
className="infiniteslide_wrap"
style={{ overflow: "hidden", height: 2370 }}
>
<div
className="infiniteslide infiniteSlideVertical"
style={{ animationDirection: "reverse" }}
>
{[...testimonials3, ...testimonials3].map(
(testimonial, index) => (
<div
key={`${testimonial.id}-${index}`}
className={`testimonial style-default ${
index >= 6 ? "infiniteslide_clone" : ""
}`}
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="icon mb_30">
<i className="icon-quote" />
</div>
<div className="text sub-heading mb_30">
“ {testimonial.quote} ”
</div>
<div className="box-user d-flex align-items-center">
<div className="avatar">
<Image
alt="avatar"
src={testimonial.avatar}
width={100}
height={100}
/>
</div>
<div className="content">
<p className="text-body-3 sub font3 text_mono-gray-6">
{testimonial.position}
</p>
<div className="text-body-2 text_black name text-uppercase">
<a href="#" className="link">
{testimonial.name}
</a>
</div>
</div>
</div>
</div>
)
)}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

333
components/footers/Footer1.jsx Normal file
View File

@ -0,0 +1,333 @@
"use client";
import React, { useEffect, useState } from "react";
import axios from "axios";
import Link from "next/link";
import Image from "next/image";
export default function Footer1({ parentClass = "footer style-default" }) {
const [success, setSuccess] = useState(true);
const [showMessage, setShowMessage] = useState(false);
const handleShowMessage = () => {
setShowMessage(true);
setTimeout(() => {
setShowMessage(false);
}, 2000);
};
const sendEmail = async (e) => {
e.preventDefault(); // Prevent default form submission behavior
const email = e.target.email.value;
try {
const response = await axios.post(
"https://express-brevomail.vercel.app/api/contacts",
{
email,
}
);
if ([200, 201].includes(response.status)) {
e.target.reset(); // Reset the form
setSuccess(true); // Set success state
handleShowMessage();
} else {
setSuccess(false); // Handle unexpected responses
handleShowMessage();
}
} catch (error) {
console.error("Error:", error.response?.data || "An error occurred");
setSuccess(false); // Set error state
handleShowMessage();
e.target.reset(); // Reset the form
}
};
useEffect(() => {
const headings = document.querySelectorAll(".footer-heading-mobile");
const toggleOpen = (event) => {
const parent = event.target.closest(".footer-col-block");
const content = parent.querySelector(".tf-collapse-content");
if (parent.classList.contains("open")) {
parent.classList.remove("open");
content.style.height = "0px";
} else {
parent.classList.add("open");
content.style.height = content.scrollHeight + 10 + "px";
}
};
headings.forEach((heading) => {
heading.addEventListener("click", toggleOpen);
});
// Clean up event listeners when the component unmounts
return () => {
headings.forEach((heading) => {
heading.removeEventListener("click", toggleOpen);
});
};
}, []); // Empty dependency array means this will run only once on mount
return (
<footer id="footer" className={parentClass}>
<div className="footer-wrap">
<div className="tf-container">
<div className="footer-body">
<div className="row">
<div className="col-lg-4">
<div className="footer-about">
<Link href={`/`} className="footer-logo">
<Image
alt="logo"
src="/images/logo/footer-logo.png"
width={390}
height={80}
/>
</Link>
<div className="footer-info mb_51">
<a href="#" className="link text-body-2 text_black">
themesflat@gmail.com
</a>
<div className="text-body-2">
152 Thatcher Road St, Mahattan, NY 10463, <br />
United States
</div>
<div className="text-body-2">(+068) 568 9696</div>
</div>
<div className="tf-social">
<a href="#" className="icon-twitter-x" />
<a href="#" className="icon-facebook-f" />
<a href="#" className="icon-github" />
<a href="#" className="icon-instagram" />
<a href="#" className="icon-youtube" />
</div>
</div>
</div>
<div className="col-lg-2 col-md-6">
<div className="footer-col-block">
<h6 className="footer-heading footer-heading-mobile">
Company
</h6>
<div className="tf-collapse-content">
<ul className="footer-menu-list">
<li className="text-body-2 text_mono-gray-6">
<Link href={`/about`} className="link footer-menu_item">
About Advitex
</Link>
</li>
<li className="text-body-2 text_mono-gray-6">
<Link
href={`/contact-us`}
className="link footer-menu_item"
>
Contact us
</Link>
</li>
<li className="text-body-2 text_mono-gray-6">
<Link
href={`/portfolio`}
className="link footer-menu_item"
>
Portfolio
</Link>
</li>
<li className="text-body-2 text_mono-gray-6">
<Link href={`/faqs`} className="link footer-menu_item">
How We Work
</Link>
</li>
<li className="text-body-2 text_mono-gray-6">
<Link
href={`/career`}
className="link footer-menu_item"
>
Career
</Link>
</li>
<li className="text-body-2 text_mono-gray-6">
<Link href={`/team`} className="link footer-menu_item">
Our Team
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-2 col-md-6">
<div>
<div className="footer-col-block">
<h6 className="footer-heading footer-heading-mobile">
Links
</h6>
<div className="tf-collapse-content">
<ul className="footer-menu-list">
<li className="text-body-2 text_mono-gray-6">
<Link
href={`/contact-us`}
className="link footer-menu_item"
>
Help Center
</Link>
</li>
<li className="text-body-2 text_mono-gray-6">
<Link
href={`/pricing`}
className="link footer-menu_item"
>
Privacy Policy
</Link>
</li>
<li className="text-body-2 text_mono-gray-6">
<a href="#" className="link footer-menu_item">
Term &amp; Conditon
</a>
</li>
<li className="text-body-2 text_mono-gray-6">
<Link
href={`/FAQs`}
className="link footer-menu_item"
>
FAQs
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="col-lg-4">
<div className="footer-newsletter">
<h6 className="footer-heading">Subscribe Our Newseltter</h6>
<div className="tf-collapse-content">
<div className="wrap-newsletter">
<p className="text-body-2 text_mono-gray-6 mb_29">
Sign up to get first dibs on new arrivals, sales
exclusive content, events and more!
</p>
<div
className={`tfSubscribeMsg footer-sub-element ${
showMessage ? "active" : ""
}`}
>
{success ? (
<p style={{ color: "rgb(52, 168, 83)" }}>
You have successfully subscribed.
</p>
) : (
<p style={{ color: "red" }}>Something went wrong</p>
)}
</div>
<form
onSubmit={(e) => {
e.preventDefault();
sendEmail(e);
}}
id="subscribe-form"
className="form-newsletter style-1 subscribe-form mb_10"
>
<div
id="subscribe-content"
className="subscribe-content"
>
<fieldset className="email">
<input
id="subscribe-email"
type="email"
name="email"
className="subscribe-email style-2"
placeholder="Enter your e-mail"
tabIndex={0}
aria-required="true"
/>
</fieldset>
<div className="button-submit">
<button
id="subscribe-button"
className="subscribe-button tf-btn rounded-12 btn-primary2"
type="submit"
>
<span>Subscribe</span>
<span className="bg-effect" />
</button>
</div>
<div className="icon">
<i className="icon-envelope-solid" />
</div>
</div>
<div id="subscribe-msg" className="subscribe-msg" />
</form>
<p className="description text-body-2">
By subscribing, you accepted the our{" "}
<a href="#" className="link-black text_primary">
Privacy Policy
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="footer-bottom">
<div className="tf-container">
<div className="row">
<div className="col-12">
<div className="wrapper d-flex align-items-center flex-wrap gap_12">
<p className="text-body-2">
© {new Date().getFullYear()} Copyright by{" "}
<a href="#" className="link-black text_primary text-body-3">
Themesflat
</a>{" "}
. All Right Reserved.
</p>
<ul className="right d-flex align-items-center">
<li>
<Link
href={`/`}
className="link text_mono-gray-5 text-body-1"
>
Home
</Link>
</li>
<li>
<Link
href={`/about`}
className="link text_mono-gray-5 text-body-1"
>
About
</Link>
</li>
<li>
<Link
href={`/services`}
className="link text_mono-gray-5 text-body-1"
>
Serivce
</Link>
</li>
<li>
<Link
href={`/blog`}
className="link text_mono-gray-5 text-body-1"
>
Blog
</Link>
</li>
<li>
<Link
href={`/contact-us`}
className="link text_mono-gray-5 text-body-1"
>
Contact
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
);
}

273
components/footers/Footer2.jsx Normal file
View File

@ -0,0 +1,273 @@
"use client";
import React, { useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { services } from "@/data/services";
export default function Footer2() {
useEffect(() => {
const headings = document.querySelectorAll(".footer-heading-mobile");
const toggleOpen = (event) => {
const parent = event.target.closest(".footer-col-block");
const content = parent.querySelector(".tf-collapse-content");
if (parent.classList.contains("open")) {
parent.classList.remove("open");
content.style.height = "0px";
} else {
parent.classList.add("open");
content.style.height = content.scrollHeight + 10 + "px";
}
};
headings.forEach((heading) => {
heading.addEventListener("click", toggleOpen);
});
// Clean up event listeners when the component unmounts
return () => {
headings.forEach((heading) => {
heading.removeEventListener("click", toggleOpen);
});
};
}, []); // Empty dependency array means this will run only once on mount
return (
<footer id="footer" className="footer style-1">
<div className="footer-wrap">
<div className="tf-container">
<div className="footer-body">
<div className="row">
<div className="col-xl-6">
<div className="left">
<div className="content flex-md-row">
<div className="footer-col-block">
<div className="text-body-1 footer-heading text_white footer-heading-mobile">
Services
</div>
<div className="tf-collapse-content">
<ul className="footer-menu-list">
{services.map((service, index) => (
<li
key={index}
className="text-body-3 text_mono-gray-8"
>
<Link
href={`/service-details/${service.id}`}
className="link footer-menu_item"
>
{service.title}
</Link>
</li>
))}
<li className="text-body-3 text_mono-gray-8" />
</ul>
</div>
</div>
<div className="footer-col-block home">
<div className="text-body-1 footer-heading text_white footer-heading-mobile">
Home
</div>
<div className="tf-collapse-content">
<ul className="footer-menu-list">
<li className="text-body-3 text_mono-gray-8">
<Link
href={`/about`}
className="link footer-menu_item"
>
Page
</Link>
</li>
<li className="text-body-3 text_mono-gray-8">
<Link
href={`/blog`}
className="link footer-menu_item"
>
Blog
</Link>
</li>
<li className="text-body-3 text_mono-gray-8">
<Link
href={`/portfolio`}
className="link footer-menu_item"
>
Project
</Link>
</li>
<li className="text-body-3 text_mono-gray-8">
<Link
href={`/contact-us`}
className="link footer-menu_item"
>
Contact
</Link>
</li>
</ul>
</div>
</div>
<div className="footer-col-block contact">
<div className="text-body-1 footer-heading text_white footer-heading-mobile">
Contact
</div>
<div className="tf-collapse-content">
<ul className="footer-menu-list">
<li className="text_mono-gray-6">
<span className="text-body-3 text_mono-gray-8">
Address
</span>
<p className="text-body-3 text_white">
58 Howard, San Francisco CA 411
</p>
</li>
<li className="text_mono-gray-6">
<span className="text-body-3 text_mono-gray-8">
Email
</span>
<a href="#" className="text-body-3 text_white link">
themesflat@gmail.com
</a>
</li>
<li className="text_mono-gray-6">
<span className="text-body-3 text_mono-gray-8">
Fax
</span>
<a href="#" className="text-body-3 text_white link">
themesflat@gmail.com
</a>
</li>
<li className="text_mono-gray-6">
<span className="text-body-3 text_mono-gray-8">
Work Hour
</span>
<p className="text-body-3 text_white">
Mon - Sat: 9:00 - 18:00
</p>
</li>
</ul>
</div>
</div>
</div>
<div className="footer-logo mb-0">
<Image
alt="logo"
src="/images/logo/footer-logo-2.1.png"
width={160}
height={40}
/>
</div>
</div>
</div>
<div className="col-xl-6">
<div className="right">
<div className="content">
<h5 className="text_mono-dark-9 mb_11">
We’re here to help
</h5>
<p className="text_mono-gray-7 mb_25 text-body-3">
Have questions or need guidance? Our team is always
available to provide the support and expertise you need to
move forward with confidence.
</p>
<form
onSubmit={(e) => e.preventDefault()}
className="form-help d-grid gap_24"
>
<fieldset>
<input
className="rounded-0"
type="text"
placeholder="Name"
required
/>
</fieldset>
<fieldset>
<input
className="rounded-0"
type="email"
placeholder="Email address"
required
/>
</fieldset>
<fieldset className="mb_8">
<textarea
className="message rounded-0"
placeholder="Write something for us"
defaultValue={""}
/>
</fieldset>
<button
type="submit"
className="tf-btn btn-dark height-2 rounded-0 w-full"
>
<span>Get started</span>
<span className="bg-effect" />
</button>
</form>
</div>
<div className="image hide-sm">
<Image
className="lazyload"
data-src="/images/section/banner-form-help.jpg"
alt="banner"
src="/images/section/banner-form-help.jpg"
width={406}
height={611}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="footer-bottom">
<div className="tf-container">
<div className="row">
<div className="col-12">
<div className="wrapper d-flex align-items-center flex-wrap gap_12">
<p className="text-body-3 text_mono-gray-5">
© {new Date().getFullYear()}{" "}
<a href="#" className="link text_mono-gray-5 text-body-3">
Themesflat
</a>{" "}
. All Right Reserved.
</p>
<ul className="right d-flex align-items-center">
<li>
<Link
href={`/pricing`}
className="link text_mono-gray-5 text-body-3"
>
Privacy Policy
</Link>
</li>
<li>
<Link
href={`/service-details/1`}
className="link text_mono-gray-5 text-body-3"
>
Terms of Services
</Link>
</li>
<li>
<a href="#" className="link text_mono-gray-5 text-body-3">
Virtual Reality
</a>
</li>
</ul>
<ul className="social d-flex gap_12 align-items-center">
<li>
<a href="#" className="icon-twitter text_white link" />
</li>
<li>
<a href="#" className="icon-facebook-f text_white link" />
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
);
}

315
components/footers/Footer3.jsx Normal file
View File

@ -0,0 +1,315 @@
"use client";
import React, { useEffect, useState } from "react";
import axios from "axios";
import Link from "next/link";
import Image from "next/image";
export default function Footer3() {
const [success, setSuccess] = useState(true);
const [showMessage, setShowMessage] = useState(false);
const handleShowMessage = () => {
setShowMessage(true);
setTimeout(() => {
setShowMessage(false);
}, 2000);
};
const sendEmail = async (e) => {
e.preventDefault(); // Prevent default form submission behavior
const email = e.target.email.value;
try {
const response = await axios.post(
"https://express-brevomail.vercel.app/api/contacts",
{
email,
}
);
if ([200, 201].includes(response.status)) {
e.target.reset(); // Reset the form
setSuccess(true); // Set success state
handleShowMessage();
} else {
setSuccess(false); // Handle unexpected responses
handleShowMessage();
}
} catch (error) {
console.error("Error:", error.response?.data || "An error occurred");
setSuccess(false); // Set error state
handleShowMessage();
e.target.reset(); // Reset the form
}
};
useEffect(() => {
const headings = document.querySelectorAll(".footer-heading-mobile");
const toggleOpen = (event) => {
const parent = event.target.closest(".footer-col-block");
const content = parent.querySelector(".tf-collapse-content");
if (parent.classList.contains("open")) {
parent.classList.remove("open");
content.style.height = "0px";
} else {
parent.classList.add("open");
content.style.height = content.scrollHeight + 10 + "px";
}
};
headings.forEach((heading) => {
heading.addEventListener("click", toggleOpen);
});
// Clean up event listeners when the component unmounts
return () => {
headings.forEach((heading) => {
heading.removeEventListener("click", toggleOpen);
});
};
}, []); // Empty dependency array means this will run only once on mount
return (
<footer id="footer" className="footer style-2">
<div className="footer-wrap">
<div className="tf-container">
<div className="footer-body">
<div className="row">
<div className="col-lg-4">
<div className="footer-about">
<Link href={`/`} className="footer-logo">
<Image
alt="logo"
src="/images/logo/footer-logo-3.png"
width={390}
height={80}
/>
</Link>
<div className="footer-info mb_51">
<a href="#" className="link text-body-2 text_dark">
themesflat@gmail.com
</a>
<div className="text-body-2 text_dark">
152 Thatcher Road St, Mahattan, NY 10463,
<br />
United States
</div>
<div className="text-body-2 text_dark">(+068) 568 9696</div>
</div>
<div className="tf-social">
<a href="#" className="icon-twitter-x" />
<a href="#" className="icon-facebook-f" />
<a href="#" className="icon-github" />
<a href="#" className="icon-instagram" />
<a href="#" className="icon-youtube" />
</div>
</div>
</div>
<div className="col-lg-2 col-md-6">
<div className="footer-col-block">
<h6 className="footer-heading footer-heading-mobile text_dark fw-6">
Company
</h6>
<div className="tf-collapse-content">
<ul className="footer-menu-list">
<li className="text-body-2 text_mono-gray-5">
<Link href={`/#`} className="link footer-menu_item">
About Advitex
</Link>
</li>
<li className="text-body-2 text_mono-gray-5">
<Link
href={`/contact-us`}
className="link footer-menu_item"
>
Contact us
</Link>
</li>
<li className="text-body-2 text_mono-gray-5">
<Link
href={`/#`}
className="link footer-menu_item"
>
Portfolio
</Link>
</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
href={`/#`}
className="link footer-menu_item"
>
Career
</Link>
</li>
<li className="text-body-2 text_mono-gray-5">
<Link href={`/#`} className="link footer-menu_item">
Our Team
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-2 col-md-6">
<div>
<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 className="col-lg-4">
<div className="footer-newsletter">
<h6 className="footer-heading text_dark fw-6">
Sign Up for Email
</h6>
<div className="tf-collapse-content">
<div className="wrap-newsletter">
<p className="text-body-2 text_mono-gray-5 mb_17">
Sign up to get first dibs on new arrivals, sales
<br />
exclusive content, events and more!
</p>
<div
className={`tfSubscribeMsg footer-sub-element ${
showMessage ? "active" : ""
}`}
>
{success ? (
<p style={{ color: "rgb(52, 168, 83)" }}>
You have successfully subscribed.
</p>
) : (
<p style={{ color: "red" }}>Something went wrong</p>
)}
</div>
<form
onSubmit={(e) => {
e.preventDefault();
sendEmail(e);
}}
id="subscribe-form"
className="form-newsletter style-1 subscribe-form mb_18"
>
<div
id="subscribe-content"
className="subscribe-content"
>
<fieldset className="email">
<input
id="subscribe-email"
type="email"
name="email"
className="subscribe-email style-2"
placeholder="Enter your e-mail"
tabIndex={0}
aria-required="true"
/>
</fieldset>
<div className="button-submit">
<button
id="subscribe-button"
className="subscribe-button tf-btn btn-dark"
type="submit"
>
<span>Subscribe</span>
<span className="bg-effect" />
</button>
</div>
<div className="icon">
<i className="icon-envelope-solid" />
</div>
</div>
<div id="subscribe-msg" className="subscribe-msg" />
</form>
<p className="description text-body-2 text_dark">
By subscribing, you accepted the our{" "}
<a href="#" className="link text_dark">
Privacy Policy
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="footer-bottom">
<div className="tf-container">
<div className="row">
<div className="col-12">
<div className="wrapper d-flex align-items-center flex-wrap gap_12">
<p className="text-body-2">
© {new Date().getFullYear()} Copyright by{" "}
<a href="#" className="link-black text_primary text-body-3">
Themesflat
</a>{" "}
. All Right Reserved.
</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>
</footer>
);
}

338
components/footers/Footer4.jsx Normal file
View File

@ -0,0 +1,338 @@
"use client";
import React, { useEffect, useState } from "react";
import axios from "axios";
import Link from "next/link";
import Image from "next/image";
export default function Footer4() {
const [success, setSuccess] = useState(true);
const [showMessage, setShowMessage] = useState(false);
const handleShowMessage = () => {
setShowMessage(true);
setTimeout(() => {
setShowMessage(false);
}, 2000);
};
const sendEmail = async (e) => {
e.preventDefault(); // Prevent default form submission behavior
const email = e.target.email.value;
try {
const response = await axios.post(
"https://express-brevomail.vercel.app/api/contacts",
{
email,
}
);
if ([200, 201].includes(response.status)) {
e.target.reset(); // Reset the form
setSuccess(true); // Set success state
handleShowMessage();
} else {
setSuccess(false); // Handle unexpected responses
handleShowMessage();
}
} catch (error) {
console.error("Error:", error.response?.data || "An error occurred");
setSuccess(false); // Set error state
handleShowMessage();
e.target.reset(); // Reset the form
}
};
useEffect(() => {
const headings = document.querySelectorAll(".footer-heading-mobile");
const toggleOpen = (event) => {
const parent = event.target.closest(".footer-col-block");
const content = parent.querySelector(".tf-collapse-content");
if (parent.classList.contains("open")) {
parent.classList.remove("open");
content.style.height = "0px";
} else {
parent.classList.add("open");
content.style.height = content.scrollHeight + 10 + "px";
}
};
headings.forEach((heading) => {
heading.addEventListener("click", toggleOpen);
});
// Clean up event listeners when the component unmounts
return () => {
headings.forEach((heading) => {
heading.removeEventListener("click", toggleOpen);
});
};
}, []); // Empty dependency array means this will run only once on mount
return (
<footer id="footer" className="footer style-3">
<div className="footer-wrap">
<div className="tf-container">
<div className="footer-body">
<div className="row">
<div className="col-lg-4">
<div className="footer-about">
<Link href={`/`} className="footer-logo">
<Image
alt="logo"
src="/images/logo/footer-logo-2.png"
width={390}
height={80}
/>
</Link>
<div className="footer-info mb_51">
<a href="#" className="link text-body-2 text_white">
themesflat@gmail.com
</a>
<div className="text-body-2 text_white">
152 Thatcher Road St, Mahattan, NY 10463,
<br />
United States
</div>
<div className="text-body-2 text_white">
(+068) 568 9696
</div>
</div>
<div className="tf-social">
<a href="#" className="icon-twitter-x" />
<a href="#" className="icon-facebook-f" />
<a href="#" className="icon-github" />
<a href="#" className="icon-instagram" />
<a href="#" className="icon-youtube" />
</div>
</div>
</div>
<div className="col-lg-2 col-md-6">
<div className="footer-col-block">
<h6 className="footer-heading footer-heading-mobile text_white">
Company
</h6>
<div className="tf-collapse-content">
<ul className="footer-menu-list">
<li className="text-body-2 text_mono-gray-4">
<Link href={`/about`} className="link footer-menu_item">
About Advitex
</Link>
</li>
<li className="text-body-2 text_mono-gray-4">
<Link
href={`/contact-us`}
className="link footer-menu_item"
>
Contact us
</Link>
</li>
<li className="text-body-2 text_mono-gray-4">
<Link
href={`/portfolio`}
className="link footer-menu_item"
>
Portfolio
</Link>
</li>
<li className="text-body-2 text_mono-gray-4">
<Link href={`/faqs`} className="link footer-menu_item">
How We Work
</Link>
</li>
<li className="text-body-2 text_mono-gray-4">
<Link
href={`/career`}
className="link footer-menu_item"
>
Career
</Link>
</li>
<li className="text-body-2 text_mono-gray-4">
<Link href={`/team`} className="link footer-menu_item">
Our Team
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-2 col-md-6">
<div>
<div className="footer-col-block">
<h6 className="footer-heading footer-heading-mobile text_white">
Links
</h6>
<div className="tf-collapse-content">
<ul className="footer-menu-list">
<li className="text-body-2 text_mono-gray-4">
<Link
href={`/contact-us`}
className="link footer-menu_item"
>
Help Center
</Link>
</li>
<li className="text-body-2 text_mono-gray-4">
<Link
href={`/pricing`}
className="link footer-menu_item"
>
Privacy Policy
</Link>
</li>
<li className="text-body-2 text_mono-gray-4">
<a href="#" className="link footer-menu_item">
Term &amp; Conditon
</a>
</li>
<li className="text-body-2 text_mono-gray-4">
<Link
href={`/FAQs`}
className="link footer-menu_item"
>
FAQs
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="col-lg-4">
<div className="footer-newsletter">
<h6 className="footer-heading text_white">
Subscribe Our Newseltter
</h6>
<div className="tf-collapse-content">
<div className="wrap-newsletter">
<p className="text-body-2 text_mono-gray-4 mb_29">
Sign up to get first dibs on new arrivals, sales
exclusive content, events and more!
</p>
<div
className={`tfSubscribeMsg footer-sub-element ${
showMessage ? "active" : ""
}`}
>
{success ? (
<p style={{ color: "rgb(52, 168, 83)" }}>
You have successfully subscribed.
</p>
) : (
<p style={{ color: "red" }}>Something went wrong</p>
)}
</div>
<form
onSubmit={(e) => {
e.preventDefault();
sendEmail(e);
}}
id="subscribe-form"
className="form-newsletter style-1 subscribe-form mb_10"
>
<div
id="subscribe-content"
className="subscribe-content"
>
<fieldset className="email">
<input
id="subscribe-email"
type="email"
name="email"
className="subscribe-email style-2"
placeholder="Enter your e-mail"
tabIndex={0}
aria-required="true"
/>
</fieldset>
<div className="button-submit">
<button
id="subscribe-button"
className="subscribe-button tf-btn rounded-12"
type="submit"
>
<span>Subscribe</span>
<span className="bg-effect" />
</button>
</div>
<div className="icon">
<i className="icon-envelope-solid" />
</div>
</div>
<div id="subscribe-msg" className="subscribe-msg" />
</form>
<p className="description text-body-2 text_white">
By subscribing, you accepted the our{" "}
<a href="#" className="link-white text_primary">
Privacy Policy
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="footer-bottom">
<div className="tf-container">
<div className="row">
<div className="col-12">
<div className="wrapper d-flex align-items-center flex-wrap gap_12">
<p className="text-body-2 text_mono-gray-4">
© {new Date().getFullYear()} Copyright by{" "}
<a href="#" className="link text_white text-body-3">
Themesflat
</a>{" "}
. All Right Reserved.
</p>
<ul className="right d-flex align-items-center">
<li>
<Link
href={`/`}
className="link-white text_mono-gray-5 text-body-1"
>
Home
</Link>
</li>
<li>
<Link
href={`/about`}
className="link-white text_mono-gray-5 text-body-1"
>
About
</Link>
</li>
<li>
<Link
href={`/services`}
className="link-white text_mono-gray-5 text-body-1"
>
Serivce
</Link>
</li>
<li>
<Link
href={`/blog`}
className="link-white text_mono-gray-5 text-body-1"
>
Blog
</Link>
</li>
<li>
<Link
href={`/contact-us`}
className="link-white text_mono-gray-5 text-body-1"
>
Contact
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
);
}

311
components/footers/Footer5.jsx Normal file
View File

@ -0,0 +1,311 @@
"use client";
import React, { useEffect, useState } from "react";
import axios from "axios";
import Link from "next/link";
import Image from "next/image";
import { services } from "@/data/services";
export default function Footer5() {
const [success, setSuccess] = useState(true);
const [showMessage, setShowMessage] = useState(false);
const handleShowMessage = () => {
setShowMessage(true);
setTimeout(() => {
setShowMessage(false);
}, 2000);
};
const sendEmail = async (e) => {
e.preventDefault(); // Prevent default form submission behavior
const email = e.target.email.value;
try {
const response = await axios.post(
"https://express-brevomail.vercel.app/api/contacts",
{
email,
}
);
if ([200, 201].includes(response.status)) {
e.target.reset(); // Reset the form
setSuccess(true); // Set success state
handleShowMessage();
} else {
setSuccess(false); // Handle unexpected responses
handleShowMessage();
}
} catch (error) {
console.error("Error:", error.response?.data || "An error occurred");
setSuccess(false); // Set error state
handleShowMessage();
e.target.reset(); // Reset the form
}
};
useEffect(() => {
const headings = document.querySelectorAll(".footer-heading-mobile");
const toggleOpen = (event) => {
const parent = event.target.closest(".footer-col-block");
const content = parent.querySelector(".tf-collapse-content");
if (parent.classList.contains("open")) {
parent.classList.remove("open");
content.style.height = "0px";
} else {
parent.classList.add("open");
content.style.height = content.scrollHeight + 10 + "px";
}
};
headings.forEach((heading) => {
heading.addEventListener("click", toggleOpen);
});
// Clean up event listeners when the component unmounts
return () => {
headings.forEach((heading) => {
heading.removeEventListener("click", toggleOpen);
});
};
}, []); // Empty dependency array means this will run only once on mount
return (
<footer id="footer" className="footer style-4">
<div className="footer-wrap">
<div className="tf-container">
<div className="row justify-content-center">
<div className="col-xl-10">
<div className="footer-top">
<div className="footer-newsletter">
<h6 className="footer-heading text_white fw-5">
Our Newsletter
</h6>
<div className="tf-collapse-content">
<div className="wrap-newsletter">
<div
className={`tfSubscribeMsg footer-sub-element ${
showMessage ? "active" : ""
}`}
>
{success ? (
<p style={{ color: "rgb(52, 168, 83)" }}>
You have successfully subscribed.
</p>
) : (
<p style={{ color: "red" }}>Something went wrong</p>
)}
</div>
<form
onSubmit={(e) => {
e.preventDefault();
sendEmail(e);
}}
id="subscribe-form"
className="form-newsletter style-1 subscribe-form"
>
<div
id="subscribe-content"
className="subscribe-content"
>
<fieldset className="email">
<input
id="subscribe-email"
type="email"
name="email"
className="subscribe-email style-2"
placeholder="Enter your e-mail"
tabIndex={0}
aria-required="true"
/>
</fieldset>
<div className="button-submit">
<button
id="subscribe-button"
className="subscribe-button tf-btn"
type="submit"
>
<span>Subcribe Now</span>
<span className="bg-effect" />
</button>
</div>
<div className="icon">
<i className="icon-envelope-solid" />
</div>
</div>
<div id="subscribe-msg" className="subscribe-msg" />
</form>
</div>
</div>
</div>
<div className="wrap-social">
<h6 className="footer-heading text_white text_white fw-5">
Our Social
</h6>
<div className="tf-social">
<a href="#" className="icon-twitter-x" />
<a href="#" className="icon-instagram" />
<a href="#" className="icon-youtube" />
</div>
</div>
</div>
<div className="footer-body">
<div className="left flex-md-row">
<div className="footer-col-block">
<div className="text-body-1 footer-heading footer-heading-mobile text_white fw-5">
Services
</div>
<div className="tf-collapse-content">
<ul className="footer-menu-list">
{services.map((service, index) => (
<li
key={index}
className="text-body-3 text_mono-gray-8"
>
<Link
href={`/service-details/${service.id}`}
className="link footer-menu_item"
>
{service.title}
</Link>
</li>
))}
</ul>
</div>
</div>
<div className="footer-col-block">
<div className="text-body-1 footer-heading footer-heading-mobile text_white fw-5">
Home
</div>
<div className="tf-collapse-content">
<ul className="footer-menu-list">
<li className="text-body-3 text_mono-gray-8">
<Link
href={`/about`}
className="link footer-menu_item"
>
Page
</Link>
</li>
<li className="text-body-3 text_mono-gray-8">
<Link
href={`/contact-us`}
className="link footer-menu_item"
>
Blog
</Link>
</li>
<li className="text-body-3 text_mono-gray-8">
<Link
href={`/portfolio`}
className="link footer-menu_item"
>
Project
</Link>
</li>
<li className="text-body-3 text_mono-gray-8">
<Link
href={`/faqs`}
className="link footer-menu_item"
>
Contact
</Link>
</li>
</ul>
</div>
</div>
<div className="footer-col-block">
<div className="text-body-1 footer-heading footer-heading-mobile text_white fw-5">
Resources
</div>
<div className="tf-collapse-content">
<ul className="footer-menu-list">
<li className="text-body-3 text_mono-gray-8">
<Link
href={`/about`}
className="link footer-menu_item"
>
About Advitex
</Link>
</li>
<li className="text-body-3 text_mono-gray-8">
<Link
href={`/blog`}
className="link footer-menu_item"
>
Blog
</Link>
</li>
<li className="text-body-3 text_mono-gray-8">
<Link
href={`/faqs`}
className="link footer-menu_item"
>
FAQs
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="right">
<div className="footer-about">
<div className="footer-info mb_51">
<a href="#" className="link text-body-2 text_white">
themesflat@gmail.com
</a>
<div className="text-body-2 text_white">
152 Thatcher Road St, Mahattan, NY 10463, <br />
United States
</div>
<div className="text-body-2 text_white">
(+068) 568 9696
</div>
</div>
</div>
</div>
</div>
<div className="footer-bottom">
<div className="wrapper d-flex align-items-end flex-wrap gap_12">
<ul className="left d-flex align-items-center">
<li>
<Link
href={`/pricing`}
className="link text_mono-gray-5 text-body-3"
>
Privacy Policy
</Link>
</li>
<li>
<a href="#" className="link text_mono-gray-5 text-body-3">
Terms of Services
</a>
</li>
<li>
<a href="#" className="link text_mono-gray-5 text-body-3">
Virtual Reality
</a>
</li>
</ul>
<div className="footer-logo mb-0">
<Image
alt="logo"
src="/images/logo/footer-logo-4.png"
width={512}
height={128}
/>
</div>
</div>
<p className="text-body-3 text-center text_mono-gray-5">
© {new Date().getFullYear()} Copyright by{" "}
<a href="#" className="link text_mono-gray-5 text-body-3">
Themesflat
</a>{" "}
. All Right Reserved.
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
);
}

89
components/headers/Header1.jsx Normal file
View File

@ -0,0 +1,89 @@
"use client";
import React from "react";
import Link from "next/link";
import Image from "next/image";
import Nav from "./Nav";
import SearchPopup from "./SearchPopup";
export default function Header1({ parentClass = "header style-default" }) {
return (
<header className={parentClass}>
<div className="header-inner">
<div className="tf-container">
<div className="row">
<div className="col-12">
<div className="header-inner-wrap">
<div className="header-left d-flex align-items-center">
<div className="header-logo">
<Link href={`/`} className="site-logo">
<svg
width={149}
height={46}
viewBox="0 0 149 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.625"
y="0.625"
width="147.75"
height="44.75"
rx="22.375"
fill="white"
/>
<rect
x="0.625"
y="0.625"
width="147.75"
height="44.75"
rx="22.375"
stroke="white"
strokeWidth="1.25"
/>
<path
d="M32.3775 20.311L39.7515 32.7325C39.8499 32.8983 40.0285 33 40.2214 33L47.6138 33C47.8054 33 47.983 32.8997 48.0819 32.7356L52 26.2351L44.3144 26.2245C44.123 26.2242 43.9458 26.1239 43.847 25.9599L36.2013 13.2645C36.1024 13.1004 35.9248 13 35.7332 13L28.3861 13C28.1948 13 28.0174 13.1 27.9184 13.2638L23.9821 19.776L20.1708 26.052C20.0657 26.2251 20.0649 26.4421 20.1688 26.6159L23.823 32.7338C23.9217 32.8989 24.0998 33 24.2922 33L30.9792 33C31.4043 33 31.6666 32.5358 31.4473 32.1716L23.9821 19.776L31.4378 19.776C31.8235 19.776 32.1806 19.9793 32.3775 20.311Z"
fill="#0075FF"
/>
<path
d="M60.56 30L65.7 16H67.88L73 30H70.88L66.78 18.4L62.64 30H60.56ZM62.88 26.54L63.44 24.94H70.02L70.56 26.54H62.88ZM78.4873 30.24C77.5273 30.24 76.674 30.0133 75.9273 29.56C75.194 29.1067 74.6207 28.4867 74.2073 27.7C73.8073 26.9 73.6073 26 73.6073 25C73.6073 23.9867 73.8073 23.0867 74.2073 22.3C74.6207 21.5133 75.2007 20.9 75.9473 20.46C76.694 20.0067 77.5473 19.78 78.5073 19.78C79.294 19.78 79.9873 19.94 80.5873 20.26C81.2007 20.5667 81.674 21 82.0073 21.56V15.6H84.0073V30H82.2073L82.0073 28.44C81.794 28.7467 81.5273 29.04 81.2073 29.32C80.8873 29.5867 80.5007 29.8067 80.0473 29.98C79.594 30.1533 79.074 30.24 78.4873 30.24ZM78.8073 28.5C79.434 28.5 79.9873 28.3533 80.4673 28.06C80.9473 27.7667 81.3207 27.36 81.5873 26.84C81.854 26.3067 81.9873 25.6933 81.9873 25C81.9873 24.3067 81.854 23.7 81.5873 23.18C81.3207 22.66 80.9473 22.2533 80.4673 21.96C79.9873 21.6667 79.434 21.52 78.8073 21.52C78.194 21.52 77.6473 21.6667 77.1673 21.96C76.6873 22.2533 76.314 22.66 76.0473 23.18C75.7807 23.7 75.6473 24.3067 75.6473 25C75.6473 25.6933 75.7807 26.3067 76.0473 26.84C76.314 27.36 76.6873 27.7667 77.1673 28.06C77.6473 28.3533 78.194 28.5 78.8073 28.5ZM89.1417 30L85.3817 20.02H87.4817L90.3217 28.08L93.1817 20.02H95.2417L91.5017 30H89.1417ZM96.7648 30V20.02H98.7648V30H96.7648ZM97.7648 18.08C97.3915 18.08 97.0782 17.96 96.8248 17.72C96.5715 17.48 96.4448 17.1733 96.4448 16.8C96.4448 16.44 96.5715 16.1467 96.8248 15.92C97.0782 15.68 97.3915 15.56 97.7648 15.56C98.1382 15.56 98.4515 15.68 98.7048 15.92C98.9582 16.1467 99.0848 16.44 99.0848 16.8C99.0848 17.1733 98.9582 17.48 98.7048 17.72C98.4515 17.96 98.1382 18.08 97.7648 18.08ZM105.345 30C104.705 30 104.152 29.9 103.685 29.7C103.218 29.5 102.858 29.1667 102.605 28.7C102.352 28.2333 102.225 27.6 102.225 26.8V21.7H100.505V20.02H102.225L102.485 17.52H104.225V20.02H107.065V21.7H104.225V26.82C104.225 27.3933 104.345 27.7867 104.585 28C104.825 28.2 105.238 28.3 105.825 28.3H106.965V30H105.345ZM113.159 30.24C112.185 30.24 111.325 30.0267 110.579 29.6C109.832 29.16 109.245 28.5533 108.819 27.78C108.405 26.9933 108.199 26.08 108.199 25.04C108.199 23.9867 108.405 23.0667 108.819 22.28C109.232 21.4933 109.812 20.88 110.559 20.44C111.319 20 112.192 19.78 113.179 19.78C114.165 19.78 115.012 20 115.719 20.44C116.439 20.8667 116.985 21.44 117.359 22.16C117.745 22.88 117.939 23.6733 117.939 24.54C117.939 24.6733 117.939 24.82 117.939 24.98C117.939 25.1267 117.932 25.2933 117.919 25.48H109.659V24.06H115.959C115.919 23.2467 115.639 22.6067 115.119 22.14C114.599 21.6733 113.945 21.44 113.159 21.44C112.625 21.44 112.125 21.56 111.659 21.8C111.205 22.04 110.839 22.3933 110.559 22.86C110.292 23.3267 110.159 23.9133 110.159 24.62V25.2C110.159 25.9333 110.292 26.5533 110.559 27.06C110.839 27.5533 111.205 27.9333 111.659 28.2C112.112 28.4533 112.605 28.58 113.139 28.58C113.779 28.58 114.305 28.44 114.719 28.16C115.145 27.8667 115.459 27.48 115.659 27H117.659C117.485 27.6133 117.192 28.1667 116.779 28.66C116.365 29.14 115.852 29.5267 115.239 29.82C114.639 30.1 113.945 30.24 113.159 30.24ZM118.234 30L121.734 25L118.234 20.02H120.394L123.054 23.92L125.734 20.02H127.894L124.394 25L127.894 30H125.734L123.054 26.1L120.394 30H118.234Z"
fill="black"
/>
</svg>
</Link>
</div>
<nav className="main-menu style-default">
<ul className="navigation">
<Nav />
</ul>
</nav>
</div>
<div className="header-right d-flex align-items-center">
<SearchPopup />
<Link href={`/pricing`} className="tf-btn btn-white hide-sm">
<span>Get Started</span>
<span className="bg-effect" />
</Link>
<Link href={`/contact-us`} className="tf-btn hide-sm">
<span>Contact Us</span>
<span className="bg-effect" />
</Link>
<div
className="mobile-button"
data-bs-toggle="offcanvas"
data-bs-target="#menu-mobile"
aria-controls="menu-mobile"
>
<div className="burger">
<span />
<span />
<span />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
);
}

79
components/headers/Header2.jsx Normal file
View File

@ -0,0 +1,79 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
import Nav from "./Nav";
export default function Header2() {
return (
<header id="header-main" className="header style-1">
<div className="header-inner">
<div className="tf-container">
<div className="row">
<div className="col-12">
<div className="header-inner-wrap">
<div className="header-left d-flex align-items-center">
<div className="header-logo">
<Link href={`/finance-consulting`} className="site-logo">
<svg
width={140}
height={40}
viewBox="0 0 140 40"
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="#1C3F3A"
/>
<path
d="M58.22 28.5L64.412 11.7H66.548L72.716 28.5H70.58L65.468 14.22L60.332 28.5H58.22ZM61.052 24.18L61.628 22.548H69.236L69.812 24.18H61.052ZM79.5733 28.788C78.4053 28.788 77.3733 28.516 76.4773 27.972C75.5973 27.412 74.9173 26.652 74.4373 25.692C73.9573 24.732 73.7173 23.644 73.7173 22.428C73.7173 21.212 73.9573 20.132 74.4373 19.188C74.9173 18.228 75.5973 17.476 76.4773 16.932C77.3733 16.388 78.4133 16.116 79.5973 16.116C80.5733 16.116 81.4293 16.316 82.1653 16.716C82.9173 17.116 83.5013 17.676 83.9173 18.396V11.22H85.9333V28.5H84.1093L83.9173 26.508C83.6613 26.908 83.3333 27.284 82.9333 27.636C82.5333 27.972 82.0533 28.252 81.4933 28.476C80.9493 28.684 80.3093 28.788 79.5733 28.788ZM79.7893 27.036C80.5893 27.036 81.2933 26.844 81.9013 26.46C82.5093 26.076 82.9813 25.548 83.3173 24.876C83.6693 24.188 83.8453 23.38 83.8453 22.452C83.8453 21.54 83.6693 20.74 83.3173 20.052C82.9813 19.364 82.5093 18.828 81.9013 18.444C81.2933 18.06 80.5893 17.868 79.7893 17.868C79.0213 17.868 78.3253 18.06 77.7013 18.444C77.0933 18.828 76.6213 19.364 76.2853 20.052C75.9493 20.74 75.7813 21.54 75.7813 22.452C75.7813 23.38 75.9493 24.188 76.2853 24.876C76.6213 25.548 77.0933 26.076 77.7013 26.46C78.3253 26.844 79.0213 27.036 79.7893 27.036ZM92.5081 28.5L87.9241 16.404H90.0361L93.6841 26.556L97.3561 16.404H99.4201L94.8361 28.5H92.5081ZM101.636 28.5V16.404H103.652V28.5H101.636ZM102.644 13.836C102.244 13.836 101.908 13.708 101.636 13.452C101.38 13.18 101.252 12.844 101.252 12.444C101.252 12.044 101.38 11.724 101.636 11.484C101.908 11.228 102.244 11.1 102.644 11.1C103.028 11.1 103.356 11.228 103.628 11.484C103.9 11.724 104.036 12.044 104.036 12.444C104.036 12.844 103.9 13.18 103.628 13.452C103.356 13.708 103.028 13.836 102.644 13.836ZM111.722 28.5C111.002 28.5 110.378 28.388 109.85 28.164C109.322 27.94 108.914 27.564 108.626 27.036C108.354 26.492 108.218 25.764 108.218 24.852V18.108H106.106V16.404H108.218L108.482 13.476H110.234V16.404H113.738V18.108H110.234V24.852C110.234 25.604 110.386 26.116 110.69 26.388C110.994 26.644 111.53 26.772 112.298 26.772H113.594V28.5H111.722ZM121.104 28.788C119.984 28.788 118.984 28.524 118.104 27.996C117.224 27.468 116.536 26.732 116.04 25.788C115.544 24.828 115.296 23.716 115.296 22.452C115.296 21.172 115.536 20.06 116.016 19.116C116.512 18.172 117.2 17.436 118.08 16.908C118.976 16.38 120 16.116 121.152 16.116C122.336 16.116 123.344 16.38 124.176 16.908C125.008 17.436 125.64 18.132 126.072 18.996C126.52 19.844 126.744 20.78 126.744 21.804C126.744 21.964 126.744 22.132 126.744 22.308C126.744 22.484 126.736 22.684 126.72 22.908H116.808V21.348H124.752C124.704 20.244 124.336 19.38 123.648 18.756C122.976 18.132 122.128 17.82 121.104 17.82C120.432 17.82 119.8 17.98 119.208 18.3C118.616 18.604 118.144 19.06 117.792 19.668C117.44 20.26 117.264 21.004 117.264 21.9V22.572C117.264 23.564 117.44 24.396 117.792 25.068C118.16 25.74 118.632 26.244 119.208 26.58C119.8 26.916 120.432 27.084 121.104 27.084C121.952 27.084 122.648 26.9 123.192 26.532C123.752 26.148 124.16 25.628 124.416 24.972H126.408C126.2 25.708 125.856 26.364 125.376 26.94C124.896 27.5 124.296 27.948 123.576 28.284C122.872 28.62 122.048 28.788 121.104 28.788ZM127.438 28.5L131.542 22.452L127.438 16.404H129.646L132.91 21.348L136.222 16.404H138.382L134.278 22.452L138.382 28.5H136.222L132.91 23.532L129.646 28.5H127.438Z"
fill="#121416"
/>
</svg>
</Link>
</div>
<nav className="main-menu style-1">
<ul className="navigation">
<Nav />
</ul>
</nav>
</div>
<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: (234) 109-6666
</div>
<Link
href={`/pricing`}
className="tf-btn btn-border hide-sm h36 rounded-0"
>
<span className="text-caption-3">Get Started</span>
<span className="bg-effect" />
</Link>
<Link
href={`/contact-us`}
className="tf-btn hide-sm btn-dark h36 rounded-0"
>
<span className="text-caption-3">Contact Us</span>
<span className="bg-effect" />
</Link>
<div
className="mobile-button"
data-bs-toggle="offcanvas"
data-bs-target="#menu-mobile"
aria-controls="menu-mobile"
>
<div className="burger">
<span />
<span />
<span />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
);
}

68
components/headers/Header3.jsx Normal file
View File

@ -0,0 +1,68 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
import Nav from "./Nav";
export default function Header3() {
return (
<header id="header-main" className="header style-2">
<div className="header-inner">
<div className="tf-container">
<div className="row">
<div className="col-12">
<div className="header-inner-wrap">
<div className="header-left d-flex align-items-center">
<div className="header-logo">
<Link href={`/finance-advisor`} className="site-logo">
<svg
width={111}
height={32}
viewBox="0 0 111 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.5746 12.5626L23.516 27.7831C23.5949 27.9174 23.7393 27.9995 23.895 27.9988L32.9117 27.9571C33.0646 27.9564 33.206 27.8759 33.2846 27.7448L38 19.8822L28.7552 19.8692C28.6014 19.869 28.459 19.788 28.3803 19.6558L19.177 4.21336C19.0982 4.08105 18.9555 4 18.8015 4L9.84039 4C9.68662 4 9.54416 4.08079 9.46523 4.21275L4.72869 12.1311L0.134205 19.7767C0.0515211 19.9143 0.0508955 20.0861 0.132576 20.2243L4.60178 27.7853C4.68044 27.9184 4.82352 28 4.97811 28L13.4166 28C13.7559 28 13.9658 27.6304 13.7922 27.339L4.72869 12.1311L13.8208 12.1311C14.1308 12.1311 14.4176 12.2953 14.5746 12.5626Z"
fill="white"
/>
<path
d="M47.8108 22L52.4956 8.56H54.7996L59.4076 22H57.6988L53.6668 9.9616H53.6092L49.5004 22H47.8108ZM50.0764 17.9872L50.5372 16.6816H56.6236L57.0844 17.9872H50.0764ZM64.5202 22.2304C63.5858 22.2304 62.7794 22.0128 62.101 21.5776C61.4226 21.1296 60.8978 20.528 60.5266 19.7728C60.1554 19.0176 59.9698 18.1728 59.9698 17.2384C59.9698 16.2912 60.1554 15.44 60.5266 14.6848C60.8978 13.9296 61.4354 13.3344 62.1394 12.8992C62.8434 12.464 63.6882 12.2464 64.6738 12.2464C65.5314 12.2464 66.2482 12.4256 66.8242 12.784C67.413 13.1424 67.861 13.5648 68.1682 14.0512V8.464H69.781V22H68.4178L68.2642 20.2336H68.2066C67.9506 20.656 67.637 21.0144 67.2658 21.3088C66.8946 21.6032 66.4786 21.8336 66.0178 22C65.557 22.1536 65.0578 22.2304 64.5202 22.2304ZM64.8466 20.8288C65.5122 20.8288 66.0882 20.6816 66.5746 20.3872C67.0738 20.08 67.4578 19.6576 67.7266 19.12C67.9954 18.5824 68.1298 17.9552 68.1298 17.2384C68.1298 16.5216 67.9954 15.8944 67.7266 15.3568C67.4578 14.8192 67.0738 14.4032 66.5746 14.1088C66.0882 13.8016 65.5122 13.648 64.8466 13.648C64.1938 13.648 63.6242 13.8016 63.1378 14.1088C62.6514 14.4032 62.2738 14.8192 62.005 15.3568C61.7362 15.8944 61.6018 16.5216 61.6018 17.2384C61.6018 17.9552 61.7362 18.5824 62.005 19.12C62.2738 19.6576 62.6514 20.08 63.1378 20.3872C63.6242 20.6816 64.1938 20.8288 64.8466 20.8288ZM74.4039 22L70.9479 12.4768H72.6375L75.4023 20.6368H75.4599L78.2247 12.4768H79.8759L76.4199 22H74.4039ZM81.265 22V12.4768H82.8778V22H81.265ZM82.0714 10.5184C81.7514 10.5184 81.4826 10.416 81.265 10.2112C81.0602 9.9936 80.9578 9.7184 80.9578 9.3856C80.9578 9.0784 81.0602 8.8224 81.265 8.6176C81.4826 8.4 81.7514 8.2912 82.0714 8.2912C82.3786 8.2912 82.641 8.4 82.8586 8.6176C83.0762 8.8224 83.185 9.0848 83.185 9.4048C83.185 9.712 83.0762 9.9744 82.8586 10.192C82.641 10.4096 82.3786 10.5184 82.0714 10.5184ZM88.7532 22C88.1772 22 87.678 21.9104 87.2556 21.7312C86.8332 21.552 86.5068 21.2512 86.2764 20.8288C86.0588 20.3936 85.95 19.8112 85.95 19.0816V13.6864H84.2988V12.4768H85.95L86.142 10.192H87.5628V12.4768H90.366V13.6864H87.5628V19.0816C87.5628 19.7344 87.6844 20.1696 87.9276 20.3872C88.1708 20.6048 88.5996 20.7136 89.214 20.7136H90.2124V22H88.7532ZM95.6296 22.2304C94.7208 22.2304 93.9144 22.0256 93.2104 21.616C92.5064 21.1936 91.9496 20.6112 91.54 19.8688C91.1432 19.1136 90.9448 18.2368 90.9448 17.2384C90.9448 16.2272 91.1432 15.3504 91.54 14.608C91.9368 13.8656 92.4872 13.2896 93.1912 12.88C93.908 12.4576 94.7336 12.2464 95.668 12.2464C96.6024 12.2464 97.4024 12.4576 98.068 12.88C98.7336 13.2896 99.2456 13.8336 99.604 14.512C99.9624 15.1776 100.142 15.9072 100.142 16.7008C100.142 16.8288 100.142 16.9696 100.142 17.1232C100.142 17.264 100.135 17.424 100.122 17.6032H92.1544V16.3552H98.548C98.5096 15.4592 98.2152 14.7616 97.6648 14.2624C97.1272 13.7632 96.4488 13.5136 95.6296 13.5136C95.0792 13.5136 94.5672 13.6352 94.0936 13.8784C93.62 14.1216 93.236 14.4864 92.9416 14.9728C92.66 15.4592 92.5192 16.0672 92.5192 16.7968V17.3344C92.5192 18.128 92.6664 18.7872 92.9608 19.312C93.2552 19.8368 93.6392 20.2336 94.1128 20.5024C94.5992 20.7584 95.1048 20.8864 95.6296 20.8864C96.2952 20.8864 96.852 20.7328 97.3 20.4256C97.748 20.1184 98.0744 19.696 98.2792 19.1584H99.8728C99.7064 19.7472 99.4312 20.272 99.0472 20.7328C98.6632 21.1936 98.1832 21.5584 97.6072 21.8272C97.044 22.096 96.3848 22.2304 95.6296 22.2304ZM100.685 22L103.987 17.2384L100.685 12.4768H102.432L105.063 16.4704H105.12L107.789 12.4768H109.517L106.215 17.2384L109.517 22H107.789L105.12 17.9872H105.063L102.432 22H100.685Z"
fill="white"
/>
</svg>
</Link>
</div>
<nav className="main-menu style-2">
<ul className="navigation">
<Nav />
</ul>
</nav>
</div>
<div className="header-right d-flex align-items-center">
<Link
href={`/contact-us`}
className="tf-btn hide-sm btn-white2 h36"
>
<span className="text-caption-3">Contact Us</span>
<span className="bg-effect" />
</Link>
<div
className="mobile-button"
data-bs-toggle="offcanvas"
data-bs-target="#menu-mobile"
aria-controls="menu-mobile"
>
<div className="burger">
<span />
<span />
<span />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
);
}

85
components/headers/Header4.jsx Normal file
View File

@ -0,0 +1,85 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
import Nav from "./Nav";
export default function Header4() {
return (
<header id="header-main" className="header style-3">
<div className="header-inner">
<div className="tf-container">
<div className="row">
<div className="col-12">
<div className="header-inner-wrap">
<div className="header-left d-flex align-items-center">
<div className="header-logo">
<Link href={`/`} className="site-logo">
<svg
width="139.5"
height={40}
viewBox="0 0 140 40"
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="#28285B"
/>
<text
x="55"
y="30"
fontFamily="Arial, sans-serif"
fontSize="20"
fill="#121416"
>
Keystone
</text>
</svg>
</Link>
</div>
<nav className="main-menu style-3">
<ul className="navigation">
<Nav />
</ul>
</nav>
</div>
<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
href={`/contact-us`}
className="tf-btn hide-sm rounded-12 h36"
>
<span className="text-caption">Contact Us</span>
<span className="bg-effect" />
</Link>
<div
className="mobile-button"
data-bs-toggle="offcanvas"
data-bs-target="#menu-mobile"
aria-controls="menu-mobile"
>
<div className="burger">
<span />
<span />
<span />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
);
}

86
components/headers/Header5.jsx Normal file
View File

@ -0,0 +1,86 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
import Nav from "./Nav";
export default function Header5() {
return (
<header className="header style-4">
<div className="header-inner">
<div className="tf-container-2">
<div className="row">
<div className="col-12">
<div className="header-inner-wrap">
<div className="header-logo">
<Link href={`/marketing-consulting`} className="site-logo">
<svg
width={140}
height={40}
viewBox="0 0 140 40"
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="url(#paint0_linear_4689_6079)"
/>
<path
d="M58.22 28.5L64.412 11.7H66.548L72.716 28.5H70.58L65.468 14.22L60.332 28.5H58.22ZM61.052 24.18L61.628 22.548H69.236L69.812 24.18H61.052ZM79.5733 28.788C78.4053 28.788 77.3733 28.516 76.4773 27.972C75.5973 27.412 74.9173 26.652 74.4373 25.692C73.9573 24.732 73.7173 23.644 73.7173 22.428C73.7173 21.212 73.9573 20.132 74.4373 19.188C74.9173 18.228 75.5973 17.476 76.4773 16.932C77.3733 16.388 78.4133 16.116 79.5973 16.116C80.5733 16.116 81.4293 16.316 82.1653 16.716C82.9173 17.116 83.5013 17.676 83.9173 18.396V11.22H85.9333V28.5H84.1093L83.9173 26.508C83.6613 26.908 83.3333 27.284 82.9333 27.636C82.5333 27.972 82.0533 28.252 81.4933 28.476C80.9493 28.684 80.3093 28.788 79.5733 28.788ZM79.7893 27.036C80.5893 27.036 81.2933 26.844 81.9013 26.46C82.5093 26.076 82.9813 25.548 83.3173 24.876C83.6693 24.188 83.8453 23.38 83.8453 22.452C83.8453 21.54 83.6693 20.74 83.3173 20.052C82.9813 19.364 82.5093 18.828 81.9013 18.444C81.2933 18.06 80.5893 17.868 79.7893 17.868C79.0213 17.868 78.3253 18.06 77.7013 18.444C77.0933 18.828 76.6213 19.364 76.2853 20.052C75.9493 20.74 75.7813 21.54 75.7813 22.452C75.7813 23.38 75.9493 24.188 76.2853 24.876C76.6213 25.548 77.0933 26.076 77.7013 26.46C78.3253 26.844 79.0213 27.036 79.7893 27.036ZM92.5081 28.5L87.9241 16.404H90.0361L93.6841 26.556L97.3561 16.404H99.4201L94.8361 28.5H92.5081ZM101.636 28.5V16.404H103.652V28.5H101.636ZM102.644 13.836C102.244 13.836 101.908 13.708 101.636 13.452C101.38 13.18 101.252 12.844 101.252 12.444C101.252 12.044 101.38 11.724 101.636 11.484C101.908 11.228 102.244 11.1 102.644 11.1C103.028 11.1 103.356 11.228 103.628 11.484C103.9 11.724 104.036 12.044 104.036 12.444C104.036 12.844 103.9 13.18 103.628 13.452C103.356 13.708 103.028 13.836 102.644 13.836ZM111.722 28.5C111.002 28.5 110.378 28.388 109.85 28.164C109.322 27.94 108.914 27.564 108.626 27.036C108.354 26.492 108.218 25.764 108.218 24.852V18.108H106.106V16.404H108.218L108.482 13.476H110.234V16.404H113.738V18.108H110.234V24.852C110.234 25.604 110.386 26.116 110.69 26.388C110.994 26.644 111.53 26.772 112.298 26.772H113.594V28.5H111.722ZM121.104 28.788C119.984 28.788 118.984 28.524 118.104 27.996C117.224 27.468 116.536 26.732 116.04 25.788C115.544 24.828 115.296 23.716 115.296 22.452C115.296 21.172 115.536 20.06 116.016 19.116C116.512 18.172 117.2 17.436 118.08 16.908C118.976 16.38 120 16.116 121.152 16.116C122.336 16.116 123.344 16.38 124.176 16.908C125.008 17.436 125.64 18.132 126.072 18.996C126.52 19.844 126.744 20.78 126.744 21.804C126.744 21.964 126.744 22.132 126.744 22.308C126.744 22.484 126.736 22.684 126.72 22.908H116.808V21.348H124.752C124.704 20.244 124.336 19.38 123.648 18.756C122.976 18.132 122.128 17.82 121.104 17.82C120.432 17.82 119.8 17.98 119.208 18.3C118.616 18.604 118.144 19.06 117.792 19.668C117.44 20.26 117.264 21.004 117.264 21.9V22.572C117.264 23.564 117.44 24.396 117.792 25.068C118.16 25.74 118.632 26.244 119.208 26.58C119.8 26.916 120.432 27.084 121.104 27.084C121.952 27.084 122.648 26.9 123.192 26.532C123.752 26.148 124.16 25.628 124.416 24.972H126.408C126.2 25.708 125.856 26.364 125.376 26.94C124.896 27.5 124.296 27.948 123.576 28.284C122.872 28.62 122.048 28.788 121.104 28.788ZM127.438 28.5L131.542 22.452L127.438 16.404H129.646L132.91 21.348L136.222 16.404H138.382L134.278 22.452L138.382 28.5H136.222L132.91 23.532L129.646 28.5H127.438Z"
fill="#121416"
/>
<defs>
<linearGradient
id="paint0_linear_4689_6079"
x1="-7.99999"
y1={20}
x2="38.4226"
y2="21.8957"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FF3A2D" />
<stop offset={1} stopColor="#FFA13F" />
</linearGradient>
</defs>
</svg>
</Link>
</div>
<nav className="main-menu">
<ul className="navigation">
<Nav />
</ul>
</nav>
<div className="header-right d-flex align-items-center">
<Link
href={`/pricing`}
className="tf-btn btn-border hide-sm h36"
>
<span className="text-body-4">Get Started</span>
<span className="bg-effect" />
</Link>
<Link
href={`/contact-us`}
className="tf-btn btn-dark hide-sm h36"
>
<span className="text-body-4">Contact Us</span>
<span className="bg-effect" />
</Link>
<div
className="mobile-button"
data-bs-toggle="offcanvas"
data-bs-target="#menu-mobile"
aria-controls="menu-mobile"
>
<div className="burger">
<span />
<span />
<span />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
);
}

140
components/headers/Nav.jsx Normal file
View File

@ -0,0 +1,140 @@
"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";
export default function Nav() {
const pathname = usePathname();
const isActive = (link) => link.split("/")[1] == pathname.split("/")[1];
const isActiveParent = (links) => links.some((link) => isActive(link.href));
return (
<>
{" "}
<li
className={`has-child ${
isActiveParent(homepages) ? "current-menu" : ""
} `}
>
<a href="#">Home</a>
{/* <div className="submenu mega-menu">
<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) => (
<li
key={item.href}
className={`menu-item ${
isActive(item.href) ? "current-menu-item" : ""
}`}
>
<Link href={item.href}>{item.label}</Link>
</li>
))}
</ul> */}
</li>
<li
className={`has-child position-relative ${
isActiveParent(servicePages) ? "current-menu" : ""
} `}
>
<a href="#">Serivce</a>
{/* <ul className="submenu">
{servicePages.map((item) => (
<li
key={item.href}
className={`menu-item ${
isActive(item.href) ? "current-menu-item" : ""
}`}
>
<Link href={item.href}>{item.label}</Link>
</li>
))}
</ul> */}
</li>
<li
className={`has-child position-relative ${
isActiveParent(blogPages) ? "current-menu" : ""
} `}
>
<a href="#">Blog</a>
{/* <ul className="submenu">
{blogPages.map((item) => (
<li
key={item.href}
className={`menu-item ${
isActive(item.href) ? "current-menu-item" : ""
}`}
>
<Link href={item.href}>{item.label}</Link>
</li>
))}
</ul> */}
</li>
<li className={` ${isActive("/contact-us") ? "current-menu" : ""} `}>
<Link href={`/contact-us`}>Contact</Link>
</li>
<li
className={`has-child position-relative ${
isActiveParent(shopPages) ? "current-menu" : ""
} `}
>
<a href="#">Shop</a>
{/* <ul className="submenu">
{shopPages.map((item) => (
<li
key={item.href}
className={`menu-item ${
isActive(item.href) ? "current-menu-item" : ""
}`}
>
<Link href={item.href}>{item.label}</Link>
</li>
))}
</ul> */}
</li>
</>
);
}

79
components/headers/SearchPopup.jsx Normal file
View File

@ -0,0 +1,79 @@
"use client";
import { useEffect, useRef, useState } from "react";
export default function SearchPopup() {
const [isActive, setisActive] = useState(false);
const popupRef = useRef(null);
useEffect(() => {
function handleClickOutside(event) {
if (popupRef.current && !popupRef.current.contains(event.target)) {
// Clicked outside the popup
setisActive(false);
// Perform close action here
}
}
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
return (
<div className="popup-show-form" ref={popupRef}>
<a
href="#"
onClick={(e) => {
e.preventDefault();
setisActive((pre) => !pre);
}}
className="tf-btn btn-white btn-find btn-show"
>
<i className="icon-search-solid" />
<span className="bg-effect" />
</a>
<div
className={`popup-show popup-form-search ${isActive ? "show" : ""} `}
>
<div className="close-form">
<i className="icon-times-solid" />
</div>
<form
className="form-search style-line-bot style-1"
onSubmit={(e) => e.preventDefault()}
>
<fieldset className="text">
<input
type="text"
placeholder="Search..."
className=""
name="text"
tabIndex={0}
defaultValue=""
aria-required="true"
required
/>
</fieldset>
<button className="" type="submit">
<i className="icon icon-search-solid" />
</button>
</form>
<ul className="wrap-tag d-flex align-items-center flex-wrap gap_16">
<li className="tag-item d-flex align-items-center gap_12">
<span className="sub-heading text_black">Blog</span>
<span className="remove-item">
<i className="icon-times-solid" />
</span>
</li>
<li className="tag-item d-flex align-items-center gap_12">
<span className="sub-heading text_black">Single Post</span>
<span className="remove-item">
<i className="icon-times-solid" />
</span>
</li>
</ul>
</div>
</div>
);
}

96
components/homes/finance-advisor/Blogs.jsx Normal file
View File

@ -0,0 +1,96 @@
"use client";
import Link from "next/link";
import Image from "next/image";
import { blogArticles4, posts } from "@/data/blogs";
export default function Blogs() {
return (
<div className="section-blog style-2 tf-spacing-23">
<div className="tf-container-2">
<div className="heading-section mb_59">
<div className="heading-tag style-2 v2 text_mono-gray-5 text-body-3 mb_12">
BLOGS
</div>
<h2 className="heading-title text_white fw-6 split-text effect-right">
Helpful insights and tips for your <br />
financial success journey
</h2>
</div>
<div className="wrapper">
{blogArticles4.map((article) => (
<div
key={article.id}
className="blog-article-item style-2 hover-image wow animate__fadeInLeft animate__animated"
data-wow-delay={article.delay}
>
<Link
href={`/single-post/${article.id}`}
className="article-thumb"
>
<Image
className="lazyload"
data-src={article.imageSrc}
alt={article.alt}
src={article.imageSrc}
width={621}
height={621}
/>
</Link>
<div className="article-content">
<p className="text-body-2 text_mono-gray-3">{article.date}</p>
<h6 className="title fw-5 letter-spacing-2">
<Link
href={`/single-post/${article.id}`}
className="text_white"
>
{article.title}
</Link>
</h6>
</div>
</div>
))}
<div className="right">
{posts.map((post) => (
<div
key={post.id}
className="relatest-post-item style-1 hover-image-2 wow animate__fadeInRight animate__animated"
data-wow-delay={post.delay}
>
<Link
href={`/single-post/${post.id}`}
className="image-rotate image mt-0"
>
<Image
alt={post.alt}
src={post.imageSrc}
width={120}
height={120}
/>
</Link>
<div className="content">
<p className="text-body-2 text_primary-fa-yellow mb_3">
{post.date}
</p>
<div className="sub-heading fw-5 mb_12 text_primary-fa-yellow">
<Link
href={`/single-post/${post.id}`}
className="link line-clamp-3"
>
{post.title}
</Link>
</div>
</div>
</div>
))}
<Link
href={`/blog`}
className="link btn_link text-body-1 text_white text-decoration-underline wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
View all stories
</Link>
</div>
</div>
</div>
</div>
);
}

82
components/homes/finance-advisor/CaseStudies.jsx Normal file
View File

@ -0,0 +1,82 @@
"use client";
import { caseStudies3 } from "@/data/caseStudies";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
import { Navigation } from "swiper/modules";
export default function CaseStudies() {
return (
<div className="section-case-studies sw-layout-1 tf-spacing-28">
<div className="tf-container-2">
<div className="row">
<div className="col-12">
<div className="heading-section d-flex justify-content-between mb_59">
<h2 className="fw-6 split-text effect-right">
Explore how we’ve helped people
</h2>
<div className="wrap-sw-button d-flex gap_16">
<div className="sw-button style-default has-bg nav-prev-layout-1 snbp1">
<i className="icon-caret-left" />
</div>
<div className="sw-button style-default has-bg nav-next-layout-1 snbn1">
<i className="icon-caret-right" />
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="tf-container-2 slider-layout-right wow animate__fadeInLeft animate__animated"
data-wow-delay="0s"
>
<Swiper
className="swiper"
spaceBetween={15}
breakpoints={{
0: { slidesPerView: 1.3 },
575: {
slidesPerView: 1.3,
},
768: {
slidesPerView: 2.5,
spaceBetween: 20,
},
992: {
slidesPerView: 4.73,
spaceBetween: 48,
},
}}
modules={[Navigation]}
navigation={{
prevEl: ".snbp1",
nextEl: ".snbn1",
}}
>
{caseStudies3.map((study) => (
<SwiperSlide className="swiper-slide" key={study.id}>
<div className="case-studies-item style-3 hover-image">
<div className="img-style">
<Image
className="lazyload"
data-src={study.imageSrc}
alt={study.title}
src={study.imageSrc}
width={study.width}
height={study.height}
/>
</div>
<h6 className="title text_white">
<Link href={`/single-project/${study.id}`} className="link">
{study.title}
</Link>
</h6>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
);
}

164
components/homes/finance-advisor/Choices.jsx Normal file
View File

@ -0,0 +1,164 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
export default function Choices() {
return (
<div className="section-choices">
<div className="tf-container-2">
<div className="heading-secetion text-center mb_61">
<h1 className="heading-title text_dark fw-6 split-text effect-right">
We fuel your financial confidence
</h1>
</div>
<div className="tf-grid-layout lg-col-3">
<div
className="choice-item left wow animate__fadeInLeft animate__animated"
data-wow-delay="0s"
>
<div className="heading">
<h5 className="text_dark fw-6 mb_16">
Frequently asked Questions
</h5>
<p className="text-body-1 text_dark">
Our FAQ section provides straightforward, clear answers to help
you better under stand our services
</p>
</div>
<Link href={`/faqs`} className="link text_dark text-body-1">
View all question
</Link>
<div
className="item scroll-tranform"
data-direction="left"
data-distance="20%"
>
<Image
alt="item"
src="/images/item/item-choice-1.png"
width={235}
height={235}
/>
</div>
</div>
<div
className="choice-item center wow animate__fadeInLeft animate__animated"
data-wow-delay="0.2s"
>
<div className="heading">
<h5 className="text_dark text_white fw-6 mb_16">
Package your Development Plan
</h5>
<p className="text-body-1 text_dark text_white mb_32">
Our development plan packages are designed to provide
comprehensive, personalized strategies
</p>
<ul className="list d-grid gap_8">
<li className="text-body-2 text_white fw-6 d-flex align-items-center gap_16">
<i className="icon-check-cycle-line-2" />
Cancel anytime
</li>
<li className="text-body-2 text_white fw-6 d-flex align-items-center gap_16">
<i className="icon-check-cycle-line-2" />
Save cost for your development
</li>
<li className="text-body-2 text_white fw-6 d-flex align-items-center gap_16">
<i className="icon-check-cycle-line-2" />
Comprehensive package
</li>
</ul>
</div>
<Link href={`/faqs`} className="link-black text_white text-body-1">
View all question
</Link>
</div>
<div
className="choice-item right wow animate__fadeInLeft animate__animated"
data-wow-delay="0.3s"
>
<div className="heading">
<h5 className="text_dark fw-6 mb_16">
Begin your Journey with Advitex!
</h5>
<p className="text-body-1 text_dark">
We are always looking for talented, driven professionals who
share our commitment to excellence
</p>
</div>
<Link href={`/faqs`} className="link text_dark text-body-1">
View all question
</Link>
<div
className="item scroll-tranform"
data-direction="right"
data-distance="20%"
>
<Image
alt="item"
src="/images/item/item-choice-2.png"
width={235}
height={235}
/>
</div>
</div>
</div>
<div className="cta">
<div className="left">
<div className="heading mb_30">
<h5 className="text_dark fw-6 mb_16 title split-text effect-right">
What you get from us!
</h5>
<p
className="text-body-1 text_dark split-text wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
Our FAQ section provides straightforward, clear
<br />
answers to help you better
</p>
</div>
<Link
href={`/pricing`}
className="tf-btn btn-dark height-2 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
<span className="fw-5">Get Started</span>
<span className="bg-effect" />
</Link>
</div>
<div className="right">
<ul className="list d-grid gap_8">
<li
className="text-body-2 text_dark fw-6 d-flex align-items-center gap_16 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
<i className="icon-check-cycle-line-2" />
Tailored financial solutions for every client
</li>
<li
className="text-body-2 text_dark fw-6 d-flex align-items-center gap_16 wow animate__fadeInUp animate__animated"
data-wow-delay="0.1s"
>
<i className="icon-check-cycle-line-2" />
Proactive and Agile Market responses
</li>
<li
className="text-body-2 text_dark fw-6 d-flex align-items-center gap_16 wow animate__fadeInUp animate__animated"
data-wow-delay="0.2s"
>
<i className="icon-check-cycle-line-2" />
Transparent, Client-Friendly fee structures
</li>
<li
className="text-body-2 text_dark fw-6 d-flex align-items-center gap_16 wow animate__fadeInUp animate__animated"
data-wow-delay="0.3s"
>
<i className="icon-check-cycle-line-2" />
Advanced technology for Real-Time financial management
</li>
</ul>
</div>
</div>
</div>
</div>
);
}

83
components/homes/finance-advisor/Contact.jsx Normal file
View File

@ -0,0 +1,83 @@
"use client";
import React from "react";
export default function Contact() {
return (
<div className="section-contact style-1 tf-spacing-20 pt-0">
<div className="tf-container-2">
<div className="heading-section text-center mb_63">
<div className="heading-tag style-2 text_mono-gray-5 text-body-3 mx-auto text-uppercase mb_12">
Works with us
</div>
<h1 className="heading-title fw-6 split-text effect-right">
Let’s work together!
</h1>
<p
className="text-body-1 text_mono-gray-7 mt_20 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
Partner with us to unlock tailored solutions, backed by expertise
and a <br />
commitment to your success.
</p>
</div>
<div className="box-inner">
<form className="form-contact" onSubmit={(e) => e.preventDefault()}>
<div className="wrap">
<fieldset className="mb_20">
<label className="mb_15" htmlFor="name">
Full Name*
</label>
<input type="text" placeholder="Full Name" id="name" required />
</fieldset>
<div className="grid-2 gap_24 mb_20">
<fieldset>
<label className="mb_15" htmlFor="email">
Email Address*
</label>
<input
type="email"
placeholder="Your email address*"
id="email"
required
/>
</fieldset>
<fieldset>
<label className="mb_15" htmlFor="phone">
Phone Number
<span className="text_mono-gray-5">(Optional)</span>
</label>
<input
type="text"
placeholder="Your phone number"
id="phone"
required
/>
</fieldset>
</div>
<fieldset className="mb_24">
<label className="mb_15" htmlFor="message">
Message
</label>
<textarea
className="message"
placeholder="Write your message here..."
id="message"
defaultValue={""}
/>
</fieldset>
<a href="#" className="link attachment">
<i className="icon-paperclip-solid" />
Add an attachment
</a>
</div>
<button type="submit" className="tf-btn btn-primary2 height-2">
<span>Send Message</span>
<span className="bg-effect" />
</button>
</form>
</div>
</div>
</div>
);
}

201
components/homes/finance-advisor/Faq.jsx Normal file
View File

@ -0,0 +1,201 @@
import React from "react";
import Link from "next/link";
export default function Faq() {
return (
<div className="section-faqs style-2 tf-spacing-20">
<div className="tf-container">
<div className="heading-section text-center mb_64">
<div className="heading-tag style-2 text_mono-gray-5 text-body-3 mx-auto mb_12">
FAQs
</div>
<h1 className="heading-title fw-6 split-text effect-right">
Have questions? Explore our FAQs
</h1>
<p
className="text-body-1 text_mono-gray-7 mt_21 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
Providing expert financial consulting services to help you grow,
optimize, and <br />
thrive in today's competitive landscape
</p>
</div>
<ul
className="accordion-wrap style-faqs d-grid gap_24"
id="accordion-faq-2"
>
<li className="accordion-item action_click style-1 scrolling-effect effectRight">
<a
href="#accordion-2-1"
className="action accordion-title collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-2-1"
>
<div className="heading">
<div className="text_mono-dark-9 text-body-1 title fw-5">
Do you provide personalized financial plans?
</div>
</div>
<div className="icon" />
</a>
<div
id="accordion-2-1"
className="collapse"
data-bs-parent="#accordion-faq-2"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2">
Advitex offers a range of financial consulting services,
including personal financial planning, corporate strategy,
investment advisory, and risk compliance. We tailor our
solutions to help individuals, businesses, and investors
achieve their financial goals efficiently.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click active style-1 scrolling-effect effectRight">
<a
href="#accordion-2-2"
className="action accordion-title current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-2-2"
>
<div className="heading">
<div className="text_mono-dark-9 text-body-1 title fw-5">
How can financial consulting benefit my business?
</div>
</div>
<div className="icon" />
</a>
<div
id="accordion-2-2"
className="collapse show"
data-bs-parent="#accordion-faq-2"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2">
Advitex offers a range of financial consulting services,
including personal financial planning, corporate strategy,
investment advisory, and risk compliance. We tailor our
solutions to help individuals, businesses, and investors
achieve their financial goals efficiently.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click style-1 scrolling-effect effectRight">
<a
href="#accordion-2-3"
className="action accordion-title collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-2-3"
>
<div className="heading">
<div className="text_mono-dark-9 text-body-1 title fw-5">
What services does Advitex offer?
</div>
</div>
<div className="icon" />
</a>
<div
id="accordion-2-3"
className="collapse"
data-bs-parent="#accordion-faq-2"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2">
Advitex offers a range of financial consulting services,
including personal financial planning, corporate strategy,
investment advisory, and risk compliance. We tailor our
solutions to help individuals, businesses, and investors
achieve their financial goals efficiently.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click style-1 scrolling-effect effectRight">
<a
href="#accordion-2-4"
className="action accordion-title collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-2-4"
>
<div className="heading">
<div className="text_mono-dark-9 text-body-1 title fw-5">
What industries do you specialize in?
</div>
</div>
<div className="icon" />
</a>
<div
id="accordion-2-4"
className="collapse"
data-bs-parent="#accordion-faq-2"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2">
Advitex offers a range of financial consulting services,
including personal financial planning, corporate strategy,
investment advisory, and risk compliance. We tailor our
solutions to help individuals, businesses, and investors
achieve their financial goals efficiently.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click style-1 scrolling-effect effectRight">
<a
href="#accordion-2-5"
className="action accordion-title collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-2-5"
>
<div className="heading">
<div className="text_mono-dark-9 text-body-1 title fw-5">
How long does the consultation process take?
</div>
</div>
<div className="icon" />
</a>
<div
id="accordion-2-5"
className="collapse"
data-bs-parent="#accordion-faq-2"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2">
Advitex offers a range of financial consulting services,
including personal financial planning, corporate strategy,
investment advisory, and risk compliance. We tailor our
solutions to help individuals, businesses, and investors
achieve their financial goals efficiently.
</p>
</div>
</div>
</li>
</ul>
<div className="bot text-center">
<div className="text-body-1 text_mono-gray-7">
If you can't find your answer, please{" "}
<Link
href={`/contact-us`}
className="link text_black fw-5 text-decoration-underline"
>
Contact Us
</Link>
</div>
<Link href={`/faqs`} className="tf-btn btn-primary2 height-2 mx-auto">
<span>All questions</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
);
}

95
components/homes/finance-advisor/Features.jsx Normal file
View File

@ -0,0 +1,95 @@
import React from "react";
import Image from "next/image";
export default function Features() {
return (
<div className="tf-container-2 tf-spacing-24">
<div className="heading-secetion text-center mb_60">
<h1 className="heading-title text_dark fw-6 split-text effect-right">
The core values define our commitment
</h1>
</div>
<div className="tf-grid-layout md-col-2">
<div className="tf-box-icon style-4 effect-icon">
<div className="heading d-flex justify-content-between gap_12">
<h5 className="text_dark fw-6">
Commitment to intergrity <br />
and ethical practices
</h5>
<div className="icon">
<Image
alt="icon"
src="/images/box-icon/line-chart.svg"
width={48}
height={48}
/>
</div>
</div>
<p className="text-body-1 text_dark">
The company always puts the client's interests first, ensuring
transparency and honesty in all financial recommendations
</p>
</div>
<div className="tf-box-icon style-4 effect-icon">
<div className="heading d-flex justify-content-between gap_12">
<h5 className="text_dark fw-6">
Transparency in every <br />
communication
</h5>
<div className="icon">
<Image
alt="icon"
src="/images/box-icon/handshake.svg"
width={48}
height={48}
/>
</div>
</div>
<p className="text-body-1 text_dark">
We ensure that every financial recommendation is clearly explained,
empowering clients to make informed choices
</p>
</div>
<div className="tf-box-icon style-4 effect-icon">
<div className="heading d-flex justify-content-between gap_12">
<h5 className="text_dark fw-6">
Client-centered approach <br />
focused on your needs
</h5>
<div className="icon">
<Image
alt="icon"
src="/images/box-icon/line-radar.svg"
width={39}
height={39}
/>
</div>
</div>
<p className="text-body-1 text_dark">
We prioritize building long-term relationships by understanding each
client’s unique financial goals
</p>
</div>
<div className="tf-box-icon style-4 effect-icon">
<div className="heading d-flex justify-content-between gap_12">
<h5 className="text_dark fw-6">
Dedicated to Long-term <br />
financial success
</h5>
<div className="icon">
<Image
alt="icon"
src="/images/box-icon/line-board.svg"
width={48}
height={48}
/>
</div>
</div>
<p className="text-body-1 text_dark">
We develop comprehensive financial plans that are built for
sustainability, guiding clients toward lasting financial security
</p>
</div>
</div>
</div>
);
}

433
components/homes/finance-advisor/Hero.jsx Normal file
View File

@ -0,0 +1,433 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
export default function Hero() {
return (
<div className="page-title style-3">
<div className="tf-container">
<div className="row justify-content-center">
<div className="col-xl-7">
<div className="heading-title">
<div className="text-display-2 fw-6 text_white mb_29 split-text effect-rotate">
Secure your financial future with expert guidance
</div>
<p className="sub-heading text_white mb_41 split-text split-lines-transform">
Providing expert financial consulting services to help you grow,{" "}
<br />
optimize, and thrive in today's competitive landscape
</p>
<Link
href={`/pricing`}
className="tf-btn btn-white2 btn-px-28 height-2"
>
<span className="fw-5">Get Started</span>
<span className="bg-effect" />
</Link>
</div>
</div>
<div className="col-xl-5 col-md-8">
<div className="position-relative right">
<Image
alt="shape"
className="shape"
src="/images/item/shape.png"
width={693}
height={620}
/>
<Image
alt="person"
className="position-absolute person"
src="/images/page-title/person.png"
width={435}
height={563}
/>
<Image
alt="item"
className="position-absolute item left-right"
src="/images/item/item-1.png"
width={146}
height={147}
/>
<Image
alt="item-finance"
className="position-absolute item-finance up-down"
src="/images/item/item-finance.png"
width={260}
height={203}
/>
<Image
alt="item-accounting"
className="position-absolute item-accounting up-down"
src="/images/item/item-accounting.png"
width={236}
height={158}
/>
<Image
alt="item-expert"
className="position-absolute item-expert up-down-2"
src="/images/item/item-expert.png"
width={260}
height={174}
/>
</div>
</div>
</div>
</div>
<div className="infiniteslide_wrap" style={{ overflow: "hidden" }}>
<div className="infiniteslide tf-marquee infiniteSlide">
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-1-1.png"
width={162}
height={56}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-2-1.png"
width={168}
height={56}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-3-1.png"
width={213}
height={56}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-4-1.png"
width={187}
height={56}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-5-1.png"
width={169}
height={56}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-6-1.png"
width={169}
height={56}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-7-1.png"
width={169}
height={56}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-8-1.png"
width={169}
height={56}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-9-1.png"
width={136}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-1-1.png"
width={162}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-2-1.png"
width={168}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-3-1.png"
width={213}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-4-1.png"
width={187}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-5-1.png"
width={169}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-6-1.png"
width={169}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-7-1.png"
width={169}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-8-1.png"
width={169}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-9-1.png"
width={136}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-1-1.png"
width={162}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-2-1.png"
width={168}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-3-1.png"
width={213}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-4-1.png"
width={187}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-5-1.png"
width={169}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-6-1.png"
width={169}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-7-1.png"
width={169}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-8-1.png"
width={169}
height={56}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-2">
<Image
alt="brands"
src="/images/brands/brand-9-1.png"
width={136}
height={56}
/>
</div>
</div>
</div>
</div>
</div>
);
}

557
components/homes/finance-advisor/Services.jsx Normal file
View File

@ -0,0 +1,557 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { counterItems } from "@/data/facts";
import OdometerComponent from "@/components/common/OdometerComponent";
export default function Services() {
return (
<div className="section-service style-4 tf-spacing-23">
<div className="tf-container-2">
<div className="heading-section text-center mb_65">
<div className="heading-tag style-2 text_mono-gray-5 text-body-3 mb_12 mx-auto">
SERVICES
</div>
<h1 className="heading-title text_dark fw-6 split-text effect-right">
We committed to your financial growth
</h1>
<p className="text-body-1 text_mono-gray-7 mt_28 split-text split-lines-transform">
Providing expert financial consulting services to help you grow,
optimize, and <br />
thrive in today's competitive landscape
</p>
</div>
<div className="wrap">
<ul
className="nav nav-tabs-wrap overflow-x-auto style-1 mb_50"
id="myTab"
role="tablist"
>
<li className="nav-item" role="presentation">
<button
className="nav-link active sub-heading text_dark"
id="wealth-management"
data-bs-toggle="tab"
data-bs-target="#wealth-management-pane"
type="button"
role="tab"
aria-controls="wealth-management-pane"
aria-selected="true"
>
<span className="icon">
<svg
width={32}
height={32}
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.36251 6.36417L6.03149 5.98893C3.54774 8.35662 2 11.6975 2 15.3999C2 19.7741 4.16034 23.6437 7.47226 25.9999C9.59649 27.5112 12.1945 28.3999 15 28.3999C16.2306 28.3999 17.4212 28.2289 18.5495 27.9094C19.0808 27.759 19.3451 27.18 19.154 26.6619L15.1844 15.8999H15.0026L6.36251 6.36417ZM6.36251 6.36417C3.98179 8.64058 2.5 11.8469 2.5 15.3999C2.5 19.6054 4.57637 23.326 7.76211 25.5925C9.80448 27.0455 12.3017 27.8999 15 27.8999C16.1841 27.8999 17.3289 27.7354 18.4132 27.4283C18.6393 27.3643 18.7843 27.1046 18.6849 26.8349L14.5632 15.6606L6.36251 6.36417ZM15.2257 14.8999L7.11217 5.70235C9.26378 3.95003 12.0087 2.8999 15 2.8999C21.5798 2.8999 26.9726 7.98407 27.4636 14.4378C27.4815 14.6736 27.2866 14.8999 27 14.8999H15.2257Z"
stroke="#3F3D2E"
strokeLinecap="round"
/>
<path
d="M19.0343 17.7002H29.5996C29.8867 17.7002 30.0811 17.9263 30.0632 18.1616C29.7115 22.7887 26.8395 26.7135 22.8148 28.5638C22.6012 28.662 22.3221 28.5586 22.2226 28.2889L18.5652 18.3732C18.4448 18.0468 18.6864 17.7002 19.0343 17.7002Z"
stroke="#3F3D2E"
/>
</svg>
</span>
Wealth Management
</button>
</li>
<li className="nav-item" role="presentation">
<button
className="nav-link sub-heading text_dark"
id="business-strategy"
data-bs-toggle="tab"
data-bs-target="#business-strategy-pane"
type="button"
role="tab"
aria-controls="business-strategy-pane"
aria-selected="false"
>
<span className="icon">
<svg
width={33}
height={32}
viewBox="0 0 33 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.33301 2.80005V28.8C3.33301 28.9105 3.42255 29 3.53301 29H29.533"
stroke="#3F3D2E"
strokeWidth={2}
strokeLinecap="round"
/>
<path
d="M25.5332 7L25.5332 24.2"
stroke="#3F3D2E"
strokeWidth={2}
strokeLinecap="round"
/>
<path
d="M19.7334 11L19.7334 24.2"
stroke="#3F3D2E"
strokeWidth={2}
strokeLinecap="round"
/>
<path
d="M13.9326 15L13.9326 24.2"
stroke="#3F3D2E"
strokeWidth={2}
strokeLinecap="round"
/>
<path
d="M8.13281 19L8.13281 24.2"
stroke="#3F3D2E"
strokeWidth={2}
strokeLinecap="round"
/>
</svg>
</span>
Business Strategy
</button>
</li>
<li className="nav-item" role="presentation">
<button
className="nav-link sub-heading text_dark"
id="stock-planning"
data-bs-toggle="tab"
data-bs-target="#stock-planning-pane"
type="button"
role="tab"
aria-controls="stock-planning-pane"
aria-selected="false"
>
<span className="icon">
<svg
width={33}
height={32}
viewBox="0 0 33 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.6663 29V23.6M16.6663 2.80005V7.40005M12.1073 21.2V23.54C12.1073 23.5732 12.1341 23.6 12.1673 23.6H16.6663M12.1073 21.2V18.86C12.1073 18.8269 12.1341 18.8 12.1673 18.8H16.6663M12.1073 21.2H7.26631M28.4663 21.2H23.6254M23.6254 21.2V18.86C23.6254 18.8269 23.5985 18.8 23.5654 18.8H16.6663M23.6254 21.2V23.54C23.6254 23.5732 23.5985 23.6 23.5654 23.6H16.6663M8.30725 9.80005V12.14C8.30725 12.1732 8.33412 12.2 8.36725 12.2H16.6663M8.30725 9.80005V7.46005C8.30725 7.42691 8.33412 7.40005 8.36725 7.40005L16.6663 7.40005M8.30725 9.80005H3.46631M24.6663 9.80005H19.8254M19.8254 9.80005V7.46005C19.8254 7.42691 19.7985 7.40005 19.7654 7.40005H16.6663M19.8254 9.80005V12.14C19.8254 12.1732 19.7985 12.2 19.7654 12.2H16.6663M16.6663 18.8V12.2"
stroke="#3F3D2E"
strokeWidth={2}
strokeLinecap="round"
/>
</svg>
</span>
Stock Planning
</button>
</li>
<li className="nav-item" role="presentation">
<button
className="nav-link sub-heading text_dark"
id="investment-planning"
data-bs-toggle="tab"
data-bs-target="#investment-planning-pane"
type="button"
role="tab"
aria-controls="investment-planning-pane"
aria-selected="false"
>
<span className="icon">
<svg
width={32}
height={32}
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="14.6109"
cy="13.8108"
r="8.2"
transform="rotate(-45 14.6109 13.8108)"
stroke="#3F3D2E"
strokeWidth={2}
/>
<path
d="M10.7998 13.3999L10.7998 16.7999"
stroke="#3F3D2E"
strokeWidth={2}
strokeLinecap="round"
/>
<path
d="M18.3999 11.6001L18.3999 16.8001"
stroke="#3F3D2E"
strokeWidth={2}
strokeLinecap="round"
/>
<path
d="M14.6001 10L14.6001 16.8"
stroke="#3F3D2E"
strokeWidth={2}
strokeLinecap="round"
/>
<path
d="M20.5503 19.7505L26.7728 25.973"
stroke="#3F3D2E"
strokeWidth={2}
strokeLinecap="round"
/>
</svg>
</span>
Investment Planning
</button>
</li>
</ul>
<div
className="tab-content flat-animate-tab effect-content-slide"
id="myTabContent"
>
<div
className="tab-pane show active"
id="wealth-management-pane"
role="tabpanel"
aria-labelledby="wealth-management"
tabIndex={0}
>
<div className="box-service style-1">
<div className="img-style effect-item effect-left effect-2">
<Image
className="lazyload"
data-src="/images/section/service-1.jpg"
alt="service"
src="/images/section/service-1.jpg"
width={657}
height={534}
/>
</div>
<div className="content">
<div className="heading mb_25 effect-item effect-right effect-2">
<span className="text-body-1 text_dark font2">
Optimization
</span>
<h3 className="text_dark fw-6">
Wealth management solutions
</h3>
</div>
<ul className="list effect-item effect-right effect-3">
<li className="text-body-1 text_dark">
Tailored plans based on your unique financial goals and
risk tolerance.
</li>
<li className="text-body-1 text_dark">
A holistic approach that covers asset growth, protection,
and long-term wealth preservation.
</li>
<li className="text-body-1 text_dark">
Access to experienced financial advisors who continuously
monitor and adjust your portfolio.
</li>
</ul>
<div className="author d-flex gap_24 align-items-center effect-item effect-right effect-4">
<div className="avatar rounded-cycle overflow-hidden">
<Image
alt="avatar"
src="/images/avatar/avatar-17.jpg"
width={144}
height={144}
/>
</div>
<div className="content">
<p className="description fw-3 text-body-2 mb_4">
“It's a comprehensive tool of Advitex that we
<span className="fw-6 text_dark">rely on daily</span> to
guide our
<span className="fw-6 text_dark">
investment decisions
</span>
and ensure we're on track”
</p>
<div className="text-body-2 fw-6">
John Sena - CEO of Kling
</div>
</div>
</div>
<Link
href={`/pricing`}
className="tf-btn height-2 btn-dark effect-item effect-right effect-5"
>
<span>Get Started</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
<div
className="tab-pane show"
id="business-strategy-pane"
role="tabpanel"
aria-labelledby="business-strategy"
tabIndex={0}
>
<div className="box-service style-1">
<div className="img-style effect-item effect-left effect-2">
<Image
className="lazyload"
data-src="/images/section/service-2.jpg"
alt="service"
src="/images/section/service-2.jpg"
width={657}
height={534}
/>
</div>
<div className="content">
<div className="heading mb_25 effect-item effect-right effect-2">
<span className="text-body-1 text_dark font2">
Optimization
</span>
<h3 className="text_dark fw-6">
Business Strategy solution
</h3>
</div>
<ul className="list effect-item effect-right effect-3">
<li className="text-body-1 text_dark">
Customized blueprints designed to propel your business
forward and enhance competitiveness.
</li>
<li className="text-body-1 text_dark">
A well-rounded approach that focuses on market analysis,
operational efficiency, and sustainable growth
</li>
<li className="text-body-1 text_dark">
Work closely with skilled strategists who provide ongoing
support and adjust plans to meet evolving market trends.
</li>
</ul>
<div className="author d-flex gap_24 align-items-center effect-item effect-right effect-4">
<div className="avatar rounded-cycle overflow-hidden">
<Image
alt="avatar"
src="/images/avatar/avatar-5.jpg"
width={100}
height={100}
/>
</div>
<div className="content">
<p className="description fw-3 text-body-2 mb_4">
“It's a comprehensive tool of Advitex that we
<span className="fw-6 text_dark">rely on daily </span>
to guide our
<span className="text_dark fw-6">
investment decision
</span>
and ensure we're on track"
</p>
<div className="text-body-2 fw-6">
Elise Chrona - CEO of Minga
</div>
</div>
</div>
<Link
href={`/pricing`}
className="tf-btn height-2 btn-dark effect-item effect-right effect-5"
>
<span>Get Started</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
<div
className="tab-pane show"
id="stock-planning-pane"
role="tabpanel"
aria-labelledby="stock-planning"
tabIndex={0}
>
<div className="box-service style-1">
<div className="img-style effect-item effect-left effect-2">
<Image
className="lazyload"
data-src="/images/section/service-3.jpg"
alt="service"
src="/images/section/service-3.jpg"
width={657}
height={534}
/>
</div>
<div className="content">
<div className="heading mb_25 effect-item effect-right effect-2">
<span className="text-body-1 text_dark font2">
Optimization
</span>
<h3 className="text_dark fw-6">Stock Planning solution</h3>
</div>
<ul className="list effect-item effect-right effect-3">
<li className="text-body-1 text_dark">
Personalized strategies to navigate the stock market with
confidence and precision.
</li>
<li className="text-body-1 text_dark">
A thorough process that includes stock selection, risk
analysis, and diversification for maximum returns.
</li>
<li className="text-body-1 text_dark">
Receive continuous guidance from market-savvy advisors who
adapt strategies based on market movements.
</li>
</ul>
<div className="author d-flex gap_24 align-items-center effect-item effect-right effect-4">
<div className="avatar rounded-cycle overflow-hidden">
<Image
alt="avatar"
src="/images/avatar/avatar-6.jpg"
width={100}
height={100}
/>
</div>
<div className="content">
<p className="description fw-3 text-body-2 mb_4">
"Thanks to Advitex's stock planning tools, we have seen
<span className="text_dark fw-6">
remarkable stability
</span>
in our investments, even during volatile periods."
</p>
<div className="text-body-2 fw-6">
Alex Boar - CEO of Marcus
</div>
</div>
</div>
<Link
href={`/pricing`}
className="tf-btn height-2 btn-dark effect-item effect-right effect-5"
>
<span>Get Started</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
<div
className="tab-pane show"
id="investment-planning-pane"
role="tabpanel"
aria-labelledby="investment-planning"
tabIndex={0}
>
<div className="box-service style-1">
<div className="img-style effect-item effect-left effect-2">
<Image
className="lazyload"
data-src="/images/section/service-4.jpg"
alt="service"
src="/images/section/service-4.jpg"
width={657}
height={534}
/>
</div>
<div className="content">
<div className="heading mb_25 effect-item effect-right effect-2">
<span className="text-body-1 text_dark font2">
Optimization
</span>
<h3 className="text_dark fw-6">
Investment Planning solution
</h3>
</div>
<ul className="list effect-item effect-right effect-3">
<li className="text-body-1 text_dark">
Comprehensive investment plans designed to align with your
financial objectives and time horizon.
</li>
<li className="text-body-1 text_dark">
An approach that covers asset allocation, portfolio
rebalancing, and performance optimization.
</li>
<li className="text-body-1 text_dark">
Leverage expert financial planners who review and
fine-tune investments to stay in sync with your goals.
</li>
</ul>
<div className="author d-flex gap_24 align-items-center effect-item effect-right effect-4">
<div className="avatar rounded-cycle overflow-hidden">
<Image
alt="avatar"
src="/images/avatar/avatar-8.jpg"
width={96}
height={96}
/>
</div>
<div className="content">
<p className="description fw-3 text-body-2 mb_4">
"Advitex's investment planning has
<span className="">simplified complex decisions</span> ,
giving us clarity and
<span className="text_dark fw-6">confidence</span> in
our financial journey."
</p>
<div className="text-body-2 fw-6">
Marca Heizy - CEO of Fantom
</div>
</div>
</div>
<Link
href={`/pricing`}
className="tf-btn height-2 btn-dark effect-item effect-right effect-5"
>
<span>Get Started</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
</div>
</div>
<div className="wrap-counter styel-1">
<div className="clutch-rating-item d-flex align-items-center">
<Image
alt="clutch-rating"
src="/images/item/clutch-rating.png"
width={92}
height={92}
/>
<div className="content">
<div className="wrap-rating d-flex gap_10 align-items-center">
<span className="text-body-1 fw-6 text_dark">4.9/5</span>
<ul className="tf-rating d-flex align-items-center gap_3">
<li>
<i className="icon-star-solid" />
</li>
<li>
<i className="icon-star-solid" />
</li>
<li>
<i className="icon-star-solid" />
</li>
<li>
<i className="icon-star-solid" />
</li>
<li>
<i className="icon-star-solid" />
</li>
</ul>
</div>
<p className="text-body-3 text_dark">
Based on 24 Clutch reviews
</p>
</div>
</div>
<div className="right d-flex align-items-center justify-content-between">
{counterItems.map((item, index) => (
<div
key={index}
className="counter-item style-1 v2 flex-column align-items-start"
>
<div className="counter-number">
<h2 className="odometer font2 fw-6 text_dark">
<OdometerComponent max={item.value} />
</h2>
<span className="sub text_dark fw-6">{item.unit}</span>
</div>
<p className="text-body-1 text_dark">{item.description}</p>
</div>
))}
</div>
</div>
</div>
</div>
);
}

142
components/homes/finance-advisor/Team.jsx Normal file
View File

@ -0,0 +1,142 @@
"use client";
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { teamMembers3 } from "@/data/team";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper/modules";
export default function Team() {
return (
<div className="section-team style-3 tf-spacing-23 pt-0">
<div className="tf-container-2">
<div className="heading-section text-center mb_65">
<div className="heading-tag style-2 text_mono-gray-5 text-body-3 mb_12 mx-auto">
OUR TEAMS
</div>
<h1 className="heading-title text_dark fw-6 split-text effect-right">
Show you the way to the success
</h1>
<p className="text-body-1 text_mono-gray-7 mt_28 split-text split-lines-transform">
Providing expert financial consulting services to help you grow,
optimize, and <br />
thrive in today's competitive landscape
</p>
</div>
<Swiper
spaceBetween={15}
modules={[Pagination]}
pagination={{
clickable: true,
el: ".spd17",
}}
className="swiper tf-sw-mobile mb_40 swiper-active-768"
>
{teamMembers3.map((member, index) => (
<SwiperSlide
key={index}
className="swiper-slide wow animate__fadeInRight animate__animated"
data-wow-delay={`${index * 0.1}s`}
>
<div className="team-item style-1">
<div className="position-relative mb_29">
<Link href="/team" className="img-style">
<Image
alt="avatar"
src={member.imgSrc}
width={237}
height={384}
/>
</Link>
<div className="wrap-social">
<div className="btn-share">
<i className="icon-share-network" />
</div>
<ul className="social">
<li>
<a href="#" className="icon-facebook-f link" />
</li>
<li>
<a href="#" className="icon-twitter-x link" />
</li>
<li>
<a href="#" className="icon-instagram link" />
</li>
</ul>
</div>
</div>
<div className="content">
<h6 className="name text_dark fw-5">
<Link href="/team" className="link">
{member.name}
</Link>
</h6>
<p className="text-body-1 text_mono-gray-5">{member.role}</p>
</div>
</div>
</SwiperSlide>
))}
<div className="sw-dots spd17 style-default sw-pagination-mb mt_20 justify-content-center d-flex d-md-none" />
</Swiper>
<div className="swiper tf-sw-mobile mb_40 swiper-inActive-768">
<div className="swiper-wrapper tf-grid-layout-md xl-col-5 gap_25 md-col-2">
{teamMembers3.map((member, index) => (
<div
key={index}
className="swiper-slide wow animate__fadeInRight animate__animated"
data-wow-delay={`${index * 0.1}s`}
>
<div className="team-item style-1">
<div className="position-relative mb_29">
<Link href="/team" className="img-style">
<Image
alt="avatar"
src={member.imgSrc}
width={237}
height={384}
/>
</Link>
<div className="wrap-social">
<div className="btn-share">
<i className="icon-share-network" />
</div>
<ul className="social">
<li>
<a href="#" className="icon-facebook-f link" />
</li>
<li>
<a href="#" className="icon-twitter-x link" />
</li>
<li>
<a href="#" className="icon-instagram link" />
</li>
</ul>
</div>
</div>
<div className="content">
<h6 className="name text_dark fw-5">
<Link href="/team" className="link">
{member.name}
</Link>
</h6>
<p className="text-body-1 text_mono-gray-5">
{member.role}
</p>
</div>
</div>
</div>
))}
</div>
<div className="sw-dots style-default sw-pagination-mb mt_20 justify-content-center d-flex d-md-none" />
</div>
<Link
href={`/team`}
className="tf-btn btn-dark mx-auto height-2 btn-px-28"
>
<span>About our team</span>
<span className="bg-effect" />
</Link>
</div>
</div>
);
}

371
components/homes/finance-advisor/Testimonials.jsx Normal file
View File

@ -0,0 +1,371 @@
"use client";
import Image from "next/image";
import { useEffect } from "react";
export default function Testimonials() {
useEffect(() => {
const container = document.querySelector(".circle-container");
if (!container) return;
const outerElements = document.querySelectorAll(".outer-element");
const innerElements = document.querySelectorAll(".inner-element");
const testimonialElements = document.querySelectorAll(".testimonial");
let angle = 0,
innerAngle = 0;
const rotationSpeed = 0.0005,
innerRotationSpeed = -0.001;
let outerPaused = false;
let innerPaused = false;
let animationFrameId;
function updateElementWidth() {
const width = container.offsetWidth;
container.style.setProperty("--circle-container-width", `${width}px`);
}
function updatePositions() {
const containerWidth = container.offsetWidth;
const outerRadius = containerWidth / 2.08;
const innerRadius = containerWidth / 3.4;
if (!outerPaused) {
outerElements.forEach((element, index) => {
const avatarAngle =
angle + index * ((2 * Math.PI) / outerElements.length);
element.style.transform = `translate(${
Math.cos(avatarAngle) * outerRadius
}px, ${Math.sin(avatarAngle) * outerRadius}px)`;
});
}
if (!innerPaused) {
innerElements.forEach((element, index) => {
const elemAngle =
innerAngle + index * ((2 * Math.PI) / innerElements.length);
element.style.transform = `translate(${
Math.cos(elemAngle) * innerRadius
}px, ${Math.sin(elemAngle) * innerRadius}px)`;
});
}
}
function animate() {
if (!outerPaused) angle += rotationSpeed;
if (!innerPaused) innerAngle += innerRotationSpeed;
updatePositions();
animationFrameId = requestAnimationFrame(animate);
}
function handleOuterHover(event) {
if (event.type === "mouseenter") {
outerPaused = true;
} else {
outerPaused = false;
}
}
function handleInnerHover(event) {
if (event.type === "mouseenter") {
innerPaused = true;
} else {
innerPaused = false;
}
}
function handleTestimonialHover(event) {
const testimonial = event.currentTarget;
const popup = testimonial.querySelector(".content");
if (!popup) return;
const pinOffset = testimonial.getBoundingClientRect();
const pinWidth = testimonial.offsetWidth;
const wrapOffset = container.getBoundingClientRect();
const popupWidth = popup.offsetWidth;
const windowWidth = window.innerWidth;
const windowOffsetTop = window.scrollY;
const thisOffsetToWindow = pinOffset.top - windowOffsetTop;
const windowHeight = window.innerHeight;
if (pinOffset.left + popupWidth > windowWidth) {
popup.style.left = `-${
pinOffset.left + popupWidth - windowWidth + 15
}px`;
const arrow = popup.querySelector(".arrow");
if (arrow) {
arrow.style.left = `${
pinOffset.left + popupWidth - windowWidth + 47
}px`;
}
} else {
const arrow = popup.querySelector(".arrow");
if (arrow) {
arrow.style.left = "auto";
}
popup.style.left = "0";
}
if (thisOffsetToWindow > windowHeight / 2) {
popup.classList.add("top");
popup.classList.remove("bottom");
} else {
popup.classList.remove("top");
popup.classList.add("bottom");
}
}
function handleResize() {
updateElementWidth();
updatePositions();
}
// Add event listeners
outerElements.forEach((el) => {
el.addEventListener("mouseenter", handleOuterHover);
el.addEventListener("mouseleave", handleOuterHover);
});
innerElements.forEach((el) => {
el.addEventListener("mouseenter", handleInnerHover);
el.addEventListener("mouseleave", handleInnerHover);
});
testimonialElements.forEach((el) => {
el.addEventListener("mouseenter", handleTestimonialHover);
});
window.addEventListener("resize", handleResize);
// Initialize
updateElementWidth();
updatePositions();
animate();
// Cleanup
return () => {
cancelAnimationFrame(animationFrameId);
outerElements.forEach((el) => {
el.removeEventListener("mouseenter", handleOuterHover);
el.removeEventListener("mouseleave", handleOuterHover);
});
innerElements.forEach((el) => {
el.removeEventListener("mouseenter", handleInnerHover);
el.removeEventListener("mouseleave", handleInnerHover);
});
testimonialElements.forEach((el) => {
el.removeEventListener("mouseenter", handleTestimonialHover);
});
window.removeEventListener("resize", handleResize);
};
}, []);
return (
<div className="section-testimonial style-2 tf-spacing-23 pt-0 hide-md">
<div className="tf-container-2">
<div className="row">
<div className="col-12 position-relative testimonial-container">
<div className="heading-section">
<div className="heading-tag style-2 v2 text-body-3 mb_11 mx-auto">
TESTIMONIAL
</div>
<h1
className="heading-title fw-6 text_primary-fa-yellow split-text split-lines-rotation-x"
style={{ perspective: "400px" }}
>
<div
className="split-line"
style={{
display: "block",
textAlign: "center",
position: "relative",
transformOrigin: "238.219px 36px",
transform: "translate(0px, 0px)",
opacity: 1,
}}
>
Customer
</div>
<div
className="split-line"
style={{
display: "block",
textAlign: "center",
position: "relative",
transformOrigin: "238.219px 36px",
transform: "translate(0px, 0px)",
opacity: 1,
}}
>
Testimonial
</div>
</h1>
<div
className="text-body-1 text_primary-fa-yellow mt_27 split-text split-lines-transform"
style={{ perspective: "400px" }}
>
<div
className="split-line"
style={{
display: "block",
textAlign: "center",
position: "relative",
opacity: 1,
visibility: "inherit",
transform: "translate(0px, 0px)",
}}
>
Trusted by businesses and individuals, see how we’ve made a
</div>
<div
className="split-line"
style={{
display: "block",
textAlign: "center",
position: "relative",
opacity: 1,
visibility: "inherit",
transform: "translate(0px, 0px)",
}}
>
real impact on their financial well-being
</div>
</div>
</div>
<div
className="circle-container"
style={{ "--circle-container-width": "1434px" }}
>
{[
{
img: "/images/avatar/avatar-5.jpg",
width: 100,
height: 100,
transform: "-434.685px, 535.12px",
left: "0px",
},
{
img: "/images/avatar/avatar-13.jpg",
width: 96,
height: 96,
transform: "-643.254px, -248.049px",
left: "0px",
},
{
img: "/images/avatar/avatar-9.jpg",
width: 96,
height: 96,
transform: "37.1317px, -688.422px",
},
{
img: "/images/avatar/avatar-10.jpg",
width: 96,
height: 96,
transform: "666.203px, -177.42px",
},
{
img: "/images/avatar/avatar-11.jpg",
width: 96,
height: 96,
transform: "374.604px, 578.771px",
left: "-109.684px",
arrowLeft: "141.684px",
},
].map((item, index) => (
<div
key={index}
className="testimonial outer-element style-1"
style={{ transform: `translate(${item.transform})` }}
>
<div className="avatar">
<Image
alt="avatar"
src={item.img}
width={item.width}
height={item.height}
/>
</div>
<div
className={`content ${item.left ? "top" : ""}`}
style={{ left: item.left || undefined }}
>
<p className="text text_dark text-body-1 fw-5">
Advitex provided exceptional financial guidance that
transformed my investment approach. Their expertise and
personalized advice made all the difference. Highly
recommend!"
</p>
<div className="info">
<h6 className="name fw-5 text_dark">James Waverly</h6>
<p className="text_mono-gray-5 text-body-2">
Senior Wealth Manager
</p>
</div>
<span
className="arrow"
style={{ left: item.arrowLeft || "auto" }}
></span>
</div>
</div>
))}
</div>
<div className="inner-container">
{[
{
img: "/images/avatar/avatar-12.jpg",
transform: "-75.2548px, 414.997px",
position: "top",
},
{
img: "/images/avatar/avatar-8.jpg",
transform: "75.2548px, -414.997px",
position: "bottom",
},
].map((item, index) => (
<div
key={index}
className="testimonial style-1 inner-element"
style={{ transform: `translate(${item.transform})` }}
>
<div className="avatar">
<Image alt="avatar" src={item.img} width="96" height="96" />
</div>
<div
className={`content ${item.position}`}
style={{ left: "0px" }}
>
<p className="text text_dark text-body-1 fw-5">
Advitex provided exceptional financial guidance that
transformed my investment approach. Their expertise and
personalized advice made all the difference. Highly
recommend!"
</p>
<div className="info">
<h6 className="name fw-5 text_dark">James Waverly</h6>
<p className="text_mono-gray-5 text-body-2">
Senior Wealth Manager
</p>
</div>
<span className="arrow" style={{ left: "auto" }}></span>
</div>
</div>
))}
</div>
<div className="bg">
<Image
alt="background"
src="/images/section/bg-testimonial.png"
width="1410"
height="1410"
/>
</div>
</div>
</div>
</div>
</div>
);
}

86
components/homes/finance-consulting/About.jsx Normal file
View File

@ -0,0 +1,86 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
export default function About() {
return (
<div className="section-about tf-spacing-7 pt-0">
<div className="tf-container-3">
<div className="box-about style-1">
<div className="img-style img-custom-anim-left wow">
<Image
className="lazyload"
data-src="/images/section/section-about.jpg"
alt="testimonial"
src="/images/section/section-about.jpg"
width={510}
height={698}
/>
</div>
<div className="content">
<div className="heading-section">
<div className="heading-tag style-1 text_mono-gray-5 text-body-2 mb_13">
About Us
</div>
<h3 className="split-text split-lines-rotation-x">
Welcome to Advitex – driving your financial success with
strategic expertise and solutions
</h3>
</div>
<div className="bot">
<div className="clutch-rating-item style-1 d-flex align-items-center">
<div className="logo">
<svg
width={34}
height={38}
viewBox="0 0 34 38"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M33.363 31.4385C29.8792 35.4578 24.7365 38 19 38C8.50659 38 0 29.4934 0 19C0 8.50659 8.50659 0 19 0C24.7364 0 29.879 2.54213 33.3628 6.56127L27.8911 11.2998C25.7345 8.81185 22.551 7.23818 19 7.23818C12.5041 7.23818 7.23807 12.5042 7.23807 19.0001C7.23807 25.496 12.5041 30.762 19 30.762C22.5512 30.762 25.7348 29.1882 27.8914 26.7L33.363 31.4385Z"
fill="black"
/>
<ellipse
cx="19.0003"
cy="19.0003"
rx="6.33333"
ry="6.33333"
fill="#EF2B10"
/>
</svg>
</div>
<div>
<div className="wrap-ratings d-flex gap_13 align-items-center">
<div className="text-body-1 fw-6 font2 fw-6">4.9/5</div>
<div className="ratings">
<i className="icon-star-solid" />
<i className="icon-star-solid" />
<i className="icon-star-solid" />
<i className="icon-star-solid" />
<i className="icon-star-solid" />
</div>
</div>
<p className="text-body-4">Based on 24 reviews</p>
</div>
</div>
<p className="text-body-1 text_mono-gray-7 mb_31">
Their expert guidance in streamlining our cash flow processes
and optimizing operational costs has saved us 18% in annual
expenditures.
</p>
<Link
href={`/about`}
className="tf-btn btn-dark rounded-0 btn-px-28 height-2"
>
<span>View Details</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
</div>
</div>
);
}

115
components/homes/finance-consulting/Blogs.jsx Normal file
View File

@ -0,0 +1,115 @@
"use client";
import { blogArticles2 } from "@/data/blogs";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
import { Pagination } from "swiper/modules";
export default function Blogs() {
return (
<div className="section-blog style-1 sw-layout-1">
<div className="tf-container">
<div className="row">
<div className="col-12">
<div className="heading-section d-flex justify-content-between flex-wrap-md gap_12 align-items-end mb_63">
<div className="left">
<div className="heading-tag style-1 text_mono-gray-5 text-body-2 mb_15">
Blogs
</div>
<h3 className="split-text split-lines-rotation-x">
Stay informed with expert insights, tips, and <br />
strategies designed to help you navigate
</h3>
</div>
<div className="right">
<div className="sw-progress swiper-pagination sw-progress-layout-1 spd2" />
</div>
</div>
</div>
</div>
</div>
<div
className="tf-container slider-layout-right w-xl wow animate__fadeInRight animate__animated"
data-wow-delay="0s"
>
<Swiper
className="swiper"
spaceBetween={15}
breakpoints={{
0: { slidesPerView: 1.1 },
575: {
slidesPerView: 1.1,
},
768: {
slidesPerView: 1.5,
spaceBetween: 20,
},
992: {
slidesPerView: 3.4,
spaceBetween: 30,
},
1200: {
slidesPerView: 3.9,
spaceBetween: 72,
},
}}
modules={[Pagination]}
pagination={{
type: "progressbar",
clickable: true,
el: ".spd2",
}}
data-pagination-type="progressbar"
>
{blogArticles2.map((article) => (
<SwiperSlide className="swiper-slide" key={article.id}>
<div className="blog-article-item style-1 hover-image-3">
<Link
href={`/single-post/${article.id}`}
className="article-thumb mb_30"
>
<Image
className="lazyload"
data-src={article.imageSrc}
alt="blog"
src={article.imageSrc}
width={article.width}
height={article.height}
/>
<Image
className="lazyload"
data-src={article.imageSrc}
alt="blog"
src={article.imageSrc}
width={article.width}
height={article.height}
/>
<div className="tag text-body-3 text_white d-flex flex-column">
<h6 className="text_white">{article.day}</h6>
<span>{article.month}</span>
</div>
</Link>
<div className="article-content mb_25">
<h6 className="title fw-5 letter-spacing-2 mb_8">
<Link href={`/single-post/${article.id}`} className="link">
{article.title}
</Link>
</h6>
<p className="text-body-1 text_mono-gray-5">
{article.description}
</p>
</div>
<Link
href={`/single-post/${article.id}`}
className="btn_link text-body-1 link-black"
>
Read it
</Link>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
);
}

98
components/homes/finance-consulting/CaseStudies.jsx Normal file
View File

@ -0,0 +1,98 @@
"use client";
import { caseStudies2 } from "@/data/caseStudies";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Image from "next/image";
import { EffectFade, Navigation, Pagination } from "swiper/modules";
export default function CaseStudies() {
return (
<div className="section-case-studies style-2 tf-spacing-20">
<div className="tf-container">
<div className="heading-section text-center mb_61">
<div className="heading-tag style-1 text_mono-gray-5 text-body-2 mb_16 mx-auto">
Case Study
</div>
<h3 className="split-text effect-right">
Explore real-life examples of how our solutions have driven results
</h3>
</div>
<Swiper
className="swiper sw-single effect-content-slide"
effect="fade"
modules={[EffectFade, Navigation, Pagination]}
pagination={{
el: ".csp1",
}}
navigation={{
prevEl: ".snbpc1",
nextEl: ".snbnc1",
}}
>
{caseStudies2.map((study) => (
<SwiperSlide className="swiper-slide" key={study.id}>
<div className="case-studies-item style-2">
<div className="tf-grid-layout md-col-2">
<div className="content d-flex flex-column justify-content-between">
<div className="heading">
<p className="text-body-1 text-uppercase text_mono-gray-6 mb_20 effect-item effect-left effect-1">
{study.tags}
</p>
<h1 className="effect-item effect-left effect-2">
{study.title}
</h1>
</div>
<div className="bot">
<div className="wrap-sw-button d-flex mb_22 hide-md">
<div className="sw-button style-1 sw-single-prev snbpc1">
<i className="icon-caret-left" />
</div>
<div className="sw-button style-1 sw-single-next snbnc1">
<i className="icon-caret-right" />
</div>
</div>
<p className="text_mono-gray-6 text-body-1 mb_40">
{study.description}
</p>
<a
href="#"
className="tf-btn btn-dark height-2 btn-px-30 rounded-0"
>
<span className="">View Details</span>
<span className="bg-effect" />
</a>
</div>
</div>
<div className="right overflow-hidden position-relative">
<div className="img-style effect-img-zoom effect-item effect-right effect-3">
<Image
className="lazyload img-zoom"
data-src={study.imageSrc}
alt="case-studies"
src={study.imageSrc}
width={787}
height={826}
/>
</div>
<div className="highlight effect-item effect-right effect-4">
<h6 className="text_primary">{study.highlightText}</h6>
<div className="icon">
<Image
alt="icon"
src={study.highlightIcon}
width={study.highlightIconWidth}
height={study.highlightIconHeight}
/>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
))}
<div className="sw-dots style-default sw-pagination-single justify-content-center d-flex d-md-none csp1" />
</Swiper>
</div>
</div>
);
}

109
components/homes/finance-consulting/Cta.jsx Normal file
View File

@ -0,0 +1,109 @@
"use client";
import React, { useEffect } from "react";
import Link from "next/link";
export default function Cta() {
useEffect(() => {
if (typeof window !== "undefined") {
import("simple-parallax-js/vanilla").then(
({ default: SimpleParallax }) => {
const elements = document.querySelectorAll(".parallaxie");
if (elements.length > 0) {
elements.forEach((element) => {
new SimpleParallax(element, {
delay: 0.5,
orientation: "up",
scale: 1.7,
transition: "cubic-bezier(0.2, 0.8, 1, 1)",
customContainer: "",
customWrapper: "",
});
});
}
}
);
}
}, []);
return (
<>
<div className="section-CTA tf-spacing-21">
<div className="tf-container">
<div className="box-inner">
<div className="row">
<div className="col-lg-7">
<div className="left d-flex flex-column justify-content-between">
<div className="heading-section">
<h1 className="text_white split-text effect-right">
Let Us Guide You Toward Clarity
</h1>
<p
className="text-body-2 text_mono-gray-3 mt_13 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
Firms using legacy systems experience 30% slower
decision-making <br />
processes and up to 40% higher operational costs.
</p>
</div>
<Link
href={`/contact-us`}
className="tf-btn btn-white rounded-0 btn-px-28 height-2 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
<span>Get in touch</span>
<span className="bg-effect" />
</Link>
</div>
</div>
<div className="col-lg-5">
<ul className="list d-flex flex-column gap_17">
<li
className="text-body-1 text_white d-flex align-items-center gap_24 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
<i className="icon-check-solid" />
We offering customized strategies that truly work for you
</li>
<li
className="text-body-1 text_white d-flex align-items-center gap_24 wow animate__fadeInUp animate__animated"
data-wow-delay="0.1s"
>
<i className="icon-check-solid" />
Brings the knowledge and insights you need to make informed
decisions that drive success.
</li>
<li
className="text-body-1 text_white d-flex align-items-center gap_24 wow animate__fadeInUp animate__animated"
data-wow-delay="0.2s"
>
<i className="icon-check-solid" />
Cancel anytime you want
</li>
<li
className="text-body-1 text_white d-flex align-items-center gap_24 wow animate__fadeInUp animate__animated"
data-wow-delay="0.3s"
>
<i className="icon-check-solid" />
Proven Results and Client Satisfaction
</li>
<li
className="text-body-1 text_white d-flex align-items-center gap_24 wow animate__fadeInUp animate__animated"
data-wow-delay="0.4s"
>
<i className="icon-check-solid" />
Comprehensive package for all stages
</li>
</ul>
</div>
</div>
</div>
<div
className="wrap parallaxie"
style={{ background: 'url("/images/section/cta.jpg")' }}
/>
</div>
</div>
</>
);
}

185
components/homes/finance-consulting/Faqs.jsx Normal file
View File

@ -0,0 +1,185 @@
import React from "react";
export default function Faqs() {
return (
<div className="section-faqs style-3 tf-spacing-22">
<div className="tf-container">
<div className="row">
<div className="col-lg-6">
<div className="heading-section sticky-element">
<div className="heading-tag style-1 text_mono-gray-5 text-body-2 mb_12">
FAQs
</div>
<h2 className="split-text split-lines-rotation-x">
Have questions? Explore our FAQs for clear insights and quick
solutions
</h2>
</div>
</div>
<div className="col-lg-6">
<ul
className="accordion-wrap style-faqs d-grid gap_24"
id="accordion-faq-2"
>
<li className="accordion-item action_click style-1 scrolling-effect effectRight">
<a
href="#accordion-2-1"
className="action accordion-title collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-2-1"
>
<div className="heading">
<div className="text_mono-dark-9 text-body-1 title fw-5">
Do you provide personalized financial plans?
</div>
</div>
<div className="icon" />
</a>
<div
id="accordion-2-1"
className="collapse"
data-bs-parent="#accordion-faq-2"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2">
Advitex offers a range of financial consulting services,
including personal financial planning, corporate strategy,
investment advisory, and risk compliance. We tailor our
solutions to help individuals, businesses, and investors
achieve their financial goals efficiently.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click active style-1 scrolling-effect effectRight">
<a
href="#accordion-2-2"
className="action accordion-title current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-2-2"
>
<div className="heading">
<div className="text_mono-dark-9 text-body-1 title fw-5">
How can financial consulting benefit my business?
</div>
</div>
<div className="icon" />
</a>
<div
id="accordion-2-2"
className="collapse show"
data-bs-parent="#accordion-faq-2"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2">
Advitex offers a range of financial consulting services,
including personal financial planning, corporate strategy,
investment advisory, and risk compliance. We tailor our
solutions to help individuals, businesses, and investors
achieve their financial goals efficiently.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click style-1 scrolling-effect effectRight">
<a
href="#accordion-2-3"
className="action accordion-title collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-2-3"
>
<div className="heading">
<div className="text_mono-dark-9 text-body-1 title fw-5">
What services does Advitex offer?
</div>
</div>
<div className="icon" />
</a>
<div
id="accordion-2-3"
className="collapse"
data-bs-parent="#accordion-faq-2"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2">
Advitex offers a range of financial consulting services,
including personal financial planning, corporate strategy,
investment advisory, and risk compliance. We tailor our
solutions to help individuals, businesses, and investors
achieve their financial goals efficiently.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click style-1 scrolling-effect effectRight">
<a
href="#accordion-2-4"
className="action accordion-title collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-2-4"
>
<div className="heading">
<div className="text_mono-dark-9 text-body-1 title fw-5">
What industries do you specialize in?
</div>
</div>
<div className="icon" />
</a>
<div
id="accordion-2-4"
className="collapse"
data-bs-parent="#accordion-faq-2"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2">
Advitex offers a range of financial consulting services,
including personal financial planning, corporate strategy,
investment advisory, and risk compliance. We tailor our
solutions to help individuals, businesses, and investors
achieve their financial goals efficiently.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click style-1 scrolling-effect effectRight">
<a
href="#accordion-2-5"
className="action accordion-title collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-2-5"
>
<div className="heading">
<div className="text_mono-dark-9 text-body-1 title fw-5">
How long does the consultation process take?
</div>
</div>
<div className="icon" />
</a>
<div
id="accordion-2-5"
className="collapse"
data-bs-parent="#accordion-faq-2"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2">
Advitex offers a range of financial consulting services,
including personal financial planning, corporate strategy,
investment advisory, and risk compliance. We tailor our
solutions to help individuals, businesses, and investors
achieve their financial goals efficiently.
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
);
}

71
components/homes/finance-consulting/Features.jsx Normal file
View File

@ -0,0 +1,71 @@
import React from "react";
import Image from "next/image";
import Link from "next/link";
export default function Features() {
return (
<div className="section-about tf-spacing-19">
<div className="tf-container-3">
<div className="box-choose style-1">
<div className="content">
<div className="heading-section">
<div className="heading-tag style-1 text_mono-gray-5 text-body-2 mb_15">
Why Choose Us
</div>
<h3 className="split-text effect-right">
Turn your vision into a financially sound strategy
</h3>
<p className="text-body-1 mt_23 split-text split-lines-transform">
Their expert guidance in streamlining our cash flow processes
and optimizing operational costs has saved us 18% in annual
expenditures.
</p>
</div>
<div className="bot">
<ul className="list-check">
<li
className="text-body-1 d-flex align-items-center gap_16 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
<i className="icon-check-solid" />
Customized financial roadmaps
</li>
<li
className="text-body-1 d-flex align-items-center gap_16 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
<i className="icon-check-solid" />
Cash flow forecasting and budgeting
</li>
<li
className="text-body-1 d-flex align-items-center gap_16 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
<i className="icon-check-solid" />
Long-term growth and sustainability strategies
</li>
</ul>
<Link
href={`/about`}
className="tf-btn btn-dark rounded-0 btn-px-28 height-2 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
<span>View Details</span>
<span className="bg-effect" />
</Link>
</div>
</div>
<div className="img-style img-custom-anim-right wow">
<Image
className="lazyload"
data-src="/images/section/section-choose.jpg"
alt="testimonial"
src="/images/section/section-choose.jpg"
width={510}
height={698}
/>
</div>
</div>
</div>
</div>
);
}

103
components/homes/finance-consulting/Hero.jsx Normal file
View File

@ -0,0 +1,103 @@
"use client";
import { bannerSlides } from "@/data/heroSlides";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
const brands = [
{ id: 1, src: "/images/brands/brand-1.png", width: 169, height: 56 },
{ id: 2, src: "/images/brands/brand-2.png", width: 169, height: 56 },
{ id: 3, src: "/images/brands/brand-3.png", width: 213, height: 56 },
{ id: 4, src: "/images/brands/brand-4.png", width: 187, height: 56 },
{ id: 5, src: "/images/brands/brand-5.png", width: 169, height: 56 },
{ id: 6, src: "/images/brands/brand-6.png", width: 169, height: 56 },
{ id: 7, src: "/images/brands/brand-7.png", width: 169, height: 56 },
{ id: 8, src: "/images/brands/brand-8.png", width: 168, height: 56 },
];
export default function Hero() {
const allBrands = [...brands, ...brands, ...brands];
return (
<div className="page-title style-2">
<div className="tf-container">
<div className="row">
<div className="col-12">
<div className="heading-title d-flex mb_66">
<div className="left">
<h4 className="sub text_mono-gray-5 mb_11 split-text effect-left">
Lost in Financial Planning?
</h4>
<h1 className="title split-text effect-right">
Let us managing your future
</h1>
</div>
<div className="right">
<p className="text_mono-gray-6 sub-heading mb_17 split-text split-lines-transform">
Providing expert financial consulting services to help you
grow, <br />
optimize, and thrive in today's competitive landscape
</p>
<div className="wrap-btn d-flex gap_20">
<Link
href={`/services`}
className="tf-btn btn-primary2 btn-px-28 height-2 rounded-0"
>
<span>Our Services</span>
<span className="bg-effect" />
</Link>
<Link
href={`/contact-us`}
className="tf-btn btn-border btn-px-28 height-2 rounded-0"
>
<span>Book a Free Consulting</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
<Swiper className="swiper sw-single" data-effect="fade">
{bannerSlides.map((slide) => (
<SwiperSlide className="swiper-slide" key={slide.id}>
<div className="slide-inner">
<Image
className="lazyload"
data-src={slide.imageSrc}
alt="banner"
src={slide.imageSrc}
width={slide.width}
height={slide.height}
/>
<h3 className="title text_white">{slide.title}</h3>
</div>
</SwiperSlide>
))}
<div className="sw-line sw-pagination-single" />
</Swiper>
<div className="infiniteslide_wrap" style={{ overflow: "hidden" }}>
<div
className="infiniteslide tf-marquee infiniteSlide"
data-clone={2}
>
{allBrands.map((elm, i) => (
<div
key={i}
className="marquee-item style-2"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-1">
<Image
alt=""
src={elm.src}
width={elm.width}
height={elm.height}
/>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
);
}

279
components/homes/finance-consulting/MarqueeSlide.jsx Normal file
View File

@ -0,0 +1,279 @@
import React from "react";
export default function MarqueeSlide() {
return (
<div className="wrap-infiniteslide">
<div className="infiniteslide_wrap" style={{ overflow: "hidden" }}>
<div
className="infiniteslide tf-marquee style-2 infiniteSlide"
style={{ animationDirection: "reverse" }}
>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="text-inner">
<h3>
Strategize <span className="text_mono-gray-5">for</span> Growth
</h3>
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
</div>
</div>
</div>
);
}

189
components/homes/finance-consulting/Process.jsx Normal file
View File

@ -0,0 +1,189 @@
import React from "react";
import Link from "next/link";
export default function Process() {
return (
<div className="section-work style-1">
<div className="tf-container-3">
<div className="row">
<div className="col-lg-5">
<div className="sticky-element left">
<div className="heading-section mb_34">
<div className="heading-tag style-1 text_mono-gray-5 text-body-2 mb_15">
How It Works
</div>
<h3 className="split-text split-lines-rotation-x">
Turn your vision into a financially strategy
</h3>
<p
className="text-body-1 text_mono-gray-5 mt_23 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
Their expert guidance in streamlining our cash flow processes
and optimizing operational costs has saved us 18% in annual
expenditures.
</p>
</div>
<Link
href={`/pricing`}
className="tf-btn btn-dark rounded-0 btn-px-30 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
<span>See Pricing Plan</span>
<span className="bg-effect" />
</Link>
</div>
</div>
<div className="col-lg-7">
<div className="step-container">
<div className="tf-box-icon style-3 effect-icon active">
<span className="number text-body-1">1</span>
<div className="icon">
<svg
width={40}
height={40}
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M32.0854 16.3555C31.9479 16.2783 31.7753 16.2384 31.596 16.2529C31.4967 16.261 31.3592 16.3037 30.5205 16.6857C30.1542 16.8525 29.9486 16.9485 29.79 17.0634C29.6691 17.1511 29.6301 17.2125 29.6053 17.2854C29.6032 17.2944 29.5971 17.3271 29.5924 17.4041C29.5844 17.533 29.5839 17.7045 29.5839 18.0074V25.3259C29.5839 25.6288 29.5844 25.8003 29.5924 25.9292C29.5971 26.0062 29.6032 26.0389 29.6053 26.0479C29.6301 26.1208 29.669 26.1822 29.79 26.2699C29.9486 26.3848 30.1542 26.4808 30.5205 26.6476C31.3592 27.0296 31.4967 27.0724 31.596 27.0804C31.7753 27.0949 31.9479 27.055 32.0854 26.9778C32.1486 26.9423 32.2336 26.8713 32.8018 26.1811C33.0308 25.9031 33.2442 25.657 33.45 25.4196C33.757 25.0657 34.0472 24.7311 34.3474 24.3383C34.8142 23.7273 35.1396 23.1721 35.2873 22.6313C35.4605 21.9972 35.4605 21.3361 35.2873 20.702C35.1969 20.371 35.0168 20.0043 34.6299 19.4549C34.2342 18.8932 33.68 18.2189 32.882 17.2495C32.7678 17.1108 32.6929 17.0143 32.6276 16.93C32.5492 16.8289 32.4844 16.7454 32.3816 16.6276C32.2366 16.4615 32.144 16.3884 32.0854 16.3555ZM29.606 26.0506C29.606 26.0506 29.6058 26.0499 29.6053 26.0481L29.606 26.0506ZM29.606 17.2827C29.606 17.2828 29.6058 17.2837 29.6053 17.2852L29.606 17.2827ZM31.3945 13.7611C32.0568 13.7075 32.7273 13.8489 33.309 14.1754C33.7272 14.4101 34.0393 14.7251 34.2649 14.9835C34.3895 15.1262 34.5579 15.3398 34.6805 15.4952C34.7371 15.567 34.7839 15.6263 34.812 15.6605L33.847 16.455L34.812 15.6605L34.8428 15.6979C35.6029 16.621 36.2175 17.3676 36.6737 18.0152C37.1448 18.684 37.5017 19.3212 37.6989 20.0432C37.99 21.1086 37.99 22.2247 37.6989 23.2901C37.4271 24.2852 36.8799 25.1416 36.3338 25.8562C36.0032 26.2888 35.6023 26.7534 35.2492 27.1626C35.056 27.3864 34.8772 27.5937 34.7319 27.7702L33.7669 26.9756L34.7319 27.7702C34.6998 27.8092 34.6677 27.8482 34.6358 27.8872C34.234 28.3774 33.8374 28.8614 33.309 29.1579C32.7273 29.4844 32.0568 29.6258 31.3945 29.5723C30.7983 29.524 30.2292 29.2636 29.6243 28.9868C29.5778 28.9655 29.5312 28.9441 29.4842 28.9227C29.4504 28.9074 29.4141 28.8911 29.3755 28.8739C28.7819 28.6087 27.6627 28.1086 27.2364 26.8468C27.0813 26.3879 27.0826 25.8973 27.0837 25.4408C27.0838 25.4022 27.0839 25.3639 27.0839 25.3259V18.0074C27.0839 17.9694 27.0838 17.9311 27.0837 17.8926C27.0826 17.436 27.0813 16.9454 27.2364 16.4865C27.6627 15.2247 28.7819 14.7246 29.3755 14.4594C29.4141 14.4422 29.4504 14.426 29.4842 14.4106C29.5312 14.3892 29.5778 14.3678 29.6243 14.3466C30.2292 14.0698 30.7983 13.8093 31.3945 13.7611Z"
fill="#121416"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.90244 16.4064C8.06687 16.2834 8.19868 16.2365 8.40526 16.2533C8.5046 16.2613 8.64209 16.304 9.4808 16.686C10.1201 16.9772 10.1972 17.0261 10.2403 17.0636C10.315 17.1285 10.3455 17.1821 10.3704 17.283C10.4071 17.4317 10.4174 17.6294 10.4174 18.0077V25.3262C10.4174 25.7046 10.4071 25.9022 10.3704 26.051C10.3455 26.1518 10.315 26.2055 10.2403 26.2704C10.1972 26.3079 10.1201 26.3568 9.48081 26.648C8.64209 27.03 8.5046 27.0727 8.40526 27.0807C8.20323 27.0971 8.07739 27.0527 7.92834 26.9466C7.72706 26.8035 7.52444 26.5762 7.19946 26.1815C6.97052 25.9034 6.75714 25.6574 6.55127 25.42C6.24434 25.0661 5.95411 24.7314 5.65394 24.3386C5.18708 23.7276 4.86175 23.1725 4.71401 22.6317C4.54078 21.9976 4.54078 21.3364 4.71401 20.7023C4.80443 20.3714 4.98446 20.0046 5.37143 19.4553C5.76711 18.8935 6.32126 18.2192 7.11932 17.2499C7.47075 16.823 7.67975 16.573 7.90244 16.4064ZM5.18929 15.6608L6.1543 16.4553L5.18929 15.6608L5.15847 15.6983C4.39845 16.6214 3.78383 17.3679 3.3276 18.0156C2.85651 18.6843 2.49963 19.3215 2.30239 20.0435C2.01133 21.1089 2.01133 22.2251 2.30239 23.2905C2.57421 24.2855 3.12143 25.1419 3.66752 25.8565C3.99811 26.2892 4.39899 26.7537 4.75212 27.1629C4.94527 27.3867 5.12415 27.594 5.26943 27.7705L6.23444 26.976L5.26943 27.7705C5.28471 27.789 5.30029 27.808 5.31618 27.8274C5.88936 28.5254 6.865 29.7135 8.60679 29.5726C9.20297 29.5244 9.77215 29.2639 10.377 28.9871C10.4235 28.9658 10.4701 28.9445 10.5171 28.9231C10.5534 28.9065 10.5898 28.89 10.6261 28.8736C11.0806 28.6675 11.5258 28.4657 11.8809 28.1568C12.919 27.254 12.918 26.0623 12.9175 25.3733C12.9174 25.3573 12.9174 25.3416 12.9174 25.3262V18.0077C12.9174 17.9923 12.9174 17.9767 12.9175 17.9607C12.918 17.2716 12.919 16.08 11.8809 15.1772C11.5258 14.8683 11.0806 14.6665 10.6261 14.4604C10.5898 14.4439 10.5534 14.4275 10.5171 14.4109C10.4702 14.3895 10.4235 14.3682 10.377 14.3469C9.77215 14.0701 9.20297 13.8096 8.60679 13.7614C6.84856 13.6192 5.85495 14.8421 5.28724 15.5408C5.25307 15.5828 5.22044 15.623 5.18929 15.6608Z"
fill="#121416"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M20.0002 6.25C14.0595 6.25 9.5835 10.3413 9.5835 15V16.25H7.0835V15C7.0835 8.61296 13.0542 3.75 20.0002 3.75C26.9461 3.75 32.9168 8.61296 32.9168 15V16.25H30.4168V15C30.4168 10.3413 25.9408 6.25 20.0002 6.25Z"
fill="#121416"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31.6675 27.084C32.3578 27.084 32.9175 27.6436 32.9175 28.334V29.6673C32.9175 33.5491 29.0984 36.2507 25.0008 36.2507H21.6675C20.9771 36.2507 20.4175 35.691 20.4175 35.0007C20.4175 34.3103 20.9771 33.7507 21.6675 33.7507H25.0008C28.2671 33.7507 30.4175 31.6766 30.4175 29.6673V28.334C30.4175 27.6436 30.9771 27.084 31.6675 27.084Z"
fill="#121416"
/>
</svg>
</div>
<div className="content">
<h6 className="title">
Initial Consultation &amp; Assessment
</h6>
<p className="text-body-2 text_mono-gray-5">
Understand your spending habits and make informed decisions.
We can make it!
</p>
</div>
</div>
<div className="tf-box-icon style-3 effect-icon">
<span className="number text-body-1">2</span>
<div className="icon">
<svg
width={40}
height={40}
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.3325 33.3333C12.4758 34.4957 12.1282 34.9001 11.4237 34.9881C10.7193 35.0761 10.2322 34.6728 9.25814 33.8662C5.63434 30.8656 3.33252 26.3756 3.33252 21.3579C3.33252 12.3237 10.7944 5 19.9992 5C29.2039 5 36.6659 12.3237 36.6659 21.3579C36.6659 26.3756 34.364 30.8656 30.7402 33.8662C29.7661 34.6728 29.2791 35.0761 28.5746 34.9881C27.8702 34.9001 27.5226 34.4957 26.6659 33.3333"
stroke="#121416"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M22.499 17.5L29.999 8.33337"
stroke="#121416"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<circle
cx="19.999"
cy={20}
r="2.5"
stroke="#121416"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<div className="content">
<h6 className="title">
Strategic Planning &amp; Development
</h6>
<p className="text-body-2 text_mono-gray-5">
Develop a comprehensive financial strategy that aligns with
your long-term goals.
</p>
</div>
</div>
<div className="tf-box-icon style-3 effect-icon">
<span className="number text-body-1">3</span>
<div className="icon">
<svg
width={34}
height={34}
viewBox="0 0 34 34"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.3335 25.3333L10.3335 20.3333"
stroke="#141B34"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17 20.3333L17 11.9999"
stroke="#141B34"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M23.6665 12L23.6665 7"
stroke="#141B34"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M30.3335 13.6667L30.3335 3.66675"
stroke="#141B34"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2 2V20.3333C2 25.8331 2 28.5829 3.70854 30.2915C5.41709 32 8.16695 32 13.6667 32H32"
stroke="#141B34"
strokeWidth="2.5"
strokeLinecap="round"
/>
</svg>
</div>
<div className="content">
<h6 className="title">Ongoing Monitor &amp; Adjustments</h6>
<p className="text-body-2 text_mono-gray-5">
Continuously monitor your financial progress and adapt the
plan as needed.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

105
components/homes/finance-consulting/Services.jsx Normal file
View File

@ -0,0 +1,105 @@
"use client";
import { serviceBoxes } from "@/data/services";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
import { Navigation, Pagination } from "swiper/modules";
export default function Services() {
return (
<div className="section-service style-2 tf-spacing-18">
<div className="tf-container-3">
<div className="heading-section d-flex gap_12 justify-content-between align-items-end flex-wrap-md mb_62">
<div className="left">
<div className="heading-tag style-1 text_mono-gray-5 text-body-2 mb_15">
Service
</div>
<h3 className="split-text effect-right">
Strategic services for you to maintain <br />
sustainable growth
</h3>
</div>
<div className="right">
<Link
href={`/services`}
className="tf-btn btn-dark rounded-0 btn-px-28 height-2 mb_10"
>
<span>See our services</span>
<span className="bg-effect" />
</Link>
</div>
</div>
<div
className="sw-layout-1 position-relative wow animate__fadeInRight animate__animated"
data-wow-delay="0s"
>
<Swiper
className="swiper"
breakpoints={{
0: { slidesPerView: 1 },
575: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
992: {
slidesPerView: 3,
spaceBetween: 16,
},
}}
spaceBetween={15}
modules={[Navigation, Pagination]}
pagination={{
clickable: true,
el: ".spd4",
}}
navigation={{
prevEl: ".snbp4",
nextEl: ".snbn4",
}}
>
{serviceBoxes.map((service) => (
<SwiperSlide className="swiper-slide" key={service.id}>
<div className="tf-box-icon style-2 effect-icon">
<span className="number">{service.number}</span>
<div className="content">
<div className="icon mb_16">
<Image
alt=""
src={service.iconSrc}
width={48}
height={48}
/>
</div>
<h6 className="fw-5 mb_11">
<a href="#" className="link">
{service.title}
</a>
</h6>
<p className="text-body-2 text_mono-gray-5">
{service.description}
</p>
<a
href="#"
className="text-body-1 text_primary link-black btn_link"
>
Book a call
</a>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
<div className="sw-button style-default nav-prev-layout-1 xl-hide snbp4">
<i className="icon-arrow-left-01" />
</div>
<div className="sw-button style-default nav-next-layout-1 xl-hide snbn4">
<i className="icon-arrow-right-01" />
</div>
<div className="sw-dots style-default sw-pagination-layout-1 mt_20 justify-content-center d-flex d-xl-none spd4" />
</div>
</div>
</div>
);
}

105
components/homes/finance-consulting/Testimonials.jsx Normal file
View File

@ -0,0 +1,105 @@
"use client";
import { testimonials } from "@/data/testimonials";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Image from "next/image";
import { counterItems2 } from "@/data/facts";
import OdometerComponent from "@/components/common/OdometerComponent";
export default function Testimonials() {
return (
<div className="section-testimonial style-5 tf-spacing-16 pb-0">
<div className="heading-section text-center mb_63">
<h3 className="text_white split-text effect-right">
Our client’s journeys to success
</h3>
</div>
<Swiper
className="swiper sw-layout"
loop
initialSlide={1}
centeredSlides
spaceBetween={15}
breakpoints={{
0: { slidesPerView: 1.2 },
575: {
slidesPerView: 1.2,
},
768: {
slidesPerView: 1.2,
spaceBetween: 20,
},
992: {
slidesPerView: 1.3,
spaceBetween: 72,
},
1200: {
slidesPerView: 1.98,
spaceBetween: 72,
},
}}
>
{testimonials.map((testimonial, index) => (
<SwiperSlide
className="swiper-slide"
key={`${testimonial.id}-${index}`}
>
<div className="testimonial style-4">
<div className="img-style mb_40">
<Image
className="lazyload"
data-src={testimonial.imageSrc}
alt="testimonial"
src={testimonial.imageSrc}
width={908}
height={652}
/>
</div>
<div className="content">
<div className="left">
<p className="text-body-2 text_white mb_12">
{testimonial.quote}
</p>
<p className="text-body-3 text_mono-gray-5">
{testimonial.author}
</p>
</div>
<div className="logo">
<Image
alt="logo"
src={testimonial.logoSrc}
width={testimonial.logoWidth}
height={testimonial.logoHeight}
/>
</div>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
<div className="bot">
<div className="tf-container">
<div className="row">
<div className="col-12">
<div className="wrap-counter styel-1">
{counterItems2.map((item, index) => (
<div key={index} className="counter-item style-1">
<div className="counter-number">
<h2 className="odometer text_mono-dark-9">
<OdometerComponent max={item.value} />
</h2>
<span className="sub text_mono-dark-9">{item.unit}</span>
</div>
<p
className="text-body-2 text_mono-gray-7"
dangerouslySetInnerHTML={{ __html: item.description }}
/>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
);
}

107
components/homes/home-1/Blogs.jsx Normal file
View File

@ -0,0 +1,107 @@
"use client";
import { blogArticles } from "@/data/blogs";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
import { Navigation } from "swiper/modules";
export default function Blogs() {
return (
<div className="section-blog style-3 sw-layout-1 tf-spacing-17">
<div className="tf-container">
<div className="wrap">
<div className="heading-section d-flex justify-content-between flex-wrap-md gap_12 align-items-end mb_108">
<div className="left">
<h1 className="heading-title split-text effect-right">
Insights From Our Press
</h1>
<p
className="text-body-1 text_mono-gray-7 mt_20 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
Discover the latest insights and trends in our most recent
articles. Stay informed and <br />
up to date on the topics that matter most to you.
</p>
</div>
<div className="wrap-sw-button d-flex gap_16">
<div className="sw-button style-default v2 has-bg nav-prev-layout-1 snbp5">
<i className="icon-caret-left" />
</div>
<div className="sw-button style-default v2 has-bg nav-next-layout-1 snbn5">
<i className="icon-caret-right" />
</div>
</div>
</div>
<Swiper
className="swiper swiper-container wow animate__fadeInLeft animate__animated"
data-wow-delay="0s"
spaceBetween={15}
breakpoints={{
0: { slidesPerView: 1 },
575: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
spaceBetween: 20,
},
992: {
slidesPerView: 3,
spaceBetween: 24,
},
}}
modules={[Navigation]}
navigation={{
prevEl: ".snbp5",
nextEl: ".snbn5",
}}
>
{blogArticles.map((article) => (
<SwiperSlide className="swiper-slide" key={article.id}>
<div className="blog-article-item hover-image">
<Link
href={`/single-post/${article.id}`}
className="article-thumb mb_25"
>
<Image
className="lazyload"
data-src={article.imageSrc}
alt="blog"
src={article.imageSrc}
width={article.width}
height={article.height}
/>
</Link>
<div className="article-content">
<ul className="blog-article-meta mb_15 d-flex align-items-center">
<li className="meta-item text-body-1">
<Link
href={`/single-post/${article.id}`}
className="link-black"
>
{article.category}
</Link>
</li>
<li className="meta-item date text-body-1">
{article.date}
</li>
</ul>
<h5 className="title letter-spacing-2">
<Link
href={`/single-post/${article.id}`}
className="link"
>
{article.title}
</Link>
</h5>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
</div>
);
}

462
components/homes/home-1/Brands.jsx Normal file
View File

@ -0,0 +1,462 @@
"use client";
import React from "react";
import Image from "next/image";
import { counterItems3 } from "@/data/facts";
import OdometerComponent from "@/components/common/OdometerComponent";
export default function Brands() {
return (
<div className="section-about style-2 tf-spacing-15 pt-0">
<div className="tf-container">
<div className="tf-spacing-14">
<div className="heading-section text-center mb_55">
<h6 className="title text-uppercase font2 text_mono-gray-4">
Our clients reflect our expertise
</h6>
</div>
<div className="infiniteslide tf-marquee infiniteSlide">
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-15.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-16.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-17.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-18.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-19.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-20.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-21.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-15.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-16.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-17.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-18.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-19.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-20.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-21.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-15.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-16.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-17.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-18.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-19.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-20.png"
width={160}
height={120}
/>
</div>
</div>
<div
className="marquee-item infiniteslide_clone"
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-3">
<Image
alt="brands"
src="/images/brands/brand-21.png"
width={160}
height={120}
/>
</div>
</div>
</div>
</div>
<div className="text-with-img-1">
<div className="row">
<div className="col-lg-6">
<div className="left">
<div className="shape-img-bg">
<Image
alt="img-with-shape-1"
className="img-custom-anim-left wow"
src="/images/section/img-with-shape-1.jpg"
width={696}
height={598}
/>
<div className="img-bg-shape">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
viewBox="0 0 288 288"
>
<linearGradient
id="imagewave"
x1="70.711%"
x2="0%"
y1="70.711%"
y2="0%"
>
<stop
className="stop-color"
offset="0%"
stopOpacity={1}
/>
<stop
className="stop-color"
offset="100%"
stopOpacity={1}
/>
</linearGradient>
<path fill="url(#imagewave)" d="">
<animate
repeatCount="indefinite"
attributeName="d"
dur="5s"
values="M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
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;
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
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
C48.9,198.6,57.8,191,51,171.3z;
M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
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 "
/>
</path>
</svg>
</div>
</div>
<div className="item scroll-tranform" data-distance="20%">
<div className="text-circle">
<svg className="textcircle" viewBox="0 0 500 500">
<defs>
<path
id="textcircle"
d="M250,400 a150,150 0 0,1 0,-300a150,150 0 0,1 0,300Z"
/>
</defs>
<text>
<textPath
xlinkHref="#textcircle"
textLength={900}
className="h5"
>
BUSINESS CONSULTING • ADVITEX •
</textPath>
</text>
</svg>
</div>
<Image
alt="logo"
className="logo"
src="/images/item/logo-banner-item.png"
width={100}
height={63}
/>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="content">
<div className="heading">
<h1 className="title split-text effect-right">
Our Mission Is Realization <br />
Your Dream Into Reality
</h1>
<div className="description">
<p
className="text-body-1 text_mono-gray-7 mb_9 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
At Advitex, we are a global consulting firm dedicated to
partnering with business and societal leaders to tackle
their most critical challenges. With our deep industry
expertise and collaborative approach.
</p>
<p
className="text-body-1 text_mono-gray-7 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
Our experienced consultants offer strategic thinking,
analytical rigor, and practical implementation skills.
</p>
</div>
</div>
<div
className="wrap d-flex wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
<a
href="#"
className="tf-btn btn-primary2 height-2 btn-px-28"
>
<span> Learn more</span>
<span className="bg-effect" />
</a>
<div className="contact d-flex align-items-center gap_12">
<div className="icon">
<i className="icon-tty-solid" />
</div>
<p className="font2 text-body-2">
24/7 Support: (234) 109-6666
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="row wrap-counter">
{counterItems3.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_21">
{item.title}
</div>
<div className="counter-number mb_15">
<div className="odometer text_primary">
<OdometerComponent max={item.value} />
</div>
<span className="sub text_primary">{item.unit}</span>
</div>
<p className="sub-heading text_mono-gray-5">
{item.description.split("\n").map((line, i) => (
<React.Fragment key={i}>
{line}
{i < item.description.split("\n").length - 1 && <br />}
</React.Fragment>
))}
</p>
</div>
</div>
))}
</div>
</div>
</div>
);
}

122
components/homes/home-1/CaseStudies.jsx Normal file
View File

@ -0,0 +1,122 @@
"use client";
import { caseStudies } from "@/data/caseStudies";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
import { Navigation } from "swiper/modules";
export default function CaseStudies() {
return (
<div className="section sw-layout-1 tf-spacing-13 pt-0">
<div className="tf-container">
<div className="heading-section d-flex justify-content-between flex-wrap-md gap_12 align-items-end mb_88">
<div className="left">
<h2 className="heading-title split-text effect-right">
Feature Case Studies
</h2>
<p
className="text-body-1 text_mono-gray-7 mt_20 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
Discover the transformative power of our solutions. Learn how
we've helped businesses of all sizes overcome challenges.
</p>
</div>
<div className="wrap-sw-button d-flex gap_16">
<div className="sw-button style-default v2 has-bg nav-prev-layout-1 snbp6">
<i className="icon-caret-left" />
</div>
<div className="sw-button style-default v2 has-bg nav-next-layout-1 snbn6">
<i className="icon-caret-right" />
</div>
</div>
</div>
</div>
<div className="tf-container slider-layout-right w-xl">
<Swiper
className="swiper"
spaceBetween={15}
breakpoints={{
0: { slidesPerView: 1 },
575: {
slidesPerView: 1,
},
768: {
slidesPerView: 1.1,
},
992: {
slidesPerView: 1.4,
spaceBetween: 20,
},
1200: {
slidesPerView: 1.81,
spaceBetween: 24,
},
}}
modules={[Navigation]}
navigation={{
prevEl: ".snbp6",
nextEl: ".snbn6",
}}
>
{caseStudies.map((study) => (
<SwiperSlide className="swiper-slide" key={study.id}>
<div className="case-studies-item style-1 hover-image hover-border border-element h-full">
<Link
href={`/single-project/${study.id}`}
className="img-style"
>
<Image
className="lazyload"
data-src={study.imageSrc}
alt="case-studies"
src={study.imageSrc}
width={382}
height={502}
/>
</Link>
<div className="content">
<div className="top d-flex align-items-center justify-content-between mb_31">
<div className="brand">
<Image
alt="brand"
src={study.brandSrc}
width={study.brandWidth}
height={study.brandHeight}
/>
</div>
<a href="#" className="tf-btn">
<span className="icon-arrow-top-right" />
<span className="bg-effect" />
</a>
</div>
<div className="heading mb_65">
<h4 className="mb_15 title">
<Link
href={`/single-project/${study.id}`}
className="link"
>
{study.title}
</Link>
</h4>
<p className="text_mono-gray-7 text-body-2">
{study.description}
</p>
</div>
<div className="group-number">
{study.stats.map((stat, index) => (
<div className="wrap-number" key={index}>
<h3 className="number fw-5">{stat.value}</h3>
<p className="font2 text-body-1 lh-20">{stat.label}</p>
</div>
))}
</div>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
);
}

67
components/homes/home-1/Hero.jsx Normal file
View File

@ -0,0 +1,67 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
export default function Hero() {
return (
<div className="page-title style-1">
<div className="content-inner">
<div className="tf-container">
<div className="heading-title">
<div className="text-display-2 text_white mb_49 split-text effect-scale">
Fully <br />
Nurture Your <br />
Potential
</div>
<Link href={`/about`} className="tf-btn btn-white height-2">
<span className="text_black">Book A Free Consultant</span>
<span className="bg-effect" />
</Link>
</div>
<div className="bot d-flex align-items-end justify-content-between gap-20 flex-wrap">
<p className="text_white sub-heading description">
Consulting services offer a strategic partnership that bridges
<br />
the gap between your aspirations and their realization. By
leveraging our <br />
deep industry knowledge, analytical skills.
</p>
<div className="wrap-facts">
<h5 className="text_white mb_19">Connect Your Experts</h5>
<div className="facts style-1">
<div className="avatar-wrap d-flex">
<div className="avatar item-1">
<Image
alt=""
src="/images/avatar/facts-2.png"
width={60}
height={60}
/>
</div>
<div className="avatar item-2">
<Image
alt=""
src="/images/avatar/facts-2.png"
width={60}
height={60}
/>
</div>
<div className="avatar item-3">
<Image
alt=""
src="/images/avatar/facts-1.png"
width={60}
height={61}
/>
</div>
</div>
<p className="text-body-1 text_white">
The expert team brings a wealth of knowledge and creativity
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

201
components/homes/home-1/Process.jsx Normal file
View File

@ -0,0 +1,201 @@
import React from "react";
import Image from "next/image";
export default function Process() {
return (
<div className="section-process style-1 tf-spacing-5">
<div className="tf-container">
<div className="wrap">
<div className="row align-items-end">
<div className="col-xl-6 left">
<div className="heading-section mb_88 ps-0">
<h2 className="heading-title split-text effect-right">
Our Approach
</h2>
<p
className="text-body-1 text_mono-gray-7 mt_18 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
We rely on datadriven analysis and rigorous methodologies
<br />
to inform our decisions and ensure accuracy.
</p>
</div>
<ul
className="accordion-wrap gap-16 style-faqs"
id="accordion-approach"
>
<li className="accordion-item action_click scrolling-effect effectLeft style-default">
<a
href="#accordion-approach-1"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-approach-1"
>
<div className="heading">
<h3 className="text_mono-gray-5 title">
<span className="text_primary">1.</span>Story &amp;
Reserach
</h3>
</div>
<span className="icon" />
</a>
<div
id="accordion-approach-1"
className="collapse"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<p className="text-body-1">
The research gathered to inform the development of the
story provides the foundation for a product or service,
shaping its direction and purpose.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectLeft active style-default">
<a
href="#accordion-approach-2"
className="accordion-title action current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-approach-2"
>
<div className="heading">
<h3 className="text_mono-gray-5 title">
<span className="text_primary">2.</span> Strategy &amp;
Concept
</h3>
</div>
<span className="icon" />
</a>
<div
id="accordion-approach-2"
className="collapse show"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<p className="text-body-1">
The research gathered to inform the development of the
story provides the foundation for a product or service,
shaping its direction and purpose.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectLeft style-default">
<a
href="#accordion-approach-3"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-approach-3"
>
<div className="heading">
<h3 className="text_mono-gray-5 title">
<span className="text_primary">3.</span> Implementation
</h3>
</div>
<span className="icon" />
</a>
<div
id="accordion-approach-3"
className="collapse"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<p className="text-body-1">
The research gathered to inform the development of the
story provides the foundation for a product or service,
shaping its direction and purpose.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectLeft style-default">
<a
href="#accordion-approach-4"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-approach-4"
>
<div className="heading">
<h3 className="text_mono-gray-5 title">
<span className="text_primary">4.</span>Usability
Testing
</h3>
</div>
<span className="icon" />
</a>
<div
id="accordion-approach-4"
className="collapse"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<p className="text-body-1">
To place an order, browse our We differentiate ourselves
through our commitment to innovation, personalized
solutions, and client satisfaction. We differentiate
ourselves through our commitment to innovation,
personalized solutions, and client satisfaction.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectLeft style-default">
<a
href="#accordion--approach-5"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion--approach-5"
>
<div className="heading">
<h3 className="text_mono-gray-5 title">
<span className="text_primary">5.</span>Guide &amp; Hand
Over
</h3>
</div>
<span className="icon" />
</a>
<div
id="accordion--approach-5"
className="collapse"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<p className="text-body-1">
To place an order, browse our We differentiate ourselves
through our commitment to innovation, personalized
solutions, and client satisfaction. We differentiate
ourselves through our commitment to innovation,
personalized solutions, and client satisfaction.
</p>
</div>
</div>
</li>
</ul>
</div>
<div className="col-xl-6 right">
<div
className="shape-img-bg shape-border style-2 scroll-tranform"
data-distance="20%"
>
<Image
alt=""
className="img-custom-anim-left wow"
src="/images/section/img-with-shape-2.jpg"
width={802}
height={535}
/>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

96
components/homes/insurance-consulting/About.jsx Normal file
View File

@ -0,0 +1,96 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
export default function About() {
return (
<div className="section">
<div className="tf-container">
<div className="box-about style-2">
<div className="left">
<div className=" mb_50">
<div className="point text-body-1 mb_14">
<span className="item" />
About Us
</div>
<h3 className="heading-title text_mono-dark-9">
We’re A Trusted And Professional Insurance Company,{" "}
<Image
alt="item"
className="wow animate__rollIn animate__animated"
data-wow-delay="0.4s"
src="/images/item/item-title.png"
width={48}
height={48}
/>{" "}
Committed To Your Financial Security.
</h3>
</div>
<div className="bot">
<div className="clutch-rating-item style-1 d-flex align-items-center mb_16">
<div className="logo">
<svg
width={34}
height={38}
viewBox="0 0 34 38"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M33.363 31.4385C29.8792 35.4578 24.7365 38 19 38C8.50659 38 0 29.4934 0 19C0 8.50659 8.50659 0 19 0C24.7364 0 29.879 2.54213 33.3628 6.56127L27.8911 11.2998C25.7345 8.81185 22.551 7.23818 19 7.23818C12.5041 7.23818 7.23807 12.5042 7.23807 19.0001C7.23807 25.496 12.5041 30.762 19 30.762C22.5512 30.762 25.7348 29.1882 27.8914 26.7L33.363 31.4385Z"
fill="black"
/>
<ellipse
cx="19.0003"
cy="19.0003"
rx="6.33333"
ry="6.33333"
fill="#EF2B10"
/>
</svg>
</div>
<div>
<div className="wrap-ratings d-flex gap_13 align-items-center">
<div className="text-body-1 fw-6 font2 fw-6">4.9/5</div>
<div className="ratings">
<i className="icon-star-solid" />
<i className="icon-star-solid" />
<i className="icon-star-solid" />
<i className="icon-star-solid" />
<i className="icon-star-solid" />
</div>
</div>
<p className="text-body-4">Based on 24 reviews</p>
</div>
</div>
<p className="text-body-1 text_mono-gray-6 mb_31">
As a trusted and professional insurance company, we are
committed to providing comprehensive coverage and exceptional
service to our <br />
valued clients.
</p>
<Link
href={`/about`}
className="tf-btn height-2 rounded-12 btn-px-28"
>
<span>View Details</span>
<span className="bg-effect" />
</Link>
</div>
</div>
<div className="right">
<div className="image">
<Image
alt="item"
src="/images/section/section-about-1a.jpg"
width={760}
height={760}
/>
</div>
</div>
</div>
</div>
</div>
);
}

225
components/homes/insurance-consulting/Approach.jsx Normal file
View File

@ -0,0 +1,225 @@
import React from "react";
import Image from "next/image";
export default function Approach() {
return (
<div className="section-approach style-1">
<div className="tf-container">
<div className="row align-items-end">
<div className="col-lg-6">
<div className="heading-section mb_54">
<div className="point text-body-1 mb_8">
<span className="item" />
Approach
</div>
<h2 className="heading-title text_primary">
Helping You Make Informed Decisions
</h2>
<p className="text-body-1 text_mono-gray-6 mt_20">
Navigate the world of insurance with ease. A streamlined
approach to finding <br />
the perfect plan.
</p>
</div>
<ul
className="accordion-wrap gap-16 style-faqs"
id="accordion-approach"
>
<li className="accordion-item action_click scrolling-effect effectLeft style-default v5">
<a
href="#accordion-approach-1"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-approach-1"
>
<div className="heading">
<h4 className="text_mono-gray-5 title">
<span className="text_primary">1.</span>Personalized
Consultation
</h4>
</div>
<span className="icon" />
</a>
<div
id="accordion-approach-1"
className="collapse"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<ul className="list">
<li className="text-body-1">
Tailored advice based on individual needs and
circumstances.
</li>
<li className="text-body-1">
Comprehensive assessment of financial goals and risk
tolerance.
</li>
<li className="text-body-1">
Clear and concise explanations of complex insurance
concepts.
</li>
</ul>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectLeft active style-default v5">
<a
href="#accordion-approach-2"
className="accordion-title action current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-approach-2"
>
<div className="heading">
<h4 className="text_mono-gray-5 title">
<span className="text_primary">2.</span> Comprehensive
Product Analysis
</h4>
</div>
<span className="icon" />
</a>
<div
id="accordion-approach-2"
className="collapse show"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<ul className="list">
<li className="text-body-1">
Tailored advice based on individual needs and
circumstances.
</li>
<li className="text-body-1">
Comprehensive assessment of financial goals and risk
tolerance.
</li>
<li className="text-body-1">
Clear and concise explanations of complex insurance
concepts.
</li>
</ul>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectLeft style-default v5">
<a
href="#accordion-approach-3"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-approach-3"
>
<div className="heading">
<h4 className="text_mono-gray-5 title">
<span className="text_primary">3.</span> Proactive Risk
Management
</h4>
</div>
<span className="icon" />
</a>
<div
id="accordion-approach-3"
className="collapse"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<ul className="list">
<li className="text-body-1">
Tailored advice based on individual needs and
circumstances.
</li>
<li className="text-body-1">
Comprehensive assessment of financial goals and risk
tolerance.
</li>
<li className="text-body-1">
Clear and concise explanations of complex insurance
concepts.
</li>
</ul>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectLeft style-default v5">
<a
href="#accordion-approach-4"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-approach-4"
>
<div className="heading">
<h4 className="text_mono-gray-5 title">
<span className="text_primary">4.</span>Exceptional Client
Service
</h4>
</div>
<span className="icon" />
</a>
<div
id="accordion-approach-4"
className="collapse"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<ul className="list">
<li className="text-body-1">
Tailored advice based on individual needs and
circumstances.
</li>
<li className="text-body-1">
Comprehensive assessment of financial goals and risk
tolerance.
</li>
<li className="text-body-1">
Clear and concise explanations of complex insurance
concepts.
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div className="col-lg-6">
<div className="right position-relative">
<div className="img-style">
<Image
className="lazyload"
data-src="/images/section/section-approach.jpg"
alt="approach"
src="/images/section/section-approach.jpg"
width={873}
height={873}
/>
</div>
<div
className="item approach-1 scroll-tranform"
data-direction="left"
>
<Image
alt="item"
src="/images/item/item-approach-1.png"
width={252}
height={161}
/>
</div>
<div
className="item approach-2 scroll-tranform"
data-direction="right"
>
<Image
alt="item"
src="/images/item/item-approach-2.png"
width={311}
height={81}
/>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

106
components/homes/insurance-consulting/Blogs.jsx Normal file
View File

@ -0,0 +1,106 @@
"use client";
import { blogPosts } from "@/data/blogs";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
import { Pagination } from "swiper/modules";
export default function Blogs() {
return (
<div className="section">
<div className="tf-container">
<div className="heading-section d-flex gap_12 justify-content-between align-items-end flex-wrap-md mb_56">
<div className="left">
<div className="point text-body-1 mb_7">
<span className="item" />
Latest Articles
</div>
<h2 className="heading-title text_primary split-text effect-right">
Get The Latest Updates
</h2>
<p
className="text_mono-gray-7 text-body-1 mt_20 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
We provide timely updates on industry trends, regulatory changes,
and <br />
best practices to help you make informed decisions.
</p>
</div>
<div className="right">
<Link
href={`/blog`}
className="tf-btn height-3 rounded-12 btn-px-28"
>
<span>View Details</span>
<span className="bg-effect" />
</Link>
</div>
</div>
<Swiper
className="swiper style-pagination sw-layout"
breakpoints={{
0: { slidesPerView: 1 },
575: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
992: {
slidesPerView: 4,
},
}}
spaceBetween={12}
modules={[Pagination]}
pagination={{
clickable: true,
el: ".spd7",
}}
>
{blogPosts.map((post) => (
<SwiperSlide className="swiper-slide" key={`blog-${post.id}`}>
<div className="blog-article-item style-4">
<Link
href={`/single-post/${post.id}`}
className="article-thumb mb_11"
>
<Image
className="lazyload"
data-src={post.imageSrc}
alt={post.alt}
src={post.imageSrc}
width={415}
height={280}
/>
<Image
className="lazyload"
data-src={post.imageSrc}
alt={post.alt}
src={post.imageSrc}
width={415}
height={280}
/>
</Link>
<div className="article-content">
<ul className="blog-article-meta mb_8 d-flex align-items-center style-2">
<li className="meta-item text-body-2">{post.date}</li>
<li className="meta-item date text-body-2">
{post.comments}
</li>
</ul>
<h6 className="title fw-5 letter-spacing-2 text_mono-dark-9 line-clamp-2">
<Link href={`/single-post/${post.id}`} className="link">
{post.title}
</Link>
</h6>
</div>
</div>
</SwiperSlide>
))}
<div className="sw-pagination sw-pagination-layout text-center mt_20 spd7" />
</Swiper>
</div>
</div>
);
}

196
components/homes/insurance-consulting/CaseStudies.jsx Normal file
View File

@ -0,0 +1,196 @@
"use client";
import { caseStudies4 } from "@/data/caseStudies";
import React, { useEffect, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Image from "next/image";
import {
EffectCreative,
Navigation,
Pagination,
Controller,
} from "swiper/modules";
import { brandData } from "@/data/brands";
const filters = [
"All",
"Health Insurance",
"Property Insurance",
"Business Insurance",
];
export default function CaseStudies() {
const [controllerSwiper, setControllerSwiper] = useState(null);
const [activeFilter, setActiveFilter] = useState("All");
const [filtered, setFiltered] = useState(caseStudies4);
useEffect(() => {
if (activeFilter == "All") {
setFiltered(caseStudies4);
} else {
setFiltered(
caseStudies4.filter((elm) => elm.categories.includes(activeFilter))
);
}
}, [activeFilter]);
return (
<div className="section-case-studies">
<div className="tf-container">
<div className="heading-section text-center mb_50">
<div className="point text-body-1 justify-content-center mb_6">
<span className="item" />
Case Studies
</div>
<h2 className="heading-title text_primary split-text effect-right">
Flexible Coverage Options
</h2>
</div>
<div className="projectCarousel">
<div className="thumbs">
<div className="sw-pagination-project h2" />
<div className="swiper-container">
<Swiper
controller={{ control: controllerSwiper }}
className="swiper project-carousel-layout"
{...{
slidesPerView: 1,
loop: false,
speed: 550,
spaceBetween: 50,
direction: "horizontal",
grabCursor: true,
effect: "creative",
creativeEffect: {
prev: { opacity: 0, rotate: [0, 0, -10] },
next: { opacity: 0, rotate: [0, 0, 10] },
},
// navigation: {
// nextEl: navNext.length > 0 ? navNext[0] : null,
// prevEl: navPrev.length > 0 ? navPrev[0] : null,
// },
pagination: {
el: ".sw-pagination-project",
type: "fraction",
formatFractionCurrent: (number) =>
number.toString().padStart(2, "0"),
formatFractionTotal: (number) =>
number.toString().padStart(2, "0"),
},
}}
navigation={{
prevEl: ".snbp8",
nextEl: ".snbn8",
}}
modules={[EffectCreative, Navigation, Pagination, Controller]}
>
<div className="bg position-absolute">
<Image
alt="background"
src="/images/item/bg-project.png"
width={774}
height={574}
/>
</div>
<div className="shape position-absolute">
<Image
alt="shape"
src="/images/item/shape-4.png"
width={1129}
height={768}
/>
</div>
{filtered.map((slide, index) => (
<SwiperSlide
key={index}
className="swiper-slide"
data-categories={slide.categories}
>
<Image
className="lazyload"
data-src={slide.imageSrc}
alt={slide.alt}
src={slide.imageSrc}
width={slide.width}
height={slide.height}
/>
</SwiperSlide>
))}
</Swiper>
</div>
<div className="swiper-filter">
<ul className="filter-list">
{filters.map((filter) => (
<li
key={filter}
className={`filter-list-item ${
activeFilter === filter ? "active" : ""
}`}
onClick={() => setActiveFilter(filter)}
>
{filter}
</li>
))}
</ul>
</div>
</div>
<div className="content flex-wrap-sm gap_16">
<Swiper
className="swiper project-carousel-layout-extra"
onSwiper={setControllerSwiper}
{...{
slidesPerView: 1,
loop: true,
simulateTouch: false,
speed: 950,
effect: "creative",
creativeEffect: {
prev: { opacity: 0, translate: [-105, 0, 0] },
next: { opacity: 0, translate: [105, 0, 0] },
},
}}
modules={[EffectCreative, Controller]}
>
{filtered.map((elm, i) => (
<SwiperSlide className="swiper-slide">
<h2 className="mb_15">{elm.title}</h2>
<p
className="text-body-2 text_mono-gray-7"
dangerouslySetInnerHTML={{ __html: elm.description }}
></p>
</SwiperSlide>
))}
</Swiper>
<div className="wrap-sw-button d-flex gap_15">
<div className="sw-button style-default has-bg sw-project-prev snbp8">
<i className="icon-long-arrow-alt-left-solid" />
</div>
<div className="sw-button style-default has-bg sw-project-next snbn8">
<i className="icon-long-arrow-alt-right-solid" />
</div>
</div>
</div>
</div>
</div>
<div className="infiniteslide_wrap" style={{ overflow: "hidden" }}>
<div className="infiniteslide tf-marquee style-1 infiniteSlide">
{[...brandData, ...brandData, ...brandData].map((brand, index) => (
<div
key={index}
className={`marquee-item ${
index >= brandData.length ? "infiniteslide_clone" : ""
}`}
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner">
<Image
alt="brands"
src={brand.src}
width={brand.width}
height={brand.height}
/>
</div>
</div>
))}
</div>
</div>
</div>
);
}

77
components/homes/insurance-consulting/Cta.jsx Normal file
View File

@ -0,0 +1,77 @@
"use client";
import React, { useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
export default function Cta() {
return (
<div className="section-work style-2 tf-spacing-23">
<div className="tf-container">
<div className="box-inner position-relative">
<div className="heading-section text-center mb_56">
<div className="point text-body-1 mb_17 justify-content-center">
<span className="item" />
Works With Us
</div>
<h1 className="heading-title text_primary mb_36 split-text split-lines-rotation-x">
Customize{" "}
<img
className="item-1 item"
alt=""
src="/images/box-icon/settings-02.svg"
/>{" "}
Your Coverage To <br />
Fit Your Specific{" "}
<img
className="item-2 item"
alt=""
src="/images/box-icon/check-verified-02.svg"
/>{" "}
Needs
</h1>
<p className="text-body-1 text_primary">
Tailored insurance solutions for your unique circumstances.
</p>
</div>
<div className="d-flex gap_10 wrap-btn justify-content-center">
<Link href={`/contact-us`} className="tf-btn rounded-12 height-4">
<span className="text-body-1">Contact Us Online</span>
<span className="bg-effect" />
</Link>
<Link
href={`/about`}
className="tf-btn btn-border border-1 height-4 rounded-12"
>
<span className="text-body-1 text_primary">
Request A Call Back
</span>
<span className="bg-effect" />
</Link>
</div>
<div
className="shape-1 position-absolute scroll-tranform"
data-direction="right"
>
<Image
alt="ellipse"
src="/images/item/ellipse-1.png"
width={400}
height={400}
/>
</div>
<div
className="shape-2 position-absolute scroll-tranform"
data-direction="left"
>
<Image
alt="ellipse"
src="/images/item/ellipse-2.png"
width={640}
height={640}
/>
</div>
</div>
</div>
</div>
);
}

70
components/homes/insurance-consulting/Facts.jsx Normal file
View File

@ -0,0 +1,70 @@
import OdometerComponent from "@/components/common/OdometerComponent";
import { counterData } from "@/data/facts";
import React from "react";
export default function Facts() {
return (
<div className="section-hard-data">
<div className="tf-container">
<div className="heading-section d-flex gap_12 justify-content-between flex-wrap-md mb_86">
<div className="left">
<div className="point text-body-1 mb_12">
<span className="item" />
Hard Data
</div>
<h6 className="text_primary split-text split-lines-transform">
As a trusted and professional insurance company, we are committed{" "}
<br />
to providing exceptional service and comprehensive coverage to our{" "}
<br />
valued clients.
</h6>
</div>
<div className="right">
<a href="#" className="tf-btn-link">
<span className="h6"> Find Your Plan </span>
<i className="icon-arrow-top-right"> </i>
</a>
</div>
</div>
<div className="wrap-counter style-3 gap_12">
<div className="left">
{counterData.left.map((item, index) => (
<div key={`left-${index}`} className="counter-item style-3">
<div className="counter-number">
<div className="odometer text_primary">
<OdometerComponent max={item.value} />
</div>
{item.units.map((unit, i) => (
<span key={i} className="sub text_primary">
{unit}
</span>
))}
</div>
<p className="h6 text_primary">{item.label}</p>
</div>
))}
</div>
<div className="right">
{counterData.right.map((item, index) => (
<div key={`right-${index}`} className="counter-item style-3">
<div className="counter-number">
<div className="odometer text_primary">
<OdometerComponent max={item.value} />
</div>
{item.units.map((unit, i) => (
<span key={i} className="sub text_primary">
{unit}
</span>
))}
</div>
<p className="h6 text_primary">{item.label}</p>
</div>
))}
</div>
</div>
</div>
</div>
);
}

206
components/homes/insurance-consulting/Faqs.jsx Normal file
View File

@ -0,0 +1,206 @@
import React from "react";
export default function Faqs() {
return (
<div className="section-faqs style-1">
<div className="tf-container">
<div className="heading-section text-center mb_52">
<div className="point text-body-1 justify-content-center mb_7">
<span className="item" />
FAQs
</div>
<h2 className="heading-title text_primary split-text effect-right">
Got A Question? Get Your Answer
</h2>
<p
className="text_mono-gray-7 text-body-1 mt_20 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
We revolutionize industries with dynamic digital solutions, tailored
to meet contemporary demands and <br />
drive impactful transformations for businesses of all sectors.
</p>
</div>
<ul
className="accordion-wrap style-faqs d-grid gap_13"
id="accordion-faq-3"
>
<li className="accordion-item action_click style-default v3 scrolling-effect effectRight">
<a
href="#accordion-3-1"
className="action accordion-title collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-3-1"
>
<div className="heading">
<h5 className="text_mono-gray-6 title">
How benefit that We got when choose Basic plan?
</h5>
</div>
<div className="icon" />
</a>
<div
id="accordion-3-1"
className="collapse"
data-bs-parent="#accordion-faq-3"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2 lh-20">
Through the collaboration with customers in discussing needs
and demand, we’re able to attain mutual understand again
customer trust to offer appropriate advice.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click active style-default v3 scrolling-effect effectRight">
<a
href="#accordion-3-2"
className="action accordion-title current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-3-2"
>
<div className="heading">
<h5 className="text_mono-gray-6 title">
Our project will 100% Secure?
</h5>
</div>
<div className="icon" />
</a>
<div
id="accordion-3-2"
className="collapse show"
data-bs-parent="#accordion-faq-3"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2 lh-20">
Through the collaboration with customers in discussing needs
and demand, we’re able to attain mutual understand again
customer trust to offer appropriate advice.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click style-default v3 scrolling-effect effectRight">
<a
href="#accordion-3-3"
className="action accordion-title collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-3-3"
>
<div className="heading">
<h5 className="text_mono-gray-6 title">
NDA Agreement will include?
</h5>
</div>
<div className="icon" />
</a>
<div
id="accordion-3-3"
className="collapse"
data-bs-parent="#accordion-faq-3"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2 lh-20">
Through the collaboration with customers in discussing needs
and demand, we’re able to attain mutual understand again
customer trust to offer appropriate advice.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click style-default v3 scrolling-effect effectRight">
<a
href="#accordion-3-4"
className="action accordion-title collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-3-4"
>
<div className="heading">
<h5 className="text_mono-gray-6 title">
Can my premium license be used for all devices?
</h5>
</div>
<div className="icon" />
</a>
<div
id="accordion-3-4"
className="collapse"
data-bs-parent="#accordion-faq-3"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2 lh-20">
Through the collaboration with customers in discussing needs
and demand, we’re able to attain mutual understand again
customer trust to offer appropriate advice.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click style-default v3 scrolling-effect effectRight">
<a
href="#accordion-3-5"
className="action accordion-title collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-3-5"
>
<div className="heading">
<h5 className="text_mono-gray-6 title">
What things that we need provide when choose your service
</h5>
</div>
<div className="icon" />
</a>
<div
id="accordion-3-5"
className="collapse"
data-bs-parent="#accordion-faq-3"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2 lh-20">
Through the collaboration with customers in discussing needs
and demand, we’re able to attain mutual understand again
customer trust to offer appropriate advice.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click style-default v3 scrolling-effect effectRight">
<a
href="#accordion-3-6"
className="action accordion-title collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-3-6"
>
<div className="heading">
<h5 className="text_mono-gray-6 title">
How long for a standard project?
</h5>
</div>
<div className="icon" />
</a>
<div
id="accordion-3-6"
className="collapse"
data-bs-parent="#accordion-faq-3"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2 lh-20">
Through the collaboration with customers in discussing needs
and demand, we’re able to attain mutual understand again
customer trust to offer appropriate advice.
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
);
}

101
components/homes/insurance-consulting/Hero.jsx Normal file
View File

@ -0,0 +1,101 @@
"use client";
import { bannerSlides2 } from "@/data/heroSlides";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
export default function Hero() {
return (
<div className="page-title style-4">
<div className="tf-container">
<div className="row">
<div className="col-12">
<div className="heading-title d-flex flex-wrap-lg mb_40 justify-content-between">
<div className="left">
<p className="sub text-body-1 text_primary point">
<span className="item" /> Ultimate Peace Of Mind
</p>
<div className="text_primary text-display-3 title">
Shaping{" "}
<img
className="icon animate__rollIn animate__animated"
data-wow-delay="0s"
alt="icon"
src="/images/box-icon/check-verified-01.svg"
/>{" "}
Futures <br />
With{" "}
<img
className="icon heart animate__rollIn animate__animated"
alt="icon"
src="/images/box-icon/heart-circle.svg"
/>{" "}
Insurance Solutions
</div>
</div>
<div className="right">
<p className="sub-heading text_mono-dark-9 mb_24 split-text split-lines-transform">
Maximize your coverage, minimize your worries. We're committed
to providing exceptional customer service and comprehensive
insurance solutions that exceed your expectations.
</p>
<div className="d-flex gap_10 wrap-btn flex-wrap-sm">
<Link
href={`/#`}
className="tf-btn btn-border border-1 rounded-12 height-3"
>
<span className="text-body-1 text_primary">
Book a Free Consulting
</span>
<span className="bg-effect" />
</Link>
<Link
href={`/contact-us`}
className="tf-btn rounded-12 height-3"
>
<span className="text-body-1">Find your plan</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
{/* <Swiper
className="swiper style-pagination sw-layout"
centeredSlides
spaceBetween={12}
loop
initialSlide={1}
breakpoints={{
0: { slidesPerView: 1.2 },
575: {
slidesPerView: 1.2,
},
768: {
slidesPerView: 1.5,
},
992: {
slidesPerView: 1.67,
},
}}
>
{bannerSlides2.map((slide) => (
<SwiperSlide className="swiper-slide" key={slide.id}>
<div className="img-wrap">
<Image
className="lazyload"
data-src={`images/page-title/${slide.src}`}
alt={slide.alt}
src={`/images/page-title/${slide.src}`}
width={1142}
height={744}
/>
</div>
</SwiperSlide>
))}
</Swiper> */}
</div>
);
}

83
components/homes/insurance-consulting/Services.jsx Normal file
View File

@ -0,0 +1,83 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { services2 } from "@/data/services";
export default function Services() {
return (
<div className="section tf-spacing-46 pb-0">
<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="left">
<div className="point text-body-1 mb_7">
<span className="item" />
Our Services
</div>
<h2 className="heading-title text_primary split-text effect-right">
Flexible Coverage Options
</h2>
<p
className="text_mono-gray-7 text-body-1 mt_20 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
With our customizable approach, you can select the specific
coverages that matter most <br />
to you, avoiding unnecessary expenses
</p>
</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 className="tf-grid-layout lg-col-3">
{services2.map((service, index) => (
<div
key={index}
className={`tf-box-icon style-6 effect-icon ${service.bgColor} wow animate__fadeInRight animate__animated`}
data-wow-delay={service.delay}
>
<div className="icon">
<Image alt="icon" src={service.icon} width={33} height={32} />
</div>
<div className="content">
<h3 className="text_primary">
<Link
href={`/service-details/${service.id}`}
className="link-white mb_11"
>
{service.title}
</Link>
</h3>
<p className="text-body-1 mb_23">{service.description}</p>
<Link
href={`/service-details/${service.id}`}
className="tf-btn-link"
>
<span> Learn more </span>
<i className="icon-arrow-top-right"> </i>
</Link>
</div>
<div
className="item scroll-tranform"
data-direction="right"
data-distance="20%"
>
<Image
alt="item"
src="/images/item/ellipse-1.png"
width={400}
height={400}
/>
</div>
</div>
))}
</div>
</div>
</div>
);
}

224
components/homes/insurance-consulting/Testimonials.jsx Normal file
View File

@ -0,0 +1,224 @@
"use client";
import React from "react";
import Image from "next/image";
export default function Testimonials() {
return (
<div className="section-testimonial style-4">
<div className="tf-container">
<div className="heading-section mb_56">
<div className="point text-body-1 mb_7">
<span className="item" />
Testimonials
</div>
<h2 className="heading-title text_primary">
Client Satisfaction, Our Reputation
</h2>
<p className="text-body-1 text_mono-gray-6 mt_20">
We’ve helped hundreds of partners, to achieve their goals and
stellar <br />
feedback, is our reward!
</p>
</div>
<div className="d-grid gap_12">
<div className="tf-grid-layout md-col-2">
<div className="grid-2 gap_12">
<div
className="highlight-item bg-color-yellow wow animate__fadeInLeft animate__animated"
data-wow-delay="0s"
>
<h2 className="text_pirmary fw-6">Top 5 Best</h2>
<div className="logo">
<Image
alt="logo"
src="/images/logo/logo.png"
width={230}
height={64}
/>
</div>
</div>
<div
className="highlight-item bg-color-blue wow animate__fadeInLeft animate__animated"
data-wow-delay="0.1s"
>
<h2 className="text_pirmary fw-6">12+ Awards</h2>
<div className="logo">
<Image
alt="logo"
src="/images/logo/logo-1.png"
width={222}
height={56}
/>
</div>
</div>
</div>
<div
className="testimonial style-3 wow animate__fadeInLeft animate__animated"
data-wow-delay="0.2s"
>
<h5 className="text">
"We couldn’t have asked for a better experience. Their
dedication to client satisfaction is reflected in their strong
industry reputation. "
</h5>
<div className="content d-flex align-items-end justify-content-between gap_12">
<div className="box-user d-flex align-items-center">
<div className="avatar">
<Image
alt="avatar"
src="/images/avatar/avatar-14.jpg"
width={64}
height={64}
/>
</div>
<div className="info">
<h6 className="name">Z. Ibrahimović</h6>
<p>CEO &amp; Founder, Catherine Studio</p>
</div>
</div>
<div className="partner">
<Image
alt="logo"
src="/images/brands/brand-10.png"
width={138}
height={32}
/>
</div>
</div>
</div>
</div>
<div className="tf-grid-layout md-col-2">
<div
className="testimonial style-3 wow animate__fadeInRight animate__animated"
data-wow-delay="0s"
>
<h5 className="text">
"Their reputation for excellence speaks for itself. Every
interaction was professional."
</h5>
<div className="content d-flex align-items-end justify-content-between gap_12">
<div className="box-user d-flex align-items-center">
<div className="avatar">
<Image
alt="avatar"
src="/images/avatar/avatar-15.jpg"
width={64}
height={64}
/>
</div>
<div className="info">
<h6 className="name">K. Mainoo</h6>
<p>Project Managerment at Amoor</p>
</div>
</div>
<div className="partner">
<Image
alt="logo"
src="/images/brands/brand-11.png"
width={97}
height={37}
/>
</div>
</div>
</div>
<div className="grid-2 gap_12">
<div
className="highlight-item bg-color-red wow animate__fadeInRight animate__animated"
data-wow-delay="0.1s"
>
<h2 className="text_pirmary fw-6">Winner</h2>
<div className="logo">
<Image
alt="logo"
src="/images/logo/logo-2.png"
width={178}
height={48}
/>
</div>
</div>
<div
className="highlight-item bg-color-yellow wow animate__fadeInRight animate__animated"
data-wow-delay="0.2s"
>
<h2 className="text_pirmary fw-6">12+ Awards</h2>
<div className="logo">
<Image
alt="logo"
src="/images/logo/logo-4.png"
width={160}
height={96}
/>
</div>
</div>
</div>
</div>
<div className="tf-grid-layout md-col-2">
<div className="grid-2 gap_12">
<div
className="highlight-item bg-color-blue wow animate__fadeInLeft animate__animated"
data-wow-delay="0s"
>
<h2 className="text_pirmary fw-6">News</h2>
<div className="logo">
<Image
alt="logo"
src="/images/logo/logo-3.png"
width={202}
height={96}
/>
</div>
</div>
<div
className="highlight-item bg-color-green wow animate__fadeInLeft animate__animated"
data-wow-delay="0.1s"
>
<h2 className="text_pirmary fw-6">Top 8 Best</h2>
<div className="logo">
<Image
alt="logo"
src="/images/logo/logo-1.png"
width={222}
height={56}
/>
</div>
</div>
</div>
<div
className="testimonial style-3 wow animate__fadeInLeft animate__animated"
data-wow-delay="0.2s"
>
<h5 className="text">
"The team’s responsiveness and ability to meet our needs was
remarkable. Their excellent reputation precedes them, and they
more than lived up to it."
</h5>
<div className="content d-flex align-items-end justify-content-between gap_12">
<div className="box-user d-flex align-items-center">
<div className="avatar">
<Image
alt="avatar"
src="/images/avatar/avatar-14.jpg"
width={64}
height={64}
/>
</div>
<div className="info">
<h6 className="name">D. Van De Beek</h6>
<p>Marketing Manager, VDV</p>
</div>
</div>
<div className="partner">
<Image
alt="logo"
src="/images/brands/brand-12.png"
width={108}
height={40}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

119
components/homes/marketing-consulting/About.jsx Normal file
View File

@ -0,0 +1,119 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
import OdometerComponent from "@/components/common/OdometerComponent";
export default function About() {
return (
<div className="section-about style-1">
<div className="tf-container-2">
<div className="row">
<div className="col-lg-6">
<div className="left">
<div className="heading-section gap_12">
<div className="heading-tag d-flex gap_12 mb_20 text_mono-dark-8 fw-5">
<div className="icon">
<i className="icon-star" />
</div>
<p className="text-body-3">About Us</p>
</div>
<h2 className="title text_mono-dark-9 fw-5 split-text split-lines-rotation-x">
<span className="text-gradient">Master</span> your marketing
<br />
strategies with us
</h2>
</div>
<div className="content">
<p
className="text-body-1 mb_40 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
Building personalized campaigns that drive engagement, boost{" "}
<br />
conversions, and enhance customer loyalty.
</p>
<Link
href={`/about`}
className="tf-btn btn-primary2 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
<span className="text-caption-3">About Us</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="right position-relative">
<div className="img-style">
<Image
className="lazyload"
data-src="/images/section/section-about-2.jpg"
alt="section-about"
src="/images/section/section-about-2.jpg"
width={693}
height={410}
/>
</div>
<div className="highlight scroll-tranform" data-distance="20%">
<div className="icon mb_29">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.20696 20.2929C9.59748 20.6834 9.59748 21.3166 9.20696 21.7071C8.81643 22.0976 8.18327 22.0976 7.79274 21.7071L4.49985 18.4142C3.7188 17.6332 3.7188 16.3668 4.49985 15.5858L7.79274 12.2929C8.18327 11.9024 8.81643 11.9024 9.20696 12.2929C9.59748 12.6834 9.59748 13.3166 9.20696 13.7071L6.91406 16L18.9998 16C19.5521 16 19.9998 16.4477 19.9998 17C19.9998 17.5523 19.5521 18 18.9998 18L6.91406 18L9.20696 20.2929Z"
fill="white"
/>
<path
d="M5 6C4.44771 6 4 6.44772 4 7C4 7.55228 4.44772 8 5 8L17.0858 8L14.7929 10.2929C14.4024 10.6834 14.4024 11.3166 14.7929 11.7071C15.1834 12.0976 15.8166 12.0976 16.2071 11.7071L19.5 8.41421C20.281 7.63316 20.281 6.36683 19.5 5.58579L16.2071 2.29289C15.8166 1.90237 15.1834 1.90237 14.7929 2.29289C14.4024 2.68342 14.4024 3.31658 14.7929 3.70711L17.0858 6L5 6Z"
fill="white"
/>
</svg>
</div>
<div className="content">
<div className="text-body-3 fw-6 total mb_2">Total Sales</div>
<div className="counter-item style-1 flex-column align-items-start mb_6">
<div className="counter-number">
<h2 className="odometer fw-6">
<OdometerComponent max={30} />
</h2>
<span className="sub fw-6">k</span>
<span className="sub fw-6">+</span>
</div>
</div>
<p className="text-body-3 fw-6">
<svg
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 7L8 2L13 7"
stroke="#83BF6E"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 14V2"
stroke="#83BF6E"
strokeWidth={2}
strokeLinecap="round"
/>
</svg>
<span>25.8%</span> this week
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

106
components/homes/marketing-consulting/Banner.jsx Normal file
View File

@ -0,0 +1,106 @@
"use client";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useEffect } from "react";
gsap.registerPlugin(ScrollTrigger);
export default function Banner() {
useEffect(() => {
// Select all elements with the class "text-container" inside ".banner-stripe"
const textContainers = document.querySelectorAll(
".banner-stripe .text-container"
);
textContainers.forEach((container) => {
const settings = {
scrollTrigger: {
trigger: container,
start: "top bottom", // Animation starts when the top of the element hits the bottom of the viewport
end: "bottom top", // Animation ends when the bottom of the element hits the top of the viewport
scrub: 1, // Smooth scrubbing effect
markers: false, // Disable debug markers
},
ease: "none", // No easing
};
// Check if the element has the class "effect-left" or "effect-right"
if (container.classList.contains("effect-left")) {
settings.x = "-7%"; // Move left by 7%
}
if (container.classList.contains("effect-right")) {
settings.x = "7%"; // Move right by 7%
}
// Apply the GSAP animation
gsap.to(container, settings);
});
// Cleanup ScrollTrigger instances on component unmount
return () => {
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
};
}, []); // Empty dependency array ensures this runs only once after mount
return (
<div className="banner-stripe tf-spacing-43">
<div className="text-container scrolling-text effect-right">
<span className="banner-text text-display-2 text_mono-gray-5">
Email
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
<i className="icon-Star-2" />
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
Business
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
<i className="icon-Star-2" />
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
Marketing
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
<i className="icon-Star-2" />
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
Consulting
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
<i className="icon-Star-2" />
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
Money
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
<i className="icon-Star-2" />
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
Email
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
<i className="icon-Star-2" />
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
Business
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
<i className="icon-Star-2" />
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
Marketing
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
<i className="icon-Star-2" />
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
Consulting
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
<i className="icon-Star-2" />
</span>
<span className="banner-text text-display-2 text_mono-gray-5">
Money
</span>
</div>
</div>
);
}

140
components/homes/marketing-consulting/Blogs.jsx Normal file
View File

@ -0,0 +1,140 @@
"use client";
import { blogArticles3 } from "@/data/blogs";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
export default function Blogs() {
return (
<div className="section-blog style-1 sw-layout-1 tf-spacing-44">
<div className="tf-container-2">
<div className="heading-section d-flex gap_12 justify-content-between align-items-end flex-wrap-md mb_59">
<div className="left">
<div className="heading-tag v2 d-flex gap_12 mb_20 text_mono-gray-5 fw-5">
<div className="icon">
<i className="icon-blogger text_mono-gray-5" />
</div>
<p className="text-body-3 fw-5">Blogs</p>
</div>
<h2 className="title text_white fw-5 split-text effect-right">
Our precious <span className="text-gradient">blogs</span>
</h2>
</div>
<div className="right">
<div className="wrap-sw-button d-flex gap_16">
<div className="sw-button style-default has-bg nav-prev-layout-1">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 12L20 12"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8.99996 17C8.99996 17 4.00001 13.3176 4 12C3.99999 10.6824 9 7 9 7"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<div className="sw-button style-default has-bg nav-next-layout-1">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 12L4 12"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15 17C15 17 20 13.3176 20 12C20 10.6824 15 7 15 7"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div className="tf-container-2 slider-layout-right">
<Swiper
className="swiper"
breakpoints={{
0: { slidesPerView: 1.2 },
575: {
slidesPerView: 1.6,
},
768: {
slidesPerView: 2.5,
spaceBetween: 30,
},
992: {
slidesPerView: 3.6,
spaceBetween: 72,
},
}}
spaceBetween={15}
>
{blogArticles3.map((article) => (
<SwiperSlide
className="swiper-slide"
key={`blog-article-${article.id}`}
>
<div className="blog-article-item style-3 hover-image-3">
<Link
href={`/single-post/${article.id}`}
className="article-thumb mb_30"
>
<Image
className="lazyload"
data-src={article.imageSrc}
alt="blog"
src={article.imageSrc}
width={article.width}
height={article.height}
/>
<Image
className="lazyload"
data-src={article.imageSrc}
alt="blog"
src={article.imageSrc}
width={article.width}
height={article.height}
/>
</Link>
<div className="article-content">
<p className="text-body-1 text_mono-gray-5 mb_8">
{article.date}
</p>
<h6 className="title fw-5 letter-spacing-2 text_white">
<Link href={`/single-post/${article.id}`} className="link">
{article.title}
</Link>
</h6>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
);
}

50
components/homes/marketing-consulting/Brands.jsx Normal file
View File

@ -0,0 +1,50 @@
const brands = [
{ id: 1, src: "/images/brands/brand-1.png", width: 169, height: 56 },
{ id: 2, src: "/images/brands/brand-2.png", width: 169, height: 56 },
{ id: 3, src: "/images/brands/brand-3.png", width: 213, height: 56 },
{ id: 4, src: "/images/brands/brand-4.png", width: 187, height: 56 },
{ id: 5, src: "/images/brands/brand-5.png", width: 169, height: 56 },
{ id: 6, src: "/images/brands/brand-6.png", width: 169, height: 56 },
{ id: 7, src: "/images/brands/brand-7.png", width: 169, height: 56 },
{ id: 8, src: "/images/brands/brand-8.png", width: 168, height: 56 },
];
import Image from "next/image";
// Create 3 sets (original + 2 clones) for the infinite scroll effect
const allBrands = [...brands, ...brands, ...brands];
export default function Brands() {
return (
<div className="wrap-logo-carousel">
<div className="heading-section">
<h6 className="fw-5 text-center">
Trusted by over 1000+ companies around the world
</h6>
</div>
<div className="infiniteslide_wrap" style={{ overflow: "hidden" }}>
<div
className="infiniteslide tf-marquee infiniteSlide"
style={{ animationDirection: "reverse" }}
>
{allBrands.map((brand, index) => (
<div
key={`brand-${brand.id}-${index}`}
className={`marquee-item style-2${
index >= brands.length ? " infiniteslide_clone" : ""
}`}
style={{ flex: "0 0 auto", display: "block" }}
>
<div className="partner style-1">
<Image
alt={`Brand ${brand.id}`}
src={brand.src}
width={brand.width}
height={brand.height}
/>
</div>
</div>
))}
</div>
</div>
</div>
);
}

143
components/homes/marketing-consulting/CaseStudies.jsx Normal file
View File

@ -0,0 +1,143 @@
"use client";
import { caseStudies5 } from "@/data/caseStudies";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
import { Navigation } from "swiper/modules";
export default function CaseStudies() {
return (
<div className="section-case-studies style-1 tf-spacing-36 pb-0">
<div className="tf-container">
<div className="heading-section gap_12 text-center">
<div className="heading-tag d-flex gap_12 mx-auto mb_20 text_mono-dark-8 fw-5">
<div className="icon">
<i className="icon-book-bookmark-02" />
</div>
<p className="text-body-3">Case studies</p>
</div>
<h2 className="title text_mono-dark-9 fw-5 split-text effect-right">
Our <span className="text-gradient">case</span> studies reveal
</h2>
<p
className="text-body-1 text_mono-gray-7 mt_28 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
Helping you streamline operations, reduce costs, and achieve
measurable <br />
success with proven methodologies.
</p>
</div>
</div>
<div className="wrap">
<Swiper
className="swiper sw-layout"
breakpoints={{
0: { slidesPerView: 1.3 },
575: {
slidesPerView: 1.3,
},
768: {
slidesPerView: 2.5,
spaceBetween: 20,
},
992: {
slidesPerView: 3.6,
spaceBetween: 48,
},
1200: {
slidesPerView: 4.9,
spaceBetween: 48,
},
}}
loop
centeredSlides
spaceBetween={15}
modules={[Navigation]}
navigation={{
prevEl: ".snbp10",
nextEl: ".snbn10",
}}
>
{caseStudies5.map((study) => (
<SwiperSlide
className="swiper-slide"
key={`case-study-${study.id}`}
>
<div className="case-studies-item style-3 hover-image">
<div className="img-style">
<Image
className="lazyload"
data-src={study.imgSrc}
alt="case-studies"
src={study.imgSrc}
width={study.width}
height={study.height}
/>
</div>
<h6 className="title text_white">
<Link href={`/single-project/${study.id}`} className="link">
{study.title}
</Link>
</h6>
<Link
href={`/single-project/${study.id}`}
className="tf-btn btn-white"
>
<span>
<svg
width={18}
height={18}
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.75 5.25009L4.5 13.5001"
stroke="#121416"
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M8.25 4.59864C8.25 4.59864 12.4752 4.24246 13.1164 4.88365C13.7575 5.52483 13.4013 9.75 13.4013 9.75"
stroke="#121416"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</span>
<span className="bg-effect" />
</Link>
</div>
</SwiperSlide>
))}
<div className="wrap-sw-button d-flex gap_16 justify-content-center">
<div className="sw-button style-default has-bg nav-prev-layout snbp10">
<i className="icon-arrow-left-02-sharp" />
</div>
<div className="sw-button style-default has-bg nav-next-layout snbn10">
<i className="icon-arrow-right-02-sharp" />
</div>
</div>
</Swiper>
<div className="shape scroll-tranform">
<Image
alt="shape"
src="/images/item/shape-10.png"
width={1280}
height={624}
/>
</div>
</div>
<div className="shape-1">
<Image
alt="shape"
src="/images/item/shape-11.png"
width={1920}
height={483}
/>
</div>
</div>
);
}

28
components/homes/marketing-consulting/Cta.jsx Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
import Link from "next/link";
export default function Cta() {
return (
<div className="tf-container-2 tf-spacing-45 pt-0">
<div className="banner-CTA">
<h1 className="text_white split-text effect-right">
Ready to start a new project?
</h1>
<div className="bot flex-wrap-md d-flex align-items-end justify-content-between gap_12">
<p className="text-body-1 text_white split-text split-lines-transform">
Our expert marketing consulting services are designed to help your
business unlock its full potential. From identifying growth
opportunities
</p>
<Link
href={`/pricing`}
className="tf-btn btn-white2 wow animate__fadeInRight animate__animated"
data-wow-delay="0s"
>
<span className="text-body-3">Get Started</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
);
}

159
components/homes/marketing-consulting/Faqs.jsx Normal file
View File

@ -0,0 +1,159 @@
"use client";
const faqData = [
{
id: 1,
question: "Do you provide personalized financial plans?",
answer:
"Advitex offers a range of financial consulting services, including personal financial planning, corporate strategy, investment advisory, and risk compliance. We tailor our solutions to help individuals, businesses, and investors achieve their financial goals efficiently.",
isActive: false,
},
{
id: 2,
question: "How can financial consulting benefit my business?",
answer:
"Advitex offers a range of financial consulting services, including personal financial planning, corporate strategy, investment advisory, and risk compliance. We tailor our solutions to help individuals, businesses, and investors achieve their financial goals efficiently.",
isActive: true, // Default open
},
{
id: 3,
question: "What services does Advitex offer?",
answer:
"Advitex offers a range of financial consulting services, including personal financial planning, corporate strategy, investment advisory, and risk compliance. We tailor our solutions to help individuals, businesses, and investors achieve their financial goals efficiently.",
isActive: false,
},
{
id: 4,
question: "What industries do you specialize in?",
answer:
"Advitex offers a range of financial consulting services, including personal financial planning, corporate strategy, investment advisory, and risk compliance. We tailor our solutions to help individuals, businesses, and investors achieve their financial goals efficiently.",
isActive: false,
},
{
id: 5,
question: "How long does the consultation process take?",
answer:
"Advitex offers a range of financial consulting services, including personal financial planning, corporate strategy, investment advisory, and risk compliance. We tailor our solutions to help individuals, businesses, and investors achieve their financial goals efficiently.",
isActive: false,
},
];
import React, { useEffect } from "react";
import Link from "next/link";
export default function Faqs() {
useEffect(() => {
const items = document.querySelectorAll(".action_click");
if (items.length === 0) return;
let isProcessing = false;
const handleClick = (e) => {
if (isProcessing) return;
isProcessing = true;
// Remove "active" from all other .action_click elements
items.forEach((item) => {
if (!item.contains(e.currentTarget)) {
item.classList.remove("active");
}
});
// Toggle "active" on the clicked one
const clickedItem = e.currentTarget.closest(".action_click");
if (clickedItem) {
clickedItem.classList.toggle("active");
}
setTimeout(() => {
isProcessing = false;
}, 500);
};
// Add listeners
const actions = document.querySelectorAll(".action_click .action");
actions.forEach((el) => el.addEventListener("click", handleClick));
// Cleanup
return () => {
actions.forEach((el) => el.removeEventListener("click", handleClick));
};
}, []);
return (
<div className="section-faqs style-2 tf-spacing-1 pt-0">
<div className="tf-container">
<div className="heading-section gap_12 text-center mb_64">
<div className="heading-tag d-flex gap_12 mx-auto mb_20 text_mono-dark-8 fw-5">
<div className="icon">
<i className="icon-message-question" />
</div>
<p className="text-body-3">The FAQs</p>
</div>
<h2 className="title text_mono-dark-9 fw-5 split-text effect-right">
Everything you need to <span className="text-gradient">know</span>
</h2>
<p
className="text-body-1 text_mono-gray-7 mt_28 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
Helping you streamline operations, reduce costs, and achieve
measurable <br />
success with proven methodologies.
</p>
</div>
<ul
className="accordion-wrap style-faqs d-grid gap_23"
id="accordion-faq-4"
>
{faqData.map((faq) => (
<li
key={faq.id}
className={`accordion-item action_click style-default v4 scrolling-effect effectRight ${
faq.isActive ? "active" : ""
}`}
>
<a
href={`#accordion-4-${faq.id}`}
className={`action accordion-title current ${
faq.isActive ? "" : "collapsed"
}`}
data-bs-toggle="collapse"
aria-expanded={faq.isActive ? "true" : "false"}
aria-controls={`accordion-4-${faq.id}`}
>
<div className="heading">
<div className="text_mono-dark-9 text-body-1 title fw-5">
{faq.question}
</div>
</div>
<div className="icon" />
</a>
<div
id={`accordion-4-${faq.id}`}
className={`collapse ${faq.isActive ? "show" : ""}`}
data-bs-parent="#accordion-faq-4"
>
<div className="accordion-faqs-content">
<p className="text_mono-dark-9 text-body-2">{faq.answer}</p>
</div>
</div>
</li>
))}
</ul>
<div className="bot text-center">
<div className="text-body-1 text_mono-gray-7">
If you can't find your answer, please{" "}
<Link
href={`/contact-us`}
className="link text_black fw-5 text-decoration-underline"
>
Contact Us
</Link>
</div>
<Link href={`/faqs`} className="tf-btn btn-primary2 height-2 mx-auto">
<span>All questions</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
);
}

139
components/homes/marketing-consulting/Features.jsx Normal file
View File

@ -0,0 +1,139 @@
import React from "react";
import Image from "next/image";
export default function Features() {
return (
<div className="section-values style-1 tf-spacing-35">
<div className="tf-container-2">
<div className="heading-section text-center mb_58">
<div className="heading-tag d-flex gap_12 text_mono-dark-8 fw-5 fw-5 mx-auto mb_20">
<div className="icon">
<i className="icon-bulb" />
</div>
<p className="text-body-3 fw-5">Our Core Values</p>
</div>
<h2 className="title text_mono-dark-9 fw-5 split-text split-lines-rotation-x">
Our Innovative strategies backed by <br />
<span className="text-gradient"> Data-Driven</span> insights
</h2>
</div>
<div className="tf-grid-layout lg-col-3 md-col-2">
<div className="tf-box-icon style-5 effect-icon">
<div className="icon mb_24">
<Image
alt="icon"
src="/images/box-icon/creative-solutions.svg"
width={29}
height={29}
/>
</div>
<div className="content">
<div className="text-body-2 text_mono-dark-9 mb_9 fw-5">
Creative solutions that deliver
</div>
<p className="text-body-3 text_mono-gray-7">
Their innovative campaigns in redefining our brand identity and
market positioning have increased engagement by 22%
</p>
</div>
</div>
<div className="tf-box-icon style-5 effect-icon">
<div className="icon mb_24">
<Image
alt="icon"
src="/images/box-icon/package-open.svg"
width={33}
height={32}
/>
</div>
<div className="content">
<div className="text-body-2 text_mono-dark-9 mb_9 fw-5">
Results-Driven Approach
</div>
<p className="text-body-3 text_mono-gray-7">
Their targeted strategies in optimizing lead generation funnels
boosted our conversion rates by 15% last quarter.
</p>
</div>
</div>
<div className="tf-box-icon style-5 effect-icon">
<div className="icon mb_24">
<Image
alt="icon"
src="/images/box-icon/laptop-issue.svg"
width={33}
height={32}
/>
</div>
<div className="content">
<div className="text-body-2 text_mono-dark-9 mb_9 fw-5">
Client-Centric Collaboration
</div>
<p className="text-body-3 text_mono-gray-7">
Their tailored marketing plans aligned with our goals have
strengthened customer loyalty and retention by 20%.
</p>
</div>
</div>
<div className="tf-box-icon style-5 effect-icon">
<div className="icon mb_24">
<Image
alt="icon"
src="/images/box-icon/auto-conversations.svg"
width={32}
height={32}
/>
</div>
<div className="content">
<div className="text-body-2 text_mono-dark-9 mb_9 fw-5">
Transparency and Integrity
</div>
<p className="text-body-3 text_mono-gray-7">
Their straightforward reporting and ethical practices have
ensured trust while improving campaign efficiency by 25%.
</p>
</div>
</div>
<div className="tf-box-icon style-5 effect-icon">
<div className="icon mb_24">
<Image
alt="icon"
src="/images/box-icon/database.svg"
width={33}
height={32}
/>
</div>
<div className="content">
<div className="text-body-2 text_mono-dark-9 mb_9 fw-5">
Data-Powered Decisions
</div>
<p className="text-body-3 text_mono-gray-7">
Their analysis-driven recommendations in refining ad spend
allocation have increased ROI by 30% in our key markets.
</p>
</div>
</div>
<div className="tf-box-icon style-5 effect-icon">
<div className="icon mb_24">
<Image
alt="icon"
src="/images/box-icon/discover-circle.svg"
width={33}
height={32}
/>
</div>
<div className="content">
<div className="text-body-2 text_mono-dark-9 mb_9 fw-5">
Commitment to Excellence
</div>
<p className="text-body-3 text_mono-gray-7">
Their proactive support in managing our multi-channel campaigns
led to a seamless launch and 18% revenue growth.
</p>
</div>
</div>
</div>
</div>
</div>
);
}

390
components/homes/marketing-consulting/Features2.jsx Normal file
View File

@ -0,0 +1,390 @@
import React from "react";
import Image from "next/image";
export default function Features2() {
return (
<div className="section">
<div className="tf-container-2">
<div className="heading-section text-center mb_58">
<div className="heading-tag d-flex gap_12 mx-auto mb_20 text_mono-dark-8 fw-5">
<div className="icon">
<i className="icon-user-question-02" />
</div>
<p className="text-body-3 fw-5">Why Choose Us ?</p>
</div>
<h2 className="title text_mono-dark-9 fw-5 split-text split-lines-rotation-x">
Our unique solutions to{" "}
<span className="text-gradient">unlock</span> your <br />
brand’s full potential
</h2>
<p
className="text-body-1 text_mono-gray-7 mt_27 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
Discover the expertise, innovation, and commitment that set us
apart. We <br />
deliver tailored strategies and measurable results to help.
</p>
</div>
<ul
className="nav nav-tabs-wrap style-2 overflow-x-auto mb_48"
id="myTab"
role="tablist"
>
<li className="nav-item" role="presentation">
<button
className="nav-link active"
id="service-1"
data-bs-toggle="tab"
data-bs-target="#service-1-pane"
type="button"
role="tab"
aria-controls="service-1-pane"
aria-selected="true"
>
<span className="text-body-1 text_mono-gray-5">01</span>
<span className="fw-5 h6"> Why Need Marketing ?</span>
<span className="line" />
</button>
</li>
<li className="nav-item" role="presentation">
<button
className="nav-link"
id="service-2"
data-bs-toggle="tab"
data-bs-target="#service-2-pane"
type="button"
role="tab"
aria-controls="service-2-pane"
aria-selected="false"
>
<span className="text-body-1 text_mono-gray-5">02</span>
<span className="fw-5 h6">Understand your Goals</span>
<span className="line" />
</button>
</li>
<li className="nav-item" role="presentation">
<button
className="nav-link"
id="service-3"
data-bs-toggle="tab"
data-bs-target="#service-3-pane"
type="button"
role="tab"
aria-controls="service-3-pane"
aria-selected="false"
>
<span className="text-body-1 text_mono-gray-5">03</span>
<span className="fw-5 h6">Our Completed Process</span>
<span className="line" />
</button>
</li>
<li className="nav-item" role="presentation">
<button
className="nav-link"
id="service-4"
data-bs-toggle="tab"
data-bs-target="#service-4-pane"
type="button"
role="tab"
aria-controls="service-4-pane"
aria-selected="false"
>
<span className="text-body-1 text_mono-gray-5">04</span>
<span className="fw-5 h6"> Evaluating and Optimizing</span>
<span className="line" />
</button>
</li>
</ul>
<div
className="tab-content flat-animate-tab effect-content-slide"
id="myTabContent"
>
<div
className="tab-pane show active"
id="service-1-pane"
role="tabpanel"
aria-labelledby="service-1"
tabIndex={0}
>
<div className="box-service style-2">
<div className="img-style effect-item effect-left">
<Image
className="lazyload"
data-src="/images/section/service-5.jpg"
alt="service"
src="/images/section/service-5.jpg"
width={651}
height={691}
/>
</div>
<div className="content">
<div className="heading effect-item effect-right">
<h6 className="text_primary fw-5 mb_12 number">01</h6>
<h4 className="fw-5 mb_14 mb_24 title">
Why Need Marketing ?
</h4>
<p className="text-body-1 text_mono-gray-7">
Delivering tailored marketing solutions to help you connect,
engage, and succeed in an ever-changing marketplace.
</p>
</div>
<div>
<ul className="list effect-item effect-right effect-3 mb_56">
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" /> We offering
customized strategies that truly work for you
</li>
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" />
Brings the knowledge and insights you need to make
informed decisions that drive success.
</li>
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" /> Cancel anytime you
want
</li>
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" /> Proven Results and
Client Satisfaction
</li>
</ul>
<div className="author d-flex gap_24 align-items-center effect-item effect-right effect-4">
<div className="avatar rounded-cycle overflow-hidden">
<Image
alt="avatar"
src="/images/avatar/avatar-17.jpg"
width={144}
height={144}
/>
</div>
<div className="content">
<p className="description fw-3 text-body-2 mb_4 text_color-text-1">
“It's a comprehensive tool of Advitex that we
<span className="fw-6 text_color-text-1">
rely on daily{" "}
</span>
to guide our
<span className="fw-6 text_color-text-1">
investment decisions
</span>
”
</p>
<div className="text-body-2 fw-6 text_color-text-1">
John Sena - CEO of Kling
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="tab-pane show"
id="service-2-pane"
role="tabpanel"
aria-labelledby="service-2"
tabIndex={0}
>
<div className="box-service style-2">
<div className="img-style effect-item effect-left">
<Image
className="lazyload"
data-src="/images/section/service-6.jpg"
alt="service"
src="/images/section/service-6.jpg"
width={651}
height={691}
/>
</div>
<div className="content">
<div className="heading mb_28 effect-item effect-right">
<h6 className="text_primary fw-5 mb_12 number">02</h6>
<h4 className="fw-5 mb_14 mb_24 title">
Understand your Goals
</h4>
<p className="text-body-1 text_mono-gray-7">
We align with your vision to provide solutions that truly
resonate with your unique objectives.
</p>
</div>
<ul className="list effect-item effect-right effect-3 mb_56">
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" /> Personalized
approaches crafted for your specific needs
</li>
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" /> Strategic insights
to turn your goals into measurable outcomes
</li>
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" /> Flexibility to adapt
as your priorities change
</li>
</ul>
<div className="author d-flex gap_24 align-items-center effect-item effect-right effect-4">
<div className="avatar rounded-cycle overflow-hidden">
<Image
alt="avatar"
src="/images/avatar/avatar-5.jpg"
width={100}
height={100}
/>
</div>
<div className="content">
<p className="description fw-3 text-body-2 mb_4 text_color-text-1">
"Thanks to Advitex's stock planning tools, we have seen
remarkable stability in our investments, even during
volatile periods."
</p>
<div className="text-body-2 fw-6 text_color-text-1">
Alex Boar - CEO of Marcus
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="tab-pane show"
id="service-3-pane"
role="tabpanel"
aria-labelledby="service-3"
tabIndex={0}
>
<div className="box-service style-2">
<div className="img-style effect-item effect-left">
<Image
className="lazyload"
data-src="/images/section/service-7.jpg"
alt="service"
src="/images/section/service-7.jpg"
width={651}
height={691}
/>
</div>
<div className="content">
<div className="heading mb_28 effect-item effect-right">
<h6 className="text_primary fw-5 mb_12 number">03</h6>
<h4 className="fw-5 mb_14 mb_24 title">
Our Completed Process
</h4>
<p className="text-body-1 text_mono-gray-7">
We ensure every step is thorough, seamless, and designed to
maximize your success.
</p>
</div>
<ul className="list effect-item effect-right effect-3 mb_56">
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" /> End-to-end solutions
tailored to your requirements
</li>
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" />
Transparent workflows for clarity and trust
</li>
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" />
Exceptional expertise ensuring timely results
</li>
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" />
Proven methodologies backed by client success stories
</li>
</ul>
<div className="author d-flex gap_24 align-items-center effect-item effect-right effect-4">
<div className="avatar rounded-cycle overflow-hidden">
<Image
alt="avatar"
src="/images/avatar/avatar-6.jpg"
width={100}
height={100}
/>
</div>
<div className="content">
<p className="description fw-3 text-body-2 mb_4 text_color-text-1">
"Advitex's strategic insights have been crucial in
redefining our business path and keeping us ahead of the
curve."
</p>
<div className="text-body-2 fw-6 text_color-text-1">
Elise Chrona - CEO of Minga
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="tab-pane show"
id="service-4-pane"
role="tabpanel"
aria-labelledby="service-4"
tabIndex={0}
>
<div className="box-service style-2">
<div className="img-style effect-item effect-left">
<Image
className="lazyload"
data-src="/images/section/service-8.jpg"
alt="service"
src="/images/section/service-8.jpg"
width={651}
height={691}
/>
</div>
<div className="content">
<div className="heading mb_28 effect-item effect-right">
<h6 className="text_primary fw-5 mb_12 number">04</h6>
<h4 className="fw-5 mb_14 mb_24 title">
Evaluating and Optimizing
</h4>
<p className="text-body-1 text_mono-gray-7">
Continuous improvement ensures your goals stay on track and
exceed expectations.
</p>
</div>
<ul className="list effect-item effect-right effect-3 mb_56">
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" />
Data-driven evaluations to measure performance
</li>
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" />
Brings the knowledge and insights you need to make informed
decisions that drive success.
</li>
<li className="text-body-1 text_white">
<i className="icon-check-cycle-line" />
Agile strategies to refine and improve results
</li>
</ul>
<div className="author d-flex gap_24 align-items-center effect-item effect-right effect-4">
<div className="avatar rounded-cycle overflow-hidden">
<Image
alt="avatar"
src="/images/avatar/avatar-8.jpg"
width={96}
height={96}
/>
</div>
<div className="content">
<p className="description fw-3 text-body-2 mb_4 text_color-text-1">
"Advitex's investment planning has
<span className="">simplified complex decisions</span> ,
giving us clarity and
<span className="text_color-text-1 fw-6">confidence</span>
in our financial journey."
</p>
<div className="text-body-2 fw-6 text_color-text-1">
Elise Chrona - CEO of Minga
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

117
components/homes/marketing-consulting/Figures.jsx Normal file
View File

@ -0,0 +1,117 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { counterItems4 } from "@/data/facts";
import OdometerComponent from "@/components/common/OdometerComponent";
export default function Figures() {
return (
<div className="section-figures position-relative">
<div className="tf-container-2">
<div className="heading-section d-flex gap_12 justify-content-between flex-wrap-md mb_59">
<div className="left">
<div className="heading-tag d-flex gap_12 v2 mb_20 fw-5">
<div className="icon">
<svg
width={18}
height={18}
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_10160_68)">
<circle
cx="4.6875"
cy="4.6875"
r="3.1875"
stroke="#7E8995"
strokeWidth="1.125"
/>
<circle
cx="13.3125"
cy="13.3125"
r="3.1875"
stroke="#7E8995"
strokeWidth="1.125"
/>
<circle
cx="4.6875"
cy="13.3125"
r="3.1875"
stroke="#7E8995"
strokeWidth="1.125"
/>
<path
d="M13.5 1.5V7.5M16.5 4.5L10.5 4.5"
stroke="#7E8995"
strokeWidth="1.125"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_10160_68">
<rect width={18} height={18} fill="white" />
</clipPath>
</defs>
</svg>
</div>
<p className="text-body-3 text_mono-gray-5 fw-5">Figures</p>
</div>
<h2 className="title text_white fw-5 split-text split-lines-transform">
Where data <span className="text-gradient">tells</span> our storys
</h2>
</div>
<div className="right">
<p className="text-body-1 text_mono-gray-5 mb_23 split-text split-lines-transform">
Empowering businesses with data-driven strategies to <br />
achieve sustainable growth and lasting impact.
</p>
<Link
href={`/about`}
className="btn_link text-body-1 text_white link d-flex align-items-center gap_8"
>
<span>Explore</span>
<i className="icon-long-arrow-alt-right-solid" />
</Link>
</div>
</div>
<div className="wrap-counter style-2 tf-grid-layout lg-col-4 sm-col-2 gap-0">
{counterItems4.map((item, index) => (
<div key={index} className="counter-item style-2">
<div className="icon mb_18">
<i className={item.icon} />
</div>
<p className="text-body-2 mb_6 text_mono-gray-5">{item.label}</p>
<div className="counter-number">
<div className="odometer text_white">
<OdometerComponent max={item.value} />
</div>
<span className="sub text_white">{item.unit}</span>
</div>
</div>
))}
</div>
</div>
<div className="shape-2 position-absolute hide-lg">
<Image
alt="item"
src="/images/item/shape-3.png"
width={742}
height={223}
/>
</div>
<div className="shape position-absolute">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1000 100"
preserveAspectRatio="none"
>
<path
className="elementor-shape-fill"
d="M500,97C126.7,96.3,0.8,19.8,0,0v100l1000,0V1C1000,19.4,873.3,97.8,500,97z"
/>
</svg>
</div>
</div>
);
}

185
components/homes/marketing-consulting/Hero.jsx Normal file
View File

@ -0,0 +1,185 @@
"use client";
const infinityImages = [
{
id: 1,
src: "/images/page-title/infinity-img-1.jpg",
width: 434,
height: 437,
},
{
id: 2,
src: "/images/page-title/infinity-img-2.jpg",
width: 161,
height: 437,
},
{
id: 3,
src: "/images/page-title/infinity-img-3.jpg",
width: 434,
height: 437,
},
{
id: 4,
src: "/images/page-title/infinity-img-4.jpg",
width: 161,
height: 437,
},
{
id: 5,
src: "/images/page-title/infinity-img-5.jpg",
width: 434,
height: 437,
},
{
id: 6,
src: "/images/page-title/infinity-img-6.jpg",
width: 161,
height: 437,
},
];
const allInfinityImages = [
...infinityImages,
...infinityImages,
...infinityImages,
];
import Image from "next/image";
export default function Hero() {
return (
<div className="page-title style-5">
<div className="tf-container mt_25">
<div className="row">
<div className="col-12">
<div className="heading-title text-center mb_40">
<div className="heading-tag d-flex gap_12 align-items-center mx-auto mb_20">
<div className="icon">
<i className="icon-medal-first-place" />
</div>
<p className="text-body-3 text_mono-dark-10 fw-5">
Top #1 Marketing Consulting Agency
</p>
</div>
<h1 className="title text_mono-dark-9 fw-5 mb_28 split-text">
Strategic <span className="text-gradient">marketing</span>{" "}
solutions designed <br />
to empower your brand.
</h1>
<p className="text_mono-gray-7 sub-heading">
Providing expert marketing consulting services to help you
attract, <br />
engage, and thrive in today’s dynamic marketplace
</p>
</div>
<form
onSubmit={(e) => e.preventDefault()}
className="form-send-email mb_31"
>
<fieldset>
<input
className=""
type="email"
placeholder="Your Email Address"
name="text"
tabIndex={2}
defaultValue=""
aria-required="true"
required
/>
</fieldset>
<div className="button-submit">
<button className="tf-btn btn-primary2" type="submit">
<span className="text-body-3">Get Started</span>
<span className="bg-effect" />
</button>
</div>
</form>
<div className="facts d-flex align-items-center justify-content-center">
<div className="avatar-wrap d-flex">
<div className="avatar item-1">
<Image
alt=""
src="/images/avatar/facts-3.png"
width={28}
height={28}
/>
</div>
<div className="avatar item-2">
<Image
alt=""
src="/images/avatar/facts-4.png"
width={28}
height={28}
/>
</div>
<div className="avatar item-3">
<Image
alt=""
src="/images/avatar/facts-5.png"
width={28}
height={28}
/>
</div>
<div className="avatar item-4">
<Image
alt=""
src="/images/avatar/facts-6.png"
width={28}
height={28}
/>
</div>
</div>
<p className="text-body-3 text_mono-dark-9">
200+ Businesses Engaged
</p>
</div>
</div>
</div>
</div>
<div className="bot">
<div className="shape shape-top">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1000 100"
preserveAspectRatio="none"
>
<path
className="shape-fill"
d="M1000,4.3V0H0v4.3C0.9,23.1,126.7,99.2,500,100S1000,22.7,1000,4.3z"
/>
</svg>
</div>
<div className="shape shape-bottom">
<Image
alt=""
src="/images/item/shape-7.png"
width={2232}
height={483}
/>
</div>
<div className="infiniteslide_wrap" style={{ overflow: "hidden" }}>
<div
className="infiniteslide tf-marquee infiniteSlide"
data-clone={2}
data-style="left"
>
{allInfinityImages.map((image, index) => (
<div
className={`marquee-item${
index >= infinityImages.length ? " infiniteslide_clone" : ""
}`}
style={{ flex: "0 0 auto", display: "block" }}
key={`infinity-img-${image.id}-${index}`}
>
<Image
alt="brands"
src={image.src}
width={image.width}
height={image.height}
/>
</div>
))}
</div>{" "}
</div>
</div>
</div>
);
}

172
components/homes/marketing-consulting/Services.jsx Normal file
View File

@ -0,0 +1,172 @@
"use client";
import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { services3 } from "@/data/services";
export default function Services() {
const [activeService, setActiveService] = useState(1);
return (
<div className="section-service style-1">
<div className="tf-container-2">
<div className="heading-section d-flex gap_12 justify-content-between flex-wrap-md mb_59">
<div className="left">
<div className="heading-tag d-flex gap_12 mb_20 text_mono-dark-8 fw-5">
<div className="icon">
<i className="icon-customer-service" />
</div>
<p className="text-body-3 fw-5">Services</p>
</div>
<h2 className="title text_mono-dark-9 fw-5 split-text effect-right">
Getting start is <span className="text-gradient">easy</span>
</h2>
</div>
<div className="right">
<p className="text-body-1 text_mono-gray-7 split-text split-lines-transform">
Explore our range of expert services designed to <br />
elevate your business. From strategic planning to <br />
execution, we deliver solutions.
</p>
</div>
</div>
<div className="top mb_48">
<div className="navigation-bar overflow-x-auto">
<div
className={`nav-item ${activeService == 1 ? "is-active" : ""} `}
onClick={() => setActiveService(1)}
>
Market Research &amp; Analysis
</div>
<div
className={`nav-item ${activeService == 2 ? "is-active" : ""} `}
onClick={() => setActiveService(2)}
>
Brand Development &amp; Positioning
</div>
<div
className={`nav-item ${activeService == 3 ? "is-active" : ""} `}
onClick={() => setActiveService(3)}
>
Digital Marketing
</div>
</div>
<div className="navigation-arrows">
<div
className="arrow"
onClick={() =>
setActiveService((pre) => (pre == 1 ? 3 : pre - 1))
}
id="prevButton"
>
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 11.9998L20 11.9998"
stroke="#141B34"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8.99996 17C8.99996 17 4.00001 13.3176 4 12C3.99999 10.6824 9 7 9 7"
stroke="#141B34"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<div
className="arrow"
onClick={() =>
setActiveService((pre) => (pre == 3 ? 1 : pre + 1))
}
id="nextButton"
>
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 11.9998L4 11.9998"
stroke="#141B34"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15 17C15 17 20 13.3176 20 12C20 10.6824 15 7 15 7"
stroke="#141B34"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
</div>
<div className="service-accordion" style={{ "--main-width": "100%" }}>
<div className="wrap">
<div className="slider-wrap">
{services3.map((service, index) => (
<div
className={`service-accordion-item ${
index + 1 == activeService ? "is-active" : ""
} `}
id={service.id}
key={service.id}
onClick={() => setActiveService(index + 1)}
>
<div className="item-inner">
<div className="naming-list">
<span className="text_mono-gray-5">{service.number}</span>
<div className="title text-body-3 text_mono-dark-9">
{service.title}
</div>
</div>
<div className="box-service style-3">
<div className="left">
<h5 className="fw-5 title">{service.title}</h5>
<div className="bot">
<p className="text-body-1 text_mono-gray-7 mb_29">
{service.description}
</p>
<Link
href={`/service-details/${service.id}`}
className="btn_link text-body-1 text_mono-dark-9 link"
>
<span>Learn More</span>
<i className="icon-long-arrow-alt-right-solid" />
</Link>
</div>
</div>
<div className="right">
<div className="img-style">
<Image
className="lazyload"
data-src={service.image}
alt="service"
src={service.image}
width={393}
height={417}
/>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
);
}

77
components/homes/marketing-consulting/Testimonials.jsx Normal file
View File

@ -0,0 +1,77 @@
"use client";
import { testimonials2 } from "@/data/testimonials";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Image from "next/image";
import { Pagination } from "swiper/modules";
export default function Testimonials() {
return (
<div className="section-testimonial style-6">
<div className="tf-container-2">
<div className="heading-section gap_12 text-center mb_58">
<div className="heading-tag d-flex gap_12 mx-auto mb_20 text_mono-dark-8 fw-5">
<div className="icon">
<i className="icon-star" />
</div>
<p className="text-body-3">Testimonials</p>
</div>
<h2 className="title text_mono-dark-9 fw-5 split-text effect-right">
Voices of our <span className="text-gradient">partners</span> in
growth
</h2>
</div>
<div className="section-testimonial style-3">
<div className="wrapper">
<Swiper
className="swiper sw-layout"
spaceBetween={15}
breakpoints={{
768: {
spaceBetween: 20,
},
992: {
spaceBetween: 24,
},
}}
modules={[Pagination]}
pagination={{
clickable: true,
el: ".spd11",
}}
>
{testimonials2.map((testimonial) => (
<SwiperSlide
className="swiper-slide"
key={`testimonial-${testimonial.id}`}
>
<div className="testimonial style-2">
<div className="logo">
<Image
alt="logo"
src={testimonial.logo}
width={testimonial.logoWidth}
height={testimonial.logoHeight}
/>
</div>
<h5 className="text text_white fw-6">
{testimonial.quote}
</h5>
<div className="author">
<h6 className="name fw-5 text_white mb_2">
{testimonial.name}
</h6>
<p className="text-body-2 text_mono-gray-5">
{testimonial.position}
</p>
</div>
</div>
</SwiperSlide>
))}
<div className="sw-dots style-default sw-pagination-layout style-1 mt_24 justify-content-center d-flex spd11" />
</Swiper>
</div>
</div>
</div>
</div>
);
}

280
components/modals/Mobilemenu.jsx Normal file
View File

@ -0,0 +1,280 @@
"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";
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));
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}
/>
</Link>
<div className="close-menu" data-bs-dismiss="offcanvas">
<i className="icon-times-solid" />
</div>
</div>
<div className="mb-canvas-content">
<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" : ""
}`}
>
<a
href="#dropdown-menu-services"
className="collapsed mb-menu-link"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="dropdown-menu-services"
>
<span>Serivce</span>
<span className="btn-open-sub" />
</a>
<div
id="dropdown-menu-services"
className="collapse"
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>
))}
</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>
</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>
</li>
<li
className={`nav-mb-item ${
isActive("/contact-us") ? "active" : ""
}`}
>
<Link href={`/contact-us`} className="mb-menu-link">
Contact
</Link>
</li>
</ul>
</div>
<div className="mb-other-content">
<ul className="mb-info mb_20">
<li>
<p className="text_mono-gray">
Address:
<a
target="_blank"
href="https://www.google.com/maps?q=16/9,ScotlandUnitedKingdom"
>
<span className="fw-5 text_mono-gray-5">
16/9, Scotland United Kingdom
</span>
</a>
</p>
</li>
<li>
<p className="text_mono-gray">
Email:
<a href="mailto:themesflat@gmail.com">
<span className="fw-5 text_mono-gray-5">
themesflat@gmail.com
</span>
</a>
</p>
</li>
<li>
<p className="text_mono-gray">
Phone:
<a href="tel:+11635565389">
<span className="fw-5 text_mono-gray-5">
+1 16355 65389
</span>
</a>
</p>
</li>
</ul>
<div className="mb-wrap-btn d-flex gap_12">
<Link href={`/pricing`} className="tf-btn">
<span>Get Started</span>
<span className="bg-effect" />
</Link>
<Link href={`/contact-us`} className="tf-btn">
<span>Contact Us</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
</div>
</div>
);
}

232
components/otherPages/About.jsx Normal file
View File

@ -0,0 +1,232 @@
import React from "react";
import Image from "next/image";
import { counterItems5 } from "@/data/facts";
import OdometerComponent from "../common/OdometerComponent";
export default function About() {
return (
<>
{/* .section-about */}
<div className="text-with-img-2 tf-spacing-4">
<div className="tf-container">
<div className="row">
<div className="col-lg-6">
<div className="wrap-img">
<div className="shape-img-bg shape-border">
<Image
alt="shape"
className="img-custom-anim-left wow"
src="/images/section/img-with-shape-3.jpg"
width={692}
height={543}
/>
<div className="img-bg-shape">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
viewBox="0 0 288 288"
>
<linearGradient
id="imagewave-1"
x1="70.711%"
x2="0%"
y1="70.711%"
y2="0%"
>
<stop
className="stop-color"
offset="0%"
stopOpacity={1}
/>
<stop
className="stop-color"
offset="100%"
stopOpacity={1}
/>
</linearGradient>
<path fill="url(#imagewave-1)" d="">
<animate
repeatCount="indefinite"
attributeName="d"
dur="5s"
values="M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
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;
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
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
C48.9,198.6,57.8,191,51,171.3z;
M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
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 "
/>
</path>
</svg>
</div>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="content mb-0">
<h2 className="title split-text split-lines-rotation-x">
Innovate to streamline operations
<br />
and accelerate growth.
</h2>
<p
className="description text-body-1 text_mono-gray-7 description-1 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
We are committed to driving innovation and delivering
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
className="description text-body-1 text_mono-gray-7 description-2 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
By leveraging the latest technologies and industry best
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>
</div>
</div>
</div>
</div>
</div>
{/* /.section-about */}
{/* .section-about */}
<div className="text-with-img-2 tf-spacing-5 pt-0">
<div className="tf-container">
<div className="row">
<div className="col-xl-6">
<div className="content">
<h2 className="title split-text split-lines-rotation-x">
Innovate to streamline operations
<br />
and accelerate growth.
</h2>
<p
className="description text-body-1 text_mono-gray-7 description-1 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
We are committed to driving innovation and delivering
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
className="description text-body-1 text_mono-gray-7 description-2 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
By leveraging the latest technologies and industry best
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>
</div>
</div>
<div className="col-xl-6">
<div className="wrap-img mb-0">
<div className="shape-img-bg">
<Image
alt="shape"
className="img-custom-anim-right wow"
src="/images/section/img-with-shape-4.jpg"
width={695}
height={568}
/>
<div className="img-bg-shape">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
viewBox="0 0 288 288"
>
<linearGradient
id="imagewave"
x1="70.711%"
x2="0%"
y1="70.711%"
y2="0%"
>
<stop
className="stop-color"
offset="0%"
stopOpacity={1}
/>
<stop
className="stop-color"
offset="100%"
stopOpacity={1}
/>
</linearGradient>
<path fill="url(#imagewave)" d="">
<animate
repeatCount="indefinite"
attributeName="d"
dur="5s"
values="M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
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;
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
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
C48.9,198.6,57.8,191,51,171.3z;
M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
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 "
/>
</path>
</svg>
</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>
</>
);
}

74
components/otherPages/Benefits.jsx Normal file
View File

@ -0,0 +1,74 @@
"use client";
import React from "react";
import Image from "next/image";
import { slideItems } from "@/data/benefits";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper/modules";
export default function Benefits() {
return (
<div className="unique-benefits tf-spacing-37">
<div className="tf-container">
<div className="heading-section mb_88">
<h2>Options Highlighting Unique Benefits</h2>
<p className="text-body-1 text_mono-gray-7 mt_20">
We offer a comprehensive benefits package designed to support your
professional and personal well-being. <br />
Here are some of the perks and benefits you can expect:
</p>
</div>
<Swiper
className="swiper tf-sw-mobile bg_1 swiper-active-768"
spaceBetween={15}
modules={[Pagination]}
pagination={{
clickable: true,
el: ".spd15",
}}
>
{slideItems.map((item, index) => (
<SwiperSlide key={index} className="swiper-slide">
<div className="tf-box-icon style-7 v2 effec-icon">
<div className="icon mb_23">
<i className={item.iconClass} />
</div>
<h5 className="mb_12 title">{item.title}</h5>
<p className="text-body-1 text_mono-gray-7">
{item.description}
</p>
</div>
</SwiperSlide>
))}
<div className="sw-dots style-default sw-pagination-mb mt_20 justify-content-center d-flex d-md-none spd15" />
</Swiper>
<div className="swiper tf-sw-mobile bg_1 swiper-inActive-768">
<div className="swiper-wrapper tf-grid-layout-md lg-col-3 gap_25 md-col-2">
{slideItems.map((item, index) => (
<div key={index} className="swiper-slide">
<div className="tf-box-icon style-7 v2 effec-icon">
<div className="icon mb_23">
<i className={item.iconClass} />
</div>
<h5 className="mb_12 title">{item.title}</h5>
<p className="text-body-1 text_mono-gray-7">
{item.description}
</p>
</div>
</div>
))}
</div>
</div>
<div className="img-thumbs">
<Image
className="lazyload parallax-img"
data-src="/images/section/career-1.jpg"
alt="career"
src="/images/section/career-1.jpg"
width={1696}
height={640}
/>
</div>
</div>
</div>
);
}

65
components/otherPages/BlogCommentBox.jsx Normal file
View File

@ -0,0 +1,65 @@
"use client";
export default function BlogCommentBox() {
return (
<form className="form-leave-comment" onSubmit={(e) => e.preventDefault()}>
<div className="wrap">
<fieldset className="">
<textarea
className=""
rows={4}
placeholder="Comment*"
tabIndex={2}
aria-required="true"
required
defaultValue={""}
/>
</fieldset>
<div className="tf-grid-layout md-col-3">
<fieldset className="">
<input
className=""
type="text"
placeholder="Name*"
name="text"
tabIndex={2}
defaultValue=""
aria-required="true"
required
/>
</fieldset>
<fieldset className="">
<input
className=""
type="email"
placeholder="Email*"
name="email"
tabIndex={2}
defaultValue=""
aria-required="true"
required
/>
</fieldset>
<fieldset className="">
<input
className=""
type="text"
placeholder="Website*"
name="website"
tabIndex={2}
defaultValue=""
aria-required="true"
required
/>
</fieldset>
</div>
</div>
<div className="button-submit mt_32">
<button className="tf-btn" type="submit">
<span> Post Comment</span>
<span className="bg-effect" />
</button>
</div>
</form>
);
}

351
components/otherPages/BlogDetails.jsx Normal file
View File

@ -0,0 +1,351 @@
import React from "react";
import BlogSidebar from "./BlogSidebar";
import Image from "next/image";
import BlogCommentBox from "./BlogCommentBox";
export default function BlogDetails() {
return (
<div className="section-sigle-post tf-spacing-3">
<div className="tf-container">
<div className="row">
<div className="col-lg-8">
<div className="left">
<div className="heading-single-post mx-auto mb_40">
<ul className="blog-article-meta d-flex align-items-center mb_32">
<li className="meta-item text-body-1">
<a href="#" className="link-black">
Design Trends
</a>
</li>
<li className="meta-item date text-body-1">
August 23, 2024
</li>
</ul>
<div className="box-infor">
<div className="box-user d-flex gap_16 align-items-center">
<div className="avatar">
<Image
alt="avatar"
src="/images/avatar/avatar-1.jpg"
width={64}
height={64}
/>
</div>
<div className="content">
<div className="sub-heading text_mono-dark-9">Amoro</div>
<span className="text-body-3 text_mono-gray-5">
Written by Editor
</span>
</div>
</div>
<div className="right">
<div className="share item">
<span className="text-body-2 text_mono-dark-9">
Share
</span>
<div className="social d-flex gap_10">
<a href="#" className="text_mono-dark-9 link">
<i className="icon-facebook-f" />
</a>
<a href="#" className="text_mono-dark-9 link">
<i className="icon-instagram" />
</a>
</div>
</div>
<div className="wrap d-flex">
<a
href="#"
className="link copy item text-body-2 text_mono-dark-9"
>
<i className="icon-link-simple" />
Copy link
</a>
</div>
</div>
</div>
</div>
<div className="content-post-main w-full mx-auto">
<div className="thumbs-post-single rounded-24 overflow-hidden mb_112">
<Image
className="lazyload"
data-src="/images/blog/single-post-1.jpg"
alt="thumbs"
src="/images/blog/single-post-1.jpg"
width={1147}
height={719}
/>
</div>
<div className="single-post-content mb_102">
<h2 className="text_mono-dark-9 mb_43 title-sigle-post">
Introduction
</h2>
<p className="text-body-1 mb_44 text_mono-gray-6">
It’s not merely about In today's rapidly evolving digital
landscape, businesses are faced with a myriad of challenges
and opportunities. From staying ahead of technological
advancements to understanding consumer behavior, the
complexity of the modern business environment can be
overwhelming. This is where business consulting comes in. By
providing expert guidance and tailored strategies, business
consultants can help companies navigate the digital maze and
achieve their goals.
</p>
</div>
<div className="single-post-content mb_112">
<h2 className="mb_11 text_mono-dark-9 title-sigle-post mb_43">
The role of business consulting in the digital age
</h2>
<ul>
<li>
<p className="text-body-1 text_mono-gray-6">
<span className="h6">Digital Transformation:</span>{" "}
Consultants can help businesses develop a comprehensive
digital transformation strategy, identifying areas for
improvement and implementing new technologies to
streamline operations.
</p>
</li>
<li>
<p className="text-body-1 text_mono-gray-6">
<span className="h6">Data Analytics:</span> Leveraging
advanced data analytics techniques, consultants can
uncover valuable insights into customer behavior, market
trends, and operational efficiency.
</p>
</li>
<li>
<p className="text-body-1 text_mono-gray-6">
<span className="h6">Cybersecurity:</span> In an
increasingly interconnected world, cybersecurity is
paramount. Consultants can assess a company's security
posture and recommend measures to protect sensitive
data.
</p>
</li>
<li>
<p className="text-body-1 text_mono-gray-6">
<span className="h6">Cloud Computing:</span>{" "}
Transitioning to the cloud can offer numerous benefits,
but it also requires careful planning and execution.
Consultants can guide businesses through the cloud
migration process.
</p>
</li>
<li>
<p className="text-body-1 text_mono-gray-6">
<span className="h6">E-commerce:</span> For businesses
looking to expand their online presence, consultants can
provide expertise in e-commerce strategy, website
development, and digital marketing.
</p>
</li>
</ul>
</div>
<div className="wrap-quote mb_96">
<div className="rounded-24 overflow-hidden mb_29 thumbs-post-single-2">
<Image
className="lazyload"
data-src="/images/blog/single-post-2.jpg"
alt="thumbs"
src="/images/blog/single-post-2.jpg"
width={1147}
height={360}
/>
</div>
<div className="quote style-2">
<p className="h2 text">
" Ready to take your business to the next level? Contact
us today for a free consultation. ”
</p>
</div>
</div>
<div className="single-post-content mb_40">
<h2 className="mb_11 text_mono-dark-9 title-sigle-post mb_43">
Key Benefits of Working with a Business <br />
Consultant
</h2>
<ul>
<li>
<p className="text-body-1 text_mono-gray-6">
<span className="h6">Objectivity:</span> Consultants
bring an unbiased perspective to your business, allowing
them to identify opportunities and challenges that may
be overlooked by internal teams.
</p>
</li>
<li>
<p className="text-body-1 text_mono-gray-6">
<span className="h6">Expertise:</span> Consultants
possess a deep understanding of industry best practices
and emerging trends, enabling them to provide tailored
recommendations.
</p>
</li>
<li>
<p className="text-body-1 text_mono-gray-6">
<span className="h6">Efficiency:</span> By leveraging
their knowledge and experience, consultants can help
businesses achieve their goals more quickly and
efficiently.
</p>
</li>
<li>
<p className="text-body-1 text_mono-gray-6">
<span className="h6">Cost-Effectiveness:</span> While
consulting services can involve an upfront investment,
the long-term benefits often outweigh the costs.
</p>
</li>
</ul>
</div>
<div className="single-post-content mb_90">
<h2 className="text_mono-dark-9 mb_43 title-sigle-post">
Conclusion
</h2>
<p className="text-body-1 text_mono-gray-6">
In conclusion, business consulting can be a valuable asset
for companies seeking to thrive in the digital age. By
providing <br />
expert guidance and tailored strategies, consultants can
help businesses overcome challenges, seize opportunities,
and <br />
achieve long-term success.
</p>
</div>
<div className="wrap-tag d-flex justify-content-between align-items-center flex-wrap gap-24">
<div className="wrap-popular-tag">
<a href="#" className="popular-tag-item">
{" "}
Consulting{" "}
</a>
<a href="#" className="popular-tag-item">
{" "}
Business{" "}
</a>
<a href="#" className="popular-tag-item">
Business Consulting
</a>
</div>
<div className="wishlist-post-sigle d-flex align-items-center gap-16">
<i className="icon-heart-solid" />
<span className="text-body-1">13 Like</span>
</div>
</div>
<div className="reply-comment style-2">
<div className="reply-comment-heading mb_82">
<h2>3 Comments</h2>
</div>
<div className="wrap-comment">
<div className="reply-comment-wrap">
<div className="reply-comment-item">
<div className="heading mb_15">
<div className="box-user">
<div className="avatar">
<Image
alt="avatar"
src="/images/avatar/avatar-2.jpg"
width={119}
height={119}
/>
</div>
<div className="content">
<h5>Kobbie Dao</h5>
<p className="text-body-1 text_mono-gray-5">
September 30, 2023 / 9:30 AM
</p>
</div>
</div>
<a href="#" className="tf-btn btn-primary2">
<span>Reply</span>
<span className="bg-effect" />
</a>
</div>
<div className="comment text-body-1 text_black">
As a web designer myself, I couldn't agree more with
the sentiment that great design should be felt and
remembered long after the screen is turned off.
</div>
</div>
<div className="reply-comment-item type-reply">
<div className="heading mb_35">
<div className="box-user">
<div className="avatar">
<Image
alt="avatar"
src="/images/avatar/avatar-3.jpg"
width={119}
height={119}
/>
</div>
<div className="content">
<h5 className="text_black">Zalatan</h5>
<p className="text-body-1 text_mono-gray-5">
September 30, 2023 / 9:30 AM
</p>
</div>
</div>
<a href="#" className="tf-btn btn-primary2">
<span>Reply</span>
<span className="bg-effect" />
</a>
</div>
<div className="comment text-body-1 text_black">
Aute mi ut suspendisse velit leo, vel risus ac. Amet
dui dignissim fermentum malesuada auctor volutpat,
vestibulum ipsum nulla.
</div>
</div>
</div>
<div className="reply-comment-wrap">
<div className="reply-comment-item">
<div className="heading mb_15">
<div className="box-user">
<div className="avatar">
<Image
alt="avatar"
src="/images/avatar/avatar-4.jpg"
width={119}
height={119}
/>
</div>
<div className="content">
<h5 className="text_black">Bellingham</h5>
<p className="text-body-1 text_mono-gray-5">
September 30, 2023 / 9:30 AM
</p>
</div>
</div>
<a href="#" className="tf-btn btn-primary2">
<span>Reply</span>
<span className="bg-effect" />
</a>
</div>
<div className="comment text-body-1 text_black">
Aute mi ut suspendisse velit leo, vel risus ac. Amet
dui dignissim fermentum malesuada auctor volutpat,
vestibulum ipsum nulla.
</div>
</div>
</div>
</div>
<div className="leave-comment">
<div className="heading-title mb_56">
<h2 className="mb_18">Leave a Reply</h2>
<p className="text-body-1 text_mono-gray letter-spacing-1">
Your email address will not be published. Require field
are marked <span>*</span>
</p>
</div>
<BlogCommentBox />
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-4">
<BlogSidebar />
</div>
</div>
</div>
</div>
);
}

165
components/otherPages/BlogSidebar.jsx Normal file
View File

@ -0,0 +1,165 @@
"use client";
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { relatedPosts } from "@/data/blogs";
export default function BlogSidebar() {
return (
<div className="sidebar">
<div>
<h6 className="sidebar-title mb_21">Search</h6>
<form
className="form-search style-2"
onSubmit={(e) => e.preventDefault()}
>
<fieldset className="text">
<input
type="text"
placeholder="Search"
className="style-2"
name="search"
tabIndex={0}
defaultValue=""
aria-required="true"
required
/>
</fieldset>
<button className="" type="submit">
<i className="icon-search-solid" />
</button>
</form>
</div>
<div>
<h6 className="sidebar-title mb_13">Recent posts</h6>
{relatedPosts.map((post) => (
<div
key={post.id}
className="relatest-post-item style-default hover-image-2"
>
<Link
href={`/single-post/${post.id}`}
className="image-rotate image"
>
<Image
alt=""
src={post.imageSrc}
width={post.width}
height={post.height}
/>
</Link>
<div className="content">
<div className="text-body-1 mb_12">
<Link href={`/single-post/${post.id}`} className="link">
{post.title}
</Link>
</div>
<ul className="blog-article-meta d-flex align-items-center">
<li className="meta-item text-body-3">
<a href="#" className="link-black">
{post.category}
</a>
</li>
<li className="meta-item date text-body-3">{post.date}</li>
</ul>
</div>
</div>
))}
</div>
<div>
<h6 className="sidebar-title mb_18">Category</h6>
<div className="sidebar-categories">
<div className="item">
<a href="#" className="text-body-1 text_mono-gray-6">
Business Consulting
</a>
<span className="text-body-3 text_mono-gray-6">4</span>
</div>
<div className="item">
<a href="#" className="text-body-1 text_mono-gray-6">
Corporate
</a>
<span className="text-body-3 text_mono-gray-6">6</span>
</div>
<div className="item">
<a href="#" className="text-body-1 text_mono-gray-6">
IT Solutions
</a>
<span className="text-body-3 text_mono-gray-6">2</span>
</div>
<div className="item">
<a href="#" className="text-body-1 text_mono-gray-6">
Marketing
</a>
<span className="text-body-3 text_mono-gray-6">8</span>
</div>
<div className="item">
<a href="#" className="text-body-1 text_mono-gray-6">
Startup Consulting
</a>
<span className="text-body-3 text_mono-gray-6">5</span>
</div>
</div>
</div>
<div>
<h6 className="sidebar-title mb_18 -mt_7">Popular tag</h6>
<div className="wrap-popular-tag">
<a href="#" className="popular-tag-item link">
{" "}
Analysis{" "}
</a>
<a href="#" className="popular-tag-item link">
{" "}
Consulting{" "}
</a>
<a href="#" className="popular-tag-item link">
{" "}
Business{" "}
</a>
<a href="#" className="popular-tag-item link">
{" "}
Data{" "}
</a>
<a href="#" className="popular-tag-item link">
Business Consulting
</a>
<a href="#" className="popular-tag-item link">
{" "}
Marketing{" "}
</a>
<a href="#" className="popular-tag-item link">
{" "}
Solutions{" "}
</a>
</div>
</div>
<div>
<h6 className="sidebar-title mb_16">Subscribe newsletter</h6>
<form className="form-newsletter" onSubmit={(e) => e.preventDefault()}>
<p className="text-body-2 mb_14">
Sign up to receive notifications about the latest news and events
from us!
</p>
<div>
<fieldset className="mb_14">
<input
type="email"
className="tb-my-input style-2"
name="email"
placeholder="Enter text"
required
/>
</fieldset>
</div>
<button
name="submit"
type="submit"
className="tf-btn w-full btn-submit-comment btn-primary2"
>
<span>Subcribe</span>
<span className="bg-effect" />
</button>
</form>
</div>
</div>
);
}

82
components/otherPages/Blogs.jsx Normal file
View File

@ -0,0 +1,82 @@
import React from "react";
import BlogSidebar from "./BlogSidebar";
import Link from "next/link";
import Image from "next/image";
import { blogArticles5 } from "@/data/blogs";
export default function Blogs() {
return (
<div className="section-blog-grid tf-spacing-2">
<div className="tf-container">
<div className="row">
<div className="col-lg-8 left">
<div className="tf-grid-layout md-col-2">
{blogArticles5.map((article) => (
<div key={article.id} className="blog-article-item hover-image">
<Link
href={`/single-post/${article.id}`}
className="article-thumb mb_25"
>
<Image
className="lazyload"
data-src={article.imageSrc}
alt={article.alt}
src={article.imageSrc}
width={article.width}
height={article.height}
/>
</Link>
<div className="article-content">
<ul className="blog-article-meta mb_15 d-flex align-items-center">
<li className="meta-item text-body-1">
<a href="#" className="link-black">
{article.category}
</a>
</li>
<li className="meta-item date text-body-1">
{article.date}
</li>
</ul>
<h5 className="title letter-spacing-2">
<Link
href={`/single-post/${article.id}`}
className="link"
>
{article.title}
</Link>
</h5>
</div>
</div>
))}
</div>
<ul className="wg-pagination d-flex justify-content-center gap_12 mt_85">
<li>
<a href="#">
<i className="icon-angle-left-solid" />
</a>
</li>
<li>
<a href="#" className="active">
1
</a>
</li>
<li>
<a href="#">...</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">
<i className="icon-angle-right-solid" />
</a>
</li>
</ul>
</div>
<div className="col-lg-4 right">
<BlogSidebar />
</div>
</div>
</div>
</div>
);
}

111
components/otherPages/Contact.jsx Normal file
View File

@ -0,0 +1,111 @@
"use client";
import React from "react";
import Link from "next/link";
import Image from "next/image";
export default function Contact() {
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">
<h1 className="mb_21">
Success is a team play, right? Let's work together!
</h1>
<ul className="breadcrumb">
<li>
<Link href={`/`} className="link">
Home
</Link>
</li>
<li>Contact</li>
</ul>
</div>
<div className="bot">
<div className="content mb-0">
<h6>+91 90954 50005</h6>
<p className="text-body-2 text_mono-gray-6">
Call us for urgent
</p>
</div>
</div>
</div>
</div>
<div className="col-lg-6">
<form
className="form-contact"
onSubmit={(e) => e.preventDefault()}
>
<fieldset>
<label className="mb_15" htmlFor="name">
Full Name*
</label>
<input
type="text"
placeholder="Full Name"
id="name"
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"
required
/>
</fieldset>
<fieldset>
<label className="mb_15" htmlFor="phone">
Phone Number
<span className="text_mono-gray-5">(Optional)</span>
</label>
<input
type="text"
placeholder="Your phone number"
id="phone"
required
/>
</fieldset>
</div>
<fieldset className="">
<label className="mb_15" htmlFor="message">
Message
</label>
<textarea
className="message"
placeholder="Write your message here..."
id="message"
defaultValue={""}
/>
</fieldset>
<a href="#" className="link attachment">
<i className="icon-paperclip-solid" />
Add an attachment
</a>
<button type="submit" className="tf-btn btn-primary2 mt_22">
<span>Send Message</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>
);
}

39
components/otherPages/Newsletter.jsx Normal file
View File

@ -0,0 +1,39 @@
"use client";
export default function Newsletter() {
return (
<form
id="subscribe-form"
className="form-newsletter style-1 subscribe-form mb_10"
onSubmit={(e) => e.preventDefault()}
>
<div id="subscribe-content" className="subscribe-content">
<fieldset className="email">
<input
id="subscribe-email"
type="email"
name="email-form"
className="subscribe-email style-2"
placeholder="Enter your e-mail"
tabIndex={0}
aria-required="true"
/>
</fieldset>
<div className="button-submit">
<button
id="subscribe-button"
className="subscribe-button tf-btn rounded-12 btn-primary2"
type="button"
>
<span>Subscribe</span>
<span className="bg-effect" />
</button>
</div>
<div className="icon">
<i className="icon-envelope-solid" />
</div>
</div>
<div id="subscribe-msg" className="subscribe-msg" />
</form>
);
}

44
components/otherPages/OfficeLocations.jsx Normal file
View File

@ -0,0 +1,44 @@
import { mapLocations } from "@/data/locations";
import React from "react";
export default function OfficeLocations() {
return (
<div className="section-map tf-spacing-6">
<div className="tf-container">
<div className="heading-seciton mb_83">
<h2 className="heading-title">Visit Our Offices</h2>
</div>
<div className="tf-grid-layout lg-col-3">
{mapLocations.map((item, index) => (
<div key={index} className="map-item">
<iframe
className="map"
src={item.src}
style={{ border: 0 }}
allowFullScreen=""
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
<ul className="info d-grid gap_11">
<li>
<h6 className="text_primary">Location</h6>
<p className="text-body-2">{item.location}</p>
</li>
<li>
<h6 className="text_primary">Phone</h6>
<p className="text-body-1">{item.phone}</p>
</li>
<li>
<h6 className="text_primary">Email</h6>
<a href="#" className="link text-body-1">
{item.email}
</a>
</li>
</ul>
</div>
))}
</div>
</div>
</div>
);
}

47
components/otherPages/Oppertunities.jsx Normal file
View File

@ -0,0 +1,47 @@
import { jobList } from "@/data/jobs";
import React from "react";
export default function Oppertunities() {
return (
<div className="section-opportunities tf-spacing-27 pt-0">
<div className="tf-container">
<div className="heading-section mb_86">
<h2 className="heading-title">
Opportunities For Professional Development
</h2>
<p className="text-body-1 text_mono-gray-7 mt_19">
A variety of professional development opportunities to help you
reach your career goals.
</p>
</div>
<div className="d-grid gap_40">
{jobList.map((job, index) => (
<div key={index} className="job-card">
<div className="heading">
<h3 className="title mb_5">{job.title}</h3>
<p className="sub-heading text_mono-gray-7">{job.type}</p>
</div>
<p className="description text-body-1 text_mono-gray-7">
{job.description}
</p>
<div className="content">
<div className="item mb_20">
<div className="sub-heading text_mono-gray-7">
Arrangement :
</div>
<h6>{job.arrangement}</h6>
</div>
<div className="item">
<div className="sub-heading text_mono-gray-7 mb_10">
Salary Range :
</div>
<h6 className="text_primary">{job.salary}</h6>
</div>
</div>
</div>
))}
</div>
</div>
</div>
);
}

128
components/otherPages/Portfolio.jsx Normal file
View File

@ -0,0 +1,128 @@
"use client";
import React, { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { caseStudies6 } from "@/data/caseStudies";
import DropdownSelect from "../common/DropdownSelect";
const categories = [
{ label: "All Case" },
{ label: "Business Consulting" },
{ label: "Coroporate" },
{ label: "IT Solution" },
{ label: "Marketing" },
{ label: "Startup Consulting" },
];
export default function Portfolio() {
const [activeCategory, setActiveCategory] = useState("All Case");
const [filtered, setFiltered] = useState(caseStudies6);
useEffect(() => {
if (activeCategory == "All Case") {
setFiltered(caseStudies6);
} else {
setFiltered(caseStudies6.filter((elm) => elm.category == activeCategory));
}
}, [activeCategory]);
return (
<div className="wg-listing tf-spacing-25">
<div className="tf-container">
<div className="d-flex align-items-center gap_12 mb_95 flex-wrap justify-content-between">
<div className="tf-project-filter overflow-x-auto">
{categories.map((category, i) => (
<div
key={i}
className={`tf-btns-filter text-1
${activeCategory === category.label ? "is--active" : "fw-3"}
`}
onClick={() => setActiveCategory(category.label)}
>
<h6>{category.label}</h6>
</div>
))}
</div>
<div className="d-flex align-items-center text_mono-gray-5 h6 wrap-sort">
Filter By Years:
<DropdownSelect
addtionalParentClass="align-items-center text_mono-gray-5 h6 wrap-sort"
options={["all", "Lastest", "Oldest", "Title ASC", "Title DESC"]}
/>
</div>
</div>
<div id="loadMore" className="parent tf-grid-layout lg-col-2">
{filtered.map((item, index) => (
<div
key={index}
className={`${item.filterClass} tf-filter-item tf-tab-content loadItem`}
>
<div className="case-studies-item v2 style-1 hover-image hover-border border-element">
<Link href={`/single-project/${item.id}`} className="img-style">
<Image
className="lazyload"
data-src={item.imageSrc}
alt="case-studies"
src={item.imageSrc}
width={item.imageWidth}
height={item.imageHeight}
/>
</Link>
<div className="content">
<div className="top d-flex align-items-center justify-content-between mb_17">
<div className="brand">
<Image
alt="brand"
src={item.brandSrc}
width={item.brandWidth}
height={item.brandHeight}
/>
</div>
<Link
href={`/single-project/${item.id}`}
className="tf-btn"
>
<span className="icon-arrow-top-right" />
<span className="bg-effect" />
</Link>
</div>
<div className="heading mb_36">
<h5 className="mb_10 title">
<Link
href={`/single-project/${item.id}`}
className="link"
>
{item.title}
</Link>
</h5>
<p className="text_mono-gray-7 text-body-3">
Discover the transformative power of our solutions. Learn
how we've helped businesses of all sizes overcome
challenges.
</p>
</div>
<div className="group-number">
{item.metrics.map((metric, i) => (
<div key={i} className="wrap-number">
<h5 className="number fw-5">{metric.value}</h5>
<p className="font2 text-body-3">{metric.label}</p>
</div>
))}
</div>
</div>
</div>
</div>
))}
</div>
<div className="wd-load d-flex justify-content-center">
<button
id="loadMoreBtn"
className="tf-btn height-3 btn-primary2 mx-auto mt_32"
>
<span>Show More</span>
<span className="bg-effect" />
</button>
</div>
</div>
</div>
);
}

202
components/otherPages/PortfolioSingle.jsx Normal file
View File

@ -0,0 +1,202 @@
import React from "react";
import Image from "next/image";
import { counterItems6 } from "@/data/facts";
import OdometerComponent from "../common/OdometerComponent";
export default function PortfolioSingle() {
return (
<div className="single-post tf-spacing-26">
<div className="tf-container">
<p className="description text-body-1">
The tech startup is facing significant financial hurdles, struggling
to secure funding and maintain operations due to a lack of market
traction and investor confidence. The company's innovative product or
service has yet to gain significant traction in the market, leading to
low sales. This lack of market acceptance and revenue generation has
made it difficult for the startup to attract investors and secure the
necessary funding to continue operations. Additionally, the company
may be facing challenges in effectively communicating the value
proposition of its product or service to potential customers and
investors. This lack of market understanding and communication could
be hindering the startup's ability to gain traction and secure
funding.
</p>
<div className="thumbs-main">
<Image
className="lazyload parallax-img"
data-src="/images/section/single-project-1.jpg"
alt="single-project"
src="/images/section/single-project-1.jpg"
width={1696}
height={720}
/>
</div>
<div className="row">
<div className="col-lg-3 col-6 text-center">
<div className="info-item">
<span className="text-body-1 text_mono-gray-6">Client</span>
<h6 className="fw-5 mt_6">NovaTech</h6>
</div>
</div>
<div className="col-lg-3 col-6 text-center">
<div className="info-item">
<span className="text-body-1 text_mono-gray-6">Location</span>
<h6 className="fw-5 mt_6">San Francisco, USA</h6>
</div>
</div>
<div className="col-lg-3 col-6 text-center">
<div className="info-item">
<span className="text-body-1 text_mono-gray-6">Services</span>
<h6 className="fw-5 mt_6">Business Strategy Planning</h6>
</div>
</div>
<div className="col-lg-3 col-6 text-center">
<div className="info-item">
<span className="text-body-1 text_mono-gray-6">Duration</span>
<h6 className="fw-5 mt_6">9 Months</h6>
</div>
</div>
</div>
<div className="unique-features">
<div className="row">
<div className="col-lg-6">
<div className="left d-flex flex-column justify-content-between h-full">
<h2 className="title">What makes Advitex unique?</h2>
<div>
<div className="text-body-1 text_color-text-2">
Member of the project
</div>
<div className="facts style-1">
<div className="avatar-wrap d-flex">
<div className="avatar item-1">
<Image
alt="facts"
src="/images/avatar/facts-7.png"
width={64}
height={64}
/>
</div>
<div className="avatar item-2">
<Image
alt="facts"
src="/images/avatar/facts-8.png"
width={64}
height={64}
/>
</div>
<div className="avatar item-3">
<Image
alt="facts"
src="/images/avatar/facts-9.png"
width={64}
height={64}
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="d-grid gap_12 right">
<div className="content-item">
<h6 className="title">Strategic Planning</h6>
<p className="text-body-1 text_mono-gray-6">
We conducted a SWOT analysis and developed a strategic plan
to prioritize core offerings, define target markets, and set
performance metrics.
</p>
</div>
<div className="content-item">
<h6 className="title">Operational Improvement</h6>
<p className="text-body-1 text_mono-gray-6">
We analyzed the company's operations and identified areas
for improvement, such as streamlining workflows, automating
processes, and implementing lean methodologies.
</p>
</div>
<div className="content-item">
<h6 className="title">Financial Analysis</h6>
<p className="text-body-1 text_mono-gray-6">
We developed detailed financial models to project future
revenue, expenses, and cash flow. We also provided
recommendations on cost-cutting measures and
revenue-generating strategies.
</p>
</div>
</div>
</div>
</div>
</div>
<div className="d-flex gap_24 flex-wrap-md group-img">
<div className="hover-image">
<div className="img-style">
<Image
className="lazyload"
data-src="/images/section/single-project-2.jpg"
alt="single-project"
src="/images/section/single-project-2.jpg"
width={836}
height={560}
/>
</div>
</div>
<div className="hover-image">
<div className="img-style">
<Image
className="lazyload"
data-src="/images/section/single-project-3.jpg"
alt="single-project"
src="/images/section/single-project-3.jpg"
width={836}
height={560}
/>
</div>
</div>
</div>
<div className="wrap-text">
<div className="row">
<div className="col-md-6">
<h2>We have a clear winner.</h2>
</div>
<div className="col-md-6">
<p className="text-body-1 text_mono-gray-6">
By refocusing on its core products and services, the company was
able to streamline operations, reduce costs, and enhance
customer satisfaction through a combination of process
improvements, technological advancements, and strategic
partnerships. These efforts ultimately led to increased revenue
and profitability.
</p>
</div>
</div>
</div>
<div className="row">
{counterItems6.map((item, index) => (
<div key={index} className="col-lg-3 col-md-6">
<div className="counter-item style-default">
<div className="sub-heading text_black text-uppercase mb_21">
{item.title}
</div>
<div className="counter-number mb_17">
<span className="sub text_primary">{item.prefix}</span>
<div className="odometer text_primary">
<OdometerComponent max={item.value} />
</div>
<span className="sub text_primary">{item.suffix}</span>
</div>
<p className="sub-heading text_mono-gray-5">
{item.description.split("\n").map((line, i) => (
<React.Fragment key={i}>
{line}
{i < item.description.split("\n").length - 1 && <br />}
</React.Fragment>
))}
</p>
</div>
</div>
))}
</div>
</div>
</div>
);
}

203
components/otherPages/Process.jsx Normal file
View File

@ -0,0 +1,203 @@
import React from "react";
import Image from "next/image";
export default function Process() {
return (
<div className="section-process style-1 tf-spacing-5 pb-0">
<div className="tf-container">
<div className="wrap">
<div className="row align-items-end">
<div className="col-xl-6">
<div className="left">
<div className="heading-secion mb_86">
<h1 className="heading-title split-text effect-right">
Our Approach
</h1>
<p
className="text-body-1 text_mono-gray-7 mt_20 mt_20 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
We rely on datadriven analysis and rigorous methodologies{" "}
<br />
to inform our decisions and ensure accuracy.
</p>
</div>
<ul
className="accordion-wrap gap-16 style-faqs"
id="accordion-approach"
>
<li className="accordion-item action_click scrolling-effect effectBottom style-default">
<a
href="#accordion-approach-1"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-approach-1"
>
<div className="heading">
<h3 className="text_mono-gray-5 title">
<span className="text_primary">1.</span>Story &amp;
Reserach
</h3>
</div>
<span className="icon" />
</a>
<div
id="accordion-approach-1"
className="collapse"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<p className="text-body-1">
The research gathered to inform the development of the
story provides the foundation for a product or
service, shaping its direction and purpose.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectBottom active style-default">
<a
href="#accordion-approach-2"
className="accordion-title action current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-approach-2"
>
<div className="heading">
<h3 className="text_mono-gray-5 title">
<span className="text_primary">2.</span> Strategy
&amp; Concept
</h3>
</div>
<span className="icon" />
</a>
<div
id="accordion-approach-2"
className="collapse show"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<p className="text-body-1">
The research gathered to inform the development of the
story provides the foundation for a product or
service, shaping its direction and purpose.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectBottom style-default">
<a
href="#accordion-approach-3"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-approach-3"
>
<div className="heading">
<h3 className="text_mono-gray-5 title">
<span className="text_primary">3.</span>
Implementation
</h3>
</div>
<span className="icon" />
</a>
<div
id="accordion-approach-3"
className="collapse"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<p className="text-body-1">
The research gathered to inform the development of the
story provides the foundation for a product or
service, shaping its direction and purpose.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectBottom style-default">
<a
href="#accordion-approach-4"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion-approach-4"
>
<div className="heading">
<h3 className="text_mono-gray-5 title">
<span className="text_primary">4.</span>Usability
Testing
</h3>
</div>
<span className="icon" />
</a>
<div
id="accordion-approach-4"
className="collapse"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<p className="text-body-1">
To place an order, browse our We differentiate
ourselves through our commitment to innovation,
personalized solutions, and client satisfaction. We
differentiate ourselves through our commitment to
innovation, personalized solutions, and client
satisfaction.
</p>
</div>
</div>
</li>
<li className="accordion-item action_click scrolling-effect effectBottom style-default">
<a
href="#accordion--approach-5"
className="accordion-title action collapsed current"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="accordion--approach-5"
>
<div className="heading">
<h3 className="text_mono-gray-5 title">
<span className="text_primary">5.</span>Guide &amp;
Hand Over
</h3>
</div>
<span className="icon" />
</a>
<div
id="accordion--approach-5"
className="collapse"
data-bs-parent="#accordion-approach"
>
<div className="accordion-faqs-content">
<p className="text-body-1">
To place an order, browse our We differentiate
ourselves through our commitment to innovation,
personalized solutions, and client satisfaction. We
differentiate ourselves through our commitment to
innovation, personalized solutions, and client
satisfaction.
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div className="col-xl-6 right">
<div className="shape-img-bg shape-border style-2 scroll-tranform">
<Image
alt="img"
className="wow img-custom-anim-right"
src="/images/section/img-with-shape-5.jpg"
width={682}
height={535}
/>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

82
components/otherPages/ServiceAdvantages.jsx Normal file
View File

@ -0,0 +1,82 @@
"use client";
import { Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
const slides = [
{
icon: "icon-Performance-Increase-1",
title: "Enhanced Efficiency",
description:
"Through the implementation of our innovative solutions, your organization can streamline operations, reduce costs, and significantly boost productivity, leading to increased profitability and long-term success.",
},
{
icon: "icon-Analytics-Board-Bars",
title: "Data-Driven Insights",
description:
"By utilizing advanced analytics, organizations can delve deep into their data to uncover hidden patterns, trends, and correlations, enabling them to make more informed, data driven decisions that drive business growth and innovation.",
},
{
icon: "icon-Exceeding-Expectations",
title: "Exceeding Expectations",
description:
"By consistently delivering exceptional customer experiences, organizations can cultivate a loyal customer base, increase customer satisfaction, and ultimately drive long-term business growth and profitability.",
},
];
export default function ServiceAdvantages() {
return (
<div className="section tf-spacing-10">
<div className="tf-container">
<div className="heading-section mb_100">
<h2>Advantages Of Our Service</h2>
<p className="text-body-1 text_mono-gray-7 mt_20">
Our service streamlines your processes, saving you time and
resources.
</p>
</div>
<Swiper
className="swiper sw-layout"
data-preview={3}
data-tablet={2}
data-mobile={1}
breakpoints={{
0: { slidesPerView: 1 },
575: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
spaceBetween: 20,
},
992: {
slidesPerView: 3,
spaceBetween: 24,
},
}}
spaceBetween={15}
modules={[Pagination]}
pagination={{
clickable: true,
el: ".spd12",
}}
>
{slides.map((slide, index) => (
<SwiperSlide className="swiper-slide" key={index}>
<div className="tf-box-icon style-7 v2 effect-icon">
<div className="icon mb_32">
<i className={slide.icon} />
</div>
<h5 className="mb_24">{slide.title}</h5>
<p className="text-body-1 text_mono-gray-7">
{slide.description}
</p>
</div>
</SwiperSlide>
))}
<div className="sw-dots sw-pagination-layout d-flex justify-content-center mt_22 spd12" />
</Swiper>
</div>
</div>
);
}

111
components/otherPages/ServiceDetails.jsx Normal file
View File

@ -0,0 +1,111 @@
import React from "react";
import Image from "next/image";
import ServiceInfo from "./ServiceInfo";
export default function ServiceDetails() {
return (
<>
<div className="text-with-img-2 v2 tf-spacing-11">
<div className="tf-container">
<div className="row">
<div className="col-xl-6">
<div className="content">
<h2 className="title">
Tailor The Message To Resonate With Your Apecific Audience.
</h2>
<p className="description text-body-1 text_mono-gray-7 description-1">
Business strategy planning is the cornerstone of
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>
</div>
</div>
<div className="col-xl-6">
<div className="wrap-img mb-0">
<div className="shape-img-bg mgl-auto">
<Image
alt="shape"
src="/images/section/img-with-shape-6.jpg"
width={696}
height={598}
/>
<div className="img-bg-shape">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
viewBox="0 0 288 288"
>
<linearGradient
id="imagewave"
x1="70.711%"
x2="0%"
y1="70.711%"
y2="0%"
>
<stop
className="stop-color"
offset="0%"
stopOpacity={1}
/>
<stop
className="stop-color"
offset="100%"
stopOpacity={1}
/>
</linearGradient>
<path fill="url(#imagewave)" d="">
<animate
repeatCount="indefinite"
attributeName="d"
dur="5s"
values="M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
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;
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
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
C48.9,198.6,57.8,191,51,171.3z;
M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
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 "
/>
</path>
</svg>
</div>
</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>
</>
);
}

528
components/otherPages/ServiceInfo.jsx Normal file
View File

@ -0,0 +1,528 @@
"use client";
import { Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
export default function ServiceInfo() {
return (
<>
<Swiper
modules={[Pagination]}
pagination={{
clickable: true,
el: ".spd19",
}}
className="swiper tf-sw-mobile swiper-active-768"
>
<SwiperSlide className="swiper-slide">
<div className="tf-box-icon style-7 h-full effect-icon">
<div className="icon mb_32">
<svg
width={72}
height={72}
viewBox="0 0 72 72"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.4985 25.5007C10.4985 28.2855 11.6048 30.9562 13.5739 32.9254C15.543 34.8945 18.2138 36.0007 20.9985 36.0007C23.7833 36.0007 26.454 34.8945 28.4232 32.9254C30.3923 30.9562 31.4985 28.2855 31.4985 25.5007C31.4985 22.716 30.3923 20.0452 28.4232 18.0761C26.454 16.107 23.7833 15.0007 20.9985 15.0007C18.2138 15.0007 15.543 16.107 13.5739 18.0761C11.6048 20.0452 10.4985 22.716 10.4985 25.5007Z"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M21.0015 15.0007V25.5007H31.5015"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M27 67.5007C29.7175 64.0694 31.2912 59.8728 31.5 55.5007"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M45 67.5007C42.2825 64.0694 40.7088 59.8728 40.5 55.5007"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M22.4956 67.5H49.4956"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1.49854 46.5007H70.4985"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.49854 4.5H67.4985C67.4985 4.5 70.4985 4.5 70.4985 7.5V52.5C70.4985 52.5 70.4985 55.5 67.4985 55.5H4.49854C4.49854 55.5 1.49854 55.5 1.49854 52.5V7.5C1.49854 7.5 1.49854 4.5 4.49854 4.5Z"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M40.5 21L45 15L54 22.5L61.5 13.5"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M58.5 37.5007V33.0007"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M52.5015 37.5V31.5"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M46.4985 37.5007V28.5007"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M40.5 37.5007V33.0007"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<h5 className="mb_24">Strategic Goal Setting</h5>
<p className="text-body-1 text_mono-gray-7">
Defining clear, measurable, achievable, relevant, and time-bound (
SMART ) goals is a fundamental strategy for aligning individual
and team efforts with the overarching business vision.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="swiper-slide">
<div className="tf-box-icon style-7 h-full effect-icon">
<div className="icon mb_32">
<svg
width={72}
height={73}
viewBox="0 0 72 73"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="mask0_4230_4974"
style={{ maskType: "luminance" }}
maskUnits="userSpaceOnUse"
x={0}
y={1}
width={72}
height={71}
>
<path
d="M0.830566 1.05422H71.7229V71.9465H0.830566V1.05422Z"
fill="white"
/>
</mask>
<g mask="url(#mask0_4230_4974)">
<path
d="M1.91064 23V18.708C1.91064 9.5695 9.38757 2.09258 18.526 2.09258H32.0822C33.2246 2.09258 34.1592 3.02719 34.1592 4.1695V32.2642C34.1592 33.4065 33.2246 34.3411 32.0822 34.3411H3.98757C2.84526 34.3411 1.91064 33.4065 1.91064 32.2642V22.8618M32.0822 38.6594H3.98757C2.84526 38.6594 1.91064 39.5941 1.91064 40.7364V54.2926C1.91064 63.431 9.38757 70.908 18.526 70.908H32.0822C33.2246 70.908 34.1592 69.9733 34.1592 68.831V40.7364C34.1592 39.5941 33.2246 38.6594 32.0822 38.6594ZM45.7206 70.908H40.4722C39.3299 70.908 38.3953 69.9733 38.3953 68.831V40.7364C38.3953 39.5941 39.3299 38.6594 40.4722 38.6594H68.5669C69.7092 38.6594 70.6436 39.5941 70.6436 40.7364V54.2926C70.6436 63.431 63.1669 70.908 54.0283 70.908H51.9515C51.1403 70.908 45.7206 70.908 45.7206 70.908ZM40.4722 34.3411H68.5669C69.7092 34.3411 70.6436 33.4065 70.6436 32.2642V18.708C70.6436 9.5695 63.1669 2.09258 54.0283 2.09258H40.4722C39.3299 2.09258 38.3953 3.02719 38.3953 4.1695V32.2642C38.3953 33.4065 39.3299 34.3411 40.4722 34.3411Z"
stroke="black"
strokeWidth={2}
strokeMiterlimit="22.926"
/>
<path
d="M23.3654 14.5425C23.3654 14.5425 21.2365 12.7529 18.7257 13.5092C16.4205 14.2037 16.098 16.8618 17.7658 17.9493C17.7658 17.9493 19.4024 18.6792 21.2176 19.3488C25.5871 20.9605 23.7048 25.1877 20.1873 25.1877C18.4258 25.1877 16.9475 24.4165 16.0527 23.429"
stroke="black"
strokeWidth="1.5"
strokeMiterlimit={10}
strokeLinecap="square"
strokeLinejoin="round"
/>
<path
d="M45.8091 13.4119L48.1207 25.0986L48.6266 25.0952L51.976 13.5141L52.4964 13.5148L55.8365 25.0986L56.3424 25.0952L58.6633 13.4337"
stroke="black"
strokeWidth="1.5"
strokeMiterlimit={10}
strokeLinecap="square"
/>
<path
d="M48.96 48.0022H55.5125"
stroke="black"
strokeWidth="2.5"
strokeMiterlimit={10}
strokeLinecap="square"
strokeLinejoin="round"
/>
<path
d="M52.2231 48.0022V59.4883"
stroke="black"
strokeWidth="1.5"
strokeMiterlimit={10}
strokeLinecap="square"
strokeLinejoin="round"
/>
<path
d="M25.8381 53.7452C25.8381 57.0216 23.1819 59.6777 19.9057 59.6777C16.6293 59.6777 13.9731 57.0216 13.9731 53.7452C13.9731 50.4688 16.6293 47.8127 19.9057 47.8127C23.1819 47.8127 25.8381 50.4688 25.8381 53.7452Z"
stroke="black"
strokeWidth="1.5"
strokeMiterlimit={10}
strokeLinecap="round"
strokeLinejoin="bevel"
/>
</g>
</svg>
</div>
<h5 className="mb_24">SWOT Analysis</h5>
<p className="text-body-1 text_mono-gray-7">
A SWOT analysis is a strategic planning technique used to help a
person or organization identify strengths, weaknesses,
opportunities, and threats related to business competition or
project planning.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="swiper-slide">
<div className="tf-box-icon style-7 h-full effect-icon">
<div className="icon mb_32">
<svg
width={72}
height={72}
viewBox="0 0 72 72"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4230_5002)">
<path
d="M30.0156 4.81396C16.1033 4.81396 4.8252 16.0921 4.8252 30.0044C4.8252 43.9167 16.1033 55.1949 30.0156 55.1949C43.928 55.1949 55.2061 43.9167 55.2061 30.0044C55.1909 16.0984 43.9217 4.82911 30.0156 4.81396ZM30.0156 7.21306C33.6669 7.21593 37.2639 8.09692 40.5031 9.7817C43.7424 11.4665 46.529 13.9056 48.6278 16.8934L45.6289 19.8922C44.8992 19.4506 44.0636 19.2144 43.2106 19.2085C40.5607 19.2085 38.4125 21.3567 38.4125 24.0067C38.4166 24.8605 38.6516 25.6974 39.0926 26.4286L31.238 34.2832C30.5085 33.8384 29.6705 33.603 28.8161 33.603C27.9617 33.603 27.1237 33.8384 26.3942 34.2832L20.9387 28.8277C21.3797 28.0965 21.6147 27.2596 21.6188 26.4058C21.6221 23.7611 19.4809 21.6145 16.8362 21.6112C14.649 21.6085 12.738 23.088 12.1928 25.2062H7.74249C10.0137 14.7182 19.2845 7.2288 30.0156 7.21306ZM45.6097 24.0067C45.6097 25.3317 44.5357 26.4058 43.2106 26.4058C41.8856 26.4058 40.8116 25.3317 40.8116 24.0067C40.8116 22.6816 41.8856 21.6076 43.2106 21.6076C44.5357 21.6076 45.6097 22.6816 45.6097 24.0067ZM31.2152 38.4012C31.2152 39.7263 30.1411 40.8003 28.8161 40.8003C27.4911 40.8003 26.417 39.7263 26.417 38.4012C26.417 37.0762 27.4911 36.0021 28.8161 36.0021C30.1411 36.0021 31.2152 37.0762 31.2152 38.4012ZM19.2197 26.4058C19.2197 27.7308 18.1457 28.8049 16.8206 28.8049C15.4956 28.8049 14.4216 27.7308 14.4216 26.4058C14.4216 25.0807 15.4956 24.0067 16.8206 24.0067C18.1457 24.0067 19.2197 25.0807 19.2197 26.4058ZM41.0895 49.9328C37.7019 51.8137 33.8904 52.7991 30.0156 52.7956C17.4369 52.8042 7.23283 42.6142 7.22429 30.0355C7.22369 29.2237 7.26657 28.4123 7.35264 27.6052H12.1928C12.7381 29.7171 14.6394 31.1956 16.8206 31.2038C17.6745 31.1997 18.5113 30.9646 19.2425 30.5237L24.6981 35.9792C24.2571 36.7104 24.0221 37.5472 24.0179 38.4011C24.0179 41.051 26.1662 43.1993 28.8161 43.1993C31.466 43.1993 33.6143 41.051 33.6143 38.4011C33.6101 37.5472 33.3751 36.7104 32.9341 35.9792L40.7888 28.1246C41.5199 28.5655 42.3568 28.8006 43.2106 28.8047C45.8606 28.8047 48.0088 26.6565 48.0088 24.0065C48.0047 23.1527 47.7697 22.3158 47.3287 21.5847L49.9437 18.9708C56.0486 29.9659 52.0844 43.828 41.0895 49.9328Z"
fill="black"
/>
<path
d="M60.0045 12.0113C62.1857 12.003 64.087 10.5247 64.6323 8.41263H72V6.01354H64.6323C64.087 3.90144 62.1857 2.42315 60.0045 2.41491C57.3546 2.41491 55.2063 4.56314 55.2063 7.21309C55.2105 8.06694 55.4455 8.90378 55.8865 9.63497L53.7789 11.7426C43.6944 -1.3956 24.8688 -3.87116 11.7306 6.21327C-1.40756 16.2977 -3.88312 35.1235 6.2013 48.2617C15.7203 60.663 33.1693 63.6713 46.2913 55.1733L49.9115 58.7935L51.6077 60.4897L61.264 70.146C63.7199 72.6019 67.7015 72.6019 70.1575 70.146C72.6134 67.6901 72.6134 63.7085 70.1575 61.2526L60.5011 51.5963L58.805 49.9001L55.1847 46.2799C61.6111 36.3812 61.6111 23.6278 55.1847 13.729L57.5838 11.3299C58.3146 11.7711 59.1509 12.0065 60.0045 12.0113ZM60.0045 4.814C61.3295 4.814 62.4036 5.88804 62.4036 7.21309C62.4036 8.53813 61.3295 9.61218 60.0045 9.61218C58.6795 9.61218 57.6054 8.53813 57.6054 7.21309C57.6054 5.88804 58.6796 4.814 60.0045 4.814ZM68.4613 62.9488C69.9976 64.4506 70.0257 66.9136 68.5238 68.4499C67.022 69.9862 64.559 70.0142 63.0227 68.5124C63.0016 68.4918 62.9808 68.471 62.9602 68.4499L53.3038 58.7935L58.805 53.2924L68.4613 62.9488ZM57.1088 51.5963L51.6077 57.0974L48.2873 53.777C48.4565 53.6475 48.6148 53.5047 48.7816 53.3716C48.9483 53.2384 49.1414 53.0789 49.3202 52.929C49.5829 52.7082 49.842 52.4851 50.0963 52.256C50.227 52.1361 50.3518 52.0161 50.4801 51.8961C50.9718 51.4356 51.4483 50.9592 51.9088 50.4675C52.0287 50.3391 52.1487 50.2144 52.2686 50.0836C52.4974 49.8288 52.7218 49.5701 52.9416 49.3075C53.0918 49.1302 53.2394 48.9507 53.3842 48.7689C53.5162 48.6034 53.6589 48.4451 53.7885 48.2759L57.1088 51.5963ZM52.457 46.0244C52.0791 46.5522 51.6893 47.0692 51.2778 47.567C51.1579 47.7121 51.0295 47.8525 50.906 47.9952C50.5399 48.4212 50.1607 48.8356 49.7688 49.238C49.5984 49.4138 49.4253 49.587 49.2494 49.7574C48.8478 50.15 48.4333 50.5293 48.0066 50.8945C47.8639 51.0145 47.7236 51.1452 47.5784 51.2664C47.0806 51.6778 46.5636 52.0677 46.0358 52.4455C33.6181 61.3169 16.3598 58.4421 7.48841 46.0244C-1.38297 33.6067 1.49189 16.3484 13.9096 7.47699C26.3273 -1.3944 43.5856 1.48031 52.457 13.8982C59.3215 23.5068 59.3215 36.4157 52.457 46.0244Z"
fill="black"
/>
</g>
<defs>
<clipPath id="clip0_4230_5002">
<rect width={72} height={72} fill="white" />
</clipPath>
</defs>
</svg>
</div>
<h5 className="mb_24">Market Analysis</h5>
<p className="text-body-1 text_mono-gray-7">
Understanding market trends, customer needs, competitive
landscapes is crucial for businesses to stay relevant. By
conducting thorough research and analysis, organizations can make
informed strategic decisions.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="swiper-slide">
<div className="tf-box-icon style-7 h-full effect-icon">
<div className="icon mb_32">
<svg
width={72}
height={72}
viewBox="0 0 72 72"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M68.625 20.25H61.875C61.5766 20.25 61.2905 20.3685 61.0795 20.5795C60.8685 20.7905 60.75 21.0766 60.75 21.375V64.125C60.75 64.4234 60.8685 64.7095 61.0795 64.9205C61.2905 65.1315 61.5766 65.25 61.875 65.25H68.625C68.9234 65.25 69.2095 65.1315 69.4205 64.9205C69.6315 64.7095 69.75 64.4234 69.75 64.125V21.375C69.75 21.0766 69.6315 20.7905 69.4205 20.5795C69.2095 20.3685 68.9234 20.25 68.625 20.25ZM67.5 63H63V22.5H67.5V63ZM57.375 65.25C57.6734 65.25 57.9595 65.1315 58.1705 64.9205C58.3815 64.7095 58.5 64.4234 58.5 64.125V30.375C58.5 30.0766 58.3815 29.7905 58.1705 29.5795C57.9595 29.3685 57.6734 29.25 57.375 29.25H50.625C50.3266 29.25 50.0405 29.3685 49.8295 29.5795C49.6185 29.7905 49.5 30.0766 49.5 30.375V64.125C49.5 64.4234 49.6185 64.7095 49.8295 64.9205C50.0405 65.1315 50.3266 65.25 50.625 65.25H57.375ZM51.75 31.5H56.25V63H51.75V31.5ZM46.125 65.25C46.4234 65.25 46.7095 65.1315 46.9205 64.9205C47.1315 64.7095 47.25 64.4234 47.25 64.125V38.25C47.25 37.9516 47.1315 37.6655 46.9205 37.4545C46.7095 37.2435 46.4234 37.125 46.125 37.125H39.375C39.0766 37.125 38.7905 37.2435 38.5795 37.4545C38.3685 37.6655 38.25 37.9516 38.25 38.25V64.125C38.25 64.4234 38.3685 64.7095 38.5795 64.9205C38.7905 65.1315 39.0766 65.25 39.375 65.25H46.125ZM40.5 39.375H45V63H40.5V39.375ZM34.875 65.25C35.1734 65.25 35.4595 65.1315 35.6705 64.9205C35.8815 64.7095 36 64.4234 36 64.125V47.25C36 46.9516 35.8815 46.6655 35.6705 46.4545C35.4595 46.2435 35.1734 46.125 34.875 46.125H28.125C27.8266 46.125 27.5405 46.2435 27.3295 46.4545C27.1185 46.6655 27 46.9516 27 47.25V64.125C27 64.4234 27.1185 64.7095 27.3295 64.9205C27.5405 65.1315 27.8266 65.25 28.125 65.25H34.875ZM29.25 48.375H33.75V63H29.25V48.375ZM23.625 65.25C23.9234 65.25 24.2095 65.1315 24.4205 64.9205C24.6315 64.7095 24.75 64.4234 24.75 64.125V51.75C24.75 51.4516 24.6315 51.1655 24.4205 50.9545C24.2095 50.7435 23.9234 50.625 23.625 50.625H16.875C16.5766 50.625 16.2905 50.7435 16.0795 50.9545C15.8685 51.1655 15.75 51.4516 15.75 51.75V64.125C15.75 64.4234 15.8685 64.7095 16.0795 64.9205C16.2905 65.1315 16.5766 65.25 16.875 65.25H23.625ZM18 52.875H22.5V63H18V52.875ZM12.375 65.25C12.6734 65.25 12.9595 65.1315 13.1705 64.9205C13.3815 64.7095 13.5 64.4234 13.5 64.125V57.375C13.5 57.0766 13.3815 56.7905 13.1705 56.5795C12.9595 56.3685 12.6734 56.25 12.375 56.25H5.625C5.32663 56.25 5.04048 56.3685 4.82951 56.5795C4.61853 56.7905 4.5 57.0766 4.5 57.375V64.125C4.5 64.4234 4.61853 64.7095 4.82951 64.9205C5.04048 65.1315 5.32663 65.25 5.625 65.25H12.375ZM6.75 58.5H11.25V63H6.75V58.5ZM30.375 20.25H32.625C32.9234 20.25 33.2095 20.1315 33.4205 19.9205C33.6315 19.7095 33.75 19.4234 33.75 19.125C33.75 18.8266 33.6315 18.5405 33.4205 18.3295C33.2095 18.1185 32.9234 18 32.625 18H31.5V16.875C31.5 16.5766 31.3815 16.2905 31.1705 16.0795C30.9595 15.8685 30.6734 15.75 30.375 15.75C30.0766 15.75 29.7905 15.8685 29.5795 16.0795C29.3685 16.2905 29.25 16.5766 29.25 16.875V18.1935C28.4997 18.4591 27.8675 18.9814 27.4649 19.6679C27.0623 20.3545 26.9154 21.1613 27.05 21.9458C27.1846 22.7302 27.5921 23.4418 28.2005 23.955C28.8089 24.4681 29.5791 24.7497 30.375 24.75C30.6734 24.75 30.9595 24.8685 31.1705 25.0795C31.3815 25.2905 31.5 25.5766 31.5 25.875C31.5 26.1734 31.3815 26.4595 31.1705 26.6705C30.9595 26.8815 30.6734 27 30.375 27H28.125C27.8266 27 27.5405 27.1185 27.3295 27.3295C27.1185 27.5405 27 27.8266 27 28.125C27 28.4234 27.1185 28.7095 27.3295 28.9205C27.5405 29.1315 27.8266 29.25 28.125 29.25H29.25V30.375C29.25 30.6734 29.3685 30.9595 29.5795 31.1705C29.7905 31.3815 30.0766 31.5 30.375 31.5C30.6734 31.5 30.9595 31.3815 31.1705 31.1705C31.3815 30.9595 31.5 30.6734 31.5 30.375V29.0565C32.2503 28.7909 32.8825 28.2686 33.2851 27.5821C33.6877 26.8955 33.8346 26.0887 33.7 25.3042C33.5654 24.5198 33.1579 23.8082 32.5495 23.295C31.9411 22.7819 31.1709 22.5003 30.375 22.5C30.0766 22.5 29.7905 22.3815 29.5795 22.1705C29.3685 21.9595 29.25 21.6734 29.25 21.375C29.25 21.0766 29.3685 20.7905 29.5795 20.5795C29.7905 20.3685 30.0766 20.25 30.375 20.25Z"
fill="black"
/>
<path
d="M68.625 6.75H61.875C61.5767 6.75 61.2905 6.86853 61.0795 7.07951C60.8686 7.29048 60.75 7.57663 60.75 7.875C60.75 8.17337 60.8686 8.45952 61.0795 8.67049C61.2905 8.88147 61.5767 9 61.875 9H65.909L50.159 24.75H43.8278C43.8591 24.3758 43.8748 24.0005 43.875 23.625C43.8749 21.0613 43.1449 18.5507 41.7702 16.3868C40.3956 14.2228 38.4332 12.495 36.1126 11.4054C33.792 10.3159 31.2092 9.90957 28.6661 10.2341C26.1231 10.5586 23.725 11.6005 21.7524 13.238C19.7798 14.8754 18.3143 17.0406 17.5271 19.4805C16.74 21.9203 16.6638 24.5338 17.3075 27.0153C17.9513 29.4968 19.2883 31.7438 21.1622 33.4933C23.0361 35.2428 25.3694 36.4226 27.8892 36.8947L23.1591 41.625H14.625C14.4773 41.625 14.331 41.6541 14.1945 41.7106C14.058 41.7672 13.934 41.85 13.8295 41.9545L2.57951 53.2045C2.36853 53.4155 2.25 53.7016 2.25 54C2.25 54.2984 2.36853 54.5845 2.57951 54.7955C2.7905 55.0065 3.07665 55.125 3.37503 55.125C3.67341 55.125 3.95956 55.0065 4.17054 54.7955L15.0909 43.875H23.625C23.7728 43.875 23.9191 43.8459 24.0556 43.7894C24.1921 43.7328 24.3161 43.65 24.4205 43.5455L30.8503 37.1157C33.759 37.0094 36.5558 35.9676 38.8253 34.1452C41.0948 32.3229 42.7159 29.8171 43.448 27H50.625C50.7728 27 50.9191 26.9709 51.0556 26.9144C51.1921 26.8578 51.3161 26.775 51.4205 26.6705L67.5 10.591V14.625C67.5 14.9234 67.6186 15.2095 67.8295 15.4205C68.0405 15.6315 68.3267 15.75 68.625 15.75C68.9234 15.75 69.2095 15.6315 69.4205 15.4205C69.6315 15.2095 69.75 14.9234 69.75 14.625V7.875C69.75 7.57663 69.6315 7.29048 69.4205 7.07951C69.2095 6.86853 68.9234 6.75 68.625 6.75ZM30.375 34.875C28.15 34.875 25.9749 34.2152 24.1249 32.979C22.2748 31.7429 20.8329 29.9859 19.9814 27.9302C19.1299 25.8745 18.9071 23.6125 19.3412 21.4302C19.7753 19.2479 20.8467 17.2434 22.4201 15.67C23.9934 14.0967 25.998 13.0252 28.1803 12.5912C30.3625 12.1571 32.6245 12.3799 34.6802 13.2314C36.7359 14.0828 38.4929 15.5248 39.7291 17.3748C40.9652 19.2249 41.625 21.4 41.625 23.625C41.6216 26.6076 40.4353 29.4672 38.3262 31.5762C36.2172 33.6853 33.3577 34.8716 30.375 34.875Z"
fill="black"
/>
</svg>
</div>
<h5 className="mb_24">Financial Planning</h5>
<p className="text-body-1 text_mono-gray-7">
A robust financial plan is the cornerstone of sustainable business
growth. It involves a meticulous process of budgeting,
forecasting, and risk management to ensure financial stability.
</p>
</div>
</SwiperSlide>
<div className="sw-dots spd19 style-default sw-pagination-mb mt_20 justify-content-center d-flex d-md-none" />
</Swiper>
<div className="swiper tf-sw-mobile swiper-inActive-768">
<div className="swiper-wrapper tf-grid-layout-md md-col-2 lg-col-4 gap_24">
<div className="swiper-slide">
<div className="tf-box-icon style-7 h-full effect-icon">
<div className="icon mb_32">
<svg
width={72}
height={72}
viewBox="0 0 72 72"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.4985 25.5007C10.4985 28.2855 11.6048 30.9562 13.5739 32.9254C15.543 34.8945 18.2138 36.0007 20.9985 36.0007C23.7833 36.0007 26.454 34.8945 28.4232 32.9254C30.3923 30.9562 31.4985 28.2855 31.4985 25.5007C31.4985 22.716 30.3923 20.0452 28.4232 18.0761C26.454 16.107 23.7833 15.0007 20.9985 15.0007C18.2138 15.0007 15.543 16.107 13.5739 18.0761C11.6048 20.0452 10.4985 22.716 10.4985 25.5007Z"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M21.0015 15.0007V25.5007H31.5015"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M27 67.5007C29.7175 64.0694 31.2912 59.8728 31.5 55.5007"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M45 67.5007C42.2825 64.0694 40.7088 59.8728 40.5 55.5007"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M22.4956 67.5H49.4956"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1.49854 46.5007H70.4985"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.49854 4.5H67.4985C67.4985 4.5 70.4985 4.5 70.4985 7.5V52.5C70.4985 52.5 70.4985 55.5 67.4985 55.5H4.49854C4.49854 55.5 1.49854 55.5 1.49854 52.5V7.5C1.49854 7.5 1.49854 4.5 4.49854 4.5Z"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M40.5 21L45 15L54 22.5L61.5 13.5"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M58.5 37.5007V33.0007"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M52.5015 37.5V31.5"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M46.4985 37.5007V28.5007"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M40.5 37.5007V33.0007"
stroke="#000000"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<h5 className="mb_24">Strategic Goal Setting</h5>
<p className="text-body-1 text_mono-gray-7">
Defining clear, measurable, achievable, relevant, and time-bound
( SMART ) goals is a fundamental strategy for aligning
individual and team efforts with the overarching business
vision.
</p>
</div>
</div>
<div className="swiper-slide">
<div className="tf-box-icon style-7 h-full effect-icon">
<div className="icon mb_32">
<svg
width={72}
height={73}
viewBox="0 0 72 73"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="mask0_4230_4974"
style={{ maskType: "luminance" }}
maskUnits="userSpaceOnUse"
x={0}
y={1}
width={72}
height={71}
>
<path
d="M0.830566 1.05422H71.7229V71.9465H0.830566V1.05422Z"
fill="white"
/>
</mask>
<g mask="url(#mask0_4230_4974)">
<path
d="M1.91064 23V18.708C1.91064 9.5695 9.38757 2.09258 18.526 2.09258H32.0822C33.2246 2.09258 34.1592 3.02719 34.1592 4.1695V32.2642C34.1592 33.4065 33.2246 34.3411 32.0822 34.3411H3.98757C2.84526 34.3411 1.91064 33.4065 1.91064 32.2642V22.8618M32.0822 38.6594H3.98757C2.84526 38.6594 1.91064 39.5941 1.91064 40.7364V54.2926C1.91064 63.431 9.38757 70.908 18.526 70.908H32.0822C33.2246 70.908 34.1592 69.9733 34.1592 68.831V40.7364C34.1592 39.5941 33.2246 38.6594 32.0822 38.6594ZM45.7206 70.908H40.4722C39.3299 70.908 38.3953 69.9733 38.3953 68.831V40.7364C38.3953 39.5941 39.3299 38.6594 40.4722 38.6594H68.5669C69.7092 38.6594 70.6436 39.5941 70.6436 40.7364V54.2926C70.6436 63.431 63.1669 70.908 54.0283 70.908H51.9515C51.1403 70.908 45.7206 70.908 45.7206 70.908ZM40.4722 34.3411H68.5669C69.7092 34.3411 70.6436 33.4065 70.6436 32.2642V18.708C70.6436 9.5695 63.1669 2.09258 54.0283 2.09258H40.4722C39.3299 2.09258 38.3953 3.02719 38.3953 4.1695V32.2642C38.3953 33.4065 39.3299 34.3411 40.4722 34.3411Z"
stroke="black"
strokeWidth={2}
strokeMiterlimit="22.926"
/>
<path
d="M23.3654 14.5425C23.3654 14.5425 21.2365 12.7529 18.7257 13.5092C16.4205 14.2037 16.098 16.8618 17.7658 17.9493C17.7658 17.9493 19.4024 18.6792 21.2176 19.3488C25.5871 20.9605 23.7048 25.1877 20.1873 25.1877C18.4258 25.1877 16.9475 24.4165 16.0527 23.429"
stroke="black"
strokeWidth="1.5"
strokeMiterlimit={10}
strokeLinecap="square"
strokeLinejoin="round"
/>
<path
d="M45.8091 13.4119L48.1207 25.0986L48.6266 25.0952L51.976 13.5141L52.4964 13.5148L55.8365 25.0986L56.3424 25.0952L58.6633 13.4337"
stroke="black"
strokeWidth="1.5"
strokeMiterlimit={10}
strokeLinecap="square"
/>
<path
d="M48.96 48.0022H55.5125"
stroke="black"
strokeWidth="2.5"
strokeMiterlimit={10}
strokeLinecap="square"
strokeLinejoin="round"
/>
<path
d="M52.2231 48.0022V59.4883"
stroke="black"
strokeWidth="1.5"
strokeMiterlimit={10}
strokeLinecap="square"
strokeLinejoin="round"
/>
<path
d="M25.8381 53.7452C25.8381 57.0216 23.1819 59.6777 19.9057 59.6777C16.6293 59.6777 13.9731 57.0216 13.9731 53.7452C13.9731 50.4688 16.6293 47.8127 19.9057 47.8127C23.1819 47.8127 25.8381 50.4688 25.8381 53.7452Z"
stroke="black"
strokeWidth="1.5"
strokeMiterlimit={10}
strokeLinecap="round"
strokeLinejoin="bevel"
/>
</g>
</svg>
</div>
<h5 className="mb_24">SWOT Analysis</h5>
<p className="text-body-1 text_mono-gray-7">
A SWOT analysis is a strategic planning technique used to help a
person or organization identify strengths, weaknesses,
opportunities, and threats related to business competition or
project planning.
</p>
</div>
</div>
<div className="swiper-slide">
<div className="tf-box-icon style-7 h-full effect-icon">
<div className="icon mb_32">
<svg
width={72}
height={72}
viewBox="0 0 72 72"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4230_5002)">
<path
d="M30.0156 4.81396C16.1033 4.81396 4.8252 16.0921 4.8252 30.0044C4.8252 43.9167 16.1033 55.1949 30.0156 55.1949C43.928 55.1949 55.2061 43.9167 55.2061 30.0044C55.1909 16.0984 43.9217 4.82911 30.0156 4.81396ZM30.0156 7.21306C33.6669 7.21593 37.2639 8.09692 40.5031 9.7817C43.7424 11.4665 46.529 13.9056 48.6278 16.8934L45.6289 19.8922C44.8992 19.4506 44.0636 19.2144 43.2106 19.2085C40.5607 19.2085 38.4125 21.3567 38.4125 24.0067C38.4166 24.8605 38.6516 25.6974 39.0926 26.4286L31.238 34.2832C30.5085 33.8384 29.6705 33.603 28.8161 33.603C27.9617 33.603 27.1237 33.8384 26.3942 34.2832L20.9387 28.8277C21.3797 28.0965 21.6147 27.2596 21.6188 26.4058C21.6221 23.7611 19.4809 21.6145 16.8362 21.6112C14.649 21.6085 12.738 23.088 12.1928 25.2062H7.74249C10.0137 14.7182 19.2845 7.2288 30.0156 7.21306ZM45.6097 24.0067C45.6097 25.3317 44.5357 26.4058 43.2106 26.4058C41.8856 26.4058 40.8116 25.3317 40.8116 24.0067C40.8116 22.6816 41.8856 21.6076 43.2106 21.6076C44.5357 21.6076 45.6097 22.6816 45.6097 24.0067ZM31.2152 38.4012C31.2152 39.7263 30.1411 40.8003 28.8161 40.8003C27.4911 40.8003 26.417 39.7263 26.417 38.4012C26.417 37.0762 27.4911 36.0021 28.8161 36.0021C30.1411 36.0021 31.2152 37.0762 31.2152 38.4012ZM19.2197 26.4058C19.2197 27.7308 18.1457 28.8049 16.8206 28.8049C15.4956 28.8049 14.4216 27.7308 14.4216 26.4058C14.4216 25.0807 15.4956 24.0067 16.8206 24.0067C18.1457 24.0067 19.2197 25.0807 19.2197 26.4058ZM41.0895 49.9328C37.7019 51.8137 33.8904 52.7991 30.0156 52.7956C17.4369 52.8042 7.23283 42.6142 7.22429 30.0355C7.22369 29.2237 7.26657 28.4123 7.35264 27.6052H12.1928C12.7381 29.7171 14.6394 31.1956 16.8206 31.2038C17.6745 31.1997 18.5113 30.9646 19.2425 30.5237L24.6981 35.9792C24.2571 36.7104 24.0221 37.5472 24.0179 38.4011C24.0179 41.051 26.1662 43.1993 28.8161 43.1993C31.466 43.1993 33.6143 41.051 33.6143 38.4011C33.6101 37.5472 33.3751 36.7104 32.9341 35.9792L40.7888 28.1246C41.5199 28.5655 42.3568 28.8006 43.2106 28.8047C45.8606 28.8047 48.0088 26.6565 48.0088 24.0065C48.0047 23.1527 47.7697 22.3158 47.3287 21.5847L49.9437 18.9708C56.0486 29.9659 52.0844 43.828 41.0895 49.9328Z"
fill="black"
/>
<path
d="M60.0045 12.0113C62.1857 12.003 64.087 10.5247 64.6323 8.41263H72V6.01354H64.6323C64.087 3.90144 62.1857 2.42315 60.0045 2.41491C57.3546 2.41491 55.2063 4.56314 55.2063 7.21309C55.2105 8.06694 55.4455 8.90378 55.8865 9.63497L53.7789 11.7426C43.6944 -1.3956 24.8688 -3.87116 11.7306 6.21327C-1.40756 16.2977 -3.88312 35.1235 6.2013 48.2617C15.7203 60.663 33.1693 63.6713 46.2913 55.1733L49.9115 58.7935L51.6077 60.4897L61.264 70.146C63.7199 72.6019 67.7015 72.6019 70.1575 70.146C72.6134 67.6901 72.6134 63.7085 70.1575 61.2526L60.5011 51.5963L58.805 49.9001L55.1847 46.2799C61.6111 36.3812 61.6111 23.6278 55.1847 13.729L57.5838 11.3299C58.3146 11.7711 59.1509 12.0065 60.0045 12.0113ZM60.0045 4.814C61.3295 4.814 62.4036 5.88804 62.4036 7.21309C62.4036 8.53813 61.3295 9.61218 60.0045 9.61218C58.6795 9.61218 57.6054 8.53813 57.6054 7.21309C57.6054 5.88804 58.6796 4.814 60.0045 4.814ZM68.4613 62.9488C69.9976 64.4506 70.0257 66.9136 68.5238 68.4499C67.022 69.9862 64.559 70.0142 63.0227 68.5124C63.0016 68.4918 62.9808 68.471 62.9602 68.4499L53.3038 58.7935L58.805 53.2924L68.4613 62.9488ZM57.1088 51.5963L51.6077 57.0974L48.2873 53.777C48.4565 53.6475 48.6148 53.5047 48.7816 53.3716C48.9483 53.2384 49.1414 53.0789 49.3202 52.929C49.5829 52.7082 49.842 52.4851 50.0963 52.256C50.227 52.1361 50.3518 52.0161 50.4801 51.8961C50.9718 51.4356 51.4483 50.9592 51.9088 50.4675C52.0287 50.3391 52.1487 50.2144 52.2686 50.0836C52.4974 49.8288 52.7218 49.5701 52.9416 49.3075C53.0918 49.1302 53.2394 48.9507 53.3842 48.7689C53.5162 48.6034 53.6589 48.4451 53.7885 48.2759L57.1088 51.5963ZM52.457 46.0244C52.0791 46.5522 51.6893 47.0692 51.2778 47.567C51.1579 47.7121 51.0295 47.8525 50.906 47.9952C50.5399 48.4212 50.1607 48.8356 49.7688 49.238C49.5984 49.4138 49.4253 49.587 49.2494 49.7574C48.8478 50.15 48.4333 50.5293 48.0066 50.8945C47.8639 51.0145 47.7236 51.1452 47.5784 51.2664C47.0806 51.6778 46.5636 52.0677 46.0358 52.4455C33.6181 61.3169 16.3598 58.4421 7.48841 46.0244C-1.38297 33.6067 1.49189 16.3484 13.9096 7.47699C26.3273 -1.3944 43.5856 1.48031 52.457 13.8982C59.3215 23.5068 59.3215 36.4157 52.457 46.0244Z"
fill="black"
/>
</g>
<defs>
<clipPath id="clip0_4230_5002">
<rect width={72} height={72} fill="white" />
</clipPath>
</defs>
</svg>
</div>
<h5 className="mb_24">Market Analysis</h5>
<p className="text-body-1 text_mono-gray-7">
Understanding market trends, customer needs, competitive
landscapes is crucial for businesses to stay relevant. By
conducting thorough research and analysis, organizations can
make informed strategic decisions.
</p>
</div>
</div>
<div className="swiper-slide">
<div className="tf-box-icon style-7 h-full effect-icon">
<div className="icon mb_32">
<svg
width={72}
height={72}
viewBox="0 0 72 72"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M68.625 20.25H61.875C61.5766 20.25 61.2905 20.3685 61.0795 20.5795C60.8685 20.7905 60.75 21.0766 60.75 21.375V64.125C60.75 64.4234 60.8685 64.7095 61.0795 64.9205C61.2905 65.1315 61.5766 65.25 61.875 65.25H68.625C68.9234 65.25 69.2095 65.1315 69.4205 64.9205C69.6315 64.7095 69.75 64.4234 69.75 64.125V21.375C69.75 21.0766 69.6315 20.7905 69.4205 20.5795C69.2095 20.3685 68.9234 20.25 68.625 20.25ZM67.5 63H63V22.5H67.5V63ZM57.375 65.25C57.6734 65.25 57.9595 65.1315 58.1705 64.9205C58.3815 64.7095 58.5 64.4234 58.5 64.125V30.375C58.5 30.0766 58.3815 29.7905 58.1705 29.5795C57.9595 29.3685 57.6734 29.25 57.375 29.25H50.625C50.3266 29.25 50.0405 29.3685 49.8295 29.5795C49.6185 29.7905 49.5 30.0766 49.5 30.375V64.125C49.5 64.4234 49.6185 64.7095 49.8295 64.9205C50.0405 65.1315 50.3266 65.25 50.625 65.25H57.375ZM51.75 31.5H56.25V63H51.75V31.5ZM46.125 65.25C46.4234 65.25 46.7095 65.1315 46.9205 64.9205C47.1315 64.7095 47.25 64.4234 47.25 64.125V38.25C47.25 37.9516 47.1315 37.6655 46.9205 37.4545C46.7095 37.2435 46.4234 37.125 46.125 37.125H39.375C39.0766 37.125 38.7905 37.2435 38.5795 37.4545C38.3685 37.6655 38.25 37.9516 38.25 38.25V64.125C38.25 64.4234 38.3685 64.7095 38.5795 64.9205C38.7905 65.1315 39.0766 65.25 39.375 65.25H46.125ZM40.5 39.375H45V63H40.5V39.375ZM34.875 65.25C35.1734 65.25 35.4595 65.1315 35.6705 64.9205C35.8815 64.7095 36 64.4234 36 64.125V47.25C36 46.9516 35.8815 46.6655 35.6705 46.4545C35.4595 46.2435 35.1734 46.125 34.875 46.125H28.125C27.8266 46.125 27.5405 46.2435 27.3295 46.4545C27.1185 46.6655 27 46.9516 27 47.25V64.125C27 64.4234 27.1185 64.7095 27.3295 64.9205C27.5405 65.1315 27.8266 65.25 28.125 65.25H34.875ZM29.25 48.375H33.75V63H29.25V48.375ZM23.625 65.25C23.9234 65.25 24.2095 65.1315 24.4205 64.9205C24.6315 64.7095 24.75 64.4234 24.75 64.125V51.75C24.75 51.4516 24.6315 51.1655 24.4205 50.9545C24.2095 50.7435 23.9234 50.625 23.625 50.625H16.875C16.5766 50.625 16.2905 50.7435 16.0795 50.9545C15.8685 51.1655 15.75 51.4516 15.75 51.75V64.125C15.75 64.4234 15.8685 64.7095 16.0795 64.9205C16.2905 65.1315 16.5766 65.25 16.875 65.25H23.625ZM18 52.875H22.5V63H18V52.875ZM12.375 65.25C12.6734 65.25 12.9595 65.1315 13.1705 64.9205C13.3815 64.7095 13.5 64.4234 13.5 64.125V57.375C13.5 57.0766 13.3815 56.7905 13.1705 56.5795C12.9595 56.3685 12.6734 56.25 12.375 56.25H5.625C5.32663 56.25 5.04048 56.3685 4.82951 56.5795C4.61853 56.7905 4.5 57.0766 4.5 57.375V64.125C4.5 64.4234 4.61853 64.7095 4.82951 64.9205C5.04048 65.1315 5.32663 65.25 5.625 65.25H12.375ZM6.75 58.5H11.25V63H6.75V58.5ZM30.375 20.25H32.625C32.9234 20.25 33.2095 20.1315 33.4205 19.9205C33.6315 19.7095 33.75 19.4234 33.75 19.125C33.75 18.8266 33.6315 18.5405 33.4205 18.3295C33.2095 18.1185 32.9234 18 32.625 18H31.5V16.875C31.5 16.5766 31.3815 16.2905 31.1705 16.0795C30.9595 15.8685 30.6734 15.75 30.375 15.75C30.0766 15.75 29.7905 15.8685 29.5795 16.0795C29.3685 16.2905 29.25 16.5766 29.25 16.875V18.1935C28.4997 18.4591 27.8675 18.9814 27.4649 19.6679C27.0623 20.3545 26.9154 21.1613 27.05 21.9458C27.1846 22.7302 27.5921 23.4418 28.2005 23.955C28.8089 24.4681 29.5791 24.7497 30.375 24.75C30.6734 24.75 30.9595 24.8685 31.1705 25.0795C31.3815 25.2905 31.5 25.5766 31.5 25.875C31.5 26.1734 31.3815 26.4595 31.1705 26.6705C30.9595 26.8815 30.6734 27 30.375 27H28.125C27.8266 27 27.5405 27.1185 27.3295 27.3295C27.1185 27.5405 27 27.8266 27 28.125C27 28.4234 27.1185 28.7095 27.3295 28.9205C27.5405 29.1315 27.8266 29.25 28.125 29.25H29.25V30.375C29.25 30.6734 29.3685 30.9595 29.5795 31.1705C29.7905 31.3815 30.0766 31.5 30.375 31.5C30.6734 31.5 30.9595 31.3815 31.1705 31.1705C31.3815 30.9595 31.5 30.6734 31.5 30.375V29.0565C32.2503 28.7909 32.8825 28.2686 33.2851 27.5821C33.6877 26.8955 33.8346 26.0887 33.7 25.3042C33.5654 24.5198 33.1579 23.8082 32.5495 23.295C31.9411 22.7819 31.1709 22.5003 30.375 22.5C30.0766 22.5 29.7905 22.3815 29.5795 22.1705C29.3685 21.9595 29.25 21.6734 29.25 21.375C29.25 21.0766 29.3685 20.7905 29.5795 20.5795C29.7905 20.3685 30.0766 20.25 30.375 20.25Z"
fill="black"
/>
<path
d="M68.625 6.75H61.875C61.5767 6.75 61.2905 6.86853 61.0795 7.07951C60.8686 7.29048 60.75 7.57663 60.75 7.875C60.75 8.17337 60.8686 8.45952 61.0795 8.67049C61.2905 8.88147 61.5767 9 61.875 9H65.909L50.159 24.75H43.8278C43.8591 24.3758 43.8748 24.0005 43.875 23.625C43.8749 21.0613 43.1449 18.5507 41.7702 16.3868C40.3956 14.2228 38.4332 12.495 36.1126 11.4054C33.792 10.3159 31.2092 9.90957 28.6661 10.2341C26.1231 10.5586 23.725 11.6005 21.7524 13.238C19.7798 14.8754 18.3143 17.0406 17.5271 19.4805C16.74 21.9203 16.6638 24.5338 17.3075 27.0153C17.9513 29.4968 19.2883 31.7438 21.1622 33.4933C23.0361 35.2428 25.3694 36.4226 27.8892 36.8947L23.1591 41.625H14.625C14.4773 41.625 14.331 41.6541 14.1945 41.7106C14.058 41.7672 13.934 41.85 13.8295 41.9545L2.57951 53.2045C2.36853 53.4155 2.25 53.7016 2.25 54C2.25 54.2984 2.36853 54.5845 2.57951 54.7955C2.7905 55.0065 3.07665 55.125 3.37503 55.125C3.67341 55.125 3.95956 55.0065 4.17054 54.7955L15.0909 43.875H23.625C23.7728 43.875 23.9191 43.8459 24.0556 43.7894C24.1921 43.7328 24.3161 43.65 24.4205 43.5455L30.8503 37.1157C33.759 37.0094 36.5558 35.9676 38.8253 34.1452C41.0948 32.3229 42.7159 29.8171 43.448 27H50.625C50.7728 27 50.9191 26.9709 51.0556 26.9144C51.1921 26.8578 51.3161 26.775 51.4205 26.6705L67.5 10.591V14.625C67.5 14.9234 67.6186 15.2095 67.8295 15.4205C68.0405 15.6315 68.3267 15.75 68.625 15.75C68.9234 15.75 69.2095 15.6315 69.4205 15.4205C69.6315 15.2095 69.75 14.9234 69.75 14.625V7.875C69.75 7.57663 69.6315 7.29048 69.4205 7.07951C69.2095 6.86853 68.9234 6.75 68.625 6.75ZM30.375 34.875C28.15 34.875 25.9749 34.2152 24.1249 32.979C22.2748 31.7429 20.8329 29.9859 19.9814 27.9302C19.1299 25.8745 18.9071 23.6125 19.3412 21.4302C19.7753 19.2479 20.8467 17.2434 22.4201 15.67C23.9934 14.0967 25.998 13.0252 28.1803 12.5912C30.3625 12.1571 32.6245 12.3799 34.6802 13.2314C36.7359 14.0828 38.4929 15.5248 39.7291 17.3748C40.9652 19.2249 41.625 21.4 41.625 23.625C41.6216 26.6076 40.4353 29.4672 38.3262 31.5762C36.2172 33.6853 33.3577 34.8716 30.375 34.875Z"
fill="black"
/>
</svg>
</div>
<h5 className="mb_24">Financial Planning</h5>
<p className="text-body-1 text_mono-gray-7">
A robust financial plan is the cornerstone of sustainable
business growth. It involves a meticulous process of budgeting,
forecasting, and risk management to ensure financial stability.
</p>
</div>
</div>
</div>
<div className="sw-dots style-default sw-pagination-mb mt_20 justify-content-center d-flex d-md-none" />
</div>
</>
);
}

113
components/otherPages/Services.jsx Normal file
View File

@ -0,0 +1,113 @@
"use client";
import { services4 } from "@/data/services";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import { Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
export default function Services() {
return (
<div className="section-tailored-solutions tf-spacing-9">
<div className="tf-container">
<div className="heading-section mb_111">
<h2>Tailored Solutions For Your Growth</h2>
<p className="text-body-1 text_mono-gray-7 mt_20">
With custom services, we empower the development, provide support
from your unique vision.
</p>
</div>
<Swiper
className="swiper tf-sw-mobile bg_1 swiper-active-576"
data-screen={576}
spaceBetween={15}
modules={[Pagination]}
pagination={{
clickable: true,
el: ".spd16",
}}
>
{services4.map((service, index) => (
<SwiperSlide className="swiper-slide" key={index}>
<div className="wrap d-flex gap_7 flex-column justify-content-between h-full">
<div
className="tf-box-icon style-1 hover-border"
style={{ animationDelay: service.delay }}
>
<h5 className="mb_55 title">
<Link
href={`/service-details/${service.id}`}
className="link hover-line-text line-clamp-2"
dangerouslySetInnerHTML={{ __html: service.title }}
></Link>
</h5>
<div className="icon">
<Image
alt="icon"
src={service.imgSrc}
width={160}
height={160}
/>
</div>
<p className="text-body-1 text_mono-gray-7">
{service.description}
</p>
</div>
<ul className="list d-grid gap_9">
{service.items.map((item, i) => (
<li className="text-body-1" key={i}>
{item}
</li>
))}
</ul>
</div>
</SwiperSlide>
))}
<div className="sw-dots spd16 style-default sw-pagination-mb mt_20 justify-content-center d-flex d-md-none" />
</Swiper>
<div className="swiper tf-sw-mobile swiper-inActive-576 bg_1">
<div className="swiper-wrapper tf-grid-layout-sm xl-col-4 sm-col-2 gap_24">
{services4.map((service, index) => (
<div className="swiper-slide" key={index}>
<div className="wrap d-flex gap_7 flex-column justify-content-between h-full">
<div
className="tf-box-icon style-1 hover-border"
style={{ animationDelay: service.delay }}
>
<h5 className="mb_55 title">
<Link
href={`/service-details/${service.id}`}
className="link hover-line-text line-clamp-2"
dangerouslySetInnerHTML={{ __html: service.title }}
></Link>
</h5>
<div className="icon">
<Image
alt="icon"
src={service.imgSrc}
width={160}
height={160}
/>
</div>
<p className="text-body-1 text_mono-gray-7">
{service.description}
</p>
</div>
<ul className="list d-grid gap_9">
{service.items.map((item, i) => (
<li className="text-body-1" key={i}>
{item}
</li>
))}
</ul>
</div>
</div>
))}
</div>
<div className="sw-dots style-default sw-pagination-mb mt_20 justify-content-center d-flex d-md-none" />
</div>
</div>
</div>
);
}

66
components/otherPages/Team.jsx Normal file
View File

@ -0,0 +1,66 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { teamMembers } from "@/data/team";
export default function Team() {
return (
<div className="section-team style-1 tf-spacing-6">
<div className="tf-container">
<div className="heading-secion mb_88">
<h2 className="heading-title split-text effect-right">
Our Dedicated Membership
</h2>
<p
className="text-body-1 text_mono-gray-7 mt_20 wow animate__fadeInUp animate__animated"
data-wow-delay="0s"
>
Our dedicated members actively participate in our community, sharing
expertise, <br />
collaborating on projects, and supporting one another.
</p>
</div>
<div className="tf-grid-layout-2 lg-col-4">
{teamMembers.map((member, index) => (
<div
key={index}
className="team-item style-default hover-border hover-image"
>
<Link href={`/team`} className="img-style mb_19">
<Image
alt="avatar"
src={member.image}
width={406}
height={406}
/>
</Link>
<div className="content">
<h3 className="name">
<Link href={`/team`} className="link hover-line-text">
{member.name}
</Link>
</h3>
<p className="text-body-1">{member.role}</p>
</div>
</div>
))}
<div className="team-item empty">
<div className="img-style position-relative">
<Image
alt="avatar"
src="/images/item/team-emty.png"
width={406}
height={406}
/>
<h3 className="name">
<Link href={`/team`} className="link hover-line-text">
See All <br />
Members
</Link>
</h3>
</div>
</div>
</div>
</div>
</div>
);
}

71
components/otherPages/Team2.jsx Normal file
View File

@ -0,0 +1,71 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { socialIcons, teamMembers2 } from "@/data/team";
export default function Team2() {
return (
<div className="section-team style-2 tf-spacing-9 pb-0">
<div className="tf-container">
<div className="wrap">
<div className="heading-section mb_86">
<h2>Tailored Solutions For Your Growth</h2>
<p className="text-body-1 text_mono-gray-7 mt_20">
With custom services, we empower the development, provide support
from your unique vision.
</p>
</div>
<div className="tf-grid-layout-2 lg-col-4">
{teamMembers2.map((member, index) => (
<div
key={index}
className="team-item v2 style-default hover-border hover-image"
>
<a href="#" className="img-style mb_19">
<Image
alt="avatar"
src={member.image}
width={406}
height={406}
/>
</a>
<div className="bot">
<div className="content">
<h3 className="name">
<a href="#" className="link hover-line-text">
{member.name}
</a>
</h3>
<p className="text-body-1">{member.role}</p>
</div>
<ul className="social d-flex gap_12 justify-content-center">
{socialIcons.map((icon, i) => (
<li key={i}>
<a href={icon.href} className={icon.className} />
</li>
))}
</ul>
</div>
</div>
))}
<div className="team-item empty">
<div className="img-style position-relative">
<Image
alt="avatar"
src="/images/item/team-emty.png"
width={406}
height={406}
/>
<h3 className="name">
<Link href={`/team`} className="link hover-line-text">
Imagine This <br />
Could Be You.
</Link>
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

344
components/shop/Checkout.jsx Normal file
View File

@ -0,0 +1,344 @@
"use client";
import { useContextElement } from "@/context/Context";
import Link from "next/link";
import DropdownSelect from "../common/DropdownSelect";
export default function Checkout() {
const {
cartProducts,
totalPrice,
} = useContextElement();
return (
<div className="checkout-product tf-spacing-40">
<div className="tf-container">
<div className="row">
<div className="col-md-8">
<div className="left">
<form
className="form-checkout"
onSubmit={(e) => e.preventDefault()}
>
<div className="mb_33">
<h6 className="mb_12">Contact information</h6>
<p className="text-body-2 mb_18">
We’ll use this email to send you details and updates about
your order
</p>
<fieldset>
<input
type="email"
placeholder="Email address"
id="email"
className="rounded-cycle"
required
/>
</fieldset>
</div>
<div className="mb_34">
<h6 className="mb_12">Billing address</h6>
<p className="text-body-2 mb_18">
Enter the billing address that matches your payment method
</p>
<div className="tf-select-tranform-lable mb_24">
<span className="select-label">Country/Region</span>
<select id="countrySelect" name="region-choose">
<option />
<option
value="United States"
data-provinces="[['Alabama','Alabama'],['Alaska','Alaska'],['American Samoa','American Samoa'],['Arizona','Arizona'],['Arkansas','Arkansas'],['Armed Forces Americas','Armed Forces Americas'],['Armed Forces Europe','Armed Forces Europe'],['Armed Forces Pacific','Armed Forces Pacific'],['California','California'],['Colorado','Colorado'],['Connecticut','Connecticut'],['Delaware','Delaware'],['District of Columbia','Washington DC'],['Federated States of Micronesia','Micronesia'],['Florida','Florida'],['Georgia','Georgia'],['Guam','Guam'],['Hawaii','Hawaii'],['Idaho','Idaho'],['Illinois','Illinois'],['Indiana','Indiana'],['Iowa','Iowa'],['Kansas','Kansas'],['Kentucky','Kentucky'],['Louisiana','Louisiana'],['Maine','Maine'],['Marshall Islands','Marshall Islands'],['Maryland','Maryland'],['Massachusetts','Massachusetts'],['Michigan','Michigan'],['Minnesota','Minnesota'],['Mississippi','Mississippi'],['Missouri','Missouri'],['Montana','Montana'],['Nebraska','Nebraska'],['Nevada','Nevada'],['New Hampshire','New Hampshire'],['New Jersey','New Jersey'],['New Mexico','New Mexico'],['New York','New York'],['North Carolina','North Carolina'],['North Dakota','North Dakota'],['Northern Mariana Islands','Northern Mariana Islands'],['Ohio','Ohio'],['Oklahoma','Oklahoma'],['Oregon','Oregon'],['Palau','Palau'],['Pennsylvania','Pennsylvania'],['Puerto Rico','Puerto Rico'],['Rhode Island','Rhode Island'],['South Carolina','South Carolina'],['South Dakota','South Dakota'],['Tennessee','Tennessee'],['Texas','Texas'],['Utah','Utah'],['Vermont','Vermont'],['Virgin Islands','U.S. Virgin Islands'],['Virginia','Virginia'],['Washington','Washington'],['West Virginia','West Virginia'],['Wisconsin','Wisconsin'],['Wyoming','Wyoming']]"
>
United States
</option>
<option
value="Australia"
data-provinces="[['Australian Capital Territory','Australian Capital Territory'],['New South Wales','New South Wales'],['Northern Territory','Northern Territory'],['Queensland','Queensland'],['South Australia','South Australia'],['Tasmania','Tasmania'],['Victoria','Victoria'],['Western Australia','Western Australia']]"
>
Australia
</option>
<option value="Austria" data-provinces="[]">
Austria
</option>
<option value="Belgium" data-provinces="[]">
Belgium
</option>
<option
value="Canada"
data-provinces="[['Alberta','Alberta'],['British Columbia','British Columbia'],['Manitoba','Manitoba'],['New Brunswick','New Brunswick'],['Newfoundland and Labrador','Newfoundland and Labrador'],['Northwest Territories','Northwest Territories'],['Nova Scotia','Nova Scotia'],['Nunavut','Nunavut'],['Ontario','Ontario'],['Prince Edward Island','Prince Edward Island'],['Quebec','Quebec'],['Saskatchewan','Saskatchewan'],['Yukon','Yukon']]"
>
Canada
</option>
<option value="Czech Republic" data-provinces="[]">
Czechia
</option>
<option value="Denmark" data-provinces="[]">
Denmark
</option>
<option value="Finland" data-provinces="[]">
Finland
</option>
<option value="France" data-provinces="[]">
France
</option>
<option value="Germany" data-provinces="[]">
Germany
</option>
<option
value="Hong Kong"
data-provinces="[['Hong Kong Island','Hong Kong Island'],['Kowloon','Kowloon'],['New Territories','New Territories']]"
>
Hong Kong SAR
</option>
<option
value="Ireland"
data-provinces="[['Carlow','Carlow'],['Cavan','Cavan'],['Clare','Clare'],['Cork','Cork'],['Donegal','Donegal'],['Dublin','Dublin'],['Galway','Galway'],['Kerry','Kerry'],['Kildare','Kildare'],['Kilkenny','Kilkenny'],['Laois','Laois'],['Leitrim','Leitrim'],['Limerick','Limerick'],['Longford','Longford'],['Louth','Louth'],['Mayo','Mayo'],['Meath','Meath'],['Monaghan','Monaghan'],['Offaly','Offaly'],['Roscommon','Roscommon'],['Sligo','Sligo'],['Tipperary','Tipperary'],['Waterford','Waterford'],['Westmeath','Westmeath'],['Wexford','Wexford'],['Wicklow','Wicklow']]"
>
Ireland
</option>
<option value="Israel" data-provinces="[]">
Israel
</option>
<option
value="Italy"
data-provinces="[['Agrigento','Agrigento'],['Alessandria','Alessandria'],['Ancona','Ancona'],['Aosta','Aosta Valley'],['Arezzo','Arezzo'],['Ascoli Piceno','Ascoli Piceno'],['Asti','Asti'],['Avellino','Avellino'],['Bari','Bari'],['Barletta-Andria-Trani','Barletta-Andria-Trani'],['Belluno','Belluno'],['Benevento','Benevento'],['Bergamo','Bergamo'],['Biella','Biella'],['Bologna','Bologna'],['Bolzano','South Tyrol'],['Brescia','Brescia'],['Brindisi','Brindisi'],['Cagliari','Cagliari'],['Caltanissetta','Caltanissetta'],['Campobasso','Campobasso'],['Carbonia-Iglesias','Carbonia-Iglesias'],['Caserta','Caserta'],['Catania','Catania'],['Catanzaro','Catanzaro'],['Chieti','Chieti'],['Como','Como'],['Cosenza','Cosenza'],['Cremona','Cremona'],['Crotone','Crotone'],['Cuneo','Cuneo'],['Enna','Enna'],['Fermo','Fermo'],['Ferrara','Ferrara'],['Firenze','Florence'],['Foggia','Foggia'],['Forlì-Cesena','Forlì-Cesena'],['Frosinone','Frosinone'],['Genova','Genoa'],['Gorizia','Gorizia'],['Grosseto','Grosseto'],['Imperia','Imperia'],['Isernia','Isernia'],['L'Aquila','L’Aquila'],['La Spezia','La Spezia'],['Latina','Latina'],['Lecce','Lecce'],['Lecco','Lecco'],['Livorno','Livorno'],['Lodi','Lodi'],['Lucca','Lucca'],['Macerata','Macerata'],['Mantova','Mantua'],['Massa-Carrara','Massa and Carrara'],['Matera','Matera'],['Medio Campidano','Medio Campidano'],['Messina','Messina'],['Milano','Milan'],['Modena','Modena'],['Monza e Brianza','Monza and Brianza'],['Napoli','Naples'],['Novara','Novara'],['Nuoro','Nuoro'],['Ogliastra','Ogliastra'],['Olbia-Tempio','Olbia-Tempio'],['Oristano','Oristano'],['Padova','Padua'],['Palermo','Palermo'],['Parma','Parma'],['Pavia','Pavia'],['Perugia','Perugia'],['Pesaro e Urbino','Pesaro and Urbino'],['Pescara','Pescara'],['Piacenza','Piacenza'],['Pisa','Pisa'],['Pistoia','Pistoia'],['Pordenone','Pordenone'],['Potenza','Potenza'],['Prato','Prato'],['Ragusa','Ragusa'],['Ravenna','Ravenna'],['Reggio Calabria','Reggio Calabria'],['Reggio Emilia','Reggio Emilia'],['Rieti','Rieti'],['Rimini','Rimini'],['Roma','Rome'],['Rovigo','Rovigo'],['Salerno','Salerno'],['Sassari','Sassari'],['Savona','Savona'],['Siena','Siena'],['Siracusa','Syracuse'],['Sondrio','Sondrio'],['Taranto','Taranto'],['Teramo','Teramo'],['Terni','Terni'],['Torino','Turin'],['Trapani','Trapani'],['Trento','Trentino'],['Treviso','Treviso'],['Trieste','Trieste'],['Udine','Udine'],['Varese','Varese'],['Venezia','Venice'],['Verbano-Cusio-Ossola','Verbano-Cusio-Ossola'],['Vercelli','Vercelli'],['Verona','Verona'],['Vibo Valentia','Vibo Valentia'],['Vicenza','Vicenza'],['Viterbo','Viterbo']]"
>
Italy
</option>
<option
value="Japan"
data-provinces="[['Aichi','Aichi'],['Akita','Akita'],['Aomori','Aomori'],['Chiba','Chiba'],['Ehime','Ehime'],['Fukui','Fukui'],['Fukuoka','Fukuoka'],['Fukushima','Fukushima'],['Gifu','Gifu'],['Gunma','Gunma'],['Hiroshima','Hiroshima'],['Hokkaidō','Hokkaido'],['Hyōgo','Hyogo'],['Ibaraki','Ibaraki'],['Ishikawa','Ishikawa'],['Iwate','Iwate'],['Kagawa','Kagawa'],['Kagoshima','Kagoshima'],['Kanagawa','Kanagawa'],['Kumamoto','Kumamoto'],['Kyōto','Kyoto'],['Kōchi','Kochi'],['Mie','Mie'],['Miyagi','Miyagi'],['Miyazaki','Miyazaki'],['Nagano','Nagano'],['Nagasaki','Nagasaki'],['Nara','Nara'],['Niigata','Niigata'],['Okayama','Okayama'],['Okinawa','Okinawa'],['Saga','Saga'],['Saitama','Saitama'],['Shiga','Shiga'],['Shimane','Shimane'],['Shizuoka','Shizuoka'],['Tochigi','Tochigi'],['Tokushima','Tokushima'],['Tottori','Tottori'],['Toyama','Toyama'],['Tōkyō','Tokyo'],['Wakayama','Wakayama'],['Yamagata','Yamagata'],['Yamaguchi','Yamaguchi'],['Yamanashi','Yamanashi'],['Ōita','Oita'],['Ōsaka','Osaka']]"
>
Japan
</option>
<option
value="Malaysia"
data-provinces="[['Johor','Johor'],['Kedah','Kedah'],['Kelantan','Kelantan'],['Kuala Lumpur','Kuala Lumpur'],['Labuan','Labuan'],['Melaka','Malacca'],['Negeri Sembilan','Negeri Sembilan'],['Pahang','Pahang'],['Penang','Penang'],['Perak','Perak'],['Perlis','Perlis'],['Putrajaya','Putrajaya'],['Sabah','Sabah'],['Sarawak','Sarawak'],['Selangor','Selangor'],['Terengganu','Terengganu']]"
>
Malaysia
</option>
<option value="Netherlands" data-provinces="[]">
Netherlands
</option>
<option
value="New Zealand"
data-provinces="[['Auckland','Auckland'],['Bay of Plenty','Bay of Plenty'],['Canterbury','Canterbury'],['Chatham Islands','Chatham Islands'],['Gisborne','Gisborne'],['Hawke's Bay','Hawke’s Bay'],['Manawatu-Wanganui','Manawatū-Whanganui'],['Marlborough','Marlborough'],['Nelson','Nelson'],['Northland','Northland'],['Otago','Otago'],['Southland','Southland'],['Taranaki','Taranaki'],['Tasman','Tasman'],['Waikato','Waikato'],['Wellington','Wellington'],['West Coast','West Coast']]"
>
New Zealand
</option>
<option value="Norway" data-provinces="[]">
Norway
</option>
<option value="Poland" data-provinces="[]">
Poland
</option>
<option
value="Portugal"
data-provinces="[['Aveiro','Aveiro'],['Açores','Azores'],['Beja','Beja'],['Braga','Braga'],['Bragança','Bragança'],['Castelo Branco','Castelo Branco'],['Coimbra','Coimbra'],['Faro','Faro'],['Guarda','Guarda'],['Leiria','Leiria'],['Lisboa','Lisbon'],['Madeira','Madeira'],['Portalegre','Portalegre'],['Porto','Porto'],['Santarém','Santarém'],['Setúbal','Setúbal'],['Viana do Castelo','Viana do Castelo'],['Vila Real','Vila Real'],['Viseu','Viseu'],['Évora','Évora']]"
>
Portugal
</option>
<option value="Singapore" data-provinces="[]">
Singapore
</option>
<option
value="South Korea"
data-provinces="[['Busan','Busan'],['Chungbuk','North Chungcheong'],['Chungnam','South Chungcheong'],['Daegu','Daegu'],['Daejeon','Daejeon'],['Gangwon','Gangwon'],['Gwangju','Gwangju City'],['Gyeongbuk','North Gyeongsang'],['Gyeonggi','Gyeonggi'],['Gyeongnam','South Gyeongsang'],['Incheon','Incheon'],['Jeju','Jeju'],['Jeonbuk','North Jeolla'],['Jeonnam','South Jeolla'],['Sejong','Sejong'],['Seoul','Seoul'],['Ulsan','Ulsan']]"
>
South Korea
</option>
<option
value="Spain"
data-provinces="[['A Coruña','A Coruña'],['Albacete','Albacete'],['Alicante','Alicante'],['Almería','Almería'],['Asturias','Asturias Province'],['Badajoz','Badajoz'],['Balears','Balears Province'],['Barcelona','Barcelona'],['Burgos','Burgos'],['Cantabria','Cantabria Province'],['Castellón','Castellón'],['Ceuta','Ceuta'],['Ciudad Real','Ciudad Real'],['Cuenca','Cuenca'],['Cáceres','Cáceres'],['Cádiz','Cádiz'],['Córdoba','Córdoba'],['Girona','Girona'],['Granada','Granada'],['Guadalajara','Guadalajara'],['Guipúzcoa','Gipuzkoa'],['Huelva','Huelva'],['Huesca','Huesca'],['Jaén','Jaén'],['La Rioja','La Rioja Province'],['Las Palmas','Las Palmas'],['León','León'],['Lleida','Lleida'],['Lugo','Lugo'],['Madrid','Madrid Province'],['Melilla','Melilla'],['Murcia','Murcia'],['Málaga','Málaga'],['Navarra','Navarra'],['Ourense','Ourense'],['Palencia','Palencia'],['Pontevedra','Pontevedra'],['Salamanca','Salamanca'],['Santa Cruz de Tenerife','Santa Cruz de Tenerife'],['Segovia','Segovia'],['Sevilla','Seville'],['Soria','Soria'],['Tarragona','Tarragona'],['Teruel','Teruel'],['Toledo','Toledo'],['Valencia','Valencia'],['Valladolid','Valladolid'],['Vizcaya','Biscay'],['Zamora','Zamora'],['Zaragoza','Zaragoza'],['Álava','Álava'],['Ávila','Ávila']]"
>
Spain
</option>
<option value="Sweden" data-provinces="[]">
Sweden
</option>
<option value="Switzerland" data-provinces="[]">
Switzerland
</option>
<option
value="United Arab Emirates"
data-provinces="[['Abu Dhabi','Abu Dhabi'],['Ajman','Ajman'],['Dubai','Dubai'],['Fujairah','Fujairah'],['Ras al-Khaimah','Ras al-Khaimah'],['Sharjah','Sharjah'],['Umm al-Quwain','Umm al-Quwain']]"
>
United Arab Emirates
</option>
<option
value="United Kingdom"
data-provinces="[['British Forces','British Forces'],['England','England'],['Northern Ireland','Northern Ireland'],['Scotland','Scotland'],['Wales','Wales']]"
>
United Kingdom
</option>
<option value="Vietnam" data-provinces="[]">
Vietnam
</option>
</select>
</div>
<div className="grid-2 mb_24">
<fieldset>
<input
type="text"
placeholder="First name"
id="first-name"
className="rounded-cycle"
required
/>
</fieldset>
<fieldset>
<input
type="text"
placeholder="Last name"
id="last-name"
className="rounded-cycle"
required
/>
</fieldset>
</div>
<fieldset className="mb_22">
<input
type="text"
placeholder="Address"
id="address"
className="rounded-cycle"
required
/>
</fieldset>
<a href="#" className="link text-body-2 mb_18">
+ Add apartment, suit, etc.
</a>
<div className="grid-2 mb_24">
<fieldset>
<input
type="text"
placeholder="City"
id="city"
className="rounded-cycle"
required
/>
</fieldset>
<div className="tf-select-tranform-lable">
<span className="select-label">State</span>
<select name="region-choose" id="state">
<option />
<option value="California">California</option>
<option value="Alabama">Alabam</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Washington">Washington</option>
<option value="Texas">Texas</option>
<option value="Iowa">Iowa</option>
<option value="Nevada">Nevada</option>
<option value="Illinois">Illinois</option>
</select>
</div>
</div>
<div className="grid-2">
<fieldset>
<input
type="text"
placeholder="Zip Code"
id="zip-code"
className="rounded-cycle"
required
/>
</fieldset>
<fieldset>
<input
type="number"
placeholder="Phone (optional)"
id="phone"
className="rounded-cycle"
required
/>
</fieldset>
</div>
</div>
<div className="mb_33">
<h6 className="title mb_16">Payment options</h6>
<div className="notification d-flex gap_16">
<div className="icon">
<i className="icon-info-circle-solid" />
</div>
<p className="text-body-2 text_mono-gray-6">
There are no payment methods available. This may be an
error on our side. Please contact us if you need any
<br />
help placing your order.
</p>
</div>
</div>
<div className="bot">
<div className="align-items-center d-flex gap_8 mb_29">
<fieldset className="fieldset-item">
<input
type="checkbox"
name="brand"
className="tf-check"
id="add"
defaultChecked=""
/>
</fieldset>
<label className="h6" htmlFor="add">
Add a note to your order
</label>
</div>
<p className="text-body-2 mb_41">
By proceeding with your purchase you agree to our Terms and
Conditions and Privacy Policy
</p>
<div className="wrap-btn d-flex align-items-center justify-content-between">
<Link
href={`/cart`}
className="link d-flex align-items-center gap_20 text-body-1"
>
<i className="icon-long-arrow-alt-left-solid" />
Back to cart
</Link>
<a href="#" className="tf-btn btn-primary2 height-2">
<span>Place Order</span>
<span className="bg-effect" />
</a>
</div>
</div>
</form>
</div>
</div>
<div className="col-md-4">
<div className="cart-totals v2">
<h2 className="title">Cart totals</h2>
<div className="wrap-info">
{cartProducts.map((product, i) => (
<div key={i} className="info sub-heading d-flex">
<div className="name">{product.title}</div>
<span>x{product.quantity}</span>{" "}
<div className="price sub-heading">
${(product.price * product.quantity).toFixed(2)}
</div>
</div>
))}
</div>
<DropdownSelect
defaultOption={"Add a coupon"}
options={["coupon 10%", "coupon 20%"]}
addtionalParentClass="h6 text_black px-0"
/>
<div className="sub-total d-flex justify-content-between align-items-center h6">
<span>Discount</span>
<span>-{totalPrice ? "$1.796" : 0}</span>
</div>
<div className="total h4 d-flex justify-content-between align-items-center">
<span>Total</span>
<span>${totalPrice ? (totalPrice - 1.796).toFixed(2) : 0}</span>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

65
components/shop/CommentBox.jsx Normal file
View File

@ -0,0 +1,65 @@
"use client";
export default function CommentBox() {
return (
<form className="form-leave-comment" onSubmit={(e) => e.preventDefault()}>
<div className="wrap">
<fieldset className="">
<textarea
className=""
rows={4}
placeholder="Comment*"
tabIndex={2}
aria-required="true"
required
defaultValue={""}
/>
</fieldset>
<div className="tf-grid-layout md-col-3">
<fieldset className="">
<input
className=""
type="text"
placeholder="Name*"
name="text"
tabIndex={2}
defaultValue=""
aria-required="true"
required
/>
</fieldset>
<fieldset className="">
<input
className=""
type="email"
placeholder="Email*"
name="email"
tabIndex={2}
defaultValue=""
aria-required="true"
required
/>
</fieldset>
<fieldset className="">
<input
className=""
type="text"
placeholder="Website*"
name="website"
tabIndex={2}
defaultValue=""
aria-required="true"
required
/>
</fieldset>
</div>
</div>
<div className="button-submit mt_32">
<button className="tf-btn btn-primary2" type="submit">
<span> Post Comment</span>
<span className="bg-effect" />
</button>
</div>
</form>
);
}

137
components/shop/FilteringOptions.jsx Normal file
View File

@ -0,0 +1,137 @@
"use client";
import Slider from "rc-slider";
const brands = ["apple", "samsung", "xiaomi", "nokia", "sony", "oppo"];
export default function FilteringOptions({ allProps }) {
return (
<>
{" "}
<form className="form-search mb_30" onSubmit={(e) => e.preventDefault()}>
<fieldset className="text">
<input
type="text"
placeholder="Search..."
className="rounded-cycle"
name="search"
tabIndex={0}
defaultValue=""
aria-required="true"
required
/>
</fieldset>
<button className="" type="submit">
<svg
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.875 1.875C8.43018 1.875 5.625 4.68018 5.625 8.125C5.625 9.62158 6.1499 10.9937 7.03125 12.0703L2.05078 17.0508L2.94922 17.9492L7.92969 12.9688C9.00635 13.8501 10.3784 14.375 11.875 14.375C15.3198 14.375 18.125 11.5698 18.125 8.125C18.125 4.68018 15.3198 1.875 11.875 1.875ZM11.875 3.125C14.6436 3.125 16.875 5.35645 16.875 8.125C16.875 10.8936 14.6436 13.125 11.875 13.125C9.10645 13.125 6.875 10.8936 6.875 8.125C6.875 5.35645 9.10645 3.125 11.875 3.125Z"
fill="#5F697C"
/>
</svg>
</button>
</form>
<div className="categories">
<h6 className="title mb_26">Categories</h6>
<ul className="list d-grid gap_9">
<li className="active">
<a href="#" className="link text-body-1">
Phone, Tablet
</a>
</li>
<li>
<a href="#" className="link text-body-1">
Sound
</a>
</li>
<li>
<a href="#" className="link text-body-1">
Clock, Camera
</a>
</li>
<li>
<a href="#" className="link text-body-1">
Household appliances
</a>
</li>
<li>
<a href="#" className="link text-body-1">
Accessory
</a>
</li>
</ul>
</div>
<div className="filter mb_42">
<div className="heading d-flex align-items-center justify-content-between mb_50">
<h6 className="">Fillters</h6>
<a
href="#"
onClick={(e) => {
e.preventDefault();
allProps.clearFilter();
}}
className="btn-reset text_mono-gray-7 d-flex align-items-center fw-5 gap_4"
>
<i className="icon-sync-alt-solid" />
Reset all
</a>
</div>
<div className="brand wg-filter">
<div className="box-fieldset-item">
{brands.map((brand, index) => (
<fieldset
onClick={() => allProps.setBrands(brand)}
className="fieldset-item"
key={brand}
>
<input
checked={allProps.brands.includes(brand)}
type="checkbox"
name="brand"
readOnly
className="tf-check"
/>
<label className="text_mono-gray text-body-1">
{brand.charAt(0).toUpperCase() + brand.slice(1)}
</label>
</fieldset>
))}
</div>
</div>
</div>
<div className="wrap-range">
<div id="range-price-1" className="range-price">
<h6 className="title text_mono-gray mb_55">Price Range</h6>
<div className="box-price-product mb_33">
<div className="box-price-item min">
<div className="price-val" id="price-min-value" data-currency="$">
{allProps.price[0]}
</div>
</div>
<div className="box-price-item max">
<div className="price-val" id="price-max-value" data-currency="$">
{allProps.price[1]}
</div>
</div>
<a href="#" className="btn-go">
{" "}
Go{" "}
</a>
</div>
<div className="price-val-range" id="price-value-range">
<Slider
value={allProps.price}
onChange={(price) => allProps.setPrice(price)}
range
min={0}
max={700}
/>
</div>
</div>
</div>
</>
);
}

115
components/shop/RelatedProducts.jsx Normal file
View File

@ -0,0 +1,115 @@
"use client";
import { products } from "@/data/products";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
import { Pagination } from "swiper/modules";
import { useContextElement } from "@/context/Context";
export default function RelatedProducts() {
const { addProductToCart, isAddedToCartProducts } = useContextElement();
return (
<div className="section-related tf-spacing-38">
<div className="tf-container">
<div className="heading-section mb_32 d-flex justify-content-between mb_104">
<h3 className="">Related products</h3>
<Link href={`/shop`} className="tf-btn btn-primary2">
<span>See All</span>
<span className="bg-effect" />
</Link>
</div>
<Swiper
className="swiper sw-layout"
breakpoints={{
0: { slidesPerView: 2 },
575: {
slidesPerView: 2,
},
768: {
slidesPerView: 2,
spaceBetween: 20,
},
992: {
slidesPerView: 4,
spaceBetween: 24,
},
}}
spaceBetween={15}
modules={[Pagination]}
pagination={{
clickable: true,
el: ".spd13",
}}
>
{products.map((product, i) => (
<SwiperSlide key={i} className="swiper-slide">
<div className="product-item hover-image">
<Link
href={`/product-details/${product.id}`}
className="img-style"
>
<Image
className="lazyload"
alt="item"
src={product.imgSrc}
width={product.width}
height={product.height}
/>
</Link>
<div className="content">
<div className="info">
<div className="text-body-1 product-name mb_8">
<Link
href={`/product-details/${product.id}`}
className="link"
>
{product.title}
</Link>
</div>
<h6 className="price d-flex gap_10">
{product.oldPrice ? (
<>
<span className="new-price">
$
{product.price.toFixed(
product.price % 1 === 0 ? 0 : 2
)}
</span>
<span className="old-price sub-heading">
$
{product.oldPrice.toFixed(
product.oldPrice % 1 === 0 ? 0 : 2
)}
</span>
</>
) : (
`$${product.price.toFixed(
product.price % 1 === 0 ? 0 : 2
)}`
)}
</h6>
</div>
<a
href="#"
onClick={(e) => {
e.preventDefault();
addProductToCart(product.id);
}}
className={`add-cart ${
isAddedToCartProducts(product.id) ? "cart-added" : ""
}`}
>
<i className="icon-shopping-cart-solid" />
</a>
</div>
</div>
</SwiperSlide>
))}
<div className="sw-dots sw-pagination-layout d-flex justify-content-center mt_22 spd13" />
</Swiper>
</div>
</div>
);
}

472
components/shop/Shop.jsx Normal file
View File

@ -0,0 +1,472 @@
"use client";
import { products } from "@/data/products";
import React, { useEffect, useReducer } from "react";
import Image from "next/image";
import FilteringOptions from "./FilteringOptions";
import Link from "next/link";
import { initialState, reducer } from "@/reducer/FilterReducer";
import { useContextElement } from "@/context/Context";
export default function Shop() {
const { addProductToCart, isAddedToCartProducts } = useContextElement();
const [state, dispatch] = useReducer(reducer, initialState);
const {
price,
brands,
filtered,
sortingOption,
sorted,
currentPage,
itemPerPage,
} = state;
const allProps = {
...state,
setPrice: (value) => dispatch({ type: "SET_PRICE", payload: value }),
setBrands: (newBrand) => {
let newBrands = [...brands];
if (newBrands.includes(newBrand)) {
newBrands = newBrands.filter((brand) => brand != newBrand);
} else {
newBrands = [...newBrands, newBrand];
}
console.log(newBrands);
dispatch({ type: "SET_BRANDS", payload: newBrands });
},
setSortingOption: (value) =>
dispatch({ type: "SET_SORTING_OPTION", payload: value }),
setCurrentPage: (value) =>
dispatch({ type: "SET_CURRENT_PAGE", payload: value }),
setItemPerPage: (value) => {
dispatch({ type: "SET_CURRENT_PAGE", payload: 1 }),
dispatch({ type: "SET_ITEM_PER_PAGE", payload: value });
},
clearFilter: () => {
dispatch({ type: "CLEAR_FILTER" });
},
};
useEffect(() => {
let filteredArrays = [];
if (brands.length) {
const filteredByBrands = [...products].filter((elm) =>
brands.every((brand) => elm.filterBrands.includes(brand))
);
filteredArrays = [...filteredArrays, filteredByBrands];
}
const filteredByPrice = [...products].filter(
(elm) => elm.price >= price[0] && elm.price <= price[1]
);
filteredArrays = [...filteredArrays, filteredByPrice];
const commonItems = [...products].filter((item) =>
filteredArrays.every((array) => array.includes(item))
);
dispatch({ type: "SET_FILTERED", payload: commonItems });
}, [price, brands]);
useEffect(() => {
if (sortingOption === "Price Ascending") {
dispatch({
type: "SET_SORTED",
payload: [...filtered].sort((a, b) => a.price - b.price),
});
} else if (sortingOption === "Price Descending") {
dispatch({
type: "SET_SORTED",
payload: [...filtered].sort((a, b) => b.price - a.price),
});
} else if (sortingOption === "Title Ascending") {
dispatch({
type: "SET_SORTED",
payload: [...filtered].sort((a, b) => a.title.localeCompare(b.title)),
});
} else if (sortingOption === "Title Descending") {
dispatch({
type: "SET_SORTED",
payload: [...filtered].sort((a, b) => b.title.localeCompare(a.title)),
});
} else {
dispatch({ type: "SET_SORTED", payload: filtered });
}
dispatch({ type: "SET_CURRENT_PAGE", payload: 1 });
}, [filtered, sortingOption]);
return (
<div className="tf-spacing-41">
<div className="tf-container">
<div className="wrap-shop">
<div className="row">
<div className="col-xl-8">
<div className="left">
<div className="top mb_92">
<div className="text_mono-gray-8 text-body-1 result-count">
Showing 1–6 of 8 results
</div>
<div className="wrap d-flex">
<div className="wrap-sort">
<div className="text_mono-gray-8 text-body-1">
Sort by
</div>
<div
className="tf-dropdown-sort"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<div className="btn-select">
<span className="text-body-3 text-sort-value">
{sortingOption}
</span>
<span className="icon icon-angle-down-solid" />
</div>
<div className="dropdown-menu">
{[
"Sort by (Default)",
"Title Ascending",
"Title Descending",
"Price Ascending",
"Price Descending",
].map((elm, i) => (
<div
key={i}
className={`select-item ${
sortingOption == elm ? "active" : ""
}`}
onClick={() => allProps.setSortingOption(elm)}
data-sort-value="best-selling"
>
<span className="text-body-3 text-value-item">
{elm}
</span>
</div>
))}
</div>
</div>
</div>
<div className="wrap-layout">
<ul
className="nav-tab-filter group-layout"
role="tablist"
>
<li className="nav-tab-item" role="presentation">
<a
href="#gridLayout"
className="btn-layout grid nav-link-item active"
data-bs-toggle="tab"
>
<svg
width={22}
height={22}
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.611328 7.94444H21.3891M21.3891 14.6667H0.611328"
stroke="black"
/>
<rect
x="0.5"
y="0.5"
width={21}
height={21}
stroke="black"
/>
<path d="M7.33398 0V20.7778" stroke="black" />
<path d="M14.666 0V20.7778" stroke="black" />
</svg>
</a>
</li>
<li className="nav-tab-item" role="presentation">
<a
href="#listLayout"
className="nav-link-item btn-layout list"
data-bs-toggle="tab"
>
<svg
width={22}
height={22}
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.88867 4.8889H21.3887"
stroke="black"
/>
<circle
cx="1.22222"
cy="4.88889"
r="0.722222"
fill="#D9D9D9"
stroke="black"
/>
<path d="M4.88867 11H21.3887" stroke="black" />
<path
d="M1.94444 11C1.94444 11.3989 1.62109 11.7222 1.22222 11.7222C0.82335 11.7222 0.5 11.3989 0.5 11C0.5 10.6011 0.82335 10.2778 1.22222 10.2778C1.62109 10.2778 1.94444 10.6011 1.94444 11Z"
fill="#D9D9D9"
stroke="black"
/>
<path
d="M4.88867 17.1111H21.3887"
stroke="black"
/>
<path
d="M1.94444 17.1111C1.94444 17.51 1.62109 17.8333 1.22222 17.8333C0.82335 17.8333 0.5 17.51 0.5 17.1111C0.5 16.7122 0.82335 16.3889 1.22222 16.3889C1.62109 16.3889 1.94444 16.7122 1.94444 17.1111Z"
fill="#D9D9D9"
stroke="black"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<div className="flat-animate-tab">
<div className="tab-content">
<div
className="tab-pane active show"
id="gridLayout"
role="tabpanel"
>
<div className="tf-grid-layout-2 md-col-3">
{sorted.map((product) => (
<div
className="product-item hover-image"
key={product.id}
>
<Link
href={`/product-details/${product.id}`}
className="img-style"
>
<Image
className="lazyload"
data-src={product.imgSrc}
alt="item"
src={product.imgSrc}
width={product.width}
height={product.height}
/>
</Link>
<div className="content">
<div className="info">
<div className="text-body-1 product-name mb_8">
<Link
href={`/product-details/${product.id}`}
className="link"
>
{product.title}
</Link>
</div>
<div className="h6 price d-flex gap_10">
{product.oldPrice ? (
<>
<span className="new-price">
$
{product.price.toFixed(
product.price % 1 === 0 ? 0 : 2
)}
</span>
<span className="old-price sub-heading">
$
{product.oldPrice.toFixed(
product.oldPrice % 1 === 0 ? 0 : 2
)}
</span>
</>
) : (
`$${product.price.toFixed(
product.price % 1 === 0 ? 0 : 2
)}`
)}
</div>
</div>
<a
href="#"
onClick={(e) => {
e.preventDefault();
addProductToCart(product.id);
}}
className={`add-cart ${
isAddedToCartProducts(product.id)
? "cart-added"
: ""
}`}
>
<i className="icon-shopping-cart-solid" />
</a>
</div>
</div>
))}
</div>
<ul className="wg-pagination d-flex justify-content-center gap_12 mt_58">
<li>
<a href="#">
<i className="icon-angle-left-solid" />
</a>
</li>
<li>
<a href="#" className="active">
1
</a>
</li>
<li>
<a href="#">...</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">
<i className="icon-angle-right-solid" />
</a>
</li>
</ul>
</div>
<div className="tab-pane" id="listLayout" role="tabpanel">
<div className="wrap-list d-flex gap-16 flex-direction-column">
{sorted.map((product, i) => (
<div
key={i}
className="product-item hover-image style-list"
>
<Link
href={`/product-details/${product.id}`}
className="img-style"
>
<Image
className="lazyload"
alt="item"
src={product.imgSrc}
width={product.width}
height={product.height}
/>
</Link>
<div className="content">
<div className="info">
<div className="text-body-1 product-name mb_8">
<Link
href={`/product-details/${product.id}`}
className="link"
>
{product.title}
</Link>
</div>
<div className="h6 price d-flex gap_10">
{product.oldPrice ? (
<>
<span className="new-price">
$
{product.price.toFixed(
product.price % 1 === 0 ? 0 : 2
)}
</span>
<span className="old-price sub-heading">
$
{product.oldPrice.toFixed(
product.oldPrice % 1 === 0 ? 0 : 2
)}
</span>
</>
) : (
`$${product.price.toFixed(
product.price % 1 === 0 ? 0 : 2
)}`
)}
</div>
</div>
<div className="list-product-btn">
<a
onClick={(e) => {
e.preventDefault();
addProductToCart(product.id);
}}
className="add-cart"
href="#"
>
{isAddedToCartProducts(product.id)
? "Already Added"
: "Add to Cart"}
</a>
<a
href="#"
className="box-icon wishlist btn-icon-action"
>
<span className="icon icon-heart" />
<span className="tooltip">Wishlist</span>
</a>
<a
href="#"
className="box-icon quickview tf-btn-loading"
>
<span className="icon icon-eye" />
<span className="tooltip">Quick View</span>
</a>
</div>
</div>
</div>
))}
</div>
<ul className="wg-pagination d-flex justify-content-center gap_12 mt_58">
<li>
<a href="#">
<i className="icon-angle-left-solid" />
</a>
</li>
<li>
<a href="#" className="active">
1
</a>
</li>
<li>
<a href="#">...</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">
<i className="icon-angle-right-solid" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4">
<div className="right">
<div className="sildebar-fiiler canvas-filter">
<div className="canvas-wrapper">
<div className="canvas-header d-flex d-xl-none">
<h5 className="">
<span className="icon icon-filter" />
Filters
</h5>
<div className="close-filter">
<span className="icon-times-solid" />
</div>
</div>
<div className="canvas-body">
<FilteringOptions allProps={allProps} />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

173
components/shop/ShopCart.jsx Normal file
View File

@ -0,0 +1,173 @@
"use client";
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { useContextElement } from "@/context/Context";
import DropdownSelect from "../common/DropdownSelect";
export default function ShopCart() {
const {
cartProducts,
setCartProducts,
totalPrice,
updateQuantity,
} = useContextElement();
const removeItem = (id) => {
setCartProducts((pre) => [...pre.filter((elm) => elm.id != id)]);
};
return (
<div className="cart-product tf-spacing-39">
<div className="tf-container">
<div className="row">
<div className="col-md-8">
<div className="left">
<h2 className="title">Products</h2>
<div className="tf-product-cart-wrap tf-cart-item">
{cartProducts.length ? (
<>
{cartProducts.map((product, i) => (
<div key={i} className="tf-cart-item_product file-delete">
<div className="product-item style-cart hover-image">
<fieldset className="fieldset-item">
<input
type="checkbox"
name="brand"
className="tf-check"
/>
</fieldset>
<Link
href={`/product-details/${product.id}`}
className="img-style"
>
<Image
className="lazyload"
alt="item"
src={product.imgSrc}
width={263}
height={220}
/>
</Link>
<div className="content">
<div className="info">
<div className="h5 product-name line-clamp-2 mb_16">
<Link
href={`/product-details/${product.id}`}
className="link"
>
{product.title}
</Link>
</div>
<div className="price d-flex gap_10 mb_33">
<span className="new-price h5">
${product.price.toFixed(2)}
</span>
{product.oldPrice && (
<span className="old-price h6">
${product.oldPrice.toFixed(2)}
</span>
)}
</div>
<div className="tf-product-info-quantity">
<div className="wg-quantity">
<span
className="btn-quantity btn-decrease"
onClick={() =>
updateQuantity(
product.id,
product.quantity - 1
)
}
>
-
</span>
<input
className="quantity-product"
type="text"
name="number"
readOnly
value={product.quantity}
/>
<span
className="btn-quantity btn-increase"
onClick={() =>
updateQuantity(
product.id,
product.quantity + 1
)
}
>
+
</span>
</div>
</div>
</div>
</div>
</div>
<div
onClick={() => removeItem(product.id)}
className="remove-cart"
>
<span className="remove icon-times-solid" />
</div>
</div>
))}
</>
) : (
<div className="">
<div className="col-4">
Your Cart is empty. Start adding favorite products to
cart!{" "}
</div>
<Link
className="tf-btn mt-4 mb-3 text-white"
style={{ width: "fit-content" }}
href="/shop"
>
Explore Products
</Link>
</div>
)}
</div>
</div>
</div>
<div className="col-md-4">
<div className="cart-totals">
<h2 className="title">Cart totals</h2>
{cartProducts.map((product, i) => (
<div key={i} className="info sub-heading d-flex">
<div className="name">{product.title}</div>
<span>x{product.quantity}</span>{" "}
<div className="price sub-heading">
${(product.price * product.quantity).toFixed(2)}
</div>
</div>
))}
<DropdownSelect
defaultOption={"Add a coupon"}
options={["coupon 10%", "coupon 20%"]}
addtionalParentClass="h6 text_black px-0"
/>
<div className="sub-total d-flex justify-content-between align-items-center h6">
<span>Subtotal</span>
<span>${totalPrice.toFixed(2)}</span>
</div>
<div className="total h4 d-flex justify-content-between align-items-center">
<span>Total</span>
<span>${totalPrice.toFixed(2)}</span>
</div>
<Link
href={`/checkout`}
className="tf-btn w-full btn-primary2 height-3"
>
<span className="text-body-1">Check Out</span>
<span className="bg-effect" />
</Link>
</div>
</div>
</div>
</div>
</div>
);
}

299
components/shop/ShopDescription.jsx Normal file
View File

@ -0,0 +1,299 @@
"use client";
import Image from "next/image";
import CommentBox from "./CommentBox";
import { useState } from "react";
export default function ShopDescription() {
const [activeTab, setActiveTab] = useState(1);
return (
<div className="tf-container">
<div className="widget-tabs style-1">
<ul className="widget-menu-tab overflow-x-auto">
<li
className={`item-title h5 ${activeTab == 1 ? "active" : ""}`}
onClick={() => setActiveTab(1)}
>
<span className="text-whitespace">Description</span>
</li>
<li
className={`item-title h5 ${activeTab == 2 ? "active" : ""}`}
onClick={() => setActiveTab(2)}
>
<span className="text-whitespace">Reviews (3)</span>
</li>
<li
className={`item-title h5 ${activeTab == 3 ? "active" : ""}`}
onClick={() => setActiveTab(3)}
>
<span className="text-whitespace">Additinal Information</span>
</li>
</ul>
<div className="widget-content-tab">
<div
className={`widget-content-inner ${
activeTab == 1 ? "active" : ""
} `}
>
<div className="tab-description d-grid gap_29">
<p className="text-body-1 text_mono-gray-8">
The 24-inch iMac M3 2023 has an impressively slim design.
Despite being slim, the iMac is also equipped with a diverse
connection port system such as Thunderbolt. In terms of color,
the 24-inch iMac M3 2023 impresses with seven different color
versions for users to choose from: Blue, Green, Pink, Silver,
Yellow, Orange and Purple.
</p>
<p className="text-body-1 text_mono-gray-8">
The iMac M3 2023 is equipped with a 24-inch screen with thin
screen borders for a wide display space. The screen is equipped
with an impressive high resolution of upto 4.5K and a brightness
of 500 nits for super sharp display. The device screen is also
equipped with a wide color gamut P3, so the details displayed on
the screen are extremely vivid
</p>
<p className="text-body-1 text_mono-gray-8">
The 24-inch iMac M3 2023 is equipped with the best camera system
compared to previous generations of iMac introduced by Apple.
Along with that is an integrated image processor, a processor
with the ability to analyze and improve pixels at 1 trillion
calculations per second. Thanks to that, the 24-inch iMac M3
2023 brings impressive video recording capabilities. In addition
to the sharp camera, the 24-inch iMac M3 2023 is also equipped
with a microphone that supports effective sound recording.
Thanks to that, users can record podcasts or livestreams without
the need for supporting equipment. In particular, the microphone
on the device is also designed with echo reduction and
beamforming technology to effectively reduce ambient noise
</p>
</div>
</div>
<div
className={`widget-content-inner ${
activeTab == 2 ? "active" : ""
} `}
>
<div className="tab-reviews write-cancel-review-wrap">
<div className="tab-reviews-heading">
<div className="top">
<div className="text-center">
<div className="number text-display">4.9</div>
<div className="ratings justify-content-center">
<i className="icon icon-star-solid" />
<i className="icon icon-star-solid" />
<i className="icon icon-star-solid" />
<i className="icon icon-star-solid" />
<i className="icon icon-star-solid" />
</div>
<p className="text_mono-gray-8">(168 Ratings)</p>
</div>
<div className="rating-score">
<div className="item">
<div className="number-1 text-body-2 text_mono-gray">
5
</div>
<i className="icon icon-star-solid" />
<div className="line-bg">
<div style={{ width: "94.67%" }} />
</div>
<div className="number-2 text-body-2 text_mono-gray">
59
</div>
</div>
<div className="item">
<div className="number-1 text-body-2 text_mono-gray">
4
</div>
<i className="icon icon-star-solid" />
<div className="line-bg">
<div style={{ width: "60%" }} />
</div>
<div className="number-2 text-body-2 text_mono-gray">
46
</div>
</div>
<div className="item">
<div className="number-1 text-body-2 text_mono-gray">
3
</div>
<i className="icon icon-star-solid" />
<div className="line-bg">
<div style={{ width: "0%" }} />
</div>
<div className="number-2 text-body-2 text_mono-gray">
0
</div>
</div>
<div className="item">
<div className="number-1 text-body-2 text_mono-gray">
2
</div>
<i className="icon icon-star-solid" />
<div className="line-bg">
<div style={{ width: "0%" }} />
</div>
<div className="number-2 text-body-2 text_mono-gray">
0
</div>
</div>
<div className="item">
<div className="number-1 text-body-2 text_mono-gray">
1
</div>
<i className="icon icon-star-solid" />
<div className="line-bg">
<div style={{ width: "0%" }} />
</div>
<div className="number-2 text-body-2 text_mono-gray">
0
</div>
</div>
</div>
</div>
</div>
<div className="reply-comment style-2">
<div className="reply-comment-heading mb_82">
<h2>3 Comments</h2>
</div>
<div className="wrap-comment">
<div className="reply-comment-wrap">
<div className="reply-comment-item">
<div className="heading mb_15">
<div className="box-user">
<div className="avatar">
<Image
alt="avatar"
src="/images/avatar/avatar-2.jpg"
width={119}
height={119}
/>
</div>
<div className="content">
<h5>Kobbie Dao</h5>
<p className="text-body-1 text_mono-gray-5">
September 30, 2023 / 9:30 AM
</p>
</div>
</div>
<a href="#" className="tf-btn btn-primary2">
<span>Reply</span>
<span className="bg-effect" />
</a>
</div>
<div className="comment text-body-1 text_black">
As a web designer myself, I couldn't agree more with the
sentiment that great design should be felt and
remembered long after the screen is turned off.
</div>
</div>
<div className="reply-comment-item type-reply">
<div className="heading mb_35">
<div className="box-user">
<div className="avatar">
<Image
alt="avatar"
src="/images/avatar/avatar-3.jpg"
width={119}
height={119}
/>
</div>
<div className="content">
<h5 className="text_black">Zalatan</h5>
<p className="text-body-1 text_mono-gray-5">
September 30, 2023 / 9:30 AM
</p>
</div>
</div>
<a href="#" className="tf-btn btn-primary2">
<span>Reply</span>
<span className="bg-effect" />
</a>
</div>
<div className="comment text-body-1 text_black">
Aute mi ut suspendisse velit leo, vel risus ac. Amet dui
dignissim fermentum malesuada auctor volutpat,
vestibulum ipsum nulla.
</div>
</div>
</div>
<div className="reply-comment-wrap">
<div className="reply-comment-item">
<div className="heading mb_15">
<div className="box-user">
<div className="avatar">
<Image
alt="avatar"
src="/images/avatar/avatar-4.jpg"
width={119}
height={119}
/>
</div>
<div className="content">
<h5 className="text_black">Bellingham</h5>
<p className="text-body-1 text_mono-gray-5">
September 30, 2023 / 9:30 AM
</p>
</div>
</div>
<a href="#" className="tf-btn btn-primary2">
<span>Reply</span>
<span className="bg-effect" />
</a>
</div>
<div className="comment text-body-1 text_black">
Aute mi ut suspendisse velit leo, vel risus ac. Amet dui
dignissim fermentum malesuada auctor volutpat,
vestibulum ipsum nulla.
</div>
</div>
</div>
</div>
<div className="leave-comment">
<div className="heading-title mb_56">
<h2 className="mb_18">Leave a Reply</h2>
<p className="text-body-1 text_mono-gray letter-spacing-1">
Your email address will not be published. Require field
are marked <span>*</span>
</p>
</div>
<CommentBox />
</div>
</div>
</div>
</div>
<div
className={`widget-content-inner ${
activeTab == 3 ? "active" : ""
} `}
>
<div className="tab-description d-grid gap_12">
<p className="text-body-1 text_mono-gray-8">
With the 2024 version, the Macbook Air is upgraded to a
15.3-inch screen with Liquid Retina resolution (2880 x 1864)
that reproduces detailed image quality, millions of pixels and a
wide spectrum P3 color range of up to 1 billion colors. Allows
you to perfectly perform graphic design tasks with strict color
requirements.
</p>
<p className="text-body-1 text_mono-gray-8">
500 nits brightness with True Tone Technology regulates vision
and vision extremely well, quickly adapting to ambient light
conditions to display the sharpest content from text to video.
</p>
<p className="text-body-1 text_mono-gray-8">
MacBook Air 15 inch M3 2024 8-core CPU - Screen
</p>
<p className="text-body-1 text_mono-gray-8">
Multi-dimensional surround sound system Dolby Atmos, Spatial
Audio combined with a high-quality linear speaker system brings
a complete and realistic entertainment experience with vivid
sound quality, clear bass, and sound amplification. Loud allows
you to immerse yourself in melodious music or vivid movies,
detailed sound is also extremely beneficial when participating
in video post-production editing and sound effects.
</p>
</div>
</div>
</div>
</div>
</div>
);
}

371
components/shop/ShopDetails.jsx Normal file
View File

@ -0,0 +1,371 @@
"use client";
import React, { useEffect, useRef, useState } from "react";
import Image from "next/image";
import Drift from "drift-zoom";
import PhotoSwipeLightbox from "photoswipe/lightbox";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode, Thumbs } from "swiper/modules";
import { useContextElement } from "@/context/Context";
const colorOptions = [
{
id: "blue-sapphire",
label: "Blue Sapphire",
price: null,
defaultChecked: false,
},
{
id: "seafoam-green",
label: "Seafoam Green",
price: "79.99",
defaultChecked: true,
},
{
id: "dusty-rose",
label: "Dusty Rose",
price: "89.99",
defaultChecked: false,
},
{
id: "light-gray",
label: "Light Gray",
price: "59.99",
defaultChecked: false,
},
];
export default function ShopDetails({ product }) {
const { addProductToCart, isAddedToCartProducts } = useContextElement();
const [value, setValue] = useState(1);
const slides = [
{
color: "blue-sapphire",
image: product.imgSrc,
},
{
color: "dusty-rose",
image: "/images/shop/thumbs-main-2.jpg",
},
{
color: "light-gray",
image: "/images/shop/thumbs-main-3.jpg",
},
{
color: "seafoam-green",
image: "/images/shop/thumbs-main-4.jpg",
},
];
const [activeColor, setActiveColor] = useState(
colorOptions.find((opt) => opt.defaultChecked)?.id || ""
);
const [swiperThumb, setSwiperThumb] = useState(null);
const lightboxRef = useRef(null);
useEffect(() => {
// Initialize PhotoSwipeLightbox
const lightbox = new PhotoSwipeLightbox({
gallery: "#gallery-swiper-started",
children: ".item",
pswpModule: () => import("photoswipe"),
});
lightbox.init();
// Store the lightbox instance in the ref for later use
lightboxRef.current = lightbox;
// Cleanup: destroy the lightbox when the component unmounts
return () => {
lightbox.destroy();
};
}, []);
useEffect(() => {
// Function to initialize Drift
// Function to check window width
const checkWindowSize = () => window.innerWidth >= 1200;
// Only proceed if window is wide enough
if (!checkWindowSize()) return;
const imageZoom = () => {
const driftAll = document.querySelectorAll(".tf-image-zoom");
const pane = document.querySelector(".tf-zoom-main");
driftAll.forEach((el) => {
new Drift(el, {
zoomFactor: 2,
paneContainer: pane,
inlinePane: false,
handleTouch: false,
hoverBoundingBox: true,
containInline: true,
});
});
};
imageZoom();
const zoomElements = document.querySelectorAll(".tf-image-zoom");
const handleMouseOver = (event) => {
const parent = event.target.closest(".section-image-zoom");
if (parent) {
parent.classList.add("zoom-active");
}
};
const handleMouseLeave = (event) => {
const parent = event.target.closest(".section-image-zoom");
if (parent) {
parent.classList.remove("zoom-active");
}
};
zoomElements.forEach((element) => {
element.addEventListener("mouseover", handleMouseOver);
element.addEventListener("mouseleave", handleMouseLeave);
});
// Cleanup event listeners on component unmount
return () => {
zoomElements.forEach((element) => {
element.removeEventListener("mouseover", handleMouseOver);
element.removeEventListener("mouseleave", handleMouseLeave);
});
};
}, []); // Empty dependency array to run only once on mount
return (
<div className="tf-spacing-1">
<div className="tf-container">
<div className="shop-details">
<div className="row">
<div className="col-lg-6">
<div className="left">
<div className="tf-product-media-wrap">
<div className="thumbs-slider">
<Swiper
dir="ltr"
className="swiper tf-product-media-main mb_20"
id="gallery-swiper-started"
modules={[Thumbs]}
thumbs={{ swiper: swiperThumb }}
>
{slides.map((slide, index) => (
<SwiperSlide
key={index}
className="swiper-slide"
data-color={slide.color}
>
<a
href={slide.image}
target="_blank"
className="item"
data-pswp-width="400px"
data-pswp-height="400px"
>
<Image
className="tf-image-zoom lazyload"
data-zoom={slide.image}
data-src={slide.image}
alt=""
src={slide.image}
width={836}
height={718}
/>
</a>
</SwiperSlide>
))}
</Swiper>
<Swiper
dir="ltr"
modules={[Thumbs, FreeMode]}
onSwiper={setSwiperThumb}
className="swiper tf-product-media-thumbs other-image-zoom"
{...{
spaceBetween: 24,
slidesPerView: "auto",
freeMode: true,
watchSlidesProgress: true,
observer: true,
observeParents: true,
}}
>
{slides.map((elm, i) => (
<SwiperSlide
key={i}
className="swiper-slide stagger-item"
>
<div className="item">
<Image
className="lazyload"
alt=""
src={elm.image}
width={191}
height={160}
/>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="right">
<div className="tf-product-info-wrap position-relative">
<div className="tf-zoom-main" />
<div className="tf-product-info-list other-image-zoom">
<div className="tf-product-info-heading">
<div className="tf-product-info-name mb_24">
<h3 className="name mb_11">{product.title}</h3>
<div className="sub">
<div className="tf-product-info-rate">
<div className="ratings d-flex gap_8">
<i className="icon-star-solid" />
<i className="icon-star-solid" />
<i className="icon-star-solid" />
<i className="icon-star-half-alt-solid" />
<i className="icon-star1" />
</div>
<div className="text text-body-2 text_color-text-2 fw-5">
3 Review
</div>
</div>
</div>
</div>
<div className="tf-product-info-desc mb_12">
<div className="tf-product-info-price">
<h2 className="price-on-sale">
${product.price.toFixed(2)}
</h2>
{product.oldPrice && (
<h3 className="compare-at-price text_mono-gray-5">
${product.oldPrice.toFixed(2)}
</h3>
)}
</div>
</div>
</div>
<div className="tf-product-info-choose-option gap-19">
<div className="variant-picker-item mb_58">
<div className="variant-picker-label text-body-2 text_color-text-2 mb_6">
Select Color
</div>
<div className="variant-picker-values">
{colorOptions.map((color) => {
const inputId = `values-${color.id}`;
const isActive = activeColor === color.id;
return (
<React.Fragment key={color.id}>
<input
id={inputId}
type="radio"
name="color1"
checked={isActive}
onChange={() => setActiveColor(color.id)}
/>
<label
className={`hover-tooltip tooltip-bot radius-60 color-btn ${
isActive ? "active" : ""
}`}
htmlFor={inputId}
data-value={color.id}
data-color={color.id}
{...(color.price
? { "data-price": color.price }
: {})}
>
<span
className={`btn-checkbox bg-color-${color.id}`}
/>
<span className="tooltip">{color.label}</span>
</label>
</React.Fragment>
);
})}
</div>
</div>
<ul className="list mb_57">
<li className="text-body-2">
Condition: Machine Body. + 143W Power Supply
</li>
<li className="text-body-2">
Display : 24" 4.5K (4480x2520) , 500 nits , wide color
P3
</li>
<li className="text-body-2">
CPU: Apple M3 8-Core CPU 4.0Ghz
</li>
<li className="text-body-2">
GPU: 8-Core GPU ,16-Core Neural Engine
</li>
<li className="text-body-2">
RAM: 8GB of onboard " Unified "
</li>
<li className="text-body-2">Storage: 256GB PCIe</li>
<li className="text-body-2">
Connect : x2 Thunderbolt 3 | USB 4 ports , Jack 3.5,
Weight : 4,43kg
</li>
<li className="text-body-2">
Accessory : Mouse,Keyboard, Power Adapter, Cable C to
lightning.
</li>
</ul>
<div className="d-flex tf-product-wrap-btn gap_12 mb_23">
<div className="tf-product-info-quantity d-flex align-items-center">
<div className="title text-body-2 text_mono-gray-8">
QTY
</div>
<div className="wg-quantity">
<span
onClick={() =>
setValue((pre) => (pre == 1 ? 1 : pre - 1))
}
className="btn-quantity btn-decrease"
>
-
</span>
<input
className="quantity-product"
type="text"
name="number"
readOnly
value={value}
/>
<span
onClick={() => setValue((pre) => pre + 1)}
className="btn-quantity btn-increase"
>
+
</span>
</div>
</div>
<div className="tf-product-info-by-btn d-flex align-items-center w-full">
<a
href="#"
onClick={(e) => {
e.preventDefault();
addProductToCart(product.id, value);
}}
className="tf-btn w-full show-shopping-cart"
>
<span className="text-body-2 fw-4">
{isAddedToCartProducts(product.id)
? "Already Added"
: "Add To Cart"}
</span>
<span className="bg-effect" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}