bender/cf122b68-9316-4ba5-9af9-701715ea9803
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-11 14:26:19 +00:00
parent 3457afdc83
commit f221563cfd
1 changed files with 149 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

525
src/app/page.tsx
View File

@@ -2,17 +2,17 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne'; import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen'; import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Award, Code, Lightbulb, PenTool, Rocket, TrendingUp } from "lucide-react"; import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Rocket, Lightbulb, Award, Code, PenTool, TrendingUp } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -29,382 +29,155 @@ export default function LandingPage() {
headingFontWeight="light" headingFontWeight="light"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay <NavbarLayoutFloatingOverlay
navItems={[ navItems={[
{ { name: "الرئيسية", id: "#hero" },
name: "الرئيسية", { name: "عني", id: "#about" },
id: "#hero", { name: "الإنجازات", id: "#achievements" },
}, { name: "تواصل", id: "#contact" }
{ ]}
name: "عني", brandName="أناس المعتصيم"
id: "#about", />
}, </div>
{
name: "الإنجازات",
id: "#achievements",
},
{
name: "تواصل",
id: "#contact",
},
]}
brandName="أناس المعتصيم"
/>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroSplitKpi <HeroSplitKpi
background={{ background={{ variant: "sparkles-gradient" }}
variant: "sparkles-gradient", title="أناس المعتصيم"
}} description="رائد أعمال رقمي • صانع محتوى • مؤسس عالم النجاح"
title="أناس المعتصيم" kpis={[
description="رائد أعمال رقمي • صانع محتوى • مؤسس عالم النجاح" { value: "100K+", label: "متابع" },
kpis={[ { value: "50+", label: "مشروع" },
{ { value: "10k+", label: "طالب" }
value: "100K+", ]}
label: "متابع", enableKpiAnimation={true}
}, buttons={[{ text: "ابدأ الرحلة", href: "#contact" }]}
{ imageSrc="http://img.b2bpic.net/free-photo/girl-posing-with-board_1321-1338.jpg"
value: "50+", mediaAnimation="slide-up"
label: "مشروع", avatars={[
}, { src: "http://img.b2bpic.net/free-photo/portrait-happy-confident-young-businessman-with-arm-crossed-holding-mobile-phone-hand_23-2148096508.jpg", alt: "Client 1" },
{ { src: "http://img.b2bpic.net/free-photo/older-business-woman-working-laptop-smartphone-while-having-coffee_23-2148661240.jpg", alt: "Client 2" },
value: "10k+", { src: "http://img.b2bpic.net/free-photo/closeup-happy-senior-businessman-with-flipchart_1262-1744.jpg", alt: "Client 3" },
label: "طالب", { src: "http://img.b2bpic.net/free-photo/successful-man-pointing-camera-with-finger_1262-3118.jpg", alt: "Client 4" },
}, { src: "http://img.b2bpic.net/free-photo/friendly-successful-business-woman-posing-with-arms-crossed_74855-2813.jpg", alt: "Client 5" }
]} ]}
enableKpiAnimation={true} avatarText="انضم إلى مجتمع المبدعين"
buttons={[ marqueeItems={[
{ { type: "text-icon", text: "ذكاء اصطناعي", icon: Lightbulb },
text: "ابدأ الرحلة", { type: "text-icon", text: "ريادة أعمال", icon: Rocket },
href: "#contact", { type: "text-icon", text: "صناعة محتوى", icon: PenTool },
}, { type: "text-icon", text: "تسويق رقمي", icon: TrendingUp },
]} { type: "text-icon", text: "برمجة ويب", icon: Code }
imageSrc="http://img.b2bpic.net/free-photo/girl-posing-with-board_1321-1338.jpg" ]}
mediaAnimation="slide-up" />
avatars={[ </div>
{
src: "http://img.b2bpic.net/free-photo/portrait-happy-confident-young-businessman-with-arm-crossed-holding-mobile-phone-hand_23-2148096508.jpg",
alt: "Client 1",
},
{
src: "http://img.b2bpic.net/free-photo/older-business-woman-working-laptop-smartphone-while-having-coffee_23-2148661240.jpg",
alt: "Client 2",
},
{
src: "http://img.b2bpic.net/free-photo/closeup-happy-senior-businessman-with-flipchart_1262-1744.jpg",
alt: "Client 3",
},
{
src: "http://img.b2bpic.net/free-photo/successful-man-pointing-camera-with-finger_1262-3118.jpg",
alt: "Client 4",
},
{
src: "http://img.b2bpic.net/free-photo/friendly-successful-business-woman-posing-with-arms-crossed_74855-2813.jpg",
alt: "Client 5",
},
]}
avatarText="انضم إلى مجتمع المبدعين"
marqueeItems={[
{
type: "text-icon",
text: "ذكاء اصطناعي",
icon: Lightbulb,
},
{
type: "text-icon",
text: "ريادة أعمال",
icon: Rocket,
},
{
type: "text-icon",
text: "صناعة محتوى",
icon: PenTool,
},
{
type: "text-icon",
text: "تسويق رقمي",
icon: TrendingUp,
},
{
type: "text-icon",
text: "برمجة ويب",
icon: Code,
},
]}
/>
</div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<AboutMetric <AboutMetric
useInvertedBackground={false} useInvertedBackground={false}
title="من هو أناس المعتصيم؟" title="من هو أناس المعتصيم؟"
metrics={[ metrics={[
{ { icon: Rocket, label: "الرؤية", value: "طموح عالمي" },
icon: Rocket, { icon: Lightbulb, label: "التخصص", value: "ذكاء اصطناعي" },
label: "الرؤية", { icon: Award, label: "التأثير", value: "صناعة محتوى" }
value: "طموح عالمي", ]}
}, metricsAnimation="blur-reveal"
{ />
icon: Lightbulb, </div>
label: "التخصص",
value: "ذكاء اصطناعي",
},
{
icon: Award,
label: "التأثير",
value: "صناعة محتوى",
},
]}
metricsAnimation="blur-reveal"
/>
</div>
<div id="achievements" data-section="achievements"> <div id="achievements" data-section="achievements">
<FeatureCardSixteen <FeatureCardSixteen
animationType="depth-3d" animationType="depth-3d"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
negativeCard={{ negativeCard={{ items: ["تطوير مشاريع تقنية ذكية", "تقديم استشارات استراتيجية", "بناء مجتمع تعليمي تفاعلي"] }}
items: [ positiveCard={{ items: ["تأسيس منصة عالم النجاح", "إطلاق برامج تعليمية رقمية", "دعم رواد الأعمال الناشئين"] }}
"تطوير مشاريع تقنية ذكية", title="إنجازات عالم النجاح"
"تقديم استشارات استراتيجية", description="نحن نبني جيلاً من القادة الرقميين"
"بناء مجتمع تعليمي تفاعلي", />
], </div>
}}
positiveCard={{
items: [
"تأسيس منصة عالم النجاح",
"إطلاق برامج تعليمية رقمية",
"دعم رواد الأعمال الناشئين",
],
}}
title="إنجازات عالم النجاح"
description="نحن نبني جيلاً من القادة الرقميين"
/>
</div>
<div id="skills" data-section="skills"> <div id="skills" data-section="skills">
<MetricCardSeven <MetricCardSeven
animationType="scale-rotate" animationType="scale-rotate"
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
metrics={[ metrics={[
{ { id: "s1", value: "95%", title: "الذكاء الاصطناعي", items: ["Automation", "LLMs", "Data"] },
id: "s1", { id: "s2", value: "90%", title: "صناعة المحتوى", items: ["Video", "Storytelling", "Editing"] },
value: "95%", { id: "s3", value: "85%", title: "التسويق الرقمي", items: ["SEO", "Performance", "Strategy"] },
title: "الذكاء الاصطناعي", { id: "s4", value: "80%", title: "البرمجة", items: ["Next.js", "React", "Node"] }
items: [ ]}
"Automation", title="المهارات الرقمية"
"LLMs", description="أدواتي لبناء المستقبل الرقمي"
"Data", />
], </div>
},
{
id: "s2",
value: "90%",
title: "صناعة المحتوى",
items: [
"Video",
"Storytelling",
"Editing",
],
},
{
id: "s3",
value: "85%",
title: "التسويق الرقمي",
items: [
"SEO",
"Performance",
"Strategy",
],
},
{
id: "s4",
value: "80%",
title: "البرمجة",
items: [
"Next.js",
"React",
"Node",
],
},
]}
title="المهارات الرقمية"
description="أدواتي لبناء المستقبل الرقمي"
/>
</div>
<div id="videos" data-section="videos"> <div id="videos" data-section="videos">
<BlogCardThree <BlogCardThree
animationType="slide-up" animationType="slide-up"
textboxLayout="split" textboxLayout="split"
useInvertedBackground={true} useInvertedBackground={true}
title="المكتبة المرئية" title="المكتبة المرئية"
description="شاهد أحدث الدروس والدروس المستفادة" description="شاهد أحدث الدروس والدروس المستفادة"
blogs={[ blogs={[
{ { id: "v1", category: "تقنية", title: "مستقبل الذكاء الاصطناعي", excerpt: "كيف سيغير AI حياتك المهنية؟", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-science-fiction-tunnel-corridor-with-lines-neon-blue-red-lights_181624-26525.jpg", authorName: "أناس المعتصيم", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-man-black-shirt-poses-against-dark-background-standing-studio_613910-15100.jpg", date: "2024" },
id: "v1", { id: "v2", category: "ريادة", title: "عقلية المليونير", excerpt: "اسرار نجاح المشاريع الرقمية", imageSrc: "http://img.b2bpic.net/free-photo/abstract-swirl-background_1017-2756.jpg", authorName: "أناس المعتصيم", authorAvatar: "http://img.b2bpic.net/free-photo/confident-businessman_1098-16876.jpg", date: "2024" },
category: "تقنية", { id: "v3", category: "صناعة محتوى", title: "كيف تبدأ من الصفر", excerpt: "دليل صناعة المحتوى الشامل", imageSrc: "http://img.b2bpic.net/free-photo/digital-low-poly-abstract-background-with-connecting-lines-dots_1048-6337.jpg", authorName: "أناس المعتصيم", authorAvatar: "http://img.b2bpic.net/free-photo/studio-portrait-serious-bearded-male-dressed-suit_613910-5596.jpg", date: "2024" }
title: "مستقبل الذكاء الاصطناعي", ]}
excerpt: "كيف سيغير AI حياتك المهنية؟", />
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-science-fiction-tunnel-corridor-with-lines-neon-blue-red-lights_181624-26525.jpg", </div>
authorName: "أناس المعتصيم",
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-man-black-shirt-poses-against-dark-background-standing-studio_613910-15100.jpg",
date: "2024",
},
{
id: "v2",
category: "ريادة",
title: "عقلية المليونير",
excerpt: "اسرار نجاح المشاريع الرقمية",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-swirl-background_1017-2756.jpg",
authorName: "أناس المعتصيم",
authorAvatar: "http://img.b2bpic.net/free-photo/confident-businessman_1098-16876.jpg",
date: "2024",
},
{
id: "v3",
category: "صناعة محتوى",
title: "كيف تبدأ من الصفر",
excerpt: "دليل صناعة المحتوى الشامل",
imageSrc: "http://img.b2bpic.net/free-photo/digital-low-poly-abstract-background-with-connecting-lines-dots_1048-6337.jpg",
authorName: "أناس المعتصيم",
authorAvatar: "http://img.b2bpic.net/free-photo/studio-portrait-serious-bearded-male-dressed-suit_613910-5596.jpg",
date: "2024",
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen <TestimonialCardThirteen
animationType="depth-3d" animationType="depth-3d"
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[ testimonials={[
{ { id: "1", name: "سارة أحمد", handle: "@sarah_dev", testimonial: "أناس غيّر نظرتي للعمل الحر بشكل كامل.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/business-person-planning-alternative-energies_23-2149205442.jpg" },
id: "1", { id: "2", name: "أحمد خليل", handle: "@khalil_biz", testimonial: "تجربة ملهمة في بناء المشاريع.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-with-folded-arms-looking-camera_23-2147955314.jpg" },
name: "سارة أحمد", { id: "3", name: "منى كمال", handle: "@mona_design", testimonial: "أشكر أناس على كل ما قدمه لنا.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-sitting-cozy-cafe-bar-using-laptop-computer-looking-aside_342744-945.jpg" },
handle: "@sarah_dev", { id: "4", name: "يوسف محمد", handle: "@youssef_tech", testimonial: "أفضل مدرب رقمي قابلته بحياتي.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg" },
testimonial: "أناس غيّر نظرتي للعمل الحر بشكل كامل.", { id: "5", name: "نورة خالد", handle: "@nora_growth", testimonial: "عالم النجاح هو المنصة التي كنت أحتاجها.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/african-american-curly-businesswoman-standing-with-folded-hands-portrait-successful-confident-young-pretty-female-office-employer-suit-posing-work-business-company-management-concept_74855-6735.jpg" }
rating: 5, ]}
imageSrc: "http://img.b2bpic.net/free-photo/business-person-planning-alternative-energies_23-2149205442.jpg", showRating={true}
}, title="ماذا يقول شركاؤنا"
{ description="شهادات المبدعين الذين ساعدناهم"
id: "2", />
name: "أحمد خليل", </div>
handle: "@khalil_biz",
testimonial: "تجربة ملهمة في بناء المشاريع.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-with-folded-arms-looking-camera_23-2147955314.jpg",
},
{
id: "3",
name: "منى كمال",
handle: "@mona_design",
testimonial: "أشكر أناس على كل ما قدمه لنا.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-sitting-cozy-cafe-bar-using-laptop-computer-looking-aside_342744-945.jpg",
},
{
id: "4",
name: "يوسف محمد",
handle: "@youssef_tech",
testimonial: "أفضل مدرب رقمي قابلته بحياتي.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",
},
{
id: "5",
name: "نورة خالد",
handle: "@nora_growth",
testimonial: "عالم النجاح هو المنصة التي كنت أحتاجها.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/african-american-curly-businesswoman-standing-with-folded-hands-portrait-successful-confident-young-pretty-female-office-employer-suit-posing-work-business-company-management-concept_74855-6735.jpg",
},
]}
showRating={true}
title="ماذا يقول شركاؤنا"
description="شهادات المبدعين الذين ساعدناهم"
/>
</div>
<div id="social-proof" data-section="social-proof"> <div id="social-proof" data-section="social-proof">
<SocialProofOne <SocialProofOne
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
names={[ names={["Google", "Microsoft", "Meta", "Amazon", "Twitter", "LinkedIn", "Apple"]}
"Google", title="نتواجد في"
"Microsoft", description="منصات عالمية تتبنى رؤيتنا"
"Meta", />
"Amazon", </div>
"Twitter",
"LinkedIn",
"Apple",
]}
title="نتواجد في"
description="منصات عالمية تتبنى رؤيتنا"
/>
</div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCenter <ContactCenter
useInvertedBackground={false} useInvertedBackground={false}
background={{ background={{ variant: "rotated-rays-animated" }}
variant: "rotated-rays-animated", tag="تواصل معي"
}} title="لنبدأ رحلتك نحو القمة"
tag="تواصل معي" description="أرسل بريدك لنبقيك على اطلاع بأحدث الإنجازات والدروس"
title="لنبدأ رحلتك نحو القمة" />
description="أرسل بريدك لنبقيك على اطلاع بأحدث الإنجازات والدروس" </div>
/>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseReveal <FooterBaseReveal
logoText="أناس المعتصيم" logoText="أناس المعتصيم"
columns={[ columns={[
{ { title: "الشركة", items: [{ label: "عن أناس", href: "#about" }, { label: "المشاريع", href: "#" }] },
title: "الشركة", { title: "الموارد", items: [{ label: "المدونة", href: "#" }, { label: "الدعم", href: "#" }] },
items: [ { title: "القانونية", items: [{ label: "سياسة الخصوصية", href: "#" }] }
{ ]}
label: "عن أناس", />
href: "#about", </div>
},
{
label: "المشاريع",
href: "#",
},
],
},
{
title: "الموارد",
items: [
{
label: "المدونة",
href: "#",
},
{
label: "الدعم",
href: "#",
},
],
},
{
title: "القانونية",
items: [
{
label: "سياسة الخصوصية",
href: "#",
},
],
},
]}
/>
</div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }