first commit

This commit is contained in:
Amit Rana 2026-04-05 20:29:43 +05:30
commit 1375e33d1b
37 changed files with 9503 additions and 0 deletions

49
.dockerignore Normal file
View File

@ -0,0 +1,49 @@
# Git
.git
.gitignore
# Docker files
Dockerfile
docker-compose.yml
.dockerignore
# Documentation
README.md
DEPLOYMENT.md
LOGO-FIX-SUMMARY.md
*.md
# OS files
.DS_Store
Thumbs.db
# IDE files
.vscode/
.idea/
*.swp
*.swo
# Logs
*.log
logs/
# Temporary files
tmp/
temp/
# Node modules (if any)
node_modules/
npm-debug.log
# Environment files
.env
.env.local
.env.production
# Build artifacts
dist/
build/
# Backups
*.bak
*.backup

46
.gitignore vendored Normal file
View File

@ -0,0 +1,46 @@
# Dependencies
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Build outputs
dist/
build/
*.min.js
*.min.css
# Environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# IDE/Editor files
.vscode/
.idea/
*.swp
*.swo
*~
# OS generated files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
# Logs
*.log
logs/
# Temporary files
*.tmp
*.temp
# Cache
.cache/
.parcel-cache/

107
CLAUDE.md Normal file
View File

@ -0,0 +1,107 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Project Overview
This is a static marketing website for Quantum Tasks AI, built with HTML/CSS/JavaScript and deployed using Docker/nginx. The site is containerized for deployment via Dokploy with Traefik reverse proxy handling SSL and routing.
## Architecture
### Core Structure
- `index.html` - Main homepage with hero section, company profile, services overview, and integrated contact form
- `digital-branding.html` - AI Digital Branding services page with SOSTAC+RACE framework
- `css/style.css` - Consolidated stylesheet with responsive design and CSS custom properties
- `js/script.js` - Interactive functionality for forms, navigation, and animations
### Deployment Architecture
- **Static Site**: Served via nginx in Docker container
- **Container**: Alpine-based nginx image with optimized caching headers
- **Orchestration**: Docker Compose with Traefik labels for automatic SSL/routing
- **Platform**: Dokploy deployment with domains `quantumtaskai.com` and `www.quantumtaskai.com`
## Development Commands
This is a static website with no build process - files are served directly by nginx.
### Local Development
```bash
# Serve locally with any static server
python -m http.server 8000
# or
npx serve .
```
### Docker Development
```bash
# Build and run locally
docker build -t quantumtaskai-website .
docker run -p 8080:80 quantumtaskai-website
# Using docker-compose
docker-compose up --build
```
### Deployment
```bash
# Deploy to Dokploy (production)
# Uses dokploy.json configuration for automatic deployment
git push origin main # Triggers deployment if configured
# Test deployment locally
docker-compose -f docker-compose.test.yml up --build
```
## Key Integration Points
### External Links
- AI Marketplace: Links point to `https://aiagent.quantumtaskai.com/agents/` (Django app)
- Authentication: Separate login/register buttons link to Django auth endpoints
### Contact Form
- Integrated into homepage `#contact` section
- Client-side validation implemented in `js/script.js`
- Ready for Netlify Forms, Formspree, or Django backend integration
- Demo success message shows on submission
### Domain Strategy
- `quantumtaskai.com` - Static marketing site (this repository)
- `aiagent.quantumtaskai.com` - Django AI marketplace (separate application)
- `www.quantumtaskai.com` - Redirects to main domain
## Configuration Files
### Docker Configuration
- `Dockerfile` - nginx Alpine image with security headers and caching
- `docker-compose.yml` - Production configuration with Traefik labels
- `docker-compose.test.yml` - Test configuration without domain dependencies
### Deployment Configuration
- `dokploy.json` - Dokploy platform configuration with domains, SSL, monitoring
- `dokploy.test.json` - Test environment configuration
- `DEPLOYMENT.md` - Comprehensive deployment guide for multiple platforms
## Assets Requirements
The `img/` directory should contain:
- `logo.png` - Company logo (200x60px recommended)
- `favicon.ico` - Website favicon (32x32px)
- `og-image.png` - Social media preview (1200x630px)
- Additional favicon sizes for mobile devices
## Performance Features
- Static file caching (1 year for assets, 1 hour for HTML)
- Security headers (X-Frame-Options, X-Content-Type-Options, X-XSS-Protection)
- Responsive images and mobile-first CSS
- Optimized font loading with preload
- Minified and consolidated CSS/JS
## SEO & Marketing
- Structured data markup for business information
- OpenGraph meta tags for social sharing
- Proper heading hierarchy and semantic HTML
- Mobile-responsive design
- Contact form integration for lead capture
- Service pages optimized for AI/cybersecurity keywords

266
DEPLOYMENT.md Normal file
View File

@ -0,0 +1,266 @@
# Static Website Deployment Guide
## Quick Deployment Options
### Option 1: Netlify (Recommended) ⭐
**Why Netlify:**
- Drag & drop deployment
- Automatic SSL certificates
- Global CDN
- Form handling built-in
- Custom domains
**Steps:**
1. Go to [netlify.com](https://netlify.com)
2. Sign up/login
3. Drag the `static-website` folder to Netlify dashboard
4. Site will be live instantly at random subdomain
5. Configure custom domain in Site Settings → Domain management
6. Enable form handling for contact form (automatic)
**Custom Domain Setup:**
1. Add domain in Netlify: Site Settings → Domain management → Add custom domain
2. Update DNS: Point your domain to Netlify's servers
3. SSL certificate will be generated automatically
### Option 2: Vercel
**Steps:**
1. Go to [vercel.com](https://vercel.com)
2. Connect GitHub account
3. Import repository
4. Set root directory to `static-website`
5. Deploy
**Custom Domain:**
1. Go to project settings
2. Add domain in Domains section
3. Update DNS as instructed
### Option 3: GitHub Pages (Free)
**Steps:**
1. Push `static-website` contents to GitHub repository
2. Go to repository Settings → Pages
3. Select source branch
4. Site will be available at `username.github.io/repository-name`
## Domain Configuration
### Main Site Structure
```
yoursite.com → Static website (Netlify/Vercel)
├── / → index.html (Home with contact section)
└── /digital-branding → digital-branding.html
aiagent.quantumtaskai.com → Django application (CapRover)
├── /agents → AI agent marketplace
├── /login → User authentication
├── /register → User registration
└── /admin → Django admin
```
### DNS Settings (Example for Netlify)
**For main domain (`yoursite.com`):**
```
Type: A
Name: @
Value: 75.2.60.5 (Netlify's load balancer)
Type: CNAME
Name: www
Value: yoursite.netlify.app
```
**For app subdomain (`aiagent.quantumtaskai.com`):**
```
Type: A
Name: aiagent
Value: YOUR_CAPROVER_SERVER_IP
```
## Contact Form Configuration
### Option A: Netlify Forms (Recommended)
Add `netlify` attribute to the contact form in the homepage contact section:
```html
<form class="contact-form" id="contactForm" netlify>
```
**Features:**
- Automatic spam filtering
- Email notifications
- Form submissions dashboard
- No backend code needed
### Option B: Formspree
1. Sign up at [formspree.io](https://formspree.io)
2. Get form endpoint
3. Update form action in the homepage contact section:
```html
<form class="contact-form" action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
```
### Option C: Connect to Django Backend
Update the form to POST to your Django app:
```html
<form class="contact-form" action="https://aiagent.quantumtaskai.com/contact/" method="POST">
```
## Required Assets
Before deploying, add these files to `img/` directory:
### Essential Files:
- `logo.png` - Company logo (recommended: 200x60px, PNG with transparency)
- `favicon.ico` - Website favicon (32x32px ICO format)
- `og-image.png` - Social media preview (1200x630px PNG)
### Optional Files:
- `apple-touch-icon.png` - iOS icon (180x180px)
- `favicon-32x32.png` - High-res favicon
- `favicon-16x16.png` - Small favicon
### Quick Setup:
```bash
cd static-website/img/
# Add your logo and favicon files here
# Update HTML references if filenames differ
```
## Performance Optimization
### Before Deployment:
**1. Minify CSS (Optional):**
The CSS is already optimized, but you can minify further:
- Use online CSS minifiers
- Or build tools like PostCSS
**2. Image Optimization:**
- Use WebP format for better compression
- Add multiple sizes for responsive images
- Use image compression tools
**3. Caching Headers:**
Netlify automatically sets optimal caching headers.
For other hosts, configure:
```
Cache-Control: public, max-age=31536000 # For CSS/JS/images
Cache-Control: public, max-age=3600 # For HTML
```
## Analytics Setup
### Google Analytics 4
Add to `<head>` section of all pages:
```html
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
```
### Alternative: Plausible Analytics
Add to `<head>`:
```html
<script defer data-domain="yoursite.com" src="https://plausible.io/js/script.js"></script>
```
## SEO Setup
### Search Console
1. Add property in [Google Search Console](https://search.google.com/search-console)
2. Verify ownership via DNS or HTML file
3. Submit sitemap: `https://yoursite.com/sitemap.xml` (generate with online tools)
### Sitemap.xml (Basic)
Create `sitemap.xml` in root:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://yoursite.com/</loc>
<priority>1.0</priority>
</url>
<url>
<loc>https://yoursite.com/digital-branding.html</loc>
<priority>0.8</priority>
</url>
</urlset>
```
## Testing Checklist
Before going live:
### ✅ Functionality
- [ ] All links work correctly
- [ ] Contact form validates properly
- [ ] Mobile navigation works
- [ ] External links open in new tabs
### ✅ Performance
- [ ] Page load speed < 3 seconds
- [ ] Images load properly
- [ ] No JavaScript errors in console
### ✅ SEO
- [ ] All meta tags present
- [ ] Open Graph images work
- [ ] Structured data validates
### ✅ Cross-browser
- [ ] Chrome/Edge
- [ ] Firefox
- [ ] Safari
- [ ] Mobile browsers
## Go Live Process
### 1. Deploy Static Site
- Upload to Netlify/Vercel
- Configure custom domain
- Test all functionality
### 2. Deploy Django App
- Follow CapRover deployment guide
- Configure aiagent subdomain
- Test marketplace functionality
### 3. Link Integration
- Update placeholder URLs to point to aiagent.quantumtaskai.com/agents/
- Test user flow from marketing to AI marketplace
- Ensure consistent branding
### 4. DNS & SSL
- Update all DNS records
- Verify SSL certificates
- Test from multiple locations
## Post-Launch
### Monitoring
- Set up uptime monitoring (UptimeRobot, Pingdom)
- Monitor Core Web Vitals
- Track conversion from static site to app
### Analytics
- Monitor traffic sources
- Track contact form submissions
- Analyze user journey from marketing to app
Your static marketing website will be live and optimized for performance, SEO, and conversions!

247
DOKPLOY-DEPLOYMENT.md Normal file
View File

@ -0,0 +1,247 @@
# Dokploy Deployment Guide - Quantum Tasks AI Website
This guide explains how to deploy the Quantum Tasks AI static website on Dokploy.
## Prerequisites
- Dokploy server running and accessible
- Domain name pointed to your Dokploy server
- Git repository with your website code
- Docker and Docker Compose support on Dokploy
## Project Structure
```
quantumtaskai-website/
├── index.html # Main homepage
├── digital-branding.html # Digital branding page
├── css/ # Stylesheets
├── js/ # JavaScript files
├── img/ # Images and assets
├── Dockerfile # Docker configuration
├── docker-compose.yml # Docker Compose configuration
├── dokploy.json # Dokploy-specific configuration
├── .dockerignore # Docker ignore file
└── DOKPLOY-DEPLOYMENT.md # This file
```
## Deployment Files
### 1. Dockerfile
The `Dockerfile` uses nginx:alpine to serve the static website with:
- Security headers (X-Frame-Options, X-Content-Type-Options, etc.)
- Optimized caching for static assets (1 year for CSS/JS/images, 1 hour for HTML)
- SPA routing support with fallback to index.html
### 2. docker-compose.yml
Configured with:
- Traefik labels for automatic SSL and routing
- Health checks
- Production environment settings
- Network configuration for Dokploy
### 3. dokploy.json
Dokploy-specific configuration including:
- Domain settings with automatic SSL
- Resource limits (256M memory, 0.5 CPU)
- Health check configuration
- Security and monitoring settings
## Deployment Steps
### Method 1: Git Repository Deployment (Recommended)
1. **Push your code to a Git repository** (GitHub, GitLab, etc.)
2. **Access Dokploy Dashboard**
- Open your Dokploy web interface
- Navigate to Applications/Services
3. **Create New Application**
- Click "Create Application"
- Choose "Compose" as the application type
- Name: `quantumtaskai-website`
4. **Configure Git Source**
- Repository URL: `https://github.com/your-username/quantumtaskai-website.git`
- Branch: `main` (or your main branch)
- Build Path: `.` (root directory)
5. **Domain Configuration**
- Primary domain: `quantumtaskai.com`
- Additional domain: `www.quantumtaskai.com` (with redirect)
- Enable SSL/TLS with Let's Encrypt
6. **Environment Variables**
```
NODE_ENV=production
```
7. **Deploy**
- Click "Deploy"
- Monitor build logs
- Wait for deployment completion
### Method 2: Direct File Upload
1. **Package your files**
```bash
cd /path/to/quantumtaskai-website
tar -czf quantumtaskai-website.tar.gz .
```
2. **Upload to Dokploy**
- Use Dokploy's file upload feature
- Upload the tar.gz file
- Extract in the application directory
3. **Configure and deploy** (same as Method 1, steps 5-7)
## Post-Deployment Configuration
### 1. Domain DNS Setup
Point your domain to your Dokploy server:
```
Type: A
Name: @
Value: YOUR_DOKPLOY_SERVER_IP
Type: A
Name: www
Value: YOUR_DOKPLOY_SERVER_IP
```
### 2. SSL Certificate
Dokploy will automatically generate Let's Encrypt certificates for:
- `quantumtaskai.com`
- `www.quantumtaskai.com`
### 3. Health Checks
The application includes health checks that:
- Check every 30 seconds
- Timeout after 10 seconds
- Retry up to 3 times
- Allow 30 seconds startup time
## Monitoring and Maintenance
### Application Monitoring
Dokploy provides built-in monitoring for:
- CPU usage
- Memory usage
- Network traffic
- Application health status
### Logs
Access application logs through Dokploy dashboard:
- Container logs
- Nginx access logs
- Error logs
### Updates and Redeployment
**For Git-based deployment:**
1. Push changes to your Git repository
2. Trigger redeploy in Dokploy dashboard
3. Monitor deployment progress
**For file-based deployment:**
1. Update files locally
2. Create new package: `tar -czf update.tar.gz .`
3. Upload and redeploy through Dokploy
## Troubleshooting
### Common Issues
**1. Build Failures**
- Check Docker build logs in Dokploy
- Verify all files are present
- Check .dockerignore isn't excluding necessary files
**2. SSL Certificate Issues**
- Ensure domain DNS is pointing to Dokploy server
- Wait 5-10 minutes for DNS propagation
- Check Let's Encrypt rate limits
**3. Application Not Accessible**
- Verify port 80 and 443 are open on Dokploy server
- Check domain configuration in Dokploy
- Verify container is running and healthy
**4. Static Files Not Loading**
- Check nginx configuration in Dockerfile
- Verify file paths in HTML are correct
- Check browser developer tools for 404 errors
### Debug Commands
**Check container status:**
```bash
docker ps | grep quantumtaskai-website
```
**View container logs:**
```bash
docker logs quantumtaskai-website
```
**Test container locally:**
```bash
docker build -t quantumtaskai-website .
docker run -p 8080:80 quantumtaskai-website
```
## Performance Optimization
### Caching Strategy
The nginx configuration implements:
- 1 year cache for static assets (CSS, JS, images)
- 1 hour cache for HTML files
- Proper cache headers for SEO
### Resource Usage
- Memory limit: 256MB
- CPU limit: 0.5 cores
- Suitable for static website with moderate traffic
### Scaling
For higher traffic:
1. Increase resource limits in `dokploy.json`
2. Consider using CDN for static assets
3. Enable Dokploy's load balancing features
## Security Features
### Built-in Security Headers
- X-Frame-Options: SAMEORIGIN
- X-Content-Type-Options: nosniff
- X-XSS-Protection: 1; mode=block
### SSL/TLS
- Automatic HTTPS redirect
- Strong cipher suites
- HTTP/2 support
### Network Security
- Container isolated in Docker network
- Only necessary ports exposed (80, 443)
- Firewall rules configured
## Backup Strategy
The static website doesn't require database backups, but consider:
- Regular Git repository backups
- Dokploy configuration export
- Domain and SSL certificate documentation
## Support
For issues with:
- **Dokploy Platform**: Check Dokploy documentation
- **Website Content**: Review HTML/CSS/JS files
- **Domain/SSL**: Contact your domain registrar
- **Server Issues**: Check with your hosting provider
Your Quantum Tasks AI website should now be successfully deployed on Dokploy with automatic SSL, monitoring, and optimized performance!

50
Dockerfile Normal file
View File

@ -0,0 +1,50 @@
# Use the official nginx image based on Alpine Linux
FROM nginx:alpine
# Remove the default nginx website
RUN rm -rf /usr/share/nginx/html/*
# Copy the static website files to nginx html directory
COPY . /usr/share/nginx/html/
# Create a custom nginx configuration
RUN echo 'server {' > /etc/nginx/conf.d/default.conf && \
echo ' listen 80;' >> /etc/nginx/conf.d/default.conf && \
echo ' server_name _;' >> /etc/nginx/conf.d/default.conf && \
echo ' root /usr/share/nginx/html;' >> /etc/nginx/conf.d/default.conf && \
echo ' index index.html index.htm;' >> /etc/nginx/conf.d/default.conf && \
echo ' ' >> /etc/nginx/conf.d/default.conf && \
echo ' # Handle URLs without extensions' >> /etc/nginx/conf.d/default.conf && \
echo ' location / {' >> /etc/nginx/conf.d/default.conf && \
echo ' try_files $uri $uri.html $uri/ /index.html;' >> /etc/nginx/conf.d/default.conf && \
echo ' }' >> /etc/nginx/conf.d/default.conf && \
echo ' ' >> /etc/nginx/conf.d/default.conf && \
echo ' # Security headers' >> /etc/nginx/conf.d/default.conf && \
echo ' add_header X-Frame-Options "SAMEORIGIN" always;' >> /etc/nginx/conf.d/default.conf && \
echo ' add_header X-Content-Type-Options "nosniff" always;' >> /etc/nginx/conf.d/default.conf && \
echo ' add_header X-XSS-Protection "1; mode=block" always;' >> /etc/nginx/conf.d/default.conf && \
echo ' ' >> /etc/nginx/conf.d/default.conf && \
echo ' # Static assets caching' >> /etc/nginx/conf.d/default.conf && \
echo ' location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {' >> /etc/nginx/conf.d/default.conf && \
echo ' expires 1y;' >> /etc/nginx/conf.d/default.conf && \
echo ' add_header Cache-Control "public, immutable";' >> /etc/nginx/conf.d/default.conf && \
echo ' }' >> /etc/nginx/conf.d/default.conf && \
echo ' ' >> /etc/nginx/conf.d/default.conf && \
echo ' # JSON files - shorter cache for blog data' >> /etc/nginx/conf.d/default.conf && \
echo ' location ~* \.(json)$ {' >> /etc/nginx/conf.d/default.conf && \
echo ' expires 10m;' >> /etc/nginx/conf.d/default.conf && \
echo ' add_header Cache-Control "public";' >> /etc/nginx/conf.d/default.conf && \
echo ' }' >> /etc/nginx/conf.d/default.conf && \
echo ' ' >> /etc/nginx/conf.d/default.conf && \
echo ' # HTML files - shorter cache' >> /etc/nginx/conf.d/default.conf && \
echo ' location ~* \.(html|htm)$ {' >> /etc/nginx/conf.d/default.conf && \
echo ' expires 1h;' >> /etc/nginx/conf.d/default.conf && \
echo ' add_header Cache-Control "public";' >> /etc/nginx/conf.d/default.conf && \
echo ' }' >> /etc/nginx/conf.d/default.conf && \
echo '}' >> /etc/nginx/conf.d/default.conf
# Expose port 80
EXPOSE 80
# Start nginx in the foreground
CMD ["nginx", "-g", "daemon off;"]

59
LOGO-FIX-SUMMARY.md Normal file
View File

@ -0,0 +1,59 @@
# Logo Fix - Complete ✅
## What Was Fixed
### ✅ Logo Files Copied
- **logo.png** → Successfully copied to `static-website/img/`
- **og-image.png** → Successfully copied for social media previews
### ✅ Assets Status
```
static-website/img/
├── logo.png ✅ (75KB - Professional logo with brand name)
├── og-image.png ✅ (105KB - Social media preview image)
├── FAVICON-SETUP.md ✅ (Instructions for generating favicons)
└── [favicons needed] ⚠️ (Optional - site works without them)
```
### ✅ HTML Configuration
All HTML files (`index.html`, `digital-branding.html`) are configured with:
- Correct logo path: `<img src="img/logo.png" alt="Quantum Tasks AI">`
- SEO meta images: `content="https://quantumtaskai.com/img/og-image.png"`
- Updated navigation with AI Marketplace link
- Separate Login/Register authentication buttons
## Current Status: READY TO DEPLOY 🚀
Your static website is **ready to deploy immediately** with:
- ✅ Working logo display
- ✅ Social media preview images
- ✅ Professional branding
- ✅ Updated navigation (Home | AI Digital Branding | AI Marketplace)
- ✅ Modern authentication UI (separate Login/Register buttons)
- ✅ Integrated contact form on homepage
## Optional: Add Favicons Later
**For immediate deployment:** Site works perfectly without favicons
**For complete setup:** Follow instructions in `img/FAVICON-SETUP.md`
## Quick Deploy Instructions
### Deploy to Netlify (5 minutes):
1. Go to [netlify.com](https://netlify.com)
2. Drag the entire `static-website/` folder to Netlify
3. Your site goes live instantly with working logo
4. Configure custom domain if needed
### Example Live Preview:
- **Header**: Shows "QUANTUM TASK AI" logo
- **Social Sharing**: Shows professional og-image
- **Branding**: Consistent across all pages
## Logo Details
- **Format**: PNG with transparency
- **Size**: Optimized for web (75KB)
- **Design**: Professional with "SOLVING COMPLEXITY, QUANTUM FAST" tagline
- **Branding**: "POWERED BY NETCOP CONSULTANCY"
Your static marketing website is now **ready to go live** with proper logo branding! 🎉

110
README.md Normal file
View File

@ -0,0 +1,110 @@
# Quantum Tasks AI - Static Marketing Website
This is the static marketing website for Quantum Tasks AI, separated from the Django application for optimal performance and SEO.
## Structure
```
static-website/
├── index.html # Home page
├── digital-branding.html # AI Digital Branding services
├── css/
│ └── style.css # Consolidated styles
├── js/
│ └── script.js # Interactive functionality
├── img/ # Images (to be added)
└── README.md # This file
```
## Features
- ✅ **Fast Loading** - Static HTML/CSS/JS
- ✅ **SEO Optimized** - Proper meta tags, structured data
- ✅ **Responsive Design** - Mobile-first approach
- ✅ **Professional UI** - Modern, clean design
- ✅ **Interactive Elements** - Smooth animations, hover effects
- ✅ **Contact Form** - Integrated into homepage with client-side validation
- ✅ **App Integration** - Links to AI Marketplace and authentication
## Pages
### Home Page (`index.html`)
- Hero section with trust indicators
- Company profile and founder information
- Services overview
- Client showcase
- Integrated contact section with form
### Digital Branding Page (`digital-branding.html`)
- AI-powered digital branding services
- SOSTAC+RACE framework explanation
- Process breakdown with 6 steps
- Service portfolio
- CTA to brand assessment form
## Deployment
### Option 1: Netlify (Recommended)
1. Drag and drop the `static-website` folder to Netlify
2. Configure domain settings
3. Enable form handling for contact form
### Option 2: Vercel
1. Connect GitHub repository
2. Set build directory to `static-website`
3. Deploy automatically
### Option 3: GitHub Pages
1. Push to GitHub repository
2. Enable GitHub Pages in settings
3. Set source to `static-website` directory
## Domain Setup
- **Main site**: `yoursite.com` → Static website
- **App subdomain**: `app.yoursite.com` → Django marketplace
## Assets Needed
Add these files to the `img/` directory:
- `logo.png` - Company logo
- `favicon.ico` - Website favicon
- `apple-touch-icon.png` - iOS home screen icon
- `favicon-32x32.png` - 32x32 favicon
- `favicon-16x16.png` - 16x16 favicon
- `og-image.png` - Social media preview image (1200x630)
## Links to Django App
The static site navigation includes:
- AI Marketplace: Links to agent marketplace (placeholder URL until aiagent.quantumtaskai.com is configured)
- Login/Register: Separate authentication buttons (placeholder URLs until configured)
Update these URLs to match your Django app deployment.
## Contact Form
The contact form is integrated into the homepage (#contact section) and includes client-side validation with demo success message. For production:
1. **Option 1**: Use Netlify Forms (add `netlify` attribute to form)
2. **Option 2**: Use Formspree or similar service
3. **Option 3**: Connect to Django backend API endpoint
## Performance
- Optimized fonts loading with preload
- Compressed CSS (single file)
- Minimized JavaScript
- Responsive images (when added)
- Modern CSS with custom properties
## Browser Support
- Chrome 88+
- Firefox 85+
- Safari 14+
- Edge 88+
## License
© 2025 Quantum Tasks AI. All rights reserved.

1
WARP.md Symbolic link
View File

@ -0,0 +1 @@
CLAUDE.md

BIN
Wilmington_Foods/anuga.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Wilmington Foods — Anuga 2025</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<main>
<header class="banner banner--img">
<img src="anuga.png" alt="Anuga 2025 - The No.1 for Food & Beverage Business, Köln Cologne, 04.-08.10.2025" class="header-image" />
<div>
<h1 class="sr-only">LET'S MEET AT ANUGA!</h1>
<p class="sr-only">- Discover what's new at ANUGA 2025 -</p>
</div>
</header>
<section class="card-large">
<div class="brand-logo">
<img src="logo.png" alt="Wilmington Foods" />
</div>
<p class="lead">After a year of exciting growth and innovation, <strong>Wilmington Foods</strong> is thrilled to showcase our latest range at one of the world's most dynamic food &amp; beverage events!</p>
<p>We're excited to share that the Wilmington Foods team will be at <strong>Anuga 2025</strong>! <span class="pin">📍</span> You'll find our stand in <strong>Hall 02.1 — Stand D010</strong>.</p>
<div class="map-edge">
<img src="map.png" alt="Anuga 2025 Exhibition Hall Map - Wilmington Foods at Hall 02.1 Stand D010" class="map-image" />
</div>
<p>Wilmington Foods is a leading manufacturer and exporter of premium sesame seeds, creamy tahini, and delicious halawa. With fully automated, BRC Certified facilities and strict quality controls, we deliver nutrition, purity, and consistency every step of the way. From World's finest sesame to your shelves—with custom-tailored private labelling options!</p>
<p class="question"><strong>Would you like to know more or schedule a meeting during Anuga?</strong><br />
Just hit reply — our team will be happy to set up a time that works for you.</p>
<div class="cta-row">
<a class="cta-main" href="mailto:info@wilmingtonfoods.com?subject=Meeting%20at%20Anuga%202025">Contact us to schedule a meeting at Anuga</a>
<a class="cta-main" href="https://www.wilmingtonfoods.com" target="_blank" rel="noopener">Discover more about Wilmington Foods</a>
</div>
<hr class="divider" />
<div class="contact-cards" id="contact">
<div class="contact-col">
<h3>Wilmington Foods FZE</h3>
<p>Phase II (Food Park), Plot No 46, 47, 55, 56<br />
Hamriyah Free Zone, Sharjah, UAE</p>
<p class="muted"><a href="mailto:info@wilmingtonfoods.com">info@wilmingtonfoods.com</a> · <a href="tel:+971505467749">+971 50 546 7749</a></p>
</div>
</div>
<p class="closing">See you soon in Cologne!<br />
<strong>Wilmington Foods Team</strong></p>
</section>
</main>
<footer class="site-footer">
<div class="container">
<p>See you soon in Cologne!</p>
<p>Wilmington Foods Team</p>
</div>
</footer>
</body>
</html>

27
Wilmington_Foods/info.txt Normal file
View File

@ -0,0 +1,27 @@
LET'S MEET AT ANUGA!
- Discover what's new with Wilmington Foods at Anuga 2025 Cologne -
After a year of exciting growth and innovation, Wilmington Foods FZE is thrilled to showcase our latest range at the world's most dynamic food & beverage event! Join us in Cologne to discuss sesame seeds, tahini, halawa, and private label solutions, and to explore how our commitment to quality can benefit your business.
Meet us at ANUGA 2025!
📍 Hall 02.1 | Stand D010
Wilmington Foods FZE
Phase II (Food Park), Plot No 46, 47, 55, 56
Hamriyah Free Zone, Sharjah, UAE
About Wilmington Foods:
Wilmington Foods is a leading manufacturer and exporter of premium sesame seeds, creamy tahini, and delicious halawa. With fully automated, BRC Certified facilities and strict quality controls, we deliver nutrition, purity, and consistency every step of the way. From Africa's finest sesame to your shelves—with custom-tailored private labelling options!
Let's connect at Anuga!
Would you like to know more or schedule a meeting during Anuga?
Reply now—our team will be happy to set up a time that works for you.
Contact us to schedule a meeting:
📧 info@wilmingtonfoods.com
📱 +971 50 546 7749
Discover more about Wilmington Foods:
🌐 www.wilmingtonfoods.com
See you soon in Cologne!
Wilmington Foods Team

BIN
Wilmington_Foods/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
Wilmington_Foods/map.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

@ -0,0 +1,89 @@
/* Base */
:root {
--red: #BC4037; /* primary brand color (red) */
--red-dark: #9A332A;
--ink: #2b2f36; /* heading/body */
--gray-700: #4b5563;
--gray-500: #6b7280; /* muted */
--page: #f3f4f6; /* light gray background */
--card: #ffffff; /* white card */
--border: #e5e7eb;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: var(--page);
color: var(--ink);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
line-height: 1.6;
}
/* Top photo band */
.hero-photo { display: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(760px, 92%); margin: 0 auto; }
.section { padding: 64px 0; }
/* Header / Nav */
.banner { background: transparent; color: #fff; padding: 0; margin: 0; text-align: center; }
.banner--img {
margin: 0;
padding: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
overflow: hidden;
}
.header-image {
width: 100%;
height: auto;
display: block;
}
.banner h1 { margin: 0 0 6px; font-size: clamp(24px, 4vw, 30px); letter-spacing: 0.6px; font-weight: 800; }
.banner p { margin: 0; opacity: 0.98; font-weight: 700; letter-spacing: 0.3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Grid / Cards */
.card-large { background: transparent; border: none; border-radius: 0; padding: 20px 0; margin-top: 0; box-shadow: none; }
.brand-logo { display: grid; place-items: center; margin: 0; }
.brand-logo img { max-height: 84px; width: auto; opacity: 0.95; }
.lead { color: var(--gray-700); margin-top: 0; }
.pin { color: var(--red); }
.map-edge { margin: 12px 0 8px; overflow: hidden; border-radius: 8px; }
.map-image {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.question { color: var(--ink); }
.cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 22px 0 12px; }
.cta-main { display: inline-block; text-align: center; padding: 14px 18px; border-radius: 8px; font-weight: 800; letter-spacing: 0.3px; background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-dark); text-transform: uppercase; }
.divider { border: 0; height: 2px; background: #f1f2f4; margin: 24px 0; }
.contact-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.contact-col h3 { margin-bottom: 6px; }
.muted { color: var(--gray-500); }
.closing { margin-top: 10px; color: var(--gray-700); }
.card { margin-top: 16px; border: 1px solid var(--border); background: var(--card); border-radius: 14px; padding: 18px; }
.contact { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.contact li { display: flex; gap: 10px; align-items: center; color: var(--muted); }
.contact a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.15); text-underline-offset: 3px; }
/* Footer */
.site-footer { display: none; }
/* Responsive */
@media (max-width: 900px) {
.cta-row { grid-template-columns: 1fr; }
}

194
anuga.html Normal file
View File

@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WF - Quantum Tasks AI</title>
<!-- SEO Meta Tags -->
<meta name="description" content="WF - Quantum Tasks AI form submission page">
<meta name="keywords" content="AI, artificial intelligence, automation, task management, AI agents">
<meta name="author" content="Quantum Tasks AI">
<!-- Open Graph Meta Tags for Rich Link Previews -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Quantum Tasks AI">
<meta property="og:title" content="WF - Quantum Tasks AI">
<meta property="og:description" content="WF form submission page for Quantum Tasks AI">
<meta property="og:url" content="https://quantumtaskai.com/wf">
<meta property="og:image" content="https://quantumtaskai.com/img/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Quantum Tasks AI - AI Agent Marketplace">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@quantumtaskai">
<meta name="twitter:title" content="WF - Quantum Tasks AI">
<meta name="twitter:description" content="WF form submission page for Quantum Tasks AI">
<meta name="twitter:image" content="https://quantumtaskai.com/img/og-image.png">
<!-- Favicon -->
<!-- Favicon files will be added later -->
<!-- Font Loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"></noscript>
<!-- Styles -->
<link rel="stylesheet" href="css/style.css">
<style>
.form-container {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.form-wrapper {
width: 100%;
max-width: 800px;
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.form-content {
padding: 1rem;
min-height: 600px;
}
.jotform-iframe {
width: 100%;
height: 700px;
border: none;
border-radius: 8px;
}
@media (max-width: 768px) {
.form-container {
padding: 1rem;
}
.jotform-iframe {
height: 800px;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="hdr">
<div class="hdr-inner">
<a href="index.html" class="hdr-logo">
<img src="img/logo.png" alt="Quantum Tasks AI">
</a>
<nav class="hdr-nav" id="hdr-nav" aria-label="Main navigation">
<a href="index.html">Home</a>
<a href="digital-branding.html">AI Digital Branding</a>
<a href="https://blog.quantumtaskai.com/">Blog</a>
<a href="https://ai-chat.quantumtaskai.com/">AI Chat</a>
<a href="https://ai.quantumtaskai.com/agents/">AI Marketplace</a>
</nav>
<button class="hdr-burger" id="hdr-burger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="hdr-nav">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
<path d="M3 5h16M3 11h16M3 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
</header>
<!-- Main Content -->
<main class="form-container">
<div class="form-wrapper">
<div class="form-content">
<iframe
id="JotFormIFrame-252561494170457"
title="WF Form"
onload="window.parent.scrollTo(0,0)"
allowtransparency="true"
allow="geolocation; microphone; camera; midi; encrypted-media;"
src="https://form.jotform.com/252721607087458"
frameborder="0"
class="jotform-iframe"
scrolling="no">
</iframe>
<script src='https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js'></script>
<script>window.jotformEmbedHandler("iframe[id='JotFormIFrame-252561494170457']", "https://form.jotform.com/");</script>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<!-- Main Footer Content -->
<div class="footer-main">
<!-- Company Info -->
<div class="footer-company">
<div class="footer-logo">
<img src="img/logo.png" alt="Quantum Tasks AI" class="footer-logo-img">
</div>
<p class="footer-description">
Leading cybersecurity consultancy providing comprehensive security solutions and AI-powered automation.
</p>
<div class="footer-contact">
<a href="mailto:abhay@quantumtaskai.com" class="footer-contact-item">
📧 abhay@quantumtaskai.com
</a>
<span class="footer-contact-item">
📍 Dubai, UAE
</span>
</div>
</div>
<!-- Navigation Sections -->
<div class="footer-nav">
<!-- Services -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Services</h4>
<div class="footer-nav-links">
<a href="#services" class="footer-nav-link">Cybersecurity Consulting</a>
<a href="#services" class="footer-nav-link">AI Automation</a>
<a href="digital-branding.html" class="footer-nav-link">Digital Branding</a>
<a href="#services" class="footer-nav-link">Rapid Response</a>
</div>
</div>
<!-- Company -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Company</h4>
<div class="footer-nav-links">
<a href="#about" class="footer-nav-link">About Us</a>
<a href="#founder" class="footer-nav-link">Leadership</a>
<a href="#contact" class="footer-nav-link">Contact Us</a>
<a href="https://app.quantumtaskai.com" class="footer-nav-link">AI Marketplace</a>
</div>
</div>
</div>
</div>
<!-- Bottom Section -->
<div class="footer-bottom">
<p class="footer-copyright">
© 2025 Quantum Tasks AI. All rights reserved.
</p>
<div class="footer-legal">
<a href="#privacy" class="footer-legal-link">Privacy Policy</a>
<a href="#terms" class="footer-legal-link">Terms of Service</a>
<a href="#security" class="footer-legal-link">Security</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="js/script.js"></script>
</body>
</html>

398
aue.html Normal file
View File

@ -0,0 +1,398 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quantum Tasks AI - Chat Assistant</title>
<meta name="description" content="Chat with Quantum Tasks AI - Get instant support for AI and Cybersecurity solutions">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<!-- Styles -->
<link rel="stylesheet" href="css/style.css">
<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f8fafc;
height: 100vh;
display: flex;
flex-direction: column;
}
.chat-main {
flex: 1;
display: flex;
flex-direction: column;
padding: 40px 0;
margin: 0;
background-color: #f8fafc;
}
.chat-container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.iframe-container {
flex: 1;
width: 100%;
height: 100%;
background: white;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid #e2e8f0;
}
#chatWidget {
width: 100%;
height: 100%;
border: none;
display: block;
border-radius: 12px;
}
@media (max-width: 768px) {
.chat-main {
padding: 10px;
}
}
/* Override eself.ai home button styling */
.custom-home-overlay {
position: absolute;
top: 10px;
left: 10px;
background: #667eea !important;
color: white !important;
border: none !important;
padding: 8px 16px !important;
border-radius: 6px !important;
cursor: pointer !important;
z-index: 9999 !important;
font-weight: 500 !important;
font-size: 14px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
text-decoration: none !important;
display: inline-block !important;
}
.custom-home-overlay:hover {
background: #5a6fd8 !important;
transform: translateY(-1px) !important;
}
</style>
</head>
<body>
<!-- Header -->
<header class="hdr">
<div class="hdr-inner">
<a href="index.html" class="hdr-logo">
<img src="img/logo.png" alt="Quantum Tasks AI">
</a>
<nav class="hdr-nav" id="hdr-nav" aria-label="Main navigation">
<a href="index.html">Home</a>
<a href="digital-branding.html">AI Digital Branding</a>
<a href="https://blog.quantumtaskai.com/">Blog</a>
<a href="https://ai-chat.quantumtaskai.com/">AI Chat</a>
<a href="https://ai.quantumtaskai.com/agents/">AI Marketplace</a>
</nav>
<button class="hdr-burger" id="hdr-burger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="hdr-nav">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
<path d="M3 5h16M3 11h16M3 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="chat-main">
<div class="chat-container">
<div class="iframe-container">
<iframe
src="https://meet.eself.ai/108315232292977188132/talk-to-agent?aiclid=3hIpww4j&flow_id=agent-5"
id="chatWidget"
frameborder="0"
scrolling="yes"
allowtransparency="true"
allow="camera; microphone; autoplay; encrypted-media; fullscreen"
allowfullscreen>
</iframe>
</div>
</div>
</main>
<!-- JavaScript -->
<script src="js/script.js"></script>
<script>
const iframe = document.getElementById('chatWidget');
let initialUrl = iframe.src;
let callStarted = false;
// Listen for messages from the iframe
window.addEventListener('message', function(event) {
console.log('Received message:', event.data, 'from:', event.origin);
if (event.origin === 'https://meet.eself.ai') {
// Check for various call end patterns
if (event.data && typeof event.data === 'object') {
const data = event.data;
// Check for call end indicators that should show thank you screen
if (data.type === 'call-ended' ||
data.type === 'session-ended' ||
data.action === 'end-call' ||
data.event === 'call-end' ||
data.status === 'ended' ||
data.message === 'call-ended' ||
(data.type === 'navigation' && data.url && data.url.includes('thank'))) {
console.log('Call ended detected, showing thank you overlay...');
// Update iframe to thank you page
iframe.src = 'https://meet.eself.ai/108315232292977188132/thank-you';
// Show our overlay button
setTimeout(function() {
window.showThankYouButton = true;
addHomeButtonOverlay();
}, 1000);
}
// Track when call actually starts
if (data.type === 'call-started' || data.action === 'call-start') {
callStarted = true;
console.log('Call started');
}
// Check for thank you navigation
if ((data.type === 'navigation' && data.url && data.url.includes('thank')) ||
data.type === 'thank-you' || data.action === 'show-thank-you') {
console.log('Thank you navigation detected');
window.showThankYouButton = true;
setTimeout(addHomeButtonOverlay, 500);
}
}
// Handle string messages too
if (typeof event.data === 'string') {
const msg = event.data.toLowerCase();
if (msg.includes('end') || msg.includes('finish') || msg.includes('complete') || msg.includes('thank')) {
console.log('Thank you/end message detected:', msg);
window.showThankYouButton = true;
setTimeout(addHomeButtonOverlay, 500);
}
}
}
});
// Monitor iframe URL changes (limited by CORS but worth trying)
function monitorIframeChanges() {
try {
const currentUrl = iframe.contentWindow.location.href;
if (currentUrl !== initialUrl) {
console.log('Iframe URL changed:', currentUrl);
// Check if URL indicates call ended
if (currentUrl.includes('end') || currentUrl.includes('finish') || currentUrl.includes('complete')) {
console.log('Call ended via URL change, redirecting...');
setTimeout(function() {
window.location.href = 'index.html';
}, 1500);
}
}
} catch (e) {
// CORS will likely block this
}
}
// Check every few seconds
setInterval(monitorIframeChanges, 3000);
// Listen for beforeunload on the main window (user closes tab/browser)
window.addEventListener('beforeunload', function() {
if (callStarted) {
// Don't redirect if user is closing the browser/tab intentionally
return;
}
});
// Function to overlay existing home button only on thank you screen
function addHomeButtonOverlay() {
// Check if we're on the thank you screen using multiple methods
let isThankYouScreen = false;
// Method 1: Check iframe src URL
const currentSrc = iframe.src || '';
console.log('Current iframe src:', currentSrc);
if (currentSrc.includes('thank-you') || currentSrc.includes('thank_you')) {
isThankYouScreen = true;
console.log('Thank You screen detected via iframe src');
}
// Method 2: Try to check iframe content (will likely fail due to CORS)
try {
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDoc && iframeDoc.body) {
const bodyText = iframeDoc.body.innerText || '';
if (bodyText.includes('Thank You!') || bodyText.includes('Thank you!')) {
isThankYouScreen = true;
console.log('Thank You screen detected via content');
}
}
} catch (e) {
console.log('Cannot access iframe content due to CORS');
}
// Method 3: Try to check iframe window location (will likely fail due to CORS)
try {
const iframeUrl = iframe.contentWindow.location.href || '';
console.log('Iframe URL:', iframeUrl);
if (iframeUrl.includes('thank-you') || iframeUrl.includes('thank_you') ||
iframeUrl.includes('complete') || iframeUrl.includes('finished')) {
isThankYouScreen = true;
console.log('Thank You screen detected via URL');
}
} catch (urlError) {
console.log('Cannot check iframe URL due to CORS');
}
// Method 4: Simple fallback - show button after some time (temporary for testing)
const now = Date.now();
if (!window.chatStartTime) {
window.chatStartTime = now;
}
// Show button after 30 seconds as fallback (you can remove this later)
if (now - window.chatStartTime > 30000) {
console.log('Showing button after 30 seconds (fallback)');
isThankYouScreen = true;
}
// Remove existing overlay button first
const existingButton = document.querySelector('.custom-home-overlay');
if (existingButton) {
existingButton.remove();
}
// Only add button if on thank you screen
if (!isThankYouScreen) {
return;
}
// Create our custom home button
const homeButton = document.createElement('a');
homeButton.innerHTML = 'Home';
homeButton.href = 'index.html';
homeButton.className = 'custom-home-overlay';
// Position it to overlay the iframe's bottom center (where eself.ai Home button is)
homeButton.style.cssText = `
position: absolute;
bottom: 130px;
left: 50%;
transform: translateX(-50%);
background: #1a237e;
color: white;
border: none;
padding: 12px 32px;
border-radius: 24px;
cursor: pointer;
z-index: 9999;
font-weight: 600;
font-size: 16px;
box-shadow: 0 4px 16px rgba(26, 35, 126, 0.4);
text-decoration: none;
display: inline-block;
transition: all 0.2s ease;
font-family: inherit;
width: 120px;
text-align: center;
height: 48px;
line-height: 24px;
`;
homeButton.onmouseover = function() {
this.style.background = '#283593';
this.style.transform = 'translateX(-50%) translateY(-2px)';
this.style.boxShadow = '0 6px 20px rgba(26, 35, 126, 0.5)';
};
homeButton.onmouseout = function() {
this.style.background = '#1a237e';
this.style.transform = 'translateX(-50%)';
this.style.boxShadow = '0 4px 16px rgba(26, 35, 126, 0.4)';
};
// Add to iframe container so it overlays the iframe
const iframeContainer = document.querySelector('.iframe-container');
iframeContainer.style.position = 'relative';
iframeContainer.appendChild(homeButton);
}
// Try to override eself.ai's existing home button
function overrideEselfHomeButton() {
try {
// This will be blocked by CORS, but worth trying
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// Look for common home button selectors
const homeButtons = iframeDoc.querySelectorAll(
'a[href*="home"], button[class*="home"], [class*="back"], [aria-label*="home"], [title*="home"]'
);
homeButtons.forEach(button => {
// Override the button's functionality
button.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
window.parent.location.href = 'index.html';
return false;
};
// Change the text if it's visible
if (button.textContent) {
button.textContent = 'Home';
}
// Override styling
button.style.background = '#667eea';
button.style.color = 'white';
button.style.border = 'none';
button.style.padding = '8px 16px';
button.style.borderRadius = '6px';
});
} catch (e) {
console.log('Cannot access iframe content due to CORS');
}
}
// Monitor for Thank You screen and add button when detected
function monitorForThankYouScreen() {
addHomeButtonOverlay();
}
// Check for Thank You screen periodically
setInterval(monitorForThankYouScreen, 2000);
// Also check when iframe loads
iframe.onload = function() {
setTimeout(monitorForThankYouScreen, 1000);
};
// Initial check
setTimeout(monitorForThankYouScreen, 3000);
</script>
</body>
</html>

191
blog-data.json Normal file
View File

@ -0,0 +1,191 @@
{
"posts": [
{
"id": "ai-powered-digital-marketing-2025",
"title": "AI-Powered Digital Marketing: Transforming Customer Engagement in 2025",
"slug": "ai-powered-digital-marketing-2025",
"excerpt": "Discover how artificial intelligence is transforming digital marketing through data-driven insights, automated campaigns, and personalized customer experiences.",
"content": "Artificial intelligence is transforming digital marketing by harnessing data-driven insights, automating repetitive tasks, and enabling marketers to create highly targeted campaigns that resonate with customers. AI's learning capabilities—powered by machine learning and natural language processing—allow businesses to analyze audiences, craft engaging content, and optimize strategies faster than ever before.",
"author": "Quantum Tasks AI Team",
"publishDate": "2025-01-20",
"category": "ai-automation",
"tags": ["AI", "Digital Marketing", "Customer Engagement", "Automation", "Personalization"],
"readTime": "10 min read",
"featured": true,
"image": "img/blog/ai-digital-marketing.png",
"metaDescription": "Learn how AI is transforming digital marketing with personalized campaigns, automated content creation, and data-driven customer engagement strategies in 2025."
},
{
"id": "ai-agents-revolutionize-task-management",
"title": "How AI Agents Revolutionize Task Management in 2025",
"slug": "ai-agents-revolutionize-task-management",
"excerpt": "Discover how intelligent AI agents are transforming the way businesses approach task automation and workflow optimization.",
"content": "The landscape of task management has evolved dramatically with the introduction of AI agents. These intelligent systems are not just automating repetitive tasks—they're revolutionizing how we think about productivity and efficiency...",
"author": "Quantum Tasks AI Team",
"publishDate": "2025-01-15",
"category": "ai-automation",
"tags": ["AI", "Task Management", "Automation", "Productivity"],
"readTime": "8 min read",
"featured": true,
"image": "img/blog/ai-agents-task-management.jpg",
"metaDescription": "Learn how AI agents are revolutionizing task management with intelligent automation and workflow optimization in 2025."
},
{
"id": "cybersecurity-ai-powered-solutions",
"title": "AI-Powered Cybersecurity: The Future of Digital Protection",
"slug": "cybersecurity-ai-powered-solutions",
"excerpt": "Explore how artificial intelligence is strengthening cybersecurity defenses and protecting against emerging digital threats.",
"content": "As cyber threats become more sophisticated, traditional security measures are no longer sufficient. AI-powered cybersecurity solutions represent the next frontier in digital protection...",
"author": "Dr. Sarah Chen",
"publishDate": "2025-01-12",
"category": "cybersecurity",
"tags": ["Cybersecurity", "AI", "Digital Protection", "Security"],
"readTime": "12 min read",
"featured": true,
"image": "img/blog/ai-cybersecurity.jpg",
"metaDescription": "Discover how AI-powered cybersecurity solutions are revolutionizing digital protection and threat detection."
},
{
"id": "roi-ai-implementation-business",
"title": "Measuring the ROI of AI Implementation in Your Business",
"slug": "roi-ai-implementation-business",
"excerpt": "A comprehensive guide to calculating and maximizing the return on investment from AI adoption in business operations.",
"content": "Implementing AI in your business is not just about staying current with technology trends—it's about achieving measurable results that impact your bottom line...",
"author": "Michael Rodriguez",
"publishDate": "2025-01-10",
"category": "business",
"tags": ["ROI", "Business", "AI Implementation", "Digital Transformation"],
"readTime": "10 min read",
"featured": false,
"image": "img/blog/ai-roi-business.jpg",
"metaDescription": "Learn how to measure and maximize ROI from AI implementation with proven strategies and real-world case studies."
},
{
"id": "building-smart-automation-workflows",
"title": "Building Smart Automation Workflows with AI Agents",
"slug": "building-smart-automation-workflows",
"excerpt": "Step-by-step guide to creating intelligent automation workflows that adapt and optimize over time.",
"content": "Smart automation goes beyond simple rule-based systems. By leveraging AI agents, businesses can create workflows that learn, adapt, and optimize themselves...",
"author": "Alex Thompson",
"publishDate": "2025-01-08",
"category": "ai-automation",
"tags": ["Automation", "Workflows", "AI Agents", "Process Optimization"],
"readTime": "15 min read",
"featured": false,
"image": "img/blog/smart-automation-workflows.jpg",
"metaDescription": "Master the art of building intelligent automation workflows with AI agents that adapt and optimize over time."
},
{
"id": "quantum-computing-cybersecurity",
"title": "Quantum Computing and the Evolution of Cybersecurity",
"slug": "quantum-computing-cybersecurity",
"excerpt": "Understanding how quantum computing will reshape cybersecurity landscapes and what businesses need to prepare for.",
"content": "Quantum computing represents both an unprecedented opportunity and a significant challenge for cybersecurity professionals...",
"author": "Dr. James Wilson",
"publishDate": "2025-01-05",
"category": "cybersecurity",
"tags": ["Quantum Computing", "Cybersecurity", "Encryption", "Future Tech"],
"readTime": "14 min read",
"featured": false,
"image": "img/blog/quantum-cybersecurity.jpg",
"metaDescription": "Explore how quantum computing will transform cybersecurity and what organizations need to know to prepare."
},
{
"id": "ai-agent-architecture-explained",
"title": "Understanding AI Agent Architecture: A Technical Deep Dive",
"slug": "ai-agent-architecture-explained",
"excerpt": "A comprehensive technical exploration of AI agent architecture, components, and implementation strategies.",
"content": "AI agents are complex systems that require careful architectural planning. This technical deep dive explores the core components and design patterns...",
"author": "Emma Zhang",
"publishDate": "2025-01-03",
"category": "technical",
"tags": ["AI Architecture", "Technical", "Development", "AI Agents"],
"readTime": "18 min read",
"featured": false,
"image": "img/blog/ai-agent-architecture.jpg",
"metaDescription": "Deep dive into AI agent architecture with technical insights on components, design patterns, and implementation strategies."
},
{
"id": "digital-transformation-case-studies",
"title": "Digital Transformation Success Stories: AI in Action",
"slug": "digital-transformation-case-studies",
"excerpt": "Real-world case studies showcasing successful digital transformation initiatives powered by AI technology.",
"content": "Digital transformation is more than a buzzword—it's a business imperative. These case studies demonstrate how AI is driving successful transformation...",
"author": "Lisa Park",
"publishDate": "2025-01-01",
"category": "business",
"tags": ["Digital Transformation", "Case Studies", "AI", "Business Success"],
"readTime": "11 min read",
"featured": false,
"image": "img/blog/digital-transformation-cases.jpg",
"metaDescription": "Explore real-world digital transformation success stories and learn how AI is driving business innovation."
},
{
"id": "machine-learning-business-applications",
"title": "Machine Learning for Business: Practical Applications and Benefits",
"slug": "machine-learning-business-applications",
"excerpt": "Discover practical machine learning applications that can transform your business operations and drive growth.",
"content": "Machine learning is no longer confined to tech companies. Businesses across industries are leveraging ML to gain competitive advantages...",
"author": "Robert Kim",
"publishDate": "2024-12-28",
"category": "business",
"tags": ["Machine Learning", "Business Applications", "AI", "Growth"],
"readTime": "13 min read",
"featured": false,
"image": "img/blog/ml-business-applications.jpg",
"metaDescription": "Learn practical machine learning applications for business growth and competitive advantage across industries."
}
],
"categories": {
"ai-automation": {
"name": "AI & Automation",
"description": "Latest insights on artificial intelligence and automation technologies"
},
"cybersecurity": {
"name": "Cybersecurity",
"description": "Security insights and protection strategies in the digital age"
},
"business": {
"name": "Business",
"description": "Business strategies and insights for AI adoption and digital transformation"
},
"technical": {
"name": "Technical",
"description": "Deep technical insights and implementation guides"
}
},
"authors": {
"Quantum Tasks AI Team": {
"bio": "Expert team of AI researchers and engineers at Quantum Tasks AI",
"avatar": "img/authors/team.jpg"
},
"Dr. Sarah Chen": {
"bio": "Cybersecurity expert and AI researcher with 15+ years of experience",
"avatar": "img/authors/sarah-chen.jpg"
},
"Michael Rodriguez": {
"bio": "Business strategist specializing in AI transformation and ROI optimization",
"avatar": "img/authors/michael-rodriguez.jpg"
},
"Alex Thompson": {
"bio": "Automation specialist and workflow optimization expert",
"avatar": "img/authors/alex-thompson.jpg"
},
"Dr. James Wilson": {
"bio": "Quantum computing researcher and cybersecurity consultant",
"avatar": "img/authors/james-wilson.jpg"
},
"Emma Zhang": {
"bio": "Senior AI architect and technical lead",
"avatar": "img/authors/emma-zhang.jpg"
},
"Lisa Park": {
"bio": "Digital transformation consultant and business analyst",
"avatar": "img/authors/lisa-park.jpg"
},
"Robert Kim": {
"bio": "Machine learning engineer and business intelligence specialist",
"avatar": "img/authors/robert-kim.jpg"
}
}
}

220
blog.html Normal file
View File

@ -0,0 +1,220 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI & Automation Blog - Quantum Tasks AI</title>
<!-- SEO Meta Tags -->
<meta name="description" content="Expert insights on AI, automation, and cybersecurity. Stay updated with the latest trends in artificial intelligence and task automation solutions.">
<meta name="keywords" content="AI blog, artificial intelligence, automation, cybersecurity, machine learning, AI agents, digital transformation">
<meta name="author" content="Quantum Tasks AI">
<!-- Open Graph Meta Tags for Rich Link Previews -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Quantum Tasks AI">
<meta property="og:title" content="AI & Automation Blog - Quantum Tasks AI">
<meta property="og:description" content="Expert insights on AI, automation, and cybersecurity. Stay updated with the latest trends in artificial intelligence and task automation solutions.">
<meta property="og:url" content="https://quantumtaskai.com/blog.html">
<meta property="og:image" content="https://quantumtaskai.com/img/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Quantum Tasks AI Blog - AI & Automation Insights">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@quantumtaskai">
<meta name="twitter:title" content="AI & Automation Blog - Quantum Tasks AI">
<meta name="twitter:description" content="Expert insights on AI, automation, and cybersecurity. Stay updated with the latest trends in artificial intelligence and task automation solutions.">
<meta name="twitter:image" content="https://quantumtaskai.com/img/og-image.png">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<!-- Font Loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"></noscript>
<!-- Styles -->
<link rel="stylesheet" href="css/style.css">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Blog",
"name": "Quantum Tasks AI Blog",
"description": "Expert insights on AI, automation, and cybersecurity",
"url": "https://quantumtaskai.com/blog.html",
"publisher": {
"@type": "Organization",
"name": "Quantum Tasks AI",
"url": "https://quantumtaskai.com"
}
}
</script>
</head>
<body class="blog-context">
<!-- Header -->
<header class="hdr">
<div class="hdr-inner">
<a href="index.html" class="hdr-logo">
<img src="img/logo.png" alt="Quantum Tasks AI">
</a>
<nav class="hdr-nav" id="hdr-nav" aria-label="Main navigation">
<a href="index.html">Home</a>
<a href="digital-branding.html">AI Digital Branding</a>
<a href="https://blog.quantumtaskai.com/" class="active">Blog</a>
<a href="https://ai-chat.quantumtaskai.com/">AI Chat</a>
<a href="https://ai.quantumtaskai.com/agents/">AI Marketplace</a>
</nav>
<button class="hdr-burger" id="hdr-burger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="hdr-nav">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
<path d="M3 5h16M3 11h16M3 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
</header>
<!-- Blog Surface Card Wrapper -->
<div class="blog-surface">
<!-- Minimal Blog Header -->
<section class="blog-header">
<div class="container">
<div class="blog-intro">
<h1 class="blog-title">Insights</h1>
<p class="blog-subtitle">Expert perspectives on AI, automation, and cybersecurity</p>
</div>
<!-- Simple Search -->
<div class="search-container">
<input type="text" id="blogSearch" placeholder="Search articles..." class="search-field">
</div>
</div>
</section>
<!-- Simple Category Navigation -->
<nav class="category-nav">
<div class="container">
<ul class="category-list">
<li><button class="category-link active" onclick="filterCategory('all')">All</button></li>
<li><button class="category-link" onclick="filterCategory('ai-automation')">AI & Automation</button></li>
<li><button class="category-link" onclick="filterCategory('cybersecurity')">Cybersecurity</button></li>
<li><button class="category-link" onclick="filterCategory('business')">Business</button></li>
<li><button class="category-link" onclick="filterCategory('technical')">Technical</button></li>
</ul>
</div>
</nav>
<!-- Article List -->
<main class="article-list">
<div class="container">
<div class="articles" id="blogGrid">
<!-- Articles will be dynamically loaded here -->
</div>
<!-- Simple Loading State -->
<div class="loading-state" id="blogLoading">
<!-- skeleton injected by JS -->
</div>
<!-- Simple Empty State -->
<div class="empty-state" id="blogEmpty" style="display: none;">
<p>No articles found. <button class="reset-filters" onclick="filterCategory('all'); document.getElementById('blogSearch').value = ''; searchBlog();">Show all articles</button></p>
</div>
</div>
</main>
</div>
<!-- Simple Newsletter -->
<section class="newsletter">
<div class="container">
<h2>Stay updated</h2>
<p>Get new articles delivered to your inbox</p>
<form class="newsletter-form" id="newsletterForm">
<input type="email" placeholder="your@email.com" class="email-input" required>
<button type="submit" class="subscribe-btn">Subscribe</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<!-- Main Footer Content -->
<div class="footer-main">
<!-- Company Info -->
<div class="footer-company">
<div class="footer-logo">
<img src="img/logo.png" alt="Quantum Tasks AI" class="footer-logo-img">
</div>
<p class="footer-description">
Leading cybersecurity consultancy providing comprehensive security solutions and AI-powered automation.
</p>
<div class="footer-contact">
<a href="mailto:abhay@quantumtaskai.com" class="footer-contact-item">
📧 abhay@quantumtaskai.com
</a>
<span class="footer-contact-item">
📍 Dubai, UAE
</span>
</div>
</div>
<!-- Navigation Sections -->
<div class="footer-nav">
<!-- Services -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Services</h4>
<div class="footer-nav-links">
<a href="index.html#services" class="footer-nav-link">Cybersecurity Consulting</a>
<a href="index.html#services" class="footer-nav-link">AI Automation</a>
<a href="digital-branding.html" class="footer-nav-link">Digital Branding</a>
<a href="freight-flow.html" class="footer-nav-link">FreightFlow</a>
<a href="index.html#services" class="footer-nav-link">Rapid Response</a>
</div>
</div>
<!-- Company -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Company</h4>
<div class="footer-nav-links">
<a href="index.html#about" class="footer-nav-link">About Us</a>
<a href="index.html#founder" class="footer-nav-link">Leadership</a>
<a href="index.html#contact" class="footer-nav-link">Contact Us</a>
<a href="https://app.quantumtaskai.com" class="footer-nav-link">AI Marketplace</a>
</div>
</div>
</div>
</div>
<!-- Bottom Section -->
<div class="footer-bottom">
<p class="footer-copyright">
© 2025 Quantum Tasks AI. All rights reserved.
</p>
<div class="footer-legal">
<a href="#privacy" class="footer-legal-link">Privacy Policy</a>
<a href="#terms" class="footer-legal-link">Terms of Service</a>
<a href="#security" class="footer-legal-link">Security</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="js/script.js"></script>
<script>
// Load blog posts on page load
document.addEventListener('DOMContentLoaded', function() {
loadBlogPosts();
});
</script>
</body>
</html>

BIN
blog.pdf Normal file

Binary file not shown.

View File

@ -0,0 +1,337 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How AI Agents Revolutionize Task Management in 2025 - Quantum Tasks AI Blog</title>
<!-- SEO Meta Tags -->
<meta name="description" content="Learn how AI agents are revolutionizing task management with intelligent automation and workflow optimization in 2025.">
<meta name="keywords" content="AI agents, task management, automation, productivity, workflow optimization, artificial intelligence">
<meta name="author" content="Quantum Tasks AI Team">
<meta name="robots" content="index, follow">
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="article">
<meta property="og:site_name" content="Quantum Tasks AI">
<meta property="og:title" content="How AI Agents Revolutionize Task Management in 2025">
<meta property="og:description" content="Discover how intelligent AI agents are transforming the way businesses approach task automation and workflow optimization.">
<meta property="og:url" content="https://quantumtaskai.com/blog/ai-agents-revolutionize-task-management.html">
<meta property="og:image" content="https://quantumtaskai.com/img/blog/ai-agents-task-management.jpg">
<meta property="article:author" content="Quantum Tasks AI Team">
<meta property="article:published_time" content="2025-01-15">
<meta property="article:section" content="AI & Automation">
<meta property="article:tag" content="AI">
<meta property="article:tag" content="Task Management">
<meta property="article:tag" content="Automation">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@quantumtaskai">
<meta name="twitter:title" content="How AI Agents Revolutionize Task Management in 2025">
<meta name="twitter:description" content="Discover how intelligent AI agents are transforming the way businesses approach task automation and workflow optimization.">
<meta name="twitter:image" content="https://quantumtaskai.com/img/blog/ai-agents-task-management.jpg">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="../img/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="../img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../img/favicon-16x16.png">
<!-- Font Loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"></noscript>
<!-- Styles -->
<link rel="stylesheet" href="../css/style.css">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "How AI Agents Revolutionize Task Management in 2025",
"description": "Discover how intelligent AI agents are transforming the way businesses approach task automation and workflow optimization.",
"image": "https://quantumtaskai.com/img/blog/ai-agents-task-management.jpg",
"author": {
"@type": "Organization",
"name": "Quantum Tasks AI Team"
},
"publisher": {
"@type": "Organization",
"name": "Quantum Tasks AI",
"logo": {
"@type": "ImageObject",
"url": "https://quantumtaskai.com/img/logo.png"
}
},
"datePublished": "2025-01-15",
"dateModified": "2025-01-15",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://quantumtaskai.com/blog/ai-agents-revolutionize-task-management.html"
}
}
</script>
</head>
<body class="blog-context">
<!-- Header -->
<header class="hdr">
<div class="hdr-inner">
<a href="../index.html" class="hdr-logo">
<img src="../img/logo.png" alt="Quantum Tasks AI">
</a>
<nav class="hdr-nav" id="hdr-nav" aria-label="Main navigation">
<a href="../index.html">Home</a>
<a href="../digital-branding.html">AI Digital Branding</a>
<a href="https://blog.quantumtaskai.com/" class="active">Blog</a>
<a href="https://ai-chat.quantumtaskai.com/">AI Chat</a>
<a href="https://ai.quantumtaskai.com/agents/">AI Marketplace</a>
</nav>
<button class="hdr-burger" id="hdr-burger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="hdr-nav">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
<path d="M3 5h16M3 11h16M3 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
</header>
<div class="reading-progress" id="readingProgress"></div>
<!-- Post Surface Card -->
<div class="post-surface">
<!-- Article Content -->
<article class="blog-post">
<div class="container">
<!-- Compact Post Header (no hero) -->
<header class="article-header">
<!-- Breadcrumb -->
<nav class="breadcrumb">
<a href="../index.html">Home</a>
<span>/</span>
<a href="../blog.html">Blog</a>
<span>/</span>
<span>AI Agents & Task Management</span>
</nav>
<div class="article-meta">
<span class="article-category">
<span class="category-icon">🤖</span>
AI & Automation
</span>
<span class="article-date">January 15, 2025</span>
<span class="article-read-time">8 min read</span>
</div>
<h1 class="article-title">How AI Agents Revolutionize Task Management in 2025</h1>
<p class="article-excerpt">Discover how intelligent AI agents are transforming the way businesses approach task automation and workflow optimization with cutting-edge technology.</p>
<div class="article-author-section">
<div class="author-avatar">💼</div>
<div class="author-info">
<span class="author-name">By Quantum Tasks AI Team</span>
<span class="author-title">AI & Automation Experts</span>
</div>
</div>
</header>
<!-- Featured Image -->
<div class="article-image-section">
<div class="article-image">
<div class="article-image-placeholder">
<div class="image-content">
<div class="image-icon">🤖</div>
<h3>AI Agents Task Management</h3>
<p>Revolutionary automation technology</p>
</div>
</div>
</div>
</div>
<!-- Article Content -->
<div class="article-content">
<p>The landscape of task management has evolved dramatically with the introduction of AI agents. These intelligent systems are not just automating repetitive tasks—they're revolutionizing how we think about productivity and efficiency in the modern workplace.</p>
<h2>The Evolution of Task Management</h2>
<p>Traditional task management relied heavily on manual processes, rigid workflows, and human oversight. While these methods served their purpose, they often created bottlenecks, introduced human error, and limited scalability. Today's AI agents represent a paradigm shift toward intelligent, adaptive task management systems.</p>
<h3>What Makes AI Agents Different?</h3>
<p>Unlike traditional automation tools that follow predetermined rules, AI agents can:</p>
<ul>
<li><strong>Learn and adapt</strong> - They analyze patterns in your work and optimize processes over time</li>
<li><strong>Make contextual decisions</strong> - They understand the nuances of different situations and respond appropriately</li>
<li><strong>Predict outcomes</strong> - They forecast potential issues and proactively address them</li>
<li><strong>Collaborate intelligently</strong> - They work seamlessly with human team members and other AI systems</li>
</ul>
<h2>Real-World Applications</h2>
<p>AI agents are already transforming task management across various industries:</p>
<h3>1. Project Coordination</h3>
<p>AI agents can automatically schedule meetings, track project milestones, and reallocate resources based on changing priorities. They analyze team workloads and suggest optimal task distributions to maximize productivity.</p>
<h3>2. Customer Support</h3>
<p>Intelligent agents handle routine customer inquiries, escalate complex issues to human agents, and even predict customer needs based on historical data and behavioral patterns.</p>
<h3>3. Data Processing</h3>
<p>From report generation to data analysis, AI agents can process vast amounts of information, identify trends, and present actionable insights without human intervention.</p>
<h2>The Benefits of AI-Powered Task Management</h2>
<h3>Increased Efficiency</h3>
<p>AI agents work 24/7 without breaks, sick days, or vacation time. They can process multiple tasks simultaneously and complete routine work in a fraction of the time it would take humans.</p>
<h3>Reduced Human Error</h3>
<p>By automating repetitive and error-prone tasks, AI agents significantly reduce the risk of mistakes that can cascade through workflows and cause costly delays.</p>
<h3>Enhanced Scalability</h3>
<p>As your business grows, AI agents can handle increased workloads without the need to hire additional staff or reorganize teams.</p>
<h3>Better Decision Making</h3>
<p>AI agents provide data-driven insights and recommendations, enabling better strategic decisions based on comprehensive analysis rather than intuition alone.</p>
<h2>Implementation Strategies</h2>
<p>Successfully implementing AI agents for task management requires careful planning:</p>
<h3>1. Start Small</h3>
<p>Begin with simple, well-defined tasks before moving to more complex workflows. This allows your team to adapt and builds confidence in the technology.</p>
<h3>2. Choose the Right Tools</h3>
<p>Not all AI agents are created equal. Look for solutions that integrate well with your existing systems and offer the specific capabilities your business needs.</p>
<h3>3. Train Your Team</h3>
<p>Ensure your team understands how to work alongside AI agents effectively. This includes knowing when to intervene and how to optimize agent performance.</p>
<h2>Looking Ahead</h2>
<p>As AI technology continues to advance, we can expect even more sophisticated task management capabilities. Future AI agents will likely offer:</p>
<ul>
<li>More natural language interaction</li>
<li>Better emotional intelligence for human collaboration</li>
<li>Advanced predictive capabilities</li>
<li>Seamless integration across platforms and systems</li>
</ul>
<h2>Conclusion</h2>
<p>AI agents are not replacing human workers—they're augmenting human capabilities and freeing teams to focus on high-value, creative work. Organizations that embrace this technology early will have a significant competitive advantage in the years ahead.</p>
<p>The revolution in task management is just beginning, and AI agents are leading the charge. By understanding their capabilities and implementing them strategically, businesses can achieve unprecedented levels of efficiency and productivity.</p>
</div>
<!-- Article Footer -->
<footer class="article-footer">
<div class="article-tags">
<span class="tag">AI</span>
<span class="tag">Task Management</span>
<span class="tag">Automation</span>
<span class="tag">Productivity</span>
</div>
<div class="article-share">
<h4>Share this article</h4>
<div class="share-buttons">
<a href="#" class="share-btn" data-platform="twitter">Twitter</a>
<a href="#" class="share-btn" data-platform="linkedin">LinkedIn</a>
<a href="#" class="share-btn" data-platform="facebook">Facebook</a>
</div>
</div>
</footer>
</div>
</article>
<!-- Related Articles -->
<section class="related-articles">
<div class="container">
<h3>Related Articles</h3>
<div class="related-grid" id="relatedArticles">
<!-- Related articles will be dynamically loaded -->
</div>
</div>
</section>
<!-- Newsletter CTA -->
<section class="newsletter-section">
<div class="container">
<div class="newsletter-content">
<h2 class="newsletter-title">Stay Updated</h2>
<p class="newsletter-description">
Get the latest AI insights and automation trends delivered to your inbox.
</p>
<form class="newsletter-form" id="newsletterForm">
<input type="email" placeholder="Enter your email" class="newsletter-input" required>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<!-- Main Footer Content -->
<div class="footer-main">
<!-- Company Info -->
<div class="footer-company">
<div class="footer-logo">
<img src="../img/logo.png" alt="Quantum Tasks AI" class="footer-logo-img">
</div>
<p class="footer-description">
Leading cybersecurity consultancy providing comprehensive security solutions and AI-powered automation.
</p>
<div class="footer-contact">
<a href="mailto:abhay@quantumtaskai.com" class="footer-contact-item">
📧 abhay@quantumtaskai.com
</a>
<span class="footer-contact-item">
📍 Dubai, UAE
</span>
</div>
</div>
<!-- Navigation Sections -->
<div class="footer-nav">
<!-- Services -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Services</h4>
<div class="footer-nav-links">
<a href="../index.html#services" class="footer-nav-link">Cybersecurity Consulting</a>
<a href="../index.html#services" class="footer-nav-link">AI Automation</a>
<a href="../digital-branding.html" class="footer-nav-link">Digital Branding</a>
<a href="../freight-flow.html" class="footer-nav-link">FreightFlow</a>
<a href="../index.html#services" class="footer-nav-link">Rapid Response</a>
</div>
</div>
<!-- Company -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Company</h4>
<div class="footer-nav-links">
<a href="../index.html#about" class="footer-nav-link">About Us</a>
<a href="../index.html#founder" class="footer-nav-link">Leadership</a>
<a href="../index.html#contact" class="footer-nav-link">Contact Us</a>
<a href="https://app.quantumtaskai.com" class="footer-nav-link">AI Marketplace</a>
</div>
</div>
</div>
</div>
<!-- Bottom Section -->
<div class="footer-bottom">
<p class="footer-copyright">
© 2025 Quantum Tasks AI. All rights reserved.
</p>
<div class="footer-legal">
<a href="#privacy" class="footer-legal-link">Privacy Policy</a>
<a href="#terms" class="footer-legal-link">Terms of Service</a>
<a href="#security" class="footer-legal-link">Security</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="../js/script.js"></script>
</body>
</html>

View File

@ -0,0 +1,347 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI-Powered Digital Marketing: Transforming Customer Engagement in 2025 - Quantum Tasks AI Blog</title>
<!-- SEO Meta Tags -->
<meta name="description" content="Learn how AI is transforming digital marketing with personalized campaigns, automated content creation, and data-driven customer engagement strategies in 2025.">
<meta name="keywords" content="AI, digital marketing, customer engagement, automation, personalization, machine learning, marketing campaigns">
<meta name="author" content="Quantum Tasks AI Team">
<meta name="robots" content="index, follow">
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="article">
<meta property="og:site_name" content="Quantum Tasks AI">
<meta property="og:title" content="AI-Powered Digital Marketing: Transforming Customer Engagement in 2025">
<meta property="og:description" content="Discover how artificial intelligence is transforming digital marketing through data-driven insights, automated campaigns, and personalized customer experiences.">
<meta property="og:url" content="https://quantumtaskai.com/blog/ai-powered-digital-marketing-2025.html">
<meta property="og:image" content="https://quantumtaskai.com/img/blog/ai-digital-marketing.jpg">
<meta property="article:author" content="Quantum Tasks AI Team">
<meta property="article:published_time" content="2025-01-20">
<meta property="article:section" content="AI & Automation">
<meta property="article:tag" content="AI">
<meta property="article:tag" content="Digital Marketing">
<meta property="article:tag" content="Customer Engagement">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@quantumtaskai">
<meta name="twitter:title" content="AI-Powered Digital Marketing: Transforming Customer Engagement in 2025">
<meta name="twitter:description" content="Discover how artificial intelligence is transforming digital marketing through data-driven insights, automated campaigns, and personalized customer experiences.">
<meta name="twitter:image" content="https://quantumtaskai.com/img/blog/ai-digital-marketing.jpg">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="../img/favicon.ico">
<!-- Font Loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"></noscript>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Styles -->
<link rel="stylesheet" href="../css/style.css">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "AI-Powered Digital Marketing: Transforming Customer Engagement in 2025",
"description": "Discover how artificial intelligence is transforming digital marketing through data-driven insights, automated campaigns, and personalized customer experiences.",
"image": "https://quantumtaskai.com/img/blog/ai-digital-marketing.jpg",
"author": {
"@type": "Organization",
"name": "Quantum Tasks AI Team"
},
"publisher": {
"@type": "Organization",
"name": "Quantum Tasks AI",
"logo": {
"@type": "ImageObject",
"url": "https://quantumtaskai.com/img/logo.png"
}
},
"datePublished": "2025-01-20",
"dateModified": "2025-01-20",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://quantumtaskai.com/blog/ai-powered-digital-marketing-2025.html"
}
}
</script>
</head>
<body class="blog-context">
<!-- Header -->
<header class="hdr">
<div class="hdr-inner">
<a href="../index.html" class="hdr-logo">
<img src="../img/logo.png" alt="Quantum Tasks AI">
</a>
<nav class="hdr-nav" id="hdr-nav" aria-label="Main navigation">
<a href="../index.html">Home</a>
<a href="../digital-branding.html">AI Digital Branding</a>
<a href="https://blog.quantumtaskai.com/" class="active">Blog</a>
<a href="https://ai-chat.quantumtaskai.com/">AI Chat</a>
<a href="https://ai.quantumtaskai.com/agents/">AI Marketplace</a>
</nav>
<button class="hdr-burger" id="hdr-burger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="hdr-nav">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
<path d="M3 5h16M3 11h16M3 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
</header>
<div class="reading-progress" id="readingProgress"></div>
<!-- Post Surface Card -->
<div class="post-surface">
<!-- Article Content -->
<article class="blog-post">
<div class="container">
<!-- Compact Post Header (no hero) -->
<header class="article-header">
<!-- Breadcrumb -->
<nav class="breadcrumb">
<a href="../index.html">Home</a>
<span>/</span>
<a href="../blog.html">Blog</a>
<span>/</span>
<span>AI-Powered Digital Marketing</span>
</nav>
<div class="article-meta">
<span class="article-category">
<i class="fas fa-robot category-icon"></i>
AI & Automation
</span>
<span class="article-date">January 20, 2025</span>
<span class="article-read-time">10 min read</span>
</div>
<h1 class="article-title">AI-Powered Digital Marketing: Transforming Customer Engagement in 2025</h1>
<p class="article-excerpt">Discover how artificial intelligence is transforming digital marketing through data-driven insights, automated campaigns, and personalized customer experiences.</p>
<div class="article-author-section">
<div class="author-avatar">
<img src="../img/authors/team.jpg" alt="Quantum Tasks AI Team" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div style="display:none; width:60px; height:60px; background-color:#f0f0f0; border-radius:50%; align-items:center; justify-content:center; font-size:24px;">
<i class="fas fa-users"></i>
</div>
</div>
<div class="author-info">
<span class="author-name">By Quantum Tasks AI Team</span>
<span class="author-title">AI & Marketing Experts</span>
</div>
</div>
</header>
<!-- Featured Image -->
<div class="article-image-section">
<div class="article-image">
<img src="../img/blog/ai-digital-marketing.png" alt="AI-Powered Digital Marketing" class="featured-image">
</div>
</div>
<!-- Article Content -->
<div class="article-content">
<p>Artificial intelligence is transforming digital marketing by harnessing data-driven insights, automating repetitive tasks, and enabling marketers to create highly targeted campaigns that resonate with customers. AI's learning capabilities—powered by machine learning and natural language processing—allow businesses to analyze audiences, craft engaging content, and optimize strategies faster than ever before.</p>
<h2>How AI Supercharges Marketing</h2>
<p>AI-driven platforms are revolutionizing marketing operations across multiple dimensions:</p>
<h3>Automation of Core Tasks</h3>
<p>AI-driven platforms automate tasks like audience segmentation, content scheduling, and campaign optimization, saving time and resources. This automation allows marketing teams to focus on strategic initiatives rather than repetitive manual processes.</p>
<h3>Predictive Consumer Insights</h3>
<p>Machine learning models help predict consumer behavior and personalize messages, ensuring higher conversion rates and engagement. By analyzing historical data and behavioral patterns, AI can forecast which content will resonate with specific audience segments.</p>
<h3>Advanced Analytics</h3>
<p>Advanced analytics from AI marketing tools uncover valuable market trends and performance insights for rapid decision-making. These insights enable marketers to pivot strategies quickly based on real-time performance data.</p>
<h2>Top Benefits for Marketers</h2>
<h3>Personalized Customer Experiences</h3>
<p>AI tailors content and product recommendations to each customer, boosting satisfaction and loyalty. By analyzing individual preferences, browsing history, and purchase patterns, AI creates unique experiences that make customers feel understood and valued.</p>
<h3>Better Targeting & ROI</h3>
<p>By analyzing large datasets, AI helps marketers target the most promising leads and optimize ad spend. This precision targeting ensures marketing budgets are allocated to channels and audiences most likely to convert, maximizing return on investment.</p>
<h3>Automated Content Creation</h3>
<p>Generative AI tools produce blogs, social posts, and video content quickly for multichannel campaigns. These tools can create variations of content tailored to different platforms while maintaining brand voice and messaging consistency.</p>
<h3>Smarter Insights & Predictions</h3>
<p>AI platforms deliver real-time reporting and predictive analytics that help marketers pivot faster. These insights reveal emerging trends, campaign performance issues, and opportunities before they become apparent through traditional analysis methods.</p>
<h2>Popular AI Tools in 2025</h2>
<p>The AI marketing landscape has evolved with several standout tools leading the transformation:</p>
<h3>Jasper AI</h3>
<p>Specializing in content generation, Jasper AI excels at blog creation, data analytics, and insights. Its natural language capabilities enable marketers to produce high-quality content that aligns with brand voice and audience preferences.</p>
<h3>HubSpot</h3>
<p>HubSpot's AI-powered features enhance social media management and marketing automation through personalization, ad campaign optimization, and progress tracking. The platform integrates AI across its entire marketing suite.</p>
<h3>Gumloop</h3>
<p>Focused on automations and sentiment analysis, Gumloop aggregates product reviews and generates automated reports. This tool helps businesses understand customer sentiment at scale without manual analysis.</p>
<h3>Surfer SEO</h3>
<p>Surfer SEO provides intelligent content optimization through SEO analysis and recommendations. Its AI analyzes top-performing content and provides data-driven guidance for improving search rankings.</p>
<h3>ChatGPT</h3>
<p>Beyond general chatbot functionality, ChatGPT powers sophisticated e-commerce bots, lead generation systems, and personalized email campaigns. Its versatility makes it valuable across multiple marketing functions.</p>
<h2>Implementation Strategies</h2>
<p>Successfully integrating AI into your marketing strategy requires a thoughtful approach:</p>
<h3>Start with Clear Objectives</h3>
<p>Identify specific marketing challenges that AI can solve, such as improving conversion rates, reducing customer acquisition costs, or increasing engagement metrics. Clear objectives help measure AI implementation success.</p>
<h3>Ensure Data Quality</h3>
<p>AI systems require high-quality, clean data to deliver accurate insights. Invest in data collection and management processes that provide the foundation for effective AI-driven marketing.</p>
<h3>Maintain Human Oversight</h3>
<p>While AI automates many processes, human creativity and strategic thinking remain essential. Establish workflows that combine AI efficiency with human expertise for optimal results.</p>
<h3>Test and Iterate</h3>
<p>Implement AI tools in phases, testing their impact on specific campaigns before full deployment. Use A/B testing and performance metrics to refine AI-driven strategies over time.</p>
<h2>The Future of AI in Marketing</h2>
<p>As AI technology continues to evolve, we can expect even more sophisticated marketing capabilities:</p>
<ul>
<li>Hyper-personalization that adapts in real-time to user behavior</li>
<li>Predictive customer journey mapping that anticipates needs</li>
<li>Emotion AI that analyzes and responds to customer sentiment</li>
<li>Voice and visual search optimization for emerging platforms</li>
<li>Augmented reality experiences powered by AI recommendations</li>
</ul>
<h2>Conclusion</h2>
<p>AI is streamlining how brands interact with customers, craft relevant messages, and measure campaign success—setting new benchmarks for growth in a competitive digital era. Adopting AI-powered tools now means faster, smarter marketing and scalable success for businesses of all sizes.</p>
<p>The transformation of digital marketing through AI is not just about technology—it's about creating more meaningful connections with customers. By leveraging AI's capabilities while maintaining human creativity and empathy, businesses can build marketing strategies that resonate deeply with their audience and drive sustainable growth in 2025 and beyond.</p>
</div>
<!-- Article Footer -->
<footer class="article-footer">
<div class="article-tags">
<span class="tag">AI</span>
<span class="tag">Digital Marketing</span>
<span class="tag">Customer Engagement</span>
<span class="tag">Automation</span>
<span class="tag">Personalization</span>
</div>
<div class="article-share">
<h4>Share this article</h4>
<div class="share-buttons">
<a href="#" class="share-btn" data-platform="twitter">Twitter</a>
<a href="#" class="share-btn" data-platform="linkedin">LinkedIn</a>
<a href="#" class="share-btn" data-platform="facebook">Facebook</a>
</div>
</div>
</footer>
</div>
</article>
<!-- Related Articles -->
<section class="related-articles">
<div class="container">
<h3>Related Articles</h3>
<div class="related-grid" id="relatedArticles">
<!-- Related articles will be dynamically loaded -->
</div>
</div>
</section>
<!-- Newsletter CTA -->
<section class="newsletter-section">
<div class="container">
<div class="newsletter-content">
<h2 class="newsletter-title">Stay Updated</h2>
<p class="newsletter-description">
Get the latest AI insights and automation trends delivered to your inbox.
</p>
<form class="newsletter-form" id="newsletterForm">
<input type="email" placeholder="Enter your email" class="newsletter-input" required>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<!-- Main Footer Content -->
<div class="footer-main">
<!-- Company Info -->
<div class="footer-company">
<div class="footer-logo">
<img src="../img/logo.png" alt="Quantum Tasks AI" class="footer-logo-img">
</div>
<p class="footer-description">
Leading cybersecurity consultancy providing comprehensive security solutions and AI-powered automation.
</p>
<div class="footer-contact">
<a href="mailto:abhay@quantumtaskai.com" class="footer-contact-item">
📧 abhay@quantumtaskai.com
</a>
<span class="footer-contact-item">
📍 Dubai, UAE
</span>
</div>
</div>
<!-- Navigation Sections -->
<div class="footer-nav">
<!-- Services -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Services</h4>
<div class="footer-nav-links">
<a href="../index.html#services" class="footer-nav-link">Cybersecurity Consulting</a>
<a href="../index.html#services" class="footer-nav-link">AI Automation</a>
<a href="../digital-branding.html" class="footer-nav-link">Digital Branding</a>
<a href="../freight-flow.html" class="footer-nav-link">FreightFlow</a>
<a href="../index.html#services" class="footer-nav-link">Rapid Response</a>
</div>
</div>
<!-- Company -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Company</h4>
<div class="footer-nav-links">
<a href="../index.html#about" class="footer-nav-link">About Us</a>
<a href="../index.html#founder" class="footer-nav-link">Leadership</a>
<a href="../index.html#contact" class="footer-nav-link">Contact Us</a>
<a href="https://app.quantumtaskai.com" class="footer-nav-link">AI Marketplace</a>
</div>
</div>
</div>
</div>
<!-- Bottom Section -->
<div class="footer-bottom">
<p class="footer-copyright">
© 2025 Quantum Tasks AI. All rights reserved.
</p>
<div class="footer-legal">
<a href="#privacy" class="footer-legal-link">Privacy Policy</a>
<a href="#terms" class="footer-legal-link">Terms of Service</a>
<a href="#security" class="footer-legal-link">Security</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="../js/script.js"></script>
</body>
</html>

4219
css/style.css Normal file

File diff suppressed because it is too large Load Diff

496
digital-branding.html Normal file
View File

@ -0,0 +1,496 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Digital Branding Services - Quantum Tasks AI</title>
<!-- SEO Meta Tags -->
<meta name="description" content="AI-powered digital branding services with intelligent marketing strategies, automation, and data-driven insights for unprecedented brand growth.">
<meta name="keywords" content="AI digital branding, marketing automation, brand intelligence, digital marketing, AI marketing">
<meta name="author" content="Quantum Tasks AI">
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Quantum Tasks AI">
<meta property="og:title" content="AI Digital Branding Services - Quantum Tasks AI">
<meta property="og:description" content="AI-powered digital branding services with intelligent marketing strategies and automation for unprecedented brand growth.">
<meta property="og:url" content="https://quantumtaskai.com/digital-branding.html">
<meta property="og:image" content="https://quantumtaskai.com/img/og-image.png">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@quantumtaskai">
<meta name="twitter:title" content="AI Digital Branding Services - Quantum Tasks AI">
<meta name="twitter:description" content="AI-powered digital branding services with intelligent marketing strategies and automation.">
<meta name="twitter:image" content="https://quantumtaskai.com/img/og-image.png">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<!-- Font Loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"></noscript>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
<!-- Styles -->
<link rel="stylesheet" href="css/style.css">
<!-- Icon Size Adjustments -->
<style>
.service-icon i { font-size: 2.5rem; }
.choice-icon i { font-size: 2.5rem; }
.contact-icon i { font-size: 1.25rem; }
.trust-badge i { font-size: 1rem; }
.section-badge i { font-size: 1.1rem; }
.race-phase i { font-size: 2rem; }
.cta-feature i { font-size: 1rem; margin-right: 0.5rem; color: var(--primary); }
.cta-btn i { font-size: 1rem; margin-right: 0.5rem; }
.footer-contact i { font-size: 0.9rem; margin-right: 0.35rem; }
</style>
</head>
<body>
<!-- Header -->
<header class="hdr">
<div class="hdr-inner">
<a href="index.html" class="hdr-logo">
<img src="img/logo.png" alt="Quantum Tasks AI">
</a>
<nav class="hdr-nav" id="hdr-nav" aria-label="Main navigation">
<a href="index.html">Home</a>
<a href="digital-branding.html" class="active">AI Digital Branding</a>
<a href="https://blog.quantumtaskai.com/">Blog</a>
<a href="https://ai-chat.quantumtaskai.com/">AI Chat</a>
<a href="https://ai.quantumtaskai.com/agents/">AI Marketplace</a>
</nav>
<button class="hdr-burger" id="hdr-burger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="hdr-nav">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
<path d="M3 5h16M3 11h16M3 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
</header>
<!-- Main Content -->
<main>
<!-- Hero Section -->
<section id="digital-branding-hero" class="digital-branding-hero">
<div class="hero-container">
<!-- Trust Badge -->
<div class="trust-badge">
<i class="fas fa-star"></i>
<span>Trusted Digital Brand Partner</span>
</div>
<h1 class="hero-title">
<span class="hero-title-gradient">
AI-Powered Digital Branding
</span>
<br />
<span class="hero-title-normal">
Intelligence
</span>
</h1>
<p class="hero-description">
Elevate Your Brand with Intelligent Digital Strategies. Combine proven marketing expertise with AI automation to accelerate growth, optimize performance, and deliver measurable results that matter.
</p>
<!-- CTA Buttons -->
<div class="hero-buttons">
<a href="https://form.jotform.com/252121444918050" target="_blank" class="btn-primary">
Get Started
</a>
<a href="#our-process" class="btn-secondary">
Learn More
</a>
</div>
<!-- Trust Indicators -->
<div class="trust-indicators">
<div class="trust-card">
<div class="trust-number">
250%
</div>
<div class="trust-text">
Average ROI Increase
</div>
</div>
<div class="trust-card">
<div class="trust-number">
3x
</div>
<div class="trust-text">
Faster Content Creation
</div>
</div>
<div class="trust-card">
<div class="trust-number">
24/7
</div>
<div class="trust-text">
Performance Monitoring
</div>
</div>
</div>
</div>
</section>
<!-- Why Choose Us Section -->
<section id="why-choose-us" class="why-choose-us">
<div class="section-container">
<!-- Section Header -->
<div class="section-header">
<div class="section-badge">
<i class="fas fa-bullseye"></i>
<span class="section-badge-text">Why Choose Us</span>
</div>
<h2 class="section-title">
Intelligent Digital Excellence
</h2>
<p class="section-subtitle">
Combine proven digital strategies with smart automation and data insights to accelerate your brand's growth and market impact
</p>
</div>
<div class="why-choose-grid">
<div class="choice-card">
<div class="choice-icon"><i class="fas fa-robot"></i></div>
<h3 class="choice-title">Data-Driven Brand Intelligence</h3>
<p class="choice-description">
Advanced analytics and automation for real-time audience insights, trend forecasting, and competitive intelligence. Our smart systems continuously optimize your strategy based on performance data.
</p>
</div>
<div class="choice-card">
<div class="choice-icon"><i class="fas fa-globe"></i></div>
<h3 class="choice-title">Comprehensive Digital Automation</h3>
<p class="choice-description">
End-to-end digital presence management with smart automation, content optimization, intelligent scheduling, SEO enhancement, and reputation management for maximum efficiency and impact.
</p>
</div>
<div class="choice-card">
<div class="choice-icon"><i class="fas fa-bolt"></i></div>
<h3 class="choice-title">Smart Personalization & Optimization</h3>
<p class="choice-description">
Intelligent systems that learn your brand identity, automatically adapt strategies for your market, and continuously optimize campaigns based on performance data and market insights.
</p>
</div>
</div>
</div>
</section>
<!-- Our Process Section -->
<section id="our-process" class="our-process">
<div class="section-container">
<div class="section-header">
<div class="section-badge">
<i class="fas fa-clipboard-list"></i>
<span class="section-badge-text">Our Process</span>
</div>
<h2 class="section-title">
AI-Enhanced SOSTAC+RACE Framework
</h2>
<p class="section-subtitle">
Our proven methodology supercharged with artificial intelligence, machine learning insights, and automated optimization at every stage
</p>
</div>
<div class="process-grid">
<div class="process-step-card">
<div class="step-number">1</div>
<div class="step-content">
<h3 class="step-title">AI-Powered Situation Analysis</h3>
<p class="step-description">
Deploy machine learning algorithms to analyze your brand's digital DNA, competitive intelligence automation, and predictive market positioning with real-time data insights.
</p>
</div>
</div>
<div class="process-step-card">
<div class="step-number">2</div>
<div class="step-content">
<h3 class="step-title">AI-Optimized Objectives</h3>
<p class="step-description">
Generate data-driven SMART goals using predictive analytics, automated KPI tracking, and AI-powered performance forecasting with continuous goal optimization.
</p>
</div>
</div>
<div class="process-step-card">
<div class="step-number">3</div>
<div class="step-content">
<h3 class="step-title">Intelligent Strategy Design</h3>
<p class="step-description">
AI-driven customer journey mapping, automated audience segmentation, dynamic value proposition testing, and intelligent channel selection with performance optimization.
</p>
</div>
</div>
<div class="process-step-card">
<div class="step-number">4</div>
<div class="step-content">
<h3 class="step-title">AI-Automated Tactics (RACE Framework)</h3>
<p class="step-description">
Deploy intelligent automation for Reach (AI-powered visibility), Act (automated engagement), Convert (smart sales funnels), and Engage (AI-driven loyalty programs).
</p>
</div>
</div>
<div class="process-step-card">
<div class="step-number">5</div>
<div class="step-content">
<h3 class="step-title">Automated Action Execution</h3>
<p class="step-description">
AI-powered task automation, intelligent timeline management, and automated brand asset generation with smart content creation and deployment systems.
</p>
</div>
</div>
<div class="process-step-card">
<div class="step-number">6</div>
<div class="step-content">
<h3 class="step-title">Intelligent Control & Optimization</h3>
<p class="step-description">
Real-time AI monitoring, predictive KPI analysis, automated strategy refinement, and continuous machine learning optimization with performance forecasting.
</p>
</div>
</div>
</div>
<!-- RACE Framework Details -->
<div class="race-framework">
<h3 class="race-title">RACE Framework Breakdown</h3>
<div class="race-grid">
<div class="race-card">
<div class="race-phase">
<i class="fas fa-bullhorn"></i>
<h4>Reach</h4>
</div>
<div class="race-focus">AI-Powered Visibility</div>
<div class="race-actions">Automated LLM optimization, AI-driven SEO, smart ad targeting, AI influencer matching, automated PR distribution</div>
</div>
<div class="race-card">
<div class="race-phase">
<i class="fas fa-comments"></i>
<h4>Act</h4>
</div>
<div class="race-focus">Intelligent Engagement</div>
<div class="race-actions">AI content generation, dynamic landing pages, chatbot interactions, automated social responses</div>
</div>
<div class="race-card">
<div class="race-phase">
<i class="fas fa-bullseye"></i>
<h4>Convert</h4>
</div>
<div class="race-focus">Smart Conversions</div>
<div class="race-actions">AI-optimized CTAs, predictive retargeting, automated lead scoring, intelligent funnel optimization</div>
</div>
<div class="race-card">
<div class="race-phase">
<i class="fas fa-heart"></i>
<h4>Engage</h4>
</div>
<div class="race-focus">AI-Driven Loyalty</div>
<div class="race-actions">Automated email personalization, AI community management, predictive advocacy, smart retention campaigns</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="branding-services">
<div class="section-container">
<h2 class="services-title">
AI-Powered Service Portfolio
</h2>
<p class="services-subtitle">
Advanced artificial intelligence solutions that automate, optimize, and accelerate your digital brand transformation
</p>
<div class="branding-services-grid">
<div class="service-card">
<div class="service-icon"><i class="fas fa-palette"></i></div>
<h3 class="service-title">Brand Discovery & Smart Identity Design</h3>
<p class="service-description">
Complete brand audit enhanced with AI insights, strategic identity creation, and adaptive design systems that evolve with market trends and audience data.
</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-mobile-screen"></i></div>
<h3 class="service-title">Strategic Platform Management & Automation</h3>
<p class="service-description">
Smart platform selection and optimization, automated content distribution, intelligent scheduling, and performance optimization across social media, websites, and digital touchpoints.
</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-magnifying-glass-chart"></i></div>
<h3 class="service-title">Advanced Content & Marketing Automation</h3>
<p class="service-description">
AI-enhanced content creation, automated SEO optimization, intelligent ad targeting and social media management with real-time performance adjustments for maximum impact.
</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-bullhorn"></i></div>
<h3 class="service-title">Influencer Partnerships & Digital PR</h3>
<p class="service-description">
Strategic influencer discovery and matching, automated PR campaign management, smart media outreach, and comprehensive relationship management for maximum brand amplification.
</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-bullseye"></i></div>
<h3 class="service-title">Brand Consistency & Messaging Systems</h3>
<p class="service-description">
Unified brand guidelines with automated enforcement, intelligent messaging frameworks, smart visual asset management, and consistent brand voice across all platforms.
</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-chart-line"></i></div>
<h3 class="service-title">Predictive AI Analytics & Automated Insights</h3>
<p class="service-description">
Real-time predictive analytics, automated performance optimization, AI-generated insights and recommendations, with intelligent forecasting and proactive strategy adjustments.
</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="discovery-form" class="branding-cta">
<div class="cta-container">
<h2 class="cta-title">
Accelerate Your Digital Brand Growth
</h2>
<div class="cta-grid">
<!-- CTA Content -->
<div class="cta-content">
<h3 class="cta-content-title">Ready to transform your digital brand presence?</h3>
<p class="cta-description">
Complete our Digital Brand Strategy Assessment and receive a customized growth roadmap with smart automation recommendations within 24 hours.
</p>
<!-- Features List -->
<div class="cta-features">
<div class="cta-feature">
<i class="fas fa-check"></i>
<span>Free comprehensive brand analysis</span>
</div>
<div class="cta-feature">
<i class="fas fa-check"></i>
<span>Personalized growth automation roadmap</span>
</div>
<div class="cta-feature">
<i class="fas fa-check"></i>
<span>Custom strategy proposal in 24 hours</span>
</div>
</div>
<!-- CTA Buttons -->
<div class="cta-buttons">
<a href="https://form.jotform.com/252121444918050" target="_blank" class="cta-btn secondary">
<i class="fas fa-comments"></i> Contact Us Directly
</a>
</div>
</div>
<!-- Contact Information -->
<div class="cta-info">
<h3 class="cta-info-title">Get in Touch</h3>
<!-- Contact Item -->
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-details">
<h4>Email Address</h4>
<p>
<a href="mailto:abhay@quantumtaskai.com" class="contact-email">
abhay@quantumtaskai.com
</a>
</p>
</div>
</div>
<!-- Commitment Statement -->
<div class="commitment-statement">
<p class="commitment-text">
Leading the AI Revolution in Digital Branding - Where Artificial Intelligence Meets Brand Excellence for Unprecedented Growth and Automation.
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<!-- Main Footer Content -->
<div class="footer-main">
<!-- Company Info -->
<div class="footer-company">
<div class="footer-logo">
<img src="img/logo.png" alt="Quantum Tasks AI" class="footer-logo-img">
</div>
<p class="footer-description">
Leading cybersecurity consultancy providing comprehensive security solutions and AI-powered automation.
</p>
<div class="footer-contact">
<a href="mailto:abhay@quantumtaskai.com" class="footer-contact-item">
<i class="fas fa-envelope"></i> abhay@quantumtaskai.com
</a>
<span class="footer-contact-item">
<i class="fas fa-location-dot"></i> Dubai, UAE
</span>
</div>
</div>
<!-- Navigation Sections -->
<div class="footer-nav">
<!-- Services -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Services</h4>
<div class="footer-nav-links">
<a href="index.html#services" class="footer-nav-link">Cybersecurity Consulting</a>
<a href="index.html#services" class="footer-nav-link">AI Automation</a>
<a href="digital-branding.html" class="footer-nav-link">Digital Branding</a>
<a href="freight-flow.html" class="footer-nav-link">FreightFlow</a>
<a href="index.html#services" class="footer-nav-link">Rapid Response</a>
</div>
</div>
<!-- Company -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Company</h4>
<div class="footer-nav-links">
<a href="index.html#about" class="footer-nav-link">About Us</a>
<a href="index.html#founder" class="footer-nav-link">Leadership</a>
<a href="index.html#contact" class="footer-nav-link">Contact Us</a>
<a href="https://app.quantumtaskai.com" class="footer-nav-link">AI Marketplace</a>
</div>
</div>
</div>
</div>
<!-- Bottom Section -->
<div class="footer-bottom">
<p class="footer-copyright">
© 2025 Quantum Tasks AI. All rights reserved.
</p>
<div class="footer-legal">
<a href="#privacy" class="footer-legal-link">Privacy Policy</a>
<a href="#terms" class="footer-legal-link">Terms of Service</a>
<a href="#security" class="footer-legal-link">Security</a>
</div>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="js/script.js"></script>
</body>
</html>

17
docker-compose.test.yml Normal file
View File

@ -0,0 +1,17 @@
version: '3.8'
services:
quantumtaskai-website:
build: .
container_name: quantumtaskai-website-test
restart: unless-stopped
ports:
- "8081:80" # Use port 8081 to avoid conflicts
environment:
- NODE_ENV=production
healthcheck:
test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:80"]
interval: 30s
timeout: 10s
retries: 3
start_period: 30s

34
docker-compose.yml Normal file
View File

@ -0,0 +1,34 @@
version: '3.8'
services:
quantumtaskai-website:
build: .
container_name: quantumtaskai-website
restart: unless-stopped
# ports:
# - "80:80" # Removed: Traefik handles routing
environment:
- NODE_ENV=production
# networks:
# - web # Removed: using default network
labels:
# Dokploy labels for automatic configuration
- "traefik.enable=true"
- "traefik.http.routers.quantumtaskai-website.rule=Host(`quantumtaskai.com`) || Host(`www.quantumtaskai.com`)"
- "traefik.http.routers.quantumtaskai-website.tls=true"
- "traefik.http.routers.quantumtaskai-website.tls.certresolver=letsencrypt"
- "traefik.http.services.quantumtaskai-website.loadbalancer.server.port=80"
# Optional: redirect www to non-www
- "traefik.http.middlewares.www-redirect.redirectregex.regex=^https://www\\.quantumtaskai\\.com/(.*)"
- "traefik.http.middlewares.www-redirect.redirectregex.replacement=https://quantumtaskai.com/$${1}"
- "traefik.http.routers.quantumtaskai-website.middlewares=www-redirect"
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:80"]
interval: 30s
timeout: 10s
retries: 3
start_period: 30s
# networks:
# web:
# external: true

66
dokploy.json Normal file
View File

@ -0,0 +1,66 @@
{
"name": "quantumtaskai-website",
"type": "compose",
"description": "Quantum Tasks AI static website - AI & Cybersecurity Solutions",
"version": "1.0.0",
"compose": {
"file": "docker-compose.yml",
"context": "."
},
"domains": [
{
"host": "quantumtaskai.com",
"https": true,
"certificateType": "letsencrypt"
},
{
"host": "www.quantumtaskai.com",
"https": true,
"certificateType": "letsencrypt",
"redirect": "https://quantumtaskai.com"
}
],
"environment": {
"NODE_ENV": "production"
},
"resources": {
"memory": "256M",
"cpu": "0.5"
},
"healthcheck": {
"enabled": true,
"path": "/",
"interval": 30,
"timeout": 10,
"retries": 3
},
"backup": {
"enabled": false
},
"monitoring": {
"enabled": true,
"metrics": ["cpu", "memory", "network"]
},
"security": {
"firewall": {
"enabled": true,
"rules": [
{
"port": 80,
"protocol": "tcp",
"source": "0.0.0.0/0"
},
{
"port": 443,
"protocol": "tcp",
"source": "0.0.0.0/0"
}
]
}
},
"deployment": {
"strategy": "rolling",
"maxUnavailable": 0,
"maxSurge": 1
}
}

31
dokploy.test.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "quantumtaskai-website-test",
"type": "compose",
"description": "Quantum Tasks AI website - Testing without domain",
"version": "1.0.0",
"compose": {
"file": "docker-compose.test.yml",
"context": "."
},
"environment": {
"NODE_ENV": "production"
},
"resources": {
"memory": "256M",
"cpu": "0.5"
},
"healthcheck": {
"enabled": true,
"path": "/",
"interval": 30,
"timeout": 10,
"retries": 3
},
"ports": [
{
"containerPort": 80,
"hostPort": 8080,
"protocol": "tcp"
}
]
}

35
freight-flow.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FreightFlow - Quantum Tasks AI</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
.fullscreen-iframe {
width: 100vw;
height: 100vh;
border: none;
display: block;
}
</style>
</head>
<body>
<iframe
src="https://freight-flow-0eb6e2d9.base44.app/"
class="fullscreen-iframe"
title="FreightFlow Application"
allow="geolocation; microphone; camera; midi; encrypted-media; fullscreen; payment">
</iframe>
</body>
</html>

63
img/FAVICON-SETUP.md Normal file
View File

@ -0,0 +1,63 @@
# Favicon Setup Instructions
## Current Status ✅
- ✅ **logo.png** - Main logo (already copied)
- ✅ **og-image.png** - Social media preview (already copied)
- ❌ **Favicons** - Need to be generated
## Quick Favicon Generation
### Option 1: Online Generator (Recommended)
1. Go to [favicon.io/favicon-converter](https://favicon.io/favicon-converter/)
2. Upload the `logo.png` file
3. Download the generated favicon package
4. Extract and copy these files to this directory:
- `favicon.ico`
- `apple-touch-icon.png`
- `favicon-32x32.png`
- `favicon-16x16.png`
### Option 2: Use Real Favicon Generator
1. Go to [realfavicongenerator.net](https://realfavicongenerator.net/)
2. Upload the `logo.png` file
3. Customize settings if needed
4. Download and extract files to this directory
### Option 3: Simple Favicon (Quick Fix)
If you want to deploy immediately without custom favicons:
1. Find any `.ico` file on your computer
2. Rename it to `favicon.ico`
3. Copy it to this directory
## Required Files
After generation, you should have:
```
static-website/img/
├── logo.png ✅
├── og-image.png ✅
├── favicon.ico ⚠️
├── apple-touch-icon.png ⚠️
├── favicon-32x32.png ⚠️
└── favicon-16x16.png ⚠️
```
## Update HTML (if needed)
The HTML files are already configured to use these paths:
- `favicon.ico`
- `apple-touch-icon.png`
- `favicon-32x32.png`
- `favicon-16x16.png`
No changes needed in HTML once files are added.
## Deploy Without Favicons (Optional)
If you want to deploy immediately:
1. Remove favicon links from HTML `<head>` sections
2. Deploy the site
3. Add favicons later and redeploy
The site will work perfectly without favicons (just won't show custom icons in browser tabs).

1
img/authors/team.jpg Normal file
View File

@ -0,0 +1 @@
This is a placeholder for the team avatar image. Please replace this file with your actual team image.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

BIN
img/og-image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

591
index.html Normal file
View File

@ -0,0 +1,591 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quantum Tasks AI - AI & Task Automation Solutions</title>
<!-- SEO Meta Tags -->
<meta name="description" content="Quantum Tasks AI - Advanced AI platform for automation and intelligent task management. Access powerful AI agents for your business needs.">
<meta name="keywords" content="AI, artificial intelligence, automation, task management, AI agents, quantum computing">
<meta name="author" content="Quantum Tasks AI">
<!-- Open Graph Meta Tags for Rich Link Previews -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Quantum Tasks AI">
<meta property="og:title" content="Quantum Tasks AI - AI & Task Automation Solutions">
<meta property="og:description" content="Advanced AI agent marketplace for automation, analysis, and productivity. Access powerful AI tools for business and personal use.">
<meta property="og:url" content="https://quantumtaskai.com">
<meta property="og:image" content="https://quantumtaskai.com/img/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Quantum Tasks AI - AI Agent Marketplace">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@quantumtaskai">
<meta name="twitter:title" content="Quantum Tasks AI - AI & Task Automation Solutions">
<meta name="twitter:description" content="Advanced AI agent marketplace for automation, analysis, and productivity. Access powerful AI tools for business and personal use.">
<meta name="twitter:image" content="https://quantumtaskai.com/img/og-image.png">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<!-- Font Loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"></noscript>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
<!-- Styles -->
<link rel="stylesheet" href="css/style.css">
<!-- Icon Size Adjustments -->
<style>
.service-icon i, .choice-icon i { font-size: 2.5rem; }
.client-icon i { font-size: 2rem; }
.achievement-icon i { font-size: 1.75rem; }
.contact-icon i { font-size: 1.25rem; }
.trust-badge i { font-size: 1rem; }
.section-badge i { font-size: 1.1rem; }
.decorative-corner i { font-size: 2.5rem; }
.main-visual-icon i { font-size: 4rem; }
.floating-element i { font-size: 2rem; }
.company-badge i { font-size: 1rem; margin-right: 0.5rem; }
.footer-contact i { font-size: 0.9rem; margin-right: 0.35rem; }
.founder-avatar i { font-size: 2.5rem; }
</style>
</head>
<body>
<!-- Header -->
<header class="hdr">
<div class="hdr-inner">
<a href="index.html" class="hdr-logo">
<img src="img/logo.png" alt="Quantum Tasks AI">
</a>
<nav class="hdr-nav" id="hdr-nav" aria-label="Main navigation">
<a href="index.html" class="active">Home</a>
<a href="digital-branding.html">AI Digital Branding</a>
<a href="https://blog.quantumtaskai.com/">Blog</a>
<a href="https://ai-chat.quantumtaskai.com/">AI Chat</a>
<a href="https://ai.quantumtaskai.com/agents/">AI Marketplace</a>
</nav>
<button class="hdr-burger" id="hdr-burger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="hdr-nav">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
<path d="M3 5h16M3 11h16M3 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
</header>
<!-- Main Content -->
<main>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-container">
<!-- Trust Badge -->
<div class="trust-badge">
<i class="fas fa-star"></i>
<span>Trusted by Industry Leaders</span>
</div>
<h1 class="hero-title">
<span class="hero-title-gradient">
AI & Cybersecurity
</span>
<br />
<span class="hero-title-normal">
Solutions
</span>
</h1>
<p class="hero-description">
Secure your digital future with state-of-the-art AI solutions and expert cybersecurity strategies tailored for your business needs.
</p>
<!-- CTA Buttons -->
<div class="hero-buttons">
<a href="https://app.quantumtaskai.com/register" class="btn-primary">
Get Protected Now
</a>
<a href="https://app.quantumtaskai.com" class="btn-secondary">
Explore AI Hub
</a>
</div>
<!-- Trust Indicators -->
<div class="trust-indicators">
<div class="trust-card">
<div class="trust-number">
35+
</div>
<div class="trust-text">
Years Experience
</div>
</div>
<div class="trust-card">
<div class="trust-number">
24/7
</div>
<div class="trust-text">
Rapid Response
</div>
</div>
<div class="trust-card">
<div class="trust-number">
100%
</div>
<div class="trust-text">
Secure Solutions
</div>
</div>
</div>
</div>
</section>
<!-- Company Profile Section -->
<section id="about" class="company-profile">
<div class="company-container">
<!-- Section Header -->
<div class="section-header">
<div class="section-badge">
<i class="fas fa-building"></i>
<span class="section-badge-text">About Quantum Tasks AI</span>
</div>
<h2 class="section-title">
Your Trusted Digital Guardian
</h2>
<p class="section-subtitle">
Pioneering the future of Automation & Cybersecurity with AI-powered solutions
</p>
</div>
<div class="company-grid">
<!-- Content Side -->
<div>
<div class="company-content-card">
<!-- Decorative corner -->
<div class="decorative-corner">
<i class="fas fa-shield-halved"></i>
</div>
<h3 class="company-content-title">
Defending Digital Frontiers
</h3>
<p class="company-content-text">
At Quantum Tasks AI, we provide <strong>state-of-the-art AI & Cybersecurity solutions</strong> tailored to safeguard your business. From advanced AI Agents to robust defense strategies, we empower you to navigate the digital world with confidence.
</p>
<!-- Enhanced badges -->
<div class="company-badges">
<div class="company-badge company-badge-primary">
<i class="fas fa-calendar-check"></i>
35+ Years Experience
</div>
<div class="company-badge company-badge-purple">
<i class="fas fa-trophy"></i>
Top Certifications
</div>
</div>
<div class="company-badge company-badge-orange">
<i class="fas fa-award"></i>
Lean Six Sigma Black Belt
</div>
</div>
</div>
<!-- Visual Side -->
<div class="company-visual">
<!-- Main visual container -->
<div class="main-visual">
<!-- Main icon -->
<div class="main-visual-icon">
<i class="fas fa-shield-halved"></i>
</div>
</div>
<!-- Floating elements around the main visual -->
<div class="floating-element floating-element-1">
<i class="fas fa-lock"></i>
</div>
<div class="floating-element floating-element-2">
<i class="fas fa-robot"></i>
</div>
</div>
</div>
<!-- Bottom achievement strip -->
<div class="achievement-strip">
<div class="achievement-item">
<div class="achievement-icon"><i class="fas fa-bullseye"></i></div>
<div class="achievement-title">Mission Critical</div>
<div class="achievement-text">Zero Compromise</div>
</div>
<div class="achievement-item">
<div class="achievement-icon"><i class="fas fa-bolt"></i></div>
<div class="achievement-title">Rapid Response</div>
<div class="achievement-text">24/7 Protection</div>
</div>
<div class="achievement-item">
<div class="achievement-icon"><i class="fas fa-flask"></i></div>
<div class="achievement-title">Innovation</div>
<div class="achievement-text">Cutting Edge Tech</div>
</div>
<div class="achievement-item">
<div class="achievement-icon"><i class="fas fa-handshake"></i></div>
<div class="achievement-title">Trusted Partner</div>
<div class="achievement-text">Industry Leaders</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services">
<div class="services-container">
<h2 class="services-title">
Our Services
</h2>
<p class="services-subtitle">
Tailored strategies for your business
</p>
<div class="services-grid">
<div class="service-card">
<div class="service-icon"><i class="fas fa-shield-halved"></i></div>
<h3 class="service-title">Cybersecurity Consultation</h3>
<p class="service-description">
Tailored strategies, advanced threat detection, and comprehensive security frameworks to protect your digital assets and business operations.
</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-robot"></i></div>
<h3 class="service-title">AI Based Automation</h3>
<p class="service-description">
Empower your Business with AI. Strategic AI adoption, machine learning solutions, and intelligent automation to transform your processes.
</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-bolt"></i></div>
<h3 class="service-title">Rapid Response Solutions</h3>
<p class="service-description">
Rapid response to minimize damage. Emergency incident response and real-time threat mitigation to protect your business.
</p>
</div>
</div>
</div>
</section>
<!-- Clients Section -->
<section class="clients">
<div class="clients-container">
<h2 class="clients-title">
Our Clients
</h2>
<div class="clients-grid">
<div class="client-card">
<div class="client-icon"><i class="fas fa-industry"></i></div>
<h3 class="client-name">MTSV Foods Industries Pvt Ltd</h3>
<p class="client-industry">Food & Beverage Industry</p>
</div>
<div class="client-card">
<div class="client-icon"><i class="fas fa-gears"></i></div>
<h3 class="client-name">Apple Tree Industries</h3>
<p class="client-industry">Manufacturing & Processing</p>
</div>
<div class="client-card">
<div class="client-icon"><i class="fas fa-laptop-code"></i></div>
<h3 class="client-name">TechStart Solutions</h3>
<p class="client-industry">Technology Consulting</p>
</div>
<div class="client-card">
<div class="client-icon"><i class="fas fa-truck-fast"></i></div>
<h3 class="client-name">Global Logistics Corp</h3>
<p class="client-industry">Supply Chain Management</p>
</div>
</div>
</div>
</section>
<!-- Founder Section -->
<section class="founder">
<div class="founder-container">
<h2 class="founder-title">
Our Founders
</h2>
<!-- J P Goenka -->
<div class="founder-grid">
<div class="founder-card-container">
<div class="founder-card">
<div class="founder-avatar">
<i class="fas fa-user-tie"></i>
</div>
<h3 class="founder-name">J P Goenka</h3>
<p class="founder-role">
Founder & Business Development Leader
</p>
<div class="founder-badges">
<div class="founder-badge">
International Trading Expert
</div>
<div class="founder-badge">
Dubai Business Leader
</div>
<div class="founder-badge">
Global Perspective
</div>
</div>
</div>
</div>
<div class="founder-content">
<p class="founder-text">
J P Goenka
With over 45 years of entrepreneurial and leadership experience, J P Goenka has built a distinguished career across a diverse range of industries, including food processing, printed circuit boards, plastics manufacturing, beans splitting units, and international trade (import & export).
</p>
<p class="founder-text">
Mr. Goenka brings deep global business insight, supported by an extensive international network and a strong understanding of various markets, products, and cultural dynamics. Recognizing the transformative impact of emerging technologies, he co-founded Quantum Task AI LLC FZ in partnership with Mr. Abhay Chauhan, focusing on advancing solutions in Artificial Intelligence and Cybersecurity—two key pillars shaping the future of global business.
</p>
</div>
</div>
<!-- Abhay Pal Chauhan -->
<div class="founder-grid" style="margin-top: 3rem;">
<div class="founder-card-container">
<div class="founder-card">
<div class="founder-avatar">
<i class="fas fa-user-tie"></i>
</div>
<h3 class="founder-name">Abhay Pal Chauhan</h3>
<p class="founder-role">
Founder & Principal Consultant
</p>
<div class="founder-badges">
<div class="founder-badge">
35+ Years Experience
</div>
<div class="founder-badge">
Cybersecurity Expert
</div>
<div class="founder-badge">
Six Sigma Black Belt
</div>
</div>
</div>
</div>
<div class="founder-content">
<p class="founder-text">
Our Founder leverages over <strong>35 years of expertise</strong> in cybersecurity and process automation and optimization, backed by top certifications in Cybersecurity and <strong>Black Belt in Lean Six Sigma</strong>.
</p>
<p class="founder-text">
His unique blend of technical knowledge and operational excellence ensures <strong>tailored, secure, and efficient solutions</strong> for our clients, driving business resilience and maximizing value in every engagement.
</p>
<div class="founder-quote">
<p class="founder-quote-text">
"Delivering top-tier solutions that combine cutting-edge technology with proven operational methodologies to secure and optimize your business operations."
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="contact-container">
<h2 class="contact-title">
Get In Touch
</h2>
<div class="contact-grid">
<!-- Contact Form -->
<form class="contact-form" method="post" action="#" id="contactForm">
<h3 class="form-title">Send us a Message</h3>
<!-- Form Messages -->
<div id="form-messages" class="form-messages" style="display: none;"></div>
<div class="form-group">
<label for="name" class="form-label">Full Name *</label>
<input
type="text"
id="name"
name="name"
required
class="form-input"
maxlength="100"
pattern="[a-zA-Z\s\-\.']+"
title="Please enter a valid name using only letters, spaces, hyphens, dots, and apostrophes"
/>
<div class="field-error" id="name-error"></div>
</div>
<div class="form-group">
<label for="email" class="form-label">Email Address *</label>
<input
type="email"
id="email"
name="email"
required
class="form-input"
maxlength="254"
/>
<div class="field-error" id="email-error"></div>
</div>
<div class="form-group">
<label for="company" class="form-label">Company</label>
<input
type="text"
id="company"
name="company"
class="form-input"
maxlength="100"
/>
<div class="field-error" id="company-error"></div>
</div>
<div class="form-group">
<label for="message" class="form-label">Message *</label>
<textarea
id="message"
name="message"
required
class="form-textarea"
maxlength="1000"
minlength="10"
placeholder="Please describe your inquiry (minimum 10 characters)..."
></textarea>
<div class="char-counter">
<span id="message-count">0</span>/1000 characters
</div>
<div class="field-error" id="message-error"></div>
</div>
<button type="submit" class="form-submit" id="submitBtn">
<span class="btn-text">Send Message</span>
<span class="btn-loading" style="display: none;">
<span class="spinner"></span> Sending...
</span>
</button>
</form>
<!-- Contact Information -->
<div class="contact-info">
<h3 class="contact-info-title">Contact Information</h3>
<!-- Mailing Address -->
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-location-dot"></i>
</div>
<div class="contact-details">
<h4>Mailing Address</h4>
<p>
Meydan Grandstand, 6th floor<br />
Meydan Road, Nad Al Sheba<br />
Dubai, U.A.E.
</p>
</div>
</div>
<!-- Email Address -->
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-details">
<h4>Email Address</h4>
<p>
<a href="mailto:abhay@quantumtaskai.com" class="contact-email">
abhay@quantumtaskai.com
</a>
</p>
</div>
</div>
<!-- Commitment Statement -->
<div class="commitment-statement">
<p class="commitment-text">
We are committed to deliver top-tier AI & Cybersecurity solutions for businesses of all sizes.
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<!-- Main Footer Content -->
<div class="footer-main">
<!-- Company Info -->
<div class="footer-company">
<div class="footer-logo">
<img src="img/logo.png" alt="Quantum Tasks AI" class="footer-logo-img">
</div>
<p class="footer-description">
Leading cybersecurity consultancy providing comprehensive security solutions and AI-powered automation.
</p>
<div class="footer-contact">
<a href="mailto:abhay@quantumtaskai.com" class="footer-contact-item">
<i class="fas fa-envelope"></i> abhay@quantumtaskai.com
</a>
<span class="footer-contact-item">
<i class="fas fa-location-dot"></i> Dubai, UAE
</span>
</div>
</div>
<!-- Navigation Sections -->
<div class="footer-nav">
<!-- Services -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Services</h4>
<div class="footer-nav-links">
<a href="#services" class="footer-nav-link">Cybersecurity Consulting</a>
<a href="#services" class="footer-nav-link">AI Automation</a>
<a href="digital-branding.html" class="footer-nav-link">Digital Branding</a>
<a href="freight-flow.html" class="footer-nav-link">FreightFlow</a>
<a href="#services" class="footer-nav-link">Rapid Response</a>
</div>
</div>
<!-- Company -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Company</h4>
<div class="footer-nav-links">
<a href="#about" class="footer-nav-link">About Us</a>
<a href="#founder" class="footer-nav-link">Leadership</a>
<a href="#contact" class="footer-nav-link">Contact Us</a>
<a href="https://app.quantumtaskai.com" class="footer-nav-link">AI Marketplace</a>
</div>
</div>
</div>
</div>
<!-- Bottom Section -->
<div class="footer-bottom">
<p class="footer-copyright">
© 2025 Quantum Tasks AI. All rights reserved.
</p>
<div class="footer-legal">
<a href="#privacy" class="footer-legal-link">Privacy Policy</a>
<a href="#terms" class="footer-legal-link">Terms of Service</a>
<a href="#security" class="footer-legal-link">Security</a>
</div>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="js/script.js"></script>
</body>
</html>

908
js/script.js Normal file
View File

@ -0,0 +1,908 @@
/* ================================================================
Quantum Tasks AI - Static Website JavaScript
================================================================ */
// Mobile navigation
(function() {
var btn = document.getElementById('hdr-burger');
var nav = document.getElementById('hdr-nav');
if (!btn || !nav) return;
btn.addEventListener('click', function() {
var open = nav.classList.toggle('open');
btn.setAttribute('aria-expanded', open);
});
document.addEventListener('click', function(e) {
if (!nav.contains(e.target) && !btn.contains(e.target)) {
nav.classList.remove('open');
btn.setAttribute('aria-expanded', 'false');
}
});
nav.querySelectorAll('a').forEach(function(a) {
a.addEventListener('click', function() {
nav.classList.remove('open');
btn.setAttribute('aria-expanded', 'false');
});
});
})();
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// ================================================================
// CONTACT FORM HANDLER
// ================================================================
class ContactFormHandler {
constructor() {
this.form = document.getElementById('contactForm');
this.submitBtn = document.getElementById('submitBtn');
this.messagesDiv = document.getElementById('form-messages');
this.messageTextarea = document.getElementById('message');
this.messageCounter = document.getElementById('message-count');
if (this.form) {
this.init();
}
}
init() {
this.setupEventListeners();
if (this.messageTextarea && this.messageCounter) {
this.updateCharCounter();
}
}
setupEventListeners() {
this.form.addEventListener('submit', this.handleSubmit.bind(this));
if (this.messageTextarea) {
this.messageTextarea.addEventListener('input', this.updateCharCounter.bind(this));
}
// Real-time validation
['name', 'email', 'company', 'subject', 'message'].forEach(fieldName => {
const field = document.getElementById(fieldName);
if (field) {
field.addEventListener('blur', () => this.validateField(fieldName));
field.addEventListener('input', () => this.clearFieldError(fieldName));
}
});
}
updateCharCounter() {
if (!this.messageTextarea || !this.messageCounter) return;
const length = this.messageTextarea.value.length;
this.messageCounter.textContent = length;
const counter = this.messageCounter.parentElement;
counter.classList.remove('warning', 'error');
if (length > 900) {
counter.classList.add('error');
} else if (length > 800) {
counter.classList.add('warning');
}
}
validateField(fieldName) {
const field = document.getElementById(fieldName);
const errorDiv = document.getElementById(`${fieldName}-error`);
if (!field || !errorDiv) return true;
const value = field.value.trim();
let isValid = true;
let errorMessage = '';
switch(fieldName) {
case 'name':
if (value.length < 2) {
errorMessage = 'Name must be at least 2 characters long';
isValid = false;
} else if (value.length > 100) {
errorMessage = 'Name must be less than 100 characters';
isValid = false;
} else if (!/^[a-zA-Z\s\-\.']+$/.test(value)) {
errorMessage = 'Name contains invalid characters';
isValid = false;
}
break;
case 'email':
if (!value || value.length > 254) {
errorMessage = 'Please provide a valid email address';
isValid = false;
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
errorMessage = 'Please enter a valid email format';
isValid = false;
}
break;
case 'company':
if (value && value.length > 100) {
errorMessage = 'Company name must be less than 100 characters';
isValid = false;
}
break;
case 'subject':
if (!value) {
errorMessage = 'Please select a subject';
isValid = false;
}
break;
case 'message':
if (value.length < 10) {
errorMessage = 'Message must be at least 10 characters long';
isValid = false;
} else if (value.length > 1000) {
errorMessage = 'Message must be less than 1000 characters';
isValid = false;
}
break;
}
if (isValid) {
field.classList.remove('error');
errorDiv.textContent = '';
} else {
field.classList.add('error');
errorDiv.textContent = errorMessage;
}
return isValid;
}
clearFieldError(fieldName) {
const field = document.getElementById(fieldName);
const errorDiv = document.getElementById(`${fieldName}-error`);
if (field) field.classList.remove('error');
if (errorDiv) errorDiv.textContent = '';
}
validateForm() {
const fields = ['name', 'email', 'subject', 'message'];
let isValid = true;
fields.forEach(fieldName => {
if (!this.validateField(fieldName)) {
isValid = false;
}
});
// Validate company if provided
const company = document.getElementById('company');
if (company && company.value.trim() && !this.validateField('company')) {
isValid = false;
}
return isValid;
}
showMessage(message, type = 'success') {
if (!this.messagesDiv) return;
this.messagesDiv.className = `form-messages ${type}`;
this.messagesDiv.textContent = message;
this.messagesDiv.style.display = 'block';
// Scroll to message
this.messagesDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
// Auto-hide success messages after 10 seconds
if (type === 'success') {
setTimeout(() => {
this.messagesDiv.style.display = 'none';
}, 10000);
}
}
setLoading(loading) {
if (!this.submitBtn) return;
const btnText = this.submitBtn.querySelector('.btn-text');
const btnLoading = this.submitBtn.querySelector('.btn-loading');
if (loading) {
if (btnText) btnText.style.display = 'none';
if (btnLoading) btnLoading.style.display = 'flex';
this.submitBtn.disabled = true;
} else {
if (btnText) btnText.style.display = 'inline';
if (btnLoading) btnLoading.style.display = 'none';
this.submitBtn.disabled = false;
}
}
async handleSubmit(e) {
e.preventDefault();
// Clear previous messages
if (this.messagesDiv) {
this.messagesDiv.style.display = 'none';
}
// Validate form
if (!this.validateForm()) {
this.showMessage('Please correct the errors above.', 'error');
return;
}
this.setLoading(true);
// Since this is a static site, we'll just show a success message
// and reset the form (no actual form submission to backend)
setTimeout(() => {
this.showMessage(
'Thank you for your message! We have received your inquiry and will get back to you within 24 hours. ' +
'For urgent matters, please email us directly at abhay@quantumtaskai.com',
'success'
);
this.form.reset();
if (this.messageTextarea && this.messageCounter) {
this.updateCharCounter();
}
// Clear any field errors
['name', 'email', 'company', 'subject', 'message'].forEach(fieldName => {
this.clearFieldError(fieldName);
});
this.setLoading(false);
}, 1500);
}
}
// ================================================================
// DIGITAL BRANDING PAGE INTERACTIONS
// ================================================================
class DigitalBrandingManager {
constructor() {
this.processCards = document.querySelectorAll('.process-step-card');
this.raceCards = document.querySelectorAll('.race-card');
this.serviceCards = document.querySelectorAll('.service-card');
this.ctaButtons = document.querySelectorAll('.cta-btn');
if (this.processCards.length > 0 || this.raceCards.length > 0 || this.serviceCards.length > 0) {
this.init();
}
}
init() {
this.setupCardInteractions();
this.setupButtonHovers();
this.addScrollAnimations();
}
setupCardInteractions() {
// Process step cards
this.processCards.forEach(card => {
card.addEventListener('mouseenter', () => {
this.highlightCard(card);
});
card.addEventListener('mouseleave', () => {
this.removeHighlight(card);
});
});
// RACE framework cards
this.raceCards.forEach(card => {
card.addEventListener('mouseenter', () => {
this.highlightCard(card);
});
card.addEventListener('mouseleave', () => {
this.removeHighlight(card);
});
});
// Service cards
this.serviceCards.forEach(card => {
card.addEventListener('mouseenter', () => {
this.highlightCard(card);
});
card.addEventListener('mouseleave', () => {
this.removeHighlight(card);
});
});
}
highlightCard(card) {
card.style.transform = 'translateY(-4px)';
card.style.boxShadow = '0 20px 40px rgba(30, 64, 175, 0.15)';
}
removeHighlight(card) {
card.style.transform = 'translateY(0)';
card.style.boxShadow = '';
}
setupButtonHovers() {
this.ctaButtons.forEach(button => {
button.addEventListener('mouseenter', () => {
button.style.transform = 'translateY(-2px)';
});
button.addEventListener('mouseleave', () => {
button.style.transform = '';
});
button.addEventListener('click', (e) => {
if (!button.classList.contains('loading')) {
button.classList.add('loading');
const originalText = button.textContent;
button.textContent = '⏳ Loading...';
setTimeout(() => {
if (button.classList.contains('loading')) {
button.classList.remove('loading');
button.textContent = originalText;
}
}, 2000);
}
});
});
}
addScrollAnimations() {
if ('IntersectionObserver' in window) {
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe cards for scroll animations
[...this.processCards, ...this.raceCards, ...this.serviceCards].forEach((card, index) => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
observer.observe(card);
});
// Observe sections
document.querySelectorAll('.section-header, .cta-content').forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(20px)';
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(section);
});
}
}
}
// ================================================================
// GENERAL ANIMATIONS AND INTERACTIONS
// ================================================================
class GeneralInteractions {
constructor() {
this.init();
}
init() {
this.setupScrollAnimations();
this.setupCardHovers();
this.setupButtonEffects();
}
setupScrollAnimations() {
if ('IntersectionObserver' in window) {
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-in');
}
});
}, observerOptions);
// Observe elements for animations
document.querySelectorAll('.service-card, .client-card, .achievement-item, .trust-card').forEach(card => {
observer.observe(card);
});
}
}
setupCardHovers() {
// Add hover effects to all interactive cards
document.querySelectorAll('.service-card, .client-card, .choice-card, .quick-access-card').forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-4px)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)';
});
});
}
setupButtonEffects() {
// Add click effects to buttons
document.querySelectorAll('.btn-primary, .btn-secondary').forEach(button => {
button.addEventListener('click', (e) => {
// Create ripple effect
const ripple = document.createElement('span');
const rect = button.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
ripple.classList.add('ripple');
button.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 600);
});
});
}
}
// ================================================================
// INITIALIZATION
// ================================================================
document.addEventListener('DOMContentLoaded', function() {
// Initialize contact form handler
new ContactFormHandler();
// Initialize digital branding interactions
new DigitalBrandingManager();
// Initialize general interactions
new GeneralInteractions();
// Add loading animation to external links
document.querySelectorAll('a[href^="http"]:not([href*="quantumtaskai.com"])').forEach(link => {
link.addEventListener('click', function() {
const originalText = this.textContent;
this.style.opacity = '0.7';
this.textContent = '⏳ Loading...';
setTimeout(() => {
this.style.opacity = '1';
this.textContent = originalText;
}, 2000);
});
});
// Smooth loading for app links
document.querySelectorAll('a[href*="app.quantumtaskai.com"]').forEach(link => {
link.addEventListener('click', function(e) {
// Add loading state
this.style.opacity = '0.8';
const originalText = this.textContent;
this.textContent = '🚀 Launching...';
// Reset after a short delay if user comes back
setTimeout(() => {
this.style.opacity = '1';
this.textContent = originalText;
}, 3000);
});
});
});
// Add CSS for ripple effect
const rippleCSS = `
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
transform: scale(0);
animation: ripple-animation 0.6s ease-out;
pointer-events: none;
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}
.animate-in {
animation: slideUp 0.6s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
`;
// Inject CSS
const style = document.createElement('style');
style.textContent = rippleCSS;
document.head.appendChild(style);
// ================================================================
// BLOG FUNCTIONALITY
// ================================================================
let blogData = null;
let filteredPosts = [];
let currentCategory = 'all';
let searchQuery = '';
// Load blog data
async function loadBlogData() {
try {
// Check if we're on a blog post page (in /blog/ directory)
const isInBlogDirectory = window.location.pathname.includes('/blog/');
const dataPath = isInBlogDirectory ? '../blog-data.json' : 'blog-data.json';
const response = await fetch(dataPath);
blogData = await response.json();
return blogData;
} catch (error) {
console.error('Failed to load blog data:', error);
return null;
}
}
// Load and display blog posts
async function loadBlogPosts() {
const loadingElement = document.getElementById('blogLoading');
const gridElement = document.getElementById('blogGrid');
const emptyElement = document.getElementById('blogEmpty');
if (!loadingElement || !gridElement) return;
// Show skeleton loading state
loadingElement.innerHTML = `
<div class="skeleton">
<div class="skeleton-item">
<div class="skeleton-line sm"></div>
<div class="skeleton-line lg"></div>
<div class="skeleton-line md"></div>
</div>
<div class="skeleton-item">
<div class="skeleton-line sm"></div>
<div class="skeleton-line lg"></div>
<div class="skeleton-line md"></div>
</div>
</div>`;
loadingElement.style.display = 'block';
gridElement.style.display = 'none';
if (emptyElement) emptyElement.style.display = 'none';
// Load data if not already loaded
if (!blogData) {
blogData = await loadBlogData();
if (!blogData) {
loadingElement.innerHTML = '<p>Failed to load blog posts.</p>';
return;
}
}
// Filter and display posts
filterAndDisplayPosts();
}
// Filter posts based on category and search
function filterAndDisplayPosts() {
if (!blogData) return;
let posts = blogData.posts;
// Filter by category
if (currentCategory !== 'all') {
posts = posts.filter(post => post.category === currentCategory);
}
// Filter by search query
if (searchQuery) {
const query = searchQuery.toLowerCase();
posts = posts.filter(post =>
post.title.toLowerCase().includes(query) ||
post.excerpt.toLowerCase().includes(query) ||
post.tags.some(tag => tag.toLowerCase().includes(query)) ||
post.content.toLowerCase().includes(query)
);
}
filteredPosts = posts;
displayBlogPosts(posts);
}
// Display blog posts in minimal list format
function displayBlogPosts(posts) {
const loadingElement = document.getElementById('blogLoading');
const gridElement = document.getElementById('blogGrid');
const emptyElement = document.getElementById('blogEmpty');
if (!gridElement) return;
// Hide loading
if (loadingElement) loadingElement.style.display = 'none';
if (posts.length === 0) {
gridElement.style.display = 'none';
if (emptyElement) emptyElement.style.display = 'block';
return;
}
// Show grid and hide empty state
gridElement.style.display = 'block';
if (emptyElement) emptyElement.style.display = 'none';
// Generate HTML for posts in minimal format
gridElement.innerHTML = posts.map((post, index) => {
const categoryInfo = blogData.categories[post.category] || { name: post.category };
const isFeatured = post.featured && index < 2;
return `
<article class="article-item ${isFeatured ? 'featured' : ''}" data-category="${post.category}">
<div class="article-meta">
<span class="article-category">${categoryInfo.name}</span>
<span>${formatDate(post.publishDate)}</span>
<span>${post.readTime}</span>
</div>
<h2 class="article-title">
<a href="blog/${post.slug}.html" class="article-link" style="color: inherit; text-decoration: none;">
${post.title}
</a>
</h2>
<p class="article-excerpt">${post.excerpt}</p>
<div class="article-footer">
<span class="article-author">${post.author}</span>
<a href="blog/${post.slug}.html" class="article-link">Read article </a>
</div>
</article>
`;
}).join('');
}
// Format date for display
function formatDate(dateString) {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(dateString).toLocaleDateString('en-US', options);
}
// Filter by category
function filterCategory(category) {
currentCategory = category;
// Update active category button
document.querySelectorAll('.category-link').forEach(btn => {
btn.classList.remove('active');
});
event.target.classList.add('active');
// Filter and display posts
filterAndDisplayPosts();
}
// Search functionality
function searchBlog() {
const searchInput = document.getElementById('blogSearch');
if (!searchInput) return;
searchQuery = searchInput.value.trim();
filterAndDisplayPosts();
}
// Setup search input listener
function setupBlogSearch() {
const searchInput = document.getElementById('blogSearch');
if (!searchInput) return;
// Live search with debounce (no separate button needed)
let searchTimeout;
searchInput.addEventListener('input', function() {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
searchQuery = this.value.trim();
filterAndDisplayPosts();
}, 300);
});
}
// Newsletter form handler
function setupNewsletterForm() {
const forms = document.querySelectorAll('#newsletterForm');
forms.forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
const emailInput = this.querySelector('input[type="email"]');
const submitBtn = this.querySelector('button[type="submit"]');
if (!emailInput || !submitBtn) return;
const email = emailInput.value.trim();
if (!email) {
alert('Please enter your email address.');
return;
}
// Simulate newsletter signup
const originalText = submitBtn.textContent;
submitBtn.textContent = 'Subscribing...';
submitBtn.disabled = true;
setTimeout(() => {
submitBtn.textContent = '✓ Subscribed!';
emailInput.value = '';
setTimeout(() => {
submitBtn.textContent = originalText;
submitBtn.disabled = false;
}, 2000);
}, 1000);
});
});
}
// Load related articles for blog post pages
async function loadRelatedArticles() {
const relatedContainer = document.getElementById('relatedArticles');
if (!relatedContainer) return;
// Load blog data if not already loaded
if (!blogData) {
blogData = await loadBlogData();
if (!blogData) return;
}
// Get random 2 posts (excluding current post if applicable)
const currentSlug = window.location.pathname.split('/').pop().replace('.html', '');
const availablePosts = blogData.posts.filter(post => post.slug !== currentSlug);
const relatedPosts = shuffleArray(availablePosts).slice(0, 2);
// Display related posts
relatedContainer.innerHTML = relatedPosts.map(post => {
const categoryInfo = blogData.categories[post.category] || { name: post.category };
return `
<article class="related-card">
<div class="related-meta">
<span class="related-category">${categoryInfo.name}</span>
<span>${formatDate(post.publishDate)}</span>
<span>${post.readTime}</span>
</div>
<h4 class="related-title">
<a href="${post.slug}.html" class="related-link">${post.title}</a>
</h4>
<p class="related-excerpt">${post.excerpt}</p>
<div class="related-footer">
<span class="related-author">${post.author}</span>
<a href="${post.slug}.html" class="related-read">Read article</a>
</div>
</article>
`;
}).join('');
}
// Utility function to shuffle array
function shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
// Reading progress for blog posts
function setupReadingProgress() {
const bar = document.getElementById('readingProgress') || document.getElementById('readingProgressBar');
if (!bar) return;
const update = () => {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = Math.max(0, Math.min(1, docHeight ? scrollTop / docHeight : 0));
bar.style.width = (progress * 100) + '%';
};
window.addEventListener('scroll', update, { passive: true });
window.addEventListener('resize', update);
update();
}
// Setup social sharing
function setupSocialSharing() {
document.querySelectorAll('.share-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
const platform = this.getAttribute('data-platform');
const url = encodeURIComponent(window.location.href);
const title = encodeURIComponent(document.title);
let shareUrl = '';
switch (platform) {
case 'twitter':
shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=${title}`;
break;
case 'linkedin':
shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
break;
case 'facebook':
shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
break;
}
if (shareUrl) {
window.open(shareUrl, 'share', 'width=600,height=400');
}
});
});
}
// Initialize blog functionality
function initBlogFunctionality() {
// Setup search
setupBlogSearch();
// Setup newsletter forms
setupNewsletterForm();
// Setup social sharing
setupSocialSharing();
// Load related articles if on blog post page
if (document.getElementById('relatedArticles')) {
loadRelatedArticles();
}
// Setup reading progress on article pages if present
if (document.getElementById('readingProgress')) {
setupReadingProgress();
}
}
// Initialize blog when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
initBlogFunctionality();
});

235
wf.html Normal file
View File

@ -0,0 +1,235 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WF - Quantum Tasks AI</title>
<!-- SEO Meta Tags -->
<meta name="description" content="WF - Quantum Tasks AI form submission page">
<meta name="keywords" content="AI, artificial intelligence, automation, task management, AI agents">
<meta name="author" content="Quantum Tasks AI">
<!-- Open Graph Meta Tags for Rich Link Previews -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Quantum Tasks AI">
<meta property="og:title" content="WF - Quantum Tasks AI">
<meta property="og:description" content="WF form submission page for Quantum Tasks AI">
<meta property="og:url" content="https://quantumtaskai.com/wf">
<meta property="og:image" content="https://quantumtaskai.com/img/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Quantum Tasks AI - AI Agent Marketplace">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@quantumtaskai">
<meta name="twitter:title" content="WF - Quantum Tasks AI">
<meta name="twitter:description" content="WF form submission page for Quantum Tasks AI">
<meta name="twitter:image" content="https://quantumtaskai.com/img/og-image.png">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<!-- Font Loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"></noscript>
<!-- Styles -->
<link rel="stylesheet" href="css/style.css">
<style>
.form-container {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.form-wrapper {
width: 100%;
max-width: 800px;
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.form-content {
padding: 1rem;
min-height: 600px;
}
.jotform-iframe {
width: 100%;
height: 700px;
border: none;
border-radius: 8px;
}
.refresh-controls {
text-align: center;
padding: 1rem;
background: #f8f9fa;
border-top: 1px solid #e9ecef;
}
.refresh-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
margin-right: 1rem;
transition: transform 0.2s ease;
}
.refresh-btn:hover {
transform: translateY(-2px);
}
@media (max-width: 768px) {
.form-container {
padding: 1rem;
}
.jotform-iframe {
height: 800px;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="hdr">
<div class="hdr-inner">
<a href="index.html" class="hdr-logo">
<img src="img/logo.png" alt="Quantum Tasks AI">
</a>
<nav class="hdr-nav" id="hdr-nav" aria-label="Main navigation">
<a href="index.html">Home</a>
<a href="digital-branding.html">AI Digital Branding</a>
<a href="https://blog.quantumtaskai.com/">Blog</a>
<a href="https://ai-chat.quantumtaskai.com/">AI Chat</a>
<a href="https://ai.quantumtaskai.com/agents/">AI Marketplace</a>
</nav>
<button class="hdr-burger" id="hdr-burger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="hdr-nav">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
<path d="M3 5h16M3 11h16M3 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
</header>
<!-- Main Content -->
<main class="form-container">
<div class="form-wrapper">
<div class="form-content">
<iframe
id="JotFormIFrame-252561494170457"
title="WF Form"
onload="window.parent.scrollTo(0,0)"
allowtransparency="true"
allow="geolocation; microphone; camera; midi; encrypted-media;"
src="https://form.jotform.com/252561494170457"
frameborder="0"
class="jotform-iframe"
scrolling="no">
</iframe>
<script src='https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js'></script>
<script>window.jotformEmbedHandler("iframe[id='JotFormIFrame-252561494170457']", "https://form.jotform.com/");</script>
</div>
<div class="refresh-controls">
<button class="refresh-btn" onclick="refreshForm()">🔄 New Form</button>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<!-- Main Footer Content -->
<div class="footer-main">
<!-- Company Info -->
<div class="footer-company">
<div class="footer-logo">
<img src="img/logo.png" alt="Quantum Tasks AI" class="footer-logo-img">
</div>
<p class="footer-description">
Leading cybersecurity consultancy providing comprehensive security solutions and AI-powered automation.
</p>
<div class="footer-contact">
<a href="mailto:abhay@quantumtaskai.com" class="footer-contact-item">
📧 abhay@quantumtaskai.com
</a>
<span class="footer-contact-item">
📍 Dubai, UAE
</span>
</div>
</div>
<!-- Navigation Sections -->
<div class="footer-nav">
<!-- Services -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Services</h4>
<div class="footer-nav-links">
<a href="#services" class="footer-nav-link">Cybersecurity Consulting</a>
<a href="#services" class="footer-nav-link">AI Automation</a>
<a href="digital-branding.html" class="footer-nav-link">Digital Branding</a>
<a href="freight-flow.html" class="footer-nav-link">FreightFlow</a>
<a href="#services" class="footer-nav-link">Rapid Response</a>
</div>
</div>
<!-- Company -->
<div class="footer-nav-section">
<h4 class="footer-nav-title">Company</h4>
<div class="footer-nav-links">
<a href="#about" class="footer-nav-link">About Us</a>
<a href="#founder" class="footer-nav-link">Leadership</a>
<a href="#contact" class="footer-nav-link">Contact Us</a>
<a href="https://app.quantumtaskai.com" class="footer-nav-link">AI Marketplace</a>
</div>
</div>
</div>
</div>
<!-- Bottom Section -->
<div class="footer-bottom">
<p class="footer-copyright">
© 2025 Quantum Tasks AI. All rights reserved.
</p>
<div class="footer-legal">
<a href="#privacy" class="footer-legal-link">Privacy Policy</a>
<a href="#terms" class="footer-legal-link">Terms of Service</a>
<a href="#security" class="footer-legal-link">Security</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="js/script.js"></script>
<script>
// Function to refresh the form
function refreshForm() {
const iframe = document.getElementById('JotFormIFrame-252561494170457');
iframe.src = iframe.src;
}
</script>
</body>
</html>