From d957fa4cd3c955ec7eb3529b3ebf3ddae095ea96 Mon Sep 17 00:00:00 2001 From: amineelhajami Date: Tue, 24 Mar 2026 09:25:45 +0100 Subject: [PATCH] db hanta ktr mnhadchi chne bghiti --- .gitignore | 1 + ShopAPI/ShopAPI/bin/Debug/net8.0/ShopAPI.dll | Bin 25088 -> 25088 bytes ShopAPI/ShopAPI/bin/Debug/net8.0/ShopAPI.exe | Bin 151552 -> 151552 bytes ShopAPI/ShopAPI/bin/Debug/net8.0/ShopAPI.pdb | Bin 27908 -> 27908 bytes .../obj/Debug/net8.0/ShopAPI.AssemblyInfo.cs | 4 +- .../net8.0/ShopAPI.AssemblyInfoInputs.cache | 2 +- ShopAPI/ShopAPI/obj/Debug/net8.0/ShopAPI.dll | Bin 25088 -> 25088 bytes ShopAPI/ShopAPI/obj/Debug/net8.0/ShopAPI.pdb | Bin 27908 -> 27908 bytes ShopAPI/ShopAPI/obj/Debug/net8.0/apphost.exe | Bin 151552 -> 151552 bytes .../ShopAPI/obj/Debug/net8.0/ref/ShopAPI.dll | Bin 13312 -> 13312 bytes .../obj/Debug/net8.0/refint/ShopAPI.dll | Bin 13312 -> 13312 bytes .../Debug/net8.0/rjsmcshtml.dswa.cache.json | 2 +- .../Debug/net8.0/rjsmrazor.dswa.cache.json | 2 +- frontend/src/data/mockData.ts | 666 ++++++++++++++++-- frontend/src/pages/CartPage.tsx | 3 +- frontend/src/pages/HomePage.tsx | 101 ++- frontend/src/pages/ProductDetailsPage.tsx | 12 +- frontend/src/pages/ProductsPage.tsx | 10 +- frontend/src/styles.css | 95 +++ frontend/src/types.ts | 8 + frontend/src/ui/ProductCard.tsx | 14 +- frontend/src/ui/visuals.ts | 12 + frontend/src/vite-env.d.ts | 1 + 23 files changed, 844 insertions(+), 89 deletions(-) create mode 100644 frontend/src/ui/visuals.ts create mode 100644 frontend/src/vite-env.d.ts diff --git a/.gitignore b/.gitignore index 11a68c1..ce9f793 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ frontend/node_modules/ frontend/dist/ frontend/.vite/ +frontend/*.tsbuildinfo diff --git a/ShopAPI/ShopAPI/bin/Debug/net8.0/ShopAPI.dll b/ShopAPI/ShopAPI/bin/Debug/net8.0/ShopAPI.dll index 91806fdb846025800f6ed0608f8d563b836a0198..0ff45c8ffa9a99ddc536860e4261b108d46bd33d 100644 GIT binary patch delta 234 zcmZoT!q{+xaY6^n#UtNWZR|<$72sWJ;j!6zm)GiPw@NwnY7cDklj2lQv$QZvH8Qp^ zPctzxv@}k&G&Qp@w=gnDHZn9$H8HlZFi5d5F*M%n7|zeg@{3RQ_2iI<0D-KJb7g05 zn&#O0NAAKBIrA%%w?rf>Km`{bg$e>yXIluhc`Yh?dh7;=rPgNi$g|A8X$+PO77S(# zsSHL8#z2-iLmGn#kZlMQHwKDYGMEBoLE;ubQ3Hl#upCIn1gzcyD3$`0GXd%_-W(Xa Go&^AOo@`)l zY?P90WSN|jYLJ$aY@TLjl4xmWX_;bflxSjXXkxh8F`S=~#VRdm;^dHs0D+i0tlXIo zBb~cTE`1ee*)f0emWX5psNiI7s31sntAFS{x7!ng`E3|yZZ?lR%j|2&kiuZZkj7xn zkj!8JB#nW*6d>D(!4gQOFr)%S)4(F;K-!GKgdq_qV+O>QKv8p`x delta 97 zcmZozz}WyqEsR^3zWDeWGNdpVF{Ck=GbA$@07+vYF9papVz2~~DGaGV(KN7#IgmDE hFkwgp%9sJMB~a8Hs4fvGX3Ss+Bn`Ja`ZDcj0s#025@i4Y diff --git a/ShopAPI/ShopAPI/bin/Debug/net8.0/ShopAPI.pdb b/ShopAPI/ShopAPI/bin/Debug/net8.0/ShopAPI.pdb index 340f47156dfc2e784204db070221e541e6fecbd7..49d0989afca8b5330ce47a5beb25d8bc4844e499 100644 GIT binary patch delta 71 zcmV-N0J#5z+5v>x0g!wYYVn;No3fTch5R1Sq#ifa`VJlIv5=(`Ao7KLiE42cGbGG5 du17QblwT1`x0g!wYT-*fKm`{bg$e>yXIluhc`Yh?dh7;=rPgNi$g|A8X$+PO77S(# zsSHL8#z2-iLmGn#kZlMQHwKDYGMEBoLE;ubQ3Hl#upCIn1gzcyD3$`0GXd%_-W(Xa Go&^AOo@`)l zY?P90WSN|jYLJ$aY@TLjl4xmWX_;bflxSjXXkxh8F`S=~#VRdm;^dHs0D+i0tlXIo zBb~cTE`1ee*)f0emWX5psNiI7s31sntAFS{x7!ng`E3|yZZ?lR%j|2&kiuZZkj7xn zkj!8JB#nW*6d>D(!4gQOFr)%S)4(F;K-!GKgdq_qV+O>QKv8p`xx0g!wYYVn;No3fTch5R1Sq#ifa`VJlIv5=(`Ao7KLiE42cGbGG5 du17QblwT1`x0g!wYT-*f delta 97 zcmZozz}WyqEsR^3zWDeWGNdpVF{Ck=GbA$@07+vYF9papVz2~~DGaGV(KN7#IgmDE hFkwgp%9sJMB~a8Hs4fvGX3Ss+Bn`Ja`ZDcj0s#025@i4Y diff --git a/ShopAPI/ShopAPI/obj/Debug/net8.0/ref/ShopAPI.dll b/ShopAPI/ShopAPI/obj/Debug/net8.0/ref/ShopAPI.dll index 6957ca453d9d926216a861fa7cbbc188de4ac95f..257ab03d8a0c02191c60db5dd4f1e321a52d8afb 100644 GIT binary patch delta 192 zcmZq3Xvmn*!P219`)y-S39|qvyTjr$EdCCY=7^{KPh5O@vmncR#?Aj(?3+TCCma$riMn<+&UiHQ+s(D1r{rA7G!zPxcNWpT?I_3H);== z)D2UN(#(?$%#Dpwl8r2rQ&J7mQj*Qn%uEt3%`7cb%#9LFj15f;H-FI-VD&X*NMSHy zNMkT(NMtpr|=eT_RA-n86T8 L8g35MU(W&nSHUro diff --git a/ShopAPI/ShopAPI/obj/Debug/net8.0/refint/ShopAPI.dll b/ShopAPI/ShopAPI/obj/Debug/net8.0/refint/ShopAPI.dll index 6957ca453d9d926216a861fa7cbbc188de4ac95f..257ab03d8a0c02191c60db5dd4f1e321a52d8afb 100644 GIT binary patch delta 192 zcmZq3Xvmn*!P219`)y-S39|qvyTjr$EdCCY=7^{KPh5O@vmncR#?Aj(?3+TCCma$riMn<+&UiHQ+s(D1r{rA7G!zPxcNWpT?I_3H);== z)D2UN(#(?$%#Dpwl8r2rQ&J7mQj*Qn%uEt3%`7cb%#9LFj15f;H-FI-VD&X*NMSHy zNMkT(NMtpr|=eT_RA-n86T8 L8g35MU(W&nSHUro diff --git a/ShopAPI/ShopAPI/obj/Debug/net8.0/rjsmcshtml.dswa.cache.json b/ShopAPI/ShopAPI/obj/Debug/net8.0/rjsmcshtml.dswa.cache.json index 23efaed..c12203a 100644 --- a/ShopAPI/ShopAPI/obj/Debug/net8.0/rjsmcshtml.dswa.cache.json +++ b/ShopAPI/ShopAPI/obj/Debug/net8.0/rjsmcshtml.dswa.cache.json @@ -1 +1 @@ -{"GlobalPropertiesHash":"jjFS3ypc+SFFIJoabqxBcUwQp4+BH7vO9y9aDuWO8Ig=","FingerprintPatternsHash":"8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U=","PropertyOverridesHash":"8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U=","InputHashes":["oM\u002B92zWtRWs1ZZHQG5F\u002BZt\u002BmUwKFCmEHXl6yhJyDB9E=","m4ORQ/F\u002BR\u002BZG7hKB0ZiSTgsXFT54fbrxurDLZfuPLtU=","/26wWziwS0KH/O896xGXBSLufvhay7wSjV2zdTxws18=","WyWGi43zm6PntQI/ucnnU3lxt5XudSMI/Un84LZNCNI=","pzhO73lOLr0aoNbQo3AXbJ7qsA2VDRY9Il7vtsfu6/g=","\u002BmYXsDWUwEv8MDDi5d\u002BdcyyfamgV9HnHNS18DvTVT8g=","KmtVrMRHetgVdPC7Ti0TzXPRMK5M58DycF9gOmYQmuk="],"CachedAssets":{},"CachedCopyCandidates":{}} \ No newline at end of file +{"GlobalPropertiesHash":"jjFS3ypc+SFFIJoabqxBcUwQp4+BH7vO9y9aDuWO8Ig=","FingerprintPatternsHash":"8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U=","PropertyOverridesHash":"8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U=","InputHashes":["oM\u002B92zWtRWs1ZZHQG5F\u002BZt\u002BmUwKFCmEHXl6yhJyDB9E=","m4ORQ/F\u002BR\u002BZG7hKB0ZiSTgsXFT54fbrxurDLZfuPLtU=","/26wWziwS0KH/O896xGXBSLufvhay7wSjV2zdTxws18=","WyWGi43zm6PntQI/ucnnU3lxt5XudSMI/Un84LZNCNI=","pzhO73lOLr0aoNbQo3AXbJ7qsA2VDRY9Il7vtsfu6/g=","\u002BmYXsDWUwEv8MDDi5d\u002BdcyyfamgV9HnHNS18DvTVT8g=","Tm7CcfRRz8vmlt8l9mYtBKdJqqgOF4FJyGXnX/H8m3Q="],"CachedAssets":{},"CachedCopyCandidates":{}} \ No newline at end of file diff --git a/ShopAPI/ShopAPI/obj/Debug/net8.0/rjsmrazor.dswa.cache.json b/ShopAPI/ShopAPI/obj/Debug/net8.0/rjsmrazor.dswa.cache.json index cf834a4..9d2d4f3 100644 --- a/ShopAPI/ShopAPI/obj/Debug/net8.0/rjsmrazor.dswa.cache.json +++ b/ShopAPI/ShopAPI/obj/Debug/net8.0/rjsmrazor.dswa.cache.json @@ -1 +1 @@ -{"GlobalPropertiesHash":"tbgf6NkZHDHq5Bwz13FNLNq2Biw7YSKbQETYkFTRirw=","FingerprintPatternsHash":"8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U=","PropertyOverridesHash":"8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U=","InputHashes":["oM\u002B92zWtRWs1ZZHQG5F\u002BZt\u002BmUwKFCmEHXl6yhJyDB9E=","m4ORQ/F\u002BR\u002BZG7hKB0ZiSTgsXFT54fbrxurDLZfuPLtU=","/26wWziwS0KH/O896xGXBSLufvhay7wSjV2zdTxws18=","WyWGi43zm6PntQI/ucnnU3lxt5XudSMI/Un84LZNCNI=","pzhO73lOLr0aoNbQo3AXbJ7qsA2VDRY9Il7vtsfu6/g=","\u002BmYXsDWUwEv8MDDi5d\u002BdcyyfamgV9HnHNS18DvTVT8g=","KmtVrMRHetgVdPC7Ti0TzXPRMK5M58DycF9gOmYQmuk="],"CachedAssets":{},"CachedCopyCandidates":{}} \ No newline at end of file +{"GlobalPropertiesHash":"tbgf6NkZHDHq5Bwz13FNLNq2Biw7YSKbQETYkFTRirw=","FingerprintPatternsHash":"8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U=","PropertyOverridesHash":"8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U=","InputHashes":["oM\u002B92zWtRWs1ZZHQG5F\u002BZt\u002BmUwKFCmEHXl6yhJyDB9E=","m4ORQ/F\u002BR\u002BZG7hKB0ZiSTgsXFT54fbrxurDLZfuPLtU=","/26wWziwS0KH/O896xGXBSLufvhay7wSjV2zdTxws18=","WyWGi43zm6PntQI/ucnnU3lxt5XudSMI/Un84LZNCNI=","pzhO73lOLr0aoNbQo3AXbJ7qsA2VDRY9Il7vtsfu6/g=","\u002BmYXsDWUwEv8MDDi5d\u002BdcyyfamgV9HnHNS18DvTVT8g=","Tm7CcfRRz8vmlt8l9mYtBKdJqqgOF4FJyGXnX/H8m3Q="],"CachedAssets":{},"CachedCopyCandidates":{}} \ No newline at end of file diff --git a/frontend/src/data/mockData.ts b/frontend/src/data/mockData.ts index 4e18b9e..21a6892 100644 --- a/frontend/src/data/mockData.ts +++ b/frontend/src/data/mockData.ts @@ -1,78 +1,612 @@ import type { AuthUser, Category, Order, Product } from "../types"; -export const mockCategories: Category[] = [ - { id: 1, name: "Tech Essentials" }, - { id: 2, name: "Studio Setup" }, - { id: 3, name: "Smart Living" }, - { id: 4, name: "Travel Picks" } -]; +const photo = (seed: string) => `https://picsum.photos/seed/${encodeURIComponent(seed)}/900/700`; -export const mockProducts: Product[] = [ +export const mockCategories: Category[] = [ { id: 1, - name: "Flux One Headphones", - description: - "Wireless over-ear headphones tuned for deep focus sessions, clear calls, and long battery life.", - price: 179.9, - stock: 14, - categoryId: 1, - image: "linear-gradient(135deg, #ff8a5b 0%, #ffd166 100%)", - featured: true + name: "Audio", + description: "Headphones, speakers, and all-day listening essentials.", + image: photo("fluxon-audio-category") }, { id: 2, - name: "Nova Desk Lamp", - description: - "A sculptural LED lamp with warm-to-cool temperature control for late-night work and clean desk aesthetics.", - price: 69, - stock: 22, - categoryId: 2, - image: "linear-gradient(135deg, #0f4c81 0%, #9bd1e5 100%)", - featured: true + name: "Smart Devices", + description: "Wearables and connected products for modern routines.", + image: photo("fluxon-smart-devices-category") }, { id: 3, - name: "Orbit Speaker Mini", - description: - "Portable speaker with punchy sound, matte finish, and enough battery to last through weekend trips.", - price: 95.5, - stock: 8, - categoryId: 4, - image: "linear-gradient(135deg, #23395d 0%, #b6c9f0 100%)", - featured: true + name: "Accessories", + description: "Chargers, stands, cables, and practical daily add-ons.", + image: photo("fluxon-accessories-category") }, { id: 4, - name: "Aero Bottle", - description: - "Insulated stainless steel bottle designed for city commutes, travel, and everyday carry.", - price: 32, - stock: 40, - categoryId: 4, - image: "linear-gradient(135deg, #2a6f97 0%, #61c0bf 100%)" + name: "Home Tech", + description: "Useful tech for comfort, lighting, cleaning, and air quality.", + image: photo("fluxon-home-tech-category") }, { id: 5, - name: "Canvas Keyboard", - description: - "Compact mechanical keyboard with low-profile switches and a clean, minimalist layout.", - price: 124, - stock: 16, - categoryId: 1, - image: "linear-gradient(135deg, #5f0f40 0%, #fb8b24 100%)" - }, - { - id: 6, - name: "Pulse Air Purifier", - description: - "Smart purifier with quiet mode, room-quality indicator, and app-ready control concept.", - price: 210, - stock: 11, - categoryId: 3, - image: "linear-gradient(135deg, #355070 0%, #b56576 100%)" + name: "Personal Care", + description: "Smart grooming and self-care tools with a premium feel.", + image: photo("fluxon-personal-care-category") } ]; +type ProductSeed = Omit & { categoryName: Category["name"] }; + +const productSeeds: ProductSeed[] = [ + { + categoryName: "Audio", + name: "FluxBuds Air", + description: "True wireless earbuds with balanced sound and compact charging case.", + price: 69, + oldPrice: 89, + stock: 32, + badge: "New", + rating: 4.8, + reviewCount: 214, + featured: true, + newArrival: true, + image: photo("fluxon-audio-1") + }, + { + categoryName: "Audio", + name: "NovaSound ANC", + description: "Over-ear headphones with active noise cancellation and 40-hour playback.", + price: 149, + oldPrice: 189, + stock: 18, + badge: "Best Seller", + rating: 4.9, + reviewCount: 843, + featured: true, + bestSeller: true, + image: photo("fluxon-audio-2") + }, + { + categoryName: "Audio", + name: "PulseBeat Mini", + description: "Pocket speaker with rich bass tuning and splash-resistant finish.", + price: 54, + stock: 25, + badge: "Sale", + rating: 4.7, + reviewCount: 133, + image: photo("fluxon-audio-3") + }, + { + categoryName: "Audio", + name: "WaveLoop Pro", + description: "Neckband earphones designed for calls, commuting, and long battery life.", + price: 39, + oldPrice: 49, + stock: 26, + rating: 4.6, + reviewCount: 91, + image: photo("fluxon-audio-4") + }, + { + categoryName: "Audio", + name: "StudioArc Wired", + description: "Wired headphones with clean detail and lightweight studio-inspired design.", + price: 59, + stock: 21, + rating: 4.5, + reviewCount: 74, + image: photo("fluxon-audio-5") + }, + { + categoryName: "Audio", + name: "GameTone X", + description: "Gaming headset with soft cushions, boom mic, and immersive stereo sound.", + price: 79, + oldPrice: 99, + stock: 17, + rating: 4.8, + reviewCount: 205, + image: photo("fluxon-audio-6") + }, + { + categoryName: "Audio", + name: "RoomBar Slim", + description: "Minimal soundbar built for compact desks, bedrooms, and small TVs.", + price: 119, + stock: 10, + badge: "Hot", + rating: 4.7, + reviewCount: 168, + image: photo("fluxon-audio-7") + }, + { + categoryName: "Audio", + name: "EchoDot Pocket", + description: "Mini speaker with soft-touch finish and quick-connect wireless pairing.", + price: 35, + stock: 40, + newArrival: true, + rating: 4.5, + reviewCount: 52, + image: photo("fluxon-audio-8") + }, + { + categoryName: "Audio", + name: "QuietPods Max", + description: "Premium earbuds with deep ANC, transparency mode, and fast USB-C charging.", + price: 109, + oldPrice: 129, + stock: 15, + bestSeller: true, + rating: 4.9, + reviewCount: 479, + image: photo("fluxon-audio-9") + }, + { + categoryName: "Audio", + name: "Reference One", + description: "Closed-back headphones for focused work, editing, and crisp detail.", + price: 129, + stock: 8, + rating: 4.8, + reviewCount: 118, + image: photo("fluxon-audio-10") + }, + { + categoryName: "Smart Devices", + name: "Flux Watch S1", + description: "Smartwatch with AMOLED display, call support, and daily health tracking.", + price: 139, + oldPrice: 169, + stock: 22, + badge: "Best Seller", + rating: 4.9, + reviewCount: 692, + featured: true, + bestSeller: true, + image: photo("fluxon-smart-1") + }, + { + categoryName: "Smart Devices", + name: "PulseBand Fit", + description: "Slim fitness band with sleep tracking, step count, and workout reminders.", + price: 49, + stock: 38, + rating: 4.6, + reviewCount: 175, + image: photo("fluxon-smart-2") + }, + { + categoryName: "Smart Devices", + name: "Halo Ring Lite", + description: "Smart ring concept for sleep tracking and low-profile daily wear.", + price: 99, + oldPrice: 119, + stock: 11, + newArrival: true, + rating: 4.5, + reviewCount: 42, + image: photo("fluxon-smart-3") + }, + { + categoryName: "Smart Devices", + name: "DeskHub Go", + description: "Compact smart desk hub with clock, USB ports, and workspace shortcuts.", + price: 89, + stock: 14, + rating: 4.4, + reviewCount: 36, + image: photo("fluxon-smart-4") + }, + { + categoryName: "Smart Devices", + name: "WakeCube", + description: "Smart alarm clock with ambient light and gentle morning routines.", + price: 59, + stock: 29, + rating: 4.6, + reviewCount: 103, + image: photo("fluxon-smart-5") + }, + { + categoryName: "Smart Devices", + name: "TrackTag Duo", + description: "Bluetooth tracker set for keys, backpacks, and travel essentials.", + price: 29, + oldPrice: 39, + stock: 47, + bestSeller: true, + rating: 4.8, + reviewCount: 318, + image: photo("fluxon-smart-6") + }, + { + categoryName: "Smart Devices", + name: "Vista Mini", + description: "Portable smart display with clean interface for weather, timers, and media.", + price: 119, + stock: 9, + rating: 4.5, + reviewCount: 65, + image: photo("fluxon-smart-7") + }, + { + categoryName: "Smart Devices", + name: "HealthSync Band", + description: "Daily wellness band focused on recovery insights and heart tracking.", + price: 65, + stock: 19, + rating: 4.6, + reviewCount: 98, + image: photo("fluxon-smart-8") + }, + { + categoryName: "Smart Devices", + name: "Balance Scale Pro", + description: "Smart body scale with composition trends and companion-app readiness.", + price: 79, + stock: 13, + badge: "Popular", + rating: 4.7, + reviewCount: 151, + image: photo("fluxon-smart-9") + }, + { + categoryName: "Smart Devices", + name: "Beam Pocket", + description: "Mini projector made for flexible movie nights and portable presentations.", + price: 199, + oldPrice: 239, + stock: 7, + newArrival: true, + rating: 4.7, + reviewCount: 87, + featured: true, + image: photo("fluxon-smart-10") + }, + { + categoryName: "Accessories", + name: "VoltCharge 35", + description: "Fast wall charger with compact form and dual-device charging.", + price: 29, + stock: 56, + bestSeller: true, + rating: 4.8, + reviewCount: 521, + image: photo("fluxon-accessory-1") + }, + { + categoryName: "Accessories", + name: "MagBank 10K", + description: "Magnetic power bank sized for travel days and fast top-ups.", + price: 69, + oldPrice: 89, + stock: 31, + badge: "Best Seller", + rating: 4.9, + reviewCount: 405, + featured: true, + bestSeller: true, + image: photo("fluxon-accessory-2") + }, + { + categoryName: "Accessories", + name: "Braided Link C", + description: "Durable braided USB-C cable designed for desks, bags, and charging stations.", + price: 15, + stock: 82, + rating: 4.7, + reviewCount: 210, + image: photo("fluxon-accessory-3") + }, + { + categoryName: "Accessories", + name: "AirDock Pad", + description: "Minimal wireless charging pad with soft LED ring and anti-slip base.", + price: 34, + stock: 28, + rating: 4.5, + reviewCount: 88, + image: photo("fluxon-accessory-4") + }, + { + categoryName: "Accessories", + name: "Rise Laptop Stand", + description: "Foldable aluminum stand for cleaner posture and cooler laptop airflow.", + price: 42, + stock: 23, + rating: 4.8, + reviewCount: 144, + image: photo("fluxon-accessory-5") + }, + { + categoryName: "Accessories", + name: "FlexGrip Holder", + description: "Adjustable phone holder for desks, kitchens, and bedside use.", + price: 19, + stock: 37, + rating: 4.4, + reviewCount: 61, + image: photo("fluxon-accessory-6") + }, + { + categoryName: "Accessories", + name: "TravelPlug World", + description: "Travel adapter with clean design and multi-region compatibility.", + price: 39, + oldPrice: 49, + stock: 16, + newArrival: true, + rating: 4.6, + reviewCount: 57, + image: photo("fluxon-accessory-7") + }, + { + categoryName: "Accessories", + name: "KeySleeve Pro", + description: "Protective keyboard sleeve with felt lining and slim profile.", + price: 24, + stock: 26, + rating: 4.5, + reviewCount: 41, + image: photo("fluxon-accessory-8") + }, + { + categoryName: "Accessories", + name: "PortHub 6", + description: "Six-port USB hub for workstations that need flexible connectivity.", + price: 49, + stock: 21, + badge: "Hot", + rating: 4.7, + reviewCount: 129, + image: photo("fluxon-accessory-9") + }, + { + categoryName: "Accessories", + name: "Shield Case Clear", + description: "Transparent protective phone case with reinforced corners.", + price: 18, + stock: 44, + newArrival: true, + rating: 4.3, + reviewCount: 39, + image: photo("fluxon-accessory-10") + }, + { + categoryName: "Home Tech", + name: "PureFlow Air", + description: "Compact air purifier for bedrooms, workspaces, and quiet evenings.", + price: 189, + oldPrice: 229, + stock: 12, + featured: true, + badge: "Best Seller", + bestSeller: true, + rating: 4.9, + reviewCount: 366, + image: photo("fluxon-home-1") + }, + { + categoryName: "Home Tech", + name: "Luma Desk Beam", + description: "LED desk lamp with adjustable warmth and a clean architectural silhouette.", + price: 64, + stock: 34, + rating: 4.8, + reviewCount: 202, + image: photo("fluxon-home-2") + }, + { + categoryName: "Home Tech", + name: "SweepBot Mini", + description: "Robot vacuum built for daily dust pickup in compact living spaces.", + price: 249, + oldPrice: 299, + stock: 8, + rating: 4.7, + reviewCount: 157, + image: photo("fluxon-home-3") + }, + { + categoryName: "Home Tech", + name: "MistCore", + description: "Quiet humidifier with soft light and modern bedside presence.", + price: 55, + stock: 20, + newArrival: true, + rating: 4.6, + reviewCount: 84, + image: photo("fluxon-home-4") + }, + { + categoryName: "Home Tech", + name: "Aroma Glow", + description: "Aroma diffuser combining gentle vapor flow with ambient mood lighting.", + price: 39, + stock: 24, + rating: 4.5, + reviewCount: 72, + image: photo("fluxon-home-5") + }, + { + categoryName: "Home Tech", + name: "CoolFold Fan", + description: "Portable fan with foldable body and desk-friendly footprint.", + price: 45, + stock: 30, + rating: 4.6, + reviewCount: 93, + image: photo("fluxon-home-6") + }, + { + categoryName: "Home Tech", + name: "GlowBulb Kit", + description: "Smart bulb starter kit for mood shifts, desk scenes, and warm evenings.", + price: 79, + stock: 18, + badge: "Popular", + rating: 4.7, + reviewCount: 147, + image: photo("fluxon-home-7") + }, + { + categoryName: "Home Tech", + name: "WarmSpace Mini", + description: "Compact heater designed for focused work corners and cool mornings.", + price: 99, + oldPrice: 119, + stock: 11, + rating: 4.4, + reviewCount: 48, + image: photo("fluxon-home-8") + }, + { + categoryName: "Home Tech", + name: "ClearTap Filter", + description: "Countertop water filter unit with simple control and clean lines.", + price: 129, + stock: 9, + rating: 4.6, + reviewCount: 67, + image: photo("fluxon-home-9") + }, + { + categoryName: "Home Tech", + name: "DustGo Handheld", + description: "Handheld mini vacuum for shelves, keyboards, and quick spot cleaning.", + price: 59, + stock: 27, + newArrival: true, + featured: true, + rating: 4.7, + reviewCount: 112, + image: photo("fluxon-home-10") + }, + { + categoryName: "Personal Care", + name: "TrimEdge Pro", + description: "Cordless beard trimmer with precise guide combs and sharp stainless blades.", + price: 69, + oldPrice: 89, + stock: 22, + badge: "Best Seller", + featured: true, + bestSeller: true, + rating: 4.9, + reviewCount: 553, + image: photo("fluxon-care-1") + }, + { + categoryName: "Personal Care", + name: "SilkDry Air", + description: "Hair dryer with sleek build, fast airflow, and low-frizz styling mode.", + price: 99, + stock: 19, + rating: 4.8, + reviewCount: 188, + image: photo("fluxon-care-2") + }, + { + categoryName: "Personal Care", + name: "PureFace Brush", + description: "Facial cleansing brush for a softer skincare routine and clean countertop look.", + price: 34, + stock: 31, + rating: 4.5, + reviewCount: 77, + image: photo("fluxon-care-3") + }, + { + categoryName: "Personal Care", + name: "BodyLine Groomer", + description: "Water-resistant body groomer built for comfortable weekly upkeep.", + price: 49, + stock: 25, + rating: 4.6, + reviewCount: 90, + image: photo("fluxon-care-4") + }, + { + categoryName: "Personal Care", + name: "ReliefPulse Mini", + description: "Compact massage gun for post-workout recovery and daily neck tension relief.", + price: 119, + oldPrice: 149, + stock: 13, + bestSeller: true, + rating: 4.8, + reviewCount: 209, + image: photo("fluxon-care-5") + }, + { + categoryName: "Personal Care", + name: "SmoothTouch Epilator", + description: "Epilator with travel cap, dual speeds, and ergonomic body shape.", + price: 79, + stock: 17, + newArrival: true, + rating: 4.5, + reviewCount: 58, + image: photo("fluxon-care-6") + }, + { + categoryName: "Personal Care", + name: "BeardCare Kit", + description: "Premium beard kit with trimmer tools and simple daily maintenance feel.", + price: 59, + stock: 28, + rating: 4.7, + reviewCount: 101, + image: photo("fluxon-care-7") + }, + { + categoryName: "Personal Care", + name: "SleekIron One", + description: "Hair straightener with smooth plates and salon-inspired matte finish.", + price: 69, + stock: 15, + rating: 4.6, + reviewCount: 69, + image: photo("fluxon-care-8") + }, + { + categoryName: "Personal Care", + name: "SonicBrush Daily", + description: "Sonic toothbrush with travel case and two brushing intensity modes.", + price: 45, + stock: 33, + badge: "Popular", + rating: 4.7, + reviewCount: 142, + image: photo("fluxon-care-9") + }, + { + categoryName: "Personal Care", + name: "NailStudio Go", + description: "Portable manicure device built for neat, at-home finishing touches.", + price: 29, + stock: 30, + newArrival: true, + featured: true, + rating: 4.4, + reviewCount: 33, + image: photo("fluxon-care-10") + } +]; + +export const mockProducts: Product[] = productSeeds.map((seed, index) => { + const category = mockCategories.find((item) => item.name === seed.categoryName)!; + + return { + id: index + 1, + categoryId: category.id, + category, + ...seed + }; +}); + export const mockDemoUser: AuthUser = { name: "Demo Customer", email: "demo@fluxon.shop", @@ -87,21 +621,27 @@ export const mockOrders: Order[] = [ total: 248.9, items: [ { - productId: 1, - productName: "Flux One Headphones", + productId: 2, + productName: "NovaSound ANC", quantity: 1, - unitPrice: 179.9 + unitPrice: 149 }, { - productId: 4, - productName: "Aero Bottle", - quantity: 2, - unitPrice: 32 + productId: 21, + productName: "MagBank 10K", + quantity: 1, + unitPrice: 69 + }, + { + productId: 43, + productName: "ReliefPulse Mini", + quantity: 1, + unitPrice: 119 } ], payment: { method: "PayPal", - amount: 248.9, + amount: 337, status: "Paid" }, customerEmail: "demo@fluxon.shop", diff --git a/frontend/src/pages/CartPage.tsx b/frontend/src/pages/CartPage.tsx index e751bc1..ca4c12c 100644 --- a/frontend/src/pages/CartPage.tsx +++ b/frontend/src/pages/CartPage.tsx @@ -2,6 +2,7 @@ import { Link } from "react-router-dom"; import { useCart } from "../state/CartContext"; import { QuantityControl } from "../ui/QuantityControl"; import { StatusView } from "../ui/StatusView"; +import { visualStyle } from "../ui/visuals"; export function CartPage() { const { items, removeItem, updateQuantity, subtotal } = useCart(); @@ -33,7 +34,7 @@ export function CartPage() {
{items.map((item) => (
-
+

{item.product.name}

{item.product.description}

diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index 0060604..cffeafe 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -16,39 +16,41 @@ export function HomePage() { return ; } - const featuredProducts = products.filter((product) => product.featured).slice(0, 3); + const featuredProducts = products.filter((product) => product.featured).slice(0, 4); + const bestSellers = products.filter((product) => product.bestSeller).slice(0, 4); + const newArrivals = products.filter((product) => product.newArrival).slice(0, 4); return (
- Fluxon storefront -

Build a demo-ready shop now, then swap in real APIs as the backend catches up.

+ Next-Gen Everyday Tech +

Smart products built for modern daily life.

- This frontend is structured for hybrid delivery: polished enough for presentation, flexible enough for - incomplete endpoints. + Discover a curated storefront across Audio, Smart Devices, Accessories, Home Tech, and Personal Care with + a presentation-ready shopping flow.

- Explore Products + Shop Now - - Create Demo Account + + Explore Categories
{products.length} - Curated products + Store-ready products
{categories.length} - Shop categories + Core categories
- Mock + API - Safe for evolving backend + Deep Navy + Orange + Clean tech-commerce direction
@@ -57,14 +59,17 @@ export function HomePage() {
Categories -

Shape the browsing experience around the backend data model

+

Shop the five storefront pillars of Fluxon

{categories.map((category) => (

{category.name}

-

Use this category as a filter, navigation cue, and featured-content block.

+

{category.description}

+ + Explore +
))}
@@ -74,7 +79,7 @@ export function HomePage() {
Featured -

Presentation-friendly products for your MVP demo flow

+

Featured picks for the homepage hero flow

View All @@ -86,6 +91,72 @@ export function HomePage() { ))}
+ +
+
+ Promo +

Up to 30% off selected Audio and Accessories

+

Use this section for discounts, launches, or your strongest weekly campaign.

+ + See Offers + +
+
+ New Drop +

Fresh Smart Devices and Personal Care arrivals

+

Keep the homepage feeling alive with fast-moving campaign blocks like this one.

+ + Browse New Arrivals + +
+
+ +
+
+
+ Best Sellers +

Products that add social proof to your storefront

+
+
+
+ {bestSellers.map((product) => ( + + ))} +
+
+ +
+
+
+ New Arrivals +

Fresh additions to keep the shop feeling current

+
+
+
+ {newArrivals.map((product) => ( + + ))} +
+
+ +
+
+

Secure Checkout

+

Use this block to reassure users that payments and account actions are protected.

+
+
+

Fast Delivery

+

Highlight delivery expectations and shipping confidence early in the homepage flow.

+
+
+

Curated Products

+

Show that Fluxon is not random inventory, but a selected modern tech catalog.

+
+
+

Helpful Support

+

Good support messaging makes a student project feel more like a real commerce brand.

+
+
); } diff --git a/frontend/src/pages/ProductDetailsPage.tsx b/frontend/src/pages/ProductDetailsPage.tsx index dbd404c..994e7d8 100644 --- a/frontend/src/pages/ProductDetailsPage.tsx +++ b/frontend/src/pages/ProductDetailsPage.tsx @@ -5,6 +5,7 @@ import type { Product } from "../types"; import { StatusView } from "../ui/StatusView"; import { QuantityControl } from "../ui/QuantityControl"; import { useCart } from "../state/CartContext"; +import { visualStyle } from "../ui/visuals"; export function ProductDetailsPage() { const { productId } = useParams(); @@ -67,15 +68,22 @@ export function ProductDetailsPage() { return (
-
+
{product.category?.name ?? "Product details"}

{product.name}

{product.description}

+
+ {product.rating ? `${product.rating.toFixed(1)} / 5` : "New item"} + {product.reviewCount ? `${product.reviewCount} verified reviews` : "Fresh listing"} +
Price - EUR {product.price.toFixed(2)} +
+ EUR {product.price.toFixed(2)} + {product.oldPrice ? EUR {product.oldPrice.toFixed(2)} : null} +
Availability diff --git a/frontend/src/pages/ProductsPage.tsx b/frontend/src/pages/ProductsPage.tsx index e73d9a6..a57da72 100644 --- a/frontend/src/pages/ProductsPage.tsx +++ b/frontend/src/pages/ProductsPage.tsx @@ -27,7 +27,13 @@ export function ProductsPage() { ); } - switch (sort) { + switch (sort) { + case "new": + next.sort((a, b) => Number(b.newArrival) - Number(a.newArrival)); + break; + case "best": + next.sort((a, b) => Number(b.bestSeller) - Number(a.bestSeller)); + break; case "price-asc": next.sort((a, b) => a.price - b.price); break; @@ -72,6 +78,8 @@ export function ProductsPage() { />