first commit
This commit is contained in:
mukesh13
96
components/homes/finance-advisor/Blogs.jsx
Normal file
96
components/homes/finance-advisor/Blogs.jsx
Normal 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
82
components/homes/finance-advisor/CaseStudies.jsx
Normal 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
164
components/homes/finance-advisor/Choices.jsx
Normal 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
83
components/homes/finance-advisor/Contact.jsx
Normal 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
201
components/homes/finance-advisor/Faq.jsx
Normal 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
95
components/homes/finance-advisor/Features.jsx
Normal 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
433
components/homes/finance-advisor/Hero.jsx
Normal 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
557
components/homes/finance-advisor/Services.jsx
Normal 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
142
components/homes/finance-advisor/Team.jsx
Normal 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
371
components/homes/finance-advisor/Testimonials.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user