Skip to content

Header

🧱 Responsive Header

The header includes your logo (on the left), navigation links (centered), and a Call-to-Action (CTA) button (on the right).

📱 On mobile devices, the links and CTA are hidden and accessed through a burger menu.

🖼️ Add your custom logo inside the /public folder. Make sure the file name matches the one used in the <Header /> component (currently logo.png).

  • Path: page.js

Alt Text

// For both Arabic and English
import Header from "@/components/Header";
// For English only
import Header_en from "@/components/Header_en";
// For Arabic only
import Header_ar from "@/components/Header_ar";

🌐 Language Support

There are 3 header components you can toggle between:

  • <Header /> ➜ The default header that supports both languages.
  • <Header_ar /> ➜ A right-to-left (RTL) header for Arabic only.
  • <Header_en /> ➜ A left-to-right (LTR) header for English only.

🔁 You can switch between these headers based on the selected language through settings or the config.js file.

💡 Tips

  • Unless you're Nike or Apple, people probably don’t know who you are. Keep your brand name subtle and clean.

  • Always include a "Pricing" link in the header. No matter what you’re offering, visitors will look for it.