AutoMedSysLab/auto-mainweb
1
0
Fork 0
Code Issues Pull Requests Releases Activity
Files
master
auto-mainweb/pages/blog-listing.js
T
CHIEFSOFT\ameye 7470750413 first commit
2023-09-26 13:50:01 -04:00

463 lines
34 KiB
JavaScript
Raw Permalink Blame History

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">
{/* Post Tag */}
<span className="post-tag color--blue-400">Social Media Marketing</span>
{/* Post Link */}
<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">By Martex 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">By Martex 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">By Martex 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">By Martex 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">By Martex 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">By Martex 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>
</>
)
}
Reference in New Issue View Git Blame Copy Permalink