MetatroncubeSoftwareSolutions/zip-van
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Alaguraj0361 2025-09-03 17:47:05 +05:30
commit 4723ae04cd
427 changed files with 84192 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
.gitignore vendored Normal file
View File

@ -0,0 +1,130 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
.cache
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

BIN
README.md Normal file
View File

Binary file not shown.

41
components/blog/BlogCard1.js Normal file
View File

@ -0,0 +1,41 @@
import Link from "next/link"
export default function BlogCard1({ item }) {
return (
<>
<div className="col-xl-12">
<article className="blog_style one has_images" id="post-1576">
<div className="image_box ">
<Link href={`/blog/${item.id}`}>
<img src={`/assets/images/blog/${item.img}`} alt="img" className="img-fluid" />
</Link>
</div>
<div className="content_box">
<div className="d-flex top align-items-center">
<Link href={`/blog/${item.id}`} className="cat_gry">Business Insurance</Link>
<span className="date_tm">
<i className="fi-rr-calendar" />
<time className="date published" dateTime="2023-01-03T10:03:20+00:00">Jan 3, 2023</time>
</span>
</div>
<div className="d-flex authour align-items-center">
<img alt="blog" src="assets/images/gavatar.png" className="img-fluid" /> Bradley R Grady
</div>
<h2 className="tit_ho title_28">
<Link href={`/blog/${item.id}`} rel="bookmark">{item.title}</Link>
</h2>
<div className="bottom d-flex align-items-center">
<Link href={`/blog/${item.id}`} className="rd_more">Read More <i className="fi-rr-arrow-small-right" />
</Link>
<small className="comments">
<i className="far fa-comment-dots" />
<Link href={`/blog/${item.id}`} className="Comments are Closed">Post a Comment</Link>
</small>
</div>
</div>
</article>
</div>
</>
)
}

42
components/blog/BlogCard2.js Normal file
View File

@ -0,0 +1,42 @@
import Link from "next/link"
export default function BlogCard2({ item }) {
return (
<>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6 ">
<div className="blog_box type_one trans hover_1_get borenable">
<div className="blog_inner trans">
<div className="vertical_text_1">
<span className="date_tm">
<i className="fi-rr-calendar" />
<time className="date published" >Jan 3, {new Date().getFullYear()}</time>
</span>
</div>
<div className="image_box trans hover_1">
<Link href={`/blog/${item.id}`}>
<img src={`/assets/images/blog/${item.img}`} className="img-fluid" alt="img" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" alt="gavatar" className="img-fluid" /> Jason P Laforce
</div>
<h4 className="title_22">
<Link href={`/blog/${item.id}`}> {item.title}</Link>
</h4>
<p className="descs"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem…</p>
<Link href="/blog-details" className="rd_more">Read More <i className="fi-rr-arrow-small-right" />
</Link>
</div>
</div>
</div>
</div>
</>
)
}

45
components/blog/BlogCard3.js Normal file
View File

@ -0,0 +1,45 @@
import Link from "next/link"
export default function BlogCard3({ item }) {
return (
<>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_two trans hover_1_get">
<div className="blog_inner trans">
<div className="image_box trans hover_1">
<Link href={`/blog/${item.id}`}>
<img src={`/assets/images/blog/${item.img}`} className="img-fluid" alt="img" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<span className="date_tm">
<i className="fi-rr-calendar" />
<time className="date published" >Jan 3, {new Date().getFullYear()}</time>
</span>
</div>
<div className="content">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" alt="gavatar" className="img-fluid" /> Bradley R Grady
</div>
<h4 className="title_22">
<Link href={`/blog/${item.id}`}>Former insures only the marine perils</Link>
</h4>
<p className="descs"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem…</p>
<div className="bottn_flex">
<Link href="/blog-details" className="rd_more">Read More <i className="fi-rr-arrow-small-right" />
</Link>
<small className="comments">
<i className="far fa-comment-dots" />
<Link href={`/blog/${item.id}`} className="Comments are Closed">Post a Comment</Link>
</small>
</div>
</div>
</div>
</div>
</div>
</>
)
}

83
components/blog/BlogPost.js Normal file
View File

@ -0,0 +1,83 @@
import { useEffect, useState } from "react"
import data from "../../util/blog.json"
import BlogCard1 from "./BlogCard1"
import BlogCard2 from "./BlogCard2"
import BlogCard3 from "./BlogCard3"
import Pagination from "./Pagination"
export default function BlogPost({ style, showItem, showPagination }) {
// console.log(products);
let [currentPage, setCurrentPage] = useState(1)
let showLimit = showItem,
paginationItem = 4
let [pagination, setPagination] = useState([])
let [limit, setLimit] = useState(showLimit)
let [pages, setPages] = useState(Math.ceil(data.length / limit))
useEffect(() => {
cratePagination()
}, [limit, pages, data.length])
const cratePagination = () => {
// set pagination
let arr = new Array(Math.ceil(data.length / limit))
.fill()
.map((_, idx) => idx + 1)
setPagination(arr)
setPages(Math.ceil(data.length / limit))
}
const startIndex = currentPage * limit - limit
const endIndex = startIndex + limit
const getPaginatedProducts = data.slice(startIndex, endIndex)
let start = Math.floor((currentPage - 1) / paginationItem) * paginationItem
let end = start + paginationItem
const getPaginationGroup = pagination.slice(start, end)
const next = () => {
setCurrentPage((page) => page + 1)
}
const prev = () => {
setCurrentPage((page) => page - 1)
}
const handleActive = (item) => {
setCurrentPage(item)
}
return (
<>
{getPaginatedProducts.length === 0 && (
<h3>No Products Found </h3>
)}
{getPaginatedProducts.map(item => (
<>
{!style && <BlogCard1 key={item.id} item={item} />}
{style === 1 && <BlogCard1 key={item.id} item={item} />}
{style === 2 && <BlogCard2 key={item.id} item={item} />}
{style === 3 && <BlogCard3 key={item.id} item={item} />}
</>
))}
{showPagination &&
<Pagination
getPaginationGroup={
getPaginationGroup
}
currentPage={currentPage}
pages={pages}
next={next}
prev={prev}
handleActive={handleActive}
/>
}
</>
)
}

67
components/blog/Pagination.js Normal file
View File

@ -0,0 +1,67 @@
export default function Pagination({
prev,
currentPage,
getPaginationGroup,
next,
pages,
handleActive,
}) {
return (
<>
{/* <ul className="pagination justify-content-center">
<li className="active page-item">
<Link href="/blog-details" className="page-link">1</Link>
</li>
<li className=" page-item">
<Link href="/blog-details" className="page-link">2</Link>
</li>
<li className="next_link page-item">
<Link href="/blog-details">
<i className="fa fa-arrow-right" />
</Link>
</li>
</ul> */}
<ul className="pagination justify-content-center">
{getPaginationGroup.length <= 0 ? null : (
<li onClick={prev} className="next_link page-item">
{currentPage === 1 ? null : (
<a>
<i className="fa fa-arrow-left" />
</a>
)}
</li>
)}
{getPaginationGroup.map((item, index) => {
return (
<li
onClick={() => handleActive(item)}
key={index}
className={
currentPage === item
? "page-item active"
: "page-item"
}
>
<a className="page-link">{item}</a>
</li>
)
})}
{getPaginationGroup.length <= 0 ? null : (
<li onClick={next} className="next_link page-item">
{currentPage >= pages ? null : (
<a>
<i className="fa fa-arrow-right" />
</a>
)}
</li>
)}
</ul>
</>
)
}

32
components/elements/BackToTop.js Normal file
View File

@ -0,0 +1,32 @@
import { useEffect, useState } from "react"
export default function BackToTop() {
const [hasScrolled, setHasScrolled] = useState("false")
useEffect(() => {
window.addEventListener("scroll", onScroll)
return () => {
window.removeEventListener("scroll", onScroll)
}
})
const onScroll = () => {
if (window.scrollY > 100 && !hasScrolled) {
setHasScrolled(true)
} else if (window.scrollY < 100 && hasScrolled) {
setHasScrolled(false)
}
}
return (
<>
{hasScrolled && (
<a className="prgoress_indicator active-progress" href="#">
<svg className="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</a>
)}
</>
)
}

18
components/elements/CounterUp.js Normal file
View File

@ -0,0 +1,18 @@
import { useState } from 'react'
import CountUp from "react-countup"
import ScrollTrigger from 'react-scroll-trigger'
export default function CounterUp({ count, time, color }) {
const [counterOn, setCounterOn] = useState(false)
return (
<>
<ScrollTrigger onEnter={() => setCounterOn(true)} onExit={() => setCounterOn(false)} component="span">
<CountUp end={count} duration={time} redraw={true}>
{({ countUpRef }) => (
<span className={`count ${color ? color : ""}`} ref={countUpRef}></span>
)}
</CountUp>
</ScrollTrigger>
</>
)
}

243
components/elements/PortfolioFilter1.js Normal file
View File

@ -0,0 +1,243 @@
import Isotope from "isotope-layout"
import Link from 'next/link'
import { useCallback, useEffect, useRef, useState } from "react"
export default function PortfolioFilter1() {
// Isotope
const isotope = useRef()
const [filterKey, setFilterKey] = useState("*")
useEffect(() => {
setTimeout(() => {
isotope.current = new Isotope(".portfoliocontainer", {
itemSelector: ".portfolio-wrapper",
// layoutMode: "fitRows",
percentPosition: true,
masonry: {
columnWidth: ".portfolio-wrapper",
},
animationOptions: {
duration: 750,
easing: "linear",
queue: false,
},
})
}, 1000)
}, [])
useEffect(() => {
if (isotope.current) {
filterKey === "*"
? isotope.current.arrange({ filter: `*` })
: isotope.current.arrange({ filter: `.${filterKey}` })
}
}, [filterKey])
const handleFilterKeyChange = useCallback((key) => () => {
setFilterKey(key)
},
[]
)
const activeBtn = (value) => (value === filterKey ? "trans current" : "")
return (
<>
<div className="row">
<div className="col-sm-12">
<div className="fliter_group">
<ul className="portfolio_filter text-center color_two clearfix">
<li className={activeBtn("*")} onClick={handleFilterKeyChange("*")}>View All</li>
<li className={activeBtn("portfolio_category-car")} onClick={handleFilterKeyChange("portfolio_category-car")}>Car</li>
<li className={activeBtn("portfolio_category-fire")} onClick={handleFilterKeyChange("portfolio_category-fire")}>Fire
</li>
<li className={activeBtn("portfolio_category-house")} onClick={handleFilterKeyChange("portfolio_category-house")}>House</li>
<li className={activeBtn("portfolio_category-life")} onClick={handleFilterKeyChange("portfolio_category-life")}>Life</li>
<li className={activeBtn("portfolio_category-medical")} onClick={handleFilterKeyChange("portfolio_category-medical")}>Medical</li>
<li className={activeBtn("portfolio_category-travel")} onClick={handleFilterKeyChange("portfolio_category-travel")}>Travel</li>
</ul>
</div>
</div>
</div>
<div className="portfoliocontainer row">
<div className="portfolio-wrapper col-xl-3 col-lg-4 col-md-6 col-sm-6 portfolio_category-life portfolio_category-medical">
<div className="portfolio_box type_two type_three">
<div className="image_box ">
<img src="/assets/images/portfolio/project-9-min.png" alt="img" className="img-fluid" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link></div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30">
<Link href="/portfolio-details" rel="bookmark">
Affordable Insurance
</Link>
</h2>
<p>
Online survey</p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-3 col-lg-4 col-md-6 col-sm-6 portfolio_category-car portfolio_category-fire">
<div className="portfolio_box type_two type_three">
<div className="image_box ">
<img src="/assets/images/portfolio/project-7-min.png" alt="img" className="img-fluid" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link></div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30"><Link href="/portfolio-details" rel="bookmark">Progressive Insurance</Link></h2>
<p>
Insurance coverage</p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-3 col-lg-4 col-md-6 col-sm-6 portfolio_category-house portfolio_category-medical">
<div className="portfolio_box type_two type_three">
<div className="image_box ">
<img src="/assets/images/portfolio/project-6-min.png" alt="img" className="img-fluid" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link></div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30"><Link href="/portfolio-details" rel="bookmark">Classic Insurance </Link></h2>
<p>
Hassle Free Claims</p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-3 col-lg-4 col-md-6 col-sm-6 portfolio_category-fire portfolio_category-house">
<div className="portfolio_box type_two type_three">
<div className="image_box ">
<img src="/assets/images/portfolio/project-5-min.png" alt="img" className="img-fluid" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link></div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30"><Link href="/portfolio-details" rel="bookmark">Insurance benefit</Link></h2>
<p>
Insure Instantly</p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-3 col-lg-4 col-md-6 col-sm-6 portfolio_category-car portfolio_category-travel">
<div className="portfolio_box type_two type_three">
<div className="image_box ">
<img src="/assets/images/portfolio/project-4-min.png" alt="img" className="img-fluid" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link></div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30"><Link href="/portfolio-details" rel="bookmark">Business strategy</Link></h2>
<p>
No Claim Bonus</p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-3 col-lg-4 col-md-6 col-sm-6 portfolio_category-medical portfolio_category-travel">
<div className="portfolio_box type_two type_three">
<div className="image_box ">
<img src="/assets/images/portfolio/project-3-min.png" alt="img" className="img-fluid" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link></div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30"><Link href="/portfolio-details" rel="bookmark">Rise of insurance</Link></h2>
<p>
Business Details</p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-3 col-lg-4 col-md-6 col-sm-6 portfolio_category-car portfolio_category-fire">
<div className="portfolio_box type_two type_three">
<div className="image_box ">
<img src="/assets/images/portfolio/project-2-min.png" alt="img" className="img-fluid" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link></div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30"><Link href="/portfolio-details" rel="bookmark">Market Expansion</Link></h2>
<p>
Coaching</p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-3 col-lg-4 col-md-6 col-sm-6 portfolio_category-house portfolio_category-life">
<div className="portfolio_box type_two type_three">
<div className="image_box ">
<img src="/assets/images/portfolio/project-1-min.png" alt="img" className="img-fluid" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link></div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30"><Link href="/portfolio-details" rel="bookmark">Business Growth</Link></h2>
<p>
Business Policy</p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
</>
)
}

306
components/elements/PortfolioFilterStyle1.js Normal file
View File

@ -0,0 +1,306 @@
import Isotope from "isotope-layout"
import Link from 'next/link'
import { useCallback, useEffect, useRef, useState } from "react"
export default function PortfolioStyle1() {
// Isotope
const isotope = useRef()
const [filterKey, setFilterKey] = useState("*")
useEffect(() => {
setTimeout(() => {
isotope.current = new Isotope(".portfoliocontainer", {
itemSelector: ".portfolio-wrapper",
// layoutMode: "fitRows",
percentPosition: true,
masonry: {
columnWidth: ".portfolio-wrapper",
},
animationOptions: {
duration: 750,
easing: "linear",
queue: false,
},
})
}, 1000)
}, [])
useEffect(() => {
if (isotope.current) {
filterKey === "*"
? isotope.current.arrange({ filter: `*` })
: isotope.current.arrange({ filter: `.${filterKey}` })
}
}, [filterKey])
const handleFilterKeyChange = useCallback((key) => () => {
setFilterKey(key)
},
[]
)
const activeBtn = (value) => (value === filterKey ? "trans current" : "")
return (
<>
<div className="row">
<div className="col-sm-12">
<div className="fliter_group">
<ul className="portfolio_filter clearfix">
<li className={activeBtn("*")} onClick={handleFilterKeyChange("*")}>View All</li>
<li className={activeBtn("portfolio_category-car")} onClick={handleFilterKeyChange("portfolio_category-car")}>Car</li>
<li className={activeBtn("portfolio_category-fire")} onClick={handleFilterKeyChange("portfolio_category-fire")}>Fire
</li>
<li className={activeBtn("portfolio_category-house")} onClick={handleFilterKeyChange("portfolio_category-house")}>House</li>
<li className={activeBtn("portfolio_category-life")} onClick={handleFilterKeyChange("portfolio_category-life")}>Life</li>
<li className={activeBtn("portfolio_category-medical")} onClick={handleFilterKeyChange("portfolio_category-medical")}>Medical</li>
<li className={activeBtn("portfolio_category-travel")} onClick={handleFilterKeyChange("portfolio_category-travel")}>Travel</li>
</ul>
</div>
</div>
</div>
<div className="portfoliocontainer row">
<div className="portfolio-wrapper col-xl-4 col-lg-4 col-md-6 col-sm-6 portfolio_category-life portfolio_category-medical">
<div className="portfolio_box type_one hover_1_get">
<div className="image_box hover_1">
<img src="/assets/images/portfolio/project-9-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content_box">
<div className="content_box_in trans">
<h2 className="title_22">
<Link href="/portfolio-details" rel="bookmark">Affordable Insurance</Link>
</h2>
<p> Online survey </p>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-4 col-lg-4 col-md-6 col-sm-6 portfolio_category-car portfolio_category-fire">
<div className="portfolio_box type_one hover_1_get">
<div className="image_box hover_1">
<img src="/assets/images/portfolio/project-7-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content_box">
<div className="content_box_in trans">
<h2 className="title_22">
<Link href="/portfolio-details" rel="bookmark">Progressive Insurance</Link>
</h2>
<p> Insurance coverage </p>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-4 col-lg-4 col-md-6 col-sm-6 portfolio_category-house portfolio_category-medical">
<div className="portfolio_box type_one hover_1_get">
<div className="image_box hover_1">
<img src="/assets/images/portfolio/project-6-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content_box">
<div className="content_box_in trans">
<h2 className="title_22">
<Link href="/portfolio-details" rel="bookmark"> Classic Insurance</Link>
</h2>
<p> Hassle Free Claims </p>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-4 col-lg-4 col-md-6 col-sm-6 portfolio_category-fire portfolio_category-house">
<div className="portfolio_box type_one hover_1_get">
<div className="image_box hover_1">
<img src="/assets/images/portfolio/project-5-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content_box">
<div className="content_box_in trans">
<h2 className="title_22">
<Link href="/portfolio-details" rel="bookmark">Insurance benefit</Link>
</h2>
<p> Insure Instantly </p>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-4 col-lg-4 col-md-6 col-sm-6 portfolio_category-car portfolio_category-travel">
<div className="portfolio_box type_one hover_1_get">
<div className="image_box hover_1">
<img src="/assets/images/portfolio/project-4-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content_box">
<div className="content_box_in trans">
<h2 className="title_22">
<Link href="/portfolio-details" rel="bookmark">Business strategy</Link>
</h2>
<p> No Claim Bonus </p>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-4 col-lg-4 col-md-6 col-sm-6 portfolio_category-medical portfolio_category-travel">
<div className="portfolio_box type_one hover_1_get">
<div className="image_box hover_1">
<img src="/assets/images/portfolio/project-3-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content_box">
<div className="content_box_in trans">
<h2 className="title_22">
<Link href="/portfolio-details" rel="bookmark">Rise of insurance</Link>
</h2>
<p> Business Details </p>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-4 col-lg-4 col-md-6 col-sm-6 portfolio_category-car portfolio_category-fire">
<div className="portfolio_box type_one hover_1_get">
<div className="image_box hover_1">
<img src="/assets/images/portfolio/project-2-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content_box">
<div className="content_box_in trans">
<h2 className="title_22">
<Link href="/portfolio-details" rel="bookmark">Market Expansion</Link>
</h2>
<p> Coaching </p>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-4 col-lg-4 col-md-6 col-sm-6 portfolio_category-house portfolio_category-life">
<div className="portfolio_box type_one hover_1_get">
<div className="image_box hover_1">
<img src="/assets/images/portfolio/project-1-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content_box">
<div className="content_box_in trans">
<h2 className="title_22">
<Link href="/portfolio-details" rel="bookmark">Business Growth</Link>
</h2>
<p> Business Policy </p>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-4 col-lg-4 col-md-6 col-sm-6 portfolio_category-car portfolio_category-travel">
<div className="portfolio_box type_one hover_1_get">
<div className="image_box hover_1">
<img src="/assets/images/portfolio/project-8-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content_box">
<div className="content_box_in trans">
<h2 className="title_22">
<Link href="/portfolio-details" rel="bookmark">Insurance Groups</Link>
</h2>
<p> Policy Renewal </p>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
</div>
</>
)
}

255
components/elements/PortfolioFilterStyle2.js Normal file
View File

@ -0,0 +1,255 @@
import Isotope from "isotope-layout"
import Link from 'next/link'
import { useCallback, useEffect, useRef, useState } from "react"
export default function PortfolioStyle2() {
// Isotope
const isotope = useRef()
const [filterKey, setFilterKey] = useState("*")
useEffect(() => {
setTimeout(() => {
isotope.current = new Isotope(".portfoliocontainer", {
itemSelector: ".portfolio-wrapper",
// layoutMode: "fitRows",
percentPosition: true,
masonry: {
columnWidth: ".portfolio-wrapper",
},
animationOptions: {
duration: 750,
easing: "linear",
queue: false,
},
})
}, 1000)
}, [])
useEffect(() => {
if (isotope.current) {
filterKey === "*"
? isotope.current.arrange({ filter: `*` })
: isotope.current.arrange({ filter: `.${filterKey}` })
}
}, [filterKey])
const handleFilterKeyChange = useCallback((key) => () => {
setFilterKey(key)
},
[]
)
const activeBtn = (value) => (value === filterKey ? "trans current " : "")
return (
<>
<div className="row">
<div className="col-sm-12">
<div className="fliter_group">
<ul className="portfolio_filter clearfix">
<li className={activeBtn("*")} onClick={handleFilterKeyChange("*")}>View All</li>
<li className={activeBtn("portfolio_category-car")} onClick={handleFilterKeyChange("portfolio_category-car")}>Car</li>
<li className={activeBtn("portfolio_category-fire")} onClick={handleFilterKeyChange("portfolio_category-fire")}>Fire
</li>
<li className={activeBtn("portfolio_category-house")} onClick={handleFilterKeyChange("portfolio_category-house")}>House</li>
<li className={activeBtn("portfolio_category-life")} onClick={handleFilterKeyChange("portfolio_category-life")}>Life</li>
<li className={activeBtn("portfolio_category-medical")} onClick={handleFilterKeyChange("portfolio_category-medical")}>Medical</li>
<li className={activeBtn("portfolio_category-travel")} onClick={handleFilterKeyChange("portfolio_category-travel")}>Travel</li>
</ul>
</div>
</div>
</div>
<div className="portfoliocontainer row" style={{ position: 'relative', height: '1328.8px' }}>
<div className="portfolio-wrapper col-xl-6 col-lg-6 col-md-6 col-sm-6 portfolio_category-car portfolio_category-travel">
<div className="portfolio_box type_two">
<div className="image_box ">
<img src="/assets/images/portfolio/project-9-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
</div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30">
<Link href="/portfolio-details" rel="bookmark">Insurance Groups</Link>
</h2>
<p> Policy Renewal </p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-6 col-lg-6 col-md-6 col-sm-6 portfolio_category-house portfolio_category-life">
<div className="portfolio_box type_two">
<div className="image_box ">
<img src="/assets/images/portfolio/project-1-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
</div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30">
<Link href="/portfolio-details" rel="bookmark">Business Growth</Link>
</h2>
<p> Business Policy </p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-6 col-lg-6 col-md-6 col-sm-6 portfolio_category-car portfolio_category-fire">
<div className="portfolio_box type_two">
<div className="image_box ">
<img src="/assets/images/portfolio/project-2-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
</div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30">
<Link href="/portfolio-details" rel="bookmark">Market Expansion</Link>
</h2>
<p> Coaching </p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-6 col-lg-6 col-md-6 col-sm-6 portfolio_category-medical portfolio_category-travel">
<div className="portfolio_box type_two">
<div className="image_box ">
<img src="/assets/images/portfolio/project-3-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
</div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30">
<Link href="/portfolio-details" rel="bookmark">Rise of insurance</Link>
</h2>
<p> Business Details </p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-6 col-lg-6 col-md-6 col-sm-6 portfolio_category-car portfolio_category-travel">
<div className="portfolio_box type_two">
<div className="image_box ">
<img src="/assets/images/portfolio/project-4-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
</div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30">
<Link href="/portfolio-details" rel="bookmark">Business strategy</Link>
</h2>
<p> No Claim Bonus </p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-6 col-lg-6 col-md-6 col-sm-6 portfolio_category-fire portfolio_category-house">
<div className="portfolio_box type_two">
<div className="image_box ">
<img src="/assets/images/portfolio/project-5-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
</div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30">
<Link href="/portfolio-details" rel="bookmark">Insurance benefit</Link>
</h2>
<p> Insure Instantly </p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-6 col-lg-6 col-md-6 col-sm-6 portfolio_category-house portfolio_category-medical">
<div className="portfolio_box type_two">
<div className="image_box ">
<img src="/assets/images/portfolio/project-6-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
</div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30">
<Link href="/portfolio-details" rel="bookmark"> Classic Insurance</Link>
</h2>
<p> Hassle Free Claims </p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="portfolio-wrapper col-xl-6 col-lg-6 col-md-6 col-sm-6 portfolio_category-car portfolio_category-fire">
<div className="portfolio_box type_two">
<div className="image_box ">
<img src="/assets/images/portfolio/project-7-min.png" className="img-fluid" alt="img" />
<Link data-fancybox="gallery" className="zm_btn trans" href="#">
<span className="fi-rs-cursor-plus zoom_icon" />
</Link>
</div>
<div className="content_box trans">
<div className="bg trans" />
<div className="con">
<h2 className="title_30">
<Link href="/portfolio-details" rel="bookmark">Progressive Insurance</Link>
</h2>
<p> Insurance coverage </p>
</div>
<Link href="/portfolio-details" className="lnk trans">
<svg className="trans" width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7.75H16M16 7.75L9.25 1M16 7.75L9.25 14.5" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
</>
)
}

16
components/elements/Preloader.js Normal file
View File

@ -0,0 +1,16 @@
export default function Preloader() {
return (
<>
<div className="loader-wrap">
<div className="preloader">
<div className="preloader-close"><i className="fi-rr-cross" /></div>
</div>
<div className="layer"> </div>
<div className="animation-preloader">
<div className="spinner" />
</div>
</div>
</>
)
}

24
components/elements/QuantityInput.js Normal file
View File

@ -0,0 +1,24 @@
import { useState } from 'react'
export default function QuantityInput() {
const [value, setValue] = useState(1)
const handleUpClick = () => {
setValue(value + 1)
}
const handleDownClick = () => {
setValue(value - 1)
}
return (
<>
<div className="quantity">
<label className="screen-reader-text" htmlFor="quantity_637c662a50dfa">Quantity</label>
<input type="button" value="-" className="qty_button minus" onClick={handleDownClick} />
<input type="number" id="quantity_637c662a50dfa" className="input-text qty text" min={1} name="quantity" inputMode="numeric" value={value} onChange={(e) => setValue(e.target.value)} />
<input type="button" value="+" className="qty_button plus" onClick={handleUpClick} />
</div>
</>
)
}

112
components/elements/ThumbSlider.js Normal file
View File

@ -0,0 +1,112 @@
import { useEffect, useState } from "react"
import Slider from "react-slick"
import "slick-carousel/slick/slick-theme.css"
import "slick-carousel/slick/slick.css"
const data = [
{
id: 1,
image: "/assets/images/shop/product-1-min.png",
bigImage: "/assets/images/shop/product-1-min.png"
},
{
id: 2,
image: "/assets/images/shop/product-2-min.png",
bigImage: "/assets/images/shop/product-2-min.png"
},
{
id: 3,
image: "/assets/images/shop/product-3-min.png",
bigImage: "/assets/images/shop/product-3-min.png"
},
{
id: 4,
image: "/assets/images/shop/product-4-min.png",
bigImage: "/assets/images/shop/product-4-min.png"
},
{
id: 5,
image: "/assets/images/shop/product-5-min.png",
bigImage: "/assets/images/shop/product-5-min.png"
},
{
id: 6,
image: "/assets/images/shop/product-4-min.png",
bigImage: "/assets/images/shop/product-6-min.png"
},
]
const ThumbSlider = () => {
const [nav1, setNav1] = useState(null)
const [nav2, setNav2] = useState(null)
const [slider1, setSlider1] = useState(null)
const [slider2, setSlider2] = useState(null)
useEffect(() => {
setNav1(slider1)
setNav2(slider2)
}, [slider2, slider1])
const settingsMain = {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: ".slider-nav"
}
const settingsThumbs = {
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: ".slider-for",
dots: false,
centerMode: true,
swipeToSlide: true,
focusOnSelect: true,
centerPadding: "0px",
arrows: false
}
return (
<>
<Slider
{...settingsMain}
asNavFor={nav2}
ref={(slider) => setSlider1(slider)}
>
{data.map((item, index) => (
<img
src={item.bigImage}
alt="image"
key={index}
/>
))}
</Slider>
<div className="mt-5"></div>
<Slider
{...settingsThumbs}
asNavFor={nav1}
ref={(slider) => setSlider2(slider)}
>
{data.map((item) => (
<div key={item.id}>
<img
src={item.image}
alt=""
className="p-2"
// style={{
// width: "100%",
// height: 100,
// objectFit: "cover",
// cursor: "pointer"
// }}
/>
</div>
))}
</Slider>
</>
)
}
export default ThumbSlider

12
components/elements/VideoBox.js Normal file
View File

@ -0,0 +1,12 @@
import { useState } from "react"
import ModalVideo from 'react-modal-video'
import "../../node_modules/react-modal-video/css/modal-video.css"
export default function VideoBox() {
const [isOpen, setOpen] = useState(false)
return (
<>
<a onClick={() => setOpen(true)} className="lightbox-image"><i className="fi-rr-play" /></a>
<ModalVideo channel='youtube' autoplay isOpen={isOpen} videoId="vfhzo499OeA" onClose={() => setOpen(false)} />
</>
)
}

30
components/layout/Breadcrumb.js Normal file
View File

@ -0,0 +1,30 @@
import Link from "next/link"
export default function Breadcrumb({breadcrumbTitle}) {
return (
<>
<section className="page_header_default pg_bg_cover alignment_center">
<div className="bakground_cover" style={{ backgroundImage: 'url(assets/images/page-image-1-min.jpg)' }} />
<div className="page_header_content">
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="banner_title_inner">
<div className="title">
<span className="main_tit">{breadcrumbTitle}</span> </div>
</div>
</div>
<div className="col-lg-12 vankine">
<ul className="breadcrumb m-auto">
<li><Link href="#">Home</Link> </li>
<li className="active">{breadcrumbTitle}</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</>
)
}

79
components/layout/Layout.js Normal file
View File

@ -0,0 +1,79 @@
import { useEffect, useState } from "react"
import BackToTop from '../elements/BackToTop'
import Breadcrumb from './Breadcrumb'
import MobileMenu from "./MobileMenu"
import OptionalPanel from "./OptionalPanel"
import SearchPopup from "./SearchPopup"
import StickyHeader from "./StickyHeader"
import Footer1 from './footer/Footer1'
import Footer2 from "./footer/Footer2"
import Footer3 from "./footer/Footer3"
import Footer4 from "./footer/Footer4"
import Footer5 from "./footer/Footer5"
import Footer6 from "./footer/Footer6"
import Header1 from './header/Header1'
import Header2 from "./header/Header2"
import Header3 from "./header/Header3"
import Header4 from "./header/Header4"
import Header5 from "./header/Header5"
import Header6 from "./header/Header6"
export default function Layout({ headerStyle, footerStyle, pageCls, breadcrumbTitle, children }) {
// Search
const [isSearch, setSearch] = useState(false)
const handleSearch = () => setSearch(!isSearch)
// Optional Panel
const [isOptionalPanel, setOptionalPanel] = useState(false)
const handleOptionalPanel = () => setOptionalPanel(!isOptionalPanel)
// Moblile Menu
const [isMobileMenu, setMobileMenu] = useState(false)
const handleMobileMenu = () => setMobileMenu(!isMobileMenu)
// Scroll Header
const [scroll, setScroll] = useState(0)
useEffect(() => {
document.addEventListener("scroll", () => {
const scrollCheck = window.scrollY > 100
if (scrollCheck !== scroll) {
setScroll(scrollCheck)
}
})
})
return (
<>
<div id="page" className={`page_wapper hfeed site ${pageCls ? pageCls : ""}`}>
{!headerStyle && <Header1 handleSearch={handleSearch} handleOptionalPanel={handleOptionalPanel} handleMobileMenu={handleMobileMenu} />}
{headerStyle == 1 ? <Header1 handleSearch={handleSearch} handleOptionalPanel={handleOptionalPanel} handleMobileMenu={handleMobileMenu} /> : null}
{headerStyle == 2 ? <Header2 handleSearch={handleSearch} handleOptionalPanel={handleOptionalPanel} handleMobileMenu={handleMobileMenu} /> : null}
{headerStyle == 3 ? <Header3 handleSearch={handleSearch} handleOptionalPanel={handleOptionalPanel} handleMobileMenu={handleMobileMenu} /> : null}
{headerStyle == 4 ? <Header4 handleSearch={handleSearch} handleOptionalPanel={handleOptionalPanel} handleMobileMenu={handleMobileMenu} /> : null}
{headerStyle == 5 ? <Header5 handleSearch={handleSearch} handleOptionalPanel={handleOptionalPanel} handleMobileMenu={handleMobileMenu} /> : null}
{headerStyle == 6 ? <Header6 handleSearch={handleSearch} handleOptionalPanel={handleOptionalPanel} handleMobileMenu={handleMobileMenu} /> : null}
<StickyHeader scroll={scroll} handleSearch={handleSearch} handleOptionalPanel={handleOptionalPanel} handleMobileMenu={handleMobileMenu} />
<div id="wrapper_full" className="content_all_warpper">
{breadcrumbTitle && <Breadcrumb breadcrumbTitle={breadcrumbTitle} />}
<div id="content" className="site-content">
{children}
</div>
{!footerStyle && < Footer1 />}
{footerStyle == 1 ? < Footer1 /> : null}
{footerStyle == 2 ? < Footer2 /> : null}
{footerStyle == 3 ? < Footer3 /> : null}
{footerStyle == 4 ? < Footer4 /> : null}
{footerStyle == 5 ? < Footer5 /> : null}
{footerStyle == 6 ? < Footer6 /> : null}
</div>
<MobileMenu isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} />
<SearchPopup isSearch={isSearch} handleSearch={handleSearch} />
<OptionalPanel isOptionalPanel={isOptionalPanel} handleOptionalPanel={handleOptionalPanel} />
<BackToTop />
</div>
</>
)
}

46
components/layout/MobileMenu.js Normal file
View File

@ -0,0 +1,46 @@
import Link from 'next/link'
import Sidebar from './Sidebar'
export default function MobileMenu({ handleMobileMenu, isMobileMenu }) {
return (
<>
<div className={isMobileMenu ? "mobile_menu_box-visible" : ""}>
<div className="mobile_menu_box">
<div className="menu-backdrop" onClick={handleMobileMenu} />
<nav className="menu-box scrollbarcolor">
<div className="close-btn" onClick={handleMobileMenu}>
<i className="fi-rr-cross" />
</div>
<form role="search" method="get" action="#">
<input type="search" className="search" placeholder="Search..." name="s" title="Search" />
<button type="submit" className="sch_btn">
<i className="fa fa-search" />
</button>
</form>
<div className="menu-outer">
<div className="navigation_menu">
<Sidebar />
</div>
</div>
<div className="mobile-header-info-wrap">
<div className="single-mobile-header-info">
<Link href="tel:9806071234" className="cnt">
<i className="fi-rs-headphones" />9806071234 </Link>
</div>
<div className="single-mobile-header-info cont_over">
<Link href="mailto:sendmail@example.com" className="cnt">
<i className="fi-rs-envelope" />sendmail@example.com </Link>
</div>
<div className="single-mobile-header-info">
<Link href="#" className="theme_btn tp_one">Contact</Link>
</div>
<div className="single-mobile-header-info">
<Link href="#" className="theme_btn">Service</Link>
</div>
</div>
</nav>
</div>
</div>
</>
)
}

322
components/layout/NavbarNav.js Normal file
View File

@ -0,0 +1,322 @@
import Link from "next/link"
export default function NavbarNav() {
return (
<>
<ul className="navbar_nav">
<li className="menu-item nav-item menu-item-has-children dropdown mennucolumn_full-six">
<Link href="/" className="nav_link">
<span className="text-link"> Home </span>
</Link>
<ul className="sub_menu">
<li className="menu-item nav-item vankine_menu_image">
<Link href="/" className="nav_link image_big_on_menu_two">
<span className="img-link">
<img src="/assets/images/demo-1-1-min-scaled.jpg" alt="icon" className="menu_img" />
</span>
<span className="text-link"> Home 1 </span>
</Link>
</li>
<li className="menu-item vankine_menu_image">
<Link href="/home-2" className="nav_link image_big_on_menu_two">
<span className="img-link">
<img src="/assets/images/demo-1-2-min-scaled.jpg" alt="icon" className="menu_img" />
</span>
<span className="text-link"> Home 2 </span>
</Link>
</li>
<li className="menu-item nav-item vankine_menu_image">
<Link href="/home-3" className="nav_link image_big_on_menu_two">
<span className="img-link">
<img src="/assets/images/demo-1-3-min-scaled.jpg" alt="icon" className="menu_img" />
</span>
<span className="text-link"> Home 3 </span>
</Link>
</li>
<li className="menu-item nav-item vankine_menu_image">
<Link href="/home-4" className="nav_link image_big_on_menu_two">
<span className="img-link">
<img src="/assets/images/demo-1-4-min-scaled.jpg" alt="icon" className="menu_img" />
</span>
<span className="text-link"> Home 4 </span>
</Link>
</li>
<li className="menu-item nav-item vankine_menu_image">
<Link href="/home-5" className="nav_link image_big_on_menu_two">
<span className="img-link">
<img src="/assets/images/demo-1-5-min-scaled.jpg" alt="icon" className="menu_img" />
</span>
<span className="text-link"> Home 5 </span>
</Link>
</li>
<li className="menu-item nav-item vankine_menu_image">
<Link href="/home-6" className="nav_link image_big_on_menu_two">
<span className="img-link">
<img src="/assets/images/demo-1-6-min-scaled.jpg" alt="icon" className="menu_img" />
</span>
<span className="text-link"> Home 6 </span>
</Link>
</li>
</ul>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item">
<Link href="#" className="nav_link">
<span className="text-link">
Pages
</span>
</Link>
<ul className="sub_menu">
<li className="menu-item nav-item">
<Link href="/about-us" className="nav_link">
<span className="text-link"> About
Us
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/faqs" className="nav_link">
<span className="text-link">
Faq’s
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/pricing" className="nav_link">
<span className="text-link">
Pricing
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/team" className="nav_link">
<span className="text-link">
Team
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/team-detail" className="nav_link">
<span className="text-link"> Team
Detail
</span>
</Link>
</li>
</ul>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown nav-item">
<Link href="#" className="nav_link">
<span className="text-link">
Services
</span>
</Link>
<ul className="sub_menu">
<li className="menu-item nav-item">
<Link href="/service" className="nav_link">
<span className="text-link">
Service Style 1
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/service-style-2" className="nav_link">
<span className="text-link">
Service Style 2
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/service-style-3" className="nav_link">
<span className="text-link">
Service Style 3
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/service-style-4" className="nav_link">
<span className="text-link">
Service Style 4
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/service-style-5" className="nav_link">
<span className="text-link">
Service Style 5
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/service-style-6" className="nav_link">
<span className="text-link">
Service Style 6
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/service-details" className="nav_link">
<span className="text-link">
Service Details
</span>
</Link>
</li>
</ul>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item">
<Link href="#" className="nav_link">
<span className="text-link">
Portfolio
</span>
</Link>
<ul className="sub_menu">
<li className="menu-item nav-item">
<Link href="/portfolio-style-1" className="nav_link">
<span className="text-link">
Portfolio Style 1
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/portfolio-style-2" className="nav_link">
<span className="text-link">
Portfolio Style 2
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/portfolio-details" className="nav_link">
<span className="text-link">
Portfolio Details
</span>
</Link>
</li>
</ul>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown mennucolumn_two nav-item">
<Link href="/blog" className="nav_link">
<span className="text-link">
Blog
</span>
</Link>
<ul className="sub_menu">
<li className="menu-item menu-item-has-children dropdown nav-item">
<Link href="#" className="nav_link">
<span className="text-link">
Blog Grid
</span>
</Link>
<ul className="sub_menu">
<li className="menu-item nav-item">
<Link href="/blog" className="nav_link">
<span className="text-link">
Blog Default
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/blog-style-1" className="nav_link">
<span className="text-link">
Blog Style 1
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/blog-style-2" className="nav_link">
<span className="text-link">
Blog Style 2
</span>
</Link>
</li>
</ul>
</li>
<li className="menu-item menu-item-has-children dropdown nav-item">
<Link href="#" className="nav_link"><span className="text-link"> Blog
Details </span></Link>
<ul className="sub_menu">
<li className="menu-item nav-item">
<Link href="/blog-details" className="nav_link">
<span className="text-link">
No Sidebar
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/blog-details-left-sidebar" className="nav_link">
<span className="text-link">
Left Sidebar
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/blog-details-right-sidebar" className="nav_link">
<span className="text-link">
Right Sidebar
</span>
</Link>
</li>
</ul>
</li>
</ul>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item">
<Link href="/shop" className="nav_link">
<span className="text-link">
Shop
</span>
</Link>
<ul className="sub_menu">
<li className="menu-item nav-item">
<Link href="/shop" className="nav_link">
<span className="text-link">
Products
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/shop-details" className="nav_link">
<span className="text-link">
Product Details
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/my-account" className="nav_link">
<span className="text-link">
My account
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/cart" className="nav_link">
<span className="text-link">
Cart
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/checkout" className="nav_link">
<span className="text-link">
Checkout
</span>
</Link>
</li>
</ul>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item nav-item">
<Link href="/contact" className="nav_link">
<span className="text-link">
Contact
</span>
</Link>
</li>
</ul>
</>
)
}

128
components/layout/OptionalPanel.js Normal file
View File

@ -0,0 +1,128 @@
import Link from "next/link"
import { Autoplay, Navigation, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 2,
spaceBetween: 20,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop: true,
// Navigation
navigation: {
nextEl: '.owl-next',
prevEl: '.owl-prev',
},
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
}
}
export default function OptionalPanel({ isOptionalPanel, handleOptionalPanel }) {
return (
<>
<div className={`option_panel-popup ${isOptionalPanel ? "popup-visible" : ""}`}>
<div className="sdmenu_overlay" onClick={handleOptionalPanel} />
<div className="option_boxed scrollbarcolor">
<div className="close-option-pan" onClick={handleOptionalPanel}>
<i className="fi-rr-cross" />
</div>
<div className="option_content scrollbarcolor ">
<div className="log_bx">
<Link href="#" className="logo navbar-brand">
<img src="/assets/images/theme-logo.png" alt="Vankine" className="logo_default" />
</Link>
<div className="about_company"> Denounce with righteous indignation and dislike men who are beguiled
and demoralized by the charms pleasure moment so blinded desire that they cannot foresee the
pain and trouble. </div>
</div>
<div className="contnet_box">
<div className="post_contet_modal">
<h2 className="title_no_a_28"> Latest Portfolio</h2>
<div className="post_enable">
<Swiper {...swiperOptions} className="theme_carousel">
<SwiperSlide className="modal_post_grid">
<Link href="/blog-details">
<img src="/assets/images/blog/blog-9-min.png" className="main_img img-fluid" alt="img" />
<h2 className="tit_ho title_no_a_20">
Former insures only the marine perils
</h2>
</Link>
</SwiperSlide>
<SwiperSlide className="modal_post_grid">
<Link href="/blog-details">
<img src="/assets/images/blog/blog-8-min.png" className="main_img img-fluid" alt="img" />
<h2 className="tit_ho title_no_a_20">
Insurance covers risk of fire absence
</h2>
</Link>
</SwiperSlide>
<SwiperSlide className="modal_post_grid">
<Link href="/blog-details">
<img src="/assets/images/blog/blog-7-min.png" className="main_img img-fluid" alt="img" />
<h2 className="tit_ho title_no_a_20">Erving the interests of our clients
</h2>
</Link>
</SwiperSlide>
<SwiperSlide className="modal_post_grid">
<Link href="/blog-details">
<img src="/assets/images/blog/blog-6.png" className="main_img img-fluid" alt="img" />
<h2 className="tit_ho title_no_a_20">
Guide To Audio Visual With JavaScript GSA
</h2>
</Link>
</SwiperSlide>
<SwiperSlide className="modal_post_grid">
<Link href="/blog-details">
<img src="/assets/images/blog/blog-5.png" className="main_img img-fluid" alt="img" />
<h2 className="tit_ho title_no_a_20">
Building Web Layouts For Dual Foldable
Devices
</h2>
</Link>
</SwiperSlide>
<div className="owl-nav">
<button type="button" role="presentation" className="owl-prev">
<i className="fi-rs-arrow-small-left" />
</button>
<button type="button" role="presentation" className="owl-next">
<i className="fi-rs-arrow-small-right" />
</button>
</div>
</Swiper>
</div>
</div>
<h2 className="title_no_a_28"> Need Any Help? Or Looking For an Agent</h2>
<div className="contact_panel">
<div className="c_pan">
<Link href="tel:9806071234">
<i className="fi-rr-phone-call" /> 9806071234 </Link>
</div>
<div className="c_pan">
<Link href="mailto:sendmail@example.com">
<i className="fi-rr-envelope" /> sendmail@example.com </Link>
</div>
<div className="c_pan">
<a className="wk_hours">
<i className="fi-rr-time-check" /> Working Hours : <span> Sun-monday, 09am-5pm </span>
</a>
</div>
</div>
<div className="c_pan"> © {new Date().getFullYear()} Vankine. All Rights Reserved. </div>
</div>
</div>
</div>
</div>
</>
)
}

27
components/layout/SearchPopup.js Normal file
View File

@ -0,0 +1,27 @@
export default function SearchPopup({ isSearch, handleSearch, handleOptionalPanel }) {
return (
<>
<div className={`search-popup ${isSearch ? "popup-visible" : ""}`}>
<div className="close-search zoom-in-zoom-out" onClick={handleSearch}>
<i className="fa fa-times" />
</div>
<div className="popup-inner">
<div className="overlay-layer" />
<div className="search-form">
<fieldset>
<form role="search" method="get" action="#">
<input type="search" className="search" placeholder="Search..." name="s" title="Search" />
<button type="submit" className="sch_btn">
<i className="fi-rs-search" />
</button>
</form>
</fieldset>
</div>
</div>
</div>
</>
)
}

338
components/layout/Sidebar.js Normal file
View File

@ -0,0 +1,338 @@
import Link from "next/link"
import { useState } from "react"
export default function Sidebar() {
const [isActive, setIsActive] = useState({
status: false,
key: "",
})
const handleToggle = (key) => {
if (isActive.key === key) {
setIsActive({
status: false,
})
} else {
setIsActive({
status: true,
key,
})
}
}
return (
<>
<ul className="navbar_nav getmobilemenu">
<li className="menu-item nav-item menu-item-has-children dropdown mennucolumn_full-six">
<Link href="/" className="nav_link">
<span className="text-link"> Home </span>
</Link>
<ul className="sub_menu" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
<li className="menu-item nav-item vankine_menu_image">
<Link href="/" className="nav_link image_big_on_menu_two">
<span className="img-link">
<img src="/assets/images/demo-1-1-min-scaled.jpg" alt="icon" className="menu_img" />
</span>
<span className="text-link"> Home 1 </span>
</Link>
</li>
<li className="menu-item vankine_menu_image">
<Link href="/home-2" className="nav_link image_big_on_menu_two">
<span className="img-link">
<img src="/assets/images/demo-1-2-min-scaled.jpg" alt="icon" className="menu_img" />
</span>
<span className="text-link"> Home 2 </span>
</Link>
</li>
<li className="menu-item nav-item vankine_menu_image">
<Link href="/home-3" className="nav_link image_big_on_menu_two">
<span className="img-link">
<img src="/assets/images/demo-1-3-min-scaled.jpg" alt="icon" className="menu_img" />
</span>
<span className="text-link"> Home 3 </span>
</Link>
</li>
<li className="menu-item nav-item vankine_menu_image">
<Link href="/home-4" className="nav_link image_big_on_menu_two">
<span className="img-link">
<img src="/assets/images/demo-1-4-min-scaled.jpg" alt="icon" className="menu_img" />
</span>
<span className="text-link"> Home 4 </span>
</Link>
</li>
<li className="menu-item nav-item vankine_menu_image">
<Link href="/home-5" className="nav_link image_big_on_menu_two">
<span className="img-link">
<img src="/assets/images/demo-1-5-min-scaled.jpg" alt="icon" className="menu_img" />
</span>
<span className="text-link"> Home 5 </span>
</Link>
</li>
<li className="menu-item nav-item vankine_menu_image">
<Link href="/home-6" className="nav_link image_big_on_menu_two">
<span className="img-link">
<img src="/assets/images/demo-1-6-min-scaled.jpg" alt="icon" className="menu_img" />
</span>
<span className="text-link"> Home 6 </span>
</Link>
</li>
</ul>
<div className="dropdown-btn" onClick={() => handleToggle(1)}><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item">
<Link href="#" className="nav_link">
<span className="text-link">
Pages
</span>
</Link>
<ul className="sub_menu" style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
<li className="menu-item nav-item">
<Link href="/about-us" className="nav_link">
<span className="text-link"> About
Us
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/faqs" className="nav_link">
<span className="text-link">
Faq’s
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/pricing" className="nav_link">
<span className="text-link">
Pricing
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/team" className="nav_link">
<span className="text-link">
Team
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/team-detail" className="nav_link">
<span className="text-link"> Team
Detail
</span>
</Link>
</li>
</ul>
<div className="dropdown-btn" onClick={() => handleToggle(2)}><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown nav-item">
<Link href="#" className="nav_link">
<span className="text-link">
Services
</span>
</Link>
<ul className="sub_menu" style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
<li className="menu-item nav-item">
<Link href="/service" className="nav_link">
<span className="text-link">
Service Style 1
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/service-style-2" className="nav_link">
<span className="text-link">
Service Style 2
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/service-style-3" className="nav_link">
<span className="text-link">
Service Style 3
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/service-style-4" className="nav_link">
<span className="text-link">
Service Style 4
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/service-style-5" className="nav_link">
<span className="text-link">
Service Style 5
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/service-style-6" className="nav_link">
<span className="text-link">
Service Style 6
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/service-details" className="nav_link">
<span className="text-link">
Service Details
</span>
</Link>
</li>
</ul>
<div className="dropdown-btn" onClick={() => handleToggle(3)}><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item">
<Link href="#" className="nav_link">
<span className="text-link">
Portfolio
</span>
</Link>
<ul className="sub_menu" style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
<li className="menu-item nav-item">
<Link href="/portfolio-style-1" className="nav_link">
<span className="text-link">
Portfolio Style 1
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/portfolio-style-2" className="nav_link">
<span className="text-link">
Portfolio Style 2
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/portfolio-details" className="nav_link">
<span className="text-link">
Portfolio Details
</span>
</Link>
</li>
</ul>
<div className="dropdown-btn" onClick={() => handleToggle(4)}><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown mennucolumn_two nav-item">
<Link href="/blog" className="nav_link">
<span className="text-link">
Blog
</span>
</Link>
<ul className="sub_menu" style={{ display: `${isActive.key == 5 ? "block" : "none"}` }}>
<li className="menu-item menu-item-has-children dropdown nav-item">
<Link href="#" className="nav_link">
<span className="text-link">
Blog Grid
</span>
</Link>
<ul className="sub_menu">
<li className="menu-item nav-item">
<Link href="/blog" className="nav_link">
<span className="text-link">
Blog Default
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/blog-style-1" className="nav_link">
<span className="text-link">
Blog Style 1
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/blog-style-2" className="nav_link">
<span className="text-link">
Blog Style 2
</span>
</Link>
</li>
</ul>
</li>
<li className="menu-item menu-item-has-children dropdown nav-item">
<Link href="#" className="nav_link"><span className="text-link"> Blog
Details </span></Link>
<ul className="sub_menu">
<li className="menu-item nav-item">
<Link href="/blog-details" className="nav_link">
<span className="text-link">
No Sidebar
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/blog-details-left-sidebar" className="nav_link">
<span className="text-link">
Left Sidebar
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/blog-details-right-sidebar" className="nav_link">
<span className="text-link">
Right Sidebar
</span>
</Link>
</li>
</ul>
</li>
</ul>
<div className="dropdown-btn" onClick={() => handleToggle(5)}><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item">
<Link href="/shop" className="nav_link">
<span className="text-link">
Shop
</span>
</Link>
<ul className="sub_menu" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
<li className="menu-item nav-item">
<Link href="/shop" className="nav_link">
<span className="text-link">
Products
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/shop-details" className="nav_link">
<span className="text-link">
Product Details
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/my-account" className="nav_link">
<span className="text-link">
My account
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/cart" className="nav_link">
<span className="text-link">
Cart
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/checkout" className="nav_link">
<span className="text-link">
Checkout
</span>
</Link>
</li>
</ul>
<div className="dropdown-btn" onClick={() => handleToggle(1)}><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item nav-item">
<Link href="/contact" className="nav_link">
<span className="text-link">
Contact
</span>
</Link>
</li>
</ul>
</>
)
}

60
components/layout/StickyHeader.js Normal file
View File

@ -0,0 +1,60 @@
import Link from "next/link"
import NavbarNav from "./NavbarNav"
export default function StickyHeader({ scroll, handleSearch, handleOptionalPanel, handleMobileMenu }) {
return (
<>
<div className={`sticky_header_area sticky_header_content ${scroll ? "fixed-header" : ""}`}>
<header className="header-area header-style-1 htype_three">
<div className="main_header_content default_header">
<div className="large-container">
<div className="row align-items-center">
<div className="col-xl-2 col-lg-12 col-md-5 col-sm-5 col-xs-5">
<div className="logobox">
<Link href="/" className="logo navbar-brand">
<img src="/assets/images/theme-logo.png" alt="Vankine" className="logo_default" />
</Link>
</div>
</div>
<div className="col-xl-8 col-lg-9 col-md-0 col-sm-0 col-xs-0 column_menu">
<div className="navbar_content d-flex align-items-center">
<NavbarNav />
<div className="search search-toggler" onClick={handleSearch}>
<i className="fi-rs-search" />
</div>
</div>
</div>
<div className="col-xl-2 col-lg-3 col-md-7 col-sm-7 col-xs-7 nav_tog_column">
<div className="d-flex right_content align-items-center">
{/*menu icon*/}
<div className="navbar_togglers hamburger_menu" onClick={handleMobileMenu}>
<span className="line" />
<span className="line" />
<span className="line" />
</div>
{/*menu icon*/}
<div className="button">
<Link href="#" className="theme_btn">
Get A Quote
<svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
<div className="contact-toggler" onClick={handleOptionalPanel}>
<svg width={18} height={19} viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.75 3.25C0.75 2.65326 0.987053 2.08097 1.40901 1.65901C1.83097 1.23705 2.40326 1 3 1H5.25C5.84674 1 6.41903 1.23705 6.84099 1.65901C7.26295 2.08097 7.5 2.65326 7.5 3.25V5.5C7.5 6.09674 7.26295 6.66903 6.84099 7.09099C6.41903 7.51295 5.84674 7.75 5.25 7.75H3C2.40326 7.75 1.83097 7.51295 1.40901 7.09099C0.987053 6.66903 0.75 6.09674 0.75 5.5V3.25ZM0.75 13C0.75 12.4033 0.987053 11.831 1.40901 11.409C1.83097 10.9871 2.40326 10.75 3 10.75H5.25C5.84674 10.75 6.41903 10.9871 6.84099 11.409C7.26295 11.831 7.5 12.4033 7.5 13V15.25C7.5 15.8467 7.26295 16.419 6.84099 16.841C6.41903 17.2629 5.84674 17.5 5.25 17.5H3C2.40326 17.5 1.83097 17.2629 1.40901 16.841C0.987053 16.419 0.75 15.8467 0.75 15.25V13ZM10.5 3.25C10.5 2.65326 10.7371 2.08097 11.159 1.65901C11.581 1.23705 12.1533 1 12.75 1H15C15.5967 1 16.169 1.23705 16.591 1.65901C17.0129 2.08097 17.25 2.65326 17.25 3.25V5.5C17.25 6.09674 17.0129 6.66903 16.591 7.09099C16.169 7.51295 15.5967 7.75 15 7.75H12.75C12.1533 7.75 11.581 7.51295 11.159 7.09099C10.7371 6.66903 10.5 6.09674 10.5 5.5V3.25ZM10.5 13C10.5 12.4033 10.7371 11.831 11.159 11.409C11.581 10.9871 12.1533 10.75 12.75 10.75H15C15.5967 10.75 16.169 10.9871 16.591 11.409C17.0129 11.831 17.25 12.4033 17.25 13V15.25C17.25 15.8467 17.0129 16.419 16.591 16.841C16.169 17.2629 15.5967 17.5 15 17.5H12.75C12.1533 17.5 11.581 17.2629 11.159 16.841C10.7371 16.419 10.5 15.8467 10.5 15.25V13Z" stroke="#0F3567" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
</>
)
}

412
components/layout/footer/Footer1.js Normal file
View File

@ -0,0 +1,412 @@
import Link from "next/link"
export default function Footer1({ }) {
return (
<>
<footer className="footer style_one">
<div className="patter_top">
<img src="/assets/images/shape/wave-pattern-2.png" className="img-fluid" alt="img" />
</div>
{/*-============spacing==========-*/}
<div className="pd_top_100" />
{/*-============spacing==========-*/}
{/*footer content top*/}
<section className="container">
<div className="call_to_action style_one">
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title">
Find an Insurance Agent or Start
Tracking your Claims
</h2>
</div>
</div>
<div className="theme_btn_all">
<Link href="#" className="theme_btn">
Track Your Claim <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
<div className="d-flex align-items-center contact_header_one">
<div className="icon_s">
<i className=" fi-rr-headphones" />
</div>
<div className="content">
<h6 className="tite">Need Help?</h6>
<div className="title_20"><Link href="tel:+000(123)45688">+000(123)456 88</Link></div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="mr_bottom_80" />
{/*-============spacing==========-*/}
</section>
{/*footer content top*/}
<section className="md_content position-relative z_99">
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-6 col-sm-12 col-xs-12 pd_right_70">
<div className="footer_widgets_box pd_bottom_30">
<div className="logo_box">
<Link href="#" className="logo navbar-brand">
<img src="/assets/images/footer-logo-blue.png" alt="Vankine" className="logo_default" />
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_35" />
{/*-============spacing==========-*/}
<div className="position-relative color_white">
Sed ut perspiciatis unde omnis iste natus errors voluptatem accusantium
doloremque laudantium totam
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
<div className="newsteller_simple button_style_one">
<div className="input_group">
<form method="post">
<div className="mc4wp-form-fields">
<input type="email" name="EMAIL" placeholder="Your email address" required />
<input type="submit" value="Sign up" />
</div>
</form>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
<div className="social-icons">
<ul>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-5 col-md-6 col-sm-12 col-xs-12">
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title">
<h2 className="title color_white"> Services </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<div className="position-relative">
<ul className="list_box list">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
House Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Medical Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Car Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Business Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Travel Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Fire Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Marrige Insurance
</Link>
</div>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title">
<h2 className="title color_white"> Other Pages </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<div className="position-relative">
<ul className="list_box list">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
My Account
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Need A Career?
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
News &amp; Blog
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Payment Way
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Team Member
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
About Us
</Link>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 col-xs-12">
<div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title">
<h2 className="title color_white"> Photo Gallery </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<div className="g_box d-flex">
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-1-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1">
</circle>
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-2-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1">
</circle>
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-3-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1">
</circle>
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-4-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1">
</circle>
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-5-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1">
</circle>
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-6-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1">
</circle>
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-7-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1">
</circle>
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-8-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1">
</circle>
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-9-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1">
</circle>
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
</section>
<section className="mottom_content position-relative z_99">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-6 col-sm-12">
<div className="position-relative">
<ul className="list_box linline">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<img src="/assets/images/shield.svg" className="img-fluid" alt="img" />
</div>
<Link className="links color_white" href="#">
Copyright {new Date().getFullYear()}, Vankine. All Rights Reserved
</Link>
</div>
</li>
</ul>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 text-md-end">
<div className="position-relative">
<ul className="list_box linline">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className=" fi-rr-clock" />
</div>
<Link className="links color_white" href="#">
Working Hours : Sun-monday, 09am-5pm
</Link>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
<div className="patter_bottom">
<img src="/assets/images/shape/wave-pattern-1.png" className="img-fluid" alt="img" />
</div>
</footer>
</>
)
}

321
components/layout/footer/Footer2.js Normal file
View File

@ -0,0 +1,321 @@
import Link from "next/link"
export default function Footer2({ }) {
return (
<>
<footer className="footer style_one style_two">
<div className="patter_top">
<img src="/assets/images/shape/wave-pattern-2.png" className="img-fluid" alt="img" />
</div>
{/*-============spacing==========-*/}
<div className="pd_top_100" />
{/*-============spacing==========-*/}
<section className="md_content position-relative z_99">
<div className="auto-container">
<div className="row">
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12 pd_right_70">
<div className="footer_widgets_box pd_bottom_30">
<div className="logo_box">
<Link href="#" className="logo navbar-brand">
<img src="/assets/images/footer-logo-green.png" alt="Vankine" className="logo_default" />
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_35" />
{/*-============spacing==========-*/}
<div className="position-relative color_white">
Sed ut perspiciatis omnis laudantium natus errors voluptatem accusantium
doloremque laudantium totam
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
<div className="fwidget_title">
<h2 className="title color_white"> Follow Us </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<div className="social-icons">
<ul>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-5 col-md-6 col-sm-6 col-xs-12">
<div className="row">
<div className="col-lg-6">
<div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title">
<h2 className="title color_white"> Services </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<div className="position-relative">
<ul className="list_box list">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
House Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Medical Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Car Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Business Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Travel Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Fire Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Marrige Insurance
</Link>
</div>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title">
<h2 className="title color_white"> Other Pages </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<div className="position-relative">
<ul className="list_box list">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
My Account
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Need A Career?
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
News &amp; Blog
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Payment Way
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Team Member
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
About Us
</Link>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title">
<h2 className="title color_white"> Newsletter </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<div className="bottom_content">
<div className="color_white position_p_relative">
Sed ut perspiciatis unde omniste natus errors volupta accus
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
<div className="newsteller_simple button_style_one">
<div className="input_group">
<form method="post">
<div className="mc4wp-form-fields">
<input type="email" name="EMAIL" placeholder="Your email address" required />
<input type="submit" value="Sign up" />
</div>
</form>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<div className="d-flex align-items-center contact_header_one">
<div className="icon_s">
<i className=" fi-rr-headphones" /></div>
<div className="content">
<h6 className="tite color_white">Need Help?</h6>
<div className="title_20"><Link href="tel:+000(123)45688" className="color_white">+000(123)456 88</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
</section>
<section className="mottom_content position-relative z_99">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-6 col-sm-12">
<div className="position-relative">
<ul className="list_box linline">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<img src="/assets/images/shield.svg" className="img-fluid" alt="img" />
</div>
<Link className="links color_white" href="#">
Copyright {new Date().getFullYear()}, Vankine. All Rights Reserved
</Link>
</div>
</li>
</ul>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 text-md-end">
<div className="position-relative">
<ul className="list_box color_one linline">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className=" fi-rr-clock" />
</div>
<Link className="links color_white" href="#">
Working Hours : Sun-monday, 09am-5pm
</Link>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
<div className="patter_bottom">
<img src="/assets/images/shape/wave-pattern-1.png" className="img-fluid" alt="img" />
</div>
</footer>
</>
)
}

275
components/layout/footer/Footer3.js Normal file
View File

@ -0,0 +1,275 @@
import Link from "next/link"
export default function Footer3({ }) {
return (
<>
<footer className="footer style_one style_three bg_op_4" style={{ backgroundImage: 'url(assets/images/Map.png)' }}>
{/*-============spacing==========-*/}
<div className="pd_top_290" />
{/*-============spacing==========-*/}
{/*footer content top*/}
<section className="md_content position-relative z_99">
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12 pd_right_60">
<div className="footer_widgets_box pd_bottom_30">
<div className="logo_box">
<Link href="#" className="logo navbar-brand">
<img src="/assets/images/footer-logo-three.png" alt="Vankine" className="logo_default" />
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_35" />
{/*-============spacing==========-*/}
<div className="position-relative color_white">
Sed ut perspiciatis unde omnis iste natus errors voluptatem accusantium
doloremque laudantium totam
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
<div className="newsteller_simple button_style_one">
<div className="input_group">
<form method="post">
<div className="mc4wp-form-fields">
<input type="email" name="EMAIL" placeholder="Your email address" required />
<input type="submit" value="Sign up" />
</div>
</form>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
<div className="social-icons">
<ul>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12 m-auto">
<div className="row">
<div className="col-lg-8 m-auto">
<div className="footer_widgets_box mid_border pd_bottom_30 pd_top_10">
<div className="fwidget_title">
<h2 className="title color_white"> Services </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_35" />
{/*-============spacing==========-*/}
</div>
<div className="position-relative">
<ul className="list_box list">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
House Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Medical Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Car Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Business Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Travel Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Fire Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Marrige Insurance
</Link>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="footer_widgets_box pd_bottom_30 pd_top_10">
<div className="fwidget_title">
<h2 className="title color_white"> Recent News </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_35" />
{/*-============spacing==========-*/}
</div>
<div className="post_foo_box">
<div className="foo_post_content">
<Link className="image_box trans" href="/blog">
<img className="img-fluid trans" src="/assets/images/blog/blog-9-min.png" alt="blog" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<div className="content">
<h4 className="title_18">
<Link href="/blog" className="color_white">
Former insures only the marine perils
</Link>
</h4>
<p className="color_white"> Bradley R Grady </p>
</div>
</div>
<div className="foo_post_content">
<Link className="image_box trans" href="/blog">
<img className="img-fluid trans" src="/assets/images/blog/blog-8-min.png" alt="blog" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<div className="content">
<h4 className="title_18">
<Link href="/blog" className="color_white">
Insurance covers risk of fire absence
</Link>
</h4>
<p className="color_white"> Jason P Laforce </p>
</div>
</div>
<div className="foo_post_content">
<Link className="image_box trans" href="/blog">
<img className="img-fluid trans" src="/assets/images/blog/blog-7-min.png" alt="blog" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<div className="content">
<h4 className="title_18">
<Link href="/blog" className="color_white">
Erving the interests of our clients
</Link>
</h4>
<p className="color_white"> Bradley R Grady </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
</section>
<section className="mottom_content position-relative z_99">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-6 col-sm-12">
<div className="position-relative">
<ul className="list_box linline">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<img src="/assets/images/shield.svg" className="img-fluid" alt="img" />
</div>
<Link className="links color_white" href="#">
Copyright {new Date().getFullYear()}, Vankine. All Rights Reserved
</Link>
</div>
</li>
</ul>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 text-md-end">
<div className="position-relative">
<ul className="list_box linline">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className=" fi-rr-clock" />
</div>
<Link className="links color_white" href="#">
Working Hours : Sun-monday, 09am-5pm
</Link>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
</footer>
</>
)
}

135
components/layout/footer/Footer4.js Normal file
View File

@ -0,0 +1,135 @@
import Link from "next/link"
export default function Footer4({ }) {
return (
<>
<footer className="footer style_four">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<section className="container">
<div className="call_to_action style_one">
<div className="section_title type_one">
<div className="title_whole">
<h4 className="sm_title"> Contact Us</h4>
<h2 className="title">
Find an Insurance Agent or Start
Tracking your Claims
</h2>
</div>
</div>
<div className="theme_btn_all">
<Link href="#" className="theme_btn">
Track Your Claim <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
<div className="d-flex align-items-center contact_header_one">
<div className="icon_s">
<i className=" fi-rr-headphones" />
</div>
<div className="content">
<h6 className="tite">Need Help?</h6>
<div className="title_20"><Link href="tel:+000(123)45688">+000(123)456 88</Link></div>
</div>
</div>
</div>
</section>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
<section className="mid_content">
<div className="container">
<div className="row">
<div className="col-lg-12">
<ul className="list_box text-center linline">
<li>
<div className="d-flex align-items-center">
<div className="icon trans" />
<Link className="links color_white" href="#">
Home </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans" />
<Link className="links color_white" href="#">
About </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans" />
<Link className="links color_white" href="#">
Services </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans" />
<Link className="links color_white" href="#">
Reviews </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans" />
<Link className="links color_white" href="#">
Need a Career? </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans" />
<Link className="links color_white" href="#">
News &amp; Blog </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans" />
<Link className="links color_white" href="#">
Support </Link>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
<section className="container">
<div className="bottom_content">
<div className="row">
<div className="col-lg-5">
<div className="logo_box">
<Link href="#" className="logo navbar-brand">
<img src="/assets/images/footer-logo-three.png" alt="Vankine" className="logo_default" />
</Link>
</div>
</div>
<div className="col-lg-7 text-md-end">
<div className="position-relative color_white">
Copyright {new Date().getFullYear()}, Vankine. All Rights Reserved</div>
</div>
</div>
</div>
</section>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
<div className="pattern_1">
<img src="/assets/images/dot-round-2.png" className="img-fluid" alt="img" />
</div>
<div className="pattern_2">
<img src="/assets/images/pattern-3.png" className="img-fluid" alt="img" />
</div>
<div className="pattern_3">
<img src="/assets/images/h-6-shap1-2.png" className="img-fluid" alt="img" />
</div>
</footer>
</>
)
}

374
components/layout/footer/Footer5.js Normal file
View File

@ -0,0 +1,374 @@
import Link from "next/link"
export default function Footer5({ }) {
return (
<>
<footer className="footer style_one style_five">
<section className="md_content position-relative z_99">
{/*-============spacing==========-*/}
<div className="pd_top_160" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="footer_widgets_box pd_bottom_30">
<div className="logo_box">
<Link href="#" className="logo navbar-brand">
<img src="/assets/images/footer-logo-blue.png" alt="Vankine" className="logo_default" />
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_35" />
{/*-============spacing==========-*/}
<div className="position-relative color_white">
Sed ut perspiciatis unde omnis iste natus errors voluptatem accusantium
doloremque laudantium totam
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
<div className="newsteller_simple button_style_one">
<div className="input_group">
<form method="post">
<div className="mc4wp-form-fields">
<input type="email" name="EMAIL" placeholder="Your email address" required />
<input type="submit" value="Sign up" />
</div>
</form>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
<div className="social-icons">
<ul>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-3 pd_left_40">
<div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title">
<h2 className="title color_white"> Services </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<div className="position-relative">
<ul className="list_box list">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
House Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Medical Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Car Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Business Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Travel Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Fire Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Marrige Insurance
</Link>
</div>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-3">
<div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title">
<h2 className="title color_white"> Other Pages </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<section className="post_foo_box">
<div className="foo_post_content">
<Link className="image_box trans" href="/blog">
<img className="img-fluid trans" src="/assets/images/blog/blog-9-min.png" alt="blog" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<div className="content">
<h4 className="title_18">
<Link href="/blog" className="color_white">
Former insures only the marine perils
</Link>
</h4>
<p className="color_white"> Bradley R Grady </p>
</div>
</div>
<div className="foo_post_content">
<Link className="image_box trans" href="/blog">
<img className="img-fluid trans" src="/assets/images/blog/blog-8-min.png" alt="blog" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<div className="content">
<h4 className="title_18">
<Link href="/blog" className="color_white">
Insurance covers risk of fire absence
</Link>
</h4>
<p className="color_white"> Jason P Laforce </p>
</div>
</div>
<div className="foo_post_content">
<Link className="image_box trans" href="/blog">
<img className="img-fluid trans" src="/assets/images/blog/blog-7-min.png" alt="blog" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<div className="content">
<h4 className="title_18">
<Link href="/blog" className="color_white">
Erving the interests of our clients
</Link>
</h4>
<p className="color_white"> Bradley R Grady </p>
</div>
</div>
</section>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title">
<h2 className="title color_white"> Photo Gallery </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<div className="g_box d-flex">
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-1-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-2-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-3-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-4-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-5-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-6-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-7-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-8-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-9-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</section>
<section className="mottom_content position-relative z_99">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-6 col-sm-12">
<div className="position-relative">
<ul className="list_box linline">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<img src="/assets/images/shield.svg" className="img-fluid" alt="img" />
</div>
<Link className="links color_white" href="#">
Copyright {new Date().getFullYear()}, Vankine. All Rights Reserved
</Link>
</div>
</li>
</ul>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 text-md-end">
<div className="position-relative">
<ul className="list_box linline">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right" />
</div>
<Link className="links color_white" href="#">
About
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right" />
</div>
<Link className="links color_white" href="#">
Services
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right" />
</div>
<Link className="links color_white" href="#">
Faqs
</Link>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</footer>
</>
)
}

353
components/layout/footer/Footer6.js Normal file
View File

@ -0,0 +1,353 @@
import Link from "next/link"
export default function Footer6({ }) {
return (
<>
<footer className="footer style_six">
<div className="pattern_bg">
<img src="/assets/images/line-st-2.png" className="img-fluid" alt="pattern" />
</div>
<section className="top_content">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12 pd_right_70">
<div className="footer_widgets_box pd_bottom_30">
<div className="logo_box">
<Link href="#" className="logo navbar-brand">
<img src="/assets/images/footer-logo-blue.png" alt="Vankine" className="logo_default" />
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_35" />
{/*-============spacing==========-*/}
<div className="position-relative">
Sed ut perspiciatis unde omnis iste natus errors voluptatem accusantium
doloremque laudantium totam
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
<div className="newsteller_simple style_two">
<div className="input_group">
<form method="post">
<div className="mc4wp-form-fields">
<input type="email" name="EMAIL" placeholder="Your email address" required />
<input type="submit" value="Sign up" />
</div>
</form>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
<div className="social-icons">
<ul>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link>
</li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-5 col-md-6 col-sm-6 col-xs-12">
<div className="row">
<div className="col-lg-6">
<div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title">
<h2 className="title"> Services </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<div className="position-relative">
<ul className="list_box list">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
House Insurance </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
Medical Insurance </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
Car Insurance </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
Business Insurance </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
Travel Insurance </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
Fire Insurance </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
Marrige Insurance </Link>
</div>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title">
<h2 className="title"> Other Pages </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<div className="position-relative">
<ul className="list_box list">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
My Account
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
Need A Career?
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
News &amp; Blog
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
Payment Way
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
Team Member
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
Products </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></div>
<Link className="links" href="#">
About Us </Link>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title">
<h2 className="title"> Photo Gallery </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
<div className="g_box d-flex">
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-1-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-2-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-3-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-4-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-5-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-6-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-7-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-8-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
<Link className="trans" href="#">
<img src="/assets/images/portfolio/project-9-min.png" alt="img" className="img-fluid" />
<svg className="trans" width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</section>
<section className="bottom_content">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-6 col-sm-12">
<div className="position-relative">
<ul className="list_box linline">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<img src="/assets/images/shield.svg" className="img-fluid" alt="img" />
</div>
<Link className="links color_white" href="#">
Copyright {new Date().getFullYear()}, Vankine. All Rights Reserved
</Link>
</div>
</li>
</ul>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 text-md-end">
<div className="position-relative">
<ul className="list_box linline">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className=" fi-rr-clock" />
</div>
<Link className="links color_white" href="#">
Working Hours : Sun-monday, 09am-5pm
</Link>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</footer>
</>
)
}

138
components/layout/header/Header1.js Normal file
View File

@ -0,0 +1,138 @@
import Link from "next/link"
import NavbarNav from "../NavbarNav"
export default function Header1({ handleSearch, handleOptionalPanel, handleMobileMenu }) {
return (
<>
<div className="header_area " id="header_contents">
<header className="header-area header-style-1 htype_one">
<div className="top_bar">
<div className="large-container">
<div className="row align-items-center">
<div className="col-xl-2 col-lg-0 col-md-0 col-sm-0 col-xs-0">
</div>
<div className="col-xl-7 col-lg-9 col-md-12 col-sm-12 col-xs-12">
<div className="top_md d-flex align-items-center">
<div className="text workings">
<i aria-hidden="false" className="far fa-clock" /> Working Hours : <span>
Sun-monday, 09am-5pm </span> </div>
<div className="call">
<Link href="tel:+000(123)456989">
<small>Call : </small>
+000(123)456989</Link>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-xs-12">
<div className="top_rt d-flex align-items-center">
<div className="language">
<a className="language-dropdown-active">
English <i className="fi-rs-angle-small-down" />
</a>
<ul className="language-dropdown">
<li>
<Link href="#">
Français
</Link>
</li>
<li>
<Link href="#">
Deutsch
</Link>
</li>
<li>
<Link href="#">
Pусский
</Link>
</li>
</ul>
</div>
<div className="social-icons">
<ul className="d-inline-block">
<li>
<Link className="m_icon" href="#">
<i className="fab fa-facebook-f" />
</Link>
</li>
<li>
<Link className="m_icon" href="#">
<i className="fab fa-twitter" />
</Link>
</li>
<li>
<Link className="m_icon" href="#">
<i className="fab fa-skype" />
</Link>
</li>
<li>
<Link className="m_icon" href="#">
<i className="fab fa-telegram" />
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="main_header_content default_header">
<div className="large-container">
<div className="row align-items-center">
<div className="col-xl-2 col-lg-12 col-md-5 col-sm-5 col-xs-5">
<div className="logo_box">
{/*logo-shape*/}
<svg width={286} height={120} viewBox="0 0 286 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 15.1694C0 10.2921 3.885 6.30231 8.76058 6.17256L234.506 0.165147C238.242 0.0657277 241.65 2.2855 243.07 5.74252L284.899 107.581C287.331 113.503 282.976 120 276.574 120H9C4.02943 120 0 115.971 0 111V15.1694Z" fill="var(--color-set-one-1)">
</path>
</svg>
{/*logo-shape*/}
{/*logo*/}
<Link href="/" className="logo navbar-brand">
<img src="/assets/images/logo-white.svg" alt="Vankine" className="logo_default" />
</Link>
{/*logo*/}
</div>
</div>
<div className="col-xl-8 col-lg-9 col-md-0 col-sm-0 col-xs-0 column_menu">
<div className="navbar_content d-flex align-items-center">
<NavbarNav />
<div className="search search-toggler" onClick={handleSearch}>
<i className="fi-rs-search" />
</div>
</div>
</div>
<div className="col-xl-2 col-lg-3 col-md-7 col-sm-7 col-xs-7 nav_tog_column">
<div className="d-flex right_content align-items-center">
{/*menu icon*/}
<div className="navbar_togglers hamburger_menu" onClick={handleMobileMenu}>
<span className="line" />
<span className="line" />
<span className="line" />
</div>
{/*menu icon*/}
<div className="button">
<Link href="#" className="theme_btn">
Get A Quote
<svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
<div className="contact-toggler" onClick={handleOptionalPanel}>
<svg width={18} height={19} viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.75 3.25C0.75 2.65326 0.987053 2.08097 1.40901 1.65901C1.83097 1.23705 2.40326 1 3 1H5.25C5.84674 1 6.41903 1.23705 6.84099 1.65901C7.26295 2.08097 7.5 2.65326 7.5 3.25V5.5C7.5 6.09674 7.26295 6.66903 6.84099 7.09099C6.41903 7.51295 5.84674 7.75 5.25 7.75H3C2.40326 7.75 1.83097 7.51295 1.40901 7.09099C0.987053 6.66903 0.75 6.09674 0.75 5.5V3.25ZM0.75 13C0.75 12.4033 0.987053 11.831 1.40901 11.409C1.83097 10.9871 2.40326 10.75 3 10.75H5.25C5.84674 10.75 6.41903 10.9871 6.84099 11.409C7.26295 11.831 7.5 12.4033 7.5 13V15.25C7.5 15.8467 7.26295 16.419 6.84099 16.841C6.41903 17.2629 5.84674 17.5 5.25 17.5H3C2.40326 17.5 1.83097 17.2629 1.40901 16.841C0.987053 16.419 0.75 15.8467 0.75 15.25V13ZM10.5 3.25C10.5 2.65326 10.7371 2.08097 11.159 1.65901C11.581 1.23705 12.1533 1 12.75 1H15C15.5967 1 16.169 1.23705 16.591 1.65901C17.0129 2.08097 17.25 2.65326 17.25 3.25V5.5C17.25 6.09674 17.0129 6.66903 16.591 7.09099C16.169 7.51295 15.5967 7.75 15 7.75H12.75C12.1533 7.75 11.581 7.51295 11.159 7.09099C10.7371 6.66903 10.5 6.09674 10.5 5.5V3.25ZM10.5 13C10.5 12.4033 10.7371 11.831 11.159 11.409C11.581 10.9871 12.1533 10.75 12.75 10.75H15C15.5967 10.75 16.169 10.9871 16.591 11.409C17.0129 11.831 17.25 12.4033 17.25 13V15.25C17.25 15.8467 17.0129 16.419 16.591 16.841C16.169 17.2629 15.5967 17.5 15 17.5H12.75C12.1533 17.5 11.581 17.2629 11.159 16.841C10.7371 16.419 10.5 15.8467 10.5 15.25V13Z" stroke="#0F3567" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
</>
)
}

130
components/layout/header/Header2.js Normal file
View File

@ -0,0 +1,130 @@
import Link from "next/link"
import NavbarNav from "../NavbarNav"
export default function Header2({ handleSearch, handleOptionalPanel, handleMobileMenu }) {
return (
<>
<div className="header_area " id="header_contents">
<header className="header-area header-style-1 htype_two">
<div className="top_bar">
<div className="large-container">
<div className="row align-items-center">
<div className="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-xs-12">
<div className="top_md d-flex align-items-center">
<div className="text workings">
<i aria-hidden="false" className="far fa-clock" /> Working Hours : <span>
Sun-monday, 09am-5pm </span> </div>
<div className="call">
<Link href="tel:+000(123)456989">
<small>Call : </small>
+000(123)456989</Link>
</div>
<div className="mail">
<Link href="mailto:example@gmail.com">
<small>Mail : </small>
example@gmail.com</Link>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-xs-12">
<div className="top_rt d-flex align-items-center">
<div className="language">
<a className="language-dropdown-active">
English <i className="fi-rs-angle-small-down" />
</a>
<ul className="language-dropdown">
<li>
<Link href="#">
Français
</Link>
</li>
<li>
<Link href="#">
Deutsch
</Link>
</li>
<li>
<Link href="#">
Pусский
</Link>
</li>
</ul>
</div>
<div className="social-icons">
<ul className="d-inline-block">
<li>
<Link className="m_icon" href="#">
<i className="fab fa-facebook-f" />
</Link>
</li>
<li>
<Link className="m_icon" href="#">
<i className="fab fa-twitter" />
</Link>
</li>
<li>
<Link className="m_icon" href="#">
<i className="fab fa-skype" />
</Link>
</li>
<li>
<Link className="m_icon" href="#">
<i className="fab fa-telegram" />
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="main_header_content default_header">
<div className="large-container">
<div className="row align-items-center">
<div className="col-xl-2 col-lg-12 col-md-5 col-sm-5 col-xs-5">
<div className="logobox">
<Link href="/" className="logo navbar-brand">
<img src="/assets/images/Logo-green.png" alt="Vankine" className="logo_default" />
</Link>
</div>
</div>
<div className="col-xl-8 col-lg-9 col-md-0 col-sm-0 col-xs-0 column_menu">
<div className="navbar_content d-flex align-items-center">
<NavbarNav />
<div className="search search-toggler" onClick={handleSearch}>
<i className="fi-rs-search" />
</div>
</div>
</div>
<div className="col-xl-2 col-lg-3 col-md-7 col-sm-7 col-xs-7 nav_tog_column">
<div className="d-flex right_content align-items-center">
<div className="navbar_togglers hamburger_menu" onClick={handleMobileMenu}>
<span className="line" />
<span className="line" />
<span className="line" />
</div>
<div className="button">
<Link href="#" className="theme_btn">
Get A Quote
<svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
<div className="contact-toggler" onClick={handleOptionalPanel}>
<svg width={18} height={19} viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.75 3.25C0.75 2.65326 0.987053 2.08097 1.40901 1.65901C1.83097 1.23705 2.40326 1 3 1H5.25C5.84674 1 6.41903 1.23705 6.84099 1.65901C7.26295 2.08097 7.5 2.65326 7.5 3.25V5.5C7.5 6.09674 7.26295 6.66903 6.84099 7.09099C6.41903 7.51295 5.84674 7.75 5.25 7.75H3C2.40326 7.75 1.83097 7.51295 1.40901 7.09099C0.987053 6.66903 0.75 6.09674 0.75 5.5V3.25ZM0.75 13C0.75 12.4033 0.987053 11.831 1.40901 11.409C1.83097 10.9871 2.40326 10.75 3 10.75H5.25C5.84674 10.75 6.41903 10.9871 6.84099 11.409C7.26295 11.831 7.5 12.4033 7.5 13V15.25C7.5 15.8467 7.26295 16.419 6.84099 16.841C6.41903 17.2629 5.84674 17.5 5.25 17.5H3C2.40326 17.5 1.83097 17.2629 1.40901 16.841C0.987053 16.419 0.75 15.8467 0.75 15.25V13ZM10.5 3.25C10.5 2.65326 10.7371 2.08097 11.159 1.65901C11.581 1.23705 12.1533 1 12.75 1H15C15.5967 1 16.169 1.23705 16.591 1.65901C17.0129 2.08097 17.25 2.65326 17.25 3.25V5.5C17.25 6.09674 17.0129 6.66903 16.591 7.09099C16.169 7.51295 15.5967 7.75 15 7.75H12.75C12.1533 7.75 11.581 7.51295 11.159 7.09099C10.7371 6.66903 10.5 6.09674 10.5 5.5V3.25ZM10.5 13C10.5 12.4033 10.7371 11.831 11.159 11.409C11.581 10.9871 12.1533 10.75 12.75 10.75H15C15.5967 10.75 16.169 10.9871 16.591 11.409C17.0129 11.831 17.25 12.4033 17.25 13V15.25C17.25 15.8467 17.0129 16.419 16.591 16.841C16.169 17.2629 15.5967 17.5 15 17.5H12.75C12.1533 17.5 11.581 17.2629 11.159 16.841C10.7371 16.419 10.5 15.8467 10.5 15.25V13Z" stroke="#0F3567" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
</>
)
}

219
components/layout/header/Header3.js Normal file
View File

@ -0,0 +1,219 @@
import Link from "next/link"
import { useState } from "react"
import NavbarNav from "../NavbarNav"
export default function Header3({ handleSearch, handleOptionalPanel, handleMobileMenu }) {
const [isSideMenu, setSideMenu] = useState(false)
const handleSideMenu = () => setSideMenu(!isSideMenu)
return (
<>
<div className={isSideMenu ? "opne_side_menu_v1" : ""}>
<div className="header_area " id="header_contents">
<header className="header-area header-style-3">
<div className="top_header">
<div className="large-container">
<div className="row align-items-center">
<div className="col-lg-3 width_50">
<div className="logo_box">
<Link href="/" className="logo navbar-brand">
<img src="/assets/images/Logo-green.png" alt="Vankine" className="logo_default" />
</Link>
</div>
</div>
<div className="col-lg-7 d_none_1200px">
<div className="row">
<div className="col-lg-4 col-md-4">
<div className="d-flex align-items-center contact_header_one">
<div className="icon_s">
<i className=" flaticon-pin" />
</div>
<div className="content">
<h6 className="tite">Our Locations</h6>
<div className="title_no_a_20">55 Main Street, USA</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-4">
<div className="d-flex align-items-center contact_header_one">
<div className="icon_s">
<i className=" flaticon-black-back-closed-envelope-shape" />
</div>
<div className="content">
<h6 className="tite">Email For Us</h6>
<div className="title_no_a_20">support@gmail.com</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-4">
<div className="d-flex align-items-center contact_header_one">
<div className="icon_s">
<i className=" flaticon-telephone" />
</div>
<div className="content">
<h6 className="tite">Call For Us</h6>
<div className="title_no_a_20">+000 (123) 456 88</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-2 text-end width_50">
<div className="theme_btn_all d_none_992px">
<Link href="#" className="theme_btn">
Contact us <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
<div className="navbar_togglers hamburger_menu" onClick={handleMobileMenu}>
<span className="line" />
<span className="line" />
<span className="line" />
</div>
</div>
</div>
</div>
</div>
</header>
{/*-side menu-*/}
<div className="side_menu_v1">
<div className="top">
<div className="menu_box">
<div className="side_navbar_togglers" onClick={handleSideMenu}>
<svg width={38} height={25} viewBox="0 0 38 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M0 1.5625C0 1.1481 0.16462 0.750671 0.457645 0.457645C0.750671 0.16462 1.1481 0 1.5625 0H31.9375C32.3519 0 32.7493 0.16462 33.0424 0.457645C33.3354 0.750671 33.5 1.1481 33.5 1.5625C33.5 1.9769 33.3354 2.37433 33.0424 2.66735C32.7493 2.96038 32.3519 3.125 31.9375 3.125H1.5625C1.1481 3.125 0.750671 2.96038 0.457645 2.66735C0.16462 2.37433 0 1.9769 0 1.5625ZM0 12.5C0 12.0856 0.16462 11.6882 0.457645 11.3951C0.750671 11.1021 1.1481 10.9375 1.5625 10.9375H35.9375C36.3519 10.9375 36.7493 11.1021 37.0424 11.3951C37.3354 11.6882 37.5 12.0856 37.5 12.5C37.5 12.9144 37.3354 13.3118 37.0424 13.6049C36.7493 13.8979 36.3519 14.0625 35.9375 14.0625H1.5625C1.1481 14.0625 0.750671 13.8979 0.457645 13.6049C0.16462 13.3118 0 12.9144 0 12.5ZM0 23.4375C0 23.0231 0.16462 22.6257 0.457645 22.3326C0.750671 22.0396 1.1481 21.875 1.5625 21.875H25.9375C26.3519 21.875 26.7493 22.0396 27.0424 22.3326C27.3354 22.6257 27.5 23.0231 27.5 23.4375C27.5 23.8519 27.3354 24.2493 27.0424 24.5424C26.7493 24.8354 26.3519 25 25.9375 25H1.5625C1.1481 25 0.750671 24.8354 0.457645 24.5424C0.16462 24.2493 0 23.8519 0 23.4375Z" fill="#138F82" />
</svg>
<span>Menu</span>
</div>
</div>
<div className="search_box">
<div className="search search-toggler" onClick={handleSearch}>
<i className="fi-rs-search" />
</div>
</div>
<div className="contacttoggler">
<div className="contact-toggler" onClick={handleOptionalPanel}>
<svg width={18} height={19} viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.75 3.25C0.75 2.65326 0.987053 2.08097 1.40901 1.65901C1.83097 1.23705 2.40326 1 3 1H5.25C5.84674 1 6.41903 1.23705 6.84099 1.65901C7.26295 2.08097 7.5 2.65326 7.5 3.25V5.5C7.5 6.09674 7.26295 6.66903 6.84099 7.09099C6.41903 7.51295 5.84674 7.75 5.25 7.75H3C2.40326 7.75 1.83097 7.51295 1.40901 7.09099C0.987053 6.66903 0.75 6.09674 0.75 5.5V3.25ZM0.75 13C0.75 12.4033 0.987053 11.831 1.40901 11.409C1.83097 10.9871 2.40326 10.75 3 10.75H5.25C5.84674 10.75 6.41903 10.9871 6.84099 11.409C7.26295 11.831 7.5 12.4033 7.5 13V15.25C7.5 15.8467 7.26295 16.419 6.84099 16.841C6.41903 17.2629 5.84674 17.5 5.25 17.5H3C2.40326 17.5 1.83097 17.2629 1.40901 16.841C0.987053 16.419 0.75 15.8467 0.75 15.25V13ZM10.5 3.25C10.5 2.65326 10.7371 2.08097 11.159 1.65901C11.581 1.23705 12.1533 1 12.75 1H15C15.5967 1 16.169 1.23705 16.591 1.65901C17.0129 2.08097 17.25 2.65326 17.25 3.25V5.5C17.25 6.09674 17.0129 6.66903 16.591 7.09099C16.169 7.51295 15.5967 7.75 15 7.75H12.75C12.1533 7.75 11.581 7.51295 11.159 7.09099C10.7371 6.66903 10.5 6.09674 10.5 5.5V3.25ZM10.5 13C10.5 12.4033 10.7371 11.831 11.159 11.409C11.581 10.9871 12.1533 10.75 12.75 10.75H15C15.5967 10.75 16.169 10.9871 16.591 11.409C17.0129 11.831 17.25 12.4033 17.25 13V15.25C17.25 15.8467 17.0129 16.419 16.591 16.841C16.169 17.2629 15.5967 17.5 15 17.5H12.75C12.1533 17.5 11.581 17.2629 11.159 16.841C10.7371 16.419 10.5 15.8467 10.5 15.25V13Z" stroke="var(--color-set-two-three-5)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
</div>
</div>
<div className="social-icons">
<ul className="d-inline-block">
<li>
<Link className="m_icon" href="#">
<i className="fab fa-facebook" />
</Link>
</li>
<li>
<Link className="m_icon" href="#">
<i className="fab fa-twitter" />
</Link>
</li>
<li>
<Link className="m_icon" href="#">
<i className="fab fa-skype" />
</Link>
</li>
<li>
<Link className="m_icon" href="#">
<i className="fab fa-telegram" />
</Link>
</li>
</ul>
</div>
<div className="button_box">
<div className="button">
<Link href="#">
<span className="vertical_text_1">Get A Quote</span>
<svg width={8} height={41} viewBox="0 0 8 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.64644 40.3536C3.84171 40.5488 4.15829 40.5488 4.35355 40.3536L7.53553 37.1716C7.73079 36.9763 7.73079 36.6597 7.53553 36.4645C7.34027 36.2692 7.02369 36.2692 6.82843 36.4645L4 39.2929L1.17157 36.4645C0.976309 36.2692 0.659727 36.2692 0.464465 36.4645C0.269202 36.6597 0.269202 36.9763 0.464464 37.1716L3.64644 40.3536ZM3.5 -2.18557e-08L3.5 40L4.5 40L4.5 2.18557e-08L3.5 -2.18557e-08Z" fill="#138F82" />
</svg>
</Link>
</div>
</div>
</div>
<div className="sdmenu_overlay" onClick={handleSideMenu} />
<div className="menu_open_sidely scrollbarcolor">
<div className="border_line" />
<div className="position-relative">
<div className="large-container">
<div className="side_navbar_togglers_close" onClick={handleSideMenu}>
<i className="fa fa-close" />
</div>
<div className="row">
<div className="col-lg-3 col-md-3 col-sm-12">
<Link href="/" className="logo navbar-brand">
<img src="/assets/images/logo-white.svg" alt="Vankine " className="logo_default" />
</Link>
<div className="menu_content_in">
<div className="navbar_content d-flex align-items-center">
<NavbarNav />
</div>
</div>
</div>
<div className="col-lg-3 col-md-3 col-sm-12">
</div>
<div className="col-lg-5 col-md-5 col-sm-12">
<div className="form_box">
<h2>Need Any Help? Or Looking For an Agent</h2>
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-6 pd_bottom_10">
<input type="text" name="name" placeholder="Full Name" required />
</div>
<div className="col-lg-6 pd_bottom_10">
<input type="text" name="phone" placeholder="Phone" />
</div>
<div className="col-lg-12 pd_bottom_10">
<input type="email" name="email" placeholder="Email Address" required />
</div>
<div className="col-lg-12 pd_bottom_10">
<textarea name="message" placeholder="Message" />
</div>
<div className="col-lg-12">
<button type="submit">Send Message</button>
</div>
</div>
</form>
</div>
<p>On the other hand denounce righteousy indignation and dislike men</p>
<div className="social-icons">
<ul className="d-inline-block">
<li>
<Link className="m_icon" href="#">
<i className="fab fa-facebook" />
</Link>
</li>
<li>
<Link className="m_icon" href="#">
<i className="fab fa-twitter" />
</Link>
</li>
<li>
<Link className="m_icon" href="#">
<i className="fab fa-skype" />
</Link>
</li>
<li>
<Link className="m_icon" href="#">
<i className="fab fa-telegram" />
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-1 col-md-1 col-sm-12">
</div>
</div>
</div>
</div>
</div>
{/*-side menu-*/}
</div>
</div>
</>
)
}

60
components/layout/header/Header4.js Normal file
View File

@ -0,0 +1,60 @@
import Link from 'next/link'
import NavbarNav from '../NavbarNav'
export default function Header4({ handleSearch, handleOptionalPanel, handleMobileMenu }) {
return (
<>
<div className="header_area " id="header_contents">
<header className="header-area header-style-1 htype_three position_absolute bg_transparent">
<div className="main_header_content default_header">
<div className="large-container">
<div className="row align-items-center">
<div className="col-xl-2 col-lg-12 col-md-5 col-sm-5 col-xs-5">
<div className="logobox">
<Link href="/" className="logo navbar-brand">
<img src="/assets/images/Logo-green.png" alt="Vankine" className="logo_default" />
</Link>
</div>
</div>
<div className="col-xl-8 col-lg-9 col-md-0 col-sm-0 col-xs-0 column_menu">
<div className="navbar_content d-flex align-items-center">
<NavbarNav />
<div className="search search-toggler" onClick={handleSearch}>
<i className="fi-rs-search" />
</div>
</div>
</div>
<div className="col-xl-2 col-lg-3 col-md-7 col-sm-7 col-xs-7 nav_tog_column">
<div className="d-flex right_content align-items-center">
{/*menu icon*/}
<div className="navbar_togglers hamburger_menu" onClick={handleMobileMenu}>
<span className="line" />
<span className="line" />
<span className="line" />
</div>
{/*menu icon*/}
<div className="button">
<Link href="#" className="theme_btn">
Get A Quote
<svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
<div className="contact-toggler" onClick={handleOptionalPanel}>
<svg width={18} height={19} viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.75 3.25C0.75 2.65326 0.987053 2.08097 1.40901 1.65901C1.83097 1.23705 2.40326 1 3 1H5.25C5.84674 1 6.41903 1.23705 6.84099 1.65901C7.26295 2.08097 7.5 2.65326 7.5 3.25V5.5C7.5 6.09674 7.26295 6.66903 6.84099 7.09099C6.41903 7.51295 5.84674 7.75 5.25 7.75H3C2.40326 7.75 1.83097 7.51295 1.40901 7.09099C0.987053 6.66903 0.75 6.09674 0.75 5.5V3.25ZM0.75 13C0.75 12.4033 0.987053 11.831 1.40901 11.409C1.83097 10.9871 2.40326 10.75 3 10.75H5.25C5.84674 10.75 6.41903 10.9871 6.84099 11.409C7.26295 11.831 7.5 12.4033 7.5 13V15.25C7.5 15.8467 7.26295 16.419 6.84099 16.841C6.41903 17.2629 5.84674 17.5 5.25 17.5H3C2.40326 17.5 1.83097 17.2629 1.40901 16.841C0.987053 16.419 0.75 15.8467 0.75 15.25V13ZM10.5 3.25C10.5 2.65326 10.7371 2.08097 11.159 1.65901C11.581 1.23705 12.1533 1 12.75 1H15C15.5967 1 16.169 1.23705 16.591 1.65901C17.0129 2.08097 17.25 2.65326 17.25 3.25V5.5C17.25 6.09674 17.0129 6.66903 16.591 7.09099C16.169 7.51295 15.5967 7.75 15 7.75H12.75C12.1533 7.75 11.581 7.51295 11.159 7.09099C10.7371 6.66903 10.5 6.09674 10.5 5.5V3.25ZM10.5 13C10.5 12.4033 10.7371 11.831 11.159 11.409C11.581 10.9871 12.1533 10.75 12.75 10.75H15C15.5967 10.75 16.169 10.9871 16.591 11.409C17.0129 11.831 17.25 12.4033 17.25 13V15.25C17.25 15.8467 17.0129 16.419 16.591 16.841C16.169 17.2629 15.5967 17.5 15 17.5H12.75C12.1533 17.5 11.581 17.2629 11.159 16.841C10.7371 16.419 10.5 15.8467 10.5 15.25V13Z" stroke="#0F3567" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
</>
)
}

102
components/layout/header/Header5.js Normal file
View File

@ -0,0 +1,102 @@
import Link from "next/link"
import NavbarNav from "../NavbarNav"
export default function Header5({ handleSearch, handleOptionalPanel, handleMobileMenu }) {
return (
<>
<div className="header_area " id="header_contents">
<header className="header-area header-style-5 htype_one">
<div className="top_bar">
<div className="bgiamge">
<img src="/assets/images/header-5-bg.png" className="img-fluid" alt="img" />
</div>
<div className="container">
<div className="row align-items-center">
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="logo_box">
<Link href="/" className="logo navbar-brand">
<img src="/assets/images/theme-logo.png" alt="Vankine " className="logo_default" />
</Link>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="d-flex align-items-center contact_header_one">
<div className="icon_s">
<i className=" flaticon-pin" />
</div>
<div className="content">
<h6 className="tite">Our Locations</h6>
<div className="title_no_a_20">55 Main Street, USA</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="d-flex align-items-center contact_header_one">
<div className="icon_s">
<i className=" flaticon-black-back-closed-envelope-shape" />
</div>
<div className="content">
<h6 className="tite">Email For Us</h6>
<div className="title_no_a_20">example@gmail.com</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="d-flex align-items-center contact_header_one">
<div className="icon_s">
<i className=" flaticon-telephone" />
</div>
<div className="content">
<h6 className="tite">Call For Us</h6>
<div className="title_no_a_20">+000123456 88</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="medium-container position-relative">
<div className="main_header_content default_header">
<div className="row align-items-center">
<div className="col-lg-9 col-md-0 col-sm-0 col-xs-0 column_menu">
<div className="navbar_content d-flex align-items-center">
<NavbarNav />
<div className="search search-toggler" onClick={handleSearch}>
<i className="fi-rs-search" />
</div>
</div>
</div>
<div className="col-lg-3 col-md-12 col-sm-12 col-xs-12 nav_tog_column">
<div className="d-flex right_content align-items-center">
{/*menu icon*/}
<div className="navbar_togglers hamburger_menu" onClick={handleMobileMenu}>
<span className="line" />
<span className="line" />
<span className="line" />
</div>
{/*menu icon*/}
<div className="button">
<Link href="#" className="theme_btn" style={{ backgroundImage: 'url(assets/images/bg-1.png)' }}>
Get A Quote
<svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
<div className="contact-toggler" onClick={handleOptionalPanel}>
<svg width={18} height={19} viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.75 3.25C0.75 2.65326 0.987053 2.08097 1.40901 1.65901C1.83097 1.23705 2.40326 1 3 1H5.25C5.84674 1 6.41903 1.23705 6.84099 1.65901C7.26295 2.08097 7.5 2.65326 7.5 3.25V5.5C7.5 6.09674 7.26295 6.66903 6.84099 7.09099C6.41903 7.51295 5.84674 7.75 5.25 7.75H3C2.40326 7.75 1.83097 7.51295 1.40901 7.09099C0.987053 6.66903 0.75 6.09674 0.75 5.5V3.25ZM0.75 13C0.75 12.4033 0.987053 11.831 1.40901 11.409C1.83097 10.9871 2.40326 10.75 3 10.75H5.25C5.84674 10.75 6.41903 10.9871 6.84099 11.409C7.26295 11.831 7.5 12.4033 7.5 13V15.25C7.5 15.8467 7.26295 16.419 6.84099 16.841C6.41903 17.2629 5.84674 17.5 5.25 17.5H3C2.40326 17.5 1.83097 17.2629 1.40901 16.841C0.987053 16.419 0.75 15.8467 0.75 15.25V13ZM10.5 3.25C10.5 2.65326 10.7371 2.08097 11.159 1.65901C11.581 1.23705 12.1533 1 12.75 1H15C15.5967 1 16.169 1.23705 16.591 1.65901C17.0129 2.08097 17.25 2.65326 17.25 3.25V5.5C17.25 6.09674 17.0129 6.66903 16.591 7.09099C16.169 7.51295 15.5967 7.75 15 7.75H12.75C12.1533 7.75 11.581 7.51295 11.159 7.09099C10.7371 6.66903 10.5 6.09674 10.5 5.5V3.25ZM10.5 13C10.5 12.4033 10.7371 11.831 11.159 11.409C11.581 10.9871 12.1533 10.75 12.75 10.75H15C15.5967 10.75 16.169 10.9871 16.591 11.409C17.0129 11.831 17.25 12.4033 17.25 13V15.25C17.25 15.8467 17.0129 16.419 16.591 16.841C16.169 17.2629 15.5967 17.5 15 17.5H12.75C12.1533 17.5 11.581 17.2629 11.159 16.841C10.7371 16.419 10.5 15.8467 10.5 15.25V13Z" stroke="#0F3567" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
</>
)
}

102
components/layout/header/Header6.js Normal file
View File

@ -0,0 +1,102 @@
import Link from "next/link"
import NavbarNav from "../NavbarNav"
export default function Header6({ handleSearch, handleOptionalPanel, handleMobileMenu }) {
return (
<>
<div className="header_area " id="header_contents">
<header className="header-area header-style-6">
<div className="row align-items-center">
<div className="col-lg-2 col-md-10 col-sm-10 col-xs-10 col_log">
<div className="logo_box">
<Link href="/" className="logo navbar-brand">
<img src="/assets/images/logo-white.svg" className="img-fluid" alt="vankine" />
</Link>
</div>
</div>
<div className="col-lg-8 col-md-2 col-sm-2 col-xs-2 pd_zero">
{/*menu icon*/}
<div className="navbar_togglers hamburger_menu" onClick={handleMobileMenu}>
<span className="line" />
<span className="line" />
<span className="line" />
</div>
{/*menu icon*/}
<div className="top_bar">
<div className="row align-items-center">
<div className="col-lg-8">
<div className="position-relative">
<ul className="list_box linline">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className=" fi-rr-map-marker-home" /></div>
<Link className="links" href="#">
24 Global Str, San Fransisco, SF 94112. </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className=" fi-rs-time-oclock" /></div>
<Link className="links" href="#">
Mon - Sat(9.00 - 6.00) Sunday - Closed </Link>
</div>
</li>
</ul>
</div>
</div>
<div className="col-lg-4">
<div className="social-icons text-md-end">
<ul>
<li><Link href="#" className="m_icon"> <i className="fa-brands fa-facebook" /></Link></li>
<li><Link href="#" className="m_icon"> <i className="fa-brands fa-twitter" /></Link>
</li>
<li><Link href="#" className="m_icon"> <i className="fa-brands fa-skype" /></Link>
</li>
<li><Link href="#" className="m_icon"> <i className="fa-brands fa-instagram" /></Link></li>
</ul>
</div>
</div>
</div>
</div>
<div className="main_header_content default_header">
<div className="navbar_content d-flex align-items-center">
<NavbarNav />
<div className="right_content">
<div className="footer_contact_widget">
<div className="d-flex">
<svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path className="strokse" d="M20.25 3.75V8.25M20.25 3.75H15.75M20.25 3.75L14.25 9.75M17.25 21.75C8.966 21.75 2.25 15.034 2.25 6.75V4.5C2.25 3.90326 2.48705 3.33097 2.90901 2.90901C3.33097 2.48705 3.90326 2.25 4.5 2.25H5.872C6.388 2.25 6.838 2.601 6.963 3.102L8.069 7.525C8.179 7.965 8.015 8.427 7.652 8.698L6.359 9.668C6.17393 9.80198 6.037 9.99207 5.96854 10.21C5.90009 10.428 5.90375 10.6623 5.979 10.878C6.58087 12.5151 7.53141 14.0018 8.76478 15.2352C9.99815 16.4686 11.4849 17.4191 13.122 18.021C13.563 18.183 14.05 18.017 14.332 17.641L15.302 16.348C15.4348 16.1708 15.6169 16.0366 15.8256 15.9625C16.0342 15.8883 16.2601 15.8773 16.475 15.931L20.898 17.037C21.398 17.162 21.75 17.612 21.75 18.128V19.5C21.75 20.0967 21.5129 20.669 21.091 21.091C20.669 21.5129 20.0967 21.75 19.5 21.75H17.25V21.75Z" stroke="#008BF9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
<div>
<p><Link href="tel:+555567812340">+555 5678 12340</Link></p>
</div>
</div>
</div>
<div className="d-flex flex-wrap align-items-center header_extra_items">
<div className="search search-toggler" onClick={handleSearch}>
<i className="fi-rs-search" /></div>
<div className="contact-toggler" onClick={handleOptionalPanel}>
<svg width={18} height={19} viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.75 3.25C0.75 2.65326 0.987053 2.08097 1.40901 1.65901C1.83097 1.23705 2.40326 1 3 1H5.25C5.84674 1 6.41903 1.23705 6.84099 1.65901C7.26295 2.08097 7.5 2.65326 7.5 3.25V5.5C7.5 6.09674 7.26295 6.66903 6.84099 7.09099C6.41903 7.51295 5.84674 7.75 5.25 7.75H3C2.40326 7.75 1.83097 7.51295 1.40901 7.09099C0.987053 6.66903 0.75 6.09674 0.75 5.5V3.25ZM0.75 13C0.75 12.4033 0.987053 11.831 1.40901 11.409C1.83097 10.9871 2.40326 10.75 3 10.75H5.25C5.84674 10.75 6.41903 10.9871 6.84099 11.409C7.26295 11.831 7.5 12.4033 7.5 13V15.25C7.5 15.8467 7.26295 16.419 6.84099 16.841C6.41903 17.2629 5.84674 17.5 5.25 17.5H3C2.40326 17.5 1.83097 17.2629 1.40901 16.841C0.987053 16.419 0.75 15.8467 0.75 15.25V13ZM10.5 3.25C10.5 2.65326 10.7371 2.08097 11.159 1.65901C11.581 1.23705 12.1533 1 12.75 1H15C15.5967 1 16.169 1.23705 16.591 1.65901C17.0129 2.08097 17.25 2.65326 17.25 3.25V5.5C17.25 6.09674 17.0129 6.66903 16.591 7.09099C16.169 7.51295 15.5967 7.75 15 7.75H12.75C12.1533 7.75 11.581 7.51295 11.159 7.09099C10.7371 6.66903 10.5 6.09674 10.5 5.5V3.25ZM10.5 13C10.5 12.4033 10.7371 11.831 11.159 11.409C11.581 10.9871 12.1533 10.75 12.75 10.75H15C15.5967 10.75 16.169 10.9871 16.591 11.409C17.0129 11.831 17.25 12.4033 17.25 13V15.25C17.25 15.8467 17.0129 16.419 16.591 16.841C16.169 17.2629 15.5967 17.5 15 17.5H12.75C12.1533 17.5 11.581 17.2629 11.159 16.841C10.7371 16.419 10.5 15.8467 10.5 15.25V13Z" stroke="#0F3567" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg></div>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-2 pd_zero col_theme_btn d_none_992px">
<div className="theme_btn_all text-center">
<Link href="#" className="theme_btn">
Contact us <span><i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></span>
</Link>
</div>
</div>
</div>
</header>
</div>
</>
)
}

407
components/sections/About1.js Normal file
View File

@ -0,0 +1,407 @@
import Link from "next/link"
import { useState } from "react"
export default function About1() {
const [activeIndex, setActiveIndex] = useState(1)
const handleOnClick = (index) => {
setActiveIndex(index)
}
return (
<>
<section className="about-section position-relative">
{/*-============spacing==========-*/}
<div className="pd_top_20" />
{/*-============spacing==========-*/}
<div className="ab_img_left_bottom z_minus_1">
<img src="/assets/images/bg-1.png" className="img-fluid" alt="img" />
</div>
<div className="large-container">
<div className="row align-items-start">
<div className="col-lg-5 col-md-5 col-sm-12">
<div className="image_box">
<img src="/assets/images/about/about-1.png" className="img-fluid" alt="img" />
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 pd_left_30">
<div className="section_title type_one">
<h4 className="sm_title"> About Company</h4>
<div className="title_whole">
<h2 className="title"> We’re a Trusted and Professional Insurance Company </h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="mr_bottom_20" />
{/*-============spacing==========-*/}
<div className="fom_tab_box custom_tabs only_tab_content">
<ul className="nav nav-tabs links trans" role="tablist">
<li className="nav-item" onClick={() => handleOnClick(1)}>
<button className={activeIndex === 1 ? "nav-link active" : "nav-link"}>
About Us <svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(2)}>
<button className={activeIndex === 2 ? "nav-link active" : "nav-link"}>
Mission <svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(3)}>
<button className={activeIndex === 3 ? "nav-link active" : "nav-link"}>
Vision <svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</button>
</li>
</ul>
<div className="s_tabs_content tab-content">
<div className={activeIndex === 1 ? "tab-pane active" : "tab-pane"}>
<div className="tab_content_box">
<div className="content">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque <br /> laudantium, totam aperiam, eaquecy
epsa abillo inventore veritatis architecto beatae </div>
<div className="d-flex">
<ul>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Best Insurance Agency
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Trusted & Experience Insurance
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Dedicated Support &amp; Security</span>
</li>
</ul>
<ul>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Board Composition</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Key Managerial Persons</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Board Committees</span>
</li>
</ul>
</div>
</div>
</div>
<div className={activeIndex === 2 ? "tab-pane active" : "tab-pane"}>
<div className="tab_content_box">
<div className="content">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam aperiam, eaquecy epsa
abillo inventore veritatis architecto beatae </div>
<div className="d-flex">
<ul>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Best Insurance Agency
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Trusted & Experience Insurance
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Dedicated Support &amp; Security</span>
</li>
</ul>
<ul>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Best Insurance Agency
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Trusted & Experience Insurance
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Dedicated Support &amp; Security</span>
</li>
</ul>
</div>
</div>
</div>
<div className={activeIndex === 3 ? "tab-pane active" : "tab-pane"}>
<div className="tab_content_box">
<div className="content">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam aperiam, eaquecy epsa
abillo inventore veritatis architecto beatae </div>
<div className="d-flex">
<ul>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Best Insurance Agency
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Trusted & Experience Insurance
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Dedicated Support &amp; Security</span>
</li>
</ul>
<ul>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Best Insurance Agency
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Trusted & Experience Insurance
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Dedicated Support &amp; Security</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="theme_btn_all">
<Link href="#" className="theme_btn">
More About Us
<span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_70" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
<div className="ab_img_right_bottom z_minus_1">
<img src="/assets/images/bg-2.png" className="img-fluid" alt="img" />
</div>
</section>
</>
)
}

78
components/sections/About2.js Normal file
View File

@ -0,0 +1,78 @@
import Link from "next/link"
export default function About2() {
return (
<>
<section className="about-section">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6">
<div className="image">
<img src="/assets/images/about/about-2-11.png" className="img-fluid" alt="img" />
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6">
<div className="section_title type_two">
<h4 className="sm_title"> Amazing Company</h4>
<div className="title_whole">
<h2 className="title"> We’re a Trusted and Professional Insurance Company </h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="position-relative border_left_abolute_5px pd_left_40">
Sit amet consectetur adipiscing elites varius montes, massa, blandit orci. Sed
egestas tellus est aliquet eget.
At tristique nisl nullam pharetra sed tempor sed ipsum eivera consectetur augue
molestie amet utiverra
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row gutter_15px pd_left_40">
<div className="col-lg-5">
<div className="theme_btn_all">
<Link href="#" className="theme_btn color_two rotate big">
Learn More <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-7">
<div className="d-flex align-items-center contact_header_one color_two">
<div className="icon_s">
<i className=" fi-rr-headphones" />
</div>
<div className="content">
<h6 className="tite">Need Help?</h6>
<div className="title_20"><Link href="tel:+000(123)45688">+000(123)456
88</Link>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</section>
</>
)
}

134
components/sections/About3.js Normal file
View File

@ -0,0 +1,134 @@
import dynamic from 'next/dynamic'
import Link from 'next/link'
import VideoBox from "../elements/VideoBox"
const CounterUp = dynamic(() => import('../elements/CounterUp'), {
ssr: false,
})
export default function About3() {
return (
<>
<section className="about-section">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-12 pd_right_60">
<div className="section_title type_four">
<h4 className="sm_title"> Amazing Company</h4>
<div className="title_whole">
<h2 className="title"> We’re a Trusted and Professional Insurance Company</h2>
</div>
<p>
Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium
doloremque laudanti totam aperiam eaquecy epsa abillo inventore veritatis
architecto beatae
</p>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
<div className="position-relative">
<ul className="list_box list color_two">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#">
Best Insurance Agency </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#">
Trusted & Experience Insurance </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#">
Dedicated Support &amp; Security </Link>
</div>
</li>
</ul>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_35" />
{/*-============spacing==========-*/}
<div className="theme_btn_all">
<Link href="#" className="theme_btn color_three big rotate">
Learn More <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-4 col-md-8 mr_left_minus_40">
<div className="image_video_box_only type_two color_two">
<div className="image one">
<img src="/assets/images/about/about-4-1.png" alt="img" className="imf-fluid" />
<div className="video_box video-inner text-center">
<VideoBox />
</div>
<div className="fun_facts type_two">
<h6 className="title_no_a_18">25</h6>
<h6 className="title_no_a_26">Years Of <br />
Experience</h6>
</div>
</div>
</div>
</div>
<div className="col-lg-2 col-md-4 pd_left_30">
<div className="fun_facts type_one color_two text-start">
<h4>
<CounterUp count={8563} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Helath Insurance</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
<div className="divider" />
<div className="mr_bottom_20" />
{/*-============spacing==========-*/}
<div className="fun_facts type_one color_two text-start">
<h4>
<CounterUp count={263} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Experience Team</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
<div className="divider" />
<div className="mr_bottom_20" />
{/*-============spacing==========-*/}
<div className="fun_facts type_one color_two text-start">
<h4>
<CounterUp count={93} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Awards Winning</h6>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_90" />
{/*-============spacing==========-*/}
</section>
</>
)
}

99
components/sections/About4.js Normal file
View File

@ -0,0 +1,99 @@
import dynamic from 'next/dynamic'
import Link from "next/link"
const CounterUp = dynamic(() => import('../elements/CounterUp'), {
ssr: false,
})
export default function About4() {
return (
<>
<section className="about-section bg_op_4" style={{ backgroundImage: 'url(assets/images/wave-pat-1.png)' }}>
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-12 pd_right_30">
<div className="image_box_only type_eight">
<div className="pattern">
<img src="/assets/images/Graphics.png" className="img-fluid" alt="img" />
</div>
<div className="m_image">
<img src="/assets/images/about/about-h-6-min.png" className="img-fluid" alt="img" />
</div>
<div className="fun_facts type_two color_two">
<h4>
<CounterUp count={25} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_26">Years Of
Experience</h6>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6 col-md-12 pd_left_60">
<div className="section_title type_five">
<h4 className="sm_title"> About Insurance</h4>
<div className="title_whole">
<h2 className="title"> Big Dreams Start Small Live Your Life Happy</h2>
</div>
<p>
Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium
doloremque laudanti totam aperiam eaquecy epsa abillo inventore veritatis
architecto beatae
</p>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
<div className="position-relative">
<ul className="list_box list color_three">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#">
Best Insurance Agency </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#">
Trusted & Experience Insurance </Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#">
Dedicated Support &amp; Security </Link>
</div>
</li>
</ul>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_35" />
{/*-============spacing==========-*/}
<div className="theme_btn_all">
<Link href="#" className="theme_btn color_four big rotate">
Learn More <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
</section>
</>
)
}

173
components/sections/About5.js Normal file
View File

@ -0,0 +1,173 @@
import dynamic from 'next/dynamic'
import Link from "next/link"
const CounterUp = dynamic(() => import('../elements/CounterUp'), {
ssr: false,
})
export default function About5() {
return (
<>
<section className="about-section">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-12">
<div className="image_box_only type_seven">
<div className="icon_box_only type_four inline_box trans">
<div className="icon">
<img src="/assets/images/icon-image-1.png" alt="img" className="img-fluid" />
</div>
<div className="content">
<div className="title_18">
<Link href="#">
Life Insurance
</Link>
</div>
</div>
<Link className="link" href="#">
<svg width={30} height={32} viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={15} cy={17} r={15} fill="var(--color-set-two-three-6)">
</circle>
<g clipPath="url(#clip0_117_28468)">
<path d="M15.0757 24.3888C15.8841 25.207 17.6847 24.9358 17.8785 23.6492C19.0847 15.6614 25.1202 8.92269 29.6876 2.57279C30.954 0.813155 28.042 -0.858436 26.7921 0.88025C22.6184 6.68227 17.3578 12.7875 15.2998 19.828C12.948 17.4244 10.5867 15.0437 7.94892 12.9317C6.27842 11.5936 3.88886 13.951 5.57736 15.3031C9.01404 18.0559 11.984 21.2659 15.0757 24.3888Z" fill="var(--color-set-two-three-5)" />
</g>
<defs>
<clipPath id="clip0_117_28468">
<rect width={25} height={25} fill="white" transform="translate(5)" />
</clipPath>
</defs>
</svg>
</Link>
</div>
<div className="icon_box_only type_four position_two trans">
<div className="icon">
<img src="/assets/images/icon-image-2.png" alt="img" className="img-fluid" />
</div>
<div className="content">
<div className="title_18">
<Link href="#">
Health Insurance
</Link>
</div>
</div>
<Link className="link" href="#">
<svg width={30} height={32} viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={15} cy={17} r={15} fill="var(--color-set-two-three-6)">
</circle>
<g clipPath="url(#clip0_117_28462)">
<path d="M15.0757 24.3888C15.8841 25.207 17.6847 24.9358 17.8785 23.6492C19.0847 15.6614 25.1202 8.92269 29.6876 2.57279C30.954 0.813155 28.042 -0.858436 26.7921 0.88025C22.6184 6.68227 17.3578 12.7875 15.2998 19.828C12.948 17.4244 10.5867 15.0437 7.94892 12.9317C6.27842 11.5936 3.88886 13.951 5.57736 15.3031C9.01404 18.0559 11.984 21.2659 15.0757 24.3888Z" fill="var(--color-set-two-three-5)" />
</g>
<defs>
<clipPath id="clip0_117_28462">
<rect width={25} height={25} fill="white" transform="translate(5)" />
</clipPath>
</defs>
</svg>
</Link>
</div>
<div className="fun_facts type_two">
<h4>
<CounterUp count={25} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_26">Years Of
Experience</h6>
</div>
<div className="m_image">
<img src="/assets/images/about/about-1-min.png" alt="img" className="img-fluid" />
</div>
</div>
</div>
<div className="col-lg-6 col-md-12 pd_left_80">
<div className="section_title type_one">
<h4 className="sm_title"> Amazing Company</h4>
<div className="title_whole">
<h2 className="title"> We’re a Trusted and Professional Insurance Company</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
<div className="position-relative">
Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque
laudanti totam aperiam eaquecy epsa abillo inventore veritatis architecto beatae
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-5 col-md-12">
<div className="theme_btn_all">
<Link href="#" className="theme_btn rotate big">
Learn More <span><i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-7 col-md-12">
<div className="d-flex align-items-center contact_header_one color_three">
<div className="icon_s">
<i className=" fi-rr-headphones" /></div>
<div className="content">
<h6 className="tite">Need Help?</h6>
<div className="title_20"><Link href="tel:+000(123)45688">+000(123)456
88</Link></div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
<div className="divider" />
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row align-items-center">
<div className="col-lg-6 col-md-12">
<div className="fun_facts type_one with_box_shadow">
<h4>
<CounterUp count={8563} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Saticfied Custimer</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6 col-md-12">
<div className="fun_facts type_one">
<h4>
<CounterUp count={8563} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Saticfied Custimer</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
)
}

130
components/sections/Analysis1.js Normal file
View File

@ -0,0 +1,130 @@
import dynamic from 'next/dynamic'
const CounterUp = dynamic(() => import('../elements/CounterUp'), {
ssr: false,
})
export default function Analysis1() {
return (
<>
<section className="analysis-section position-relative bg_8 overflow-hidden">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="ab_img_left_top z_0 mr_top_minus_150">
<img src="/assets/images/shape/wave-pattern-2.png" className="img-fluid" alt="img" />
</div>
<div className="medium-container-two">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center color_white type_one">
<h4 className="sm_title">Company Statistics Analysis</h4>
<div className="title_whole">
<h2 className="title">Great Achievement For Insurance</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-1 col-md-6 col-sm-6 col-xs-12" />
<div className="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_one color_white">
<div className="icon trans">
<div className="icon_in trans">
<i className=" flaticon-satisfaction" /></div>
</div>
<h4>
<CounterUp count={8563} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Saticfied Custimer</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_one color_white">
<div className="icon trans">
<div className="icon_in trans">
<i className=" flaticon-business-people" /></div>
</div>
<h4>
<CounterUp count={2630} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Experience Members</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_one color_white">
<div className="icon trans">
<div className="icon_in trans">
<i className=" flaticon-reviews" /></div>
</div>
<h4>
<CounterUp count={100} time={1} />
<small>
% </small></h4>
<h6 className="title_no_a_18">Satisfaction Rate</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_one color_white">
<div className="icon trans">
<div className="icon_in trans">
<i className=" flaticon-presenter" /></div>
</div>
<h4>
<CounterUp count={25} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Years Experience</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_one color_white">
<div className="icon trans">
<div className="icon_in trans">
<i className=" flaticon-trophy" /></div>
</div>
<h4>
<CounterUp count={963} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Awards Winning</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-1 col-md-6 col-sm-6 col-xs-12" />
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
<div className="ab_img_right_bottom z_0 mr_bottom_minus_250">
<img src="/assets/images/shape/wave-pattern-1.png" className="img-fluid" alt="img" />
</div>
</section>
</>
)
}

65
components/sections/Banner1.js Normal file
View File

@ -0,0 +1,65 @@
export default function Banner1() {
return (
<>
<section className="single_banner style_one">
<div className="image_bg">
<img src="/assets/images/slider/banner-single-4-bg.png" className="img-fluid" alt="img" />
</div>
<div className="content_box">
<div className="large-container">
<div className="row align-items-center">
<div className="col-lg-5">
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title">
Put your insurance
lead generation on
autopilot
</h2>
</div>
<p>
Sit amet consectetur volutpat luctus ultrices sagittis justo. Integer
nibh nisi adipiscingrna eleifend nunc consecteture
</p>
</div>
<div className="newsteller_simple">
<div className="input_group">
<form method="post">
<input type="email" name="EMAIL" placeholder="Your email address" required />
<input type="submit" value="Sign up" />
</form>
</div>
</div>
<div className="review_box d-flex align-items-center">
<div className="rimage">
<img src="/assets/images/slider/review-girls.png" className="img-fluid" alt="img" />
</div>
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title"> Excellent 12,534+ reviews</h2>
</div>
<p>4.8 of 5 <small><i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /></small></p>
</div>
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="image">
<img src="/assets/images/slider/banner-single-4-1.jpg" className="img-fluid" alt="img" />
</div>
</div>
</div>
</div>
</div>
<div className="section_title abso type_one">
<div className="title_whole">
<h2 className="title"> INSURANCE</h2>
</div>
</div>
</section>
</>
)
}

174
components/sections/Blog1.js Normal file
View File

@ -0,0 +1,174 @@
import Link from "next/link"
export default function Blog1() {
return (
<>
<section className="blog-section position-relative bg_light_1">
{/*-============spacing==========-*/}
<div className="pd_top_85" />
{/*-============spacing==========-*/}
<div className="ab_img_left_bottom z_0">
<img src="/assets/images/bg-1.png" className="img-fluid" alt="img" />
</div>
<div className="container">
<div className="row">
<div className="col-lg-8 m-auto">
<div className="section_title text-center type_one">
<h4 className="sm_title"> Latest News &amp; Blog</h4>
<div className="title_whole">
<h2 className="title"> Read Our Latest Articles </h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="blog_post position-relative">
<div className="row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_two trans hover_1_get">
<div className="blog_inner trans">
<div className="image_box trans hover_1">
<Link href="/blog">
<img src="/assets/images/blog/blog-9-min.png" alt="blog img" className="img-fluid trans" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<span className="date_tm">
<i className="fi-rr-calendar" />
<time className="date published" >
Jan 3, {new Date().getFullYear()}
</time>
</span>
</div>
<div className="content">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" alt="gavatar" className="img-fluid" />
Bradley R Grady
</div>
<h4 className="title_22">
<Link href="/blog">
Former insures only the marine perils</Link>
</h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem…
</p>
<div className="bottn_flex">
<Link href="/blog" className="rd_more">Read More <i className="fi-rr-arrow-small-right" /></Link>
<small className="comments">
<i className="far fa-comment-dots" />
<Link href="/blog#respond" className="Comments are Closed">
Post a Comment
</Link>
</small>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_two trans hover_1_get">
<div className="blog_inner trans">
<div className="image_box trans hover_1">
<Link href="/blog">
<img src="/assets/images/blog/blog-8-min.png" alt="blog img" className="img-fluid trans" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<span className="date_tm">
<i className="fi-rr-calendar" />
<time className="date published" >
Jan 3, {new Date().getFullYear()}
</time>
</span>
</div>
<div className="content">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" alt="gavatar" className="img-fluid" />
Jason P Laforce
</div>
<h4 className="title_22">
<Link href="/blog">Insurance covers risk of fire absence</Link>
</h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem…
</p>
<div className="bottn_flex">
<Link href="/blog" className="rd_more">Read More
<i className="fi-rr-arrow-small-right" />
</Link>
<small className="comments">
<i className="far fa-comment-dots" />
<Link href="/blog#respond" className="Comments are Closed">Post
a Comment</Link>
</small>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_two trans hover_1_get">
<div className="blog_inner trans">
<div className="image_box trans hover_1">
<Link href="/blog">
<img src="/assets/images/blog/blog-7-min.png" alt="blog img" className="img-fluid trans" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<span className="date_tm">
<i className="fi-rr-calendar" />
<time className="date published" >
Jan 3, {new Date().getFullYear()}
</time>
</span>
</div>
<div className="content">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" alt="gavatar" className="img-fluid" />
Bradley R Grady
</div>
<h4 className="title_22">
<Link href="/blog">
Erving the interests of our clients
</Link>
</h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem…
</p>
<div className="bottn_flex">
<Link href="/blog" className="rd_more">Read More<i className="fi-rr-arrow-small-right" /></Link>
<small className="comments">
<i className="far fa-comment-dots" />
<Link href="/blog#respond" className="Comments are Closed">
Post a Comment
</Link>
</small>
</div>
</div>
</div>
</div>
</div>
</div>
{/*End tab-content*/}
</div>
</div>
<div className="ab_img_right_top z_0">
<img src="/assets/images/line.png" className="img-fluid" alt="img" />
</div>
{/*-============spacing==========-*/}
<div className="pd_top_60" />
{/*-============spacing==========-*/}
</section>
</>
)
}

151
components/sections/Blog2.js Normal file
View File

@ -0,0 +1,151 @@
import Link from "next/link"
export default function Blog2() {
return (
<>
<section className="blog-section bg_light_2 position-relative">
<div className="ab_img_right_top z_1">
<img src="/assets/images/line.png" className="img-fluid" alt="img" />
</div>
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="auto-container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_two">
<h4 className="sm_title"> Latest News &amp; Blog</h4>
<div className="title_whole">
<h2 className="title"> Read Our Latest Articles</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="blog_post position-relative">
<div className="row gutter_40px">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_one color_two trans hover_1_get ">
<div className="blog_inner trans">
<div className="vertical_text_1">
<span className="date_tm">
<i className="fi-rr-calendar" />
<time className="date published" >Jan 3, {new Date().getFullYear()}</time>
</span>
</div>
<div className="image_box trans hover_1">
<Link href="/blog">
<img src="/assets/images/blog/blog-9-min.png" className="img-fluid" alt="img" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" alt="gavatar" className="img-fluid" />
Bradley R Grady
</div>
<h4 className="title_22">
<Link href="/blog">
Former insures only the marine perils
</Link>
</h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem…
</p>
<Link href="/blog" className="rd_more">
Read More <i className="fi-rr-arrow-small-right" />
</Link>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_one color_two trans hover_1_get ">
<div className="blog_inner trans">
<div className="vertical_text_1">
<span className="date_tm">
<i className="fi-rr-calendar" />
<time className="date published" >Jan 3, {new Date().getFullYear()}</time>
</span>
</div>
<div className="image_box trans hover_1">
<Link href="/blog">
<img src="/assets/images/blog/blog-8-min.png" className="img-fluid" alt="img" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" alt="gavatar" className="img-fluid" />
Jason P Laforce
</div>
<h4 className="title_22">
<Link href="/blog">
Insurance covers risk of fire absence
</Link>
</h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem…
</p>
<Link href="/blog" className="rd_more">
Read More <i className="fi-rr-arrow-small-right" />
</Link>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_one color_two trans hover_1_get ">
<div className="blog_inner trans">
<div className="vertical_text_1">
<span className="date_tm"><i className="fi-rr-calendar" />
<time className="date published" >Jan 3, {new Date().getFullYear()}</time>
</span>
</div>
<div className="image_box trans hover_1">
<Link href="/blog">
<img src="/assets/images/blog/blog-7-min.png" className="img-fluid" alt="img" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" alt="gavatar" className="img-fluid" />
Bradley R Grady
</div>
<h4 className="title_22">
<Link href="/blog">Erving
the interests of our clients</Link></h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem…
</p>
<Link href="/blog" className="rd_more">
Read More <i className="fi-rr-arrow-small-right" />
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_70" />
{/*-============spacing==========-*/}
</section>
</>
)
}

147
components/sections/Blog3.js Normal file
View File

@ -0,0 +1,147 @@
import Link from "next/link"
export default function Blog3() {
return (
<>
<section className="news-section">
<div className="container">
<div className="row">
<div className="col-lg-8 m-auto">
<div className="section_title text-center type_four">
<h4 className="sm_title"> Latest News &amp; Blog</h4>
<div className="title_whole">
<h2 className="title"> Read Our Latest Articles</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="blog_post position-relative">
<div className="row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_two type_three type_four trans hover_1_get hover_1 color_two">
<img src="/assets/images/blog/blog-9-min.png" className="img-fluid" alt="blog" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="blog_inner trans">
<div className="content">
<div className="d-flex top_c align-items-center">
<span className="date_tm"><i className="fi-rr-calendar" />
<time className="date published" >
Jan 3, {new Date().getFullYear()}
</time>
</span>
</div>
<h4 className="title_22">
<Link href="/blog">
Former insures only the marine perils
</Link>
</h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem…
</p>
<div className="bottm_contet d-flex align-items-center">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" className="gav" alt="blog" />
Bradley R Grady
</div>
<Link href="/blog" className="rd_more">
Read More <i className="fi-rr-arrow-small-right" />
</Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_two type_three type_four trans hover_1_get hover_1 color_two">
<img src="/assets/images/blog/blog-8-min.png" className="img-fluid" alt="blog" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="blog_inner trans">
<div className="content">
<div className="d-flex top_c align-items-center">
<span className="date_tm">
<i className="fi-rr-calendar" />
<time className="date published" >
Jan 3, {new Date().getFullYear()}
</time>
</span>
</div>
<h4 className="title_22">
<Link href="/blog">
Insurance covers risk of fire absence
</Link>
</h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem…
</p>
<div className="bottm_contet d-flex align-items-center">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" className="gav" alt="blog" />
Bradley R Grady
</div>
<Link href="/blog" className="rd_more">
Read More <i className="fi-rr-arrow-small-right" />
</Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_two type_three type_four trans hover_1_get hover_1 color_two">
<img src="/assets/images/blog/blog-7-min.png" className="img-fluid" alt="blog" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="blog_inner trans">
<div className="content">
<div className="d-flex top_c align-items-center">
<span className="date_tm">
<i className="fi-rr-calendar" />
<time className="date published" >
Jan 3, {new Date().getFullYear()}
</time>
</span>
</div>
<h4 className="title_22">
<Link href="/blog">
Erving the interests of our clients
</Link>
</h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem…
</p>
<div className="bottm_contet d-flex align-items-center">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" className="gav" alt="blog" />
Bradley R Grady
</div>
<Link href="/blog" className="rd_more">
Read More <i className="fi-rr-arrow-small-right" />
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_70" />
{/*-============spacing==========-*/}
</section>
</>
)
}

127
components/sections/Blog4.js Normal file
View File

@ -0,0 +1,127 @@
import Link from "next/link"
export default function Blog4() {
return (
<>
<section className="blog-section">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_five">
<h4 className="sm_title"> Popular Clients</h4>
<div className="title_whole">
<h2 className="title"> Read Our Latest Articles</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="blog_post position-relative">
<div className="row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_two type_three type_five color_two trans hover_1_get">
<div className="blog_inner trans">
<div className="image_box trans hover_1">
<Link href="/blog-details">
<img src="/assets/images/blog/blog-9-min.png" className="img-fluid" alt="blog" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content">
<span className="date_tm"><i className="fi-rr-calendar" /> <time className="date published" >Jan
3, {new Date().getFullYear()}</time></span>
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" className="img-fluid" alt="gavatar" />
Bradley R Grady</div>
<h4 className="title_22">
<Link href="/blog-details">Former
insures only the marine perils</Link></h4>
<div className="bottm_contet d-flex align-items-center">
<Link href="/blog-details" className="theme_btn">Read More <svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link></div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_two type_three type_five color_two trans hover_1_get">
<div className="blog_inner trans">
<div className="image_box trans hover_1">
<Link href="/blog-details">
<img src="/assets/images/blog/blog-8-min.png" className="img-fluid" alt="blog" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content">
<span className="date_tm"><i className="fi-rr-calendar" /> <time className="date published" >Jan
3, {new Date().getFullYear()}</time></span>
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" className="img-fluid" alt="gavatar" />
Jason P Laforce</div>
<h4 className="title_22">
<Link href="/blog-details">Insurance
covers risk of fire absence</Link></h4>
<div className="bottm_contet d-flex align-items-center">
<Link href="/blog-details" className="theme_btn">Read More <svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link></div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_two type_three type_five color_two trans hover_1_get">
<div className="blog_inner trans">
<div className="image_box trans hover_1">
<Link href="/blog-details">
<img src="/assets/images/blog/blog-7-min.png" className="img-fluid" alt="blog" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content">
<span className="date_tm"><i className="fi-rr-calendar" /> <time className="date published" >Jan
3, {new Date().getFullYear()}</time></span>
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" className="img-fluid" alt="gavatar" />
Bradley R Grady</div>
<h4 className="title_22">
<Link href="/blog-details">Erving
the interests of our clients</Link></h4>
<div className="bottm_contet d-flex align-items-center">
<Link href="/blog-details" className="theme_btn">Read More <svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_70" />
{/*-============spacing==========-*/}
</section>
</>
)
}

162
components/sections/Blog5.js Normal file
View File

@ -0,0 +1,162 @@
import Link from "next/link"
export default function Blog5() {
return (
<>
<section className="blog-section">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_one">
<h4 className="sm_title"> Latest News &amp; Blog</h4>
<div className="title_whole">
<h2 className="title"> Read Our Latest Articles</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
<section className="blog_post position-relative ajax_posts_enabled ">
<div className="row ajaxcontainer">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6 ajax-wrapper">
<div className="blog_box type_two type_three trans hover_1_get">
<div className="blog_inner trans">
<div className="image_box trans hover_1">
<Link href="/blog">
<img src="/assets/images/blog/blog-9-min.png" className="img-fluid" alt="blog" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content">
<span className="date_tm"><i className="fi-rr-calendar" /> <time className="date published" >Jan 3,
{new Date().getFullYear()}</time></span> <small className="comments">
<i className="far fa-comment-dots" />
<Link href="/blog#respond" className="Comments are Closed">Post a Comment</Link></small>
<h4 className="title_22">
<Link href="/blog">Former
insures only the marine perils</Link></h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem…</p>
<div className="bottm_contet d-flex align-items-center">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" className="img-fluid" alt="blog" />
Bradley R Grady
</div>
<Link href="/blog" className="rd_more">
Read More <i className="fi-rr-arrow-small-right" />
</Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6 ajax-wrapper">
<div className="blog_box type_two type_three trans hover_1_get">
<div className="blog_inner trans">
<div className="image_box trans hover_1">
<Link href="/blog">
<img src="/assets/images/blog/blog-8-min.png" className="img-fluid" alt="blog" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content">
<span className="date_tm"><i className="fi-rr-calendar" />
<time className="date published" >
Jan 3, {new Date().getFullYear()}
</time>
</span>
<small className="comments">
<i className="far fa-comment-dots" />
<Link href="/blog#respond" className="Comments are Closed">Post a Comment</Link>
</small>
<h4 className="title_22">
<Link href="/blog">
Insurance covers risk of fire absence
</Link>
</h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem…
</p>
<div className="bottm_contet d-flex align-items-center">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" className="img-fluid" alt="blog" />
Bradley R Grady
</div>
<Link href="/blog" className="rd_more">
Read More <i className="fi-rr-arrow-small-right" />
</Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6 ajax-wrapper">
<div className="blog_box type_two type_three trans hover_1_get">
<div className="blog_inner trans">
<div className="image_box trans hover_1">
<Link href="/blog">
<img src="/assets/images/blog/blog-7-min.png" className="img-fluid" alt="blog" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content">
<span className="date_tm"><i className="fi-rr-calendar" />
<time className="date published" >
Jan 3, {new Date().getFullYear()}
</time>
</span>
<small className="comments">
<i className="far fa-comment-dots" />
<Link href="/blog#respond" className="Comments are Closed">
Post a Comment
</Link>
</small>
<h4 className="title_22">
<Link href="/blog">
Erving the interests of our clients
</Link>
</h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem…</p>
<div className="bottm_contet d-flex align-items-center">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" className="img-fluid" alt="blog" />
Bradley R Grady
</div>
<Link href="/blog" className="rd_more">
Read More <i className="fi-rr-arrow-small-right" />
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
{/*-============spacing==========-*/}
<div className="pd_top_70" />
{/*-============spacing==========-*/}
</section>
</>
)
}

133
components/sections/Blog6.js Normal file
View File

@ -0,0 +1,133 @@
import Link from "next/link"
export default function Blog6() {
return (
<>
<section className="news-section position-relative bg_light_1">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="ab_img_left_bottom z_0 op_5">
<img src="/assets/images/bg-1.png" className="img-fluid" alt="img" />
</div>
<div className="container z_1 position-relative">
<div className="row">
<div className="col-lg-8 m-auto">
<div className="section_title text-center type_one">
<h4 className="sm_title"> Latest News &amp; Blog</h4>
<div className="title_whole">
<h2 className="title"> Read Our Latest Articles</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="blog_post position-relative">
<div className="row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_one trans hover_1_get borenable">
<div className="blog_inner trans">
<div className="vertical_text_1">
<span className="date_tm"><i className="fi-rr-calendar" /> <time className="date published" >Dec 29,
{new Date().getFullYear()}</time></span></div>
<div className="image_box trans hover_1">
<Link href="/blog">
<img src="/assets/images/blog/blog-3.png" alt="image" className="img-fluid" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" alt="image" className="img-fluid" />
Bradley R Grady</div>
<h4 className="title_22">
<Link href="/blog">Create
An Information Way Architecture Easy</Link></h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem…
</p>
<Link href="/blog" className="rd_more">Read More<i className="fi-rr-arrow-small-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_one trans hover_1_get borenable">
<div className="blog_inner trans">
<div className="vertical_text_1">
<span className="date_tm"><i className="fi-rr-calendar" /> <time className="date published" >Dec 29,
{new Date().getFullYear()}</time></span></div>
<div className="image_box trans hover_1">
<Link href="/blog">
<img src="/assets/images/blog/blog-2.png" alt="image" className="img-fluid" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" alt="image" className="img-fluid" />
Bradley R Grady</div>
<h4 className="title_22">
<Link href="/blog">Bring
to the table win-win survival strategis</Link></h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem…
</p>
<Link href="/blog" className="rd_more">Read More<i className="fi-rr-arrow-small-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="blog_box type_one trans hover_1_get borenable">
<div className="blog_inner trans">
<div className="vertical_text_1">
<span className="date_tm"><i className="fi-rr-calendar" /> <time className="date published" >Dec 29,
{new Date().getFullYear()}</time></span></div>
<div className="image_box trans hover_1">
<Link href="/blog">
<img src="/assets/images/blog/blog-1.png" alt="image" className="img-fluid" />
</Link>
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
<div className="content">
<div className="d-flex authour align-items-center">
<img src="/assets/images/gavatar.png" alt="image" className="img-fluid" />
Jason P Laforce</div>
<h4 className="title_22">
<Link href="/blog">Building
Web Layouts For Dual Foldable Devices</Link></h4>
<p className="descs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem…
</p>
<Link href="/blog" className="rd_more">Read More<i className="fi-rr-arrow-small-right" /></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="ab_img_right_top z_0">
<img src="/assets/images/line.png" className="img-fluid" alt="img" />
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_70" />
{/*-============spacing==========-*/}
</section>
</>
)
}

59
components/sections/Blog7.js Normal file
View File

@ -0,0 +1,59 @@
import Link from "next/link"
import VideoBox from "../elements/VideoBox"
export default function Blog7() {
return (
<>
<section className="container">
<div className="call_to_action style_two bg_op_1 position-relative z_99 mr_bottom_minus_200" style={{ backgroundImage: 'url(assets/images/footer/footer-3-bg.jpg)' }}>
<div className="row align-items-center">
<div className="col-lg-6">
<div className="section_title type_one">
<h4 className="sm_title color_white"> Latest News &amp; Blog</h4>
<div className="title_whole">
<h2 className="title color_white"> Find an Insurance
Agent or Start Tracking
your Claims</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_35" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-6">
<div className="theme_btn_all">
<Link href="#" className="theme_btn">
Track Your Claim <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
</div>
<div className="col-lg-6">
<div className="d-flex align-items-center contact_header_one">
<div className="icon_s">
<i className=" fi-rr-headphones" /></div>
<div className="content">
<h6 className="tite color_white">Need Help?</h6>
<div className="title_20"><Link href="tel:+000(123)45688" className="color_white">+000(123)456 88</Link>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="image_video_box_only type_one color_two">
<div className="image one height_340px">
<img src="/assets/images/sub-1-min.png" alt="img" className="img-fluid height_340px" />
<div className="video_box video-inner text-center">
<VideoBox />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
)
}

83
components/sections/Client1.js Normal file
View File

@ -0,0 +1,83 @@
import Link from "next/link"
export default function Client1() {
return (
<>
<section className="client-section">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-center">
<div className="col-lg-5 col-md-12">
<div className="section_title type_one">
<h4 className="sm_title"> Popular Clients</h4>
<div className="title_whole">
<h2 className="title">
We’ve 1520+
Global Premium
Clients
</h2>
</div>
<p>
Sed ut perspiciatis unde omnis iste natusey
voluptatem accusantium dolore
</p>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="theme_btn_all">
<Link href="#" className="theme_btn big rotate">
Become a Partner <span> <i className="fi-rr-arrow-small-up" /></span>
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-7 col-md-12">
<div className="client_grid">
<div className="client_box">
<Link href="#">
<img src="/assets/images/client-1.png" className="img-fluid" alt="img" />
</Link>
</div>
<div className="client_box">
<Link href="#">
<img src="/assets/images/client-2.png" className="img-fluid" alt="img" />
</Link>
</div>
<div className="client_box">
<Link href="#">
<img src="/assets/images/client-3.png" className="img-fluid" alt="img" />
</Link>
</div>
<div className="client_box">
<Link href="#">
<img src="/assets/images/client-4.png" className="img-fluid" alt="img" />
</Link>
</div>
<div className="client_box last">
<Link href="#">
<img src="/assets/images/client-5.png" className="img-fluid" alt="img" />
</Link>
</div>
<div className="client_box last">
<Link href="#">
<img src="/assets/images/client-6.png" className="img-fluid" alt="img" />
</Link>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_90" />
{/*-============spacing==========-*/}
</section>
</>
)
}

86
components/sections/Client2.js Normal file
View File

@ -0,0 +1,86 @@
import { Autoplay, Navigation, Pagination } from "swiper"
import ClientSlider from "../slider/ClientSlider"
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 6,
spaceBetween: 30,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop: true,
// Navigation
navigation: {
nextEl: '.h1n',
prevEl: '.h1p',
},
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 30,
},
575: {
slidesPerView: 3,
spaceBetween: 30,
},
767: {
slidesPerView: 4,
spaceBetween: 30,
},
991: {
slidesPerView: 5,
spaceBetween: 30,
},
1199: {
slidesPerView: 6,
spaceBetween: 30,
},
1350: {
slidesPerView: 6,
spaceBetween: 30,
},
}
}
export default function Client2() {
return (
<>
<section className="client-section">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container-fluid">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_four">
<h4 className="sm_title"> Popular Global Clients</h4>
<div className="title_whole">
<h2 className="title"> We’ve 1520+Global Premium Clients</h2>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
<div className="nav_false dot_false">
<ClientSlider />
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_70" />
{/*-============spacing==========-*/}
</section>
</>
)
}

64
components/sections/Client3.js Normal file
View File

@ -0,0 +1,64 @@
export default function Client3() {
return (
<>
<section className="client-section">
{/*-============spacing==========-*/}
<div className="pd_top_120" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-center">
<div className="col-lg-4 col-md-12">
<div className="section_title type_five small">
<h4 className="sm_title"> Popular Clients</h4>
<div className="title_whole">
<h2 className="title"> We’ve 1520+Global
Premium Clients</h2>
</div>
</div>
</div>
<div className="col-lg-8 col-md-12">
<div className="row">
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-6 w_50_after_max_768">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-1.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-6 w_50_after_max_768">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-2.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-6 w_50_after_max_768">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-3.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-6 w_50_after_max_768">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-4.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-6 w_50_after_max_768">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-5.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-6 w_50_after_max_768">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-6.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_60" />
{/*-============spacing==========-*/}
</section>
</>
)
}

64
components/sections/Client4.js Normal file
View File

@ -0,0 +1,64 @@
export default function Client4() {
return (
<>
<section className="client-section bg_light_1">
{/*-============spacing==========-*/}
<div className="pd_top_40" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-center">
<div className="col-lg-4 col-md-12 pd_right_60">
<div className="section_title type_one small">
<h4 className="sm_title"> Popular Clients</h4>
<div className="title_whole">
<h2 className="title"> We’ve 1520+ Global
Premium Clients</h2>
</div>
</div>
</div>
<div className="col-lg-8 col-md-12">
<div className="row">
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-1.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-2.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-3.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-4.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-5.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-6.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</section>
</>
)
}

36
components/sections/Client5.js Normal file
View File

@ -0,0 +1,36 @@
import ClientSlider from "../slider/ClientSlider"
export default function Client5() {
return (
<>
<section className="client-section">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container-fluid">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_four">
<h4 className="sm_title"> Popular Global Clients</h4>
<div className="title_whole">
<h2 className="title"> We’ve 1520+Global Premium Clients</h2>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
<div className="nav_false dot_false">
<ClientSlider />
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_70" />
{/*-============spacing==========-*/}
</section>
</>
)
}

117
components/sections/Content1.js Normal file
View File

@ -0,0 +1,117 @@
import Link from "next/link"
export default function Content1() {
return (
<>
<section className="content-section bg_light_2">
{/*-============spacing==========-*/}
<div className="pd_top_95" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-8 position-relative z_2">
<div className="row">
<div className="col-lg-9 pd_right_70">
<div className="section_title type_two">
<h4 className="sm_title"> Why Choose Us</h4>
<div className="title_whole">
<h2 className="title"> We Help you to Build
for Better Future</h2>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_5" />
{/*-============spacing==========-*/}
<p> Sit amet consectetur adipiscing elites varius
montes, massa, blandit orci. Sed egestas tellus est
aliquet eget tristique nisley nullam pharetra sed
tempor sed ipsum eivera consectetur augue molestie
amet utiverra</p>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-3">
<div className="icon_box_only trans type_one type_two">
<div className="icon_box_in trans">
<div className="icon">
<i className=" flaticon-agile" /></div>
<div className="title_18">
<Link href="#">
Easy Process </Link></div>
<p>Sit amet conset
adiscin elites</p>
</div>
</div>
</div>
<div className="col-lg-3">
<div className="icon_box_only trans type_one type_two">
<div className="icon_box_in trans">
<div className="icon">
<i className=" flaticon-process" /></div>
<div className="title_18">
<Link href="#">
Fast Systems </Link></div>
<p>Sit amet conset
adiscin elites</p>
</div>
</div>
</div>
<div className="col-lg-3">
<div className="icon_box_only trans type_one type_two">
<div className="icon_box_in trans">
<div className="icon">
<i className=" flaticon-money-bag" /></div>
<div className="title_18">
<Link href="#">
Save Money </Link></div>
<p>Sit amet conset
adiscin elites</p>
</div>
</div>
</div>
<div className="col-lg-3">
<div className="icon_box_only trans type_one type_two">
<div className="icon_box_in trans">
<div className="icon">
<i className=" flaticon-cyber-security" /></div>
<div className="title_18">
<Link href="#">
High Security </Link></div>
<p>Sit amet conset
adiscin elites</p>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-4 mr_left_minus_240">
<div className="image_box_only type_one mr_top_minus_10">
<svg width={584} height={361} viewBox="0 0 584 361" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M511.94 27.9446C450.328 34.2751 426.172 86.6367 388.192 42.1471C376.849 28.8672 369.496 15.8049 356.881 7.85635C320.869 -14.8308 288.183 39.7147 254.098 21.6142C232.361 10.0692 201.495 -12.2949 160.749 11.4556C139.809 23.6643 131.75 43.9955 121.113 68.4992C98.9077 119.645 51.9621 120.301 18.0526 171.855C-10.8735 215.844 -1.72306 261.738 34.5651 282.861C76.3006 307.166 118.003 290.991 175.305 284.117C225.771 278.064 241.38 321.316 288.013 349.769C320.203 369.405 356.398 361.394 387.85 339.164C428.965 310.102 443.933 276.977 463.164 237.902C484.401 194.736 514.067 182.433 539.686 166.375C618.882 116.728 578.36 21.1282 511.94 27.9446Z" fill="#2D947A" />
</svg>
<div className="image one">
<img src="https://themepanthers.com/wp/vankine/v1/wp-content/uploads/2022/12/choose-1-min.png" width={375} height={490} decoding="async" data-src="https://themepanthers.com/wp/vankine/v1/wp-content/uploads/2022/12/choose-1-min.png" alt="img" data-ll-status="loaded" className="entered litespeed-loaded" /><noscript>&lt;img width="375" height="490"
decoding="async"
src="https://themepanthers.com/wp/vankine/v1/wp-content/uploads/2022/12/choose-1-min.png"
alt="img" /&gt;</noscript></div>
<div className="image two">
<img src="https://themepanthers.com/wp/vankine/v1/wp-content/uploads/2022/12/service-8-min.jpg" width={648} height={648} decoding="async" data-src="https://themepanthers.com/wp/vankine/v1/wp-content/uploads/2022/12/service-8-min.jpg" alt="img" data-ll-status="loaded" className="entered litespeed-loaded" /><noscript>&lt;img width="648" height="648"
decoding="async"
src="https://themepanthers.com/wp/vankine/v1/wp-content/uploads/2022/12/service-8-min.jpg"
alt="img" /&gt;</noscript></div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_70" />
{/*-============spacing==========-*/}
</section>
</>
)
}

55
components/sections/Content2.js Normal file
View File

@ -0,0 +1,55 @@
import Link from "next/link"
export default function Content2() {
return (
<>
<section className="content-section">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-lg-6">
<div className="image">
<img src="/assets/images/about/content-image-1.png" className="img-fluid" alt="img" />
</div>
</div>
<div className="col-lg-6">
{/*-============spacing==========-*/}
<div className="pd_top_30" />
{/*-============spacing==========-*/}
<div className="section_title type_two">
<h4 className="sm_title"> Awards Winning</h4>
<div className="title_whole">
<h2 className="title"> Something Know About Our Awadrs Winning</h2>
</div>
<p>
Sit amet, consectetur adipiscing elit. Orci dui vitae sit odio. Nisl,
dignissim nisi, ut maecenas libero. Massa ut cursus massa nisl sit nullam
augue ornare mattis. Proin ultrices massa arcu scelerisque facilisi egestas
eassa egestas at pharetra sollicitudin
</p>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="theme_btn_all">
<Link href="#" className="theme_btn color_two big rotate">
About Team <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</section>
</>
)
}

65
components/sections/Content3.js Normal file
View File

@ -0,0 +1,65 @@
import Link from "next/link"
export default function Content3() {
return (
<>
<section className="content-section">
{/*-============spacing==========-*/}
<div className="pd_top_50" />
{/*-============spacing==========-*/}
<div className="auto-container">
<div className="row align-items-center">
<div className="col-lg-6">
<div className="section_title type_two">
<h4 className="sm_title">Awards Winning</h4>
<div className="title_whole">
<h2 className="title">
Find an Insurance <br /> Agent or Start Tracking your Claims
</h2>
</div>
<p> Sit amet, consectetur adipiscing elit. Orci dui vitae sit odio. Nisl,
dignissim nisi, ut maecenas libero. Massa ut cursus massa nisl sit nullam
augue ornare mattis. Proin ultrices massa arcu scelerisque facilisi egestas
eassa egestas at pharetra sollicitudin
</p>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-5">
<div className="theme_btn_all">
<Link href="#" className="theme_btn big color_two rotate">
Track Your Claim <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
</div>
<div className="col-lg-7">
<div className="d-flex align-items-center contact_header_one color_three">
<div className="icon_s">
<i className="fi-rr-headphones" /></div>
<div className="content">
<h6 className="tite">Need Help?</h6>
<div className="title_20"><Link href="tel:+000(123)45688">+000(123)456
88</Link></div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40 d_md_none" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6">
<div className="image">
<img src="/assets/images/about/content-image-2.png" className="img-fluid" alt="img" />
</div>
</div>
</div>
</div>
</section>
</>
)
}

200
components/sections/Content4.js Normal file
View File

@ -0,0 +1,200 @@
import dynamic from 'next/dynamic'
import Link from "next/link"
import { useState } from "react"
const CounterUp = dynamic(() => import('../elements/CounterUp'), {
ssr: false,
})
export default function Content4() {
const [activeIndex, setActiveIndex] = useState(1)
const handleOnClick = (index) => {
setActiveIndex(index)
}
return (
<>
<section className="content-section bg_op_1 position-relative" style={{ backgroundImage: 'url(assets/images/bg-3.jpg)' }}>
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="background_overlay bg_light_3 z_0" />
<div className="container">
<div className="row">
<div className="col-lg-6 col-md-12 pd_right_60">
<div className="section_title type_four">
<h4 className="sm_title"> Check Your Favorite Insurance</h4>
<div className="title_whole">
<h2 className="title"> Get Started Favorite
Insurance </h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="fom_tab_box custom_tabs type_three">
<ul className="nav nav-tabs links trans" role="tablist">
<li className="nav-item" onClick={() => handleOnClick(1)}>
<button className={activeIndex === 1 ? "nav-link active" : "nav-link"}>
Business
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(2)}>
<button className={activeIndex === 2 ? "nav-link active" : "nav-link"}>
Medical
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(3)}>
<button className={activeIndex === 3 ? "nav-link active" : "nav-link"}>
House
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(4)}>
<button className={activeIndex === 4 ? "nav-link active" : "nav-link"}>
Car
</button>
</li>
</ul>
<div className="s_tabs_content tab-content">
<div className={activeIndex === 1 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-6">
<label>First Name <span>*</span></label>
<input type="text" name="first-name" placeholder="Larry" required />
</div>
<div className="col-lg-6">
<label>Last Name <span>*</span></label>
<input type="text" name="last-name" placeholder=" D. McMahon" required />
</div>
<div className="col-lg-6">
<label>Email <span>*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-6">
<label>Insurance Type</label>
<select>
<option value="Travel">Travel</option>
<option value="Car">Car</option>
<option value="Business">Business</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Medical">Medical</option>
<option value="Marriage">Marriage</option>
<option value="Fire">Fire</option>
</select>
</div>
<div className="col-lg-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={9000} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>6562</b>
</div>
</div>
<div className="col-lg-12">
{/*-============spacing==========-*/}
<div className="pd_top_15" />
{/*-============spacing==========-*/}
<button type="submit">Get A Quote</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div className={activeIndex === 2 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox">
<div className="contact_form_shortcode">
</div>
</div>
</div>
<div className={activeIndex === 3 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
<div className="contact_form_shortcode">
</div>
</div>
</div>
<div className={activeIndex === 4 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-12">
<div className="image_box_only type_seven color_two">
<div className="icon_box_only type_four inline_box trans">
<div className="icon">
<img src="/assets/images/icon-image-1.png" alt="img" className="img-fluid" />
</div>
<div className="content">
<div className="title_18">
<Link href="#">
Life Insurance
</Link>
</div>
</div>
<Link className="link" href="#">
<svg width={30} height={32} viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={15} cy={17} r={15} fill="var(--color-set-two-three-6)">
</circle>
<g clipPath="url(#clip0_117_28465)">
<path d="M15.0757 24.3888C15.8841 25.207 17.6847 24.9358 17.8785 23.6492C19.0847 15.6614 25.1202 8.92269 29.6876 2.57279C30.954 0.813155 28.042 -0.858436 26.7921 0.88025C22.6184 6.68227 17.3578 12.7875 15.2998 19.828C12.948 17.4244 10.5867 15.0437 7.94892 12.9317C6.27842 11.5936 3.88886 13.951 5.57736 15.3031C9.01404 18.0559 11.984 21.2659 15.0757 24.3888Z" fill="var(--color-set-two-three-5)" />
</g>
<defs>
<clipPath id="clip0_117_28465">
<rect width={25} height={25} fill="white" transform="translate(5)" />
</clipPath>
</defs>
</svg>
</Link>
</div>
<div className="icon_box_only type_four position_two trans">
<div className="icon">
<img src="/assets/images/icon-image-2.png" alt="img" className="img-fluid" />
</div>
<div className="content">
<div className="title_18">
<Link href="#">
Health Insurance
</Link>
</div>
</div>
<Link className="link" href="#">
<svg width={30} height={32} viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={15} cy={17} r={15} fill="var(--color-set-two-three-6)">
</circle>
<g clipPath="url(#clip0_117_28463)">
<path d="M15.0757 24.3888C15.8841 25.207 17.6847 24.9358 17.8785 23.6492C19.0847 15.6614 25.1202 8.92269 29.6876 2.57279C30.954 0.813155 28.042 -0.858436 26.7921 0.88025C22.6184 6.68227 17.3578 12.7875 15.2998 19.828C12.948 17.4244 10.5867 15.0437 7.94892 12.9317C6.27842 11.5936 3.88886 13.951 5.57736 15.3031C9.01404 18.0559 11.984 21.2659 15.0757 24.3888Z" fill="var(--color-set-two-three-5)" />
</g>
<defs>
<clipPath id="clip0_117_28463">
<rect width={25} height={25} fill="white" transform="translate(5)" />
</clipPath>
</defs>
</svg>
</Link>
</div>
<div className="fun_facts type_two">
<h4>
<CounterUp count={25} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_26">Years Of
Experience</h6>
</div>
<div className="m_image">
<img src="/assets/images/about/about-1-min.png" alt="img" className="img-fluid" />
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_70" />
{/*-============spacing==========-*/}
</section>
</>
)
}

86
components/sections/Content5.js Normal file
View File

@ -0,0 +1,86 @@
import Link from "next/link"
import VideoBox from "../elements/VideoBox"
export default function Content5() {
return (
<>
<section className="content-section position-relative bg_op_4" style={{ backgroundImage: 'url(assets/images/service-brlow-min.jpg)!important' }}>
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="background_overlay bg_13 z_0" />
<div className="container-no">
<div className="row align-items-center">
<div className="col-lg-2">
{/*-============spacing==========-*/}
<div className="pd_top_20" />
{/*-============spacing==========-*/}
<div className="position-relative z_1">
<img src="/assets/images/call-1-min.png" className="img-fluid m-auto" alt="img" />
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-4 pd_left_70 pd_right_70">
<div className="section_title color_white type_five">
<h4 className="sm_title"> Insurance Services</h4>
<div className="title_whole">
<h2 className="title"> Find an Insurance
Agent or Start Tracking
your Claims</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="theme_btn_all">
<Link href="#" className="theme_btn big2 icon_center color_white_two">
Track Your Cliam <span><i aria-hidden="false" className="far fa-arrow-alt-circle-right" /></span>
</Link></div>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-4 pd_left_70 pd_right_70">
<div className="position-relative">
<p className="color_white">
Sed ut perspiciatis unde omnis iste natus error
sit voluptaem accusantium doloremue laudantium
totam rem aperiam eauec abillo inventore.
</p>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
<div className="image_video_box_only type_one">
<div className="image one height_210px">
<img src="/assets/images/clain-1.png" className="img-fluid height_210px object-fit-cover" alt="img" />
<div className="video_box video-inner text-center">
<VideoBox />
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-2">
{/*-============spacing==========-*/}
<div className="pd_top_20" />
{/*-============spacing==========-*/}
<div className="position-relative z_1">
<img src="/assets/images/call-2-min.png" className="img-fluid m-auto" alt="img" />
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
)
}

128
components/sections/Content6.js Normal file
View File

@ -0,0 +1,128 @@
import Link from "next/link"
export default function Content6() {
return (
<>
<section className="content-section bg_light_1 position-relative overflow-hidden">
<div className="ab_img_left_top z_0 mr_top_minus_150">
<img src="/assets/images/line-st-2.png" className="img-fluid" alt="img" />
</div>
{/*-============spacing==========-*/}
<div className="pd_top_320" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-7 col-md-12">
<div className="section_title type_one">
<h4 className="sm_title"> Amazing Company</h4>
<div className="title_whole">
<h2 className="title"> We Help you Build and Grow Your Business</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
<div className="position-relative border_left_abolute_5px_two pd_left_40">
Sit amet consectetur adipiscing elites varius montes, massa, blandit orci. Sed
egestas tellus est aliquet eget.
At tristique nisl nullam pharetra sed tempor sed ipsum eivera consectetur augue
molestie amet utiverra
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-6">
<div className="icon_box_only type_five d-flex color_two trans">
<div className="icon">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<div className="content">
<div className="title_22">
<Link href="#">
Insurance Agency </Link></div>
<p>On the other hand denoue
with right indignation</p>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6">
<div className="icon_box_only type_five d-flex color_two trans">
<div className="icon">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<div className="content">
<div className="title_22">
<Link href="#">
Fsat &amp; Easy Process </Link></div>
<p>At vero eos et accu samus dignissimos ducimus</p>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6">
<div className="icon_box_only type_five d-flex color_two trans">
<div className="icon">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<div className="content">
<div className="title_22">
<Link href="#">
Control Over Policy </Link></div>
<p>Nam libero tempore cums soluta nobis cumque</p>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6">
<div className="icon_box_only type_five d-flex color_two trans">
<div className="icon">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<div className="content">
<div className="title_22">
<Link href="#">
Save Your Money </Link></div>
<p>Blame belongs those Who duty through weakness</p>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
<div className="col-lg-5 col-md-12">
<div className="image_box_only type_four">
<div className="image">
<img src="/assets/images/h3-ch-1-min.png" alt="img" className="img-fluid" />
</div>
<div className="abso_content">
<img src="/assets/images/rotate-logo-green-1.png" alt="img" className="img-fluid" />
<div className="authour_box">
<div className="d-flex align-items-center">
<img src="/assets/images/testimonial/test-1-min.png" alt="img" className="img-fluid" />
<h6 className="title_no_a_18">Wilcoxon</h6>
</div>
<h6 className="title_no_a_26">We’re Best Insurance Company</h6>
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
<div className="ab_img_right_bottom z_0">
<img src="/assets/images/bg-2-2.png" className="img-fluid" alt="img" />
</div>
</section>
</>
)
}

119
components/sections/Content7.js Normal file
View File

@ -0,0 +1,119 @@
import Link from "next/link"
import VideoBox from "../elements/VideoBox"
export default function Content7() {
return (
<>
<section className="content-section bg_light_1">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-center">
<div className="col-lg-5 col-md-12">
<div className="image_video_box_only type_one">
<div className="image one height_550px">
<img src="/assets/images/form-image-1.jpg" alt="img" className="img-fluid height_550px object-fit-cover" />
<div className="video_box video-inner text-center">
<VideoBox />
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-7 col-md-12 pd_left_40">
<div className="section_title type_one">
<h4 className="sm_title"> Amazing Company</h4>
<div className="title_whole">
<h2 className="title"> We Help you Build and Grow Your Business</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
<div className="position-relative border_left_abolute_5px_two pd_left_40">
Sit amet consectetur adipiscing elites varius montes, massa, blandit orci. Sed
egestas tellus est aliquet eget.
At tristique nisl nullam pharetra sed tempor sed ipsum eivera consectetur augue
molestie amet utiverra
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-6">
<div className="icon_box_only type_five d-flex color_two trans">
<div className="icon">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<div className="content">
<div className="title_22">
<Link href="#">
Insurance Agency </Link></div>
<p>On the other hand denoue
with right indignation</p>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6">
<div className="icon_box_only type_five d-flex color_two trans">
<div className="icon">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<div className="content">
<div className="title_22">
<Link href="#">
Fsat &amp; Easy Process </Link></div>
<p>At vero eos et accu samus dignissimos ducimus</p>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6">
<div className="icon_box_only type_five d-flex color_two trans">
<div className="icon">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<div className="content">
<div className="title_22">
<Link href="#">
Control Over Policy </Link></div>
<p>Nam libero tempore cums soluta nobis cumque</p>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6">
<div className="icon_box_only type_five d-flex color_two trans">
<div className="icon">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<div className="content">
<div className="title_22">
<Link href="#">
Save Your Money </Link></div>
<p>Blame belongs those Who duty through weakness</p>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_60" />
{/*-============spacing==========-*/}
</section>
</>
)
}

107
components/sections/Content8.js Normal file
View File

@ -0,0 +1,107 @@
import Link from "next/link"
export default function Content8() {
return (
<>
<section className="content-section bg_op_4" style={{ backgroundImage: 'url(assets/images/wave-pat-1.png)' }}>
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-6 col-sm-12">
{/*-============spacing==========-*/}
<div className="pd_bottom_60 d_md_none" />
{/*-============spacing==========-*/}
<div className="section_title medium type_one">
<h4 className="sm_title"> Great Offer For Customer</h4>
<div className="title_whole">
<h2 className="title"> Amazing Features For Insurance</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="icon_box_only type_eight">
<div className="icon_image">
<img src="/assets/images/img-icon-1.png" className="img-fluid" alt="img" />
</div>
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title"> Professional
Insurance
Services</h2>
</div>
<p> Pitatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="icon_box_only type_eight">
<div className="icon_image">
<img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" />
</div>
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title"> We’re Trusted <br /> &amp; Save your Money</h2>
</div>
<p> Pitatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="icon_box_only type_eight">
<div className="icon_image">
<img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" />
</div>
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title"> Corporate
&amp; Financial
Services</h2>
</div>
<p> Pitatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="icon_box_only type_eight">
<div className="icon_image">
<img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" />
</div>
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title"> So Much <br />
Fast &amp; Eeliable
Services</h2>
</div>
<p> Pitatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="desc_content_box style_one bg_op_1" style={{ backgroundImage: 'url(assets/images/line-3.png)!important' }}>
<div className="text">
<p>Sed ut unde iste natus error sit voluptatem accusantium doloremque
laudantium totam rem aperiam eaque </p>
</div>
<div className="theme_btn_all text-md-end">
<Link href="#" className="theme_btn big2 icon_center">
Contact us <span><i className="far fa-arrow-alt-circle-right" /></span>
</Link>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
</section>
</>
)
}

49
components/sections/Cta1.js Normal file
View File

@ -0,0 +1,49 @@
import Link from "next/link"
export default function Cta1() {
return (
<>
<section className="call-to-action-section position-relative bg_op_1" style={{ backgroundImage: 'url(assets/images/call-bg-h4-min.jpg)' }}>
<div className="background_overlay bg_11 z_0" />
{/*-============spacing==========-*/}
<div className="pd_top_50" />
{/*-============spacing==========-*/}
<div className="large-container">
<div className="row align-items-center">
<div className="col-lg-2">
<div className="image-layer position-relative z_1">
<img src="/assets/images/call-1-min.png" className="img-fluid" alt="img" />
</div>
</div>
<div className="col-lg-6">
<div className="section_title color_white">
<div className="title_whole">
<h2 className="title">
Find an Insurance Agent or Start Tracking your Claims
</h2>
</div>
</div>
</div>
<div className="col-lg-2">
<div className="theme_btn_all text-md-center">
<Link href="#" className="theme_btn big color_white_two rotate">
Track Your Claim <span> <i className="fi-rr-arrow-small-up" /></span>
</Link>
</div>
</div>
<div className="col-lg-2">
<div className="image-layer position-relative z_1">
<img src="/assets/images/call-2-min.png" className="img-fluid" alt="img" />
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
</section>
</>
)
}

37
components/sections/Cta2.js Normal file
View File

@ -0,0 +1,37 @@
import Link from "next/link"
export default function Cta2() {
return (
<>
<section className="position-relative z_99 mr_bottom_minus_80">
<div className="container">
<div className="call_to_action style_one">
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title">
Find an Insurance Agent or Start
Tracking your Claims
</h2>
</div>
</div>
<div className="theme_btn_all">
<Link href="#" className="theme_btn">
Track Your Claim <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
<div className="d-flex align-items-center contact_header_one">
<div className="icon_s">
<i className=" fi-rr-headphones" />
</div>
<div className="content">
<h6 className="tite">Need Help?</h6>
<div className="title_20"><Link href="tel:+000(123)45688">+000(123)456 88</Link></div>
</div>
</div>
</div>
</div>
</section>
</>
)
}

129
components/sections/Faq1.js Normal file
View File

@ -0,0 +1,129 @@
import { useState } from "react"
export default function Faq1() {
const [isActive, setIsActive] = useState({
status: false,
key: 1,
})
const handleToggle = (key) => {
if (isActive.key === key) {
setIsActive({
status: false,
})
} else {
setIsActive({
status: true,
key,
})
}
}
return (
<>
<section className="faq-section">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-6 col-sm-12">
<div className="section_title type_one">
<h4 className="sm_title"> Amazing Company</h4>
<div className="title_whole">
<h2 className="title"> Great Insurance your Solutions For Business</h2>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="position-relative br_left_3px_theme_color pd_left_10">
Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque
laudantium aperiam eaquecy
inventore veritatis architecto beatae
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="block_faq">
<div className="accordion-box">
<div className={isActive.key == 1 ? "accordion active-block" : "accordion"}>
<div className={isActive.key == 1 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(1)}>
<div className="question_box ">
<div className="title_no_a_18 trans">What Is Insurance Services?
</div>
<span className="icon_fq trans fi-rs-arrow-small-right" />
</div>
</div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
Serenity Is Multi-Faceted Blockchain Based Ecosystem, Energy
Retailer
For The People, Focusing On The Promotion Of Sustainable Living,
Renewable Energy Production And Smart Energy Grid Utility Services.
</div>
</div>
<div className={isActive.key == 2 ? "accordion active-block" : "accordion"}>
<div className={isActive.key == 2 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(2)}>
<div className="question_box">
<div className="title_no_a_18 trans">How Many Service We Provide ?
</div>
<span className="icon_fq trans fi-rs-arrow-small-right" />
</div>
</div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
Quis autem vel eum iure reprehenderit ea voluptate esse molestiae
consequatur veillum voluptas nullaes
</div>
</div>
<div className={isActive.key == 3 ? "accordion active-block" : "accordion"}>
<div className={isActive.key == 3 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(3)}>
<div className="question_box ">
<div className="title_no_a_18 trans">
How Much Experience Our Team Member ?
</div>
<span className="icon_fq trans fi-rs-arrow-small-right" />
</div>
</div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
Serenity Is Multi-Faceted Blockchain Based Ecosystem, Energy
Retailer
For The People, Focusing On The Promotion Of Sustainable Living,
Renewable Energy Production And Smart Energy Grid Utility Services.
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6 col-md-6 col-sm-12 pd_left_30">
<div className="image_box_only type_three">
<div className="left">
<div className="image one">
<img src=" assets/images/about/about-2-1.jpg" alt="img" className="img-fluid" />
</div>
<div className="image two">
<img src=" assets/images/about/about-2-3.jpg" alt="img" className="img-fluid" />
</div>
</div>
<div className="right">
<div className="image three">
<img src=" assets/images/about/about-2-2.jpg" alt="img" className="img-fluid" />
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</section>
</>
)
}

252
components/sections/Form1.js Normal file
View File

@ -0,0 +1,252 @@
import { useState } from "react"
export default function Form1() {
const [activeIndex, setActiveIndex] = useState(1)
const handleOnClick = (index) => {
setActiveIndex(index)
}
return (
<>
<section className="form-section bg_light_1 position-relative">
<div className="ab_img_left_top">
<img src="/assets/images/bg.png" className="img-fluid" alt="img" />
</div>
{/*-============spacing==========-*/}
<div className="pd_top_190" />
{/*-============spacing==========-*/}
<div className="container-fluid">
<div className="row align-items-end">
<div className="col-lg-3 col-md-3 col-sm-12">
<div className="image">
<img src="/assets/images/about/man-1.png" className="img-fluid m-auto" alt="img" />
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12">
<div className="section_title text-center type_one">
<h4 className="sm_title"> Get In Touch</h4>
<div className="title_whole">
<h2 className="title"> Get Started your Favorite<br /> Insurance Services </h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<section className="fom_tab_box custom_tabs type_one">
<ul className="nav nav-tabs links trans justify-content-center" role="tablist">
<li className="nav-item" onClick={() => handleOnClick(1)}>
<button className={activeIndex === 1 ? "nav-link active" : "nav-link"}>
Business Insurance
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(2)}>
<button className={activeIndex === 2 ? "nav-link active" : "nav-link"}>
Medical Insurance
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(3)}>
<button className={activeIndex === 3 ? "nav-link active" : "nav-link"}>
House Insurance
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(4)}>
<button className={activeIndex === 4 ? "nav-link active" : "nav-link"}>
Car Insurance
</button>
</li>
</ul>
<div className="s_tabs_content tab-content">
<div className={activeIndex === 1 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Your Full Name <span>*</span></label>
<input type="text" name="name" placeholder="Larry D. McMahon" required />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Phone</label>
<input type="text" name="phone" placeholder="+000 (123) 456 88" />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Email Address <span className="wpforms-required-label">*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-3 col-md-3 col-sm-12">
<label>Insurance Type</label>
<select>
<option value="Business">Business</option>
<option value="Fire">Fire</option>
<option value="Car">Car</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Marrige">Marrige</option>
<option value="Medical">Medical</option>
<option value="Travel">Travel</option>
</select>
</div>
<div className="col-lg-6 col-md-6 col-sm-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={8560} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>4000</b>
</div>
</div>
<div className="col-lg-3 col-md-3 col-sm-12 text-md-end">
<button type="submit">Get a Guote</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div className={activeIndex === 2 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Your Full Name <span>*</span></label>
<input type="text" name="name" placeholder="Larry D. McMahon" required />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Phone</label>
<input type="text" name="phone" placeholder="+000 (123) 456 88" />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Email Address <span className="wpforms-required-label">*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-3 col-md-3 col-sm-12">
<label>Insurance Type</label>
<select>
<option value="Business">Business</option>
<option value="Fire">Fire</option>
<option value="Car">Car</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Marrige">Marrige</option>
<option value="Medical">Medical</option>
<option value="Travel">Travel</option>
</select>
</div>
<div className="col-lg-6 col-md-6 col-sm-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={8560} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>4000</b>
</div>
</div>
<div className="col-lg-3 col-md-3 col-sm-12 text-md-end">
<button type="submit">Get a Guote</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div className={activeIndex === 3 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Your Full Name <span>*</span></label>
<input type="text" name="name" placeholder="Larry D. McMahon" required />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Phone</label>
<input type="text" name="phone" placeholder="+000 (123) 456 88" />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Email Address <span className="wpforms-required-label">*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-3 col-md-3 col-sm-12">
<label>Insurance Type</label>
<select>
<option value="Business">Business</option>
<option value="Fire">Fire</option>
<option value="Car">Car</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Marrige">Marrige</option>
<option value="Medical">Medical</option>
<option value="Travel">Travel</option>
</select>
</div>
<div className="col-lg-6 col-md-6 col-sm-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={8560} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>4000</b>
</div>
</div>
<div className="col-lg-3 col-md-3 col-sm-12 text-md-end">
<button type="submit">Get a Guote</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div className={activeIndex === 4 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Your Full Name <span>*</span></label>
<input type="text" name="name" placeholder="Larry D. McMahon" required />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Phone</label>
<input type="text" name="phone" placeholder="+000 (123) 456 88" />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Email Address <span className="wpforms-required-label">*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-3 col-md-3 col-sm-12">
<label>Insurance Type</label>
<select>
<option value="Business">Business</option>
<option value="Fire">Fire</option>
<option value="Car">Car</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Marrige">Marrige</option>
<option value="Medical">Medical</option>
<option value="Travel">Travel</option>
</select>
</div>
<div className="col-lg-6 col-md-6 col-sm-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={8560} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>4000</b>
</div>
</div>
<div className="col-lg-3 col-md-3 col-sm-12 text-md-end">
<button type="submit">Get a Guote</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
{/*-============spacing==========-*/}
<div className="pd_bottom_90" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-3 col-md-3 col-sm-12">
<div className="image">
<img src="/assets/images/about/man-2.png" className="img-fluid m-auto" alt="img" />
</div>
</div>
</div>
</div>
</section>
</>
)
}

144
components/sections/Form2.js Normal file
View File

@ -0,0 +1,144 @@
import { useState } from "react"
export default function Form2() {
const [activeIndex, setActiveIndex] = useState(1)
const handleOnClick = (index) => {
setActiveIndex(index)
}
return (
<>
<section className="form-section">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-lg-6">
{/*-============spacing==========-*/}
<div className="pd_top_50" />
{/*-============spacing==========-*/}
<div className="image_box_only type_two">
<div className="bg" />
<div className="left">
<div className="image one">
<img src="/assets/images/portfolio/project-1-min.png" alt="img" className="img-fluid" />
</div>
<div className="image two">
<img src="/assets/images/form-2-min.png" alt="img" className="img-fluid" />
</div>
</div>
<div className="right">
<div className="image three">
<img src="/assets/images/form-1-min.png" alt="img" className="img-fluid" />
</div>
<div className="image four">
<img src="/assets/images/logo-rotate.png" alt="img" className="img-fluid" />
</div>
</div>
</div>
</div>
<div className="col-lg-6 pd_top_70 pd_bottom_70 pd_left_60 pd_right_60 bg_9">
<div className="section_title type_one color_white">
<h4 className="sm_title"> Get In Touch</h4>
<div className="title_whole">
<h2 className="title"> Get Started your Favorite Insurance</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="fom_tab_box custom_tabs type_two">
<ul className="nav nav-tabs links trans" role="tablist">
<li className="nav-item" onClick={() => handleOnClick(1)}>
<button className={activeIndex === 1 ? "nav-link active" : "nav-link"}>
Business
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(2)}>
<button className={activeIndex === 2 ? "nav-link active" : "nav-link"}>
Medical
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(3)}>
<button className={activeIndex === 3 ? "nav-link active" : "nav-link"}>
House
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(4)}>
<button className={activeIndex === 4 ? "nav-link active" : "nav-link"}>
Car
</button>
</li>
</ul>
<div className="s_tabs_content tab-content">
<div className={activeIndex === 1 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-6">
<label>First Name <span>*</span></label>
<input type="text" name="first-name" placeholder="Larry" required />
</div>
<div className="col-lg-6">
<label>Last Name <span>*</span></label>
<input type="text" name="last-name" placeholder=" D. McMahon" required />
</div>
<div className="col-lg-6">
<label>Email <span>*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-6">
<label>Insurance Type</label>
<select>
<option value="Travel">Travel</option>
<option value="Car">Car</option>
<option value="Business">Business</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Medical">Medical</option>
<option value="Marriage">Marriage</option>
<option value="Fire">Fire</option>
</select>
</div>
<div className="col-lg-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={9000} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>6562</b>
</div>
</div>
<div className="col-lg-12">
{/*-============spacing==========-*/}
<div className="pd_top_15" />
{/*-============spacing==========-*/}
<button type="submit">Get A Quote</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div className={activeIndex === 2 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox">
<div className="contact_form_shortcode">
</div>
</div>
</div>
<div className={activeIndex === 4 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
<div className="contact_form_shortcode">
</div>
</div>
</div>
<div className={activeIndex === 5 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
)
}

62
components/sections/Form3.js Normal file
View File

@ -0,0 +1,62 @@
export default function Form3() {
return (
<>
<section className="form-section mr_bottom_minus_250 position-relative z_1">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-12">
<div className="contact_form_box_all style_one bg_14 bg_op_4 mr_right_40 z_1" style={{ backgroundImage: 'url(assets/images/form-shape-1.png)' }}>
<div className="section_title color_white type_one">
<h4 className="sm_title"> Check Your Favorite Insurance</h4>
<div className="title_whole">
<h2 className="title"> Get Started Favorite
Insurance</h2>
</div>
</div>
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="forms-field-name mr_bottom_20">
<input type="text" name="name" placeholder="First Name" required />
</div>
<div className="forms-field-name mr_bottom_20">
<input type="text" name="sname" placeholder="Second Name" required />
</div>
<div className="forms-field-email mr_bottom_20">
<input type="text" name="email" placeholder="Email" spellCheck="false" required />
</div>
<div className="forms-field-Dropdown mr_bottom_40">
<select name="select">
<option value className="placeholder" disabled >Insurance Type</option>
<option value="Life Insurance">Life Insurance</option>
<option value="Health Insurance">Health Insurance
</option>
<option value="House Insurance">House Insurance</option>
<option value="Travel Insurance">Travel Insurance
</option>
</select>
</div>
<div className="forms-field-number-slider mr_bottom_40">
<input type="range" name="range" min={0} max={7000} step={1} style={{ width: "100%" }} />
<div className="slider-hint mr_top_5" data-hint="Selected Value: {value}">
Selected Value: <b>4500</b>
</div>
</div>
<button type="submit">Get a Guote</button>
</form>
</div>
</div>
</div>
<div className="col-lg-6 col-md-12 mr_left_minus_100">
<div className="image_box_only type_nine">
<img src="/assets/images/form-image-1.jpg" className="img-fluid" alt="img" />
</div>
</div>
</div>
</div>
</section>
</>
)
}

304
components/sections/Form4.js Normal file
View File

@ -0,0 +1,304 @@
import { useState } from "react"
export default function Form4() {
const [activeIndex, setActiveIndex] = useState(1)
const handleOnClick = (index) => {
setActiveIndex(index)
}
return (
<>
<section className="form-section">
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_one">
<h4 className="sm_title"> Check Your Favorite Insurance</h4>
<div className="title_whole">
<h2 className="title"> Get Started Favorite Insurance</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-12">
<section className="fom_tab_box custom_tabs type_four">
<ul className="nav nav-tabs links trans justify-content-center" role="tablist">
<li className="nav-item" onClick={() => handleOnClick(1)}>
<button className={activeIndex === 1 ? "nav-link active" : "nav-link"}>
House Insurance
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(2)}>
<button className={activeIndex === 2 ? "nav-link active" : "nav-link"}>
Medical Insurance
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(3)}>
<button className={activeIndex === 3 ? "nav-link active" : "nav-link"}>
Travel Insurance
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(4)}>
<button className={activeIndex === 4 ? "nav-link active" : "nav-link"}>
Life Insurance
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(5)}>
<button className={activeIndex === 5 ? "nav-link active" : "nav-link"}>
Car Insurance
</button>
</li>
</ul>
<div className="s_tabs_content tab-content">
<div className={activeIndex === 1 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox yes_image d-flex ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-6 col-sm-12">
<label>Your Full Name <span>*</span></label>
<input type="text" name="name" placeholder="Larry D. McMahon" required />
</div>
<div className="col-lg-6 col-sm-12">
<label>Phone</label>
<input type="text" name="phone" placeholder="+000 (123) 456 88" />
</div>
<div className="col-lg-6 col-sm-12">
<label>Email Address <span className="wpforms-required-label">*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-6 col-sm-12">
<label>Insurance Type</label>
<select>
<option value="Business">Business</option>
<option value="Fire">Fire</option>
<option value="Car">Car</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Marrige">Marrige</option>
<option value="Medical">Medical</option>
<option value="Travel">Travel</option>
</select>
</div>
<div className="col-sm-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={8560} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>4000</b>
</div>
</div>
<div className="col-lg-12 col-sm-12 text-md-end">
<button type="submit">Get a Guote</button>
</div>
</div>
</form>
</div>
<div className="image trans">
<img src="/assets/images/frm-1-min.png" alt="img" className="img-fluid" />
</div>
</div>
</div>
<div className={activeIndex === 2 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox yes_image d-flex ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-6 col-sm-12">
<label>Your Full Name <span>*</span></label>
<input type="text" name="name" placeholder="Larry D. McMahon" required />
</div>
<div className="col-lg-6 col-sm-12">
<label>Phone</label>
<input type="text" name="phone" placeholder="+000 (123) 456 88" />
</div>
<div className="col-lg-6 col-sm-12">
<label>Email Address <span className="wpforms-required-label">*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-6 col-sm-12">
<label>Insurance Type</label>
<select>
<option value="Business">Business</option>
<option value="Fire">Fire</option>
<option value="Car">Car</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Marrige">Marrige</option>
<option value="Medical">Medical</option>
<option value="Travel">Travel</option>
</select>
</div>
<div className="col-sm-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={8560} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>4000</b>
</div>
</div>
<div className="col-lg-3 col-md-3 col-sm-12 text-md-end">
<button type="submit">Get a Guote</button>
</div>
</div>
</form>
</div>
<div className="image trans">
<img src="/assets/images/frm-1-min.png" alt="img" className="img-fluid" />
</div>
</div>
</div>
<div className={activeIndex === 3 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox yes_image d-flex ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-6 col-sm-12">
<label>Your Full Name <span>*</span></label>
<input type="text" name="name" placeholder="Larry D. McMahon" required />
</div>
<div className="col-lg-6 col-sm-12">
<label>Phone</label>
<input type="text" name="phone" placeholder="+000 (123) 456 88" />
</div>
<div className="col-lg-6 col-sm-12">
<label>Email Address <span className="wpforms-required-label">*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-6 col-sm-12">
<label>Insurance Type</label>
<select>
<option value="Business">Business</option>
<option value="Fire">Fire</option>
<option value="Car">Car</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Marrige">Marrige</option>
<option value="Medical">Medical</option>
<option value="Travel">Travel</option>
</select>
</div>
<div className="col-sm-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={8560} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>4000</b>
</div>
</div>
<div className="col-lg-3 col-md-3 col-sm-12 text-md-end">
<button type="submit">Get a Guote</button>
</div>
</div>
</form>
</div>
<div className="image trans">
<img src="/assets/images/frm-1-min.png" alt="img" className="img-fluid" />
</div>
</div>
</div>
<div className={activeIndex === 4 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox yes_image d-flex ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-6 col-sm-12">
<label>Your Full Name <span>*</span></label>
<input type="text" name="name" placeholder="Larry D. McMahon" required />
</div>
<div className="col-lg-6 col-sm-12">
<label>Phone</label>
<input type="text" name="phone" placeholder="+000 (123) 456 88" />
</div>
<div className="col-lg-6 col-sm-12">
<label>Email Address <span className="wpforms-required-label">*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-6 col-sm-12">
<label>Insurance Type</label>
<select>
<option value="Business">Business</option>
<option value="Fire">Fire</option>
<option value="Car">Car</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Marrige">Marrige</option>
<option value="Medical">Medical</option>
<option value="Travel">Travel</option>
</select>
</div>
<div className="col-sm-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={8560} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>4000</b>
</div>
</div>
<div className="col-lg-3 col-md-3 col-sm-12 text-md-end">
<button type="submit">Get a Guote</button>
</div>
</div>
</form>
</div>
<div className="image trans">
<img src="/assets/images/frm-1-min.png" alt="img" className="img-fluid" />
</div>
</div>
</div>
<div className={activeIndex === 5 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox yes_image d-flex ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-6 col-sm-12">
<label>Your Full Name <span>*</span></label>
<input type="text" name="name" placeholder="Larry D. McMahon" required />
</div>
<div className="col-lg-6 col-sm-12">
<label>Phone</label>
<input type="text" name="phone" placeholder="+000 (123) 456 88" />
</div>
<div className="col-lg-6 col-sm-12">
<label>Email Address <span className="wpforms-required-label">*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-6 col-sm-12">
<label>Insurance Type</label>
<select>
<option value="Business">Business</option>
<option value="Fire">Fire</option>
<option value="Car">Car</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Marrige">Marrige</option>
<option value="Medical">Medical</option>
<option value="Travel">Travel</option>
</select>
</div>
<div className="col-sm-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={8560} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>4000</b>
</div>
</div>
<div className="col-lg-3 col-md-3 col-sm-12 text-md-end">
<button type="submit">Get a Guote</button>
</div>
</div>
</form>
</div>
<div className="image trans">
<img src="/assets/images/frm-1-min.png" alt="img" className="img-fluid" />
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_90" />
{/*-============spacing==========-*/}
</section>
</>
)
}

252
components/sections/Form5.js Normal file
View File

@ -0,0 +1,252 @@
import { useState } from "react"
export default function Form5() {
const [activeIndex, setActiveIndex] = useState(1)
const handleOnClick = (index) => {
setActiveIndex(index)
}
return (
<>
<section className="form-section bg_light_1 position-relative">
<div className="ab_img_left_top">
<img src="/assets/images/bg.png" className="img-fluid" alt="img" />
</div>
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container-fluid">
<div className="row align-items-end">
<div className="col-lg-3 col-md-3 col-sm-12">
<div className="image">
<img src="/assets/images/about/man-1.png" className="img-fluid m-auto" alt="img" />
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12">
<div className="section_title text-center type_one">
<h4 className="sm_title"> Get In Touch</h4>
<div className="title_whole">
<h2 className="title"> Get Started your Favorite<br /> Insurance Services </h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<section className="fom_tab_box custom_tabs type_one">
<ul className="nav nav-tabs links trans justify-content-center" role="tablist">
<li className="nav-item" onClick={() => handleOnClick(1)}>
<button className={activeIndex === 1 ? "nav-link active" : "nav-link"}>
Business Insurance
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(2)}>
<button className={activeIndex === 2 ? "nav-link active" : "nav-link"}>
Medical Insurance
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(3)}>
<button className={activeIndex === 3 ? "nav-link active" : "nav-link"}>
House Insurance
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(4)}>
<button className={activeIndex === 4 ? "nav-link active" : "nav-link"}>
Car Insurance
</button>
</li>
</ul>
<div className="s_tabs_content tab-content">
<div className={activeIndex === 1 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Your Full Name <span>*</span></label>
<input type="text" name="name" placeholder="Larry D. McMahon" required />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Phone</label>
<input type="text" name="phone" placeholder="+000 (123) 456 88" />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Email Address <span className="wpforms-required-label">*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-3 col-md-3 col-sm-12">
<label>Insurance Type</label>
<select>
<option value="Business">Business</option>
<option value="Fire">Fire</option>
<option value="Car">Car</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Marrige">Marrige</option>
<option value="Medical">Medical</option>
<option value="Travel">Travel</option>
</select>
</div>
<div className="col-lg-6 col-md-6 col-sm-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={8560} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>4000</b>
</div>
</div>
<div className="col-lg-3 col-md-3 col-sm-12 text-md-end">
<button type="submit">Get a Guote</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div className={activeIndex === 2 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Your Full Name <span>*</span></label>
<input type="text" name="name" placeholder="Larry D. McMahon" required />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Phone</label>
<input type="text" name="phone" placeholder="+000 (123) 456 88" />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Email Address <span className="wpforms-required-label">*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-3 col-md-3 col-sm-12">
<label>Insurance Type</label>
<select>
<option value="Business">Business</option>
<option value="Fire">Fire</option>
<option value="Car">Car</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Marrige">Marrige</option>
<option value="Medical">Medical</option>
<option value="Travel">Travel</option>
</select>
</div>
<div className="col-lg-6 col-md-6 col-sm-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={8560} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>4000</b>
</div>
</div>
<div className="col-lg-3 col-md-3 col-sm-12 text-md-end">
<button type="submit">Get a Guote</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div className={activeIndex === 3 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Your Full Name <span>*</span></label>
<input type="text" name="name" placeholder="Larry D. McMahon" required />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Phone</label>
<input type="text" name="phone" placeholder="+000 (123) 456 88" />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Email Address <span className="wpforms-required-label">*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-3 col-md-3 col-sm-12">
<label>Insurance Type</label>
<select>
<option value="Business">Business</option>
<option value="Fire">Fire</option>
<option value="Car">Car</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Marrige">Marrige</option>
<option value="Medical">Medical</option>
<option value="Travel">Travel</option>
</select>
</div>
<div className="col-lg-6 col-md-6 col-sm-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={8560} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>4000</b>
</div>
</div>
<div className="col-lg-3 col-md-3 col-sm-12 text-md-end">
<button type="submit">Get a Guote</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div className={activeIndex === 4 ? "tab-pane active" : "tab-pane"}>
<div className="contentbox ">
<div className="contact_form_shortcode">
<form method="post" action="#">
<div className="row">
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Your Full Name <span>*</span></label>
<input type="text" name="name" placeholder="Larry D. McMahon" required />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Phone</label>
<input type="text" name="phone" placeholder="+000 (123) 456 88" />
</div>
<div className="col-lg-4 col-md-4 col-sm-12">
<label>Email Address <span className="wpforms-required-label">*</span></label>
<input type="email" name="email" placeholder="support@gmail.com" required />
</div>
<div className="col-lg-3 col-md-3 col-sm-12">
<label>Insurance Type</label>
<select>
<option value="Business">Business</option>
<option value="Fire">Fire</option>
<option value="Car">Car</option>
<option value="Life">Life</option>
<option value="House">House</option>
<option value="Marrige">Marrige</option>
<option value="Medical">Medical</option>
<option value="Travel">Travel</option>
</select>
</div>
<div className="col-lg-6 col-md-6 col-sm-12">
<label>Limite Of Balance</label>
<input type="range" name="range" min={0} max={8560} step={1} style={{ width: "100%" }} />
<div className="slider-hint">Selected Value: <b>4000</b>
</div>
</div>
<div className="col-lg-3 col-md-3 col-sm-12 text-md-end">
<button type="submit">Get a Guote</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
{/*-============spacing==========-*/}
<div className="pd_bottom_90" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-3 col-md-3 col-sm-12">
<div className="image">
<img src="/assets/images/about/man-2.png" className="img-fluid m-auto" alt="img" />
</div>
</div>
</div>
</div>
</section>
</>
)
}

89
components/sections/Funfacts1.js Normal file
View File

@ -0,0 +1,89 @@
import dynamic from 'next/dynamic'
const CounterUp = dynamic(() => import('../elements/CounterUp'), {
ssr: false,
})
export default function Funfacts1() {
return (
<>
<section className="fub-fact-section mr_bottom_minus_90 position-relative z_2">
<div className="medium-container">
<div className="inner-section bg_op_1 position-relative overflow-hidden pd_top_60 pd_bottom_30 pd_left_60 pd_right_60 md_pd_left_15 md_pd_right_15" style={{ backgroundImage: 'url(assets/images/page-image-1-min.jpg)' }}>
<div className="background_overlay z_0" />
<div className="row">
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_three">
<div className="icon trans">
<i className="color_white flaticon-satisfaction" />
</div>
<div className="content">
<h4>
<CounterUp count={8563} color="color_white" time={1} />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Saticfied Custimer</h6>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_three">
<div className="icon trans">
<i className="color_white flaticon-business-people" />
</div>
<div className="content">
<h4>
<CounterUp count={263} color="color_white" time={1} />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Experience Team</h6>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_three">
<div className="icon trans">
<i className="color_white flaticon-reviews" />
</div>
<div className="content">
<h4>
<CounterUp color="color_white" count={100} time={1} />
<small className="color_white"> % </small>
</h4>
<h6 className="title_no_a_18 color_white">Satisfaction Rate</h6>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_three">
<div className="icon trans">
<i className="color_white flaticon-trophy" />
</div>
<div className="content">
<h4>
<CounterUp color="color_white" count={863} time={1} />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Awards Winning</h6>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
</div>
</section>
</>
)
}

62
components/sections/Funfacts2.js Normal file
View File

@ -0,0 +1,62 @@
import dynamic from 'next/dynamic'
const CounterUp = dynamic(() => import('../elements/CounterUp'), {
ssr: false,
})
export default function Funfacts2() {
return (
<>
<section className="funfacts-section">
<div className="container">
<div className="row">
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-6 w_50_after_max_768">
<div className="fun_facts type_one color_three text-start">
<h4>
<CounterUp count={528} time={1} />
<small>
k+ </small></h4>
<h6 className="title_no_a_18">Customer Profiles</h6>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-6 w_50_after_max_768">
<div className="fun_facts type_one color_three text-start">
<h4>
<CounterUp count={99} time={1} />
<small>
% </small></h4>
<h6 className="title_no_a_18">Satisficed Customer</h6>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-6 w_50_after_max_768">
<div className="fun_facts type_one color_three text-start">
<h4>
<CounterUp count={36} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Years Of Experience</h6>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-6 w_50_after_max_768">
<div className="fun_facts type_one color_three text-start">
<h4>
<CounterUp count={803} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Awards Winning</h6>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
)
}

102
components/sections/Funfacts3.js Normal file
View File

@ -0,0 +1,102 @@
import dynamic from 'next/dynamic'
import VideoBox from "../elements/VideoBox"
const CounterUp = dynamic(() => import('../elements/CounterUp'), {
ssr: false,
})
export default function Funfacts3() {
return (
<>
<section className="fun-fact-video">
<div className="d-flex flex-wrap">
<div className="video-section w_50">
{/*-============spacing==========-*/}
<div className="pd_top_70 d_md_none" />
{/*-============spacing==========-*/}
<div className="image_video_box_only type_one">
<div className="image one">
<img src="/assets/images/an-1-min.png" alt="img" className="img-fluid" />
<div className="video_box video-inner text-center">
<VideoBox />
</div>
</div>
</div>
</div>
<div className="fun-facts-section bg_op_4 bg_2 w_50 pd_top_90 pd_left_90 pd_right_90 pd_bottom_90 md_pd_left_15 md_pd_right_15" style={{ backgroundImage: 'url(assets/images/dot-2.png)!important' }}>
<div className="row">
<div className="col-lg-8">
<div className="section_title color_white type_one">
<h4 className="sm_title"> Company Statistics Analysis</h4>
<div className="title_whole">
<h2 className="title"> Great Achievement
For Insurance</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-6">
<div className="fun_facts type_four color_two">
<div className="icon trans">
<i className=" flaticon-satisfaction" /></div>
<h4>
<CounterUp count={8563} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Satisfied Custimer</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="fun_facts type_four color_three">
<div className="icon trans">
<i className=" flaticon-reviews" /></div>
<h4>
<CounterUp count={100} time={1} />
<small>
% </small></h4>
<h6 className="title_no_a_18">Saticfied Custimer</h6>
</div>
</div>
<div className="col-lg-6">
{/*-============spacing==========-*/}
<div className="pd_top_30" />
{/*-============spacing==========-*/}
<div className="fun_facts type_four color_three">
<div className="icon trans">
<i className=" flaticon-satisfaction" /></div>
<h4>
<CounterUp count={8563} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Satisfied Custimer</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_top_30" />
{/*-============spacing==========-*/}
<div className="fun_facts type_four color_three">
<div className="icon trans">
<i className=" flaticon-trophy" /></div>
<h4>
<CounterUp count={963} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Awards Winning</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
)
}

95
components/sections/Funfacts4.js Normal file
View File

@ -0,0 +1,95 @@
import dynamic from 'next/dynamic'
const CounterUp = dynamic(() => import('../elements/CounterUp'), {
ssr: false,
})
export default function Funfacts4() {
return (
<>
<section className="fub-fact-section position-relative z_2 bg_op_1 overflow-hidden" style={{ backgroundImage: 'url(assets/images/page-image-1-min.jpg)' }}>
{/*-============spacing==========-*/}
<div className="pd_top_60" />
{/*-============spacing==========-*/}
<div className="medium-container">
<div className="background_overlay z_0" />
<div className="row">
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_three">
<div className="icon trans">
<i className="color_white flaticon-satisfaction" />
</div>
<div className="content">
<h4>
<CounterUp count={8563} time={1} color="color_white" />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Saticfied Custimer</h6>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_three">
<div className="icon trans">
<i className="color_white flaticon-business-people" />
</div>
<div className="content">
<h4>
<CounterUp count={263} time={1} color="color_white" />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Experience Team</h6>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_three">
<div className="icon trans">
<i className="color_white flaticon-reviews" />
</div>
<div className="content">
<h4>
<CounterUp count={100} time={1} color="color_white" />
<small className="color_white"> % </small>
</h4>
<h6 className="title_no_a_18 color_white">Satisfaction Rate</h6>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_three">
<div className="icon trans">
<i className="color_white flaticon-trophy" />
</div>
<div className="content">
<h4>
<CounterUp count={15} time={1} color="color_white" />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Awards Winning</h6>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</section>
</>
)
}

188
components/sections/Offer1.js Normal file
View File

@ -0,0 +1,188 @@
import Link from "next/link"
import { Autoplay, Navigation, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 3,
spaceBetween: 30,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop: true,
// Navigation
navigation: {
nextEl: '.h1n',
prevEl: '.h1p',
},
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 30,
},
575: {
slidesPerView: 2,
spaceBetween: 30,
},
767: {
slidesPerView: 2,
spaceBetween: 30,
},
991: {
slidesPerView: 2,
spaceBetween: 30,
},
1199: {
slidesPerView: 3,
spaceBetween: 30,
},
1350: {
slidesPerView: 3,
spaceBetween: 30,
},
}
}
export default function Offer1() {
return (
<>
<section className="what-we-offer bg_light_2">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-end">
<div className="col-lg-6 col-md-12">
<div className="section_title type_four">
<h4 className="sm_title"> What We Offer</h4>
<div className="title_whole">
<h2 className="title"> Key Features For your Insurance Business</h2>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
<div className="col-lg-6 col-md-12">
<div className="position-relative position_p_relative">
Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque
laudanti totam aperiam eaquecy epsa abillo inventore veritatis architecto beatae
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="service_post style_two position-relative position_one nav_false dot_false">
<Swiper {...swiperOptions} className="theme_carousel ">
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-1.jpg" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-business-trip trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Corporate Professional Insurance Liability
</Link>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-2.jpg" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-salary trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Easy System &amp; Trusted, Save your Money
</Link>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-3.jpg" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-management trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Dedicated Customer Support Team Member
</Link>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
</p>
</div>
</SwiperSlide>
</Swiper>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
)
}

43
components/sections/Portfolio1.js Normal file
View File

@ -0,0 +1,43 @@
// import PortfolioFilter from "../elements/PortfolioFilter"
import dynamic from 'next/dynamic'
const PortfolioFilter1 = dynamic(() => import('../elements/PortfolioFilter1'), {
ssr: false,
})
export default function Portfolio1() {
return (
<>
<section className="portfolio-section bg_2 position-relative bg_op_8" style={{ backgroundImage: 'url(assets/images/line-4.png)!important' }}>
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="large-container">
<div className="row">
<div className="col-lg-7 m-auto">
<div className="section_title text-center color_white type_one">
<h4 className="sm_title"> Popular Clients</h4>
<div className="title_whole">
<h2 className="title"> We’ve 1520+
Global Premium
Clients</h2>
</div>
<p> Sed ut perspiciatis unde omnis iste natusey
voluptatem accusantium dolore</p>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<section className="portfolio_v1 portfolio_tabs ajax_protfolio_enabled ">
<PortfolioFilter1 />
{/*-============spacing==========-*/}
<div className="pd_bottom_70" />
{/*-============spacing==========-*/}
</section>
</div>
</section>
</>
)
}

104
components/sections/Process1.js Normal file
View File

@ -0,0 +1,104 @@
import Link from "next/link"
export default function Process1() {
return (
<>
<section className="process-section position-relative">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="ab_img_center height_264px pd_top_40">
<img src="/assets/images/arrow.png" className="img-fluid m-auto" alt="img" />
</div>
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_one">
<h4 className="sm_title"> Get In Touch</h4>
<div className="title_whole">
<h2 className="title"> Easy Way to Get Our Popular <br /> Insurance Services</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_60" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{/*-============spacing==========-*/}
<div className="pd_top_60" />
{/*-============spacing==========-*/}
<div className="process_box type_one">
<div className="image_box">
<img src="/assets/images/process/process-1-1.png" className="img-fluid" alt="img" />
<p>Step 01</p>
</div>
<div className="content">
<div className="icon trans">
<i className=" flaticon-insurance" />
</div>
<div className="title_22">
<Link href="#">
Choose Insurance </Link>
</div>
<p>Sed ut perspiciatis unde omnis
este natus voluptatem accusantium doloremque laudante aperis</p>
<div className="border_bg" />
</div>
</div>
</div>
<div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div className="process_box type_one">
<div className="image_box">
<img src="/assets/images/process/process-1-2.png" className="img-fluid" alt="img" />
<p>Step 02</p>
</div>
<div className="content">
<div className="icon trans">
<i className=" flaticon-interview" />
</div>
<div className="title_22">
<Link href="#">
Meet With Agent </Link>
</div>
<p>Sed ut perspiciatis unde omnis
este natus voluptatem accusantium doloremque laudante aperis</p>
<div className="border_bg" />
</div>
</div>
</div>
<div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{/*-============spacing==========-*/}
<div className="pd_top_60" />
{/*-============spacing==========-*/}
<div className="process_box type_one">
<div className="image_box">
<img src="/assets/images/process/process-1-3.png" className="img-fluid" alt="img" />
<p>Step 03</p>
</div>
<div className="content">
<div className="icon trans">
<i className=" flaticon-piggy-bank" />
</div>
<div className="title_22">
<Link href="#">
Get Insurance </Link>
</div>
<p>Sed ut perspiciatis unde omnis
este natus voluptatem accusantium doloremque laudante aperis</p>
<div className="border_bg" />
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</section>
</>
)
}

123
components/sections/Process2.js Normal file
View File

@ -0,0 +1,123 @@
import Link from "next/link"
export default function Process2() {
return (
<>
<section className="process-section">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-7 m-auto">
<div className="section_title text-center type_four">
<h4 className="sm_title"> Working Process</h4>
<div className="title_whole">
<h2 className="title"> Easy Way to Get Our Popular Insurance Services</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="process_box type_two type_three color_two hover_1_get">
<div className="image_box hover_1">
<img src="/assets/images/process/pro-h4-1-min.jpg" alt="img" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans" />
</div>
<div className="content_no">
<div className="con_top">
<p className="step">Step 01</p>
<div className="title_22">
<Link href="#">
Meet Our Agent </Link></div>
</div>
<p>Sed ut perspiciatis undey
este natus volutate</p>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="process_box type_two type_three color_two hover_1_get">
<div className="image_box hover_1">
<img src="/assets/images/process/pro-h4-2-min.jpg" alt="img" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans" />
</div>
<div className="content_no">
<div className="con_top">
<p className="step">Step 02</p>
<div className="title_22">
<Link href="#">
Select Insurance </Link></div>
</div>
<p>Sed ut perspiciatis undey
este natus volutate</p>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="process_box type_two type_three color_two hover_1_get">
<div className="image_box hover_1">
<img src="/assets/images/process/pro-h4-3-min.jpg" alt="img" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans" />
</div>
<div className="content_no">
<div className="con_top">
<p className="step">Step 03</p>
<div className="title_22">
<Link href="#">
Create Account </Link></div>
</div>
<p>Sed ut perspiciatis undey
este natus volutate</p>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="process_box type_two type_three color_two hover_1_get">
<div className="image_box hover_1">
<img src="/assets/images/process/pro-h4-4-min.jpg" alt="img" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans" />
</div>
<div className="content_no">
<div className="con_top">
<p className="step">Step 04</p>
<div className="title_22">
<Link href="#">
Get Insurance </Link></div>
</div>
<p>Sed ut perspiciatis undey
este natus volutate</p>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_70" />
{/*-============spacing==========-*/}
</section>
</>
)
}

123
components/sections/Process3.js Normal file
View File

@ -0,0 +1,123 @@
import Link from "next/link"
export default function Process3() {
return (
<>
<section className="process-section">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_five">
<h4 className="sm_title"> Our performance</h4>
<div className="title_whole">
<h2 className="title"> How To Get Online Insurance Loan</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="process_box type_four color_two">
<div className="icon trans">
<img src="/assets/images/home-6-icon-1.png" className="img-fluid" alt="img" />
<p className="step bg_2">1</p>
<svg width={123} height={16} viewBox="0 0 123 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M122.354 8.35355C122.549 8.15829 122.549 7.84171 122.354 7.64645L119.172 4.46447C118.976 4.2692 118.66 4.2692 118.464 4.46447C118.269 4.65973 118.269 4.97631 118.464 5.17157L121.293 8L118.464 10.8284C118.269 11.0237 118.269 11.3403 118.464 11.5355C118.66 11.7308 118.976 11.7308 119.172 11.5355L122.354 8.35355ZM0 8.5H3.05V7.5H0V8.5ZM9.15 8.5H15.25V7.5H9.15V8.5ZM21.35 8.5H27.45V7.5H21.35V8.5ZM33.55 8.5H39.65V7.5H33.55V8.5ZM45.75 8.5H51.85V7.5H45.75V8.5ZM57.95 8.5H64.05V7.5H57.95V8.5ZM70.15 8.5H76.25V7.5H70.15V8.5ZM82.35 8.5H88.45V7.5H82.35V8.5ZM94.55 8.5H100.65V7.5H94.55V8.5ZM106.75 8.5H112.85V7.5H106.75V8.5ZM118.95 8.5H122V7.5H118.95V8.5ZM122.707 8.70711C123.098 8.31658 123.098 7.68342 122.707 7.29289L116.343 0.928932C115.953 0.538408 115.319 0.538408 114.929 0.928932C114.538 1.31946 114.538 1.95262 114.929 2.34315L120.586 8L114.929 13.6569C114.538 14.0474 114.538 14.6805 114.929 15.0711C115.319 15.4616 115.953 15.4616 116.343 15.0711L122.707 8.70711ZM0 9H3.05V7H0V9ZM9.15 9H15.25V7H9.15V9ZM21.35 9H27.45V7H21.35V9ZM33.55 9H39.65V7H33.55V9ZM45.75 9H51.85V7H45.75V9ZM57.95 9H64.05V7H57.95V9ZM70.15 9H76.25V7H70.15V9ZM82.35 9H88.45V7H82.35V9ZM94.55 9H100.65V7H94.55V9ZM106.75 9H112.85V7H106.75V9ZM118.95 9H122V7H118.95V9Z" fill="#181818" />
</svg>
</div>
<div className="content_no">
<div className="con_top">
<div className="title_20">
<Link href="#">
Download and
complete your Data </Link></div>
<p>Sed ut persiciatis omnis
natus errorsit voluptatem
accusantium doloremue
laudantium totam rem</p>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="process_box type_four color_two">
<div className="icon trans">
<img src="/assets/images/home-6-icon-2.png" className="img-fluid" alt="img" />
<p className="step bg_15">2</p>
<svg width={123} height={16} viewBox="0 0 123 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M122.354 8.35355C122.549 8.15829 122.549 7.84171 122.354 7.64645L119.172 4.46447C118.976 4.2692 118.66 4.2692 118.464 4.46447C118.269 4.65973 118.269 4.97631 118.464 5.17157L121.293 8L118.464 10.8284C118.269 11.0237 118.269 11.3403 118.464 11.5355C118.66 11.7308 118.976 11.7308 119.172 11.5355L122.354 8.35355ZM0 8.5H3.05V7.5H0V8.5ZM9.15 8.5H15.25V7.5H9.15V8.5ZM21.35 8.5H27.45V7.5H21.35V8.5ZM33.55 8.5H39.65V7.5H33.55V8.5ZM45.75 8.5H51.85V7.5H45.75V8.5ZM57.95 8.5H64.05V7.5H57.95V8.5ZM70.15 8.5H76.25V7.5H70.15V8.5ZM82.35 8.5H88.45V7.5H82.35V8.5ZM94.55 8.5H100.65V7.5H94.55V8.5ZM106.75 8.5H112.85V7.5H106.75V8.5ZM118.95 8.5H122V7.5H118.95V8.5ZM122.707 8.70711C123.098 8.31658 123.098 7.68342 122.707 7.29289L116.343 0.928932C115.953 0.538408 115.319 0.538408 114.929 0.928932C114.538 1.31946 114.538 1.95262 114.929 2.34315L120.586 8L114.929 13.6569C114.538 14.0474 114.538 14.6805 114.929 15.0711C115.319 15.4616 115.953 15.4616 116.343 15.0711L122.707 8.70711ZM0 9H3.05V7H0V9ZM9.15 9H15.25V7H9.15V9ZM21.35 9H27.45V7H21.35V9ZM33.55 9H39.65V7H33.55V9ZM45.75 9H51.85V7H45.75V9ZM57.95 9H64.05V7H57.95V9ZM70.15 9H76.25V7H70.15V9ZM82.35 9H88.45V7H82.35V9ZM94.55 9H100.65V7H94.55V9ZM106.75 9H112.85V7H106.75V9ZM118.95 9H122V7H118.95V9Z" fill="#181818" />
</svg>
</div>
<div className="content_no">
<div className="con_top">
<div className="title_20">
<Link href="#">
Verification to get
a Credit limit </Link></div>
<p>Sed ut persiciatis omnis
natus errorsit voluptatem
accusantium doloremue
laudantium totam rem</p>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="process_box type_four">
<div className="icon trans">
<img src="/assets/images/home-6-icon-3.png" className="img-fluid" alt="img" />
<p className="step bg_14">3</p>
<svg width={123} height={16} viewBox="0 0 123 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M122.354 8.35355C122.549 8.15829 122.549 7.84171 122.354 7.64645L119.172 4.46447C118.976 4.2692 118.66 4.2692 118.464 4.46447C118.269 4.65973 118.269 4.97631 118.464 5.17157L121.293 8L118.464 10.8284C118.269 11.0237 118.269 11.3403 118.464 11.5355C118.66 11.7308 118.976 11.7308 119.172 11.5355L122.354 8.35355ZM0 8.5H3.05V7.5H0V8.5ZM9.15 8.5H15.25V7.5H9.15V8.5ZM21.35 8.5H27.45V7.5H21.35V8.5ZM33.55 8.5H39.65V7.5H33.55V8.5ZM45.75 8.5H51.85V7.5H45.75V8.5ZM57.95 8.5H64.05V7.5H57.95V8.5ZM70.15 8.5H76.25V7.5H70.15V8.5ZM82.35 8.5H88.45V7.5H82.35V8.5ZM94.55 8.5H100.65V7.5H94.55V8.5ZM106.75 8.5H112.85V7.5H106.75V8.5ZM118.95 8.5H122V7.5H118.95V8.5ZM122.707 8.70711C123.098 8.31658 123.098 7.68342 122.707 7.29289L116.343 0.928932C115.953 0.538408 115.319 0.538408 114.929 0.928932C114.538 1.31946 114.538 1.95262 114.929 2.34315L120.586 8L114.929 13.6569C114.538 14.0474 114.538 14.6805 114.929 15.0711C115.319 15.4616 115.953 15.4616 116.343 15.0711L122.707 8.70711ZM0 9H3.05V7H0V9ZM9.15 9H15.25V7H9.15V9ZM21.35 9H27.45V7H21.35V9ZM33.55 9H39.65V7H33.55V9ZM45.75 9H51.85V7H45.75V9ZM57.95 9H64.05V7H57.95V9ZM70.15 9H76.25V7H70.15V9ZM82.35 9H88.45V7H82.35V9ZM94.55 9H100.65V7H94.55V9ZM106.75 9H112.85V7H106.75V9ZM118.95 9H122V7H118.95V9Z" fill="#181818" />
</svg>
</div>
<div className="content_no">
<div className="con_top">
<div className="title_20">
<Link href="#">
Select Truncations
and funding </Link></div>
<p>Sed ut persiciatis omnis
natus errorsit voluptatem
accusantium doloremue
laudantium totam rem</p>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="process_box type_four">
<div className="icon trans">
<img src="/assets/images/home-6-icon-4.png" className="img-fluid" alt="img" />
<p className="step">4</p>
</div>
<div className="content_no">
<div className="con_top">
<div className="title_20">
<Link href="#">
Use Insurance anytime anywhere </Link></div>
<p>Sed ut persiciatis omnis
natus errorsit voluptatem
accusantium doloremue
laudantium totam rem</p>
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
)
}

143
components/sections/Service1.js Normal file
View File

@ -0,0 +1,143 @@
import Link from "next/link"
export default function Service1() {
return (
<>
<section className="service-section">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-end">
<div className="col-lg-6 col-md-6 col-sm-12">
<div className="section_title type_one">
<h4 className="sm_title"> What We Offer</h4>
<div className="title_whole">
<h2 className="title"> Key Features For your Insurance Business</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="mr_bottom_15" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6 col-md-6 col-sm-12">
<div className="position-relative">
<p>Sit amet consectetur adipiscing elites varius montes, massa <br />blandit orci.
Sed egestas tellus est aliquet egetristique nisullam pharetra sed tempor sed
eivera consectetur augue</p>
</div>
{/*-============spacing==========-*/}
<div className="mr_bottom_20" />
{/*-============spacing==========-*/}
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
<div className="service_post position-relative ajax_service_enabled ">
<div className="row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_two hover_1_get">
<Link href="/service" className="img_bx">
<div className="image trans hover_1">
<img src="/assets/images/service/other-ser-2.jpg" className="img-fluid" alt="service-image" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
</Link>
<div className="content_box trans">
<div className="icon trans">
<i className="flaticon-salary trans" />
</div>
<div className="steps trans">1</div>
<h4 className="title_24 trans">
<Link href="/service">
Easy System &amp; Trusted, Save your Money
</Link>
</h4>
<p className="trans">
Sit amet consectetur adipiscing elites varius montes, massa blandit
orci.
</p>
<Link href="/service" className="rd_more">
Read More <i className="fi-rr-arrow-small-right" />
</Link>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_two hover_1_get">
<Link href="/service" className="img_bx">
<div className="image trans hover_1">
<img src="/assets/images/service/other-ser-3.jpg" className="img-fluid" alt="service-image" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
</Link>
<div className="content_box trans">
<div className="icon trans">
<i className="flaticon-management trans" />
</div>
<div className="steps trans">2</div>
<h4 className="title_24 trans">
<Link href="/service">
Dedicated Customer Support Team Member
</Link>
</h4>
<p className="trans">
Sit amet consectetur adipiscing elites varius montes, massa blandit
orci.
</p>
<Link href="/service" className="rd_more">
Read More <i className="fi-rr-arrow-small-right" />
</Link>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_two hover_1_get">
<Link href="/service" className="img_bx">
<div className="image trans hover_1">
<img src="/assets/images/service/other-ser-1.jpg" className="img-fluid" alt="service-image" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
</Link>
<div className="content_box trans">
<div className="icon trans">
<i className="flaticon-business-trip trans" />
</div>
<div className="steps trans">3</div>
<h4 className="title_24 trans">
<Link href="/service">
Corporate Professional Insurance Liability
</Link>
</h4>
<p className="trans">
Sit amet consectetur adipiscing elites varius montes, massa blandit
orci.
</p>
<Link href="/service" className="rd_more">
Read More <i className="fi-rr-arrow-small-right" />
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_60" />
{/*-============spacing==========-*/}
</section>
</>
)
}

181
components/sections/Service2.js Normal file
View File

@ -0,0 +1,181 @@
import Link from "next/link"
export default function Service2() {
return (
<>
<section className="service-section position-relative bg_2 overflow-hidden">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="ab_img_left_top mr_top_minus_40 z_0">
<img src="/assets/images/shape/wave-pattern-2.png" className="img-fluid" alt="img" />
</div>
<div className="position-relative z_1">
<div className="container pd_zero md_pd_left_15 md_pd_right_15">
<div className="row">
<div className="col-lg-7 m-auto">
<div className="section_title text-center type_one color_white">
<h4 className="sm_title"> Vinkine Popular Services</h4>
<div className="title_whole">
<h2 className="title"> Amazing Insurance Services</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row mr_left_minus_15 mr_right_minus_15">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_five style_two icon_box_only type_three trans">
<div className="icon_inner trans">
<div className="d-flex trans">
<div className="icon trans">
<i className=" flaticon-health-insurance trans" /></div>
<div className="content">
<div className="title_22">
<Link href="/service">Medical
Insurance</Link></div>
<p className="trans">
Additional benefits such as health check up, wellness…</p>
<Link href="/service" className="rd_more">
Read More
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg></Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_five style_two icon_box_only type_three trans">
<div className="icon_inner trans">
<div className="d-flex trans">
<div className="icon trans">
<i className=" flaticon-business-trip trans" /></div>
<div className="content">
<div className="title_22">
<Link href="/service">Business
Insurance</Link></div>
<p className="trans">
Covers the loss of income that a business…</p>
<Link href="/service" className="rd_more">
Read More
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg></Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_five style_two icon_box_only type_three trans">
<div className="icon_inner trans">
<div className="d-flex trans">
<div className="icon trans">
<i className=" flaticon-marriage trans" /></div>
<div className="content">
<div className="title_22">
<Link href="/service">Marriage
insurance</Link></div>
<p className="trans">
We cover you for wedding cancel, material damage…</p>
<Link href="/service" className="rd_more">
Read More
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg></Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_five style_two icon_box_only type_three trans">
<div className="icon_inner trans">
<div className="d-flex trans">
<div className="icon trans">
<i className=" flaticon-car-insurance-1 trans" /></div>
<div className="content">
<div className="title_22">
<Link href="/service">Car
Insurance</Link></div>
<p className="trans">
Pleasant experience one has to consider the safety…</p>
<Link href="/service" className="rd_more">
Read More
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg></Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_five style_two icon_box_only type_three trans">
<div className="icon_inner trans">
<div className="d-flex trans">
<div className="icon trans">
<i className=" flaticon-insurance trans" /></div>
<div className="content">
<div className="title_22">
<Link href="/service">Fire
Insurance</Link></div>
<p className="trans">
Owns a property or has even rented a…</p>
<Link href="/service" className="rd_more">
Read More
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg></Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_five style_two icon_box_only type_three trans">
<div className="icon_inner trans">
<div className="d-flex trans">
<div className="icon trans">
<i className=" flaticon-house trans" /></div>
<div className="content">
<div className="title_22">
<Link href="/service">House
Insurance</Link></div>
<p className="trans">
A home insurance policy will cover the cost…</p>
<Link href="/service" className="rd_more">
Read More
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="ab_img_right_bottom mr_bottom_minus_250 z_0">
<img src="/assets/images/shape/wave-pattern-1.png" className="img-fluid" alt="img" />
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
)
}

163
components/sections/Service3.js Normal file
View File

@ -0,0 +1,163 @@
import Link from "next/link"
export default function Service3() {
return (
<>
<section className="service-section position-relative bg_2 overflow-hidden">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="ab_img_left_top z_0 mr_top_minus_150">
<img src="/assets/images/shape/wave-pattern-2.png" className="img-fluid" alt="img" />
</div>
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center color_white type_one">
<h4 className="sm_title"> Great Offer For Customer</h4>
<div className="title_whole">
<h2 className="title"> Amazing Features For Insurance </h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="icon_box_only type_one">
<div className="icon_box_in trans">
<div className="shape_image">
<svg width={116} height={121} viewBox="0 0 116 121" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.8056 39.6223L0.500244 0H17.5002L36.1734 36.0124L19.8056 39.6223Z" fill="var(--color-set-two-three-1)" />
<path className="two" d="M36.8216 44.7789L19.8086 39.6339L41.3565 29.0508L58.4829 34.1875L36.8216 44.7789Z" fill="var(--color-set-one-2)" />
<path className="two" d="M75.3704 66.1668L58.0938 61.0318L80.9934 52.772L98.1198 57.9087L75.3704 66.1668Z" fill="var(--color-set-one-2)" />
<path d="M41.3564 29.0508L58.0936 61.0319L71.4346 56.223L60.3526 34.7522L41.3564 29.0508Z" fill="var(--color-set-two-three-1)" />
<path d="M80.9629 52.792L116 121V91.5L99.9591 58.4917" fill="var(--color-set-two-three-1)" />
</svg>
</div>
<div className="after" />
<div className="icon">
<i className=" flaticon-health-insurance" />
</div>
<div className="title_22">
<Link href="#">
Professional
Insurance
Services </Link>
</div>
<Link className="rd_more" href="#">
Read More<i className="icontb fi-rs-arrow-small-right" />
</Link>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="icon_box_only type_one">
<div className="icon_box_in trans">
<div className="shape_image">
<svg width={116} height={121} viewBox="0 0 116 121" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.8056 39.6223L0.500244 0H17.5002L36.1734 36.0124L19.8056 39.6223Z" fill="var(--color-set-two-three-1)" />
<path className="two" d="M36.8216 44.7789L19.8086 39.6339L41.3565 29.0508L58.4829 34.1875L36.8216 44.7789Z" fill="var(--color-set-one-2)" />
<path className="two" d="M75.3704 66.1668L58.0938 61.0318L80.9934 52.772L98.1198 57.9087L75.3704 66.1668Z" fill="var(--color-set-one-2)" />
<path d="M41.3564 29.0508L58.0936 61.0319L71.4346 56.223L60.3526 34.7522L41.3564 29.0508Z" fill="var(--color-set-two-three-1)" />
<path d="M80.9629 52.792L116 121V91.5L99.9591 58.4917" fill="var(--color-set-two-three-1)" />
</svg>
</div>
<div className="after" />
<div className="icon">
<i className=" flaticon-growth" />
</div>
<div className="title_22">
<Link href="#">
We’re Trusted <br /> &amp; Save your Money </Link>
</div>
<Link className="rd_more" href="#">
Read More<i className="icontb fi-rs-arrow-small-right" />
</Link>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="icon_box_only type_one">
<div className="icon_box_in trans">
<div className="shape_image">
<svg width={116} height={121} viewBox="0 0 116 121" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.8056 39.6223L0.500244 0H17.5002L36.1734 36.0124L19.8056 39.6223Z" fill="var(--color-set-two-three-1)" />
<path className="two" d="M36.8216 44.7789L19.8086 39.6339L41.3565 29.0508L58.4829 34.1875L36.8216 44.7789Z" fill="var(--color-set-one-2)" />
<path className="two" d="M75.3704 66.1668L58.0938 61.0318L80.9934 52.772L98.1198 57.9087L75.3704 66.1668Z" fill="var(--color-set-one-2)" />
<path d="M41.3564 29.0508L58.0936 61.0319L71.4346 56.223L60.3526 34.7522L41.3564 29.0508Z" fill="var(--color-set-two-three-1)" />
<path d="M80.9629 52.792L116 121V91.5L99.9591 58.4917" fill="var(--color-set-two-three-1)" />
</svg>
</div>
<div className="after" />
<div className="icon">
<i className=" flaticon-online-analytical" />
</div>
<div className="title_22">
<Link href="#">
Corporate
&amp; Financial
Services </Link>
</div>
<Link className="rd_more" href="#">
Read More<i className="icontb fi-rs-arrow-small-right" />
</Link>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="icon_box_only type_one">
<div className="icon_box_in trans">
<div className="shape_image">
<svg width={116} height={121} viewBox="0 0 116 121" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.8056 39.6223L0.500244 0H17.5002L36.1734 36.0124L19.8056 39.6223Z" fill="var(--color-set-two-three-1)" />
<path className="two" d="M36.8216 44.7789L19.8086 39.6339L41.3565 29.0508L58.4829 34.1875L36.8216 44.7789Z" fill="var(--color-set-one-2)" />
<path className="two" d="M75.3704 66.1668L58.0938 61.0318L80.9934 52.772L98.1198 57.9087L75.3704 66.1668Z" fill="var(--color-set-one-2)" />
<path d="M41.3564 29.0508L58.0936 61.0319L71.4346 56.223L60.3526 34.7522L41.3564 29.0508Z" fill="var(--color-set-two-three-1)" />
<path d="M80.9629 52.792L116 121V91.5L99.9591 58.4917" fill="var(--color-set-two-three-1)" />
</svg>
</div>
<div className="after" />
<div className="icon">
<i className=" flaticon-health-insurance-1" />
</div>
<div className="title_22">
<Link href="#">
So Much <br />
Fast &amp; Eeliable
Services </Link>
</div>
<Link className="rd_more" href="#">
Read More<i className="icontb fi-rs-arrow-small-right" />
</Link>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="ab_img_right_bottom z_0 mr_bottom_minus_250">
<img src="/assets/images/shape/wave-pattern-1.png" className="img-fluid" alt="img" />
</div>
</section>
</>
)
}

281
components/sections/Service4.js Normal file
View File

@ -0,0 +1,281 @@
import { Swiper, SwiperSlide } from "swiper/react"
import { Autoplay, Navigation, Pagination } from "swiper"
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 3,
spaceBetween: 30,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop: true,
// Navigation
navigation: {
nextEl: '.owl-next',
prevEl: '.owl-prev',
},
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 30,
},
575: {
slidesPerView: 2,
spaceBetween: 30,
},
767: {
slidesPerView: 2,
spaceBetween: 30,
},
991: {
slidesPerView: 2,
spaceBetween: 30,
},
1199: {
slidesPerView: 3,
spaceBetween: 30,
},
1350: {
slidesPerView: 3,
spaceBetween: 30,
},
}
}
export default function Service4() {
return (
<>
<section className="service-section">
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_two">
<h4 className="sm_title"> Vinkine Popular Services</h4>
<div className="title_whole">
<h2 className="title"> Amazing Insurance Services</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-12">
<Swiper {...swiperOptions} className="service_post style_one color_two position-relative position_four nav_true dot_true">
<SwiperSlide className="service_box type_one color_two">
<a href="service.html">
<div className="image">
<img className="img-fluid" src="assets/images/service/service-5-min.jpg" alt="Car Insurance" />
</div>
</a>
<div className="content_box">
<div className="content_inner trans">
<div className="icon trans">
<i className=" flaticon-car-insurance-1 trans" />
</div>
<div className="steps trans">5</div>
<h4 className="title_24 trans">
<a href="service.html">
Car Insurance
</a>
</h4>
<p className="trans">
Pleasant experience one has to consider the
safety factor equally well.
</p>
<a href="service.html" className="rd_more trans">
Read More
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg>
</a>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="service_box type_one color_two">
<a href="service.html">
<div className="image">
<img className="img-fluid" src="assets/images/service/service-6-min.jpg" alt="Car Insurance" />
</div>
</a>
<div className="content_box">
<div className="content_inner trans">
<div className="icon trans">
<i className=" flaticon-marriage trans" /></div>
<div className="steps trans">6</div>
<h4 className="title_24 trans">
<a href="service.html">
Marriage insurance
</a>
</h4>
<p className="trans">
We cover you for wedding cancel, material damage
to the property</p>
<a href="service.html" className="rd_more trans">
Read More
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg>
</a>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="service_box type_one color_two">
<a href="service.html/">
<div className="image">
<img className="img-fluid" src="assets/images/service/service-7-min.jpg" alt="Car Insurance" />
</div>
</a>
<div className="content_box">
<div className="content_inner trans">
<div className="icon trans">
<i className=" flaticon-business-trip trans" />
</div>
<div className="steps trans">7</div>
<h4 className="title_24 trans">
<a href="service.html/">
Business Insurance
</a>
</h4>
<p className="trans">
Covers the loss of income that a business
suffers after a disaster
</p>
<a href="service.html" className="rd_more trans">
Read More
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg>
</a>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="service_box type_one color_two">
<a href="service.html">
<div className="image">
<img className="img-fluid" src="assets/images/service/service-8-min.jpg" alt="Car Insurance" />
</div>
</a>
<div className="content_box">
<div className="content_inner trans">
<div className="icon trans">
<i className=" flaticon-health-insurance trans" />
</div>
<div className="steps trans">8</div>
<h4 className="title_24 trans">
<a href="service.html">
Medical Insurance
</a>
</h4>
<p className="trans">
Additional benefits such as health check up,
wellness programs…
</p>
<a href="service.html" className="rd_more trans">
Read More
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg>
</a>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="service_box type_one color_two">
<a href="service.html">
<div className="image">
<img className="img-fluid" src="assets/images/service/service-1-min-1.jpg" alt="Car Insurance" />
</div>
</a>
<div className="content_box">
<div className="content_inner trans">
<div className="icon trans">
<i className=" flaticon-insurance-2 trans" />
</div>
<div className="steps trans">1</div>
<h4 className="title_24 trans">
<a href="service.html">
Life insurance
</a>
</h4>
<p className="trans">
Contract between a life insurance company and a
policy owner. A life…
</p>
<a href="service.html" className="rd_more trans">
Read More
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg>
</a>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="service_box type_one color_two">
<a href="service.html">
<div className="image">
<img className="img-fluid" src="assets/images/service/service-2-min-1.jpg" alt="Car Insurance" />
</div>
</a>
<div className="content_box">
<div className="content_inner trans">
<div className="icon trans">
<i className=" flaticon-travel-insurance trans" />
</div>
<div className="steps trans">2</div>
<h4 className="title_24 trans">
<a href="service.html">
Travel Insurance
</a>
</h4>
<p className="trans">
A travel insurance policy is a versatile plan
that offers financial compensation…
</p>
<a href="service.html" className="rd_more trans">
Read More
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg>
</a>
</div>
</div>
</SwiperSlide>
<div className="owl-nav">
<button type="button" role="presentation" className="owl-prev">
<i className="fi-rs-arrow-small-left" />
</button>
<button type="button" role="presentation" className="owl-next">
<i className="fi-rs-arrow-small-right" />
</button>
</div>
</Swiper>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
)
}

237
components/sections/Service5.js Normal file
View File

@ -0,0 +1,237 @@
import Link from "next/link"
export default function Service5() {
return (
<>
<section className="service-section position-relative bg_op_1" style={{ backgroundImage: 'url(assets/images/service/ser-bg-h4-min.jpg)' }}>
<div className="background_overlay bg_10 z_0" />
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-end">
<div className="col-lg-12">
<div className="section_title text-center color_white">
<h4 className="sm_title">Popular Services</h4>
<div className="title_whole">
<h2 className="title">
Amazing Insurance Services
</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<section className="service_post position-relative">
<div className="row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_four color_two hover_1_get hover_1">
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="content_box trans">
<div className="top">
<div className="icon trans">
<i className=" flaticon-insurance-2 trans" /></div>
<div className="steps trans">1</div>
<h4 className="title_24 trans">
<Link href="/service">
Life insurance
</Link>
</h4>
</div>
<div className="line_box">
<div className="line" />
</div>
<div className="bottom">
<p className="trans">
Contract between a life insurance company and a policy…
</p>
<Link href="/service" className="rd_more">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_four color_two hover_1_get hover_1">
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="content_box trans">
<div className="top">
<div className="icon trans">
<i className=" flaticon-travel-insurance trans" /></div>
<div className="steps trans">2</div>
<h4 className="title_24 trans">
<Link href="/service">Travel
Insurance
</Link>
</h4>
</div>
<div className="line_box">
<div className="line" />
</div>
<div className="bottom">
<p className="trans">
A travel insurance policy is a versatile plan that…
</p>
<Link href="/service" className="rd_more">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_four color_two hover_1_get hover_1">
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="content_box trans">
<div className="top">
<div className="icon trans">
<i className=" flaticon-house trans" /></div>
<div className="steps trans">3</div>
<h4 className="title_24 trans">
<Link href="/service">
House Insurance
</Link>
</h4>
</div>
<div className="line_box">
<div className="line" />
</div>
<div className="bottom">
<p className="trans">
A home insurance policy will cover the cost of…</p>
<Link href="/service" className="rd_more">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_four color_two hover_1_get hover_1">
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="content_box trans">
<div className="top">
<div className="icon trans">
<i className=" flaticon-insurance trans" /></div>
<div className="steps trans">4</div>
<h4 className="title_24 trans">
<Link href="/service">
Fire Insurance
</Link>
</h4>
</div>
<div className="line_box">
<div className="line" />
</div>
<div className="bottom">
<p className="trans">
Owns a property or has even rented a property…
</p>
<Link href="/service" className="rd_more">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_four color_two hover_1_get hover_1">
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="content_box trans">
<div className="top">
<div className="icon trans">
<i className=" flaticon-car-insurance-1 trans" /></div>
<div className="steps trans">5</div>
<h4 className="title_24 trans">
<Link href="/service">
Car Insurance
</Link>
</h4>
</div>
<div className="line_box">
<div className="line" />
</div>
<div className="bottom">
<p className="trans">
Pleasant experience one has to consider the safety factor…
</p>
<Link href="/service" className="rd_more">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_four color_two hover_1_get hover_1">
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="content_box trans">
<div className="top">
<div className="icon trans">
<i className=" flaticon-marriage trans" /></div>
<div className="steps trans">6</div>
<h4 className="title_24 trans">
<Link href="/service">Marriage
insurance
</Link>
</h4>
</div>
<div className="line_box">
<div className="line" />
</div>
<div className="bottom">
<p className="trans">
We cover you for wedding cancel, material damage to…
</p>
<Link href="/service" className="rd_more">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white" />
</svg>
</Link>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
)
}

146
components/sections/Service6.js Normal file
View File

@ -0,0 +1,146 @@
import Link from "next/link"
export default function Service6() {
return (
<>
<section className="service bg_light_2 bg_op_4" style={{ backgroundImage: 'url(assets/images/about-dot-bg.png)!important' }}>
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_five">
<h4 className="sm_title"> Why Choose Us</h4>
<div className="title_whole">
<h2 className="title"> Build Up Your Professional <br />
Insurance Policy</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
<div className="service_post position-relative">
<div className="row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_six hover_1_get borenable color_two trans">
<div className="d-flex trans">
<div className="icon trans">
<i className=" flaticon-salary trans" /></div>
<div className="title_22">
<Link href="/service">Easy
System &amp; Trusted, Save your Money
</Link>
</div>
</div>
<Link href="/service" className="img_bx">
<div className="image trans hover_1">
<img src="/assets/images/service/other-ser-2.jpg" className="img-fluid" alt="service" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
</Link>
<div className="content">
<p className="trans">
Sit amet consectetur adipiscing elites varius montes, massa blandit
orci.</p>
<Link href="/service" className="theme_btn">
Read More <svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1L1 11ZM11 1H3.5H11ZM11 1V8.5V1Z" fill="#696E77">
</path>
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="#696E77" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_six hover_1_get borenable color_two trans">
<div className="d-flex trans">
<div className="icon trans">
<i className=" flaticon-management trans" /></div>
<div className="title_22">
<Link href="/service">Dedicated
Customer Support Team Member</Link></div>
</div>
<Link href="/service" className="img_bx">
<div className="image trans hover_1">
<img src="/assets/images/service/other-ser-2.jpg" className="img-fluid" alt="service" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
</Link>
<div className="content">
<p className="trans">
Sit amet consectetur adipiscing elites varius montes, massa blandit
orci.</p>
<Link href="/service" className="theme_btn">
Read More <svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1L1 11ZM11 1H3.5H11ZM11 1V8.5V1Z" fill="#696E77">
</path>
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="#696E77" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_six hover_1_get borenable color_two trans">
<div className="d-flex trans">
<div className="icon trans">
<i className=" flaticon-business-trip trans" /></div>
<div className="title_22">
<Link href="/service">Corporate
Professional Insurance Liability</Link></div>
</div>
<Link href="/service" className="img_bx">
<div className="image trans hover_1">
<img src="/assets/images/service/other-ser-1.jpg" className="img-fluid" alt="service" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
</Link>
<div className="content">
<p className="trans">
Sit amet consectetur adipiscing elites varius montes, massa blandit
orci.</p>
<Link href="/service" className="theme_btn">
Read More <svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1L1 11ZM11 1H3.5H11ZM11 1V8.5V1Z" fill="#696E77">
</path>
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="#696E77" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12 text-center">
<div className="position-relative position_p_relative">
<div className="d-flex justify-content-center align-items-center">
<img src="/assets/images/notification-1.png" className="img-fluid" alt="notification" /> Need Any Insurance Information Or Create Your
Account?
<Link className="rd_more" style={{ marginLeft: 10 }} href="#">Contact Us</Link></div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
)
}

252
components/sections/Service7.js Normal file
View File

@ -0,0 +1,252 @@
import Link from "next/link"
export default function Service7() {
return (
<>
<section className="service bg_12 bg_op_4" style={{ backgroundImage: 'url(assets/images/service-dot-bg.png)' }}>
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-7">
<div className="section_title color_white type_five">
<h4 className="sm_title"> About Insurance
</h4>
<div className="title_whole">
<h2 className="title">Explore Our Popular Insurance Services That We Provide</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
<div className="service_post position-relative">
<div className="row">
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div className="service_box type_seven trans color_two">
<div className="icon trans">
<svg width={110} height={130} viewBox="0 0 110 130" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 124.009C0 127.128 2.82523 129.486 5.89443 128.928L105.894 110.746C108.272 110.314 110 108.244 110 105.827V5C110 2.23858 107.761 0 105 0H5C2.23858 0 0 2.23858 0 5V124.009Z" fill="var(--color-set-four-3)" />
</svg>
<i className=" flaticon-travel-insurance trans" />
</div>
<div className="content d-flex align-items-center">
<img src="/assets/images/service/service-1-min-1.jpg" className="img-fluid" alt="service" />
<div className="left">
<div className="title_26">
<Link href="/service-details">
Travel Insurance
</Link>
</div>
<p className="trans">
A travel insurance policy is a versatile plan that offers financial
compensation…
</p>
</div>
<div className="right">
<Link href="/service-details" className="link">
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M6.53522 0H22.9415C23.2315 0 23.5098 0.115234 23.7149 0.320352C23.92 0.52547 24.0352 0.803669 24.0352 1.09375V17.5C24.0352 17.7901 23.92 18.0683 23.7149 18.2734C23.5098 18.4785 23.2315 18.5937 22.9415 18.5937C22.6514 18.5937 22.3732 18.4785 22.1681 18.2734C21.963 18.0683 21.8477 17.7901 21.8477 17.5V3.73333L1.83938 23.7417C1.63205 23.9349 1.35781 24.04 1.07446 24.035C0.791099 24.03 0.520746 23.9153 0.320352 23.7149C0.119958 23.5145 0.00516988 23.2441 0.000170402 22.9608C-0.00482908 22.6774 0.100351 22.4032 0.293551 22.1958L20.3019 2.1875H6.53522C6.24514 2.1875 5.96694 2.07227 5.76182 1.86715C5.5567 1.66203 5.44147 1.38383 5.44147 1.09375C5.44147 0.803669 5.5567 0.52547 5.76182 0.320352C5.96694 0.115234 6.24514 0 6.53522 0Z" fill="url(#paint0_linear_1_4032)" />
<defs>
<linearGradient id="paint0_linear_1_4032" x1="-0.34336" y1="13.9061" x2="24.0352" y2="13.9061" gradientUnits="userSpaceOnUse">
<stop offset={1} stopColor="#F86403" />
<stop offset={1} stopColor="#D65501" />
</linearGradient>
</defs>
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div className="service_box type_seven trans color_two">
<div className="icon trans">
<svg width={110} height={130} viewBox="0 0 110 130" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 124.009C0 127.128 2.82523 129.486 5.89443 128.928L105.894 110.746C108.272 110.314 110 108.244 110 105.827V5C110 2.23858 107.761 0 105 0H5C2.23858 0 0 2.23858 0 5V124.009Z" fill="var(--color-set-four-3)" />
</svg>
<i className=" flaticon-health-insurance trans" />
</div>
<div className="content d-flex align-items-center">
<img src="/assets/images/service/service-8-min.jpg" className="img-fluid" alt="service" />
<div className="left">
<div className="title_26">
<Link href="/service-details">Medical
Insurance</Link></div>
<p className="trans">
Additional benefits such as health check up, wellness programs.</p>
</div>
<div className="right">
<Link href="/service-details" className="link">
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M6.53522 0H22.9415C23.2315 0 23.5098 0.115234 23.7149 0.320352C23.92 0.52547 24.0352 0.803669 24.0352 1.09375V17.5C24.0352 17.7901 23.92 18.0683 23.7149 18.2734C23.5098 18.4785 23.2315 18.5937 22.9415 18.5937C22.6514 18.5937 22.3732 18.4785 22.1681 18.2734C21.963 18.0683 21.8477 17.7901 21.8477 17.5V3.73333L1.83938 23.7417C1.63205 23.9349 1.35781 24.04 1.07446 24.035C0.791099 24.03 0.520746 23.9153 0.320352 23.7149C0.119958 23.5145 0.00516988 23.2441 0.000170402 22.9608C-0.00482908 22.6774 0.100351 22.4032 0.293551 22.1958L20.3019 2.1875H6.53522C6.24514 2.1875 5.96694 2.07227 5.76182 1.86715C5.5567 1.66203 5.44147 1.38383 5.44147 1.09375C5.44147 0.803669 5.5567 0.52547 5.76182 0.320352C5.96694 0.115234 6.24514 0 6.53522 0Z" fill="url(#paint0_linear_1_4035)" />
<defs>
<linearGradient id="paint0_linear_1_4035" x1="-0.34336" y1="13.9061" x2="24.0352" y2="13.9061" gradientUnits="userSpaceOnUse">
<stop offset={1} stopColor="#F86403" />
<stop offset={1} stopColor="#D65501" />
</linearGradient>
</defs>
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div className="service_box type_seven trans color_two">
<div className="icon trans">
<svg width={110} height={130} viewBox="0 0 110 130" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 124.009C0 127.128 2.82523 129.486 5.89443 128.928L105.894 110.746C108.272 110.314 110 108.244 110 105.827V5C110 2.23858 107.761 0 105 0H5C2.23858 0 0 2.23858 0 5V124.009Z" fill="var(--color-set-four-3)" />
</svg>
<i className=" flaticon-marriage trans" />
</div>
<div className="content d-flex align-items-center">
<img src="/assets/images/service/service-6-min.jpg" className="img-fluid" alt="service" />
<div className="left">
<div className="title_26">
<Link href="/service-details">
Marriage insurance
</Link>
</div>
<p className="trans">
We cover you for wedding cancel, material damage to the property
</p>
</div>
<div className="right">
<Link href="/service-details" className="link">
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M6.53522 0H22.9415C23.2315 0 23.5098 0.115234 23.7149 0.320352C23.92 0.52547 24.0352 0.803669 24.0352 1.09375V17.5C24.0352 17.7901 23.92 18.0683 23.7149 18.2734C23.5098 18.4785 23.2315 18.5937 22.9415 18.5937C22.6514 18.5937 22.3732 18.4785 22.1681 18.2734C21.963 18.0683 21.8477 17.7901 21.8477 17.5V3.73333L1.83938 23.7417C1.63205 23.9349 1.35781 24.04 1.07446 24.035C0.791099 24.03 0.520746 23.9153 0.320352 23.7149C0.119958 23.5145 0.00516988 23.2441 0.000170402 22.9608C-0.00482908 22.6774 0.100351 22.4032 0.293551 22.1958L20.3019 2.1875H6.53522C6.24514 2.1875 5.96694 2.07227 5.76182 1.86715C5.5567 1.66203 5.44147 1.38383 5.44147 1.09375C5.44147 0.803669 5.5567 0.52547 5.76182 0.320352C5.96694 0.115234 6.24514 0 6.53522 0Z" fill="url(#paint0_linear_1_4036)" />
<defs>
<linearGradient id="paint0_linear_1_4036" x1="-0.34336" y1="13.9061" x2="24.0352" y2="13.9061" gradientUnits="userSpaceOnUse">
<stop offset={1} stopColor="#F86403" />
<stop offset={1} stopColor="#D65501" />
</linearGradient>
</defs>
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div className="service_box type_seven trans color_two">
<div className="icon trans">
<svg width={110} height={130} viewBox="0 0 110 130" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 124.009C0 127.128 2.82523 129.486 5.89443 128.928L105.894 110.746C108.272 110.314 110 108.244 110 105.827V5C110 2.23858 107.761 0 105 0H5C2.23858 0 0 2.23858 0 5V124.009Z" fill="var(--color-set-four-3)" />
</svg>
<i className=" flaticon-insurance-2 trans" />
</div>
<div className="content d-flex align-items-center">
<img src="/assets/images/service/service-1-min-1.jpg" className="img-fluid" alt="service" />
<div className="left">
<div className="title_26">
<Link href="/service-details">
Life insurance
</Link>
</div>
<p className="trans">
Contract between a life insurance company and a policy owner. A
life…
</p>
</div>
<div className="right">
<Link href="/service-details" className="link">
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M6.53522 0H22.9415C23.2315 0 23.5098 0.115234 23.7149 0.320352C23.92 0.52547 24.0352 0.803669 24.0352 1.09375V17.5C24.0352 17.7901 23.92 18.0683 23.7149 18.2734C23.5098 18.4785 23.2315 18.5937 22.9415 18.5937C22.6514 18.5937 22.3732 18.4785 22.1681 18.2734C21.963 18.0683 21.8477 17.7901 21.8477 17.5V3.73333L1.83938 23.7417C1.63205 23.9349 1.35781 24.04 1.07446 24.035C0.791099 24.03 0.520746 23.9153 0.320352 23.7149C0.119958 23.5145 0.00516988 23.2441 0.000170402 22.9608C-0.00482908 22.6774 0.100351 22.4032 0.293551 22.1958L20.3019 2.1875H6.53522C6.24514 2.1875 5.96694 2.07227 5.76182 1.86715C5.5567 1.66203 5.44147 1.38383 5.44147 1.09375C5.44147 0.803669 5.5567 0.52547 5.76182 0.320352C5.96694 0.115234 6.24514 0 6.53522 0Z" fill="url(#paint0_linear_1_403)" />
<defs>
<linearGradient id="paint0_linear_1_403" x1="-0.34336" y1="13.9061" x2="24.0352" y2="13.9061" gradientUnits="userSpaceOnUse">
<stop offset={1} stopColor="#F86403" />
<stop offset={1} stopColor="#D65501" />
</linearGradient>
</defs>
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div className="service_box type_seven trans color_two">
<div className="icon trans">
<svg width={110} height={130} viewBox="0 0 110 130" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 124.009C0 127.128 2.82523 129.486 5.89443 128.928L105.894 110.746C108.272 110.314 110 108.244 110 105.827V5C110 2.23858 107.761 0 105 0H5C2.23858 0 0 2.23858 0 5V124.009Z" fill="var(--color-set-four-3)" />
</svg><i className=" flaticon-house trans" />
</div>
<div className="content d-flex align-items-center">
<img src="/assets/images/service/service-3-min.jpg" className="img-fluid" alt="service" />
<div className="left">
<div className="title_26">
<Link href="/service-details">
House Insurance
</Link>
</div>
<p className="trans">
A home insurance policy will cover the cost of structure and
contents…
</p>
</div>
<div className="right">
<Link href="/service-details" className="link">
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M6.53522 0H22.9415C23.2315 0 23.5098 0.115234 23.7149 0.320352C23.92 0.52547 24.0352 0.803669 24.0352 1.09375V17.5C24.0352 17.7901 23.92 18.0683 23.7149 18.2734C23.5098 18.4785 23.2315 18.5937 22.9415 18.5937C22.6514 18.5937 22.3732 18.4785 22.1681 18.2734C21.963 18.0683 21.8477 17.7901 21.8477 17.5V3.73333L1.83938 23.7417C1.63205 23.9349 1.35781 24.04 1.07446 24.035C0.791099 24.03 0.520746 23.9153 0.320352 23.7149C0.119958 23.5145 0.00516988 23.2441 0.000170402 22.9608C-0.00482908 22.6774 0.100351 22.4032 0.293551 22.1958L20.3019 2.1875H6.53522C6.24514 2.1875 5.96694 2.07227 5.76182 1.86715C5.5567 1.66203 5.44147 1.38383 5.44147 1.09375C5.44147 0.803669 5.5567 0.52547 5.76182 0.320352C5.96694 0.115234 6.24514 0 6.53522 0Z" fill="url(#paint0_linear_1_4030)" />
<defs>
<linearGradient id="paint0_linear_1_4030" x1="-0.34336" y1="13.9061" x2="24.0352" y2="13.9061" gradientUnits="userSpaceOnUse">
<stop offset={1} stopColor="#F86403" />
<stop offset={1} stopColor="#D65501" />
</linearGradient>
</defs>
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div className="service_box type_seven trans color_two">
<div className="icon trans">
<svg width={110} height={130} viewBox="0 0 110 130" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 124.009C0 127.128 2.82523 129.486 5.89443 128.928L105.894 110.746C108.272 110.314 110 108.244 110 105.827V5C110 2.23858 107.761 0 105 0H5C2.23858 0 0 2.23858 0 5V124.009Z" fill="var(--color-set-four-3)" />
</svg>
<i className=" flaticon-insurance trans" />
</div>
<div className="content d-flex align-items-center">
<img src="/assets/images/service/service-4-min.jpg" className="img-fluid" alt="service" />
<div className="left">
<div className="title_26">
<Link href="/service-details">
Fire Insurance
</Link>
</div>
<p className="trans">
Owns a property or has even rented a property can buy a…
</p>
</div>
<div className="right">
<Link href="/service-details" className="link">
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M6.53522 0H22.9415C23.2315 0 23.5098 0.115234 23.7149 0.320352C23.92 0.52547 24.0352 0.803669 24.0352 1.09375V17.5C24.0352 17.7901 23.92 18.0683 23.7149 18.2734C23.5098 18.4785 23.2315 18.5937 22.9415 18.5937C22.6514 18.5937 22.3732 18.4785 22.1681 18.2734C21.963 18.0683 21.8477 17.7901 21.8477 17.5V3.73333L1.83938 23.7417C1.63205 23.9349 1.35781 24.04 1.07446 24.035C0.791099 24.03 0.520746 23.9153 0.320352 23.7149C0.119958 23.5145 0.00516988 23.2441 0.000170402 22.9608C-0.00482908 22.6774 0.100351 22.4032 0.293551 22.1958L20.3019 2.1875H6.53522C6.24514 2.1875 5.96694 2.07227 5.76182 1.86715C5.5567 1.66203 5.44147 1.38383 5.44147 1.09375C5.44147 0.803669 5.5567 0.52547 5.76182 0.320352C5.96694 0.115234 6.24514 0 6.53522 0Z" fill="url(#paint0_linear_1_4031)" />
<defs>
<linearGradient id="paint0_linear_1_4031" x1="-0.34336" y1="13.9061" x2="24.0352" y2="13.9061" gradientUnits="userSpaceOnUse">
<stop offset={1} stopColor="#F86403" />
<stop offset={1} stopColor="#D65501" />
</linearGradient>
</defs>
</svg>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
)
}

135
components/sections/Service8.js Normal file
View File

@ -0,0 +1,135 @@
import Link from "next/link"
export default function Service8() {
return (
<>
<section className="service-section mr_bottom_minus_250 position-relative z_1">
<div className="medium-container-two">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_one">
<h4 className="sm_title"> Great Offer For Customer</h4>
<div className="title_whole">
<h2 className="title"> Amazing Insurance Services</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="service_post position-relative">
<div className="row">
<div className="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_three hover_1_get">
<Link href="/service" className="img_bx">
<div className="image trans hover_1">
<img src="/assets/images/service/service-1-min-1.jpg" className="img-fluid" alt="service" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
</Link>
<div className="content_box trans">
<div className="content_box_in trans">
<div className="icon trans">
<i className=" flaticon-insurance-2 trans" /></div>
<div className="steps trans">1</div>
<h4 className="title_24 trans">
<Link href="/service">Life
insurance</Link></h4>
<p className="trans">
Contract between a life insurance company and a…</p>
<Link href="/service" className="rd_more">Read More<i className="fi-rr-arrow-small-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_three hover_1_get">
<Link href="/service" className="img_bx">
<div className="image trans hover_1">
<img src="/assets/images/service/service-2-min-1.jpg" className="img-fluid" alt="service" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
</Link>
<div className="content_box trans">
<div className="content_box_in trans">
<div className="icon trans">
<i className=" flaticon-travel-insurance trans" /></div>
<div className="steps trans">2</div>
<h4 className="title_24 trans">
<Link href="/service">Travel
Insurance</Link></h4>
<p className="trans">
A travel insurance policy is a versatile plan…</p>
<Link href="/service" className="rd_more">Read More<i className="fi-rr-arrow-small-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_three hover_1_get">
<Link href="/service" className="img_bx">
<div className="image trans hover_1">
<img src="/assets/images/service/service-3-min.jpg" className="img-fluid" alt="service" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
</Link>
<div className="content_box trans">
<div className="content_box_in trans">
<div className="icon trans">
<i className=" flaticon-house trans" /></div>
<div className="steps trans">3</div>
<h4 className="title_24 trans">
<Link href="/service">House
Insurance</Link></h4>
<p className="trans">
A home insurance policy will cover the cost…</p>
<Link href="/service" className="rd_more">Read More<i className="fi-rr-arrow-small-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_three hover_1_get">
<Link href="/service" className="img_bx">
<div className="image trans hover_1">
<img src="/assets/images/service/service-4-min.jpg" className="img-fluid" alt="service" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
</Link>
<div className="content_box trans">
<div className="content_box_in trans">
<div className="icon trans">
<i className=" flaticon-insurance trans" /></div>
<div className="steps trans">4</div>
<h4 className="title_24 trans">
<Link href="/service">Fire
Insurance</Link></h4>
<p className="trans">
Owns a property or has even rented a…</p>
<Link href="/service" className="rd_more">Read More<i className="fi-rr-arrow-small-right" /></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
)
}

120
components/sections/Service9.js Normal file
View File

@ -0,0 +1,120 @@
import Link from "next/link"
export default function Service9() {
return (
<>
<section className="service-section bg_2">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-end">
<div className="col-lg-6">
<div className="section_title type_one color_white">
<h4 className="sm_title"> What We Offer</h4>
<div className="title_whole">
<h2 className="title"> Key Features For your Insurance Business</h2>
</div>
</div>
</div>
<div className="col-lg-6">
<p className="color_white mr_bottom_10">Sit amet consectetur adipiscing elites varius montes, massa
<br />blandit orci. Sed egestas tellus est aliquet egetristique nisullam pharetra
sed tempor sed eivera consectetur augue</p>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="service_post position-relative">
<div className="row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_three hover_1_get">
<Link href="/service" className="img_bx">
<div className="image trans hover_1">
<img src="/assets/images/service/service-1-min-1.jpg" className="img-fluid" alt="service" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
</Link>
<div className="content_box trans">
<div className="content_box_in trans">
<div className="icon trans">
<i className=" flaticon-insurance-2 trans" /></div>
<div className="steps trans">1</div>
<h4 className="title_24 trans">
<Link href="/service">Life
insurance</Link></h4>
<p className="trans">
Contract between a life insurance company and a…</p>
<Link href="/service" className="rd_more">Read More<i className="fi-rr-arrow-small-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_three hover_1_get">
<Link href="/service" className="img_bx">
<div className="image trans hover_1">
<img src="/assets/images/service/service-2-min-1.jpg" className="img-fluid" alt="service" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
</Link>
<div className="content_box trans">
<div className="content_box_in trans">
<div className="icon trans">
<i className=" flaticon-travel-insurance trans" /></div>
<div className="steps trans">2</div>
<h4 className="title_24 trans">
<Link href="/service">Travel
Insurance</Link></h4>
<p className="trans">
A travel insurance policy is a versatile plan…</p>
<Link href="/service" className="rd_more">Read More<i className="fi-rr-arrow-small-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div className="service_box type_three hover_1_get">
<Link href="/service" className="img_bx">
<div className="image trans hover_1">
<img src="/assets/images/service/service-3-min.jpg" className="img-fluid" alt="service" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
</div>
</Link>
<div className="content_box trans">
<div className="content_box_in trans">
<div className="icon trans">
<i className=" flaticon-house trans" /></div>
<div className="steps trans">3</div>
<h4 className="title_24 trans">
<Link href="/service">House
Insurance</Link></h4>
<p className="trans">
A home insurance policy will cover the cost…</p>
<Link href="/service" className="rd_more">Read More<i className="fi-rr-arrow-small-right" /></Link>
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_60" />
{/*-============spacing==========-*/}
</div>
</section>
</>
)
}

132
components/sections/Slider1.js Normal file
View File

@ -0,0 +1,132 @@
import Link from "next/link"
import { Autoplay, Navigation, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 1,
spaceBetween: 0,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop: true,
// Navigation
navigation: {
nextEl: '.owl-next',
prevEl: '.owl-prev',
},
// Pagination
pagination: {
// el: '.swiper-pagination',
clickable: true,
},
}
export default function Slider1() {
return (
<>
<section className="slider style_one">
<Swiper {...swiperOptions} className="owl_nav_block owl_dots_none theme_carousel">
<SwiperSlide className="slide-item-content">
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-1-1.jpg)' }}>
</div>
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-md-7">
<div className="slider_content">
<div className="bg_image animate_up">
<img src="/assets/images/slider/shape-1.png" className="img-fluid" alt="ptimage" />
</div>
<h6 className="animate_up">
<img src="/assets/images/slider/Icon-white.png" className="img-fluid" alt="icon" /> Best For Insurance
</h6>
<h1 className="animate_left">Insurance<br />
For Better<br />
World </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn color_white animated">Read
More</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="slide-item-content">
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-1-2.jpg)' }}>
</div>
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-md-6">
<div className="slider_content">
<div className="bg_image animate_down">
<img src="/assets/images/slider/shape-1.png" className="img-fluid" alt="ptimage" />
</div>
<h6 className="animate_up">
<img src="/assets/images/slider/Icon-white.png" className="img-fluid" alt="icon" /> Best For Insurance
</h6>
<h1 className="animate_left">Insurance<br />
Generation<br />
To lead </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn color_white animated">Read
More</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="slide-item-content">
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-1-3.jpg)' }}>
</div>
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-md-6">
<div className="slider_content">
<div className="bg_image">
<img src=" assets/images/slider/shape-1.png" className="img-fluid" alt="ptimage" />
</div>
<h6 className="animate_up">
<img src="/assets/images/slider/Icon-white.png" className="img-fluid" alt="icon" /> Best For Insurance
</h6>
<h1 className="animate_left"> Life Happy<br />
Insurance <br />
Policy </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn color_white animated">Read
More</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
</Swiper>
<div className="swiper-pagination" />
<div className="owl-nav">
<button type="button" role="presentation" className="owl-prev">
<i className="fi-rs-arrow-small-left" />
</button>
<button type="button" role="presentation" className="owl-next">
<i className="fi-rs-arrow-small-right" />
</button>
</div>
</section>
</>
)
}

111
components/sections/Slider2.js Normal file
View File

@ -0,0 +1,111 @@
import Link from "next/link"
import { Autoplay, Navigation, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 1,
spaceBetween: 0,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop: true,
// Navigation
navigation: {
nextEl: '.owl-next',
prevEl: '.owl-prev',
},
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
}
export default function Slider2() {
return (
<>
<section className="slider style_two">
<Swiper {...swiperOptions} className="owl_nav_block owl_dots_none theme_carousel">
<SwiperSlide className="slide-item-content">
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-end">
<div className="col-lg-7 col-md-12 col-sm-12">
<div className="slider_content">
<div className="bg_image animate_down">
</div>
<h6 className="animate_up">
<img src="/assets/images/slider/Icon-green.png" className="img-fluid" alt="icon" /> Best For Insurance
</h6>
<h1 className="animate_left">Insurance<br />
For Better<br />
World </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn">Read
More</Link>
</div>
</div>
</div>
<div className="col-lg-5 col-md-12 col-sm-12">
<div className="image animate_left">
<img src="/assets/images/slider/slider-image-2-1.png" className="img-fluid" alt="icon" />
</div>
</div>
</div>
</div>
</div>
<div className="shape animate_down">
<img src="/assets/images/slider/slider-2-shape.png" className="img-fluid" alt="icon" />
</div>
</SwiperSlide>
<SwiperSlide className="slide-item-content">
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-end">
<div className="col-lg-7 col-md-12 col-sm-12">
<div className="slider_content">
<div className="bg_image animate_down">
</div>
<h6 className="animate_up">
<img src="/assets/images/slider/Icon-green.png" className="img-fluid" alt="icon" />
Live Your Dream
</h6>
<h1 className="animate_left">Personalized <br />
Health Plans For<br />
Your Family </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn">Read
More</Link>
</div>
</div>
</div>
<div className="col-lg-5 col-md-12 col-sm-12">
<div className="image animate_left">
<img src="/assets/images/slider/slider-image-2-1.png" className="img-fluid" alt="icon" />
</div>
</div>
</div>
</div>
</div>
<div className="shape animate_down">
<img src="/assets/images/slider/slider-2-shape.png" className="img-fluid" alt="icon" />
</div>
</SwiperSlide>
<div className="owl-nav">
<button type="button" role="presentation" className="owl-prev">
<i className="fi-rs-arrow-small-left" />
</button>
<button type="button" role="presentation" className="owl-next">
<i className="fi-rs-arrow-small-right" />
</button>
</div>
</Swiper>
</section>
</>
)
}

110
components/sections/Slider3.js Normal file
View File

@ -0,0 +1,110 @@
import Link from "next/link"
import { Autoplay, Navigation, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 1,
spaceBetween: 0,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop: true,
// Navigation
navigation: {
nextEl: '.owl-next',
prevEl: '.owl-prev',
},
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
}
export default function Slider3() {
return (
<>
<section className="slider style_three">
<Swiper {...swiperOptions} className="owl_nav_block owl_dots_none theme_carousel">
<SwiperSlide className="slide-item-content">
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-3-1.jpg)' }} />
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-md-12 text-center">
<div className="slider_content">
<h6 className="animate_up">
Better Insurance
</h6>
<h1 className="animate_left"> For Better People </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn color_white animated">Read
More</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="slide-item-content">
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-3-2.jpg)' }} />
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-md-12 text-center">
<div className="slider_content">
<h6 className="animate_up">
Better Insurance
</h6>
<h1 className="animate_left">Life Insurance </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn color_white animated">Read
More</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="slide-item-content">
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-3-3.jpg)' }} />
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-md-12 text-center">
<div className="slider_content">
<h6 className="animate_up">
Best For Insurance
</h6>
<h1 className="animate_left"> Financial Protection </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn color_white animated">Read
More</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<div className="owl-nav">
<button type="button" role="presentation" className="owl-prev">
<i className="fi-rs-arrow-small-left" />
</button>
<button type="button" role="presentation" className="owl-next">
<i className="fi-rs-arrow-small-right" />
</button>
</div>
</Swiper>
</section>
</>
)
}

147
components/sections/Slider4.js Normal file
View File

@ -0,0 +1,147 @@
import Link from "next/link"
import { Autoplay, Navigation, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 1,
spaceBetween: 0,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop: true,
// Navigation
navigation: {
nextEl: '.slick-next',
prevEl: '.slick-prev',
},
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
}
export default function Slider4() {
return (
<>
<div className="slider style_five">
<Swiper {...swiperOptions} className="tab_content_slick">
<SwiperSlide className="slide-item-content">
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-5-1.jpg)' }} />
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-md-12 text-center">
<div className="slider_content">
<h6 className="animate_up">
Welcome To Vankine
</h6>
<h1 className="animate_left">A Moments Of Caring <br />
Your Dream Home </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn color_white animated">Read
More</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="slide-item-content">
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-5-2.jpg)' }} />
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-md-12 text-center">
<div className="slider_content">
<h6 className="animate_up">
Better Insurance
</h6>
<h1 className="animate_left"> Find Health Coverage <br />
that's Right for you </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn color_white animated">Read
More</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="slide-item-content">
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-5-3.jpg)' }} />
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-md-12 text-center">
<div className="slider_content">
<h6 className="animate_up">
Better Insurance
</h6>
<h1 className="animate_left"> Don’t Call it a Dream,<br />
Call it a Plan. </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn color_white animated">Read
More</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="slide-item-content">
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-5-4.jpg)' }} />
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-md-12 text-center">
<div className="slider_content">
<h6 className="animate_up">
Better Insurance
</h6>
<h1 className="animate_left"> Build Amazing Life <br />
With Insurance </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn color_white animated">Read
More</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<div>
<button type="button" className="slick-prev slick-arrow" style={{}}><span className="fi-rs-arrow-small-left" /></button>
<button type="button" className="slick-next slick-arrow" style={{}}><span className="fi-rs-arrow-small-right" /></button>
</div>
</Swiper>
{/* <div className="tab_postion_absolute">
<div className="container">
<div className="slider tab_slick">
<div className="title">
<h3>House Insurance</h3>
</div>
<div className="title">
<h3>Medical Insurance</h3>
</div>
<div className="title">
<h3>Travel Insurance</h3>
</div>
<div className="title">
<h3>Life Insurance</h3>
</div>
</div>
</div>
</div> */}
</div>
</>
)
}

126
components/sections/Slider5.js Normal file
View File

@ -0,0 +1,126 @@
import Link from "next/link"
import { Autoplay, Navigation, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 1,
spaceBetween: 0,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop: true,
// Navigation
navigation: {
nextEl: '.owl-next',
prevEl: '.owl-prev',
},
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
}
export default function Slider5() {
return (
<>
<section className="slider style_six">
<Swiper {...swiperOptions} className="owl_nav_block owl_dots_none theme_carousel">
{/*-sldier*/}
<SwiperSlide className="slide-item-content">
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-6-1.jpg)' }} />
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-md-7">
<div className="slider_content">
<h6 className="animate_up">
<img src="/assets/images/slider/Icon-white.png" className="img-fluid" alt="icon" /> Best For Insurance
</h6>
<h1 className="animate_left">Insurance<br />
For Better<br />
World </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn color_white animated">Read
More</Link>
</div>
</div>
</div>
</div>
</div>
<div className="extra_content_box" style={{ backgroundImage: 'url(assets/images/line.png)' }}>
<h4>Connect With Our Agent</h4>
<p>Click on the blue round button at the bottom right corner of this page. You
can also email our support team at vankine@example.com</p>
<Link href="#">Chat With Us</Link>
</div>
</div>
</SwiperSlide>
{/*-slider*/}
{/*-sldier*/}
<SwiperSlide className="slide-item-content">
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-6-2.jpg)' }} />
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-md-6">
<div className="slider_content">
<h6 className="animate_up">
<img src="/assets/images/slider/Icon-white.png" className="img-fluid" alt="icon" /> Best For Insurance
</h6>
<h1 className="animate_left">Insurance<br />
Generation<br />
To lead </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn color_white animated">Read
More</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
{/*-slider*/}
{/*-sldier*/}
<SwiperSlide className="slide-item-content">
<div className="image-layer" style={{ backgroundImage: 'url(assets/images/slider/banner-6-3.jpg)' }} />
<div className="slide-item content_left">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-md-6">
<div className="slider_content">
<h6 className="animate_up">
<img src="/assets/images/slider/Icon-white.png" className="img-fluid" alt="icon" /> Best For Insurance
</h6>
<h1 className="animate_left"> Life Happy<br />
Insurance <br />
Policy </h1>
<div className="button_all animate_down">
<Link href="#" className="theme_btn color_white animated">Read
More</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
{/*-slider*/}
<div className="owl-nav">
<button type="button" role="presentation" className="owl-prev">
<i className="fi-rs-arrow-small-left" />
</button>
<button type="button" role="presentation" className="owl-next">
<i className="fi-rs-arrow-small-right" />
</button>
</div>
</Swiper>
</section>
</>
)
}

168
components/sections/Team1.js Normal file
View File

@ -0,0 +1,168 @@
import Link from "next/link"
export default function Team1() {
return (
<>
<section className="team-section">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="medium-container-two">
<div className="row align-items-center">
<div className="col-lg-4">
<div className="section_title type_two">
<h4 className="sm_title"> Team Member’s</h4>
<div className="title_whole">
<h2 className="title"> Meet Our
Professional Team Member’s</h2>
</div>
<p> Sit amet consectetur adipiscin elites varius monte massa, blandit orcie
egestas tellus est</p>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="theme_btn_all">
<Link href="#" className="theme_btn color_two big rotate">
About Team <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-8">
<div className="row">
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="team_box type_one">
<div className="image_box">
<img src="/assets/images/team/team-1-min.png" alt="img" className="img-fluid" />
<div className="overlay trans">
<p> Sit amet consectetur adis
cing elit. Egestas pharetra</p>
<div className="social-icons">
<ul>
<li><Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link></li>
<li><Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link></li>
<li><Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link></li>
<li><Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link></li>
</ul>
</div>
</div>
</div>
<div className="contnet">
<h6 className="title_22">
<Link href="#">
Harry R. Blackston </Link></h6>
<p> Senior Manager</p>
<Link className="link trans" href="#">
<svg width={13} height={13} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg" className="trans">
<path className="trans" d="M1 12.25L12.25 1M12.25 1H3.8125M12.25 1V9.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="team_box type_one">
<div className="image_box">
<img src="/assets/images/team/team-2-min.png" alt="img" className="img-fluid" />
<div className="overlay trans">
<p> Sit amet consectetur adis
cing elit. Egestas pharetra</p>
<div className="social-icons">
<ul>
<li><Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link></li>
<li><Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link></li>
<li><Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link></li>
<li><Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link></li>
</ul>
</div>
</div>
</div>
<div className="contnet">
<h6 className="title_22">
<Link href="#">
Guillermo V. Hanson </Link></h6>
<p> Business Consultant</p>
<Link className="link trans" href="#">
<svg width={13} height={13} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg" className="trans">
<path className="trans" d="M1 12.25L12.25 1M12.25 1H3.8125M12.25 1V9.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="team_box type_one">
<div className="image_box">
<img src="/assets/images/team/team-3-min.png" alt="img" className="img-fluid" />
<div className="overlay trans">
<p> Sit amet consectetur adis
cing elit. Egestas pharetra</p>
<div className="social-icons">
<ul>
<li><Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link></li>
<li><Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link></li>
<li><Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link></li>
<li><Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link></li>
</ul>
</div>
</div>
</div>
<div className="contnet">
<h6 className="title_22">
<Link href="#">
Michael A. Yates </Link></h6>
<p> Junior Manager</p>
<Link className="link trans" href="#">
<svg width={13} height={13} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg" className="trans">
<path className="trans" d="M1 12.25L12.25 1M12.25 1H3.8125M12.25 1V9.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_10" />
{/*-============spacing==========-*/}
<div className="ab_img_right_bottom z_0 mr_bottom_minus_250">
<img src="/assets/images/shape/wave-pattern-1.png" className="img-fluid" alt="img" />
</div>
</section>
</>
)
}

175
components/sections/Team2.js Normal file
View File

@ -0,0 +1,175 @@
import Link from "next/link"
export default function Team2() {
return (
<>
<section className="team-section">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_one">
<h4 className="sm_title"> Our Team Member</h4>
<div className="title_whole">
<h2 className="title"> Meet Our Amazing Team</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="team_box type_two">
<div className="team_box_inner">
<div className="contnet">
<h6 className="title_22">
<Link href="#">
Harry R. Blackston </Link></h6>
<p> Senior Manager</p>
</div>
<div className="image_box">
<img src="/assets/images/team/team-1-min.png" alt="img" className="img-fluid" />
<div className="social-icons trans">
<ul>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="team_box type_two">
<div className="team_box_inner">
<div className="contnet">
<h6 className="title_22">
<Link href="#">
Guillermo V. Hanson </Link></h6>
<p> Business Consultant</p>
</div>
<div className="image_box">
<img src="/assets/images/team/team-2-min.png" alt="img" className="img-fluid" />
<div className="social-icons trans">
<ul>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="team_box type_two">
<div className="team_box_inner">
<div className="contnet">
<h6 className="title_22">
<Link href="#">
Michael A. Yates </Link></h6>
<p> Junior Manager</p>
</div>
<div className="image_box">
<img src="/assets/images/team/team-3-min.png" alt="img" className="img-fluid" />
<div className="social-icons trans">
<ul>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="team_box type_two">
<div className="team_box_inner">
<div className="contnet">
<h6 className="title_22">
<Link href="#">
Mark M. McClure </Link></h6>
<p> Sr Engineer</p>
</div>
<div className="image_box">
<img src="/assets/images/team/team-4-min.png" alt="img" className="img-fluid" />
<div className="social-icons trans">
<ul>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
)
}

140
components/sections/Testimonial1.js Normal file
View File

File diff suppressed because one or more lines are too long

148
components/sections/Testimonial2.js Normal file
View File

@ -0,0 +1,148 @@
import Link from "next/link"
import { Autoplay, Navigation, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 1,
spaceBetween: 0,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop: true,
// // Navigation
// navigation: {
// nextEl: '.h1n',
// prevEl: '.h1p',
// },
// // Pagination
// pagination: {
// el: '.swiper-pagination',
// clickable: true,
// },
}
export default function Testimonial2() {
return (
<>
<section className="testimonial-section bg_op_5" style={{ backgroundImage: 'url(assets/images/map-frame-2.png)' }}>
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-12 pd_right_60">
<div className="image_box_only type_six color_two">
<div className="image one">
<img src="assets/images/about/an-1-min.png" alt="img" className="img-fluid" />
<div className="content text-center">
<Link href="#">
<svg width={55} height={55} viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={28} cy={27} r={20} fill="white" />
<circle cx="27.5" cy="27.5" r="27.5" fill="white" fillOpacity="0.1" />
<path d="M22 33.25L33.25 22M33.25 22H24.8125M33.25 22V30.4375" stroke="#2D947A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
<h6 className="title_no_a_20">We’ve More <br />
Then 2563+ Global
Clients</h6>
<svg width={71} height={7} viewBox="0 0 71 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.3463 7C58.7897 7 57.4874 5.61327 56.3384 4.38975C55.301 3.28482 54.4815 2.41206 52.7303 2.41206C50.979 2.41206 50.1595 3.28482 49.1219 4.38975C47.9731 5.61327 46.6709 7 44.1141 7C41.5573 7 40.2553 5.61327 39.1063 4.38975C38.0689 3.28482 37.2495 2.41206 35.4983 2.41206C33.7472 2.41206 32.9278 3.28482 31.8905 4.38975C30.7416 5.61327 29.4394 7 26.8826 7C24.3262 7 23.0243 5.61327 21.8755 4.38975C20.8383 3.28482 20.0189 2.41206 18.268 2.41206C16.517 2.41206 15.6976 3.28482 14.6602 4.38975C13.5114 5.61327 12.2091 7 9.65253 7C7.09575 7 5.79352 5.61327 4.64453 4.38975C3.60713 3.28482 2.78775 2.41206 1.03653 2.41206C0.464193 2.41206 0 1.87216 0 1.20603C0 0.540101 0.464193 0 1.03653 0C3.59314 0 4.89537 1.38673 6.04436 2.61025C7.08176 3.71518 7.90131 4.58794 9.65253 4.58794C11.4036 4.58794 12.223 3.71518 13.2604 2.61045C14.4092 1.38673 15.7114 0 18.268 0C20.8244 0 22.1265 1.38693 23.2753 2.61045C24.3125 3.71538 25.1317 4.58794 26.8826 4.58794C28.6338 4.58794 29.4532 3.71518 30.4906 2.61045C31.6394 1.38673 32.9417 0 35.4983 0C38.0551 0 39.3571 1.38673 40.5061 2.61045C41.5435 3.71518 42.3631 4.58794 44.1141 4.58794C45.8655 4.58794 46.6849 3.71518 47.7223 2.61045C48.8713 1.38673 50.1735 0 52.7303 0C55.287 0 56.5893 1.38673 57.7383 2.61045C58.7757 3.71518 59.595 4.58794 61.3463 4.58794C63.0978 4.58794 63.9174 3.71518 64.9551 2.61025C66.1041 1.38673 67.4065 0 69.9635 0C70.5358 0 71 0.540101 71 1.20603C71 1.87216 70.5358 2.41206 69.9635 2.41206C68.2119 2.41206 67.3924 3.28482 66.3546 4.38975C65.2056 5.61327 63.9034 7 61.3463 7Z" fill="white" />
</svg>
</Link>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-12">
<div className="section_title type_three pd_left_20">
<h4 className="sm_title"> Clients Testimonials</h4>
<div className="title_whole">
<h2 className="title"> Amazing Feedback Say
About Services</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="testimonial_carousel position-relative position_one nav_false dot_true dot_left color_three">
<Swiper {...swiperOptions} className="theme_carousel ">
<SwiperSlide className="testimonial_box type_two color_two">
<div className="auth d-flex align-items-center clearfix">
<div className="image_box">
<img src="assets/images/testimonial/testimonial-image-1.jpg" className="img-fluid" alt="image" />
</div>
<div className="cont">
<h4 className="title_no_a_24">Boris Elbert</h4>
<p>Green Tech</p>
</div>
</div>
<div className="title_no_a_22 t_comment">
<sup>“</sup>Sed perspiciatis unonis
este natus error sit volutate accusantium dolor laudant
totam rem aperiam eaupsa abillo inven veritatis
<sub>“</sub>
</div>
<div className="box">
<h6>Jacob Leonardo</h6>
<p>
<i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star empty" /><i className="fa fa-star empty" /></p>
</div>
</SwiperSlide>
<SwiperSlide className="testimonial_box type_two color_two">
<div className="auth d-flex align-items-center clearfix">
<div className="image_box">
<img src="assets/images/testimonial/testimonial-image-1.jpg" className="img-fluid" alt="image" />
</div>
<div className="cont">
<h4 className="title_no_a_24">Ivor Herbert</h4>
<p>Manager, Airlines</p>
</div>
</div>
<div className="title_no_a_22 t_comment">
<sup>“</sup>Sed perspiciatis unonis
este natus error sit volutate accusantium dolor laudant
totam rem aperiam eaupsa abillo inven veritatis
<sub>“</sub></div>
<div className="box">
<h6>Jacob Leonardo</h6>
<p>
<i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star empty" /><i className="fa fa-star empty" /></p>
</div>
</SwiperSlide>
<SwiperSlide className="testimonial_box type_two color_two">
<div className="auth d-flex align-items-center clearfix">
<div className="image_box">
<img src="assets/images/testimonial/test-3-min.png" alt="image" className="img-fluid" />
</div>
<div className="cont">
<h4 className="title_no_a_24">Fleix Everard</h4>
<p>HR, Blue Soft Sol</p>
</div>
</div>
<div className="title_no_a_22 t_comment">
<sup>“</sup>Sed perspiciatis unonis
este natus error sit volutate accusantium dolor laudant
totam rem aperiam eaupsa abillo inven veritatis
<sub>“</sub></div>
<div className="box">
<h6>Jacob Leonardo</h6>
<p>
<i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star empty" /><i className="fa fa-star empty" /></p>
</div>
</SwiperSlide>
</Swiper>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_90" />
{/*-============spacing==========-*/}
</section>
</>
)
}

143
components/sections/Testimonial3.js Normal file
View File

File diff suppressed because one or more lines are too long

210
components/sections/Testimonial4.js Normal file
View File

@ -0,0 +1,210 @@
import { Autoplay, Navigation, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 3,
spaceBetween: 30,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop: true,
// Navigation
navigation: {
nextEl: '.h1n',
prevEl: '.h1p',
},
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 30,
},
575: {
slidesPerView: 2,
spaceBetween: 30,
},
767: {
slidesPerView: 2,
spaceBetween: 30,
},
991: {
slidesPerView: 2,
spaceBetween: 30,
},
1199: {
slidesPerView: 3,
spaceBetween: 30,
},
1350: {
slidesPerView: 3,
spaceBetween: 30,
},
}
}
export default function Testimonial4() {
return (
<>
<section className="testimonial-section">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_one">
<h4 className="sm_title"> Check Your Favorite Insurance</h4>
<div className="title_whole">
<h2 className="title"> Get Started Favorite Insurance</h2>
</div>
</div>
</div>
</div>
<div className="pd_bottom_30" />
<div className="testimonial_carousel position-relative position_one nav_false dot_true">
<Swiper {...swiperOptions} className="theme_carousel ">
<SwiperSlide className="testimonial_box type_two ">
<div className="auth d-flex align-items-center clearfix">
<div className="image_box">
<img src="/assets/images/testimonial/test-3-min.png" alt="img" className="img-fluid" />
</div>
<div className="cont">
<h4 className="title_no_a_24">Fleix Everard</h4>
<p>HR, Blue Soft Sol</p>
</div>
</div>
<div className="title_no_a_22 t_comment">
<sup>“</sup>Sed perspiciatis unonis
este natus error sit volutate accusantium dolor laudant totam rem aperiam
eaupsa abillo inven veritatis
<sub>“</sub></div>
<div className="box">
<h6>Jacob Leonardo</h6>
<p>
<i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star empty" /><i className="fa fa-star empty" /></p>
</div>
</SwiperSlide>
<SwiperSlide className="testimonial_box type_two ">
<div className="auth d-flex align-items-center clearfix">
<div className="image_box">
<img src="/assets/images/testimonial/test-2-min.png" alt="img" className="img-fluid" />
</div>
<div className="cont">
<h4 className="title_no_a_24">Boris Elbert</h4>
<p>Green Tech</p>
</div>
</div>
<div className="title_no_a_22 t_comment">
<sup>“</sup>Sed perspiciatis unonis
este natus error sit volutate accusantium dolor laudant totam rem aperiam
eaupsa abillo inven veritatis
<sub>“</sub></div>
<div className="box">
<h6>Jacob Leonardo</h6>
<p>
<i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star empty" /><i className="fa fa-star empty" /></p>
</div>
</SwiperSlide>
<SwiperSlide className="testimonial_box type_two ">
<div className="auth d-flex align-items-center clearfix">
<div className="image_box">
<img src="/assets/images/testimonial/test-1-min.png" alt="img" className="img-fluid" />
</div>
<div className="cont">
<h4 className="title_no_a_24">Ivor Herbert</h4>
<p>Manager, Airlines</p>
</div>
</div>
<div className="title_no_a_22 t_comment">
<sup>“</sup>Sed perspiciatis unonis
este natus error sit volutate accusantium dolor laudant totam rem aperiam
eaupsa abillo inven veritatis
<sub>“</sub></div>
<div className="box">
<h6>Jacob Leonardo</h6>
<p>
<i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star empty" /><i className="fa fa-star empty" /></p>
</div>
</SwiperSlide>
<SwiperSlide className="testimonial_box type_two ">
<div className="auth d-flex align-items-center clearfix">
<div className="image_box">
<img src="/assets/images/testimonial/test-3-min.png" alt="img" className="img-fluid" />
</div>
<div className="cont">
<h4 className="title_no_a_24">Fleix Everard</h4>
<p>HR, Blue Soft Sol</p>
</div>
</div>
<div className="title_no_a_22 t_comment">
<sup>“</sup>Sed perspiciatis unonis
este natus error sit volutate accusantium dolor laudant totam rem aperiam
eaupsa abillo inven veritatis
<sub>“</sub></div>
<div className="box">
<h6>Jacob Leonardo</h6>
<p>
<i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star empty" /><i className="fa fa-star empty" /></p>
</div>
</SwiperSlide>
<SwiperSlide className="testimonial_box type_two ">
<div className="auth d-flex align-items-center clearfix">
<div className="image_box">
<img src="/assets/images/testimonial/test-2-min.png" alt="img" className="img-fluid" />
</div>
<div className="cont">
<h4 className="title_no_a_24">Boris Elbert</h4>
<p>Green Tech</p>
</div>
</div>
<div className="title_no_a_22 t_comment">
<sup>“</sup>Sed perspiciatis unonis
este natus error sit volutate accusantium dolor laudant totam rem aperiam
eaupsa abillo inven veritatis
<sub>“</sub></div>
<div className="box">
<h6>Jacob Leonardo</h6>
<p>
<i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star empty" /><i className="fa fa-star empty" /></p>
</div>
</SwiperSlide>
<SwiperSlide className="testimonial_box type_two ">
<div className="auth d-flex align-items-center clearfix">
<div className="image_box">
<img src="/assets/images/testimonial/test-1-min.png" alt="img" className="img-fluid" />
</div>
<div className="cont">
<h4 className="title_no_a_24">Ivor Herbert</h4>
<p>Manager, Airlines</p>
</div>
</div>
<div className="title_no_a_22 t_comment">
<sup>“</sup>Sed perspiciatis unonis
este natus error sit volutate accusantium dolor laudant totam rem aperiam
eaupsa abillo inven veritatis
<sub>“</sub></div>
<div className="box">
<h6>Jacob Leonardo</h6>
<p>
<i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star fill" /><i className="fa fa-star empty" /><i className="fa fa-star empty" /></p>
</div>
</SwiperSlide>
</Swiper>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_top_70" />
{/*-============spacing==========-*/}
</section>
</>
)
}

Some files were not shown because too many files have changed in this diff Show More