Initial NEXT JS code

generate_solution_routes.js

@@ -0,0 +1,52 @@
+const fs = require('fs');
+const path = require('path');
+
+const srcAppDir = path.join(__dirname, 'src', 'app');
+const solutionsDir = path.join(srcAppDir, 'solutions');
+
+if (!fs.existsSync(solutionsDir)) {
+  fs.mkdirSync(solutionsDir, { recursive: true });
+}
+
+const routes = {
+  // Department
+  'administration/page.tsx': `export { default } from "../../(features)/SolutionPage/department/AdministrationPage";`,
+  'finance/page.tsx': `export { default } from "../../(features)/SolutionPage/department/FinancePage";`,
+  'hr/page.tsx': `export { default } from "../../(features)/SolutionPage/department/HrPage";`,
+  'procurement/page.tsx': `export { default } from "../../(features)/SolutionPage/department/ProcurementPage";`,
+  'sales/page.tsx': `export { default } from "../../(features)/SolutionPage/department/SalesPage";`,
+
+  // Industry
+  'construction/page.tsx': `export { default } from "../../(features)/SolutionPage/industry/ConstructionPage";`,
+  'education/page.tsx': `export { default } from "../../(features)/SolutionPage/industry/EducationPage";`,
+  'government/page.tsx': `export { default } from "../../(features)/SolutionPage/industry/GovernmentPage";`,
+  'healthcare/page.tsx': `export { default } from "../../(features)/SolutionPage/industry/HealthcarePage";`,
+  'insurance/page.tsx': `export { default } from "../../(features)/SolutionPage/industry/InsurancePage";`,
+  'logistics/page.tsx': `export { default } from "../../(features)/SolutionPage/industry/LogisticsPage";`,
+  'manufacturing/page.tsx': `export { default } from "../../(features)/SolutionPage/industry/ManufacturingPage";`,
+
+  // Use Case
+  'client-onboarding/page.tsx': `export { default } from "../../(features)/SolutionPage/usecase/ClientOnboardingPage";`,
+  'contract-management/page.tsx': `export { default } from "../../(features)/SolutionPage/usecase/ContractManagementPage";`,
+  'document-archiving/page.tsx': `export { default } from "../../(features)/SolutionPage/usecase/DocumentArchivingPage";`,
+  'employee-onboarding/page.tsx': `export { default } from "../../(features)/SolutionPage/usecase/EmployeeOnboardingPage";`,
+  'invoice-approvals/page.tsx': `export { default } from "../../(features)/SolutionPage/usecase/InvoiceApprovalsPage";`,
+  'lease-agreements/page.tsx': `export { default } from "../../(features)/SolutionPage/usecase/LeaseAgreementsPage";`,
+  'leave-requests/page.tsx': `export { default } from "../../(features)/SolutionPage/usecase/LeaveRequestsPage";`,
+  'purchase-requests/page.tsx': `export { default } from "../../(features)/SolutionPage/usecase/PurchaseRequestsPage";`,
+  'site-inspection/page.tsx': `export { default } from "../../(features)/SolutionPage/usecase/SiteInspectionPage";`,
+  'vendor-approvals/page.tsx': `export { default } from "../../(features)/SolutionPage/usecase/VendorApprovalsPage";`,
+};
+
+for (const [routePath, content] of Object.entries(routes)) {
+  const fullPath = path.join(solutionsDir, routePath);
+  const dir = path.dirname(fullPath);
+  
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+
+  fs.writeFileSync(fullPath, content, 'utf8');
+}
+
+console.log('Solution routes generated successfully.');

migrate.js

@@ -0,0 +1,79 @@
+const fs = require('fs');
+const path = require('path');
+
+const srcAppDir = path.join(__dirname, 'src', 'app');
+
+// 1. Walk through all files and add "use client" and replace react-router-dom
+function walkDir(dir, callback) {
+  fs.readdirSync(dir).forEach(f => {
+    const dirPath = path.join(dir, f);
+    const isDirectory = fs.statSync(dirPath).isDirectory();
+    if (isDirectory) {
+      walkDir(dirPath, callback);
+    } else {
+      callback(path.join(dir, f));
+    }
+  });
+}
+
+walkDir(srcAppDir, (filePath) => {
+  if (filePath.endsWith('.tsx') || filePath.endsWith('.ts')) {
+    let content = fs.readFileSync(filePath, 'utf8');
+    
+    // Add "use client" if it's a React component or hook and doesn't have it
+    if (!content.includes('"use client"') && !content.includes("'use client'")) {
+        // Just add to all ts/tsx files for now except layout.tsx and page.tsx
+        if (!filePath.endsWith('layout.tsx') && filePath !== path.join(srcAppDir, 'page.tsx')) {
+            content = '"use client";\n' + content;
+        }
+    }
+
+    // Replace react-router-dom imports
+    if (content.includes('react-router-dom')) {
+        // Link
+        content = content.replace(/import\s+{[^}]*Link[^}]*}\s+from\s+['"]react-router-dom['"];?/g, "import Link from 'next/link';");
+        // useNavigate
+        content = content.replace(/useNavigate/g, 'useRouter');
+        content = content.replace(/import\s+{[^}]*useRouter[^}]*}\s+from\s+['"]react-router-dom['"];?/g, "import { useRouter } from 'next/navigation';");
+        
+        // useLocation -> usePathname, useSearchParams
+        if (content.includes('useLocation')) {
+             content = content.replace(/useLocation/g, 'usePathname'); // naive replacement, will need manual fixing if they use location.search
+             content = content.replace(/import\s+{[^}]*usePathname[^}]*}\s+from\s+['"]react-router-dom['"];?/g, "import { usePathname } from 'next/navigation';");
+        }
+        
+        // General fallback if multiple imports were in one line
+        content = content.replace(/import\s+{(.*)}\s+from\s+['"]react-router-dom['"];?/g, (match, p1) => {
+             let imports = p1.split(',').map(s => s.trim());
+             let nextNav = [];
+             let hasLink = false;
+             imports.forEach(i => {
+                 if (i === 'Link') hasLink = true;
+                 else if (i === 'useNavigate') nextNav.push('useRouter');
+                 else if (i === 'useLocation') nextNav.push('usePathname', 'useSearchParams');
+             });
+             let res = '';
+             if (hasLink) res += "import Link from 'next/link';\n";
+             if (nextNav.length > 0) res += `import { ${[...new Set(nextNav)].join(', ')} } from 'next/navigation';\n`;
+             return res;
+        });
+    }
+
+    // Replace <Link to="..."> with <Link href="...">
+    content = content.replace(/<Link([^>]+)to=/g, '<Link$1href=');
+
+    // Remove lucide-react if not installed (they are in the old project, let's assume they'll install it)
+    
+    // Fix asset imports (e.g. import bg from '@/assets/landing/...')
+    // We moved assets to public/landing/...
+    // Let's replace '@/assets/landing/...' with '/landing/...'
+    content = content.replace(/import\s+(\w+)\s+from\s+['"]@\/assets\/landing\/([^'"]+)['"];?/g, 'const $1 = "/landing/$2";');
+    // Also replace "../../assets/landing"
+    content = content.replace(/import\s+(\w+)\s+from\s+['"]\.\.\/\.\.\/assets\/landing\/([^'"]+)['"];?/g, 'const $1 = "/landing/$2";');
+    content = content.replace(/import\s+(\w+)\s+from\s+['"]\.\.\/assets\/landing\/([^'"]+)['"];?/g, 'const $1 = "/landing/$2";');
+
+    fs.writeFileSync(filePath, content, 'utf8');
+  }
+});
+
+console.log('Migration script completed.');

package-lock.json

@@ -8,9 +8,12 @@
       "name": "docqube_landing",
       "version": "0.1.0",
       "dependencies": {
+        "clsx": "^2.1.1",
+        "lucide-react": "^1.41.0",
         "next": "16.3.4",
         "react": "19.2.8",
-        "react-dom": "19.2.8"
+        "react-dom": "19.2.8",
+        "tailwind-merge": "^3.6.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -2853,6 +2856,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -5156,6 +5168,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.41.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.41.0.tgz",
+      "integrity": "sha512-6lksP35l6KszDKUeRTi4LV7i6DEe0Yzl2ALJm9j4c5xEYN91GdW1xGsawGMOg2mgjF5GHBVX8pKX9kP+cWsP3Q==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -6373,6 +6394,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",

package.json

@@ -9,9 +9,12 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.41.0",
     "next": "16.3.4",
     "react": "19.2.8",
-    "react-dom": "19.2.8"
+    "react-dom": "19.2.8",
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

restructure.js

@@ -0,0 +1,83 @@
+const fs = require('fs');
+const path = require('path');
+
+const srcAppDir = path.join(__dirname, 'src', 'app');
+const featuresDir = path.join(srcAppDir, '(features)');
+
+if (!fs.existsSync(featuresDir)) {
+  fs.mkdirSync(featuresDir);
+}
+
+const foldersToMove = [
+  'Components',
+  'ContactPage',
+  'HomePage',
+  'Pricing',
+  'ProductPage',
+  'ResourcePage',
+  'SecurityPage',
+  'SolutionPage'
+];
+
+// Move folders to (features)
+foldersToMove.forEach(folder => {
+  const oldPath = path.join(srcAppDir, folder);
+  const newPath = path.join(featuresDir, folder);
+  if (fs.existsSync(oldPath)) {
+    fs.renameSync(oldPath, newPath);
+  }
+});
+
+// Recreate proper lowercase routes
+const routes = {
+  // Home
+  'page.tsx': `export { default } from "./(features)/HomePage/Index";`,
+
+  // Pricing
+  'pricing/page.tsx': `export { default } from "../(features)/Pricing/index";`,
+
+  // Contact
+  'contact/page.tsx': `export { default } from "../(features)/ContactPage/MainContactPage";`,
+  'contact-us/page.tsx': `export { default } from "../(features)/ContactPage/MainContactPage";`,
+  'demo/page.tsx': `export { default } from "../(features)/ContactPage/MainContactPage";`,
+  'book-a-demo/page.tsx': `export { default } from "../(features)/ContactPage/MainContactPage";`,
+
+  // Security
+  'security/page.tsx': `export { default } from "../(features)/SecurityPage/Index";`,
+
+  // Blog / Resources
+  'blog/page.tsx': `export { default } from "../(features)/ResourcePage/BlogPage";`,
+  'resources/page.tsx': `export { default } from "../(features)/ResourcePage/BlogPage";`,
+  'resources/blog/page.tsx': `export { default } from "../../(features)/ResourcePage/BlogPage";`,
+  'blog/[slug]/page.tsx': `export { default } from "../../(features)/ResourcePage/BlogDetailPage";`,
+
+  // Products
+  'product/platform/page.tsx': `export { default } from "../../(features)/ProductPage/AllProductsPage";`,
+  'product/drive/page.tsx': `export { default } from "../../(features)/ProductPage/DrivePage";`,
+  'product/pdf-editor/page.tsx': `export { default } from "../../(features)/ProductPage/PdfEditorPage";`,
+  'product/workflows/page.tsx': `export { default } from "../../(features)/ProductPage/WorkflowsPage";`,
+  'product/sign/page.tsx': `export { default } from "../../(features)/ProductPage/SignPage";`,
+  'product/free-pdf-tools/page.tsx': `export { default } from "../../(features)/ProductPage/AllPdfToolsPage";`,
+  'product/free-editor/page.tsx': `export { default } from "../../(features)/ProductPage/FreeEditorPages";`,
+  'product/embed/page.tsx': `export { default } from "../../(features)/ProductPage/EmbedPage";`,
+
+  // Solutions
+  'solutions/page.tsx': `export { default } from "../(features)/SolutionPage/AllSolutionsPage";`,
+  'solutions/enterprise/page.tsx': `export { default } from "../../(features)/SolutionPage/EnterPrisePage";`,
+  'solutions/legal/page.tsx': `export { default } from "../../(features)/SolutionPage/LegalPage";`,
+  'solutions/real-estate/page.tsx': `export { default } from "../../(features)/SolutionPage/RealEstatePage";`,
+  'solutions/operations/page.tsx': `export { default } from "../../(features)/SolutionPage/OperationsPage";`,
+};
+
+for (const [routePath, content] of Object.entries(routes)) {
+  const fullPath = path.join(srcAppDir, routePath);
+  const dir = path.dirname(fullPath);
+  
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+
+  fs.writeFileSync(fullPath, content, 'utf8');
+}
+
+console.log('Restructuring completed.');

setupRoutes.js

@@ -0,0 +1,60 @@
+const fs = require('fs');
+const path = require('path');
+
+const srcAppDir = path.join(__dirname, 'src', 'app');
+
+const routes = {
+  // Home
+  'page.tsx': `export { default } from "./HomePage/Index";`,
+
+  // Pricing
+  'pricing/page.tsx': `export { default } from "../Pricing/index";`,
+
+  // Contact
+  'contact/page.tsx': `export { default } from "../ContactPage/MainContactPage";`,
+  'contact-us/page.tsx': `export { default } from "../ContactPage/MainContactPage";`,
+  'demo/page.tsx': `export { default } from "../ContactPage/MainContactPage";`,
+  'book-a-demo/page.tsx': `export { default } from "../ContactPage/MainContactPage";`,
+
+  // Security
+  'security/page.tsx': `export { default } from "../SecurityPage/Index";`,
+
+  // Blog / Resources
+  'blog/page.tsx': `export { default } from "../ResourcePage/BlogPage";`,
+  'resources/page.tsx': `export { default } from "../ResourcePage/BlogPage";`,
+  'resources/blog/page.tsx': `export { default } from "../../ResourcePage/BlogPage";`,
+  'blog/[slug]/page.tsx': `export { default } from "../../ResourcePage/BlogDetailPage";`,
+
+  // Products
+  'product/platform/page.tsx': `export { default } from "../../ProductPage/AllProductsPage";`,
+  'product/drive/page.tsx': `export { default } from "../../ProductPage/DrivePage";`,
+  'product/pdf-editor/page.tsx': `export { default } from "../../ProductPage/PdfEditorPage";`,
+  'product/workflows/page.tsx': `export { default } from "../../ProductPage/WorkflowsPage";`,
+  'product/sign/page.tsx': `export { default } from "../../ProductPage/SignPage";`,
+  'product/free-pdf-tools/page.tsx': `export { default } from "../../ProductPage/AllPdfToolsPage";`,
+  'product/free-editor/page.tsx': `export { default } from "../../ProductPage/FreeEditorPages";`,
+  'product/embed/page.tsx': `export { default } from "../../ProductPage/EmbedPage";`,
+
+  // Solutions
+  'solutions/page.tsx': `export { default } from "../SolutionPage/AllSolutionsPage";`,
+  'solutions/enterprise/page.tsx': `export { default } from "../../SolutionPage/EnterPrisePage";`,
+  'solutions/legal/page.tsx': `export { default } from "../../SolutionPage/LegalPage";`,
+  'solutions/real-estate/page.tsx': `export { default } from "../../SolutionPage/RealEstatePage";`,
+  'solutions/operations/page.tsx': `export { default } from "../../SolutionPage/OperationsPage";`,
+};
+
+for (const [routePath, content] of Object.entries(routes)) {
+  const fullPath = path.join(srcAppDir, routePath);
+  const dir = path.dirname(fullPath);
+  
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+
+  // Next.js components that re-export need "use client" if the underlying component uses hooks,
+  // but it's cleaner to just do standard re-exports if they are client components.
+  // We'll write the content directly.
+  fs.writeFileSync(fullPath, content, 'utf8');
+}
+
+console.log('Routes setup completed.');

src/app/(features)/Components/Button.tsx

@@ -0,0 +1,49 @@
+"use client";
+import React, { ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+import Link from 'next/link';
+
+type ButtonBaseProps = {
+  variant?: 'primary' | 'outline';
+  href?: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+type ButtonAsButton = ButtonBaseProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps>;
+type ButtonAsLink = ButtonBaseProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBaseProps>;
+
+type ButtonProps = ButtonAsButton | ButtonAsLink;
+
+const Button: React.FC<ButtonProps> = ({ 
+  className, 
+  variant = 'primary', 
+  href, 
+  children, 
+  ...props 
+}) => {
+  const baseStyles = "inline-flex items-center justify-center px-10 h-[50px] rounded-full font-bold text-[14px] uppercase tracking-wide transition-all active:scale-95";
+  
+  const variants = {
+    primary: "bg-[#444CE7] text-white hover:bg-[#3841c7] hover:-translate-y-[1px]",
+    outline: "bg-transparent text-[#111111] border-[1.5px] border-[#111111] hover:bg-gray-50 hover:-translate-y-[1px]",
+  };
+
+  const classes = cn(baseStyles, variants[variant], className);
+
+  if (href) {
+    return (
+      <Link href={href} className={classes} {...(props as any)}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <button className={classes} {...(props as any)}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/app/(features)/Components/ChallengeSection.tsx

@@ -0,0 +1,151 @@
+"use client";
+import React from 'react';
+import Link from 'next/link';
+import { Sparkles } from 'lucide-react';
+const dotBg = "/landing/DotBg.png";
+
+export interface ChallengeCardItem {
+  tag?: string;
+  title: string;
+  description?: string;
+  linkText?: string;
+  linkUrl?: string;
+  onClick?: () => void;
+}
+
+export interface ChallengeSectionProps {
+  badgeText?: string;
+  badgeIcon?: React.ReactNode;
+  title?: string;
+  challenges: (string | ChallengeCardItem)[];
+  showHeader?: boolean;
+  className?: string;
+  gridClassName?: string;
+  cardClassName?: string;
+  showDotBg?: boolean;
+}
+
+const ChallengeSection: React.FC<ChallengeSectionProps> = ({
+  badgeText = "THE CHALLENGE",
+  badgeIcon = <Sparkles className="w-4 h-4" />,
+  title,
+  challenges = [],
+  showHeader,
+  className = "",
+  gridClassName = "grid grid-cols-1 md:grid-cols-3 gap-6",
+  cardClassName = "",
+  showDotBg = true
+}) => {
+  const shouldShowHeader = showHeader ?? (Boolean(title) || Boolean(badgeText && badgeText !== "THE CHALLENGE"));
+
+  return (
+    <section 
+      className={`relative py-24 bg-[#FCFCFC] overflow-hidden ${className}`}
+      style={
+        showDotBg
+          ? {
+              backgroundImage: `url(${dotBg})`,
+              backgroundSize: 'contain',
+              backgroundPosition: 'center',
+              backgroundRepeat: 'repeat'
+            }
+          : undefined
+      }
+    >
+      <div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        
+        {/* Header (optional if showHeader is true or title provided) */}
+        {shouldShowHeader && (
+          <div className="text-center mb-16">
+            {badgeText && (
+              <div className="inline-flex items-center gap-1.5 text-[#444CE7] mb-6">
+                {badgeIcon}
+                <span className="text-[11px] font-bold tracking-widest uppercase">{badgeText}</span>
+              </div>
+            )}
+            {title && (
+              <h2 className="text-3xl md:text-4xl font-medium text-[#0a1236] tracking-tight">
+                {title}
+              </h2>
+            )}
+          </div>
+        )}
+
+        {/* Cards Grid */}
+        <div className={gridClassName}>
+          {challenges.map((challenge, index) => {
+            if (typeof challenge === 'string') {
+              return (
+                <div 
+                  key={index}
+                  className={`rounded-[14px] p-6 sm:p-7 shadow-[0_0_4px_0_rgba(143,143,143,0.25)] flex items-center text-left min-h-[110px] transition-transform duration-300 hover:-translate-y-1 ${cardClassName}`}
+                  style={{
+                    background: 'linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to bottom, #FFFFFF 0%, #414EE7 100%) border-box',
+                    border: '1px solid transparent',
+                  }}
+                >
+                  <h3 className="text-[15px] sm:text-[16px] font-bold text-[#0a1236] leading-snug">
+                    {challenge}
+                  </h3>
+                </div>
+              );
+            }
+
+            const item = challenge as ChallengeCardItem;
+            const cardInner = (
+              <div 
+                className={`rounded-[18px] p-6 sm:p-7 shadow-[0_2px_10px_0_rgba(15,23,42,0.04)] hover:shadow-xl flex flex-col justify-between text-left h-full min-h-[220px] transition-all duration-300 hover:-translate-y-1.5 group bg-white ${
+                  item.onClick || item.linkUrl ? 'cursor-pointer' : ''
+                } ${cardClassName}`}
+                style={{
+                  background: 'linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to bottom, #FFFFFF 0%, #414EE7 100%) border-box',
+                  border: '1px solid transparent',
+                }}
+                onClick={item.onClick}
+              >
+                <div>
+                  {item.tag && (
+                    <div className="mb-4">
+                      <span className="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-semibold tracking-wide bg-[#EEF2FF] text-[#444CE7]">
+                        {item.tag}
+                      </span>
+                    </div>
+                  )}
+                  <h3 className="text-[17px] sm:text-[18px] font-bold text-[#0B1538] leading-snug mb-3 group-hover:text-[#444CE7] transition-colors">
+                    {item.title}
+                  </h3>
+                  {item.description && (
+                    <p className="text-[13px] sm:text-[14px] text-gray-500 leading-relaxed line-clamp-3 mb-6 font-normal">
+                      {item.description}
+                    </p>
+                  )}
+                </div>
+
+                {item.linkText && (
+                  <div className="mt-auto pt-2">
+                    <span className="text-[14px] font-semibold text-[#444CE7] group-hover:underline inline-flex items-center gap-1">
+                      {item.linkText}
+                    </span>
+                  </div>
+                )}
+              </div>
+            );
+
+            if (item.linkUrl) {
+              return (
+                <Link key={index} href={item.linkUrl} className="block h-full no-underline">
+                  {cardInner}
+                </Link>
+              );
+            }
+
+            return <div key={index} className="h-full">{cardInner}</div>;
+          })}
+        </div>
+
+      </div>
+    </section>
+  );
+};
+
+export default ChallengeSection;

src/app/(features)/Components/CustomFeatures.tsx

@@ -0,0 +1,111 @@
+"use client";
+import React from 'react';
+import { Check } from 'lucide-react';
+
+export interface FeatureItem {
+  badge: string;
+  title: string;
+  description: string;
+  bulletPoints: string[];
+  imagePlaceholderText?: string;
+  primaryButtonText?: string;
+  secondaryButtonText?: string;
+  image?: string;
+}
+
+export interface ProductFeaturesProps {
+  features: FeatureItem[];
+}
+
+const ProductFeatures: React.FC<ProductFeaturesProps> = ({ features }) => {
+  if (!features || features.length === 0) return null;
+
+  return (
+    <section className="py-24 bg-white overflow-hidden">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-32">
+        
+        {features.map((feature, idx) => {
+          // Alternate left and right layouts
+          const isReversed = idx % 2 !== 0;
+
+          return (
+            <div 
+              key={idx} 
+              className={`flex flex-col ${isReversed ? 'lg:flex-row-reverse' : 'lg:flex-row'} items-center gap-12 lg:gap-24`}
+            >
+              <div className="flex-1 w-full max-w-xl">
+                <div className="inline-flex items-center text-[#444CE7] font-semibold text-[11px] tracking-widest uppercase mb-6">
+                  <SparklesIcon />
+                  {feature.badge}
+                </div>
+                <h2 className="text-3xl md:text-4xl font-medium text-[#0a1236] tracking-tight mb-6">
+                  {feature.title}
+                </h2>
+                <p className="text-[15px] text-gray-600 leading-relaxed mb-8">
+                  {feature.description}
+                </p>
+                
+                {feature.bulletPoints && feature.bulletPoints.length > 0 && (
+                  <ul className="space-y-4 mb-8">
+                    {feature.bulletPoints.map((point, pIdx) => (
+                      <li key={pIdx} className="flex items-start">
+                        <Check className="w-5 h-5 text-[#444CE7] mr-3 flex-shrink-0 mt-0.5" />
+                        <span className="text-[14px] font-medium text-gray-700">{point}</span>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+
+                {/* Optional Buttons */}
+                {(feature.primaryButtonText || feature.secondaryButtonText) && (
+                  <div className="flex flex-col sm:flex-row items-center gap-4 mt-8">
+                    {feature.primaryButtonText && (
+                      <button className="w-full sm:w-auto px-6 py-3 bg-[#444CE7] text-white text-[12px] font-bold tracking-widest uppercase rounded-full hover:bg-blue-700 transition-colors shadow-sm">
+                        {feature.primaryButtonText}
+                      </button>
+                    )}
+                    {feature.secondaryButtonText && (
+                      <button className="w-full sm:w-auto px-6 py-3 bg-white border-[1.5px] border-gray-900 text-gray-900 text-[12px] font-bold tracking-widest uppercase rounded-full hover:bg-gray-50 transition-colors shadow-sm">
+                        {feature.secondaryButtonText}
+                      </button>
+                    )}
+                  </div>
+                )}
+              </div>
+              
+              <div className={`flex-1 w-full flex justify-center ${isReversed ? 'lg:justify-start' : 'lg:justify-end'}`}>
+                {feature.image ? (
+                  <img 
+                    src={feature.image} 
+                    alt={feature.title} 
+                   
+                  />
+                ) : (
+                  <div className="w-full max-w-lg aspect-square md:aspect-[4/3] bg-gray-50 rounded-[32px] border border-gray-100 shadow-sm flex items-center justify-center">
+                     <span className="text-gray-300 font-medium">
+                       {feature.imagePlaceholderText || 'Image Placeholder'}
+                     </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+
+      </div>
+    </section>
+  );
+};
+
+// Helper component for the little sparkle icon
+const SparklesIcon = () => (
+  <svg className="w-3.5 h-3.5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>
+    <path d="M20 3v4"/>
+    <path d="M22 5h-4"/>
+    <path d="M4 17v2"/>
+    <path d="M5 18H3"/>
+  </svg>
+);
+
+export default ProductFeatures;

src/app/(features)/Components/CustomHeroSection.tsx

@@ -0,0 +1,156 @@
+"use client";
+import React from 'react';
+import { Sparkles } from 'lucide-react';
+const squareBoxBg = "/landing/SquareBox.png";
+const cloudArrowUp = "/landing/CloudArrowUp.png";
+const cursorClick = "/landing/CursorClick.png";
+const heroDivider = "/landing/HeroDivider.png";
+
+export interface ProductHeroProps {
+  badgeText?: string;
+  headlineMain?: string;
+  headlineHighlight?: string;
+  description?: string;
+  primaryButtonText?: string;
+  secondaryButtonText?: string;
+  variant?: 'default' | 'upload';
+  showDivider?: boolean;
+  className?: string;
+  primaryButtonLink?: string;
+  secondaryButtonLink?: string;
+  onPrimaryClick?: () => void;
+  onSecondaryClick?: () => void;
+}
+
+const ProductHeroSection: React.FC<ProductHeroProps> = ({
+  badgeText = "ONE PLATFORM. FOUR PRODUCTS.",
+  headlineMain = "Everything Your Documents Need,",
+  headlineHighlight = "Under One Roof.",
+  description = "DocQube brings document management, PDF editing, workflow automation and e-signatures together — one login, one bill, one security model. Buy the whole suite and save up to ~55% versus buying modules separately.",
+  primaryButtonText = "START FREE TRIAL",
+  secondaryButtonText = "TALK TO SALES",
+  variant = 'default',
+  showDivider = true,
+  className = "",
+  primaryButtonLink,
+  secondaryButtonLink,
+  onPrimaryClick,
+  onSecondaryClick
+}) => {
+  const defaultPadding = className.includes('pt-') || className.includes('pb-') || className.includes('py-') 
+    ? '' 
+    : 'pt-32 pb-24';
+
+  return (
+    <section className={`relative overflow-hidden bg-white ${defaultPadding} ${className}`}>
+      
+      {/* Centered Background SquareBox */}
+      <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-0">
+        <img 
+          src={squareBoxBg} 
+          alt="" 
+          className="w-full max-w-[800px] object-cover opacity-60" 
+        />
+      </div>
+
+      <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        
+        {/* Badge */}
+        <div className="inline-flex items-center gap-1.5 bg-[#EEF2FF] text-[#444CE7] px-4 py-1.5 rounded-full mb-8">
+          <Sparkles className="w-4 h-4" />
+          <span className="text-[11px] font-bold tracking-widest uppercase">{badgeText}</span>
+        </div>
+
+        {/* Headline */}
+        <h1 className="text-4xl md:text-5xl lg:text-[56px] font-medium tracking-tight text-[#0B1538] leading-tight mb-6 max-w-[1000px] mx-auto">
+          {headlineMain} <span className="text-[#444CE7]">{headlineHighlight}</span>
+        </h1>
+
+        {/* Description */}
+        <p className="text-[16px] md:text-[18px] text-[#434654] leading-relaxed max-w-3xl mx-auto mb-10 font-medium">
+          {description}
+        </p>
+
+        {/* Action Area */}
+        {variant === 'default' ? (
+          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
+            {primaryButtonLink ? (
+              <a
+                href={primaryButtonLink}
+                onClick={onPrimaryClick}
+                className="w-full sm:w-auto px-8 py-3.5 bg-[#444CE7] text-white text-[13px] font-bold tracking-widest uppercase rounded-full hover:bg-blue-700 transition-colors shadow-sm inline-block text-center"
+              >
+                {primaryButtonText}
+              </a>
+            ) : (
+              <button
+                onClick={onPrimaryClick}
+                className="w-full sm:w-auto px-8 py-3.5 bg-[#444CE7] text-white text-[13px] font-bold tracking-widest uppercase rounded-full hover:bg-blue-700 transition-colors shadow-sm cursor-pointer"
+              >
+                {primaryButtonText}
+              </button>
+            )}
+
+            {secondaryButtonLink ? (
+              <a
+                href={secondaryButtonLink}
+                onClick={onSecondaryClick}
+                className="w-full sm:w-auto px-8 py-3.5 bg-white border-[1.5px] border-gray-900 text-gray-900 text-[13px] font-bold tracking-widest uppercase rounded-full hover:bg-gray-50 transition-colors shadow-sm inline-block text-center"
+              >
+                {secondaryButtonText}
+              </a>
+            ) : (
+              <button
+                onClick={onSecondaryClick}
+                className="w-full sm:w-auto px-8 py-3.5 bg-white border-[1.5px] border-gray-900 text-gray-900 text-[13px] font-bold tracking-widest uppercase rounded-full hover:bg-gray-50 transition-colors shadow-sm cursor-pointer"
+              >
+                {secondaryButtonText}
+              </button>
+            )}
+          </div>
+        ) : (
+          <div 
+            className="max-w-2xl mx-auto bg-[#F8F9FB] rounded-[32px] p-10 relative overflow-hidden flex flex-col items-center text-center shadow-sm hover:bg-[#F2F4F8] transition-colors cursor-pointer"
+            style={{
+              backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='32' ry='32' stroke='%23747897' stroke-width='3' stroke-dasharray='12%2c 16' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e")`
+            }}
+          >
+            <div className="mb-4">
+              <img src={cloudArrowUp} alt="Upload Cloud" className="w-[60px] h-[60px] object-contain mx-auto" />
+            </div>
+            
+            <h3 className="text-2xl font-medium text-[#0B1538] mb-2">Drag & Drop A PDF Here</h3>
+            
+            <p className="text-[13px] text-gray-500 font-medium mb-6">
+              or choose a file — up to 25 MB, 50 pages on the free tier
+            </p>
+
+            <div className="relative inline-block mt-2">
+              <button className="px-8 py-3.5 bg-[#444CE7] text-white text-[13px] font-bold tracking-widest uppercase rounded-full shadow-sm hover:bg-blue-700 transition-colors">
+                {primaryButtonText}
+              </button>
+              
+              <img 
+                src={cursorClick} 
+                alt="Cursor Click"
+                className="absolute -bottom-6 -right-6 w-[40px] h-[40px] object-contain pointer-events-none"
+              />
+            </div>
+          </div>
+        )}
+
+      </div>
+
+      {/* Bottom Divider */}
+      {showDivider && (
+        <img 
+          src={heroDivider} 
+          alt="" 
+          className="absolute bottom-0 left-0 right-0 w-full object-cover pointer-events-none z-0" 
+        />
+      )}
+    </section>
+  );
+};
+
+export default ProductHeroSection;

src/app/(features)/Components/CustomPricingCards.tsx

@@ -0,0 +1,97 @@
+"use client";
+import React from 'react';
+
+export interface PricingPlan {
+  name: string;
+  price: string;
+  details: string;
+  buttonText: string;
+  features: string[];
+  popular: boolean;
+}
+
+export interface CustomPricingCardsProps {
+  plans: PricingPlan[];
+  variant?: 'top-button' | 'bottom-button';
+}
+
+const CustomPricingCards: React.FC<CustomPricingCardsProps> = ({ 
+  plans, 
+  variant = 'top-button' 
+}) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 items-stretch max-w-7xl mx-auto">
+      {plans.map((plan, index) => (
+        <div 
+          key={index}
+          className="relative flex flex-col bg-white rounded-[24px] overflow-hidden border border-gray-100 shadow-[0_4px_20px_rgba(0,0,0,0.02)] transition-all duration-300"
+        >
+          {/* Top Section */}
+          <div className="m-2">
+            <div className="p-7 rounded-[20px] text-left transition-colors bg-[#EAEBF7] shadow-[0_2.786px_16.715px_0_rgba(222,214,255,0.15)]">
+              <h3 className="text-[18px] font-bold text-[#191C1E] mb-2">
+                {plan.name}
+              </h3>
+
+              <div className="flex items-baseline gap-1 mb-4">
+                <span className="text-[40px] font-bold text-[#191C1E] tracking-tight">
+                  {plan.price === 'Contact Us' ? '$00' : plan.price.startsWith('$') ? plan.price : `$${plan.price}`}
+                </span>
+                <span className="text-[11px] text-[#5F6479] font-medium">
+                  {plan.details.startsWith('/') ? plan.details : `/ ${plan.details}`}
+                </span>
+              </div>
+
+              {/* Top Button Variant */}
+              {variant === 'top-button' && (
+                <button 
+                  className={`w-full py-2.5 px-4 font-bold text-[13px] rounded-full transition-all duration-300 shadow-sm active:scale-[0.98] ${
+                    plan.popular
+                    ? 'bg-[#414EE7] text-white hover:bg-blue-700'
+                    : 'bg-[#191C1E] text-white hover:bg-gray-800'
+                  }`}
+                >
+                  {plan.buttonText || 'View Details'}
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Features Section */}
+          <div className="p-7 pt-4 flex-grow flex flex-col text-left">
+            <p className="text-[11px] font-bold text-gray-500 uppercase tracking-[0.08em] mb-4">
+              Included features:
+            </p>
+            <ul className="space-y-3 mb-6">
+              {plan.features.map((feature, fIndex) => (
+                <li key={fIndex} className="flex items-start gap-2.5">
+                  <div className="w-1.5 h-1.5 rounded-full bg-gray-900 mt-1.5 shrink-0" />
+                  <span className="text-[13.5px] leading-snug font-medium text-gray-800">
+                    {feature}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Bottom Button Variant */}
+          {variant === 'bottom-button' && (
+            <div className="px-6 pb-6 pt-0 mt-auto">
+              <button 
+                className={`w-full py-3 px-6 font-bold text-[13px] tracking-wider uppercase rounded-full transition-all duration-300 active:scale-[0.98] ${
+                  plan.popular
+                  ? 'bg-[#414EE7] text-white hover:bg-blue-700 shadow-sm'
+                  : 'bg-white border-[1.5px] border-gray-900 text-gray-900 hover:bg-gray-50'
+                }`}
+              >
+                START FREE TRIAL
+              </button>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default CustomPricingCards;

src/app/(features)/Components/EnterpriseFeatures.tsx

@@ -0,0 +1,209 @@
+"use client";
+import React from 'react';
+import Link from 'next/link';
+const dotBg = "/landing/DotBg.png";
+import { 
+  ShieldCheck, 
+  Server, 
+  Lock, 
+  FileOutput, 
+  Search, 
+  ClipboardList,
+  ArrowRight
+} from 'lucide-react';
+
+export interface EnterpriseFeatureItem {
+  title: string;
+  description: string;
+  icon?: any; // Accepting any for now, could be LucideIcon or similar
+  link?: string;
+  linkText?: string;
+}
+
+export interface EnterpriseFeaturesProps {
+  badgeText?: string;
+  title?: string;
+  features?: EnterpriseFeatureItem[];
+  bottomNote?: string;
+  primaryButtonText?: string;
+  variant?: 'default' | 'minimal';
+  showBackground?: boolean;
+}
+
+const defaultFeatures: EnterpriseFeatureItem[] = [
+  // ... default features are fine ...
+  {
+    title: 'Role-based access',
+    description: 'Fine-grained RBAC with custom roles and access codes.',
+    icon: ShieldCheck
+  },
+  {
+    title: 'Multi-tenant isolation',
+    description: "Each organization's data is scoped and isolated.",
+    icon: Server
+  },
+  {
+    title: 'Encryption',
+    description: 'Encrypted in transit and at rest, with virus scanning on upload.',
+    icon: Lock
+  },
+  {
+    title: 'Convert & export',
+    description: 'Convert PDF and images to editable formats; export to Word, HTML, XML and PDF.',
+    icon: FileOutput
+  },
+  {
+    title: 'Smart search & OCR',
+    description: 'Find anything across your files, including scanned documents.',
+    icon: Search
+  },
+  {
+    title: 'Audit & reporting',
+    description: 'A complete, exportable record of document activity.',
+    icon: ClipboardList
+  }
+];
+
+const EnterpriseFeatures: React.FC<EnterpriseFeaturesProps> = ({
+  badgeText = "ENTERPRISE",
+  title = "Governed By Design",
+  features = defaultFeatures,
+  bottomNote,
+  primaryButtonText,
+  variant = 'default',
+  showBackground = true
+}) => {
+  if (!features || features.length === 0) return null;
+
+  const isMinimal = variant === 'minimal';
+
+  return (
+    <section 
+      className={`relative py-24 overflow-hidden ${showBackground ? 'bg-[#FCFCFC]' : 'bg-white'}`}
+      style={showBackground ? {
+        backgroundImage: `url(${dotBg})`,
+        backgroundSize: 'contain',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'repeat'
+      } : {}}
+    >
+      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        
+        {/* Header */}
+        {!isMinimal && (
+          <div className="text-center mb-16">
+            <div className="inline-flex items-center text-[#444CE7] font-bold text-[11px] tracking-[0.2em] uppercase mb-4">
+              <div className="w-2 h-2 rounded-full bg-[#444CE7] mr-2"></div>
+              {badgeText}
+            </div>
+            <h2 className="text-[32px] md:text-[40px] font-medium text-[#0a1236] tracking-tight">
+              {title}
+            </h2>
+          </div>
+        )}
+
+        {/* Header for Minimal Variant - Badge Only */}
+        {isMinimal && badgeText && (
+          <div className="text-center mb-12">
+            <div className="inline-flex items-center text-[#444CE7] font-bold text-[11px] tracking-[0.2em] uppercase mb-4">
+              <div className="w-2 h-2 rounded-full bg-[#444CE7] mr-2"></div>
+              {badgeText}
+            </div>
+          </div>
+        )}
+
+        {/* Features Grid */}
+        <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12`}>
+          {features.map((feature, idx) => {
+            const Icon = feature.icon || ShieldCheck; // Fallback icon
+            return isMinimal ? (
+              // Minimal Variant - Only Icon
+              <div 
+                key={idx}
+                className="flex flex-col items-center justify-center p-6 hover:scale-110 transition-all duration-300 cursor-pointer"
+              >
+                <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#E2E4F9] to-[#C7CBF5] text-[#444CE7] flex items-center justify-center mb-4 shadow-sm hover:shadow-md transition-shadow overflow-hidden">
+                  {typeof Icon === 'string' ? (
+                    <img src={Icon} alt="" className="w-full h-full object-cover" />
+                  ) : (
+                    <Icon className="w-8 h-8" strokeWidth={1.5} />
+                  )}
+                </div>
+              </div>
+            ) : (
+              // Default Variant - Full Card
+              feature.link ? (
+                <Link
+                  href={feature.link}
+                  key={idx}
+                  className="group bg-white rounded-[20px] p-8 border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.02)] hover:shadow-[0_12px_36px_rgba(68,76,231,0.08)] hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between"
+                >
+                  <div>
+                    <div className="w-16 h-16 text-[#444CE7] flex items-center justify-center mb-2 overflow-hidden group-hover:scale-105 transition-transform duration-300">
+                      {typeof Icon === 'string' ? (
+                        <img src={Icon} alt="" className="w-full h-full object-contain" />
+                      ) : (
+                        <Icon className="w-10 h-10" strokeWidth={1.5} />
+                      )}
+                    </div>
+                    <h3 className="text-[19px] font-bold text-gray-900 group-hover:text-[#444CE7] transition-colors">
+                      {feature.title}
+                    </h3>
+                    <p className="text-[14.5px] text-gray-500 leading-relaxed font-medium mt-1">
+                      {feature.description}
+                    </p>
+                  </div>
+
+                  <div className="mt-6 flex items-center text-[13px] font-bold text-[#444CE7] group-hover:translate-x-1 transition-transform">
+                    <span>{feature.linkText || 'Learn more'}</span>
+                    <ArrowRight className="w-4 h-4 ml-1.5" />
+                  </div>
+                </Link>
+              ) : (
+                <div 
+                  key={idx} 
+                  className="bg-white rounded-[20px] p-8 border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] transition-all duration-300"
+                >
+                  <div className="w-16 h-16 text-[#444CE7] flex items-center justify-center mb-2 overflow-hidden">
+                    {typeof Icon === 'string' ? (
+                      <img src={Icon} alt="" className="w-full h-full object-contain" />
+                    ) : (
+                      <Icon className="w-10 h-10" strokeWidth={1.5} />
+                    )}
+                  </div>
+                  <h3 className="text-[19px] font-bold text-gray-900 ">
+                    {feature.title}
+                  </h3>
+                  <p className="text-[14.5px] text-gray-500 leading-relaxed font-medium">
+                    {feature.description}
+                  </p>
+                </div>
+              )
+            );
+          })}
+        </div>
+
+        {/* Bottom Note */}
+        {!isMinimal && bottomNote && (
+          <div className="text-center max-w-4xl mx-auto mt-16">
+            <p className="text-[#444CE7] text-[14px] md:text-[15px] italic">
+              {bottomNote}
+            </p>
+          </div>
+        )}
+
+        {/* Action Button */}
+        {!isMinimal && primaryButtonText && (
+          <div className="flex justify-center mt-12">
+            <button className="px-8 py-3.5 bg-[#444CE7] text-white text-[13px] font-bold tracking-widest uppercase rounded-full hover:bg-blue-700 transition-colors shadow-sm">
+              {primaryButtonText}
+            </button>
+          </div>
+        )}
+
+      </div>
+    </section>
+  );
+};
+
+export default EnterpriseFeatures;

src/app/(features)/Components/Faq.tsx

@@ -0,0 +1,112 @@
+"use client";
+import React, { useState } from 'react';
+import { Plus, X } from 'lucide-react';
+const squareBoxBg = "/landing/SquareBox.png";
+
+export interface FaqItem {
+  question: string;
+  answer: string;
+}
+
+export interface FaqProps {
+  title?: string;
+  faqs: FaqItem[];
+}
+
+export const defaultHomeFaqs: FaqItem[] = [
+  {
+    question: "Can I buy just one module?",
+    answer: "Yes. Buy any single module on its own — Drive, PDF Editor, Workflows or Sign. Each has its own plan and free trial, and each is also included in the DocQube Suite."
+  },
+  {
+    question: "Is there a free plan?",
+    answer: "Yes, we offer a free tier with basic features so you can test out our core capabilities."
+  },
+  {
+    question: "Can I upgrade from a module to the Suite later?",
+    answer: "Absolutely. You can easily upgrade from any individual module to the full DocQube Suite from your billing dashboard."
+  },
+  {
+    question: "Is my data secure and where is it stored?",
+    answer: "We use end-to-end encryption for all data at rest and in transit. Your data is stored securely in compliant enterprise-grade cloud facilities."
+  }
+];
+
+const Faq: React.FC<FaqProps> = ({ title = "Frequently Asked Questions", faqs }) => {
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+  const toggleFaq = (index: number) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
+  return (
+    <section className="py-24 bg-[#FCFCFC] relative overflow-hidden">
+      {/* Top Left Background Box */}
+      <img 
+        src={squareBoxBg} 
+        alt="" 
+        className="absolute top-0 left-0 pointer-events-none -translate-x-[10%] -translate-y-[10%] z-0 max-w-none w-[250px] opacity-60" 
+      />
+
+      {/* Bottom Right Background Box */}
+      <img 
+        src={squareBoxBg} 
+        alt="" 
+        className="absolute bottom-0 right-0 pointer-events-none translate-x-[10%] translate-y-[10%] z-0 max-w-none w-[250px] opacity-60" 
+      />
+
+      <div className="relative z-10 max-w-[1000px] mx-auto px-4 sm:px-6 lg:px-8">
+        
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl lg:text-[40px] font-medium text-[#0B1538] tracking-tight">
+            {title}
+          </h2>
+        </div>
+
+        {/* FAQ Container Card */}
+        <div className="bg-white rounded-[24px] shadow-[0_4px_24px_rgba(0,0,0,0.02)] overflow-hidden">
+          {faqs.map((faq, index) => (
+            <div 
+              key={index} 
+              className={`${index !== 0 ? 'border-t border-gray-100' : ''}`}
+            >
+              <button
+                className={`w-full flex items-center justify-between px-8 pt-8 text-left focus:outline-none ${openIndex === index ? 'pb-3' : 'pb-8'}`}
+                onClick={() => toggleFaq(index)}
+              >
+                <span className="text-[18px] font-medium text-gray-900 pr-8">
+                  {faq.question}
+                </span>
+                
+                {/* Toggle Icon */}
+                <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 transition-colors duration-200 ${
+                  openIndex === index 
+                    ? 'bg-[#444CE7] text-white' 
+                    : 'bg-[#F4F4F5] text-gray-500 hover:bg-gray-200'
+                }`}>
+                  {openIndex === index ? (
+                    <X className="w-5 h-5" strokeWidth={2} />
+                  ) : (
+                    <Plus className="w-5 h-5" strokeWidth={2} />
+                  )}
+                </div>
+              </button>
+              
+              <div 
+                className={`overflow-hidden transition-all duration-300 ease-in-out ${openIndex === index ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'}`}
+              >
+                <div className="px-8 pb-8 pt-0 text-gray-500 text-[16px] leading-[26px]">
+                  {faq.answer}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+      </div>
+    </section>
+  );
+};
+
+export default Faq;

src/app/(features)/Components/Footer.tsx

@@ -0,0 +1,323 @@
+"use client";
+import React from "react";
+import Link from 'next/link';
+const footerBg = "/landing/FooterBg.png";
+const logoImg = "/landing/Logo.png";
+
+export interface FooterProps {
+  title?: string;
+  description?: string;
+  primaryButtonText?: string;
+  primaryButtonLink?: string;
+  secondaryButtonText?: string;
+  secondaryButtonLink?: string;
+}
+
+const Footer: React.FC<FooterProps> = ({
+  title = "Start managing documents the right way",
+  description = "Manage, edit, automate and sign — without switching tools.",
+  primaryButtonText = "GET STARTED",
+  primaryButtonLink = "/signup",
+  secondaryButtonText = "BOOK A DEMO",
+  secondaryButtonLink = "/demo",
+}) => {
+  return (
+    <footer className="relative bg-white pt-24 overflow-hidden">
+      {/* Background Graphic */}
+      <img
+        src={footerBg}
+        alt=""
+        className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[1400px] object-cover object-bottom pointer-events-none opacity-90 z-0"
+      />
+
+      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Top Section (CTA) */}
+        <div className="mb-20">
+          <h2 className="text-[36px] md:text-[44px] font-bold text-gray-900 tracking-tight ">
+            {title}
+          </h2>
+          <p className="text-[17px] text-gray-500 font-medium mb-10">
+            {description}
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4">
+            {primaryButtonText && (
+              <Link
+                href={primaryButtonLink}
+                className="inline-flex items-center justify-center bg-[#444CE7] text-white text-[13px] font-bold tracking-widest uppercase px-8 py-3.5 rounded-full hover:bg-blue-700 transition-colors"
+              >
+                {primaryButtonText}
+              </Link>
+            )}
+            {secondaryButtonText && (
+              <Link
+                href={secondaryButtonLink}
+                className="inline-flex items-center justify-center bg-transparent border-[1.5px] border-gray-900 text-gray-900 text-[13px] font-bold tracking-widest uppercase px-8 py-3.5 rounded-full hover:bg-gray-50 transition-colors"
+              >
+                {secondaryButtonText}
+              </Link>
+            )}
+          </div>
+        </div>
+
+        {/* Divider */}
+        <div className="w-full h-px bg-gray-200 mb-20" />
+
+        {/* Middle Section (Links) */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-12 lg:gap-8 mb-32 md:mb-40">
+          {/* Brand Column */}
+          <div className="lg:col-span-2 pr-0 lg:pr-12">
+            <div className="flex items-center gap-2 mb-6">
+              <img
+                src={logoImg}
+                alt="DocQube"
+                className="w-8 h-8 object-contain"
+              />
+              <span className="text-2xl font-bold text-[#191C1E] tracking-tight">
+                DocQube
+              </span>
+            </div>
+            <p className="text-[14px] text-gray-500 leading-relaxed font-medium">
+              An Intelligent document platform – manage, edit, automate and
+              sign, under one login. A Product by Maskan Technologies Pvt. Ltd..
+            </p>
+          </div>
+
+          {/* Links Columns */}
+          <div className="lg:col-span-1">
+            <h4 className="text-[13px] font-bold text-gray-900 uppercase tracking-widest mb-8">
+              Product
+            </h4>
+            <ul className="space-y-5">
+              <li>
+                <Link
+                  href="/product/platform"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Platform / Suite
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/product/drive"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Drive
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/product/pdf-editor"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  PDF Editor
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/product/workflows"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Workflows
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/product/sign"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Sign
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/product/free-pdf-tools"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Free PDF Tools
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          <div className="lg:col-span-1">
+            <h4 className="text-[13px] font-bold text-gray-900 uppercase tracking-widest mb-8">
+              Solutions
+            </h4>
+            <ul className="space-y-5">
+              <li>
+                <Link
+                  href="/solutions/enterprise"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Enterprise
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/solutions/legal"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Legal
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/solutions/real-estate"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Real Estate
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/solutions/operations"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Operations
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/solutions/enterprise"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  All Solutions
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          <div className="lg:col-span-1">
+            <h4 className="text-[13px] font-bold text-gray-900 uppercase tracking-widest mb-8">
+              Resources
+            </h4>
+            <ul className="space-y-5">
+              <li>
+                <Link
+                  href="/resources"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Resource Center
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/docs"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Documentation
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/api"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Developers / API
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/security"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Security
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/contact"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Support
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          <div className="lg:col-span-1">
+            <h4 className="text-[13px] font-bold text-gray-900 uppercase tracking-widest mb-8">
+              Company
+            </h4>
+            <ul className="space-y-5">
+              <li>
+                <a
+                  href="https://www.maskantech.com/about"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  About Us
+                </a>
+              </li>
+              <li>
+                <Link
+                  href="/contact"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Contact
+                </Link>
+              </li>
+              <li>
+                <a
+                  href="https://www.maskantech.com/careers"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Careers
+                </a>
+              </li>
+              <li>
+                <Link
+                  href="/contact"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Book a Demo
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/privacy-policy"
+                  className="text-[14px] font-medium text-gray-500 hover:text-blue-600 transition-colors"
+                >
+                  Privacy
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="pb-8 flex flex-col lg:flex-row justify-between items-center gap-6">
+          <div className="text-[13px] text-gray-400 font-medium text-center lg:text-left">
+            DocQube is a Product of Maskan Technologies Pvt. Ltd.. © 2026 Maskan
+            Technologies. All rights reserved
+          </div>
+          <div className="flex flex-wrap justify-center gap-x-8 gap-y-4 text-[13px] font-medium text-gray-500">
+            <Link
+              href="/privacy-policy"
+              className="hover:text-blue-600 transition-colors"
+            >
+              Privacy Policy
+            </Link>
+            <Link href="/terms" className="hover:text-blue-600 transition-colors">
+              Terms of Service
+            </Link>
+            <Link
+              href="/security"
+              className="hover:text-blue-600 transition-colors"
+            >
+              Security
+            </Link>
+            <Link href="/dpa" className="hover:text-blue-600 transition-colors">
+              DPA
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/app/(features)/Components/ModulePricingCards.tsx

@@ -0,0 +1,80 @@
+"use client";
+import React from 'react';
+
+export interface ModulePlan {
+  title: string;
+  price: string;
+  details: string;
+  subtitle: string;
+  description: string;
+}
+
+interface ModulePricingCardsProps {
+  modules: ModulePlan[];
+}
+
+const ModulePricingCards: React.FC<ModulePricingCardsProps> = ({ modules }) => {
+  return (
+    <div className="w-full">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 max-w-7xl mx-auto mb-10">
+        {modules.map((mod, idx) => (
+          <div 
+            key={idx} 
+            className="rounded-[24px] bg-white flex flex-col p-2 transition-all duration-300 hover:-translate-y-1"
+            style={{
+              background: 'linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(180deg, #414EE7 0%, #FFFFFF 100%) border-box',
+              border: '2px solid transparent',
+              boxShadow: '0 0 4px 0 rgba(143, 143, 143, 0.25)'
+            }}
+          >
+            {/* Top Inner Card */}
+            <div className="bg-white rounded-[18px] border border-[#E0E7FF] p-6 text-left shadow-[0_2px_8px_rgba(65,78,231,0.04)]">
+              <h3 className="text-[18px] font-bold text-[#0B1538] mb-2">
+                {mod.title}
+              </h3>
+              
+              <div className="flex items-baseline gap-1 mb-4">
+                <span className="text-[38px] font-bold text-[#0B1538] tracking-tight leading-none">
+                  ${mod.price}
+                </span>
+                <span className="text-[11.5px] font-medium text-gray-500">
+                  {mod.details.startsWith('/') ? mod.details : `/ ${mod.details}`}
+                </span>
+              </div>
+
+              <div className="text-[#414EE7] text-[11.5px] font-medium">
+                {mod.subtitle}
+              </div>
+            </div>
+
+            {/* Bottom Description Area */}
+            <div className="px-4 py-4 text-left flex-grow">
+              <p className="text-[13px] text-[#434654] leading-relaxed font-normal">
+                {mod.description}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Yellow Tip Banner */}
+      <div className="max-w-4xl mx-auto bg-[#FEF9C3]/70 border border-[#FEF08A] rounded-full px-6 py-2.5 text-center mb-10 shadow-sm flex items-center justify-center">
+        <p className="text-[13px] text-gray-800 font-medium">
+          💡 <span className="italic">Buying three or more modules? The full Suite Professional is <b>$11/user/mo</b> — less than half the ~$26 of buying all four separately.</span>{' '}
+          <a href="#suite" className="text-[#414EE7] underline hover:text-blue-700 font-medium ml-1">
+            See the Suite &rarr;
+          </a>
+        </p>
+      </div>
+
+      {/* Bundle CTA Button */}
+      <div className="flex justify-center">
+        <button className="px-8 py-3.5 bg-[#3B57FF] text-white text-[13px] font-bold tracking-wider uppercase rounded-full hover:bg-blue-700 transition-colors shadow-sm active:scale-[0.98]">
+          BUILD YOUR OWN BUNDLE
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ModulePricingCards;

src/app/(features)/Components/Navbar.tsx

@@ -0,0 +1,480 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Menu, X, ChevronDown } from "lucide-react";
+
+const Navbar: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const location = usePathname();
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const isActive = (path?: string) => {
+    if (!path) return false;
+    return location === path;
+  };
+
+  const navLinks: { name: string; href?: string; hasDropdown?: boolean }[] = [
+    { name: "Home", href: "/" },
+    { name: "Product", hasDropdown: true },
+    { name: "Solutions", href: "/solutions", hasDropdown: true },
+    { name: "Pricing", href: "/pricing" },
+    { name: "Resources", href: "/blog", hasDropdown: true },
+    { name: "Security", href: "/security" },
+    { name: "Contact Us", href: "/contact" },
+  ];
+
+  return (
+    <nav
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+        scrolled
+          ? "bg-white/95 backdrop-blur-md shadow-sm py-3"
+          : "bg-transparent py-5"
+      }`}
+    >
+      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center">
+          {/* Logo */}
+          <Link href="/" className="flex items-center group">
+            <img
+              src="/DocqubeLogo.png"
+              alt="DocQube"
+              className="h-10 w-auto object-contain transition-transform duration-300 group-hover:scale-105"
+            />
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden lg:flex items-center space-x-8 xl:space-x-10">
+            {navLinks.map((link) => (
+              <div key={link.name} className="relative group">
+                {link.href ? (
+                  <Link
+                    href={link.href}
+                    className={`flex items-center text-[15px] font-medium transition-colors py-2 ${
+                      isActive(link.href)
+                        ? "text-[#0B1538] font-bold"
+                        : "text-gray-500 hover:text-[#444CE7]"
+                    }`}
+                  >
+                    {link.name}
+                    {link.hasDropdown && (
+                      <ChevronDown className="w-4 h-4 ml-1 opacity-70 group-hover:opacity-100" />
+                    )}
+                    {/* Underline for active state */}
+                    {isActive(link.href) && (
+                      <span className="absolute -bottom-[2px] left-1/2 -translate-x-1/2 w-6 h-[3px] bg-[#444CE7] rounded-full"></span>
+                    )}
+                  </Link>
+                ) : (
+                  <button
+                    type="button"
+                    className="flex items-center text-[15px] font-medium transition-colors py-2 text-gray-500 hover:text-[#444CE7] cursor-pointer"
+                  >
+                    {link.name}
+                    {link.hasDropdown && (
+                      <ChevronDown className="w-4 h-4 ml-1 opacity-70 group-hover:opacity-100" />
+                    )}
+                  </button>
+                )}
+
+                {/* Dropdown Menu (Specifically for Product) */}
+                {link.name === "Product" && (
+                  <div className="absolute top-full left-0 mt-2 w-[600px] bg-white rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.08)] border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 p-8 grid grid-cols-2 gap-8 z-50">
+                    {/* Column 1 */}
+                    <div>
+                      <h4 className="text-[11px] font-bold text-gray-900 uppercase tracking-widest mb-6">
+                        Products
+                      </h4>
+                      <ul className="space-y-5">
+                        <li>
+                          <Link
+                            href="/product/platform"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Platform / Suite
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              All four, unified
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link
+                            href="/product/drive"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Drive
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              Document management + AI
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link
+                            href="/product/pdf-editor"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              PDF Editor
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              True-reflow editing
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link
+                            href="/product/workflows"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Workflows
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              Route, approve, sign
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link href="/product/sign" className="group/item block">
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Sign
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              Verified e-signatures
+                            </div>
+                          </Link>
+                        </li>
+                      </ul>
+                    </div>
+
+                    {/* Column 2 */}
+                    <div>
+                      <h4 className="text-[11px] font-bold text-gray-900 uppercase tracking-widest mb-6">
+                        More
+                      </h4>
+                      <ul className="space-y-5">
+                        <li>
+                          <Link
+                            href="/product/free-pdf-tools"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Free PDF Tools
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              Merge, split, convert & more
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link
+                            href="/product/free-editor"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Open the free editor
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              No signup, no watermark
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link
+                            href="/product/embed"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Embed / white-label
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              Put the editor in your app
+                            </div>
+                          </Link>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                )}
+
+                {/* Dropdown Menu (Specifically for Solutions) */}
+                {link.name === "Solutions" && (
+                  <div className="absolute top-full left-0 mt-2 w-[550px] bg-white rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.08)] border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 p-8 grid grid-cols-2 gap-8 z-50">
+                    {/* Column 1: By Audience */}
+                    <div>
+                      <h4 className="text-[11px] font-bold text-gray-900 uppercase tracking-widest mb-6">
+                        By Audience
+                      </h4>
+                      <ul className="space-y-5">
+                        <li>
+                          <Link
+                            href="/solutions/enterprise"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Enterprise
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              Governed at scale
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link
+                            href="/solutions/legal"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Legal
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              Contracts & signing
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link
+                            href="/solutions/real-estate"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Real Estate
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              Faster closings
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link
+                            href="/solutions/operations"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Operations
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              SOPs & approvals
+                            </div>
+                          </Link>
+                        </li>
+                      </ul>
+                    </div>
+
+                    {/* Column 2: Explore */}
+                    <div>
+                      <h4 className="text-[11px] font-bold text-gray-900 uppercase tracking-widest mb-6">
+                        Explore
+                      </h4>
+                      <ul className="space-y-5">
+                        <li>
+                          <Link
+                            href="/solutions#by-department"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              By department
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              HR, finance, legal...
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link
+                            href="/solutions#by-industry"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              By industry
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              9 industries
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link
+                            href="/solutions#by-use-case"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              By use case
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              10 workflows
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link
+                            href="/solutions"
+                            className="group/item block"
+                          >
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              All solutions
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              See everything
+                            </div>
+                          </Link>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                )}
+
+                {/* Dropdown Menu (Specifically for Resources) */}
+                {link.name === "Resources" && (
+                  <div className="absolute top-full left-0 mt-2 w-[480px] bg-white rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.08)] border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 p-8 grid grid-cols-2 gap-8 z-50">
+                    <div>
+                      <h4 className="text-[11px] font-bold text-gray-900 uppercase tracking-widest mb-6">
+                        Learn
+                      </h4>
+                      <ul className="space-y-5">
+                        <li>
+                          <Link href="/blog" className="group/item block">
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Blog
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              Articles, insights & updates
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link href="/contact" className="group/item block">
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Resource Center
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              Guides & tutorials
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link href="/contact" className="group/item block">
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Support
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              Help desk & contact
+                            </div>
+                          </Link>
+                        </li>
+                      </ul>
+                    </div>
+                    <div>
+                      <h4 className="text-[11px] font-bold text-gray-900 uppercase tracking-widest mb-6">
+                        Trust & Docs
+                      </h4>
+                      <ul className="space-y-5">
+                        <li>
+                          <Link href="/security" className="group/item block">
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Security
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              Compliance & controls
+                            </div>
+                          </Link>
+                        </li>
+                        <li>
+                          <Link href="/privacy-policy" className="group/item block">
+                            <div className="text-[15px] font-semibold text-gray-900 group-hover/item:text-[#444CE7] transition-colors">
+                              Privacy Policy
+                            </div>
+                            <div className="text-[13px] text-gray-500 mt-0.5">
+                              Data governance
+                            </div>
+                          </Link>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* Desktop Actions */}
+          <div className="hidden lg:flex items-center">
+            <Link
+              href="/login"
+              className="px-7 py-2.5 text-[14px] font-bold text-[#444CE7] bg-white border-[1.5px] border-[#444CE7] rounded-full hover:bg-blue-50 transition-colors shadow-sm"
+            >
+              LOG IN
+            </Link>
+          </div>
+
+          {/* Mobile Menu Button */}
+          <div className="lg:hidden flex items-center gap-4">
+            <Link
+              href="/login"
+              className="px-5 py-2 text-[13px] font-bold text-[#444CE7] bg-white border-[1.5px] border-[#444CE7] rounded-full"
+            >
+              LOG IN
+            </Link>
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className="p-2 rounded-xl text-gray-600 hover:bg-gray-100 transition-colors"
+            >
+              {isOpen ? (
+                <X className="w-6 h-6" />
+              ) : (
+                <Menu className="w-6 h-6" />
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Navigation */}
+      <div
+        className={`lg:hidden absolute top-full left-0 right-0 bg-white border-t border-gray-100 transition-all duration-300 ease-in-out overflow-hidden ${
+          isOpen ? "max-h-screen opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        <div className="px-4 py-6 space-y-4 max-h-[calc(100vh-80px)] overflow-y-auto">
+          {navLinks.map((link) =>
+            link.href ? (
+              <Link
+                key={link.name}
+                href={link.href}
+                className={`block text-base font-semibold transition-colors ${
+                  isActive(link.href)
+                    ? "text-[#444CE7]"
+                    : "text-gray-700 hover:text-[#444CE7]"
+                }`}
+                onClick={() => setIsOpen(false)}
+              >
+                {link.name}
+              </Link>
+            ) : (
+              <span
+                key={link.name}
+                className="block text-base font-semibold text-gray-700"
+              >
+                {link.name}
+              </span>
+            )
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

src/app/(features)/Components/SectionBadge.tsx

@@ -0,0 +1,18 @@
+"use client";
+import React from 'react';
+
+interface SectionBadgeProps {
+  text: string;
+}
+
+const SectionBadge: React.FC<SectionBadgeProps> = ({ text }) => {
+  return (
+    <div className="inline-flex items-center px-6 py-2 bg-white border border-[#E1E2E3] rounded-full mb-8 shadow-sm">
+      <span className="text-[13px] font-bold text-[#434654] uppercase tracking-[0.05em]">
+        {text}
+      </span>
+    </div>
+  );
+};
+
+export default SectionBadge;

src/app/(features)/Components/SectionDivider.tsx

@@ -0,0 +1,27 @@
+"use client";
+import React from 'react';
+
+const SectionDivider: React.FC = () => {
+  return (
+    <div className="w-full flex items-center justify-center py-0 bg-transparent overflow-hidden">
+      <div className="relative w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center h-10">
+        {/* Left Decorative Element */}
+        <div className="flex items-center">
+          <div className="w-1.5 h-1.5 bg-gray-300 rotate-45 shrink-0" />
+          <div className="w-10 h-[1px] bg-gradient-to-r from-gray-200 to-transparent ml-2 hidden sm:block opacity-30" />
+        </div>
+
+        {/* Central Line */}
+        <div className="flex-grow h-[1px] bg-gray-200 mx-4" />
+
+        {/* Right Decorative Element */}
+        <div className="flex items-center">
+          <div className="w-10 h-[1px] bg-gradient-to-l from-gray-200 to-transparent mr-2 hidden sm:block opacity-30" />
+          <div className="w-1.5 h-1.5 bg-gray-300 rotate-45 shrink-0" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SectionDivider;

src/app/(features)/ContactPage/MainContactPage.tsx

@@ -0,0 +1,483 @@
+"use client";
+import { Suspense, useState, useEffect } from "react";
+import { usePathname, useSearchParams } from 'next/navigation';
+import { Sparkles, Headset, CalendarDays, LifeBuoy } from "lucide-react";
+const squareBoxBg = "/landing/SquareBox.png";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+
+const MainContactPageContent = () => {
+  const pathname = usePathname() || "";
+  const searchParams = useSearchParams();
+  const [view, setView] = useState<"main" | "sales" | "demo">("main");
+
+  useEffect(() => {
+    const path = pathname.toLowerCase();
+    const search = searchParams.toString().toLowerCase();
+    
+    if (path.includes("/demo") || path.includes("/book-a-demo") || search.includes("type=demo")) {
+      setView("demo");
+    } else if (search.includes("type=sales")) {
+      setView("sales");
+    } else {
+      setView("main");
+    }
+  }, [pathname, searchParams]);
+
+  return (
+    <>
+      <Navbar />
+      <div
+        className="min-h-screen bg-[#FCFCFC] py-24 relative"
+        style={{
+          backgroundImage: `url(${squareBoxBg})`,
+          backgroundSize: "contain",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "top center",
+        }}
+      >
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          {/* Title */}
+          <h1 className="text-[40px] md:text-[48px] font-bold text-center text-[#1E254C] mb-12 tracking-tight">
+            Contact Us
+          </h1>
+
+          {view === "main" ? (
+            <>
+              {/* Main Grid */}
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+                {/* Left Panel - Info */}
+                <div className="bg-white rounded-3xl p-8 md:p-12 border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.02)]">
+                  <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[#E2E4F9] text-[#444CE7] font-bold text-[11px] tracking-widest uppercase mb-6">
+                    <Sparkles className="w-3.5 h-3.5" />
+                    <span>CONTACT</span>
+                  </div>
+
+                  <h2 className="text-[36px] font-bold text-[#1E254C] mb-4 tracking-tight">
+                    Get in touch
+                  </h2>
+                  <p className="text-gray-500 text-[16px] mb-10 leading-relaxed max-w-sm">
+                    Questions about DocQube, your account or a partnership? Send us
+                    a message and the right person will get back to you.
+                  </p>
+
+                  <div className="space-y-4 mb-16 max-w-sm">
+                    <div className="flex justify-between items-center py-2 border-b border-gray-50">
+                      <span className="font-semibold text-[14px] text-gray-700">
+                        General:
+                      </span>
+                      <a
+                        href="mailto:hello@docqube.com"
+                        className="text-[#444CE7] font-semibold text-[14px] hover:underline"
+                      >
+                        hello@docqube.com
+                      </a>
+                    </div>
+                    <div className="flex justify-between items-center py-2 border-b border-gray-50">
+                      <span className="font-semibold text-[14px] text-gray-700">
+                        Sales:
+                      </span>
+                      <a
+                        href="mailto:sales@docqube.com"
+                        className="text-[#444CE7] font-semibold text-[14px] hover:underline"
+                      >
+                        sales@docqube.com
+                      </a>
+                    </div>
+                    <div className="flex justify-between items-center py-2 border-b border-gray-50">
+                      <span className="font-semibold text-[14px] text-gray-700">
+                        Support:
+                      </span>
+                      <a
+                        href="mailto:support@docqube.com"
+                        className="text-[#444CE7] font-semibold text-[14px] hover:underline"
+                      >
+                        support@docqube.com
+                      </a>
+                    </div>
+                    <div className="flex justify-between items-center py-2">
+                      <span className="font-semibold text-[14px] text-gray-700">
+                        Privacy:
+                      </span>
+                      <a
+                        href="mailto:privacy@docqube.com"
+                        className="text-[#444CE7] font-semibold text-[14px] hover:underline"
+                      >
+                        privacy@docqube.com
+                      </a>
+                    </div>
+                  </div>
+
+                  <div className="text-[12px] text-gray-500 leading-relaxed">
+                    <p className="font-bold text-gray-700">
+                      Maskan Technologies Private Limited
+                    </p>
+                    <p>
+                      No. 1776, Ground Floor, 15th Main, 5th Block, 1st Stage,
+                      Kalyananagar, Bangalore
+                    </p>
+                    <p>North, Bangalore 560043, Karnataka, India</p>
+                    <p>CIN: U62020KA2023PTC172104</p>
+                  </div>
+                </div>
+
+                {/* Right Panel - Form */}
+                <div className="bg-white rounded-3xl p-8 md:p-12 border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.02)]">
+                  <form className="space-y-6">
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Full Name<span className="text-red-500">*</span>
+                      </label>
+                      <input
+                        type="text"
+                        placeholder="eg: John Doe"
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all placeholder:text-gray-300 text-[14px]"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Email<span className="text-red-500">*</span>
+                      </label>
+                      <input
+                        type="email"
+                        placeholder="eg: johndoe@gmail.com"
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all placeholder:text-gray-300 text-[14px]"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Company
+                      </label>
+                      <input
+                        type="text"
+                        placeholder="eg: XYZ Company"
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all placeholder:text-gray-300 text-[14px]"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Enter Message
+                      </label>
+                      <textarea
+                        rows={4}
+                        placeholder="eg: i would like to schedule a call to inquire about the Professional plan."
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all resize-none placeholder:text-gray-300 text-[14px]"
+                      ></textarea>
+                    </div>
+
+                    <div className="pt-2">
+                      <button
+                        type="button"
+                        className="bg-[#444CE7] text-white px-8 py-3.5 rounded-full font-semibold text-[14px] hover:bg-blue-700 transition-colors shadow-sm"
+                      >
+                        Send Message
+                      </button>
+                    </div>
+                  </form>
+                </div>
+              </div>
+
+              {/* Bottom Cards Grid */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {/* Card 1 */}
+                <div
+                  className="bg-white rounded-[20px] p-8 border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] transition-all duration-300 cursor-pointer"
+                  onClick={() => setView("sales")}
+                >
+                  <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#E2E4F9] to-[#C7CBF5] text-[#444CE7] flex items-center justify-center mb-6 shadow-sm">
+                    <Headset className="w-7 h-7" strokeWidth={1.5} />
+                  </div>
+                  <h3 className="text-[19px] font-bold text-gray-900 mb-3">
+                    Talk to sales
+                  </h3>
+                  <p className="text-[14.5px] text-gray-500 leading-relaxed font-medium">
+                    Pricing, plans and enterprise deployment.
+                  </p>
+                </div>
+
+                {/* Card 2 */}
+                <div 
+                  className="bg-white rounded-[20px] p-8 border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] transition-all duration-300 cursor-pointer"
+                  onClick={() => setView("demo")}
+                >
+                  <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#E2E4F9] to-[#C7CBF5] text-[#444CE7] flex items-center justify-center mb-6 shadow-sm">
+                    <CalendarDays className="w-7 h-7" strokeWidth={1.5} />
+                  </div>
+                  <h3 className="text-[19px] font-bold text-gray-900 mb-3">
+                    Book a demo
+                  </h3>
+                  <p className="text-[14.5px] text-gray-500 leading-relaxed font-medium">
+                    See DocQube on your own documents.
+                  </p>
+                </div>
+
+                {/* Card 3 */}
+                <div className="bg-white rounded-[20px] p-8 border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] transition-all duration-300 cursor-pointer">
+                  <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#E2E4F9] to-[#C7CBF5] text-[#444CE7] flex items-center justify-center mb-6 shadow-sm">
+                    <LifeBuoy className="w-7 h-7" strokeWidth={1.5} />
+                  </div>
+                  <h3 className="text-[19px] font-bold text-gray-900 mb-3">
+                    Support
+                  </h3>
+                  <p className="text-[14.5px] text-gray-500 leading-relaxed font-medium">
+                    Help with your existing account.
+                  </p>
+                </div>
+              </div>
+            </>
+          ) : view === "sales" ? (
+            <>
+              {/* Sales View */}
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+                {/* Left Panel - Info */}
+                <div className="bg-white rounded-3xl p-8 md:p-12 border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.02)] flex flex-col">
+                  <div className="inline-flex self-start items-center gap-1.5 px-3 py-1.5 rounded-full bg-[#E2E4F9] text-[#444CE7] font-bold text-[11px] tracking-widest uppercase mb-6">
+                    <Sparkles className="w-3.5 h-3.5" />
+                    <span>TALK TO SALES</span>
+                  </div>
+
+                  <h2 className="text-[36px] font-bold text-[#1E254C] mb-4 tracking-tight leading-tight">
+                    Let's find your right setup
+                  </h2>
+                  <p className="text-gray-500 text-[16px] mb-10 leading-relaxed max-w-sm">
+                    Tell us what your team does with documents and how many people are involved. We'll recommend the right modules or the full Suite — and set up a trial.
+                  </p>
+
+                  <ul className="space-y-5 mb-16 max-w-sm">
+                    <li className="flex items-center gap-3 text-[15px] font-semibold text-[#1E254C]">
+                      <div className="w-1.5 h-1.5 rounded-full bg-[#444CE7]"></div>
+                      Personalised plan recommendation
+                    </li>
+                    <li className="flex items-center gap-3 text-[15px] font-semibold text-[#1E254C]">
+                      <div className="w-1.5 h-1.5 rounded-full bg-[#444CE7]"></div>
+                      Volume and enterprise pricing
+                    </li>
+                    <li className="flex items-center gap-3 text-[15px] font-semibold text-[#1E254C]">
+                      <div className="w-1.5 h-1.5 rounded-full bg-[#444CE7]"></div>
+                      Dedicated or on-premise deployment
+                    </li>
+                    <li className="flex items-center gap-3 text-[15px] font-semibold text-[#1E254C]">
+                      <div className="w-1.5 h-1.5 rounded-full bg-[#444CE7]"></div>
+                      Security & compliance review
+                    </li>
+                  </ul>
+
+                  <div className="mt-auto text-[12px] text-gray-500 leading-relaxed">
+                    <p className="font-bold text-gray-700">
+                      Maskan Technologies Private Limited
+                    </p>
+                    <p>
+                      No. 1776, Ground Floor, 15th Main, 5th Block, 1st Stage,
+                      Kalyananagar, Bangalore
+                    </p>
+                    <p>North, Bangalore 560043, Karnataka, India</p>
+                    <p>CIN: U62020KA2023PTC172104</p>
+                  </div>
+                </div>
+
+                {/* Right Panel - Form */}
+                <div className="bg-white rounded-3xl p-8 md:p-12 border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.02)]">
+                  <form className="space-y-6">
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Full Name<span className="text-red-500">*</span>
+                      </label>
+                      <input
+                        type="text"
+                        placeholder="eg: John Doe"
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all placeholder:text-gray-300 text-[14px]"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Email<span className="text-red-500">*</span>
+                      </label>
+                      <input
+                        type="email"
+                        placeholder="eg: johndoe@gmail.com"
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all placeholder:text-gray-300 text-[14px]"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Company
+                      </label>
+                      <input
+                        type="text"
+                        placeholder="eg: XYZ Company"
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all placeholder:text-gray-300 text-[14px]"
+                      />
+                    </div>
+                    
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Team Size
+                      </label>
+                      <input
+                        type="text"
+                        placeholder="eg: 1-10"
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all placeholder:text-gray-300 text-[14px]"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Enter Message
+                      </label>
+                      <textarea
+                        rows={4}
+                        placeholder="eg: i would like to schedule a call to inquire about the Professional plan."
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all resize-none placeholder:text-gray-300 text-[14px]"
+                      ></textarea>
+                    </div>
+
+                    <div className="pt-2">
+                      <button
+                        type="button"
+                        className="bg-[#444CE7] text-white px-8 py-3.5 rounded-full font-semibold text-[14px] hover:bg-blue-700 transition-colors shadow-sm"
+                      >
+                        Send Message
+                      </button>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              {/* Demo View */}
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+                {/* Left Panel - Info */}
+                <div className="bg-white rounded-3xl p-8 md:p-12 border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.02)] flex flex-col">
+                  <div className="inline-flex self-start items-center gap-1.5 px-3 py-1.5 rounded-full bg-[#E2E4F9] text-[#444CE7] font-bold text-[11px] tracking-widest uppercase mb-6">
+                    <Sparkles className="w-3.5 h-3.5" />
+                    <span>BOOK A DEMO</span>
+                  </div>
+
+                  <h2 className="text-[36px] font-bold text-[#1E254C] mb-4 tracking-tight leading-tight">
+                    See DocQube in action
+                  </h2>
+                  <p className="text-gray-500 text-[16px] mb-10 leading-relaxed max-w-sm">
+                    A guided walkthrough of Drive, PDF Editor, Workflows and Sign — on documents and workflows like yours. About 30 minutes, no obligation.
+                  </p>
+
+                  <ul className="space-y-5 mb-16 max-w-sm">
+                    <li className="flex items-center gap-3 text-[15px] font-semibold text-[#1E254C]">
+                      <div className="w-1.5 h-1.5 rounded-full bg-[#444CE7]"></div>
+                      Tailored to your team's use case
+                    </li>
+                    <li className="flex items-center gap-3 text-[15px] font-semibold text-[#1E254C]">
+                      <div className="w-1.5 h-1.5 rounded-full bg-[#444CE7]"></div>
+                      See the AI assistant and true-reflow editor live
+                    </li>
+                    <li className="flex items-center gap-3 text-[15px] font-semibold text-[#1E254C]">
+                      <div className="w-1.5 h-1.5 rounded-full bg-[#444CE7]"></div>
+                      Q&A on security, deployment and pricing
+                    </li>
+                  </ul>
+
+                  <div className="mt-auto text-[12px] text-gray-500 leading-relaxed">
+                    <p className="font-bold text-gray-700">
+                      Maskan Technologies Private Limited
+                    </p>
+                    <p>
+                      No. 1776, Ground Floor, 15th Main, 5th Block, 1st Stage,
+                      Kalyananagar, Bangalore
+                    </p>
+                    <p>North, Bangalore 560043, Karnataka, India</p>
+                    <p>CIN: U62020KA2023PTC172104</p>
+                  </div>
+                </div>
+
+                {/* Right Panel - Form */}
+                <div className="bg-white rounded-3xl p-8 md:p-12 border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.02)]">
+                  <form className="space-y-6">
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Name<span className="text-red-500">*</span>
+                      </label>
+                      <input
+                        type="text"
+                        placeholder="Your name"
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all placeholder:text-gray-300 text-[14px]"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Work email<span className="text-red-500">*</span>
+                      </label>
+                      <input
+                        type="email"
+                        placeholder="you@company.com"
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all placeholder:text-gray-300 text-[14px]"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Company
+                      </label>
+                      <input
+                        type="text"
+                        placeholder="Company"
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all placeholder:text-gray-300 text-[14px]"
+                      />
+                    </div>
+                    
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Preferred time
+                      </label>
+                      <input
+                        type="text"
+                        placeholder="e.g. next Tuesday afternoon"
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all placeholder:text-gray-300 text-[14px]"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-[13px] font-bold text-gray-800 mb-2">
+                        Anything specific to see?
+                      </label>
+                      <textarea
+                        rows={4}
+                        placeholder="Optional"
+                        className="w-full px-4 py-3.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#444CE7]/20 focus:border-[#444CE7] transition-all resize-none placeholder:text-gray-300 text-[14px]"
+                      ></textarea>
+                    </div>
+
+                    <div className="pt-2">
+                      <button
+                        type="button"
+                        className="bg-[#444CE7] text-white px-8 py-3.5 rounded-full font-semibold text-[14px] hover:bg-blue-700 transition-colors shadow-sm"
+                      >
+                        Book my demo
+                      </button>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+const MainContactPage = () => {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <MainContactPageContent />
+    </Suspense>
+  );
+};
+
+export default MainContactPage;

src/app/(features)/HomePage/Index.tsx

@@ -0,0 +1,38 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import HeroSection from "./components/HeroSection";
+import ProductsSection from "./components/ProductsSection";
+import ProblemsSection from "./components/Problems";
+import FeaturesSection from "./components/Features";
+import OpenEditor from "./components/OpenEditor";
+import HowItsWork from "./components/HowItsWork";
+import Security from "./components/Security";
+import Pricing from "./components/Pricing";
+import Faq, { defaultHomeFaqs } from "../Components/Faq";
+import Blogs from "./components/Blogs";
+const LandingPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-[#F4F4F4] selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow">
+        <HeroSection />
+        <ProductsSection />
+
+        <ProblemsSection />
+
+        <FeaturesSection />
+        <OpenEditor />
+        <HowItsWork />
+        <Security />
+        <Pricing />
+        <Faq faqs={defaultHomeFaqs} />
+        <Blogs/>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default LandingPage;

src/app/(features)/HomePage/components/Blogs.tsx

@@ -0,0 +1,130 @@
+"use client";
+import React from 'react';
+import { ArrowUpRight } from 'lucide-react';
+
+const LargeBlogCard = () => {
+  return (
+    <div className="flex flex-col w-full gap-4 lg:gap-6">
+      {/* Image Side */}
+      <div className="relative w-full h-[220px] lg:h-[240px] bg-gray-100 rounded-[20px] overflow-hidden">
+        {/* Placeholder Pattern */}
+        <div 
+          className="absolute inset-0 opacity-20"
+          style={{
+            backgroundImage: 'linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)',
+            backgroundSize: '20px 20px',
+            backgroundPosition: '0 0, 10px 10px'
+          }}
+        />
+        
+        {/* Overlay Text */}
+        <div className="absolute bottom-4 left-4 bg-white/80 backdrop-blur-sm p-3 rounded-xl max-w-[80%]">
+          <p className="text-[12px] font-bold text-gray-900 leading-tight">Written by name</p>
+          <p className="text-[10px] text-gray-500 mt-0.5">Date article published</p>
+        </div>
+      </div>
+
+      {/* Text Side */}
+      <div className="w-full flex flex-col justify-start">
+        <h3 className="text-[18px] lg:text-[20px] font-bold text-gray-900 leading-snug mb-2 lg:mb-3">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </h3>
+        <p className="text-[14px] lg:text-[13px] text-gray-600 leading-relaxed mb-4 lg:mb-6 line-clamp-3">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </p>
+        <div>
+          <button className="inline-flex items-center gap-1.5 bg-[#444CE7] text-white text-[11px] lg:text-[10px] font-bold uppercase tracking-wider px-5 py-2.5 rounded-full hover:bg-blue-700 transition-colors">
+            Read full article
+            <ArrowUpRight className="w-3.5 h-3.5" strokeWidth={2.5} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const SmallBlogCard = () => {
+  return (
+    <div className="flex flex-col xl:flex-row w-full gap-4">
+      {/* Image Side */}
+      <div className="relative w-full xl:w-[120px] h-[220px] xl:h-[120px] flex-shrink-0 bg-gray-100 rounded-[16px] overflow-hidden">
+         {/* Placeholder Pattern */}
+         <div 
+          className="absolute inset-0 opacity-20"
+          style={{
+            backgroundImage: 'linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)',
+            backgroundSize: '16px 16px',
+            backgroundPosition: '0 0, 8px 8px'
+          }}
+        />
+      </div>
+
+      {/* Text Side */}
+      <div className="flex flex-col justify-start xl:justify-center flex-grow">
+        <h3 className="text-[18px] xl:text-[14px] font-bold text-gray-900 leading-snug mb-2 line-clamp-2">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </h3>
+        <p className="text-[14px] xl:text-[11px] text-gray-600 leading-relaxed mb-4 xl:mb-3 line-clamp-3 xl:line-clamp-2">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </p>
+        <div>
+          <button className="inline-flex items-center gap-1.5 xl:gap-1 bg-[#444CE7] text-white text-[11px] xl:text-[9px] font-bold uppercase tracking-wider px-5 py-2.5 xl:px-4 xl:py-2 rounded-full hover:bg-blue-700 transition-colors">
+            Read full article
+            <ArrowUpRight className="w-3.5 h-3.5 xl:w-3 xl:h-3" strokeWidth={2.5} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Blogs: React.FC = () => {
+  return (
+    <section className="py-16 md:py-24 bg-white overflow-hidden">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        
+        {/* Header */}
+        <div className="text-center mb-10 md:mb-16">
+          <h2 className="text-3xl md:text-4xl lg:text-[44px] font-medium text-[#0B1538] tracking-tight">
+            Blogs
+          </h2>
+        </div>
+
+        {/* Grid Container */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 items-start">
+          
+          {/* Card Group 1 (Large) */}
+          <div className="w-full">
+            <LargeBlogCard />
+          </div>
+
+          {/* Card Group 2 (Stacked Small) */}
+          <div className="w-full flex flex-col gap-6 lg:gap-8">
+            <SmallBlogCard />
+            <SmallBlogCard />
+          </div>
+
+          {/* Card Group 3 (Large) */}
+          <div className="w-full">
+            <LargeBlogCard />
+          </div>
+          
+        </div>
+
+      </div>
+      
+      {/* Global style to hide scrollbar but keep functionality */}
+      <style>{`
+        .hide-scrollbar::-webkit-scrollbar {
+          display: none;
+        }
+        .hide-scrollbar {
+          -ms-overflow-style: none;
+          scrollbar-width: none;
+        }
+      `}</style>
+    </section>
+  );
+};
+
+export default Blogs;

src/app/(features)/HomePage/components/CTA.tsx

@@ -0,0 +1,68 @@
+"use client";
+import React from 'react';
+import Link from 'next/link';
+import { ArrowUpRight } from 'lucide-react';
+
+const bgImage = "/landing/DotBg.png";
+const dashboardImage = "/dashboardimage.png";
+
+const CTA: React.FC = () => {
+  return (
+    <section 
+      className="relative py-24 overflow-hidden bg-white"
+      style={{
+        backgroundImage: `url(${bgImage})`,
+        backgroundSize: 'contain',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat'
+      }}
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="text-center max-w-4xl mx-auto">
+          {/* Main Heading */}
+          <h2 className="text-[40px] md:text-[54px] lg:text-[64px] font-bold text-[#191C1E] leading-tight mb-6">
+            Start managing documents <br className="hidden md:block" /> the right way
+          </h2>
+
+          {/* Subheading */}
+          <p className="text-[16px] md:text-[20px] font-medium text-[#5F6479] leading-relaxed mb-10 max-w-2xl mx-auto">
+            Join 10,000+ teams using DocQube to reclaim their time and <br className="hidden md:block" /> secure their intellectual property.
+          </p>
+
+          {/* Action Buttons */}
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20">
+            <Link 
+              href="/login"
+              className="group flex items-center gap-3 px-8 h-14 bg-[#1a1a1a] text-white rounded-full font-bold shadow-xl hover:bg-black transition-all hover:scale-105 active:scale-95"
+            >
+              <span>Get started for free</span>
+              <div className="w-8 h-8 bg-white rounded-full flex items-center justify-center text-black group-hover:rotate-45 transition-transform">
+                <ArrowUpRight className="w-5 h-5" />
+              </div>
+            </Link>
+            <Link 
+              href="/contact"
+              className="flex items-center justify-center px-10 h-14 bg-white text-gray-900 rounded-full font-bold border-2 border-black hover:bg-gray-50 hover:shadow-lg transition-all active:scale-95"
+            >
+              Book Demo
+            </Link>
+          </div>
+
+          {/* Dashboard Preview */}
+          <div className="relative mx-auto max-w-[1000px] group">
+            <div className="absolute inset-0 bg-gradient-to-t from-white via-transparent to-transparent z-10 h-full" />
+            <div className="rounded-[16px] overflow-hidden shadow-[0_20px_50px_rgba(0,0,0,0.1)] border-[4px] border-white relative">
+              <img 
+                src={dashboardImage} 
+                alt="DocQube Dashboard" 
+                className="w-full h-auto object-cover transition-transform duration-700 group-hover:scale-[1.02]"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CTA;

src/app/(features)/HomePage/components/Features.tsx

@@ -0,0 +1,132 @@
+"use client";
+import React from 'react';
+const feature1 = "/landing/homePage/feature1.png";
+const feature2 = "/landing/homePage/feature2.png";
+const feature3 = "/landing/homePage/feature3.png";
+const feature4 = "/landing/homePage/feature4.png";
+const feature5 = "/landing/homePage/feature5.png";
+const feature6 = "/landing/homePage/feature6.png";
+const squareBoxBg = "/landing/SquareBox.png";
+
+const features = [
+  {
+    title: 'AI & Automation',
+    description: 'Ask questions across your documents, auto-index and summarize, automate approvals.',
+    image: feature1,
+    size: 'tall', // Column 1 - Top
+  },
+  {
+    title: 'Secure & Compliant',
+    description: 'Encryption, tamper-evident audit logs, virus scanning on every upload.',
+    image: feature2,
+    size: 'short', // Column 2 - Top
+  },
+  {
+    title: 'Collaboration',
+    description: 'Real-time editing, inline threaded comments, granular sharing.',
+    image: feature3,
+    size: 'short', // Column 3 - Top
+  },
+  {
+    title: 'Centralized Control',
+    description: 'Role-based access, multi-tenant isolation, one admin plane.',
+    image: feature4,
+    size: 'short', // Column 1 - Bottom
+  },
+  {
+    title: 'Execution & Signing',
+    description: 'Legally-binding signatures with verification, powered by Zoho Sign & DocuSeal.',
+    image: feature5,
+    size: 'tall', // Column 2 - Bottom
+  },
+  {
+    title: 'Smart search & OCR',
+    description: 'Find anything; make scanned documents searchable and editable.',
+    image: feature6,
+    size: 'tall', // Column 3 - Bottom
+  },
+];
+
+const FeaturesSection: React.FC = () => {
+  return (
+    <section className="py-24 relative bg-[#FCFCFC] overflow-hidden">
+      {/* Top Left Background Box */}
+      <img 
+        src={squareBoxBg} 
+        alt="" 
+        className="absolute top-0 left-0 pointer-events-none -translate-x-[10%] -translate-y-[10%] z-0 max-w-none w-[400px] opacity-60" 
+      />
+
+      {/* Bottom Right Background Box */}
+      <img 
+        src={squareBoxBg} 
+        alt="" 
+        className="absolute bottom-0 right-0 pointer-events-none translate-x-[10%] translate-y-[10%] z-0 max-w-none w-[400px] opacity-60" 
+      />
+
+      <div className="relative z-10 max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        
+        {/* Badge */}
+        <div className="inline-flex items-center gap-2 text-[#444CE7] font-semibold text-[13px] tracking-widest uppercase mb-6">
+          <div className="w-2 h-2 rounded-full bg-[#444CE7]"></div>
+          ONE PLATFORM, EVERY CAPABILITY
+        </div>
+
+        {/* Header */}
+        <div className="max-w-4xl mx-auto mb-16">
+          <h2 className="text-3xl md:text-4xl lg:text-[44px] font-medium text-[#0B1538] tracking-tight">
+            Built For The Whole Document Lifecycle
+          </h2>
+        </div>
+
+        {/* Bento Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
+          {/* Column 1 */}
+          <div className="flex flex-col gap-6">
+            <FeatureCard feature={features[0]} />
+            <FeatureCard feature={features[3]} />
+          </div>
+
+          {/* Column 2 */}
+          <div className="flex flex-col gap-6">
+            <FeatureCard feature={features[1]} />
+            <FeatureCard feature={features[4]} />
+          </div>
+
+          {/* Column 3 */}
+          <div className="flex flex-col gap-6">
+            <FeatureCard feature={features[2]} />
+            <FeatureCard feature={features[5]} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+interface FeatureCardProps {
+  feature: typeof features[0];
+}
+
+const FeatureCard: React.FC<FeatureCardProps> = ({ feature }) => {
+  return (
+    <div className={`group bg-white rounded-3xl border border-gray-100 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.03)] text-left overflow-hidden flex flex-col transition-all duration-300 hover:shadow-[0_8px_30px_-4px_rgba(0,0,0,0.08)] hover:-translate-y-1 ${feature.size === 'tall' ? 'h-[460px]' : 'h-[280px]'}`}>
+      <div className="p-8 pb-4">
+        <h3 className="text-[17px] font-bold text-gray-900 mb-1">{feature.title}</h3>
+        <p className="text-[14px] text-gray-500 font-medium leading-[20px]">
+          {feature.description}
+        </p>
+      </div>
+
+      <div className="flex-grow relative flex items-end justify-center px-6 pb-6 overflow-hidden">
+        <img
+          src={feature.image}
+          alt={feature.title}
+          className="w-full h-full object-contain mix-blend-multiply"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FeaturesSection;

src/app/(features)/HomePage/components/HeroSection.tsx

@@ -0,0 +1,99 @@
+"use client";
+import React from 'react';
+import { Sparkles } from 'lucide-react';
+const dashboardImage = "/dashboardimage.png";
+const backgroundImage = "/landing/HeroBg.png";
+import Button from '../../Components/Button';
+
+const HeroSection: React.FC = () => {
+  return (
+    <section
+      className="relative pt-12 pb-12 lg:pt-24 lg:pb-24 overflow-hidden bg-cover bg-center bg-no-repeat min-h-[50vh] flex items-center"
+      style={{ backgroundImage: `url(${backgroundImage})` }}
+    >
+      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-8 items-center">
+          
+          {/* Left Column: Content */}
+          <div className="text-left space-y-8 max-w-xl mx-auto lg:mx-0">
+            {/* Badge */}
+            <div className="inline-flex items-center px-4 py-2 bg-[#e0e7ff] rounded-full text-[#444CE7] font-semibold text-xs tracking-wider uppercase">
+              <Sparkles className="w-4 h-4 mr-2" />
+              NEW · AI AUTO-INDEXING
+            </div>
+
+            {/* Heading */}
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-medium leading-[1.15] tracking-tight">
+              <span className="text-[#0a1236] block mb-2">All Your Documents.</span>
+              <span className="text-[#444CE7] block">One Intelligent System.</span>
+            </h1>
+
+            {/* Subtitle */}
+            <p className="text-base md:text-lg text-gray-700 leading-relaxed max-w-md font-medium">
+              Manage, edit, automate and sign — without switching tools. Run the whole
+              platform, or start with the single module you need.
+            </p>
+
+            {/* Buttons */}
+            <div className="flex flex-col sm:flex-row items-center sm:justify-start gap-4 pt-2">
+              <Button href="/login" variant="primary">
+                GET STARTED
+              </Button>
+              <Button href="/contact" variant="outline">
+                BOOK A DEMO
+              </Button>
+            </div>
+          </div>
+
+          {/* Right Column: Shuffled Images */}
+          <div className="relative w-full max-w-lg mx-auto lg:max-w-none h-[400px] lg:h-[550px] flex items-center justify-center mt-12 lg:mt-0">
+            {/* Decorative Glow */}
+            <div className="absolute inset-0 bg-[#444CE7]/10 blur-[80px] rounded-full z-0"></div>
+
+            {/* Image 4 (Back-most, Left) */}
+            <div className="absolute z-10 w-[65%] lg:w-[60%] rounded-2xl overflow-hidden shadow-lg border border-gray-200/50 transform -rotate-[15deg] -translate-x-20 -translate-y-16 transition-all duration-500 hover:-translate-y-20 hover:z-50 cursor-pointer">
+              <div className="absolute inset-0 bg-blue-50/40 mix-blend-overlay z-10"></div>
+              <img 
+                src={dashboardImage} 
+                alt="Dashboard view 4" 
+                className="w-full h-auto object-cover opacity-90"
+              />
+            </div>
+
+            {/* Image 3 (Back-most, Right) */}
+            <div className="absolute z-20 w-[70%] lg:w-[65%] rounded-2xl overflow-hidden shadow-xl border border-gray-200/50 transform rotate-[12deg] translate-x-20 -translate-y-10 transition-all duration-500 hover:-translate-y-14 hover:z-50 cursor-pointer">
+              <div className="absolute inset-0 bg-green-50/30 mix-blend-overlay z-10"></div>
+              <img 
+                src={dashboardImage} 
+                alt="Dashboard view 3" 
+                className="w-full h-auto object-cover opacity-95"
+              />
+            </div>
+
+            {/* Image 2 (Middle, slightly left) */}
+            <div className="absolute z-30 w-[80%] lg:w-[75%] rounded-2xl overflow-hidden shadow-2xl border border-gray-200 transform -rotate-[4deg] -translate-x-8 translate-y-2 transition-all duration-500 hover:-translate-y-2 hover:z-50 cursor-pointer">
+              <div className="absolute inset-0 bg-black/5 z-10"></div>
+              <img 
+                src={dashboardImage} 
+                alt="Dashboard view 2" 
+                className="w-full h-auto object-cover"
+              />
+            </div>
+
+            {/* Image 1 (Front-most) */}
+            <div className="absolute z-40 w-[90%] lg:w-[85%] rounded-2xl overflow-hidden shadow-[0_30px_60px_rgba(0,0,0,0.25)] border border-white transform rotate-[2deg] translate-x-4 translate-y-16 transition-all duration-500 hover:scale-105 hover:rotate-0 cursor-pointer">
+              <img 
+                src={dashboardImage} 
+                alt="Dashboard main view" 
+                className="w-full h-auto object-cover"
+              />
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;

src/app/(features)/HomePage/components/HowItsWork.tsx

@@ -0,0 +1,118 @@
+"use client";
+import React from "react";
+const howworks1 = "/landing/homePage/howworks1.png";
+const howworks2 = "/landing/homePage/howworks2.png";
+const howworks3 = "/landing/homePage/howworks3.png";
+const howworks4 = "/landing/homePage/howworks4.png";
+
+const squareBoxBg = "/landing/SquareBox.png";
+
+const steps = [
+  {
+    number: "1",
+    title: "Upload",
+    description:
+      "Upload documents or sync directly from your existing cloud storage. DocQube auto indexes everything on arrival",
+    image: howworks1,
+  },
+  {
+    number: "2",
+    title: "Extract & edit",
+    description:
+      "Convert, edit text with true reflow, and let AI index the content.",
+    image: howworks2,
+  },
+  {
+    number: "3",
+    title: "Validate & approve",
+    description:
+      "Route it for review and collect approvals — every step tracked.",
+    image: howworks3,
+  },
+  {
+    number: "4",
+    title: "Sign & export",
+    description:
+      "Capture legally-binding signatures and export in the format you need.",
+    image: howworks4,
+  },
+];
+
+const HowItsWork: React.FC = () => {
+  return (
+    <section className="py-24 relative bg-[#FCFCFC] overflow-hidden">
+      {/* Top Left Background Box */}
+      <img
+        src={squareBoxBg}
+        alt=""
+        className="absolute top-0 left-0 pointer-events-none -translate-x-[10%] -translate-y-[10%] z-0 max-w-none w-[400px] opacity-60"
+      />
+
+      {/* Bottom Right Background Box */}
+      <img
+        src={squareBoxBg}
+        alt=""
+        className="absolute bottom-0 right-0 pointer-events-none translate-x-[10%] translate-y-[10%] z-0 max-w-none w-[400px] opacity-60"
+      />
+
+      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        {/* Badge */}
+        <div className="inline-flex items-center gap-2 text-[#444CE7] font-semibold text-[13px] tracking-widest uppercase mb-6">
+          <div className="w-2 h-2 rounded-full bg-[#444CE7]"></div>
+          SIMPLE, STRUCTURED, EFFICIENT
+        </div>
+
+        {/* Header */}
+        <div className="max-w-4xl mx-auto mb-16 space-y-2">
+          <h2 className="text-3xl md:text-4xl lg:text-[44px] font-medium text-[#0B1538] tracking-tight text-center">
+            From Upload To Signed, In Four Steps
+          </h2>
+        </div>
+
+        {/* Steps Grid */}
+        <div className="flex flex-wrap justify-center gap-x-8 gap-y-12 max-w-[1200px] mx-auto mb-24">
+          {steps.map((step, index) => (
+            <div
+              key={index}
+              className="group bg-white rounded-[16px] shadow-[0_1px_5px_-4px_rgba(36,36,36,0.70),0_4px_8px_0_rgba(36,36,36,0.05)] text-left overflow-hidden flex flex-col w-full lg:w-[553px] lg:h-[407px] transition-all duration-300"
+            >
+              <div className="p-8 pb-4 flex gap-2">
+                <span className="text-[18px] font-semibold text-[#242424] leading-[23.4px] tracking-[-0.2px]">
+                  {index + 1}.
+                </span>
+                <div>
+                  <h3 className="text-[18px] font-semibold text-[#242424] leading-[23.4px] tracking-[-0.2px] mb-1">
+                    {step.title}
+                  </h3>
+                  <p className="text-[#5F6479] font-[500] leading-[24px] text-[16px]">
+                    {step.description}
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex-grow mt-auto relative flex items-center justify-center overflow-hidden px-6 pb-6 pt-2">
+                <div
+                  className="relative transition-transform duration-500 group-hover:scale-105"
+                  style={{
+                    width: "100%",
+                    maxWidth: "545px",
+                    height: "auto",
+                    aspectRatio: "545/294",
+                  }}
+                >
+                  <img
+                    src={step.image}
+                    alt={step.title}
+                    className="w-full h-full object-contain"
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HowItsWork;

src/app/(features)/HomePage/components/OpenEditor.tsx

@@ -0,0 +1,56 @@
+"use client";
+import React from 'react';
+import Button from '../../Components/Button';
+const cloudArrowUp = "/landing/CloudArrowUp.png";
+const cursorClick = "/landing/CursorClick.png";
+
+const OpenEditor: React.FC = () => {
+  return (
+    <section className="py-12 bg-white">
+      <div className="max-w-[1320px] mx-auto px-4 sm:px-6 lg:px-8 w-full">
+        
+        {/* Custom Dashed Border Container */}
+        <div 
+          className="w-full bg-[#F8F9FB] rounded-[32px] p-10 md:p-16 relative overflow-hidden flex flex-col items-start text-left shadow-sm"
+          style={{
+            backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='32' ry='32' stroke='%23000000' stroke-width='4' stroke-dasharray='12%2c 16' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e")`
+          }}
+        >
+          
+          {/* Icon */}
+          <div className="mb-6">
+            <img src={cloudArrowUp} alt="Upload Cloud" className="w-[80px] h-[80px] object-contain" />
+          </div>
+
+          {/* Heading */}
+          <h2 className="text-3xl md:text-5xl font-medium tracking-tight mb-4">
+            <span className="text-[#0B1538]">Try It Right Now — </span>
+            <span className="text-[#444CE7]">No Signup</span>
+          </h2>
+
+          {/* Description */}
+          <p className="text-gray-600 text-base md:text-[17px] leading-relaxed max-w-2xl mb-8 font-medium">
+            Drop a PDF to edit it free in your browser. Add text, images, highlights and a signature, reorder pages, then export — no watermark.
+          </p>
+
+          {/* Button with Cursor */}
+          <div className="relative inline-block mt-2">
+            <Button href="/editor" variant="primary">
+              OPEN THE FREE EDITOR
+            </Button>
+            
+            {/* Cursor Icon */}
+            <img 
+              src={cursorClick} 
+              alt="Cursor Click"
+              className="absolute -bottom-6 -right-6 w-[45px] h-[45px] object-contain pointer-events-none"
+            />
+          </div>
+          
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default OpenEditor;

src/app/(features)/HomePage/components/Platform.tsx

@@ -0,0 +1,70 @@
+"use client";
+import React from 'react';
+import SectionBadge from '../../Components/SectionBadge';
+const enterprise = "/enterprise.png";
+const legalterms = "/legalterms.png";
+const realestate = "/realestate.png";
+const operations = "/operations.png";
+
+const industries = [
+  {
+    title: 'Enterprises',
+    description: 'Scale documentation across global departments with centralised governance, role-based access, and real-time audit trails.',
+    image: enterprise,
+  },
+  {
+    title: 'Legal Teams',
+    description: 'Manage complex contracts, track renewal dates automatically, and maintain audit-ready matter trails — without the fire drill',
+    image: legalterms,
+  },
+  {
+    title: 'Real Estate',
+    description: 'Accelerate closings with automated document collection, AI-powered validation, and integrated e-signing.',
+    image: realestate,
+  },
+  {
+    title: 'Operations',
+    description: 'Streamline standard operating procedures and internal knowledge bases. Keep institutional knowledge where it belongs in the system.',
+    image: operations,
+  },
+];
+
+const PlatformSection: React.FC = () => {
+  return (
+    <section className="py-12 bg-[#F4F4F4]">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        {/* Badge */}
+        <SectionBadge text="One platform. Every sector." />
+
+        {/* Header */}
+        <div className="max-w-4xl mx-auto mb-8">
+          <h2 className="text-[32px] md:text-[48px] lg:text-[54px] font-semibold text-[#191C1E] leading-tight md:leading-normal tracking-[0.108px] capitalize text-center">
+            Built for Teams Across Industries
+          </h2>
+        </div>
+
+        {/* Industries Grid */}
+        <div className="flex flex-wrap justify-center gap-8 max-w-6xl mx-auto">
+          {industries.map((industry, index) => (
+            <div
+              key={index}
+              className="bg-white rounded-[32px] p-5 shadow-sm hover:shadow-xl transition-all duration-300 text-left flex flex-col items-start gap-6 w-full lg:w-[520px]"
+            >
+              <div className="w-[80px] h-[80px] flex-shrink-0">
+                <img src={industry.image} alt={industry.title} className="w-full h-full object-contain" />
+              </div>
+              <div className="space-y-4">
+                <h3 className="text-[20px] font-bold text-[#191C1E] leading-normal">{industry.title}</h3>
+                <p className="text-[14px] text-[#5F6479] font-[400] leading-[18px] tracking-[0.2px]">
+                  {industry.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default PlatformSection;

src/app/(features)/HomePage/components/Pricing.tsx

@@ -0,0 +1,96 @@
+"use client";
+import React from 'react';
+const squareBoxBg = "/landing/SquareBox.png";
+import CustomPricingCards from '../../Components/CustomPricingCards';
+
+const plans = [
+  {
+    name: 'Standard',
+    price: '29',
+    details: '/ month . 1 user',
+    buttonText: 'View Details',
+    features: [
+      '100 GB Storage',
+      'Basic version control',
+      'Audit logging included',
+      'Standard support',
+      'Unlimited SES',
+      'Legal E-signatures',
+    ],
+    popular: false,
+  },
+  {
+    name: 'Professional plan',
+    price: '89',
+    details: '/ month . 1 user',
+    buttonText: 'View Details',
+    features: [
+      '1 TB Storage',
+      'Unlimited e-signatures (SES)',
+      'Full AI engine - extraction, chatbot, OCR',
+      'Inline comments & annotations',
+      'Standard support',
+    ],
+    popular: false, // Changed from true based on screenshot
+  },
+  {
+    name: 'Business',
+    price: 'X',
+    details: '/ month . Unlimited users',
+    buttonText: 'View Details',
+    features: [
+      'Everything in Professional',
+      'Unlimited storage',
+      'Granular team permissions & roles',
+      'Custom API access',
+      'Advanced workflow automation',
+      'Priority support & SLA',
+    ],
+    popular: false,
+  },
+];
+
+const Pricing: React.FC = () => {
+  return (
+    <section className="py-24 relative overflow-hidden bg-[#FCFCFC]">
+      
+      {/* Top Left Background Box */}
+      <img 
+        src={squareBoxBg} 
+        alt="" 
+        className="absolute top-0 left-0 pointer-events-none -translate-x-[10%] -translate-y-[10%] z-0 max-w-none w-[400px] opacity-60" 
+      />
+
+      {/* Bottom Right Background Box */}
+      <img 
+        src={squareBoxBg} 
+        alt="" 
+        className="absolute bottom-0 right-0 pointer-events-none translate-x-[10%] translate-y-[10%] z-0 max-w-none w-[400px] opacity-60" 
+      />
+
+      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        
+        {/* Badge */}
+        <div className="inline-flex items-center gap-2 text-[#444CE7] font-semibold text-[13px] tracking-widest uppercase mb-6">
+          <div className="w-2 h-2 rounded-full bg-[#444CE7]"></div>
+          PAY FOR WHAT YOU USE
+        </div>
+
+        {/* Header */}
+        <div className="max-w-4xl mx-auto mb-16 space-y-2">
+          <h2 className="text-3xl md:text-4xl lg:text-[44px] font-medium text-[#0B1538] tracking-tight">
+            Scale As You Grow
+          </h2>
+          <p className="text-[16px] md:text-[18px] text-[#434654] leading-relaxed tracking-wide text-center max-w-2xl mx-auto">
+            Choose the plan that fits your current needs.
+          </p>
+        </div>
+
+        {/* Pricing Cards */}
+        <CustomPricingCards plans={plans} />
+      </div>
+    </section>
+  );
+};
+
+export default Pricing;

src/app/(features)/HomePage/components/Problems.tsx

@@ -0,0 +1,91 @@
+"use client";
+import React from 'react';
+const problem1 = "/landing/homePage/problem1.png";
+const problem2 = "/landing/homePage/problem2.png";
+const problem3 = "/landing/homePage/problem3.png";
+const problem4 = "/landing/homePage/problem4.png";
+
+const dotBg = "/landing/DotBg.png";
+
+const problems = [
+  {
+    title: 'Too many tools',
+    description: 'Storage here, editing there, signing else where — nothing talks to each other.',
+    image: problem1,
+  },
+  {
+    title: 'Version confusion',
+    description: 'Which file is final? Who changed what, and when?',
+    image: problem2,
+  },
+  {
+    title: 'Risky Sharing',
+    description: 'Links with no expiry, no permissions, no audit trail.',
+    image: problem3,
+  },
+  {
+    title: 'No Visibility',
+    description: 'No single record of who accessed, edited or signed a document.',
+    image: problem4,
+  },
+];
+
+const ProblemsSection: React.FC = () => {
+  return (
+    <section className="py-24 relative bg-white overflow-hidden">
+      {/* Dot Pattern Background */}
+      <div 
+        className="absolute inset-0 pointer-events-none" 
+        style={{
+          backgroundImage: `url(${dotBg})`,
+          backgroundSize: 'contain',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'repeat',
+        }}
+      ></div>
+
+      <div className="relative z-10 max-w-[1320px] mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        
+        {/* Badge */}
+        <div className="inline-flex items-center gap-2 text-[#444CE7] font-semibold text-[13px] tracking-widest uppercase mb-6">
+          <div className="w-2 h-2 rounded-full bg-[#444CE7]"></div>
+          THE PROBLEM
+        </div>
+
+        {/* Header */}
+        <h2 className="text-3xl md:text-4xl lg:text-[44px] font-medium text-[#0B1538] mb-16 tracking-tight">
+          Managing Documents Shouldn’t Feel This Complicated
+        </h2>
+
+        {/* Problems Grid */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-[24px] justify-items-center w-full">
+          {problems.map((problem, index) => (
+            <div 
+              key={index} 
+              className="flex flex-col bg-white w-full max-w-[300px] h-[308px] rounded-[12.85px] border border-[#f0f0f0] shadow-[0_4px_20px_-4px_rgba(0,0,0,0.03)] overflow-hidden transition-all duration-300 hover:shadow-[0_8px_30px_-4px_rgba(0,0,0,0.08)] hover:-translate-y-1"
+            >
+              {/* Image Container */}
+              <div className="w-full flex-1 bg-[#F8F9FB] flex items-center justify-center relative overflow-hidden">
+                <img 
+                  src={problem.image} 
+                  alt={problem.title} 
+                  className="w-full h-full object-cover mix-blend-multiply"
+                />
+              </div>
+              
+              {/* Text Container */}
+              <div className="text-left px-[16px] pb-[16px] pt-[12px]">
+                <h3 className="text-[14.5px] font-bold text-gray-900 mb-[4px]">{problem.title}</h3>
+                <p className="text-[12.85px] text-[#898989] font-medium leading-[18px]">
+                  {problem.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ProblemsSection;

src/app/(features)/HomePage/components/ProductsSection.tsx

@@ -0,0 +1,76 @@
+"use client";
+import React from 'react';
+import { Sparkles } from 'lucide-react';
+import Button from '../../Components/Button';
+
+const products = [
+  {
+    title: 'DocQube Drive',
+    description: 'Store, version, share and collaborate — with an AI that answers questions about your files.',
+  },
+  {
+    title: 'DocQube PDF Editor',
+    description: 'Edit any PDF in your browser with true text reflow — free to start, no signup.',
+  },
+  {
+    title: 'DocQube Workflows',
+    description: 'Route documents for review, collect approvals and trigger signatures automatically.',
+  },
+  {
+    title: 'DocQube Sign',
+    description: 'Send, sign and track legally-binding e-signatures with verification built in.',
+  }
+];
+
+const ProductsSection: React.FC = () => {
+  return (
+    <section className="py-24 bg-[#FCFCFC]">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        
+        {/* Header */}
+        <div className="text-center mb-16">
+          <div className="inline-flex items-center text-[#444CE7] font-semibold text-xs tracking-wider uppercase mb-6">
+            <Sparkles className="w-4 h-4 mr-2" />
+            ONE PLATFORM. FOUR PRODUCTS.
+          </div>
+          <h2 className="text-4xl font-medium text-[#0a1236] mb-4 tracking-tight">
+            Pick Where You Want To Start
+          </h2>
+          <p className="text-lg text-gray-700 max-w-2xl mx-auto">
+            Each product stands on its own, works better together, and is included in the DocQube Suite.
+          </p>
+        </div>
+
+        {/* Product Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+          {products.map((product, idx) => (
+            <div key={idx} className="bg-[#CFCFCF]/40 rounded-3xl p-8 flex flex-col justify-end min-h-[320px] transition-transform duration-300 hover:scale-[1.02]">
+              <h3 className="text-xl font-bold text-gray-900 mb-2">{product.title}</h3>
+              <p className="text-sm text-gray-700 leading-relaxed max-w-sm">
+                {product.description}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* Bottom Banner */}
+        <div className="bg-gradient-to-t from-[#818AEF] to-[#D8DAFA] rounded-3xl p-8 md:p-10 flex flex-col md:flex-row items-center justify-between gap-8 shadow-sm">
+          <div>
+            <h3 className="text-2xl font-medium text-gray-900 mb-2">Want it all? Meet the DocQube Suite</h3>
+            <p className="text-sm text-gray-800">
+              Every module under one login, one bill, one security model — save up to ~55% vs. buying separately.
+            </p>
+          </div>
+          <div className="flex-shrink-0">
+            <Button href="/suite" variant="primary">
+              SEE THE SUITE
+            </Button>
+          </div>
+        </div>
+
+      </div>
+    </section>
+  );
+};
+
+export default ProductsSection;

src/app/(features)/HomePage/components/Security.tsx

@@ -0,0 +1,116 @@
+"use client";
+import React from 'react';
+const mindMapImg = "/landing/MindMap.png";
+const logoImg = "/landing/Logo.png";
+const dotBg = "/landing/DotBg.png";
+
+const Security: React.FC = () => {
+  return (
+    <section 
+      className="py-24 relative bg-[#FCFCFC] overflow-hidden"
+      style={{
+        backgroundImage: `url(${dotBg})`,
+        backgroundSize: 'contain',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'repeat'
+      }}
+    >
+      
+      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        
+        {/* Badge */}
+        <div className="inline-flex items-center gap-2 text-[#444CE7] font-semibold text-[13px] tracking-widest uppercase mb-6">
+          <div className="w-2 h-2 rounded-full bg-[#444CE7]"></div>
+          BUILT WITH SECURITY AT ITS CORE
+        </div>
+
+        {/* Header */}
+        <div className="max-w-4xl mx-auto mb-16">
+          <h2 className="text-3xl md:text-4xl lg:text-[44px] font-medium text-[#0B1538] tracking-tight">
+            Your Documents, Protected
+          </h2>
+        </div>
+
+        {/* Interactive Graphic Area */}
+        <div className="relative max-w-[1100px] mx-auto min-h-[450px] md:min-h-[500px]">
+          
+          {/* Central Graphics */}
+          <div className="absolute inset-0 flex flex-col items-center pointer-events-none pt-4">
+            
+            {/* Logo */}
+            <img 
+              src={logoImg} 
+              alt="DocQube Logo" 
+              className="w-24 h-auto object-contain relative z-10 mb-[-24px]"
+            />
+            
+            {/* MindMap Lines */}
+            <img 
+              src={mindMapImg} 
+              alt="Security Network" 
+              className="w-full max-w-[900px] h-auto object-contain opacity-100"
+            />
+            
+          </div>
+
+          {/* Feature Cards - Absolute positioned for Desktop, Flex for Mobile */}
+          <div className="relative md:absolute inset-0 z-20 flex flex-col md:block gap-6 p-4 md:p-0">
+            
+            {/* Audit logs (Left 1) */}
+            <div className="md:absolute md:top-[22%] md:left-[2%] lg:left-[4%] xl:left-[6%]">
+              <div className="bg-white p-6 rounded-[20px] shadow-[0_4px_24px_rgba(0,0,0,0.04)] border border-gray-100 max-w-full md:max-w-[320px] text-left transition-transform hover:-translate-y-1">
+                <h4 className="text-[17px] font-semibold text-gray-900 mb-2">Audit logs</h4>
+                <p className="text-[14.5px] text-gray-500 leading-relaxed font-medium">
+                  A tamper-evident history of every access, edit and share event.
+                </p>
+              </div>
+            </div>
+
+            {/* Automated Backups (Right 1) */}
+            <div className="md:absolute md:top-[22%] md:right-[2%] lg:right-[4%] xl:right-[6%]">
+              <div className="bg-white p-6 rounded-[20px] shadow-[0_4px_24px_rgba(0,0,0,0.04)] border border-gray-100 max-w-full md:max-w-[320px] text-left transition-transform hover:-translate-y-1">
+                <h4 className="text-[17px] font-semibold text-gray-900 mb-2">Automated Backups</h4>
+                <p className="text-[14.5px] text-gray-500 leading-relaxed font-medium">
+                  Daily automated snapshots distributed across regions. Point-in-time recovery when you need it.
+                </p>
+              </div>
+            </div>
+
+            {/* Virus scanning (Left 2) */}
+            <div className="md:absolute md:-bottom-[15%] md:left-[8%] lg:left-[14%] xl:left-[18%]">
+              <div className="bg-white p-6 rounded-[20px] shadow-[0_4px_24px_rgba(0,0,0,0.04)] border border-gray-100 max-w-full md:max-w-[300px] text-left transition-transform hover:-translate-y-1">
+                <h4 className="text-[17px] font-semibold text-gray-900 mb-2">Virus scanning</h4>
+                <p className="text-[14.5px] text-gray-500 leading-relaxed font-medium">
+                  Real-time threat detection on every file upload — before anything enters your environment
+                </p>
+              </div>
+            </div>
+
+            {/* Secure email (Right 2) */}
+            <div className="md:absolute md:-bottom-[15%] md:right-[8%] lg:right-[14%] xl:right-[18%]">
+              <div className="bg-white p-6 rounded-[20px] shadow-[0_4px_24px_rgba(0,0,0,0.04)] border border-gray-100 max-w-full md:max-w-[300px] text-left transition-transform hover:-translate-y-1">
+                <h4 className="text-[17px] font-semibold text-gray-900 mb-2">Secure email</h4>
+                <p className="text-[14.5px] text-gray-500 leading-relaxed font-medium">
+                  Encrypted document delivery with full link tracking. Know exactly when your documents are opened.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer Text */}
+        <div className="mt-28 md:mt-32 mb-8 text-center relative z-30">
+          <p className="text-[#444CE7] italic font-medium text-[15px]">
+            Built to GDPR and HIPAA principles · encryption in transit and at rest.{' '}
+            <a href="#" className="underline decoration-[#444CE7] underline-offset-4 hover:text-[#3238a8]">
+              Visit the Security & Trust center →
+            </a>
+          </p>
+        </div>
+
+      </div>
+    </section>
+  );
+};
+
+export default Security;

src/app/(features)/Pricing/components/DocumentsProtected.tsx

@@ -0,0 +1,30 @@
+"use client";
+import React from 'react';
+
+const DocumentsProtected: React.FC = () => {
+  return (
+    <section className="py-12 bg-white">
+      <div className="max-w-[1320px] mx-auto px-4 sm:px-6 lg:px-8 w-full">
+        {/* Custom Dashed Border Container */}
+        <div 
+          className="w-full bg-[#F8F9FB] rounded-[32px] p-8 md:p-12 relative overflow-hidden flex flex-col items-start text-left shadow-sm"
+          style={{
+            backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='32' ry='32' stroke='%23747897' stroke-width='3' stroke-dasharray='12%2c 16' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e")`
+          }}
+        >
+          <h3 className="text-2xl md:text-[26px] font-bold text-[#0B1538] mb-3">
+            Your Documents, Protected
+          </h3>
+          <p className="text-[#434654] text-[14.5px] leading-relaxed mb-6 font-normal max-w-5xl">
+            Encryption at rest & in transit &middot; tamper-evident audit logs &middot; virus scanning on every upload &middot; role-based access control &middot; automated backups. Built to GDPR and HIPAA principles.
+          </p>
+          <p className="text-[#414EE7] text-[14px] italic font-medium">
+            Cancel anytime. No lock-in. Export your data whenever you want.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default DocumentsProtected;

src/app/(features)/Pricing/components/FeatureComparisonTable.tsx

@@ -0,0 +1,106 @@
+"use client";
+import React from 'react';
+import { Check, X } from 'lucide-react';
+const logoImg = "/landing/Logo.png";
+
+export interface FeatureRow {
+  name: string;
+  standard: string | boolean;
+  professional: string | boolean;
+  business: string | boolean;
+  enterprise: string | boolean;
+}
+
+interface FeatureComparisonTableProps {
+  features: FeatureRow[];
+}
+
+const FeatureComparisonTable: React.FC<FeatureComparisonTableProps> = ({ features }) => {
+  const renderCell = (value: string | boolean, isHighlighted: boolean) => {
+    if (typeof value === 'boolean') {
+      return value ? (
+        <Check className="w-4 h-4 mx-auto text-[#414EE7]" strokeWidth={2.5} />
+      ) : (
+        <X className="w-4 h-4 mx-auto text-red-500" strokeWidth={2.5} />
+      );
+    }
+    return (
+      <span className={`text-[13px] italic font-medium ${isHighlighted ? 'text-gray-900 font-semibold' : 'text-gray-800'}`}>
+        {value}
+      </span>
+    );
+  };
+
+  return (
+    <div className="w-full max-w-6xl mx-auto overflow-x-auto pt-6 pb-6">
+      <div className="min-w-[860px] pt-4">
+        {/* Table Container with relative positioning */}
+        <div className="relative px-4">
+          
+          {/* Continuous Overlay Box for Professional Column */}
+          <div 
+            className="absolute top-0 bottom-0 pointer-events-none border-2 border-[#414EE7] rounded-[24px] z-20"
+            style={{
+              left: 'calc(40% + 4px)',
+              right: 'calc(40% + 4px)',
+            }}
+          >
+            <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-[#414EE7] text-white text-[10px] font-bold tracking-widest px-4 py-1 rounded-full uppercase whitespace-nowrap shadow-md z-30">
+              POPULAR
+            </div>
+          </div>
+
+          {/* Table Header */}
+          <div className="grid grid-cols-5 gap-4 items-center mb-6 pb-2">
+            <div className="flex items-center gap-2">
+              <img src={logoImg} alt="DocQube" className="w-7 h-7 object-contain" />
+              <span className="text-[20px] font-bold text-[#0B1538]">
+                DocQube <span className="text-[#414EE7]">Features</span>
+              </span>
+            </div>
+            <div className="text-center font-bold text-[16px] text-gray-900">Starter</div>
+            <div className="text-center font-bold text-[16px] text-gray-900">Professional</div>
+            <div className="text-center font-bold text-[16px] text-gray-900">Business</div>
+            <div className="text-center font-bold text-[16px] text-gray-900">Enterprise</div>
+          </div>
+
+          {/* Table Body Rows */}
+          <div className="flex flex-col">
+            {features.map((feature, idx) => (
+              <div 
+                key={idx} 
+                className="grid grid-cols-5 gap-4 items-center py-4 border-b border-gray-100/90 hover:bg-gray-50/40 transition-colors"
+              >
+                <div className="text-[13.5px] font-medium text-gray-800 text-left pr-4">
+                  {feature.name}
+                </div>
+                <div className="text-center">
+                  {renderCell(feature.standard, false)}
+                </div>
+                <div className="text-center">
+                  {renderCell(feature.professional, true)}
+                </div>
+                <div className="text-center">
+                  {renderCell(feature.business, false)}
+                </div>
+                <div className="text-center">
+                  {renderCell(feature.enterprise, false)}
+                </div>
+              </div>
+            ))}
+          </div>
+
+        </div>
+
+        {/* Footnote */}
+        <div className="px-4 mt-8 text-left">
+          <p className="text-[#3B57FF] text-[13px] italic font-medium">
+            Feature availability reflects current product capabilities. Some deployment options are on request &mdash; contact sales.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeatureComparisonTable;

src/app/(features)/Pricing/data.ts

@@ -0,0 +1,135 @@
+"use client";
+import { PricingPlan } from '../Components/CustomPricingCards';
+import { ModulePlan } from '../Components/ModulePricingCards';
+import { FeatureRow } from './components/FeatureComparisonTable';
+import { FaqItem } from '../Components/Faq';
+
+export const suitePlans: PricingPlan[] = [
+  {
+    name: 'Standard',
+    price: '29',
+    details: '/ month . 1 user',
+    buttonText: 'Start 14-day free trial',
+    features: [
+      '100 GB Storage',
+      'Basic version control',
+      'Audit logging included',
+      'Standard support',
+      'Unlimited SES',
+      'Legal E-signatures',
+    ],
+    popular: false,
+  },
+  {
+    name: 'Professional Suite',
+    price: '89',
+    details: '/ month . 1 user',
+    buttonText: 'Start 14-day free trial',
+    features: [
+      '1 TB Storage',
+      'Unlimited e-signatures (SES)',
+      'Full AI engine - extraction, chatbot, OCR',
+      'Inline comments & annotations',
+      'Standard support',
+    ],
+    popular: true,
+  },
+  {
+    name: 'Business',
+    price: 'X',
+    details: '/ month . Unlimited users',
+    buttonText: 'Contact sales for pricing',
+    features: [
+      'Everything in Professional',
+      'Unlimited storage',
+      'Granular team permissions & roles',
+      'Custom API access',
+      'Advanced workflow automation',
+      'Priority support & SLA',
+    ],
+    popular: false,
+  },
+  {
+    name: 'Enterprise',
+    price: 'Contact Us',
+    details: '/ month . Unlimited users',
+    buttonText: 'Contact sales to discuss',
+    features: [
+      'Everything in Business',
+      'Dedicated instance / On-prem',
+      'Custom integrations',
+      'White-labeling',
+      '24/7 dedicated support',
+      'Advanced compliance (HIPAA/SOC2)',
+    ],
+    popular: false,
+  }
+];
+
+export const modulePlans: ModulePlan[] = [
+  {
+    title: 'Drive',
+    price: '29',
+    details: '/ month . 1 user',
+    subtitle: 'Included in the Suite',
+    description: 'Storage, versioning, sharing, collaboration, audit trails and an AI assistant for your files.',
+  },
+  {
+    title: 'PDF Editor',
+    price: '29',
+    details: '/ month . 1 user',
+    subtitle: 'Included in the Suite',
+    description: 'Free forever within limits, no watermark. Pro adds larger files, OCR, redaction, batch and save-to-Drive.',
+  },
+  {
+    title: 'Workflows',
+    price: '29',
+    details: '/ month . 1 user',
+    subtitle: 'Included in the Suite',
+    description: 'Route, approve and trigger signatures — every step tracked.',
+  },
+  {
+    title: 'Sign',
+    price: '29',
+    details: '/ month . 1 user',
+    subtitle: 'Included in the Suite',
+    description: 'Legally-binding e-signatures with verification, or pay per envelope.',
+  }
+];
+
+export const comparisonFeatures: FeatureRow[] = [
+  { name: 'Drive (DMS)', standard: true, professional: true, business: true, enterprise: true },
+  { name: 'PDF Editor', standard: 'Basic', professional: 'Pro', business: 'Pro', enterprise: 'Pro' },
+  { name: 'Workflows', standard: false, professional: true, business: true, enterprise: true },
+  { name: 'Sign', standard: 'Limited', professional: true, business: true, enterprise: true },
+  { name: 'Storage', standard: '100 GB', professional: '1 TB', business: 'Unlimited', enterprise: 'Unlimited' },
+  { name: 'Version history & retention', standard: true, professional: true, business: true, enterprise: true },
+  { name: 'Doc conversion (PDF → Word/HTML/XML)', standard: false, professional: true, business: true, enterprise: true },
+  { name: 'Real-time collaboration', standard: false, professional: true, business: true, enterprise: true },
+  { name: 'Virus scanning', standard: 'Basic', professional: 'Standard', business: 'Granular', enterprise: 'Advanced' },
+  { name: 'Granular roles (RBAC)', standard: true, professional: 'Google', business: 'Google', enterprise: 'SSO / SAML' },
+  { name: 'SSO', standard: false, professional: true, business: true, enterprise: true },
+  { name: 'AI chatbot (document Q&A)', standard: false, professional: true, business: true, enterprise: true },
+  { name: 'OCR & extraction', standard: false, professional: true, business: true, enterprise: true },
+  { name: 'Signature verification', standard: false, professional: true, business: true, enterprise: true },
+  { name: 'Support', standard: 'Standard', professional: 'Standard', business: 'Priority + SLA', enterprise: 'Dedicated manager' },
+];
+
+export const pricingFaqs: FaqItem[] = [
+  {
+    question: "Does the AI assistant use my documents to train models?",
+    answer: "No. We have a strict commitment that client data is never used to train, fine-tune or improve any AI or machine-learning models. This survives termination."
+  },
+  {
+    question: "Can I recover a previous version of a document?",
+    answer: "Yes, our Drive module automatically keeps full version history. You can restore previous versions at any time."
+  },
+  {
+    question: "How is access controlled?",
+    answer: "Access is controlled through role-based access control (RBAC), multi-tenant isolation, and the principle of least privilege."
+  },
+  {
+    question: "Are you SOC 2 / HIPAA / GDPR certified?",
+    answer: "DocQube is built to GDPR and HIPAA principles with SOC 2-aligned controls. Contact us for our current formal certification status."
+  }
+];

src/app/(features)/Pricing/index.tsx

@@ -0,0 +1,148 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import CustomHeroSection from "../Components/CustomHeroSection";
+import CustomPricingCards from "../Components/CustomPricingCards";
+import ModulePricingCards from "../Components/ModulePricingCards";
+import FeatureComparisonTable from "./components/FeatureComparisonTable";
+import DocumentsProtected from "./components/DocumentsProtected";
+import Faq from "../Components/Faq";
+
+import {
+  suitePlans,
+  modulePlans,
+  comparisonFeatures,
+  pricingFaqs,
+} from "./data";
+const dotBg = "/landing/DotBg.png";
+const squareBoxBg = "/landing/SquareBox.png";
+import { Sparkles } from "lucide-react";
+
+const PricingPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-[#FCFCFC] selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+
+      <main className="flex-grow pt-[80px] pb-24">
+        {/* Hero Section */}
+        <CustomHeroSection
+          badgeText="PAY FOR WHAT YOU USE"
+          headlineMain="Pricing That Fits How"
+          headlineHighlight="You Actually Work"
+          description="All modules are available individually or together as a Suite. Start for free, buy the DIY Suite, or go custom on Enterprise."
+          primaryButtonText="START FREE TRIAL"
+          secondaryButtonText="TALK TO SALES"
+        />
+
+        {/* The Suite Pricing Section */}
+        <section className="relative py-24 bg-white border-t border-gray-100 overflow-hidden">
+          {/* Top Left Background Box */}
+          <img
+            src={squareBoxBg}
+            alt=""
+            className="absolute top-0 left-0 pointer-events-none -translate-x-[10%] -translate-y-[10%] z-0 max-w-none w-[400px] opacity-60"
+          />
+
+          {/* Bottom Right Background Box */}
+          <img
+            src={squareBoxBg}
+            alt=""
+            className="absolute bottom-0 right-0 pointer-events-none translate-x-[10%] translate-y-[10%] z-0 max-w-none w-[400px] opacity-60"
+          />
+
+          <div className="relative z-10 px-4 sm:px-6 lg:px-8">
+            <div className="text-center mb-12">
+              <div className="inline-flex items-center gap-1.5 text-[#444CE7] font-bold text-[11px] tracking-widest uppercase mb-3">
+                <Sparkles className="w-3.5 h-3.5" />
+                DOCUMENT AI
+              </div>
+              <h2 className="text-3xl md:text-4xl font-medium text-[#0a1236] tracking-tight">
+                One Platform. Everything Included.
+              </h2>
+            </div>
+
+            <div className="max-w-[1400px] mx-auto">
+              <CustomPricingCards plans={suitePlans} variant="bottom-button" />
+            </div>
+
+            <div className="max-w-7xl mx-auto px-4 mt-8">
+              <p className="text-sm font-medium italic text-gray-800">
+                Minimum seats may apply per tier. Storage is pooled across your
+                team.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* The Module Pricing Section */}
+        <section className="py-24 bg-white border-t border-gray-100 relative">
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              backgroundImage: `url(${dotBg})`,
+              opacity: 0.5,
+              backgroundSize: "20px",
+            }}
+          ></div>
+          <div className="relative z-10 px-4 sm:px-6 lg:px-8">
+            <div className="text-center mb-12">
+              <div className="inline-flex items-center text-[#444CE7] font-bold text-[11px] tracking-widest uppercase mb-3">
+                <div className="w-2 h-2 rounded-full bg-[#444CE7] mr-2"></div>
+                BY MODULE
+              </div>
+              <h2 className="text-3xl md:text-[40px] font-medium text-[#0a1236] tracking-tight">
+                Only Need One Thing? Buy Just That.
+              </h2>
+            </div>
+
+            <ModulePricingCards modules={modulePlans} />
+          </div>
+        </section>
+
+        {/* Feature Comparison Section */}
+        <section className="py-24 bg-white border-t border-gray-100 relative overflow-hidden">
+          {/* Top Left Background Box */}
+          <img 
+            src={squareBoxBg} 
+            alt="" 
+            className="absolute top-0 left-0 pointer-events-none -translate-x-[10%] -translate-y-[10%] z-0 max-w-none w-[400px] opacity-60" 
+          />
+
+          {/* Bottom Right Background Box */}
+          <img 
+            src={squareBoxBg} 
+            alt="" 
+            className="absolute bottom-0 right-0 pointer-events-none translate-x-[10%] translate-y-[10%] z-0 max-w-none w-[400px] opacity-60" 
+          />
+
+          <div className="relative z-10 px-4 sm:px-6 lg:px-8">
+            <div className="text-center mb-12">
+               <div className="inline-flex items-center gap-1.5 text-[#444CE7] font-bold text-[11px] tracking-widest uppercase mb-3">
+                 <Sparkles className="w-3.5 h-3.5" />
+                 COMPARE EVERY PLAN
+               </div>
+               <h2 className="text-3xl md:text-[40px] font-medium text-[#0a1236] tracking-tight">
+                 Everything Each Plan Includes
+               </h2>
+            </div>
+
+            <FeatureComparisonTable features={comparisonFeatures} />
+          </div>
+        </section>
+
+        {/* Security / Trust Banner Component */}
+        <DocumentsProtected />
+
+        {/* FAQ Section */}
+        <section className="py-16 bg-white">
+          <Faq title="Frequently Asked Questions" faqs={pricingFaqs} />
+        </section>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default PricingPage;

src/app/(features)/Pricing/page.tsx

@@ -0,0 +1 @@
+export { default } from "../Pricing/index";

src/app/(features)/ProductPage/AllPdfToolsPage.tsx

@@ -0,0 +1,208 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import ProductHeroSection from "../Components/CustomHeroSection";
+import { allPdfToolsData } from "./data/productData";
+const dotBg = "/landing/DotBg.png";
+
+
+const freetools1 = "/landing/productsPage/freetools1.png";
+const freetools2 = "/landing/productsPage/freetools2.png";
+const freetools3 = "/landing/productsPage/freetools3.png";
+const freetools4 = "/landing/productsPage/freetools4.png";
+const freetools5 = "/landing/productsPage/freetools5.png";
+const freetools6 = "/landing/productsPage/freetools6.png";
+const freetools7 = "/landing/productsPage/freetools7.png";
+const freetools8 = "/landing/productsPage/freetools8.png";
+const freetools9 = "/landing/productsPage/freetools9.png";
+const freetools10 = "/landing/productsPage/freetools10.png";
+const freetools11 = "/landing/productsPage/freetools11.png";
+const freetools12 = "/landing/productsPage/freetools12.png";
+const freetools13 = "/landing/productsPage/freetools13.png";
+const freetools14 = "/landing/productsPage/freetools14.png";
+const freetools15 = "/landing/productsPage/freetools15.png";
+const freetools16 = "/landing/productsPage/freetools16.png";
+const freetools17 = "/landing/productsPage/freetools17.png";
+
+const categories = [
+  {
+    title: "Edit",
+    tools: [
+      {
+        title: "Edit PDF",
+        description: "Edit a PDF directly, free",
+        icon: freetools1,
+      },
+      {
+        title: "OCR PDF",
+        description: "Make scanned PDF searchable",
+        icon: freetools2,
+      },
+      {
+        title: "Watermark PDF",
+        description: "Add a watermark to your PDF free",
+        icon: freetools3,
+      },
+    ],
+  },
+  {
+    title: "Organize",
+    tools: [
+      {
+        title: "Rotate PDF",
+        description: "Rotate PDF pages, free",
+        icon: freetools4,
+      },
+      {
+        title: "Delete PDF pages",
+        description: "Delete specific pages from PDF, free",
+        icon: freetools5,
+      },
+      {
+        title: "Extract PDF pages",
+        description: "Extract pages from a PDF, free",
+        icon: freetools6,
+      },
+      {
+        title: "Merge PDF",
+        description: "Combine PDFs into one, free",
+        icon: freetools7,
+      },
+      {
+        title: "Split PDF",
+        description: "Split PDF into multiple, free",
+        icon: freetools8,
+      },
+    ],
+  },
+  {
+    title: "Convert",
+    tools: [
+      {
+        title: "PDF to Word",
+        description: "Convert PDF to Word, free",
+        icon: freetools9,
+      },
+      {
+        title: "PDF to Excel",
+        description: "Convert PDF to Excel, free",
+        icon: freetools10,
+      },
+      {
+        title: "PDF to PowerPoint",
+        description: "Convert PDF to PowerPoint, free",
+        icon: freetools11,
+      },
+      {
+        title: "PDF to JPG",
+        description: "Convert PDF to JPG, free",
+        icon: freetools13,
+      },
+      {
+        title: "JPG to PDF",
+        description: "Convert JPG to PDF, free",
+        icon: freetools12,
+      },
+    ],
+  },
+  {
+    title: "Optimize",
+    tools: [
+      {
+        title: "Compress PDF",
+        description: "Compress PDF sizes, free",
+        icon: freetools14,
+      },
+    ],
+  },
+  {
+    title: "Secure",
+    tools: [
+      {
+        title: "Protect PDF",
+        description: "Add password to PDF, free",
+        icon: freetools15,
+      },
+      {
+        title: "Unlock PDF",
+        description: "Remove PDF password, free",
+        icon: freetools16,
+      },
+    ],
+  },
+  {
+    title: "Sign",
+    tools: [
+      {
+        title: "Sign PDF",
+        description: "Sign a PDF online, free",
+        icon: freetools17,
+      },
+    ],
+  },
+];
+
+const AllPdfToolsPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <ProductHeroSection {...allPdfToolsData.hero} />
+
+        {/* Tools Section with Dot Background */}
+        <section
+          className="relative py-24 border-t border-gray-100 bg-[#FCFCFC]"
+          style={{
+            backgroundImage: `url(${dotBg})`,
+            backgroundSize: "contain",
+            backgroundPosition: "center",
+            backgroundRepeat: "repeat",
+          }}
+        >
+          <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
+            {categories.map((category, catIdx) => (
+              <div key={catIdx}>
+                <h3 className="text-[22px] font-medium text-[#0a1236] tracking-tight mb-8">
+                  {category.title}
+                </h3>
+
+                {/* Tools Grid for this category */}
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                  {category.tools.map((tool, idx) => {
+                    const Icon = tool.icon;
+                    return (
+                      <div
+                        key={idx}
+                        className="bg-white rounded-[16px] p-6 border border-gray-100 hover:-translate-y-1 transition-all duration-300 cursor-pointer flex flex-col items-start group"
+                      >
+                        <div className="w-20 h-20 rounded-xl text-[#444CE7] flex items-center justify-center mb-4 group-hover:scale-105 transition-transform duration-300 overflow-hidden">
+                          {typeof Icon === 'string' ? (
+                            <img src={Icon} alt="" className="w-full h-full object-contain" />
+                          ) : (
+                            // @ts-ignore
+                            <Icon className="w-6 h-6" strokeWidth={1.5} />
+                          )}
+                        </div>
+                        <h4 className="text-[17px] font-bold text-gray-900 ">
+                          {tool.title}
+                        </h4>
+                        <p className="text-[13px] text-gray-500 leading-relaxed font-medium">
+                          {tool.description}
+                        </p>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default AllPdfToolsPage;

src/app/(features)/ProductPage/AllProductsPage.tsx

@@ -0,0 +1,46 @@
+"use client";
+import React from "react";
+import { usePathname } from 'next/navigation';
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import ProductHeroSection from "../Components/CustomHeroSection";
+import AllProducts from "./components/AllProducts";
+import WhyDocqube from "./components/WhyDocqube";
+import Faq from "../Components/Faq";
+import { platformData, driveData, ProductData } from "./data/productData";
+
+const ProductPage: React.FC = () => {
+  const location = usePathname();
+  const path = location || "";
+
+  let pageData: ProductData = platformData; // default to platform
+
+  // Determine which data to load based on the route
+  if (path.includes("drive")) {
+    pageData = driveData;
+  }
+  // We can add more else-if blocks here for 'pdf-editor', 'workflows', 'sign', etc.
+
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {" "}
+        {/* pt-[80px] to account for fixed navbar */}
+        <ProductHeroSection {...pageData.hero} />
+        {/* Render AllProducts below the Hero Section */}
+        <AllProducts />
+        {/* Render WhyDocqube below AllProducts */}
+        <WhyDocqube />
+        {/* Render Faq below WhyDocqube */}
+        {pageData.faqs && <Faq faqs={pageData.faqs} />}
+        {/* Placeholder for future reusable components */}
+        {/* <ProductFeatures features={pageData.features} /> */}
+        {/* <ProductBenefits benefits={pageData.benefits} /> */}
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default ProductPage;

src/app/(features)/ProductPage/DrivePage.tsx

@@ -0,0 +1,35 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import ProductHeroSection from "../Components/CustomHeroSection";
+import ProductFeatures from "../Components/CustomFeatures";
+import EnterpriseFeatures from "../Components/EnterpriseFeatures";
+import Faq from "../Components/Faq";
+import { driveData } from "./data/productData";
+
+const DrivePage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <ProductHeroSection {...driveData.hero} />
+
+        {/* Drive Features (Zig-Zag) */}
+        {driveData.features && (
+          <ProductFeatures features={driveData.features} />
+        )}
+
+        {/* Enterprise Features Grid */}
+        {driveData.showEnterpriseFeatures && <EnterpriseFeatures {...driveData.enterpriseFeaturesData} />}
+
+        {/* FAQ Section */}
+        {driveData.faqs && <Faq faqs={driveData.faqs} />}
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default DrivePage;

src/app/(features)/ProductPage/EmbedPage.tsx

@@ -0,0 +1,33 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import ProductHeroSection from "../Components/CustomHeroSection";
+import EnterpriseFeatures from "../Components/EnterpriseFeatures";
+import { embedData } from "./data/productData";
+
+const EmbedPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <ProductHeroSection {...embedData.hero} />
+
+        {/* Features Section */}
+        <EnterpriseFeatures
+          badgeText={embedData.enterpriseFeaturesData?.badgeText}
+          title={embedData.enterpriseFeaturesData?.title}
+          features={embedData.enterpriseFeaturesData?.features}
+          bottomNote={embedData.enterpriseFeaturesData?.bottomNote}
+          primaryButtonText={
+            embedData.enterpriseFeaturesData?.primaryButtonText
+          }
+        />
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default EmbedPage;

src/app/(features)/ProductPage/FreeEditorPages.tsx

@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import ProductHeroSection from "../Components/CustomHeroSection";
+import EnterpriseFeatures from "../Components/EnterpriseFeatures";
+import { freeEditorData } from "./data/productData";
+
+const FreeEditorPages: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <ProductHeroSection {...freeEditorData.hero} variant="upload" />
+
+        {/* Features Section */}
+        <EnterpriseFeatures
+          badgeText={freeEditorData.enterpriseFeaturesData?.badgeText}
+          title={freeEditorData.enterpriseFeaturesData?.title}
+          features={freeEditorData.enterpriseFeaturesData?.features}
+          bottomNote={freeEditorData.enterpriseFeaturesData?.bottomNote}
+          primaryButtonText={
+            freeEditorData.enterpriseFeaturesData?.primaryButtonText ||
+            "UPGRADE TO PRO"
+          }
+        />
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default FreeEditorPages;

src/app/(features)/ProductPage/PdfEditorPage.tsx

@@ -0,0 +1,40 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import ProductHeroSection from "../Components/CustomHeroSection";
+import ProductFeatures from "../Components/CustomFeatures";
+import EnterpriseFeatures from "../Components/EnterpriseFeatures";
+import Faq from "../Components/Faq";
+import { editorData } from "./data/productData";
+
+const PdfEditorPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <ProductHeroSection {...editorData.hero} />
+
+        
+
+        {/* Enterprise Features Grid (Passed specific PDF Editor data) */}
+        {editorData.showEnterpriseFeatures && (
+          <EnterpriseFeatures {...editorData.enterpriseFeaturesData} />
+        )}
+      
+        
+        {/* PDF Editor Features (Zig-Zag with Buttons) */}
+        {editorData.features && (
+          <ProductFeatures features={editorData.features} />
+        )}
+        
+        {/* FAQ Section */}
+        {editorData.faqs && <Faq faqs={editorData.faqs} />}
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default PdfEditorPage;

src/app/(features)/ProductPage/SignPage.tsx

@@ -0,0 +1,30 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import ProductHeroSection from "../Components/CustomHeroSection";
+import ProductFeatures from "../Components/CustomFeatures";
+import EnterpriseFeatures from "../Components/EnterpriseFeatures";
+import Faq from "../Components/Faq";
+import { signData } from "./data/productData";
+
+const SignPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        <ProductHeroSection {...signData.hero} />
+        
+        {signData.showEnterpriseFeatures && (
+          <EnterpriseFeatures {...signData.enterpriseFeaturesData} />
+        )}
+        {signData.features && <ProductFeatures features={signData.features} />}
+
+        {signData.faqs && <Faq faqs={signData.faqs} />}
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default SignPage;

src/app/(features)/ProductPage/WorkflowsPage.tsx

@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import ProductHeroSection from "../Components/CustomHeroSection";
+import ProductFeatures from "../Components/CustomFeatures";
+import EnterpriseFeatures from "../Components/EnterpriseFeatures";
+import Faq from "../Components/Faq";
+import { workflowsData } from "./data/productData";
+
+const WorkflowsPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        <ProductHeroSection {...workflowsData.hero} />
+        
+        {workflowsData.showEnterpriseFeatures && (
+          <EnterpriseFeatures {...workflowsData.enterpriseFeaturesData} />
+        )}
+        {workflowsData.features && (
+          <ProductFeatures features={workflowsData.features} />
+        )}
+
+        {workflowsData.faqs && <Faq faqs={workflowsData.faqs} />}
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default WorkflowsPage;

src/app/(features)/ProductPage/components/AllProducts.tsx

@@ -0,0 +1,95 @@
+"use client";
+import React from "react";
+import { Sparkles } from "lucide-react";
+import Link from 'next/link';
+
+interface ProductItem {
+  title: string;
+  description: string;
+  link?: string;
+}
+
+export interface AllProductsProps {
+  badgeText?: string;
+  title?: string;
+  products?: ProductItem[];
+  bannerTitle?: string;
+  bannerDescription?: string;
+  bannerButtonText?: string;
+}
+
+const defaultProducts: ProductItem[] = [
+  {
+    title: "DocQube Drive",
+    description:
+      "Store, version, share and collaborate — with an AI that answers questions about your files.",
+    link: "/product/drive",
+  },
+  {
+    title: "DocQube PDF Editor",
+    description:
+      "Edit any PDF in your browser with true text reflow — free to start, no signup.",
+    link: "/product/pdf-editor",
+  },
+  {
+    title: "DocQube Workflows",
+    description:
+      "Route documents for review, collect approvals and trigger signatures automatically.",
+    link: "/product/workflows",
+  },
+  {
+    title: "DocQube Sign",
+    description:
+      "Send, sign and track legally-binding e-signatures with verification built in.",
+    link: "/product/sign",
+  },
+];
+
+const AllProducts: React.FC<AllProductsProps> = ({
+  badgeText = "WHAT'S INCLUDED",
+  title = "Four Products, Working As One",
+  products = defaultProducts,
+}) => {
+  return (
+    <section className="py-24 bg-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="text-center mb-16">
+          <div className="inline-flex items-center text-[#444CE7] font-semibold text-[11px] tracking-widest uppercase mb-4">
+            <Sparkles className="w-3.5 h-3.5 mr-1.5" />
+            {badgeText}
+          </div>
+          <h2 className="text-[32px] md:text-[40px] font-medium text-[#0a1236] tracking-tight">
+            {title}
+          </h2>
+        </div>
+
+        {/* Product Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-16">
+          {products.map((product, idx) => {
+            const cardContent = (
+              <div className="bg-[#CFCFCF] rounded-[24px] p-8 flex flex-col justify-end min-h-[360px] md:min-h-[420px] transition-transform duration-300 hover:scale-[1.02] cursor-pointer">
+                <h3 className="text-xl font-bold text-gray-900 mb-2">
+                  {product.title}
+                </h3>
+                <p className="text-[14px] text-gray-700 leading-relaxed max-w-[90%] font-medium">
+                  {product.description}
+                </p>
+              </div>
+            );
+
+            return product.link ? (
+              <Link href={product.link} key={idx} className="block">
+                {cardContent}
+              </Link>
+            ) : (
+              <div key={idx}>{cardContent}</div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AllProducts;

src/app/(features)/ProductPage/components/WhyDocqube.tsx

@@ -0,0 +1,116 @@
+"use client";
+import React from 'react';
+import { X, Check } from 'lucide-react';
+const dotBg = "/landing/DotBg.png";
+
+interface ComparisonItem {
+  negative: string;
+  positive: string;
+}
+
+export interface WhyDocqubeProps {
+  badgeText?: string;
+  title?: string;
+  comparisons?: ComparisonItem[];
+}
+
+const defaultComparisons: ComparisonItem[] = [
+  {
+    negative: "Files scattered across apps",
+    positive: "One source of truth",
+  },
+  {
+    negative: "A different login and bill for each",
+    positive: "One login, one bill",
+  },
+  {
+    negative: "Separate, inconsistent permissions",
+    positive: "One RBAC model across all modules",
+  },
+  {
+    negative: "No end-to-end audit trail",
+    positive: "A single audit trail from upload to signature",
+  },
+  {
+    negative: "Data copied between vendors",
+    positive: "Data stays in one platform",
+  }
+];
+
+const WhyDocqube: React.FC<WhyDocqubeProps> = ({
+  badgeText = "WHY THE PLATFORM BEATS POINT TOOLS",
+  title = "From Fragmented To One Clear System",
+  comparisons = defaultComparisons
+}) => {
+  return (
+    <section 
+      className="relative py-24 overflow-hidden bg-[#FCFCFC]"
+      style={{
+        backgroundImage: `url(${dotBg})`,
+        backgroundSize: 'contain',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'repeat'
+      }}
+    >
+
+      <div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+        
+        {/* Header */}
+        <div className="text-center mb-16">
+          <div className="inline-flex items-center text-[#444CE7] font-bold text-[11px] tracking-[0.2em] uppercase mb-4">
+            <div className="w-2 h-2 rounded-full bg-[#444CE7] mr-2"></div>
+            {badgeText}
+          </div>
+          <h2 className="text-[32px] md:text-[40px] font-medium text-[#0a1236] tracking-tight">
+            {title}
+          </h2>
+        </div>
+
+        {/* Comparison Card */}
+        <div className="bg-white rounded-[24px] border border-gray-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden flex flex-col md:flex-row">
+          
+          {/* Left Side: Negative */}
+          <div className="flex-1 p-10 md:p-14">
+            <h3 className="text-[22px] font-bold text-gray-800 mb-4">Buying point tools</h3>
+            <div className="w-12 h-0.5 bg-gray-200 mb-10"></div>
+            
+            <ul className="space-y-6">
+              {comparisons.map((item, idx) => (
+                <li key={idx} className="flex items-start">
+                  <X className="w-5 h-5 text-red-500 mr-4 flex-shrink-0 mt-0.5" />
+                  <span className="text-[15px] text-gray-600 font-medium leading-snug">{item.negative}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Right Side: Positive */}
+          <div className="flex-1 p-2 md:p-3">
+            <div className="bg-[#F6F7FE] h-full rounded-[24px] p-8 md:p-11 shadow-[inset_6px_6px_18px_0_rgba(55,87,233,0.19),inset_-6px_-8px_9px_0_#FFFFFF]">
+              <div className="flex items-center mb-4">
+                <h3 className="text-[22px] font-bold text-gray-800 mr-2">With DocQube</h3>
+                <div className="bg-[#444CE7] text-white rounded-full p-0.5">
+                  <Check className="w-3.5 h-3.5" strokeWidth={3} />
+                </div>
+              </div>
+              <div className="w-12 h-[3px] rounded-full bg-[#444CE7] mb-10"></div>
+              
+              <ul className="space-y-6">
+                {comparisons.map((item, idx) => (
+                  <li key={idx} className="flex items-start">
+                    <Check className="w-5 h-5 text-[#444CE7] mr-4 flex-shrink-0 mt-0.5" />
+                    <span className="text-[15px] text-gray-800 font-semibold leading-snug">{item.positive}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+          
+        </div>
+
+      </div>
+    </section>
+  );
+};
+
+export default WhyDocqube;

src/app/(features)/ProductPage/data/productData.ts

@@ -0,0 +1,564 @@
+"use client";
+const drive1 = "/landing/productsPage/drive1.png";
+const drive2 = "/landing/productsPage/drive2.png";
+const drive3 = "/landing/productsPage/drive3.png";
+const driveIcon1 = "/landing/productsPage/driveIcon1.png";
+const driveIcon2 = "/landing/productsPage/driveIcon2.png";
+const driveIcon3 = "/landing/productsPage/driveIcon3.png";
+const driveIcon4 = "/landing/productsPage/driveicon4.png";
+const driveIcon5 = "/landing/productsPage/driveicon5.png";
+const driveIcon6 = "/landing/productsPage/driveicon6.png";
+const pdfeditor1 = "/landing/productsPage/pdfeditor1.png";
+
+const pdfeditorIcon1 = "/landing/productsPage/pdfeditor1.png";
+const pdfeditorIcon2 = "/landing/productsPage/pdfeditor2.png";
+const pdfeditorIcon3 = "/landing/productsPage/pdfeditor3.png";
+const pdfeditorIcon4 = "/landing/productsPage/pdfeditor4.png";
+const pdfeditorIcon5 = "/landing/productsPage/pdfeditor5.png";
+const pdfeditorIcon6 = "/landing/productsPage/pdfeditor6.png";
+const signicon1 = "/landing/productsPage/signicon1.png";
+const signicon2 = "/landing/productsPage/signicon2.png";
+const signicon3 = "/landing/productsPage/signicon3.png";
+const signicon4 = "/landing/productsPage/signicon4.png";
+const signicon5 = "/landing/productsPage/signicon5.png";
+const signicon6 = "/landing/productsPage/signicon6.png";
+const signimage = "/landing/productsPage/signimage.png";
+const workflow = "/landing/productsPage/workflow.png";
+const Editor1 = "/landing/productsPage/editor1.png";
+const Editor2 = "/landing/productsPage/editor2.png";
+const Editor3 = "/landing/productsPage/editor3.png";
+const Editor4 = "/landing/productsPage/editor4.png";
+const Editor5 = "/landing/productsPage/editor5.png";
+const Editor6 = "/landing/productsPage/editor6.png";
+const Embed1 = "/landing/productsPage/embed1.png";
+const Embed2 = "/landing/productsPage/embed2.png";
+const Embed3 = "/landing/productsPage/embed3.png";
+const Embed4 = "/landing/productsPage/embed4.png";
+const Embed5 = "/landing/productsPage/embed5.png";
+const Embed6 = "/landing/productsPage/embed6.png";
+const workflowIcon1 = "/landing/productsPage/workflowIcon1.png";
+const workflowIcon2 = "/landing/productsPage/workflowIcon2.png";
+const workflowIcon3 = "/landing/productsPage/workflowIcon3.png";
+const workflowIcon4 = "/landing/productsPage/workflowIcon4.png";
+const workflowIcon5 = "/landing/productsPage/workflowIcon5.png";
+const workflowIcon6 = "/landing/productsPage/workflowIcon6.png";
+
+export interface ProductData {
+  hero: {
+    badgeText: string;
+    headlineMain: string;
+    headlineHighlight: string;
+    description: string;
+    primaryButtonText: string;
+    secondaryButtonText: string;
+  };
+  faqs: {
+    question: string;
+    answer: string;
+  }[];
+  features?: {
+    badge: string;
+    title: string;
+    description: string;
+    bulletPoints: string[];
+    imagePlaceholderText?: string;
+    primaryButtonText?: string;
+    secondaryButtonText?: string;
+    image?: string;
+  }[];
+  showEnterpriseFeatures?: boolean;
+  enterpriseFeaturesData?: {
+    badgeText?: string;
+    title?: string;
+    bottomNote?: string;
+    primaryButtonText?: string;
+    features?: {
+      title: string;
+      description: string;
+      icon?: any;
+    }[];
+  };
+}
+
+export const platformData: ProductData = {
+  hero: {
+    badgeText: "ONE PLATFORM. FOUR PRODUCTS.",
+    headlineMain: "Everything Your Documents Need,",
+    headlineHighlight: "Under One Roof.",
+    description: "DocQube brings document management, PDF editing, workflow automation and e-signatures together — one login, one bill, one security model. Buy the whole suite and save up to ~55% versus buying modules separately.",
+    primaryButtonText: "START FREE TRIAL",
+    secondaryButtonText: "TALK TO SALES"
+  },
+  faqs: [
+    {
+      question: "Can I buy just one module?",
+      answer: "Yes. Buy any single module on its own — Drive, PDF Editor, Workflows or Sign. Each has its own plan and free trial, and each is also included in the DocQube Suite."
+    },
+    {
+      question: "Is there a free plan?",
+      answer: "Yes, we offer a free tier with basic features so you can test out our core capabilities."
+    },
+    {
+      question: "Can I upgrade from a module to the Suite later?",
+      answer: "Absolutely. You can easily upgrade from any individual module to the full DocQube Suite from your billing dashboard."
+    }
+  ]
+};
+
+export const driveData: ProductData = {
+  hero: {
+    badgeText: "DOCQUBE DRIVE",
+    headlineMain: "Intelligent Document Management",
+    headlineHighlight: "Powered by AI.",
+    description: "Store, organize, and search all your files with ease. DocQube Drive provides secure, AI-powered document management so you can find what you need, exactly when you need it.",
+    primaryButtonText: "START FREE TRIAL",
+    secondaryButtonText: "SEE PRICING"
+  },
+  faqs: [
+    {
+      question: "Does the AI assistant use my documents to train models?",
+      answer: "No. DocQube does not use your documents or personal data to train, fine-tune or improve any AI or machine-learning models. The assistant retrieves answers from your own indexed files at query time."
+    },
+    {
+      question: "Can I recover a previous version of a document?",
+      answer: "Yes. Drive keeps a full version history for each file, and you can restore any prior version. Deleted files go to trash and can be restored."
+    },
+    {
+      question: "How is access controlled?",
+      answer: "Drive uses role-based access control with custom roles, plus multi-tenant isolation so each organization's data is scoped separately. Sharing is permission-based, with optional public links."
+    },
+    {
+      question: "What file formats can I convert?",
+      answer: "DocQube converts PDF files and images into structured HTML, Markdown and JATS XML, and exports edited documents to Word (.docx), HTML, XML and PDF."
+    }
+  ],
+  showEnterpriseFeatures: true,
+  enterpriseFeaturesData: {
+    features: [
+      {
+        title: 'Role-based access',
+        description: 'Fine-grained RBAC with custom roles and access codes.',
+        icon: driveIcon1
+      },
+      {
+        title: 'Multi-tenant isolation',
+        description: "Each organization's data is scoped and isolated.",
+        icon: driveIcon2
+      },
+      {
+        title: 'Encryption',
+        description: 'Encrypted in transit and at rest, with virus scanning on upload.',
+        icon: driveIcon3
+      },
+      {
+        title: 'Convert & export',
+        description: 'Convert PDF and images to editable formats; export to Word, HTML, XML and PDF.',
+        icon: driveIcon4
+      },
+      {
+        title: 'Smart search & OCR',
+        description: 'Find anything across your files, including scanned documents.',
+        icon: driveIcon5
+      },
+      {
+        title: 'Audit & reporting',
+        description: 'A complete, exportable record of document activity.',
+        icon: driveIcon6
+      }
+    ]
+  },
+  features: [
+    {
+      badge: "DOCUMENT AI",
+      title: "Ask A Question, Get An Answer From Your Documents",
+      description: "DocQube Drive indexes your documents and lets you ask questions in plain language. The AI assistant retrieves the answer from across your files, with the source in view.",
+      bulletPoints: [
+        "Retrieval-augmented answers across your document set",
+        "Auto-indexing and summaries on upload",
+        "OCR makes scanned documents searchable",
+        "Your data is never used to train AI models"
+      ],
+      imagePlaceholderText: "Document AI Example",
+      image: drive1
+    },
+    {
+      badge: "CONTROL & VERSIONING",
+      title: "One Source Of Truth For Every File",
+      description: "Every change is versioned and every action is logged. Restore any previous version, and see who accessed, edited or shared a document, and when.",
+      bulletPoints: [
+        "Full version history with restore",
+        "Tamper-evident activity log on every file",
+        "Soft-delete trash with restore",
+        "Automated backups with data restore"
+      ],
+      imagePlaceholderText: "Versioning UI",
+      image: drive2
+    },
+    {
+      badge: "SHARING & COLLABORATION",
+      title: "Share Safely, Collaborate In Real Time",
+      description: "Share with specific people or generate public links with view or edit permissions. Collaborate live, and keep the conversation in context with inline threaded comments.",
+      bulletPoints: [
+        "Granular view / edit permissions",
+        "Public share links with controlled access",
+        "Real-time collaboration",
+        "Inline, threaded comments"
+      ],
+      imagePlaceholderText: "Sharing Example",
+      image: drive3
+    }
+  ]
+};
+
+export const editorData: ProductData = {
+  hero: {
+    badgeText: "DOCQUBE PDF EDITOR",
+    headlineMain: "A Real PDF Editor",
+    headlineHighlight: "Right In Your Browser.",
+    description: "Edit text with true reflow, not overlay boxes. Add images, annotations and signatures, redact permanently, and reorder pages — powered by a native C++/PDFium engine. Free to start, no signup.",
+    primaryButtonText: "OPEN THE FREE EDITOR",
+    secondaryButtonText: "GO PRO"
+  },
+  faqs: [
+    {
+      question: "Is the PDF editor really free?",
+      answer: "Yes. The free tier lets you edit and export PDFs with no watermark, within limits (25 MB, 50 pages, 2 documents per day). No signup or credit card is required to start."
+    },
+    {
+      question: "How is this different from other browser PDF editors?",
+      answer: "Most browser editors place text in overlay boxes on top of the page. DocQube edits the real content stream with a native C++/PDFium and HarfBuzz engine, so paragraphs reflow with correct word-wrap and font metrics."
+    },
+    {
+      question: "Does redaction actually remove the content?",
+      answer: "Yes. Redaction permanently removes the underlying text and image objects within the selected area and burns a solid blackout into the page — not just a rectangle drawn on top."
+    },
+    {
+      question: "What can I do on Pro?",
+      answer: "Pro unlocks larger files, unlimited documents, OCR, redaction, batch operations and saving directly to DocQube Drive."
+    }
+  ],
+  showEnterpriseFeatures: true,
+  enterpriseFeaturesData: {
+    badgeText: "ENTERPRISE-READY",
+    title: "Governed By Design",
+    features: [
+      {
+        title: "Real text reflow",
+        description: "Edit multi-line paragraphs with automatic word wrap and line height — text pushes and pulls across pages, powered by PDFium and HarfBuzz.",
+        icon: pdfeditorIcon1
+      },
+      {
+        title: "Fonts preserved",
+        description: "Embedded fonts are reconstructed for editing, with graceful fallback that keeps the original look.",
+        icon: pdfeditorIcon2
+      },
+      {
+        title: "Annotations & markups",
+        description: "Highlights, underlines, strikeouts, shapes, sticky notes and freehand ink — written into the PDF.",
+        icon: pdfeditorIcon3
+      },
+      {
+        title: "Permanent redaction",
+        description: "Blackout that truly removes the underlying text and image objects, not just a box on top.",
+        icon: pdfeditorIcon4
+      },
+      {
+        title: "Signatures & stamps",
+        description: "Place a signature image or custom stamp anywhere, resizable to fit.",
+        icon: pdfeditorIcon5
+      },
+      {
+        title: "Page operations",
+        description: "Insert, delete, rotate and reorder pages, and replace images inside the document.",
+        icon: pdfeditorIcon6
+      }
+    ]
+  },
+  features: [
+    {
+      badge: "FREE FOREVER, WITHIN LIMITS",
+      title: "Start Free. No Watermark.",
+      description: "The free tier is a real product — edit and export with no watermark on your files. Go Pro when you need bigger files and more power.",
+      bulletPoints: [
+        "Free: up to 25 MB, 50 pages, 2 documents per day",
+        "No watermark on exports, ever",
+        "Pro: larger files, unlimited documents, redaction, OCR, batch and save-to-Drive",
+        "Runs in your browser — nothing to install"
+      ],
+      primaryButtonText: "OPEN THE FREE EDITOR",
+      secondaryButtonText: "GO PRO",
+      imagePlaceholderText: "Free Editor UI",
+      image: pdfeditor1
+    }
+  ]
+};
+
+export const workflowsData: ProductData = {
+  hero: {
+    badgeText: "DOCQUBE WORKFLOWS",
+    headlineMain: "Route, Approve And",
+    headlineHighlight: "Sign — Automatically.",
+    description: "Send documents for review, collect approvals in order, and trigger signatures when they're ready. Every step is tracked and timestamped, with notifications along the way.",
+    primaryButtonText: "START FREE TRIAL",
+    secondaryButtonText: "SEE PRICING"
+  },
+  faqs: [
+    {
+      question: "Is DocQube Workflows a full no-code automation builder?",
+      answer: "Workflows today covers routing, approvals, signature loops, status tracking and notifications. More advanced, fully custom automation is available on higher tiers or on our roadmap — tell us about your process and we'll advise."
+    },
+    {
+      question: "Can a workflow trigger a signature automatically?",
+      answer: "Yes. When a document is approved, Workflows can automatically start a DocQube Sign request, so the signing step begins without manual hand-off."
+    },
+    {
+      question: "Is every step tracked?",
+      answer: "Yes. Each routing, approval and signature action is timestamped and recorded in a tamper-evident audit trail you can export."
+    }
+  ],
+  showEnterpriseFeatures: true,
+  enterpriseFeaturesData: {
+    badgeText: "WHAT WORKFLOWS DOES TODAY",
+    title: "Approvals And Signature Loops, Tracked End To End",
+    bottomNote: "Workflows focuses on routing, approvals, signature loops, status tracking and notifications. Advanced, fully custom automation is available on higher tiers or on our roadmap — talk to us about your process.",
+    features: [
+      {
+        title: "Routing",
+        description: "Send a document to the right people, in the right order.",
+        icon: workflowIcon1
+      },
+      {
+        title: "Approvals",
+        description: "Collect reviews and approvals, with a clear status at each step.",
+        icon: workflowIcon2
+      },
+      {
+        title: "Signature triggers",
+        description: "Kick off a DocQube Sign request automatically when a document is approved.",
+        icon: workflowIcon3
+      },
+      {
+        title: "Notifications",
+        description: "Keep everyone informed as a document moves through the process.",
+        icon: workflowIcon4
+      },
+      {
+        title: "Status tracking",
+        description: "See exactly where any document is, and who's next.",
+        icon: workflowIcon5
+      },
+      {
+        title: "Timestamped audit",
+        description: "Every action is recorded for a defensible trail.",
+        icon: workflowIcon6
+      }
+    ]
+  },
+  features: [
+    {
+      badge: "FREE FOREVER, WITHIN LIMITS",
+      title: "From Draft To Signed, Without The Chase",
+      description: "Workflows connects Drive and Sign so a document can move from review to approval to signature without leaving DocQube — and without email threads to keep track of.",
+      bulletPoints: [
+        "One approval trail from upload to signature",
+        "Automatic signature requests on approval",
+        "Reminders and status at every step",
+        "A single, exportable record of the whole process"
+      ],
+      imagePlaceholderText: "Workflows Example",
+      image: workflow
+    }
+  ]
+};
+
+export const signData: ProductData = {
+  hero: {
+    badgeText: "DOCQUBE SIGN",
+    headlineMain: "Legally Binding Signatures",
+    headlineHighlight: "Built In.",
+    description: "Send, sign and track legally-binding e-signatures with verification built in.",
+    primaryButtonText: "START FREE TRIAL",
+    secondaryButtonText: "TALK TO SALES"
+  },
+  faqs: [
+    {
+      question: "Are DocQube signatures legally binding?",
+      answer: "Yes. DocQube Sign captures legally-binding electronic signatures through Zoho Sign and DocuSeal, with a timestamped audit trail for each envelope."
+    },
+    {
+      question: "What is signature verification?",
+      answer: "Beyond capturing a signature, DocQube can detect signature boxes on a document using computer vision and validate digital signature certificates — giving you proof that a signed document is valid."
+    },
+    {
+      question: "Can I trigger signing from a workflow?",
+      answer: "Yes. DocQube Workflows can automatically start a Sign request when a document is approved, and the signed result is stored in Drive."
+    },
+    {
+      question: "How is pricing structured?",
+      answer: "Sign is available per user, per month, or per envelope. See the pricing page for current figures, and note they are indicative until confirmed before launch."
+    }
+  ],
+  showEnterpriseFeatures: true,
+  enterpriseFeaturesData: {
+    badgeText: "SIGN, SEND AND VERIFY",
+    title: "Everything You Need To Close Documents",
+    bottomNote: "Workflows focuses on routing, approvals, signature loops, status tracking and notifications. Advanced, fully custom automation is available on higher tiers or on our roadmap — talk to us about your process.",
+    features: [
+      {
+        title: "Send for signature",
+        description: "Create an envelope, add signers and fields, and send — via Zoho Sign or DocuSeal.",
+        icon: signicon1
+      },
+      {
+        title: "Track to completion",
+        description: "Collect reviews and approvals, with a clear status at each step.",
+        icon: signicon2
+      },
+      {
+        title: "Signature verification",
+        description: "Kick off a DocQube Sign request automatically when a document is approved.",
+        icon: signicon3
+      },
+      {
+        title: "Full audit trail",
+        description: "A timestamped record of every step, for a defensible signing history.",
+        icon: signicon4
+      },
+      {
+        title: "Secure by default",
+        description: "Encryption in transit and at rest, with access controls.",
+        icon: signicon5
+      },
+      {
+        title: "Built into the platform",
+        description: "Trigger signatures from Workflows and store signed documents in Drive.",
+        icon: signicon6
+      }
+    ]
+  },
+  features: [
+    {
+      badge: "VERIFICATION",
+      title: "Proof A Signature Is Valid",
+      description: "DocQube Sign doesn't just capture a signature — it detects signature boxes using computer vision and validates digital signature certificates, so you can verify that a signed document is genuine.",
+      bulletPoints: [
+        "Computer-vision signature box detection",
+        "Digital certificate validation",
+        "Timestamped, tamper-evident audit trail",
+        "Signed documents stored securely in Drive"
+      ],
+      imagePlaceholderText: "Verification UI",
+      image: signimage
+    }
+  ]
+};
+
+export const allPdfToolsData: ProductData = {
+  hero: {
+    badgeText: "DOCQUBE FREE TOOLS",
+    headlineMain: "Every PDF Tool You Need —",
+    headlineHighlight: "Free",
+    description: "Send documents for signature, sign them yourself, and track every envelope to completion — powered by Zoho Sign and DocuSeal, with a signature verification and a full audit trail.",
+    primaryButtonText: "OPEN THE EDITOR",
+    secondaryButtonText: "ABOUT THE EDITOR"
+  },
+  faqs: []
+};
+
+export const freeEditorData: ProductData = {
+  hero: {
+    badgeText: "DOCQUBE PDF EDITOR",
+    headlineMain: "Drop A PDF To Start",
+    headlineHighlight: "Editing",
+    description: "Add text with true reflow, images, highlights and a signature, reorder pages, then export — right in your browser",
+    primaryButtonText: "UPLOAD A PDF",
+    secondaryButtonText: "UPGRADE TO PRO"
+  },
+  faqs: [],
+  showEnterpriseFeatures: true,
+  enterpriseFeaturesData: {
+    badgeText: "WHAT YOU CAN DO",
+    title: "A Full Editor, Free To Start",
+    features: [
+      {
+        title: "Edit text",
+        description: "True paragraph reflow — not overlay boxes",
+        icon: Editor1
+      },
+      {
+        title: "Add images",
+        description: "Insert and replace images inside the page",
+        icon: Editor2
+      },
+      {
+        title: "Annotate",
+        description: "Highlights, notes, shapes and freehand ink",
+        icon: Editor3
+      },
+      {
+        title: "Sign",
+        description: "Place a signature or stamp anywhere",
+        icon: Editor4
+      },
+      {
+        title: "Pages",
+        description: "Insert, reorder, rotate and extract",
+        icon: Editor5
+      },
+      {
+        title: "Export",
+        description: "Download your edited PDF — no watermark",
+        icon: Editor6
+      }
+    ]
+  }
+};
+
+export const embedData: ProductData = {
+  hero: {
+    badgeText: "DOCQUBE EMBED",
+    headlineMain: "Put A Real PDF Editor",
+    headlineHighlight: "Inside Your Product.",
+    description: "Embed DocQube's native PDF editing engine in your own application, themed to match your brand. Give your users true reflow editing, annotations, redaction and signing — without building an engine.",
+    primaryButtonText: "TALK TO SALES",
+    secondaryButtonText: "READ THE DEVELOPER DOCS"
+  },
+  faqs: [],
+  showEnterpriseFeatures: true,
+  enterpriseFeaturesData: {
+    badgeText: "BUILT TO EMBED",
+    title: "Your Product, Our Engine",
+    features: [
+      {
+        title: "Themeable",
+        description: "Match your colors, fonts and layout so the editor feels native to your app.",
+        icon: Embed1
+      },
+      {
+        title: "API-first",
+        description: "A clean REST gateway over the native engine for documents, rendering, edits and export.",
+        icon: Embed2
+      },
+      {
+        title: "Real editing",
+        description: "Reflow, replace, annotate, redact and sign — the same engine that powers DocQube.",
+        icon: Embed3
+      },
+      {
+        title: "Isolated",
+        description: "Multi-tenant isolation and access controls carry through.",
+        icon: Embed4
+      },
+      {
+        title: "Webhooks",
+        description: "Get notified on document events to drive your own workflows.",
+        icon: Embed5
+      },
+      {
+        title: "Supported",
+        description: "Onboarding and integration support from our team.",
+        icon: Embed6
+      }
+    ]
+  }
+};

src/app/(features)/ResourcePage/BlogDetailPage.tsx

@@ -0,0 +1,153 @@
+"use client";
+import React from "react";
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import { BLOG_POSTS } from "./data/blogData";
+const squareBoxBg = "/landing/SquareBox.png";
+
+const BlogDetailPage: React.FC = () => {
+  const { slug } = useParams<{ slug: string }>();
+
+  // Find post by slug or fallback to first post
+  const post = BLOG_POSTS.find((p) => p.slug === slug) || BLOG_POSTS[0];
+
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+
+      <main className="flex-grow pt-[84px] sm:pt-[96px] pb-24 relative overflow-hidden">
+        {/* Subtle grid background */}
+        <div className="absolute inset-0 top-12 flex items-start justify-center pointer-events-none z-0 overflow-hidden">
+          <img
+            src={squareBoxBg}
+            alt=""
+            className="w-full max-w-[1200px] object-cover opacity-45 select-none"
+          />
+        </div>
+
+        <div className="relative z-10 max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 pt-8 sm:pt-12">
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-14 items-start">
+            
+            {/* Left Sidebar */}
+            <aside className="lg:col-span-4 lg:sticky lg:top-28">
+              <div className="bg-[#F8F9FD] rounded-2xl p-6 sm:p-7 border border-blue-50/60 shadow-[0_2px_12px_rgba(15,23,42,0.03)]">
+                {/* Need Just One Thing? */}
+                <h3 className="text-[15px] font-bold text-[#0B1538] mb-3.5">
+                  Need Just One Thing?
+                </h3>
+
+                <div className="space-y-2.5">
+                  <Link
+                    href="/product/pdf-editor"
+                    className="block text-center py-2.5 px-3 bg-[#EEF2FF] text-[#444CE7] rounded-xl text-[11px] font-bold tracking-widest uppercase hover:bg-blue-100 hover:text-blue-700 transition-colors"
+                  >
+                    DOCQUBE PDF EDITOR
+                  </Link>
+                  <Link
+                    href="/product/free-editor"
+                    className="block text-center py-2.5 px-3 bg-[#EEF2FF] text-[#444CE7] rounded-xl text-[11px] font-bold tracking-widest uppercase hover:bg-blue-100 hover:text-blue-700 transition-colors"
+                  >
+                    OPEN THE FREE EDITOR
+                  </Link>
+                  <Link
+                    href="/product/free-pdf-tools"
+                    className="block text-center py-2.5 px-3 bg-[#EEF2FF] text-[#444CE7] rounded-xl text-[11px] font-bold tracking-widest uppercase hover:bg-blue-100 hover:text-blue-700 transition-colors"
+                  >
+                    FREE PDF TOOLS
+                  </Link>
+                </div>
+
+                {/* See DocQube On Your Documents */}
+                <h3 className="text-[15px] font-bold text-[#0B1538] mt-8 mb-3.5">
+                  See DocQube On Your Documents
+                </h3>
+
+                <div className="space-y-3">
+                  <Link
+                    href="/contact"
+                    className="block text-center py-3 px-4 bg-[#3B49DF] text-white rounded-full text-[11px] font-bold tracking-widest uppercase hover:bg-blue-700 transition-colors shadow-sm"
+                  >
+                    BOOK A DEMO
+                  </Link>
+                  <Link
+                    href="/pricing"
+                    className="block text-center py-3 px-4 bg-white border-[1.5px] border-gray-900 text-gray-900 rounded-full text-[11px] font-bold tracking-widest uppercase hover:bg-gray-50 transition-colors shadow-sm"
+                  >
+                    SEE PRICING
+                  </Link>
+                </div>
+              </div>
+            </aside>
+
+            {/* Right Main Article Content */}
+            <article className="lg:col-span-8 max-w-3xl">
+              {/* Blog Badge */}
+              <div className="mb-4">
+                <span className="inline-block px-3.5 py-1 rounded-full text-[11px] font-bold tracking-wider uppercase bg-[#EEF2FF] text-[#444CE7]">
+                  {post.badge || "BLOG"}
+                </span>
+              </div>
+
+              {/* Headline */}
+              <h1 className="text-3xl sm:text-4xl lg:text-[42px] font-bold text-[#0B1538] leading-[1.22] tracking-tight mb-3">
+                {post.title}
+              </h1>
+
+              {/* Read Time & Brand Meta */}
+              <p className="text-[13px] sm:text-[14px] font-medium text-[#444CE7] mb-8">
+                {post.metaText || `${post.readTime} · DocQube`}
+              </p>
+
+              {/* Subtitle / Lead Paragraph */}
+              <p className="text-[15px] sm:text-[16px] text-[#434654] leading-relaxed mb-8 font-normal">
+                {post.description}
+              </p>
+
+              {/* Article Content Sections */}
+              <div className="space-y-8">
+                {post.sections && post.sections.map((section, idx) => (
+                  <div key={idx} className="pt-2">
+                    <h2 className="text-[21px] sm:text-[23px] font-bold text-[#0B1538] tracking-tight mb-3.5">
+                      {section.title}
+                    </h2>
+
+                    {section.paragraphs && section.paragraphs.map((p, pIdx) => (
+                      <p
+                        key={pIdx}
+                        className="text-[15px] sm:text-[16px] text-[#434654] leading-relaxed mb-4 font-normal"
+                      >
+                        {p}
+                      </p>
+                    ))}
+
+                    {section.bullets && (
+                      <ul className="space-y-2 text-[15px] sm:text-[16px] text-[#434654] list-disc list-outside pl-5 mb-4 leading-relaxed font-normal">
+                        {section.bullets.map((b, bIdx) => (
+                          <li key={bIdx} className="pl-1">
+                            {b}
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </article>
+
+          </div>
+        </div>
+      </main>
+
+      <Footer
+        title="Stay ahead with DocQube"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default BlogDetailPage;

src/app/(features)/ResourcePage/BlogPage.tsx

@@ -0,0 +1,64 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import CustomHeroSection from "../Components/CustomHeroSection";
+import ChallengeSection, { ChallengeCardItem } from "../Components/ChallengeSection";
+import { BLOG_POSTS } from "./data/blogData";
+
+
+const BlogPage: React.FC = () => {
+  const blogCards: ChallengeCardItem[] = BLOG_POSTS.map((post) => ({
+    tag: post.tag,
+    title: post.title,
+    description: post.description,
+    linkText: post.linkText,
+    linkUrl: `/blog/${post.slug}`,
+  }));
+
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+
+      <main className="flex-grow pt-[64px] relative overflow-hidden">
+       
+
+        {/* Hero Section */}
+        <CustomHeroSection
+          badgeText="DOCQUBE DRIVE"
+          headlineMain="The DocQube Blog"
+          headlineHighlight=""
+          description="Practical thinking on document management, PDF editing, workflows and signing."
+          primaryButtonText="BOOK A DEMO"
+          secondaryButtonText="GUIDES"
+          primaryButtonLink="/contact"
+          secondaryButtonLink="#articles"
+          showDivider={false}
+          className="pt-16 pb-6 bg-transparent"
+        />
+
+        {/* Blog Cards Grid Section */}
+        <div id="articles" className="relative z-10 pt-10 sm:pt-12 pb-2">
+          <ChallengeSection
+            showHeader={false}
+            showDotBg={false}
+            className="py-0 bg-transparent"
+            gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-7"
+            cardClassName="bg-white/95 backdrop-blur-sm border border-gray-100/90 shadow-[0_2px_12px_rgba(15,23,42,0.03)] hover:shadow-xl hover:border-blue-200 transition-all duration-300"
+            challenges={blogCards}
+          />
+        </div>
+      </main>
+
+      {/* Footer */}
+      <Footer
+        title="Stay ahead with DocQube"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default BlogPage;

src/app/(features)/ResourcePage/data/blogData.ts

@@ -0,0 +1,301 @@
+"use client";
+export interface BlogSection {
+  title: string;
+  paragraphs?: string[];
+  bullets?: string[];
+}
+
+export interface BlogPost {
+  id: string;
+  slug: string;
+  tag: string;
+  badge?: string;
+  title: string;
+  metaText?: string;
+  description: string;
+  linkText: string;
+  author?: {
+    name: string;
+    role: string;
+  };
+  publishedAt?: string;
+  readTime?: string;
+  sections: BlogSection[];
+}
+
+export const BLOG_POSTS: BlogPost[] = [
+  {
+    id: '1',
+    slug: 'why-browser-pdf-editors-break-formatting',
+    tag: 'Article',
+    badge: 'BLOG',
+    title: 'Why Browser PDF Editors Break Your Formatting — And How True Reflow Fixes It',
+    metaText: '6 min read · DocQube',
+    description: "Most online PDF editors drop text into floating boxes on top of the page. Here's why that breaks your document, and what real reflow editing does differently.",
+    linkText: 'Read',
+    author: {
+      name: 'DocQube Team',
+      role: 'Engineering & Product'
+    },
+    publishedAt: 'Aug 24, 2026',
+    readTime: '6 min read',
+    sections: [
+      {
+        title: 'The Overlay-Box Problem',
+        paragraphs: [
+          "When you edit a PDF in most browser tools, the editor doesn't actually change the text in the document. It places a new text box on top of the original, often covering the old text with a white rectangle. It looks fine on screen — until you add a word and the line runs off the page, or the font doesn't quite match, or someone opens the file in a different reader and the illusion falls apart.",
+          "The underlying PDF is unchanged. You haven't edited the paragraph; you've stuck a sticker over it."
+        ]
+      },
+      {
+        title: 'What ‘true Reflow’ Means',
+        paragraphs: [
+          "Reflow editing changes the real content stream of the PDF. When you edit a sentence, the surrounding text re-wraps: line breaks recalculate, spacing adjusts, and text pushes or pulls across the page the way it would in a word processor.",
+          "DocQube's PDF Editor does this with a native C++ engine built on PDFium and HarfBuzz — the same shaping technology behind modern browsers. It reconstructs embedded fonts so your edits keep the original look, and falls back gracefully when a font isn't available."
+        ]
+      },
+      {
+        title: 'Why It Matters For Real Work',
+        bullets: [
+          "Contracts and forms stay consistent when you change a clause.",
+          "Redactions actually remove the underlying text, not just hide it behind a box.",
+          "Exports open correctly in any PDF reader."
+        ]
+      },
+      {
+        title: 'Try It Yourself',
+        paragraphs: [
+          "Open a PDF in the free editor, change a paragraph, and watch the text re-wrap. No signup, no watermark."
+        ]
+      }
+    ]
+  },
+  {
+    id: '2',
+    slug: 'buy-module-bundle-or-whole-suite-how-to-choose',
+    tag: 'Article',
+    badge: 'BLOG',
+    title: 'Buy a Module, a Bundle, or the Whole Suite: How to Choose',
+    metaText: '5 min read · DocQube',
+    description: "DocQube can be bought three ways. Here's a simple way to decide which fits your team — and when upgrading makes the most financial sense.",
+    linkText: 'Read',
+    author: {
+      name: 'DocQube Team',
+      role: 'Product Strategy'
+    },
+    publishedAt: 'Aug 18, 2026',
+    readTime: '5 min read',
+    sections: [
+      {
+        title: 'The Hidden Cost of SaaS Sprawl',
+        paragraphs: [
+          "Most growing companies end up with 4 to 6 disparate tools for file management, editing PDFs, routing approvals, and collecting verified signatures. Each vendor carries a separate invoice, distinct admin consoles, and overlapping per-seat costs.",
+          "Consolidating into a unified document operating system eliminates integration friction and cuts license overhead by up to 55%."
+        ]
+      },
+      {
+        title: 'When to Start With a Single Module',
+        paragraphs: [
+          "If your immediate bottleneck is strictly PDF modifications or signing contracts, purchasing standalone DocQube PDF Editor or DocQube Sign lets you solve today's operational hurdle with minimal procurement delay.",
+          "Every module is built on the same foundation, meaning you can easily activate Drive storage or automated Workflows down the line without migrating data."
+        ]
+      },
+      {
+        title: 'Why Teams Upgrade to the Complete Suite',
+        bullets: [
+          "Unified audit logs across files, changes, approvals, and legal signatures.",
+          "Single sign-on and role-based permissions across your entire company.",
+          "Predictable billing with zero surprises or hidden add-on costs."
+        ]
+      },
+      {
+        title: 'Explore the Modules',
+        paragraphs: [
+          "Evaluate your team's workflow requirements or speak with our solutions engineers to build a custom migration plan."
+        ]
+      }
+    ]
+  },
+  {
+    id: '3',
+    slug: 'built-to-gdpr-and-hipaa-principles-actually-means',
+    tag: 'Article',
+    badge: 'BLOG',
+    title: "What ‘Built to GDPR and HIPAA Principles’ Actually Means",
+    metaText: '7 min read · DocQube',
+    description: "You'll see DocQube say it's ‘built to’ certain standards rather than ‘certified...’. Here is an honest deep dive into security architecture, zero-knowledge encryption, and compliance.",
+    linkText: 'Read',
+    author: {
+      name: 'DocQube Security',
+      role: 'Compliance & Infrastructure'
+    },
+    publishedAt: 'Aug 12, 2026',
+    readTime: '7 min read',
+    sections: [
+      {
+        title: 'Architectural Enforcement vs. Marketing Claims',
+        paragraphs: [
+          "In compliance marketing, vendors often claim instant certification while maintaining broad internal access to customer data. True data protection requires cryptographic guarantees built directly into the software architecture.",
+          "When we say DocQube is built to GDPR and HIPAA principles, we mean our data pipeline enforces privacy by design, end-to-end data encryption in transit and at rest, and strict tenant isolation."
+        ]
+      },
+      {
+        title: 'Zero-Knowledge & Encryption Standards',
+        paragraphs: [
+          "Every document uploaded to DocQube is fragmented and encrypted using AES-256 keys managed via dedicated KMS. Server operators cannot read your documents without cryptographic delegation.",
+          "Audit logs are immutable, tracking every document view, modification, signature request, and export event with tamper-resistant hashing."
+        ]
+      },
+      {
+        title: 'Key Security Guarantees',
+        bullets: [
+          "Full compliance with DPA (Data Processing Agreement) and BAA requirements.",
+          "Dedicated regional storage options ensuring strict data residency.",
+          "Granular permissions with time-limited public sharing links."
+        ]
+      },
+      {
+        title: 'Review Our Security Model',
+        paragraphs: [
+          "Visit our trust center or request a detailed architectural review to verify our compliance controls."
+        ]
+      }
+    ]
+  },
+  {
+    id: '4',
+    slug: 'why-browser-pdf-editors-break-formatting-reflow',
+    tag: 'Article',
+    badge: 'BLOG',
+    title: 'Why Browser PDF Editors Break Your Formatting — And How True Reflow Fixes It',
+    metaText: '6 min read · DocQube',
+    description: "Most online PDF editors drop text into floating boxes on top of the page. Here's why that breaks your document, and what real reflow editing does differently.",
+    linkText: 'Read',
+    author: {
+      name: 'DocQube Team',
+      role: 'Engineering & Product'
+    },
+    publishedAt: 'Jul 29, 2026',
+    readTime: '6 min read',
+    sections: [
+      {
+        title: 'The Overlay-Box Problem',
+        paragraphs: [
+          "When you edit a PDF in most browser tools, the editor doesn't actually change the text in the document. It places a new text box on top of the original, often covering the old text with a white rectangle. It looks fine on screen — until you add a word and the line runs off the page, or the font doesn't quite match, or someone opens the file in a different reader and the illusion falls apart.",
+          "The underlying PDF is unchanged. You haven't edited the paragraph; you've stuck a sticker over it."
+        ]
+      },
+      {
+        title: 'What ‘true Reflow’ Means',
+        paragraphs: [
+          "Reflow editing changes the real content stream of the PDF. When you edit a sentence, the surrounding text re-wraps: line breaks recalculate, spacing adjusts, and text pushes or pulls across the page the way it would in a word processor.",
+          "DocQube's PDF Editor does this with a native C++ engine built on PDFium and HarfBuzz — the same shaping technology behind modern browsers. It reconstructs embedded fonts so your edits keep the original look, and falls back gracefully when a font isn't available."
+        ]
+      },
+      {
+        title: 'Why It Matters For Real Work',
+        bullets: [
+          "Contracts and forms stay consistent when you change a clause.",
+          "Redactions actually remove the underlying text, not just hide it behind a box.",
+          "Exports open correctly in any PDF reader."
+        ]
+      },
+      {
+        title: 'Try It Yourself',
+        paragraphs: [
+          "Open a PDF in the free editor, change a paragraph, and watch the text re-wrap. No signup, no watermark."
+        ]
+      }
+    ]
+  },
+  {
+    id: '5',
+    slug: 'buy-module-bundle-whole-suite-strategy',
+    tag: 'Article',
+    badge: 'BLOG',
+    title: 'Buy a Module, a Bundle, or the Whole Suite: How to Choose',
+    metaText: '5 min read · DocQube',
+    description: "DocQube can be bought three ways. Here's a simple way to decide which fits your team — and when upgrading makes the most financial sense.",
+    linkText: 'Read',
+    author: {
+      name: 'DocQube Team',
+      role: 'Product Strategy'
+    },
+    publishedAt: 'Jul 15, 2026',
+    readTime: '5 min read',
+    sections: [
+      {
+        title: 'The Hidden Cost of SaaS Sprawl',
+        paragraphs: [
+          "Most growing companies end up with 4 to 6 disparate tools for file management, editing PDFs, routing approvals, and collecting verified signatures.",
+          "Consolidating into a unified document operating system eliminates integration friction and cuts license overhead by up to 55%."
+        ]
+      },
+      {
+        title: 'When to Start With a Single Module',
+        paragraphs: [
+          "If your immediate bottleneck is strictly PDF modifications or signing contracts, purchasing standalone DocQube PDF Editor or DocQube Sign lets you solve today's operational hurdle with minimal procurement delay."
+        ]
+      },
+      {
+        title: 'Why Teams Upgrade to the Complete Suite',
+        bullets: [
+          "Unified audit logs across files, changes, approvals, and legal signatures.",
+          "Single sign-on and role-based permissions across your entire company.",
+          "Predictable billing with zero surprises or hidden add-on costs."
+        ]
+      },
+      {
+        title: 'Explore the Modules',
+        paragraphs: [
+          "Evaluate your team's workflow requirements or speak with our solutions engineers to build a custom migration plan."
+        ]
+      }
+    ]
+  },
+  {
+    id: '6',
+    slug: 'what-built-to-gdpr-and-hipaa-principles-means',
+    tag: 'Article',
+    badge: 'BLOG',
+    title: "What ‘Built to GDPR and HIPAA Principles’ Actually Means",
+    metaText: '7 min read · DocQube',
+    description: "You'll see DocQube say it's ‘built to’ certain standards rather than ‘certified...’. Here is an honest deep dive into security architecture, zero-knowledge encryption, and compliance.",
+    linkText: 'Read',
+    author: {
+      name: 'DocQube Security',
+      role: 'Compliance & Infrastructure'
+    },
+    publishedAt: 'Jul 02, 2026',
+    readTime: '7 min read',
+    sections: [
+      {
+        title: 'Architectural Enforcement vs. Marketing Claims',
+        paragraphs: [
+          "True data protection requires cryptographic guarantees built directly into the software architecture.",
+          "When we say DocQube is built to GDPR and HIPAA principles, we mean our data pipeline enforces privacy by design, end-to-end data encryption in transit and at rest, and strict tenant isolation."
+        ]
+      },
+      {
+        title: 'Zero-Knowledge & Encryption Standards',
+        paragraphs: [
+          "Every document uploaded to DocQube is fragmented and encrypted using AES-256 keys managed via dedicated KMS."
+        ]
+      },
+      {
+        title: 'Key Security Guarantees',
+        bullets: [
+          "Full compliance with DPA (Data Processing Agreement) and BAA requirements.",
+          "Dedicated regional storage options ensuring strict data residency.",
+          "Granular permissions with time-limited public sharing links."
+        ]
+      },
+      {
+        title: 'Review Our Security Model',
+        paragraphs: [
+          "Visit our trust center or request a detailed architectural review to verify our compliance controls."
+        ]
+      }
+    ]
+  }
+];

src/app/(features)/SecurityPage/Index.tsx

@@ -0,0 +1,48 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import Faq from "../Components/Faq";
+import CustomHeroSection from "../Components/CustomHeroSection";
+import EnterpriseFeatures from "../Components/EnterpriseFeatures";
+import CustomFeatures from "../Components/CustomFeatures";
+
+import { 
+  securityHeroData, 
+  securityControls, 
+  securityCommitments, 
+  securityFaqs 
+} from "./data";
+
+const SecurityPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...securityHeroData}  />
+
+        {/* Controls Section - Reusing EnterpriseFeatures for the 6 cards */}
+        
+          <EnterpriseFeatures 
+            badgeText={securityControls.badgeText}
+            title={securityControls.title}
+            features={securityControls.features}
+          />
+      
+
+        {/* Commitments Section - Reusing CustomFeatures */}
+        <CustomFeatures features={securityCommitments} />
+
+        {/* FAQ Section */}
+        <div className="py-24 bg-white border-t border-gray-100">
+          <Faq title="Security FAQ" faqs={securityFaqs} />
+        </div>
+
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default SecurityPage;

src/app/(features)/SecurityPage/data.ts

@@ -0,0 +1,89 @@
+"use client";
+const securityicon1 = "/landing/security/securityicon1.png";
+const securityicon2 = "/landing/security/securityicon2.png";
+const securityicon3 = "/landing/security/securityicon3.png";
+const securityicon4 = "/landing/security/securityicon4.png";
+const securityicon5 = "/landing/security/securityicon5.png";
+const securityicon6 = "/landing/security/securityicon6.png";
+const SecurityImage = "/landing/security/SecurityImage.png";
+export const securityHeroData = {
+  badgeText: "SECURITY & TRUST",
+  headlineMain: "Your documents, protected.",
+  headlineHighlight: "",
+  description: "DocQube is built with security at its core — encryption everywhere, strict access control, tamper-evident audit logs and a clear commitment: we never sell your data or use it to train AI.",
+  primaryButtonText: "Contact sales",
+  secondaryButtonText: "Read the DPA"
+};
+
+export const securityControls = {
+  badgeText: "CONTROLS",
+  title: "How we protect your data",
+  features: [
+    {
+      icon: securityicon1,
+      title: "Encryption",
+      description: "In transit with TLS 1.2+ and at rest with AES-256, across every module."
+    },
+    {
+      icon: securityicon2,
+      title: "Access control",
+      description: "Role-based access control, multi-tenant isolation and the principle of least privilege."
+    },
+    {
+      icon: securityicon3,
+      title: "Audit logging",
+      description: "A tamper-evident record of every access, edit, share and signature."
+    },
+    {
+      icon: securityicon4,
+      title: "Virus scanning",
+      description: "Every upload is scanned for malware before it lands."
+    },
+    {
+      icon: securityicon5,
+      title: "Backups & restore",
+      description: "Automated backups with data restore when you need it."
+    },
+    {
+      icon: securityicon6,
+      title: "Monitoring",
+      description: "Continuous monitoring and a documented incident-response plan."
+    }
+  ]
+};
+
+export const securityCommitments = [
+  {
+    badge: "OUR COMMITMENTS",
+    title: "Two promises we put in writing",
+    description: "",
+    bulletPoints: [
+      "We never sell your data — an absolute commitment that survives termination.",
+      "We never use your data to train AI models — your documents are yours.",
+      "Data is processed on your instructions under our DPA.",
+      "Return or secure deletion of your data on termination."
+    ],
+    image: SecurityImage,
+    primaryButtonText: "Read the DPA →",
+    secondaryButtonText: "Sub-processors →"
+  }
+];
+
+export const securityFaqs = [
+  {
+    question: "Where is my data stored?",
+    answer: "The Service is operated from India. International access is protected by our Data Processing Agreement and applicable cross-border transfer safeguards under the UAE PDPL and India's DPDPA."
+  },
+  {
+    question: "Do you use my documents to train AI?",
+    answer: "No. We never use Client Data or personal data to train, fine-tune or improve any AI or machine-learning models. This commitment is absolute and survives termination."
+  },
+  {
+    question: "Are you SOC 2 / HIPAA / GDPR certified?",
+    answer: "DocQube is built to GDPR and HIPAA principles with SOC 2-aligned controls. We do not claim formal certification unless it is independently evidenced — contact us for our current status."
+  },
+  {
+    question: "How is access controlled?",
+    answer: "Through role-based access control, multi-tenant isolation and least-privilege administration, with a tamper-evident audit log of every action."
+  }
+];

src/app/(features)/SolutionPage/AllSolutionsPage.tsx

@@ -0,0 +1,215 @@
+"use client";
+import React, { useEffect } from "react";
+import Link from 'next/link';
+import { Sparkles, ArrowRight } from "lucide-react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import CustomHeroSection from "../Components/CustomHeroSection";
+import EnterpriseFeatures from "../Components/EnterpriseFeatures";
+const dotBg = "/landing/DotBg.png";
+import {
+  allSolutionsHeroData,
+  audienceSolutionData,
+  departmentSolutionData,
+  industrySolutionData,
+  useCaseSolutionData,
+} from "./data/solutionData";
+
+const AllSolutionsPage: React.FC = () => {
+  useEffect(() => {
+    if (typeof window !== "undefined" && window.location.hash) {
+      const targetId = window.location.hash.replace("#", "");
+      const elem = document.getElementById(targetId);
+      if (elem) {
+        setTimeout(() => {
+          elem.scrollIntoView({ behavior: "smooth", block: "start" });
+        }, 100);
+      }
+    }
+  }, []);
+
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...allSolutionsHeroData} />
+
+        {/* By Audience Section */}
+        <div id="by-audience" className="scroll-mt-24">
+          <EnterpriseFeatures
+            badgeText="BY AUDIENCE"
+            title="By audience"
+            features={audienceSolutionData}
+          />
+        </div>
+
+        {/* By Department Section (ChallengeSection Card Style) */}
+        <section id="by-department" className="relative py-24 bg-white overflow-hidden scroll-mt-20">
+          <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="text-center mb-16">
+              <div className="inline-flex items-center gap-1.5 text-[#444CE7] mb-4">
+                <Sparkles className="w-4 h-4" />
+                <span className="text-[11px] font-bold tracking-widest uppercase">
+                  BY DEPARTMENT
+                </span>
+              </div>
+              <h2 className="text-3xl md:text-4xl font-medium text-[#0a1236] tracking-tight">
+                Built For Every Department
+              </h2>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {departmentSolutionData.map((dept, index) => {
+                const targetHref = dept.link || "/contact";
+                return (
+                  <Link
+                    key={index}
+                    href={targetHref}
+                    className="group rounded-[14px] p-6 sm:p-7 shadow-[0_0_4px_0_rgba(143,143,143,0.25)] flex flex-col justify-between text-left min-h-[160px] transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(68,76,231,0.12)] bg-white cursor-pointer"
+                    style={{
+                      background:
+                        "linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to bottom, #FFFFFF 0%, #414EE7 100%) border-box",
+                      border: "1px solid transparent",
+                    }}
+                  >
+                    <div>
+                      <h3 className="text-[17px] sm:text-[18px] font-bold text-[#0a1236] group-hover:text-[#444CE7] leading-snug mb-2 transition-colors">
+                        {dept.title}
+                      </h3>
+                      <p className="text-[14px] text-gray-500 font-medium leading-relaxed">
+                        {dept.description}
+                      </p>
+                    </div>
+
+                    <div className="mt-5 flex items-center text-[13px] font-bold text-[#444CE7] group-hover:translate-x-1 transition-transform">
+                      <span>Learn more</span>
+                      <ArrowRight className="w-3.5 h-3.5 ml-1" />
+                    </div>
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        {/* By Industry Section (ChallengeSection Card Style) */}
+        <section
+          id="by-industry"
+          className="relative py-24 bg-[#FCFCFC] overflow-hidden scroll-mt-20"
+          style={{
+            backgroundImage: `url(${dotBg})`,
+            backgroundSize: "contain",
+            backgroundPosition: "center",
+            backgroundRepeat: "repeat",
+          }}
+        >
+          <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="text-center mb-16">
+              <div className="inline-flex items-center gap-1.5 text-[#444CE7] mb-4">
+                <Sparkles className="w-4 h-4" />
+                <span className="text-[11px] font-bold tracking-widest uppercase">
+                  BY INDUSTRY
+                </span>
+              </div>
+              <h2 className="text-3xl md:text-4xl font-medium text-[#0a1236] tracking-tight">
+                Specialized Workflows Across 9 Industries
+              </h2>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {industrySolutionData.map((industry, index) => {
+                const targetHref = industry.link || (industry.title === "Real Estate" ? "/solutions/real-estate" : "/contact");
+                return (
+                  <Link
+                    key={index}
+                    href={targetHref}
+                    className="group rounded-[14px] p-6 sm:p-7 shadow-[0_0_4px_0_rgba(143,143,143,0.25)] flex flex-col justify-between text-left min-h-[160px] transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(68,76,231,0.12)] bg-white cursor-pointer"
+                    style={{
+                      background:
+                        "linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to bottom, #FFFFFF 0%, #414EE7 100%) border-box",
+                      border: "1px solid transparent",
+                    }}
+                  >
+                    <div>
+                      <h3 className="text-[17px] sm:text-[18px] font-bold text-[#0a1236] group-hover:text-[#444CE7] leading-snug mb-2 transition-colors">
+                        {industry.title}
+                      </h3>
+                      <p className="text-[14px] text-gray-500 font-medium leading-relaxed">
+                        {industry.description}
+                      </p>
+                    </div>
+
+                    <div className="mt-5 flex items-center text-[13px] font-bold text-[#444CE7] group-hover:translate-x-1 transition-transform">
+                      <span>Learn more</span>
+                      <ArrowRight className="w-3.5 h-3.5 ml-1" />
+                    </div>
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        {/* By Use Case Section (ChallengeSection Card Style) */}
+        <section id="by-use-case" className="relative py-24 bg-white overflow-hidden scroll-mt-20">
+          <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="text-center mb-16">
+              <div className="inline-flex items-center gap-1.5 text-[#444CE7] mb-4">
+                <Sparkles className="w-4 h-4" />
+                <span className="text-[11px] font-bold tracking-widest uppercase">
+                  BY USE CASE
+                </span>
+              </div>
+              <h2 className="text-3xl md:text-4xl font-medium text-[#0a1236] tracking-tight">
+                End-To-End Document Workflows
+              </h2>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {useCaseSolutionData.map((useCase, index) => {
+                const targetHref = useCase.link || (useCase.title.includes("Contract") || useCase.title.includes("Sign") ? "/product/sign" : useCase.title.includes("Archive") ? "/product/drive" : "/product/workflows");
+                return (
+                  <Link
+                    key={index}
+                    href={targetHref}
+                    className="group rounded-[14px] p-6 sm:p-7 shadow-[0_0_4px_0_rgba(143,143,143,0.25)] flex flex-col justify-between text-left min-h-[160px] transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(68,76,231,0.12)] bg-white cursor-pointer"
+                    style={{
+                      background:
+                        "linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to bottom, #FFFFFF 0%, #414EE7 100%) border-box",
+                      border: "1px solid transparent",
+                    }}
+                  >
+                    <div>
+                      <h3 className="text-[17px] sm:text-[18px] font-bold text-[#0a1236] group-hover:text-[#444CE7] leading-snug mb-2 transition-colors">
+                        {useCase.title}
+                      </h3>
+                      <p className="text-[14px] text-gray-500 font-medium leading-relaxed">
+                        {useCase.description}
+                      </p>
+                    </div>
+
+                    <div className="mt-5 flex items-center text-[13px] font-bold text-[#444CE7] group-hover:translate-x-1 transition-transform">
+                      <span>Learn more</span>
+                      <ArrowRight className="w-3.5 h-3.5 ml-1" />
+                    </div>
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <Footer
+        title="Ready to transform your document workflows?"
+        description="Explore how DocQube can unite your document management, editing, workflows, and e-signatures."
+        primaryButtonText="START FREE TRIAL"
+        secondaryButtonText="TALK TO SALES"
+      />
+    </div>
+  );
+};
+
+export default AllSolutionsPage;

src/app/(features)/SolutionPage/EnterPrisePage.tsx

@@ -0,0 +1,54 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import CustomHeroSection from "../Components/CustomHeroSection";
+import ChallengeSection from "../Components/ChallengeSection";
+import EnterpriseFeatures from "../Components/EnterpriseFeatures";
+import CustomFeatures from "../Components/CustomFeatures";
+import { enterpriseSolutionData } from "./data/solutionData";
+
+
+
+const EnterPrisePage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...enterpriseSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What Slows Teams Down"
+          challenges={[
+            "Documents and tools fragmented across teams",
+            "Inconsistent permissions and no end-to-end audit",
+            "Compliance and retention hard to enforce",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={enterpriseSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={enterpriseSolutionData.enterpriseFeaturesData?.badgeText}
+          title={enterpriseSolutionData.enterpriseFeaturesData?.title}
+          features={enterpriseSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={enterpriseSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+
+      
+      </main>
+      <Footer 
+        title="See DocQube for Enterprise"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="TALK TO SALES"
+        secondaryButtonText="SEE THE SUITE"
+      />
+    </div>
+  );
+};
+
+export default EnterPrisePage;

src/app/(features)/SolutionPage/LegalPage.tsx

@@ -0,0 +1,51 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import CustomHeroSection from "../Components/CustomHeroSection";
+import ChallengeSection from "../Components/ChallengeSection";
+import EnterpriseFeatures from "../Components/EnterpriseFeatures";
+import CustomFeatures from "../Components/CustomFeatures";
+import { legalSolutionData } from "./data/solutionData";
+
+const LegalPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...legalSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What Slows Teams Down"
+          challenges={[
+            "Contract versions living in too many places",
+            "Redlines and redactions done in clunky tools",
+            "Proving a signature is valid after the fact",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={legalSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={legalSolutionData.enterpriseFeaturesData?.badgeText}
+          title={legalSolutionData.enterpriseFeaturesData?.title}
+          features={legalSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={legalSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+
+      </main>
+      <Footer 
+        title="See DocQube for Legal"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default LegalPage;

src/app/(features)/SolutionPage/OperationsPage.tsx

@@ -0,0 +1,52 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import CustomHeroSection from "../Components/CustomHeroSection";
+import ChallengeSection from "../Components/ChallengeSection";
+import EnterpriseFeatures from "../Components/EnterpriseFeatures";
+import CustomFeatures from "../Components/CustomFeatures";
+import { operationsSolutionData } from "./data/solutionData";
+
+const OperationsPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...operationsSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "SOPs and forms nobody can find the latest of",
+            "Manual routing for routine approvals",
+            "No audit trail when something goes wrong",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={operationsSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={operationsSolutionData.enterpriseFeaturesData?.badgeText}
+          title={operationsSolutionData.enterpriseFeaturesData?.title}
+          features={operationsSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={operationsSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+
+        
+      </main>
+      <Footer 
+        title="See DocQube for Operations"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default OperationsPage;

src/app/(features)/SolutionPage/RealEstatePage.tsx

@@ -0,0 +1,52 @@
+"use client";
+import React from "react";
+import Navbar from "../Components/Navbar";
+import Footer from "../Components/Footer";
+import CustomHeroSection from "../Components/CustomHeroSection";
+import ChallengeSection from "../Components/ChallengeSection";
+import EnterpriseFeatures from "../Components/EnterpriseFeatures";
+import CustomFeatures from "../Components/CustomFeatures";
+import { realEstateSolutionData } from "./data/solutionData";
+
+const RealEstatePage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...realEstateSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Agreements and leases across inboxes",
+            "Slow closings waiting on signatures",
+            "No single record of a transaction",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={realEstateSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={realEstateSolutionData.enterpriseFeaturesData?.badgeText}
+          title={realEstateSolutionData.enterpriseFeaturesData?.title}
+          features={realEstateSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={realEstateSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+
+        
+      </main>
+      <Footer 
+        title="See DocQube for Real Estate"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default RealEstatePage;

src/app/(features)/SolutionPage/department/AdministrationPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { administrationSolutionData } from "../data/solutionData";
+
+const AdministrationPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...administrationSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Repetitive routing of everyday documents",
+            "Records that are hard to search or retrieve",
+            "No single log of document activity",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={administrationSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={administrationSolutionData.enterpriseFeaturesData?.badgeText}
+          title={administrationSolutionData.enterpriseFeaturesData?.title}
+          features={administrationSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={administrationSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Administration"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default AdministrationPage;

src/app/(features)/SolutionPage/department/FinancePage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { financeSolutionData } from "../data/solutionData";
+
+const FinancePage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...financeSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Invoice and PO approvals lost in email threads",
+            "No single source of truth for signed agreements",
+            "Audit prep means hunting for the right version",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={financeSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={financeSolutionData.enterpriseFeaturesData?.badgeText}
+          title={financeSolutionData.enterpriseFeaturesData?.title}
+          features={financeSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={financeSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Finance"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default FinancePage;

src/app/(features)/SolutionPage/department/HrPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { hrSolutionData } from "../data/solutionData";
+
+const HrPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...hrSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Personnel files scattered across drives and inboxes",
+            "Onboarding paperwork that stalls waiting on signatures",
+            "No clear record of who accessed sensitive employee data",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={hrSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={hrSolutionData.enterpriseFeaturesData?.badgeText}
+          title={hrSolutionData.enterpriseFeaturesData?.title}
+          features={hrSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={hrSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Human Resources"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default HrPage;

src/app/(features)/SolutionPage/department/ProcurementPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { procurementSolutionData } from "../data/solutionData";
+
+const ProcurementPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...procurementSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Vendor paperwork spread across teams",
+            "Approvals that stall without visibility",
+            "No clean archive of signed vendor agreements",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={procurementSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={procurementSolutionData.enterpriseFeaturesData?.badgeText}
+          title={procurementSolutionData.enterpriseFeaturesData?.title}
+          features={procurementSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={procurementSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Procurement"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default ProcurementPage;

src/app/(features)/SolutionPage/department/SalesPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { salesSolutionData } from "../data/solutionData";
+
+const SalesPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...salesSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Proposals stuck waiting on a signature",
+            "No visibility on what's been signed",
+            "Signed deals buried in inboxes",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={salesSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={salesSolutionData.enterpriseFeaturesData?.badgeText}
+          title={salesSolutionData.enterpriseFeaturesData?.title}
+          features={salesSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={salesSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Sales"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default SalesPage;

src/app/(features)/SolutionPage/industry/ConstructionPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { constructionSolutionData } from "../data/solutionData";
+
+const ConstructionPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...constructionSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Documents spread across office and site",
+            "Slow approval loops across parties",
+            "Version confusion on drawings and contracts",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={constructionSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={constructionSolutionData.enterpriseFeaturesData?.badgeText}
+          title={constructionSolutionData.enterpriseFeaturesData?.title}
+          features={constructionSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={constructionSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Construction"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default ConstructionPage;

src/app/(features)/SolutionPage/industry/EducationPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { educationSolutionData } from "../data/solutionData";
+
+const EducationPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...educationSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Records across departments and campuses",
+            "Forms that need signatures and tracking",
+            "Access control for sensitive data",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={educationSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={educationSolutionData.enterpriseFeaturesData?.badgeText}
+          title={educationSolutionData.enterpriseFeaturesData?.title}
+          features={educationSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={educationSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Education"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default EducationPage;

src/app/(features)/SolutionPage/industry/GovernmentPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { governmentSolutionData } from "../data/solutionData";
+
+const GovernmentPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...governmentSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Strict record-keeping and retention rules",
+            "Multi-department approvals",
+            "Accountability for every access",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={governmentSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={governmentSolutionData.enterpriseFeaturesData?.badgeText}
+          title={governmentSolutionData.enterpriseFeaturesData?.title}
+          features={governmentSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={governmentSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Government & Public Sector"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default GovernmentPage;

src/app/(features)/SolutionPage/industry/HealthcarePage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { healthcareSolutionData } from "../data/solutionData";
+
+const HealthcarePage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...healthcareSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Sensitive documents needing strict access",
+            "Consent forms to route and sign",
+            "Audit requirements on every record",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={healthcareSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={healthcareSolutionData.enterpriseFeaturesData?.badgeText}
+          title={healthcareSolutionData.enterpriseFeaturesData?.title}
+          features={healthcareSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={healthcareSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Healthcare"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default HealthcarePage;

src/app/(features)/SolutionPage/industry/InsurancePage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { insuranceSolutionData } from "../data/solutionData";
+
+const InsurancePage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...insuranceSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Policy and claim documents everywhere",
+            "Claim approvals that lack visibility",
+            "Retrieving the right document fast",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={insuranceSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={insuranceSolutionData.enterpriseFeaturesData?.badgeText}
+          title={insuranceSolutionData.enterpriseFeaturesData?.title}
+          features={insuranceSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={insuranceSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Insurance"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default InsurancePage;

src/app/(features)/SolutionPage/industry/LogisticsPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { logisticsSolutionData } from "../data/solutionData";
+
+const LogisticsPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...logisticsSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Documents across carriers and sites",
+            "Approvals that hold up shipments",
+            "Compliance records hard to assemble",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={logisticsSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={logisticsSolutionData.enterpriseFeaturesData?.badgeText}
+          title={logisticsSolutionData.enterpriseFeaturesData?.title}
+          features={logisticsSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={logisticsSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Logistics & Supply Chain"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default LogisticsPage;

src/app/(features)/SolutionPage/industry/ManufacturingPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { manufacturingSolutionData } from "../data/solutionData";
+
+const ManufacturingPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...manufacturingSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "SOPs and quality records hard to control",
+            "Supplier approvals that stall",
+            "Audit trails assembled by hand",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={manufacturingSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={manufacturingSolutionData.enterpriseFeaturesData?.badgeText}
+          title={manufacturingSolutionData.enterpriseFeaturesData?.title}
+          features={manufacturingSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={manufacturingSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Manufacturing"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default ManufacturingPage;

src/app/(features)/SolutionPage/usecase/ClientOnboardingPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { clientOnboardingSolutionData } from "../data/solutionData";
+
+const ClientOnboardingPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...clientOnboardingSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Onboarding docs collected ad hoc",
+            "Signatures slow the start",
+            "Records spread across tools",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={clientOnboardingSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={clientOnboardingSolutionData.enterpriseFeaturesData?.badgeText}
+          title={clientOnboardingSolutionData.enterpriseFeaturesData?.title}
+          features={clientOnboardingSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={clientOnboardingSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Client Onboarding"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default ClientOnboardingPage;

src/app/(features)/SolutionPage/usecase/ContractManagementPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { contractManagementSolutionData } from "../data/solutionData";
+
+const ContractManagementPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...contractManagementSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Versions scattered across tools",
+            "Slow signature loops",
+            "Hard to find a clause later",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={contractManagementSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={contractManagementSolutionData.enterpriseFeaturesData?.badgeText}
+          title={contractManagementSolutionData.enterpriseFeaturesData?.title}
+          features={contractManagementSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={contractManagementSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Contract Management"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default ContractManagementPage;

src/app/(features)/SolutionPage/usecase/DocumentArchivingPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { documentArchivingSolutionData } from "../data/solutionData";
+
+const DocumentArchivingPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...documentArchivingSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Old documents hard to search",
+            "No retention policy applied",
+            "Uncontrolled access",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={documentArchivingSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={documentArchivingSolutionData.enterpriseFeaturesData?.badgeText}
+          title={documentArchivingSolutionData.enterpriseFeaturesData?.title}
+          features={documentArchivingSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={documentArchivingSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Document Archiving"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default DocumentArchivingPage;

src/app/(features)/SolutionPage/usecase/EmployeeOnboardingPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { employeeOnboardingSolutionData } from "../data/solutionData";
+
+const EmployeeOnboardingPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...employeeOnboardingSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Paperwork stalls onboarding",
+            "Chasing signatures manually",
+            "Records spread across systems",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={employeeOnboardingSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={employeeOnboardingSolutionData.enterpriseFeaturesData?.badgeText}
+          title={employeeOnboardingSolutionData.enterpriseFeaturesData?.title}
+          features={employeeOnboardingSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={employeeOnboardingSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Employee Onboarding"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default EmployeeOnboardingPage;

src/app/(features)/SolutionPage/usecase/InvoiceApprovalsPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { invoiceApprovalsSolutionData } from "../data/solutionData";
+
+const InvoiceApprovalsPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...invoiceApprovalsSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Invoice approvals in email threads",
+            "No status visibility",
+            "Reconciliation means version hunting",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={invoiceApprovalsSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={invoiceApprovalsSolutionData.enterpriseFeaturesData?.badgeText}
+          title={invoiceApprovalsSolutionData.enterpriseFeaturesData?.title}
+          features={invoiceApprovalsSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={invoiceApprovalsSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Invoice Approvals"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default InvoiceApprovalsPage;

src/app/(features)/SolutionPage/usecase/LeaseAgreementsPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { leaseAgreementsSolutionData } from "../data/solutionData";
+
+const LeaseAgreementsPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...leaseAgreementsSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Leases across inboxes and drives",
+            "Slow signature turnaround",
+            "No single record per lease",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={leaseAgreementsSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={leaseAgreementsSolutionData.enterpriseFeaturesData?.badgeText}
+          title={leaseAgreementsSolutionData.enterpriseFeaturesData?.title}
+          features={leaseAgreementsSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={leaseAgreementsSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Lease Agreements"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default LeaseAgreementsPage;

src/app/(features)/SolutionPage/usecase/LeaveRequestsPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { leaveRequestsSolutionData } from "../data/solutionData";
+
+const LeaveRequestsPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...leaveRequestsSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Forms lost between manager and HR",
+            "No clear status",
+            "No record for audits",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={leaveRequestsSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={leaveRequestsSolutionData.enterpriseFeaturesData?.badgeText}
+          title={leaveRequestsSolutionData.enterpriseFeaturesData?.title}
+          features={leaveRequestsSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={leaveRequestsSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Leave Requests"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default LeaveRequestsPage;

src/app/(features)/SolutionPage/usecase/PurchaseRequestsPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { purchaseRequestsSolutionData } from "../data/solutionData";
+
+const PurchaseRequestsPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...purchaseRequestsSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "PRs and POs stuck in inboxes",
+            "No visibility on approvals",
+            "Audit prep is manual",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={purchaseRequestsSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={purchaseRequestsSolutionData.enterpriseFeaturesData?.badgeText}
+          title={purchaseRequestsSolutionData.enterpriseFeaturesData?.title}
+          features={purchaseRequestsSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={purchaseRequestsSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Purchase Requests"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default PurchaseRequestsPage;

src/app/(features)/SolutionPage/usecase/SiteInspectionPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { siteInspectionSolutionData } from "../data/solutionData";
+
+const SiteInspectionPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...siteInspectionSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Inspection records on paper or scattered",
+            "Sign-offs that go missing",
+            "No audit trail per site",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={siteInspectionSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={siteInspectionSolutionData.enterpriseFeaturesData?.badgeText}
+          title={siteInspectionSolutionData.enterpriseFeaturesData?.title}
+          features={siteInspectionSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={siteInspectionSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Site Inspection"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default SiteInspectionPage;

src/app/(features)/SolutionPage/usecase/VendorApprovalsPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import Navbar from "../../Components/Navbar";
+import Footer from "../../Components/Footer";
+import CustomHeroSection from "../../Components/CustomHeroSection";
+import ChallengeSection from "../../Components/ChallengeSection";
+import EnterpriseFeatures from "../../Components/EnterpriseFeatures";
+import CustomFeatures from "../../Components/CustomFeatures";
+import { vendorApprovalsSolutionData } from "../data/solutionData";
+
+const VendorApprovalsPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
+      <Navbar />
+      <main className="flex-grow pt-[80px]">
+        {/* Hero Section */}
+        <CustomHeroSection {...vendorApprovalsSolutionData.hero} />
+
+        {/* Challenge Section */}
+        <ChallengeSection
+          title="What slows teams down"
+          challenges={[
+            "Approvals lost in email",
+            "No status visibility",
+            "Signed contracts hard to find",
+          ]}
+        />
+
+        {/* How DocQube Helps Section */}
+        <CustomFeatures features={vendorApprovalsSolutionData.features || []} />
+
+        {/* Built On The Whole DocQube Platform */}
+        <EnterpriseFeatures
+          badgeText={vendorApprovalsSolutionData.enterpriseFeaturesData?.badgeText}
+          title={vendorApprovalsSolutionData.enterpriseFeaturesData?.title}
+          features={vendorApprovalsSolutionData.enterpriseFeaturesData?.features}
+          bottomNote={vendorApprovalsSolutionData.enterpriseFeaturesData?.bottomNote}
+        />
+      </main>
+      <Footer 
+        title="See DocQube for Vendor Approvals"
+        description="Book a demo, or start free and explore at your own pace."
+        primaryButtonText="BOOK A DEMO"
+        secondaryButtonText="START FREE TRIAL"
+      />
+    </div>
+  );
+};
+
+export default VendorApprovalsPage;

src/app/blog/[slug]/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../(features)/ResourcePage/BlogDetailPage";

src/app/blog/page.tsx

@@ -0,0 +1 @@
+export { default } from "../(features)/ResourcePage/BlogPage";

src/app/book-a-demo/page.tsx

@@ -0,0 +1 @@
+export { default } from "../(features)/ContactPage/MainContactPage";

src/app/contact-us/page.tsx

@@ -0,0 +1 @@
+export { default } from "../(features)/ContactPage/MainContactPage";

src/app/contact/page.tsx

@@ -0,0 +1 @@
+export { default } from "../(features)/ContactPage/MainContactPage";

src/app/demo/page.tsx

@@ -0,0 +1 @@
+export { default } from "../(features)/ContactPage/MainContactPage";

src/app/layout.tsx

@@ -17,7 +17,7 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-export default function RootLayout({ children }: LayoutProps<"/">) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html
       lang="en"

src/app/page.tsx

@@ -1,69 +1 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert h-5 w-[100px]"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the{" "}
-            <code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
-              page.tsx
-            </code>{" "}
-            file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert h-[14px] w-4"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={14}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-}
+export { default } from "./(features)/HomePage/Index";

src/app/pricing/page.tsx

@@ -0,0 +1 @@
+export { default } from "../(features)/Pricing/index";

src/app/product/drive/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../(features)/ProductPage/DrivePage";

src/app/product/embed/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../(features)/ProductPage/EmbedPage";

src/app/product/free-editor/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../(features)/ProductPage/FreeEditorPages";

src/app/product/free-pdf-tools/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../(features)/ProductPage/AllPdfToolsPage";

src/app/product/pdf-editor/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../(features)/ProductPage/PdfEditorPage";