\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;",[152,72,64],"pulls","branches",1,"forks","envVars",{"_167":26,"_169":26},"connections",{"_167":26,"_168":26},"count","unfilledCount","emptyCount",{"_33":246,"_13":245,"_62":240,"_43":-5,"_35":36,"_149":247,"_155":24,"_37":248,"_39":26,"_65":73,"_146":-5,"_67":30,"_150":-5,"_187":249,"_17":250},{"_33":237,"_13":238,"_62":239,"_43":240,"_35":36,"_149":89,"_155":24,"_37":241,"_39":183,"_65":185,"_146":242,"_67":30,"_150":-5,"_187":243,"_17":244},{"_33":233,"_13":152,"_62":147,"_43":-5,"_35":36,"_149":222,"_155":24,"_37":234,"_39":26,"_65":73,"_146":-5,"_67":30,"_150":-5,"_187":235,"_17":236},{"_33":145,"_13":72,"_62":71,"_43":147,"_35":36,"_149":40,"_155":24,"_37":230,"_39":26,"_65":73,"_146":-5,"_67":30,"_150":-5,"_187":231,"_17":232},{"_33":154,"_13":64,"_62":63,"_43":71,"_35":36,"_149":40,"_155":24,"_37":227,"_39":26,"_65":66,"_146":157,"_67":30,"_150":-5,"_187":228,"_17":229},{"_33":219,"_13":220,"_62":221,"_43":147,"_35":36,"_149":222,"_155":24,"_37":223,"_39":26,"_65":21,"_146":224,"_67":30,"_150":-5,"_187":225,"_17":226},{"_33":211,"_13":212,"_62":213,"_43":147,"_35":36,"_149":214,"_155":24,"_37":215,"_39":26,"_65":66,"_146":216,"_67":30,"_150":-5,"_187":217,"_17":218},{"_33":207,"_13":206,"_62":200,"_43":-5,"_35":36,"_149":201,"_155":24,"_37":208,"_39":26,"_65":73,"_146":-5,"_67":30,"_150":-5,"_187":209,"_17":210},{"_33":197,"_13":198,"_62":199,"_43":200,"_35":36,"_149":201,"_155":24,"_37":202,"_39":26,"_65":66,"_146":203,"_67":30,"_150":-5,"_187":204,"_17":205},{"_33":190,"_13":191,"_62":192,"_43":-5,"_35":36,"_149":110,"_155":24,"_37":193,"_39":161,"_65":21,"_146":194,"_67":30,"_150":-5,"_187":195,"_17":196},{"_33":181,"_13":182,"_62":85,"_43":-5,"_35":36,"_149":183,"_155":24,"_37":184,"_39":161,"_65":185,"_146":186,"_67":30,"_150":-5,"_187":188,"_17":189},"21356ffc-25c6-11f0-8a3a-569c3dd06744","main.tsx",2,["D",1746019205520],"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst sustainabilityProjects = [\n {\n id: 1,\n name: \"Urban Green Roofs\",\n category: \"Urban Sustainability\",\n impact: \"Reduces urban heat, improves air quality\",\n difficulty: \"Intermediate\",\n region: \"Global Urban Centers\",\n icon: \"🏢\",\n },\n {\n id: 2,\n name: \"Community Solar Gardens\",\n category: \"Renewable Energy\",\n impact: \"Provides clean energy to communities\",\n difficulty: \"Advanced\",\n region: \"Rural & Suburban Areas\",\n icon: \"☀️\",\n },\n {\n id: 3,\n name: \"Plastic Waste Recycling Hub\",\n category: \"Waste Management\",\n impact: \"Reduces plastic pollution\",\n difficulty: \"Beginner\",\n region: \"Coastal Communities\",\n icon: \"♻️\",\n },\n {\n id: 4,\n name: \"Vertical Urban Farming\",\n category: \"Agriculture\",\n impact: \"Local food production, reduced transportation emissions\",\n difficulty: \"Intermediate\",\n region: \"Urban Environments\",\n icon: \"🌱\",\n },\n {\n id: 5,\n name: \"Biodiversity Corridor Restoration\",\n category: \"Conservation\",\n impact: \"Protects wildlife, enhances ecosystem health\",\n difficulty: \"Advanced\",\n region: \"Natural Habitats\",\n icon: \"🌿\",\n },\n];\n\nfunction App() {\n const [filter, setFilter] = useState({\n category: \"\",\n difficulty: \"\",\n region: \"\",\n });\n\n const filteredProjects = sustainabilityProjects.filter(project =>\n (!filter.category || project.category === filter.category)\n && (!filter.difficulty || project.difficulty === filter.difficulty)\n && (!filter.region || project.region === filter.region)\n );\n\n return (\n

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",[],[182],"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",[],[191],"f3ffec22-39f4-11f0-acc3-9e149126039e","types.ts","f3ffecea-39f4-11f0-acc3-9e149126039e","e35b636f-a153-4059-a374-9fc82d0cd674",4,["D",1748238467672],"// Shared types for Husnabco Global Resources website\n\nexport interface Service {\n id: string;\n title: string;\n description: string;\n icon: string;\n features: string[];\n}\n\nexport interface ContactForm {\n name: string;\n email: string;\n company?: string;\n message: string;\n}\n\nexport interface GlobalOffice {\n city: string;\n country: string;\n region: string;\n coordinates: {\n lat: number;\n lng: number;\n };\n}\n\nexport interface TeamMember {\n name: string;\n role: string;\n bio: string;\n image?: string;\n}",[],[206,198],"shared","f40029b2-39f4-11f0-acc3-9e149126039e",["D",1748238467672],[178],[206],"05716170-39f5-11f0-b1f7-9e149126039e","index.tsx","05716210-39f5-11f0-b1f7-9e149126039e",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();",[],[152,212],"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",[],[152,220],["D",1748238586577],[],[152,72,64],["D",1748238586577],[174],[152,72],"0290485e-39f5-11f0-9721-9e149126039e",["D",1748238492119],[173,175,176],[152],"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;",[],[245,238],"backend","4506e008-39f5-11f0-8e65-9e149126039e",8,["D",1748238603628],[171],[245],["D",1746019333865],{"_11":12,"_123":70},{"_11":12,"_119":-5,"_69":70,"_31":68,"_120":121,"_122":30},{"_39":110,"_13":16,"_33":36,"_111":75,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":14,"_118":12},"ctx",{"_52":-5,"_142":288,"_289":290,"_291":292,"_293":30,"_294":30,"_295":30,"_296":24,"_297":-5,"_298":-7,"_299":-7,"_300":26,"_301":30,"_302":30,"_303":-5,"_304":30,"_305":30,"_306":30,"_307":-5},"ENV",{"_259":260,"_261":262,"_263":16,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287},"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 · components