Bayoumy Co. | تصميم مواقع شركات
منصة احترافية ثنائية اللغة لشركة محمد عبد الوهاب بيومي للمقاولات، تم تطويرها بأحدث تقنيات البرمجة لضمان أداء عال وتصدر نتائج البحث.
التقنيات الأساسية
- Next.js
- React
- TypeScript
- Tailwind CSS
- Framer Motion
الأداء
- توليد صفحات ثابتة SSG لسرعة تحميل عالية.
- تحسين صور متقدم باستخدام Next.js Image.
- تقسيم الكود والتحميل الكسول للأجزاء غير الحرجة.
- تحسين الخطوط عبر next/font.
- حركات مدعومة بتسريع العتاد لتجربة 60fps.
الأمان
- نشر جاهز للإنتاج
- حماية متغيرات البيئة
الميزات الرئيسية
دعم i18n متقدم للغتين العربية والإنجليزية.
تهيئة SEO محلية مع وسوم hreflang ديناميكية.
توليد صفحات ثابتة SSG لأكثر من 60 مشروعا وخبرا.
تحسين تلقائي للصور بصيغ AVIF/WebP مع cache-control.
حركات سلسة مدعومة بتسريع العتاد عبر Framer Motion.
Metadata وStructured Data (JSON-LD) شاملة لكل المسارات.
توليد sitemap وrobots.xml ديناميكيا.
Middleware أمان يتضمن CSP وHSTS وX-Frame-Options.
نماذج متعددة الخطوات للتوظيف والموردين مع حماية Honeypot.
تحديد معدل الطلبات لحماية النماذج.
تكامل Resend API لإرسال البريد المؤسسي.
ثيمات ديناميكية Gold/Dark/Light.
تصميم responsive دقيق للموبايل والتابلت والديسكتوب.
تفاعلات صغيرة وشرائط تمرير مخصصة.
بحث لحظي وتصفية حسب التصنيف للمشاريع.
تأثيرات Parallax وسلوك تمرير سلس.
بنية المشروع
app/ ├── (routes)/ # مسارات ثنائية اللغة للصفحات الرئيسية ├── api/ # API Routes للنماذج وتكامل Resend ├── globals.css # إعدادات Tailwind 4 والثيمات العامة ├── layout.tsx # التخطيط العام مع الخطوط وSEO وGoogle Analytics ├── robots.ts # توليد robots.txt ديناميكيا └── sitemap.ts # توليد sitemap.xml ديناميكيا components/ ├── UI/ # مكونات UI قابلة لإعادة الاستخدام ├── Animation/ # مكونات الحركة المتخصصة └── Sections/ # أقسام خاصة بالصفحات context/ # React Contexts للغة والتحميل والثيم public/ # الأصول الثابتة └── images/ # صور المشاريع والهوية البصرية lib/ # أدوات مشتركة ومنطق التحقق
استراتيجيات التطوير
- عرض هجين: SSG لصفحات المحتوى مع تفاعل على جانب العميل.
- Edge Middleware لإضافة رؤوس الأمان وحماية المسارات.
- i18n ديناميكي مع تبديل لغة جاهز للـ SEO.
- مسار أصول محسن باستخدام Next/Image وصيغ AVIF/WebP.
- بنية قائمة على مكونات React قابلة لإعادة الاستخدام.
- تجربة استخدام تركز على الحركة والانتقالات السلسة.
- حماية ضد الرسائل المزعجة عبر Honeypot وتحديد معدل الطلبات.
واجهة المستخدم
