754 lines
37 KiB
Plaintext
754 lines
37 KiB
Plaintext
<section class="relative w-full px-4 sm:px-6 mb-8">
|
||
<div class="absolute top-0 left-0 h-[400px] sm:h-[400px] md:h-full w-full md:w-1/3 bg-oren rounded-br-[30px] md:rounded-tr-[30px] md:rounded-br-[30px] -z-10"></div>
|
||
|
||
<div class="md:container md:max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-8 items-center relative pt-12 md:pt-0">
|
||
<!-- Left Content -->
|
||
<div class="text-white rounded-lg flex flex-col items-center md:items-start relative z-10 h-full justify-end md:pt-16 px-4 md:px-0">
|
||
<div>
|
||
<h2 class="text-3xl sm:text-4xl font-bold mb-4 sm:mb-6 text-center md:text-left">Social Media</h2>
|
||
@* <p class="text-base sm:text-lg mb-6 sm:mb-8 text-center md:text-left max-w-md mx-auto md:mx-0">
|
||
Ikuti akun resmi DLH untuk berita, edukasi, dan ajakan aksi lingkungan langsung dari sumber terpercaya.
|
||
</p> *@
|
||
|
||
<!-- Social media buttons -->
|
||
<div class="flex justify-center md:justify-start gap-3 mb-8">
|
||
<a href="https://www.instagram.com/dinaslhdki/" target="_blank" class="social-btn instagram-btn" aria-label="Instagram DLH">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
|
||
</svg>
|
||
</a>
|
||
<a href="https://twitter.com/dinaslhdki" target="_blank" class="social-btn twitter-btn" aria-label="Twitter DLH">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/>
|
||
</svg>
|
||
</a>
|
||
<a href="https://www.tiktok.com/@@dinaslhdki" target="_blank" class="social-btn tiktok-btn" aria-label="TikTok DLH">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- Pancoran image -->
|
||
<div class="w-full flex justify-center md:justify-start hidden md:block">
|
||
<img src="@Url.Content("~/assets/images/home/pancoran.svg")" alt="DLH Pancoran" class="max-w-[200px] md:max-w-full h-auto">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Content - Social Media Cards -->
|
||
<div class="col-span-4 w-full">
|
||
<!-- Mobile post navigation tabs -->
|
||
<div class="flex overflow-x-auto gap-2 pb-3 mb-4 md:hidden social-tabs">
|
||
<button class="social-tab active flex items-center gap-2 whitespace-nowrap px-4 py-2 bg-white/90 rounded-full text-sm font-medium transition-all shadow-sm" data-platform="all">
|
||
<span class="w-2 h-2 rounded-full bg-oren"></span>
|
||
Semua
|
||
</button>
|
||
<button class="social-tab flex items-center gap-2 whitespace-nowrap px-4 py-2 bg-white/80 rounded-full text-sm font-medium transition-all" data-platform="instagram">
|
||
<span class="w-2 h-2 rounded-full bg-gradient-to-br from-purple-500 to-pink-500"></span>
|
||
Instagram
|
||
</button>
|
||
<button class="social-tab flex items-center gap-2 whitespace-nowrap px-4 py-2 bg-white/80 rounded-full text-sm font-medium transition-all" data-platform="twitter">
|
||
<span class="w-2 h-2 rounded-full bg-blue-400"></span>
|
||
Twitter
|
||
</button>
|
||
<button class="social-tab flex items-center gap-2 whitespace-nowrap px-4 py-2 bg-white/80 rounded-full text-sm font-medium transition-all" data-platform="tiktok">
|
||
<span class="w-2 h-2 rounded-full bg-black"></span>
|
||
TikTok
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Social media cards grid -->
|
||
<div class="social-media-grid">
|
||
<!-- Instagram Card 1 -->
|
||
<div class="social-card instagram-card" data-platform="instagram">
|
||
<div class="card-header">
|
||
<div class="platform-icon instagram-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
|
||
</svg>
|
||
</div>
|
||
<span>@@dinaslhdki</span>
|
||
</div>
|
||
<div class="card-image" style="background-image: url('https://picsum.photos/id/1048/600/600');">
|
||
<div class="card-overlay"></div>
|
||
</div>
|
||
<div class="card-content-sosmed">
|
||
<div class="card-title-sosmed">Hari Lingkungan Hidup</div>
|
||
<p class="card-text">Mari kita jaga kelestarian lingkungan untuk masa depan yang lebih hijau. #HariLingkunganHidup #DLH</p>
|
||
<div class="card-stats">
|
||
<span class="flex items-center gap-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
|
||
</svg>
|
||
358
|
||
</span>
|
||
<span class="flex items-center gap-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z"/>
|
||
</svg>
|
||
42
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<a href="https://www.instagram.com/dinaslhdki/" target="_blank" class="card-link" aria-label="Link to Instagram post">
|
||
<span>Lihat di Instagram</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Instagram Card 2 -->
|
||
<div class="social-card instagram-card" data-platform="instagram">
|
||
<div class="card-header">
|
||
<div class="platform-icon instagram-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
|
||
</svg>
|
||
</div>
|
||
<span>@@jakartasadarsampah</span>
|
||
</div>
|
||
<div class="card-image" style="background-image: url('https://picsum.photos/id/1059/600/600');">
|
||
<div class="card-overlay"></div>
|
||
</div>
|
||
<div class="card-content-sosmed">
|
||
<div class="card-title-sosmed">Jakarta Sadar Sampah</div>
|
||
<p class="card-text">Yuk pilah sampahmu! Sampah organik dan anorganik punya penanganan berbeda. #JakartaSadarSampah</p>
|
||
<div class="card-stats">
|
||
<span class="flex items-center gap-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
|
||
</svg>
|
||
276
|
||
</span>
|
||
<span class="flex items-center gap-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z"/>
|
||
</svg>
|
||
38
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<a href="https://www.instagram.com/jakartasadarsampah/" target="_blank" class="card-link" aria-label="Link to Instagram post">
|
||
<span>Lihat di Instagram</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Twitter Card -->
|
||
<div class="social-card twitter-card" data-platform="twitter">
|
||
<div class="card-header">
|
||
<div class="platform-icon twitter-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/>
|
||
</div>
|
||
<span>@@dinaslhdki</span>
|
||
</div>
|
||
<div class="card-content-sosmed tweet-content">
|
||
<div class="card-title-sosmed">Gerak Lebih Bersih</div>
|
||
<p class="card-text">Warga Jakarta, saatnya <span class="text-blue-400">#GerakLebihBersih</span>! Yuk ikut challenge-nya mulai 7 Juni! Kita wujudkan kota yang lebih sehat & hijau 🌱 <span class="text-blue-400">#Udarakitabersih #Harilingkunganhidup2025</span></p>
|
||
<div class="card-image tweet-image" style="background-image: url('https://picsum.photos/id/1023/600/400');"></div>
|
||
<div class="card-stats">
|
||
<span class="flex items-center gap-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M4.318 6.318a.5.5 0 0 0 0 .707l4.5 4.5a.5.5 0 0 0 .707 0l4.5-4.5a.5.5 0 0 0-.707-.707L8.5 10.293 4.318 6.11a.5.5 0 0 0-.707 0z"/>
|
||
</svg>
|
||
124
|
||
</span>
|
||
<span class="flex items-center gap-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M11 5.466V4H5a4 4 0 0 0-3.584 5.777.5.5 0 1 1-.896.446A5 5 0 0 1 5 3h6V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192V12h-6a4 4 0 0 0-3.585-5.777.5.5 0 0 1-.225-.67Z"/>
|
||
</svg>
|
||
57
|
||
</span>
|
||
<span class="flex items-center gap-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
|
||
</svg>
|
||
354
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<a href="https://twitter.com/dinaslhdki" target="_blank" class="card-link" aria-label="Link to Twitter post">
|
||
<span>Lihat di X</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- TikTok Card -->
|
||
<div class="social-card tiktok-card" data-platform="tiktok">
|
||
<div class="card-header">
|
||
<div class="platform-icon tiktok-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"/>
|
||
</div>
|
||
<span>@@dinaslhdki</span>
|
||
<div class="tiktok-music-animation">
|
||
<span></span><span></span><span></span>
|
||
</div>
|
||
</div>
|
||
<div class="card-video">
|
||
<div class="card-video-placeholder" style="background-image: url('https://picsum.photos/id/1026/600/800');">
|
||
<div class="video-play-button">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-content-sosmed">
|
||
<div class="card-title-sosmed">Street Sweeper Electric⚡️</div>
|
||
<p class="card-text">Peluncuran Street sweeper Electric, menyapu dan menyedot sampah ke dalam bak tahan karat dengan teknologi mesin yang lebih ramah lingkungan☘️</p>
|
||
<div class="tiktok-tags">
|
||
<span>#SuksesJakartaUntukIndonesia</span>
|
||
<span>#KurangiPilahOlah</span>
|
||
</div>
|
||
<div class="card-stats">
|
||
<span class="flex items-center gap-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
|
||
</svg>
|
||
5.2K
|
||
</span>
|
||
<span class="flex items-center gap-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z"/>
|
||
</svg>
|
||
128
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<a href="https://www.tiktok.com/@@dinaslhdki" target="_blank" class="card-link" aria-label="Link to TikTok post">
|
||
<span>Lihat di TikTok</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<register-block dynamic-section="css" key="cssSosmed">
|
||
<style>
|
||
/* Social media grid layout */
|
||
.social-media-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 18px;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
@@media (min-width: 640px) {
|
||
.social-media-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 24px;
|
||
}
|
||
}
|
||
|
||
@@media (min-width: 768px) {
|
||
.social-media-grid {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
}
|
||
}
|
||
|
||
/* Card styling */
|
||
.social-card {
|
||
position: relative;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
aspect-ratio: 4/5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.social-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* Card header with platform icon */
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px;
|
||
background-color: rgba(255,255,255,0.9);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 5;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
.platform-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Card image */
|
||
.card-image {
|
||
width: 100%;
|
||
height: 60%;
|
||
background-size: cover;
|
||
background-position: center;
|
||
position: relative;
|
||
}
|
||
|
||
.card-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
|
||
}
|
||
|
||
/* Card content */
|
||
.card-content-sosmed {
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-grow: 1;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.card-title-sosmed {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
margin-bottom: 6px;
|
||
color: #111;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.card-text {
|
||
font-size: 14px;
|
||
color: #444;
|
||
margin-bottom: 12px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.card-stats {
|
||
display: flex;
|
||
gap: 12px;
|
||
font-size: 12px;
|
||
color: #777;
|
||
}
|
||
|
||
/* Card link for touch/click */
|
||
.card-link {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 12px 16px;
|
||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||
color: white;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.social-card:hover .card-link {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Platform-specific styling */
|
||
|
||
/* Instagram */
|
||
.instagram-icon {
|
||
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
|
||
color: white;
|
||
}
|
||
|
||
.instagram-card {
|
||
border-top: 3px solid #d6249f;
|
||
}
|
||
|
||
/* Twitter */
|
||
.twitter-icon {
|
||
background-color: #000;
|
||
color: white;
|
||
}
|
||
|
||
.twitter-card {
|
||
border-top: 3px solid #1DA1F2;
|
||
}
|
||
|
||
.tweet-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.tweet-image {
|
||
height: 120px;
|
||
margin: 8px 0;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* TikTok */
|
||
.tiktok-icon {
|
||
background-color: #000;
|
||
color: white;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tiktok-icon:before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -2px;
|
||
left: -2px;
|
||
right: -2px;
|
||
bottom: -2px;
|
||
background: linear-gradient(to right, #25F4EE, #FE2C55);
|
||
border-radius: 50%;
|
||
z-index: -1;
|
||
}
|
||
|
||
.tiktok-card {
|
||
border-top: 3px solid #fe2c55;
|
||
}
|
||
|
||
.tiktok-music-animation {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.tiktok-music-animation span {
|
||
display: block;
|
||
width: 2px;
|
||
height: 8px;
|
||
background-color: #000;
|
||
animation: musicBars 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
.tiktok-music-animation span:nth-child(1) {
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.tiktok-music-animation span:nth-child(2) {
|
||
height: 12px;
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
.tiktok-music-animation span:nth-child(3) {
|
||
animation-delay: 0.4s;
|
||
}
|
||
|
||
@@keyframes musicBars {
|
||
0%, 100% { height: 4px; }
|
||
50% { height: 12px; }
|
||
}
|
||
|
||
.card-video {
|
||
width: 100%;
|
||
height: 60%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-video-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-size: cover;
|
||
background-position: center;
|
||
position: relative;
|
||
}
|
||
|
||
.card-video-placeholder::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4));
|
||
}
|
||
|
||
.video-play-button {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background-color: rgba(255,255,255,0.8);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 2;
|
||
color: #000;
|
||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||
}
|
||
|
||
.social-card:hover .video-play-button {
|
||
transform: translate(-50%, -50%) scale(1.1);
|
||
background-color: rgba(255,255,255,0.9);
|
||
}
|
||
|
||
.tiktok-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.tiktok-tags span {
|
||
font-size: 12px;
|
||
color: #2563eb;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: block;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Social buttons styling */
|
||
.social-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
color: white;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.social-btn:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 6px 10px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.instagram-btn {
|
||
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
|
||
}
|
||
|
||
.twitter-btn {
|
||
background: #000;
|
||
}
|
||
|
||
.tiktok-btn {
|
||
background: #000;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tiktok-btn:before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -3px;
|
||
left: -3px;
|
||
right: -3px;
|
||
bottom: -3px;
|
||
background: linear-gradient(to right, #25F4EE, #FE2C55);
|
||
border-radius: 50%;
|
||
z-index: -1;
|
||
}
|
||
|
||
/* Mobile tab navigation */
|
||
.social-tabs {
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
position: relative;
|
||
touch-action: pan-x;
|
||
}
|
||
|
||
.social-tabs::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.social-tab {
|
||
opacity: 0.7;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.social-tab.active {
|
||
opacity: 1;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.social-tab.active:after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 25%;
|
||
width: 50%;
|
||
height: 2px;
|
||
background-color: #F97316;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* Responsive adaptations */
|
||
@@media (max-width: 640px) {
|
||
.social-media-grid {
|
||
grid-template-columns: repeat(1, 1fr);
|
||
}
|
||
|
||
.social-card {
|
||
aspect-ratio: 3/4;
|
||
}
|
||
}
|
||
</style>
|
||
</register-block>
|
||
|
||
<register-block dynamic-section="scripts" key="jsSosmed">
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const tabs = document.querySelectorAll('.social-tab');
|
||
const posts = document.querySelectorAll('.social-card');
|
||
|
||
// Function to filter posts by platform
|
||
function filterPosts(platform) {
|
||
if (platform === 'all') {
|
||
posts.forEach(post => {
|
||
post.style.display = 'flex';
|
||
});
|
||
} else {
|
||
posts.forEach(post => {
|
||
const postPlatform = post.getAttribute('data-platform');
|
||
post.style.display = (postPlatform === platform) ? 'flex' : 'none';
|
||
});
|
||
}
|
||
}
|
||
|
||
// Set up click handlers for tabs
|
||
tabs.forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
// Update active tab styling
|
||
tabs.forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
|
||
// Filter posts based on selected platform
|
||
const platform = this.getAttribute('data-platform');
|
||
filterPosts(platform);
|
||
});
|
||
});
|
||
|
||
// Add animation effects for dynamic feel
|
||
const socialCards = document.querySelectorAll('.social-card');
|
||
|
||
// Add intersection observer to animate cards as they come into view
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
setTimeout(() => {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}, Math.random() * 300); // Stagger animations
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, {
|
||
threshold: 0.1
|
||
});
|
||
|
||
// Initialize cards with starting styles and observe them
|
||
socialCards.forEach((card, index) => {
|
||
card.style.opacity = '0';
|
||
card.style.transform = 'translateY(20px)';
|
||
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||
observer.observe(card);
|
||
});
|
||
|
||
// Add hover effect to play button
|
||
const playButtons = document.querySelectorAll('.video-play-button');
|
||
playButtons.forEach(button => {
|
||
button.addEventListener('mouseenter', () => {
|
||
button.style.transform = 'translate(-50%, -50%) scale(1.1)';
|
||
});
|
||
|
||
button.addEventListener('mouseleave', () => {
|
||
button.style.transform = 'translate(-50%, -50%) scale(1)';
|
||
});
|
||
});
|
||
|
||
// Make TikTok music bars animation more random for a dynamic feel
|
||
const musicBars = document.querySelectorAll('.tiktok-music-animation span');
|
||
musicBars.forEach(bar => {
|
||
const randomDelay = Math.random() * 0.5;
|
||
const randomDuration = 0.8 + Math.random() * 0.6;
|
||
bar.style.animationDelay = `${randomDelay}s`;
|
||
bar.style.animationDuration = `${randomDuration}s`;
|
||
});
|
||
|
||
// Add touch swipe functionality for mobile
|
||
let touchStartX = 0;
|
||
let touchEndX = 0;
|
||
const tabsContainer = document.querySelector('.social-tabs');
|
||
|
||
if (tabsContainer) {
|
||
tabsContainer.addEventListener('touchstart', function(e) {
|
||
touchStartX = e.changedTouches[0].screenX;
|
||
}, { passive: true });
|
||
|
||
tabsContainer.addEventListener('touchend', function(e) {
|
||
touchEndX = e.changedTouches[0].screenX;
|
||
handleSwipe();
|
||
}, { passive: true });
|
||
|
||
function handleSwipe() {
|
||
// Find current active tab
|
||
const activeTab = document.querySelector('.social-tab.active');
|
||
const allTabs = Array.from(tabs);
|
||
const currentIndex = allTabs.indexOf(activeTab);
|
||
|
||
// Determine swipe direction
|
||
if (touchEndX < touchStartX - 50) { // Left swipe
|
||
const nextIndex = Math.min(currentIndex + 1, allTabs.length - 1);
|
||
if (nextIndex !== currentIndex) {
|
||
allTabs[nextIndex].click();
|
||
}
|
||
}
|
||
if (touchEndX > touchStartX + 50) { // Right swipe
|
||
const prevIndex = Math.max(currentIndex - 1, 0);
|
||
if (prevIndex !== currentIndex) {
|
||
allTabs[prevIndex].click();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</register-block> |