@extends('layouts.public')

@section('title', 'Website Price in Sri Lanka | Web Design Packages')
@section('meta_description', 'Discover transparent web design cost Sri Lanka. We offer cheap website design Sri Lanka without sacrificing quality. View our web design packages Sri Lanka.')
@section('meta_keywords', 'website price in sri lanka, web design cost sri lanka, cheap website design sri lanka, web design packages sri lanka, website maintenance sri lanka')

@section('content')
<div class="bg-navy-light text-white py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl font-bold">Transparent Pricing</h1>
        <p class="mt-4 text-xl">Find out the exact website price in Sri Lanka. No hidden fees.</p>
    </div>
</div>

<div class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-navy">Web Design Packages Sri Lanka</h2>
            <p class="text-gray-600 mt-4">Whether you need a cheap website design Sri Lanka to get started, or a full custom enterprise solution, we have a package for you.</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="border border-gray-200 rounded-lg p-8 hover:shadow-lg transition-shadow">
                <h3 class="text-2xl font-bold text-navy text-center">Starter Package</h3>
                <p class="text-center text-4xl font-extrabold text-orange my-6">Rs. 45,000</p>
                <ul class="space-y-3 mb-8 text-gray-600">
                    <li>&check; 5 Pages Custom Design</li>
                    <li>&check; Mobile Responsive</li>
                    <li>&check; Basic SEO Setup</li>
                    <li>&check; 1 Year Domain & Hosting</li>
                </ul>
                <a href="/contact" class="block text-center bg-navy hover:bg-navy-dark text-white py-2 rounded font-semibold">Get Started</a>
            </div>
            <div class="border-2 border-orange rounded-lg p-8 relative shadow-md scale-105 bg-white">
                <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-orange text-white px-4 py-1 rounded-full text-sm font-bold">Most Popular</div>
                <h3 class="text-2xl font-bold text-navy text-center">Business Package</h3>
                <p class="text-center text-4xl font-extrabold text-orange my-6">Rs. 95,000</p>
                <ul class="space-y-3 mb-8 text-gray-600">
                    <li>&check; Up to 15 Pages</li>
                    <li>&check; Premium UI/UX Design</li>
                    <li>&check; Advanced SEO Services Sri Lanka</li>
                    <li>&check; CMS Integration (WordPress)</li>
                    <li>&check; Priority Support</li>
                </ul>
                <a href="/contact" class="block text-center bg-orange hover:bg-orange-dark text-white py-2 rounded font-semibold">Get Started</a>
            </div>
            <div class="border border-gray-200 rounded-lg p-8 hover:shadow-lg transition-shadow">
                <h3 class="text-2xl font-bold text-navy text-center">Ecommerce Package</h3>
                <p class="text-center text-4xl font-extrabold text-orange my-6">Rs. 150,000+</p>
                <ul class="space-y-3 mb-8 text-gray-600">
                    <li>&check; Unlimited Products</li>
                    <li>&check; Payment Gateway Integration</li>
                    <li>&check; Inventory Management</li>
                    <li>&check; Free 1 Month Website Maintenance Sri Lanka</li>
                </ul>
                <a href="/contact" class="block text-center bg-navy hover:bg-navy-dark text-white py-2 rounded font-semibold">Contact Us</a>
            </div>
        </div>
    </div>
</div>
@endsection