363 lines
12 KiB
TypeScript
363 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="medium"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "الرئيسية",
|
|
id: "#hero",
|
|
},
|
|
{
|
|
name: "عنا",
|
|
id: "#about",
|
|
},
|
|
{
|
|
name: "المنتجات",
|
|
id: "#products",
|
|
},
|
|
{
|
|
name: "اتصل بنا",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
brandName="خيري للبناء"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="شريكك الأول في مواد البناء بالجملة"
|
|
description="نقدم لك أفضل مواد البناء المعتمدة بجودة عالية وأسعار تنافسية تلبي احتياجات مشاريعكم الكبرى بكل كفاءة."
|
|
buttons={[
|
|
{
|
|
text: "استعرض المنتجات",
|
|
href: "#products",
|
|
},
|
|
{
|
|
text: "تواصل معنا",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/industrial-park-factory-building-warehouse_1417-1927.jpg"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/fourth-block-chernobyl-nuclear-power-plant-30-years-after-explosion-nuclear-power-plant_627829-11676.jpg",
|
|
alt: "Avatar 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/industrial-park-factory-building-warehouse_1417-1912.jpg",
|
|
alt: "Avatar 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/interior-new-warehouse_1385-442.jpg",
|
|
alt: "Avatar 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/industrial-park-factory-building-warehouse_1417-1940.jpg",
|
|
alt: "Avatar 4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/industrial-worker-indoors-factory-businessman-with-orange-hard-hat-man-blue-shirt_1157-40903.jpg",
|
|
alt: "Avatar 5",
|
|
},
|
|
]}
|
|
avatarText="موثوقون لدى أكثر من 1200 مقاول"
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "توريد حديد التسليح",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "أسمنت بورتلاندي عالي الجودة",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "سيراميك وأدوات تشطيب",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "أطقم مواد بنائية متكاملة",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "توصيل لوجستي سريع",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="الجودة والثقة في قلب أعمالنا"
|
|
description="تأسست شركة خيري لبيع مواد البناء بالجملة لتكون الركيزة الأساسية للمقاولين والمطورين. نحن نؤمن بأن بناء المستقبل يبدأ بمواد صلبة وموثوقة، لذا نوفر منتجات مطابقة لأعلى المعايير."
|
|
imageSrc="http://img.b2bpic.net/free-photo/company-managers-with-protective-face-masks-talking-while-walking-through-wood-factory-facility_637285-11879.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: "f1",
|
|
title: "توصيل سريع",
|
|
tags: [
|
|
"خدمات لوجستية",
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-factory-trucks-parked-near-warehouse-daytime_181624-4593.jpg",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "أسعار تنافسية",
|
|
tags: [
|
|
"خصومات خاصة",
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-close-view-nervous-female-worker-uniform-wearing-hard-hat-showing-sale-iconand-pointing-up-isolated-red-wall_140725-68498.jpg",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "جودة معتمدة",
|
|
tags: [
|
|
"مواد أصلية",
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-quality-brand-badge-banner-copy-space-concept_53876-13783.jpg",
|
|
},
|
|
]}
|
|
title="لماذا تختار التعامل معنا؟"
|
|
description="نحن نجمع بين الخبرة الطويلة والخدمة اللوجستية السريعة لضمان نجاح مشروعك."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "أسمنت بورتلاندي",
|
|
price: "150",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/many-metal-kegs-beer_1398-2538.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "حديد تسليح",
|
|
price: "3200",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-typesetting-parts_23-2149609830.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "طوب حراري",
|
|
price: "5",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/restored-walls-ancient-fortress-erebuni-kingdom-urartu-presentday-yerevan-armenia-traveling-popular-places-heritage-human-history-idea-banner-postcard_166373-4235.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "رمل ناعم",
|
|
price: "80",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/carpentry-concept_23-2147773754.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "سيراميك",
|
|
price: "120",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/circle-dirty-paint-brushes_23-2148662964.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "دهانات بلاستيك",
|
|
price: "450",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-working-printing-house-with-paper-paints_1303-26599.jpg",
|
|
},
|
|
]}
|
|
title="كتالوج المنتجات"
|
|
description="كل ما تحتاجه لإنجاز مشاريع البناء والتشطيب بضغطة زر."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
useInvertedBackground={true}
|
|
title="أرقامنا في سطور"
|
|
tag="إنجازاتنا"
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "1200+",
|
|
description: "مشروع مكتمل",
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "50+",
|
|
description: "شراكة استراتيجية",
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "15",
|
|
description: "سنة خبرة",
|
|
},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialProof" data-section="socialProof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"مجموعة البناء الدولية",
|
|
"شركة المقاولات الحديثة",
|
|
"إعمار للتطوير",
|
|
"مشاريع المدن",
|
|
"شركة الإنشاءات الكبرى",
|
|
"هيئة الطرق والجسور",
|
|
"تطوير العقارات",
|
|
]}
|
|
title="عملائنا وشركاء النجاح"
|
|
description="نفتخر بالتعاون مع كبرى الشركات والمطورين في المملكة."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
title: "خدمة ممتازة",
|
|
quote: "سرعة في التوريد وجودة لا تضاهى.",
|
|
name: "محمد حسن",
|
|
role: "مدير مشاريع",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/two-people-working-warehouse_329181-12819.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
title: "أسعار منافسة",
|
|
quote: "وفروا علينا الكثير من التكاليف.",
|
|
name: "أحمد علي",
|
|
role: "مقاول",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-happy-man-with-helmet-crossed-arms_23-2148269266.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
title: "دقة في المواعيد",
|
|
quote: "التزام تام بكل ما تم الاتفاق عليه.",
|
|
name: "خالد محمود",
|
|
role: "مهندس مدني",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/older-woman-with-blueprints_1149-1156.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
title: "مواد ممتازة",
|
|
quote: "لن نتعامل مع غيركم مستقبلاً.",
|
|
name: "فهد عمر",
|
|
role: "مالك",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/architect-smiling-while-looking-camera_23-2148242957.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
title: "سهولة التعامل",
|
|
quote: "عملية توريد سلسة واحترافية.",
|
|
name: "سارة سعيد",
|
|
role: "مصممة",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/asian-architect-woman_53876-31462.jpg",
|
|
},
|
|
]}
|
|
title="آراء عملائنا"
|
|
description="الثقة هي ما نبنيه مع عملائنا."
|
|
/>
|
|
</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,
|
|
},
|
|
{
|
|
name: "phone",
|
|
type: "tel",
|
|
placeholder: "رقم الهاتف",
|
|
required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message",
|
|
placeholder: "اكتب رسالتك هنا",
|
|
rows: 4,
|
|
required: true,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/modern-office-desk-composition-with-technological-device_23-2147915819.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="خيري للبناء"
|
|
leftLink={{
|
|
text: "سياسة الخصوصية",
|
|
href: "#",
|
|
}}
|
|
rightLink={{
|
|
text: "حقوق النشر © 2024",
|
|
href: "#",
|
|
}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|