📄 home.blade.php
📁 Path: /home/skhata/new.chandrapharma.com/resources/views/home.blade.php
📊 Size: 31.79 KB
🔒 Perm: 0600
📝 MIME: text/html
<x-app-layout>
<x-slot name="title">{{ config('app.name') }} — Medicines & Healthcare Delivered Fast</x-slot>
{{-- CMS Page Builder blocks rendered here --}}
@foreach($blocks as $block)
@if($block['is_active'])
@include('cms.blocks.' . $block['type'], ['settings' => $block['settings']])
@endif
@endforeach
@if(empty($blocks))
{{-- ── Promotional Banner ──────────────────────────────────────── --}}
{{-- Colors set inline, not via bg-teal-600/text-white classes: this
project's compiled Tailwind bundle didn't have that exact shade
generated (a stale/never-rebuilt CSS file, confirmed by inspecting
the live page — the class was present in the HTML but had no
matching rule, so the background stayed transparent). Inline styles
render correctly regardless of whether the CSS build is up to date. --}}
@if(!empty($hp['promo_banner_enabled']) && $hp['promo_banner_enabled'])
<div class="text-center py-2.5 px-4 text-sm font-medium" style="background-color:#0d9488; color:#ffffff;">
<a href="{{ $hp['promo_banner_url'] ?? '/products' }}" class="hover:underline" style="color:#ffffff;">
{{ $hp['promo_banner_text'] ?? '' }}
</a>
</div>
@endif
{{-- ── Hero Section ─────────────────────────────────────────── --}}
@php
$heroTrustBadges = [];
if (!empty($hp['hero_trust_badges'])) {
$heroTrustBadges = is_array($hp['hero_trust_badges']) ? $hp['hero_trust_badges'] : json_decode($hp['hero_trust_badges'], true);
}
if (empty($heroTrustBadges)) {
$heroTrustBadges = ['100% Genuine', 'Licensed Pharmacies', 'Free Rx Consultation'];
}
@endphp
<section class="bg-gradient-to-br from-primary-700 via-primary-600 to-teal-500 text-white relative overflow-hidden">
<div class="absolute -top-16 -right-16 w-72 h-72 bg-white/5 rounded-full"></div>
<div class="absolute -bottom-10 -left-10 w-48 h-48 bg-white/5 rounded-full"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 relative z-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div>
<span class="inline-block bg-white/20 text-white text-xs font-semibold px-3 py-1 rounded-full mb-4">
{{ $hp['hero_badge_text'] ?? "🇳🇵 Nepal's Trusted Online Pharmacy" }}
</span>
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight mb-4">
{{ $hp['hero_title_line1'] ?? 'Medicines & Healthcare,' }}<br>
<span class="text-teal-200">{{ $hp['hero_title_line2'] ?? 'Delivered to Your Door' }}</span>
</h1>
<p class="text-primary-100 text-lg mb-6">
{{ $hp['hero_subtitle'] ?? 'Order genuine medicines, upload prescriptions, and get expert pharmacist advice — all in one place.' }}
</p>
<div class="flex flex-wrap gap-3">
<a href="{{ route('products.index') }}"
class="bg-white text-primary-700 font-semibold px-6 py-3 rounded-full hover:bg-primary-50 transition shadow-sm">
{{ $hp['hero_cta_shop_label'] ?? 'Shop Medicines' }}
</a>
<a href="{{ route('prescriptions.create') }}"
class="bg-red-500 hover:bg-red-600 text-white font-semibold px-6 py-3 rounded-full transition shadow-sm flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
{{ $hp['hero_cta_rx_label'] ?? 'Upload Prescription' }}
</a>
</div>
<div class="flex flex-wrap gap-4 mt-6 text-sm text-primary-100">
@foreach($heroTrustBadges as $badge)
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-teal-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>{{ $badge }}</span>
@endforeach
</div>
</div>
<div class="hidden md:flex justify-center">
{{-- Animated pharmacy illustration, modeled on the
client's previous site's hero graphic: a split
pill roundel centerpiece inside a slow-rotating
dashed orbit ring, with orbiting cross/capsule
badges and two floating stat chips. Positioning,
sizing and fills are set inline (not as Tailwind
utility classes like bg-white/15 or top-2/right-6):
the live page's compiled CSS is stale and missing
several utilities used elsewhere on this page, so
anything relying on a *new* utility class silently
rendered with no styling at all. Inline styles and
raw SVG fill/stroke attributes aren't processed by
Tailwind, so they always render correctly
regardless of the CSS build's freshness. --}}
<div style="position:relative; width:320px; height:320px;">
{{-- soft glow backdrop (kept as a proven-working
Tailwind class combo, same as the pre-existing
circle used before this redesign) --}}
<div class="bg-white/10 rounded-full" style="position:absolute; inset:24px;"></div>
{{-- slow-rotating dashed orbit ring --}}
<svg style="position:absolute; inset:0; width:320px; height:320px; animation:heroSpin 18s linear infinite;" viewBox="0 0 320 320" fill="none">
<circle cx="160" cy="160" r="150" stroke="#ffffff" stroke-opacity="0.25" stroke-width="1.5" stroke-dasharray="4 8"/>
</svg>
{{-- center: split horizontal capsule/pill --}}
<div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; animation:heroFloatMain 3.6s ease-in-out infinite;">
<svg width="192" height="88" viewBox="0 0 200 90">
<path d="M100,0 L45,0 A45,45 0 0,0 45,90 L100,90 Z" fill="#0d9488"/>
<path d="M100,0 L155,0 A45,45 0 0,1 155,90 L100,90 Z" fill="#ffffff"/>
<line x1="100" y1="4" x2="100" y2="86" stroke="#0d9488" stroke-opacity="0.3" stroke-width="2"/>
<ellipse cx="70" cy="24" rx="17" ry="9" fill="#ffffff" fill-opacity="0.3" transform="rotate(-20 70 24)"/>
</svg>
</div>
{{-- orbiting cross badge --}}
<div style="position:absolute; top:18px; right:6px; width:50px; height:50px; border-radius:14px; background-color:#14b8a6; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,0.18); animation:heroFloatA 4s ease-in-out infinite, heroPulse 2.4s ease-in-out infinite;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none">
<rect x="10" y="4" width="4" height="16" rx="1.5" fill="#ffffff"/>
<rect x="4" y="10" width="16" height="4" rx="1.5" fill="#ffffff"/>
</svg>
</div>
{{-- orbiting capsule --}}
<div style="position:absolute; top:2px; left:56px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; animation:heroFloatB 3.6s ease-in-out infinite 0.2s;">
<svg width="30" height="30" viewBox="0 0 24 24" fill="none">
<rect x="2.5" y="9.5" width="19" height="7" rx="3.5" transform="rotate(-32 12 12)" fill="#fdba74" stroke="#fb923c" stroke-width="0.5"/>
</svg>
</div>
{{-- heartbeat pulse line --}}
<svg style="position:absolute; left:18px; bottom:96px; width:120px; height:28px; opacity:0.9;" viewBox="0 0 120 28" fill="none">
<path d="M0 14 H30 L38 4 L46 24 L54 14 H120" stroke="#fdba74" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="140" stroke-dashoffset="140" style="animation:heroDraw 2.8s ease-in-out infinite;"/>
</svg>
{{-- floating stat chip: genuine medicines --}}
<div style="position:absolute; bottom:44px; left:-16px; display:flex; align-items:center; gap:8px; background-color:rgba(255,255,255,0.95); border-radius:9999px; padding:8px 14px; box-shadow:0 10px 24px rgba(0,0,0,0.18); animation:heroFloatB 4.2s ease-in-out infinite 0.5s;">
<span style="width:22px; height:22px; border-radius:9999px; background-color:#0d9488; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
<svg width="12" height="12" viewBox="0 0 20 20" fill="#ffffff"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
</span>
<span style="font-size:12px; font-weight:700; color:#0f766e; white-space:nowrap;">100% Genuine</span>
</div>
{{-- floating stat chip: fast delivery --}}
<div style="position:absolute; bottom:0px; right:-24px; display:flex; align-items:center; gap:8px; background-color:rgba(255,255,255,0.95); border-radius:9999px; padding:8px 14px; box-shadow:0 10px 24px rgba(0,0,0,0.18); animation:heroFloatA 3.8s ease-in-out infinite 0.3s;">
<span style="width:22px; height:22px; border-radius:9999px; background-color:#f97316; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
<svg width="12" height="12" viewBox="0 0 20 20" fill="#ffffff"><path d="M13 7H2a1 1 0 00-1 1v6a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H11a1 1 0 001-1V8a1 1 0 00-1-1zM4.5 16a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"/><path d="M15 8h1.5a1 1 0 01.8.4l1.5 2a1 1 0 01.2.6V14a1 1 0 01-1 1h-.05a2.5 2.5 0 00-4.9 0H13a1 1 0 01-1-1V9a1 1 0 011-1h2z"/></svg>
</span>
<span style="font-size:12px; font-weight:700; color:#c2410c; white-space:nowrap;">Fast Delivery</span>
</div>
</div>
</div>
</div>
</div>
<style>
@keyframes heroFloatMain { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes heroFloatA { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(8deg); } }
@keyframes heroFloatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
@keyframes heroPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes heroSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes heroDraw { 0% { stroke-dashoffset: 140; } 45%, 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -140; } }
@media (prefers-reduced-motion: reduce) {
[style*="animation:heroFloat"], [style*="animation:heroPulse"], [style*="animation:heroSpin"], [style*="animation:heroDraw"] { animation: none !important; }
}
</style>
</section>
{{-- ── Why Choose Us ───────────────────────────────────────────── --}}
@php
$whyItems = [];
if (!empty($hp['why_us_items'])) {
$whyItems = is_array($hp['why_us_items']) ? $hp['why_us_items'] : json_decode($hp['why_us_items'], true);
}
if (empty($whyItems)) {
$whyItems = [
['icon' => '✅', 'title' => '100% Genuine Medicines', 'desc' => 'All products sourced from licensed manufacturers & verified distributors.'],
['icon' => '⚡', 'title' => 'Fast Same-Day Delivery', 'desc' => 'Order before 12 PM and get medicines delivered the same day.'],
['icon' => '👨⚕️', 'title' => 'Licensed Pharmacists', 'desc' => 'Our team of registered pharmacists review every prescription carefully.'],
['icon' => '💰', 'title' => 'Best Price Guaranteed', 'desc' => 'We match or beat any price on genuine medicines. No hidden charges.'],
['icon' => '🔒', 'title' => 'Safe & Secure Payments', 'desc' => 'eSewa, Khalti, COD and all major payment methods accepted.'],
['icon' => '📞', 'title' => '24/7 Customer Support', 'desc' => 'Reach our pharmacist helpline any time — day or night.'],
];
}
@endphp
<section class="bg-white border-b border-gray-100 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<h2 class="section-title">{{ $hp['why_us_title'] ?? 'Why Choose Us' }}</h2>
<p class="section-subtitle">{{ $hp['why_us_subtitle'] ?? 'Your health, our priority — trusted by thousands across Nepal' }}</p>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
@foreach($whyItems as $item)
<div class="text-center bg-gray-50 rounded-2xl p-5 hover:shadow-md transition group">
<div class="text-3xl mb-3">{{ $item['icon'] ?? '' }}</div>
<h3 class="text-sm font-semibold text-gray-900 mb-1.5 leading-tight">{{ $item['title'] ?? '' }}</h3>
<p class="text-xs text-gray-500 leading-relaxed">{{ $item['desc'] ?? '' }}</p>
</div>
@endforeach
</div>
</div>
</section>
{{-- ── Health Conditions Grid ────────────────────────────────── --}}
@php
$healthCategories = \App\Modules\Catalog\Models\TherapeuticCategory::active()->get();
@endphp
@if($healthCategories->isNotEmpty())
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex items-center justify-between mb-5">
<div>
<h2 class="section-title">Shop by Health Condition</h2>
<p class="section-subtitle">Find medicines & supplements for your specific health needs</p>
</div>
</div>
<div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-9 gap-2">
@foreach($healthCategories as $cat)
<a href="{{ route('products.index', ['therapeutic_category' => $cat->slug]) }}" class="health-chip group">
<span class="icon group-hover:scale-110 transition-transform duration-150">{{ $cat->icon }}</span>
<span>{{ $cat->name }}</span>
</a>
@endforeach
</div>
</section>
@endif
{{-- ── Prescription Upload CTA ──────────────────────────────── --}}
@if(!isset($hp['rx_cta_enabled']) || $hp['rx_cta_enabled'])
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-4">
<div class="bg-gradient-to-r from-red-50 to-orange-50 border border-red-200 rounded-2xl p-6 flex flex-col md:flex-row items-center gap-6">
<div class="w-14 h-14 bg-red-100 rounded-xl flex items-center justify-center shrink-0">
<svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
</div>
<div class="flex-1 text-center md:text-left">
<h3 class="text-lg font-bold text-gray-900 mb-1">{{ $hp['rx_cta_title'] ?? "Have a Doctor's Prescription?" }}</h3>
<p class="text-sm text-gray-600">{{ $hp['rx_cta_subtitle'] ?? 'Upload your prescription and our licensed pharmacist will verify it and prepare your order within 2 hours.' }}</p>
</div>
<div class="flex flex-col sm:flex-row gap-3 shrink-0">
<a href="{{ route('prescriptions.create') }}"
class="inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white font-semibold px-5 py-2.5 rounded-xl transition text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
Upload Now
</a>
<a href="#how-it-works" class="inline-flex items-center gap-2 bg-white border border-gray-200 text-gray-700 font-medium px-5 py-2.5 rounded-xl hover:bg-gray-50 transition text-sm">
How it works?
</a>
</div>
</div>
</section>
@endif
{{-- ── Featured Medicines ───────────────────────────────────── --}}
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex items-center justify-between mb-6">
<div>
<h2 class="section-title">Featured Medicines</h2>
<p class="section-subtitle">Best-sellers & pharmacist picks</p>
</div>
<a href="{{ route('products.index') }}" class="text-primary-600 text-sm font-medium hover:underline">View All →</a>
</div>
@if($featuredProducts->isNotEmpty())
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
@foreach($featuredProducts as $product)
@include('components.product-card', ['product' => $product])
@endforeach
</div>
@else
<p class="text-gray-400 text-center py-12">
No medicines listed yet.
@if(config('multivendor.enabled'))
<a href="{{ route('vendor.register') }}" class="text-primary-600">Register your pharmacy</a> to add products.
@endif
</p>
@endif
</section>
{{-- ── New Arrivals ─────────────────────────────────────────── --}}
@if(!empty($hp['new_arrivals_enabled']) && $hp['new_arrivals_enabled'] && $newArrivals->isNotEmpty())
<section class="bg-gray-50 py-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between mb-6">
<div>
<h2 class="section-title">{{ $hp['new_arrivals_title'] ?? 'New Arrivals' }}</h2>
<p class="section-subtitle">Just added to our pharmacy catalog</p>
</div>
<a href="{{ route('products.index', ['sort' => 'latest']) }}" class="text-primary-600 text-sm font-medium hover:underline">View All →</a>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
@foreach($newArrivals as $product)
@include('components.product-card', ['product' => $product])
@endforeach
</div>
</div>
</section>
@endif
{{-- ── How it works (Prescription flow) ────────────────────── --}}
@if(!isset($hp['how_it_works_enabled']) || $hp['how_it_works_enabled'])
@php
$howItWorksSteps = [];
if (!empty($hp['how_it_works_steps'])) {
$howItWorksSteps = is_array($hp['how_it_works_steps']) ? $hp['how_it_works_steps'] : json_decode($hp['how_it_works_steps'], true);
}
if (empty($howItWorksSteps)) {
$howItWorksSteps = [
['icon' => '📋', 'title' => 'Upload Prescription', 'desc' => 'Take a photo or scan your doctor\'s prescription and upload it securely.'],
['icon' => '🔍', 'title' => 'Pharmacist Review', 'desc' => 'Our licensed pharmacist verifies the prescription within 2 hours.'],
['icon' => '🛒', 'title' => 'Order Prepared', 'desc' => 'We pick the exact medicines prescribed at the best available price.'],
['icon' => '🚚', 'title' => 'Fast Delivery', 'desc' => 'Medicines packed safely and delivered to your door. Track in real-time.'],
];
}
@endphp
<section id="how-it-works" class="bg-white border-t border-gray-100 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-8">
<h2 class="section-title">{{ $hp['how_it_works_title'] ?? 'How Prescription Orders Work' }}</h2>
<p class="section-subtitle">{{ $hp['how_it_works_subtitle'] ?? 'Simple, safe, and fast — your health is our priority' }}</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-4 gap-6 relative">
<div class="hidden sm:block absolute top-8 left-[12.5%] right-[12.5%] h-0.5 bg-primary-100"></div>
@foreach($howItWorksSteps as $i => $step)
<div class="text-center relative z-10">
<div class="w-16 h-16 bg-primary-50 border-2 border-primary-100 rounded-full flex items-center justify-center text-2xl mx-auto mb-3 relative">
{{ $step['icon'] ?? '' }}
<span class="absolute -top-1 -right-1 w-5 h-5 bg-primary-600 text-white text-xs font-bold rounded-full flex items-center justify-center">{{ $i + 1 }}</span>
</div>
<h3 class="font-semibold text-gray-900 mb-1">{{ $step['title'] ?? '' }}</h3>
<p class="text-xs text-gray-500">{{ $step['desc'] ?? '' }}</p>
</div>
@endforeach
</div>
</div>
</section>
@endif
{{-- ── Testimonials ─────────────────────────────────────────── --}}
@if(!empty($hp['testimonials_enabled']) && $hp['testimonials_enabled'])
@php
$testimonials = isset($hp['testimonials_items']) ? (is_array($hp['testimonials_items']) ? $hp['testimonials_items'] : json_decode($hp['testimonials_items'], true)) : [];
@endphp
@if(!empty($testimonials))
<section class="bg-gradient-to-br from-teal-50 to-primary-50 py-14">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<h2 class="section-title">{{ $hp['testimonials_title'] ?? 'What Our Customers Say' }}</h2>
<p class="section-subtitle">Real experiences from patients across Nepal</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
@foreach($testimonials as $t)
<div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-md transition">
{{-- Stars --}}
<div class="flex gap-0.5 mb-3">
@for($i = 1; $i <= 5; $i++)
<svg class="w-4 h-4 {{ $i <= ($t['rating'] ?? 5) ? 'text-yellow-400' : 'text-gray-200' }}" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
@endfor
</div>
<p class="text-sm text-gray-700 mb-4 leading-relaxed italic">"{{ $t['text'] ?? '' }}"</p>
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-full bg-teal-100 flex items-center justify-center text-teal-700 font-bold text-sm">
{{ strtoupper(substr($t['name'] ?? 'U', 0, 1)) }}
</div>
<div>
<p class="text-sm font-semibold text-gray-900">{{ $t['name'] ?? '' }}</p>
<p class="text-xs text-gray-400">{{ $t['location'] ?? '' }}</p>
</div>
</div>
</div>
@endforeach
</div>
</div>
</section>
@endif
@endif
{{-- ── Blog / Health Tips Preview ───────────────────────────── --}}
@if(!empty($hp['blog_preview_enabled']) && $hp['blog_preview_enabled'] && $blogPosts->isNotEmpty())
<section class="bg-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between mb-8">
<div>
<h2 class="section-title">{{ $hp['blog_preview_title'] ?? 'Health Tips & News' }}</h2>
<p class="section-subtitle">Expert advice from our pharmacists and healthcare professionals</p>
</div>
<a href="{{ route('blog.index') }}" class="text-primary-600 text-sm font-medium hover:underline">Read All →</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@foreach($blogPosts as $post)
<a href="{{ route('blog.show', $post->slug) }}"
class="group bg-gray-50 rounded-2xl overflow-hidden hover:shadow-lg transition block">
@if($post->hasMedia('thumbnail'))
<div class="h-44 bg-gray-200 overflow-hidden">
<img src="{{ $post->getFirstMediaUrl('thumbnail') }}" alt="{{ $post->title }}"
class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
</div>
@else
<div class="h-44 bg-gradient-to-br from-teal-100 to-primary-100 flex items-center justify-center">
<svg class="w-12 h-12 text-teal-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
</div>
@endif
<div class="p-5">
@if($post->category)
<span class="text-xs font-semibold text-teal-600 uppercase tracking-wide">{{ $post->category->name }}</span>
@endif
<h3 class="text-base font-bold text-gray-900 mt-1.5 mb-2 group-hover:text-primary-600 transition leading-snug">
{{ $post->title }}
</h3>
<p class="text-sm text-gray-500 line-clamp-2">{{ $post->excerpt ?? Str::limit(strip_tags($post->content ?? ''), 100) }}</p>
<p class="text-xs text-gray-400 mt-3">{{ $post->published_at?->format('M d, Y') }}</p>
</div>
</a>
@endforeach
</div>
</div>
</section>
@endif
{{-- ── Pharmacist Helpline CTA ──────────────────────────────── --}}
@if(!empty($hp['helpline_enabled']) && $hp['helpline_enabled'])
<section class="bg-gradient-to-r from-primary-700 to-teal-600 py-14">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-5">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
</svg>
</div>
<h2 class="text-2xl md:text-3xl font-bold text-white mb-3">
{{ $hp['helpline_title'] ?? 'Need Help? Talk to a Pharmacist' }}
</h2>
<p class="text-primary-100 text-base mb-8 max-w-xl mx-auto">
{{ $hp['helpline_subtitle'] ?? 'Our licensed pharmacists are available 24/7 to answer your medicine-related questions.' }}
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
{{-- Padding set inline: px-7/py-3.5 were computing to "14px
0px" on the live page — another utility class missing
from the stale compiled CSS (same root cause as the
promo banner and hero illustration above). --}}
@if(!empty($hp['helpline_phone']))
<a href="tel:{{ $hp['helpline_phone'] }}"
class="inline-flex items-center gap-2 bg-white text-primary-700 font-bold rounded-full hover:bg-primary-50 transition shadow-lg text-base"
style="padding:14px 28px;">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
</svg>
{{ $hp['helpline_phone'] }}
</a>
@endif
@if(!empty($hp['helpline_email']))
<a href="mailto:{{ $hp['helpline_email'] }}"
class="inline-flex items-center gap-2 bg-white/10 text-white font-semibold rounded-full border border-white/30 hover:bg-white/20 transition text-base"
style="padding:14px 28px;">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
{{ $hp['helpline_email'] }}
</a>
@endif
</div>
</div>
</section>
@endif
@endif
</x-app-layout>