Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from 'react';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
@@ -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: "الفنان 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") }
+  ];
+
+  const allAlbums = [
+    { 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") }
+  ];
+
+  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"
@@ -76,9 +105,9 @@ export default function LandingPage() {
       <div id="hero" data-section="hero">
         <HeroLogo
           logoText="M. Download"
-          description="اكتشف وقم بتنزيل الموسيقى المرخصة بـ Creative Commons من مكتبة Jamendo. ابدأ بحثك الآن!"
+          description="اكتشف وقم بتنزيل الموسيقى المرخصة بـ Creative Commons من مكتبة Jamendo. ابحث عن فنانيك وألبوماتك المفضلة الآن!"
           buttons={[
-            { text: "بدء البحث", href: "#features" }
+            { text: "بدء البحث", href: "#search-bar" }
           ]}
           imageSrc={resolveAsset("vinyl-record")}
           imageAlt={resolveAssetAlt("vinyl-record", "Rotating vinyl record")}
@@ -86,14 +115,28 @@ 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 albums"
+            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 +146,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"

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: #000000;
+  --card: #0c0c0c;
+  --foreground: #ffffff;
+  --primary-cta: #106EFB;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #000000;
+  --secondary-cta-text: #ffffff;
+  --accent: #535353;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);