HGR Sustainability Projects 🌍

Discover and Engage with Transformative Environmental Initiatives

\n\n

\n setFilter({ ...filter, category: e.target.value })}\n >\n \n {[...new Set(sustainabilityProjects.map(p => p.category))].map(category => (\n \n ))}\n \n\n setFilter({ ...filter, difficulty: e.target.value })}\n >\n \n {[...new Set(sustainabilityProjects.map(p => p.difficulty))].map(difficulty => (\n \n ))}\n \n

\n\n

\n {filteredProjects.map(project => (\n

{project.icon}

{project.name}

\n Category: {project.category}\n

\n Impact: {project.impact}\n

\n Difficulty: {project.difficulty}\n

\n Region: {project.region}\n

\n \n

\n ))}\n

\n\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n HGR Sustainability Platform\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Arial', sans-serif;\n background-color: #f4f7f6;\n margin: 0;\n padding: 0;\n color: #2c3e50;\n}\n\n.sustainability-platform {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n}\n\nheader {\n text-align: center;\n background-color: #2ecc71;\n color: white;\n padding: 20px;\n border-radius: 8px;\n}\n\n.filters {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin: 20px 0;\n}\n\nselect {\n padding: 10px;\n border-radius: 5px;\n border: 1px solid #27ae60;\n}\n\n.project-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 20px;\n}\n\n.project-card {\n background-color: white;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s;\n}\n\n.project-card:hover {\n transform: scale(1.05);\n}\n\n.project-icon {\n font-size: 3em;\n text-align: center;\n}\n\nbutton {\n width: 100%;\n padding: 10px;\n background-color: #3498db;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\nfooter {\n text-align: center;\n margin-top: 20px;\n padding: 10px;\n background-color: #ecf0f1;\n}\n`;","children",[],[179],"6f8b05e8-39f5-11f0-bd95-9e149126039e","README.md","f0a9ad6a-39f4-11f0-8d2f-9e149126039e",["D",1748238674957],"# Husnabco Global Resources - Tech Website\n\nA modern, inspirational tech website for Husnabco Global Resources showcasing innovation, technology solutions, and global reach.\n\n## 🚀 Live Website\n\nThe website is now live and fully functional! Visit it to see the complete experience with:\n- Animated hero section with floating elements\n- Interactive navigation with smooth scrolling\n- Responsive design that works on all devices\n- Modern glassmorphism effects and gradients\n- Professional contact form\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono server with API endpoints\n├── frontend/\n│ ├── components/\n│ │ └── App.tsx # Main React application\n│ ├── index.html # Main HTML template with custom CSS\n│ └── index.tsx # Frontend entry point\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── README.md\n```\n\n## ✨ Features\n\n### Design & UX\n- **Modern Tech Aesthetic**: Dark theme with vibrant gradients and glassmorphism effects\n- **Animated Elements**: Floating geometric shapes, gradient animations, and smooth transitions\n- **Responsive Design**: Mobile-first approach that works perfectly on all screen sizes\n- **Interactive Navigation**: Smooth scrolling with active section highlighting\n- **Professional Typography**: Inter and JetBrains Mono fonts for modern appeal\n\n### Sections\n1. **Hero Section**: Inspirational messaging with animated gradient background and floating elements\n2. **About Section**: Company mission, statistics, and value propositions\n3. **Services Section**: 6 comprehensive technology solutions with detailed features\n4. **Global Presence**: International offices across 6 continents\n5. **Contact Section**: Professional contact form with validation\n\n### Technology Solutions Showcased\n- 🤖 **AI & Machine Learning**: Predictive analytics, NLP, computer vision\n- ☁️ **Cloud Solutions**: Migration, multi-cloud strategy, DevOps integration\n- 🛡️ **Cybersecurity**: Threat detection, compliance, incident response\n- 🚀 **Digital Transformation**: Process automation, legacy modernization\n- 📊 **Data Analytics**: Big data processing, real-time analytics, BI\n- 🌐 **IoT Solutions**: Smart sensors, edge computing, industrial IoT\n\n## 🛠 Tech Stack\n\n- **Frontend**: React 18.2.0 with TypeScript\n- **Backend**: Hono framework with API endpoints\n- **Styling**: TailwindCSS with custom animations and gradients\n- **Fonts**: Google Fonts (Inter + JetBrains Mono)\n- **Icons**: Unicode emojis for universal compatibility\n- **Deployment**: Val Town with HTTP trigger\n\n## 🌍 Global Presence\n\nThe website showcases Husnabco's international reach with offices in:\n- **North America**: New York, USA\n- **Europe**: London, UK\n- **Asia Pacific**: Singapore\n- **Middle East**: Dubai, UAE\n- **South America**: São Paulo, Brazil\n- **Oceania**: Sydney, Australia\n\n## 📱 Responsive Design\n\nThe website is fully responsive and optimized for:\n- Desktop computers (1920px+)\n- Laptops (1024px - 1919px)\n- Tablets (768px - 1023px)\n- Mobile phones (320px - 767px)\n\n## 🎨 Design Philosophy\n\nThe design emphasizes:\n- **Innovation**: Cutting-edge visual effects and modern aesthetics\n- **Professionalism**: Clean layouts with sophisticated color schemes\n- **Global Perspective**: International presence and worldwide reach\n- **Technology Focus**: Tech-inspired animations and futuristic elements\n- **User Experience**: Intuitive navigation and engaging interactions\n\n## 🚀 Performance Features\n\n- **Fast Loading**: Optimized assets and efficient code splitting\n- **SEO Optimized**: Proper meta tags and semantic HTML structure\n- **Accessibility**: WCAG compliant with proper contrast ratios\n- **Cross-Browser**: Compatible with all modern browsers\n- **Error Handling**: Comprehensive error catching and user feedback\n\n## 📞 Contact & API\n\nThe website includes a functional contact form that connects to the backend API:\n- **Endpoint**: `/api/contact` (POST)\n- **Validation**: Client and server-side form validation\n- **Response**: JSON feedback for user confirmation\n- **Health Check**: `/api/health` endpoint for monitoring\n\n## 🔧 Development Notes\n\n- Uses Val Town's utility functions for file serving\n- Implements proper TypeScript typing throughout\n- Follows React 18.2.0 best practices\n- Includes comprehensive error handling\n- Mobile-first responsive design approach",[],[188],["D",1748238467672],[],[18,64],["D",1748238467672],[175],[18],"05716170-39f5-11f0-b1f7-9e149126039e","index.tsx","05716210-39f5-11f0-b1f7-9e149126039e","707d59ed-561e-445d-b410-8d076a26e462",6,["D",1748238496954],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[209,201],"frontend","028ffca0-39f5-11f0-9721-9e149126039e","index.html","028ffd5e-39f5-11f0-9721-9e149126039e",5,["D",1748238492119],"\n\n\n \n \n Husnabco Global Resources - Innovative Technology Solutions\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n 🚀\">\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

\n \n \n \n\n",[],[209,211],"3adcf162-39f5-11f0-9dab-9e149126039e","App.tsx","3adcf20c-39f5-11f0-9dab-9e149126039e","02245c3e-1af2-4f41-b159-7a0952c6d71c",7,["D",1748238586577],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Service, ContactForm, GlobalOffice } from \"../../shared/types.ts\";\n\nconst App: React.FC = () => {\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n const [activeSection, setActiveSection] = useState('home');\n const [contactForm, setContactForm] = useState({\n name: '',\n email: '',\n company: '',\n message: ''\n });\n\n const services: Service[] = [\n {\n id: 'ai-ml',\n title: 'AI & Machine Learning',\n description: 'Harness the power of artificial intelligence to transform your business operations and decision-making processes.',\n icon: '🤖',\n features: ['Predictive Analytics', 'Natural Language Processing', 'Computer Vision', 'Automated Decision Systems']\n },\n {\n id: 'cloud-solutions',\n title: 'Cloud Solutions',\n description: 'Scalable, secure, and efficient cloud infrastructure solutions tailored to your business needs.',\n icon: '☁️',\n features: ['Cloud Migration', 'Multi-Cloud Strategy', 'DevOps Integration', '24/7 Monitoring']\n },\n {\n id: 'cybersecurity',\n title: 'Cybersecurity',\n description: 'Comprehensive security solutions to protect your digital assets and maintain business continuity.',\n icon: '🛡️',\n features: ['Threat Detection', 'Security Audits', 'Compliance Management', 'Incident Response']\n },\n {\n id: 'digital-transformation',\n title: 'Digital Transformation',\n description: 'End-to-end digital transformation services to modernize your business processes and technology stack.',\n icon: '🚀',\n features: ['Process Automation', 'Legacy System Modernization', 'Digital Strategy', 'Change Management']\n },\n {\n id: 'data-analytics',\n title: 'Data Analytics',\n description: 'Turn your data into actionable insights with advanced analytics and business intelligence solutions.',\n icon: '📊',\n features: ['Big Data Processing', 'Real-time Analytics', 'Data Visualization', 'Business Intelligence']\n },\n {\n id: 'iot-solutions',\n title: 'IoT Solutions',\n description: 'Connect and optimize your operations with intelligent Internet of Things implementations.',\n icon: '🌐',\n features: ['Smart Sensors', 'Edge Computing', 'Industrial IoT', 'Predictive Maintenance']\n }\n ];\n\n const globalOffices: GlobalOffice[] = [\n { city: 'New York', country: 'USA', region: 'North America', coordinates: { lat: 40.7128, lng: -74.0060 } },\n { city: 'London', country: 'UK', region: 'Europe', coordinates: { lat: 51.5074, lng: -0.1278 } },\n { city: 'Singapore', country: 'Singapore', region: 'Asia Pacific', coordinates: { lat: 1.3521, lng: 103.8198 } },\n { city: 'Dubai', country: 'UAE', region: 'Middle East', coordinates: { lat: 25.2048, lng: 55.2708 } },\n { city: 'São Paulo', country: 'Brazil', region: 'South America', coordinates: { lat: -23.5505, lng: -46.6333 } },\n { city: 'Sydney', country: 'Australia', region: 'Oceania', coordinates: { lat: -33.8688, lng: 151.2093 } }\n ];\n\n useEffect(() => {\n const handleScroll = () => {\n const sections = ['home', 'about', 'services', 'global', 'contact'];\n const scrollPosition = window.scrollY + 100;\n\n for (const section of sections) {\n const element = document.getElementById(section);\n if (element) {\n const { offsetTop, offsetHeight } = element;\n if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {\n setActiveSection(section);\n break;\n }\n }\n }\n };\n\n window.addEventListener('scroll', handleScroll);\n return () => window.removeEventListener('scroll', handleScroll);\n }, []);\n\n const handleContactSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n // Here you would typically send the form data to your backend\n console.log('Contact form submitted:', contactForm);\n alert('Thank you for your message! We\\'ll get back to you soon.');\n setContactForm({ name: '', email: '', company: '', message: '' });\n };\n\n const scrollToSection = (sectionId: string) => {\n document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });\n setIsMenuOpen(false);\n };\n\n return (\n

\n {/* Navigation */}\n

\n \n Husnabco Global\n \n

\n \n {/* Desktop Navigation */}\n

\n {['home', 'about', 'services', 'global', 'contact'].map((item) => (\n scrollToSection(item)}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 ${\n activeSection === item\n ? 'bg-blue-600 text-white'\n : 'text-gray-300 hover:bg-gray-700 hover:text-white'\n }`}\n >\n {item.charAt(0).toUpperCase() + item.slice(1)}\n \n ))}\n

\n\n {/* Mobile menu button */}\n

\n setIsMenuOpen(!isMenuOpen)}\n className=\"text-gray-400 hover:text-white focus:outline-none focus:text-white\"\n >\n \n \n

\n\n {/* Mobile Navigation */}\n {isMenuOpen && (\n

\n {['home', 'about', 'services', 'global', 'contact'].map((item) => (\n scrollToSection(item)}\n className=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 w-full text-left\"\n >\n {item.charAt(0).toUpperCase() + item.slice(1)}\n \n ))}\n

\n )}\n

\n\n {/* Hero Section */}\n

\n \n {/* Floating elements */}\n

\n\n

\n Innovating Tomorrow\n

\n Empowering businesses worldwide with cutting-edge technology solutions, \n digital transformation, and innovative strategies that drive success in the digital age.\n

\n scrollToSection('services')}\n className=\"px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg font-semibold text-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 animate-pulse-glow\"\n >\n Explore Solutions 🚀\n \n scrollToSection('contact')}\n className=\"px-8 py-4 border-2 border-blue-500 rounded-lg font-semibold text-lg hover:bg-blue-500 transition-all duration-300 transform hover:scale-105\"\n >\n Get Started 💡\n \n

\n\n {/* About Section */}\n

\n About Husnabco Global Resources\n

\n We are a global technology company dedicated to transforming businesses through innovation, \n expertise, and cutting-edge solutions that drive digital excellence.\n

\n\n

Our Mission

\n To empower organizations worldwide by delivering innovative technology solutions that \n accelerate growth, enhance efficiency, and create sustainable competitive advantages \n in an ever-evolving digital landscape.\n

500+

Projects Delivered

50+

Countries Served

99.9%

Uptime Guarantee

24/7

Global Support

Why Choose Us?

\n ✓\n Global expertise with local understanding\n
\n ✓\n Cutting-edge technology solutions\n
\n ✓\n Proven track record of success\n
\n ✓\n Dedicated support and partnership\n
\n ✓\n Innovation-driven approach\n

\n\n {/* Services Section */}\n

\n Our Technology Solutions\n

\n Comprehensive technology services designed to accelerate your digital transformation \n and drive business innovation across all industries.\n

\n\n

\n {services.map((service, index) => (\n \n

{service.icon}

{service.title}

{service.description}

\n ▸\n {feature}\n

\n ))}\n

\n \n\n {/* Global Presence Section */}\n

\n Global Presence\n

\n With offices and partners across six continents, we deliver world-class technology \n solutions with local expertise and global scale.\n

\n\n

\n {globalOffices.map((office, index) => (\n \n

{office.city}

{office.country}

{office.region}

\n ))}\n

\n\n

Ready to Go Global?

\n Join thousands of companies worldwide who trust Husnabco Global Resources \n for their technology transformation journey.\n

\n scrollToSection('contact')}\n className=\"px-6 py-3 bg-white text-blue-600 rounded-lg font-semibold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105\"\n >\n Start Your Journey 🌍\n \n

\n \n

\n\n {/* Contact Section */}\n

\n Get In Touch\n

\n Ready to transform your business with innovative technology solutions? \n Let's discuss how we can help you achieve your goals.\n

\n\n

Contact Information

\n 📧\n

Email

contact@husnabcoglobal.com

\n 📞\n

Phone

+1 (555) 123-4567

\n 🌐\n

Global Support

24/7 Worldwide Coverage

\n\n

\n \n Full Name *\n \n setContactForm({ ...contactForm, name: e.target.value })}\n className=\"w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white\"\n placeholder=\"Your full name\"\n />\n

\n \n Email Address *\n \n setContactForm({ ...contactForm, email: e.target.value })}\n className=\"w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white\"\n placeholder=\"your.email@company.com\"\n />\n

\n \n Company\n \n setContactForm({ ...contactForm, company: e.target.value })}\n className=\"w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white\"\n placeholder=\"Your company name\"\n />\n

\n \n Message *\n \n setContactForm({ ...contactForm, message: e.target.value })}\n className=\"w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white\"\n placeholder=\"Tell us about your project or how we can help...\"\n />\n

\n \n Send Message 🚀\n \n \n

\n\n {/* Footer */}\n \n \n );\n};\n\nexport default App;",[],[209,227,219],"components","3add279a-39f5-11f0-9dab-9e149126039e",["D",1748238586577],[171],[209,227],"0290485e-39f5-11f0-9721-9e149126039e",["D",1748238492119],[170,172,173],[209],"5402ed9a-39f5-11f0-b1f7-9e149126039e","index.ts","4506d96e-39f5-11f0-8e65-9e149126039e","c0025e07-fa41-4a3f-8a4c-e87ff94a1c4c",["D",1748238628739],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main route - serve the HTML with potential data injection\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // You can inject initial data here if needed\n // const initialData = { /* your data */ };\n // const dataScript = ``;\n // html = html.replace(\"\", `${dataScript}`);\n \n return c.html(html);\n});\n\n// API endpoint for contact form (example)\napp.post(\"/api/contact\", async c => {\n try {\n const body = await c.req.json();\n \n // Here you would typically:\n // 1. Validate the form data\n // 2. Save to database\n // 3. Send email notification\n // 4. Return success response\n \n console.log(\"Contact form submission:\", body);\n \n return c.json({ \n success: true, \n message: \"Thank you for your message! We'll get back to you soon.\" \n });\n } catch (error) {\n console.error(\"Contact form error:\", error);\n return c.json({ \n success: false, \n message: \"There was an error processing your request. Please try again.\" \n }, 500);\n }\n});\n\n// Health check endpoint\napp.get(\"/api/health\", c => {\n return c.json({ \n status: \"healthy\", \n timestamp: new Date().toISOString(),\n service: \"Husnabco Global Resources Website\"\n });\n});\n\n// 404 handler\napp.notFound(c => {\n return c.json({ error: \"Not Found\" }, 404);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[244,237],"backend","4506e008-39f5-11f0-8e65-9e149126039e",8,["D",1748238603628],[168],[244],["D",1746019333865],{"_11":12,"_122":70},{"_11":12,"_118":-5,"_69":70,"_31":68,"_119":120,"_121":30},{"_39":109,"_13":16,"_33":36,"_110":74,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":14,"_117":12},"ctx",{"_52":-5,"_141":287,"_288":289,"_290":291,"_292":30,"_293":30,"_294":30,"_295":24,"_296":-5,"_297":-7,"_298":-7,"_299":26,"_300":30,"_301":30,"_302":-5,"_303":30,"_304":30,"_305":30,"_306":-5},"ENV",{"_258":259,"_260":261,"_262":16,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · shared