পার্ট ৩: হেডার এবং ফুটার কম্পোনেন্ট তৈরি করা

mkdir -p app/components

import Link from 'next/link'

export default function Header() {
  return (
    <header className="bg-white shadow-sm">
      <div className="container-custom py-4">
        <div className="flex justify-between items-center">
          {/* লোগো */}
          <Link href="/" className="text-2xl font-bold text-primary no-underline">
            আমার ওয়েবসাইট
          </Link>
          
          {/* নেভিগেশন লিংক */}
          <nav className="flex gap-6">
            <Link href="/" className="text-gray-700 hover:text-primary no-underline">
              হোম
            </Link>
            <Link href="/about" className="text-gray-700 hover:text-primary no-underline">
              আমাদের সম্পর্কে
            </Link>
            <Link href="/services" className="text-gray-700 hover:text-primary no-underline">
              সেবাসমূহ
            </Link>
            <Link href="/blog" className="text-gray-700 hover:text-primary no-underline">
              ব্লগ
            </Link>
            <Link href="/contact" className="text-gray-700 hover:text-primary no-underline">
              যোগাযোগ
            </Link>
          </nav>
        </div>
      </div>
    </header>
  )
}

import Link from 'next/link'

export default function Footer() {
  const currentYear = new Date().getFullYear()
  
  return (
    <footer className="bg-gray-800 text-white py-8">
      <div className="container-custom">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* কলাম ১: সাইট সম্পর্কে */}
          <div className="col-span-1 md:col-span-2">
            <h3 className="text-xl font-bold mb-4">আমার ওয়েবসাইট</h3>
            <p className="text-gray-300 mb-4">
              আমাদের ওয়েবসাইটে আপনাকে স্বাগতম। আমরা আধুনিক ওয়েব টেকনোলজি ব্যবহার করে উন্নতমানের সেবা প্রদান করি।
            </p>
          </div>
          
          {/* কলাম ২: কুইক লিংক */}
          <div>
            <h3 className="text-xl font-bold mb-4">কুইক লিংক</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/" className="text-gray-300 hover:text-white no-underline">
                  হোম
                </Link>
              </li>
              <li>
                <Link href="/about" className="text-gray-300 hover:text-white no-underline">
                  আমাদের সম্পর্কে
                </Link>
              </li>
              <li>
                <Link href="/services" className="text-gray-300 hover:text-white no-underline">
                  সেবাসমূহ
                </Link>
              </li>
              <li>
                <Link href="/blog" className="text-gray-300 hover:text-white no-underline">
                  ব্লগ
                </Link>
              </li>
              <li>
                <Link href="/contact" className="text-gray-300 hover:text-white no-underline">
                  যোগাযোগ
                </Link>
              </li>
            </ul>
          </div>
          
          {/* কলাম ৩: যোগাযোগ */}
          <div>
            <h3 className="text-xl font-bold mb-4">যোগাযোগ</h3>
            <ul className="space-y-2 text-gray-300">
              <li>ঠিকানা: ১২৩, আজিমপুর রোড, ঢাকা</li>
              <li>ফোন: +৮৮০ ১৭১২ ৩৪৫৬৭৮</li>
              <li>ইমেইল: info@example.com</li>
            </ul>
          </div>
        </div>
        
        {/* কপিরাইট */}
        <div className="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
          <p>© {currentYear} আমার ওয়েবসাইট। সর্বস্বত্ব সংরক্ষিত।</p>
        </div>
      </div>
    </footer>
  )
}

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import Header from './components/Header'
import Footer from './components/Footer'

// Inter ফন্ট লোড করা
const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'আমার Next.js ওয়েবসাইট',
  description: 'Next.js দিয়ে তৈরি করা একটি সুন্দর ওয়েবসাইট',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="bn">
      <body className={inter.className}>
        <div className="flex flex-col min-h-screen">
          <Header />
          <main className="flex-grow">
            {children}
          </main>
          <Footer />
        </div>
      </body>
    </html>
  )
}