terrasight-geomatics / about.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
12.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us | TerraSight Geomatics</title>
<meta name="description" content="Learn about Alt Spatial Studio, an independent, innovative geospatial partner specializing in AEC, surveying, and digital reality capture.">
<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; }
.contour-pattern {
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h100v100H0z' fill='none'/%3E%3Cpath d='M20 20c10 0 20 10 30 10s20-10 30-10 20 10 30 10M20 40c10 0 20 10 30 10s20-10 30-10 20 10 30 10M20 60c10 0 20 10 30 10s20-10 30-10 20 10 30 10M20 80c10 0 20 10 30 10s20-10 30-10 20 10 30 10' stroke='%238B4513' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3C/svg%3E");
background-size: cover;
background-position: center;
}
</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-primary font-medium border-b-2 border-primary 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-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 contour-pattern">
<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">About Alt Spatial Studio</h1>
<p class="text-xl text-charcoal/70">An independent, innovative geospatial partner bridging the physical and digital worlds.</p>
</div>
</section>
<!-- Our Story -->
<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 lg:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl font-bold text-charcoal mb-6">Our Story</h2>
<p class="text-lg text-charcoal/70 mb-6">Founded by a team of seasoned geospatial professionals, Alt Spatial Studio emerged from a shared vision to revolutionize how spatial data is captured, processed, and utilized in the architecture, engineering, and construction industries.</p>
<p class="text-lg text-charcoal/70 mb-6">We combine technical expertise with a design-focused approach, delivering precise digital representations of the built and natural environment that empower better decision-making.</p>
<p class="text-lg text-charcoal/70">Our commitment to innovation drives us to continuously adopt cutting-edge technologies, from terrestrial laser scanning to drone-based photogrammetry, ensuring our clients receive the most accurate and actionable data available.</p>
</div>
<div class="relative">
<div class="relative rounded-lg shadow-md overflow-hidden">
<img src="http://static.photos/office/640x360/201" alt="Our Team at Work" class="w-full">
<div class="absolute inset-0 bg-gradient-to-t from-charcoal/20 to-transparent"></div>
</div>
<div class="absolute -bottom-6 -left-6 w-24 h-24 bg-primary/10 rounded-full flex items-center justify-center">
<i data-feather="award" class="text-primary w-10 h-10"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Expertise -->
<section class="py-20 bg-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 text-charcoal mb-4">Our Expertise</h2>
<p class="text-lg text-charcoal/70 max-w-3xl mx-auto">Specialized knowledge across the entire geospatial workflow, from data acquisition to actionable insights.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<div class="w-20 h-20 bg-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="compass" class="text-secondary w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold text-charcoal mb-2"><span class="highlight-text">Surveying & Measurement</span></h3>
<p class="text-charcoal/70">Traditional and advanced surveying techniques for high-precision spatial data collection.</p>
</div>
<div class="text-center">
<div class="w-20 h-20 bg-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="cpu" class="text-secondary w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold text-charcoal mb-2"><span class="highlight-text">Digital Reality Capture</span></h3>
<p class="text-charcoal/70">LiDAR, photogrammetry, and scanning technologies to create comprehensive digital twins.</p>
</div>
<div class="text-center">
<div class="w-20 h-20 bg-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="layers" class="text-secondary w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold text-charcoal mb-2"><span class="highlight-text">Data Analysis & Modelling</span></h3>
<p class="text-charcoal/70">Transforming raw data into intelligent models for BIM, analysis, and visualization.</p>
</div>
</div>
</div>
</section>
<!-- Values -->
<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">Our Values</h2>
<p class="text-xl opacity-90 max-w-3xl mx-auto">Guiding principles that define our approach to every project and partnership.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="text-center">
<div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="target" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Precision</h3>
<p class="opacity-90">Uncompromising accuracy in every measurement and deliverable.</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="zap" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Innovation</h3>
<p class="opacity-90">Embracing cutting-edge technology to solve complex spatial challenges.</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="users" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Collaboration</h3>
<p class="opacity-90">Working closely with clients to understand and exceed their expectations.</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="shield" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Integrity</h3>
<p class="opacity-90">Ethical practices and transparent communication in all our engagements.</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>