import React, { useState, useEffect, useRef } from 'react';
import {
Menu, X, ChevronRight, Map, Cpu, Zap, Radio, Search, Thermometer,
Box, Cloud, Globe, Camera, Activity, ShieldCheck, Mail, Phone, MapPin,
Plane, Hexagon, Sparkles, Loader2, Bot, Layers, MousePointer2
} from 'lucide-react';
// --- GEMINI API UTILS ---
const callGeminiAPI = async (prompt, systemInstruction = "") => {
const apiKey = "";
const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
const payload = {
contents: [{ parts: [{ text: prompt }] }],
};
if (systemInstruction) {
payload.systemInstruction = { parts: [{ text: systemInstruction }] };
}
for (let attempt = 0; attempt < 5; attempt++) {
try {
const response = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (!response.ok) throw new Error(`API Error: ${response.status}`);
const data = await response.json();
return data.candidates?.[0]?.content?.parts?.[0]?.text || "No response generated.";
} catch (error) {
if (attempt === 4) {
console.error("Gemini API Error:", error);
return "Sorry, the AI service is currently unavailable. Please try again later.";
}
await new Promise(r => setTimeout(r, Math.pow(2, attempt) * 1000));
}
}
};
// --- SEO & META UTILS ---
const updateSEO = (title, description) => {
document.title = title;
let metaDesc = document.querySelector('meta[name="description"]');
if (!metaDesc) {
metaDesc = document.createElement('meta');
metaDesc.name = "description";
document.head.appendChild(metaDesc);
}
metaDesc.content = description;
};
// --- ANIMATION COMPONENTS ---
const AnimatedSection = ({ children, className = "", delay = 0, direction = 'up' }) => {
const [isVisible, setIsVisible] = useState(false);
const ref = useRef(null);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.unobserve(entry.target);
}
},
{ threshold: 0.15 }
);
if (ref.current) observer.observe(ref.current);
return () => observer.disconnect();
}, []);
const getTransform = () => {
if (isVisible) return 'translate-y-0 translate-x-0 scale-100';
switch (direction) {
case 'up': return 'translate-y-16 scale-95';
case 'down': return '-translate-y-16 scale-95';
case 'left': return 'translate-x-16 scale-95';
case 'right': return '-translate-x-16 scale-95';
default: return 'translate-y-16 scale-95';
}
};
return (
);
};
// --- LAYOUT COMPONENTS ---
const Navbar = ({ setPage, currentPage }) => {
const [isScrolled, setIsScrolled] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 20);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const navLinks = [
{ name: 'Home', id: 'home' },
{ name: 'Capabilities', id: 'home', action: () => { setPage('home'); setTimeout(() => document.getElementById('capabilities')?.scrollIntoView({ behavior: 'smooth' }), 100); } },
{ name: 'Contact', id: 'contact' },
];
return (
);
};
const Footer = ({ setPage }) => {
return (
);
};
// --- MAIN APP EXPORT ---
export default function App() {
const [page, setPage] = useState('home');
return (
{page === 'home' ?
{/* Global styles for smooth rendering */}
);
}
{children}
);
};
// --- DATA ---
const capabilities = [
{ icon: Radio, title: "Aerial LiDAR", desc: "High density point clouds for precise terrain modeling, even through dense vegetation." },
{ icon: Scan, title: "SLAM Scanner Tech", desc: "Simultaneous Localisation & Mapping for rapid 3D modeling of complex indoor & GPS denied environments." },
{ icon: Search, title: "Aerial Inspections", desc: "Detailed and safe visual inspections of critical infrastructure and hard-to-reach assets." },
{ icon: Thermometer, title: "Thermal Imaging", desc: "Advanced thermal imaging & fault detection for energy and industrial sectors." },
{ icon: Map, title: "Mapping & Surveying", desc: "High-precision mapping and topographical surveys delivering centimeter-level accuracy." },
{ icon: Box, title: "3D Rendering & Twins", desc: "Highly accurate 3D rendering and interactive digital twins of your physical assets." },
{ icon: Cpu, title: "Data Analytics (Ai)", desc: "Intelligent data processing and AI analytics turning raw data into actionable insights." },
{ icon: Cloud, title: "Cloud Hosting", desc: "Secure cloud-based data hosting ensuring your sensitive project information is protected." },
{ icon: Globe, title: "Client Platforms", desc: "Seamless browser-based client access platforms for viewing and interacting with data." },
{ icon: Camera, title: "Photography & Video", desc: "Stunning high-resolution aerial photography and videography for commercial use." },
{ icon: Activity, title: "Industrial Monitoring", desc: "Continuous industrial and infrastructure monitoring to support predictive maintenance." },
{ icon: ShieldCheck, title: "Compliant UAV Services", desc: "Fully compliant, safe, and legally operated UAV / RPAS services by certified professionals." },
];
// Helper icon component for SLAM since Scan is not standard in this lucide set import
function Scan(props) {
return
{/* Scanner Header */}
);
};
// --- AI COMPONENTS ---
const AiInsightsGenerator = () => {
const [industry, setIndustry] = useState('');
const [insights, setInsights] = useState('');
const [loading, setLoading] = useState(false);
const handleGenerate = async () => {
if (!industry.trim()) return;
setLoading(true);
const prompt = `Generate a short, impressive 2-paragraph pitch on how Skypxl's drone services (LiDAR, SLAM, Thermal, mapping, 3D digital twins) can revolutionize the following industry or project type: "${industry}". Focus on ROI, safety, and actionable insights. Format any specific service mentions using bullet points.`;
const sysInstruct = "You are an expert consultant for Skypxl - Aerial Intelligence. Be concise, professional, and highly persuasive.";
const response = await callGeminiAPI(prompt, sysInstruct);
setInsights(response);
setLoading(false);
};
return (
Interactive Data Viewer
{[
{ id: 'lidar', label: 'LiDAR' },
{ id: 'dsm', label: 'DSM' },
{ id: 'contour', label: 'Contours' }
].map(layer => (
))}
setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
className="relative h-[400px] w-full cursor-none overflow-hidden"
>
{/* Base Layer: Orthomosaic */}
{/* Lens Layer: Revealed by Clip Path */}
{/* Custom Target Cursor / Crosshair */}
{/* Inner Dot */}
{/* Target Ticks */}
{/* Telemetry Readout */}
{/* Instructions Overlay (Disappears on hover) */}
SCAN: {lensType.toUpperCase()}
LAT: {(mousePos.x * 0.0142).toFixed(4)}°
LON: {(mousePos.y * 0.0142).toFixed(4)}°
ALT: {lensType === 'dsm' ? (120 + (mousePos.x * 0.1)).toFixed(1) + 'm' : '---'}
setIndustry(e.target.value)}
placeholder="E.g. Offshore Wind Farms, Urban Construction, Agriculture..."
className="flex-grow px-4 py-4 rounded-xl bg-slate-900 border border-slate-600 focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-all text-white placeholder-slate-400"
/>
{insights && (
').replace(/\*\*(.*?)\*\*/g, '$1')}} />
)}
{/* HERO SECTION */}
{/* Animated Background Elements */}
Data From The Sky.
{/* INTRODUCTION SECTION */}
{/* Decorative elements */}
{/* INTERACTIVE DATA VISUALIZATION SECTION */}
{/* CAPABILITIES SECTION */}
{/* AI INSIGHTS SECTION */}
{/* Animated Glow Elements */}
{/* COMMITMENT CTA SECTION */}
);
};
const Contact = () => {
const [message, setMessage] = useState('');
const [isAiLoading, setIsAiLoading] = useState(false);
useEffect(() => {
updateSEO(
"Contact Skypxl - Aerial Intelligence",
"Get in touch with Skypxl for innovative aerial solutions, drone inspections, and advanced 3D modeling."
);
window.scrollTo(0, 0);
}, []);
const enhanceMessage = async () => {
if (!message.trim()) return;
setIsAiLoading(true);
const prompt = `The user is writing an inquiry to Skypxl (a drone/aerial intelligence company). Please expand and professionalize this draft message. Identify which services (LiDAR, SLAM, Mapping, Thermal, etc.) might be relevant based on their draft. Draft:\n"${message}"`;
const sysInstruct = "You are an AI assistant helping a user write a professional project scope and inquiry. Output ONLY the improved message text, ready to be sent.";
const response = await callGeminiAPI(prompt, sysInstruct);
setMessage(response);
setIsAiLoading(false);
};
return (
{/* Mock Grid Background */}
{/* Animated Glow */}
Data From The Sky.
Actionable Intelligence.
We believe drone technology is transforming the way industries operate, inspect, monitor, and make decisions. Gain access to critical information faster and smarter.
Advanced Drone Operations
Our advanced drone operations provide safe, efficient, and highly accurate solutions across a wide range of applications. We help clients gain access to critical information faster, smarter, and more cost-effectively than traditional methods.
From aerial LiDAR, photogrammetric inspections and thermal imaging to high-precision mapping, 3D modelling, and data processing, our services are designed to deliver real value across industrial, engineering, mining, infrastructure, energy, agricultural, and commercial sectors.
-
{['Improve planning', 'Monitor assets', 'Reduce downtime', 'Enhance safety', 'Predictive maintenance'].map((item, i) => (
-
{item}
))}
{/* Decorative elements */}
Capturing high-quality aerial data for actionable insights and interactive digital models.
From Raw Data to Intelligence
Experience how we capture and process the physical world. Hover over the orthomosaic map below to reveal the rich, actionable data sets underneath.
Our Capabilities
Using modern UAV platforms and advanced sensor technologies, we transform raw data into intelligent, future-focused solutions.
{capabilities.map((cap, index) => (
))}
{cap.title}
{cap.desc}
⨠AI Industry Insights
Not sure how drone tech applies to your specific sector? Tell our Gemini AI about your industry or project type, and we'll generate a custom use-case breakdown.
Combining safety, innovation, compliance, and operational excellence.
Whether itâs capturing data from the sky, processing complex datasets, or providing clients with seamless digital access, we deliver actionable outcome solutions that are efficient, intelligent, and future-focused.
Contact Skypxl
Ready to elevate your operations? Reach out to our team to discuss your project requirements and discover how our aerial intelligence solutions can add value.
{/* Contact Info Cards */}
{/* Contact Form */}
Send us a message
{/* LOGO */}
{/* MOBILE NAV DROPDOWN */}
{mobileMenuOpen && (
setPage('home')}
>
{/* DESKTOP NAV */}
{/* MOBILE MENU TOGGLE */}
{navLinks.map((link) => (
))}
)}