Merms Links
This commit is contained in:
CHIEFSOFT\ameye
@@ -33,7 +33,7 @@ export default function Footer3() {
|
||||
<p><Link href="/contact">Contact Us</Link></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><Link href="/blog-listing">Our Blog</Link></p>
|
||||
<p><Link href="/merms-blog">Our Blog</Link></p>
|
||||
</li>
|
||||
|
||||
{/*<li>*/}
|
||||
@@ -56,7 +56,7 @@ export default function Footer3() {
|
||||
<p><Link href="/download">What's New</Link></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><Link href="/pricing-1">Pricing</Link></p>
|
||||
<p><Link href="/pricing">Pricing</Link></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><Link href="/help-center">Help Center</Link></p>
|
||||
|
||||
@@ -0,0 +1,461 @@
|
||||
import VideoPopup from "../components/elements/VidepPopup"
|
||||
import Layout from "../components/layout/Layout"
|
||||
import Link from "next/link"
|
||||
export default function Home() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
|
||||
<div>
|
||||
<section id="blog-page" className="pb-60 inner-page-hero blog-page-section">
|
||||
<div className="container">
|
||||
{/* WIDE BLOG POST */}
|
||||
<div className="blog-post wide-post wow fadeInUp">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="col-md-6">
|
||||
<div className="blog-post-img">
|
||||
<img className="img-fluid r-16" src="/images/blog/post-11-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="col-md-6">
|
||||
<div className="blog-post-txt">
|
||||
|
||||
<h3 className="s-38 w-700">
|
||||
<Link href="/single-post">Congue magna tempor and ipsum Martex sapien turpis
|
||||
laoreet augue
|
||||
</Link>
|
||||
</h3>
|
||||
{/* Text */}
|
||||
<p>Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida porta undo
|
||||
velna dolor libero a risus aliquet tempus posuere a tempor velna tempus posuere dolor
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="blog-post-meta mt-30">
|
||||
<ul className="post-meta-list ico-10">
|
||||
<li><p className="w-500">MermsEmr Team</p></li>
|
||||
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
||||
<li><p>Apr 28, 2023</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END WIDE BLOG POST */}
|
||||
{/* POSTS WRAPPER */}
|
||||
<div className="posts-wrapper">
|
||||
<div className="row">
|
||||
{/* BLOG POST #1 */}
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp clearfix">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img mb-35">
|
||||
<img className="img-fluid r-16" src="/images/blog/post-1-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<span className="post-tag color--red-400">Product News</span>
|
||||
{/* Post Link */}
|
||||
<h6 className="s-20 w-700">
|
||||
<Link href="/single-post">Aliqum mullam porta blandit: lacus and sapien
|
||||
gravida
|
||||
</Link>
|
||||
</h6>
|
||||
{/* Text */}
|
||||
<p>Egestas luctus vitae augue and ipsum ultrice quisque in cursus lacus feugiat
|
||||
congue diam ultrice laoreet sagittis
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="blog-post-meta mt-20">
|
||||
<ul className="post-meta-list ico-10">
|
||||
<li><p className="p-sm w-500">MermsEmr Team</p></li>
|
||||
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
||||
<li><p className="p-sm">Apr 23, 2023</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #1 */}
|
||||
{/* BLOG POST #2 */}
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp clearfix">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img mb-35">
|
||||
<img className="img-fluid r-16" src="/images/blog/post-2-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<span className="post-tag color--green-400">Community</span>
|
||||
{/* Post Link */}
|
||||
<h6 className="s-20 w-700">
|
||||
<Link href="/single-post">Porttitor cursus fusce neque CEO egestas cursus
|
||||
magna sapien and suscipit ipsum
|
||||
</Link>
|
||||
</h6>
|
||||
{/* Text */}
|
||||
<p>Aliqum mullam ipsum vitae and blandit vitae tempor sapien and donec lipsum</p>
|
||||
{/* Post Meta */}
|
||||
<div className="blog-post-meta mt-20">
|
||||
<ul className="post-meta-list ico-10">
|
||||
<li><p className="p-sm w-500">By Miranda Green</p></li>
|
||||
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
||||
<li><p className="p-sm">Apr 09, 2023</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #2 */}
|
||||
{/* BLOG POST #3 */}
|
||||
<div className="col-md-12 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp clearfix">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img mb-35">
|
||||
<img className="img-fluid r-16" src="/images/blog/post-3-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<span className="post-tag color--violet-400">Freelancer Tips</span>
|
||||
{/* Post Link */}
|
||||
<h6 className="s-20 w-700">
|
||||
<Link href="/single-post">Cubilia laoreet ipsum augue eget egestas Martex magna</Link>
|
||||
</h6>
|
||||
{/* Text */}
|
||||
<p>Luctus vitae egestas augue and ipsum ultrice quisque in cursus lacus feugiat
|
||||
egets congue ultrice sagittis laoreet
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="blog-post-meta mt-20">
|
||||
<ul className="post-meta-list ico-10">
|
||||
<li><p className="p-sm w-500">By Helen J.</p></li>
|
||||
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
||||
<li><p className="p-sm">Apr 01, 2023</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #3 */}
|
||||
</div>
|
||||
</div> {/* END POSTS WRAPPER */}
|
||||
{/* BLOG POSTS CATEGORY */}
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<div className="posts-category ico-20 wow fadeInUp">
|
||||
<h4 className="s-34 w-700">Latest News <span className="flaticon-next" /></h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* POSTS WRAPPER */}
|
||||
<div className="posts-wrapper">
|
||||
<div className="row">
|
||||
{/* BLOG POST #4 */}
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp clearfix">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img mb-35">
|
||||
<img className="img-fluid r-16" src="/images/blog/post-4-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<span className="post-tag color--pink-400">Tutorials</span>
|
||||
{/* Post Link */}
|
||||
<h6 className="s-20 w-700">
|
||||
<Link href="/single-post">Phasellus blandit justo undo aliquam vitae molestie
|
||||
nunc sapien augue justo aliquet
|
||||
</Link>
|
||||
</h6>
|
||||
{/* Text */}
|
||||
<p>Aliqum mullam ipsum vitae and blandit vitae tempor sapien and donec lipsum</p>
|
||||
{/* Post Meta */}
|
||||
<div className="blog-post-meta mt-20">
|
||||
<ul className="post-meta-list ico-10">
|
||||
<li><p className="p-sm w-500">By Miranda Green</p></li>
|
||||
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
||||
<li><p className="p-sm">Mar 20, 2023</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #4 */}
|
||||
{/* BLOG POST #5 */}
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp clearfix">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img mb-35">
|
||||
<img className="img-fluid r-16" src="/images/blog/post-5-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<span className="post-tag color--violet-400">Freelancer Tips</span>
|
||||
{/* Post Link */}
|
||||
<h6 className="s-20 w-700">
|
||||
<Link href="/single-post">Blandit justo phasellus undo aliquam diam molestie
|
||||
vitae
|
||||
</Link>
|
||||
</h6>
|
||||
{/* Text */}
|
||||
<p>Luctus vitae egestas augue and ipsum ultrice quisque in cursus lacus feugiat
|
||||
egets congue ultrice sagittis laoreet
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="blog-post-meta mt-20">
|
||||
<ul className="post-meta-list ico-10">
|
||||
<li><p className="p-sm w-500">MermsEmr Team</p></li>
|
||||
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
||||
<li><p className="p-sm">Mar 13, 2023</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #5 */}
|
||||
{/* BLOG POST #6 */}
|
||||
<div className="col-md-12 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp clearfix">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img mb-35">
|
||||
<img className="img-fluid r-16" src="/images/blog/post-6-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<span className="post-tag color--blue-400">Extensions</span>
|
||||
{/* Post Link */}
|
||||
<h6 className="s-20 w-700">
|
||||
<Link href="/single-post">Cursus porttitor fusce neque CEO egestas cursus magna
|
||||
sapien and ipsum suscipit
|
||||
</Link>
|
||||
</h6>
|
||||
{/* Text */}
|
||||
<p>Mullam ipsum aliqum vitae and blandit vitae tempor sapien and lipsum donec</p>
|
||||
{/* Post Meta */}
|
||||
<div className="blog-post-meta mt-20">
|
||||
<ul className="post-meta-list ico-10">
|
||||
<li><p className="p-sm w-500">MermsEmr Team</p></li>
|
||||
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
||||
<li><p className="p-sm">Feb 23, 2023</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #6 */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END POSTS WRAPPER */}
|
||||
{/* SQUARE BLOG POST */}
|
||||
<div className="blog-post square-post">
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
{/* SQUARE BLOG POST WRAPPER */}
|
||||
<div className="square-post-wrapper bg--black-400 block-shadow r-16 wow fadeInUp">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="col-md-6 order-last order-md-2">
|
||||
<div className="blog-post-txt color--white">
|
||||
{/* Post Tag */}
|
||||
<span className="post-tag color--pink-400">Video Tutorials</span>
|
||||
{/* Post Link */}
|
||||
<h4 className="s-34 w-700 mb-20">
|
||||
<Link href="/single-post">Lipsum sodales sapien Martex aliquet blandit
|
||||
augue gravida posuere
|
||||
</Link>
|
||||
</h4>
|
||||
{/* Text */}
|
||||
<p>Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida porta
|
||||
undo velna dolor libero risus aliquet tempus posuere vitae tempor
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="blog-post-meta mt-30">
|
||||
<ul className="post-meta-list ico-10">
|
||||
<li><p className="w-500">MermsEmr Team</p></li>
|
||||
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
||||
<li><p>Feb 12, 2023</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="col-md-6 order-first order-md-2">
|
||||
<div className="blog-post-img video-preview">
|
||||
{/* Play Icon */}
|
||||
<VideoPopup style={1}/>
|
||||
{/* Preview Image */}
|
||||
<img className="img-fluid" src="/images/blog/post-10-img.jpg" alt="video-preview" />
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* END SQUARE BLOG POST WRAPPER */}
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* END SQUARE BLOG POST */}
|
||||
{/* BLOG POSTS CATEGORY */}
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<div className="posts-category ico-20 wow fadeInUp">
|
||||
<h4 className="s-34 w-700">All Stories <span className="flaticon-next" /></h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* POSTS WRAPPER */}
|
||||
<div className="posts-wrapper">
|
||||
<div className="row">
|
||||
{/* BLOG POST #7 */}
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp clearfix">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img mb-35">
|
||||
<img className="img-fluid r-16" src="/images/blog/post-7-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<span className="post-tag color--red-400">Product News</span>
|
||||
{/* Post Link */}
|
||||
<h6 className="s-20 w-700">
|
||||
<Link href="/single-post">Phasellus blandit justo undo aliquam diam vitae
|
||||
molestie
|
||||
</Link>
|
||||
</h6>
|
||||
{/* Text */}
|
||||
<p>Egestas luctus vitae augue and ipsum ultrice quisque in cursus lacus feugiat
|
||||
congue diam ultrice laoreet sagittis
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="blog-post-meta mt-20">
|
||||
<ul className="post-meta-list ico-10">
|
||||
<li><p className="p-sm w-500">MermsEmr Team</p></li>
|
||||
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
||||
<li><p className="p-sm">Feb 02, 2023</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #7 */}
|
||||
{/* BLOG POST #8 */}
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp clearfix">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img mb-35">
|
||||
<img className="img-fluid r-16" src="/images/blog/post-8-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<span className="post-tag color--violet-400">Freelancer Tips</span>
|
||||
{/* Post Link */}
|
||||
<h6 className="s-20 w-700">
|
||||
<Link href="/single-post">Porttitor cursus fusce neque CEO egestas cursus
|
||||
magna sapien and suscipit ipsum
|
||||
</Link>
|
||||
</h6>
|
||||
{/* Text */}
|
||||
<p>Aliqum mullam ipsum vitae and blandit vitae tempor sapien and donec lipsum</p>
|
||||
{/* Post Meta */}
|
||||
<div className="blog-post-meta mt-20">
|
||||
<ul className="post-meta-list ico-10">
|
||||
<li><p className="p-sm w-500">By Miranda Green</p></li>
|
||||
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
||||
<li><p className="p-sm">Jan 26, 2023</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #8 */}
|
||||
{/* BLOG POST #9 */}
|
||||
<div className="col-md-12 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp clearfix">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img mb-35">
|
||||
<img className="img-fluid r-16" src="/images/blog/post-9-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<span className="post-tag color--green-400">Community</span>
|
||||
{/* Post Link */}
|
||||
<h6 className="s-20 w-700">
|
||||
<Link href="/single-post">Aliqum mullam porta blandit: lacus and sapien
|
||||
gravida
|
||||
</Link>
|
||||
</h6>
|
||||
{/* Text */}
|
||||
<p>Luctus vitae egestas augue and ipsum ultrice quisque in cursus lacus feugiat
|
||||
egets congue ultrice sagittis laoreet
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="blog-post-meta mt-20">
|
||||
<ul className="post-meta-list ico-10">
|
||||
<li><p className="p-sm w-500">By Miranda Green</p></li>
|
||||
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
||||
<li><p className="p-sm">Jan 12, 2023</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #9 */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END POSTS WRAPPER */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END BLOG POSTS LISTING */}
|
||||
{/* PAGE PAGINATION
|
||||
============================================= */}
|
||||
<div className="pb-100 page-pagination theme-pagination">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul className="pagination ico-20 justify-content-center">
|
||||
<li className="page-item disabled"><Link className="page-link" href="#" tabIndex={-1}><span className="flaticon-back" /></Link>
|
||||
</li>
|
||||
<li className="page-item active" aria-current="page"><Link className="page-link" href="#">1</Link></li>
|
||||
<li className="page-item"><Link className="page-link" href="#">2</Link></li>
|
||||
<li className="page-item"><Link className="page-link" href="#">3</Link></li>
|
||||
<li className="page-item"><Link className="page-link" href="#" aria-label="Next"><span className="flaticon-next" /></Link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</div> {/* END PAGE PAGINATION */}
|
||||
{/* DIVIDER LINE */}
|
||||
<hr className="divider" />
|
||||
{/* NEWSLETTER-1
|
||||
============================================= */}
|
||||
<section id="newsletter-1" className="newsletter-section">
|
||||
<div className="newsletter-overlay">
|
||||
<div className="container">
|
||||
<div className="row d-flex align-items-center row-cols-1 row-cols-lg-2">
|
||||
{/* NEWSLETTER TEXT */}
|
||||
<div className="col">
|
||||
<div className="newsletter-txt">
|
||||
<h4 className="s-34 w-700">Stay up to date with our news, ideas and updates</h4>
|
||||
</div>
|
||||
</div>
|
||||
{/* NEWSLETTER FORM */}
|
||||
<div className="col">
|
||||
<form className="newsletter-form">
|
||||
<div className="input-group">
|
||||
<input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />
|
||||
<span className="input-group-btn">
|
||||
<button type="submit" className="btn btn--theme hover--theme">Subscribe Now</button>
|
||||
</span>
|
||||
</div>
|
||||
{/* Newsletter Form Notification */}
|
||||
<label htmlFor="s-email" className="form-notification" />
|
||||
</form>
|
||||
</div> {/* END NEWSLETTER FORM */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</div> {/* End newsletter-overlay */}
|
||||
</section> {/* END NEWSLETTER-1 */}
|
||||
{/* DIVIDER LINE */}
|
||||
<hr className="divider" />
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,458 @@
|
||||
import Layout from "../components/layout/Layout"
|
||||
import BrandSlider2 from "../components/slider/BrandSlider2"
|
||||
import Link from "next/link"
|
||||
import { useState } from "react"
|
||||
export default function Home() {
|
||||
const [isPricing, setPricing] = useState(false)
|
||||
const handlePricing = () => setPricing(!isPricing)
|
||||
return (
|
||||
<>
|
||||
<Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
|
||||
<div>
|
||||
<section id="pricing-1" className="gr--whitesmoke pb-40 inner-page-hero pricing-section">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-md-10 col-lg-8">
|
||||
<div className="section-title mb-70">
|
||||
{/* Title */}
|
||||
<h2 className="s-52 w-700">Simple, Flexible Pricing</h2>
|
||||
{/* TOGGLE BUTTON */}
|
||||
<div className="toggle-btn ext-toggle-btn toggle-btn-md mt-30">
|
||||
<span className="toggler-txt">Billed monthly</span>
|
||||
<label className="switch-wrap">
|
||||
<input type="checkbox" id="checbox" onClick={handlePricing} />
|
||||
<span className="switcher bg--grey switcher--theme">
|
||||
<span className="show-annual" />
|
||||
<span className="show-monthly" />
|
||||
</span>
|
||||
</label>
|
||||
<span className="toggler-txt">Billed yearly</span>
|
||||
{/* Text */}
|
||||
<p className="color--theme">Save up to 35% with yearly billing</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END SECTION TITLE */}
|
||||
{/* PRICING TABLES */}
|
||||
<div className="pricing-1-wrapper">
|
||||
<div className="row row-cols-1 row-cols-md-3">
|
||||
{/* STARTER PLAN */}
|
||||
<div className="col">
|
||||
<div id="pt-1-1" className="p-table pricing-1-table bg--white-100 block-shadow r-12 wow fadeInUp">
|
||||
{/* TABLE HEADER */}
|
||||
<div className="pricing-table-header">
|
||||
{/* Title */}
|
||||
<h5 className="s-24 w-700">Starter</h5>
|
||||
{/* Price */}
|
||||
<div className="price">
|
||||
<sup className="color--black">$</sup>
|
||||
<span className="color--black">0</span>
|
||||
<sup className="validity color--grey">/ forever</sup>
|
||||
<p className="color--grey">For professionals getting started with smaller projects.</p>
|
||||
</div>
|
||||
{/* Button */}
|
||||
<Link href="#" className="pt-btn btn r-04 btn--theme hover--theme">Get srarted - it's free</Link>
|
||||
<p className="p-sm btn-txt text-center color--grey">No credit card required</p>
|
||||
</div> {/* END TABLE HEADER */}
|
||||
{/* PRICING FEATURES */}
|
||||
<ul className="pricing-features color--black ico-10 ico--green mt-25">
|
||||
<li><p><span className="flaticon-check" /> 2 free projects</p></li>
|
||||
<li><p><span className="flaticon-check" /> 1 GB of cloud storage</p></li>
|
||||
<li><p><span className="flaticon-check" /> For personal use</p></li>
|
||||
<li className="disabled-option"><p><span className="flaticon-check" /> Weekly data backup</p></li>
|
||||
<li className="disabled-option"><p><span className="flaticon-check" /> No Ads. No trackers</p></li>
|
||||
<li><p><span className="flaticon-check" /> 12/5 email support</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END STARTER PLAN */}
|
||||
{/* BASIC PLAN */}
|
||||
<div className="col">
|
||||
<div id="pt-1-2" className="p-table pricing-1-table bg--white-100 block-shadow r-12 wow fadeInUp">
|
||||
{/* TABLE HEADER */}
|
||||
<div className="pricing-table-header">
|
||||
{/* Title */}
|
||||
<h5 className="s-24">Basic</h5>
|
||||
{/* Price */}
|
||||
<div className="price">
|
||||
{/* Monthly Price */}
|
||||
{isPricing ? <div className="price1">
|
||||
<sup className="color--black">$</sup>
|
||||
<span className="color--black">142.75</span>
|
||||
<sup className="validity color--grey">/ yr</sup>
|
||||
{/* Discount Badge */}
|
||||
<div className="pricing-discount bg--yellow-400 color--black r-36">
|
||||
<h6 className="s-17">Save 30%</h6>
|
||||
</div>
|
||||
</div> : <div className="price2">
|
||||
<sup className="color--black">$</sup>
|
||||
<span className="color--black">16.99</span>
|
||||
<sup className="validity color--grey">/ mo</sup>
|
||||
</div>}
|
||||
{/* Text */}
|
||||
<p className="color--grey">For personal use or small teams with simple workflows.</p>
|
||||
</div> {/* End Price */}
|
||||
{/* Button */}
|
||||
<Link href="#" className="pt-btn btn r-04 btn--theme hover--theme">Start 14-day trial</Link>
|
||||
<p className="p-sm btn-txt text-center color--grey">7-Day Money Back Guarantee</p>
|
||||
</div> {/* END TABLE HEADER */}
|
||||
{/* PRICING FEATURES */}
|
||||
<ul className="pricing-features color--black ico-10 ico--green mt-25">
|
||||
<li><p><span className="flaticon-check" /> Up to 250 projects</p></li>
|
||||
<li><p><span className="flaticon-check" /> 15 GB of Cloud Storage</p></li>
|
||||
<li><p><span className="flaticon-check" /> Shared team workspace</p></li>
|
||||
<li><p><span className="flaticon-check" /> Daily data backup</p></li>
|
||||
<li><p><span className="flaticon-check" /> No Ads. No trackers</p></li>
|
||||
<li><p><span className="flaticon-check" /> 12/7 email support</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END BASIC PLAN */}
|
||||
{/* ADVANCED PLAN */}
|
||||
<div className="col">
|
||||
<div id="pt-1-3" className="p-table pricing-1-table bg--white-100 block-shadow r-12 wow fadeInUp">
|
||||
{/* TABLE HEADER */}
|
||||
<div className="pricing-table-header">
|
||||
{/* Title */}
|
||||
<h5 className="s-24">Advanced</h5>
|
||||
{/* Price */}
|
||||
<div className="price">
|
||||
{/* Monthly Price */}
|
||||
{isPricing ? <div className="price1">
|
||||
<sup className="color--black">$</sup>
|
||||
<span className="color--black">194.99</span>
|
||||
<sup className="validity color--grey">/ yr</sup>
|
||||
{/* Discount Badge */}
|
||||
<div className="pricing-discount bg--yellow-400 color--black r-36">
|
||||
<h6 className="s-17">Save 35%</h6>
|
||||
</div>
|
||||
</div> : <div className="price2">
|
||||
<sup className="color--black">$</sup>
|
||||
<span className="color--black">24.99</span>
|
||||
<sup className="validity color--grey">/ mo</sup>
|
||||
</div>}
|
||||
{/* Text */}
|
||||
<p className="color--grey">For growing teams that need more services and flexibility.</p>
|
||||
</div> {/* End Price */}
|
||||
{/* Button */}
|
||||
<Link href="#" className="pt-btn btn r-04 btn--theme hover--theme">Upgrade your plan</Link>
|
||||
<p className="p-sm btn-txt text-center color--grey">7-Day Money Back Guarantee</p>
|
||||
</div> {/* END TABLE HEADER */}
|
||||
{/* PRICING FEATURES */}
|
||||
<ul className="pricing-features color--black ico-10 ico--green mt-25">
|
||||
<li><p><span className="flaticon-check" /> Everything in Basic</p></li>
|
||||
<li><p><span className="flaticon-check" /> Private cloud hosting</p></li>
|
||||
<li><p><span className="flaticon-check" /> Custom security</p></li>
|
||||
<li><p><span className="flaticon-check" /> Advanced user permissions</p></li>
|
||||
<li><p><span className="flaticon-check" /> Multi-team management</p></li>
|
||||
<li><p><span className="flaticon-check" /> 24/7 Email Support</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END ADVANCED PLAN */}
|
||||
</div>
|
||||
</div> {/* PRICING TABLES */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END PRICING-1 */}
|
||||
{/* BRANDS-1
|
||||
============================================= */}
|
||||
{/* DIVIDER LINE */}
|
||||
<hr className="divider" />
|
||||
{/* PRICING COMPARE
|
||||
============================================= */}
|
||||
<section id="comp-table" className="pt-100 pb-60 pricing-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-md-10 col-lg-9">
|
||||
<div className="section-title mb-70">
|
||||
{/* Title */}
|
||||
<h2 className="s-52 w-700">Compare Our Plans</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Complete list of features available in our pricing plans</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* PRICING COMPARE */}
|
||||
<div className="comp-table wow fadeInUp">
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
{/* Table */}
|
||||
<div className="table-responsive mb-50">
|
||||
<table className="table text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: '34%' }} />
|
||||
<th style={{ width: '22%' }}>Starter</th>
|
||||
<th style={{ width: '22%' }}>Basic</th>
|
||||
<th style={{ width: '22%' }}>Premium</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" className="text-start">Available Projects</th>
|
||||
<td className="color--black">Up to 2</td>
|
||||
<td className="color--black">Up to 250</td>
|
||||
<td className="color--black">Unlimited</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" className="text-start">Available Storage</th>
|
||||
<td className="color--black">2Gb</td>
|
||||
<td className="color--black">50Gb</td>
|
||||
<td className="color--black">350Gb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" className="text-start">Private Cloud Hosting</th>
|
||||
<td className="ico-15 disabled-option"><span className="flaticon-cancel" /></td>
|
||||
<td className="ico-15 disabled-option"><span className="flaticon-cancel" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" className="text-start">User Permissions</th>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" className="text-start">Direct Integrations</th>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" className="text-start">Reusable Components</th>
|
||||
<td className="ico-15 disabled-option"><span className="flaticon-cancel" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" className="text-start">Data Backup</th>
|
||||
<td className="color--black">Weekly</td>
|
||||
<td className="color--black">Daily</td>
|
||||
<td className="color--black">Daily</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" className="text-start">No Ads. No Trackers</th>
|
||||
<td className="ico-15 disabled-option"><span className="flaticon-cancel" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" className="text-start">Advanced Security</th>
|
||||
<td className="ico-15 disabled-option"><span className="flaticon-cancel" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" className="text-start">Shared Team Workspace</th>
|
||||
<td className="ico-15 disabled-option"><span className="flaticon-cancel" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" className="text-start">Team Management</th>
|
||||
<td className="ico-15 disabled-option"><span className="flaticon-cancel" /></td>
|
||||
<td className="ico-15 disabled-option"><span className="flaticon-cancel" /></td>
|
||||
<td className="ico-20 color--theme"><span className="flaticon-check" /></td>
|
||||
</tr>
|
||||
<tr className="table-last-tr">
|
||||
<th scope="row" className="text-start">Customer Support</th>
|
||||
<td className="color--black">Limited</td>
|
||||
<td className="color--black">Basic</td>
|
||||
<td className="color--black">Priority</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> {/* End Table */}
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END PRICING COMPARE */}
|
||||
{/* PRICING COMPARE PAYMENT */}
|
||||
<div className="comp-table-payment">
|
||||
<div className="row row-cols-1 row-cols-md-3">
|
||||
{/* Payment Methods */}
|
||||
<div className="col col-lg-5">
|
||||
<div id="pbox-1" className="pbox mb-40 wow fadeInUp">
|
||||
{/* Title */}
|
||||
<h6 className="s-18 w-700">Accepted Payment Methods</h6>
|
||||
{/* Payment Icons */}
|
||||
<ul className="payment-icons ico-45 mt-25">
|
||||
<li><img src="/images/png_icons/visa.png" alt="payment-icon" /></li>
|
||||
<li><img src="/images/png_icons/am.png" alt="payment-icon" /></li>
|
||||
<li><img src="/images/png_icons/discover.png" alt="payment-icon" /></li>
|
||||
<li><img src="/images/png_icons/paypal.png" alt="payment-icon" /></li>
|
||||
<li><img src="/images/png_icons/jcb.png" alt="payment-icon" /></li>
|
||||
<li><img src="/images/png_icons/shopify.png" alt="payment-icon" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* Payment Guarantee */}
|
||||
<div className="col col-lg-4">
|
||||
<div id="pbox-2" className="pbox mb-40 wow fadeInUp">
|
||||
{/* Title */}
|
||||
<h6 className="s-18 w-700">Money Back Guarantee</h6>
|
||||
{/* Text */}
|
||||
<p>Explore Martex Premium for 14 days. If it’s not a perfect fit, receive a full refund.</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Payment Encrypted */}
|
||||
<div className="col col-lg-3">
|
||||
<div id="pbox-3" className="pbox mb-40 wow fadeInUp">
|
||||
{/* Title */}
|
||||
<h6 className="s-18 w-700">SSL Encrypted Payment</h6>
|
||||
{/* Text */}
|
||||
<p>Your information is protected by 256-bit SSL encryption.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END PRICING COMPARE PAYMENT */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END PRICING COMPARE */}
|
||||
{/* FAQs-3
|
||||
============================================= */}
|
||||
<section id="faqs-3" className="gr--whitesmoke pt-100 faqs-section">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-md-10 col-lg-9">
|
||||
<div className="section-title mb-70">
|
||||
{/* Title */}
|
||||
<h2 className="s-52 w-700">Questions & Answers</h2>
|
||||
{/* Text */}
|
||||
<p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FAQs-3 QUESTIONS */}
|
||||
<div className="faqs-3-questions">
|
||||
<div className="row">
|
||||
{/* QUESTIONS HOLDER */}
|
||||
<div className="col-lg-6">
|
||||
<div className="questions-holder">
|
||||
{/* QUESTION #1 */}
|
||||
<div className="question mb-35 wow fadeInUp">
|
||||
{/* Question */}
|
||||
<h5 className="s-22 w-700"><span>1.</span> Getting started with Martex</h5>
|
||||
{/* Answer */}
|
||||
<p className="color--grey">Etiam amet mauris suscipit in odio integer congue metus
|
||||
and vitae arcu mollis blandit ultrice ligula egestas magna suscipit lectus magna
|
||||
suscipit luctus blandit and laoreet
|
||||
</p>
|
||||
</div>
|
||||
{/* QUESTION #2 */}
|
||||
<div className="question mb-35 wow fadeInUp">
|
||||
{/* Question */}
|
||||
<h5 className="s-22 w-700"><span>2.</span> How do I choose a plan?</h5>
|
||||
{/* Answer */}
|
||||
<p className="color--grey">An enim nullam tempor sapien gravida donec ipsum and enim
|
||||
porta justo integer at velna vitae auctor integer congue undo magna laoreet
|
||||
augue pretium purus pretium ligula
|
||||
</p>
|
||||
</div>
|
||||
{/* QUESTION #3 */}
|
||||
<div className="question mb-35 wow fadeInUp">
|
||||
{/* Question */}
|
||||
<h5 className="s-22 w-700"><span>3.</span> Do I need a credit card to sign up?</h5>
|
||||
{/* Answer */}
|
||||
<ul className="simple-list color--grey">
|
||||
<li className="list-item">
|
||||
<p>Fringilla risus, luctus mauris orci auctor purus ligula euismod pretium
|
||||
purus pretium rutrum tempor sapien
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p>Nemo ipsam egestas volute undo turpis purus lipsum primis aliquam sapien
|
||||
quaerat sodales pretium a purus
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END QUESTIONS HOLDER */}
|
||||
{/* QUESTIONS WRAPPER */}
|
||||
<div className="col-lg-6">
|
||||
<div className="questions-holder">
|
||||
{/* QUESTION #4 */}
|
||||
<div className="question mb-35 wow fadeInUp">
|
||||
{/* Question */}
|
||||
<h5 className="s-22 w-700"><span>4.</span> Discounts for annual plans</h5>
|
||||
{/* Answer */}
|
||||
<p className="color--grey">Quaerat sodales sapien euismod blandit purus a purus
|
||||
ipsum primis in cubilia laoreet augue luctus dolor luctus
|
||||
</p>
|
||||
{/* Answer */}
|
||||
<p className="color--grey">An enim nullam tempor sapien gravida donec congue metus.
|
||||
Vitae arcu mollis blandit integer nemo volute velna
|
||||
</p>
|
||||
</div>
|
||||
{/* QUESTION #5 */}
|
||||
<div className="question mb-35 wow fadeInUp">
|
||||
{/* Question */}
|
||||
<h5 className="s-22 w-700"><span>5.</span> How to request a refund?</h5>
|
||||
{/* Answer */}
|
||||
<p className="color--grey">Cubilia laoreet augue egestas and luctus donec curabite
|
||||
diam vitae dapibus libero and quisque gravida donec neque blandit justo
|
||||
aliquam molestie nunc sapien justo
|
||||
</p>
|
||||
</div>
|
||||
{/* QUESTION #6 */}
|
||||
<div className="question mb-35 wow fadeInUp">
|
||||
{/* Question */}
|
||||
<h5 className="s-22 w-700"><span>6.</span> Can I cancel at anytime?</h5>
|
||||
{/* Answer */}
|
||||
<p className="color--grey">An enim nullam tempor sapien gravida donec ipsum and enim
|
||||
porta justo integer at velna vitae auctor integer congue undo magna laoreet
|
||||
augue pretium purus pretium ligula
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END QUESTIONS HOLDER */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END FAQs-3 QUESTIONS */}
|
||||
{/* MORE QUESTIONS LINK */}
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<div className="more-questions mt-40">
|
||||
<div className="more-questions-txt bg--white-400 r-100">
|
||||
<p className="p-lg">Have any questions?
|
||||
<Link href="/contacts" className="color--theme">Get in Touch</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End container */}
|
||||
</section> {/* END FAQs-3 */}
|
||||
{/* BANNER-1
|
||||
============================================= */}
|
||||
<section id="banner-1" className="pt-100 banner-section">
|
||||
<div className="container">
|
||||
{/* BANNER-1 WRAPPER */}
|
||||
<div className="banner-1-wrapper r-16">
|
||||
<div className="banner-overlay bg--05 bg--fixed">
|
||||
<div className="row">
|
||||
{/* BANNER-1 TEXT */}
|
||||
<div className="col">
|
||||
<div className="banner-1-txt color--white">
|
||||
{/* Title */}
|
||||
<h2 className="s-45 w-700">Give it a try, it's free!</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">It only takes a few clicks to get started</p>
|
||||
{/* Button */}
|
||||
<Link href="/signup-1" className="btn r-04 btn--theme hover--tra-white">Get srarted - it's free
|
||||
</Link>
|
||||
{/* Button Text */}
|
||||
<p className="p-sm btn-txt ico-15 o-85">
|
||||
<span className="flaticon-check" /> Free for 14 days, no credit card required.
|
||||
</p>
|
||||
</div>
|
||||
</div> {/* END BANNER-1 TEXT */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End banner overlay */}
|
||||
</div> {/* END BANNER-1 WRAPPER */}
|
||||
</div> {/* End container */}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -3721,6 +3721,9 @@ p.video-txt-sm {
|
||||
/*z-index:100;*/
|
||||
/*background-color: red;*/
|
||||
height: 100px !important;
|
||||
.h-link{
|
||||
color: #0b0b0b;
|
||||
}
|
||||
}
|
||||
.merms-main {
|
||||
z-index: 0;
|
||||
|
||||
Reference in New Issue
Block a user