first commit
This commit is contained in:
mukesh13
119
components/homes/marketing-consulting/About.jsx
Normal file
119
components/homes/marketing-consulting/About.jsx
Normal 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
106
components/homes/marketing-consulting/Banner.jsx
Normal 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
140
components/homes/marketing-consulting/Blogs.jsx
Normal 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
50
components/homes/marketing-consulting/Brands.jsx
Normal 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
143
components/homes/marketing-consulting/CaseStudies.jsx
Normal 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
28
components/homes/marketing-consulting/Cta.jsx
Normal 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
159
components/homes/marketing-consulting/Faqs.jsx
Normal 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
139
components/homes/marketing-consulting/Features.jsx
Normal 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
390
components/homes/marketing-consulting/Features2.jsx
Normal 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
117
components/homes/marketing-consulting/Figures.jsx
Normal 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
185
components/homes/marketing-consulting/Hero.jsx
Normal 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
172
components/homes/marketing-consulting/Services.jsx
Normal 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 & Analysis
|
||||
</div>
|
||||
<div
|
||||
className={`nav-item ${activeService == 2 ? "is-active" : ""} `}
|
||||
onClick={() => setActiveService(2)}
|
||||
>
|
||||
Brand Development & 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
77
components/homes/marketing-consulting/Testimonials.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user