Update src/app/page.tsx

Merge version_5 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: "الفنان 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="ابحث عن فنانك المفضل"
+          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 +146,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 +213,7 @@ export default function LandingPage() {
             { type: "text", content: "ترخيص Creative Commons" },
             { type: "text", content: "جميع المحتويات على M. Download مرخصة بموجب تراخيص Creative Commons من قِبل الفنانين أنفسهم عبر مكتبة Jamendo. نلتزم بتقديم تجربة تنزيل موسيقى قانونية وأخلاقية، مع احترام كامل لحقوق الملكية الفكرية. التنزيل يتم وفق شروط ترخيص كل عمل." }
           ]}
+          useInvertedBackground={false}
         />
       </div>
 
@@ -205,4 +244,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

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);