From 05282f923b217db35bccc5f990b966e822d87b68 Mon Sep 17 00:00:00 2001 From: Huzaifa Inam Date: Sat, 22 Aug 2026 21:24:50 +0000 Subject: [PATCH] Add src/App.tsx --- src/App.tsx | 894 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 894 insertions(+) create mode 100644 src/App.tsx diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..1b54ccf --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,894 @@ +import React, { useState, useEffect, useRef } from 'react'; +import { + Layers, + Cpu, + Boxes, + Database, + ArrowRight, + ShieldCheck, + CheckCircle, + FileCode, + Download, + Copy, + ExternalLink, + ChevronRight, + Sparkles, + Terminal, + Activity, + Workflow, + Globe, + Settings, + FolderGit2, + Code2 +} from 'lucide-react'; + +export default function App() { + const [activeTab, setActiveTab] = useState<'preview' | 'files' | 'architecture' | 'guide'>('preview'); + const [activePage, setActivePage] = useState<'home' | 'services' | 'odoo' | 'portfolio' | 'about' | 'contact'>('home'); + const [selectedFile, setSelectedFile] = useState('__manifest__.py'); + const [copied, setCopied] = useState(false); + const [particleDensity, setParticleDensity] = useState<'low' | 'normal' | 'high'>('normal'); + + // Interactive 3D Canvas in Preview + const canvasRef = useRef(null); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + let animationId: number; + let width = (canvas.width = canvas.parentElement?.clientWidth || 800); + let height = (canvas.height = canvas.parentElement?.clientHeight || 450); + + const handleResize = () => { + if (!canvas.parentElement) return; + width = canvas.width = canvas.parentElement.clientWidth; + height = canvas.height = canvas.parentElement.clientHeight; + }; + window.addEventListener('resize', handleResize); + + const count = particleDensity === 'low' ? 30 : particleDensity === 'high' ? 85 : 55; + const particles: { x: number; y: number; vx: number; vy: number; radius: number }[] = []; + + for (let i = 0; i < count; i++) { + particles.push({ + x: Math.random() * width, + y: Math.random() * height, + vx: (Math.random() - 0.5) * 0.8, + vy: (Math.random() - 0.5) * 0.8, + radius: Math.random() * 2 + 1.5, + }); + } + + let mouseX = width / 2; + let mouseY = height / 2; + + const onMouseMove = (e: MouseEvent) => { + const rect = canvas.getBoundingClientRect(); + mouseX = e.clientX - rect.left; + mouseY = e.clientY - rect.top; + }; + canvas.addEventListener('mousemove', onMouseMove); + + const render = () => { + ctx.clearRect(0, 0, width, height); + + // Draw subtle grid + ctx.strokeStyle = 'rgba(255, 255, 255, 0.03)'; + ctx.lineWidth = 1; + const gridSize = 40; + for (let x = 0; x < width; x += gridSize) { + ctx.beginPath(); + ctx.moveTo(x, 0); + ctx.lineTo(x, height); + ctx.stroke(); + } + for (let y = 0; y < height; y += gridSize) { + ctx.beginPath(); + ctx.moveTo(0, y); + ctx.lineTo(width, y); + ctx.stroke(); + } + + // Draw connections + for (let i = 0; i < particles.length; i++) { + const p1 = particles[i]; + p1.x += p1.vx; + p1.y += p1.vy; + + if (p1.x < 0 || p1.x > width) p1.vx *= -1; + if (p1.y < 0 || p1.y > height) p1.vy *= -1; + + // Draw particle + ctx.beginPath(); + ctx.arc(p1.x, p1.y, p1.radius, 0, Math.PI * 2); + ctx.fillStyle = '#00f2fe'; + ctx.shadowBlur = 8; + ctx.shadowColor = 'rgba(0, 242, 254, 0.6)'; + ctx.fill(); + + for (let j = i + 1; j < particles.length; j++) { + const p2 = particles[j]; + const dist = Math.hypot(p1.x - p2.x, p1.y - p2.y); + if (dist < 110) { + ctx.beginPath(); + ctx.moveTo(p1.x, p1.y); + ctx.lineTo(p2.x, p2.y); + ctx.strokeStyle = `rgba(0, 242, 254, ${1 - dist / 110 * 0.7})`; + ctx.lineWidth = 0.8; + ctx.shadowBlur = 0; + ctx.stroke(); + } + } + } + + animationId = requestAnimationFrame(render); + }; + + render(); + + return () => { + cancelAnimationFrame(animationId); + window.removeEventListener('resize', handleResize); + canvas.removeEventListener('mousemove', onMouseMove); + }; + }, [particleDensity, activePage]); + + const fileManifest: Record = { + '__manifest__.py': { + path: 'theme_3d_systems/__manifest__.py', + lang: 'python', + desc: 'Odoo 19 theme definition with dependency declarations, XML views & ES6 asset bundles', + code: `# -*- coding: utf-8 -*- +{ + 'name': 'Theme 3D Systems', + 'summary': 'Futuristic 3D Website Theme for Web Systems, Odoo ERP Solutions & Software Engineering Companies', + 'category': 'Theme/Corporate', + 'version': '19.0.1.0.0', + 'license': 'LGPL-3', + 'depends': [ + 'website', + 'website_crm', + 'website_mass_mailing', + 'web_editor', + ], + 'data': [ + 'data/presets.xml', + 'data/menu.xml', + 'data/pages.xml', + 'views/layout.xml', + 'views/header.xml', + 'views/footer.xml', + 'views/snippets/snippets.xml', + 'views/snippets/options.xml', + 'views/snippets/s_3d_hero.xml', + 'views/snippets/s_system_architecture.xml', + 'views/snippets/s_floating_cards.xml', + 'views/snippets/s_odoo_modules_grid.xml', + 'views/snippets/s_portfolio_showcase.xml', + 'views/snippets/s_stats_matrix.xml', + 'views/snippets/s_tech_stack.xml', + 'views/snippets/s_testimonials_3d.xml', + 'views/snippets/s_cta_glow.xml', + 'views/pages/page_home.xml', + 'views/pages/page_services.xml', + 'views/pages/page_odoo_solutions.xml', + 'views/pages/page_portfolio.xml', + 'views/pages/page_about.xml', + 'views/pages/page_contact.xml', + ], + 'assets': { + 'web.assets_frontend': [ + 'theme_3d_systems/static/src/scss/_variables.scss', + 'theme_3d_systems/static/src/scss/_mixins.scss', + 'theme_3d_systems/static/src/scss/theme.scss', + 'theme_3d_systems/static/src/scss/components.scss', + 'theme_3d_systems/static/src/scss/animations.scss', + 'theme_3d_systems/static/src/scss/snippets.scss', + 'theme_3d_systems/static/src/js/three/three_core_loader.js', + 'theme_3d_systems/static/src/js/three/hero_network_scene.js', + 'theme_3d_systems/static/src/js/widgets/widget_3d_hero.js', + 'theme_3d_systems/static/src/js/widgets/widget_card_tilt.js', + 'theme_3d_systems/static/src/js/widgets/widget_system_arch.js', + 'theme_3d_systems/static/src/js/widgets/widget_stats_counter.js', + ], + 'website.assets_editor': [ + 'theme_3d_systems/static/src/js/options/snippet_3d_options.js', + ], + }, + 'installable': True, + 'application': False, +}` + }, + 's_3d_hero.xml': { + path: 'theme_3d_systems/views/snippets/s_3d_hero.xml', + lang: 'xml', + desc: 'Editable Three.js 3D Hero Snippet with standard oe_structure blocks', + code: ` + + +` + }, + 'widget_3d_hero.js': { + path: 'theme_3d_systems/static/src/js/widgets/widget_3d_hero.js', + lang: 'javascript', + desc: 'Odoo 19 PublicWidget for lazy-loading WebGL, memory cleanup, and Website Builder support', + code: `/** @odoo-module **/ + +import publicWidget from '@web/legacy/js/public/public_widget'; +import { HeroNetworkScene } from '../three/hero_network_scene'; + +publicWidget.registry.Theme3DHero = publicWidget.Widget.extend({ + selector: '.s_3d_hero', + disabledInEditableMode: false, + + start: function () { + this._super.apply(this, arguments); + + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + if (prefersReducedMotion) return; + + const container = this.el.querySelector('.hero-canvas-container'); + if (container) { + const density = this.el.dataset.particleDensity || 'normal'; + let count = 65; + if (density === 'low') count = 30; + if (density === 'high') count = 110; + + this.sceneInstance = new HeroNetworkScene(container, { + particleCount: count, + }); + } + }, + + destroy: function () { + if (this.sceneInstance) { + this.sceneInstance.destroy(); + this.sceneInstance = null; + } + this._super.apply(this, arguments); + }, +}); + +export default publicWidget.registry.Theme3DHero;` + }, + 's_system_architecture.xml': { + path: 'theme_3d_systems/views/snippets/s_system_architecture.xml', + lang: 'xml', + desc: 'Interactive business architecture pipeline (Customer -> Website -> Odoo ERP -> Automation)', + code: ` + + +` + } + }; + + const copyCurrentCode = () => { + navigator.clipboard.writeText(fileManifest[selectedFile].code); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + return ( +
+ {/* Top Application Bar */} +
+
+
+ +
+
+
+ THEME 3D SYSTEMS + + Odoo 19 Ready + +
+

Enterprise QWeb Theme Module & Three.js Engine

+
+
+ + {/* View Switcher Tabs */} + +
+ + {/* Main Content Area */} +
+ {/* VIEW 1: LIVE INTERACTIVE PREVIEW */} + {activeTab === 'preview' && ( +
+ {/* Subpage Navigator for Odoo Simulation */} +
+
+ Simulated Route: +
+ {(['home', 'services', 'odoo', 'portfolio', 'about', 'contact'] as const).map((page) => ( + + ))} +
+
+ +
+ Website Builder 3D Density: +
+ {(['low', 'normal', 'high'] as const).map((d) => ( + + ))} +
+
+
+ + {/* Simulated Live Theme Viewport */} +
+ {/* Simulated Odoo Glassmorphic Header */} +
+
+
+
+
+ + SYSTEMS.3D + +
+ +
+ Services + Odoo ERP + Portfolio + About + Contact +
+ +
+ { + e.preventDefault(); + setActivePage('contact'); + }} + className="px-4 py-1.5 rounded-lg border border-cyan-400/40 text-cyan-300 text-xs font-semibold hover:bg-cyan-400/10 transition-all flex items-center gap-2" + > + + Get a Quote + + +
+
+ + {/* PAGE: HOME */} + {activePage === 'home' && ( +
+ {/* Hero Section with Live Three.js Canvas */} +
+ + +
+
+ + Next-Gen Odoo 19 QWeb Architecture & Web Systems +
+ +

+ Architecting{' '} + + Intelligent Systems + {' '} + For High-Growth Enterprises +

+ +

+ We build custom web systems, high-concurrency APIs, and seamlessly unified Odoo ERP solutions with + automated business intelligence workflows. +

+ +
+ + +
+
+
+ + {/* System Architecture Flow */} +
+
+ Intelligent Integration +

Unified Enterprise Data Flow

+

+ Customer touchpoints flowing smoothly into custom web portals and core Odoo 19 automated pipelines. +

+
+ +
+
+
+ +
+

1. Customer

+

Omnichannel & Portal

+
+ +
+
+ +
+

2. Web Systems

+

Custom React/REST APIs

+
+ +
+
+ Core Hub +
+
+ +
+

3. Odoo 19 ERP

+

Central Nervous System

+
+ +
+
+ +
+

4. Automation

+

CRM, Sales & Accounting

+
+
+
+ + {/* Core Services Cards */} +
+
+
+ Services +

High-Impact Engineering

+
+ +
+ +
+
+ +

Custom Web Systems

+

+ Bespoke enterprise portals, microservices, and reactive web applications tailored to unique operational demands. +

+ + Learn More + +
+ +
+ +

Odoo ERP Solutions

+

+ End-to-end Odoo 19 implementation, custom Python module development, and database architecture. +

+ + Learn More + +
+ +
+ +

Business Automation

+

+ Automated webhooks, async task workers, and real-time triggers synchronizing CRM with finance. +

+ + Learn More + +
+
+
+
+ )} + + {/* SUBPAGE: SERVICES */} + {activePage === 'services' && ( +
+
+ Directory +

Comprehensive Systems & ERP Services

+

Everything from custom Python modules to high-load cloud hosting.

+
+
+ {[ + { title: 'Custom Web Systems', icon: Globe, desc: 'Enterprise client portals and multi-tenant architectures.' }, + { title: 'Odoo ERP Solutions', icon: Boxes, desc: 'Full lifecycle Odoo 19 setup and custom views.' }, + { title: 'Business Automation', icon: Workflow, desc: 'Zapier/Webhook/Cron pipeline automation.' }, + { title: 'eCommerce Solutions', icon: Cpu, desc: 'High conversion multi-currency digital shops.' }, + { title: 'CRM Solutions', icon: ShieldCheck, desc: 'Lead tracking and omnichannel pipeline routing.' }, + { title: 'API & 3rd-Party Sync', icon: Code2, desc: 'REST, GraphQL, Stripe, PayPal, and carrier sync.' }, + { title: 'Custom Dashboards', icon: Activity, desc: 'Executive KPI reporting and real-time telemetry.' }, + { title: 'Cloud & SLA Support', icon: Terminal, desc: 'Kubernetes deployment and 99.98% uptime SLA.' }, + ].map((srv, idx) => ( +
+ +

{srv.title}

+

{srv.desc}

+
+ ))} +
+
+ )} + + {/* SUBPAGE: ODOO SOLUTIONS */} + {activePage === 'odoo' && ( +
+
+ Odoo 19 Engine +

Connected Odoo ERP Ecosystem

+

Native module integration, QWeb templating, and Owl UI widgets.

+
+
+ {[ + { mod: 'Odoo CRM & Sales', desc: 'Seamless lead scoring and quotation creation.' }, + { mod: 'Odoo Accounting', desc: 'Automated bank feed reconciliation & e-invoices.' }, + { mod: 'Odoo Inventory & MRP', desc: 'Multi-warehouse double-entry stock operations.' }, + { mod: 'Odoo Website & Portal', desc: 'High-speed QWeb frontend with 3D enhancement.' }, + { mod: 'Odoo Studio & Custom Models', desc: 'Tailored Python business logic & database schemas.' }, + { mod: 'Odoo Migration (16-18 to 19)', desc: 'Zero data-loss migrations with custom script validation.' }, + ].map((item, idx) => ( +
+
+ 0{idx + 1} +
+

{item.mod}

+

{item.desc}

+
+ ))} +
+
+ )} + + {/* SUBPAGE: CONTACT */} + {activePage === 'contact' && ( +
+
+ Initiate Project +

Transmit Project Parameters

+

Connects natively to Odoo CRM (crm.lead model).

+
+ +
+
{ e.preventDefault(); alert('Lead simulated! In Odoo 19, this posts to /website/form/ and generates a crm.lead record.'); }} className="space-y-4"> +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+ +