Mobile SEO & performance optimization

package.json

@@ -56,5 +56,11 @@
     "tailwindcss": "^4",
     "tsx": "^4.21.0",
     "typescript": "^5"
-  }
-}
+  },
+  "browserslist": [
+    "last 2 versions",
+    "not dead",
+    "> 0.5%",
+    "not ie 11"
+  ]
+}

public/noise.svg

@@ -0,0 +1,10 @@
+<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'>
+  <filter id='noiseFilter'>
+    <feTurbulence 
+      type='fractalNoise' 
+      baseFrequency='0.65' 
+      numOctaves='3' 
+      stitchTiles='stitch' />
+  </filter>
+  <rect width='100%' height='100%' filter='url(#noiseFilter)' />
+</svg>

src/app/globals.css

@@ -176,7 +176,7 @@ html {
 
 /* Optimize backdrop blur performance during scroll */
 [data-scroll-container] .backdrop-blur-xl {
-  will-change: auto;
+  will-change: transform;
 }
 
 /* Smooth transitions for interactive elements */
@@ -220,7 +220,7 @@ button, a, input, select, textarea {
 
 /* Optimize backdrop blur performance */
 .backdrop-blur-xl {
-  will-change: backdrop-filter;
+  will-change: transform;
   transform: translateZ(0);
 }
 

src/app/layout.tsx

@@ -5,16 +5,19 @@ import "./globals.css";
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
+  display: "swap",
 });
 
 const geistMono = Geist_Mono({
   variable: "--font-geist-mono",
   subsets: ["latin"],
+  display: "swap",
 });
 
 export const metadata: Metadata = {
-  title: "JUNOHUB",
-  description: "JUNOHUB - Your dropshipping and e-commerce management platform",
+  title: "JUNOHUB | Modern Commerce Infrastructure",
+  description: "The world's most advanced encrypted ecosystem for vendors and suppliers.",
+  viewport: "width=device-width, initial-scale=1, maximum-scale=5",
 };
 
 export const viewport = {

src/app/page.tsx

@@ -4,11 +4,17 @@ import { useMediaQuery } from "@/hooks/useMediaQuery"
 import { LandingNavbar } from "@/components/landing/LandingNavbar"
 import { LandingHero } from "@/components/landing/LandingHero"
 import { LandingFeatures } from "@/components/landing/LandingFeatures"
-import { LandingSolutions } from "@/components/landing/LandingSolutions"
 import { LandingFooter } from "@/components/landing/LandingFooter"
 import { MobileHero } from "@/components/landing/mobile/MobileHero"
 import { MobileFeatures } from "@/components/landing/mobile/MobileFeatures"
 
+import dynamic from "next/dynamic"
+
+const LandingSolutions = dynamic(() => import("@/components/landing/LandingSolutions").then(mod => mod.LandingSolutions), {
+  ssr: true,
+  loading: () => <div className="min-h-[400px] bg-[#0a0e1a]" />
+})
+
 export default function HomePage() {
   const isMobile = useMediaQuery("(max-width: 768px)")
 

src/components/landing/LandingHero.tsx

@@ -28,7 +28,7 @@ export function LandingHero() {
             </div>
 
             {/* Grid Pattern */}
-            <div className="absolute inset-0 z-0 opacity-[0.03] bg-[url('https://grainy-gradients.vercel.app/noise.svg')] pointer-events-none" />
+            <div className="absolute inset-0 z-0 opacity-[0.03] bg-[url('/noise.svg')] pointer-events-none" />
             <div
                 className="absolute inset-0 z-0 opacity-[0.4]"
                 style={{