Update src/app/page.tsx

Merge version_6 into main

src/app/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from 'react';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
 import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
@@ -11,7 +12,8 @@ import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { Music, User, Download } from "lucide-react";
+import Input from '@/components/form/Input'; // Import the Input component
+import { Music, User, Download, Search } from "lucide-react"; // Add Search icon
 
 const assetMap = [
   {"id":"logo-m-download","url":"http://img.b2bpic.net/free-vector/flat-design-m-logo-template-collection_23-2148916717.jpg","alt":"M letter music note logo red black"},
@@ -45,6 +47,33 @@ const resolveAssetAlt = (id, defaultAlt) => {
 };
 
 export default function LandingPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const allArtists = [
+    { id: "artist-1", title: "ليلى الساحرة", descriptions: ["اكتشف أغانيها التي تتصدر المخططات. بوب وآر أند بي."], imageSrc: resolveAsset("artist-profile-2"), imageAlt: resolveAssetAlt("artist-profile-2", "Laila Al-Sahira profile") },
+    { id: "artist-2", title: "صوت الصحراء", descriptions: ["موسيقى روك بديلة مميزة. ألبومات حائزة على جوائز."], imageSrc: resolveAsset("artist-profile-3"), imageAlt: resolveAssetAlt("artist-profile-3", "Sawt Al-Sahra profile") },
+    { id: "artist-3", title: "نغمات المستقبل", descriptions: ["استمع إلى أحدث إصداراته. موسيقى إلكترونية تجريبية."], imageSrc: resolveAsset("artist-profile-1"), imageAlt: resolveAssetAlt("artist-profile-1", "Naghamat Al-Mustaqbal profile") }
+  ];
+
+  const allAlbums = [
+    { id: "song-1", brand: "ليلى الساحرة", name: "نجوم الليل", price: "1.99 دولار", rating: 5, reviewCount: "1.2K", imageSrc: resolveAsset("album-cover-1"), imageAlt: resolveAssetAlt("album-cover-1", "Night Stars album cover") },
+    { id: "song-2", brand: "صوت الصحراء", name: "صدى الوديان", price: "2.49 دولار", rating: 4, reviewCount: "800", imageSrc: resolveAsset("album-cover-4"), imageAlt: resolveAssetAlt("album-cover-4", "Echo of Valleys album cover") },
+    { id: "song-3", brand: "نغمات المستقبل", name: "أبعاد جديدة", price: "تنزيل مجاني", rating: 5, reviewCount: "1.5K", imageSrc: resolveAsset("album-cover-3"), imageAlt: resolveAssetAlt("album-cover-3", "New Dimensions album cover") },
+    { id: "song-4", brand: "ليلى الساحرة", name: "سحر الغروب", price: "1.99 دولار", rating: 4, reviewCount: "650", imageSrc: resolveAsset("album-cover-2"), imageAlt: resolveAssetAlt("album-cover-2", "Sunset Magic album cover") },
+    { id: "song-5", brand: "صوت الصحراء", name: "شمس منتصف الليل", price: "2.49 دولار", rating: 5, reviewCount: "920", imageSrc: resolveAsset("album-cover-5"), imageAlt: resolveAssetAlt("album-cover-5", "Midnight Sun album cover") },
+    { id: "song-6", brand: "نغمات المستقبل", name: "طريق الفضاء", price: "تنزيل مجاني", rating: 4, reviewCount: "780", imageSrc: resolveAsset("album-cover-6"), imageAlt: resolveAssetAlt("album-cover-6", "Space Road album cover") }
+  ];
+
+  const filteredArtists = allArtists.filter(artist =>
+    artist.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    artist.descriptions.some(desc => desc.toLowerCase().includes(searchQuery.toLowerCase()))
+  );
+
+  const filteredAlbums = allAlbums.filter(album =>
+    album.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    album.brand.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -66,7 +95,7 @@ export default function LandingPage() {
           navItems={[
             { name: "الرئيسية", id: "#hero" },
             { name: "الفنانون", id: "#features" },
-            { name: "الألبومات", id: "#products" },
+            { name: "أغاني رائجة", id: "#products" },
             { name: "الأسئلة الشائعة", id: "#faq" },
             { name: "حولنا", id: "#about" }
           ]}
@@ -76,9 +105,8 @@ export default function LandingPage() {
       <div id="hero" data-section="hero">
         <HeroLogo
           logoText="M. Download"
-          description="اكتشف وقم بتنزيل الموسيقى المرخصة بـ Creative Commons من مكتبة Jamendo. ابدأ بحثك الآن!"
+          description="اكتشف وقم بتنزيل الأغاني والفنانين الأكثر شعبية المرخصة بـ Creative Commons من مكتبة Jamendo. ابحث عن فنانيك وأغانيك المفضلة الآن!"          buttons={[
-          buttons={[
+            { text: "بدء البحث", href: "#search-bar" }
-            { text: "بدء البحث", href: "#features" }
           ]}
           imageSrc={resolveAsset("vinyl-record")}
           imageAlt={resolveAssetAlt("vinyl-record", "Rotating vinyl record")}
@@ -86,14 +114,27 @@ export default function LandingPage() {
         />
       </div>
 
+      {/* New Search Bar Section */}
+      <div id="search-bar" data-section="search-bar" className="py-12 md:py-24 bg-background-accent">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-lg text-center">
+          <h2 className="text-3xl font-bold mb-4 text-foreground">ابحث عن الموسيقى التي تحبها</h2>
+          <p className="text-muted-foreground mb-8">أدخل اسم الفنان أو الألبوم لاستكشاف عالم الموسيقى المرخصة.</p>
+          <Input
+            value={searchQuery}
+            onChange={setSearchQuery}
+            type="text"
+            placeholder="ابحث عن فنان أو أغنية..."            ariaLabel="Search for artists or songs"
+            className="w-full max-w-md mx-auto"
+          />
+        </div>
+      </div>
+
       <div id="features" data-section="features">
         <FeatureCardTwentySeven
-          title="ابحث عن فنانك المفضل"
+          title={searchQuery ? `نتائج البحث عن الفنانين: "${searchQuery}"` : "الفنانون الأكثر شعبية"}
-          description="استخدم شريط البحث أدناه لاستكشاف ملايين الأغاني والألبومات المرخصة."
+          description={searchQuery ? `وجدنا ${filteredArtists.length} فنانين مطابقين.` : "استخدم شريط البحث أعلاه لاستكشاف ملايين الأغاني والفنانين المرخصين."}
-          features={[
+          features={filteredArtists.length > 0 ? filteredArtists : [
-            { id: "artist-1", title: "الفنان X", descriptions: ["استمع إلى أحدث إصداراته. موسيقى إلكترونية تجريبية."], imageSrc: resolveAsset("artist-profile-1"), imageAlt: resolveAssetAlt("artist-profile-1", "Artist X profile") },
+            { id: "no-results", title: "لا توجد نتائج", descriptions: ["حاول البحث عن شيء آخر."], imageSrc: "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=?_wi=1", imageAlt: "No results" } // Placeholder for no results
-            { id: "artist-2", title: "الفنانة Y", descriptions: ["اكتشف أغانيها التي تتصدر المخططات. بوب وآر أند بي."], imageSrc: resolveAsset("artist-profile-2"), imageAlt: resolveAssetAlt("artist-profile-2", "Artist Y profile") },
-            { id: "artist-3", title: "فرقة Z", descriptions: ["موسيقى روك بديلة مميزة. ألبومات حائزة على جوائز."], imageSrc: resolveAsset("artist-profile-3"), imageAlt: resolveAssetAlt("artist-profile-3", "Band Z profile") }
           ]}
           animationType="slide-up"
           textboxLayout="default"
@@ -103,15 +144,10 @@ export default function LandingPage() {
 
       <div id="products" data-section="products">
         <ProductCardTwo
-          title="ألبومات رائجة"
+          title={searchQuery ? `نتائج البحث عن الأغاني: "${searchQuery}"` : "أغاني رائجة"}
-          description="استكشف أحدث وأشهر الألبومات من فنانين مستقلين حول العالم."
+          description={searchQuery ? `وجدنا ${filteredAlbums.length} أغاني مطابقة.` : "استكشف أحدث وأشهر الأغاني من فنانين مستقلين حول العالم."}
-          products={[
+          products={filteredAlbums.length > 0 ? filteredAlbums : [
-            { id: "album-1", brand: "الفنان X", name: "أصداء المستقبل", price: "تنزيل مجاني", rating: 5, reviewCount: "1.2K", imageSrc: resolveAsset("album-cover-1"), imageAlt: resolveAssetAlt("album-cover-1", "Future Echoes album cover") },
+            { id: "no-results", brand: "", name: "لا توجد نتائج", price: "", rating: 0, reviewCount: "", imageSrc: "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=?_wi=2", imageAlt: "No results" } // Placeholder for no results
-            { id: "album-2", brand: "الفنانة Y", name: "ألوان الحياة", price: "تنزيل مجاني", rating: 4, reviewCount: "800", imageSrc: resolveAsset("album-cover-2"), imageAlt: resolveAssetAlt("album-cover-2", "Colors of Life album cover") },
-            { id: "album-3", brand: "فرقة Z", name: "اللحن الخفي", price: "تنزيل مجاني", rating: 5, reviewCount: "1.5K", imageSrc: resolveAsset("album-cover-3"), imageAlt: resolveAssetAlt("album-cover-3", "Hidden Melody album cover") },
-            { id: "album-4", brand: "الفنان X", name: "نبض المدينة", price: "تنزيل مجاني", rating: 4, reviewCount: "650", imageSrc: resolveAsset("album-cover-4"), imageAlt: resolveAssetAlt("album-cover-4", "City Pulse album cover") },
-            { id: "album-5", brand: "الفنانة Y", name: "رحلة النجوم", price: "تنزيل مجاني", rating: 5, reviewCount: "920", imageSrc: resolveAsset("album-cover-5"), imageAlt: resolveAssetAlt("album-cover-5", "Star Journey album cover") },
-            { id: "album-6", brand: "فرقة Z", name: "شروق جديد", price: "تنزيل مجاني", rating: 4, reviewCount: "780", imageSrc: resolveAsset("album-cover-6"), imageAlt: resolveAssetAlt("album-cover-6", "New Dawn album cover") }
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
@@ -175,6 +211,7 @@ export default function LandingPage() {
             { type: "text", content: "ترخيص Creative Commons" },
             { type: "text", content: "جميع المحتويات على M. Download مرخصة بموجب تراخيص Creative Commons من قِبل الفنانين أنفسهم عبر مكتبة Jamendo. نلتزم بتقديم تجربة تنزيل موسيقى قانونية وأخلاقية، مع احترام كامل لحقوق الملكية الفكرية. التنزيل يتم وفق شروط ترخيص كل عمل." }
           ]}
+          useInvertedBackground={false}
         />
       </div>
 
@@ -196,7 +233,7 @@ export default function LandingPage() {
           imageSrc={resolveAsset("footer-music-waves")}
           imageAlt={resolveAssetAlt("footer-music-waves", "Abstract music sound waves")}
           columns={[
-            { title: "الموقع", items: [{ label: "الرئيسية", href: "#hero" }, { label: "الفنانون", href: "#features" }, { label: "الألبومات", href: "#products" }] },
+            { title: "الموقع", items: [{ label: "الرئيسية", href: "#hero" }, { label: "الفنانون", href: "#features" }, { label: "أغاني رائجة", href: "#products" }] },
             { title: "المساعدة", items: [{ label: "الأسئلة الشائعة", href: "#faq" }, { label: "تواصل معنا", href: "#contact" }] },
             { title: "قانوني", items: [{ label: "تراخيص CC", href: "#about" }, { label: "سياسة الخصوصية", href: "#" }, { label: "شروط الخدمة", href: "#" }] }
           ]}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #181818;
+  --background: #fffafa;
-  --card: #282828;
+  --card: #ffffff;
-  --foreground: #E0E0E0;
+  --foreground: #1a0000;
-  --primary-cta: #FFBF00;
+  --primary-cta: #e63946;
-  --primary-cta-text: #181818;
+  --primary-cta-text: #fffafa;
-  --secondary-cta: #40E0D0;
+  --secondary-cta: #ffffff;
-  --secondary-cta-text: #181818;
+  --secondary-cta-text: #1a0000;
-  --accent: #FFBF00;
+  --accent: #f5c4c7;
-  --background-accent: #40E0D0;
+  --background-accent: #f09199;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);