commit 1375e33d1b16d5b65cc839134c969c22558ba114 Author: Amit Rana Date: Sun Apr 5 20:29:43 2026 +0530 first commit diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..58f0a81 --- /dev/null +++ b/.dockerignore @@ -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 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8f401d6 --- /dev/null +++ b/.gitignore @@ -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/ \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..8334000 --- /dev/null +++ b/CLAUDE.md @@ -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 \ No newline at end of file diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md new file mode 100644 index 0000000..aa55474 --- /dev/null +++ b/DEPLOYMENT.md @@ -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 +
+``` + +**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 + +``` + +### Option C: Connect to Django Backend +Update the form to POST to your Django app: + +```html + +``` + +## 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 `` section of all pages: + +```html + + + +``` + +### Alternative: Plausible Analytics +Add to ``: + +```html + +``` + +## 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 + + + + https://yoursite.com/ + 1.0 + + + https://yoursite.com/digital-branding.html + 0.8 + + +``` + +## 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! \ No newline at end of file diff --git a/DOKPLOY-DEPLOYMENT.md b/DOKPLOY-DEPLOYMENT.md new file mode 100644 index 0000000..042c5a0 --- /dev/null +++ b/DOKPLOY-DEPLOYMENT.md @@ -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! diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..27b557f --- /dev/null +++ b/Dockerfile @@ -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;"] diff --git a/LOGO-FIX-SUMMARY.md b/LOGO-FIX-SUMMARY.md new file mode 100644 index 0000000..c950e1b --- /dev/null +++ b/LOGO-FIX-SUMMARY.md @@ -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: `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! 🎉 \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..2676e95 --- /dev/null +++ b/README.md @@ -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. \ No newline at end of file diff --git a/WARP.md b/WARP.md new file mode 120000 index 0000000..681311e --- /dev/null +++ b/WARP.md @@ -0,0 +1 @@ +CLAUDE.md \ No newline at end of file diff --git a/Wilmington_Foods/anuga.png b/Wilmington_Foods/anuga.png new file mode 100644 index 0000000..311300b Binary files /dev/null and b/Wilmington_Foods/anuga.png differ diff --git a/Wilmington_Foods/index.html b/Wilmington_Foods/index.html new file mode 100644 index 0000000..231621f --- /dev/null +++ b/Wilmington_Foods/index.html @@ -0,0 +1,69 @@ + + + + + +Wilmington Foods — Anuga 2025 + + + +
+
+ + +
+ +

After a year of exciting growth and innovation, Wilmington Foods is thrilled to showcase our latest range at one of the world's most dynamic food & beverage events!

+ +

We're excited to share that the Wilmington Foods team will be at Anuga 2025! 📍 You'll find our stand in Hall 02.1 — Stand D010.

+ +
+Anuga 2025 Exhibition Hall Map - Wilmington Foods at Hall 02.1 Stand D010 +
+ +

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!

+ +

Would you like to know more or schedule a meeting during Anuga?
+Just hit reply — our team will be happy to set up a time that works for you.

+ +
+Contact us to schedule a meeting at Anuga +Discover more about Wilmington Foods +
+ +
+ +
+
+

Wilmington Foods FZE

+

Phase II (Food Park), Plot No 46, 47, 55, 56
+Hamriyah Free Zone, Sharjah, UAE

+

info@wilmingtonfoods.com · +971 50 546 7749

+
+
+ +

See you soon in Cologne!
+Wilmington Foods Team

+
+
+ +
+
+

See you soon in Cologne!

+

Wilmington Foods Team

+
+ +
+ + + + + diff --git a/Wilmington_Foods/info.txt b/Wilmington_Foods/info.txt new file mode 100644 index 0000000..889d87a --- /dev/null +++ b/Wilmington_Foods/info.txt @@ -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 \ No newline at end of file diff --git a/Wilmington_Foods/logo.png b/Wilmington_Foods/logo.png new file mode 100644 index 0000000..a5213d5 Binary files /dev/null and b/Wilmington_Foods/logo.png differ diff --git a/Wilmington_Foods/map.png b/Wilmington_Foods/map.png new file mode 100644 index 0000000..fa2daaf Binary files /dev/null and b/Wilmington_Foods/map.png differ diff --git a/Wilmington_Foods/styles.css b/Wilmington_Foods/styles.css new file mode 100644 index 0000000..9e07453 --- /dev/null +++ b/Wilmington_Foods/styles.css @@ -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; } +} + + diff --git a/anuga.html b/anuga.html new file mode 100644 index 0000000..5a10392 --- /dev/null +++ b/anuga.html @@ -0,0 +1,194 @@ + + + + + + WF - Quantum Tasks AI + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ + +
+
+
+ + + + +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/aue.html b/aue.html new file mode 100644 index 0000000..0c9a0c0 --- /dev/null +++ b/aue.html @@ -0,0 +1,398 @@ + + + + + + Quantum Tasks AI - Chat Assistant + + + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+ + + + + + + \ No newline at end of file diff --git a/blog-data.json b/blog-data.json new file mode 100644 index 0000000..df5c853 --- /dev/null +++ b/blog-data.json @@ -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" + } + } +} \ No newline at end of file diff --git a/blog.html b/blog.html new file mode 100644 index 0000000..0097c7b --- /dev/null +++ b/blog.html @@ -0,0 +1,220 @@ + + + + + + AI & Automation Blog - Quantum Tasks AI + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ + +
+ +
+
+
+

Insights

+

Expert perspectives on AI, automation, and cybersecurity

+
+ + +
+ +
+
+
+ + + + + +
+
+
+ +
+ + +
+ +
+ + + +
+
+
+ + +
+ + + + + + + + + \ No newline at end of file diff --git a/blog.pdf b/blog.pdf new file mode 100644 index 0000000..94c1fc8 Binary files /dev/null and b/blog.pdf differ diff --git a/blog/ai-agents-revolutionize-task-management.html b/blog/ai-agents-revolutionize-task-management.html new file mode 100644 index 0000000..7fbee9c --- /dev/null +++ b/blog/ai-agents-revolutionize-task-management.html @@ -0,0 +1,337 @@ + + + + + + How AI Agents Revolutionize Task Management in 2025 - Quantum Tasks AI Blog + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+
+ + +
+ +
+
+ +
+ + + +
+ + 🤖 + AI & Automation + + January 15, 2025 + 8 min read +
+ +

How AI Agents Revolutionize Task Management in 2025

+

Discover how intelligent AI agents are transforming the way businesses approach task automation and workflow optimization with cutting-edge technology.

+ +
+
💼
+
+ By Quantum Tasks AI Team + AI & Automation Experts +
+
+
+ + +
+
+
+
+
🤖
+

AI Agents Task Management

+

Revolutionary automation technology

+
+
+
+
+ + +
+

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.

+ +

The Evolution of Task Management

+

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.

+ +

What Makes AI Agents Different?

+

Unlike traditional automation tools that follow predetermined rules, AI agents can:

+
    +
  • Learn and adapt - They analyze patterns in your work and optimize processes over time
    • +
  • Make contextual decisions - They understand the nuances of different situations and respond appropriately
    • +
  • Predict outcomes - They forecast potential issues and proactively address them
    • +
  • Collaborate intelligently - They work seamlessly with human team members and other AI systems
    • +
+ +

Real-World Applications

+

AI agents are already transforming task management across various industries:

+ +

1. Project Coordination

+

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.

+ +

2. Customer Support

+

Intelligent agents handle routine customer inquiries, escalate complex issues to human agents, and even predict customer needs based on historical data and behavioral patterns.

+ +

3. Data Processing

+

From report generation to data analysis, AI agents can process vast amounts of information, identify trends, and present actionable insights without human intervention.

+ +

The Benefits of AI-Powered Task Management

+ +

Increased Efficiency

+

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.

+ +

Reduced Human Error

+

By automating repetitive and error-prone tasks, AI agents significantly reduce the risk of mistakes that can cascade through workflows and cause costly delays.

+ +

Enhanced Scalability

+

As your business grows, AI agents can handle increased workloads without the need to hire additional staff or reorganize teams.

+ +

Better Decision Making

+

AI agents provide data-driven insights and recommendations, enabling better strategic decisions based on comprehensive analysis rather than intuition alone.

+ +

Implementation Strategies

+

Successfully implementing AI agents for task management requires careful planning:

+ +

1. Start Small

+

Begin with simple, well-defined tasks before moving to more complex workflows. This allows your team to adapt and builds confidence in the technology.

+ +

2. Choose the Right Tools

+

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.

+ +

3. Train Your Team

+

Ensure your team understands how to work alongside AI agents effectively. This includes knowing when to intervene and how to optimize agent performance.

+ +

Looking Ahead

+

As AI technology continues to advance, we can expect even more sophisticated task management capabilities. Future AI agents will likely offer:

+
    +
  • More natural language interaction
    • +
  • Better emotional intelligence for human collaboration
    • +
  • Advanced predictive capabilities
    • +
  • Seamless integration across platforms and systems
    • +
+ +

Conclusion

+

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.

+ +

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.

+
+ + +
+
+ AI + Task Management + Automation + Productivity +
+ +
+

Share this article

+ +
+
+
+
+ + +
+
+

Related Articles

+ +
+
+ + + + +
+ + + + + + + \ No newline at end of file diff --git a/blog/ai-powered-digital-marketing-2025.html b/blog/ai-powered-digital-marketing-2025.html new file mode 100644 index 0000000..52d18ae --- /dev/null +++ b/blog/ai-powered-digital-marketing-2025.html @@ -0,0 +1,347 @@ + + + + + + AI-Powered Digital Marketing: Transforming Customer Engagement in 2025 - Quantum Tasks AI Blog + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+
+ + +
+ +
+
+ +
+ + + +
+ + + AI & Automation + + January 20, 2025 + 10 min read +
+ +

AI-Powered Digital Marketing: Transforming Customer Engagement in 2025

+

Discover how artificial intelligence is transforming digital marketing through data-driven insights, automated campaigns, and personalized customer experiences.

+ +
+
+ Quantum Tasks AI Team +
+ +
+
+
+ By Quantum Tasks AI Team + AI & Marketing Experts +
+
+
+ + +
+
+ AI-Powered Digital Marketing +
+
+ + +
+

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.

+ +

How AI Supercharges Marketing

+

AI-driven platforms are revolutionizing marketing operations across multiple dimensions:

+ +

Automation of Core Tasks

+

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.

+ +

Predictive Consumer Insights

+

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.

+ +

Advanced Analytics

+

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.

+ +

Top Benefits for Marketers

+ +

Personalized Customer Experiences

+

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.

+ +

Better Targeting & ROI

+

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.

+ +

Automated Content Creation

+

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.

+ +

Smarter Insights & Predictions

+

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.

+ +

Popular AI Tools in 2025

+

The AI marketing landscape has evolved with several standout tools leading the transformation:

+ +

Jasper AI

+

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.

+ +

HubSpot

+

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.

+ +

Gumloop

+

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.

+ +

Surfer SEO

+

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.

+ +

ChatGPT

+

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.

+ +

Implementation Strategies

+

Successfully integrating AI into your marketing strategy requires a thoughtful approach:

+ +

Start with Clear Objectives

+

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.

+ +

Ensure Data Quality

+

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.

+ +

Maintain Human Oversight

+

While AI automates many processes, human creativity and strategic thinking remain essential. Establish workflows that combine AI efficiency with human expertise for optimal results.

+ +

Test and Iterate

+

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.

+ +

The Future of AI in Marketing

+

As AI technology continues to evolve, we can expect even more sophisticated marketing capabilities:

+
    +
  • Hyper-personalization that adapts in real-time to user behavior
    • +
  • Predictive customer journey mapping that anticipates needs
    • +
  • Emotion AI that analyzes and responds to customer sentiment
    • +
  • Voice and visual search optimization for emerging platforms
    • +
  • Augmented reality experiences powered by AI recommendations
    • +
+ +

Conclusion

+

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.

+ +

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.

+
+ + +
+
+ AI + Digital Marketing + Customer Engagement + Automation + Personalization +
+ +
+

Share this article

+ +
+
+
+
+ + +
+
+

Related Articles

+ +
+
+ + + + +
+ + + + + + + \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..bc064d6 --- /dev/null +++ b/css/style.css @@ -0,0 +1,4219 @@ +/* ================================================================ + Quantum Tasks AI - Static Website Styles + ================================================================ */ + +/* CSS Custom Properties - Design System */ +:root { + /* ===== SPACING SYSTEM ===== */ + --space-xs: 4px; + --space-sm: 8px; + --space-md: 16px; + --space-lg: 24px; + --space-xl: 32px; + --space-xxl: 48px; + --space-xxxl: 64px; + + /* ===== COLOR PALETTE ===== */ + --primary: #3b82f6; + --primary-dark: #1d4ed8; + --primary-light: #60a5fa; + + --success: #10b981; + --success-dark: #059669; + --error: #ef4444; + --warning: #f59e0b; + --info: #06b6d4; + + --surface: #ffffff; + --surface-variant: #f8fafc; + --background: #f3f4f6; + --background-light: #f9fafb; + + --on-surface: #1a1a1a; + --on-surface-variant: #6b7280; + --text-primary: var(--on-surface); + --text-secondary: var(--on-surface-variant); + --text-muted: #9ca3af; + + --outline: #e4e7eb; + --outline-variant: #e1e4e7; + --border-light: #e5e7eb; + --border-medium: #9ca3af; + --border-strong: #6b7280; + + /* ===== BORDER RADIUS ===== */ + --radius-xs: 4px; + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 16px; + --radius-xl: 24px; + --radius-full: 9999px; + + /* ===== SHADOWS ===== */ + --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); + --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15); + --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2); + + /* ===== TYPOGRAPHY ===== */ + --font-family: 'Inter', Arial, sans-serif; + --font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 20px; + --text-2xl: 24px; + --text-3xl: 30px; + --text-4xl: 36px; + + --font-light: 300; + --font-normal: 400; + --font-medium: 500; + --font-semibold: 600; + --font-bold: 700; + + --leading-tight: 1.25; + --leading-normal: 1.5; + --leading-relaxed: 1.75; + + /* ===== TRANSITIONS ===== */ + --transition: all 0.2s ease; + --transition-fast: all 0.1s ease; + --transition-slow: all 0.3s ease; + + /* ===== GRADIENTS ===== */ + --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); + --gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%); + --gradient-hero: linear-gradient(135deg, #f6f8ff 0%, #e8f0fe 50%, #f0f7ff 100%); + --company-gradient: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); + --visual-gradient: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%); + --services-gradient: linear-gradient(135deg, #fefefe 0%, #f0f9ff 100%); + --clients-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + --founder-gradient: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%); + --contact-gradient: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); + --text-gradient: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%); + --badge-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); + --badge-orange: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); + --blog-hero-gradient: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%); + --blog-card-gradient: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); + --newsletter-gradient: linear-gradient(135deg, var(--primary) 0%, #4338ca 100%); + + /* ===== HEADER VARIABLES ===== */ + --header-height: 84px; + --header-bg: #ffffff; + --header-border: #e5e7eb; + --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + --logo-height: 60px; + --logo-height-mobile: 40px; + --nav-text: #6b7280; + --nav-text-hover: #3b82f6; + --nav-text-active: #1d4ed8; + + /* ===== Z-INDEX SCALE ===== */ + --z-dropdown: 1000; + --z-sticky: 1020; + --z-fixed: 1030; + --z-modal-backdrop: 1040; + --z-modal: 1050; + --z-popover: 1060; + --z-tooltip: 1070; + --z-toast: 1080; +} + +/* ================================================================ + GLOBAL STYLES + ================================================================ */ + +* { + box-sizing: border-box; +} + +body { + font-family: var(--font-family); + margin: 0; + padding: 0; + background-color: var(--background); + overflow-x: hidden; + line-height: var(--leading-normal); + color: var(--text-primary); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + font-optical-sizing: auto; + font-variant-ligatures: common-ligatures contextual; +} + +/* ================================================================ + HEADER COMPONENT + ================================================================ */ + +.hdr { + background: var(--header-bg); + border-bottom: 1px solid var(--header-border); + box-shadow: var(--header-shadow); + position: sticky; + top: 0; + z-index: var(--z-fixed); +} + +.hdr-inner { + max-width: 1200px; + margin: 0 auto; + padding: 14px 24px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.hdr-logo img { + height: var(--logo-height); + width: auto; + display: block; +} + +.hdr-nav { + display: flex; + align-items: center; + gap: 4px; +} + +.hdr-nav a { + color: var(--nav-text); + font-size: 15px; + font-weight: var(--font-medium); + padding: 8px 14px; + border-radius: 6px; + text-decoration: none; + white-space: nowrap; + transition: color .15s, background .15s; +} + +.hdr-nav a:hover { + color: var(--nav-text-hover); + background: rgba(59, 130, 246, 0.05); +} + +.hdr-nav a.active { + color: var(--nav-text-active); + background: rgba(59, 130, 246, 0.08); + font-weight: 600; +} + +.hdr-nav a:focus-visible { + outline: 2px solid var(--nav-text-hover); + outline-offset: 2px; +} + +.hdr-burger { + display: none; + align-items: center; + justify-content: center; + background: none; + border: none; + cursor: pointer; + padding: 8px; + border-radius: 6px; + color: var(--nav-text); + transition: background .15s; +} + +.hdr-burger:hover { background: rgba(59, 130, 246, 0.05); } + +@media (max-width: 768px) { + .hdr-burger { display: flex; } + .hdr-inner { position: relative; } + .hdr-logo img { height: var(--logo-height-mobile); } + .hdr-nav { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--header-bg); + border-top: 1px solid var(--header-border); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); + flex-direction: column; + align-items: stretch; + padding: 12px 16px; + gap: 2px; + } + .hdr-nav.open { display: flex; } + .hdr-nav a { padding: 10px 14px; } +} + +/* ================================================================ + HERO SECTIONS + ================================================================ */ + +.hero, .digital-branding-hero, .contact-hero { + position: relative; + background: var(--gradient-hero); + overflow: hidden; + min-height: 85vh; + display: flex; + align-items: center; + padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px) clamp(60px, 15vw, 100px); +} + +.contact-hero { + min-height: 50vh; +} + +.hero-container { + max-width: 1280px; + margin: 0 auto; + text-align: center; + position: relative; + z-index: 10; + width: 100%; +} + +.trust-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(59, 130, 246, 0.08); + padding: 0.5rem 1.25rem; + border-radius: 50px; + margin-bottom: 2.5rem; + font-size: var(--text-sm); + font-weight: var(--font-semibold); + color: var(--primary); + border: 1px solid rgba(59, 130, 246, 0.15); + backdrop-filter: blur(10px); +} + +.trust-badge-emoji { + font-size: 0.75rem; +} + +.section-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(59, 130, 246, 0.08); + padding: 0.5rem 1.25rem; + border-radius: 50px; + margin-bottom: 1.5rem; + font-size: var(--text-sm); + font-weight: var(--font-semibold); + color: var(--primary); + border: 1px solid rgba(59, 130, 246, 0.15); + backdrop-filter: blur(10px); +} + +.hero-title { + font-weight: 800; + margin-bottom: 2.5rem; + line-height: var(--leading-tight); + letter-spacing: -0.02em; + font-size: clamp(36px, 8vw, 110px); + margin-bottom: clamp(24px, 6vw, 40px); +} + +.hero-title-gradient { + background: var(--gradient-primary); + background-size: 300% 300%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-title-normal { + color: var(--text-primary); +} + +.hero-description { + color: var(--text-secondary); + margin-bottom: 3.5rem; + max-width: 720px; + margin-left: auto; + margin-right: auto; + line-height: var(--leading-relaxed); + font-weight: var(--font-normal); + font-size: clamp(1.1rem, 3vw, 1.4rem); + margin-bottom: clamp(32px, 8vw, 56px); + padding: 0 clamp(8px, 2vw, 16px); +} + +.hero-buttons { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 5rem; + gap: clamp(12px, 3vw, 20px); + margin-bottom: clamp(40px, 10vw, 80px); + padding: 0 clamp(8px, 2vw, 16px); +} + +/* ================================================================ + BUTTONS + ================================================================ */ + +.btn-primary { + background: var(--gradient-primary); + color: white; + border-radius: 1rem; + font-weight: var(--font-bold); + border: none; + cursor: pointer; + box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25), 0 4px 12px rgba(0, 0, 0, 0.05); + letter-spacing: 0.01em; + text-align: center; + text-decoration: none; + display: inline-block; + padding: clamp(14px, 4vw, 18px) clamp(24px, 6vw, 36px); + font-size: clamp(14px, 3.5vw, 18px); + min-height: 48px; + min-width: clamp(140px, 40vw, 180px); + transition: var(--transition); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4); + filter: brightness(1.1); +} + +.btn-primary:active { + transform: translateY(0); + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); +} + +.btn-secondary { + background: var(--surface); + color: var(--primary); + border-radius: 1rem; + font-weight: var(--font-semibold); + border: 2px solid var(--border-light); + text-decoration: none; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(59, 130, 246, 0.08); + letter-spacing: 0.01em; + display: inline-block; + text-align: center; + padding: clamp(14px, 4vw, 18px) clamp(24px, 6vw, 36px); + font-size: clamp(14px, 3.5vw, 18px); + min-height: 48px; + min-width: clamp(140px, 40vw, 180px); + transition: var(--transition); +} + +.btn-secondary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15); + border-color: var(--primary); + background: rgba(59, 130, 246, 0.05); +} + +.btn-secondary:active { + transform: translateY(0); + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12); +} + +/* ================================================================ + TRUST INDICATORS + ================================================================ */ + +.trust-indicators { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); + gap: clamp(16px, 4vw, 48px); + max-width: 600px; + margin: 0 auto; +} + +.trust-card { + background: rgba(255, 255, 255, 0.7); + padding: clamp(20px, 6vw, 32px) clamp(16px, 4vw, 24px); + border-radius: var(--radius-lg); + text-align: center; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: var(--shadow-sm); + transition: var(--transition); +} + +.trust-card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.trust-number { + font-size: clamp(24px, 6vw, 36px); + font-weight: var(--font-bold); + color: var(--primary); + margin-bottom: 0.5rem; + line-height: 1; +} + +.trust-text { + font-size: clamp(12px, 3vw, 14px); + color: var(--text-secondary); + font-weight: var(--font-medium); + line-height: var(--leading-tight); +} + +/* ================================================================ + SECTIONS + ================================================================ */ + +.section-container { + max-width: 1200px; + margin: 0 auto; + padding: clamp(40px, 8vw, 80px) clamp(16px, 4vw, 24px); +} + +.section-header { + text-align: center; + margin-bottom: clamp(40px, 8vw, 64px); +} + +.section-title { + font-size: clamp(28px, 6vw, 48px); + font-weight: var(--font-bold); + color: var(--text-primary); + margin: 0 0 1rem 0; + line-height: var(--leading-tight); +} + +.section-subtitle { + font-size: clamp(16px, 4vw, 20px); + color: var(--text-secondary); + max-width: 600px; + margin: 0 auto; + line-height: var(--leading-relaxed); +} + +/* ================================================================ + COMPANY PROFILE SECTION + ================================================================ */ + +.company-profile { + padding: clamp(60px, 12vw, 100px) clamp(16px, 4vw, 24px); + background: var(--company-gradient); +} + +.company-container { + max-width: 1200px; + margin: 0 auto; +} + +.company-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: clamp(40px, 8vw, 80px); + align-items: center; + margin-bottom: clamp(40px, 8vw, 64px); +} + +.company-content-card { + background: var(--surface); + padding: clamp(32px, 6vw, 48px); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-lg); + position: relative; +} + +.decorative-corner { + position: absolute; + top: -10px; + right: -10px; + width: 60px; + height: 60px; + background: var(--gradient-primary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + box-shadow: var(--shadow-lg); +} + +.company-content-title { + font-size: clamp(22px, 5vw, 32px); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: 1rem; + line-height: var(--leading-tight); +} + +.company-content-text { + color: var(--text-secondary); + line-height: var(--leading-relaxed); + margin-bottom: 2rem; + font-size: clamp(14px, 3.5vw, 18px); +} + +.company-badges { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 1rem; +} + +.company-badge { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + border-radius: var(--radius-full); + font-size: var(--text-sm); + font-weight: var(--font-medium); + color: white; +} + +.company-badge-primary { + background: var(--gradient-primary); +} + +.company-badge-purple { + background: var(--badge-purple); +} + +.company-badge-orange { + background: var(--badge-orange); +} + +.company-visual { + display: flex; + align-items: center; + justify-content: center; + position: relative; + height: 300px; +} + +.main-visual { + width: 200px; + height: 200px; + background: var(--visual-gradient); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + position: relative; + box-shadow: var(--shadow-xl); +} + +.main-visual-icon { + font-size: 80px; + color: white; +} + +.floating-element { + position: absolute; + width: 60px; + height: 60px; + background: var(--surface); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + box-shadow: var(--shadow-lg); + animation: float 6s ease-in-out infinite; +} + +.floating-element-1 { + top: 20px; + left: 20px; + animation-delay: 0s; +} + +.floating-element-2 { + bottom: 20px; + right: 20px; + animation-delay: 3s; +} + +@keyframes float { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-20px); } +} + +.achievement-strip { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: clamp(16px, 4vw, 32px); + background: var(--surface); + padding: clamp(24px, 5vw, 40px); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} + +.achievement-item { + text-align: center; +} + +.achievement-icon { + font-size: 32px; + margin-bottom: 0.5rem; +} + +.achievement-title { + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: 0.25rem; +} + +.achievement-text { + color: var(--text-secondary); + font-size: var(--text-sm); +} + +/* ================================================================ + SERVICES SECTION + ================================================================ */ + +.services { + padding: clamp(60px, 12vw, 100px) clamp(16px, 4vw, 24px); + background: var(--services-gradient); +} + +.services-container { + max-width: 1200px; + margin: 0 auto; + text-align: center; +} + +.services-title { + font-size: clamp(28px, 6vw, 48px); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: 1rem; +} + +.services-subtitle { + font-size: clamp(16px, 4vw, 20px); + color: var(--text-secondary); + margin-bottom: clamp(40px, 8vw, 64px); +} + +.services-grid, .branding-services-grid, .why-choose-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: clamp(24px, 5vw, 40px); +} + +.service-card, .choice-card { + background: var(--surface); + padding: clamp(32px, 6vw, 40px); + border-radius: var(--radius-xl); + text-align: center; + box-shadow: var(--shadow-sm); + transition: var(--transition); + border: 1px solid var(--border-light); +} + +.service-card:hover, .choice-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.service-icon, .choice-icon { + font-size: 48px; + margin-bottom: 1.5rem; + display: block; +} + +.service-title, .choice-title { + font-size: clamp(18px, 4vw, 24px); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: 1rem; +} + +.service-description, .choice-description { + color: var(--text-secondary); + line-height: var(--leading-relaxed); + font-size: clamp(14px, 3.5vw, 16px); +} + +/* ================================================================ + CLIENTS SECTION + ================================================================ */ + +.clients { + padding: clamp(60px, 12vw, 100px) clamp(16px, 4vw, 24px); + background: var(--clients-gradient); +} + +.clients-container { + max-width: 1200px; + margin: 0 auto; + text-align: center; +} + +.clients-title { + font-size: clamp(28px, 6vw, 48px); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: clamp(40px, 8vw, 64px); +} + +.clients-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: clamp(24px, 5vw, 32px); +} + +.client-card { + background: var(--surface); + padding: clamp(24px, 5vw, 32px); + border-radius: var(--radius-lg); + text-align: center; + box-shadow: var(--shadow-sm); + transition: var(--transition); + border: 1px solid var(--border-light); +} + +.client-card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.client-icon { + font-size: 40px; + margin-bottom: 1rem; +} + +.client-name { + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: 0.5rem; + font-size: clamp(16px, 4vw, 20px); +} + +.client-industry { + color: var(--text-secondary); + font-size: var(--text-sm); +} + +/* ================================================================ + FOUNDER SECTION + ================================================================ */ + +.founder { + padding: clamp(60px, 12vw, 100px) clamp(16px, 4vw, 24px); + background: var(--surface); +} + +.founder-container { + max-width: 1200px; + margin: 0 auto; +} + +.founder-title { + text-align: center; + font-size: clamp(28px, 6vw, 48px); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: clamp(40px, 8vw, 64px); +} + +.founder-grid { + display: grid; + grid-template-columns: 300px 1fr; + gap: clamp(40px, 8vw, 64px); + align-items: center; + margin-bottom: 3rem; +} + +.founder-card { + background: var(--founder-gradient); + color: white; + padding: clamp(32px, 6vw, 40px); + border-radius: var(--radius-xl); + text-align: center; + box-shadow: var(--shadow-lg); +} + +.founder-avatar { + width: 80px; + height: 80px; + margin-bottom: 1rem; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)); + border-radius: 12px; + border: 2px solid rgba(255, 255, 255, 0.3); + margin-left: auto; + margin-right: auto; +} + +.avatar-initials { + font-size: 24px; + font-weight: 700; + color: white; + letter-spacing: 1px; +} + +.founder-name { + font-size: clamp(20px, 5vw, 24px); + font-weight: var(--font-bold); + margin-bottom: 0.5rem; +} + +.founder-role { + font-size: var(--text-sm); + opacity: 0.9; + margin-bottom: 1.5rem; +} + +.founder-badges { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.founder-badge { + background: rgba(255, 255, 255, 0.2); + padding: 0.5rem 0.75rem; + border-radius: var(--radius-sm); + font-size: var(--text-xs); + font-weight: var(--font-medium); +} + +.founder-content { + max-width: none; +} + +.founder-text { + color: var(--text-secondary); + line-height: var(--leading-relaxed); + margin-bottom: 1.5rem; + font-size: clamp(14px, 3.5vw, 16px); +} + +.founder-quote { + background: var(--surface-variant); + padding: clamp(20px, 4vw, 24px); + border-radius: var(--radius-lg); + border-left: 4px solid var(--primary); + margin-top: 1.5rem; +} + +.founder-quote-text { + color: var(--text-primary); + font-style: italic; + margin: 0; + font-weight: var(--font-medium); +} + +/* ================================================================ + PROCESS SECTION + ================================================================ */ + +.our-process { + padding: clamp(60px, 12vw, 100px) clamp(16px, 4vw, 24px); + background: var(--surface-variant); +} + +.process-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: clamp(24px, 5vw, 32px); + margin-bottom: clamp(40px, 8vw, 64px); +} + +.process-step-card { + background: var(--surface); + padding: clamp(24px, 5vw, 32px); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); + transition: var(--transition); + border: 1px solid var(--border-light); + display: flex; + align-items: flex-start; + gap: 1rem; +} + +.process-step-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.step-number { + background: var(--gradient-primary); + color: white; + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: var(--font-bold); + font-size: var(--text-lg); + flex-shrink: 0; +} + +.step-content { + flex: 1; +} + +.step-title { + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: 0.75rem; + font-size: clamp(16px, 4vw, 20px); +} + +.step-description { + color: var(--text-secondary); + line-height: var(--leading-relaxed); + font-size: clamp(14px, 3.5vw, 16px); +} + +/* RACE Framework */ +.race-framework { + background: var(--surface); + padding: clamp(32px, 6vw, 48px); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} + +.race-title { + text-align: center; + font-size: clamp(24px, 5vw, 32px); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: clamp(24px, 5vw, 32px); +} + +.race-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: clamp(20px, 4vw, 24px); +} + +.race-card { + background: var(--surface-variant); + padding: clamp(20px, 4vw, 24px); + border-radius: var(--radius-lg); + border-left: 4px solid var(--primary); + transition: var(--transition); +} + +.race-card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-sm); +} + +.race-phase { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.75rem; +} + +.race-icon { + font-size: 20px; +} + +.race-phase h4 { + font-weight: var(--font-bold); + color: var(--text-primary); + margin: 0; + font-size: var(--text-lg); +} + +.race-focus { + color: var(--primary); + font-weight: var(--font-semibold); + font-size: var(--text-sm); + margin-bottom: 0.5rem; +} + +.race-actions { + color: var(--text-secondary); + line-height: var(--leading-normal); + font-size: var(--text-sm); +} + +/* ================================================================ + CTA SECTION + ================================================================ */ + +.branding-cta { + padding: clamp(60px, 12vw, 100px) clamp(16px, 4vw, 24px); + background: var(--contact-gradient); +} + +.cta-container { + max-width: 1200px; + margin: 0 auto; +} + +.cta-title { + text-align: center; + font-size: clamp(28px, 6vw, 48px); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: clamp(40px, 8vw, 64px); +} + +.cta-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: clamp(40px, 8vw, 64px); + align-items: center; +} + +.cta-content-title { + font-size: clamp(20px, 5vw, 28px); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: 1rem; +} + +.cta-description { + color: var(--text-secondary); + line-height: var(--leading-relaxed); + margin-bottom: 2rem; + font-size: clamp(14px, 3.5vw, 16px); +} + +.cta-features { + margin-bottom: 2rem; +} + +.cta-feature { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.75rem; + color: var(--text-primary); + font-size: clamp(14px, 3.5vw, 16px); +} + +.feature-icon { + color: var(--success); + font-weight: var(--font-bold); + font-size: var(--text-lg); +} + +.cta-buttons { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +.cta-btn { + padding: 0.75rem 1.5rem; + border-radius: var(--radius-lg); + text-decoration: none; + font-weight: var(--font-semibold); + transition: var(--transition); + display: inline-block; +} + +.cta-btn.primary { + background: var(--gradient-primary); + color: white; + box-shadow: var(--shadow-md); +} + +.cta-btn.primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.cta-btn.secondary { + background: var(--surface); + color: var(--primary); + border: 2px solid var(--border-light); + box-shadow: var(--shadow-sm); +} + +.cta-btn.secondary:hover { + border-color: var(--primary); + background: rgba(59, 130, 246, 0.05); +} + +.cta-info { + background: var(--surface); + padding: clamp(32px, 6vw, 40px); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} + +.cta-info-title { + font-size: clamp(20px, 5vw, 24px); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: 1.5rem; +} + +/* ================================================================ + CONTACT SECTION + ================================================================ */ + +.contact { + padding: clamp(40px, 8vw, 80px) clamp(16px, 4vw, 24px); + background: var(--surface); +} + +.contact-container { + max-width: 1200px; + margin: 0 auto; +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: clamp(40px, 8vw, 64px); + align-items: start; +} + +.contact-form-wrapper { + background: var(--surface-variant); + padding: clamp(32px, 6vw, 40px); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} + +.form-title { + font-size: clamp(22px, 5vw, 28px); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: 0.5rem; +} + +.form-subtitle { + color: var(--text-secondary); + margin-bottom: 2rem; + font-size: clamp(14px, 3.5vw, 16px); +} + +.contact-form { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.form-group { + display: flex; + flex-direction: column; +} + +.form-label { + font-weight: var(--font-medium); + color: var(--text-primary); + margin-bottom: 0.5rem; + font-size: var(--text-sm); +} + +.form-input, .form-textarea { + padding: 0.75rem; + border: 2px solid var(--border-light); + border-radius: var(--radius-sm); + font-family: var(--font-family); + font-size: var(--text-base); + transition: var(--transition); + background: var(--surface); +} + +.form-input:focus, .form-textarea:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); +} + +.form-textarea { + resize: vertical; + min-height: 120px; +} + +.char-counter { + text-align: right; + font-size: var(--text-xs); + color: var(--text-muted); + margin-top: 0.25rem; +} + +.char-counter.warning { + color: var(--warning); +} + +.char-counter.error { + color: var(--error); +} + +.field-error { + color: var(--error); + font-size: var(--text-xs); + margin-top: 0.25rem; + min-height: 16px; +} + +.form-input.error, .form-textarea.error { + border-color: var(--error); + box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); +} + +.form-submit { + background: var(--gradient-primary); + color: white; + padding: 1rem 2rem; + border: none; + border-radius: var(--radius-lg); + font-weight: var(--font-semibold); + font-size: var(--text-base); + cursor: pointer; + transition: var(--transition); + box-shadow: var(--shadow-md); +} + +.form-submit:hover:not(:disabled) { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.form-submit:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.btn-loading { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.spinner { + display: inline-block; + width: 12px; + height: 12px; + border: 2px solid rgba(255, 255, 255, 0.3); + border-radius: 50%; + border-top: 2px solid white; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.form-messages { + margin-bottom: 1rem; + padding: 0.75rem; + border-radius: var(--radius-sm); + font-size: var(--text-sm); + font-weight: var(--font-medium); +} + +.form-messages.success { + background: rgba(16, 185, 129, 0.1); + color: var(--success-dark); + border: 1px solid rgba(16, 185, 129, 0.3); +} + +.form-messages.error { + background: rgba(239, 68, 68, 0.1); + color: var(--error); + border: 1px solid rgba(239, 68, 68, 0.3); +} + +.contact-info { + background: var(--contact-gradient); + padding: clamp(32px, 6vw, 40px); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} + +.contact-info-title { + font-size: clamp(20px, 5vw, 24px); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: 2rem; +} + +.contact-item { + display: flex; + align-items: flex-start; + gap: 1rem; + margin-bottom: 2rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--border-light); +} + +.contact-item:last-of-type { + border-bottom: none; + margin-bottom: 1rem; +} + +.contact-icon { + font-size: 24px; + flex-shrink: 0; + margin-top: 0.25rem; +} + +.contact-details h4 { + font-weight: var(--font-semibold); + color: var(--text-primary); + margin: 0 0 0.5rem 0; + font-size: var(--text-base); +} + +.contact-details p { + color: var(--text-secondary); + margin: 0; + line-height: var(--leading-normal); + font-size: var(--text-sm); +} + +.contact-email { + color: var(--primary); + text-decoration: none; + font-weight: var(--font-medium); +} + +.contact-email:hover { + text-decoration: underline; +} + +.quick-links { + margin-top: 2rem; + padding-top: 1.5rem; + border-top: 1px solid var(--border-light); +} + +.quick-links h4 { + font-weight: var(--font-semibold); + color: var(--text-primary); + margin-bottom: 1rem; + font-size: var(--text-base); +} + +.quick-links-grid { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.quick-link { + text-decoration: none; + color: var(--primary); + font-size: var(--text-sm); + font-weight: var(--font-medium); + padding: 0.5rem 0; + border-radius: var(--radius-sm); + transition: var(--transition); +} + +.quick-link:hover { + background: rgba(59, 130, 246, 0.05); + padding-left: 0.5rem; +} + +.quick-access { + background: var(--surface-variant); + padding: clamp(32px, 6vw, 40px); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} + +.quick-access-title { + font-size: clamp(20px, 5vw, 24px); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: 1.5rem; +} + +.quick-access-grid { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.quick-access-card { + background: var(--surface); + padding: 1.5rem; + border-radius: var(--radius-lg); + text-decoration: none; + transition: var(--transition); + border: 1px solid var(--border-light); +} + +.quick-access-card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.quick-access-icon { + font-size: 32px; + margin-bottom: 0.75rem; +} + +.quick-access-card h4 { + color: var(--text-primary); + margin: 0 0 0.5rem 0; + font-weight: var(--font-semibold); + font-size: var(--text-lg); +} + +.quick-access-card p { + color: var(--text-secondary); + margin: 0; + font-size: var(--text-sm); +} + +.commitment-statement { + background: var(--surface); + padding: clamp(20px, 4vw, 24px); + border-radius: var(--radius-lg); + margin-top: 1.5rem; + border-left: 4px solid var(--primary); +} + +.commitment-text { + color: var(--text-secondary); + margin: 0; + font-style: italic; + line-height: var(--leading-relaxed); + font-size: var(--text-sm); +} + +/* ================================================================ + FOOTER + ================================================================ */ + +.footer { + padding: clamp(30px, 5vw, 40px) clamp(16px, 4vw, 24px) clamp(20px, 3vw, 30px); + background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); + margin: 0; + width: 100%; + position: relative; + overflow-x: hidden; + box-sizing: border-box; + color: white; +} + +.footer-container { + max-width: 1200px; + margin: 0 auto; +} + +.footer-main { + display: grid; + grid-template-columns: 1fr 2fr; + gap: clamp(32px, 6vw, 48px); + margin-bottom: clamp(24px, 5vw, 32px); +} + +.footer-company { + max-width: 400px; +} + +.footer-logo { + margin-bottom: 1rem; +} + +.footer-logo-img { + height: 50px; + width: auto; + object-fit: contain; + filter: brightness(0) invert(1); +} + +.footer-description { + color: rgba(255, 255, 255, 0.8); + line-height: var(--leading-relaxed); + margin-bottom: 1.5rem; + font-size: var(--text-sm); +} + +.footer-contact { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.footer-contact-item { + color: rgba(255, 255, 255, 0.7); + text-decoration: none; + font-size: var(--text-sm); + transition: var(--transition); +} + +.footer-contact-item:hover { + color: white; +} + +.footer-nav { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: clamp(24px, 5vw, 32px); +} + +.footer-nav-title { + font-weight: var(--font-bold); + color: white; + margin-bottom: 1rem; + font-size: var(--text-lg); +} + +.footer-nav-links { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.footer-nav-link { + color: rgba(255, 255, 255, 0.7); + text-decoration: none; + font-size: var(--text-sm); + transition: var(--transition); +} + +.footer-nav-link:hover { + color: white; + padding-left: 4px; +} + +.footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: clamp(16px, 3vw, 24px); + border-top: 1px solid rgba(255, 255, 255, 0.2); +} + +.footer-legal { + display: flex; + gap: 1.5rem; +} + +.footer-legal-link { + color: rgba(255, 255, 255, 0.6); + text-decoration: none; + font-size: var(--text-xs); + transition: var(--transition); +} + +.footer-legal-link:hover { + color: white; +} + +/* ================================================================ + RESPONSIVE DESIGN + ================================================================ */ + +@media (max-width: 1024px) { + .company-grid, .founder-grid, .cta-grid, .contact-grid { + grid-template-columns: 1fr; + text-align: center; + } + + .footer-main { + grid-template-columns: 1fr; + text-align: center; + } + + .footer-bottom { + flex-direction: column; + gap: 1rem; + text-align: center; + } +} + +/* ================================================================ + DIGITAL BRANDING PAGE STYLES - Exact copy from Django version + ================================================================ */ + +/* Hero Section - matches homepage hero */ +.digital-branding-hero { + position: relative; + background: var(--gradient-hero); + overflow: hidden; + min-height: 85vh; + display: flex; + align-items: center; + padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px) clamp(60px, 15vw, 100px); +} + +.hero-container { + max-width: 1280px; + margin: 0 auto; + text-align: center; + position: relative; + z-index: 10; + width: 100%; +} + +.trust-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(59, 130, 246, 0.08); + padding: 0.5rem 1.25rem; + border-radius: 50px; + margin-bottom: 2.5rem; + font-size: 0.875rem; + font-weight: 600; + color: var(--primary); + border: 1px solid rgba(59, 130, 246, 0.15); + backdrop-filter: blur(10px); +} + +.trust-badge-emoji { + font-size: 0.75rem; +} + +.hero-title { + font-weight: 800; + margin-bottom: 2.5rem; + line-height: 1.1; + letter-spacing: -0.02em; + font-size: clamp(36px, 8vw, 110px); + margin-bottom: clamp(24px, 6vw, 40px); +} + +.hero-title-gradient { + background: var(--gradient-primary); + background-size: 300% 300%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-title-normal { + color: var(--text-primary); +} + +.hero-description { + color: var(--text-secondary); + margin-bottom: 3.5rem; + max-width: 720px; + margin-left: auto; + margin-right: auto; + line-height: 1.7; + font-weight: 400; + font-size: clamp(1.1rem, 3vw, 1.4rem); + margin-bottom: clamp(32px, 8vw, 56px); + padding: 0 clamp(8px, 2vw, 16px); +} + +.hero-buttons { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 5rem; + gap: clamp(12px, 3vw, 20px); + margin-bottom: clamp(40px, 10vw, 80px); + padding: 0 clamp(8px, 2vw, 16px); +} + +.trust-indicators { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); + gap: clamp(16px, 4vw, 48px); + max-width: 600px; + margin: 0 auto; + padding: 0 clamp(8px, 2vw, 16px); +} + +.trust-card { + text-align: center; + background: rgba(255, 255, 255, 0.5); + border: 1px solid rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); + border-radius: 1rem; + padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 16px); +} + +.trust-number { + background: var(--text-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 800; + margin-bottom: 0.5rem; + font-size: clamp(1rem, 3vw, 1.2rem); +} + +.trust-text { + color: var(--text-secondary); + font-weight: 500; + letter-spacing: 0.01em; + font-size: clamp(12px, 3vw, 15px); +} + +/* Why Choose Us Section - matches company profile */ +.why-choose-us { + position: relative; + background: var(--company-gradient); + overflow: hidden; + padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px); +} + +.section-container { + max-width: 1200px; + margin: 0 auto; + position: relative; + z-index: 10; +} + +.section-header { + text-align: center; + margin-bottom: clamp(40px, 10vw, 80px); +} + +.section-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(30, 64, 175, 0.1); + padding: 0.5rem 1.25rem; + border-radius: 50px; + margin-bottom: 1.5rem; + border: 1px solid rgba(30, 64, 175, 0.2); +} + +.section-badge-icon { + font-size: 1rem; +} + +.section-badge-text { + font-size: 0.875rem; + font-weight: 600; + color: var(--primary); +} + +.section-title { + font-weight: 800; + color: var(--primary); + margin-bottom: 1rem; + text-align: center; + font-size: clamp(2rem, 5vw, 3.5rem); +} + +.section-subtitle { + font-size: 1.25rem; + color: var(--text-secondary); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +.why-choose-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); + gap: clamp(24px, 6vw, 40px); +} + +.choice-card { + background: white; + border-radius: clamp(16px, 4vw, 24px); + box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08); + text-align: center; + padding: clamp(24px, 6vw, 40px); + transition: all 0.2s ease; +} + +.choice-icon { + margin-bottom: 1.25rem; + font-size: clamp(2.5rem, 6vw, 3.5rem); + margin-bottom: clamp(16px, 4vw, 20px); +} + +.choice-title { + font-weight: bold; + color: var(--primary); + margin-bottom: 1rem; + font-size: clamp(1.2rem, 4vw, 1.5rem); + margin-bottom: clamp(12px, 3vw, 16px); +} + +.choice-description { + color: var(--text-secondary); + line-height: 1.6; + font-size: clamp(14px, 3.5vw, 18px); +} + +/* Our Process Section - matches services */ +.our-process { + background: var(--services-gradient); + padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px); +} + +.process-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); + gap: clamp(20px, 5vw, 32px); + margin-bottom: clamp(40px, 10vw, 60px); +} + +.process-step-card { + background: white; + border-radius: clamp(16px, 4vw, 20px); + box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08); + padding: clamp(24px, 6vw, 32px); + display: flex; + align-items: flex-start; + gap: clamp(16px, 4vw, 20px); + transition: all 0.2s ease; +} + +.step-number { + background: var(--gradient-primary); + color: white; + width: clamp(40px, 10vw, 50px); + height: clamp(40px, 10vw, 50px); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: clamp(16px, 4vw, 20px); + flex-shrink: 0; +} + +.step-content { + flex: 1; +} + +.step-title { + font-weight: bold; + color: var(--primary); + margin-bottom: 0.75rem; + font-size: clamp(1.1rem, 3.5vw, 1.3rem); +} + +.step-description { + color: var(--text-secondary); + line-height: 1.6; + font-size: clamp(14px, 3.5vw, 16px); +} + +/* RACE Framework */ +.race-framework { + background: white; + border-radius: clamp(16px, 4vw, 24px); + box-shadow: 0 12px 40px rgba(30, 64, 175, 0.08); + padding: clamp(24px, 6vw, 40px); +} + +.race-title { + text-align: center; + font-weight: bold; + color: var(--primary); + margin-bottom: clamp(20px, 5vw, 32px); + font-size: clamp(1.3rem, 4vw, 1.8rem); +} + +.race-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); + gap: clamp(16px, 4vw, 24px); +} + +.race-card { + text-align: center; + background: var(--background-light); + border-radius: clamp(12px, 3vw, 16px); + padding: clamp(16px, 4vw, 24px); + transition: all 0.2s ease; +} + +.race-phase { + margin-bottom: 0.75rem; +} + +.race-icon { + font-size: clamp(1.5rem, 4vw, 2rem); + margin-bottom: 0.5rem; + display: block; +} + +.race-phase h4 { + font-weight: bold; + color: var(--primary); + margin: 0; + font-size: clamp(1.1rem, 3.5vw, 1.3rem); +} + +.race-focus { + font-weight: 600; + color: var(--text-primary); + margin-bottom: 0.5rem; + font-size: clamp(14px, 3.5vw, 16px); +} + +.race-actions { + color: var(--text-secondary); + font-size: clamp(12px, 3vw, 14px); + line-height: 1.5; +} + +/* Branding Services Section - matches services */ +.branding-services { + background: var(--clients-gradient); + padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px); +} + +.services-title { + font-weight: bold; + text-align: center; + margin-bottom: 1rem; + color: var(--primary); + font-size: clamp(1.8rem, 5vw, 2.5rem); +} + +.services-subtitle { + text-align: center; + color: var(--text-secondary); + margin-bottom: 3rem; + font-size: clamp(16px, 4vw, 20px); + margin-bottom: clamp(24px, 6vw, 48px); +} + +.branding-services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); + gap: clamp(20px, 5vw, 32px); +} + +.service-card { + background: white; + border-radius: clamp(16px, 4vw, 20px); + box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08); + text-align: center; + padding: clamp(24px, 6vw, 32px); + transition: all 0.2s ease; +} + +.service-icon { + margin-bottom: 1.25rem; + font-size: clamp(2.5rem, 6vw, 3rem); + margin-bottom: clamp(16px, 4vw, 20px); +} + +.service-title { + font-weight: bold; + color: var(--primary); + margin-bottom: 1rem; + font-size: clamp(1.2rem, 4vw, 1.4rem); + margin-bottom: clamp(12px, 3vw, 16px); +} + +.service-description { + color: var(--text-secondary); + line-height: 1.6; + font-size: clamp(14px, 3.5vw, 16px); +} + +/* CTA Section - matches contact */ +.branding-cta { + background: var(--contact-gradient); + padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px); +} + +.cta-container { + max-width: 1200px; + margin: 0 auto; +} + +.cta-title { + font-weight: bold; + text-align: center; + color: var(--primary); + font-size: clamp(1.8rem, 5vw, 2.5rem); + margin-bottom: clamp(24px, 6vw, 48px); +} + +.cta-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); + gap: clamp(30px, 8vw, 60px); + align-items: start; +} + +.cta-content { + background: white; + border-radius: clamp(16px, 4vw, 20px); + box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08); + padding: clamp(24px, 6vw, 40px); +} + +.cta-content-title { + font-weight: bold; + color: var(--primary); + margin-bottom: 1rem; + font-size: clamp(1.3rem, 4vw, 1.6rem); +} + +.cta-description { + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 1.5rem; + font-size: clamp(14px, 3.5vw, 18px); +} + +.cta-features { + margin-bottom: 2rem; +} + +.cta-feature { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.75rem; + font-size: clamp(14px, 3.5vw, 16px); +} + +.feature-icon { + color: var(--success); + font-weight: bold; +} + +.cta-buttons { + display: flex; + flex-direction: column; + gap: clamp(12px, 3vw, 16px); +} + +.cta-btn { + padding: clamp(14px, 4vw, 16px) clamp(20px, 5vw, 24px); + border-radius: clamp(8px, 2vw, 12px); + font-weight: 600; + text-decoration: none; + text-align: center; + font-size: clamp(14px, 3.5vw, 16px); + transition: all 0.2s ease; + min-height: 48px; + display: flex; + align-items: center; + justify-content: center; +} + +.cta-btn.primary { + background: var(--gradient-primary); + color: white; + box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25); +} + +.cta-btn.primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35); +} + +.cta-btn.secondary { + background: var(--surface); + color: var(--primary); + border: 2px solid var(--border-light); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); +} + +.cta-btn.secondary:hover { + transform: translateY(-2px); + border-color: var(--primary); + background: rgba(59, 130, 246, 0.05); + box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15); +} + +.cta-info { + background: white; + border-radius: clamp(16px, 4vw, 20px); + box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08); + padding: clamp(24px, 6vw, 40px); +} + +.cta-info-title { + font-weight: bold; + color: var(--primary); + margin-bottom: 1.5rem; + font-size: clamp(1.2rem, 4vw, 1.5rem); + margin-bottom: clamp(16px, 4vw, 24px); +} + +.contact-item { + display: flex; + align-items: flex-start; + gap: clamp(12px, 3vw, 16px); + margin-bottom: clamp(20px, 5vw, 32px); +} + +.contact-icon { + background: var(--gradient-primary); + border-radius: clamp(8px, 2vw, 12px); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: clamp(40px, 10vw, 50px); + height: clamp(40px, 10vw, 50px); + font-size: clamp(16px, 4vw, 20px); +} + +.contact-details h4 { + font-weight: 600; + color: var(--primary); + margin-bottom: 0.5rem; + font-size: clamp(16px, 4vw, 19px); +} + +.contact-details p { + color: var(--text-secondary); + line-height: 1.6; + font-size: clamp(14px, 3.5vw, 16px); +} + +.contact-email { + color: var(--primary); + text-decoration: none; +} + +.contact-email:hover { + text-decoration: underline; +} + +.commitment-statement { + background: var(--services-gradient); + border-left: 4px solid var(--primary); + border-radius: clamp(12px, 3vw, 16px); + padding: clamp(16px, 4vw, 24px); + margin-top: clamp(20px, 5vw, 32px); +} + +.commitment-text { + color: var(--primary); + font-weight: 600; + text-align: center; + font-size: clamp(14px, 3.5vw, 18px); + line-height: 1.6; +} + +/* ================================================================ + HOMEPAGE STYLES - Exact copy from Django homepage.css + ================================================================ */ + +/* Override main-container for homepage full-width sections */ +.main-container { + max-width: none; + padding: 0; +} + +/* Hero Section */ +.hero { + position: relative; + background: var(--gradient-hero); + overflow: hidden; + min-height: 85vh; + display: flex; + align-items: center; + padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px) clamp(60px, 15vw, 100px); +} + +.hero-container { + max-width: 1280px; + margin: 0 auto; + text-align: center; + position: relative; + z-index: 10; + width: 100%; +} + +.trust-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(59, 130, 246, 0.08); + padding: 0.5rem 1.25rem; + border-radius: 50px; + margin-bottom: 2.5rem; + font-size: 0.875rem; + font-weight: 600; + color: var(--primary); + border: 1px solid rgba(59, 130, 246, 0.15); + backdrop-filter: blur(10px); +} + +.trust-badge-emoji { + font-size: 0.75rem; +} + +.hero-title { + font-weight: 800; + margin-bottom: 2.5rem; + line-height: 1.1; + letter-spacing: -0.02em; + font-size: clamp(36px, 8vw, 110px); + margin-bottom: clamp(24px, 6vw, 40px); +} + +.hero-title-gradient { + background: var(--gradient-primary); + background-size: 300% 300%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-title-normal { + color: var(--text-primary); +} + +.hero-description { + color: var(--text-secondary); + margin-bottom: 3.5rem; + max-width: 720px; + margin-left: auto; + margin-right: auto; + line-height: 1.7; + font-weight: 400; + font-size: clamp(1.1rem, 3vw, 1.4rem); + margin-bottom: clamp(32px, 8vw, 56px); + padding: 0 clamp(8px, 2vw, 16px); +} + +.hero-buttons { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 5rem; + gap: clamp(12px, 3vw, 20px); + margin-bottom: clamp(40px, 10vw, 80px); + padding: 0 clamp(8px, 2vw, 16px); +} + +.trust-indicators { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); + gap: clamp(16px, 4vw, 48px); + max-width: 600px; + margin: 0 auto; + padding: 0 clamp(8px, 2vw, 16px); +} + +.trust-card { + text-align: center; + background: rgba(255, 255, 255, 0.5); + border: 1px solid rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); + border-radius: 1rem; + padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 16px); +} + +.trust-number { + background: var(--text-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 800; + margin-bottom: 0.5rem; + font-size: clamp(1.8rem, 5vw, 2.5rem); +} + +.trust-text { + color: var(--text-secondary); + font-weight: 500; + letter-spacing: 0.01em; + font-size: clamp(12px, 3vw, 15px); +} + +/* Company Profile Section */ +.company-profile { + position: relative; + background: var(--company-gradient); + overflow: hidden; + padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px); +} + +.company-container { + max-width: 1200px; + margin: 0 auto; + position: relative; + z-index: 10; +} + +.section-header { + text-align: center; + margin-bottom: clamp(40px, 10vw, 80px); +} + +.section-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(30, 64, 175, 0.1); + padding: 0.5rem 1.25rem; + border-radius: 50px; + margin-bottom: 1.5rem; + border: 1px solid rgba(30, 64, 175, 0.2); +} + +.section-badge-icon { + font-size: 1rem; +} + +.section-badge-text { + font-size: 0.875rem; + font-weight: 600; + color: var(--primary); +} + +.section-title { + font-weight: 800; + color: var(--primary); + margin-bottom: 1rem; + text-align: center; + font-size: clamp(2rem, 5vw, 3.5rem); +} + +.section-subtitle { + font-size: 1.25rem; + color: var(--text-secondary); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +.company-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); + gap: clamp(40px, 10vw, 80px); + align-items: center; +} + +.company-content-card { + background: white; + border-radius: 1.5rem; + box-shadow: 0 20px 60px rgba(30, 64, 175, 0.08); + border: 1px solid rgba(255, 255, 255, 0.8); + position: relative; + padding: clamp(24px, 6vw, 48px); +} + +.decorative-corner { + position: absolute; + top: 0; + right: 0; + width: 80px; + height: 80px; + background: var(--gradient-primary); + border-top-right-radius: 1.5rem; + border-bottom-left-radius: 1.5rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; +} + +.company-content-title { + font-weight: bold; + color: var(--primary); + font-size: clamp(1.3rem, 4vw, 1.8rem); + margin-bottom: clamp(16px, 4vw, 24px); + margin-top: clamp(12px, 3vw, 20px); +} + +.company-content-text { + color: var(--text-secondary); + line-height: 1.8; + margin-bottom: clamp(20px, 5vw, 32px); + font-size: clamp(14px, 3.5vw, 18px); +} + +.company-badges { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); + gap: clamp(12px, 3vw, 16px); + margin-bottom: clamp(20px, 5vw, 32px); +} + +.company-badge { + color: white; + border-radius: 0.75rem; + text-align: center; + font-size: clamp(12px, 3vw, 14px); + font-weight: 600; + padding: clamp(12px, 3vw, 16px); +} + +.company-badge-primary { + background: var(--gradient-primary); + box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3); +} + +.company-badge-purple { + background: var(--badge-purple); + box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3); +} + +.company-badge-orange { + background: var(--badge-orange); + box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3); +} + +.company-badge-icon { + margin-bottom: 0.5rem; + font-size: clamp(18px, 4vw, 24px); +} + +.company-visual { + position: relative; +} + +.main-visual { + width: 100%; + max-width: 500px; + background: var(--visual-gradient); + border-radius: clamp(16px, 4vw, 32px); + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 32px 80px rgba(30, 64, 175, 0.2); + position: relative; + margin: 0 auto; + overflow: hidden; + height: clamp(250px, 50vw, 400px); +} + +.main-visual-icon { + color: white; + position: relative; + z-index: 10; + text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + font-size: clamp(3rem, 8vw, 5rem); +} + +.floating-element { + position: absolute; + background: white; + border-radius: clamp(8px, 2vw, 16px); + box-shadow: 0 8px 32px rgba(30, 64, 175, 0.15); + display: flex; + align-items: center; + justify-content: center; +} + +.floating-element-1 { + top: 10%; + right: clamp(-20%, -10%, -5%); + width: clamp(50px, 12vw, 80px); + height: clamp(50px, 12vw, 80px); + font-size: clamp(1.2rem, 3vw, 2rem); +} + +.floating-element-2 { + bottom: 15%; + left: clamp(-10%, -5%, 0%); + width: clamp(40px, 10vw, 60px); + height: clamp(40px, 10vw, 60px); + border-radius: 50%; + box-shadow: 0 8px 32px rgba(64, 224, 208, 0.15); + font-size: clamp(1rem, 2.5vw, 1.5rem); +} + +.achievement-strip { + background: white; + border-radius: clamp(12px, 3vw, 20px); + box-shadow: 0 16px 48px rgba(30, 64, 175, 0.08); + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); + gap: clamp(16px, 4vw, 32px); + align-items: center; + margin-top: clamp(40px, 10vw, 80px); + padding: clamp(20px, 5vw, 32px); +} + +.achievement-item { + text-align: center; +} + +.achievement-icon { + margin-bottom: 0.5rem; + font-size: clamp(1.5rem, 4vw, 2rem); +} + +.achievement-title { + font-weight: 600; + color: var(--primary); + font-size: clamp(14px, 3.5vw, 18px); +} + +.achievement-text { + color: var(--text-secondary); + font-size: clamp(12px, 3vw, 14px); +} + +/* Services Section */ +.services { + background: var(--services-gradient); + padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px); +} + +.services-container { + max-width: 1200px; + margin: 0 auto; +} + +.services-title { + font-weight: bold; + text-align: center; + margin-bottom: 1rem; + color: var(--primary); + font-size: clamp(1.8rem, 5vw, 2.5rem); +} + +.services-subtitle { + text-align: center; + color: var(--text-secondary); + margin-bottom: 3rem; + font-size: clamp(16px, 4vw, 20px); + margin-bottom: clamp(24px, 6vw, 48px); +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); + gap: clamp(16px, 4vw, 32px); +} + +.service-card { + background: white; + border-radius: clamp(12px, 3vw, 20px); + box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08); + text-align: center; + padding: clamp(20px, 5vw, 40px); +} + +.service-icon { + margin-bottom: 1.25rem; + font-size: clamp(2rem, 6vw, 3rem); + margin-bottom: clamp(12px, 3vw, 20px); +} + +.service-title { + font-weight: bold; + color: var(--primary); + margin-bottom: 1rem; + font-size: clamp(1.2rem, 4vw, 1.5rem); + margin-bottom: clamp(12px, 3vw, 16px); +} + +.service-description { + color: var(--text-secondary); + line-height: 1.6; + font-size: clamp(14px, 3.5vw, 18px); +} + +/* Clients Section */ +.clients { + background: var(--clients-gradient); + padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px); +} + +.clients-container { + max-width: 1200px; + margin: 0 auto; +} + +.clients-title { + font-weight: bold; + text-align: center; + color: var(--primary); + font-size: clamp(1.8rem, 5vw, 2.5rem); + margin-bottom: clamp(24px, 6vw, 48px); +} + +.clients-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); + gap: clamp(16px, 4vw, 32px); +} + +.client-card { + background: white; + border-radius: clamp(12px, 3vw, 16px); + box-shadow: 0 4px 16px rgba(30, 64, 175, 0.07); + text-align: center; + padding: clamp(20px, 5vw, 32px); +} + +.client-icon { + margin-bottom: 0.5rem; + font-size: clamp(1.5rem, 4vw, 2rem); +} + +.client-name { + font-weight: 600; + color: var(--primary); + margin-bottom: 0.375rem; + font-size: clamp(14px, 3.5vw, 18px); +} + +.client-industry { + color: var(--text-secondary); + font-size: clamp(12px, 3vw, 16px); +} + +/* Founder Section */ +.founder { + background: white; + padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px); +} + +.founder-container { + max-width: 1200px; + margin: 0 auto; +} + +.founder-title { + font-weight: bold; + text-align: center; + color: var(--primary); + font-size: clamp(1.8rem, 5vw, 2.5rem); + margin-bottom: clamp(24px, 6vw, 48px); +} + +.founder-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); + gap: clamp(30px, 8vw, 60px); + align-items: center; +} + +.founder-card-container { + order: 2; +} + +.founder-card { + width: 100%; + max-width: 400px; + margin: 0 auto; + background: var(--founder-gradient); + border-radius: clamp(16px, 4vw, 24px); + text-align: center; + color: white; + box-shadow: 0 20px 40px rgba(30, 64, 175, 0.15); + padding: clamp(24px, 6vw, 40px); +} + +.founder-avatar { + width: clamp(60px, 15vw, 80px); + height: clamp(60px, 15vw, 80px); + margin-bottom: 1.25rem; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)); + border-radius: 12px; + border: 2px solid rgba(255, 255, 255, 0.3); + margin-left: auto; + margin-right: auto; +} + +.avatar-initials { + font-size: clamp(18px, 5vw, 24px); + font-weight: 700; + color: white; + letter-spacing: 1px; +} + +.founder-name { + font-weight: bold; + margin-bottom: 0.5rem; + font-size: clamp(1.3rem, 4vw, 1.8rem); +} + +.founder-role { + opacity: 0.9; + margin-bottom: 1rem; + font-size: clamp(14px, 3.5vw, 18px); +} + +.founder-badges { + display: flex; + gap: clamp(8px, 2vw, 12px); + flex-wrap: wrap; + justify-content: center; +} + +.founder-badge { + background: rgba(255, 255, 255, 0.2); + border-radius: clamp(16px, 4vw, 20px); + font-weight: 600; + padding: clamp(6px, 2vw, 8px) clamp(12px, 3vw, 16px); + font-size: clamp(10px, 2.5vw, 12px); +} + +.founder-content { + order: 1; +} + +.founder-text { + color: var(--text-secondary); + line-height: 1.8; + margin-bottom: 1.5rem; + font-size: clamp(16px, 4vw, 19px); + margin-bottom: clamp(16px, 4vw, 24px); +} + +.founder-text:last-of-type { + margin-bottom: 2rem; + margin-bottom: clamp(20px, 5vw, 32px); +} + +.founder-quote { + background: var(--services-gradient); + border-left: 4px solid var(--primary); + border-radius: clamp(12px, 3vw, 16px); + padding: clamp(16px, 4vw, 24px); +} + +.founder-quote-text { + color: var(--primary); + font-weight: 600; + font-style: italic; + font-size: clamp(14px, 3.5vw, 18px); +} + +/* Contact Section */ +.contact { + background: var(--contact-gradient); + padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px); +} + +.contact-container { + max-width: 1200px; + margin: 0 auto; +} + +.contact-title { + font-weight: bold; + text-align: center; + color: var(--primary); + font-size: clamp(1.8rem, 5vw, 2.5rem); + margin-bottom: clamp(24px, 6vw, 48px); +} + +.contact-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); + gap: clamp(30px, 8vw, 60px); + align-items: start; +} + +.contact-form { + background: white; + border-radius: clamp(16px, 4vw, 20px); + box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08); + padding: clamp(24px, 6vw, 40px); +} + +.form-title { + font-weight: bold; + color: var(--primary); + margin-bottom: 1.5rem; + font-size: clamp(1.2rem, 4vw, 1.5rem); + margin-bottom: clamp(16px, 4vw, 24px); +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-label { + display: block; + margin-bottom: 0.5rem; + color: var(--primary); + font-weight: 600; +} + +.form-input, +.form-textarea { + width: 100%; + border: 2px solid var(--border-light); + border-radius: clamp(8px, 2vw, 12px); + padding: clamp(12px, 3vw, 14px); + font-size: clamp(14px, 3.5vw, 16px); + transition: border-color 0.2s; + box-sizing: border-box; +} + +.form-input:focus, +.form-textarea:focus { + outline: none; + border-color: var(--primary); +} + +.form-textarea { + resize: vertical; + min-height: 120px; +} + +.form-submit { + width: 100%; + background: var(--gradient-primary); + color: white; + font-weight: 600; + border: none; + cursor: pointer; + box-shadow: 0 4px 16px rgba(30, 64, 175, 0.20); + border-radius: clamp(8px, 2vw, 12px); + min-height: 48px; + padding: clamp(14px, 4vw, 16px); + font-size: clamp(14px, 3.5vw, 18px); + transition: all 0.2s ease; +} + +.form-submit:hover { + transform: translateY(-1px); + box-shadow: 0 6px 16px rgba(30, 64, 175, 0.30); + background: var(--gradient-success); +} + +.form-submit:active { + transform: translateY(0px); + box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25); +} + +.contact-info { + background: white; + border-radius: clamp(16px, 4vw, 20px); + box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08); + padding: clamp(24px, 6vw, 40px); +} + +.contact-info-title { + font-weight: bold; + color: var(--primary); + margin-bottom: 1.5rem; + font-size: clamp(1.2rem, 4vw, 1.5rem); + margin-bottom: clamp(16px, 4vw, 24px); +} + +.contact-item { + display: flex; + align-items: flex-start; + gap: clamp(12px, 3vw, 16px); + margin-bottom: clamp(20px, 5vw, 32px); +} + +.contact-icon { + background: var(--gradient-primary); + border-radius: clamp(8px, 2vw, 12px); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: clamp(40px, 10vw, 50px); + height: clamp(40px, 10vw, 50px); + font-size: clamp(16px, 4vw, 20px); +} + +.contact-details h4 { + font-weight: 600; + color: var(--primary); + margin-bottom: 0.5rem; + font-size: clamp(16px, 4vw, 19px); +} + +.contact-details p { + color: var(--text-secondary); + line-height: 1.6; + font-size: clamp(14px, 3.5vw, 16px); +} + +.contact-email { + color: var(--primary); + text-decoration: none; +} + +.commitment-statement { + background: var(--services-gradient); + border-left: 4px solid var(--primary); + border-radius: clamp(12px, 3vw, 16px); + padding: clamp(16px, 4vw, 24px); + margin-top: clamp(20px, 5vw, 32px); +} + +/* Form validation styles for homepage */ +.form-messages { + margin-bottom: 20px; + padding: 12px; + border-radius: 8px; + font-size: 14px; + font-weight: 500; +} + +.form-messages.success { + background: rgba(16, 185, 129, 0.1); + color: #059669; + border: 1px solid rgba(16, 185, 129, 0.3); +} + +.form-messages.error { + background: rgba(239, 68, 68, 0.1); + color: #dc2626; + border: 1px solid rgba(239, 68, 68, 0.3); +} + +.field-error { + color: #dc2626; + font-size: 12px; + margin-top: 4px; + min-height: 16px; +} + +.char-counter { + text-align: right; + font-size: 12px; + color: #6b7280; + margin-top: 4px; +} + +.char-counter.warning { + color: #d97706; +} + +.char-counter.error { + color: #dc2626; +} + +.form-input.error, .form-textarea.error { + border-color: #dc2626; + box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.1); +} + +.spinner { + display: inline-block; + width: 12px; + height: 12px; + border: 2px solid rgba(255, 255, 255, 0.3); + border-radius: 50%; + border-top: 2px solid white; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.btn-loading { + display: flex; + align-items: center; + gap: 8px; +} + +/* Mobile responsive adjustments for homepage */ +@media (max-width: 767px) { + .founder-card-container { + order: 1; + } + + .founder-content { + order: 2; + } +} + +@media (max-width: 768px) { + .services-grid, .branding-services-grid, .why-choose-grid, .excellence-grid, .framework-grid, .portfolio-grid { + grid-template-columns: 1fr; + } + + .clients-grid { + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + } + + .achievement-strip, .stats-grid { + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + } + + .race-grid { + grid-template-columns: 1fr; + } + + .process-grid { + grid-template-columns: 1fr; + } + + .process-step-card { + flex-direction: column; + text-align: center; + } + + .founder-grid { + grid-template-columns: 1fr; + } + + .cta-buttons { + justify-content: center; + } +} + +@media (max-width: 480px) { + .trust-indicators { + grid-template-columns: 1fr; + } + + .hero-buttons { + flex-direction: column; + align-items: center; + } + + .btn-primary, .btn-secondary { + width: 100%; + max-width: 280px; + } + + .company-badges { + justify-content: center; + } +} + +/* ================================================================ + MINIMAL BLOG STYLES + ================================================================ */ + +/* Blog page background emphasis */ +body.blog-context { + /* Solid background as requested */ + --background: #EAF1FF; + background: #EAF1FF; +} + +/* Centered blog surface card */ +.blog-surface { + max-width: 1100px; + margin: 12px auto 20px; + background: var(--surface); + border: 1px solid var(--outline); + border-radius: 20px; + box-shadow: 0 12px 30px rgba(0,0,0,0.08); + overflow: hidden; +} +.blog-surface .container { padding-left: 28px; padding-right: 28px; } +.post-surface .container { padding-left: 28px; padding-right: 28px; } +@media (max-width: 480px) { + .blog-surface .container, + .post-surface .container { padding-left: 16px; padding-right: 16px; } +} + +/* Clean Blog Header (smaller) */ +.blog-surface .blog-header { + background: linear-gradient(180deg, var(--surface) 0%, var(--surface-variant) 100%); +} + +.blog-header { + padding: calc(var(--header-height) + 0px) 0 10px; + background: transparent; /* inside card */ + border-bottom: 1px solid var(--outline); +} + +.blog-intro { + text-align: center; + margin-bottom: 8px; +} + +.blog-title { + font-size: 42px; + font-weight: 800; + color: var(--text-primary); + margin-bottom: 8px; + letter-spacing: -0.02em; +} + +.blog-subtitle { + font-size: 16px; + color: var(--text-secondary); + font-weight: 400; + line-height: 1.5; + max-width: 500px; + margin: 0 auto; +} + +/* Minimal Search */ +.search-container { + max-width: 400px; + margin: 0 auto; +} + +.search-field { + width: 100%; + padding: 14px 16px; + font-size: 16px; + border: 1px solid var(--outline); + border-radius: 8px; + background: var(--surface); + color: var(--text-primary); + transition: border-color 0.2s ease; +} + +.search-field:focus { + outline: none; + border-color: var(--primary); +} + +.search-field::placeholder { + color: var(--text-muted); +} + +/* Simple Category Navigation */ +.category-nav { + border-bottom: 1px solid var(--outline); + background: transparent; /* inside card */ + padding: 8px 0; +} + +.category-list { + display: flex; + justify-content: center; + gap: 36px; + list-style: none; + margin: 0; + padding: 0; +} + +.category-link { + background: none; + border: none; + color: var(--text-secondary); + font-size: 15px; + font-weight: 500; + cursor: pointer; + padding: 6px 0; + position: relative; + transition: color 0.2s ease; +} + +.category-link:hover, +.category-link.active { + color: var(--text-primary); +} + +.category-link.active::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: var(--primary); +} + +/* Minimal Article List */ +.article-list { + padding: 28px 0 56px; + background: transparent; /* inside card */ +} + +/* Sticky category bar */ +.category-nav { + position: sticky; + top: var(--header-height); + z-index: var(--z-sticky); + backdrop-filter: saturate(140%) blur(6px); + box-shadow: 0 1px 0 rgba(0,0,0,0.04); +} + +.category-link:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; + border-radius: 6px; +} + +.articles { + max-width: 960px; + margin: 0 auto; +} + +/* Article Item */ +.article-item { + padding: 32px 0; + border-bottom: 1px solid var(--outline); + transition: all 0.2s ease; +} + +.article-item:last-child { + border-bottom: none; +} + +.article-item:hover { + background: rgba(59, 130, 246, 0.04); + border-radius: 8px; + transform: translateY(-1px); + transition: var(--transition); +} + +.article-meta { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 8px; + font-size: 14px; + color: var(--text-muted); + font-weight: 500; +} + +.article-category { + color: var(--primary); + text-transform: uppercase; + letter-spacing: 0.5px; + font-size: 12px; + font-weight: 600; +} + +.article-title a { + border-radius: 6px; +} + +.article-title a:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; +} + +.article-title { + font-size: 22px; + font-weight: 750; + color: var(--text-primary); + margin-bottom: 10px; + line-height: 1.28; + letter-spacing: -0.012em; +} + +.article-title:hover { + color: var(--primary); +} + +.article-excerpt { + font-size: 16px; + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 12px; +} + +.article-footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 8px; +} + +.article-author { + font-size: 14px; + color: var(--text-muted); + font-weight: 500; +} + +.article-link { + color: var(--primary); + text-decoration: none; + font-weight: 600; + font-size: 14px; + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 6px; + border-radius: 6px; + transition: var(--transition); +} + +.article-link::after { + content: '→'; + transition: transform 0.2s ease; +} + +.article-link:hover { + background: rgba(59,130,246,0.06); +} + +.article-link:hover::after { + transform: translateX(2px); +} + +.article-link:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; +} + +/* Featured Article */ +.article-item.featured { + padding: 40px 0; + border-bottom: 2px solid var(--outline); +} + +.article-item.featured .article-title { + font-size: 28px; + margin-bottom: 12px; +} + +.article-item.featured .article-excerpt { + font-size: 17px; + margin-bottom: 20px; +} + +/* Simple States */ +.loading-state { + text-align: center; + padding: 24px 0 48px; + color: var(--text-muted); + font-size: 16px; +} + +/* Skeleton loader */ +.skeleton { + display: grid; + gap: 20px; + max-width: 800px; + margin: 0 auto; + padding: 12px 0; +} +.skeleton-item { + display: grid; + gap: 10px; +} +.skeleton-line { + height: 12px; + border-radius: 6px; + background: linear-gradient(90deg, var(--surface-variant) 25%, rgba(0,0,0,0.05) 37%, var(--surface-variant) 63%); + background-size: 400% 100%; + animation: skeleton-shimmer 1.4s ease infinite; +} +.skeleton-line.sm { width: 35%; } +.skeleton-line.md { width: 65%; } +.skeleton-line.lg { width: 95%; height: 14px; } + +@keyframes skeleton-shimmer { + 0% { background-position: 100% 0; } + 100% { background-position: -100% 0; } +} + +.empty-state { + text-align: center; + padding: 80px 0; + color: var(--text-muted); + font-size: 16px; +} + +.reset-filters { + color: var(--primary); + background: none; + border: none; + text-decoration: underline; + cursor: pointer; + font-size: inherit; +} + +/* Newsletter (match site aesthetic) */ +.newsletter { + background: var(--blog-hero-gradient); + padding: 64px 0; + text-align: center; + border-top: 1px solid var(--outline); +} + +.newsletter h2 { + font-size: clamp(22px, 3.5vw, 28px); + font-weight: 800; + color: var(--text-primary); + margin-bottom: 8px; + letter-spacing: -0.02em; +} + +.newsletter p { + font-size: 16px; + color: var(--text-secondary); + margin-bottom: 20px; +} + +.newsletter-form { + display: flex; + gap: 12px; + max-width: 560px; + margin: 0 auto; + background: #fff; + border: 1px solid var(--outline); + border-radius: var(--radius-full); + padding: 6px; +} + +.email-input { + flex: 1; + padding: 12px 14px; + font-size: 16px; + border: 1px solid transparent; + background: transparent; + color: var(--text-primary); +} + +.email-input:focus { + outline: none; + border-color: var(--primary); +} + +.subscribe-btn { + padding: 12px 18px; + background: var(--gradient-primary); + color: #fff; + border: none; + font-size: 15px; + font-weight: 700; + cursor: pointer; + border-radius: var(--radius-full); + transition: var(--transition); +} + +.subscribe-btn:hover { + transform: translateY(-1px); +} + +/* Brutalist Blog Responsive */ +@media (max-width: 768px) { + .blog-title { + font-size: 2.5rem; + } + + .article-title { + font-size: 24px; + } +} + +@media (max-width: 480px) { + .blog-title { + font-size: 2rem; + } + + .article-title { + font-size: 20px; + } + + .newsletter-form { + flex-direction: column; + gap: 8px; + border-radius: var(--radius-lg); + padding: 8px; + } + + .subscribe-btn { + width: 100%; + border-radius: var(--radius-md); + } +} + +/* ================================================================ + BLOG POST STYLES + ================================================================ */ + +/* Reading progress */ +.reading-progress { + position: fixed; + top: 0; + left: 0; + height: 3px; + width: 0; + background: var(--primary); + z-index: var(--z-fixed); + transition: width 0.1s linear; +} + +/* Post surface card (individual article) */ +.post-surface { + max-width: 1100px; + margin: 12px auto 20px; + background: var(--surface); + border: 1px solid var(--outline); + border-radius: 20px; + box-shadow: 0 12px 30px rgba(0,0,0,0.08); + overflow: hidden; +} +.post-surface .blog-post { background: transparent; } +.post-surface .related-articles { background: transparent; } +.post-surface .newsletter-section { background: transparent; border-top: 1px solid var(--outline); } +.post-surface .article-header { + background: linear-gradient(180deg, var(--surface) 0%, var(--surface-variant) 100%); + border-bottom: 1px solid var(--outline); + padding-top: var(--space-xl); + padding-bottom: var(--space-lg); +} + +/* Refined post header and typography */ +.blog-post .article-header { + max-width: 800px; + margin: 0 auto var(--space-xxl); +} + +.blog-post .article-title { + font-weight: 850; + font-size: clamp(28px, 4.5vw, 40px); + line-height: 1.2; + letter-spacing: -0.02em; + margin: var(--space-md) 0 var(--space-sm); + font-weight: var(--font-extrabold, 800); +} + +.blog-post .article-excerpt { + color: var(--text-secondary); + font-size: clamp(16px, 2.2vw, 18px); + line-height: var(--leading-relaxed); + max-width: 65ch; + margin: 0 auto var(--space-lg); +} + +.blog-post .breadcrumb { + justify-content: center; + margin-bottom: var(--space-lg); + font-size: var(--text-sm); +} + +/* Content polish */ +.blog-post .article-content a { + color: var(--primary); + text-decoration: underline; + text-underline-offset: 3px; + text-decoration-thickness: 1.5px; + text-decoration-color: var(--primary); +} +.blog-post .article-content a:hover { + color: var(--primary-dark); + text-decoration-thickness: 2px; +} + +.blog-post .article-content img, +.blog-post .article-content video { + max-width: 100%; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); +} + +.blog-post .article-content figure { + margin: var(--space-xl) 0; + text-align: center; +} +.blog-post .article-content figcaption { + color: var(--text-muted); + font-size: var(--text-sm); + margin-top: var(--space-sm); +} + +/* Subtle code/blockquote refinements */ +.blog-post .article-content pre { + background: var(--surface-variant); + border: 1px solid var(--outline); +} +.blog-post .article-content blockquote { + background: rgba(59, 130, 246, 0.06); +} + +/* ================================================================ + BLOG POST STYLES + ================================================================ */ + +/* Article Hero Section */ +.article-hero { + background: var(--gradient-hero); + padding: calc(var(--header-height) + var(--space-xxl)) 0 var(--space-xl); + position: relative; + overflow: hidden; +} + +.article-hero::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(59, 130, 246, 0.03) 0%, transparent 70%); + animation: float 25s ease-in-out infinite; +} + +/* Enhanced Breadcrumb */ +.breadcrumb { + display: flex; + align-items: center; + gap: var(--space-sm); + font-size: var(--text-sm); + color: var(--text-muted); + margin-bottom: var(--space-xl); + font-weight: var(--font-medium); +} + +.breadcrumb a { + color: var(--primary); + text-decoration: none; + transition: var(--transition); + padding: var(--space-xs) var(--space-sm); + border-radius: var(--radius-sm); +} + +.breadcrumb a:hover { + background: rgba(59, 130, 246, 0.1); + color: var(--primary-dark); +} + +.breadcrumb span { + color: var(--text-muted); +} + +/* Enhanced Article Header */ +.article-header { + text-align: center; + max-width: 900px; + margin: 0 auto; +} + +.article-meta { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-xl); + margin-bottom: var(--space-xl); + font-size: var(--text-sm); + color: var(--text-muted); + flex-wrap: wrap; +} + +.article-category { + display: flex; + align-items: center; + gap: var(--space-sm); + background: var(--gradient-primary); + color: white; + padding: var(--space-sm) var(--space-lg); + border-radius: var(--radius-full); + font-weight: var(--font-bold); + text-transform: uppercase; + letter-spacing: 1px; + font-size: var(--text-sm); + box-shadow: var(--shadow-md); +} + +.category-icon { + font-size: var(--text-lg); +} + +.article-author-section { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-lg); + margin-top: var(--space-xl); +} + +.author-avatar { + width: 60px; + height: 60px; + background: var(--gradient-primary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-2xl); + box-shadow: var(--shadow-lg); +} + +.author-info { + text-align: left; +} + +.author-name { + display: block; + font-size: var(--text-lg); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: var(--space-xs); +} + +.author-title { + display: block; + font-size: var(--text-sm); + color: var(--text-secondary); + font-weight: var(--font-medium); +} + +/* Blog Post Layout */ +.blog-post { + background: var(--surface); +} + +.blog-post .container { + max-width: 760px; + padding: var(--space-xxxl) var(--space-lg); + margin: 0 auto; +} + +/* Enhanced Article Image */ +.article-image-section { + margin-bottom: var(--space-xxxl); + margin-left: -28px; + margin-right: -28px; +} + +.article-image { + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: var(--shadow-xl); + position: relative; + width: 100%; +} + +.article-image img, +.article-image .featured-image { + width: 100%; + height: auto; + display: block; +} + +.article-image-placeholder { + width: 100%; + height: 450px; + background: var(--visual-gradient); + display: flex; + align-items: center; + justify-content: center; + color: white; + position: relative; + overflow: hidden; +} + +.article-image-placeholder::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%); +} + +.image-content { + text-align: center; + z-index: 1; + position: relative; +} + +.image-icon { + font-size: 4rem; + margin-bottom: var(--space-lg); + opacity: 0.9; +} + +.image-content h3 { + font-size: var(--text-3xl); + font-weight: var(--font-bold); + margin-bottom: var(--space-md); + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.image-content p { + font-size: var(--text-lg); + opacity: 0.9; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +/* Article Content */ +.article-content { + line-height: var(--leading-relaxed); + color: var(--text-primary); + margin-bottom: var(--space-xxxl); +} + +.article-content h2 { + letter-spacing: -0.01em; + scroll-margin-top: 88px; + font-size: var(--text-3xl); + font-weight: var(--font-bold); + color: var(--text-primary); + margin: var(--space-xxxl) 0 var(--space-lg); + line-height: var(--leading-tight); +} + +.article-content h3 { + letter-spacing: -0.005em; + scroll-margin-top: 88px; + font-size: var(--text-2xl); + font-weight: var(--font-semibold); + color: var(--text-primary); + margin: var(--space-xl) 0 var(--space-md); + line-height: var(--leading-tight); +} + +.article-content h4 { + font-size: var(--text-xl); + font-weight: var(--font-semibold); + color: var(--text-primary); + margin: var(--space-lg) 0 var(--space-md); +} + +.article-content p { + margin-bottom: var(--space-xl); + font-size: clamp(17px, 1.6vw, 19px); +} + +.article-content ul, +.article-content ol { + margin-bottom: var(--space-xl); + padding-left: var(--space-xl); +} + +.article-content li { + line-height: 1.8; +} + +.article-content li::marker { + color: var(--primary); + font-weight: var(--font-semibold); +} + +.article-content li { + margin-bottom: var(--space-sm); + font-size: var(--text-lg); +} + +.article-content strong { + font-weight: var(--font-semibold); + color: var(--text-primary); +} + +.article-content blockquote { + border-left: 4px solid var(--primary); + background: var(--surface-variant); + padding: var(--space-lg); + margin: var(--space-xl) 0; + border-radius: var(--radius-md); + font-style: italic; +} + +.article-content code { + background: var(--surface-variant); + padding: var(--space-xs) var(--space-sm); + border-radius: var(--radius-xs); + font-family: var(--font-mono); + font-size: var(--text-sm); + color: var(--primary); +} + +.article-content pre { + background: var(--surface-variant); + padding: var(--space-lg); + border-radius: var(--radius-md); + overflow-x: auto; + margin: var(--space-lg) 0; +} + +.article-content pre code { + background: none; + padding: 0; + color: var(--text-primary); +} + +/* Article Footer */ +.article-footer { + padding-top: var(--space-xl); + border-top: 1px solid var(--outline); + margin-bottom: var(--space-xxxl); +} + +.article-tags { + margin-bottom: var(--space-xl); +} + +.tag { + display: inline-block; + background: var(--surface-variant); + color: var(--text-secondary); + padding: var(--space-xs) var(--space-sm); + margin-right: var(--space-sm); + margin-bottom: var(--space-sm); + border-radius: var(--radius-sm); + font-size: var(--text-sm); + text-decoration: none; + border: 1px solid var(--outline); + transition: var(--transition); +} + +.tag:hover { + background: var(--primary); + color: white; + border-color: var(--primary); +} + +.article-share h4 { + color: var(--text-primary); + margin-bottom: var(--space-md); + font-size: var(--text-lg); + font-weight: var(--font-semibold); +} + +.share-buttons { + display: flex; + gap: var(--space-md); +} + +.share-btn { + padding: var(--space-sm) var(--space-lg); + background: var(--surface-variant); + color: var(--text-secondary); + text-decoration: none; + border-radius: var(--radius-md); + font-weight: var(--font-medium); + transition: var(--transition); + border: 1px solid var(--outline); +} + +.share-btn:hover { + background: var(--primary); + color: white; + border-color: var(--primary); +} + +.article-content pre { + background: var(--surface-variant); + padding: var(--space-lg); + border-radius: var(--radius-md); + overflow-x: auto; + margin: var(--space-lg) 0; +} + +.article-content pre code { + background: none; + padding: 0; + color: var(--text-primary); +} + +/* Article Footer */ +.article-footer { + padding-top: var(--space-xl); + border-top: 1px solid var(--outline); + margin-bottom: var(--space-xxxl); +} + +.article-tags { + margin-bottom: var(--space-xl); +} + +.tag { + display: inline-block; + background: var(--surface-variant); + color: var(--text-secondary); + padding: var(--space-xs) var(--space-sm); + margin-right: var(--space-sm); + margin-bottom: var(--space-sm); + border-radius: var(--radius-sm); + font-size: var(--text-sm); + text-decoration: none; + border: 1px solid var(--outline); + transition: var(--transition); +} + +.tag:hover { + background: var(--primary); + color: white; + border-color: var(--primary); +} + +.article-share h4 { + color: var(--text-primary); + margin-bottom: var(--space-md); + font-size: var(--text-lg); + font-weight: var(--font-semibold); +} + +.share-buttons { + display: flex; + gap: var(--space-md); +} + +.share-btn { + padding: var(--space-sm) var(--space-lg); + background: var(--surface-variant); + color: var(--text-secondary); + text-decoration: none; + border-radius: var(--radius-md); + font-weight: var(--font-medium); + transition: var(--transition); + border: 1px solid var(--outline); +} + +.share-btn:hover { + background: var(--primary); + color: white; + border-color: var(--primary); +} + +/* Related Articles */ +.related-articles { + background: var(--background-light); + padding: var(--space-xxxl) 0; +} + +/* Inside post card: cleaner separator and spacing */ +.post-surface .related-articles { + background: transparent; + border-top: 1px solid var(--outline); + padding: var(--space-xxl) 0; +} + +.related-articles h3 { + text-align: center; + font-size: var(--text-3xl); + font-weight: var(--font-bold); + color: var(--text-primary); + margin-bottom: var(--space-xl); +} + +.related-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-xl); + max-width: 1200px; + margin: 0 auto; +} + +@media (min-width: 768px) { + .related-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Related card UI */ +.related-card { + background: var(--surface); + border: 1px solid var(--outline); + border-radius: var(--radius-lg); + padding: var(--space-lg); + box-shadow: var(--shadow-sm); + transition: var(--transition); +} +.related-card:hover { + transform: translateY(-1px); + box-shadow: var(--shadow-md); +} +.related-meta { + display: flex; + flex-wrap: wrap; + gap: 12px; + color: var(--text-muted); + font-size: var(--text-sm); + margin-bottom: var(--space-sm); +} +.related-category { + color: var(--primary); + text-transform: uppercase; + letter-spacing: 0.5px; + font-weight: var(--font-semibold); +} +.related-title { + margin: 0 0 var(--space-sm) 0; + font-size: var(--text-xl); + font-weight: var(--font-semibold); + color: var(--text-primary); +} +.related-link { + color: inherit; + text-decoration: none; +} +.related-link:hover { color: var(--primary); } +.related-excerpt { + color: var(--text-secondary); + margin: 0 0 var(--space-md) 0; +} +.related-footer { + display: flex; + justify-content: space-between; + align-items: center; +} +.related-author { + color: var(--text-muted); + font-size: var(--text-sm); +} +.related-read { + color: var(--primary); + text-decoration: none; + font-weight: var(--font-semibold); +} +.related-read:hover { text-decoration: underline; } + +/* Article Responsive Design */ +@media (max-width: 768px) { + .blog-post .container { + padding: var(--space-xl) var(--space-md); + } + + .article-meta { + flex-direction: column; + gap: var(--space-sm); + } + + .article-title { + font-size: var(--text-3xl); + } + + .article-excerpt { + font-size: var(--text-lg); + } + + .article-content h2 { + font-size: var(--text-2xl); + } + + .article-content h3 { + font-size: var(--text-xl); + } + + .article-content p, + .article-content li { + font-size: var(--text-base); + } + + .article-image-placeholder { + height: 250px; + font-size: var(--text-lg); + } + + .share-buttons { + flex-wrap: wrap; + } + + .related-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .breadcrumb { + font-size: var(--text-xs); + } + + .article-title { + font-size: var(--text-2xl); + } + + .article-content { + font-size: var(--text-sm); + } + + .article-image-placeholder { + height: 200px; + } +} + +/* Responsive adjustments for full-width blog images */ +@media (max-width: 480px) { + .article-image-section { + margin-left: -16px; + margin-right: -16px; + } +} + +/* Ensure full-width images work with both real images and placeholders */ +.article-image .featured-image, +.article-image .article-image-placeholder { + width: 100%; + height: auto; + display: block; +} + + + diff --git a/digital-branding.html b/digital-branding.html new file mode 100644 index 0000000..643d196 --- /dev/null +++ b/digital-branding.html @@ -0,0 +1,496 @@ + + + + + + AI Digital Branding Services - Quantum Tasks AI + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ + +
+ +
+
+ +
+ + Trusted Digital Brand Partner +
+ +

+ + AI-Powered Digital Branding + +
+ + Intelligence + +

+ +

+ 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. +

+ + +
+ + Get Started + + + Learn More + +
+ + +
+
+
+ 250% +
+
+ Average ROI Increase +
+
+
+
+ 3x +
+
+ Faster Content Creation +
+
+
+
+ 24/7 +
+
+ Performance Monitoring +
+
+
+
+
+ + +
+
+ +
+
+ + Why Choose Us +
+

+ Intelligent Digital Excellence +

+

+ Combine proven digital strategies with smart automation and data insights to accelerate your brand's growth and market impact +

+
+ +
+
+
+

Data-Driven Brand Intelligence

+

+ 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. +

+
+
+
+

Comprehensive Digital Automation

+

+ End-to-end digital presence management with smart automation, content optimization, intelligent scheduling, SEO enhancement, and reputation management for maximum efficiency and impact. +

+
+
+
+

Smart Personalization & Optimization

+

+ Intelligent systems that learn your brand identity, automatically adapt strategies for your market, and continuously optimize campaigns based on performance data and market insights. +

+
+
+
+
+ + +
+
+
+
+ + Our Process +
+

+ AI-Enhanced SOSTAC+RACE Framework +

+

+ Our proven methodology supercharged with artificial intelligence, machine learning insights, and automated optimization at every stage +

+
+ +
+
+
1
+
+

AI-Powered Situation Analysis

+

+ Deploy machine learning algorithms to analyze your brand's digital DNA, competitive intelligence automation, and predictive market positioning with real-time data insights. +

+
+
+
+
2
+
+

AI-Optimized Objectives

+

+ Generate data-driven SMART goals using predictive analytics, automated KPI tracking, and AI-powered performance forecasting with continuous goal optimization. +

+
+
+
+
3
+
+

Intelligent Strategy Design

+

+ AI-driven customer journey mapping, automated audience segmentation, dynamic value proposition testing, and intelligent channel selection with performance optimization. +

+
+
+
+
4
+
+

AI-Automated Tactics (RACE Framework)

+

+ Deploy intelligent automation for Reach (AI-powered visibility), Act (automated engagement), Convert (smart sales funnels), and Engage (AI-driven loyalty programs). +

+
+
+
+
5
+
+

Automated Action Execution

+

+ AI-powered task automation, intelligent timeline management, and automated brand asset generation with smart content creation and deployment systems. +

+
+
+
+
6
+
+

Intelligent Control & Optimization

+

+ Real-time AI monitoring, predictive KPI analysis, automated strategy refinement, and continuous machine learning optimization with performance forecasting. +

+
+
+
+ + +
+

RACE Framework Breakdown

+
+
+
+ +

Reach

+
+
AI-Powered Visibility
+
Automated LLM optimization, AI-driven SEO, smart ad targeting, AI influencer matching, automated PR distribution
+
+
+
+ +

Act

+
+
Intelligent Engagement
+
AI content generation, dynamic landing pages, chatbot interactions, automated social responses
+
+
+
+ +

Convert

+
+
Smart Conversions
+
AI-optimized CTAs, predictive retargeting, automated lead scoring, intelligent funnel optimization
+
+
+
+ +

Engage

+
+
AI-Driven Loyalty
+
Automated email personalization, AI community management, predictive advocacy, smart retention campaigns
+
+
+
+
+
+ + +
+
+

+ AI-Powered Service Portfolio +

+

+ Advanced artificial intelligence solutions that automate, optimize, and accelerate your digital brand transformation +

+
+
+
+

Brand Discovery & Smart Identity Design

+

+ Complete brand audit enhanced with AI insights, strategic identity creation, and adaptive design systems that evolve with market trends and audience data. +

+
+
+
+

Strategic Platform Management & Automation

+

+ Smart platform selection and optimization, automated content distribution, intelligent scheduling, and performance optimization across social media, websites, and digital touchpoints. +

+
+
+
+

Advanced Content & Marketing Automation

+

+ AI-enhanced content creation, automated SEO optimization, intelligent ad targeting and social media management with real-time performance adjustments for maximum impact. +

+
+
+
+

Influencer Partnerships & Digital PR

+

+ Strategic influencer discovery and matching, automated PR campaign management, smart media outreach, and comprehensive relationship management for maximum brand amplification. +

+
+
+
+

Brand Consistency & Messaging Systems

+

+ Unified brand guidelines with automated enforcement, intelligent messaging frameworks, smart visual asset management, and consistent brand voice across all platforms. +

+
+
+
+

Predictive AI Analytics & Automated Insights

+

+ Real-time predictive analytics, automated performance optimization, AI-generated insights and recommendations, with intelligent forecasting and proactive strategy adjustments. +

+
+
+
+
+ + +
+
+

+ Accelerate Your Digital Brand Growth +

+
+ +
+

Ready to transform your digital brand presence?

+

+ Complete our Digital Brand Strategy Assessment and receive a customized growth roadmap with smart automation recommendations within 24 hours. +

+ + +
+
+ + Free comprehensive brand analysis +
+
+ + Personalized growth automation roadmap +
+
+ + Custom strategy proposal in 24 hours +
+
+ + +
+ + Contact Us Directly + +
+
+ + +
+

Get in Touch

+ + +
+
+ +
+
+

Email Address

+

+ + abhay@quantumtaskai.com + +

+
+
+ + +
+

+ Leading the AI Revolution in Digital Branding - Where Artificial Intelligence Meets Brand Excellence for Unprecedented Growth and Automation. +

+
+
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/docker-compose.test.yml b/docker-compose.test.yml new file mode 100644 index 0000000..7c8fc69 --- /dev/null +++ b/docker-compose.test.yml @@ -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 diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..6e77366 --- /dev/null +++ b/docker-compose.yml @@ -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 diff --git a/dokploy.json b/dokploy.json new file mode 100644 index 0000000..ec33831 --- /dev/null +++ b/dokploy.json @@ -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 + } +} diff --git a/dokploy.test.json b/dokploy.test.json new file mode 100644 index 0000000..dd8d737 --- /dev/null +++ b/dokploy.test.json @@ -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" + } + ] +} diff --git a/freight-flow.html b/freight-flow.html new file mode 100644 index 0000000..16f5a3f --- /dev/null +++ b/freight-flow.html @@ -0,0 +1,35 @@ + + + + + + FreightFlow - Quantum Tasks AI + + + + + + \ No newline at end of file diff --git a/img/FAVICON-SETUP.md b/img/FAVICON-SETUP.md new file mode 100644 index 0000000..8801b21 --- /dev/null +++ b/img/FAVICON-SETUP.md @@ -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 `` 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). \ No newline at end of file diff --git a/img/authors/team.jpg b/img/authors/team.jpg new file mode 100644 index 0000000..4947496 --- /dev/null +++ b/img/authors/team.jpg @@ -0,0 +1 @@ +This is a placeholder for the team avatar image. Please replace this file with your actual team image. \ No newline at end of file diff --git a/img/blog/ai-digital-marketing.png b/img/blog/ai-digital-marketing.png new file mode 100644 index 0000000..9a9c53a Binary files /dev/null and b/img/blog/ai-digital-marketing.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..00028d7 Binary files /dev/null and b/img/logo.png differ diff --git a/img/og-image.png b/img/og-image.png new file mode 100644 index 0000000..842dfcc Binary files /dev/null and b/img/og-image.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8ca4275 --- /dev/null +++ b/index.html @@ -0,0 +1,591 @@ + + + + + + Quantum Tasks AI - AI & Task Automation Solutions + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ + +
+ +
+
+ +
+ + Trusted by Industry Leaders +
+ +

+ + AI & Cybersecurity + +
+ + Solutions + +

+ +

+ Secure your digital future with state-of-the-art AI solutions and expert cybersecurity strategies tailored for your business needs. +

+ + +
+ + Get Protected Now + + + Explore AI Hub + +
+ + +
+
+
+ 35+ +
+
+ Years Experience +
+
+
+
+ 24/7 +
+
+ Rapid Response +
+
+
+
+ 100% +
+
+ Secure Solutions +
+
+
+
+
+ + +
+
+ +
+
+ + About Quantum Tasks AI +
+

+ Your Trusted Digital Guardian +

+

+ Pioneering the future of Automation & Cybersecurity with AI-powered solutions +

+
+ +
+ +
+
+ +
+ +
+ +

+ Defending Digital Frontiers +

+ +

+ At Quantum Tasks AI, we provide state-of-the-art AI & Cybersecurity solutions tailored to safeguard your business. From advanced AI Agents to robust defense strategies, we empower you to navigate the digital world with confidence. +

+ + +
+
+ + 35+ Years Experience +
+
+ + Top Certifications +
+
+ +
+ + Lean Six Sigma Black Belt +
+
+
+ + +
+ +
+ +
+ +
+
+ + +
+ +
+
+ +
+
+
+ + +
+
+
+
Mission Critical
+
Zero Compromise
+
+
+
+
Rapid Response
+
24/7 Protection
+
+
+
+
Innovation
+
Cutting Edge Tech
+
+
+
+
Trusted Partner
+
Industry Leaders
+
+
+
+
+ + +
+
+

+ Our Services +

+

+ Tailored strategies for your business +

+
+
+
+

Cybersecurity Consultation

+

+ Tailored strategies, advanced threat detection, and comprehensive security frameworks to protect your digital assets and business operations. +

+
+
+
+

AI Based Automation

+

+ Empower your Business with AI. Strategic AI adoption, machine learning solutions, and intelligent automation to transform your processes. +

+
+
+
+

Rapid Response Solutions

+

+ Rapid response to minimize damage. Emergency incident response and real-time threat mitigation to protect your business. +

+
+
+
+
+ + +
+
+

+ Our Clients +

+
+
+
+

MTSV Foods Industries Pvt Ltd

+

Food & Beverage Industry

+
+
+
+

Apple Tree Industries

+

Manufacturing & Processing

+
+
+
+

TechStart Solutions

+

Technology Consulting

+
+
+
+

Global Logistics Corp

+

Supply Chain Management

+
+
+
+
+ + +
+
+

+ Our Founders +

+ + +
+
+
+
+ +
+

J P Goenka

+

+ Founder & Business Development Leader +

+
+
+ International Trading Expert +
+
+ Dubai Business Leader +
+
+ Global Perspective +
+
+
+
+
+

+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). + +

+

+ 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. +

+
+
+ + +
+
+
+
+ +
+

Abhay Pal Chauhan

+

+ Founder & Principal Consultant +

+
+
+ 35+ Years Experience +
+
+ Cybersecurity Expert +
+
+ Six Sigma Black Belt +
+
+
+
+
+

+ Our Founder leverages over 35 years of expertise in cybersecurity and process automation and optimization, backed by top certifications in Cybersecurity and Black Belt in Lean Six Sigma. +

+

+ His unique blend of technical knowledge and operational excellence ensures tailored, secure, and efficient solutions for our clients, driving business resilience and maximizing value in every engagement. +

+
+

+ "Delivering top-tier solutions that combine cutting-edge technology with proven operational methodologies to secure and optimize your business operations." +

+
+
+
+
+
+ + +
+
+

+ Get In Touch +

+
+ +
+

Send us a Message

+ + + + +
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+ 0/1000 characters +
+
+
+ +
+ + +
+

Contact Information

+ + +
+
+ +
+
+

Mailing Address

+

+ Meydan Grandstand, 6th floor
+ Meydan Road, Nad Al Sheba
+ Dubai, U.A.E. +

+
+
+ + +
+
+ +
+
+

Email Address

+

+ + abhay@quantumtaskai.com + +

+
+
+ + +
+

+ We are committed to deliver top-tier AI & Cybersecurity solutions for businesses of all sizes. +

+
+
+
+
+
+
+ + + + + + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..6cbe382 --- /dev/null +++ b/js/script.js @@ -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 = ` +
+
+
+
+
+
+
+
+
+
+
+
`; + 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 = '

Failed to load blog posts.

'; + 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 ` +
+
+ ${categoryInfo.name} + ${formatDate(post.publishDate)} + ${post.readTime} +
+

+ + ${post.title} + +

+

${post.excerpt}

+
+ ${post.author} + Read 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 ` +
+
+ ${categoryInfo.name} + ${formatDate(post.publishDate)} + ${post.readTime} +
+

+ ${post.title} +

+

${post.excerpt}

+
+ ${post.author} + Read 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(); +}); \ No newline at end of file diff --git a/wf.html b/wf.html new file mode 100644 index 0000000..f1f0d26 --- /dev/null +++ b/wf.html @@ -0,0 +1,235 @@ + + + + + + WF - Quantum Tasks AI + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ + +
+
+
+ + + + +
+ +
+ +
+
+
+ + + + + + + + + + \ No newline at end of file