Update src/app/page.tsx

This commit is contained in:
2026-05-14 13:38:43 +00:00
parent 52e1c3b5cd
commit 57d366eab9

View File

@@ -29,157 +29,159 @@ export default function LandingPage() {
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "الرئيسية", id: "hero" },
{ name: "المميزات", id: "features" },
{ name: "التصاميم", id: "products" },
{ name: "اتصل بنا", id: "contact" },
]}
brandName="ArchitectAI"
/>
</div>
<div id="nav" data-section="nav" dir="rtl">
<NavbarStyleCentered
navItems={[
{ name: "الرئيسية", id: "hero" },
{ name: "المميزات", id: "features" },
{ name: "التصاميم", id: "products" },
{ name: "اتصل بنا", id: "contact" },
]}
brandName="ArchitectAI"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{ variant: "sparkles-gradient" }}
title="ابنِ مسكن أحلامك باستخدام الذكاء الاصطناعي"
description="حوّل أفكارك إلى تحف معمارية ثلاثية الأبعاد في ثوانٍ. فقط صف رؤيتك وشاهد الذكاء الاصطناعي الخاص بنا وهو يبث الحياة في فيلتك أو شاليهك."
buttons={[{ text: "ابدأ التصميم", href: "#" }]}
imageSrc="http://img.b2bpic.net/free-photo/luxurious-villa-mountain-landscape-tranquil-poolside-relaxation-generated-by-ai_188544-30912.jpg"
imageAlt="3D render of a luxury villa"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "Executive woman" },
{ src: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg", alt: "Business woman" },
{ src: "http://img.b2bpic.net/free-photo/handsome-businesman-summer-city_1157-18994.jpg", alt: "Businessman" },
{ src: "http://img.b2bpic.net/free-photo/senior-woman-with-plans-helmet_1149-1127.jpg", alt: "Senior woman" },
{ src: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg", alt: "Young man" },
]}
avatarText="انضم إلى أكثر من 15,000 مصمم سعيد"
marqueeItems={[
{ type: "text", text: "تصميم ثلاثي الأبعاد لحظي" },
{ type: "text", text: "دقة معمارية فائقة" },
{ type: "text", text: "تحسين الميزانية" },
{ type: "text", text: "تحليل المواد" },
{ type: "text", text: "تصميم مستدام" },
]}
/>
</div>
<div id="hero" data-section="hero" dir="rtl">
<HeroBillboard
background={{ variant: "sparkles-gradient" }}
title="ابنِ مسكن أحلامك باستخدام الذكاء الاصطناعي"
description="حوّل أفكارك إلى تحف معمارية ثلاثية الأبعاد في ثوانٍ. فقط صف رؤيتك وشاهد الذكاء الاصطناعي الخاص بنا وهو يبث الحياة في فيلتك أو شاليهك."
buttons={[{ text: "ابدأ التصميم", href: "#" }]}
imageSrc="http://img.b2bpic.net/free-photo/luxurious-villa-mountain-landscape-tranquil-poolside-relaxation-generated-by-ai_188544-30912.jpg"
imageAlt="3D render of a luxury villa"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "Executive woman" },
{ src: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg", alt: "Business woman" },
{ src: "http://img.b2bpic.net/free-photo/handsome-businesman-summer-city_1157-18994.jpg", alt: "Businessman" },
{ src: "http://img.b2bpic.net/free-photo/senior-woman-with-plans-helmet_1149-1127.jpg", alt: "Senior woman" },
{ src: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg", alt: "Young man" },
]}
avatarText="انضم إلى أكثر من 15,000 مصمم سعيد"
marqueeItems={[
{ type: "text", text: "تصميم ثلاثي الأبعاد لحظي" },
{ type: "text", text: "دقة معمارية فائقة" },
{ type: "text", text: "تحسين الميزانية" },
{ type: "text", text: "تحليل المواد" },
{ type: "text", text: "تصميم مستدام" },
]}
/>
</div>
<div id="features" data-section="features">
<FeatureBento
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "تحويل النص إلى تصميم معماري", description: "صف أي مساحة باللغة الطبيعية واحصل على مخططات ثلاثية الأبعاد فورية.", bentoComponent: "reveal-icon", icon: Sparkles },
{ title: "معاينة ثلاثية الأبعاد", description: "عِش تجربة تصميمك مع إمكانية التجوّل بزاوية 360 درجة.", bentoComponent: "reveal-icon", icon: Eye },
{ title: "حاسبة التكاليف", description: "قدّر ميزانية البناء بناءً على المواد والأبعاد.", bentoComponent: "reveal-icon", icon: DollarSign },
]}
title="مميزات التصميم الذكي"
description="أدوات ذكاء اصطناعي قوية مصممة للمبدعين وأصحاب العقارات والمهندسين المعماريين للبناء بشكل أسرع من أي وقت مضى."
/>
</div>
<div id="features" data-section="features" dir="rtl">
<FeatureBento
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "تحويل النص إلى تصميم معماري", description: "صف أي مساحة باللغة الطبيعية واحصل على مخططات ثلاثية الأبعاد فورية.", bentoComponent: "reveal-icon", icon: Sparkles },
{ title: "معاينة ثلاثية الأبعاد", description: "عِش تجربة تصميمك مع إمكانية التجوّل بزاوية 360 درجة.", bentoComponent: "reveal-icon", icon: Eye },
{ title: "حاسبة التكاليف", description: "قدّر ميزانية البناء بناءً على المواد والأبعاد.", bentoComponent: "reveal-icon", icon: DollarSign },
]}
title="مميزات التصميم الذكي"
description="أدوات ذكاء اصطناعي قوية مصممة للمبدعين وأصحاب العقارات والمهندسين المعماريين للبناء بشكل أسرع من أي وقت مضى."
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="تصميم مستقبل العقارات"
description="يجمع ArchitectAI بين الذكاء المعماري العميق وواجهات الاستخدام السهلة لجعل التصميم الاحترافي متاحاً للجميع، بغض النظر عن خبرتهم الهندسية."
imageSrc="http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg"
/>
</div>
<div id="about" data-section="about" dir="rtl">
<MediaAbout
useInvertedBackground={false}
title="تصميم مستقبل العقارات"
description="يجمع ArchitectAI بين الذكاء المعماري العميق وواجهات الاستخدام السهلة لجعل التصميم الاحترافي متاحاً للجميع، بغض النظر عن خبرتهم الهندسية."
imageSrc="http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg"
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{ id: "1", name: "فيلا عصرية", price: "مخصص", variant: "عصري", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-house-model_23-2150799685.jpg" },
{ id: "2", name: "شاليه واحة الصحراء", price: "مخصص", variant: "بسيط", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-house-desert_23-2150921017.jpg" },
{ id: "3", name: "كوخ شاطئي فاخر", price: "مخصص", variant: "فاخر", imageSrc: "http://img.b2bpic.net/free-photo/chairs-white-garden-resort-chair_1203-4439.jpg" },
{ id: "4", name: "ملاذ جبلي", price: "مخصص", variant: "ريفي", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-lodge-house-with-deer-antlers-hanging-window-snow-back_181624-61513.jpg" },
]}
title="استكشف قوالب التصميم الخاصة بنا"
description="تصفح مجموعتنا المختارة من الفلل العصرية والشاليهات الهادئة الجاهزة للتخصيص."
/>
</div>
<div id="products" data-section="products" dir="rtl">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{ id: "1", name: "فيلا عصرية", price: "مخصص", variant: "عصري", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-house-model_23-2150799685.jpg" },
{ id: "2", name: "شاليه واحة الصحراء", price: "مخصص", variant: "بسيط", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-house-desert_23-2150921017.jpg" },
{ id: "3", name: "كوخ شاطئي فاخر", price: "مخصص", variant: "فاخر", imageSrc: "http://img.b2bpic.net/free-photo/chairs-white-garden-resort-chair_1203-4439.jpg" },
{ id: "4", name: "ملاذ جبلي", price: "مخصص", variant: "ريفي", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-lodge-house-with-deer-antlers-hanging-window-snow-back_181624-61513.jpg" },
]}
title="استكشف قوالب التصميم الخاصة بنا"
description="تصفح مجموعتنا المختارة من الفلل العصرية والشاليهات الهادئة الجاهزة للتخصيص."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="depth-3d"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "15K+", title: "تصميم تم إنجازه", description: "مشروع ناجح", icon: Building },
{ id: "m2", value: "95%", title: "رضا المستخدمين", description: "تقييمات عالية", icon: ThumbsUp },
{ id: "m3", value: "20x", title: "سرعة سير العمل", description: "مقارنة بـ CAD", icon: Zap },
]}
title="مقاييس أداء التصميم"
description="شاهد تأثير محرك التصميم الخاص بنا المدعوم بالذكاء الاصطناعي."
/>
</div>
<div id="metrics" data-section="metrics" dir="rtl">
<MetricCardOne
animationType="depth-3d"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "15K+", title: "تصميم تم إنجازه", description: "مشروع ناجح", icon: Building },
{ id: "m2", value: "95%", title: "رضا المستخدمين", description: "تقييمات عالية", icon: ThumbsUp },
{ id: "m3", value: "20x", title: "سرعة سير العمل", description: "مقارنة بـ CAD", icon: Zap },
]}
title="مقاييس أداء التصميم"
description="شاهد تأثير محرك التصميم الخاص بنا المدعوم بالذكاء الاصطناعي."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "سارة أحمد", role: "مستثمرة عقارية", company: "العالمية للعقارات", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg" },
{ id: "t2", name: "خالد الملا", role: "مالك فيلا", company: "ذاتي", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-spectacles_1303-14468.jpg" },
{ id: "t3", name: "ليلى نور", role: "طالبة هندسة معمارية", company: "أكاديمية التصميم", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smile-woman-talking-phone-looking-camera_23-2148317284.jpg" },
]}
title="أحبها أصحاب المنازل"
description="انضم إلى الآلاف الذين نجحوا في بناء مساحات أحلامهم."
/>
</div>
<div id="testimonials" data-section="testimonials" dir="rtl">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "سارة أحمد", role: "مستثمرة عقارية", company: "العالمية للعقارات", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg" },
{ id: "t2", name: "خالد الملا", role: "مالك فيلا", company: "ذاتي", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-spectacles_1303-14468.jpg" },
{ id: "t3", name: "ليلى نور", role: "طالبة هندسة معمارية", company: "أكاديمية التصميم", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smile-woman-talking-phone-looking-camera_23-2148317284.jpg" },
]}
title="أحبها أصحاب المنازل"
description="انضم إلى الآلاف الذين نجحوا في بناء مساحات أحلامهم."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "هل التصميم واقعي حقاً؟", content: "نعم، يستخدم محركنا تتبع الأشعة المتقدم للإضاءة والأبعاد الدقيقة." },
{ id: "q2", title: "هل يمكنني تصدير تصميماتي؟", content: "بالتأكيد، يمكن تصدير جميع التصميمات كمخططات معمارية جاهزة للطباعة." },
{ id: "q3", title: "هل أحتاج لمهارات هندسية؟", content: "على الإطلاق، المنصة مصممة ليستخدمها الجميع." },
]}
title="أسئلة شائعة"
description="كل ما تحتاج لمعرفته عن ArchitectAI."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq" dir="rtl">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "هل التصميم واقعي حقاً؟", content: "نعم، يستخدم محركنا تتبع الأشعة المتقدم للإضاءة والأبعاد الدقيقة." },
{ id: "q2", title: "هل يمكنني تصدير تصميماتي؟", content: "بالتأكيد، يمكن تصدير جميع التصميمات كمخططات معمارية جاهزة للطباعة." },
{ id: "q3", title: "هل أحتاج لمهارات هندسية؟", content: "على الإطلاق، المنصة مصممة ليستخدمها الجميع." },
]}
title="أسئلة شائعة"
description="كل ما تحتاج لمعرفته عن ArchitectAI."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="ابدأ رحلة التصميم الخاصة بك"
description="لديك أسئلة؟ فريق الدعم لدينا مستعد لمساعدتك."
inputs={[
{ name: "name", type: "text", placeholder: "الاسم الكامل", required: true },
{ name: "email", type: "email", placeholder: "عنوان البريد الإلكتروني", required: true },
]}
textarea={{ name: "message", placeholder: "أخبرنا عن رؤيتك للمشروع...", rows: 4 }}
imageSrc="http://img.b2bpic.net/free-photo/blue-neon-lines-like-digital-waves-neon-geometry_169016-71495.jpg"
/>
</div>
<div id="contact" data-section="contact" dir="rtl">
<ContactSplitForm
useInvertedBackground={false}
title="ابدأ رحلة التصميم الخاصة بك"
description="لديك أسئلة؟ فريق الدعم لدينا مستعد لمساعدتك."
inputs={[
{ name: "name", type: "text", placeholder: "الاسم الكامل", required: true },
{ name: "email", type: "email", placeholder: "عنوان البريد الإلكتروني", required: true },
]}
textarea={{ name: "message", placeholder: "أخبرنا عن رؤيتك للمشروع...", rows: 4 }}
imageSrc="http://img.b2bpic.net/free-photo/blue-neon-lines-like-digital-waves-neon-geometry_169016-71495.jpg"
/>
</div>
<div id="footer" data-section="footer" style={{ direction: 'rtl' }}>
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/hallway-building_23-2149397562.jpg"
logoText="ArchitectAI"
columns={[
{ title: "المنتج", items: [{ label: "التصاميم", href: "#" }, { label: "المميزات", href: "#" }] },
{ title: "الدعم", items: [{ label: "الأسئلة الشائعة", href: "#" }, { label: "اتصل بنا", href: "#" }] },
]}
/>
</div>
<div id="footer" data-section="footer" dir="rtl">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/hallway-building_23-2149397562.jpg"
logoText="ArchitectAI"
columns={[
{ title: "المنتج", items: [{ label: "التصاميم", href: "#" }, { label: "المميزات", href: "#" }] },
{ title: "الدعم", items: [{ label: "الأسئلة الشائعة", href: "#" }, { label: "اتصل بنا", href: "#" }] },
]
}
copyrightText="© 2025 | ArchitectAI"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}