Hugging Face's logo

Spaces:
patoconnect
/
gse
Running

App Files Community
gse / index.html
patoconnect's picture
patoconnect
Add 1 files
531da5e verified
raw
history blame contribute delete
57.3 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYON ENGINEERING AND CONSTRUCTION LLC | Industrial Construction Experts</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
}
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
min-height: 700px;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.project-video {
aspect-ratio: 16/9;
}
.gallery-item {
transition: all 0.3s ease;
overflow: hidden;
}
.gallery-item:hover {
transform: scale(1.03);
}
.gallery-image {
transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-image {
transform: scale(1.1);
}
.testimonial-card {
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 1s ease forwards;
}
.nav-link {
position: relative;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #1d4ed8;
transition: width 0.3s ease;
}
.nav-link:hover:after {
width: 100%;
}
.stats-item {
border-right: 1px solid rgba(255,255,255,0.2);
}
.stats-item:last-child {
border-right: none;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- Navigation -->
<nav class="bg-gray-900 text-white shadow-lg fixed w-full z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-xl font-bold text-blue-400">RAYON <span class="text-white">ENGINEERING</span></span>
</div>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a href="#home" class="nav-link text-white hover:text-blue-400 px-3 py-2 text-sm font-medium">Home</a>
<a href="#services" class="nav-link text-gray-300 hover:text-blue-400 px-3 py-2 text-sm font-medium">Services</a>
<a href="#projects" class="nav-link text-gray-300 hover:text-blue-400 px-3 py-2 text-sm font-medium">Projects</a>
<a href="#gallery" class="nav-link text-gray-300 hover:text-blue-400 px-3 py-2 text-sm font-medium">Gallery</a>
<a href="#about" class="nav-link text-gray-300 hover:text-blue-400 px-3 py-2 text-sm font-medium">About</a>
<a href="#contact" class="nav-link text-gray-300 hover:text-blue-400 px-3 py-2 text-sm font-medium">Contact</a>
</div>
</div>
<div class="md:hidden">
<button class="mobile-menu-button p-2 rounded-md text-gray-300 hover:text-white hover:bg-gray-800 focus:outline-none">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="mobile-menu hidden md:hidden bg-gray-800">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-700">Home</a>
<a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700">Services</a>
<a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700">Projects</a>
<a href="#gallery" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700">Gallery</a>
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700">About</a>
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700">Contact</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero flex items-center justify-center text-white pt-20">
<div class="text-center px-4 max-w-6xl animate-fade-in">
<div class="mb-6">
<span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-blue-700 text-white">
<i class="fas fa-hard-hat mr-2"></i> Industrial Construction Experts
</span>
</div>
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">Engineering Excellence in Industrial Construction</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">RAYON ENGINEERING AND CONSTRUCTION LLC delivers innovative solutions for complex industrial projects with uncompromising safety and quality standards.</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300 flex items-center">
<i class="fas fa-envelope mr-2"></i> Contact Us
</a>
<a href="#projects" class="bg-transparent hover:bg-white hover:text-gray-900 text-white font-bold py-3 px-8 border-2 border-white rounded-lg transition duration-300 flex items-center">
<i class="fas fa-hard-hat mr-2"></i> Our Projects
</a>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-12 bg-blue-800 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div class="stats-item pr-4">
<div class="text-4xl font-bold mb-2">18+</div>
<div class="text-sm uppercase tracking-wider">Years Experience</div>
</div>
<div class="stats-item pr-4">
<div class="text-4xl font-bold mb-2">150+</div>
<div class="text-sm uppercase tracking-wider">Projects Completed</div>
</div>
<div class="stats-item pr-4">
<div class="text-4xl font-bold mb-2">0</div>
<div class="text-sm uppercase tracking-wider">Lost-Time Incidents</div>
</div>
<div class="stats-item">
<div class="text-4xl font-bold mb-2">250+</div>
<div class="text-sm uppercase tracking-wider">Skilled Professionals</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">About Us</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Building Industrial Excellence Since 2005
</p>
<p class="mt-4 max-w-3xl text-xl text-gray-600 lg:mx-auto">
RAYON ENGINEERING AND CONSTRUCTION LLC is a premier engineering and construction firm specializing in large-scale industrial projects, with extensive expertise in the oil and gas sector.
</p>
</div>
<div class="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-2 items-center">
<div>
<img src="https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Industrial Construction" class="rounded-lg shadow-xl w-full">
</div>
<div>
<h3 class="text-2xl font-bold text-gray-900 mb-4">Our Mission</h3>
<p class="text-gray-600 mb-6">
To deliver innovative, safe, and sustainable engineering solutions that exceed client expectations while maintaining the highest standards of quality and environmental responsibility.
</p>
<div class="space-y-6">
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-shield-alt text-xl"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Safety Commitment</h4>
<p class="mt-2 text-gray-600">
Our safety record is unmatched, with zero lost-time incidents across all projects through rigorous training and protocols.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-users-cog text-xl"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Expert Team</h4>
<p class="mt-2 text-gray-600">
Over 250 skilled professionals with an average of 15 years experience in complex industrial projects.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-certificate text-xl"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Quality Assurance</h4>
<p class="mt-2 text-gray-600">
Certified ISO 9001:2015 with rigorous quality control processes ensuring excellence in every project.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Our Services</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Comprehensive Engineering Solutions
</p>
<p class="mt-4 max-w-3xl text-xl text-gray-600 lg:mx-auto">
We deliver end-to-end engineering and construction services across multiple sectors with specialized expertise in industrial projects.
</p>
</div>
<div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Service 1 -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-500">
<div class="p-6">
<div class="flex items-center justify-center h-16 w-16 rounded-lg bg-blue-100 text-blue-600 mb-4">
<i class="fas fa-building text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Real Estate Development</h3>
<p class="text-gray-600">
Comprehensive development services from land acquisition to final construction, delivering high-quality commercial and industrial properties with a focus on sustainable design principles.
</p>
<div class="mt-4">
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
<!-- Service 2 -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-500">
<div class="p-6">
<div class="flex items-center justify-center h-16 w-16 rounded-lg bg-blue-100 text-blue-600 mb-4">
<i class="fas fa-bridge text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Bridge Construction</h3>
<p class="text-gray-600">
Specialized in all types of bridge construction including beam, arch, truss, and suspension bridges with advanced engineering techniques and materials for durability and longevity.
</p>
<div class="mt-4">
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
<!-- Service 3 -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-500">
<div class="p-6">
<div class="flex items-center justify-center h-16 w-16 rounded-lg bg-blue-100 text-blue-600 mb-4">
<i class="fas fa-industry text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Industrial Building Construction</h3>
<p class="text-gray-600">
Full-service construction management for industrial facilities including manufacturing plants, warehouses, and processing centers with a focus on operational efficiency.
</p>
<div class="mt-4">
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
<!-- Service 4 -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-500">
<div class="p-6">
<div class="flex items-center justify-center h-16 w-16 rounded-lg bg-blue-100 text-blue-600 mb-4">
<i class="fas fa-oil-well text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">New Oil & Gas Facilities</h3>
<p class="text-gray-600">
Turnkey solutions for new oil and gas facilities including refineries, processing plants, pipelines, and storage terminals with integrated safety systems.
</p>
<div class="mt-4">
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
<!-- Service 5 -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-500">
<div class="p-6">
<div class="flex items-center justify-center h-16 w-16 rounded-lg bg-blue-100 text-blue-600 mb-4">
<i class="fas fa-tools text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Facility Revamping</h3>
<p class="text-gray-600">
Comprehensive revamping and upgrading services for existing oil and gas facilities to improve efficiency, increase capacity, and ensure regulatory compliance.
</p>
<div class="mt-4">
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
<!-- Service 6 -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-500">
<div class="p-6">
<div class="flex items-center justify-center h-16 w-16 rounded-lg bg-blue-100 text-blue-600 mb-4">
<i class="fas fa-project-diagram text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Project Management</h3>
<p class="text-gray-600">
Full project lifecycle management from feasibility studies to commissioning, ensuring projects are delivered on time, within budget, and to exacting quality standards.
</p>
<div class="mt-4">
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Current Project Section -->
<section id="projects" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center mb-12">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Featured Project</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Kearl Oil Sands Revamping Project
</p>
<p class="mt-4 max-w-3xl text-xl text-gray-600 lg:mx-auto">
Fort McMurray, Alberta, Canada
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h3 class="text-2xl font-bold text-gray-900 mb-4">Project Overview</h3>
<p class="text-gray-600 mb-4">
RAYON ENGINEERING AND CONSTRUCTION LLC is proud to be the lead contractor for the revamping of the Kearl Oil Sands site near Fort McMurray, Alberta. This critical three-month contract involves significant upgrades to existing infrastructure to improve operational efficiency, environmental performance, and safety standards.
</p>
<p class="text-gray-600 mb-6">
Our team is responsible for the complete revamp of the processing facilities, including structural modifications, piping upgrades, installation of new equipment, and integration of advanced control systems - all while maintaining continuous operations at this vital energy production site.
</p>
<div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
<h4 class="text-lg font-semibold text-gray-900 mb-4">Project Highlights</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-check text-xs"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm text-gray-700">Client: Imperial Oil</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-check text-xs"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm text-gray-700">Duration: 3 Months (In Progress)</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-check text-xs"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm text-gray-700">Location: Fort McMurray, Alberta</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-check text-xs"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm text-gray-700">Scope: Full Facility Revamp</p>
</div>
</div>
</div>
</div>
<div class="mt-6">
<a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
<i class="fas fa-paper-plane mr-2"></i> Inquire About This Project
</a>
</div>
</div>
<div class="space-y-6">
<div class="project-video bg-gray-200 rounded-xl overflow-hidden shadow-lg">
<iframe class="w-full h-full" src="https://www.youtube.com/embed/9bZkhPqD2OY?rel=0&controls=1&showinfo=0" title="Kearl Oil Sands Overview" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="text-sm text-gray-500 italic">
Video: Overview of Kearl Oil Sands operations near Fort McMurray, Alberta (Source: Imperial Oil)
</div>
<div class="grid grid-cols-2 gap-4">
<div class="rounded-lg overflow-hidden shadow">
<img src="https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Oil Sands Site" class="w-full h-40 object-cover">
</div>
<div class="rounded-lg overflow-hidden shadow">
<img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Industrial Construction" class="w-full h-40 object-cover">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center mb-12">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Our Portfolio</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Project Gallery
</p>
<p class="mt-4 max-w-3xl text-xl text-gray-600 lg:mx-auto">
A showcase of our completed projects across various sectors demonstrating our engineering expertise
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Gallery Item 1 -->
<div class="gallery-item rounded-xl overflow-hidden shadow-lg bg-white">
<div class="relative overflow-hidden h-64">
<img src="https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Oil Refinery" class="gallery-image w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6">
<div>
<h3 class="text-xl font-bold text-white">Coastal Refinery Expansion</h3>
<p class="text-gray-200">Capacity expansion project completed ahead of schedule</p>
</div>
</div>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="gallery-item rounded-xl overflow-hidden shadow-lg bg-white">
<div class="relative overflow-hidden h-64">
<img src="https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Industrial Facility" class="gallery-image w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6">
<div>
<h3 class="text-xl font-bold text-white">Gas Processing Plant</h3>
<p class="text-gray-200">New construction with advanced emission control systems</p>
</div>
</div>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="gallery-item rounded-xl overflow-hidden shadow-lg bg-white">
<div class="relative overflow-hidden h-64">
<img src="https://images.unsplash.com/photo-1559302994-c5f1d72f5df6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Bridge Construction" class="gallery-image w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6">
<div>
<h3 class="text-xl font-bold text-white">River Valley Suspension Bridge</h3>
<p class="text-gray-200">1.2km suspension bridge with innovative seismic design</p>
</div>
</div>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="gallery-item rounded-xl overflow-hidden shadow-lg bg-white">
<div class="relative overflow-hidden h-64">
<img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Residential Development" class="gallery-image w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6">
<div>
<h3 class="text-xl font-bold text-white">Lakeside Residential Community</h3>
<p class="text-gray-200">250-unit sustainable housing development</p>
</div>
</div>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="gallery-item rounded-xl overflow-hidden shadow-lg bg-white">
<div class="relative overflow-hidden h-64">
<img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Commercial Building" class="gallery-image w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6">
<div>
<h3 class="text-xl font-bold text-white">Downtown Office Complex</h3>
<p class="text-gray-200">25-story commercial building with LEED Gold certification</p>
</div>
</div>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="gallery-item rounded-xl overflow-hidden shadow-lg bg-white">
<div class="relative overflow-hidden h-64">
<img src="https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Oil Sands" class="gallery-image w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6">
<div>
<h3 class="text-xl font-bold text-white">Oil Sands Upgrading Facility</h3>
<p class="text-gray-200">Major revamp project completed with zero safety incidents</p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
View Full Portfolio
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20 bg-blue-800 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center mb-12">
<h2 class="text-base text-blue-300 font-semibold tracking-wide uppercase">Client Testimonials</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl">
What Our Clients Say
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="testimonial-card p-8 rounded-xl">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<i class="fas fa-quote-left text-blue-300 text-2xl"></i>
</div>
<div class="ml-4">
<p class="text-gray-200 italic">
"RAYON ENGINEERING delivered our refinery expansion project two weeks ahead of schedule while maintaining impeccable safety standards. Their team's expertise in complex industrial projects is unmatched in the industry."
</p>
</div>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
</div>
<div class="ml-4">
<p class="text-sm font-medium text-white">Michael Johnson</p>
<p class="text-sm text-blue-200">VP Operations, Coastal Energy</p>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card p-8 rounded-xl">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<i class="fas fa-quote-left text-blue-300 text-2xl"></i>
</div>
<div class="ml-4">
<p class="text-gray-200 italic">
"The suspension bridge project was technically challenging, but RAYON's engineers found innovative solutions that reduced costs without compromising quality. Their attention to detail and project management was exceptional."
</p>
</div>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
</div>
<div class="ml-4">
<p class="text-sm font-medium text-white">Sarah Williams</p>
<p class="text-sm text-blue-200">Director, State Infrastructure Authority</p>
</div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card p-8 rounded-xl">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<i class="fas fa-quote-left text-blue-300 text-2xl"></i>
</div>
<div class="ml-4">
<p class="text-gray-200 italic">
"Their work on our Kearl Oil Sands revamp has been exceptional. RAYON's ability to execute complex modifications while maintaining operations is impressive. They've become our go-to contractor for major projects."
</p>
</div>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
</div>
<div class="ml-4">
<p class="text-sm font-medium text-white">David Chen</p>
<p class="text-sm text-blue-200">Project Manager, Imperial Oil</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center mb-12">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Contact Us</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Get In Touch
</p>
<p class="mt-4 max-w-3xl text-xl text-gray-600 lg:mx-auto">
Ready to discuss your next project? Contact our team today for a consultation.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mt-16">
<div>
<h3 class="text-2xl font-bold text-gray-900 mb-6">Contact Information</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-100 text-blue-600">
<i class="fas fa-map-marker-alt"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Headquarters</h4>
<p class="mt-1 text-gray-600">123 Engineering Way, Suite 500<br>Houston, TX 77001</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-100 text-blue-600">
<i class="fas fa-phone-alt"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Phone</h4>
<p class="mt-1 text-gray-600">+1 (800) 555-0199<br>Mon-Fri: 8:00 AM - 6:00 PM</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-100 text-blue-600">
<i class="fas fa-envelope"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Email</h4>
<p class="mt-1 text-gray-600">info@rayonengineering.com<br>projects@rayonengineering.com</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-100 text-blue-600">
<i class="fas fa-clock"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Business Hours</h4>
<p class="mt-1 text-gray-600">Monday - Friday: 8:00 AM - 6:00 PM<br>Saturday - Sunday: Closed</p>
</div>
</div>
</div>
<div class="mt-12">
<h4 class="text-lg font-medium text-gray-900 mb-4">Follow Us</h4>
<div class="flex space-x-4">
<a href="#" class="h-10 w-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center hover:bg-blue-600 hover:text-white transition duration-300">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="h-10 w-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center hover:bg-blue-600 hover:text-white transition duration-300">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="h-10 w-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center hover:bg-blue-600 hover:text-white transition duration-300">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="h-10 w-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center hover:bg-blue-600 hover:text-white transition duration-300">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="h-10 w-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center hover:bg-blue-600 hover:text-white transition duration-300">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-sm border border-gray-200">
<h3 class="text-2xl font-bold text-gray-900 mb-6">Send Us a Message</h3>
<form>
<div class="grid grid-cols-1 gap-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name *</label>
<input type="text" id="name" name="name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address *</label>
<input type="email" id="email" name="email" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
<input type="tel" id="phone" name="phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="company" class="block text-sm font-medium text-gray-700 mb-1">Company</label>
<input type="text" id="company" name="company" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject *</label>
<select id="subject" name="subject" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option value="">Select a subject</option>
<option>General Inquiry</option>
<option>Project Consultation</option>
<option>Career Opportunities</option>
<option>Vendor/Supplier Inquiry</option>
<option>Other</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message *</label>
<textarea id="message" name="message" rows="5" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-3 px-4 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Send Message
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<div class="bg-gray-100 border-t border-b border-gray-200">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2779644.715178998!2d-117.03292000000001!3d53.726668299999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5398c94d04b8b3eb%3A0x5a0673431cbfd4e5!2sKearl%20Oil%20Sands!5e1!3m2!1sen!2sus!4v1689871234567!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
<div>
<h3 class="text-lg font-semibold mb-4 text-blue-400">RAYON ENGINEERING</h3>
<p class="text-gray-400">
Delivering engineering excellence and construction innovation for industrial projects worldwide since 2005.
</p>
<div class="mt-4 flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
<li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Services</a></li>
<li><a href="#projects" class="text-gray-400 hover:text-white transition duration-300">Projects</a></li>
<li><a href="#gallery" class="text-gray-400 hover:text-white transition duration-300">Gallery</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Services</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Real Estate Development</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Bridge Construction</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Building Construction</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Oil & Gas Facilities</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Facility Revamping</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Project Management</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Newsletter</h3>
<p class="text-gray-400 mb-4">
Subscribe to our newsletter for the latest project updates and company news.
</p>
<form class="flex">
<input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-md focus:outline-none text-gray-900">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-md transition duration-300">
<i class="fas fa-paper-plane"></i>
</button>
</form>
<div class="mt-6">
<a href="#contact" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
<i class="fas fa-file-alt mr-2"></i> Download Company Profile
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm">
&copy; 2023 RAYON ENGINEERING AND CONSTRUCTION LLC. All rights reserved.
</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-400 hover:text-white text-sm">
Privacy Policy
</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">
Terms of Service
</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">
Sitemap
</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
const mobileMenuButton = document.querySelector('.mobile-menu-button');
const mobileMenu = document.querySelector('.mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
// Close mobile menu if open
mobileMenu.classList.add('hidden');
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// Update URL without jumping
if (history.pushState) {
history.pushState(null, null, targetId);
} else {
location.hash = targetId;
}
}
});
});
// Scroll animation
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in');
}
});
}, {threshold: 0.1});
document.querySelectorAll('section').forEach(section => {
observer.observe(section);
});
// Handle page load with hash
window.addEventListener('load', function() {
if (window.location.hash) {
const targetElement = document.querySelector(window.location.hash);
if (targetElement) {
setTimeout(() => {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}, 100);
}
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=patoconnect/gse" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>