GreenFlow LNG | Global Energy Solutions

Powering Global Business with Sustainable Energy Solutions

GreenFlow LNG delivers innovative liquefied natural gas technologies that optimize efficiency, reduce costs, and minimize environmental impact for enterprises worldwide.

Explore Solutions Schedule Consultation

30% Cost Reduction

50% Lower Emissions

99.9% Reliability

Energy Solutions Advisor

Online

Welcome to GreenFlow LNG. How can I help your business optimize its energy strategy today?

Enterprise Energy Solutions

Comprehensive LNG solutions tailored to your business needs

Industrial Power

Reliable LNG solutions for manufacturing facilities, reducing operational costs while meeting sustainability goals.

Learn More

Transportation

Clean-burning LNG fuel solutions for fleet operations, marine vessels, and heavy transport applications.

Learn More

Power Generation

Efficient LNG power generation systems for utilities, data centers, and critical infrastructure.

Learn More

Energy Trading

Strategic LNG procurement and trading services to optimize your energy portfolio and manage price volatility.

Learn More

Global Leadership in Sustainable Energy

For over 15 years, GreenFlow LNG has been at the forefront of the energy transition, helping businesses worldwide implement cleaner, more efficient energy solutions.

Our team of industry experts combines deep technical knowledge with business acumen to deliver LNG solutions that create measurable value for our clients while advancing environmental stewardship.

ISO 14001 & 9001 Certified

Global Operations in 28 Countries

Industry-Leading Safety Record

Company Profile

Company Image

Industry Insights

Expert analysis and thought leadership on energy markets and LNG technology

June 15, 2023

The Future of LNG in Industrial Decarbonization

Exploring how LNG serves as a critical transition fuel for industrial sectors seeking to reduce carbon emissions.

Read Article

May 22, 2023

LNG Market Trends: Supply, Demand, and Price Outlook

Analysis of current market dynamics and forecasts for LNG pricing and availability through 2025.

Read Article

View All Insights

Contact GreenFlow LNG

Ready to optimize your energy strategy? Our team of experts is here to help you implement sustainable LNG solutions tailored to your business needs.

Global Headquarters

123 Energy Plaza, Houston, TX 77002, USA

Phone

+1 (713) 555-0123

Email

solutions@greenflowlng.com

Request Information

Full Name

Company

Phone

How can we help?

/* ===== VARIABLES ===== */ :root { /* Corporate Color Palette */ --primary: #0066b3; /* Deep Blue */ --primary-dark: #004d8a; /* Darker Blue */ --primary-light: #4d94d6; /* Lighter Blue */ --secondary: #00a651; /* Green */ --secondary-dark: #008040; /* Darker Green */ --accent: #f7941d; /* Orange Accent */ /* Neutral Colors */ --dark: #1a2a36; /* Dark Blue-Gray */ --dark-medium: #2c3e50; /* Medium Dark Blue-Gray */ --medium: #546e7a; /* Medium Blue-Gray */ --light-medium: #78909c; /* Light Medium Blue-Gray */ --light: #eceff1; /* Light Gray */ --white: #ffffff; /* White */ /* Background Colors */ --bg-dark: #0f1923; /* Dark Background */ --bg-medium: #1a2a36; /* Medium Background */ --bg-light: #f5f7fa; /* Light Background */ --bg-card: #ffffff; /* Card Background */ /* Text Colors */ --text-dark: #1a2a36; /* Dark Text */ --text-medium: #546e7a; /* Medium Text */ --text-light: #eceff1; /* Light Text */ --text-muted: #90a4ae; /* Muted Text */ /* UI Elements */ --border: #cfd8dc; /* Border Color */ --shadow: rgba(0, 0, 0, 0.1); /* Shadow Color */ --overlay: rgba(15, 25, 35, 0.8); /* Overlay Color */ /* Typography */ --font-heading: 'Montserrat', sans-serif; --font-body: 'Open Sans', sans-serif; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-xxl: 5rem; /* Container Width */ --container-width: 1200px; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Transitions */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* Z-index layers */ --z-background: -1; --z-normal: 1; --z-header: 100; --z-overlay: 200; --z-modal: 300; } /* ===== RESET & BASE STYLES ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 80px; /* Account for fixed header */ } body { font-family: var(--font-body); font-weight: 400; line-height: 1.6; color: var(--text-medium); background-color: var(--bg-dark); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.3; color: var(--text-dark); margin-bottom: var(--space-sm); } h1 { font-size: 2.75rem; } h2 { font-size: 2.25rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.125rem; } h6 { font-size: 1rem; } p { margin-bottom: var(--space-md); } a { color: var(--primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--primary-dark); } ul, ol { list-style-position: inside; margin-bottom: var(--space-md); } img { max-width: 100%; height: auto; display: block; } button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } /* ===== UTILITY CLASSES ===== */ .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-md); } .lead-text { font-size: 1.125rem; font-weight: 500; margin-bottom: var(--space-md); } .text-center { text-align: center; } .text-right { text-align: right; } .text-primary { color: var(--primary); } .text-secondary { color: var(--secondary); } .text-accent { color: var(--accent); } .text-light { color: var(--text-light); } .text-dark { color: var(--text-dark); } .bg-primary { background-color: var(--primary); } .bg-secondary { background-color: var(--secondary); } .bg-dark { background-color: var(--bg-dark); } .bg-light { background-color: var(--bg-light); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-xs); } .mb-2 { margin-bottom: var(--space-sm); } .mb-3 { margin-bottom: var(--space-md); } .mb-4 { margin-bottom: var(--space-lg); } .mb-5 { margin-bottom: var(--space-xl); } /* ===== BUTTONS ===== */ .btn { display: inline-block; padding: 0.75rem 1.5rem; font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: all var(--transition-normal); white-space: nowrap; } .btn-primary { background-color: var(--primary); color: var(--white); border-color: var(--primary); } .btn-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 102, 179, 0.2); } .btn-secondary { background-color: var(--secondary); color: var(--white); border-color: var(--secondary); } .btn-secondary:hover { background-color: var(--secondary-dark); border-color: var(--secondary-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 166, 81, 0.2); } .btn-outline { background-color: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background-color: var(--primary); color: var(--white); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 102, 179, 0.2); } .btn-nav { background-color: var(--primary); color: var(--white); padding: 0.5rem 1rem; font-size: 0.875rem; } .btn-nav:hover { background-color: var(--primary-dark); color: var(--white); } .btn-advisor { background-color: var(--primary); color: var(--white); border-radius: 50%; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; } .btn-advisor:hover { background-color: var(--primary-dark); transform: translateY(-2px); } .btn-text { color: var(--primary); font-weight: 600; padding: 0; background: none; border: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: all var(--transition-fast); } .btn-text:hover { color: var(--primary-dark); gap: 0.75rem; } .btn-full { width: 100%; } /* ===== THREE.JS BACKGROUND ===== */ #threejs-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--z-background); opacity: 0.6; } /* ===== HEADER ===== */ .header { position: sticky; top: 0; left: 0; width: 100%; background-color: rgba(15, 25, 35, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(236, 239, 241, 0.1); z-index: var(--z-header); padding: 1rem 0; transition: all var(--transition-normal); } .header-container { display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; gap: 0.5rem; } .logo-icon { width: 36px; height: 36px; background-color: var(--primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; color: var(--text-light); } .logo-highlight { color: var(--secondary); } .main-nav { display: flex; align-items: center; } .nav-links { display: flex; align-items: center; gap: var(--space-md); list-style: none; margin: 0; } .nav-links a { color: var(--text-light); font-weight: 500; position: relative; padding: 0.5rem 0; } .nav-links a:not(.btn)::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary); transition: width var(--transition-normal); } .nav-links a:not(.btn):hover, .nav-links a.active { color: var(--primary-light); } .nav-links a:not(.btn):hover::after, .nav-links a.active::after { width: 100%; } .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; } .bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--text-light); transition: all var(--transition-fast); } /* ===== HERO SECTION ===== */ .hero { padding: var(--space-xl) 0; min-height: calc(100vh - 80px); display: flex; align-items: center; position: relative; overflow: hidden; } .hero-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; } .hero-content { color: var(--text-light); } .hero-content h1 { color: var(--white); margin-bottom: var(--space-md); font-size: clamp(2rem, 4vw, 2.75rem); } .hero-subtitle { font-size: 1.125rem; color: var(--text-light); margin-bottom: var(--space-lg); opacity: 0.9; } .hero-cta { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); } .hero-stats { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); } .stat-item { display: flex; flex-direction: column; } .stat-number { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--primary); } .stat-label { font-size: 0.875rem; color: var(--text-light); opacity: 0.8; } /* ===== ADVISOR PANEL ===== */ .advisor-panel { background-color: var(--bg-medium); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); overflow: hidden; border: 1px solid rgba(236, 239, 241, 0.1); } .advisor-header { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); background-color: rgba(0, 102, 179, 0.1); border-bottom: 1px solid rgba(236, 239, 241, 0.1); } .advisor-icon { width: 40px; height: 40px; background-color: var(--primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .advisor-title { flex: 1; } .advisor-title h3 { color: var(--text-light); margin-bottom: 0; font-size: 1.125rem; } .advisor-status { font-size: 0.75rem; color: var(--secondary); display: flex; align-items: center; gap: 0.25rem; } .advisor-status::before { content: ''; display: inline-block; width: 8px; height: 8px; background-color: var(--secondary); border-radius: 50%; } .advisor-body { padding: var(--space-md); } #advisor-message { color: var(--text-light); margin-bottom: var(--space-md); min-height: 80px; } .advisor-interaction { display: flex; gap: var(--space-xs); } .advisor-input { flex: 1; padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(236, 239, 241, 0.2); background-color: rgba(15, 25, 35, 0.5); color: var(--text-light); } .advisor-input::placeholder { color: var(--text-muted); } .advisor-input:focus { outline: none; border-color: var(--primary); } /* ===== SOLUTIONS SECTION ===== */ .solutions-section { padding: var(--space-xxl) 0; background-color: var(--bg-light); position: relative; } .section-header { text-align: center; max-width: 800px; margin: 0 auto var(--space-xl); } .section-header h2 { color: var(--text-dark); margin-bottom: var(--space-xs); } .section-header p { color: var(--text-medium); font-size: 1.125rem; } .solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg); } .solution-card { background-color: var(--bg-card); border-radius: var(--radius-md); padding: var(--space-lg); box-shadow: 0 4px 12px var(--shadow); transition: transform var(--transition-normal), box-shadow var(--transition-normal); height: 100%; display: flex; flex-direction: column; } .solution-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px var(--shadow); } .solution-icon { width: 60px; height: 60px; background-color: rgba(0, 102, 179, 0.1); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: var(--space-md); } .solution-card h3 { color: var(--text-dark); margin-bottom: var(--space-sm); } .solution-card p { color: var(--text-medium); margin-bottom: var(--space-md); flex-grow: 1; } /* ===== ABOUT SECTION ===== */ .about-section { padding: var(--space-xxl) 0; background-color: var(--bg-dark); position: relative; } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; } .about-text h2 { color: var(--text-light); margin-bottom: var(--space-md); } .about-features { display: flex; flex-direction: column; gap: var(--space-sm); margin: var(--space-lg) 0; } .feature { display: flex; align-items: center; gap: var(--space-sm); } .feature i { color: var(--secondary); font-size: 1.25rem; } .feature span { color: var(--text-light); } .about-image { position: relative; } .image-placeholder { width: 100%; aspect-ratio: 4/3; background-color: rgba(236, 239, 241, 0.1); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); } .image-placeholder i { font-size: 3rem; margin-bottom: var(--space-sm); } /* ===== INSIGHTS SECTION ===== */ .insights-section { padding: var(--space-xxl) 0; background-color: var(--bg-light); position: relative; } .insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-xl); } .insight-card { background-color: var(--bg-card); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 12px var(--shadow); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .insight-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px var(--shadow); } .insight-image { width: 100%; aspect-ratio: 16/9; } .insight-image .image-placeholder { width: 100%; height: 100%; border-radius: 0; } .insight-content { padding: var(--space-md); } .insight-date { display: block; font-size: 0.875rem; color: var(--text-muted); margin-bottom: var(--space-xs); } .insight-content h3 { font-size: 1.25rem; margin-bottom: var(--space-sm); } .insight-content p { margin-bottom: var(--space-md); } .insights-cta { text-align: center; } /* ===== CONTACT SECTION ===== */ .contact-section { padding: var(--space-xxl) 0; background-color: var(--bg-dark); position: relative; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; } .contact-info h2 { color: var(--text-light); margin-bottom: var(--space-md); } .contact-info p { color: var(--text-light); opacity: 0.8; margin-bottom: var(--space-lg); } .contact-methods { display: flex; flex-direction: column; gap: var(--space-md); } .contact-method { display: flex; align-items: flex-start; gap: var(--space-md); } .contact-method i { color: var(--primary); font-size: 1.5rem; margin-top: 0.25rem; } .contact-method h4 { color: var(--text-light); margin-bottom: var(--space-xs); } .contact-method p { color: var(--text-light); opacity: 0.8; margin-bottom: 0; } .contact-form-container { background-color: var(--bg-medium); border-radius: var(--radius-md); padding: var(--space-lg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .contact-form h3 { color: var(--text-light); margin-bottom: var(--space-lg); text-align: center; } .form-group { margin-bottom: var(--space-md); } .form-group label { display: block; margin-bottom: var(--space-xs); color: var(--text-light); font-weight: 600; } .form-group input, .form-group textarea { width: 100%; padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(236, 239, 241, 0.2); background-color: rgba(15, 25, 35, 0.5); color: var(--text-light); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); } /* ===== FOOTER ===== */ .footer { background-color: var(--bg-medium); padding-top: var(--space-xl); position: relative; z-index: var(--z-normal); } .footer-top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid rgba(236, 239, 241, 0.1); } .footer-logo p { color: var(--text-light); opacity: 0.8; margin-top: var(--space-sm); } .footer-column h4 { color: var(--text-light); margin-bottom: var(--space-md); font-size: 1.125rem; } .footer-column ul { list-style: none; margin: 0; padding: 0; } .footer-column li { margin-bottom: var(--space-xs); } .footer-column a { color: var(--text-light); opacity: 0.8; transition: opacity var(--transition-fast); } .footer-column a:hover { opacity: 1; color: var(--primary-light); } .footer-newsletter h4 { color: var(--text-light); margin-bottom: var(--space-sm); } .footer-newsletter p { color: var(--text-light); opacity: 0.8; margin-bottom: var(--space-sm); } .newsletter-form { display: flex; gap: var(--space-xs); } .newsletter-form input { flex: 1; padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(236, 239, 241, 0.2); background-color: rgba(15, 25, 35, 0.5); color: var(--text-light); } .newsletter-form input:focus { outline: none; border-color: var(--primary); } .footer-bottom { padding: var(--space-md) 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-md); } .footer-social { display: flex; gap: var(--space-sm); } .footer-social a { width: 36px; height: 36px; background-color: rgba(236, 239, 241, 0.1); color: var(--text-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .footer-social a:hover { background-color: var(--primary); color: var(--white); transform: translateY(-3px); } .footer-legal { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; } .footer-legal p { color: var(--text-light); opacity: 0.8; margin-bottom: 0; } .legal-links { display: flex; gap: var(--space-md); } .legal-links a { color: var(--text-light); opacity: 0.8; font-size: 0.875rem; } .legal-links a:hover { opacity: 1; color: var(--primary-light); } /* ===== RESPONSIVE STYLES ===== */ @media (max-width: 1200px) { .footer-top { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 992px) { html { font-size: 15px; } .hero-container, .about-content, .contact-grid { grid-template-columns: 1fr; gap: var(--space-lg); } .hero-content { text-align: center; } .hero-cta, .hero-stats { justify-content: center; } .about-image { order: -1; } } @media (max-width: 768px) { .mobile-menu-btn { display: block; } .nav-links { position: fixed; top: 80px; left: 0; width: 100%; flex-direction: column; background-color: var(--bg-dark); padding: var(--space-md); gap: var(--space-md); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all var(--transition-normal); border-bottom: 1px solid rgba(236, 239, 241, 0.1); } .nav-links.active { transform: translateY(0); opacity: 1; visibility: visible; } .footer-top { grid-template-columns: 1fr; gap: var(--space-lg); } .footer-bottom { flex-direction: column; text-align: center; } .footer-social, .legal-links { justify-content: center; } } @media (max-width: 576px) { .hero-cta { flex-direction: column; width: 100%; } .hero-cta .btn { width: 100%; } .hero-stats { flex-direction: column; align-items: center; gap: var(--space-md); } .newsletter-form { flex-direction: column; } .newsletter-form .btn { width: 100%; } } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // ===== THREE.JS BACKGROUND ===== class ParticleBackground { constructor() { this.scene = null; this.camera = null; this.renderer = null; this.particles = null; this.particleGroup = null; this.raycaster = new THREE.Raycaster(); this.mouse = new THREE.Vector2(); this.clock = new THREE.Clock(); this.container = document.getElementById('threejs-background'); this.width = window.innerWidth; this.height = window.innerHeight; this.mouseX = 0; this.mouseY = 0; this.windowHalfX = this.width / 2; this.windowHalfY = this.height / 2; this.isInitialized = false; // Configuration this.config = { particleCount: 2000, particleSize: 0.05, particleColor: 0x0066b3, // Primary blue particleSecondaryColor: 0x00a651, // Secondary green particleOpacity: 0.6, cameraZ: 70, cameraFov: 75, rotationSpeed: 0.0002, mouseSensitivity: 0.0003, particleSpread: 100, groupCount: 3, groupSpread: 40 }; this.init(); } init() { if (!this.container) { console.error('Particle background container not found'); return; } // Initialize scene this.scene = new THREE.Scene(); // Initialize camera this.camera = new THREE.PerspectiveCamera( this.config.cameraFov, this.width / this.height, 0.1, 1000 ); this.camera.position.z = this.config.cameraZ; // Initialize renderer this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); this.renderer.setSize(this.width, this.height); this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); this.container.appendChild(this.renderer.domElement); // Create particle groups this.particleGroup = new THREE.Object3D(); this.scene.add(this.particleGroup); // Create multiple particle systems for visual interest this.createParticleSystem(this.config.particleColor, 0, 0, 0); this.createParticleSystem(this.config.particleSecondaryColor, this.config.groupSpread, -this.config.groupSpread/2, this.config.groupSpread/3); this.createParticleSystem(this.config.particleColor, -this.config.groupSpread, this.config.groupSpread/2, -this.config.groupSpread/3); // Add event listeners window.addEventListener('resize', this.onWindowResize.bind(this)); document.addEventListener('mousemove', this.onDocumentMouseMove.bind(this)); // Start animation this.animate(); this.isInitialized = true; } createParticleSystem(color, offsetX = 0, offsetY = 0, offsetZ = 0) { // Create geometry const particlesGeometry = new THREE.BufferGeometry(); const particleCount = Math.floor(this.config.particleCount / this.config.groupCount); const posArray = new Float32Array(particleCount * 3); // Create positions with some randomness for (let i = 0; i < particleCount * 3; i += 3) { posArray[i] = (Math.random() - 0.5) * this.config.particleSpread + offsetX; posArray[i + 1] = (Math.random() - 0.5) * this.config.particleSpread + offsetY; posArray[i + 2] = (Math.random() - 0.5) * this.config.particleSpread + offsetZ; } particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); // Create material const particlesMaterial = new THREE.PointsMaterial({ size: this.config.particleSize, color: color, transparent: true, opacity: this.config.particleOpacity, depthWrite: false, blending: THREE.AdditiveBlending, sizeAttenuation: true }); // Create points const particles = new THREE.Points(particlesGeometry, particlesMaterial); this.particleGroup.add(particles); return particles; } animate() { if (!this.isInitialized) return; requestAnimationFrame(this.animate.bind(this)); const time = this.clock.getElapsedTime(); // Rotate particle group this.particleGroup.rotation.x += this.config.rotationSpeed; this.particleGroup.rotation.y += this.config.rotationSpeed * 1.5; // Subtle movement based on mouse position this.particleGroup.rotation.x += (this.mouseY * this.config.mouseSensitivity); this.particleGroup.rotation.y += (this.mouseX * this.config.mouseSensitivity); // Subtle breathing effect this.particleGroup.scale.x = 1 + Math.sin(time * 0.3) * 0.03; this.particleGroup.scale.y = 1 + Math.sin(time * 0.3) * 0.03; this.particleGroup.scale.z = 1 + Math.sin(time * 0.3) * 0.03; // Render this.renderer.render(this.scene, this.camera); } onWindowResize() { this.width = window.innerWidth; this.height = window.innerHeight; this.windowHalfX = this.width / 2; this.windowHalfY = this.height / 2; this.camera.aspect = this.width / this.height; this.camera.updateProjectionMatrix(); this.renderer.setSize(this.width, this.height); this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); } onDocumentMouseMove(event) { // Calculate normalized mouse position this.mouseX = (event.clientX - this.windowHalfX) / this.windowHalfX; this.mouseY = (event.clientY - this.windowHalfY) / this.windowHalfY; } } // ===== ENERGY ADVISOR CHATBOT ===== class EnergyAdvisor { constructor() { this.advisorBtn = document.getElementById('advisor-btn'); this.userQuery = document.getElementById('user-query'); this.advisorMessage = document.getElementById('advisor-message'); this.responses = { 'cost': 'Based on current market analysis, our LNG solutions can reduce operational energy costs by 20-30% compared to traditional fuels, with ROI typically achieved within 24-36 months depending on usage volume.', 'price': 'Our LNG pricing is competitive and tailored to your specific needs. We offer flexible contract terms with options for fixed pricing or market-indexed rates to help manage budget predictability.', 'environment': 'GreenFlow LNG produces approximately 25-30% less CO2 than diesel and up to 50% less than coal. Our advanced systems also virtually eliminate SOx emissions and significantly reduce NOx and particulate matter.', 'emissions': 'Our LNG solutions can reduce your carbon footprint by up to 30% compared to diesel and 50% compared to coal, helping your business meet increasingly stringent emissions regulations and sustainability targets.', 'technology': 'We employ proprietary liquefaction and regasification technologies that maximize efficiency while minimizing environmental impact. Our modular systems can be scaled to meet your specific requirements.', 'equipment': 'Our equipment includes state-of-the-art cryogenic storage tanks, vaporizers, and control systems designed for maximum reliability and safety, with remote monitoring capabilities for real-time performance optimization.', 'safety': 'LNG has an excellent safety record. Our systems incorporate multiple redundant safety features, automated monitoring, and comply with all international standards including ISO, NFPA, and EN regulations.', 'implementation': 'The implementation process typically takes 3-6 months from contract to commissioning, depending on project scope. Our turnkey approach includes site assessment, permitting support, installation, and comprehensive training.', 'maintenance': 'We provide comprehensive maintenance programs with 24/7 technical support, predictive maintenance using IoT sensors, and guaranteed response times to minimize any potential downtime.', 'industries': 'Our LNG solutions serve diverse sectors including manufacturing, transportation, power generation, mining, and remote operations where reliable, clean energy is critical to business continuity.', 'default': 'Thank you for your inquiry. I'd be happy to provide specific information about how our LNG solutions can benefit your business. Could you please provide more details about your energy needs or specific questions about cost savings, environmental benefits, or implementation?' }; this.init(); } init() { if (!this.advisorBtn || !this.userQuery || !this.advisorMessage) { console.warn('Energy Advisor elements not found'); return; } // Add event listeners this.advisorBtn.addEventListener('click', this.handleQuery.bind(this)); this.userQuery.addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); this.handleQuery(); } }); // Initialize with welcome message this.typeWriterEffect(this.advisorMessage, 'Welcome to GreenFlow LNG. How can I help your business optimize its energy strategy today?'); } handleQuery() { const query = this.userQuery.value.trim(); if (!query) return; // Show thinking state this.advisorMessage.textContent = 'Analyzing your question...'; this.advisorBtn.disabled = true; this.advisorBtn.innerHTML = ''; // Simulate processing delay setTimeout(() => { let responseKey = 'default'; const queryLower = query.toLowerCase(); // Check for matches in responses for (const key in this.responses) { if (key !== 'default' && queryLower.includes(key)) { responseKey = key; break; } } // Handle greetings if (queryLower.match(/^(hello|hi|hey|greetings)/i)) { this.typeWriterEffect(this.advisorMessage, 'Hello! I\'m your GreenFlow LNG Energy Solutions Advisor. How can I assist your business today?'); } else { // Provide response with typewriter effect this.typeWriterEffect(this.advisorMessage, this.responses[responseKey]); } // Reset UI this.userQuery.value = ''; this.advisorBtn.disabled = false; this.advisorBtn.innerHTML = ''; }, 1000); } typeWriterEffect(element, text, speed = 30) { element.textContent = ''; let i = 0; function type() { if (i < text.length) { element.textContent += text.charAt(i); i++; setTimeout(type, speed); } } type(); } } // ===== MOBILE NAVIGATION ===== class MobileNavigation { constructor() { this.menuBtn = document.querySelector('.mobile-menu-btn'); this.navLinks = document.querySelector('.nav-links'); this.navItems = document.querySelectorAll('.nav-links a'); this.isOpen = false; this.init(); } init() { if (!this.menuBtn || !this.navLinks) { console.warn('Mobile navigation elements not found'); return; } // Toggle menu on button click this.menuBtn.addEventListener('click', this.toggleMenu.bind(this)); // Close menu when clicking a link this.navItems.forEach(item => { item.addEventListener('click', this.closeMenu.bind(this)); }); // Close menu when clicking outside document.addEventListener('click', (e) => { if (this.isOpen && !e.target.closest('.main-nav')) { this.closeMenu(); } }); } toggleMenu() { if (this.isOpen) { this.closeMenu(); } else { this.openMenu(); } } openMenu() { this.navLinks.classList.add('active'); this.menuBtn.classList.add('active'); this.menuBtn.setAttribute('aria-expanded', 'true'); this.isOpen = true; // Animate menu bars const bars = this.menuBtn.querySelectorAll('.bar'); bars[0].style.transform = 'rotate(45deg) translate(5px, 6px)'; bars[1].style.opacity = '0'; bars[2].style.transform = 'rotate(-45deg) translate(5px, -6px)'; } closeMenu() { this.navLinks.classList.remove('active'); this.menuBtn.classList.remove('active'); this.menuBtn.setAttribute('aria-expanded', 'false'); this.isOpen = false; // Reset menu bars const bars = this.menuBtn.querySelectorAll('.bar'); bars[0].style.transform = 'none'; bars[1].style.opacity = '1'; bars[2].style.transform = 'none'; } } // ===== SCROLL ANIMATIONS ===== class ScrollAnimations { constructor() { this.header = document.querySelector('.header'); this.sections = document.querySelectorAll('section'); this.navLinks = document.querySelectorAll('.nav-links a'); this.lastScrollTop = 0; this.init(); } init() { if (!this.header) { console.warn('Header element not found'); return; } // Update active nav link on scroll window.addEventListener('scroll', this.handleScroll.bind(this)); // Set current year in footer this.setCurrentYear(); } handleScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; // Header shrink effect if (scrollTop > 50) { this.header.classList.add('scrolled'); } else { this.header.classList.remove('scrolled'); } // Update active nav link this.updateActiveNavLink(); this.lastScrollTop = scrollTop; } updateActiveNavLink() { // Get current scroll position const scrollPosition = window.scrollY + 100; // Offset for header // Check which section is in view this.sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.offsetHeight; const sectionId = section.getAttribute('id'); if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) { // Remove active class from all links this.navLinks.forEach(link => { link.classList.remove('active'); }); // Add active class to current section link const activeLink = document.querySelector(`.nav-links a[href="#${sectionId}"]`); if (activeLink) { activeLink.classList.add('active'); } } }); } setCurrentYear() { const yearElement = document.getElementById('current-year'); if (yearElement) { yearElement.textContent = new Date().getFullYear(); } } } // ===== INITIALIZE COMPONENTS ===== document.addEventListener('DOMContentLoaded', () => { // Initialize particle background const particleBackground = new ParticleBackground(); // Initialize energy advisor const energyAdvisor = new EnergyAdvisor(); // Initialize mobile navigation const mobileNavigation = new MobileNavigation(); // Initialize scroll animations const scrollAnimations = new ScrollAnimations(); });