Merge version_4 into main #6
203
src/app/page.tsx
203
src/app/page.tsx
@@ -2,6 +2,9 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { useEffect, useRef } from "react";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
@@ -13,7 +16,29 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import { Clock, Smile, TrendingUp, Zap, Smartphone, Rocket, Shield, BarChart, Headphones } from "lucide-react";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
export default function LandingPage() {
|
||||
const sectionsRef = useRef<HTMLDivElement[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
sectionsRef.current.forEach((section) => {
|
||||
gsap.fromTo(section,
|
||||
{ opacity: 0, y: 50, scale: 0.95 },
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
duration: 1,
|
||||
ease: "power2.out", scrollTrigger: {
|
||||
trigger: section,
|
||||
start: "top 85%", end: "top 30%", scrub: true,
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
@@ -28,178 +53,99 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<div id="nav" data-section="nav" ref={(el) => { if (el) sectionsRef.current[0] = el; }}>
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "#hero"},
|
||||
{
|
||||
name: "Products", id: "#products"},
|
||||
{
|
||||
name: "Why Us", id: "#why"},
|
||||
{
|
||||
name: "About", id: "#about"},
|
||||
{
|
||||
name: "Contact", id: "#contact"},
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "Products", id: "#products" },
|
||||
{ name: "Why Us", id: "#why" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Cortex Studio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<div id="hero" data-section="hero" ref={(el) => { if (el) sectionsRef.current[1] = el; }}>
|
||||
<HeroOverlayTestimonial
|
||||
title="عقول رقمية لأعمالك"
|
||||
description="حلول ذكية للمطاعم، الكافيهات، السوبر ماركت، والمصانع... مدعومة بأحدث تقنيات الذكاء الاصطناعي والواقع الافتراضي."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Ahmed K.", handle: "@Cortex", testimonial: "تحول رقمي فائق الذكاء.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-casual-guy-posing-studio_176420-28907.jpg?_wi=1"},
|
||||
{
|
||||
name: "Sara M.", handle: "@Cortex", testimonial: "أتمتة المطعم بالكامل.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-amused-enthusiastic-good-looking-malaysian-woman-smiling-feeling-positive_176420-44079.jpg?_wi=1"},
|
||||
{
|
||||
name: "Omar F.", handle: "@Cortex", testimonial: "أفضل شريك تقني.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-guy-with-african-hairstyle-dark-skin-wearing-elegant-white-shirt_273609-14032.jpg?_wi=1"},
|
||||
{
|
||||
name: "Layla Z.", handle: "@Cortex", testimonial: "تحليلات دقيقة جداً.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-male-youngster-with-curly-hair_176532-8174.jpg?_wi=1"},
|
||||
{
|
||||
name: "Khalid H.", handle: "@Cortex", testimonial: "خدمة عملاء احترافية.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-positive-glad-man-has-broad-smile-rejoices-promotion-work_273609-16600.jpg"},
|
||||
{ name: "Ahmed K.", handle: "@Cortex", testimonial: "تحول رقمي فائق الذكاء.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-casual-guy-posing-studio_176420-28907.jpg?_wi=1" },
|
||||
{ name: "Sara M.", handle: "@Cortex", testimonial: "أتمتة المطعم بالكامل.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-amused-enthusiastic-good-looking-malaysian-woman-smiling-feeling-positive_176420-44079.jpg?_wi=1" },
|
||||
{ name: "Omar F.", handle: "@Cortex", testimonial: "أفضل شريك تقني.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-guy-with-african-hairstyle-dark-skin-wearing-elegant-white-shirt_273609-14032.jpg?_wi=1" },
|
||||
{ name: "Layla Z.", handle: "@Cortex", testimonial: "تحليلات دقيقة جداً.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-male-youngster-with-curly-hair_176532-8174.jpg?_wi=1" },
|
||||
{ name: "Khalid H.", handle: "@Cortex", testimonial: "خدمة عملاء احترافية.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cheerful-positive-glad-man-has-broad-smile-rejoices-promotion-work_273609-16600.jpg" },
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "ابدأ الآن", href: "#contact"},
|
||||
{
|
||||
text: "شاهد الحلول", href: "#products"},
|
||||
{ text: "ابدأ الآن", href: "#contact" },
|
||||
{ text: "شاهد الحلول", href: "#products" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg?_wi=1"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/serious-dark-skinned-female-teenager-with-curly-bushy-hair-looks-confidently-has-natural-beauty-calm-expression-dressed-knitted-sweater_273609-46769.jpg", alt: "person portrait"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-pretty-woman-with-natural-curly-hairstyle-smiling-positive-emotion-happy-isolated-denim-blue-shirt_285396-134.jpg", alt: "person portrait"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/handsome-hipster-with-dreads-has-pleasant-smile-has-white-teeth-happy-hear-good-news-wears-bright-clothes_273609-33580.jpg", alt: "person portrait"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-shot-friendly-good-looking-african-american-woman-transparent-glasses-brown-t-shirt-smiling-with-joyful-pleasant-smile-being-satisfied-with-how-things-going-gray-wall_176420-23315.jpg", alt: "person portrait"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-african-guy-smiling-student-confident-his-future-career-head-hunter-dream-standing-white-wall_176420-12537.jpg", alt: "person portrait"},
|
||||
{ src: "http://img.b2bpic.net/free-photo/serious-dark-skinned-female-teenager-with-curly-bushy-hair-looks-confidently-has-natural-beauty-calm-expression-dressed-knitted-sweater_273609-46769.jpg", alt: "person portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-pretty-woman-with-natural-curly-hairstyle-smiling-positive-emotion-happy-isolated-denim-blue-shirt_285396-134.jpg", alt: "person portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/handsome-hipster-with-dreads-has-pleasant-smile-has-white-teeth-happy-hear-good-news-wears-bright-clothes_273609-33580.jpg", alt: "person portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-shot-friendly-good-looking-african-american-woman-transparent-glasses-brown-t-shirt-smiling-with-joyful-pleasant-smile-being-satisfied-with-how-things-going-gray-wall_176420-23315.jpg", alt: "person portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-african-guy-smiling-student-confident-his-future-career-head-hunter-dream-standing-white-wall_176420-12537.jpg", alt: "person portrait" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<div id="about" data-section="about" ref={(el) => { if (el) sectionsRef.current[2] = el; }}>
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="قصة Cortex Studio"
|
||||
description="نحن نبني المستقبل الرقمي عبر دمج الذكاء الاصطناعي في صميم عملياتك اليومية لزيادة كفاءة الربح والنمو المستدام."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "حلول مخصصة", description: "برمجيات مصممة خصيصاً لاحتياجاتك"},
|
||||
{
|
||||
title: "زيادة الأرباح", description: "متوسط نمو مبيعات يصل لـ 15%"},
|
||||
{
|
||||
title: "دعم فني", description: "Zero-downtime support ensuring your business never misses an order"},
|
||||
{ title: "حلول مخصصة", description: "برمجيات مصممة خصيصاً لاحتياجاتك" },
|
||||
{ title: "زيادة الأرباح", description: "متوسط نمو مبيعات يصل لـ 15%" },
|
||||
{ title: "دعم فني", description: "Zero-downtime support ensuring your business never misses an order" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/business-company-concept_1194-617827.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<div id="products" data-section="products" ref={(el) => { if (el) sectionsRef.current[3] = el; }}>
|
||||
<ProductCardThree
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "CaféFlow ☕", price: "AI-Powered", imageSrc: "http://img.b2bpic.net/free-photo/tasty-coffee-cups-with-foam_23-2149514287.jpg"},
|
||||
{
|
||||
id: "2", name: "DineSmart 🍽️", price: "Efficiency", imageSrc: "http://img.b2bpic.net/free-photo/3d-character-emerging-from-smartphone_23-2151336547.jpg"},
|
||||
{
|
||||
id: "3", name: "MarketMate 🛒", price: "Inventory", imageSrc: "http://img.b2bpic.net/free-photo/man-woman-shopping-grocery-store-while-wearing-medical-masks_23-2149483153.jpg"},
|
||||
{
|
||||
id: "4", name: "FactorMind 🏭", price: "Industrial", imageSrc: "http://img.b2bpic.net/free-photo/industry-40-engineer-upgrading-robotic-automation-systems_482257-126783.jpg"},
|
||||
{
|
||||
id: "5", name: "Assistant AI 🤖", price: "24/7 Support", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-cyborg-with-robotic-arm-stands-illuminated-night-generated-by-ai_188544-32736.jpg"},
|
||||
{
|
||||
id: "6", name: "WebXR Lab 🥽", price: "Virtual Reality", imageSrc: "http://img.b2bpic.net/free-photo/young-man-vr-headset_23-2147771043.jpg"},
|
||||
{ id: "1", name: "CaféFlow ☕", price: "AI-Powered", imageSrc: "http://img.b2bpic.net/free-photo/tasty-coffee-cups-with-foam_23-2149514287.jpg" },
|
||||
{ id: "2", name: "DineSmart 🍽️", price: "Efficiency", imageSrc: "http://img.b2bpic.net/free-photo/3d-character-emerging-from-smartphone_23-2151336547.jpg" },
|
||||
{ id: "3", name: "MarketMate 🛒", price: "Inventory", imageSrc: "http://img.b2bpic.net/free-photo/man-woman-shopping-grocery-store-while-wearing-medical-masks_23-2149483153.jpg" },
|
||||
{ id: "4", name: "FactorMind 🏭", price: "Industrial", imageSrc: "http://img.b2bpic.net/free-photo/industry-40-engineer-upgrading-robotic-automation-systems_482257-126783.jpg" },
|
||||
{ id: "5", name: "Assistant AI 🤖", price: "24/7 Support", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-cyborg-with-robotic-arm-stands-illuminated-night-generated-by-ai_188544-32736.jpg" },
|
||||
{ id: "6", name: "WebXR Lab 🥽", price: "Virtual Reality", imageSrc: "http://img.b2bpic.net/free-photo/young-man-vr-headset_23-2147771043.jpg" },
|
||||
]}
|
||||
title="منتجاتنا الذكية"
|
||||
description="استكشف مجموعة أدواتنا المعتمدة على الذكاء الاصطناعي"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why" data-section="why">
|
||||
<div id="why" data-section="why" ref={(el) => { if (el) sectionsRef.current[4] = el; }}>
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "ذكاء اصطناعي", description: "نماذج حقيقية مطورة خصيصاً", buttonIcon: Zap,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/robotic-arm-interacting-with-logistics-data-interface_23-2152005499.jpg", imageAlt: "Robotic arm interacting with logistics data interface"},
|
||||
{
|
||||
title: "Multi-Device", description: "تجربة متوافقة مع كل الأجهزة", buttonIcon: Smartphone,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg?_wi=2", imageAlt: "Robotic arm interacting with logistics data interface"},
|
||||
{
|
||||
title: "أداء عالي", description: "سرعة استجابة فائقة", buttonIcon: Rocket,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-casual-guy-posing-studio_176420-28907.jpg?_wi=2", imageAlt: "Robotic arm interacting with logistics data interface"},
|
||||
{
|
||||
title: "أمان مشفر", description: "حماية سحابية كاملة", buttonIcon: Shield,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-amused-enthusiastic-good-looking-malaysian-woman-smiling-feeling-positive_176420-44079.jpg?_wi=2", imageAlt: "Robotic arm interacting with logistics data interface"},
|
||||
{
|
||||
title: "تحليلات فورية", description: "بيانات لحظية لاتخاذ القرار", buttonIcon: BarChart,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-guy-with-african-hairstyle-dark-skin-wearing-elegant-white-shirt_273609-14032.jpg?_wi=2", imageAlt: "Robotic arm interacting with logistics data interface"},
|
||||
{
|
||||
title: "دعم مستمر", description: "فريقنا معك دائماً", buttonIcon: Headphones,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-male-youngster-with-curly-hair_176532-8174.jpg?_wi=2", imageAlt: "Robotic arm interacting with logistics data interface"},
|
||||
{ title: "ذكاء اصطناعي", description: "نماذج حقيقية مطورة خصيصاً", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/robotic-arm-interacting-with-logistics-data-interface_23-2152005499.jpg", imageAlt: "Robotic arm interacting with logistics data interface" },
|
||||
{ title: "Multi-Device", description: "تجربة متوافقة مع كل الأجهزة", buttonIcon: Smartphone, imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg?_wi=2", imageAlt: "Robotic arm interacting with logistics data interface" },
|
||||
{ title: "أداء عالي", description: "سرعة استجابة فائقة", buttonIcon: Rocket, imageSrc: "http://img.b2bpic.net/free-photo/portrait-casual-guy-posing-studio_176420-28907.jpg?_wi=2", imageAlt: "Robotic arm interacting with logistics data interface" },
|
||||
{ title: "أمان مشفر", description: "حماية سحابية كاملة", buttonIcon: Shield, imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-amused-enthusiastic-good-looking-malaysian-woman-smiling-feeling-positive_176420-44079.jpg?_wi=2", imageAlt: "Robotic arm interacting with logistics data interface" },
|
||||
]}
|
||||
title="لماذا تختارنا؟"
|
||||
description="نجمع بين القوة التقنية والتجربة السهلة"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="stats" data-section="stats">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "99%", title: "رضا العملاء", description: "بناءً على تقييمات شركائنا", icon: Smile,
|
||||
},
|
||||
{
|
||||
id: "m2", value: "15%", title: "نمو المبيعات", description: "متوسط تحسن أداء المطاعم", icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
id: "m3", value: "24/7", title: "الدعم التقني", description: "جاهزون للمساعدة دائماً", icon: Clock,
|
||||
},
|
||||
]}
|
||||
title="أرقام تدعو للثقة"
|
||||
description="نحن نفخر بما حققناه مع عملائنا"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"InnovateTech", "FastDine", "GlobalMart", "PrimeFactory", "SmartShop", "FutureLogix", "NextGen"]}
|
||||
title="شركاء النجاح"
|
||||
description="أكبر الشركات تثق في حلولنا التقنية"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<div id="contact" data-section="contact" ref={(el) => { if (el) sectionsRef.current[5] = el; }}>
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "animated-grid"}}
|
||||
background={{ variant: "animated-grid" }}
|
||||
tag="تواصل معنا"
|
||||
title="جاهز للانطلاقة؟"
|
||||
description="فريقنا بانتظار استفسارك لبدء مشروعك الذكي"
|
||||
@@ -207,31 +153,6 @@ export default function LandingPage() {
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "المنتجات", items: [
|
||||
{
|
||||
label: "CaféFlow", href: "#"},
|
||||
{
|
||||
label: "DineSmart", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "روابط سريعة", items: [
|
||||
{
|
||||
label: "حولنا", href: "#"},
|
||||
{
|
||||
label: "تواصل", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Cortex Studio"
|
||||
bottomRightText="جميع الحقوق محفوظة"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user