183 lines
8.9 KiB
TypeScript
183 lines
8.9 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Building, Building2, Settings, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumLarge"
|
|
background="grid"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{ name: "الرئيسية", id: "home" },
|
|
{ name: "من نحن", id: "about" },
|
|
{ name: "خدماتنا", id: "services" },
|
|
{ name: "مشاريعنا", id: "projects" },
|
|
{ name: "اتصل بنا", id: "contact" },
|
|
]}
|
|
brandName="شركة الأساس العريض للمقاولات"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroCentered
|
|
background={{ variant: "gradient-bars" }}
|
|
title="نبني المستقبل.. لأساسٍ عريض"
|
|
description="شريكك الرائد في المقاولات والبنية التحتية في المملكة، نصنع التميز منذ 2004 بدقة متناهية وطموح يعانق الرؤية 2030."
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8QPuiHapMltQpEaCiadHhovcl/aerial-view-of-modern-saudi-infrastructu-1774581512617-772fa861.png", alt: "construction"
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "استعرض مشاريعنا", href: "#projects"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={true}
|
|
title="منذ 2004.. نصنع التغيير"
|
|
description={[
|
|
"تأسست شركة الأساس العريض لتكون علامة فارقة في قطاع المقاولات السعودي.", "أكثر من 2200 مشروع حكومي ناجح بامتياز.", "فخورون بحصولنا على جائزة الشريك الأول من الشركة السعودية للكهرباء."
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "إنشاءات عامة", description: "تنفيذ المشاريع الإنشائية بكفاءة هندسية عالية.", bentoComponent: "reveal-icon", icon: Building
|
|
},
|
|
{
|
|
title: "البنية التحتية", description: "تطوير الشبكات والأنظمة التحتية الأساسية.", bentoComponent: "reveal-icon", icon: Zap
|
|
},
|
|
{
|
|
title: "الكهروميكانيكا", description: "حلول كهربائية وميكانيكية متقدمة.", bentoComponent: "reveal-icon", icon: Settings
|
|
},
|
|
{
|
|
title: "أعمال الطرق", description: "بناء وتعبيد الطرق وفقاً لأعلى المقاييس.", bentoComponent: "reveal-icon", icon: Building2
|
|
}
|
|
]}
|
|
title="حلول متكاملة للبنية التحتية"
|
|
description="نقدم نطاقاً واسعاً من الخدمات التخصصية بأعلى معايير الجودة العالمية."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTen
|
|
animationType="slide-up"
|
|
textboxLayout="spread"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "1", title: "قيمة المشاريع", subtitle: "3.5+ مليار ريال", category: "النمو", value: "3.5B"
|
|
},
|
|
{
|
|
id: "2", title: "المشاريع الحكومية", subtitle: "2,200+ مشروع", category: "التميز", value: "2200"
|
|
},
|
|
{
|
|
id: "3", title: "فريق العمل", subtitle: "1,200+ موظف", category: "الخبرة", value: "1200"
|
|
}
|
|
]}
|
|
title="أرقام تتحدث عن إنجازاتنا"
|
|
description="ثقة عملائنا هي الوقود الذي يدفعنا للمزيد من النجاح."
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1", name: "مشروع العقد الموحد", price: "400M SAR", variant: "Riyadh", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8QPuiHapMltQpEaCiadHhovcl/aerial-view-of-modern-saudi-infrastructu-1774581512617-772fa861.png"
|
|
},
|
|
{
|
|
id: "p2", name: "المسار الرياضي", price: "17M SAR", variant: "Riyadh", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8QPuiHapMltQpEaCiadHhovcl/aerial-view-of-modern-saudi-infrastructu-1774581512617-772fa861.png"
|
|
},
|
|
{
|
|
id: "p3", name: "مشروع الجنادرية", price: "12M SAR", variant: "Riyadh", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8QPuiHapMltQpEaCiadHhovcl/aerial-view-of-modern-saudi-infrastructu-1774581512617-772fa861.png"
|
|
}
|
|
]}
|
|
title="معرض مشاريعنا"
|
|
description="استكشف قائمة بمشاريعنا الكبرى التي ساهمت في نهضة الوطن."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={true}
|
|
background={{ variant: "radial-gradient" }}
|
|
text="هل لديك مشروع طموح؟ نحن هنا لنجعل المستحيل واقعاً."
|
|
buttons={[
|
|
{
|
|
text: "تواصل معنا الآن", href: "mailto:info@asas.sa"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="الأساس العريض"
|
|
columns={[
|
|
{
|
|
title: "خدماتنا", items: [
|
|
{
|
|
label: "البنية التحتية", href: "#services"
|
|
},
|
|
{
|
|
label: "المقاولات", href: "#services"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "عن الشركة", items: [
|
|
{
|
|
label: "رؤيتنا", href: "#about"
|
|
},
|
|
{
|
|
label: "الشهادات", href: "#iso"
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 جميع الحقوق محفوظة لشركة الأساس العريض للمقاولات"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|