From bfd858ca6216c14d5dd6c3bc32081c9489cca0ce Mon Sep 17 00:00:00 2001
From: root <root@Talat.Talat>
Date: Sun, 15 Feb 2026 12:29:17 +0500
Subject: [PATCH] Mobile SEO & performance optimization

---
 package.json                           | 10 ++++++++--
 public/noise.svg                       | 10 ++++++++++
 src/app/globals.css                    |  4 ++--
 src/app/layout.tsx                     |  7 +++++--
 src/app/page.tsx                       |  8 +++++++-
 src/components/landing/LandingHero.tsx |  2 +-
 6 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 public/noise.svg

diff --git a/package.json b/package.json
index 653f10d..aec8834 100644
--- a/package.json
+++ b/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"
+  ]
+}
\ No newline at end of file
diff --git a/public/noise.svg b/public/noise.svg
new file mode 100644
index 0000000..6549ee3
--- /dev/null
+++ b/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>
diff --git a/src/app/globals.css b/src/app/globals.css
index a3ae34a..d05e89a 100644
--- a/src/app/globals.css
+++ b/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);
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index eb3f7f2..e19907f 100644
--- a/src/app/layout.tsx
+++ b/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 = {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0c556b1..bda4d65 100644
--- a/src/app/page.tsx
+++ b/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)")
 
diff --git a/src/components/landing/LandingHero.tsx b/src/components/landing/LandingHero.tsx
index cd8e948..ef4281d 100644
--- a/src/components/landing/LandingHero.tsx
+++ b/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={{