Desktop css

package.json

@@ -44,9 +44,11 @@
     "@payloadcms/plugin-seo": "3.72.0",
     "@payloadcms/richtext-lexical": "3.72.0",
     "@payloadcms/ui": "3.72.0",
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.2.6",
     "@supabase/supabase-js": "^2.49.1",

src/app/(frontend)/globals.css

@@ -71,6 +71,11 @@
     --neutral-900: 0.15 0 0;
     --neutral-950: 0.1 0 0;
     --neutral-black: 0 0 0;
+
+    /* Background colors with subtle blue tinge */
+    --bg-primary: 0.08 0.01 245;
+    --bg-secondary: 0.12 0.01 245;
+    --bg-tertiary: 0.16 0.01 245;
   }
 
   [data-theme='dark'] {
@@ -129,6 +134,11 @@
     --neutral-900: 0.15 0 0;
     --neutral-950: 0.1 0 0;
     --neutral-black: 0 0 0;
+
+    /* Background colors with subtle blue tinge */
+    --bg-primary: 0.08 0.01 245;
+    --bg-secondary: 0.12 0.01 245;
+    --bg-tertiary: 0.16 0.01 245;
   }
 }
 

src/app/(frontend)/maintenance/page.tsx

@@ -1,31 +1,30 @@
-'use client'
+'use client';
 
-import Image from 'next/image'
-import { useState } from 'react'
+import Image from 'next/image';
+import { useState } from 'react';
 
 export default function MaintenancePage() {
-  const [imageLoaded, setImageLoaded] = useState(false)
+  const [imageLoaded, setImageLoaded] = useState(false);
 
   return (
     <div className="relative h-screen w-screen">
       {/* Background image */}
       <Image
         src="/images/future1.webp"
         alt="Background future space image"
-        fill
         style={{
           objectFit: 'cover',
           objectPosition: 'bottom',
         }}
-        unoptimized
+        priority
         className={`z-0 transition-opacity duration-500 ${
           imageLoaded ? 'opacity-100' : 'opacity-0'
         }`}
         onLoad={() => setImageLoaded(true)}
       />
 
       {/* Overlay */}
-      <div className="bg-neutral-black absolute inset-0 z-10 bg-opacity-70"></div>
+      <div className="absolute inset-0 z-10 bg-neutral-black bg-opacity-70"></div>
 
       {/* Centered content */}
       <div className="absolute inset-0 z-20 flex flex-col items-center justify-center space-y-6">
@@ -51,7 +50,7 @@ export default function MaintenancePage() {
         {/* Text */}
         <div className="px-6 text-center">
           {imageLoaded ? (
-            <h1 className="text-neutral-white text-xl md:text-xl">
+            <h1 className="text-xl text-neutral-white md:text-xl">
               This site is under construction. Come back soon!
             </h1>
           ) : (
@@ -62,5 +61,5 @@ export default function MaintenancePage() {
         </div>
       </div>
     </div>
-  )
+  );
 }