diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 67db516..26e0ed5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -25,7 +25,7 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + @@ -39,4 +39,4 @@ export default function RootLayout({ ); -} +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 7d5a677..6283ee7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,9 +10,59 @@ import MetricCardOne from '@/components/sections/metrics/MetricCardOne'; import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive'; import ContactText from '@/components/sections/contact/ContactText'; 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() { + const [selectedDate, setSelectedDate] = useState(null); + const [selectedTime, setSelectedTime] = useState(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 ( @@ -49,7 +99,7 @@ export default function LandingPage() { tagIcon={Sparkles} tagAnimation="slide-up" buttons={[ - { text: "احجز استشارة مجانية", href: "#contact" }, + { text: "احجز استشارة مجانية", href: "#booking" }, { text: "عرض أعمالنا", href: "#projects" } ]} buttonAnimation="slide-up" @@ -72,7 +122,7 @@ export default function LandingPage() { tag="من نحن" tagIcon={Zap} tagAnimation="slide-up" - title="فريق متخصص في تطوير الويب والحلول الرقمية المتقدمة" + title="فريق من مصممي مواقع البيع المتخصصين للشركات الصغيرة والمتوسطة" useInvertedBackground={false} buttons={[ { text: "اعرف أكثر عن خدماتنا", href: "#services" } @@ -81,6 +131,60 @@ export default function LandingPage() { /> +
+
+ +

150+

+

مشروع مكتمل بنجاح

+
+
+ +

45

+

عميل دائم وموثوق

+
+
+ +

95%

+

معدل رضا العملاء

+
+
+ +

250%

+

متوسط نمو المبيعات

+
+
+
-
- -
-
+
+
+

+ + احجز استشارة مجانية +

+

+ اختر يوماً ووقتاً يناسبك لمناقشة مشروعك والحصول على استشارة احترافية من فريقنا +

+ +
+

اختر التاريخ:

+
+ {availableDates.map((date) => { + const dateStr = formatDate(date); + const isSelected = selectedDate === dateStr; + return ( + + ); + })} +
+
+ + {selectedDate && ( +
+

+ اختر الوقت من {formatDateDisplay(selectedDate)}: +

+
+ {timeSlots.map((time) => { + const isSelected = selectedTime === time; + return ( + + ); + })} +
+
+ )} + + {selectedDate && selectedTime && ( +
+

✓ تم اختيار الوقت:

+

يوم {formatDateDisplay(selectedDate)} - الساعة {selectedTime}

+
+ )} + + +
+
+