terrasight-geomatics / services.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
Raw
History Blame Contribute Delete
14.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services | TerraSight Geomatics</title>
<meta name="description" content="Comprehensive geospatial services including feature surveys, 3D BIM modelling, reality capture, bathymetry, and environmental surveys for AEC industries.">
<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; }
.service-icon {
background: linear-gradient(135deg, #8B4513 0%, #D2691E 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.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-primary font-medium border-b-2 border-primary 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-charcoal hover:text-primary transition-colors 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">Our Services</h1>
<p class="text-xl text-charcoal/70">Comprehensive geospatial solutions tailored to your project requirements across architecture, engineering, and environmental sectors.</p>
</div>
</section>
<!-- Services 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 lg:grid-cols-3 gap-8">
<!-- Feature Surveys -->
<div class="bg-white rounded-lg border border-stone-200 hover:shadow-lg transition-all p-6">
<div class="service-icon mb-4">
<i data-feather="map" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-semibold text-charcoal mb-2"><span class="highlight-text">Feature Surveys</span></h3>
<p class="text-charcoal/70 mb-4">Detailed topographic mapping capturing natural and man-made features with millimeter accuracy for engineering and design applications.</p>
<ul class="text-charcoal/70 space-y-1 text-sm">
<li>• Boundary and cadastral surveys</li>
<li>• Topographic mapping</li>
<li>• Utility and infrastructure mapping</li>
</ul>
</div>
<!-- 3D BIM Modelling -->
<div class="bg-white rounded-lg border border-stone-200 hover:shadow-lg transition-all p-6">
<div class="service-icon mb-4">
<i data-feather="box" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-semibold text-charcoal mb-2"><span class="highlight-text">3D BIM Modelling</span></h3>
<p class="text-charcoal/70 mb-4">Intelligent Building Information Models created from point cloud data, enabling collaborative design, construction, and facility management.</p>
<ul class="text-charcoal/70 space-y-1 text-sm">
<li>• Point cloud to BIM conversion</li>
<li>• Architectural and MEP modelling</li>
<li>• Clash detection and coordination</li>
</ul>
</div>
<!-- As-Builts & Verification -->
<div class="bg-white rounded-lg border border-stone-200 hover:shadow-lg transition-all p-6">
<div class="service-icon mb-4">
<i data-feather="check-square" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-semibold text-charcoal mb-2"><span class="highlight-text">As-Builts & Verification</span></h3>
<p class="text-charcoal/70 mb-4">Accurate documentation of constructed elements against design specifications, ensuring project compliance and quality assurance.</p>
<ul class="text-charcoal/70 space-y-1 text-sm">
<li>• Construction verification surveys</li>
<li>• Quality control documentation</li>
<li>• Progress monitoring</li>
</ul>
</div>
<!-- Deformation Analysis -->
<div class="bg-white rounded-lg border border-stone-200 hover:shadow-lg transition-all p-6">
<div class="service-icon mb-4">
<i data-feather="trending-up" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-semibold text-charcoal mb-2"><span class="highlight-text">Deformation, Flatness & Volume Analysis</span></h3>
<p class="text-charcoal/70 mb-4">Monitoring structural movements, surface flatness, and volumetric calculations for construction and mining applications.</p>
<ul class="text-charcoal/70 space-y-1 text-sm">
<li>• Structural monitoring</li>
<li>• Floor flatness analysis</li>
<li>• Stockpile volume calculations</li>
</ul>
</div>
<!-- Forestry & Environmental -->
<div class="bg-white rounded-lg border border-stone-200 hover:shadow-lg transition-all p-6">
<div class="service-icon mb-4">
<i data-feather="tree" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-semibold text-charcoal mb-2"><span class="highlight-text">Forestry & Environmental Surveys</span></h3>
<p class="text-charcoal/70 mb-4">Aerial and terrestrial surveys for vegetation analysis, habitat mapping, and environmental impact assessment.</p>
<ul class="text-charcoal/70 space-y-1 text-sm">
<li>• Vegetation density mapping</li>
<li>• Habitat classification</li>
<li>• Erosion and landform analysis</li>
</ul>
</div>
<!-- Bathymetry -->
<div class="bg-white rounded-lg border border-stone-200 hover:shadow-lg transition-all p-6">
<div class="service-icon mb-4">
<i data-feather="droplet" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-semibold text-charcoal mb-2"><span class="highlight-text">Bathymetry & Hydrographic Capture</span></h3>
<p class="text-charcoal/70 mb-4">Underwater topographic mapping for dredging, marine construction, and environmental monitoring applications.</p>
<ul class="text-charcoal/70 space-y-1 text-sm">
<li>• River and lake bed mapping</li>
<li>• Coastal erosion monitoring</li>
<li>• Subaquatic infrastructure inspection</li>
</ul>
</div>
<!-- Reality Capture -->
<div class="bg-white rounded-lg border border-stone-200 hover:shadow-lg transition-all p-6 md:col-span-2 lg:col-span-3">
<div class="flex flex-col lg:flex-row items-center gap-8">
<div class="service-icon">
<i data-feather="camera" class="w-16 h-16"></i>
</div>
<div class="flex-1">
<h3 class="text-2xl font-semibold text-charcoal mb-3"><span class="highlight-text">Reality Capture Solutions</span></h3>
<p class="text-charcoal/70 mb-4 text-lg">Comprehensive digital twin creation using the latest LiDAR, photogrammetry, and scanning technologies for accurate spatial data acquisition.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-sand/30 p-4 rounded border border-stone-200">
<h4 class="font-semibold text-charcoal mb-2">Terrestrial Laser Scanning</h4>
<p class="text-sm text-charcoal/70">High-density point clouds for interior and exterior building documentation.</p>
</div>
<div class="bg-sand/30 p-4 rounded border border-stone-200">
<h4 class="font-semibold text-charcoal mb-2">Aerial Photogrammetry</h4>
<p class="text-sm text-charcoal/70">Drone-based imagery for large-scale site mapping and 3D model generation.</p>
</div>
<div class="bg-sand/30 p-4 rounded border border-stone-200">
<h4 class="font-semibold text-charcoal mb-2">Mobile Mapping</h4>
<p class="text-sm text-charcoal/70">Vehicle-mounted systems for rapid corridor mapping and infrastructure surveys.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-primary text-white">
<div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Need a Custom Solution?</h2>
<p class="text-xl mb-8 opacity-90">Every project is unique. Contact us to discuss how we can tailor our services to meet your specific requirements.</p>
<a href="contact.html" class="bg-white text-primary px-8 py-3 rounded-md font-medium hover:bg-sand transition-colors">Get a Quote</a>
</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>