intellwe · RianaAzad · Jun 1, 2025 · Jun 1, 2025 · Jun 1, 2025 · Jun 1, 2025
diff --git a/public/logo.png b/public/logo.png
diff --git a/public/og-image.png b/public/og-image.png
diff --git a/safeweb-landing/.gitignore b/safeweb-landing/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/safeweb-landing/README.md b/safeweb-landing/README.md
@@ -0,0 +1,150 @@
+# Safe-Web - Privacy Protection Browser Extension
+
+Safe-Web is a multipurpose browser extension designed to enhance privacy, usability, and productivity on the web. Built with React, Vite, TailwindCSS, and Framer Motion, it offers intuitive controls and elegant transitions for masking sensitive information.
+
+## Features
+
+### Sensitive Information Masking
+
+- **Real-time Detection**: Automatically detects sensitive data on web pages
+- **Multiple Masking Styles**: Blur, pixelate, or blackout sensitive information
+- **Adjustable Intensity**: Fine-tune masking strength (1-10 levels)
+- **Pattern Types**:
+  - Email addresses
+  - Phone numbers
+  - Credit card numbers
+  - Social Security Numbers
+  - Custom patterns (coming soon)
+
+### Modern UI/UX
+
+- **Dark Mode**: Sleek dark interface by default
+- **Cyan Accents**: Modern cyan and RGB gradient highlights
+- **Smooth Animations**: Powered by Framer Motion
+- **Responsive Design**: Works seamlessly across different screen sizes
+
+### Smart Controls
+
+- **One-Click Toggle**: Quick enable/disable masking
+- **Keyboard Shortcuts**: Ctrl+Shift+M to toggle masking
+- **Per-Site Settings**: Individual configuration for different websites
+- **Real-time Updates**: Instant settings synchronization
+
+## Quick Start
+
+### Browser Installation
+
+1. **Build the extension**
+
+   ```bash
+   npm run build:extension
+   ```
+
+2. **Load in Chrome/Edge**
+
+   - Open `chrome://extensions/` or `edge://extensions/`
+   - Enable "Developer mode"
+   - Click "Load unpacked"
+   - Select the `dist` folder
+
+3. **Load in Firefox**
+   - Open `about:debugging`
+   - Click "This Firefox"
+   - Click "Load Temporary Add-on"
+   - Select any file in the `dist` folder
+
+## Project Structure
+
+```
+safe-web/
+├── public/
+│   ├── manifest.json      # Extension manifest
+│   └── icons/            # Extension icons (16, 32, 48, 128px)
+├── src/
+│   ├── components/       # React components
+│   ├── hooks/           # Custom React hooks
+│   ├── utils/           # Utility functions
+│   ├── content/         # Content script
+│   ├── background/      # Background service worker
+│   ├── App.jsx          # Main popup component
+│   ├── main.jsx         # React entry point
+│   └── index.css        # Global styles
+├── dist/                # Built extension files
+└── vite.config.js       # Vite configuration
+```
+
+## Technical Stack
+
+- **Frontend**: React 19, Vite 6
+- **Styling**: TailwindCSS 4, Custom CSS Variables
+- **Animations**: Framer Motion 12
+- **Browser APIs**: Chrome Extension Manifest v3
+- **Build Tool**: Vite with custom extension configuration
+
+## Core Components
+
+### Background Service Worker
+
+- Manages extension lifecycle and settings
+- Handles communication between popup and content scripts
+- Provides persistent storage and tab management
+
+### Content Script
+
+- Scans web pages for sensitive information
+- Applies masking effects in real-time
+- Handles dynamic content updates
+- Provides visual feedback to users
+
+### Popup Interface
+
+- Modern React-based UI
+- Real-time settings management
+- Current page status display
+- Quick action controls
+
+## Development Scripts
+
+```bash
+# Development
+npm run dev              # Start development server
+npm run build           # Build for production
+npm run build:extension # Build extension + copy manifest
+npm run lint            # Run ESLint
+
+# Extension-specific
+npm run copy-manifest   # Copy manifest to dist folder
+```
+
+## Browser Permissions
+
+The extension requires the following permissions:
+
+- `storage`: For saving user settings
+- `activeTab`: For interacting with the current tab
+- `scripting`: For injecting content scripts
+- `<all_urls>`: For working on all websites
+
+## 🚧 Roadmap
+
+### Upcoming Features
+
+- [ ] Custom pattern creation
+- [ ] Advanced settings page
+- [ ] Export/import settings
+- [ ] Website whitelist/blacklist
+- [ ] Performance monitoring
+- [ ] Additional masking effects
+- [ ] Multi-language support
+
+### Version History
+
+- **v1.0.0**: Initial release with core masking functionality
+  - Sensitive information detection
+  - Three masking styles (blur, pixelate, blackout)
+  - Modern popup interface
+  - Real-time settings sync
+
+---
+
+**Safe-Web** - Protecting your privacy, one page at a time. Built with ❤️ by IntellWe
diff --git a/safeweb-landing/eslint.config.js b/safeweb-landing/eslint.config.js
@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
diff --git a/safeweb-landing/index.html b/safeweb-landing/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- Primary Meta Tags -->
+    <title>
+      Safe-Web - Privacy-First Browser Extension | Protect Your Digital Privacy
+    </title>
+    <meta
+      name="title"
+      content="Safe-Web - Privacy-First Browser Extension | Protect Your Digital Privacy"
+    />
+    <meta
+      name="description"
+      content="Safe-Web is a powerful browser extension that protects your privacy by masking sensitive information like emails, phone numbers, and personal data while browsing. One-click protection for Chrome, Firefox, Edge, Safari, and Opera."
+    />
+    <meta
+      name="keywords"
+      content="browser extension, privacy protection, data masking, secure browsing, privacy tools, information security, sensitive data protection, chrome extension, firefox addon, browser privacy"
+    />
+    <meta name="author" content="IntellWe" />
+    <meta name="robots" content="index, follow" />
+    <meta name="language" content="English" />
+    <meta name="revisit-after" content="7 days" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://safeweb.intellwe.com/" />
+    <meta
+      property="og:title"
+      content="Safe-Web - Privacy-First Browser Extension"
+    />
+    <meta
+      property="og:description"
+      content="Protect your digital privacy with Safe-Web browser extension. Mask sensitive information, secure your browsing, and take control of your online privacy with one-click protection."
+    />
+    <meta
+      property="og:image"
+      content="https://safeweb.intellwe.com/og-image.png"
+    />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:site_name" content="Safe-Web" />
+    <meta property="og:locale" content="en_US" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://safeweb.intellwe.com/" />
+    <meta
+      property="twitter:title"
+      content="Safe-Web - Privacy-First Browser Extension"
+    />
+    <meta
+      property="twitter:description"
+      content="Protect your digital privacy with Safe-Web browser extension. Mask sensitive information and secure your browsing experience."
+    />
+    <meta
+      property="twitter:image"
+      content="https://safeweb.intellwe.com/og-image.png"
+    />
+    <meta property="twitter:creator" content="@IntellWe" />
+    <meta property="twitter:site" content="@IntellWe" />
+
+    <!-- Additional SEO Meta Tags -->
+    <meta name="theme-color" content="#0891b2" />
+    <meta name="msapplication-TileColor" content="#0891b2" />
+    <meta name="msapplication-navbutton-color" content="#0891b2" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://safeweb.intellwe.com/" />
+
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="/manifest.json" />
+
+    <!-- Preconnect for performance -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <!-- JSON-LD Structured Data -->
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "SoftwareApplication",
+        "name": "Safe-Web",
+        "description": "A privacy-first browser extension that protects sensitive information by masking emails, phone numbers, and personal data while browsing the web.",
+        "url": "https://safeweb.intellwe.com/",
+        "author": {
+          "@type": "Organization",
+          "name": "IntellWe",
+          "url": "https://intellwe.com"
+        },
+        "applicationCategory": "BrowserApplication",
+        "operatingSystem": "Any",
+        "offers": {
+          "@type": "Offer",
+          "price": "0",
+          "priceCurrency": "USD"
+        },
+        "aggregateRating": {
+          "@type": "AggregateRating",
+          "ratingValue": "5.0",
+          "ratingCount": "1"
+        },
+        "screenshot": "https://safeweb.intellwe.com/og-image.png",
+        "softwareVersion": "1.0.0",
+        "datePublished": "2024-01-01",
+        "downloadUrl": "https://safeweb.intellwe.com/",
+        "supportedDevice": ["Desktop", "Mobile"],
+        "browserRequirements": "Chrome, Firefox, Edge, Safari, Opera"
+      }
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>