152 lines
11 KiB
PHP
152 lines
11 KiB
PHP
<section class="relative bg-gray-100 font-sans" style="z-index: 9;">
|
|
<div class="bg-gradient-to-r from-blue-600 to-indigo-800 text-white" >
|
|
<div class="container mx-auto px-4 py-16 md:py-24">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Teknologi Masa Depan</h1>
|
|
<p class="text-xl md:text-2xl opacity-90">Menjelajahi Inovasi yang Mengubah Dunia</p>
|
|
<div class="mt-8 flex justify-center">
|
|
<span class="inline-block bg-white bg-opacity-20 rounded-full px-4 py-2 text-sm text-black">Dipublikasikan: 8 April 2025</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mx-auto px-4 py-12 max-w-7xl">
|
|
<div class="flex flex-col lg:flex-row gap-8">
|
|
<!-- Main Article (Kiri) -->
|
|
<div class="w-full lg:w-2/3">
|
|
<article class="bg-white rounded-lg shadow-lg overflow-hidden">
|
|
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Teknologi Masa Depan" class="w-full h-64 md:h-80 object-cover object-center">
|
|
|
|
<div class="p-6 md:p-10">
|
|
<div class="prose max-w-none">
|
|
<p class="text-lg leading-relaxed mb-6">
|
|
Era transformasi digital telah membawa perubahan signifikan dalam kehidupan manusia.
|
|
Dari kecerdasan buatan hingga energi terbarukan, teknologi terus berkembang dengan kecepatan
|
|
yang belum pernah terjadi sebelumnya.
|
|
</p>
|
|
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 mt-8">Kecerdasan Buatan: Mitra Masa Depan</h2>
|
|
<p class="mb-6">
|
|
Kecerdasan buatan (AI) telah menjadi bagian integral dari kehidupan kita.
|
|
Dari chatbot yang membantu pelanggan hingga sistem diagnosis medis,
|
|
AI telah meningkatkan efisiensi dalam berbagai bidang.
|
|
</p>
|
|
<p class="mb-6">
|
|
Kemajuan dalam pembelajaran mesin dan jaringan saraf telah membuka
|
|
kemungkinan baru untuk memecahkan masalah kompleks yang sebelumnya sulit ditangani.
|
|
</p>
|
|
|
|
<blockquote class="bg-blue-50 border-l-4 border-blue-500 p-4 italic my-8">
|
|
"Kecerdasan buatan adalah teknologi yang akan mendefinisikan ulang hubungan manusia dengan mesin
|
|
dan membentuk masa depan pekerjaan seperti yang kita kenal."
|
|
</blockquote>
|
|
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 mt-8">Energi Terbarukan: Solusi Berkelanjutan</h2>
|
|
<p class="mb-6">
|
|
Kebutuhan akan sumber energi yang berkelanjutan telah mendorong inovasi dalam
|
|
teknologi energi terbarukan. Panel surya dengan efisiensi tinggi dan turbin angin generasi baru
|
|
menjanjikan masa depan energi yang lebih bersih.
|
|
</p>
|
|
<p class="mb-6">
|
|
Penyimpanan energi juga mengalami terobosan dengan baterai yang lebih efisien
|
|
dan berumur panjang, mengatasi salah satu tantangan utama dalam adopsi energi terbarukan.
|
|
</p>
|
|
|
|
<div class="bg-gray-100 rounded-lg p-6 my-8">
|
|
<h3 class="font-bold text-lg mb-3">Fakta Menarik</h3>
|
|
<ul class="list-disc pl-5 space-y-2">
|
|
<li>Kapasitas energi surya global meningkat 22% setiap tahun sejak 2020</li>
|
|
<li>Lebih dari 60% perusahaan Fortune 500 menggunakan AI dalam operasi mereka</li>
|
|
<li>Biaya penyimpanan baterai telah turun sebesar 85% dalam dekade terakhir</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 mt-8">Tantangan dan Peluang</h2>
|
|
<p class="mb-6">
|
|
Meskipun kemajuan teknologi menawarkan banyak manfaat, kita juga menghadapi tantangan
|
|
baru seperti keamanan siber, privasi data, dan kesenjangan digital. Bagaimana kita mengatasi
|
|
tantangan ini akan menentukan masa depan teknologi.
|
|
</p>
|
|
<p class="mb-6">
|
|
Namun, peluang untuk menciptakan dunia yang lebih baik melalui teknologi belum pernah
|
|
sebesar ini. Dengan pendekatan yang berfokus pada manusia dan etika, kita dapat menggunakan
|
|
teknologi untuk mengatasi beberapa masalah terbesar dunia.
|
|
</p>
|
|
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 mt-8">Kesimpulan</h2>
|
|
<p class="mb-6">
|
|
Teknologi masa depan menawarkan janji besar untuk meningkatkan kehidupan manusia.
|
|
Dengan investasi dalam penelitian, kebijakan yang tepat, dan kesadaran akan implikasi etis,
|
|
kita dapat memanfaatkan kekuatan teknologi untuk menciptakan dunia yang lebih baik bagi semua.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-10 pt-6 border-t border-gray-200">
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm">Teknologi</span>
|
|
<span class="bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm">AI</span>
|
|
<span class="bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm">Energi Terbarukan</span>
|
|
<span class="bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm">Inovasi</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<!-- Related (Kanan) -->
|
|
<div class="w-full lg:w-1/3">
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<h3 class="text-xl font-bold text-gray-800 mb-6 border-b pb-2">Artikel Terkait</h3>
|
|
<div class="space-y-5">
|
|
<!-- Article 1 -->
|
|
<div class="group transition-all duration-300 hover:translate-y-[-2px]">
|
|
<div class="relative overflow-hidden rounded-lg mb-2">
|
|
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png"
|
|
alt="Revolusi Quantum Computing"
|
|
class="w-full h-40 object-cover transform group-hover:scale-105 transition-transform duration-300">
|
|
</div>
|
|
<h4 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Revolusi Quantum Computing</h4>
|
|
<p class="text-gray-500 text-sm mt-1 mb-2 line-clamp-2">Bagaimana komputasi kuantum akan mengubah cara kita memproses informasi di masa depan.</p>
|
|
<a href="#" class="text-blue-600 text-sm font-medium hover:text-blue-800 inline-flex items-center">
|
|
Baca selengkapnya
|
|
<svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Article 2 -->
|
|
<div class="group transition-all duration-300 hover:translate-y-[-2px]">
|
|
<div class="relative overflow-hidden rounded-lg mb-2">
|
|
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png"
|
|
alt="Masa Depan Transportasi"
|
|
class="w-full h-40 object-cover transform group-hover:scale-105 transition-transform duration-300">
|
|
</div>
|
|
<h4 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Masa Depan Transportasi</h4>
|
|
<p class="text-gray-500 text-sm mt-1 mb-2 line-clamp-2">Dari mobil listrik hingga hyperloop, menjelajahi cara kita akan berpergian di masa depan.</p>
|
|
<a href="#" class="text-blue-600 text-sm font-medium hover:text-blue-800 inline-flex items-center">
|
|
Baca selengkapnya
|
|
<svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Article 3 -->
|
|
<div class="group transition-all duration-300 hover:translate-y-[-2px]">
|
|
<div class="relative overflow-hidden rounded-lg mb-2">
|
|
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png"
|
|
alt="Masa Depan Transportasi"
|
|
class="w-full h-40 object-cover transform group-hover:scale-105 transition-transform duration-300">
|
|
</div>
|
|
<h4 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Masa Depan Transportasi</h4>
|
|
<p class="text-gray-500 text-sm mt-1 mb-2 line-clamp-2">Dari mobil listrik hingga hyperloop, menjelajahi cara kita akan berpergian di masa depan.</p>
|
|
<a href="#" class="text-blue-600 text-sm font-medium hover:text-blue-800 inline-flex items-center">
|
|
Baca selengkapnya
|
|
<svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|