feat: visual overhaul with updated images and UI components

Updated hero and section images, refreshed layout, page and navbar components.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/layout.tsx

@@ -47,11 +47,8 @@ export default function RootLayout({
         className={`${inter.variable} ${spaceGrotesk.variable} font-sans antialiased bg-navy text-white`}
       >
         <NoiseOverlay />
-        {/* Cinematic fixed lighting — persists across all pages */}
-        <div className="fixed top-[-10%] right-[0%] w-[800px] h-[800px] bg-cyan-500/15 blur-[180px] rounded-full pointer-events-none z-0" />
-        <div className="fixed bottom-0 left-[-10%] w-[600px] h-[600px] bg-indigo-600/10 blur-[150px] rounded-full pointer-events-none z-0" />
         <Navbar />
-        <main className="relative z-[1]">{children}</main>
+        <main>{children}</main>
         <Footer />
       </body>
     </html>

src/app/page.tsx

@@ -147,8 +147,8 @@ export default function Home() {
         <div className="absolute top-[-20%] right-[-10%] w-[800px] h-[800px] bg-cyan-500/10 blur-[150px] rounded-full pointer-events-none" />
         <div className="absolute bottom-0 left-[-10%] w-[600px] h-[600px] bg-purple-600/10 blur-[120px] rounded-full pointer-events-none" />
 
-        {/* Bottom fade */}
-        <div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-navy to-transparent z-[5]" />
+        {/* Deep cinematic floor — massive gradient fog rising from bottom */}
+        <div className="absolute bottom-0 left-0 right-0 h-[60%] bg-gradient-to-t from-navy from-[0%] via-navy/95 via-[20%] to-transparent z-[5]" />
 
         {/* Content — text floats OVER the image */}
         <div className="relative z-10 mx-auto max-w-7xl px-6 pt-32 pb-20 w-full">
@@ -198,14 +198,14 @@ export default function Home() {
             </motion.div>
           </motion.div>
 
-          {/* ── Trust bar ── */}
+          {/* ── Trust bar — sits on the "cinematic floor" ── */}
           <motion.div
-            className="mt-24 pt-10 border-t border-white/[0.04]"
+            className="relative z-10 mt-24 pt-10 border-t border-white/[0.06]"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ delay: 1.2, duration: 0.8 }}
           >
-            <p className="text-center text-xs text-slate-500 tracking-widest uppercase mb-8">
+            <p className="text-center text-xs text-slate-400 tracking-widest uppercase mb-8">
               Trusted by leading enterprises and governments worldwide
             </p>
             <div className="flex flex-wrap justify-center gap-x-16 gap-y-4 items-center">
@@ -218,7 +218,7 @@ export default function Home() {
               ].map((name) => (
                 <span
                   key={name}
-                  className="text-[11px] font-semibold text-slate-600 tracking-[0.2em] uppercase"
+                  className="text-[11px] font-semibold text-slate-300/70 tracking-[0.2em] uppercase"
                 >
                   {name}
                 </span>

src/components/Navbar.tsx

@@ -18,20 +18,15 @@ const navLinks = [
 export function Navbar() {
   const pathname = usePathname();
   const [mobileOpen, setMobileOpen] = useState(false);
-  const [hidden, setHidden] = useState(false);
-  const [lastScrollY, setLastScrollY] = useState(0);
-  const [scrolled, setScrolled] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
 
   useEffect(() => {
     const handleScroll = () => {
-      const currentScrollY = window.scrollY;
-      setHidden(currentScrollY > lastScrollY && currentScrollY > 80);
-      setScrolled(currentScrollY > 20);
-      setLastScrollY(currentScrollY);
+      setIsScrolled(window.scrollY > 20);
     };
     window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
-  }, [lastScrollY]);
+  }, []);
 
   useEffect(() => {
     setMobileOpen(false);
@@ -39,14 +34,12 @@ export function Navbar() {
 
   return (
     <>
-      <motion.header
-        className={`fixed top-0 left-0 right-0 z-40 transition-all duration-500 ${
-          scrolled
-            ? "bg-navy/60 backdrop-blur-2xl border-b border-white/[0.04] shadow-[0_4px_30px_rgba(0,0,0,0.3)]"
-            : "bg-transparent"
+      <header
+        className={`fixed top-0 left-0 w-full z-50 transition-all duration-500 ${
+          isScrolled
+            ? "bg-[#0A0F2E]/80 backdrop-blur-md border-b border-white/5 shadow-[0_4px_30px_rgba(0,0,0,0.3)]"
+            : "bg-transparent border-b border-transparent"
         }`}
-        animate={{ y: hidden ? -100 : 0 }}
-        transition={{ duration: 0.3 }}
       >
         <nav className="mx-auto max-w-7xl px-6 py-4 flex items-center justify-between">
           <Link href="/" className="flex items-center gap-2 relative z-10">
@@ -102,7 +95,7 @@ export function Navbar() {
             {mobileOpen ? <X size={24} /> : <Menu size={24} />}
           </button>
         </nav>
-      </motion.header>
+      </header>
 
       {/* Mobile menu */}
       <AnimatePresence>