৪.৩: Service সেবাসমূহ পেজ তৈরি করা

mkdir -p app/services

import Image from 'next/image'

export default function ServicesPage() {
  return (
    <div>
      {/* হেডার সেকশন */}
      <section className="bg-gray-100 py-16">
        <div className="container-custom">
          <div className="text-center">
            <h1 className="text-4xl font-bold mb-6">আমাদের সেবাসমূহ</h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              আমরা আধুনিক ওয়েব টেকনোলজি ব্যবহার করে উচ্চমানের ডিজিটাল সলিউশন প্রদান করি। আমাদের বিভিন্ন সেবা সম্পর্কে জানুন।
            </p>
          </div>
        </div>
      </section>
      
      {/* সেবাসমূহ সেকশন */}
      <section className="py-16">
        <div className="container-custom">
          {/* সেবা ১: ওয়েব ডেভেলপমেন্ট */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20">
            <div className="order-2 md:order-1">
              <h2 className="text-3xl font-bold mb-6">ওয়েব ডেভেলপমেন্ট</h2>
              <p className="text-gray-700 mb-4">
                আমরা আধুনিক ফ্রন্টএন্ড এবং ব্যাকএন্ড টেকনোলজি ব্যবহার করে রেসপন্সিভ ওয়েবসাইট তৈরি করি। আমাদের ওয়েব ডেভেলপমেন্ট সেবার মধ্যে রয়েছে:
              </p>
              <ul className="list-disc pl-6 mb-6 space-y-2 text-gray-700">
                <li>কর্পোরেট ওয়েবসাইট ডেভেলপমেন্ট</li>
                <li>ই-কমার্স ওয়েবসাইট ডেভেলপমেন্ট</li>
                <li>ব্লগ এবং কন্টেন্ট ম্যানেজমেন্ট সিস্টেম</li>
                <li>কাস্টম ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্ট</li>
                <li>রেসপন্সিভ ওয়েবসাইট ডিজাইন</li>
                <li>ওয়েবসাইট মেইনটেনেন্স এবং সাপোর্ট</li>
              </ul>
              <p className="text-gray-700">
                আমরা React, Next.js, Node.js, Laravel, WordPress ইত্যাদি টেকনোলজি ব্যবহার করে ওয়েবসাইট তৈরি করি।
              </p>
            </div>
            <div className="order-1 md:order-2 flex justify-center">
              <Image 
                src="/placeholder.svg?height=400&width=500" 
                alt="ওয়েব ডেভেলপমেন্ট" 
                width={500} 
                height={400}
                className="rounded-lg shadow-lg"
              />
            </div>
          </div>
          
          {/* সেবা ২: মোবাইল অ্যাপ ডেভেলপমেন্ট */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20">
            <div className="flex justify-center">
              <Image 
                src="/placeholder.svg?height=400&width=500" 
                alt="মোবাইল অ্যাপ ডেভেলপমেন্ট" 
                width={500} 
                height={400}
                className="rounded-lg shadow-lg"
              />
            </div>
            <div>
              <h2 className="text-3xl font-bold mb-6">মোবাইল অ্যাপ ডেভেলপমেন্ট</h2>
              <p className="text-gray-700 mb-4">
                আমরা React Native ব্যবহার করে iOS এবং Android উভয় প্ল্যাটফর্মের জন্য মোবাইল অ্যাপ তৈরি করি। আমাদের মোবাইল অ্যাপ ডেভেলপমেন্ট সেবার মধ্যে রয়েছে:
              </p>
              <ul className="list-disc pl-6 mb-6 space-y-2 text-gray-700">
                <li>ক্রস-প্ল্যাটফর্ম মোবাইল অ্যাপ ডেভেলপমেন্ট</li>
                <li>নেটিভ iOS অ্যাপ ডেভেলপমেন্ট</li>
                <li>নেটিভ Android অ্যাপ ডেভেলপমেন্ট</li>
                <li>মোবাইল অ্যাপ ডিজাইন</li>
                <li>মোবাইল অ্যাপ টেস্টিং</li>
                <li>অ্যাপ স্টোর অপটিমাইজেশন</li>
              </ul>
              <p className="text-gray-700">
                আমরা React Native, Flutter, Swift, Kotlin ইত্যাদি টেকনোলজি ব্যবহার করে মোবাইল অ্যাপ তৈরি করি।
              </p>
            </div>
          </div>
          
          {/* সেবা ৩: UI/UX ডিজাইন */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20">
            <div className="order-2 md:order-1">
              <h2 className="text-3xl font-bold mb-6">UI/UX ডিজাইন</h2>
              <p className="text-gray-700 mb-4">
                আমরা ইউজার-ফ্রেন্ডলি এবং আকর্ষণীয় ইন্টারফেস ডিজাইন করি যা ব্যবহারকারীদের অভিজ্ঞতা উন্নত করে। আমাদের UI/UX ডিজাইন সেবার মধ্যে রয়েছে:
              </p>
              <ul className="list-disc pl-6 mb-6 space-y-2 text-gray-700">
                <li>ইউজার ইন্টারফেস (UI) ডিজাইন</li>
                <li>ইউজার এক্সপেরিয়েন্স (UX) ডিজাইন</li>
                <li>ওয়েবসাইট রিডিজাইন</li>
                <li>মোবাইল অ্যাপ ডিজাইন</li>
                <li>ওয়্যার ফ্রেমিং এবং প্রোটোটাইপিং</li>
                <li>ব্র্যান্ড আইডেনটিটি ডিজাইন</li>
              </ul>
              <p className="text-gray-700">
                আমরা Figma, Adobe XD, Sketch ইত্যাদি টুল ব্যবহার করে UI/UX ডিজাইন করি।
              </p>
            </div>
            <div className="order-1 md:order-2 flex justify-center">
              <Image 
                src="/placeholder.svg?height=400&width=500" 
                alt="UI/UX ডিজাইন" 
                width={500} 
                height={400}
                className="rounded-lg shadow-lg"
              />
            </div>
          </div>
          
          {/* সেবা ৪: ডিজিটাল মার্কেটিং */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div className="flex justify-center">
              <Image 
                src="/placeholder.svg?height=400&width=500" 
                alt="ডিজিটাল মার্কেটিং" 
                width={500} 
                height={400}
                className="rounded-lg shadow-lg"
              />
            </div>
            <div>
              <h2 className="text-3xl font-bold mb-6">ডিজিটাল মার্কেটিং</h2>
              <p className="text-gray-700 mb-4">
                আমরা বিভিন্ন ডিজিটাল মার্কেটিং সেবা প্রদান করি যা আপনার ব্যবসাকে অনলাইনে প্রচার করতে সাহায্য করে। আমাদের ডিজিটাল মার্কেটিং সেবার মধ্যে রয়েছে:
              </p>
              <ul className="list-disc pl-6 mb-6 space-y-2 text-gray-700">
                <li>সার্চ ইঞ্জিন অপটিমাইজেশন (SEO)</li>
                <li>সোশ্যাল মিডিয়া মার্কেটিং</li>
                <li>কন্টেন্ট মার্কেটিং</li>
                <li>ইমেইল মার্কেটিং</li>
                <li>পেইড অ্যাডভারটাইজিং (Google Ads, Facebook Ads)</li>
                <li>অ্যানালিটিক্স এবং রিপোর্টিং</li>
              </ul>
              <p className="text-gray-700">
                আমরা আপনার ব্যবসার প্রয়োজন অনুযায়ী কাস্টম ডিজিটাল মার্কেটিং স্ট্র্যাটেজি তৈরি করি।
              </p>
            </div>
          </div>
        </div>
      </section>
      
      {/* প্রাইসিং সেকশন */}
      <section className="py-16 bg-gray-100">
        <div className="container-custom">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">আমাদের প্যাকেজসমূহ</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              আমরা আপনার বাজেট এবং প্রয়োজন অনুযায়ী বিভিন্ন প্যাকেজ অফার করি।
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* বেসিক প্যাকেজ */}
            <div className="bg-white p-8 rounded-lg shadow-md">
              <h3 className="text-2xl font-bold mb-4">বেসিক</h3>
              <p className="text-gray-600 mb-6">ছোট ব্যবসা এবং ব্যক্তিগত ওয়েবসাইটের জন্য উপযুক্ত</p>
              <div className="text-4xl font-bold mb-6">৳১৫,০০০</div>
              <ul className="mb-8 space-y-3">
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-green-500 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  ৫ পেজ ওয়েবসাইট
                </li>
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-green-500 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  রেসপন্সিভ ডিজাইন
                </li>
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-green-500 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  কন্টাক্ট ফর্ম
                </li>
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-green-500 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  বেসিক SEO
                </li>
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="  fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-red-500 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                  </svg>
                  অ্যাডভান্স ফিচার নেই
                </li>
              </ul>
              <button className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors">
                অর্ডার করুন
              </button>
            </div>
            
            {/* স্ট্যান্ডার্ড প্যাকেজ */}
            <div className="bg-blue-600 text-white p-8 rounded-lg shadow-md transform scale-105">
              <h3 className="text-2xl font-bold mb-4">স্ট্যান্ডার্ড</h3>
              <p className="text-blue-100 mb-6">মাঝারি আকারের ব্যবসার জন্য উপযুক্ত</p>
              <div className="text-4xl font-bold mb-6">৳৩০,০০০</div>
              <ul className="mb-8 space-y-3">
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-blue-300 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  ১০ পেজ ওয়েবসাইট
                </li>
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-blue-300 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  রেসপন্সিভ ডিজাইন
                </li>
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-blue-300 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  কন্টাক্ট ফর্ম
                </li>
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-blue-300 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  অ্যাডভান্স SEO
                </li>
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-blue-300 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  সোশ্যাল মিডিয়া ইন্টিগ্রেশন
                </li>
              </ul>
              <button className="w-full bg-white text-blue-600 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors">
                অর্ডার করুন
              </button>
            </div>
            
            {/* প্রিমিয়াম প্যাকেজ */}
            <div className="bg-white p-8 rounded-lg shadow-md">
              <h3 className="text-2xl font-bold mb-4">প্রিমিয়াম</h3>
              <p className="text-gray-600 mb-6">বড় ব্যবসা এবং কর্পোরেট ক্লায়েন্টদের জন্য উপযুক্ত</p>
              <div className="text-4xl font-bold mb-6">৳৫০,০০০+</div>
              <ul className="mb-8 space-y-3">
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-green-500 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  আনলিমিটেড পেজ
                </li>
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-green-500 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  রেসপন্সিভ ডিজাইন
                </li>
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-green-500 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  অ্যাডভান্স কন্টাক্ট ফর্ম
                </li>
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-green-500 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  প্রিমিয়াম SEO
                </li>
                <li className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-green-500 mr-2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                  </svg>
                  ই-কমার্স ফাংশনালিটি
                </li>
              </ul>
              <button className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors">
                অর্ডার করুন
              </button>
            </div>
          </div>
        </div>
      </section>
      
      {/* কল টু অ্যাকশন সেকশন */}
      <section className="py-16 bg-blue-600 text-white">
        <div className="container-custom text-center">
          <h2 className="text-3xl font-bold mb-6">আপনার প্রজেক্ট নিয়ে আলোচনা করতে চান?</h2>
          <p className="text-xl mb-8 max-w-3xl mx-auto">
            আমাদের দক্ষ টিম আপনার প্রজেক্ট নিয়ে আলোচনা করতে প্রস্তুত। আজই যোগাযোগ করুন।
          </p>
          <button className="bg-white text-blue-600 btn text-lg px-8 py-3">
            যোগাযোগ করুন
          </button>
        </div>
      </section>
    </div>
  )
}