341 lines
34 KiB
JavaScript
341 lines
34 KiB
JavaScript
import Link from "next/link"
|
|
import { useRouter } from "next/router"
|
|
import { useEffect, useState } from "react"
|
|
import Layout from "../../components/layout/Layout"
|
|
import data from "../../util/blog.json"
|
|
|
|
const BlogDetails = () => {
|
|
|
|
let Router = useRouter()
|
|
|
|
const [blogPost, setBlogPost] = useState(null)
|
|
|
|
|
|
const { id } = Router.query
|
|
|
|
useEffect(() => {
|
|
setBlogPost(data.find((data) => data.id == id))
|
|
}, [id])
|
|
|
|
|
|
return (
|
|
<>
|
|
<Layout breadcrumbTitle="Blog Details">
|
|
|
|
{blogPost && (
|
|
<>
|
|
|
|
<section className="blog-detail-section">
|
|
{/*-============spacing==========-*/}
|
|
<div className="pd_top_90" />
|
|
{/*-============spacing==========-*/}
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="blog_single_content">
|
|
<div className="single-thumbnail">
|
|
<img src={`/assets/images/blog/${blogPost.img}`} className="img-fluid" alt="img" />
|
|
</div>
|
|
<div className="single_content_upper">
|
|
<div className="post_single_content">
|
|
<div className="section_title small type_one mr_bottom_25">
|
|
<div className="title_whole">
|
|
<h3 className="title"> “Touch Design For Mobile Interfaces” A News Smashing BookCreate An Information Wayaea Architecture Easy</h3>
|
|
</div>
|
|
</div>
|
|
<div className="position-relative position_p_relative mr_bottom_20"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim epsam voluptatem quia voluptas sit aspernatur aut odit aut fugiconse quuntur magni dolores qui ratione voluptatem sequi nesciunt.</div>
|
|
<div className="row mr_bottom_20">
|
|
<div className="col-lg-4 col-md-6 col-sm-12">
|
|
<div className="position-relative">
|
|
<ul className="list_box list">
|
|
<li>
|
|
<div className="d-flex align-items-center">
|
|
<div className="icon trans">
|
|
<i aria-hidden="false" className="fas fa-check-circle" />
|
|
</div>
|
|
<Link className="links" href="#"> Best Insurance Agency </Link>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className="d-flex align-items-center">
|
|
<div className="icon trans">
|
|
<i aria-hidden="false" className="fas fa-check-circle" />
|
|
</div>
|
|
<Link className="links" href="#"> Trusted & Experience Insurance </Link>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className="d-flex align-items-center">
|
|
<div className="icon trans">
|
|
<i aria-hidden="false" className="fas fa-check-circle" />
|
|
</div>
|
|
<Link className="links" href="#"> Dedicated Support & Security </Link>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-4 col-md-6 col-sm-12">
|
|
<div className="position-relative">
|
|
<ul className="list_box list">
|
|
<li>
|
|
<div className="d-flex align-items-center">
|
|
<div className="icon trans">
|
|
<i aria-hidden="false" className="fas fa-check-circle" />
|
|
</div>
|
|
<Link className="links" href="#"> Best Insurance Agency </Link>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className="d-flex align-items-center">
|
|
<div className="icon trans">
|
|
<i aria-hidden="false" className="fas fa-check-circle" />
|
|
</div>
|
|
<Link className="links" href="#"> Trusted & Experience Insurance </Link>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className="d-flex align-items-center">
|
|
<div className="icon trans">
|
|
<i aria-hidden="false" className="fas fa-check-circle" />
|
|
</div>
|
|
<Link className="links" href="#"> Dedicated Support & Security </Link>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-4 col-md-6 col-sm-12">
|
|
<div className="position-relative">
|
|
<ul className="list_box list">
|
|
<li>
|
|
<div className="d-flex align-items-center">
|
|
<div className="icon trans">
|
|
<i aria-hidden="false" className="fas fa-check-circle" />
|
|
</div>
|
|
<Link className="links" href="#"> Best Insurance Agency </Link>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className="d-flex align-items-center">
|
|
<div className="icon trans">
|
|
<i aria-hidden="false" className="fas fa-check-circle" />
|
|
</div>
|
|
<Link className="links" href="#"> Trusted & Experience Insurance </Link>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className="d-flex align-items-center">
|
|
<div className="icon trans">
|
|
<i aria-hidden="false" className="fas fa-check-circle" />
|
|
</div>
|
|
<Link className="links" href="#"> Dedicated Support & Security </Link>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="quote_box_one mr_bottom_20">
|
|
<div className="section_title type_one">
|
|
<div className="title_whole">
|
|
<h4 className="title"> Building Gatsby Custom Range Input That Looks Consistent Across All Browsers</h4>
|
|
</div>
|
|
</div>
|
|
<div className="d-flex">
|
|
<div className="img">
|
|
<img src="/assets/images/testimonial/test-1-min.png" className="img-fluid" alt="img" />
|
|
</div>
|
|
<div className="section_title type_one">
|
|
<div className="title_whole">
|
|
<h5 className="title"> Sam S. Guerrero</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width={85} height={85} viewBox="0 0 85 85" fill="none">
|
|
<path d="M79.2923 16.9916C75.4512 12.6767 70.7895 10.4888 65.4366 10.4888C60.6258 10.4888 56.5475 12.2019 53.314 15.5803C50.1011 18.9371 48.472 23.1066 48.472 27.9732C48.472 32.5722 50.1175 36.6703 53.363 40.1539C56.2258 43.2272 59.8321 45.182 64.1014 45.9788C63.3548 51.6391 58.3509 56.7625 49.1988 61.2266L47.5508 62.0306L54.3078 74.5051L55.8331 73.7319C75.1874 63.9214 85.0008 50.0566 85.0008 32.5225C85.0008 26.4733 83.0803 21.2481 79.2923 16.9916ZM55.7612 69.8083L52.3759 63.5592C62.5564 58.2246 67.7144 51.8119 67.7144 44.48V42.9101L66.1547 42.7335C61.9536 42.258 58.6107 40.6306 55.9351 37.758C53.2787 34.9063 51.9872 31.7059 51.9872 27.9732C51.9872 23.9875 53.2521 20.7289 55.8536 18.0106C58.4339 15.3143 61.5688 14.0037 65.4368 14.0037C69.8038 14.0037 73.4771 15.7455 76.6664 19.3284C79.9094 22.9721 81.4859 27.2879 81.4859 32.5224C81.4859 40.5587 79.2229 47.8139 74.7602 54.0865C70.5019 60.0713 64.1152 65.3551 55.7612 69.8083Z" fill="#0F3567" fillOpacity="0.1" />
|
|
<path d="M31.6489 16.9839C27.7653 12.6743 23.0841 10.489 17.7353 10.489C12.9198 10.489 8.85992 12.2053 5.66894 15.59C2.50534 18.9455 0.901133 23.1118 0.901133 27.9734C0.901133 32.5722 2.54668 36.6703 5.79179 40.1542C8.64858 43.2208 12.2116 45.1738 16.4015 45.9742C15.6639 51.6388 10.7017 56.7647 1.62297 61.2297L0 62.0276L6.58883 74.5109L8.12929 73.7337C27.5714 63.9236 37.4294 50.0582 37.4294 32.5226C37.4292 26.4687 35.4842 21.2407 31.6489 16.9839ZM8.07815 69.8026L4.78507 63.563C14.8918 58.2265 20.0129 51.8123 20.0129 44.48V42.9137L18.4566 42.7341C14.3418 42.2593 11.04 40.6316 8.36353 37.7581C5.70712 34.9066 4.41602 31.706 4.41602 27.9734C4.41602 23.9826 5.66246 20.7206 8.22624 18.0014C10.7621 15.3116 13.8728 14.0039 17.7353 14.0039C22.1066 14.0039 25.804 15.7482 29.0375 19.3368C32.3191 22.9785 33.9143 27.2918 33.9143 32.5226C33.9143 40.5576 31.6416 47.8118 27.1587 54.0837C22.8819 60.0669 16.4678 65.3499 8.07815 69.8026Z" fill="#0F3567" fillOpacity="0.1" />
|
|
</svg>
|
|
</div>
|
|
<div className="position-relative position_p_relative mr_bottom_20"> Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae abillo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim epsam voluptatem quia voluptas sit aspernature </div>
|
|
<div className="clearfix" />
|
|
</div>
|
|
<div className="single_content_lower">
|
|
<div className="tags_and_cat yes_tags yes_share">
|
|
{/* <div className="d-flex">
|
|
<div className="left_one d-flex">
|
|
<div className="title">Tags</div>
|
|
<Link className="tags" href="/blog-details-left-sidebar"># Health</Link>
|
|
<Link className="tags" href="/blog-details-left-sidebar"># Insurance</Link>
|
|
<Link className="tags" href="/blog-details-left-sidebar"># Medical</Link>
|
|
</div>
|
|
<div className="right_one d-flex">
|
|
<div className="title">Posted in</div>
|
|
<Link className="cats" href="/blog-details-left-sidebar"> Business Insurance</Link>
|
|
<Link className="cats" href="/blog-details-left-sidebar"> Life Insurance</Link>
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
<div className="social-icons single-share">
|
|
<h6> Share This :</h6>
|
|
<ul className="text-grey-5 d-inline-block">
|
|
<li className="social-mds">
|
|
<button className="m_icon" data-toggle="tooltip" data-placement="right" title="facebook" data-sharer="facebook" data-title="Former insures only the marine perils" data-url="https://themepanthers.com/wp/vankine/v1/{new Date().getFullYear()}/01/03/former-insures-only-the-marine-perils/">
|
|
<i className="fab fa-facebook" />
|
|
</button>
|
|
</li>
|
|
<li className="social-mds">
|
|
<button className="m_icon" data-toggle="tooltip" data-placement="right" title="twitter" data-sharer="twitter" data-title="Former insures only the marine perils" data-url="https://themepanthers.com/wp/vankine/v1/{new Date().getFullYear()}/01/03/former-insures-only-the-marine-perils/">
|
|
<i className="fab fa-twitter" />
|
|
</button>
|
|
</li>
|
|
<li className="social-mds">
|
|
<button className="m_icon" data-toggle="tooltip" data-placement="right" title="whatsapp" data-sharer="whatsapp" data-title="Former insures only the marine perils" data-url="https://themepanthers.com/wp/vankine/v1/{new Date().getFullYear()}/01/03/former-insures-only-the-marine-perils/">
|
|
<i className="fab fa-whatsapp" />
|
|
</button>
|
|
</li>
|
|
<li className="social-mds">
|
|
<button className="m_icon" data-toggle="tooltip" data-placement="right" title="telegram" data-sharer="telegram" data-title="Former insures only the marine perils" data-url="https://themepanthers.com/wp/vankine/v1/{new Date().getFullYear()}/01/03/former-insures-only-the-marine-perils/" data-to="+44555-03564">
|
|
<i className="fab fa-telegram" />
|
|
</button>
|
|
</li>
|
|
<li className="social-mds">
|
|
<button className="m_icon" data-toggle="tooltip" data-placement="right" title="skype" data-sharer="skype" data-url="https://themepanthers.com/wp/vankine/v1/{new Date().getFullYear()}/01/03/former-insures-only-the-marine-perils/" data-title="Former insures only the marine perils">
|
|
<i className="fab fa-skype" />
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="same_authour">
|
|
<div className="image">
|
|
<img src="/assets/images/gavatar.png" alt="gavatar" className="img-fluid" />
|
|
</div>
|
|
<div className="content">
|
|
<h4 className="title_no_a_22"> Bradley R Grady</h4>
|
|
<p> Insuring A Better World Fund pays for everything. Unlock the huge charitable value of unneeded life insurance with no administrative or premium costs. </p>
|
|
<div className="social-icons d-flex align-items-center authour-share">
|
|
<Link href="https://themepanthers.com/wp/vankine/v1/author/bradley-r-grady/" className="theme_btn"> Read All Post </Link>
|
|
<ul className="d-inline-block">
|
|
<li className="social-mds">
|
|
<button data-toggle="tooltip" data-placement="right" title="facebook" data-sharer="facebook" data-title=" Bradley R Grady" data-url="https://themepanthers.com/wp/vankine/v1/author/bradley-r-grady/">
|
|
<i className="fab fa-facebook" />
|
|
</button>
|
|
</li>
|
|
<li className="social-mds">
|
|
<button data-toggle="tooltip" data-placement="right" title="twitter" data-sharer="twitter" data-title=" Bradley R Grady" data-url="https://themepanthers.com/wp/vankine/v1/author/bradley-r-grady/">
|
|
<i className="fab fa-twitter" />
|
|
</button>
|
|
</li>
|
|
<li className="social-mds">
|
|
<button data-toggle="tooltip" data-placement="right" title="whatsapp" data-sharer="whatsapp" data-title=" Bradley R Grady" data-url="https://themepanthers.com/wp/vankine/v1/author/bradley-r-grady/">
|
|
<i className="fab fa-whatsapp" />
|
|
</button>
|
|
</li>
|
|
<li className="social-mds">
|
|
<button data-toggle="tooltip" data-placement="right" title="telegram" data-sharer="telegram" data-title=" Bradley R Grady" data-url="https://themepanthers.com/wp/vankine/v1/author/bradley-r-grady/" data-to="+44555-03564">
|
|
<i className="fab fa-telegram" />
|
|
</button>
|
|
</li>
|
|
<li className="social-mds">
|
|
<button data-toggle="tooltip" data-placement="right" title="skype" data-sharer="skype" data-url="https://themepanthers.com/wp/vankine/v1/author/bradley-r-grady/" data-title=" Bradley R Grady">
|
|
<i className="fab fa-skype" />
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="previouse_next_post entry-bottom only_prev">
|
|
<div className="prev_post nav_post">
|
|
<Link href="/blog-details-left-sidebar/" className="linked_prev_next">
|
|
<div className="image">
|
|
<img src="/assets/images/blog/blog-8-min.png" className="img-fluid" alt="img" />
|
|
</div>
|
|
<div className="text">
|
|
<h2 className="title_no_a_22">Insurance covers risk of fire absence</h2>
|
|
<div className="down_content">
|
|
<span>
|
|
<i className="fi-rr-calendar" /> Jan 3, {new Date().getFullYear()} </span>
|
|
<small>
|
|
<i className="fas fa-arrow-left" /> Previous Post </small>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
<div className="next_post nav_post">
|
|
<Link href="/blog-details-left-sidebar" className="linked_prev_next">
|
|
<div className="text">
|
|
<h2 className="title_no_a_22">Former insures only the marine perils</h2>
|
|
<div className="down_content">
|
|
<span>
|
|
<i className="fi-rr-calendar" /> Jan 3, {new Date().getFullYear()} </span>
|
|
<small>Next Post <i className="fas fa-arrow-right" />
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div className="image">
|
|
<img src="/assets/images/blog/blog-9-min.png" className="img-fluid" alt="img" />
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="sec_comments comment-form" id="comment">
|
|
<div className="container_no">
|
|
<div className="row justify-content-center">
|
|
<div className="col-lg-12">
|
|
<div id="respond" className="comment-respond">
|
|
<h3 id="reply-title" className="comment-reply-title">Post a comment <small>
|
|
<Link rel="nofollow" id="cancel-comment-reply-link" href="#">Cancel reply</Link>
|
|
</small>
|
|
</h3>
|
|
<form action="#" method="post" id="commentform" className="comment-form">
|
|
<p className="title_para">Your email address will not be published. </p>
|
|
<p className="comment-form-comment">
|
|
<label>Leave a Reply</label>
|
|
<textarea placeholder="Write your comment here..." id="commenttextarea" name="comment" rows={12} aria-required="true" />
|
|
</p>
|
|
<p className="comment-form-author">
|
|
<label>Full Name</label>
|
|
<input id="author" placeholder="ex. John Doe" name="author" type="text" size={30} aria-required="true" />
|
|
</p>
|
|
<p className="comment-form-email">
|
|
<label>Email address</label>
|
|
<input id="email" placeholder="ex. john@mail.com" name="email" type="text" size={30} aria-required="true" />
|
|
</p>
|
|
<p className="comment-form-url">
|
|
<label>Website Url</label>
|
|
<input id="url" name="url" placeholder="ex. www.example.com" type="text" size={30} />
|
|
</p>
|
|
<p className="custom-control custom-checkbox">
|
|
<input id="wp-comment-cookies-consent" className="custom-control-input" name="wp-comment-cookies-consent" type="checkbox" />
|
|
<label className="custom-control-label pl-1 c-gray"> Save my name, and email in this browser for the next time I comment. </label>
|
|
</p>
|
|
<div className="clearfix" />
|
|
<p>
|
|
<input name="submit" type="submit" id="submit" className="submit" value="Post comment" />
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*-============spacing==========-*/}
|
|
<div className="pd_bottom_70" />
|
|
{/*-============spacing==========-*/}
|
|
</section>
|
|
|
|
</>
|
|
)}
|
|
</Layout>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default BlogDetails |