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. ابدأ بحثك الآن!"
-          buttons={[
-            { text: "بدء البحث", href: "#features" }
+          description="اكتشف وقم بتنزيل الأغاني والفنانين الأكثر شعبية المرخصة بـ Creative Commons من مكتبة Jamendo. ابحث عن فنانيك وأغانيك المفضلة الآن!"          buttons={[
+            { text: "بدء البحث", href: "#search-bar" }
           ]}
           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="ابحث عن فنانك المفضل"
-          description="استخدم شريط البحث أدناه لاستكشاف ملايين الأغاني والألبومات المرخصة."
-          features={[
-            { id: "artist-1", title: "الفنان X", descriptions: ["استمع إلى أحدث إصداراته. موسيقى إلكترونية تجريبية."], imageSrc: resolveAsset("artist-profile-1"), imageAlt: resolveAssetAlt("artist-profile-1", "Artist X profile") },
-            { 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") }
+          title={searchQuery ? `نتائج البحث عن الفنانين: "${searchQuery}"` : "الفنانون الأكثر شعبية"}
+          description={searchQuery ? `وجدنا ${filteredArtists.length} فنانين مطابقين.` : "استخدم شريط البحث أعلاه لاستكشاف ملايين الأغاني والفنانين المرخصين."}
+          features={filteredArtists.length > 0 ? filteredArtists : [
+            { id: "no-results", title: "لا توجد نتائج", descriptions: ["حاول البحث عن شيء آخر."], imageSrc: "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=?_wi=1", imageAlt: "No results" } // Placeholder for no results
           ]}
           animationType="slide-up"
           textboxLayout="default"
@@ -103,15 +144,10 @@ export default function LandingPage() {
 
       <div id="products" data-section="products">
         <ProductCardTwo
-          title="ألبومات رائجة"
-          description="استكشف أحدث وأشهر الألبومات من فنانين مستقلين حول العالم."
-          products={[
-            { 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: "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") }
+          title={searchQuery ? `نتائج البحث عن الأغاني: "${searchQuery}"` : "أغاني رائجة"}
+          description={searchQuery ? `وجدنا ${filteredAlbums.length} أغاني مطابقة.` : "استكشف أحدث وأشهر الأغاني من فنانين مستقلين حول العالم."}
+          products={filteredAlbums.length > 0 ? filteredAlbums : [
+            { 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
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
@@ -197,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;
-  --card: #282828;
-  --foreground: #E0E0E0;
-  --primary-cta: #FFBF00;
-  --primary-cta-text: #181818;
-  --secondary-cta: #40E0D0;
-  --secondary-cta-text: #181818;
-  --accent: #FFBF00;
-  --background-accent: #40E0D0;
+  --background: #fffafa;
+  --card: #ffffff;
+  --foreground: #1a0000;
+  --primary-cta: #e63946;
+  --primary-cta-text: #fffafa;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1a0000;
+  --accent: #f5c4c7;
+  --background-accent: #f09199;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);