📄 home.blade.php
📁 Path: /home/skhata/chandrasons.com/resources/views/pages/home.blade.php
📊 Size: 42.63 KB
🔒 Perm: 0644
📝 MIME: text/html
@extends('layouts.app')
@section('content')
@php $lang = app()->getLocale(); @endphp
{{-- ═══════════════════════════════════════════════════════
1. HERO SECTION
═══════════════════════════════════════════════════════ --}}
<section class="relative overflow-hidden" style="background: linear-gradient(130deg, #05202C 0%, #0B5E6B 55%, #0D7B8A 100%); min-height: calc(100vh - 72px);">
{{-- Background decorative blobs --}}
<div class="absolute inset-0 pointer-events-none overflow-hidden">
<div class="absolute top-[-10%] right-[-5%] w-[600px] h-[600px] rounded-full opacity-20" style="background: radial-gradient(circle, #0D7B8A 0%, transparent 70%);"></div>
<div class="absolute bottom-[-15%] left-[-10%] w-[500px] h-[500px] rounded-full opacity-10" style="background: radial-gradient(circle, #22C55E 0%, transparent 70%);"></div>
{{-- Subtle grid pattern --}}
<div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 1px); background-size: 40px 40px;"></div>
</div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20 flex items-center min-h-[calc(100vh-72px)]">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center w-full">
{{-- LEFT: Content --}}
<div class="animate-fade-up">
{{-- Eyebrow badge --}}
<div class="inline-flex items-center gap-2 rounded-full px-4 py-1.5 mb-6 border" style="background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); backdrop-filter: blur(12px);">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #22C55E;"></span>
<span class="text-xs font-semibold tracking-widest uppercase text-white/80">Trusted Since {{ setting('established_year','2010') }}</span>
</div>
{{-- Headline --}}
@if($banners->count())
@php $hero = $banners->first(); @endphp
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-black text-white leading-none mb-6 text-balance" style="letter-spacing: -0.04em;">
{!! nl2br(e($hero->getTranslation('title', $lang) ?: $hero->title)) !!}
</h1>
<p class="text-lg text-white/70 leading-relaxed mb-8 max-w-xl">
{{ $hero->getTranslation('subtitle', $lang) ?: $hero->subtitle ?: 'Wholesale, Retail & Nepal Export of Branded and Generic Medicines from Maharajganj, UP' }}
</p>
@else
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-black text-white leading-none mb-6 text-balance" style="letter-spacing: -0.04em;">
Your Trusted<br><span style="color: var(--accent);">Pharma Partner</span><br>at Sunauli Border
</h1>
<p class="text-lg text-white/70 leading-relaxed mb-8 max-w-xl">Wholesale, Retail & Nepal Export of Branded and Generic Medicines from Maharajganj, Uttar Pradesh.</p>
@endif
{{-- CTAs --}}
<div class="flex flex-wrap gap-3 mb-10">
<a href="{{ lang_url('/contact') }}" class="btn-accent">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
{{ __('site.btn_get_quote') }}
</a>
<a href="{{ lang_url('/services/export-to-nepal') }}" class="btn-outline-white">
{{ __('site.nav_nepal_export') }}
</a>
</div>
{{-- Trust micro-badges --}}
<div class="flex flex-wrap gap-3">
@foreach(['✓ 150+ Brand Partners','✓ Licensed Distributor','✓ Fast Delivery'] as $t)
<span class="inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-full" style="background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.80); border: 1px solid rgba(255,255,255,0.12);">{{ $t }}</span>
@endforeach
</div>
</div>
{{-- RIGHT: Pharmacy SVG Illustration --}}
<div class="hidden lg:flex items-center justify-center animate-fade-up-2">
<div class="relative w-full max-w-[500px] aspect-square">
{{-- Outer glow --}}
<div class="absolute inset-0 rounded-full pointer-events-none" style="background: radial-gradient(circle at 50% 50%, rgba(13,123,138,0.30) 0%, transparent 68%); filter: blur(20px);"></div>
{{-- Main SVG Illustration --}}
<svg viewBox="0 0 480 480" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full" style="filter: drop-shadow(0 24px 64px rgba(13,123,138,0.35));">
{{-- ── Outer orbit ring ── --}}
<g style="transform-origin: 240px 240px; animation: orbitSpin 22s linear infinite;">
<ellipse cx="240" cy="240" rx="210" ry="80" stroke="rgba(255,255,255,0.10)" stroke-width="1.5" stroke-dasharray="8 6"/>
{{-- Orbit dot 1 --}}
<circle cx="450" cy="240" r="6" fill="rgba(244,169,34,0.90)"/>
<circle cx="30" cy="240" r="4" fill="rgba(255,255,255,0.50)"/>
</g>
{{-- ── Inner orbit ring ── --}}
<g style="transform-origin: 240px 240px; animation: orbitSpinReverse 16s linear infinite;">
<ellipse cx="240" cy="240" rx="145" ry="56" stroke="rgba(255,255,255,0.12)" stroke-width="1" stroke-dasharray="6 8"/>
<circle cx="385" cy="240" r="5" fill="rgba(34,197,94,0.90)"/>
<circle cx="95" cy="240" r="4" fill="rgba(255,255,255,0.40)"/>
</g>
{{-- ── Main capsule (centre-piece) ── --}}
<g style="transform-origin: 240px 240px; animation: float 5s ease-in-out infinite;">
{{-- Capsule body --}}
<rect x="148" y="188" width="184" height="104" rx="52" fill="white" opacity="0.96"/>
{{-- Left half (teal) --}}
<path d="M148 240 C148 211.49 170.49 188 199 188 H240 V292 H199 C170.49 292 148 268.51 148 240Z" fill="var(--primary)" opacity="0.92"/>
{{-- Right half (white) --}}
<path d="M240 188 H281 C309.51 188 332 211.49 332 240 C332 268.51 309.51 292 281 292 H240 V188Z" fill="white"/>
{{-- Shine highlight --}}
<ellipse cx="220" cy="210" rx="20" ry="9" fill="rgba(255,255,255,0.35)" transform="rotate(-30 220 210)"/>
{{-- Centre split line --}}
<line x1="240" y1="192" x2="240" y2="288" stroke="rgba(200,220,225,0.5)" stroke-width="1.5"/>
{{-- Capsule texture dots (left) --}}
<circle cx="195" cy="233" r="4" fill="rgba(255,255,255,0.40)"/>
<circle cx="195" cy="247" r="4" fill="rgba(255,255,255,0.40)"/>
<circle cx="210" cy="240" r="4" fill="rgba(255,255,255,0.40)"/>
</g>
{{-- ── Small pill (top-right) ── --}}
<g style="transform-origin: 345px 148px; animation: pillBounce 4s 0.8s ease-in-out infinite;">
<rect x="315" y="132" width="60" height="32" rx="16" fill="var(--accent)" opacity="0.92"/>
<path d="M315 148 H345 V132 C329.536 132 315 139.163 315 148Z" fill="rgba(255,255,255,0.30)"/>
<ellipse cx="330" cy="142" rx="7" ry="3.5" fill="rgba(255,255,255,0.30)" transform="rotate(-20 330 142)"/>
</g>
{{-- ── Small pill (bottom-left) ── --}}
<g style="transform-origin: 130px 338px; animation: pillBounce 3.5s 1.4s ease-in-out infinite;">
<rect x="100" y="322" width="60" height="32" rx="16" fill="#22C55E" opacity="0.88"/>
<path d="M100 338 H130 V322 C114.536 322 100 329.163 100 338Z" fill="rgba(255,255,255,0.25)"/>
</g>
{{-- ── Tiny pill (top-left) ── --}}
<g style="transform-origin: 118px 168px; animation: pillBounce 4.5s 0.3s ease-in-out infinite;">
<rect x="96" y="156" width="44" height="24" rx="12" fill="rgba(255,255,255,0.75)"/>
<path d="M96 168 H118 V156 C106.536 156 96 161.372 96 168Z" fill="var(--primary)" opacity="0.60"/>
</g>
{{-- ── Pharmacy cross (top-centre-right) ── --}}
<g style="transform-origin: 360px 110px; animation: float 6s 1s ease-in-out infinite;">
<rect x="340" y="88" width="40" height="44" rx="8" fill="rgba(34,197,94,0.18)" stroke="rgba(34,197,94,0.50)" stroke-width="1.5"/>
{{-- Cross --}}
<rect x="355" y="95" width="10" height="30" rx="3" fill="rgba(34,197,94,0.85)"/>
<rect x="346" y="104" width="28" height="10" rx="3" fill="rgba(34,197,94,0.85)"/>
</g>
{{-- ── Molecule nodes ── --}}
{{-- Node cluster bottom-right --}}
<g style="opacity:0.75">
<circle cx="368" cy="342" r="10" fill="rgba(13,123,138,0.40)" stroke="rgba(13,123,138,0.60)" stroke-width="1.5"/>
<circle cx="396" cy="318" r="7" fill="rgba(13,123,138,0.30)" stroke="rgba(13,123,138,0.50)" stroke-width="1"/>
<circle cx="355" cy="368" r="6" fill="rgba(13,123,138,0.25)" stroke="rgba(13,123,138,0.40)" stroke-width="1"/>
<line x1="368" y1="342" x2="396" y2="318" stroke="rgba(13,123,138,0.35)" stroke-width="1.5"/>
<line x1="368" y1="342" x2="355" y2="368" stroke="rgba(13,123,138,0.35)" stroke-width="1.5"/>
<line x1="396" y1="318" x2="410" y2="300" stroke="rgba(13,123,138,0.25)" stroke-width="1"/>
<circle cx="410" cy="300" r="5" fill="rgba(244,169,34,0.50)" stroke="rgba(244,169,34,0.70)" stroke-width="1"/>
</g>
{{-- Node cluster top-left --}}
<g style="opacity:0.65">
<circle cx="88" cy="168" r="8" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.30)" stroke-width="1.5"/>
<circle cx="62" cy="145" r="5" fill="rgba(255,255,255,0.10)" stroke="rgba(255,255,255,0.25)" stroke-width="1"/>
<circle cx="110" cy="145" r="5" fill="rgba(255,255,255,0.10)" stroke="rgba(255,255,255,0.25)" stroke-width="1"/>
<line x1="88" y1="168" x2="62" y2="145" stroke="rgba(255,255,255,0.20)" stroke-width="1"/>
<line x1="88" y1="168" x2="110" y2="145" stroke="rgba(255,255,255,0.20)" stroke-width="1"/>
</g>
{{-- ── Floating sparkle dots ── --}}
<g class="sparkles" style="animation: glowPulse 3s ease-in-out infinite;">
<circle cx="170" cy="130" r="3" fill="rgba(255,255,255,0.60)"/>
<circle cx="320" cy="370" r="2.5" fill="rgba(244,169,34,0.70)"/>
<circle cx="410" cy="200" r="2" fill="rgba(255,255,255,0.50)"/>
<circle cx="80" cy="310" r="2" fill="rgba(34,197,94,0.60)"/>
<circle cx="440" cy="340" r="2" fill="rgba(255,255,255,0.40)"/>
<circle cx="150" cy="380" r="1.5" fill="rgba(255,255,255,0.30)"/>
</g>
{{-- ── Heartbeat / pulse line ── --}}
<g style="opacity: 0.40;">
<path d="M60 390 L100 390 L115 365 L130 415 L145 375 L160 390 L420 390" stroke="var(--accent)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</g>
{{-- ── Floating stats card ── --}}
<g style="transform-origin: 80px 280px; animation: float 6s 0.5s ease-in-out infinite;">
<rect x="30" y="258" width="130" height="58" rx="16" fill="rgba(255,255,255,0.12)" stroke="rgba(255,255,255,0.20)" stroke-width="1"/>
<text x="50" y="282" font-family="Inter, sans-serif" font-size="11" font-weight="700" fill="white" opacity="0.90">150+ Brands</text>
<text x="50" y="298" font-family="Inter, sans-serif" font-size="9.5" fill="rgba(255,255,255,0.55)">Authorized Partner</text>
<circle cx="44" cy="290" r="5" fill="var(--accent)" opacity="0.80"/>
</g>
{{-- ── Delivery badge ── --}}
<g style="transform-origin: 400px 380px; animation: float 5.5s 2s ease-in-out infinite;">
<rect x="328" y="394" width="144" height="46" rx="14" fill="rgba(255,255,255,0.12)" stroke="rgba(255,255,255,0.20)" stroke-width="1"/>
<text x="352" y="415" font-family="Inter, sans-serif" font-size="10" font-weight="700" fill="white" opacity="0.90">Fast Delivery</text>
<text x="352" y="430" font-family="Inter, sans-serif" font-size="9" fill="rgba(255,255,255,0.55)">India & Nepal</text>
<circle cx="344" cy="417" r="5" fill="#22C55E" opacity="0.85"/>
</g>
</svg>
</div>
</div>
</div>
</div>
{{-- Bottom wave --}}
<div class="absolute bottom-0 left-0 right-0 overflow-hidden leading-none">
<svg viewBox="0 0 1440 60" preserveAspectRatio="none" class="w-full h-[40px] lg:h-[60px]" fill="white">
<path d="M0,60 C360,0 1080,0 1440,60 L1440,60 L0,60 Z"/>
</svg>
</div>
</section>
{{-- ═══════════════════════════════════════════════════════
2. STATS STRIP
═══════════════════════════════════════════════════════ --}}
<section class="py-14" style="background: white;">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
@foreach($stats as $i => $stat)
<div class="reveal reveal-delay-{{ $i }} text-center group">
<div class="inline-flex items-end gap-0 mb-1">
<span class="text-4xl md:text-5xl font-black counter-number" style="color: var(--dark); letter-spacing:-0.04em;" data-target="{{ $stat->number_value }}">0</span>
<span class="text-2xl font-black mb-0.5" style="color: var(--primary);">{{ $stat->suffix }}</span>
</div>
<p class="text-sm font-medium" style="color: var(--text-muted);">{{ $stat->getTranslation('label', $lang) ?: $stat->label }}</p>
<div class="w-8 h-0.5 rounded-full mx-auto mt-2 transition-all duration-300 group-hover:w-14" style="background: var(--primary); opacity:0.4;"></div>
</div>
@endforeach
</div>
</div>
</section>
{{-- ═══════════════════════════════════════════════════════
3. ABOUT SNIPPET
═══════════════════════════════════════════════════════ --}}
<section class="py-20" style="background: var(--bg);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div class="reveal">
<span class="section-eyebrow">{{ __('site.home_about_badge') }}</span>
<h2 class="section-title mb-4">{{ __('site.home_about_heading') }}</h2>
<div class="accent-line mb-6"></div>
<p class="text-base leading-relaxed mb-5" style="color: var(--text-muted);">{{ setting('about_para_1', 'Located strategically at the Sunauli-Bhairahawa border crossing, Chandra & Sons has been serving pharmacies, hospitals, and businesses across India and Nepal with quality pharmaceutical products for over '.( date('Y') - (int)setting('established_year','2010') ).' years.') }}</p>
<p class="text-base leading-relaxed mb-8" style="color: var(--text-muted);">{{ setting('about_para_2', 'We stock 1000+ products from 150+ brand partners, offering competitive wholesale pricing, genuine products, and fast delivery — all from one trusted source.') }}</p>
<div class="grid grid-cols-2 gap-3 mb-8">
@foreach([['Licensed Distributor','shield-check'],['150+ Brand Partners','star'],['Fast Delivery','truck'],['100% Genuine Products','check-circle']] as [$label,$icon])
<div class="flex items-center gap-3 p-3 rounded-2xl" style="background: white; border: 1px solid var(--border);">
<div class="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0" style="background: var(--primary-light);">
<svg class="w-4.5 h-4.5" style="color: var(--primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
@if($icon==='shield-check') <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
@elseif($icon==='star') <path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
@elseif($icon==='truck') <path stroke-linecap="round" stroke-linejoin="round" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/>
@else <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
@endif
</svg>
</div>
<span class="text-sm font-semibold" style="color: var(--text);">{{ $label }}</span>
</div>
@endforeach
</div>
<a href="{{ lang_url('/about') }}" class="btn-primary">{{ __('site.home_about_link') }} →</a>
</div>
<div class="reveal reveal-delay-2">
<div class="relative">
<div class="rounded-3xl overflow-hidden aspect-[4/3] flex items-center justify-center" style="background: linear-gradient(135deg, var(--primary-light) 0%, rgba(13,123,138,0.15) 100%);">
{{-- Placeholder visual until real photo is uploaded --}}
<div class="text-center p-8">
<div class="w-24 h-24 rounded-3xl mx-auto mb-5 flex items-center justify-center" style="background: var(--primary); box-shadow: 0 12px 40px rgba(13,123,138,0.40);">
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
</div>
<p class="font-bold text-lg mb-1" style="color: var(--primary);">Chandra & Sons</p>
<p class="text-sm" style="color: var(--text-muted);">Tampu Stand, Sonauli Border</p>
<p class="text-xs mt-1" style="color: var(--text-muted);">Maharajganj, UP — India</p>
</div>
</div>
{{-- Floating year badge --}}
<div class="absolute -bottom-5 -right-5 rounded-2xl px-6 py-4 text-white shadow-xl" style="background: var(--dark);">
<p class="text-3xl font-black" style="letter-spacing:-0.04em; color: var(--accent);">{{ date('Y') - (int)setting('established_year','2010') }}+</p>
<p class="text-xs font-medium mt-0.5 text-white/70">Years of Trust</p>
</div>
</div>
</div>
</div>
</div>
</section>
{{-- ═══════════════════════════════════════════════════════
4. BRAND PARTNERS CAROUSEL
═══════════════════════════════════════════════════════ --}}
@if($brands->count())
<section class="py-16" style="background: white; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-8 reveal">
<span class="section-eyebrow">{{ __('site.home_brands_badge') }}</span>
<h2 class="section-title">{{ __('site.home_brands_heading') }}</h2>
</div>
<div class="brand-carousel">
<div class="brand-track">
@foreach(array_merge($brands->toArray(), $brands->toArray()) as $brand)
<div class="flex-shrink-0 h-16 flex items-center justify-center px-4 py-2 rounded-2xl transition-all duration-200 hover:shadow-md" style="background: var(--bg); border: 1px solid var(--border); min-width: 150px;">
@if(!empty($brand['logo_path']))
<img src="{{ asset('storage/'.$brand['logo_path']) }}" alt="{{ $brand['name'] }}" class="max-h-10 max-w-[130px] object-contain transition-all duration-300" style="filter: grayscale(20%); opacity:0.85;" onmouseover="this.style.filter='grayscale(0%)';this.style.opacity='1'" onmouseout="this.style.filter='grayscale(20%)';this.style.opacity='0.85'">
@else
<span class="text-xs font-bold text-center leading-tight" style="color: var(--text-muted);">{{ $brand['name'] }}</span>
@endif
</div>
@endforeach
</div>
</div>
<div class="text-center mt-8">
<a href="{{ lang_url('/brand-partners') }}" class="btn-outline" style="padding: 0.6rem 1.5rem; font-size:0.875rem;">{{ __('site.btn_view_all') }} →</a>
</div>
</section>
@endif
{{-- ═══════════════════════════════════════════════════════
5. SERVICES GRID
═══════════════════════════════════════════════════════ --}}
<section class="py-20" style="background: white;">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14 reveal">
<span class="section-eyebrow">{{ __('site.home_services_badge') }}</span>
<h2 class="section-title">{{ __('site.home_services_heading') }}</h2>
<p class="section-subtitle max-w-2xl mx-auto">{{ __('site.home_services_sub') }}</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
@foreach($services as $i => $service)
<a href="{{ lang_url('/services/'.$service->slug) }}" class="card p-6 group block reveal reveal-delay-{{ $i+1 }}">
<div class="icon-box mb-5 group-hover:scale-110 transition-transform duration-300" style="background: var(--primary-light); color: var(--primary);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
@switch($service->slug)
@case('wholesale-supply') <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/> @break
@case('retail-supply') <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/> @break
@case('export-to-nepal') <path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> @break
@default <path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
@endswitch
</svg>
</div>
<h3 class="font-bold text-base mb-2" style="color: var(--dark);">{{ $service->getTranslation('title', $lang) ?: $service->title }}</h3>
<p class="text-sm leading-relaxed mb-4" style="color: var(--text-muted);">{{ Str::limit($service->getTranslation('short_description', $lang) ?: $service->short_description, 95) }}</p>
<span class="inline-flex items-center gap-1 text-sm font-semibold transition-all duration-200 group-hover:gap-2" style="color: var(--primary);">
{{ __('site.btn_learn_more') }}
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</span>
</a>
@endforeach
</div>
</div>
</section>
{{-- ═══════════════════════════════════════════════════════
5. PRODUCT CATEGORIES
═══════════════════════════════════════════════════════ --}}
<section class="py-20" style="background: var(--bg);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14 reveal">
<span class="section-eyebrow">{{ __('site.home_products_badge') }}</span>
<h2 class="section-title">{{ __('site.home_products_heading') }}</h2>
<p class="section-subtitle max-w-xl mx-auto">{{ __('site.home_products_sub') }}</p>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-5">
@php $catIcons = ['branded-medicines'=>'💊','generic-medicines'=>'💉','surgical-medical-supplies'=>'🩺','otc-wellness'=>'❤️🩹']; @endphp
@foreach($categories as $i => $cat)
<a href="{{ lang_url('/products/'.$cat->slug) }}" class="group block reveal reveal-delay-{{ $i+1 }}">
<div class="rounded-2xl p-6 text-center transition-all duration-300 border hover:border-transparent" style="background: white; border-color: var(--border); box-shadow: var(--shadow-xs);" onmouseenter="this.style.background='var(--primary)'; this.style.boxShadow='var(--shadow-md)';" onmouseleave="this.style.background='white'; this.style.boxShadow='var(--shadow-xs)';">
<div class="text-4xl mb-4 transition-transform duration-300 group-hover:scale-110 block">{{ $catIcons[$cat->slug] ?? '💊' }}</div>
<h3 class="font-bold text-sm leading-tight transition-colors duration-300" style="color: var(--dark);">{{ $cat->getTranslation('name', $lang) ?: $cat->name }}</h3>
<div class="mt-3 inline-flex items-center gap-1 text-xs font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-200" style="color: var(--primary);">
Browse <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
</div>
</div>
</a>
@endforeach
</div>
</div>
</section>
{{-- ═══════════════════════════════════════════════════════
6. WHY CHOOSE US
═══════════════════════════════════════════════════════ --}}
<section class="py-20 relative overflow-hidden" style="background: var(--dark);">
<div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(ellipse at 30% 50%, rgba(13,123,138,0.15) 0%, transparent 65%), radial-gradient(ellipse at 70% 50%, rgba(13,123,138,0.10) 0%, transparent 65%);"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
<div class="text-center mb-14 reveal">
<span class="section-eyebrow" style="color: var(--accent);">{{ __('site.home_why_badge') }}</span>
<h2 class="section-title text-white">{{ __('site.home_why_heading') }}</h2>
</div>
@php
$whyIcons = [
'M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z',
'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10',
];
$whyItems = [
['title' => setting('why_choose_title_1','Strategic Location'), 'desc' => setting('why_choose_desc_1','At the Sunauli-Bhairahawa border — India\'s gateway to Nepal.')],
['title' => setting('why_choose_title_2','Wide Product Range'), 'desc' => setting('why_choose_desc_2','1000+ products across branded, generic, surgical and OTC categories.')],
['title' => setting('why_choose_title_3','Trusted Quality'), 'desc' => setting('why_choose_desc_3','Direct distribution from 150+ reputed pharmaceutical brands.')],
['title' => setting('why_choose_title_4','Competitive Pricing'), 'desc' => setting('why_choose_desc_4','Best wholesale rates for bulk buyers and Nepal export customers.')],
];
@endphp
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
@foreach($whyItems as $i => $item)
<div class="reveal reveal-delay-{{ $i+1 }} group text-center">
<div class="w-14 h-14 rounded-2xl flex items-center justify-center mx-auto mb-5 transition-all duration-300 group-hover:scale-110" style="background: rgba(13,123,138,0.25); border: 1px solid rgba(13,123,138,0.40);">
<svg class="w-6 h-6" style="color: var(--primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8">
@foreach(explode(' M', $whyIcons[$i]) as $pi => $path)
<path stroke-linecap="round" stroke-linejoin="round" d="{{ $pi===0 ? $path : 'M'.$path }}"/>
@endforeach
</svg>
</div>
<h3 class="font-bold text-white mb-2">{{ $item['title'] }}</h3>
<p class="text-sm leading-relaxed" style="color: rgba(255,255,255,0.55);">{{ $item['desc'] }}</p>
</div>
@endforeach
</div>
</div>
</section>
{{-- Brand Partners moved above Services --}}
{{-- ═══════════════════════════════════════════════════════
8. TESTIMONIALS
═══════════════════════════════════════════════════════ --}}
@if($testimonials->count())
<section class="py-20" style="background: var(--bg);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14 reveal">
<span class="section-eyebrow">{{ __('site.home_testimonials_badge') }}</span>
<h2 class="section-title">{{ __('site.home_testimonials_heading') }}</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
@foreach($testimonials as $i => $t)
<div class="card p-7 reveal reveal-delay-{{ $i+1 }} flex flex-col">
{{-- Stars --}}
<div class="flex gap-0.5 mb-4">
@for($s=1;$s<=5;$s++)
<svg class="w-4 h-4" fill="{{ $s<=$t->rating ? 'var(--accent)' : '#E2E8F0' }}" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
@endfor
</div>
<p class="text-sm leading-relaxed flex-1 italic mb-5" style="color: var(--text-muted);">"{{ $t->quote }}"</p>
<div class="flex items-center gap-3 pt-4 border-t" style="border-color: var(--border);">
@if($t->photo)
<img src="{{ asset('storage/'.$t->photo) }}" alt="{{ $t->client_name }}" class="w-11 h-11 rounded-full object-cover">
@else
<div class="w-11 h-11 rounded-full flex items-center justify-center font-bold text-white flex-shrink-0" style="background: var(--primary);">{{ Str::upper(substr($t->client_name,0,1)) }}</div>
@endif
<div>
<p class="font-semibold text-sm" style="color: var(--dark);">{{ $t->client_name }}</p>
<p class="text-xs" style="color: var(--text-muted);">{{ $t->designation }}{{ $t->company ? ', '.$t->company : '' }}</p>
</div>
</div>
</div>
@endforeach
</div>
</div>
</section>
@endif
{{-- ═══════════════════════════════════════════════════════
9. NEPAL EXPORT CTA
═══════════════════════════════════════════════════════ --}}
<section class="py-20 relative overflow-hidden" style="background: linear-gradient(130deg, #05202C 0%, #0D7B8A 100%);">
<div class="absolute inset-0 pointer-events-none" style="background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 32px 32px;"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
<div class="grid lg:grid-cols-2 gap-14 items-center">
<div class="reveal">
<div class="inline-flex items-center gap-2 rounded-full px-4 py-1.5 mb-6 text-xs font-semibold tracking-widest uppercase" style="background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85);">🇳🇵 {{ __('site.home_nepal_badge') }}</div>
<h2 class="section-title text-white mb-4">{{ setting('nepal_cta_heading', 'Exporting Medicines to Nepal?') }}</h2>
<p class="text-base leading-relaxed mb-6" style="color: rgba(255,255,255,0.70);">{{ setting('nepal_cta_desc', 'Strategically located at the Sunauli-Bhairahawa border — India\'s premier pharmaceutical gateway to Nepal. We offer pre-order basis supply with full documentation support.') }}</p>
<ul class="space-y-3 mb-8">
@foreach(['Full documentation support (Invoice, Packing List, COA)','Deep experience with Nepal import regulations','Competitive bulk pricing for Nepali businesses','Dedicated bilingual support team'] as $item)
<li class="flex items-center gap-3 text-sm" style="color: rgba(255,255,255,0.80);">
<div class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0" style="background: rgba(34,197,94,0.25);">
<svg class="w-3 h-3" fill="none" stroke="#22C55E" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
</div>
{{ $item }}
</li>
@endforeach
</ul>
<a href="{{ lang_url('/services/export-to-nepal') }}" class="btn-accent">{{ __('site.home_nepal_btn') }} →</a>
</div>
<div class="reveal reveal-delay-2">
@include('partials.enquiry-form', ['source' => 'nepal_cta', 'buyer_type' => 'nepal_export'])
</div>
</div>
</div>
</section>
{{-- ═══════════════════════════════════════════════════════
10. FAQ TEASER
═══════════════════════════════════════════════════════ --}}
@if($faqs->count())
<section class="py-20" style="background: white;">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12 reveal">
<span class="section-eyebrow">{{ __('site.home_faq_badge') }}</span>
<h2 class="section-title">{{ __('site.home_faq_heading') }}</h2>
</div>
<div class="space-y-3 reveal">
@foreach($faqs as $faq)
<div class="rounded-2xl overflow-hidden" style="border: 1.5px solid var(--border);">
<button class="faq-trigger w-full text-left px-6 py-4 flex items-center justify-between gap-4 transition-colors hover:bg-slate-50" onclick="toggleFaq(this)">
<span class="font-semibold text-sm" style="color: var(--dark);">{{ $faq->getTranslation('question', $lang) ?: $faq->question }}</span>
<div class="w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0 transition-all duration-200 faq-icon" style="background: var(--primary-light);">
<svg class="w-3.5 h-3.5" style="color: var(--primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</div>
</button>
<div class="faq-content px-6 text-sm leading-relaxed" style="color: var(--text-muted);">
<div class="pb-5">{!! $faq->getTranslation('answer', $lang) ?: $faq->answer !!}</div>
</div>
</div>
@endforeach
</div>
<div class="text-center mt-8 reveal">
<a href="{{ lang_url('/faqs') }}" class="btn-outline">{{ __('site.home_faq_view_all') }} →</a>
</div>
</div>
</section>
@endif
{{-- ═══════════════════════════════════════════════════════
11. CONTACT STRIP
═══════════════════════════════════════════════════════ --}}
<section class="py-16" style="background: var(--bg); border-top: 1px solid var(--border);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-3 gap-8 text-center">
<div class="reveal">
<div class="w-12 h-12 rounded-2xl flex items-center justify-center mx-auto mb-4" style="background: var(--primary-light);">
<svg class="w-5 h-5" style="color: var(--primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
<h3 class="font-bold mb-1" style="color: var(--dark);">{{ __('site.contact_address') }}</h3>
<p class="text-sm" style="color: var(--text-muted);">{{ setting('address') }}</p>
<p class="text-xs mt-1" style="color: var(--text-muted);">{{ setting('business_hours') }}</p>
</div>
<div class="reveal reveal-delay-2">
<div class="w-12 h-12 rounded-2xl flex items-center justify-center mx-auto mb-4" style="background: var(--primary-light);">
<svg class="w-5 h-5" style="color: var(--primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" 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>
<h3 class="font-bold mb-1" style="color: var(--dark);">{{ __('site.contact_whatsapp') }}</h3>
<a href="tel:{{ setting('phone_1') }}" class="block text-sm transition-colors hover:text-primary" style="color: var(--text-muted);">{{ setting('phone_1') }}</a>
<a href="tel:{{ setting('phone_2') }}" class="block text-sm transition-colors hover:text-primary" style="color: var(--text-muted);">{{ setting('phone_2') }}</a>
<a href="tel:{{ setting('phone_nepal') }}" class="block text-sm transition-colors hover:text-primary" style="color: var(--text-muted);">🇳🇵 {{ setting('phone_nepal') }}</a>
</div>
<div class="reveal reveal-delay-3 flex flex-col items-center justify-center gap-3">
<a href="{{ whatsapp_url() }}" target="_blank" class="btn-primary w-full max-w-[200px]">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
{{ __('site.btn_whatsapp') }}
</a>
<a href="{{ lang_url('/contact') }}" class="btn-outline w-full max-w-[200px]" style="padding: 0.6875rem 1.25rem; font-size:0.875rem;">{{ __('site.btn_send_enquiry') }}</a>
</div>
</div>
</div>
</section>
@endsection
@push('scripts')
<script>
// FAQ accordion
function toggleFaq(btn) {
const content = btn.nextElementSibling;
const icon = btn.querySelector('.faq-icon');
const isOpen = content.classList.contains('open');
document.querySelectorAll('.faq-content.open').forEach(el => { el.classList.remove('open'); });
document.querySelectorAll('.faq-icon.rotate-180').forEach(el => { el.classList.remove('rotate-180'); el.style.background = 'var(--primary-light)'; });
if (!isOpen) {
content.classList.add('open');
icon.classList.add('rotate-180');
icon.style.background = 'var(--primary)';
icon.querySelector('svg').style.color = 'white';
}
}
// Scroll reveal
const revealEls = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => { if(e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } });
}, { threshold: 0.12 });
revealEls.forEach(el => observer.observe(el));
// Counter animation
const counters = document.querySelectorAll('[data-target]');
const counterObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
const target = parseInt(el.dataset.target);
let current = 0;
const step = Math.ceil(target / 60);
const timer = setInterval(() => {
current = Math.min(current + step, target);
el.textContent = current;
if (current >= target) clearInterval(timer);
}, 25);
counterObserver.unobserve(el);
}
});
}, { threshold: 0.5 });
counters.forEach(el => counterObserver.observe(el));
</script>
@endpush