Files
0046e4fc-9dab-45c0-a050-e19…/src/app/page.tsx
2026-03-27 03:18:38 +00:00

248 lines
8.0 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"
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?_wi=1",
},
{
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?_wi=2",
},
{
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?_wi=3",
},
]}
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>
);
}