terrasight-geomatics / industries.html
liamdare's picture
can you change the green to brown text with organge backgrounds? add transparency so it looks like the text has been high lighted
aa0f0ca verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Industries | TerraSight Geomatics</title>
<meta name="description" content="Geospatial solutions tailored for architecture, engineering, planning, and environmental industries. Professional surveying services across multiple sectors.">
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#8B4513',
secondary: '#D2691E',
stone: '#A8A29E',
charcoal: '#374151',
sand: '#E2E8F0',
offwhite: '#FEF7ED'
}
}
}
}
</script
<style>
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Inter:wght@300;400;500&display=swap');
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Archivo', sans-serif; font-weight: 800; }
.industry-card {
transition: all 0.3s ease;
}
.industry-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);
}
.highlight-text {
background-color: rgba(210, 105, 30, 0.15);
padding: 0.1em 0.3em;
border-radius: 0.2em;
}
</style>
</head>
<body class="bg-offwhite text-charcoal">
<!-- Navigation -->
<nav class="bg-offwhite/90 backdrop-blur-sm sticky top-0 z-50 border-b border-stone-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<a href="index.html" class="flex-shrink-0 flex items-center">
<span class="text-2xl font-bold text-primary">Alt Spatial Studio</span>
</a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a href="index.html" class="text-charcoal hover:text-primary transition-colors px-3 py-2">Home</a>
<a href="about.html" class="text-charcoal hover:text-primary transition-colors px-3 py-2">About</a>
<a href="services.html" class="text-charcoal hover:text-primary transition-colors px-3 py-2">Services</a>
<a href="projects.html" class="text-charcoal hover:text-primary transition-colors px-3 py-2">Projects</a>
<a href="industries.html" class="text-primary font-medium border-b-2 border-primary px-3 py-2">Industries</a>
<a href="contact.html" class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">Contact</a>
</div>
</div>
<div class="md:hidden">
<button type="button" class="text-charcoal hover:text-primary">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Page Header -->
<section class="py-16 bg-white">
<div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
<h1 class="text-4xl md:text-5xl font-bold text-charcoal mb-4">Industries We Serve</h1>
<p class="text-xl text-charcoal/70">Specialized geospatial solutions tailored to the unique requirements of architecture, engineering, planning, and environmental sectors.</p>
</div>
</section>
<!-- Industries Grid -->
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Architecture -->
<div class="industry-card bg-white rounded-lg border border-stone-200 p-8">
<div class="flex items-center mb-6">
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mr-4">
<i data-feather="home" class="text-primary w-8 h-8"></i>
</div>
<h2 class="text-2xl font-bold text-charcoal"><span class="highlight-text">Architecture</span></h2>
</div>
<p class="text-charcoal/70 mb-6">Precise spatial data for architectural design, heritage documentation, and building information modelling. We provide the foundational data that informs innovative architectural solutions.</p>
<div class="space-y-3">
<h4 class="font-semibold text-charcoal">Key Applications:</h4>
<ul class="text-charcoal/70 space-y-2">
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-primary mr-2"></i>
Site analysis and context mapping
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-primary mr-2"></i>
Existing conditions documentation
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-primary mr-2"></i>
BIM-ready point cloud data
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-primary mr-2"></i>
Heritage building conservation
</li>
</ul>
</div>
<a href="projects.html" class="inline-flex items-center text-primary font-medium mt-6 hover:text-primary/80 transition-colors">
View Architecture Projects
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<!-- Engineering -->
<div class="industry-card bg-white rounded-lg border border-stone-200 p-8">
<div class="flex items-center mb-6">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mr-4">
<i data-feather="settings" class="text-secondary w-8 h-8"></i>
</div>
<h2 class="text-2xl font-bold text-charcoal"><span class="highlight-text">Engineering</span></h2>
</div>
<p class="text-charcoal/70 mb-6">Accurate surveying and monitoring services for civil, structural, and infrastructure engineering projects. Supporting engineering decisions with reliable spatial intelligence.</p>
<div class="space-y-3">
<h4 class="font-semibold text-charcoal">Key Applications:</h4>
<ul class="text-charcoal/70 space-y-2">
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i>
Civil infrastructure design surveys
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i>
Structural deformation monitoring
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i>
Construction verification
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i>
Utility and services mapping
</li>
</ul>
</div>
<a href="projects.html" class="inline-flex items-center text-secondary font-medium mt-6 hover:text-secondary/80 transition-colors">
View Engineering Projects
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<!-- Planning -->
<div class="industry-card bg-white rounded-lg border border-stone-200 p-8">
<div class="flex items-center mb-6">
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mr-4">
<i data-feather="map-pin" class="text-primary w-8 h-8"></i>
</div>
<h2 class="text-2xl font-bold text-charcoal"><span class="highlight-text">Planning</span></h2>
</div>
<p class="text-charcoal/70 mb-6">Comprehensive spatial data for urban planning, land development, and environmental assessment. Enabling informed decision-making for sustainable development.</p>
<div class="space-y-3">
<h4 class="font-semibold text-charcoal">Key Applications:</h4>
<ul class="text-charcoal/70 space-y-2">
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-primary mr-2"></i>
Subdivision and land development
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-primary mr-2"></i>
Urban planning and design
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-primary mr-2"></i>
Environmental impact assessment
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-primary mr-2"></i>
Cadastral and boundary surveys
</li>
</ul>
</div>
<a href="projects.html" class="inline-flex items-center text-primary font-medium mt-6 hover:text-primary/80 transition-colors">
View Planning Projects
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<!-- Built & Natural Environments -->
<div class="industry-card bg-white rounded-lg border border-stone-200 p-8">
<div class="flex items-center mb-6">
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mr-4">
<i data-feather="globe" class="text-secondary w-8 h-8"></i>
</div>
<h2 class="text-2xl font-bold text-charcoal"><span class="highlight-text">Built & Natural Environments</span></h2>
</div>
<p class="text-charcoal/70 mb-6">Integrated surveying solutions that bridge the gap between built infrastructure and natural systems. Supporting sustainable development and environmental management.</p>
<div class="space-y-3">
<h4 class="font-semibold text-charcoal">Key Applications:</h4>
<ul class="text-charcoal/70 space-y-2">
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i>
Environmental monitoring
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i>
Coastal and river management
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i>
Forestry and vegetation mapping
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 text-secondary mr-2"></i>
Mining and resource management
</li>
</ul>
</div>
<a href="projects.html" class="inline-flex items-center text-secondary font-medium mt-6 hover:text-secondary/80 transition-colors">
View Environmental Projects
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Industry Partners -->
<section class="py-20 bg-primary text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Trusted Industry Partners</h2>
<p class="text-xl opacity-90 max-w-3xl mx-auto">We collaborate with leading organizations across multiple sectors to deliver innovative geospatial solutions.</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center opacity-70">
<div class="text-center">
<div class="w-24 h-24 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="building" class="w-12 h-12"></i>
</div>
<p class="font-medium">Architecture Firms</p>
</div>
<div class="text-center">
<div class="w-24 h-24 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="tool" class="w-12 h-12"></i>
</div>
<p class="font-medium">Engineering Consultants</p>
</div>
<div class="text-center">
<div class="w-24 h-24 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="map" class="w-12 h-12"></i>
</div>
<p class="font-medium">Government Agencies</p>
</div>
<div class="text-center">
<div class="w-24 h-24 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="leaf" class="w-12 h-12"></i>
</div>
<p class="font-medium">Environmental Orgs</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-charcoal text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">Alt Spatial Studio</h3>
<p class="text-stone-300">Innovative reality capture and geospatial solutions for the built and natural environment.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Services</h4>
<ul class="space-y-2 text-stone-300">
<li><a href="services.html" class="hover:text-white transition-colors">Feature Surveys</a></li>
<li><a href="services.html" class="hover:text-white transition-colors">3D BIM Modelling</a></li>
<li><a href="services.html" class="hover:text-white transition-colors">Reality Capture</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Company</h4>
<ul class="space-y-2 text-stone-300">
<li><a href="about.html" class="hover:text-white transition-colors">About Us</a></li>
<li><a href="projects.html" class="hover:text-white transition-colors">Projects</a></li>
<li><a href="industries.html" class="hover:text-white transition-colors">Industries</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Contact</h4>
<address class="not-italic text-stone-300">
<p>Melbourne, Australia</p>
<p class="mt-2"><a href="mailto:info@altspatial.com" class="hover:text-white transition-colors">info@altspatial.com</a></p>
</address>
</div>
</div>
<div class="border-t border-stone-600 mt-8 pt-8 text-center text-stone-400">
<p>&copy; 2023 Alt Spatial Studio. All rights reserved.</p>
</div>
</div>
</footer>
<script>
feather.replace();
</script>
</body>
</html>