|
|
<!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</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> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#fdf8f6', |
|
|
100: '#f9eae5', |
|
|
200: '#f0d1c4', |
|
|
300: '#e7b8a3', |
|
|
400: '#d9896a', |
|
|
500: '#ce6b4d', |
|
|
600: '#ba5239', |
|
|
700: '#9a3f2d', |
|
|
800: '#7f3526', |
|
|
900: '#682d21', |
|
|
950: '#3a170f' |
|
|
}, |
|
|
secondary: { |
|
|
50: '#fafaf9', |
|
|
100: '#f5f5f4', |
|
|
200: '#e7e5e4', |
|
|
300: '#d6d3d1', |
|
|
400: '#a8a29e', |
|
|
500: '#78716c', |
|
|
600: '#57534e', |
|
|
700: '#44403c', |
|
|
800: '#292524', |
|
|
900: '#1c1917', |
|
|
950: '#0c0a09' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
} |
|
|
|
|
|
.playfair { |
|
|
font-family: 'Playfair Display', serif; |
|
|
} |
|
|
|
|
|
.hero-bg { |
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('http://static.photos/construction/1200x630/42'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.project-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.project-card:hover { |
|
|
transform: scale(1.02); |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(to right, #ce6b4d, #9a3f2d); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-secondary-50"> |
|
|
|
|
|
<nav class="bg-white shadow-md 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 h-20 items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<div class="bg-primary-600 w-10 h-10 rounded-lg flex items-center justify-center"> |
|
|
<span class="text-white font-bold text-xl">A</span> |
|
|
</div> |
|
|
<span class="ml-3 text-2xl font-bold text-secondary-900 playfair">Avina Inc</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-8"> |
|
|
<a href="#" class="text-secondary-900 hover:text-primary-600 px-3 py-2 text-base font-medium transition duration-300">Home</a> |
|
|
<a href="#services" class="text-secondary-600 hover:text-primary-600 px-3 py-2 text-base font-medium transition duration-300">Services</a> |
|
|
<a href="#projects" class="text-secondary-600 hover:text-primary-600 px-3 py-2 text-base font-medium transition duration-300">Projects</a> |
|
|
<a href="avinaondemand.html" class="text-secondary-600 hover:text-primary-600 px-3 py-2 text-base font-medium transition duration-300">AvinaOnDemand</a> |
|
|
<a href="#about" class="text-secondary-600 hover:text-primary-600 px-3 py-2 text-base font-medium transition duration-300">About</a> |
|
|
<a href="#contact" class="text-secondary-600 hover:text-primary-600 px-3 py-2 text-base font-medium transition duration-300">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button id="mobile-menu-button" class="text-secondary-600 hover:text-primary-600 focus:outline-none"> |
|
|
<i data-feather="menu" class="h-6 w-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#" class="text-secondary-900 block px-3 py-2 rounded-md text-base font-medium">Home</a> |
|
|
<a href="#services" class="text-secondary-600 hover:text-primary-600 block px-3 py-2 rounded-md text-base font-medium">Services</a> |
|
|
<a href="#projects" class="text-secondary-600 hover:text-primary-600 block px-3 py-2 rounded-md text-base font-medium">Projects</a> |
|
|
<a href="avinaondemand.html" class="text-secondary-600 hover:text-primary-600 block px-3 py-2 rounded-md text-base font-medium">AvinaOnDemand</a> |
|
|
<a href="#about" class="text-secondary-600 hover:text-primary-600 block px-3 py-2 rounded-md text-base font-medium">About</a> |
|
|
<a href="#contact" class="text-secondary-600 hover:text-primary-600 block px-3 py-2 rounded-md text-base font-medium">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="hero-bg h-screen flex items-center"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6 playfair" data-aos="fade-up"> |
|
|
Building Excellence, Delivering Success |
|
|
</h1> |
|
|
<p class="text-xl text-secondary-100 max-w-3xl mx-auto mb-10" data-aos="fade-up" data-aos-delay="200"> |
|
|
International EPC solutions for complex infrastructure projects and residential services across Canada and beyond |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="400"> |
|
|
<a href="#services" class="bg-primary-600 hover:bg-primary-700 text-white font-semibold py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105"> |
|
|
Our Services |
|
|
</a> |
|
|
<a href="#projects" class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-secondary-900 font-semibold py-3 px-8 rounded-lg transition duration-300"> |
|
|
View Projects |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-4 playfair">About Avina Inc</h2> |
|
|
<div class="w-20 h-1 bg-primary-600 mx-auto"></div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row items-center gap-12"> |
|
|
<div class="lg:w-1/2" data-aos="fade-right"> |
|
|
<img src="http://static.photos/cityscape/640x360/23" alt="Avina Inc Headquarters" class="rounded-xl shadow-lg w-full"> |
|
|
</div> |
|
|
<div class="lg:w-1/2" data-aos="fade-left"> |
|
|
<h3 class="text-2xl font-bold text-secondary-900 mb-4 playfair">Project Management Excellence Since 2010</h3> |
|
|
<p class="text-secondary-700 mb-6"> |
|
|
Headquartered in Coquitlam, BC, Canada, Avina Inc operates as a Project Management Office (PMO) |
|
|
specializing in Engineering, Procurement, and Construction services. With over a decade of experience, |
|
|
we've successfully delivered complex infrastructure projects across North America and internationally. |
|
|
</p> |
|
|
<p class="text-secondary-700 mb-6"> |
|
|
Our approach mirrors the operational excellence of leading global service organizations, combining |
|
|
technical expertise with strategic project delivery methodologies to ensure success at every phase |
|
|
of your construction project. |
|
|
</p> |
|
|
<div class="grid grid-cols-2 gap-4 mt-8"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="check-circle" class="text-primary-600 mr-2"></i> |
|
|
<span class="text-secondary-700">International Projects</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="check-circle" class="text-primary-600 mr-2"></i> |
|
|
<span class="text-secondary-700">Certified Engineers</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="check-circle" class="text-primary-600 mr-2"></i> |
|
|
<span class="text-secondary-700">Safety First Approach</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="check-circle" class="text-primary-600 mr-2"></i> |
|
|
<span class="text-secondary-700">On-Time Delivery</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 bg-secondary-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-4 playfair">Our Construction Services</h2> |
|
|
<p class="text-secondary-600 max-w-2xl mx-auto"> |
|
|
Comprehensive construction solutions from foundation to completion |
|
|
</p> |
|
|
<div class="w-20 h-1 bg-primary-600 mx-auto mt-4"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8 service-card transition duration-300" data-aos="fade-up"> |
|
|
<div class="w-16 h-16 rounded-full bg-primary-100 flex items-center justify-center mb-6"> |
|
|
<i data-feather="activity" class="text-primary-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-secondary-900 mb-3">Civil Excavation</h3> |
|
|
<p class="text-secondary-600 mb-4"> |
|
|
Precision excavation services for foundations, basements, and utility installations with state-of-the-art equipment. |
|
|
</p> |
|
|
<a href="#" class="text-primary-600 font-medium flex items-center"> |
|
|
Learn more |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8 service-card transition duration-300" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="w-16 h-16 rounded-full bg-primary-100 flex items-center justify-center mb-6"> |
|
|
<i data-feather="layers" class="text-primary-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-secondary-900 mb-3">Earthworks</h3> |
|
|
<p class="text-secondary-600 mb-4"> |
|
|
Comprehensive earthmoving and grading services for site preparation and land development projects. |
|
|
</p> |
|
|
<a href="#" class="text-primary-600 font-medium flex items-center"> |
|
|
Learn more |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8 service-card transition duration-300" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="w-16 h-16 rounded-full bg-primary-100 flex items-center justify-center mb-6"> |
|
|
<i data-feather="sliders" class="text-primary-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-secondary-900 mb-3">Cementing & Concrete</h3> |
|
|
<p class="text-secondary-600 mb-4"> |
|
|
Specialized concrete placement and finishing services for structural and decorative applications. |
|
|
</p> |
|
|
<a href="#" class="text-primary-600 font-medium flex items-center"> |
|
|
Learn more |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8 service-card transition duration-300" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="w-16 h-16 rounded-full bg-primary-100 flex items-center justify-center mb-6"> |
|
|
<i data-feather="grid" class="text-primary-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-secondary-900 mb-3">Rebar & Formwork</h3> |
|
|
<p class="text-secondary-600 mb-4"> |
|
|
Expert reinforcement installation and formwork systems for concrete structures of all complexities. |
|
|
</p> |
|
|
<a href="#" class="text-primary-600 font-medium flex items-center"> |
|
|
Learn more |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8 service-card transition duration-300" data-aos="fade-up" data-aos-delay="400"> |
|
|
<div class="w-16 h-16 rounded-full bg-primary-100 flex items-center justify-center mb-6"> |
|
|
<i data-feather="cpu" class="text-primary-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-secondary-900 mb-3">Underground Utilities</h3> |
|
|
<p class="text-secondary-600 mb-4"> |
|
|
Installation and maintenance of electrical, water, gas, and telecommunications infrastructure. |
|
|
</p> |
|
|
<a href="#" class="text-primary-600 font-medium flex items-center"> |
|
|
Learn more |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8 service-card transition duration-300" data-aos="fade-up" data-aos-delay="500"> |
|
|
<div class="w-16 h-16 rounded-full bg-primary-100 flex items-center justify-center mb-6"> |
|
|
<i data-feather="navigation" class="text-primary-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-secondary-900 mb-3">Roadworks</h3> |
|
|
<p class="text-secondary-600 mb-4"> |
|
|
Complete road construction and rehabilitation services for municipal and highway infrastructure. |
|
|
</p> |
|
|
<a href="#" class="text-primary-600 font-medium flex items-center"> |
|
|
Learn more |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-4 playfair">Featured Projects</h2> |
|
|
<p class="text-secondary-600 max-w-2xl mx-auto"> |
|
|
Showcasing our expertise in delivering complex construction solutions |
|
|
</p> |
|
|
<div class="w-20 h-1 bg-primary-600 mx-auto mt-4"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="project-card rounded-xl overflow-hidden shadow-lg" data-aos="fade-up"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/construction/640x360/15" alt="Commercial Complex" class="w-full h-64 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-primary-600 text-white px-3 py-1 rounded-full text-sm font-medium"> |
|
|
Commercial |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-secondary-900 mb-2">Downtown Commercial Complex</h3> |
|
|
<p class="text-secondary-600 mb-4"> |
|
|
Mixed-use development featuring modern office spaces and retail areas in Vancouver's financial district. |
|
|
</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-primary-600 font-medium">Vancouver, BC</span> |
|
|
<a href="#" class="text-primary-600 hover:underline">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card rounded-xl overflow-hidden shadow-lg" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/road/640x360/28" alt="Highway Expansion" class="w-full h-64 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-primary-600 text-white px-3 py-1 rounded-full text-sm font-medium"> |
|
|
Infrastructure |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-secondary-900 mb-2">Highway 1 Expansion</h3> |
|
|
<p class="text-secondary-600 mb-4"> |
|
|
Major highway expansion project increasing capacity by 50% between Coquitlam and Port Moody. |
|
|
</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-primary-600 font-medium">Coquitlam, BC</span> |
|
|
<a href="#" class="text-primary-600 hover:underline">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card rounded-xl overflow-hidden shadow-lg" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/residential/640x360/37" alt="Residential Development" class="w-full h-64 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-primary-600 text-white px-3 py-1 rounded-full text-sm font-medium"> |
|
|
Residential |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-secondary-900 mb-2">Heritage Hills Subdivision</h3> |
|
|
<p class="text-secondary-600 mb-4"> |
|
|
Sustainable residential community with 150 custom homes featuring energy-efficient designs. |
|
|
</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-primary-600 font-medium">Abbotsford, BC</span> |
|
|
<a href="#" class="text-primary-600 hover:underline">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-block bg-primary-600 hover:bg-primary-700 text-white font-semibold py-3 px-8 rounded-lg transition duration-300"> |
|
|
View All Projects |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-r from-primary-600 to-primary-800"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6 playfair" data-aos="fade-up"> |
|
|
Ready to Start Your Project? |
|
|
</h2> |
|
|
<p class="text-primary-100 max-w-2xl mx-auto mb-10 text-xl" data-aos="fade-up" data-aos-delay="200"> |
|
|
Partner with Avina Inc for your next construction project or access our on-demand services |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="400"> |
|
|
<a href="#contact" class="bg-white text-primary-600 hover:bg-secondary-100 font-semibold py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105"> |
|
|
Contact Us |
|
|
</a> |
|
|
<a href="avinaondemand.html" class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-primary-600 font-semibold py-3 px-8 rounded-lg transition duration-300"> |
|
|
AvinaOnDemand Portal |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-secondary-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-4 playfair">Get In Touch</h2> |
|
|
<p class="text-secondary-600 max-w-2xl mx-auto"> |
|
|
Have a project in mind? Let's discuss how we can bring your vision to life |
|
|
</p> |
|
|
<div class="w-20 h-1 bg-primary-600 mx-auto mt-4"></div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-12"> |
|
|
<div class="lg:w-1/2" data-aos="fade-right"> |
|
|
<div class="bg-white rounded-xl shadow-lg p-8"> |
|
|
<h3 class="text-2xl font-bold text-secondary-900 mb-6">Send us a message</h3> |
|
|
<form> |
|
|
<div class="mb-6"> |
|
|
<label for="name" class="block text-secondary-700 font-medium mb-2">Full Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-3 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="email" class="block text-secondary-700 font-medium mb-2">Email Address</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-3 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="subject" class="block text-secondary-700 font-medium mb-2">Subject</label> |
|
|
<input type="text" id="subject" class="w-full px-4 py-3 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block text-secondary-700 font-medium mb-2">Message</label> |
|
|
<textarea id="message" rows="5" class="w-full px-4 py-3 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2" data-aos="fade-left"> |
|
|
<div class="bg-white rounded-xl shadow-lg p-8 h-full"> |
|
|
<h3 class="text-2xl font-bold text-secondary-900 mb-6">Contact Information</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-primary-100 p-3 rounded-lg"> |
|
|
<i data-feather="map-pin" class="text-primary-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold text-secondary-900">Headquarters</h4> |
|
|
<p class="text-secondary-600 mt-1"> |
|
|
123 Construction Avenue<br> |
|
|
Coquitlam, BC V3K 6W5<br> |
|
|
Canada |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-primary-100 p-3 rounded-lg"> |
|
|
<i data-feather="phone" class="text-primary-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold text-secondary-900">Phone</h4> |
|
|
<p class="text-secondary-600 mt-1"> |
|
|
+1 (604) 555-0123<br> |
|
|
+1 (800) 555-0456 |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-primary-100 p-3 rounded-lg"> |
|
|
<i data-feather="mail" class="text-primary-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold text-secondary-900">Email</h4> |
|
|
<p class="text-secondary-600 mt-1"> |
|
|
info@avinainc.com<br> |
|
|
support@avinainc.com |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-primary-100 p-3 rounded-lg"> |
|
|
<i data-feather="clock" class="text-primary-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold text-secondary-900">Working Hours</h4> |
|
|
<p class="text-secondary-600 mt-1"> |
|
|
Monday - Friday: 8:00 AM - 6:00 PM<br> |
|
|
Saturday: 9:00 AM - 1:00 PM<br> |
|
|
Sunday: Closed |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<h4 class="text-lg font-semibold text-secondary-900 mb-4">Follow Us</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-primary-100 hover:bg-primary-200 p-3 rounded-full transition duration-300"> |
|
|
<i data-feather="facebook" class="text-primary-600 w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-primary-100 hover:bg-primary-200 p-3 rounded-full transition duration-300"> |
|
|
<i data-feather="twitter" class="text-primary-600 w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-primary-100 hover:bg-primary-200 p-3 rounded-full transition duration-300"> |
|
|
<i data-feather="linkedin" class="text-primary-600 w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-primary-100 hover:bg-primary-200 p-3 rounded-full transition duration-300"> |
|
|
<i data-feather="instagram" class="text-primary-600 w-5 h-5"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-secondary-900 text-white pt-16 pb-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16"> |
|
|
<div> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-primary-600 w-10 h-10 rounded-lg flex items-center justify-center"> |
|
|
<span class="text-white font-bold text-xl">A</span> |
|
|
</div> |
|
|
<span class="ml-3 text-2xl font-bold playfair">Avina Inc</span> |
|
|
</div> |
|
|
<p class="text-secondary-300 mb-6"> |
|
|
Delivering excellence in Engineering, Procurement, and Construction services across Canada and internationally since 2010. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-secondary-300 hover:text-white transition duration-300"> |
|
|
<i data-feather="facebook" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-secondary-300 hover:text-white transition duration-300"> |
|
|
<i data-feather="twitter" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-secondary-300 hover:text-white transition duration-300"> |
|
|
<i data-feather="linkedin" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-secondary-300 hover:text-white transition duration-300"> |
|
|
<i data-feather="instagram" class="w-5 h-5"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-6 playfair">Quick Links</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-secondary-300 hover:text-white transition duration-300">Home</a></li> |
|
|
<li><a href="#services" class="text-secondary-300 hover:text-white transition duration-300">Services</a></li> |
|
|
<li><a href="#projects" class="text-secondary-300 hover:text-white transition duration-300">Projects</a></li> |
|
|
<li><a href="avinaondemand.html" class="text-secondary-300 hover:text-white transition duration-300">AvinaOnDemand</a></li> |
|
|
<li><a href="#about" class="text-secondary-300 hover:text-white transition duration-300">About Us</a></li> |
|
|
<li><a href="#contact" class="text-secondary-300 hover:text-white transition duration-300">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-6 playfair">Services</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-secondary-300 hover:text-white transition duration-300">Civil Excavation</a></li> |
|
|
<li><a href="#" class="text-secondary-300 hover:text-white transition duration-300">Earthworks</a></li> |
|
|
<li><a href="#" class="text-secondary-300 hover:text-white transition duration-300">Cementing & Concrete</a></li> |
|
|
<li><a href="#" class="text-secondary-300 hover:text-white transition duration-300">Rebar & Formwork</a></li> |
|
|
<li><a href="#" class="text-secondary-300 hover:text-white transition duration-300">Underground Utilities</a></li> |
|
|
<li><a href="#" class="text-secondary-300 hover:text-white transition duration-300">Roadworks</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-6 playfair">Newsletter</h3> |
|
|
<p class="text-secondary-300 mb-4"> |
|
|
Subscribe to our newsletter for the latest updates and projects. |
|
|
</p> |
|
|
<form class="flex"> |
|
|
<input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-lg focus:outline-none text-secondary-900"> |
|
|
<button type="submit" class="bg-primary-600 hover:bg-primary-700 px-4 rounded-r-lg transition duration-300"> |
|
|
<i data-feather="send" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-secondary-800 pt-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-secondary-400"> |
|
|
© 2023 Avina Inc. All rights reserved. |
|
|
</p> |
|
|
<div class="flex space-x-6 mt-4 md:mt-0"> |
|
|
<a href="#" class="text-secondary-400 hover:text-white transition duration-300">Privacy Policy</a> |
|
|
<a href="#" class="text-secondary-400 hover:text-white transition duration-300">Terms of Service</a> |
|
|
<a href="#" class="text-secondary-400 hover:text-white transition duration-300">Sitemap</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
AOS.init({ |
|
|
duration: 1000, |
|
|
once: true |
|
|
}); |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if (target) { |
|
|
window.scrollTo({ |
|
|
top: target.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
