add images and redesign hompeage into sections, fix the dark color

apps/storefront/src/app/globals.css

@@ -8,7 +8,7 @@ body {
 
 html.dark body {
   background-image:
-    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
+    linear-gradient(180deg, #172554 0%, #1b3068 35%, #0f1a40 100%);
 }
 
 .shell {
@@ -22,20 +22,20 @@ html.dark body {
 }
 
 html.dark .card {
-  border-color: rgb(30 60 140 / 0.40);
-  background-color: rgb(11 25 55 / 0.72);
+  border-color: rgb(30 64 175 / 0.40);
+  background-color: rgb(23 37 84 / 0.72);
 }
 
 .site-page {
   @apply min-h-screen overflow-hidden text-blue-950;
   background-image:
-    linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
+    linear-gradient(180deg, #ffffff 0%, #fafafa 28%, #f5f5f5 58%, #ffffff 100%);
 }
 
 html.dark .site-page {
   @apply text-slate-100;
   background-image:
-    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
+    linear-gradient(180deg, #172554 0%, #1b3068 35%, #0f1a40 100%);
 }
 
 .site-glow {
@@ -47,7 +47,7 @@ html.dark .site-page {
 html.dark .site-glow {
   background-image:
     radial-gradient(circle at top left, rgba(251, 146, 60, 0.22), transparent 34%),
-    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 26%);
+    radial-gradient(circle at top right, rgba(30, 64, 175, 0.18), transparent 26%);
 }
 
 .site-section {
@@ -61,26 +61,26 @@ html.dark .site-glow {
 }
 
 html.dark .site-panel {
-  border-color: rgb(30 60 140 / 0.40);
-  background-color: rgb(11 25 55 / 0.72);
+  border-color: rgb(30 64 175 / 0.40);
+  background-color: rgb(23 37 84 / 0.72);
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
 }
 
 .site-panel-muted {
   @apply rounded-[2rem] border p-7 transition-colors sm:p-8;
   border-color: rgb(231 229 228 / 0.8);
-  background-image: linear-gradient(160deg, #f5f8ff 0%, #edf2ff 100%);
+  background-image: linear-gradient(160deg, #fafafa 0%, #f5f5f5 100%);
 }
 
 html.dark .site-panel-muted {
-  border-color: rgb(30 60 140 / 0.40);
-  background-image: linear-gradient(160deg, #0c1830 0%, #10203e 100%);
+  border-color: rgb(30 64 175 / 0.40);
+  background-image: linear-gradient(160deg, #172554 0%, #1b3068 100%);
 }
 
 .site-panel-contrast {
   @apply rounded-[2rem] border p-7 text-white shadow-[0_30px_80px_rgba(28,25,23,0.18)] transition-colors sm:p-8;
-  border-color: rgb(14 40 90 / 0.8);
-  background-color: rgb(10 25 75);
+  border-color: rgb(20 45 95 / 0.8);
+  background-color: #172554;
 }
 
 html.dark .site-panel-contrast {
@@ -104,5 +104,5 @@ html.dark .site-panel-contrast {
 }
 
 .site-link-secondary {
-  @apply rounded-full border border-stone-300 bg-white/85 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950/30 dark:text-blue-100 dark:hover:border-blue-400 dark:hover:text-white;
+  @apply rounded-full border border-stone-300 bg-white/85 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-[#2e50f1] dark:bg-[#2e50f1]/30 dark:text-[#1e3de0] dark:hover:border-[#1e3de0] dark:hover:text-white;
 }

apps/storefront/src/app/layout.tsx

@@ -8,9 +8,9 @@ export const metadata: Metadata = {
   title: 'RentalDriveGo Marketplace',
   description: 'Discover vehicles from trusted rental companies.',
   icons: {
-    icon: '/rentalcardrive.png',
+    icon: '/rentaldrivego.png',
     shortcut: '/favicon.ico',
-    apple: '/rentalcardrive.png',
+    apple: '/rentaldrivego.png',
   },
 }
 

apps/storefront/src/components/MarketplaceHeader.tsx

@@ -106,11 +106,12 @@ export default function MarketplaceHeader({
         <div className="flex items-center justify-between gap-3">
           <Link href="/" className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.14em] text-stone-900 dark:text-stone-100 sm:text-sm sm:tracking-[0.2em]">
             <Image
-              src="/rentalcardrive.png"
+              src="/rentaldrivego.png"
               alt="RentalDriveGo"
               width={36}
               height={36}
               priority
+              unoptimized
               className="h-8 w-8 rounded-md object-contain sm:h-9 sm:w-9"
             />
             <span>RentalDriveGo</span>