৪.২: about পেজ তৈরি করা

mkdir -p app/about

import Image from 'next/image'

export default function AboutPage() {
  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">
            <div>
              <h2 className="text-3xl font-bold mb-6">আমাদের গল্প</h2>
              <p className="text-gray-700 mb-4">
                আমাদের যাত্রা শুরু হয়েছিল ২০১৫ সালে, যখন আমরা কয়েকজন উদ্যোগী প্রোগ্রামার একত্রিত হয়ে একটি ছোট টিম গঠন করি। আমাদের লক্ষ্য ছিল বাংলাদেশের ব্যবসা প্রতিষ্ঠানগুলোকে আধুনিক ডিজিটাল সলিউশন প্রদান করা।
              </p>
              <p className="text-gray-700 mb-4">
                প্রথম দিকে আমরা ছোট ছোট ওয়েবসাইট প্রজেক্ট নিয়ে কাজ শুরু করি। ধীরে ধীরে আমাদের অভিজ্ঞতা এবং দক্ষতা বাড়তে থাকে এবং আমরা বড় বড় প্রজেক্ট নিয়ে কাজ করতে শুরু করি।
              </p>
              <p className="text-gray-700">
                আজ আমরা একটি সম্পূর্ণ ডিজিটাল এজেন্সি হিসেবে কাজ করছি, যেখানে ৫০+ দক্ষ সদস্য রয়েছে। আমরা বাংলাদেশের পাশাপাশি বিদেশের বিভিন্ন ক্লায়েন্টদের জন্যও কাজ করি।
              </p>
            </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 bg-gray-100">
        <div className="container-custom">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            {/* মিশন */}
            <div className="bg-white p-8 rounded-lg shadow-md">
              <h3 className="text-2xl font-bold mb-4">আমাদের মিশন</h3>
              <p className="text-gray-700 mb-4">
                আমাদের মিশন হল আধুনিক ওয়েব টেকনোলজি ব্যবহার করে ব্যবসা প্রতিষ্ঠানগুলোকে ডিজিটাল ট্রান্সফরমেশনে সাহায্য করা। আমরা বিশ্বাস করি যে সঠিক টেকনোলজি ব্যবহার করে যেকোনো ব্যবসাকে সফল করা সম্ভব।
              </p>
              <p className="text-gray-700">
                আমরা সর্বদা আমাদের ক্লায়েন্টদের প্রয়োজন বুঝতে চেষ্টা করি এবং তাদের জন্য সর্বোত্তম সলিউশন প্রদান করি। আমাদের লক্ষ্য হল আমাদের ক্লায়েন্টদের সাফল্য।
              </p>
            </div>
            
            {/* ভিশন */}
            <div className="bg-white p-8 rounded-lg shadow-md">
              <h3 className="text-2xl font-bold mb-4">আমাদের ভিশন</h3>
              <p className="text-gray-700 mb-4">
                আমাদের ভিশন হল বাংলাদেশের অন্যতম সেরা ডিজিটাল এজেন্সি হওয়া। আমরা চাই আমাদের কাজের মাধ্যমে বাংলাদেশের ডিজিটাল ইকোসিস্টেম উন্নত করতে।
              </p>
              <p className="text-gray-700">
                আমরা বিশ্বাস করি যে আমাদের দক্ষতা এবং অভিজ্ঞতা ব্যবহার করে আমরা বাংলাদেশের ডিজিটাল ট্রান্সফরমেশনে গুরুত্বপূর্ণ ভূমিকা রাখতে পারি। আমরা সর্বদা নতুন টেকনোলজি শিখতে এবং আমাদের দক্ষতা উন্নত করতে চেষ্টা করি।
              </p>
            </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 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
            {/* টিম মেম্বার ১ */}
            <div className="bg-white p-6 rounded-lg shadow-md text-center">
              <Image 
                src="/placeholder.svg?height=200&width=200" 
                alt="টিম মেম্বার ১" 
                width={200} 
                height={200}
                className="rounded-full mx-auto mb-4"
              />
              <h3 className="text-xl font-bold mb-1">আবদুল করিম</h3>
              <p className="text-gray-600 mb-4">সিইও এবং ফাউন্ডার</p>
              <div className="flex justify-center space-x-4">
                <a href="#" className="text-blue-600 hover:text-blue-800">
                  <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">
                    <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>
                </a>
                <a href="#" className="text-blue-600 hover:text-blue-800">
                  <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">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" />
                  </svg>
                </a>
              </div>
            </div>
            
            {/* টিম মেম্বার ২ */}
            <div className="bg-white p-6 rounded-lg shadow-md text-center">
              <Image 
                src="/placeholder.svg?height=200&width=200" 
                alt="টিম মেম্বার ২" 
                width={200} 
                height={200}
                className="rounded-full mx-auto mb-4"
              />
              <h3 className="text-xl font-bold mb-1">ফারহানা আক্তার</h3>
              <p className="text-gray-600 mb-4">প্রজেক্ট ম্যানেজার</p>
              <div className="flex justify-center space-x-4">
                <a href="#" className="text-blue-600 hover:text-blue-800">
                  <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">
                    <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>
                </a>
                <a href="#" className="text-blue-600 hover:text-blue-800">
                  <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">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" />
                  </svg>
                </a>
              </div>
            </div>
            
            {/* টিম মেম্বার ৩ */}
            <div className="bg-white p-6 rounded-lg shadow-md text-center">
              <Image 
                src="/placeholder.svg?height=200&width=200" 
                alt="টিম মেম্বার ৩" 
                width={200} 
                height={200}
                className="rounded-full mx-auto mb-4"
              />
              <h3 className="text-xl font-bold mb-1">রাকিব হাসান</h3>
              <p className="text-gray-600 mb-4">সিনিয়র ডেভেলপার</p>
              <div className="flex justify-center space-x-4">
                <a href="#" className="text-blue-600 hover:text-blue-800">
                  <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">
                    <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>
                </a>
                <a href="#" className="text-blue-600 hover:text-blue-800">
                  <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">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" />
                  </svg>
                </a>
              </div>
            </div>
            
            {/* টিম মেম্বার ৪ */}
            <div className="bg-white p-6 rounded-lg shadow-md text-center">
              <Image 
                src="/placeholder.svg?height=200&width=200" 
                alt="টিম মেম্বার ৪" 
                width={200} 
                height={200}
                className="rounded-full mx-auto mb-4"
              />
              <h3 className="text-xl font-bold mb-1">নাজমুল হাসান</h3>
              <p className="text-gray-600 mb-4">UI/UX ডিজাইনার</p>
              <div className="flex justify-center space-x-4">
                <a href="#" className="text-blue-600 hover:text-blue-800">
                  <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">
                    <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>
                </a>
                <a href="#" className="text-blue-600 hover:text-blue-800">
                  <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">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" />
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}