পার্ট ৪: পেজ তৈরি করা

import Link from 'next/link'
import Image from 'next/image'

export default function Home() {
  return (
    <div>
      {/* হিরো সেকশন */}
      <section className="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20">
        <div className="container-custom">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
              <h1 className="text-4xl md:text-5xl font-bold mb-6">
                আধুনিক ওয়েব সলিউশন আপনার ব্যবসার জন্য
              </h1>
              <p className="text-xl mb-8">
                আমরা আধুনিক ওয়েব টেকনোলজি ব্যবহার করে আপনার ব্যবসাকে নতুন উচ্চতায় নিয়ে যেতে সাহায্য করি।
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Link href="/contact" className="btn-primary text-center">
                  যোগাযোগ করুন
                </Link>
                <Link href="/services" className="bg-white text-blue-600 btn text-center">
                  আমাদের সেবাসমূহ
                </Link>
              </div>
            </div>
            <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>
        </div>
      </section>

      {/* ফিচার সেকশন */}
      <section className="py-16">
        <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-6 rounded-lg shadow-md">
              <div className="bg-blue-100 text-blue-600 w-14 h-14 rounded-full flex items-center justify-center mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-2">ওয়েব ডেভেলপমেন্ট</h3>
              <p className="text-gray-600">
                আমরা আধুনিক ফ্রন্টএন্ড এবং ব্যাকএন্ড টেকনোলজি ব্যবহার করে রেসপন্সিভ ওয়েবসাইট তৈরি করি।
              </p>
            </div>

            {/* ফিচার কার্ড ২ */}
            <div className="bg-white p-6 rounded-lg shadow-md">
              <div className="bg-green-100 text-green-600 w-14 h-14 rounded-full flex items-center justify-center mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-2">মোবাইল অ্যাপ ডেভেলপমেন্ট</h3>
              <p className="text-gray-600">
                আমরা React Native ব্যবহার করে iOS এবং Android উভয় প্ল্যাটফর্মের জন্য মোবাইল অ্যাপ তৈরি করি।
              </p>
            </div>

            {/* ফিচার কার্ড ৩ */}
            <div className="bg-white p-6 rounded-lg shadow-md">
              <div className="bg-purple-100 text-purple-600 w-14 h-14 rounded-full flex items-center justify-center mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-2">UI/UX ডিজাইন</h3>
              <p className="text-gray-600">
                আমরা ইউজার-ফ্রেন্ডলি এবং আকর্ষণীয় ইন্টারফেস ডিজাইন করি যা ব্যবহারকারীদের অভিজ্ঞতা উন্নত করে।
              </p>
            </div>
          </div>

          <div className="text-center mt-12">
            <Link href="/services" className="btn-primary">
              সব সেবা দেখুন
            </Link>
          </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-6 rounded-lg shadow-md">
              <div className="flex items-center mb-4">
                <Image 
                  src="/placeholder.svg?height=60&width=60" 
                  alt="ক্লায়েন্ট ১" 
                  width={60} 
                  height={60}
                  className="rounded-full"
                />
                <div className="ml-4">
                  <h4 className="font-bold">আহমেদ হাসান</h4>
                  <p className="text-gray-600">সিইও, টেক সলিউশনস</p>
                </div>
              </div>
              <p className="text-gray-700">
                "আমরা আমাদের কোম্পানির ওয়েবসাইট তৈরির জন্য তাদের সাথে কাজ করেছি। তারা খুব দক্ষতার সাথে কাজ করেছে এবং সময়মত প্রজেক্ট শেষ করেছে। আমরা তাদের সেবায় খুবই সন্তুষ্ট।"
              </p>
            </div>

            {/* টেস্টিমোনিয়াল ২ */}
            <div className="bg-white p-6 rounded-lg shadow-md">
              <div className="flex items-center mb-4">
                <Image 
                  src="/placeholder.svg?height=60&width=60" 
                  alt="ক্লায়েন্ট ২" 
                  width={60} 
                  height={60}
                  className="rounded-full"
                />
                <div className="ml-4">
                  <h4 className="font-bold">ফারহানা আক্তার</h4>
                  <p className="text-gray-600">মার্কেটিং ম্যানেজার, ইকমার্স</p>
                </div>
              </div>
              <p className="text-gray-700">
                "আমাদের ই-কমার্স ওয়েবসাইট তৈরির জন্য তাদের সাহায্য নিয়েছিলাম। তারা খুব ভালো সাপোর্ট দিয়েছে এবং আমাদের সমস্ত প্রয়োজন পূরণ করেছে। আমি তাদের সেবা অন্যদের কাছেও সুপারিশ করব।"
              </p>
            </div>

            {/* টেস্টিমোনিয়াল ৩ */}
            <div className="bg-white p-6 rounded-lg shadow-md">
              <div className="flex items-center mb-4">
                <Image 
                  src="/placeholder.svg?height=60&width=60" 
                  alt="ক্লায়েন্ট ৩" 
                  width={60} 
                  height={60}
                  className="rounded-full"
                />
                <div className="ml-4">
                  <h4 className="font-bold">কামাল হোসেন</h4>
                  <p className="text-gray-600">ফাউন্ডার, স্টার্টআপ</p>
                </div>
              </div>
              <p className="text-gray-700">
                "আমাদের স্টার্টআপের জন্য মোবাইল অ্যাপ তৈরি করতে তাদের সাহায্য নিয়েছিলাম। তারা খুব দ্রুত এবং দক্ষতার সাথে কাজ করেছে। আমি তাদের সেবায় খুবই সন্তুষ্ট।"
              </p>
            </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>
          <Link href="/contact" className="bg-white text-blue-600 btn text-lg px-8 py-3">
            যোগাযোগ করুন
          </Link>
        </div>
      </section>
    </div>
  )
}