Your IP : 216.73.216.79
<?php
use App\Models\Backend\ContentArticle;
use App\Models\Backend\Ref;
$code = request()->query('id');
$detailArticle = $code ? ContentArticle::with('translations')
->where('article_code', $code)
->where('article_status', 'ACTIVE')
->first() : null;
?>
<?php if($detailArticle): ?>
<?php
$t = $detailArticle->translations->first();
$title = $t?->article_translation_title ?? 'Untitled';
$content = $t?->article_translation_content ?? '';
$catDescr = Ref::where('cat', 'ARTICLE_CAT')->where('code', $detailArticle->article_category)->value('descr') ?? $detailArticle->article_category;
$date = $detailArticle->article_date ? \Carbon\Carbon::parse($detailArticle->article_date)->format('d M Y') : '';
$isFullWidth = true;
?>
<style>
.hero-article {
background: url("/assets/redd-plus/about_hero_bg.png") center/cover no-repeat;
min-height: 280px;
display: flex;
align-items: center;
}
.breadcrumb-redd { font-size: .8rem; font-weight: 600; }
.breadcrumb-redd a { color: #6c7a6e; text-decoration: none; }
.breadcrumb-redd a:hover { color: var(--green-800); }
.breadcrumb-redd .active { color: var(--green-800); }
.breadcrumb-redd .sep { color: #a9b3a9; margin: 0 .4rem; }
.hero-article h1 {
color: var(--green-900); font-weight: 600;
font-size: clamp(2rem, 4vw, 2.9rem);
}
.hero-article p { max-width: 480px; font-weight: 500; font-size: 1.05rem; }
.row-block { padding: 2.5rem 0; }
.row-block + .row-block { border-top: 1px solid #e8e4d8; }
.block-heading { color: var(--green-800); font-weight: 700; font-size: 1.35rem; }
.lead-icon {
width: 84px; height: 84px; background: var(--green-100);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 2.2rem; color: var(--green-800);
}
.lead-icon.gold { background: var(--gold-100); color: var(--gold); }
.lead-icon.small { width: 56px; height: 56px; font-size: 1.4rem; }
.link-learn {
color: var(--green-900); font-weight: 700; text-decoration: none;
border-bottom: 2px solid var(--gold); padding-bottom: .15rem;
}
.link-learn:hover { color: var(--gold); }
.info-card {
background: var(--card-bg); border: 1px solid #ece8db;
border-radius: .75rem; text-align: center;
padding: 1.25rem .9rem; height: 100%;
transition: transform .2s ease, box-shadow .2s ease;
}
.info-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(46,74,53,.10); }
.info-icon {
width: 72px; height: 72px; margin: 0 auto .9rem;
background: #fff; border: 1px solid var(--green-200); border-radius: 1rem;
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem; color: var(--green-700);
}
.info-card p { margin: 0; font-weight: 600; color: var(--ink); font-size: .85rem; line-height: 1.35; }
</style>
<?php if($isFullWidth): ?>
<?php echo \Illuminate\Support\Facades\Blade::render($content, ['siteSlug' => $siteSlug ?? 'redd-plus']); ?>
<?php else: ?>
<style>
.article-detail { padding: 60px 0 80px; background: var(--cream); min-height: 60vh; }
.article-breadcrumb { font-size: .82rem; color: #8a9a8e; margin-bottom: 30px; display: flex; align-items: center; gap: 8px; }
.article-breadcrumb a { color: var(--green-800); text-decoration: none; }
.article-breadcrumb a:hover { color: var(--gold); }
.article-breadcrumb .sep { color: #cfc9b8; }
.article-detail-content { max-width: 800px; margin: 0 auto; }
.article-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.article-meta .cat { background: var(--green-100); color: var(--green-800); padding: 6px 14px; border-radius: 50rem; font-size: .75rem; font-weight: 600; }
.article-meta .date { color: #8a9a8e; font-size: .8rem; }
.article-detail-title { font-size: 2rem; font-weight: 700; color: var(--green-900); line-height: 1.3; margin: 0 0 30px; }
.article-body { color: var(--ink); font-size: 1.05rem; line-height: 1.9; }
.article-body p { margin-bottom: 1.2rem; }
.btn-back { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--green-800); color: #fff; border-radius: 10px; font-size: .85rem; font-weight: 500; text-decoration: none; transition: all .25s; margin-top: 40px; }
.btn-back:hover { background: var(--green-900); color: #fff; transform: translateX(-3px); }
</style>
<section class="article-detail">
<div class="container">
<div class="article-breadcrumb">
<a href="/<?php echo e($siteSlug); ?>">Home</a>
<span class="sep">/</span>
<a href="/<?php echo e($siteSlug); ?>/article">Articles</a>
<span class="sep">/</span>
<span><?php echo e($title); ?></span>
</div>
<div class="article-detail-content">
<div class="article-meta">
<span class="cat"><?php echo e($catDescr); ?></span>
<?php if($date): ?>
<span class="date"><i class="bi bi-calendar3 me-1"></i><?php echo e($date); ?></span>
<?php endif; ?>
</div>
<h1 class="article-detail-title"><?php echo e($title); ?></h1>
<div class="article-body"><?php echo $content; ?></div>
<a href="/<?php echo e($siteSlug); ?>/article" class="btn-back"><i class="bi bi-arrow-left"></i> Back to Articles</a>
</div>
</div>
</section>
<?php endif; ?>
<style>
.footer-redd-article {
background: url('/assets/redd-plus/faq_footer_bg.png') center bottom/cover no-repeat;
padding: 4rem 0 2.5rem;
}
.footer-redd-article a {
color: var(--ink); text-decoration: none; font-weight: 600; font-size: .85rem;
}
.footer-redd-article a:hover { color: var(--green-800); }
.footer-redd-article .bi { color: var(--green-800); font-size: 1.1rem; }
.footer-redd-article .f-divider { width: 1px; height: 26px; background: #cfc9b8; }
</style>
<footer class="footer-redd-article mt-4">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center gap-4">
<img src="/assets/redd-plus/logo.png" alt="REDD+ Malaysia" height="46">
<span class="f-divider d-none d-md-inline-block"></span>
<a href="https://redd.nres.gov.my"><i class="bi bi-globe2"></i> redd.nres.gov.my</a>
<span class="f-divider d-none d-md-inline-block"></span>
<a href="mailto:redd@nres.gov.my"><i class="bi bi-envelope"></i> redd@nres.gov.my</a>
<span class="f-divider d-none d-md-inline-block"></span>
<a href="tel:+60380008000"><i class="bi bi-telephone"></i> +603 8000 8000</a>
</div>
</div>
</footer>
<?php else: ?>
<?php
$articles = ContentArticle::with('translations')
->where('article_portal_category', 'redd-plus')
->where('article_status', 'ACTIVE')
->orderBy('article_sorting')
->orderBy('article_date', 'desc')
->get();
$categories = $articles->pluck('article_category')->unique()->values()->toArray();
$catLabels = Ref::where('cat', 'ARTICLE_CAT')
->whereIn('code', $categories)
->pluck('descr', 'code')
->toArray();
?>
<style>
.article-hero {
background: linear-gradient(135deg, var(--green-800) 0%, var(--green-900) 100%);
padding: 4rem 0 4.5rem;
color: #fff;
}
.article-hero h1 {
font-weight: 700;
font-size: clamp(2.3rem, 4.5vw, 3.2rem);
line-height: 1.15;
}
.article-hero p {
font-size: 1.1rem;
font-weight: 500;
max-width: 400px;
opacity: .85;
}
.article-card {
background: #fff;
border: 1px solid #e8e4d8;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 14px rgba(46,74,53,.05);
transition: all .2s ease;
text-decoration: none;
color: inherit;
display: block;
}
.article-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(46,74,53,.12);
border-color: var(--green-200);
}
.article-card-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.article-card-body {
padding: 1.25rem 1.5rem 1.5rem;
}
.article-card-cat {
display: inline-block;
background: var(--green-100);
color: var(--green-800);
padding: .25rem .75rem;
border-radius: 50rem;
font-size: .75rem;
font-weight: 600;
margin-bottom: .75rem;
}
.article-card-title {
font-weight: 700;
font-size: 1.05rem;
color: var(--green-900);
margin-bottom: .5rem;
line-height: 1.4;
}
.article-card-date {
font-size: .82rem;
color: #8a9a8e;
font-weight: 500;
}
.article-card-excerpt {
font-size: .9rem;
color: var(--ink);
line-height: 1.6;
margin-top: .5rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-cat-pills .cat-pill {
border: 1px solid #e2ddd0;
background: #fff;
color: var(--green-800);
border-radius: .6rem;
padding: .55rem 1.4rem;
font-weight: 600;
font-size: .92rem;
transition: all .15s ease;
cursor: pointer;
}
.article-cat-pills .cat-pill:hover {
border-color: var(--green-800);
color: var(--green-900);
}
.article-cat-pills .cat-pill.active {
background: var(--green-800);
border-color: var(--green-800);
color: #fff;
box-shadow: 0 6px 14px rgba(46,74,53,.25);
}
.no-articles {
text-align: center;
padding: 4rem 2rem;
color: #8a9a8e;
}
.no-articles i {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
color: var(--green-200);
}
</style>
<header class="article-hero">
<div class="container">
<h1>Articles & News</h1>
<p class="mt-3">Latest updates, publications and news from REDD+ Malaysia.</p>
</div>
</header>
<main class="container py-5" style="max-width:1100px;">
<div class="d-flex flex-wrap gap-2 mb-4 article-cat-pills" role="tablist">
<button class="cat-pill active" data-cat="all">All</button>
<?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<button class="cat-pill" data-cat="<?php echo e($cat); ?>">
<?php echo e($catLabels[$cat] ?? $cat); ?>
</button>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
<?php if($articles->count()): ?>
<div class="row g-4" id="articleGrid">
<?php $__currentLoopData = $articles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<?php
$t = $item->translations->first();
$itemTitle = $t?->article_translation_title ?? 'Untitled';
$excerpt = strip_tags($t?->article_translation_content ?? '');
$excerpt = \Illuminate\Support\Str::limit($excerpt, 150);
$itemCatLabel = $catLabels[$item->article_category] ?? $item->article_category;
$itemDate = $item->article_date ? \Carbon\Carbon::parse($item->article_date)->format('d M Y') : '';
?>
<div class="col-md-6 col-lg-4 article-item" data-cat="<?php echo e($item->article_category); ?>">
<a href="/<?php echo e($siteSlug); ?>/article?id=<?php echo e($item->article_code); ?>" class="article-card">
<?php if($item->article_image): ?>
<img src="<?php echo e(image_url($item->article_image)); ?>" alt="<?php echo e($itemTitle); ?>" class="article-card-img">
<?php else: ?>
<div class="article-card-img" style="background:var(--green-100);display:flex;align-items:center;justify-content:center;">
<i class="bi bi-file-earmark-text" style="font-size:2.5rem;color:var(--green-200);"></i>
</div>
<?php endif; ?>
<div class="article-card-body">
<span class="article-card-cat"><?php echo e($itemCatLabel); ?></span>
<h3 class="article-card-title"><?php echo e($itemTitle); ?></h3>
<span class="article-card-date"><i class="bi bi-calendar3 me-1"></i><?php echo e($itemDate); ?></span>
<?php if($excerpt): ?>
<p class="article-card-excerpt"><?php echo e($excerpt); ?></p>
<?php endif; ?>
</div>
</a>
</div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
<?php else: ?>
<div class="no-articles">
<i class="bi bi-journal-text"></i>
<h4>No articles found</h4>
<p>Check back later for updates.</p>
</div>
<?php endif; ?>
</main>
<script>
const pills = document.querySelectorAll('.article-cat-pills .cat-pill');
const items = document.querySelectorAll('.article-item');
pills.forEach(p => p.addEventListener('click', () => {
pills.forEach(x => x.classList.remove('active'));
p.classList.add('active');
const cat = p.dataset.cat;
items.forEach(item => {
item.classList.toggle('d-none', cat !== 'all' && item.dataset.cat !== cat);
});
}));
</script>
<?php endif; ?><?php /**PATH /var/www/html/reddsis/storage/framework/views/3979927f4a2c1b148277502b3e8e4d24.blade.php ENDPATH**/ ?>