export function DetailedArticleBlog() {
return (
<section className="py-24">
<div className="mx-auto w-full max-w-7xl px-4 md:px-6 lg:px-8">
<div className="inline-flex w-full flex-col items-start justify-start gap-10 lg:gap-12">
<div className="flex w-full flex-col items-center justify-start gap-3">
<h2 className="font-manrope text-center text-4xl leading-normal font-bold text-gray-900">
Our Insights
</h2>
<p className="text-center text-lg leading-relaxed font-normal text-gray-500">
Explore our insights for the latest trends, analysis, and expert
perspectives.
</p>
</div>
<div className="flex w-fit flex-col items-start justify-start gap-10">
<div className="grid grid-cols-1 items-start justify-start gap-6 lg:grid-cols-2">
<div className="inline-flex h-full w-full flex-col items-start justify-start gap-5 rounded-3xl border border-gray-200 p-5">
<img
className="h-auto w-full rounded-2xl object-cover"
src="https://pagedone.io/asset/uploads/1722237064.png"
alt="Blog and News Image"
/>
<div className="flex flex-col items-start justify-start gap-10">
<div className="flex flex-col items-start justify-start gap-3.5">
<h3 className="font-manrope text-3xl leading-normal font-bold text-gray-800">
The Future of Electric Vehicles: Innovations and Market
Trends
</h3>
<p className="text-base leading-relaxed font-normal text-gray-500">
The future of electric vehicles is bright, with ongoing
innovations driving performance and sustainability. Market
trends show a growing adoption as technology advances and
infrastructure improves.
</p>
</div>
<div className="inline-flex w-full items-center justify-between gap-5">
<div className="flex items-center justify-start gap-3">
<div className="flex h-8 w-8 items-start justify-start gap-2.5 rounded-full bg-[#d6d0cf]">
<img
className="h-8 w-8 rounded-full object-cover"
src="https://pagedone.io/asset/uploads/1722237517.png"
alt="Blog and News Avtar Image"
/>
</div>
<h5 className="text-lg leading-relaxed font-normal text-gray-500">
Mia Carter
</h5>
</div>
<h5 className="text-right text-lg leading-relaxed font-normal text-gray-500">
20 June 2024
</h5>
</div>
</div>
</div>
<div className="inline-flex h-full w-full flex-col items-start justify-start gap-5 rounded-3xl border border-gray-200 p-5">
<img
className="h-auto w-full rounded-2xl object-cover"
src="https://pagedone.io/asset/uploads/1722237074.png"
alt="Blog and News Image"
/>
<div className="flex flex-col items-start justify-start gap-10">
<div className="flex flex-col items-start justify-start gap-3.5">
<h3 className="font-manrope text-3xl leading-normal font-bold text-gray-800">
Sustainable Fashion: How to Build an Eco-Friendly Wardrobe
</h3>
<p className="text-base leading-relaxed font-normal text-gray-500">
Sustainable fashion is transforming the industry, offering
ways to build an eco-friendly wardrobe. Learn how to
choose environmentally conscious materials and brands to
reduce your fashion footprint.
</p>
</div>
<div className="inline-flex w-full items-center justify-between gap-5">
<div className="flex items-center justify-start gap-3">
<div className="flex h-8 w-8 items-start justify-start gap-2.5 rounded-full bg-[#cdb5ba]">
<img
className="h-8 w-8 rounded-full object-cover"
src="https://pagedone.io/asset/uploads/1722237526.png"
alt="Blog and News Avtar Image"
/>
</div>
<h5 className="text-lg leading-relaxed font-normal text-gray-500">
Lucas Brown
</h5>
</div>
<h5 className="text-right text-lg leading-relaxed font-normal text-gray-500">
28 June 2024
</h5>
</div>
</div>
</div>
</div>
<div className="grid w-full grid-cols-1 flex-col items-start justify-start gap-6 lg:grid-cols-2">
<div className="flex h-full w-full flex-col items-center justify-start gap-5 rounded-2xl border border-gray-200 p-5 sm:flex-row">
<img
className="h-auto w-full rounded-lg object-cover sm:w-auto"
src="https://pagedone.io/asset/uploads/1722237186.png"
alt="Blog and News Image"
/>
<div className="inline-flex flex-col items-start justify-start gap-2.5">
<div className="flex flex-col items-start justify-start gap-1 pt-1">
<h6 className="text-base leading-relaxed font-medium text-gray-600">
5 July 2024
</h6>
<h4 className="text-xl leading-8 font-medium text-gray-900">
The Role of Social Media in Shaping Public Opinion
</h4>
</div>
<p className="text-base leading-relaxed font-normal text-gray-500">
Social media shapes public opinion by influencing
perceptions and conversations.
</p>
</div>
</div>
<div className="flex h-full w-full flex-col items-center justify-start gap-5 rounded-2xl border border-gray-200 p-5 sm:flex-row">
<img
className="h-auto w-full rounded-lg object-cover sm:w-auto"
src="https://pagedone.io/asset/uploads/1722237387.png"
alt="Blog and News Image"
/>
<div className="inline-flex flex-col items-start justify-start gap-2.5">
<div className="flex flex-col items-start justify-start gap-1 pt-1">
<h6 className="text-base leading-relaxed font-medium text-gray-600">
14 July 2024
</h6>
<h4 className="text-xl leading-8 font-medium text-gray-900">
The Evolution of Digital Marketing: Trends to Watch in
2024
</h4>
</div>
<p className="text-base leading-relaxed font-normal text-gray-500">
Discover the key trends shaping the evolution of digital
marketing in 2024.
</p>
</div>
</div>
<div className="flex h-full w-full flex-col items-center justify-start gap-5 rounded-2xl border border-gray-200 p-5 sm:flex-row">
<img
className="h-auto w-full rounded-lg object-cover sm:w-auto"
src="https://pagedone.io/asset/uploads/1722237225.png"
alt="Blog and News Image"
/>
<div className="inline-flex flex-col items-start justify-start gap-2.5">
<div className="flex flex-col items-start justify-start gap-1 pt-1">
<h6 className="text-base leading-relaxed font-medium text-gray-600">
24 July 2024
</h6>
<h4 className="text-xl leading-8 font-medium text-gray-900">
The Future of Work: Skills Needed for the Digital Economy
</h4>
</div>
<p className="text-base leading-relaxed font-normal text-gray-500">
Explore the essential skills needed for thriving in the
digital economy of the future.
</p>
</div>
</div>
<div className="flex h-full w-full flex-col items-center justify-start gap-5 rounded-2xl border border-gray-200 p-5 sm:flex-row">
<img
className="h-auto w-full rounded-lg object-cover sm:w-auto"
src="https://pagedone.io/asset/uploads/1722237236.png"
alt="Blog and News Image"
/>
<div className="inline-flex flex-col items-start justify-start gap-2.5">
<div className="flex flex-col items-start justify-start gap-1 pt-1">
<h6 className="text-base leading-relaxed font-medium text-gray-600">
30 July 2024
</h6>
<h4 className="text-xl leading-8 font-medium text-gray-900">
The Role of Renewable Energy in Combating Climate Change
</h4>
</div>
<p className="text-base leading-relaxed font-normal text-gray-500">
Discover how renewable energy is crucial in the fight
against climate change.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
)
}