R3ACTR · gitit24x7 · Feb 17, 2026 · Feb 17, 2026 · Feb 18, 2026 · Feb 18, 2026
diff --git a/app/dashboard/document-to-pdf/page.tsx b/app/dashboard/document-to-pdf/page.tsx
@@ -241,7 +241,7 @@
     };                                                                                                                                                          
 
     const downloadPdf = (pdfBytes: Uint8Array, sourceFileName: string) => {                                                                                     
-      const blob = new Blob([pdfBytes], { type: "application/pdf" });                                                                                           
+      const blob = new Blob([pdfBytes as any], { type: "application/pdf" });                                                                                           
       const url = URL.createObjectURL(blob);                                                                                                                    
 
       const a = document.createElement("a");                                                                                                                    

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
diff --git a/app/dashboard/pdf-merge/page.tsx b/app/dashboard/pdf-merge/page.tsx
diff --git a/app/dashboard/pdf-split/page.tsx b/app/dashboard/pdf-split/page.tsx
diff --git a/app/globals.css b/app/globals.css
@@ -217,7 +217,41 @@ body {
 }
 
 .glass-card {
-  background: var(--card);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--border);
+  background: color-mix(in srgb, var(--card) 70%, transparent);
+  backdrop-filter: blur(16px) saturate(180%);
+  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
+  box-shadow: var(--shadow-premium);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glass-card:hover {
+  box-shadow: var(--shadow-premium-hover);
+  transform: translateY(-2px);
+  background: color-mix(in srgb, var(--card) 80%, transparent);
+}
+
+.mesh-gradient {
+  background-color: var(--background);
+  background-image: 
+    radial-gradient(at 0% 0%, color-mix(in srgb, var(--primary) 15%, transparent) 0px, transparent 50%),
+    radial-gradient(at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0px, transparent 50%),
+    radial-gradient(at 100% 0%, color-mix(in srgb, var(--primary) 15%, transparent) 0px, transparent 50%);
+}
+
+.text-gradient {
+  background: linear-gradient(to right, var(--primary), var(--accent));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+}
+
+.premium-button {
+  @apply inline-flex items-center justify-center transition-all duration-300;
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 20%, transparent);
+}
+
+.premium-button:hover {
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 30%, transparent);
+  transform: translateY(-1px);
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,7 +3,8 @@ import localFont from "next/font/local";
 import "./globals.css";
 import { Header } from "@/components/Header";
 import { Footer } from "@/components/Footer";
-import Navbar from "@/components/Navbar";
+import { KeyboardShortcutsModal } from "@/components/KeyboardShortcutsModal";
+import { ScrollToTop } from "@/components/ScrollToTop";
 import { Toaster } from "sonner";
 import { ThemeProvider } from "@/components/ThemeProvider";
 
@@ -34,8 +35,9 @@ export default function RootLayout({
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
         <ThemeProvider>
           <Header />
-          <Navbar />
           {children}
+          <KeyboardShortcutsModal />
+          <ScrollToTop />
           <Footer />
         </ThemeProvider>
 

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,62 +1,118 @@
-"use client"; // ✅ MUST BE FIRST LINE
+"use client";
 
-import { FileText, ArrowLeftRight, ScanText, LayoutGrid } from "lucide-react";
+import { FileText, ArrowLeftRight, ScanText, LayoutGrid, Shield, WifiOff, ServerOff, ArrowRight } from "lucide-react";
 import Link from "next/link";
 import { FeatureCard } from "@/components/FeatureCard";
+import { motion } from "framer-motion";
 
 const features = [
   {
     icon: FileText,
-    title: "PDF Tools",
-    description: "Merge, split, and compress PDFs"
+    title: "PDF Powerhouse",
+    description: "Merge, split, and compress your PDF documents with military-grade precision and speed."
   },
   {
     icon: ArrowLeftRight,
-    title: "File Conversion",
-    description: "Convert documents easily"
+    title: "Format Fluidity",
+    description: "Seamlessly convert between document types without losing a single pixel of formatting."
   },
   {
     icon: ScanText,
-    title: "OCR",
-    description: "Extract text from images"
+    title: "AI OCR Insight",
+    description: "Intelligent text extraction that breathes life into static images and scanned documents."
   },
   {
     icon: LayoutGrid,
-    title: "Data Tools",
-    description: "Clean and process files"
+    title: "Advanced Processing",
+    description: "A suite of professional tools to clean, redact, and structure your data exactly how you need it."
   }
 ];
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex flex-col">
-
+    <div className="min-h-screen flex flex-col mesh-gradient overflow-hidden">
       <main className="flex-1">
+        {/* Hero Section */}
+        <section className="relative pt-20 pb-32 overflow-hidden">
+          <div className="container mx-auto px-6 md:px-12 flex flex-col items-center text-center">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8 }}
+              className="max-w-4xl"
+            >
+              <h1 className="text-6xl md:text-8xl font-black tracking-tighter text-foreground mb-8 leading-[0.9]">
+                Professional <br />
+                <span className="text-gradient">Document Control.</span>
+              </h1>
+              <p className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed">
+                Privacy-first, industry-standard document processing that runs entirely on your device. No uploads, no risks.
+              </p>
+            </motion.div>
 
-        {/* Banner moved to Global Header */}
-
-        {/* Hero Content */}
-        <div className="container mx-auto px-6 md:px-12 mt-12 flex flex-col items-center">
-
-          {/* CTA Section */}
-          <div className="mb-20 w-full flex justify-center">
-            <Link
-              href="/dashboard"
-              className="inline-flex items-center justify-center h-14 px-8 rounded-xl bg-primary text-primary-foreground font-medium text-lg hover:opacity-90 transition-transform hover:scale-105 shadow-lg"
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: 0.4, duration: 0.6 }}
+              className="flex flex-col sm:flex-row gap-4"
             >
-              Get Started
-            </Link>
+              <Link
+                href="/dashboard"
+                className="premium-button h-16 px-10 rounded-2xl bg-primary text-primary-foreground font-bold text-lg hover:opacity-90 shadow-2xl group"
+              >
+                Launch Dashboard
+                <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
+              </Link>
+              <Link
+                href="#features"
+                className="inline-flex items-center justify-center h-16 px-10 rounded-2xl border border-border/60 bg-background/50 backdrop-blur font-bold text-lg hover:bg-muted transition-all"
+              >
+                Explore Tools
+              </Link>
+            </motion.div>
+          </div>
+        </section>
+
+        {/* Benefits Section */}
+        <section className="py-24 border-y border-border/20 bg-card/20 backdrop-blur-sm">
+          <div className="container mx-auto px-6 md:px-12">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
+              {[
+                { icon: Shield, title: "100% Secure", text: "Your files never leave your machine. Processing happens locally in your browser sandbox." },
+                { icon: WifiOff, title: "Offline Ready", text: "Work from anywhere. DocuHub doesn't require an internet connection once loaded." },
+                { icon: ServerOff, title: "No Accounts", text: "Start processing instantly. We don't store your data, and we don't track your identity." }
+              ].map((item, i) => (
+                <motion.div
+                  key={i}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.1 }}
+                  className="flex flex-col items-center gap-4"
+                >
+                  <div className="p-4 rounded-2xl bg-primary/10 text-primary">
+                    <item.icon className="w-8 h-8" />
+                  </div>
+                  <h3 className="text-xl font-bold">{item.title}</h3>
+                  <p className="text-muted-foreground leading-relaxed">{item.text}</p>
+                </motion.div>
+              ))}
+            </div>
           </div>
+        </section>
 
-          {/* Features Grid Header */}
-          <div className="mb-8 text-center">
-            <h2 className="text-2xl md:text-3xl font-bold text-foreground">
-              What you can do with DocuHub
+        {/* Features Grid */}
+        <section id="features" className="container mx-auto px-6 md:px-12 py-32">
+          <div className="mb-20 text-center max-w-2xl mx-auto">
+            <h2 className="text-4xl font-bold tracking-tight text-foreground mb-4">
+              Designed for Professionals
             </h2>
+            <p className="text-muted-foreground text-lg">
+              DocuHub provides a high-performance suite of local-first tools for your critical document workflows.
+            </p>
           </div>
 
-          {/* 2x2 Features Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mb-24">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
             {features.map((feature, index) => (
               <FeatureCard
                 key={index}
@@ -66,7 +122,7 @@ export default function Home() {
               />
             ))}
           </div>
-        </div>
+        </section>
       </main>
     </div>
   );