@extends('layouts.front')
@section('meta')
    {{-- ১. সাধারণ এসইও ট্যাগ (Search Engine Optimization) --}}
    <title>{{ $gs->title }}</title>
    <meta name="description" content="ক্রিয়েটিভ ডিজাইন বাংলাদেশের একটি আইটি সেবা প্রদানকারী প্রতিষ্ঠান। আমাদের সব ধরনের আইটি সেবা আছে। এছাড়াও রয়েছে ২৪ ঘন্টা কাস্টমার কেয়ার সার্ভিস।">
    <meta name="keywords" content="Creative design,creativedesign,www.creativedesign.com.bd,creativedesign.com.bd,web designer in bd,web designer in bangladesh,web designer in lalmonir hat,web designer in rangpur,graphics design,graphics designer in bd,graphics designer in lalmonir hat,graphics designer in rangpur,seo expert in bd,seo expert in lalmonir hat,seo expert in rangpur,Laravel expert in bd,Laravel expert in lalmonir hat,Laravel expert in ranpur, news protal in lalmonir hat,Laravel expert in rangpur,news protal,newsprotal,laravel newsprotal in bd,news protal in bd,laravel bangla news protal,laravel ecommerce,laravel ecommerce in bd,ecommece,commerce,bd ecommerce,laravelecommerce,woocommerce,wordpress ecommerce,wordpress wocommerce,ecommerce website,ecommerce website in bd,ecommerce website inb lalmonir hat,wordpress news protal,news theme,laravel teme,laravel news protal theme,theme,bd theme,themebazar,epaper theme,laravel epaper,it solution bd.it solution,itsolutionbd,shadinitsolution,shadhin it solution,sadhinitsolution,www.shadinitsolution.com,shadhinitsolution.com,webdesigner in bhola,software developer in bhola,graphics designer in bhola">
    <meta name="author" content="{{ $gs->title }}">
    <link rel="canonical" href="{{ url()->current() }}">

    {{-- ২. ওপেন গ্রাফ ট্যাগ (Facebook, LinkedIn, WhatsApp-এ শেয়ার করার জন্য) --}}
    <meta property="og:title" content="{{ $gs->title }}" />
    <meta property="og:description" content="আমাদের তৈরি করা সেরা ওয়েবসাইট এবং সফটওয়্যার প্রজেক্টগুলো একনজরে দেখে নিন। আপনার আইডিয়াকে বাস্তবে রূপ দিতে আমরা প্রস্তুত।" />
    {{-- এখানে og:image এর জন্য একটি ডিফল্ট ব্যানার ইমেজ ব্যবহার করা ভালো --}}
    <meta property="og:image" content="{{asset('assets/images/logo/'.$gs->og_baner)}}" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="{{ $gs->title }}" />

    {{-- ৩. টুইটার কার্ড ট্যাগ (Twitter-এর জন্য) --}}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $gs->title }}">
    <meta name="twitter:description" content="আমাদের তৈরি করা সেরা ওয়েবসাইট এবং সফটওয়্যার প্রজেক্টগুলো একনজরে দেখে নিন।">
    <meta name="twitter:image" content="{{asset('assets/images/logo/'.$gs->og_baner)}}">
@endsection
@section('contents')
@php
    // ডাটাবেসের about_section_contents টেবিল থেকে ১ নম্বর রো-টি আনা হচ্ছে
    $hero = \DB::table('about_section_contents')->where('id', 1)->first();
@endphp

<section class="hero-section py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                {{-- টাইটেল ইন্টিগ্রেশন --}}
                <h1 class="hero-title fw-bold">
                    @if(!empty($hero->title))
                        {!! $hero->title !!}
                    @else
                        আপনার অনলাইন ব্যবসার <span style="color:var(--primary-color)">নির্ভরযোগ্য</span> সহযোগী
                    @endif
                </h1>

                {{-- সাব-টাইটেল বা বিবরণ ইন্টিগ্রেশন --}}
                <p class="lead text-muted mb-4">
                    {{ $hero->subtitle ?? 'আমরা দিচ্ছি প্রিমিয়াম কোয়ালিটির ই-কমার্স ওয়েবসাইট, ডিজিটাল মার্কেটিং এবং সফটওয়্যার সলিউশন। আপনার আইডিয়াকে বাস্তবে রূপ দিতে আমরা প্রস্তুত।' }}
                </p>

                <div class="d-flex gap-3 justify-content-lg-start justify-content-center">
                    <a href="{{ URL::to('/priceing') }}" class="btn btn-custom btn-lg">প্যাকেজ দেখুন</a>
                    <a href="{{ URL::to('/freeconsultant') }}" class="btn btn-outline-primary btn-lg rounded-pill">ফ্রি কনসালটেন্সি</a>
                </div>
            </div>

            <div class="col-lg-6">
                {{-- ইমেজ ইন্টিগ্রেশন --}}
                <div class="hero-img-wrapper text-center">
                    <img src="{{ !empty($hero->image) ? asset('assets/images/about/'.$hero->image) : 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' }}" 
                         alt="Team Working" 
                         class="hero-img img-fluid rounded-4 shadow-lg">
                </div>
            </div>
        </div>
    </div>
</section>
@php
    // ডাটাবেসের section_contents টেবিল থেকে সার্ভিস সেকশনের টেক্সট আনা হচ্ছে
    $service_text = \DB::table('section_contents')->where('section_key', 'service_section')->first();
@endphp
 <section class="py-5 text-center container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <h2 class="fw-bold mb-3">{{ $service_text->title ?? 'বাংলাদেশে এইবার আমরাই নিয়ে এসেছি সম্পূর্ণ ডিজিটাল ইকোসিস্টেম' }}</h2>
                <p class="text-muted">{{ $service_text->subtitle ?? 'ক্রিয়েটিভ ডিজাইন শুধুমাত্র একটি সার্ভিস প্রোভাইডার নয়, আমরা আপনার ব্যবসার গ্রোথ পার্টনার। ওয়েবসাইট থেকে শুরু করে মার্কেটিং - সব সমাধান এক ছাদের নিচে।' }}</p>
            </div>
        </div>
    </section>

<section id="services" class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold">আমাদের সেবা</h6>
            <h2 class="fw-bold">আমরা কিভাবে সাহায্য করি?</h2>
        </div>
        <div class="row g-4">
@php
    // ৪টি সার্ভিস দেখানোর জন্য limit(4) যোগ করা হয়েছে
    $services = App\Models\Service::orderBy('id', 'asc')->limit(4)->get();
@endphp

            @forelse($services as $service)
                <div class="col-md-3 col-sm-6">
                    <div class="service-card">
                        {{-- ডাইনামিক আইকন --}}
                        <div class="icon-box">
                            <i class="{{ $service->icon }}"></i>
                        </div>
                        
                        {{-- ডাইনামিক শিরোনাম --}}
                        <h5>{{ $service->title }}</h5>
                        
                        {{-- ডাইনামিক বিবরণ --}}
                        <p class="small text-muted">{{ $service->description }}</p>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center">
                    <p class="text-muted">কোনো সার্ভিস খুঁজে পাওয়া যায়নি।</p>
                </div>
            @endforelse
        </div>
    </div>
</section>
<style>
/* Pricing Section Styles */
.pricing-section {
    padding: 80px 0;
    background-color: #f8f9fa;
    position: relative;
}

.pricing-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid #eeeeee;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    z-index: 1;
}

/* কার্ড হোভার ইফেক্ট */
.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #ff6b00;
}

/* প্রাইস ট্যাগ স্টাইল */
.pricing-header h4 {
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.price-value {
    font-size: 3rem;
    font-weight: 800;
    color: #ff6b00; /* প্রাইমারি কালার */
    line-height: 1;
    margin-bottom: 5px;
}

.currency {
    font-size: 1.5rem;
    vertical-align: top;
    font-weight: 600;
}

.duration {
    color: #999;
    font-size: 0.9rem;
    font-weight: 500;
}

/* ফিচার লিস্ট স্টাইল */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    text-align: left;
}

.pricing-features li {
    margin-bottom: 15px;
    color: #555;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

.pricing-features li i {
    color: #28a745; /* গ্রিন চেক মার্ক */
    margin-right: 10px;
    font-size: 1.1rem;
    background: #e8f5e9;
    padding: 5px;
    border-radius: 50%;
}

.pricing-features li.disabled {
    color: #ccc;
    text-decoration: line-through;
}

.pricing-features li.disabled i {
    color: #ccc;
    background: #f1f1f1;
}

/* বাটন স্টাইল */
.btn-pricing {
    border-radius: 50px;
    padding: 10px 30px;
    font-weight: 600;
    width: 100%;
    transition: 0.3s;
}

/* স্পেশাল (Popular) কার্ড ডিজাইন */
.pricing-card.popular {
    transform: scale(1.05); /* একটু বড় দেখাবে */
    border: 2px solid #ff6b00;
    box-shadow: 0 15px 30px rgba(255, 107, 0, 0.1);
    z-index: 2; /* অন্য কার্ডের উপরে থাকবে */
}

.pricing-card.popular:hover {
    transform: scale(1.08);
    box-shadow: 0 20px 50px rgba(255, 107, 0, 0.2);
}

.popular-badge {
    position: absolute;
    top: 20px;
    right: -35px;
    background: #ff6b00;
    color: white;
    padding: 5px 40px;
    font-size: 0.8rem;
    font-weight: bold;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* রেস্পন্সিভ ফিক্স */
@media (max-width: 991px) {
    .pricing-card.popular {
        transform: scale(1); /* মোবাইলে সমান সাইজ হবে */
        margin: 20px 0;
    }
    .pricing-card.popular:hover {
        transform: translateY(-10px);
    }
}
</style>
    
<section id="pricing" class="pricing-section">
    <div class="container">
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase">আমাদের প্যাকেজ</h6>
            <h2 class="fw-bold display-6">বাজেট অনুযায়ী সেরা প্ল্যানটি বেছে নিন</h2>
            <p class="text-muted w-75 mx-auto">কোনো গোপন চার্জ নেই। আপনার ব্যবসার প্রয়োজন অনুযায়ী প্যাকেজ সিলেক্ট করুন এবং আজই শুরু করুন।</p>
        </div>

        <div class="row align-items-center">
            
            @forelse($plans as $plan)
            <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
                {{-- যদি অ্যাডমিন প্যানেল থেকে 'is_featured' টিক দেওয়া থাকে তবে 'popular' ক্লাসটি অ্যাড হবে --}}
                <div class="pricing-card {{ $plan->is_featured == 1 ? 'popular' : '' }}">
                    
                    @if($plan->is_featured == 1)
                        <div class="popular-badge">BEST VALUE</div>
                    @endif

                    <div class="pricing-header">
                        <h4>{{ $plan->title }}</h4>
                        <div class="price-value"><span class="currency">{{ $plan->currency }}</span>{{ $plan->price }}</div>
                        <span class="duration">{{ $plan->duration }}</span>
                    </div>

                    <ul class="pricing-features">
                        {{-- ফিচারগুলো কমা (,) দিয়ে আলাদা করা আছে, তাই এখানে explode করা হয়েছে --}}
                        @php 
                            $features = explode(',', $plan->features); 
                        @endphp
                        
                        @foreach($features as $feature)
                            @if(!empty(trim($feature)))
                                <li><i class="fas fa-check"></i> {{ trim($feature) }}</li>
                            @endif
                        @endforeach
                    </ul>

                    {{-- হোয়াটসঅ্যাপ বাটন বা অ্যাডমিন থেকে দেওয়া অর্ডার লিঙ্ক --}}
                    <a href="{{ $plan->order_link }}" target="_blank" 
                       class="btn btn-pricing {{ $plan->is_featured == 1 ? 'btn-primary' : 'btn-outline-primary' }}"
                       style="{{ $plan->is_featured == 1 ? 'background: #ff6b00; border-color: #ff6b00;' : '' }}">
                        {{ $plan->is_featured == 1 ? 'এখনই কিনুন' : 'অর্ডার করুন' }}
                    </a>
                </div>
            </div>
            @empty
                <div class="col-12 text-center">
                    <p class="text-muted">বর্তমানে কোনো প্যাকেজ পাওয়া যায়নি।</p>
                </div>
            @endforelse

        </div>
    </div>
</section>

   <section class="py-5 bg-light">
    <div class="container">
        <div class="row align-items-center">
            
            {{-- বাম পাশের ইমেজ সেকশন --}}
            <div class="col-lg-6">
                @php
                    // ডাটাবেস থেকে তথ্যগুলো নেওয়া হচ্ছে
                    $features = App\Models\WhyChooseUs::orderBy('id', 'asc')->get();
                    // প্রথম ডাটা থেকে ইমেজটি নেওয়ার চেষ্টা করছি (যেহেতু বাম পাশে একটিই বড় ছবি থাকে)
                    $firstFeature = $features->first();
                @endphp

                @if($firstFeature && $firstFeature->image)
                    {{-- অ্যাডমিন প্যানেল থেকে আপলোড করা ইমেজ --}}
                    <img src="{{ url('assets/images/why-choose-us/' . $firstFeature->image) }}" 
                         alt="Why Choose Us" 
                         class="img-fluid rounded-4 shadow mb-4 mb-lg-0" 
                         style="width: 100%; height: 500px; object-fit: cover;">
                @else
                    {{-- যদি ডাটাবেসে ইমেজ না থাকে তবে একটি ডিফল্ট ইমেজ দেখাবে --}}
                    <img src="https://images.unsplash.com/photo-1553877615-30c731653bdb?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                         alt="Default Why Choose Us" 
                         class="img-fluid rounded-4 shadow mb-4 mb-lg-0">
                @endif
            </div>

            <div class="col-lg-6 ps-lg-5">
                <h2 class="fw-bold mb-4">কেন আমাদেরই বেছে নিবেন?</h2>
                
                @forelse($features as $feature)
                <div class="d-flex mb-4">
                    <div class="flex-shrink-0">
                        {{-- ডাটাবেস থেকে আসা আইকন ক্লাস --}}
                        <i class="{{ $feature->icon }} fa-2x text-primary"></i>
                    </div>
                    
                    <div class="flex-grow-1 ms-3">
                        {{-- ডাটাবেস থেকে আসা টাইটেল --}}
                        <h5>{{ $feature->title }}</h5>
                        {{-- ডাটাবেস থেকে আসা বর্ণনা --}}
                        <p class="text-muted">{{ $feature->description }}</p>
                    </div>
                </div>
                @empty
                    <p class="text-muted">কোনো তথ্য পাওয়া যায়নি।</p>
                @endforelse
                
            </div>
        </div>
    </div>
</section>
<style>
/* Team Section Styles */
.team-section {
    padding: 80px 0;
    background-color: #f8f9fa; /* হালকা ব্যাকগ্রাউন্ড */
}

.team-card {
    background: #ffffff;
    border: none;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%; /* সব কার্ড সমান হাইট হবে */
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.team-img-wrapper {
    position: relative;
    overflow: hidden;
    height: 280px; /* ছবির জন্য ফিক্সড হাইট */
    width: 100%;
}

.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ছবি চ্যাপ্টা হবে না */
    object-position: top center;
    transition: transform 0.5s ease;
}

.team-card:hover .team-img {
    transform: scale(1.1); /* জুম ইফেক্ট */
}

/* সোশ্যাল আইকন স্টাইল */
.team-social-overlay {
    position: absolute;
    bottom: -60px; /* শুরুতে লুকানো থাকবে */
    left: 0;
    width: 100%;
    background: rgba(255, 107, 0, 0.9); /* প্রাইমারি কালার (Orange) */
    padding: 15px 0;
    text-align: center;
    transition: all 0.3s ease;
}

.team-card:hover .team-social-overlay {
    bottom: 0; /* হোভার করলে উপরে আসবে */
}

.team-social-overlay a {
    color: white;
    margin: 0 10px;
    font-size: 18px;
    text-decoration: none;
    transition: 0.3s;
}

.team-social-overlay a:hover {
    color: #000;
}

.team-info {
    padding: 25px 20px;
    text-align: center;
}

.team-name {
    font-weight: 700;
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 5px;
}

.team-designation {
    color: #ff6b00; /* প্রাইমারি কালার */
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

</style>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<style>
    /* Testimonial Section Styles */
    .testimonial-section {
        padding: 100px 0 80px;
        background-color: #fff8f0;
        position: relative;
    }

    /* স্লাইডারের আইটেম প্যাডিং (যাতে শ্যাডো কেটে না যায়) */
    .testimonial-carousel .item {
        padding: 20px 15px; 
        padding-top: 50px; 
    }

    /* আপনার পছন্দের কার্ড ডিজাইন */
    .testimonial-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 60px 30px 40px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        position: relative;
        border: 1px solid rgba(0,0,0,0.02);
        text-align: center;
    }

    .testimonial-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(255, 107, 0, 0.1);
        border-bottom: 3px solid #ff6b00;
    }

    /* ক্লায়েন্ট ইমেজ */
    .client-img-wrapper {
        position: absolute;
        top: -45px;
        left: 50%;
        transform: translateX(-50%);
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: #fff;
        padding: 5px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .client-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    /* কোট আইকন */
    .quote-icon-bg {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 60px;
        color: rgba(255, 107, 0, 0.05);
        font-family: serif;
        line-height: 1;
    }

    .stars { color: #ffc107; margin-bottom: 15px; }
    
    .review-text {
        color: #666;
        font-style: italic;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 25px;
    }

    .client-info h5 { font-weight: 700; color: #333; margin-bottom: 2px; }
    .client-info small { color: #ff6b00; font-weight: 600; }

    /* স্লাইডারের ডট বাটন ডিজাইন */
    .owl-theme .owl-dots .owl-dot span {
        width: 10px; height: 10px; margin: 5px 5px; background: #ccc;
    }
    .owl-theme .owl-dots .owl-dot.active span {
        background: #ff6b00; width: 25px; transition: 0.3s;
    }
	
	/* Portfolio Section Styles */
.portfolio-section {
    padding: 80px 0;
    background: #ffffff;
}

/* ফিল্টার বাটন মেনু */
.portfolio-menu {
    text-align: center;
    margin-bottom: 40px;
}

.portfolio-menu button {
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    padding: 8px 20px;
    margin: 0 5px 10px;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 50px;
    border: 1px solid transparent;
}

.portfolio-menu button:hover,
.portfolio-menu button.active {
    color: #fff;
    background: #ff6b00; /* আপনার প্রাইমারি কালার */
    box-shadow: 0 5px 15px rgba(255, 107, 0, 0.2);
}

/* পোর্টফোলিও আইটেম */
.portfolio-item {
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    border: 1px solid #eee;
}

.portfolio-img {
    width: 100%;
    height: 250px; /* ফিক্সড হাইট যাতে সব সমান দেখায় */
    object-fit: cover; /* ছবি চ্যাপ্টা হবে না */
    transition: transform 0.5s ease;
    display: block;
}

.portfolio-item:hover .portfolio-img {
    transform: scale(1.1); /* জুম ইফেক্ট */
}

/* হোভার করলে যে ওভারলে আসবে */
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-overlay h5 {
    color: #fff;
    font-weight: 700;
    transform: translateY(-20px);
    transition: all 0.3s ease;
}

.portfolio-overlay p {
    color: #ddd;
    font-size: 14px;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay h5,
.portfolio-item:hover .portfolio-overlay p {
    transform: translateY(0);
}

.btn-view {
    margin-top: 15px;
    padding: 8px 20px;
    background: #ff6b00;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-size: 14px;
}
.btn-view:hover{
    color: white;
    background: #e65c00;
}
</style>
<section id="portfolio" class="portfolio-section">
    <div class="container">
        
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase">পোর্টফোলিও</h6>
            <h2 class="fw-bold display-6">আমাদের সাম্প্রতিক কাজসমূহ</h2>
            <div style="width: 60px; height: 3px; background: #ff6b00; margin: 15px auto;"></div>
        </div>

        <div class="portfolio-menu">
            <button class="active" data-filter="*">সকল</button>
            @foreach($portfolio_categories as $p_cat)
                <button data-filter=".{{ $p_cat->slug }}">{{ $p_cat->name }}</button>
            @endforeach
        </div>

        <div class="row portfolio-grid">
            
            @forelse($portfolios as $portfolio)
                {{-- প্রজেক্ট থাকলে এই অংশটি দেখাবে --}}
                <div class="col-lg-3 col-md-6 col-sm-12 portfolio-item {{ $portfolio->category->slug }}">
                    <div class="position-relative overflow-hidden rounded">
                        <img src="{{ asset('assets/images/portfolio/'.$portfolio->photo) }}" class="portfolio-img" alt="{{ $portfolio->title }}">
                        <div class="portfolio-overlay">
                            <h5>{{ $portfolio->title }}</h5>
                            <p>{{ $portfolio->category->name }}</p>
                            <a href="{{ $portfolio->url }}" target="_blank" class="btn-view">
                                <i class="fas fa-link"></i> ভিজিট করুন
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                {{-- যদি ডাটাবেসে কোনো প্রজেক্ট না থাকে তবে নিচের এই টেক্সটটি দেখাবে --}}
                <div class="col-12 text-center py-5">
                    <div class="no-data-found">
                        <i class="fas fa-folder-open fa-3x mb-3 text-muted"></i>
                        <h4 class="text-muted">বর্তমানে কোনো প্রজেক্ট পাওয়া যায়নি।</h4>
                        <p>অনুগ্রহ করে পরে আবার চেষ্টা করুন অথবা আমাদের সাথে যোগাযোগ করুন।</p>
                    </div>
                </div>
            @endforelse

        </div>
    </div>
</section>

<section id="testimonials" class="testimonial-section py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase">প্রশংসা সমূহ</h6>
            <h2 class="fw-bold display-6">আমাদের ক্লায়েন্টগন কি বলে</h2>
            <div style="width: 60px; height: 3px; background: #ff6b00; margin: 15px auto;"></div>
        </div>

        <div class="owl-carousel owl-theme testimonial-carousel">
            
            @foreach($testimonials as $testimonial)
            <div class="item">
                <div class="testimonial-card">
                    <i class="fas fa-quote-right quote-icon-bg"></i>
                    <div class="client-img-wrapper">
                        <img src="{{ asset('assets/images/testimonials/'.$testimonial->photo) }}" class="client-img" alt="{{ $testimonial->name }}">
                    </div>
                    
                    <div class="stars">
                        @for($i = 1; $i <= 5; $i++)
                            @if($i <= $testimonial->rating)
                                <i class="fas fa-star"></i>
                            @else
                                <i class="far fa-star"></i> @endif
                        @endfor
                    </div>

                    <p class="review-text">"{{ $testimonial->message }}"</p>
                    
                    <div class="client-info">
                        <h5>{{ $testimonial->name }}</h5>
                        <small>{{ $testimonial->designation }}</small>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>
</section>

<section class="stats-section text-center py-5">
    <div class="container">
        <div class="row">
            @foreach($counters as $counter)
                <div class="col-md-3 col-6 mb-4 mb-md-0">
                    <div class="stat-number">
                        <span class="counter">{{ preg_replace('/[^0-9]/', '', $counter->count_value) }}</span>{{ preg_replace('/[0-9]/', '', $counter->count_value) }}
                    </div>
                    <div>{{ $counter->title }}</div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section id="team" class="team-section py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase">আমাদের এক্সপার্টরা</h6>
            <h2 class="fw-bold display-6">আমাদের সকল টিম মেম্বারদের দেখুন</h2>
            <div style="width: 60px; height: 3px; background: #ff6b00; margin: 15px auto;"></div>
        </div>

        <div class="team-slider owl-carousel">
            @foreach($teams as $team)
            <div class="item">
                <div class="team-card">
                    <div class="team-img-wrapper">
                        <img src="{{ asset('assets/images/team/'.$team->photo) }}" class="team-img" alt="{{ $team->name }}">
                        
                        <div class="team-social-overlay">
                            @if($team->facebook)
                                <a href="{{ $team->facebook }}" target="_blank"><i class="fab fa-facebook-f"></i></a>
                            @endif
                            @if($team->linkedin)
                                <a href="{{ $team->linkedin }}" target="_blank"><i class="fab fa-linkedin-in"></i></a>
                            @endif
                            @if($team->twitter)
                                <a href="{{ $team->twitter }}" target="_blank"><i class="fab fa-twitter"></i></a>
                            @endif
                        </div>
                    </div>
                    <div class="team-info">
                        <h5 class="team-name">{{ $team->name }}</h5>
                        <span class="team-designation">{{ $team->designation }}</span>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
	
	
	
	
	

	
    
	
	
	
	
	
	
	
	
	
	
	

<section class="brand-section py-5">
    <div class="container">
        <div class="text-center mb-4">
             <h5 class="fw-bold text-muted">যাদের সাথে আমরা কাজ করছি</h5>
        </div>
        
        <div class="brand-slider owl-carousel">
            @foreach($brands as $brand)
                <div class="single-brand-item px-3">
                    @if($brand->url)
                        <a href="{{ $brand->url }}" target="_blank">
                    @endif
                        <img src="{{ asset('assets/images/brands/'.$brand->photo) }}" 
                             alt="{{ $brand->name }}" 
                             class="brand-logo img-fluid" 
                             title="{{ $brand->name }}"
                             style="max-height: 80px; width: auto; margin: 0 auto; object-fit: contain;">
                    @if($brand->url)
                        </a>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</section>



    <section class="py-5 text-center" style="background: var(--primary-color); color: white;">
        <div class="container">
            <h2 class="fw-bold mb-3">আজই আপনার ওয়েবসাইট তৈরি করুন</h2>
            <p class="lead mb-4">আমাদের সাথে কথা বলতে কল করুন অথবা মেসেজ পাঠান</p>
            <div class="d-flex justify-content-center gap-3">
                <a href="tel:+88{{ $gs->phone }}" class="btn btn-light btn-lg rounded-pill text-dark fw-bold"><i class="fas fa-phone-alt"></i> কল করুন</a>
                <a href="https://m.me/{{ $gs->facebook_page_link }}" class="btn btn-outline-light btn-lg rounded-pill fw-bold"><i class="fab fa-facebook-messenger"></i> মেসেজ পাঠান</a>
            </div>
        </div>
    </section>


@endsection