Merge version_7 into main

2026-05-30 14:14:49 +00:00
parent a40b61680c 41ed174ae3
commit c87536427b
5 changed files with 238 additions and 230 deletions
--- a/src/app/listings/page.tsx
+++ b/src/app/listings/page.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+import React from "react";
+
+export default function ListingsPage() {
+  const whatsappMessage = 'مرحبًا، أود الاستفسار عن أحد العقارات المعروضة على منصة النجوم السبعة للعقارات.';
+  const whatsappNumber = '971501234567'; // Placeholder for office WhatsApp
+  const encodedWhatsappMessage = encodeURIComponent(whatsappMessage);
+  const whatsappLink = `https://wa.me/${whatsappNumber}?text=${encodedWhatsappMessage}`;
+
+  const sampleProperties = [
+    {
+      id: "prop1",      category: "Villa",      name: "فيلا فاخرة في دبي هيلز",      price: "15,000,000 درهم",      rating: 5,
+      reviewCount: "42",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ERdh5u0Vj6gGA0J1BFm6r4sITF/uploaded-1718041530379-villa-interior-1.jpg?_wi=2",      imageAlt: "Luxury villa in Dubai Hills"},
+    {
+      id: "prop2",      category: "Apartment",      name: "شقة بنتهاوس مطلة على البحر",      price: "8,500,000 درهم",      rating: 4,
+      reviewCount: "28",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ERdh5u0Vj6gGA0J1BFm6r4sITF/uploaded-1718041531235-penthouse-view-2.jpg?_wi=2",      imageAlt: "Sea view penthouse apartment"},
+    {
+      id: "prop3",      category: "Townhouse",      name: "تاون هاوس عصري في المرابع العربية",      price: "4,200,000 درهم",      rating: 4,
+      reviewCount: "19",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ERdh5u0Vj6gGA0J1BFm6r4sITF/uploaded-1718041532057-townhouse-exterior-3.jpg?_wi=2",      imageAlt: "Modern townhouse in Arabian Ranches"},
+    {
+      id: "prop4",      category: "Villa",      name: "فيلا شاطئية في نخلة جميرا",      price: "30,000,000 درهم",      rating: 5,
+      reviewCount: "55",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ERdh5u0Vj6gGA0J1BFm6r4sITF/uploaded-1718041532822-beach-villa-interior-4.jpg?_wi=2",      imageAlt: "Beachfront villa in Palm Jumeirah"},
+    {
+      id: "prop5",      category: "Apartment",      name: "شقة استوديو في وسط مدينة دبي",      price: "1,500,000 درهم",      rating: 3,
+      reviewCount: "12",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ERdh5u0Vj6gGA0J1BFm6r4sITF/uploaded-1718041533681-apartment-bedroom-5.jpg?_wi=2",      imageAlt: "Studio apartment in Downtown Dubai"},
+    {
+      id: "prop6",      category: "Commercial",      name: "مكتب تجاري في مركز دبي المالي",      price: "7,000,000 درهم",      rating: 4,
+      reviewCount: "20",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ERdh5u0Vj6gGA0J1BFm6r4sITF/uploaded-1718041534440-villa-pool-6.jpg?_wi=2",      imageAlt: "Commercial office in DIFC"},
+    {
+      id: "prop7",      category: "Villa",      name: "فيلا عائلية في البراري",      price: "18,000,000 درهم",      rating: 4,
+      reviewCount: "30",      imageSrc: "http://img.b2bpic.net/free-photo/house-with-green-garden_1203-3467.jpg",      imageAlt: "Family villa in Al Barari"},
+    {
+      id: "prop8",      category: "Apartment",      name: "شقة بغرفتي نوم في دبي مارينا",      price: "2,800,000 درهم",      rating: 5,
+      reviewCount: "48",      imageSrc: "http://img.b2bpic.net/free-photo/exterior-modern-building_1203-3636.jpg",      imageAlt: "Two-bedroom apartment in Dubai Marina"}
+  ];
+
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [selectedCategory, setSelectedCategory] = React.useState("All");
+  const [selectedSort, setSelectedSort] = React.useState("Price: Low to High");
+
+  const categories = ["All", "Villa", "Apartment", "Townhouse", "Commercial"];
+  const sortOptions = ["Price: Low to High", "Price: High to Low", "Rating: High to Low"];
+
+  const filters = [
+    {
+      label: "الفئة",      options: categories,
+      selected: selectedCategory,
+      onChange: setSelectedCategory,
+    },
+    {
+      label: "الترتيب حسب",      options: sortOptions,
+      selected: selectedSort,
+      onChange: setSelectedSort,
+    },
+  ];
+
+  const filteredAndSortedProducts = React.useMemo(() => {
+    return sampleProperties
+      .filter((product) =>
+        selectedCategory === "All" || product.category === selectedCategory
+      )
+      .filter((product) =>
+        product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        product.category?.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+      .sort((a, b) => {
+        if (selectedSort === "Price: Low to High") {
+          return parseFloat(a.price.replace(/[^0-9.]/g, '')) - parseFloat(b.price.replace(/[^0-9.]/g, ''));
+        }
+        if (selectedSort === "Price: High to Low") {
+          return parseFloat(b.price.replace(/[^0-9.]/g, '')) - parseFloat(a.price.replace(/[^0-9.]/g, ''));
+        }
+        if (selectedSort === "Rating: High to Low") {
+          return b.rating - a.rating;
+        }
+        return 0;
+      });
+  }, [searchQuery, selectedCategory, selectedSort]);
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              {
+                name: "الرئيسية",                id: "/"},
+              {
+                name: "العقارات",                id: "/listings"},
+              {
+                name: "الوسطاء",                id: "/#featured-agents"},
+              {
+                name: "تواصل",                id: "/#contact-cta"},
+            ]}
+            brandName="النجوم السبعة للعقارات"
+          />
+        </div>
+
+        <div id="property-listings" data-section="property-listings">
+          <ProductCatalog
+            layout="page"
+            products={filteredAndSortedProducts}
+            searchValue={searchQuery}
+            onSearchChange={setSearchQuery}
+            searchPlaceholder="ابحث عن عقارك المثالي..."
+            filters={filters}
+            emptyMessage="لم يتم العثور على عقارات مطابقة لبحثك."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
--- a/src/app/new-projects/page.tsx
+++ b/src/app/new-projects/page.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
+
+export default function NewProjectsPage() {
+  const whatsappMessage = 'مرحبًا، أود الاستفسار عن أحد العقارات المعروضة على منصة النجوم السبعة للعقارات.';
+  const whatsappNumber = '971501234567';
+  const encodedWhatsappMessage = encodeURIComponent(whatsappMessage);
+  const whatsappLink = `https://wa.me/${whatsappNumber}?text=${encodedWhatsappMessage}`;
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="smallMedium"
+        sizing="mediumLarge"
+        background="aurora"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav" className="sticky top-0 z-50">
+          <NavbarStyleApple
+            navItems={[
+              { name: "الرئيسية", id: "/" },
+              { name: "العقارات", id: "/properties" },
+              { name: "المشاريع الجديدة", id: "/new-projects" },
+              { name: "الوسطاء العقاريون", id: "/real-estate-agents" },
+              { name: "فيديوهات العقارات", id: "/property-videos" },
+              { name: "طلب عقار", id: "/property-request" },
+              { name: "تواصل معنا", id: "/contact-us" }
+            ]}
+            brandName="النجوم السبعة للعقارات"
+          />
+        </div>
+
+        <main className="min-h-screen p-8 text-center">
+          <h1 className="text-4xl font-bold mb-4">صفحة المشاريع الجديدة</h1>
+          <p className="text-lg">اكتشف أحدث المشاريع العقارية الواعدة.</p>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ERdh5u0Vj6gGA0J1BFm6r4sITF/uploaded-1780147263173-fsq26gp3.jpg"
+            logoAlt="النجوم السبعة للعقارات"
+            logoText="النجوم السبعة للعقارات — منذ 2010"
+            copyrightText="© 2024 النجوم السبعة للعقارات. جميع الحقوق محفوظة."
+            socialLinks={[
+              { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+              { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+              { icon: Twitter, href: "#", ariaLabel: "Twitter" },
+              { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -216,8 +216,7 @@ export default function LandingPage() {
          value: "4.8/5",          label: "متوسط التقييم"
        },
        {
-          value: "<CheckCircle />",          label: "وكالات موثوقة"
-        }
+          value: "✓",          label: "وكالات موثوقة"}
      ]}
      title="الوسطاء والوكالات المعتمدة"
      description="تعرف على فريقنا من الخبراء العقاريين المعتمدين والوكالات الموثوقة لدينا، مع تقييماتهم الحقيقية من العملاء."
--- a/src/app/properties/page.tsx
+++ b/src/app/properties/page.tsx
@@ -2,14 +2,16 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FooterCard from '@/components/sections/footer/FooterCard';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";

-export default function LandingPage() {
+export default function PropertiesPage() {
+  const whatsappMessage = 'مرحبًا، أود الاستفسار عن أحد العقارات المعروضة على منصة النجوم السبعة للعقارات.';
+  const whatsappNumber = '971501234567';
+  const encodedWhatsappMessage = encodeURIComponent(whatsappMessage);
+  const whatsappLink = `https://wa.me/${whatsappNumber}?text=${encodedWhatsappMessage}`;
+
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
@@ -24,229 +26,41 @@ export default function LandingPage() {
        headingFontWeight="light"
    >
      <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "الرئيسية",
-          id: "/",
-        },
-        {
-          name: "العقارات",
-          id: "/properties",
-        },
-        {
-          name: "الفيديوهات",
-          id: "/videos",
-        },
-        {
-          name: "الوسطاء",
-          id: "/agents",
-        },
-        {
-          name: "الأكاديمية",
-          id: "/academy",
-        },
-        {
-          name: "حاسبة التمويل",
-          id: "/calculator",
-        },
-        {
-          name: "تواصل",
-          id: "/contact",
-        },
-      ]}
-      brandName="النجوم السبعة للعقارات"
-    />
-  </div>
+        <div id="nav" data-section="nav" className="sticky top-0 z-50">
+          <NavbarStyleApple
+            navItems={[
+              { name: "الرئيسية", id: "/" },
+              { name: "العقارات", id: "/properties" },
+              { name: "المشاريع الجديدة", id: "/new-projects" },
+              { name: "الوسطاء العقاريون", id: "/real-estate-agents" },
+              { name: "فيديوهات العقارات", id: "/property-videos" },
+              { name: "طلب عقار", id: "/property-request" },
+              { name: "تواصل معنا", id: "/contact-us" }
+            ]}
+            brandName="النجوم السبعة للعقارات"
+          />
+        </div>

-  <div id="all-properties" data-section="all-properties">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "ap1",
-          name: "شقة حديثة في دبي مارينا",
-          price: "2,500,000 درهم",
-          variant: "للبيع",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-building-with-multiple-large-windows_250224-148.jpg",
-          imageAlt: "Modern apartment in Dubai Marina",
-        },
-        {
-          id: "ap2",
-          name: "فيلا فسيحة في الجولف",
-          price: "18,000,000 درهم",
-          variant: "للبيع",
-          imageSrc: "http://img.b2bpic.net/free-photo/studio-arrangement-work_23-2151976859.jpg",
-          imageAlt: "Spacious villa in The Meadows",
-        },
-        {
-          id: "ap3",
-          name: "استوديو مفروش في وسط البلد",
-          price: "80,000 درهم/سنة",
-          variant: "للإيجار",
-          imageSrc: "http://img.b2bpic.net/free-photo/luxury-outdoor-hotel_1150-12915.jpg",
-          imageAlt: "Furnished studio in Downtown",
-        },
-        {
-          id: "ap4",
-          name: "فيلا عائلية بـ 4 غرف في البراري",
-          price: "7,000,000 درهم",
-          variant: "للبيع",
-          imageSrc: "http://img.b2bpic.net/free-photo/chair-pool_74190-1324.jpg",
-          imageAlt: "4-bedroom family villa in Al Barari",
-        },
-        {
-          id: "ap5",
-          name: "شقة فاخرة بإطلالة بحرية",
-          price: "3,800,000 درهم",
-          variant: "للبيع",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-holding-smartphone-with-home-automation-app_23-2149036831.jpg",
-          imageAlt: "Luxury apartment with sea view",
-        },
-        {
-          id: "ap6",
-          name: "تاون هاوس عصري في مجتمع هادئ",
-          price: "150,000 درهم/سنة",
-          variant: "للإيجار",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girls-gym-sports-ladies-sportswear-friends-race-track_1157-43974.jpg",
-          imageAlt: "Modern townhouse in a quiet community",
-        },
-      ]}
-      title="جميع العقارات المعروضة"
-      description="تصفح أحدث العقارات المتاحة للبيع والإيجار في جميع أنحاء الإمارات. استخدم الفلاتر للعثور على ما يناسبك."
-      tag="تصفح"
-    />
-  </div>
+        <main className="min-h-screen p-8 text-center">
+          <h1 className="text-4xl font-bold mb-4">صفحة العقارات</h1>
+          <p className="text-lg">اكتشف مجموعتنا الواسعة من العقارات المعروضة.</p>
+        </main>

-  <div id="property-contact-cta" data-section="property-contact-cta">
-      <ContactCTA
-      useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="استفسار"
-      title="لم تجد عقارك؟ اطلب مساعدة خبير!"
-      description="فريقنا المتخصص مستعد لمساعدتك في البحث عن العقار الذي يلبي جميع احتياجاتك. تواصل معنا الآن."
-      buttons={[
-        {
-          text: "تواصل مع وسيط",
-          href: "/contact",
-        },
-        {
-          text: "اطلب عقاراً خاصاً",
-          href: "/contact",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="property-testimonials" data-section="property-testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "pt1",
-          name: "علياء الفهيم",
-          role: "مستشارة قانونية",
-          company: "مؤسسة العدل",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1604.jpg",
-          imageAlt: "Aliya Al Fahim",
-        },
-        {
-          id: "pt2",
-          name: "فهد القاسمي",
-          role: "مطور عقاري",
-          company: "عقارات الإمارات",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-reaching-out-camera-woman-city_169016-66619.jpg",
-          imageAlt: "Fahad Al Qasimi",
-        },
-        {
-          id: "pt3",
-          name: "نادية كرم",
-          role: "مصممة داخلية",
-          company: "لمسات للديكور",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-smiling-man-talking-mobile-phone-calling-seller-he-found-online-while-using-laptop-shopping-searching-appartment-internet_176420-25732.jpg",
-          imageAlt: "Nadia Karam",
-        },
-        {
-          id: "pt4",
-          name: "سامي العوضي",
-          role: "مدير استثمار",
-          company: "جلوبال انفست",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-with-speech-bubble_53876-13588.jpg",
-          imageAlt: "Sami Al Awadhi",
-        },
-        {
-          id: "pt5",
-          name: "مها الكتبي",
-          role: "مديرة مشروعات",
-          company: "بناء للمقاولات",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/home-insurance-coverage-estate-residential_53876-121259.jpg",
-          imageAlt: "Maha Al Ketbi",
-        },
-      ]}
-      kpiItems={[
-        {
-          value: "99%",
-          label: "رضا العملاء",
-        },
-        {
-          value: "سريع",
-          label: "إغلاق الصفقات",
-        },
-        {
-          value: "سهل",
-          label: "عملية البحث",
-        },
-      ]}
-      title="قصص نجاح عملائنا"
-      description="شاهد كيف ساعدنا عملاء آخرين في العثور على عقاراتهم المثالية."
-      tag="تجارب حقيقية"
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ERdh5u0Vj6gGA0J1BFm6r4sITF/uploaded-1780147263173-fsq26gp3.jpg"
-      logoAlt="النجوم السبعة للعقارات"
-      logoText="النجوم السبعة للعقارات"
-      copyrightText="© 2026 | جميع الحقوق محفوظة لدى النجوم السبعة للعقارات"
-      socialLinks={[
-        {
-          icon: Facebook,
-          href: "#",
-          ariaLabel: "Facebook",
-        },
-        {
-          icon: Instagram,
-          href: "#",
-          ariaLabel: "Instagram",
-        },
-        {
-          icon: Twitter,
-          href: "#",
-          ariaLabel: "Twitter",
-        },
-        {
-          icon: Linkedin,
-          href: "#",
-          ariaLabel: "LinkedIn",
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ERdh5u0Vj6gGA0J1BFm6r4sITF/uploaded-1780147263173-fsq26gp3.jpg"
+            logoAlt="النجوم السبعة للعقارات"
+            logoText="النجوم السبعة للعقارات — منذ 2010"
+            copyrightText="© 2024 النجوم السبعة للعقارات. جميع الحقوق محفوظة."
+            socialLinks={[
+              { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+              { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+              { icon: Twitter, href: "#", ariaLabel: "Twitter" },
+              { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" }
+            ]}
+          />
+        </div>
      </ReactLenis>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-libre-baskerville), sans-serif;
+  font-family: var(--font-cairo), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-libre-baskerville), serif;
+  font-family: var(--font-cairo), serif;
 }