Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 27891cd069 | |||
| 570b8466c0 | |||
| e9ef4ca73e |
@@ -25,7 +25,7 @@ export default function RootLayout({
|
|||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="ar" dir="rtl" suppressHydrationWarning>
|
||||||
<ServiceWrapper>
|
<ServiceWrapper>
|
||||||
<body className={`${lato.variable} antialiased`}>
|
<body className={`${lato.variable} antialiased`}>
|
||||||
<Tag />
|
<Tag />
|
||||||
@@ -39,4 +39,4 @@ export default function RootLayout({
|
|||||||
</ServiceWrapper>
|
</ServiceWrapper>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
272
src/app/page.tsx
272
src/app/page.tsx
@@ -10,9 +10,59 @@ import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|||||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||||
import ContactText from '@/components/sections/contact/ContactText';
|
import ContactText from '@/components/sections/contact/ContactText';
|
||||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||||
import { BarChart3, Briefcase, CheckCircle, Code, Download, Eye, Instagram, LifeBuoy, Linkedin, Mail, MessageSquare, Palette, Phone, PieChart, RefreshCw, Rocket, Shield, ShoppingCart, Smile, Sparkles, Star, TrendingUp, Twitter, Users, Zap } from 'lucide-react';
|
import { BarChart3, Briefcase, CheckCircle, Code, Download, Eye, Instagram, LifeBuoy, Linkedin, Mail, MessageSquare, Palette, Phone, PieChart, RefreshCw, Rocket, Shield, ShoppingCart, Smile, Sparkles, Star, TrendingUp, Twitter, Users, Zap, Calendar } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
|
const [selectedDate, setSelectedDate] = useState<string | null>(null);
|
||||||
|
const [selectedTime, setSelectedTime] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Generate available dates (next 30 days)
|
||||||
|
const generateAvailableDates = () => {
|
||||||
|
const dates = [];
|
||||||
|
const today = new Date();
|
||||||
|
for (let i = 1; i <= 30; i++) {
|
||||||
|
const date = new Date(today);
|
||||||
|
date.setDate(date.getDate() + i);
|
||||||
|
dates.push(date);
|
||||||
|
}
|
||||||
|
return dates;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Time slots for booking
|
||||||
|
const timeSlots = [
|
||||||
|
"09:00", "10:00", "11:00", "12:00", "14:00", "15:00", "16:00", "17:00"
|
||||||
|
];
|
||||||
|
|
||||||
|
const formatDate = (date: Date) => {
|
||||||
|
return date.toISOString().split('T')[0];
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDateDisplay = (dateString: string) => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString('ar-SA', { weekday: 'long', month: 'long', day: 'numeric' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDateSelect = (date: Date) => {
|
||||||
|
setSelectedDate(formatDate(date));
|
||||||
|
setSelectedTime(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTimeSelect = (time: string) => {
|
||||||
|
setSelectedTime(time);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBooking = () => {
|
||||||
|
if (selectedDate && selectedTime) {
|
||||||
|
const bookingUrl = `https://calendly.com/example?date=${selectedDate}&time=${selectedTime}`;
|
||||||
|
window.open(bookingUrl, '_blank');
|
||||||
|
setSelectedDate(null);
|
||||||
|
setSelectedTime(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const availableDates = generateAvailableDates();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="icon-arrow"
|
defaultButtonVariant="icon-arrow"
|
||||||
@@ -36,7 +86,7 @@ export default function LandingPage() {
|
|||||||
{ name: "سيرنا", id: "process" },
|
{ name: "سيرنا", id: "process" },
|
||||||
{ name: "التواصل", id: "contact" }
|
{ name: "التواصل", id: "contact" }
|
||||||
]}
|
]}
|
||||||
button={{ text: "احجز استشارة", href: "#contact" }}
|
button={{ text: "احجز استشارة", href: "#booking" }}
|
||||||
animateOnLoad={true}
|
animateOnLoad={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -49,7 +99,7 @@ export default function LandingPage() {
|
|||||||
tagIcon={Sparkles}
|
tagIcon={Sparkles}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
buttons={[
|
buttons={[
|
||||||
{ text: "احجز استشارة مجانية", href: "#contact" },
|
{ text: "احجز استشارة مجانية", href: "#booking" },
|
||||||
{ text: "عرض أعمالنا", href: "#projects" }
|
{ text: "عرض أعمالنا", href: "#projects" }
|
||||||
]}
|
]}
|
||||||
buttonAnimation="slide-up"
|
buttonAnimation="slide-up"
|
||||||
@@ -72,7 +122,7 @@ export default function LandingPage() {
|
|||||||
tag="من نحن"
|
tag="من نحن"
|
||||||
tagIcon={Zap}
|
tagIcon={Zap}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
title="فريق متخصص في تطوير الويب والحلول الرقمية المتقدمة"
|
title="فريق من مصممي مواقع البيع المتخصصين للشركات الصغيرة والمتوسطة"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
buttons={[
|
buttons={[
|
||||||
{ text: "اعرف أكثر عن خدماتنا", href: "#services" }
|
{ text: "اعرف أكثر عن خدماتنا", href: "#services" }
|
||||||
@@ -81,6 +131,60 @@ export default function LandingPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
|
||||||
|
gap: '1.5rem',
|
||||||
|
padding: '3rem 1.5rem',
|
||||||
|
maxWidth: '1200px',
|
||||||
|
margin: '0 auto'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
padding: '1.5rem',
|
||||||
|
borderRadius: '0.75rem',
|
||||||
|
background: 'var(--card)',
|
||||||
|
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
<Briefcase style={{ width: '2rem', height: '2rem', margin: '0 auto 1rem', color: 'var(--primary-cta)' }} />
|
||||||
|
<h3 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>150+</h3>
|
||||||
|
<p style={{ color: 'var(--foreground)', opacity: 0.7 }}>مشروع مكتمل بنجاح</p>
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
padding: '1.5rem',
|
||||||
|
borderRadius: '0.75rem',
|
||||||
|
background: 'var(--card)',
|
||||||
|
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
<Users style={{ width: '2rem', height: '2rem', margin: '0 auto 1rem', color: 'var(--primary-cta)' }} />
|
||||||
|
<h3 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>45</h3>
|
||||||
|
<p style={{ color: 'var(--foreground)', opacity: 0.7 }}>عميل دائم وموثوق</p>
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
padding: '1.5rem',
|
||||||
|
borderRadius: '0.75rem',
|
||||||
|
background: 'var(--card)',
|
||||||
|
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
<Star style={{ width: '2rem', height: '2rem', margin: '0 auto 1rem', color: 'var(--primary-cta)' }} />
|
||||||
|
<h3 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>95%</h3>
|
||||||
|
<p style={{ color: 'var(--foreground)', opacity: 0.7 }}>معدل رضا العملاء</p>
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
padding: '1.5rem',
|
||||||
|
borderRadius: '0.75rem',
|
||||||
|
background: 'var(--card)',
|
||||||
|
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
<TrendingUp style={{ width: '2rem', height: '2rem', margin: '0 auto 1rem', color: 'var(--primary-cta)' }} />
|
||||||
|
<h3 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>250%</h3>
|
||||||
|
<p style={{ color: 'var(--foreground)', opacity: 0.7 }}>متوسط نمو المبيعات</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="services" data-section="services">
|
<div id="services" data-section="services">
|
||||||
<FeatureCardNineteen
|
<FeatureCardNineteen
|
||||||
title="الخدمات التي نقدمها"
|
title="الخدمات التي نقدمها"
|
||||||
@@ -152,23 +256,6 @@ export default function LandingPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="metrics" data-section="metrics">
|
|
||||||
<MetricCardOne
|
|
||||||
title="إنجازاتنا بالأرقام"
|
|
||||||
description="نحن فخورون بنتائجنا وتأثيرنا الحقيقي على أعمال عملائنا"
|
|
||||||
textboxLayout="default"
|
|
||||||
animationType="scale-rotate"
|
|
||||||
useInvertedBackground={true}
|
|
||||||
gridVariant="bento-grid"
|
|
||||||
metrics={[
|
|
||||||
{ id: "metric-1", value: "150+", title: "مشروع مكتمل", description: "مشاريع متنوعة بمختلف المجالات والأحجام", icon: Briefcase },
|
|
||||||
{ id: "metric-2", value: "45", title: "عميل دائم", description: "شركات موثوقة تعمل معنا على المدى الطويل", icon: Users },
|
|
||||||
{ id: "metric-3", value: "95%", title: "رضا العملاء", description: "معدل رضا عالي جداً من عملائنا الكرام", icon: Star },
|
|
||||||
{ id: "metric-4", value: "250%", title: "متوسط نمو المبيعات", description: "بمعدل متوسط لعملائنا بعد تطوير مواقعهم", icon: TrendingUp }
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardFive
|
<TestimonialCardFive
|
||||||
title="آراء عملائنا"
|
title="آراء عملائنا"
|
||||||
@@ -265,13 +352,150 @@ export default function LandingPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="booking" data-section="booking" style={{
|
||||||
|
padding: '3rem 1.5rem',
|
||||||
|
maxWidth: '1200px',
|
||||||
|
margin: '0 auto'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
background: 'var(--card)',
|
||||||
|
borderRadius: '1rem',
|
||||||
|
padding: '2rem',
|
||||||
|
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||||
|
}}>
|
||||||
|
<h2 style={{
|
||||||
|
fontSize: '2rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: '1rem',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '0.5rem'
|
||||||
|
}}>
|
||||||
|
<Calendar style={{ width: '1.5rem', height: '1.5rem', color: 'var(--primary-cta)' }} />
|
||||||
|
احجز استشارة مجانية
|
||||||
|
</h2>
|
||||||
|
<p style={{
|
||||||
|
color: 'var(--foreground)',
|
||||||
|
opacity: 0.7,
|
||||||
|
marginBottom: '2rem'
|
||||||
|
}}>
|
||||||
|
اختر يوماً ووقتاً يناسبك لمناقشة مشروعك والحصول على استشارة احترافية من فريقنا
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div style={{ marginBottom: '2rem' }}>
|
||||||
|
<h3 style={{ marginBottom: '1rem', fontSize: '1.1rem', fontWeight: '600' }}>اختر التاريخ:</h3>
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
|
||||||
|
gap: '0.75rem',
|
||||||
|
maxHeight: '300px',
|
||||||
|
overflowY: 'auto',
|
||||||
|
paddingRight: '0.5rem'
|
||||||
|
}}>
|
||||||
|
{availableDates.map((date) => {
|
||||||
|
const dateStr = formatDate(date);
|
||||||
|
const isSelected = selectedDate === dateStr;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={dateStr}
|
||||||
|
onClick={() => handleDateSelect(date)}
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
border: isSelected ? '2px solid var(--primary-cta)' : '1px solid rgba(255, 255, 255, 0.2)',
|
||||||
|
background: isSelected ? 'var(--primary-cta)' : 'transparent',
|
||||||
|
color: isSelected ? '#000' : 'var(--foreground)',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
fontSize: '0.875rem',
|
||||||
|
fontWeight: isSelected ? '600' : '400'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{date.getDate()}/{date.getMonth() + 1}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedDate && (
|
||||||
|
<div style={{ marginBottom: '2rem' }}>
|
||||||
|
<h3 style={{ marginBottom: '1rem', fontSize: '1.1rem', fontWeight: '600' }}>
|
||||||
|
اختر الوقت من {formatDateDisplay(selectedDate)}:
|
||||||
|
</h3>
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
|
||||||
|
gap: '0.75rem'
|
||||||
|
}}>
|
||||||
|
{timeSlots.map((time) => {
|
||||||
|
const isSelected = selectedTime === time;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={time}
|
||||||
|
onClick={() => handleTimeSelect(time)}
|
||||||
|
style={{
|
||||||
|
padding: '0.75rem',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
border: isSelected ? '2px solid var(--primary-cta)' : '1px solid rgba(255, 255, 255, 0.2)',
|
||||||
|
background: isSelected ? 'var(--primary-cta)' : 'transparent',
|
||||||
|
color: isSelected ? '#000' : 'var(--foreground)',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
fontSize: '0.875rem',
|
||||||
|
fontWeight: isSelected ? '600' : '400'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{time}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selectedDate && selectedTime && (
|
||||||
|
<div style={{
|
||||||
|
padding: '1rem',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
background: 'rgba(255, 255, 255, 0.05)',
|
||||||
|
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||||
|
marginBottom: '1.5rem'
|
||||||
|
}}>
|
||||||
|
<p style={{ marginBottom: '0.5rem' }}>✓ تم اختيار الوقت:</p>
|
||||||
|
<p style={{ fontSize: '1.1rem', fontWeight: '600' }}>يوم {formatDateDisplay(selectedDate)} - الساعة {selectedTime}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleBooking}
|
||||||
|
disabled={!selectedDate || !selectedTime}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '1rem',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
background: selectedDate && selectedTime ? 'var(--primary-cta)' : 'rgba(255, 255, 255, 0.1)',
|
||||||
|
color: selectedDate && selectedTime ? '#000' : 'var(--foreground)',
|
||||||
|
border: 'none',
|
||||||
|
cursor: selectedDate && selectedTime ? 'pointer' : 'not-allowed',
|
||||||
|
fontSize: '1rem',
|
||||||
|
fontWeight: '600',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
opacity: selectedDate && selectedTime ? 1 : 0.5
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
تأكيد الحجز
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactText
|
<ContactText
|
||||||
text="هل أنت مستعد لنقل عملك إلى المستوى التالي؟ احجز استشارة مجانية معنا وسننقاش رؤيتك وأهدافك بالتفصيل."
|
text="هل لديك أي أسئلة أخرى؟ تواصل معنا مباشرة عبر البريد الإلكتروني أو وسائل التواصل الاجتماعية"
|
||||||
animationType="entrance-slide"
|
animationType="entrance-slide"
|
||||||
buttons={[
|
buttons={[
|
||||||
{ text: "احجز استشارة عبر Calendly", href: "https://calendly.com/example" },
|
{ text: "تواصل عبر البريد الإلكتروني", href: "mailto:info@webbuilder.com" },
|
||||||
{ text: "تواصل عبر البريد الإلكتروني", href: "mailto:info@webbuilder.com" }
|
{ text: "تابعنا على وسائل التواصل", href: "https://instagram.com" }
|
||||||
]}
|
]}
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
background={{ variant: "radial-gradient" }}
|
background={{ variant: "radial-gradient" }}
|
||||||
|
|||||||
Reference in New Issue
Block a user