Compare commits

...

16 Commits

Author SHA1 Message Date
victorAnumudu f1f7a5f8a7 changed footer text and about top text 2025-01-10 09:33:46 +01:00
CHIEFSOFT\ameye 8ff4fc0255 banner on features 2025-01-09 21:52:46 -05:00
CHIEFSOFT\ameye 9fd20b58e0 Features page 2025-01-09 21:46:24 -05:00
CHIEFSOFT\ameye c667763e0e Features section on about page 2025-01-09 21:24:53 -05:00
CHIEFSOFT\ameye 1bb40053dd About page Dedicated team 2025-01-09 20:59:43 -05:00
CHIEFSOFT\ameye 12cc957b5a about page 2025-01-09 19:40:43 -05:00
CHIEFSOFT\ameye 6c197e6413 Recent Articles 2025-01-07 13:30:35 -05:00
victor.ebuka e0b4bd7161 Merge branch 'date-fix' of MERMS/MermsWebsite2025 into master 2025-01-07 16:26:37 +00:00
victorAnumudu 3159f08876 blog date fixed 2025-01-07 17:24:38 +01:00
CHIEFSOFT\ameye 9ed9f6c863 page not found 2025-01-07 08:17:37 -05:00
CHIEFSOFT\ameye 0c2e7ce0cf Blog to yaml file 2025-01-07 07:25:16 -05:00
victor.ebuka 32e0b78c68 Merge branch 'blog-page' of MERMS/MermsWebsite2025 into master 2025-01-06 22:18:58 +00:00
victorAnumudu b69170d348 blog page clear up 2025-01-06 23:17:15 +01:00
victorAnumudu 5f21206604 blog page added 2025-01-06 23:15:59 +01:00
CHIEFSOFT\ameye b6ef222d0b Fix texts 2025-01-06 11:25:10 -05:00
victor.ebuka d5fba0caf3 Merge branch 'env-links' of MERMS/MermsWebsite2025 into master 2025-01-06 09:16:47 +00:00
14 changed files with 622 additions and 1599 deletions
+65 -63
View File
@@ -8,77 +8,79 @@ export default function MermsFooter() {
{/* FOOTER CONTENT */}
<div className="row">
{/* FOOTER LOGO */}
<div className="col-xl-3">
<div className="col-xl-4">
<div className="footer-info">
<img className="footer-logo" src="/images/logo-pink.png" alt="footer-logo" />
</div>
<div>
<p>
MERMS, a HIPAA compliant healthcare reputation management platform, helps doctors & medical practitioner improve their online reputation.
Do you need a secure online presence for your healthcare brand with reliable SEO and online marketing to grow? MermEmr helps healthcare professionals to achieve their online marketing service needs
</p>
</div>
</div>
{/* FOOTER LINKS */}
<div className="col-xl-3">
<div className="footer-links fl-1">
{/* Title */}
<h6 className="s-17 w-700">Company</h6>
{/* Links */}
<ul className="foo-links clearfix">
<li>
<p><Link href="/about">About Us</Link></p>
</li>
<li>
<p><Link href="/contacts">Contact Us</Link></p>
</li>
<li>
<p><Link href="/merms-blog">Our Blog</Link></p>
</li>
</ul>
</div>
</div> {/* END FOOTER LINKS */}
{/* FOOTER LINKS */}
<div className="col-xl-3">
<div className="footer-links fl-2">
{/* Title */}
<h6 className="s-17 w-700">Product</h6>
{/* Links */}
<ul className="foo-links clearfix1">
<li>
<p><Link href="/features">Features</Link></p>
</li>
<li>
<p><Link href="/merms-updates">What's New</Link></p>
</li>
<li>
<p><Link href="/pricing">Pricing</Link></p>
</li>
<li>
<p><Link href="/help-center">Help Center</Link></p>
</li>
</ul>
</div>
</div> {/* END FOOTER LINKS */}
{/* FOOTER LINKS */}
<div className="col-xl-3">
<div className="footer-links fl-3">
{/* Title */}
<h6 className="s-17 w-700">Legal</h6>
{/* Links */}
<ul className="foo-links clearfix1">
<li>
<p><Link href="/terms">Terms of Use</Link></p>
</li>
<li>
<p><Link href="/privacy">Privacy Policy</Link></p>
</li>
<li>
<p><Link href="/cookies">Cookie Policy</Link></p>
</li>
{/*<li>*/}
{/* <p><Link href="#">Site Map</Link></p>*/}
{/*</li>*/}
</ul>
<div className="row col-xl-8">
{/* FOOTER LINKS */}
<div className="col-xl-4">
<div className="footer-links fl-1">
{/* Title */}
<h6 className="s-17 w-700">Company</h6>
{/* Links */}
<ul className="foo-links clearfix">
<li>
<p><Link href="/about">About Us</Link></p>
</li>
<li>
<p><Link href="/contacts">Contact Us</Link></p>
</li>
<li>
<p><Link href="/merms-blog">Our Blog</Link></p>
</li>
</ul>
</div>
</div> {/* END FOOTER LINKS */}
{/* FOOTER LINKS */}
<div className="col-xl-4">
<div className="footer-links fl-2">
{/* Title */}
<h6 className="s-17 w-700">Product</h6>
{/* Links */}
<ul className="foo-links clearfix1">
<li>
<p><Link href="/features">Features</Link></p>
</li>
<li>
<p><Link href="/merms-updates">What's New</Link></p>
</li>
<li>
<p><Link href="/pricing">Pricing</Link></p>
</li>
<li>
<p><Link href="/help-center">Help Center</Link></p>
</li>
</ul>
</div>
</div> {/* END FOOTER LINKS */}
{/* FOOTER LINKS */}
<div className="col-xl-4">
<div className="footer-links fl-3">
{/* Title */}
<h6 className="s-17 w-700">Legal</h6>
{/* Links */}
<ul className="foo-links clearfix1">
<li>
<p><Link href="/terms">Terms of Use</Link></p>
</li>
<li>
<p><Link href="/privacy">Privacy Policy</Link></p>
</li>
<li>
<p><Link href="/cookies">Cookie Policy</Link></p>
</li>
{/*<li>*/}
{/* <p><Link href="#">Site Map</Link></p>*/}
{/*</li>*/}
</ul>
</div>
</div>
</div>
</div> {/* END FOOTER CONTENT */}
@@ -0,0 +1,22 @@
import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
function QueryClientContext({children}) {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: 3,
// refetchOnMount: false,
staleTime: 60000,
},
},
})
return (
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
);
}
export default QueryClientContext;
@@ -0,0 +1,5 @@
const queryKeys = {
blog: ['blog']
}
export default queryKeys
+175
View File
@@ -0,0 +1,175 @@
export default function MermsAboutFeautures(){
return <>
<section id="features-11" className="py-100 features-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-50 w-700">We make your business gain more revenue at a glance</h2>
</div>
</div>
</div>
{/* FEATURES-11 WRAPPER */}
<div className="fbox-wrapper">
<div className="row row-cols-1 row-cols-md-2 rows-3">
{/* FEATURE BOX #1 */}
<div className="col">
<div className="fbox-11 fb-1 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico">
{/* Vector Icon */}
<span className="flaticon-graphics color--theme" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Market Research</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #1 */}
{/* FEATURE BOX #2 */}
<div className="col">
<div className="fbox-11 fb-2 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico">
{/* Vector Icon */}
<span className="flaticon-idea color--theme" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">User Experience</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #2 */}
{/* FEATURE BOX #3 */}
<div className="col">
<div className="fbox-11 fb-3 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico">
{/* Vector Icon */}
<span className="flaticon-graphic color--theme" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Digital Marketing</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #3 */}
{/* FEATURE BOX #4 */}
<div className="col">
<div className="fbox-11 fb-4 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico">
{/* Vector Icon */}
<span className="flaticon-wireframe color--theme" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Web Development</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #4 */}
{/* FEATURE BOX #5 */}
<div className="col">
<div className="fbox-11 fb-5 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico">
{/* Vector Icon */}
<span className="flaticon-trophy color--theme" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Brand Design Identity</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #5 */}
{/* FEATURE BOX #6 */}
<div className="col">
<div className="fbox-11 fb-6 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico">
{/* Vector Icon */}
<span className="flaticon-search-engine-1 color--theme" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">SEO &amp; SMM Services</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #6 */}
</div> {/* End row */}
</div> {/* END FEATURES-11 WRAPPER */}
</div> {/* End container */}
</section>
</>
}
+33
View File
@@ -0,0 +1,33 @@
import VideoPopup from "../elements/VidepPopup";
export default function MermsDedicatedTeam (){
return <>
<section className="bg--04 bg--fixed py-100 ct-01 content-section division">
<div className="container">
<div className="row d-flex align-items-center">
{/* TEXT BLOCK */}
<div className="col-md-6 order-last order-md-2">
<div className="txt-block left-column wow fadeInRight">
{/* Section ID */}
<span className="section-id">our Team at MERMS</span>
{/* Title */}
<h2 className="s-50 w-700">Dedicated Team</h2>
{/* Text */}
<p className="p-lg">"We pride ourselves on fostering a collaborative environment where creativity and innovation thrive. By staying at the forefront of industry trends and technological advancements, we transform your ideas into actionable strategies that elevate your practice. Our goal is to assist you in establishing a strong online presence while you focus on what you do best—providing exceptional care to your patients"
</p>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-md-6 order-first order-md-2">
<div className="img-block j-img video-preview right-column wow fadeInLeft">
{/* Play Icon */}
{/*<VideoPopup style={2} />*/}
{/* Preview Image */}
<img className="img-fluid r-20" src="/images/img-17.jpg" alt="video-preview" />
</div>
</div>
</div> {/* End row */}
</div> {/* End container */}
</section>
</>
}
+102
View File
@@ -0,0 +1,102 @@
import { useQuery } from "@tanstack/react-query";
import Link from "next/link";
import queryKeys from "../queryclientProvider/queryKeys";
export default function MermsRecentBlog(){
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.blog,
queryFn: async () => {
try {
const blog_url = 'https://blogdata.chiefsoft.net/mermsblogdata/mermsemr';
const res = await fetch(blog_url)
const data = await res.json()
return data
}
catch(e){
return(e)
}
}
})
return <>
<section id="blog-1" className="py-100 blog-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-50 w-700">Recent Articles from Our Blog</h2>
{/* Text */}
{/*<p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>*/}
</div>
</div>
</div>
{isFetching ?
<div className="">
<div className="">
<p className='text-mute text-center'>Loading...</p>
</div>
</div>
: isError ?
<div className="">
<div className="">
<p className='text-danger text-center'>{error.message}</p>
</div>
</div>
:
<>
{(data && data?.payload?.blogdata?.length > 0) ?
<div className="row">
{data?.payload?.blogdata.map((item, index)=>{
if(index < 3){
return (
<div key={item.id || index} 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={`${data?.payload?.image_url}/${item.meta_value}`}
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={item.guid}> {item.post_title}</Link>
</h6>
{/* Text */}
<p dangerouslySetInnerHTML={{ __html: item.post_content.length > 250 ? item.post_content.substring(0, 250) + ' ...' : item.post_content.substring(0, 250) }} />
{/* Post Meta */}
<div className="blog-post-meta mt-20">
<ul className="post-meta-list ico-10">
<li><p className="p-sm w-500">Merms</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p className="p-sm">{new Date(item.post_date).toDateString()}</p></li>
</ul>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
</div>
)
}
})}
</div>
:
<div className="">
<div className="">
<p className='text-mute text-center'>No Blog Found!</p>
</div>
</div>
}
</>
}
</div> {/* End container */}
</section>
</>
}
+40
View File
@@ -0,0 +1,40 @@
export default function MermsWhyChooseUs(){
return <>
<section className="pt-100 ws-wrapper content-section">
<div className="container">
<div className="bc-1-wrapper bg--02 bg--fixed r-16">
<div className="section-overlay">
<div className="row d-flex align-items-center">
{/* TEXT BLOCK */}
<div className="col-md-6 order-last order-md-2">
<div className="txt-block left-column wow fadeInRight">
{/* Section ID */}
<span className="s-24 w-700 h5-title">Why Choose Us</span>
{/* Title */}
<h2 className="s-46 w-700 pt-3">Experience, Knowledge, Skills &amp; Passion</h2>
{/* Text */}
<p>
We make your practice stand out from other physicians in your area with modern A.I.-enabled solutions relevant to this period and time.
</p>
{/* Small Title */}
<h5 className="s-24 w-700 h5-title">Your success is the goal!</h5>
{/* Text */}
<p className="mb-0">Our platform helps any provider quickly create an online presence, a landing page, or a multi-page website. We also provide everything you need to get your practice humming at full speed.
</p>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-md-6 order-first order-md-2">
<div className="img-block right-column wow fadeInLeft">
<img className="img-fluid" src="/images/img-08.png" alt="content-image" />
</div>
</div>
</div> {/* End row */}
</div> {/* End section overlay */}
</div> {/* End content wrapper */}
</div> {/* End container */}
</section>
</>
}
+1
View File
@@ -15,6 +15,7 @@ services:
# - ./next:/app/.next
extra_hosts:
- blogdata.chiefsoft.net:10.10.33.15
- blog.mermsemr.com:10.10.33.15
- backend.wrenchboard.api.test:10.10.33.15
tty: true
stdin_open: true
+1
View File
@@ -11,6 +11,7 @@
"sass": "sass --watch public/assets/scss/main.scss:public/assets/css/main.css"
},
"dependencies": {
"@tanstack/react-query": "^5.62.16",
"eslint": "8.41.0",
"eslint-config-next": "13.4.3",
"next": "^13.5.8",
+1 -1
View File
@@ -24,7 +24,7 @@ export default function Home() {
Oops! The page you are looking for might have been moved, renamed or might never existed
</h6>
{/* Button */}
<Link href="/demo-1" className="btn btn--theme hover--theme">Back to home</Link>
<Link href="/" className="btn btn--theme hover--theme">Back to home</Link>
</div>
</div> {/* END 404 PAGE TEXT */}
</div> {/* End row */}
+4 -1
View File
@@ -10,6 +10,7 @@ import "/public/css/lunar.css"
import "/public/css/animate.css"
import "/public/css/merms.css"
import "/public/css/responsive.css"
import QueryClientContext from "../components/queryclientProvider/QueryClientContext"
function MyApp({ Component, pageProps }) {
@@ -24,7 +25,9 @@ function MyApp({ Component, pageProps }) {
{/* <SmoothScroll /> */}
{!loading ? (
// <ProductHome />
<Component {...pageProps} />
<QueryClientContext>
<Component {...pageProps} />
</QueryClientContext>
) : (
<Preloader />
)}
+10 -436
View File
@@ -3,6 +3,10 @@ import VideoPopup from "../components/elements/VidepPopup"
import Layout from "../components/layout/Layout"
import BrandSlider2 from "../components/slider/BrandSlider2"
import Link from "next/link"
import MermsRecentBlog from "../components/sections/MermsRecentBlog";
import MermsWhyChooseUs from "../components/sections/MermsWhyChooseUs";
import MermsDedicatedTeam from "../components/sections/MermsDedicatedTeam";
import MermsAboutFeautures from "../components/sections/MermsAboutFeautures";
export default function Home() {
return (
@@ -60,12 +64,10 @@ export default function Home() {
<span className="flaticon-quote" />
</div>
{/* Text */}
<p>Nullam tempor pretium a gravida donec congue ipsum porta justo integer dolor
odio auctor a neque suscipit an ipsum integer congue purus at pretium turpis
egestas and volute laoreet quaerat
<p>As a healthcare provider, you must stay up-to-date on the latest trends and technologies to connect with your patients and provide them with top-notch care. We offer a variety of products that are specifically designed to help you meet the growing online needs of your practice
</p>
{/* Author */}
<p className="a2-txt-author">Charlie Cheever <span>CEO &amp; CO-FOUNDER</span></p>
{/* <p className="a2-txt-author">Charlie Cheever <span>CEO &amp; CO-FOUNDER</span></p> */}
</div>
</div>
{/* IMAGE-4 */}
@@ -79,442 +81,14 @@ export default function Home() {
</div> {/* End row */}
</div> {/* END ABOUT-2 IMAGES */}
</section> {/* END ABOUT-2 */}
{/* ABOUT-3
============================================= */}
<section className="bg--04 bg--fixed py-100 ct-01 content-section division">
<div className="container">
<div className="row d-flex align-items-center">
{/* TEXT BLOCK */}
<div className="col-md-6 order-last order-md-2">
<div className="txt-block left-column wow fadeInRight">
{/* Section ID */}
<span className="section-id">our Team at MERMS</span>
{/* Title */}
<h2 className="s-50 w-700">Henry Adams</h2>
{/* Text */}
<p className="p-lg">"Sodales tempor sapien diam purus ipsum quaerat and volute fusce
a congue laoreet turpis neque diam auctor turpis vitae dolor magna luctus placerat
neque ipsum fusce cursus ligula cursus purus vitae purus and ipsum suscipit. Nemo
ipsam cubilia donec turpis undo egestas ipsum a purus sapien ultrice aliquam lacus
and quaerat an ipsum augue turpis sapien cursus congue augue"
</p>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-md-6 order-first order-md-2">
<div className="img-block j-img video-preview right-column wow fadeInLeft">
{/* Play Icon */}
<VideoPopup style={2} />
{/* Preview Image */}
<img className="img-fluid r-20" src="/images/img-17.jpg" alt="video-preview" />
</div>
</div>
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END TEXT CONTENT */}
{/* FEATURES-11
============================================= */}
<section id="features-11" className="py-100 features-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-50 w-700">We make your business gain more revenue at a glance</h2>
{/* Text */}
<p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>
</div>
</div>
</div>
{/* FEATURES-11 WRAPPER */}
<div className="fbox-wrapper">
<div className="row row-cols-1 row-cols-md-2 rows-3">
{/* FEATURE BOX #1 */}
<div className="col">
<div className="fbox-11 fb-1 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico">
{/* Vector Icon */}
<span className="flaticon-graphics color--theme" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Market Research</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #1 */}
{/* FEATURE BOX #2 */}
<div className="col">
<div className="fbox-11 fb-2 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico">
{/* Vector Icon */}
<span className="flaticon-idea color--theme" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">User Experience</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #2 */}
{/* FEATURE BOX #3 */}
<div className="col">
<div className="fbox-11 fb-3 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico">
{/* Vector Icon */}
<span className="flaticon-graphic color--theme" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Digital Marketing</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #3 */}
{/* FEATURE BOX #4 */}
<div className="col">
<div className="fbox-11 fb-4 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico">
{/* Vector Icon */}
<span className="flaticon-wireframe color--theme" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Web Development</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #4 */}
{/* FEATURE BOX #5 */}
<div className="col">
<div className="fbox-11 fb-5 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico">
{/* Vector Icon */}
<span className="flaticon-trophy color--theme" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Brand Design Identity</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #5 */}
{/* FEATURE BOX #6 */}
<div className="col">
<div className="fbox-11 fb-6 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico">
{/* Vector Icon */}
<span className="flaticon-search-engine-1 color--theme" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">SEO &amp; SMM Services</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #6 */}
</div> {/* End row */}
</div> {/* END FEATURES-11 WRAPPER */}
</div> {/* End container */}
</section> {/* END FEATURES-11 */}
{/* DIVIDER LINE */}
<MermsDedicatedTeam />
<MermsAboutFeautures />
<hr className="divider" />
{/* BRANDS-1
============================================= */}
{/* TEAM-1
============================================= */}
<section className="pt-100 ws-wrapper content-section">
<div className="container">
<div className="bc-1-wrapper bg--02 bg--fixed r-16">
<div className="section-overlay">
<div className="row d-flex align-items-center">
{/* TEXT BLOCK */}
<div className="col-md-6 order-last order-md-2">
<div className="txt-block left-column wow fadeInRight">
{/* Section ID */}
<span className="section-id">Why Choose Us</span>
{/* Title */}
<h2 className="s-46 w-700">With knowledge, skills &amp; hard work</h2>
{/* Text */}
<p>Sodales tempor sapien quaerat congue eget ipsum laoreet turpis neque auctor
vitae eros dolor luctus placerat magna ligula cursus and purus pretium
</p>
{/* Small Title */}
<h5 className="s-24 w-700 h5-title">Your road to success!</h5>
{/* Text */}
<p className="mb-0">Sapien tempor sodales quaerat ipsum undo congue laoreet turpis neque
auctor turpis vitae dolor luctus placerat magna and ligula cursus purus vitae
</p>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-md-6 order-first order-md-2">
<div className="img-block right-column wow fadeInLeft">
<img className="img-fluid" src="/images/img-08.png" alt="content-image" />
</div>
</div>
</div> {/* End row */}
</div> {/* End section overlay */}
</div> {/* End content wrapper */}
</div> {/* End container */}
</section> {/* END BOX CONTENT */}
{/* TEXT CONTENT
============================================= */}
<section className="pt-100 ct-02 content-section division">
<div className="container">
{/* SECTION CONTENT (ROW) */}
<div className="row d-flex align-items-center">
{/* IMAGE BLOCK */}
<div className="col-md-6">
<div className="img-block left-column wow fadeInRight">
<img className="img-fluid" src="/images/img-07.png" alt="content-image" />
</div>
</div>
{/* TEXT BLOCK */}
<div className="col-md-6">
<div className="txt-block right-column wow fadeInLeft">
{/* Section ID */}
<span className="section-id">Strategies That Work</span>
{/* Title */}
<h2 className="s-46 w-700">Right strategies &amp; implementations</h2>
{/* Text */}
<p>Sodales tempor sapien quaerat ipsum undo congue laoreet turpis neque auctor turpis
vitae dolor luctus placerat magna and ligula cursus purus vitae purus an ipsum suscipit
</p>
{/* Text */}
<p className="mb-0">Nemo ipsam egestas volute turpis egestas ipsum and purus sapien ultrice
an aliquam quaerat ipsum augue turpis sapien cursus congue magna purus quaerat at ligula
purus egestas magna cursus undo varius purus magnis sapien quaerat
</p>
</div>
</div> {/* END TEXT BLOCK */}
</div> {/* END SECTION CONTENT (ROW) */}
</div> {/* End container */}
</section> {/* END TEXT CONTENT */}
{/* TESTIMONIALS-2
============================================= */}
{/* RATING-1
============================================= */}
<section className="bg--white-400 py-100 ct-03 content-section division">
<div className="container">
<div className="row d-flex align-items-center">
{/* TEXT BLOCK */}
<div className="col-md-6 col-lg-5 order-last order-md-2">
<div className="txt-block left-column wow fadeInRight">
{/* Section ID */}
<span className="section-id">One-Stop Solution</span>
{/* Title */}
<h2 className="s-46 w-700">Data-driven digital marketing</h2>
{/* List */}
<ul className="simple-list">
<li className="list-item">
<p>Tempor sapien quaerat undo ipsum laoreet purus and sapien dolor ociis ultrice
ipsum aliquam undo congue dolor cursus congue varius magnis
</p>
</li>
<li className="list-item">
<p className="mb-0">Cursus purus suscipit vitae cubilia magnis diam volute egestas
sapien ultrice auctor
</p>
</li>
</ul>
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-md-6 col-lg-7 order-first order-md-2">
<div className="img-block right-column wow fadeInLeft">
<img className="img-fluid" src="/images/img-14.png" alt="content-image" />
</div>
</div>
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END TEXT CONTENT */}
{/* BLOG-1
============================================= */}
<section id="blog-1" className="py-100 blog-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-50 w-700">Recent Articles from Our Blog</h2>
{/* Text */}
{/*<p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>*/}
</div>
</div>
</div>
<div className="row">
{/* BLOG POST #1 */}
<div className="col-md-6 col-lg-4">
<div id="bp-1-1" className="blog-post wow fadeInUp">
{/* 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--pink-400">Product News</span>
{/* Post Link */}
<h6 className="s-20 w-700">
<Link href="/single-post">Aliqum mullam porta blandit: tempor sapien and 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">By Helen J.</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p className="p-sm">Apr 28, 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 id="bp-1-2" className="blog-post wow fadeInUp">
{/* 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 egestas CEO cursus at magna sapien
suscipit and egestas 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 MERMS Team</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p className="p-sm">Apr 14, 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 id="bp-1-3" className="blog-post wow fadeInUp">
{/* 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--purple-400">Freelancer Tips</span>
{/* Post Link */}
<h6 className="s-20 w-700">
<Link href="/single-post">Cubilia laoreet augue egestas and MERMS magna impedit</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">Mar 27, 2023</p></li>
</ul>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
</div> {/* END BLOG POST #3 */}
</div> {/* End row */}
</div> {/* End container */}
</section> {/* END BLOG-1 */}
{/* DIVIDER LINE */}
<MermsWhyChooseUs />
<MermsRecentBlog />
<hr className="divider" />
{/* NEWSLETTER-1
============================================= */}
</div>
</Layout>
+12 -680
View File
@@ -2,6 +2,8 @@ import CounterUp from "../components/elements/CounterUp"
import VideoPopup from "../components/elements/VidepPopup"
import Layout from "../components/layout/Layout"
import Link from "next/link"
import MermsAboutFeautures from "../components/sections/MermsAboutFeautures";
import MermsBanner from "../components/sections/MermsBanner";
export default function Home() {
return (
@@ -47,180 +49,9 @@ export default function Home() {
</div> {/* END SECTION CONTENT (ROW) */}
</div> {/* End container */}
</section> {/* END TEXT CONTENT */}
{/* FEATURES-11
============================================= */}
<section id="features-11" className="pt-100 features-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-50 w-700">We make your business gain more revenue at a glance</h2>
{/* Text */}
<p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>
</div>
</div>
</div>
{/* FEATURES-11 WRAPPER */}
<div className="fbox-wrapper">
<div className="row row-cols-1 row-cols-md-2 rows-3">
{/* FEATURE BOX #1 */}
<div className="col">
<div className="fbox-11 fb-1 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico color--theme">
{/* Vector Icon */}
<span className="flaticon-graphics" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Market Research</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #1 */}
{/* FEATURE BOX #2 */}
<div className="col">
<div className="fbox-11 fb-2 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico color--theme">
{/* Vector Icon */}
<span className="flaticon-idea" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">User Experience</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #2 */}
{/* FEATURE BOX #3 */}
<div className="col">
<div className="fbox-11 fb-3 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico color--theme">
{/* Vector Icon */}
<span className="flaticon-graphic" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Digital Marketing</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #3 */}
{/* FEATURE BOX #4 */}
<div className="col">
<div className="fbox-11 fb-4 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico color--theme">
{/* Vector Icon */}
<span className="flaticon-wireframe" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Web Development</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #4 */}
{/* FEATURE BOX #5 */}
<div className="col">
<div className="fbox-11 fb-5 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico color--theme">
{/* Vector Icon */}
<span className="flaticon-trophy" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Brand Design Identity</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #5 */}
{/* FEATURE BOX #6 */}
<div className="col">
<div className="fbox-11 fb-6 wow fadeInUp">
{/* Icon */}
<div className="fbox-ico-wrap">
<div className="fbox-ico ico-50">
<div className="shape-ico color--theme">
{/* Vector Icon */}
<span className="flaticon-search-engine-1" />
{/* Shape */}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
</svg>
</div>
</div>
</div> {/* End Icon */}
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">SEO &amp; SMM Services</h6>
<p>Porta semper lacus cursus feugiat primis ultrice ligula risus ociis auctor and
tempus feugiat impedit felis cursus auctor augue mauris blandit ipsum
</p>
</div>
</div>
</div> {/* END FEATURE BOX #6 */}
</div> {/* End row */}
</div> {/* END FEATURES-11 WRAPPER */}
</div> {/* End container */}
</section> {/* END FEATURES-11 */}
{/* BOX CONTENT
============================================= */}
<MermsAboutFeautures />
<section className="pt-100 ws-wrapper content-section">
<div className="container">
<div className="bc-1-wrapper bg--white-400 bg--fixed r-16">
@@ -496,140 +327,10 @@ export default function Home() {
</div> {/* END FEATURES-2 WRAPPER */}
</div> {/* End container */}
</section> {/* END FEATURES-2 */}
{/* BOX CONTENT
============================================= */}
<section className="pt-100 ws-wrapper content-section">
<div className="container">
<div className="bc-5-wrapper bg--04 hidd bg--scroll r-16">
<div className="section-overlay">
{/* SECTION TITLE */}
<div className="row justify-content-center">
<div className="col-md-11 col-lg-9">
<div className="section-title wow fadeInUp mb-60">
{/* Title */}
<h2 className="s-50 w-700">Build a customer-centric marketing strategy</h2>
{/* Text */}
<p className="p-xl">Aliquam a augue suscipit luctus neque purus ipsum neque diam
dolor primis libero tempus, blandit and cursus varius and magnis sodales
</p>
</div>
</div>
</div>
{/* IMAGE BLOCK */}
<div className="row justify-content-center">
<div className="col">
<div className="bc-5-img bc-5-tablet img-block-hidden video-preview wow fadeInUp">
{/* Play Icon */}
<VideoPopup style={1} />
{/* Preview Image */}
<img className="img-fluid" src="/images/tablet-01.png" alt="content-image" />
</div>
</div>
</div>
</div> {/* End section overlay */}
</div> {/* End content wrapper */}
</div> {/* End container */}
</section> {/* END BOX CONTENT */}
{/* STATISTIC-1
============================================= */}
<div id="statistic-1" className="py-100 statistic-section division">
<div className="container">
{/* STATISTIC-1 WRAPPER */}
<div className="statistic-1-wrapper">
<div className="row justify-content-md-center row-cols-1 row-cols-md-3">
{/* STATISTIC BLOCK #1 */}
<div className="col">
<div id="sb-1-1" className="wow fadeInUp">
<div className="statistic-block">
{/* Digit */}
<div className="statistic-block-digit text-center">
<h2 className="s-46 statistic-number"><CounterUp end={89} />k</h2>
</div>
{/* Text */}
<div className="statistic-block-txt color--grey">
<p className="p-md">Porta justo integer and velna vitae auctor</p>
</div>
</div>
</div>
</div> {/* END STATISTIC BLOCK #1 */}
{/* STATISTIC BLOCK #2 */}
<div className="col">
<div id="sb-1-2" className="wow fadeInUp">
<div className="statistic-block">
{/* Digit */}
<div className="statistic-block-digit text-center">
<h2 className="s-46 statistic-number"><CounterUp end={76} />%</h2>
</div>
{/* Text */}
<div className="statistic-block-txt color--grey">
<p className="p-md">Ligula magna suscipit vitae and rutrum</p>
</div>
</div>
</div>
</div> {/* END STATISTIC BLOCK #2 */}
{/* STATISTIC BLOCK #3 */}
<div className="col">
<div id="sb-1-3" className="wow fadeInUp">
<div className="statistic-block">
{/* Digit */}
<div className="statistic-block-digit text-center">
<h2 className="s-46 statistic-number">
<CounterUp end={4} />.<CounterUp end={93} />
</h2>
</div>
{/* Text */}
<div className="statistic-block-txt color--grey">
<p className="p-md">Sagittis congue augue egestas an egestas</p>
</div>
</div>
</div>
</div> {/* END STATISTIC BLOCK #3 */}
</div> {/* End row */}
</div> {/* END STATISTIC-1 WRAPPER */}
</div> {/* End container */}
</div> {/* END STATISTIC-1 */}
{/* DIVIDER LINE */}
<hr className="divider" />
{/* TEXT CONTENT
============================================= */}
<section className="pt-100 ct-02 content-section division">
<div className="container">
{/* SECTION CONTENT (ROW) */}
<div className="row d-flex align-items-center">
{/* IMAGE BLOCK */}
<div className="col-md-6">
<div className="img-block left-column wow fadeInRight">
<img className="img-fluid" src="/images/img-02.png" alt="content-image" />
</div>
</div>
{/* TEXT BLOCK */}
<div className="col-md-6">
<div className="txt-block right-column wow fadeInLeft">
{/* Section ID */}
<span className="section-id">Easy Integration</span>
{/* Title */}
<h2 className="s-46 w-700">Plug your essential tools in few clicks</h2>
{/* List */}
<ul className="simple-list">
<li className="list-item">
<p>Cursus purus suscipit vitae cubilia magnis volute egestas vitae sapien turpis
sodales magna undo aoreet primis
</p>
</li>
<li className="list-item">
<p className="mb-0">Tempor sapien quaerat an ipsum laoreet purus and sapien dolor an
ultrice ipsum aliquam undo congue dolor cursus purus congue and ipsum purus sapien
a blandit
</p>
</li>
</ul>
</div>
</div> {/* END TEXT BLOCK */}
</div> {/* END SECTION CONTENT (ROW) */}
</div> {/* End container */}
</section> {/* END TEXT CONTENT */}
{/* TEXT CONTENT
============================================= */}
<section className="pt-100 ct-04 content-section division">
<div className="container">
{/* SECTION CONTENT (ROW) */}
@@ -754,379 +455,10 @@ export default function Home() {
</div> {/* END SECTION CONTENT (ROW) */}
</div> {/* End container */}
</section> {/* END TEXT CONTENT */}
{/* INTEGRATIONS-1
============================================= */}
<section id="integrations-1" className="pt-100 integrations-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">All Necessary Tools</h2>
{/* Text */}
<p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>
</div>
</div>
</div>
{/* INTEGRATIONS-1 WRAPPER */}
<div className="integrations-1-wrapper">
<div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 rows-2">
{/* TOOL #1 */}
<div className="col">
<Link href="#" className="in_tool it-1 r-12 mb-30 wow fadeInUp">
{/* Icon */}
<div className="in_tool-logo-wrap">
<div className="in_tool-logo ico-60">
<img className="img-fluid" src="/images/png_icons/tool-1.png" alt="brand-logo" />
</div>
</div>
{/* Text */}
<div className="in_tool-txt">
<h6 className="s-20 w-700">Zapier</h6>
<p className="p-sm">Share findings</p>
</div>
</Link>
</div> {/* END FEATURE BOX #1 */}
{/* TOOL #2 */}
<div className="col">
<Link href="#" className="in_tool it-2 r-12 mb-30 wow fadeInUp">
{/* Icon */}
<div className="in_tool-logo-wrap">
<div className="in_tool-logo ico-60">
<img className="img-fluid" src="/images/png_icons/tool-2.png" alt="brand-logo" />
</div>
</div>
{/* Text */}
<div className="in_tool-txt">
<h6 className="s-20 w-700">Google Analytics</h6>
<p className="p-sm">Share findings</p>
</div>
</Link>
</div> {/* END FEATURE BOX #2 */}
{/* TOOL #3 */}
<div className="col">
<Link href="#" className="in_tool it-3 r-12 mb-30 wow fadeInUp">
{/* Icon */}
<div className="in_tool-logo-wrap">
<div className="in_tool-logo ico-60">
<img className="img-fluid" src="/images/png_icons/tool-3.png" alt="brand-logo" />
</div>
</div>
{/* Text */}
<div className="in_tool-txt">
<h6 className="s-20 w-700">Amplitude</h6>
<p className="p-sm">Share findings</p>
</div>
</Link>
</div> {/* END FEATURE BOX #3 */}
{/* TOOL #4 */}
<div className="col">
<Link href="#" className="in_tool it-4 r-12 mb-30 wow fadeInUp">
{/* Icon */}
<div className="in_tool-logo-wrap">
<div className="in_tool-logo ico-60">
<img className="img-fluid" src="/images/png_icons/tool-4.png" alt="brand-logo" />
</div>
</div>
{/* Text */}
<div className="in_tool-txt">
<h6 className="s-20 w-700">Hubspot</h6>
<p className="p-sm">Share findings</p>
</div>
</Link>
</div> {/* END FEATURE BOX #4 */}
{/* TOOL #5 */}
<div className="col">
<Link href="#" className="in_tool it-5 r-12 mb-30 wow fadeInUp">
{/* Icon */}
<div className="in_tool-logo-wrap">
<div className="in_tool-logo ico-60">
<img className="img-fluid" src="/images/png_icons/tool-5.png" alt="brand-logo" />
</div>
</div>
{/* Text */}
<div className="in_tool-txt">
<h6 className="s-20 w-700">MailChimp</h6>
<p className="p-sm">Import data</p>
</div>
</Link>
</div> {/* END FEATURE BOX #5 */}
{/* TOOL #6 */}
<div className="col">
<Link href="#" className="in_tool it-6 r-12 mb-30 wow fadeInUp">
{/* Icon */}
<div className="in_tool-logo-wrap">
<div className="in_tool-logo ico-60">
<img className="img-fluid" src="/images/png_icons/tool-6.png" alt="brand-logo" />
</div>
</div>
{/* Text */}
<div className="in_tool-txt">
<h6 className="s-20 w-700">Slack</h6>
<p className="p-sm">Share findings</p>
</div>
</Link>
</div> {/* END FEATURE BOX #6 */}
{/* TOOL #7 */}
<div className="col">
<Link href="#" className="in_tool it-7 r-12 wow fadeInUp">
{/* Icon */}
<div className="in_tool-logo-wrap">
<div className="in_tool-logo ico-60">
<img className="img-fluid" src="/images/png_icons/tool-7.png" alt="brand-logo" />
</div>
</div>
{/* Text */}
<div className="in_tool-txt">
<h6 className="s-20 w-700">Dropbox</h6>
<p className="p-sm">Import data</p>
</div>
</Link>
</div> {/* END FEATURE BOX #7 */}
{/* TOOL #8 */}
<div className="col">
<Link href="#" className="in_tool it-8 r-12 wow fadeInUp">
{/* Icon */}
<div className="in_tool-logo-wrap">
<div className="in_tool-logo ico-60">
<img className="img-fluid" src="/images/png_icons/tool-8.png" alt="brand-logo" />
</div>
</div>
{/* Text */}
<div className="in_tool-txt">
<h6 className="s-20 w-700">Trello</h6>
<p className="p-sm">Share findings</p>
</div>
</Link>
</div> {/* END FEATURE BOX #8 */}
{/* TOOL #9 */}
<div className="col">
<Link href="#" className="in_tool it-9 r-12 wow fadeInUp">
{/* Icon */}
<div className="in_tool-logo-wrap">
<div className="in_tool-logo ico-60">
<img className="img-fluid" src="/images/png_icons/tool-9.png" alt="brand-logo" />
</div>
</div>
{/* Text */}
<div className="in_tool-txt">
<h6 className="s-20 w-700">Google Drive</h6>
<p className="p-sm">Import data</p>
</div>
</Link>
</div> {/* END FEATURE BOX #9 */}
</div>
</div> {/* END INTEGRATIONS-1 WRAPPER */}
{/* MORE BUTTON */}
<div className="row">
<div className="col">
<div className="more-btn text-center mt-60 wow fadeInUp">
<Link href="/integrations" className="btn btn--tra-black hover--theme">View all integrations</Link>
</div>
</div>
</div>
</div> {/* End container */}
</section> {/* END INTEGRATIONS-1 */}
{/* FEATURES-5
============================================= */}
<section id="features-5" className="pt-100 features-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-50 w-700">Track the progress towards objectives with key results</h2>
{/* Text */}
<p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>
</div>
</div>
</div>
{/* FEATURES-5 WRAPPER */}
<div className="fbox-wrapper text-center">
<div className="row d-flex align-items-center">
{/* FEATURE BOX #1 */}
<div className="col-md-6">
<div className="fbox-5 fb-1 gr--smoke r-16 wow fadeInUp">
{/* Text */}
<div className="fbox-txt order-last order-md-2">
<h5 className="s-26 w-700">Marketing Integrations</h5>
<p>Aliquam a augue suscipit luctus diam neque purus ipsum neque and dolor primis libero</p>
</div>
{/* Image */}
<div className="fbox-5-img order-first order-md-2">
<img className="img-fluid light-theme-img" src="/images/f_06.png" alt="feature-image" />
<img className="img-fluid dark-theme-img" src="/images/f_06_dark.png" alt="feature-image" />
</div>
</div>
</div> {/* END FEATURE BOX #1 */}
{/* FEATURE BOX #2 */}
<div className="col-md-6">
<div className="fbox-5 fb-2 gr--smoke r-16 wow fadeInUp">
{/* Image */}
<div className="fbox-5-img">
<img className="img-fluid light-theme-img" src="/images/f_04.png" alt="feature-image" />
<img className="img-fluid dark-theme-img" src="/images/f_04_dark.png" alt="feature-image" />
</div>
{/* Text */}
<div className="fbox-txt">
<h5 className="s-26 w-700">Productivity Focused</h5>
<p>Aliquam a augue suscipit luctus diam neque purus ipsum neque and dolor primis libero</p>
</div>
</div>
</div> {/* END FEATURE BOX #2 */}
</div> {/* End row */}
</div> {/* END FEATURES-5 WRAPPER */}
</div> {/* End container */}
</section> {/* END FEATURES-5 */}
{/* FAQs-3
============================================= */}
<section id="faqs-3" className="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-50 w-700">Questions &amp; 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> What's inside the package?</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> How do I choose a plan?</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> How does Martex handle my privacy?</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> I have an issue with my account</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-13
============================================= */}
<section id="banner-13" className="pt-100 banner-section">
<div className="container">
{/* BANNER-13 WRAPPER */}
<div className="banner-13-wrapper bg--05 bg--scroll r-16 block-shadow">
<div className="banner-overlay">
<div className="row d-flex align-items-center">
{/* BANNER-5 TEXT */}
<div className="col-md-7">
<div className="banner-13-txt color--white">
{/* Title */}
<h2 className="s-46 w-700">Getting started with Martex today!</h2>
{/* Text */}
<p className="p-lg">Congue laoreet turpis neque auctor turpis vitae dolor a luctus
placerat and magna ligula cursus
</p>
{/* Button */}
<Link href="/signup-1" className="btn r-04 btn--theme hover--tra-white">Get srarted - it's free</Link>
</div>
</div> {/* END BANNER-13 TEXT */}
{/* BANNER-13 IMAGE */}
<div className="col-md-5">
<div className="banner-13-img text-center">
<img className="img-fluid" src="/images/img-04.png" alt="banner-image" />
</div>
</div>
</div> {/* End row */}
</div> {/* End banner overlay */}
</div> {/* END BANNER-13 WRAPPER */}
</div> {/* End container */}
</section>
<MermsBanner />
</div>
</Layout>
+151 -418
View File
@@ -1,33 +1,26 @@
//"use server"
import { useQuery } from "@tanstack/react-query";
import VideoPopup from "../components/elements/VidepPopup"
import Layout from "../components/layout/Layout"
import Link from "next/link"
import {useState, useEffect } from "react";
import queryKeys from "../components/queryclientProvider/queryKeys";
export default function Home() {
const [posts, setPosts] = useState(null)
useEffect(() => {
async function fetchPosts() {
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.blog,
queryFn: async () => {
try {
const blog_url = 'https://blogdata.chiefsoft.net/mermsblogdata/mermsemr';
//http://localhost:8805/mermsblogdata/mermsemr'; // https://blogdata.chiefsoft.net/mermsblogdata/mermsemr
const res = await fetch(blog_url)
const data = await res.json()
setPosts(data)
console.log(data)
return data
}
catch(e){
console.log(e)
return(e)
}
}
fetchPosts().then(r => {
console.log(r)
})
}, [])
const firstBlogItem = posts?.payload?.blogdata[0];
console.log(firstBlogItem);
})
return (
<>
@@ -35,425 +28,165 @@ export default function Home() {
<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="https://blog.mermsemr.com/wp-content/uploads/2024/10/branding-practice.jpg"
alt="blog-post-image" />
</div>
</div>
{/* BLOG POST TEXT */}
<div className="col-md-6">
<div className="blog-post-txt">
{isFetching ?
<div className="">
<div className="">
<p className='text-mute text-center'>Loading...</p>
</div>
</div>
: isError ?
<div className="">
<div className="">
<p className='text-danger text-center'>{error.message}</p>
</div>
</div>
:
<>
{(data && data?.payload?.blogdata?.length > 0) ?
<>
{/* 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={`${data?.payload?.image_url}/${data?.payload?.blogdata[0].meta_value}`}
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="https://blog.mermsemr.com/?p=55"> {firstBlogItem?.post_name}
</Link>
</h3>
{/* Text */}
<p>{firstBlogItem?.post_content.substring(0, 250)}
</p>
{/* Post Meta */}
<div className="blog-post-meta mt-30">
<ul className="post-meta-list ico-10">
<li><p className="w-500">MERMS </p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p>{firstBlogItem?.post_date}</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>
<h3 className="s-38 w-700">
<Link href={data?.payload?.blogdata[0].guid}> {data?.payload?.blogdata[0].post_title}</Link>
</h3>
{/* Text */}
{/* <p>{data?.payload?.blogdata[0].post_content.substring(0, 250)}</p> */}
<p dangerouslySetInnerHTML={{ __html: data?.payload?.blogdata[0].post_content.length > 250 ? data?.payload?.blogdata[0].post_content.substring(0, 250) + ' ...' : data?.payload?.blogdata[0].post_content.substring(0, 250) }} />
{/* Post Meta */}
<div className="blog-post-meta mt-30">
<ul className="post-meta-list ico-10">
<li><p className="w-500">MERMS </p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p>{new Date(data?.payload?.blogdata[0]?.post_date).toDateString()}</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 */}
{data?.payload?.blogdata.map((item, index)=>{
if(index > 0){
return (
<div key={item.id || index} 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={`${data?.payload?.image_url}/${item.meta_value}`}
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={item.guid}> {item.post_title}</Link>
</h6>
{/* Text */}
<p dangerouslySetInnerHTML={{ __html: item.post_content.length > 250 ? item.post_content.substring(0, 250) + ' ...' : item.post_content.substring(0, 250) }} />
{/* Post Meta */}
<div className="blog-post-meta mt-20">
<ul className="post-meta-list ico-10">
<li><p className="p-sm w-500">Merms</p></li>
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
<li><p className="p-sm">{new Date(item.post_date).toDateString()}</p></li>
</ul>
</div>
</div> {/* END BLOG POST TEXT */}
</div>
</div>
)
}
})}
{/* END BLOG POST #1 */}
</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> {/* END POSTS WRAPPER */}
<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">
<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>
</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>
{/* 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 */}
</>
:
<div className="">
<div className="">
<p className='text-mute text-center'>No Blog Found!</p>
</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
============================================= */}
</div>
</Layout>
</>
)