Hugging Face's logo

Spaces:
Mishak
/
geospectra
Running

App Files Community
geospectra / index.html
Mishak's picture
Mishak
Add 3 files
490f989 verified
raw
history blame contribute delete
72.5 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeoSpectra | AI-Powered Geospatial Intelligence</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/phosphor-icons"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/globe.gl@2.24.0/dist/globe.gl.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root {
--primary: #00a8e8;
--secondary: #00c896;
--dark: #0a192f;
--light: #f8f9fa;
}
body {
font-family: 'Inter', sans-serif;
background-color: #f5f7fa;
color: var(--dark);
overflow-x: hidden;
}
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.neumorphic-btn {
box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
transition: all 0.3s ease;
}
.neumorphic-btn:hover {
box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
transform: translateY(-2px);
}
.glow-btn {
box-shadow: 0 0 15px rgba(0, 200, 150, 0.5);
}
.glow-btn:hover {
box-shadow: 0 0 25px rgba(0, 200, 150, 0.7);
}
.fade-in {
animation: fadeIn 1s ease-in-out forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.sticky-nav {
transition: all 0.3s ease;
}
.sticky-nav.scrolled {
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.menu-open {
transform: translateX(0);
}
.satellite {
position: absolute;
animation: orbit 30s linear infinite;
z-index: 10;
}
.drone {
position: absolute;
animation: fly 20s linear infinite;
z-index: 10;
}
.uav {
position: absolute;
animation: survey 25s linear infinite;
z-index: 10;
}
@keyframes orbit {
0% { transform: rotate(0deg) translateX(200px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
}
@keyframes fly {
0% { transform: translateX(-150px) translateY(50px) rotate(0deg); }
25% { transform: translateX(0) translateY(-100px) rotate(90deg); }
50% { transform: translateX(150px) translateY(50px) rotate(180deg); }
75% { transform: translateX(0) translateY(150px) rotate(270deg); }
100% { transform: translateX(-150px) translateY(50px) rotate(360deg); }
}
@keyframes survey {
0% { transform: translate(-100px, 100px) scale(0.8); }
25% { transform: translate(100px, -50px) scale(1); }
50% { transform: translate(100px, 100px) scale(0.8); }
75% { transform: translate(-100px, -50px) scale(1); }
100% { transform: translate(-100px, 100px) scale(0.8); }
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.globe-container {
width: 100%;
height: 500px;
position: relative;
}
.globe-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
pointer-events: none;
}
.tech-badge {
display: inline-block;
background: linear-gradient(135deg, #00a8e8, #00c896);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.timeline-item {
position: relative;
padding-left: 2rem;
margin-bottom: 2rem;
}
.timeline-item:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, #00a8e8, #00c896);
}
.timeline-dot {
position: absolute;
left: -0.5rem;
top: 0.25rem;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: linear-gradient(135deg, #00a8e8, #00c896);
display: flex;
align-items: center;
justify-content: center;
color: white;
}
</style>
</head>
<body class="antialiased">
<!-- Navigation -->
<nav class="sticky-nav fixed top-0 left-0 w-full z-50 py-4">
<div class="container mx-auto px-6 flex justify-between items-center">
<div class="flex items-center">
<i class="ph ph-planet text-3xl text-blue-500 mr-2"></i>
<span class="text-2xl font-bold bg-gradient-to-r from-blue-500 to-teal-400 bg-clip-text text-transparent">GeoSpectra</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#features" class="text-gray-700 hover:text-blue-500 transition">Features</a>
<a href="#about" class="text-gray-700 hover:text-blue-500 transition">About</a>
<a href="#how-it-works" class="text-gray-700 hover:text-blue-500 transition">How It Works</a>
<a href="#pricing" class="text-gray-700 hover:text-blue-500 transition">Pricing</a>
<a href="#faq" class="text-gray-700 hover:text-blue-500 transition">FAQ</a>
<a href="#contact" class="text-gray-700 hover:text-blue-500 transition">Contact</a>
</div>
<div class="hidden md:block">
<button class="bg-gradient-to-r from-blue-500 to-teal-400 text-white px-6 py-2 rounded-full glow-btn hover:shadow-lg transition">
Get Started
</button>
</div>
<button id="menu-btn" class="md:hidden text-gray-700 focus:outline-none">
<i class="ph ph-list text-2xl"></i>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="fixed top-0 right-0 h-full w-64 bg-white shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-50">
<div class="flex justify-end p-4">
<button id="close-menu" class="text-gray-700 focus:outline-none">
<i class="ph ph-x text-2xl"></i>
</button>
</div>
<div class="flex flex-col p-6 space-y-6">
<a href="#features" class="text-gray-700 hover:text-blue-500 transition">Features</a>
<a href="#about" class="text-gray-700 hover:text-blue-500 transition">About</a>
<a href="#how-it-works" class="text-gray-700 hover:text-blue-500 transition">How It Works</a>
<a href="#pricing" class="text-gray-700 hover:text-blue-500 transition">Pricing</a>
<a href="#faq" class="text-gray-700 hover:text-blue-500 transition">FAQ</a>
<a href="#contact" class="text-gray-700 hover:text-blue-500 transition">Contact</a>
<button class="bg-gradient-to-r from-blue-500 to-teal-400 text-white px-6 py-2 rounded-full mt-4">
Get Started
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="pt-32 pb-20 px-6">
<div class="container mx-auto">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-12 lg:mb-0 fade-in">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-4">
<span class="bg-gradient-to-r from-blue-500 to-teal-400 bg-clip-text text-transparent">Automate</span> Your Geospatial Intelligence
</h1>
<p class="text-lg md:text-xl text-gray-600 mb-8">
Transform satellite imagery and drone data into actionable insights with AI-powered automation for agriculture, urban planning, and environmental monitoring.
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-gradient-to-r from-blue-500 to-teal-400 text-white px-8 py-3 rounded-full glow-btn hover:shadow-lg transition">
Start Free Trial
</button>
<button class="border border-blue-500 text-blue-500 px-8 py-3 rounded-full hover:bg-blue-50 transition">
<i class="ph ph-play-circle mr-2"></i> Watch Demo
</button>
</div>
<div class="mt-8 flex items-center">
<div class="flex -space-x-2">
<img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white">
<img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-white">
</div>
<div class="ml-4">
<p class="text-sm text-gray-600">Trusted by 500+ geospatial professionals</p>
</div>
</div>
</div>
<div class="lg:w-1/2 relative fade-in" style="animation-delay: 0.2s;">
<div class="globe-container" id="globe"></div>
<div class="globe-overlay">
<div class="satellite">
<i class="ph ph-satellite text-3xl text-blue-500"></i>
</div>
<div class="drone">
<i class="ph ph-airplane-tilt text-3xl text-teal-500"></i>
</div>
<div class="uav">
<i class="ph ph-drone text-3xl text-purple-500"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Featured In Section -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-6 fade-in">
<p class="text-center text-gray-500 mb-8">FEATURED IN</p>
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Esri_logo.svg/1200px-Esri_logo.svg.png" class="h-8 opacity-60 hover:opacity-100 transition">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/IEEE_logo.svg/1200px-IEEE_logo.svg.png" class="h-8 opacity-60 hover:opacity-100 transition">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Copernicus_Programme_logo.svg/1200px-Copernicus_Programme_logo.svg.png" class="h-8 opacity-60 hover:opacity-100 transition">
<img src="https://www.geospatialworld.net/wp-content/uploads/2019/05/geospatial-world-logo.png" class="h-8 opacity-60 hover:opacity-100 transition">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2048px-Google_%22G%22_Logo.svg.png" class="h-8 opacity-60 hover:opacity-100 transition">
</div>
</div>
</section>
<!-- About Me Section -->
<section id="about" class="py-20 px-6 bg-gradient-to-br from-blue-50 to-teal-50">
<div class="container mx-auto fade-in">
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="lg:w-1/3">
<div class="bg-white p-8 rounded-2xl shadow-xl">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Mishak Rahul" class="w-48 h-48 rounded-full mx-auto mb-6 border-4 border-blue-100">
<h2 class="text-2xl font-bold text-center mb-2">Mishak Rahul</h2>
<p class="text-blue-600 text-center font-medium mb-6">GIS & Remote Sensing Expert</p>
<div class="flex justify-center space-x-4 mb-6">
<a href="#" class="bg-blue-100 text-blue-600 p-2 rounded-full hover:bg-blue-200 transition">
<i class="ph ph-linkedin-logo text-xl"></i>
</a>
<a href="#" class="bg-blue-100 text-blue-600 p-2 rounded-full hover:bg-blue-200 transition">
<i class="ph ph-github-logo text-xl"></i>
</a>
<a href="#" class="bg-blue-100 text-blue-600 p-2 rounded-full hover:bg-blue-200 transition">
<i class="ph ph-twitter-logo text-xl"></i>
</a>
<a href="#" class="bg-blue-100 text-blue-600 p-2 rounded-full hover:bg-blue-200 transition">
<i class="ph ph-envelope-simple text-xl"></i>
</a>
</div>
<div class="bg-blue-50 rounded-lg p-4 mb-4">
<div class="flex items-center">
<div class="bg-blue-100 p-2 rounded-lg mr-3">
<i class="ph ph-graduation-cap text-blue-600"></i>
</div>
<div>
<p class="font-medium">Masters Degree</p>
<p class="text-sm text-gray-600">GIS & Remote Sensing</p>
<p class="text-sm text-gray-600">Asian Institute of Technology, Thailand</p>
</div>
</div>
</div>
<div class="bg-teal-50 rounded-lg p-4">
<div class="flex items-center">
<div class="bg-teal-100 p-2 rounded-lg mr-3">
<i class="ph ph-suitcase-simple text-teal-600"></i>
</div>
<div>
<p class="font-medium">5+ Years Experience</p>
<p class="text-sm text-gray-600">Academic, Professional & Freelance</p>
</div>
</div>
</div>
</div>
</div>
<div class="lg:w-2/3">
<h2 class="text-3xl font-bold mb-6">About Me</h2>
<p class="text-gray-700 mb-6">
I am a passionate GIS and Remote Sensing professional with extensive experience in applying geospatial technologies across diverse sectors. My journey in this field began with a fascination for maps and spatial analysis, which led me to pursue advanced studies and build a career transforming raw geospatial data into meaningful insights.
</p>
<h3 class="text-xl font-bold mb-4 mt-8">Technical Expertise</h3>
<div class="mb-8">
<div class="flex flex-wrap mb-4">
<span class="tech-badge"><i class="ph ph-map-trifold mr-1"></i> ArcGIS Pro</span>
<span class="tech-badge"><i class="ph ph-globe-stand mr-1"></i> QGIS</span>
<span class="tech-badge"><i class="ph ph-satellite mr-1"></i> ENVI</span>
<span class="tech-badge"><i class="ph ph-code mr-1"></i> Python</span>
<span class="tech-badge"><i class="ph ph-database mr-1"></i> PostGIS</span>
<span class="tech-badge"><i class="ph ph-cloud mr-1"></i> Google Earth Engine</span>
<span class="tech-badge"><i class="ph ph-brain mr-1"></i> Machine Learning</span>
<span class="tech-badge"><i class="ph ph-airplane-tilt mr-1"></i> Drone2Map</span>
<span class="tech-badge"><i class="ph ph-chart-line-up mr-1"></i> Spatial Analysis</span>
</div>
</div>
<h3 class="text-xl font-bold mb-4">Professional Experience</h3>
<div class="space-y-6">
<div class="timeline-item">
<div class="timeline-dot">
<i class="ph ph-buildings"></i>
</div>
<div class="bg-white p-6 rounded-xl shadow-md">
<h4 class="font-bold text-lg mb-1">Senior GIS Analyst</h4>
<p class="text-gray-600 mb-3">Geospatial Solutions Ltd. | 2020-Present</p>
<ul class="list-disc pl-5 text-gray-700 space-y-1">
<li>Developed automated workflows for processing satellite imagery using Python and GEE</li>
<li>Led drone mapping projects for precision agriculture applications</li>
<li>Implemented machine learning models for land cover classification</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot">
<i class="ph ph-graduation-cap"></i>
</div>
<div class="bg-white p-6 rounded-xl shadow-md">
<h4 class="font-bold text-lg mb-1">GIS Researcher</h4>
<p class="text-gray-600 mb-3">AIT Remote Sensing Lab | 2018-2020</p>
<ul class="list-disc pl-5 text-gray-700 space-y-1">
<li>Conducted research on urban heat island effects using Landsat time series</li>
<li>Published 3 peer-reviewed papers on geospatial applications</li>
<li>Developed novel methods for change detection in coastal areas</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot">
<i class="ph ph-globe"></i>
</div>
<div class="bg-white p-6 rounded-xl shadow-md">
<h4 class="font-bold text-lg mb-1">Freelance Consultant</h4>
<p class="text-gray-600 mb-3">Various Clients | 2016-Present</p>
<ul class="list-disc pl-5 text-gray-700 space-y-1">
<li>Created customized GIS solutions for environmental NGOs</li>
<li>Provided training workshops on QGIS and remote sensing</li>
<li>Developed web mapping applications for disaster response</li>
</ul>
</div>
</div>
</div>
<h3 class="text-xl font-bold mb-4 mt-8">Conference Participation</h3>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm">
<div class="flex items-start">
<div class="bg-blue-100 p-2 rounded-lg mr-3">
<i class="ph ph-presentation-chart text-blue-600"></i>
</div>
<div>
<h4 class="font-medium">International Geospatial Conference 2022</h4>
<p class="text-sm text-gray-600">Presenter: "AI for Automated Land Cover Mapping"</p>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm">
<div class="flex items-start">
<div class="bg-teal-100 p-2 rounded-lg mr-3">
<i class="ph ph-globe-hemisphere-east text-teal-600"></i>
</div>
<div>
<h4 class="font-medium">ESRI User Conference 2021</h4>
<p class="text-sm text-gray-600">Workshop Leader: "Advanced Spatial Analysis Techniques"</p>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm">
<div class="flex items-start">
<div class="bg-purple-100 p-2 rounded-lg mr-3">
<i class="ph ph-tree text-purple-600"></i>
</div>
<div>
<h4 class="font-medium">FOSS4G Asia 2020</h4>
<p class="text-sm text-gray-600">Panelist: "Open Source Solutions for Environmental Monitoring"</p>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm">
<div class="flex items-start">
<div class="bg-orange-100 p-2 rounded-lg mr-3">
<i class="ph ph-drone text-orange-600"></i>
</div>
<div>
<h4 class="font-medium">DroneDeploy Conference 2019</h4>
<p class="text-sm text-gray-600">Speaker: "Integrating UAV Data with Satellite Imagery"</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20 px-6">
<div class="container mx-auto fade-in">
<h2 class="text-3xl font-bold text-center mb-12">What Our Clients Say</h2>
<div class="relative max-w-4xl mx-auto">
<div class="overflow-hidden">
<div id="testimonial-slider" class="flex transition-transform duration-300">
<div class="min-w-full px-4">
<div class="bg-white p-8 rounded-xl shadow-lg">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Dr. Sarah Chen</h4>
<p class="text-gray-600">Agricultural Research Institute</p>
</div>
</div>
<p class="text-gray-700 mb-4">
"GeoSpectra reduced our field inspection time by 70% by automatically detecting crop health issues from satellite imagery. The AI models are incredibly accurate."
</p>
<div class="flex text-yellow-400">
<i class="ph ph-star-fill"></i>
<i class="ph ph-star-fill"></i>
<i class="ph ph-star-fill"></i>
<i class="ph ph-star-fill"></i>
<i class="ph ph-star-fill"></i>
</div>
</div>
</div>
<div class="min-w-full px-4">
<div class="bg-white p-8 rounded-xl shadow-lg">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Michael Rodriguez</h4>
<p class="text-gray-600">Urban Planning Department</p>
</div>
</div>
<p class="text-gray-700 mb-4">
"The automated change detection saved us weeks of manual work in monitoring urban expansion. The API integration with our existing systems was seamless."
</p>
<div class="flex text-yellow-400">
<i class="ph ph-star-fill"></i>
<i class="ph ph-star-fill"></i>
<i class="ph ph-star-fill"></i>
<i class="ph ph-star-fill"></i>
<i class="ph ph-star-fill"></i>
</div>
</div>
</div>
<div class="min-w-full px-4">
<div class="bg-white p-8 rounded-xl shadow-lg">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Emma Wilson</h4>
<p class="text-gray-600">Environmental NGO</p>
</div>
</div>
<p class="text-gray-700 mb-4">
"We detected illegal deforestation activities 3 weeks earlier than traditional methods. The real-time alerts have been game-changing for our conservation efforts."
</p>
<div class="flex text-yellow-400">
<i class="ph ph-star-fill"></i>
<i class="ph ph-star-fill"></i>
<i class="ph ph-star-fill"></i>
<i class="ph ph-star-fill"></i>
<i class="ph ph-star-fill"></i>
</div>
</div>
</div>
</div>
</div>
<button id="prev-testimonial" class="absolute left-0 top-1/2 transform -translate-y-1/2 -ml-4 bg-white p-2 rounded-full shadow-md hover:bg-gray-100">
<i class="ph ph-caret-left text-blue-500"></i>
</button>
<button id="next-testimonial" class="absolute right-0 top-1/2 transform -translate-y-1/2 -mr-4 bg-white p-2 rounded-full shadow-md hover:bg-gray-100">
<i class="ph ph-caret-right text-blue-500"></i>
</button>
<div class="flex justify-center mt-6 space-x-2">
<button class="w-3 h-3 rounded-full bg-blue-500 testimonial-dot"></button>
<button class="w-3 h-3 rounded-full bg-gray-300 testimonial-dot"></button>
<button class="w-3 h-3 rounded-full bg-gray-300 testimonial-dot"></button>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works" class="py-20 bg-gray-50 px-6">
<div class="container mx-auto fade-in">
<h2 class="text-3xl font-bold text-center mb-4">How GeoSpectra Works</h2>
<p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">
Automate your geospatial analysis in three simple steps
</p>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition group">
<div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-6 group-hover:bg-blue-100 transition">
<i class="ph ph-database text-3xl text-blue-500"></i>
</div>
<h3 class="text-xl font-bold mb-3">Connect Your Data</h3>
<p class="text-gray-600 mb-4">
Easily integrate with satellite sources (Sentinel, Landsat), drone platforms, or upload your own geospatial datasets.
</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-center">
<i class="ph ph-check-circle text-blue-500 mr-2"></i> API connections
</li>
<li class="flex items-center">
<i class="ph ph-check-circle text-blue-500 mr-2"></i> Cloud storage sync
</li>
<li class="flex items-center">
<i class="ph ph-check-circle text-blue-500 mr-2"></i> Custom data formats
</li>
</ul>
</div>
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition group">
<div class="w-16 h-16 bg-teal-50 rounded-full flex items-center justify-center mb-6 group-hover:bg-teal-100 transition">
<i class="ph ph-brain text-3xl text-teal-500"></i>
</div>
<h3 class="text-xl font-bold mb-3">Configure AI Pipelines</h3>
<p class="text-gray-600 mb-4">
Set up automated workflows with our pre-trained models or customize your own for specific analysis needs.
</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-center">
<i class="ph ph-check-circle text-teal-500 mr-2"></i> Land cover classification
</li>
<li class="flex items-center">
<i class="ph ph-check-circle text-teal-500 mr-2"></i> NDVI analysis
</li>
<li class="flex items-center">
<i class="ph ph-check-circle text-teal-500 mr-2"></i> Change detection
</li>
</ul>
</div>
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition group">
<div class="w-16 h-16 bg-purple-50 rounded-full flex items-center justify-center mb-6 group-hover:bg-purple-100 transition">
<i class="ph ph-rocket text-3xl text-purple-500"></i>
</div>
<h3 class="text-xl font-bold mb-3">Automate & Analyze</h3>
<p class="text-gray-600 mb-4">
Set rules, thresholds, and alerts to automatically process data and receive insights when you need them.
</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-center">
<i class="ph ph-check-circle text-purple-500 mr-2"></i> Scheduled processing
</li>
<li class="flex items-center">
<i class="ph ph-check-circle text-purple-500 mr-2"></i> Real-time alerts
</li>
<li class="flex items-center">
<i class="ph ph-check-circle text-purple-500 mr-2"></i> Interactive dashboards
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 px-6">
<div class="container mx-auto fade-in">
<h2 class="text-3xl font-bold text-center mb-4">Powerful Geospatial Features</h2>
<p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">
Advanced tools designed for professionals who demand precision and efficiency
</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
<div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center mb-4">
<i class="ph ph-satellite text-2xl text-blue-500"></i>
</div>
<h3 class="text-lg font-bold mb-2">Real-time Satellite Processing</h3>
<p class="text-gray-600 text-sm">
Process satellite imagery as soon as it's available with near real-time analysis pipelines.
</p>
</div>
<div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
<div class="w-12 h-12 bg-teal-50 rounded-lg flex items-center justify-center mb-4">
<i class="ph ph-airplane-tilt text-2xl text-teal-500"></i>
</div>
<h3 class="text-lg font-bold mb-2">Drone Survey Automation</h3>
<p class="text-gray-600 text-sm">
Automatically process and analyze drone imagery with centimeter-level precision.
</p>
</div>
<div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
<div class="w-12 h-12 bg-purple-50 rounded-lg flex items-center justify-center mb-4">
<i class="ph ph-binoculars text-2xl text-purple-500"></i>
</div>
<h3 class="text-lg font-bold mb-2">AI-Based Change Detection</h3>
<p class="text-gray-600 text-sm">
Identify changes over time with our advanced machine learning algorithms.
</p>
</div>
<div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
<div class="w-12 h-12 bg-orange-50 rounded-lg flex items-center justify-center mb-4">
<i class="ph ph-chart-line-up text-2xl text-orange-500"></i>
</div>
<h3 class="text-lg font-bold mb-2">Cloud-Based Reporting</h3>
<p class="text-gray-600 text-sm">
Generate professional reports with customizable templates and automated insights.
</p>
</div>
<div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
<div class="w-12 h-12 bg-green-50 rounded-lg flex items-center justify-center mb-4">
<i class="ph ph-tree text-2xl text-green-500"></i>
</div>
<h3 class="text-lg font-bold mb-2">Vegetation Health Monitoring</h3>
<p class="text-gray-600 text-sm">
Track NDVI, EVI, and other vegetation indices over time with automated alerts.
</p>
</div>
<div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
<div class="w-12 h-12 bg-red-50 rounded-lg flex items-center justify-center mb-4">
<i class="ph ph-fire text-2xl text-red-500"></i>
</div>
<h3 class="text-lg font-bold mb-2">Disaster Response</h3>
<p class="text-gray-600 text-sm">
Rapid damage assessment for floods, fires, and other natural disasters.
</p>
</div>
<div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
<div class="w-12 h-12 bg-indigo-50 rounded-lg flex items-center justify-center mb-4">
<i class="ph ph-buildings text-2xl text-indigo-500"></i>
</div>
<h3 class="text-lg font-bold mb-2">Urban Growth Analysis</h3>
<p class="text-gray-600 text-sm">
Monitor urban expansion and infrastructure development with automated metrics.
</p>
</div>
<div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
<div class="w-12 h-12 bg-yellow-50 rounded-lg flex items-center justify-center mb-4">
<i class="ph ph-shield-check text-2xl text-yellow-500"></i>
</div>
<h3 class="text-lg font-bold mb-2">Security & Compliance</h3>
<p class="text-gray-600 text-sm">
Enterprise-grade security with SOC 2 compliance and data encryption.
</p>
</div>
</div>
</div>
</section>
<!-- Mission Statement -->
<section class="py-20 bg-gradient-to-r from-blue-500 to-teal-500 text-white px-6">
<div class="container mx-auto max-w-4xl text-center fade-in">
<i class="ph ph-planet text-5xl mb-6"></i>
<h2 class="text-3xl font-bold mb-6">We automate the future of geospatial intelligence</h2>
<p class="text-xl mb-8 opacity-90">
Our mission is to empower organizations with data-driven decisions at scale, reducing the time from data collection to actionable insights from weeks to minutes.
</p>
<div class="flex justify-center space-x-4">
<button class="bg-white text-blue-600 px-6 py-2 rounded-full hover:bg-gray-100 transition">
Learn About Our Vision
</button>
<button class="border border-white text-white px-6 py-2 rounded-full hover:bg-white hover:bg-opacity-10 transition">
Meet The Team
</button>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-20 bg-gray-50 px-6">
<div class="container mx-auto fade-in">
<h2 class="text-3xl font-bold text-center mb-4">Simple, Transparent Pricing</h2>
<p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">
Choose the plan that fits your geospatial analysis needs
</p>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-white p-8 rounded-xl shadow-md">
<h3 class="text-xl font-bold mb-2">Starter</h3>
<p class="text-gray-600 mb-6">For individuals and small projects</p>
<div class="mb-6">
<span class="text-4xl font-bold">$0</span>
<span class="text-gray-600">/month</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="ph ph-check text-blue-500 mr-2"></i> 100 satellite views/month
</li>
<li class="flex items-center">
<i class="ph ph-check text-blue-500 mr-2"></i> Basic NDVI analysis
</li>
<li class="flex items-center">
<i class="ph ph-check text-blue-500 mr-2"></i> 7-day data retention
</li>
<li class="flex items-center text-gray-400">
<i class="ph ph-x mr-2"></i> No drone data processing
</li>
<li class="flex items-center text-gray-400">
<i class="ph ph-x mr-2"></i> No API access
</li>
</ul>
<button class="w-full border border-blue-500 text-blue-500 py-2 rounded-full hover:bg-blue-50 transition">
Get Started
</button>
</div>
<div class="bg-white p-8 rounded-xl shadow-lg border-2 border-blue-500 relative">
<div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
MOST POPULAR
</div>
<h3 class="text-xl font-bold mb-2">Professional</h3>
<p class="text-gray-600 mb-6">For teams and serious geospatial work</p>
<div class="mb-6">
<span class="text-4xl font-bold">$299</span>
<span class="text-gray-600">/month</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="ph ph-check text-blue-500 mr-2"></i> 5,000 satellite views/month
</li>
<li class="flex items-center">
<i class="ph ph-check text-blue-500 mr-2"></i> Advanced AI analysis tools
</li>
<li class="flex items-center">
<i class="ph ph-check text-blue-500 mr-2"></i> Drone data processing
</li>
<li class="flex items-center">
<i class="ph ph-check text-blue-500 mr-2"></i> 90-day data retention
</li>
<li class="flex items-center">
<i class="ph ph-check text-blue-500 mr-2"></i> Basic API access
</li>
</ul>
<button class="w-full bg-gradient-to-r from-blue-500 to-teal-400 text-white py-2 rounded-full glow-btn hover:shadow-lg transition">
Start Free Trial
</button>
</div>
<div class="bg-white p-8 rounded-xl shadow-md">
<h3 class="text-xl font-bold mb-2">Enterprise</h3>
<p class="text-gray-600 mb-6">For organizations with custom needs</p>
<div class="mb-6">
<span class="text-4xl font-bold">Custom</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="ph ph-check text-blue-500 mr-2"></i> Unlimited satellite processing
</li>
<li class="flex items-center">
<i class="ph ph-check text-blue-500 mr-2"></i> Custom AI model training
</li>
<li class="flex items-center">
<i class="ph ph-check text-blue-500 mr-2"></i> Priority drone processing
</li>
<li class="flex items-center">
<i class="ph ph-check text-blue-500 mr-2"></i> Unlimited data retention
</li>
<li class="flex items-center">
<i class="ph ph-check text-blue-500 mr-2"></i> Full API & SDK access
</li>
</ul>
<button class="w-full border border-blue-500 text-blue-500 py-2 rounded-full hover:bg-blue-50 transition">
Contact Sales
</button>
</div>
</div>
<div class="mt-12 text-center text-gray-600">
<p>Need something different? <a href="#contact" class="text-blue-500 hover:underline">Contact us</a> for custom solutions.</p>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="py-20 px-6">
<div class="container mx-auto max-w-4xl fade-in">
<h2 class="text-3xl font-bold text-center mb-12">Frequently Asked Questions</h2>
<div class="space-y-4">
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-6 bg-white hover:bg-gray-50 transition">
<span class="text-lg font-medium">Can I integrate GeoSpectra with ArcGIS or QGIS?</span>
<i class="ph ph-plus text-blue-500"></i>
</button>
<div class="faq-answer hidden p-6 bg-gray-50">
<p class="text-gray-700">
Yes! GeoSpectra offers seamless integration with both ArcGIS and QGIS through our plugin system. You can push processed data directly to your existing GIS workflows or pull in data from these platforms for analysis in GeoSpectra.
</p>
</div>
</div>
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-6 bg-white hover:bg-gray-50 transition">
<span class="text-lg font-medium">What satellite sources do you support?</span>
<i class="ph ph-plus text-blue-500"></i>
</button>
<div class="faq-answer hidden p-6 bg-gray-50">
<p class="text-gray-700">
We support all major satellite sources including Sentinel-2, Landsat 8/9, PlanetScope, and MODIS. We're constantly adding new sources based on customer demand. Our platform can also process high-resolution commercial imagery from providers like Maxar.
</p>
</div>
</div>
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-6 bg-white hover:bg-gray-50 transition">
<span class="text-lg font-medium">Is drone data automatically synced with your platform?</span>
<i class="ph ph-plus text-blue-500"></i>
</button>
<div class="faq-answer hidden p-6 bg-gray-50">
<p class="text-gray-700">
Absolutely. We support automatic syncing from DJI, Skydio, and other major drone platforms. You can set up automatic uploads when your drone lands or connect via our mobile app for field processing. We process both RGB and multispectral drone imagery.
</p>
</div>
</div>
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-6 bg-white hover:bg-gray-50 transition">
<span class="text-lg font-medium">How accurate are your AI models?</span>
<i class="ph ph-plus text-blue-500"></i>
</button>
<div class="faq-answer hidden p-6 bg-gray-50">
<p class="text-gray-700">
Our pre-trained models achieve 85-95% accuracy depending on the application and data quality. For specialized use cases, we offer custom model training that can achieve even higher accuracy by learning from your specific data.
</p>
</div>
</div>
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-6 bg-white hover:bg-gray-50 transition">
<span class="text-lg font-medium">What's your data privacy policy?</span>
<i class="ph ph-plus text-blue-500"></i>
</button>
<div class="faq-answer hidden p-6 bg-gray-50">
<p class="text-gray-700">
We take data privacy extremely seriously. Your data remains yours, and we never use it to train models without your explicit permission. We're SOC 2 Type II compliant and offer private cloud deployments for organizations with strict compliance requirements.
</p>
</div>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-gray-600">Still have questions? <a href="#contact" class="text-blue-500 hover:underline">Contact our team</a> for more information.</p>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-gray-900 text-white px-6">
<div class="container mx-auto fade-in">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl font-bold mb-4">Ready to automate your geospatial workflows?</h2>
<p class="text-gray-300 mb-8 max-w-lg">
Whether you're looking to evaluate our platform or discuss a custom enterprise solution, our team is here to help.
</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-blue-900 bg-opacity-30 p-3 rounded-lg mr-4">
<i class="ph ph-envelope text-2xl text-blue-400"></i>
</div>
<div>
<h4 class="font-bold mb-1">Email Us</h4>
<a href="mailto:contact@geospectra.com" class="text-blue-400 hover:underline">contact@geospectra.com</a>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-900 bg-opacity-30 p-3 rounded-lg mr-4">
<i class="ph ph-phone text-2xl text-blue-400"></i>
</div>
<div>
<h4 class="font-bold mb-1">Call Us</h4>
<a href="tel:+18005551234" class="text-blue-400 hover:underline">+1 (800) 555-1234</a>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-900 bg-opacity-30 p-3 rounded-lg mr-4">
<i class="ph ph-map-pin text-2xl text-blue-400"></i>
</div>
<div>
<h4 class="font-bold mb-1">Visit Us</h4>
<p class="text-gray-300">123 Geospatial Way, San Francisco, CA 94107</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 p-8 rounded-xl">
<h3 class="text-xl font-bold mb-6">Send us a message</h3>
<form>
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div>
<label for="first-name" class="block text-sm font-medium mb-1">First Name</label>
<input type="text" id="first-name" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="last-name" class="block text-sm font-medium mb-1">Last Name</label>
<input type="text" id="last-name" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div class="mb-4">
<label for="email" class="block text-sm font-medium mb-1">Email</label>
<input type="email" id="email" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<label for="company" class="block text-sm font-medium mb-1">Company</label>
<input type="text" id="company" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<label for="message" class="block text-sm font-medium mb-1">Message</label>
<textarea id="message" rows="4" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
</div>
<button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-teal-400 text-white py-3 rounded-full glow-btn hover:shadow-lg transition">
Send Message
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Blog Preview Section -->
<section class="py-20 px-6 bg-white">
<div class="container mx-auto fade-in">
<div class="flex justify-between items-center mb-12">
<h2 class="text-3xl font-bold">Latest Geospatial Insights</h2>
<a href="#" class="text-blue-500 hover:underline flex items-center">
View All Articles <i class="ph ph-arrow-right ml-2"></i>
</a>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Satellite imagery" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-sm text-blue-500 font-medium">Satellite Analysis</span>
<h3 class="text-xl font-bold mt-2 mb-3">Automating Land Cover Classification at Scale</h3>
<p class="text-gray-600 mb-4">How machine learning is revolutionizing environmental monitoring with 90%+ accuracy.</p>
<div class="flex items-center text-sm text-gray-500">
<i class="ph ph-calendar mr-2"></i> June 15, 2023
</div>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Agriculture drone" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-sm text-teal-500 font-medium">Precision Agriculture</span>
<h3 class="text-xl font-bold mt-2 mb-3">Early Detection of Crop Stress Using Multispectral Drones</h3>
<p class="text-gray-600 mb-4">Case study showing 3-week earlier detection of disease compared to traditional methods.</p>
<div class="flex items-center text-sm text-gray-500">
<i class="ph ph-calendar mr-2"></i> May 28, 2023
</div>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Urban development" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-sm text-purple-500 font-medium">Urban Planning</span>
<h3 class="text-xl font-bold mt-2 mb-3">Monitoring Urban Expansion with Time Series Analysis</h3>
<p class="text-gray-600 mb-4">Quantifying urban growth patterns across 50 cities using 10 years of satellite data.</p>
<div class="flex items-center text-sm text-gray-500">
<i class="ph ph-calendar mr-2"></i> April 12, 2023
</div>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1615874694520-82d4f5259a9a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Disaster response" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-sm text-red-500 font-medium">Disaster Response</span>
<h3 class="text-xl font-bold mt-2 mb-3">Rapid Flood Assessment Using SAR Satellite Data</h3>
<p class="text-gray-600 mb-4">How synthetic aperture radar provides all-weather, day-night monitoring capabilities.</p>
<div class="flex items-center text-sm text-gray-500">
<i class="ph ph-calendar mr-2"></i> March 5, 2023
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-gradient-to-r from-blue-600 to-blue-800 text-white px-6">
<div class="container mx-auto text-center fade-in">
<h2 class="text-3xl font-bold mb-6">Ready to Transform Your Geospatial Workflows?</h2>
<p class="text-xl opacity-90 max-w-3xl mx-auto mb-8">
Join hundreds of organizations automating their satellite and drone data analysis with GeoSpectra.
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-white text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition">
Start Free Trial
</button>
<button class="border border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition">
Schedule Demo
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12 px-6">
<div class="container mx-auto">
<div class="grid md:grid-cols-5 gap-8 mb-12">
<div class="md:col-span-2">
<div class="flex items-center mb-4">
<i class="ph ph-planet text-3xl text-blue-500 mr-2"></i>
<span class="text-2xl font-bold bg-gradient-to-r from-blue-500 to-teal-400 bg-clip-text text-transparent">GeoSpectra</span>
</div>
<p class="mb-4">
Automating the future of geospatial intelligence to empower data-driven decisions at scale.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="ph ph-twitter-logo text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="ph ph-linkedin-logo text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="ph ph-youtube-logo text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="ph ph-github-logo text-xl"></i>
</a>
</div>
</div>
<div>
<h4 class="text-white font-bold mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Features</a></li>
<li><a href="#" class="hover:text-white transition">Pricing</a></li>
<li><a href="#" class="hover:text-white transition">Integrations</a></li>
<li><a href="#" class="hover:text-white transition">Roadmap</a></li>
<li><a href="#" class="hover:text-white transition">API</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Documentation</a></li>
<li><a href="#" class="hover:text-white transition">Tutorials</a></li>
<li><a href="#" class="hover:text-white transition">Blog</a></li>
<li><a href="#" class="hover:text-white transition">Webinars</a></li>
<li><a href="#" class="hover:text-white transition">Case Studies</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">About Us</a></li>
<li><a href="#" class="hover:text-white transition">Careers</a></li>
<li><a href="#" class="hover:text-white transition">Press</a></li>
<li><a href="#" class="hover:text-white transition">Partners</a></li>
<li><a href="#" class="hover:text-white transition">Contact</a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<p>© 2023 GeoSpectra. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="hover:text-white transition">Privacy Policy</a>
<a href="#" class="hover:text-white transition">Terms of Service</a>
<a href="#" class="hover:text-white transition">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
const menuBtn = document.getElementById('menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const closeMenu = document.getElementById('close-menu');
menuBtn.addEventListener('click', () => {
mobileMenu.classList.add('menu-open');
});
closeMenu.addEventListener('click', () => {
mobileMenu.classList.remove('menu-open');
});
// Sticky nav on scroll
const nav = document.querySelector('.sticky-nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
nav.classList.add('scrolled');
} else {
nav.classList.remove('scrolled');
}
});
// Testimonial slider
const slider = document.getElementById('testimonial-slider');
const prevBtn = document.getElementById('prev-testimonial');
const nextBtn = document.getElementById('next-testimonial');
const dots = document.querySelectorAll('.testimonial-dot');
let currentSlide = 0;
const totalSlides = document.querySelectorAll('#testimonial-slider > div').length;
function updateSlider() {
slider.style.transform = `translateX(-${currentSlide * 100}%)`;
dots.forEach((dot, index) => {
if (index === currentSlide) {
dot.classList.add('bg-blue-500');
dot.classList.remove('bg-gray-300');
} else {
dot.classList.remove('bg-blue-500');
dot.classList.add('bg-gray-300');
}
});
}
prevBtn.addEventListener('click', () => {
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
updateSlider();
});
nextBtn.addEventListener('click', () => {
currentSlide = (currentSlide + 1) % totalSlides;
updateSlider();
});
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
currentSlide = index;
updateSlider();
});
});
// FAQ accordion
const faqQuestions = document.querySelectorAll('.faq-question');
faqQuestions.forEach(question => {
question.addEventListener('click', () => {
const answer = question.nextElementSibling;
const icon = question.querySelector('i');
if (answer.classList.contains('hidden')) {
answer.classList.remove('hidden');
icon.classList.remove('ph-plus');
icon.classList.add('ph-minus');
} else {
answer.classList.add('hidden');
icon.classList.remove('ph-minus');
icon.classList.add('ph-plus');
}
});
});
// Animate elements on scroll
const fadeElements = document.querySelectorAll('.fade-in');
function checkScroll() {
fadeElements.forEach(element => {
const elementTop = element.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (elementTop < windowHeight - 100) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
}
window.addEventListener('scroll', checkScroll);
window.addEventListener('load', checkScroll);
// 3D Globe
const globeContainer = document.getElementById('globe');
// Sample data for points on globe
const pointsData = [
{ lat: 37.7749, lng: -122.4194, size: 0.1, color: 'red' }, // San Francisco
{ lat: 40.7128, lng: -74.0060, size: 0.1, color: 'blue' }, // New York
{ lat: 51.5074, lng: -0.1278, size: 0.1, color: 'green' }, // London
{ lat: 35.6762, lng: 139.6503, size: 0.1, color: 'yellow' }, // Tokyo
{ lat: -33.8688, lng: 151.2093, size: 0.1, color: 'purple' }, // Sydney
{ lat: 22.3193, lng: 114.1694, size: 0.1, color: 'orange' } // Hong Kong
];
// Create globe
const globe = Globe()
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
.bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
.backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
.showAtmosphere(true)
.atmosphereColor('rgba(0, 168, 232, 0.3)')
.atmosphereAltitude(0.25)
.pointsData(pointsData)
.pointColor('color')
.pointAltitude(0.01)
.pointRadius('size')
(globeContainer);
// Auto-rotate
globe.controls().autoRotate = true;
globe.controls().autoRotateSpeed = 0.5;
// Resize on container size change
const resizeObserver = new ResizeObserver(() => {
globe.width(globeContainer.clientWidth);
globe.height(globeContainer.clientHeight);
});
resizeObserver.observe(globeContainer);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mishak/geospectra" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>