Merge version_2 into main

2026-03-18 00:15:44 +00:00
parent e9ef4ca73e 27891cd069
commit 72463533fb
2 changed files with 250 additions and 26 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="ar" dir="rtl" suppressHydrationWarning>
      <ServiceWrapper>
        <body className={`${lato.variable} antialiased`}>
          <Tag />
@@ -39,4 +39,4 @@ export default function RootLayout({
      </ServiceWrapper>
    </html>
  );
-}
+}
--- 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<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 (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
@@ -36,7 +86,7 @@ export default function LandingPage() {
            { name: "سيرنا", id: "process" },
            { name: "التواصل", id: "contact" }
          ]}
-          button={{ text: "احجز استشارة", href: "#contact" }}
+          button={{ text: "احجز استشارة", href: "#booking" }}
          animateOnLoad={true}
        />
      </div>
@@ -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() {
        />
      </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">
        <FeatureCardNineteen
          title="الخدمات التي نقدمها"
@@ -152,23 +256,6 @@ export default function LandingPage() {
        />
      </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">
        <TestimonialCardFive
          title="آراء عملائنا"
@@ -265,13 +352,150 @@ export default function LandingPage() {
        />
      </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">
        <ContactText
-          text="هل أنت مستعد لنقل عملك إلى المستوى التالي؟ احجز استشارة مجانية معنا وسننقاش رؤيتك وأهدافك بالتفصيل."
+          text="هل لديك أي أسئلة أخرى؟ تواصل معنا مباشرة عبر البريد الإلكتروني أو وسائل التواصل الاجتماعية"
          animationType="entrance-slide"
          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}
          background={{ variant: "radial-gradient" }}