|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Avina Inc - International EPC Company | Coquitlam, BC</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
:root { |
|
|
--primary-beige: #F5E6D3; |
|
|
--secondary-beige: #E8D5B7; |
|
|
--accent-warm: #D4A574; |
|
|
--dark-warm: #8B7355; |
|
|
--light-beige: #FAF6F0; |
|
|
} |
|
|
|
|
|
.bg-primary-beige { background-color: var(--primary-beige); } |
|
|
.bg-secondary-beige { background-color: var(--secondary-beige); } |
|
|
.bg-accent-warm { background-color: var(--accent-warm); } |
|
|
.bg-light-beige { background-color: var(--light-beige); } |
|
|
|
|
|
.text-dark-warm { color: var(--dark-warm); } |
|
|
.text-accent-warm { color: var(--accent-warm); } |
|
|
|
|
|
.hero-overlay { |
|
|
background: linear-gradient(135deg, rgba(245, 230, 211, 0.9) 0%, rgba(212, 165, 116, 0.7) 100%); |
|
|
} |
|
|
|
|
|
.service-card { |
|
|
transition: all 0.3s ease; |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 40px rgba(139, 115, 85, 0.15); |
|
|
} |
|
|
|
|
|
.vanta-canvas { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.btn-warm { |
|
|
background: linear-gradient(135deg, var(--accent-warm) 0%, var(--dark-warm) 100%); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-warm:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 20px rgba(139, 115, 85, 0.3); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background-color: var(--accent-warm); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.project-filter { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.project-filter.active { |
|
|
background-color: var(--accent-warm); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.modal { |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.quote-form { |
|
|
background: rgba(250, 246, 240, 0.95); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.hero-text { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-light-beige"> |
|
|
|
|
|
<nav class="fixed w-full bg-white/95 backdrop-blur-md z-50 shadow-sm" data-aos="fade-down"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 bg-accent-warm rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="home" class="text-white w-6 h-6"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h1 class="text-xl font-bold text-dark-warm">Avina Inc</h1> |
|
|
<p class="text-xs text-gray-600">International EPC Company</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#home" class="nav-link text-dark-warm hover:text-accent-warm">Home</a> |
|
|
<a href="#about" class="nav-link text-dark-warm hover:text-accent-warm">About</a> |
|
|
<a href="#services" class="nav-link text-dark-warm hover:text-accent-warm">Services</a> |
|
|
<a href="#projects" class="nav-link text-dark-warm hover:text-accent-warm">Projects</a> |
|
|
<a href="#avina-ondemand" class="nav-link text-accent-warm hover:text-dark-warm font-semibold">AvinaOnDemand</a> |
|
|
<a href="#contact" class="btn-warm text-white px-6 py-2 rounded-full">Contact Us</a> |
|
|
</div> |
|
|
|
|
|
<button id="mobile-menu-btn" class="md:hidden"> |
|
|
<i data-feather="menu" class="w-6 h-6 text-dark-warm"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden mt-4 pb-4"> |
|
|
<div class="flex flex-col space-y-4"> |
|
|
<a href="#home" class="text-dark-warm hover:text-accent-warm">Home</a> |
|
|
<a href="#about" class="text-dark-warm hover:text-accent-warm">About</a> |
|
|
<a href="#services" class="text-dark-warm hover:text-accent-warm">Services</a> |
|
|
<a href="#projects" class="text-dark-warm hover:text-accent-warm">Projects</a> |
|
|
<a href="#avina-ondemand" class="text-accent-warm font-semibold">AvinaOnDemand</a> |
|
|
<a href="#contact" class="btn-warm text-white px-6 py-2 rounded-full inline-block text-center">Contact Us</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden"> |
|
|
<div id="vanta-bg" class="absolute inset-0"></div> |
|
|
<div class="hero-overlay absolute inset-0"></div> |
|
|
|
|
|
<div class="relative z-10 text-center px-6 max-w-4xl mx-auto"> |
|
|
<h1 class="hero-text text-5xl md:text-7xl font-bold text-dark-warm mb-6" data-aos="fade-up"> |
|
|
Building Tomorrow's Infrastructure |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl text-dark-warm mb-8 opacity-90" data-aos="fade-up" data-aos-delay="200"> |
|
|
International EPC Company | Coquitlam, BC |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center" data-aos="fade-up" data-aos-delay="400"> |
|
|
<a href="#services" class="btn-warm text-white px-8 py-4 rounded-full text-lg font-semibold"> |
|
|
Our Services |
|
|
</a> |
|
|
<a href="#avina-ondemand" class="bg-white text-accent-warm px-8 py-4 rounded-full text-lg font-semibold border-2 border-accent-warm hover:bg-accent-warm hover:text-white transition-all"> |
|
|
AvinaOnDemand |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> |
|
|
<i data-feather="chevron-down" class="w-8 h-8 text-dark-warm"></i> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div data-aos="fade-right"> |
|
|
<h2 class="text-4xl font-bold text-dark-warm mb-6">About Avina Inc</h2> |
|
|
<p class="text-gray-700 mb-6 leading-relaxed"> |
|
|
Avina Inc is a leading international Engineering, Procurement, and Construction (EPC) company headquartered in Coquitlam, British Columbia. With a proven track record of delivering complex infrastructure projects, we combine technical expertise with innovative solutions to meet our clients' most challenging requirements. |
|
|
</p> |
|
|
<p class="text-gray-700 mb-8 leading-relaxed"> |
|
|
Operating under a Project Management Office (PMO) structure, we ensure seamless execution of projects across multiple sectors, from large-scale industrial developments to residential construction services through our AvinaOnDemand platform. |
|
|
</p> |
|
|
<div class="grid grid-cols-3 gap-6"> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-3xl font-bold text-accent-warm">500+</h3> |
|
|
<p class="text-gray-600">Projects Completed</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-3xl font-bold text-accent-warm">15+</h3> |
|
|
<p class="text-gray-600">Years Experience</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-3xl font-bold text-accent-warm">50+</h3> |
|
|
<p class="text-gray-600">Countries Served</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div data-aos="fade-left"> |
|
|
<img src="http://static.photos/construction/640x360/42" alt="Construction Project" class="rounded-lg shadow-xl"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 bg-light-beige"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-4xl font-bold text-dark-warm mb-4">Our Construction Services</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
Comprehensive construction solutions from civil excavation to roadworks, delivered with precision and expertise |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="service-card bg-white p-8 rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="w-16 h-16 bg-accent-warm rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="truck" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-dark-warm mb-4">Civil Excavation</h3> |
|
|
<p class="text-gray-600">Professional excavation services for residential, commercial, and industrial projects with precision and safety.</p> |
|
|
</div> |
|
|
|
|
|
<div class="service-card bg-white p-8 rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="w-16 h-16 bg-accent-warm rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="layers" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-dark-warm mb-4">Earthworks</h3> |
|
|
<p class="text-gray-600">Comprehensive earthmoving and grading services to prepare your site for construction.</p> |
|
|
</div> |
|
|
|
|
|
<div class="service-card bg-white p-8 rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="w-16 h-16 bg-accent-warm rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="box" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-dark-warm mb-4">Cementing</h3> |
|
|
<p class="text-gray-600">High-quality cement work for foundations, floors, and structural elements with durability guarantee.</p> |
|
|
</div> |
|
|
|
|
|
<div class="service-card bg-white p-8 rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="400"> |
|
|
<div class="w-16 h-16 bg-accent-warm rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="grid" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-dark-warm mb-4">Rebar Installation</h3> |
|
|
<p class="text-gray-600">Professional rebar placement and tying for reinforced concrete structures meeting all codes.</p> |
|
|
</div> |
|
|
|
|
|
<div class="service-card bg-white p-8 rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="500"> |
|
|
<div class="w-16 h-16 bg-accent-warm rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="copy" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-dark-warm mb-4">Formwork</h3> |
|
|
<p class="text-gray-600">Custom formwork solutions for complex concrete shapes and architectural requirements.</p> |
|
|
</div> |
|
|
|
|
|
<div class="service-card bg-white p-8 rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="600"> |
|
|
<div class="w-16 h-16 bg-accent-warm rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="wifi" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-dark-warm mb-4">Underground Utilities</h3> |
|
|
<p class="text-gray-600">Installation and maintenance of water, sewer, gas, and electrical infrastructure.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12" data-aos="fade-up"> |
|
|
<a href="#contact" class="btn-warm text-white px-8 py-4 rounded-full text-lg font-semibold"> |
|
|
Request a Quote |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="avina-ondemand" class="py-20 bg-secondary-beige"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-4xl font-bold text-dark-warm mb-4">AvinaOnDemand</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
Your trusted on-demand handyman and subcontracting service for residential and commercial needs |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-12 items-center mb-16"> |
|
|
<div data-aos="fade-right"> |
|
|
<h3 class="text-2xl font-bold text-dark-warm mb-6">Fast, Reliable, Professional</h3> |
|
|
<p class="text-gray-700 mb-6"> |
|
|
AvinaOnDemand connects you with vetted, professional handymen and subcontractors for all your property maintenance and improvement needs. From small repairs to major renovations, we've got you covered. |
|
|
</p> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check-circle" class="text-accent-warm w-5 h-5 mr-3"></i> |
|
|
<span>Same-day service available</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check-circle" class="text-accent-warm w-5 h-5 mr-3"></i> |
|
|
<span>Transparent pricing</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check-circle" class="text-accent-warm w-5 h-5 mr-3"></i> |
|
|
<span>Satisfaction guaranteed</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button onclick="openQuoteModal()" class="btn-warm text-white px-8 py-3 rounded-full font-semibold"> |
|
|
Get a Quote Now |
|
|
</button> |
|
|
</div> |
|
|
<div data-aos="fade-left"> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md text-center"> |
|
|
<i data-feather="tool" class="w-12 h-12 text-accent-warm mx-auto mb-3"></i> |
|
|
<h4 class="font-semibold text-dark-warm">Handyman Services</h4> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md text-center"> |
|
|
<i data-feather="paint-bucket" class="w-12 h-12 text-accent-warm mx-auto mb-3"></i> |
|
|
<h4 class="font-semibold text-dark-warm">Painting</h4> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md text-center"> |
|
|
<i data-feather="home" class="w-12 h-12 text-accent-warm mx-auto mb-3"></i> |
|
|
<h4 class="font-semibold text-dark-warm">Home Repairs</h4> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md text-center"> |
|
|
<i data-feather="zap" class="w-12 h-12 text-accent-warm mx-auto mb-3"></i> |
|
|
<h4 class="font-semibold text-dark-warm">Electrical</h4> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-4xl font-bold text-dark-warm mb-4">Our Projects</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
Explore our portfolio of successful construction projects across residential, commercial, and industrial sectors |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-4 mb-12" data-aos="fade-up"> |
|
|
<button class="project-filter active px-6 py-2 rounded-full bg-accent-warm text-white" data-filter="all">All Projects</button> |
|
|
<button class="project-filter px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-accent-warm hover:text-white" data-filter="residential">Residential</button> |
|
|
<button class="project-filter px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-accent-warm hover:text-white" data-filter="commercial">Commercial</button> |
|
|
<button class="project-filter px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-accent-warm hover:text-white" data-filter="industrial">Industrial</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="project-card bg-light-beige rounded-lg overflow-hidden shadow-lg" data-category="residential" data-aos="fade-up"> |
|
|
<img src="http://static.photos/construction/640x360/101" alt="Residential Project" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-dark-warm mb-2">Luxury Residential Complex</h3> |
|
|
<p class="text-gray-600 mb-4">High-end residential development with custom excavation and foundation work</p> |
|
|
<a href="#" class="text-accent-warm font-semibold hover:text-dark-warm">View Details →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project-card bg-light-beige rounded-lg overflow-hidden shadow-lg" data-category="commercial" data-aos="fade-up"> |
|
|
<img src="http://static.photos/office/640x360/102" alt="Commercial Project" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-dark-warm mb-2">Office Complex Construction</h3> |
|
|
<p class="text-gray-600 mb-4">Multi-story office building with underground utilities and roadworks</p> |
|
|
<a href="#" class="text-accent-warm font-semibold hover:text-dark-warm">View Details →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project-card bg-light-beige rounded-lg overflow-hidden shadow-lg" data-category="industrial" data-aos="fade-up"> |
|
|
<img src="http://static.photos/industry/640x360/103" alt="Industrial Project" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-dark-warm mb-2">Manufacturing Facility</h3> |
|
|
<p class="text-gray-600 mb-4">Large-scale industrial facility with specialized foundation requirements</p> |
|
|
<a href="#" class="text-accent-warm font-semibold hover:text-dark-warm">View Details →</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-light-beige"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="text-center mb-12" data-aos="fade-up"> |
|
|
<h2 class="text-4xl font-bold text-dark-warm mb-4">Contact Us</h2> |
|
|
<p class="text-xl text-gray-600">Ready to start your next project? Get in touch with our team.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-12"> |
|
|
<div data-aos="fade-right"> |
|
|
<h3 class="text-2xl font-bold text-dark-warm mb-6">Get in Touch</h3> |
|
|
<div class="space-y-4 mb-8"> |
|
|
<div class="flex items-start"> |
|
|
<i data-feather="map-pin" class="text-accent-warm w-5 h-5 mr-3 mt-1"></i> |
|
|
<div> |
|
|
<p class="font-semibold text-dark-warm">Headquarters</p> |
|
|
<p class="text-gray-600">Coquitlam, BC, Canada</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i data-feather="phone" class="text-accent-warm w-5 h-5 mr-3 mt-1"></i> |
|
|
<div> |
|
|
<p class="font-semibold text-dark-warm">Phone</p> |
|
|
<p class="text-gray-600">+1 (604) 555-0123</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i data-feather="mail" class="text-accent-warm w-5 h-5 mr-3 mt-1"></i> |
|
|
<div> |
|
|
<p class="font-semibold text-dark-warm">Email</p> |
|
|
<p class="text-gray-600">info@avinainc.com</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 bg-accent-warm rounded-full flex items-center justify-center text-white hover:bg-dark-warm transition-colors"> |
|
|
<i data-feather="linkedin" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-accent-warm rounded-full flex items-center justify-center text-white hover:bg-dark-warm transition-colors"> |
|
|
<i data-feather="twitter" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-accent-warm rounded-full flex items-center justify-center text-white hover:bg-dark-warm transition-colors"> |
|
|
<i data-feather="facebook" class="w-5 h-5"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<form class="space-y-6" data-aos="fade-left"> |
|
|
<div> |
|
|
<input type="text" placeholder="Your Name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-accent-warm focus:outline-none"> |
|
|
</div> |
|
|
<div> |
|
|
<input type="email" placeholder="Your Email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-accent-warm focus:outline-none"> |
|
|
</div> |
|
|
<div> |
|
|
<input type="tel" placeholder="Your Phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-accent-warm focus:outline-none"> |
|
|
</div> |
|
|
<div> |
|
|
<select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-accent-warm focus:outline-none"> |
|
|
<option>Select Service</option> |
|
|
<option>Civil Excavation</option> |
|
|
<option>Earthworks</option> |
|
|
<option>Cementing</option> |
|
|
<option>Rebar Installation</option> |
|
|
<option>Formwork</option> |
|
|
<option>Underground Utilities</option> |
|
|
<option>Roadworks</option> |
|
|
<option>AvinaOnDemand Services</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<textarea placeholder="Project Details" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-accent-warm focus:outline-none"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="btn-warm w-full text-white py-3 rounded-lg font-semibold"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-dark-warm text-white py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<div class="w-10 h-10 bg-accent-warm rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="home" class="text-white w-6 h-6"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold">Avina Inc</h3> |
|
|
<p class="text-sm text-gray-300">International EPC Company</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
Building tomorrow's infrastructure with expertise, innovation, and commitment to excellence. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Services</h4> |
|
|
<ul class="space-y-2 text-sm text-gray-300"> |
|
|
<li><a href="#" class="hover:text-accent-warm">Civil Excavation</a></li> |
|
|
<li><a href="#" class="hover:text-accent-warm">Earthworks</a></li> |
|
|
<li><a href="#" class="hover:text-accent-warm">Cementing</a></li> |
|
|
<li><a href="#" class="hover:text-accent-warm">Rebar Installation</a></li> |
|
|
<li><a href="#" class="hover:text-accent-warm">Formwork</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Quick Links</h4> |
|
|
<ul class="space-y-2 text-sm text-gray-300"> |
|
|
<li><a href="#about" class="hover:text-accent-warm">About Us</a></li> |
|
|
<li><a href="#projects" class="hover:text-accent-warm">Projects</a></li> |
|
|
<li><a href="#avina-ondemand" class="hover:text-accent-warm">AvinaOnDemand</a></li> |
|
|
<li><a href="#contact" class="hover:text-accent-warm">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Contact Info</h4> |
|
|
<div class="space-y-2 text-sm text-gray-300"> |
|
|
<p>Coquitlam, BC, Canada</p> |
|
|
<p>+1 (604) 555-0123</p> |
|
|
<p>info@avinainc.com</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-600 mt-8 pt-8 text-center text-sm text-gray-300"> |
|
|
<p>© 2024 Avina Inc. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="quoteModal" class="fixed inset-0 bg-black/50 modal hidden z-50 flex items-center justify-center p-4"> |
|
|
<div class="quote-form rounded-xl max-w-md w-full p-8" data-aos="zoom-in"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold text-dark-warm">Get a Quote</h3> |
|
|
<button onclick="closeQuoteModal()" class="text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="x" class="w-6 h-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Service Type</label> |
|
|
<select class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:border-accent-warm focus:outline-none"> |
|
|
<option>Handyman Services</option> |
|
|
<option>Painting</option> |
|
|
<option>Home Repairs</option> |
|
|
<option>Electrical</option> |
|
|
<option>Plumbing</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Property Type</label> |
|
|
<select class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:border-accent-warm focus:outline-none"> |
|
|
<option>Residential</option> |
|
|
<option>Commercial</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Description</label> |
|
|
<textarea placeholder="Please describe your project..." rows="3" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:border-accent-warm focus:outline-none"></textarea> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Contact Email</label> |
|
|
<input type="email" placeholder="your@email.com" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:border-accent-warm focus:outline-none"> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-4 pt-4"> |
|
|
<button type="submit" class="btn-warm flex-1 text-white py-2 rounded-lg font-semibold"> |
|
|
Request Quote |
|
|
</button> |
|
|
<button type="button" onclick="closeQuoteModal()" class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg font-semibold hover:bg-gray-300"> |
|
|
Cancel |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<script>AOS.init({ duration: 800, once: true });</script> |
|
|
<script>feather.replace();</script> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0xd4a574, |
|
|
color2: 0xf5e6d3, |
|
|
backgroundColor: 0xfaf6f0, |
|
|
size: 1.2 |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuBtn.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const filterButtons = document.querySelectorAll('.project-filter'); |
|
|
const projectCards = document.querySelectorAll('.project-card'); |
|
|
|
|
|
filterButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const filter = button.getAttribute('data-filter'); |
|
|
|
|
|
|
|
|
filterButtons.forEach(btn => btn.classList.remove('active', 'bg-accent-warm', 'text-white')); |
|
|
filterButtons.forEach(btn => { |
|
|
if (!btn.classList.contains('active')) { |
|
|
btn.classList.add('bg-gray-200', 'text-gray-700'); |
|
|
} |
|
|
}); |
|
|
button.classList.add('active', 'bg-accent-warm', 'text-white'); |
|
|
button.classList.remove('bg-gray-200', 'text-gray-700'); |
|
|
|
|
|
|
|
|
projectCards.forEach(card => { |
|
|
if (filter === 'all' || card.getAttribute('data-category') === filter) { |
|
|
card.style.display = 'block'; |
|
|
} else { |
|
|
card.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function openQuoteModal() { |
|
|
document.getElementById('quoteModal').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function closeQuoteModal() { |
|
|
document.getElementById('quoteModal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if (target) { |
|
|
target.scrollIntoView({ |
|
|
behavior: 'smooth', |
|
|
block: 'start' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('form').forEach(form => { |
|
|
form.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
alert('Thank you for your submission! We will get back to you soon.'); |
|
|
if (form.closest('#quoteModal')) { |
|
|
closeQuoteModal(); |
|
|
} |
|
|
form.reset(); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
