mobile: Optimizations for Maps Drawer, Legend, and Customer Profile Tabs

2026-02-10 20:36:44 +05:30
parent 91b47e83c3
commit 83250d687e
15 changed files with 1140 additions and 91 deletions
@@ -0,0 +1,95 @@
+import React from 'react';
+import { Icons } from './landing/constants';
+
+const services = [
+    {
+        title: "Residential Repair",
+        desc: "Leak detection & shingle replacement in record time. We identify micro-fractures invisible to the naked eye.",
+        icon: Icons.Home,
+        color: "from-blue-400 to-blue-600",
+        glow: "shadow-blue-500/20"
+    },
+    // Commercial Development Removed as per request
+    {
+        title: "Lead & Data Solutions",
+        desc: "Advanced lead scoring and real-time storm tracking alerts. Know where the damage is before the phone rings.",
+        icon: Icons.Chart,
+        color: "from-purple-400 to-indigo-600",
+        glow: "shadow-purple-500/20"
+    }
+];
+
+const Services = () => {
+    // Simple Tilt Logic
+    const handleMouseMove = (e) => {
+        const card = e.currentTarget;
+        const rect = card.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+
+        // Rotation calc (Max 5deg)
+        const rotateX = ((y - centerY) / centerY) * -5;
+        const rotateY = ((x - centerX) / centerX) * 5;
+
+        card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`;
+    };
+
+    const handleMouseLeave = (e) => {
+        e.currentTarget.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
+    };
+
+    return (
+        <section className="py-24 bg-white relative overflow-hidden dark:bg-black/40">
+            <div className="absolute inset-0 opacity-5 bg-grid-pattern bg-[length:40px_40px]"></div>
+
+            <div className="container mx-auto px-4 relative z-10">
+                <div className="text-center mb-16">
+                    <h2 className="text-slate-900 dark:text-white font-heading text-4xl font-bold">Our Core Services</h2>
+                    <p className="text-gray-500 mt-4 max-w-2xl mx-auto font-light">Leveraging military-grade technology for civilian roofing applications.</p>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+                    {services.map((service, idx) => (
+                        <div
+                            key={idx}
+                            onMouseMove={handleMouseMove}
+                            onMouseLeave={handleMouseLeave}
+                            className="group p-8 rounded-2xl border border-gray-100 dark:border-white/10 bg-white/80 dark:bg-white/5 backdrop-blur-sm shadow-xl transition-all duration-200 ease-out cursor-pointer relative overflow-hidden"
+                            style={{ transformStyle: 'preserve-3d', transition: 'transform 0.1s ease-out' }}
+                        >
+                            {/* Gradient Glow on Hover */}
+                            <div className={`absolute -inset-0.5 bg-gradient-to-br ${service.color} opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-300 pointer-events-none`}></div>
+
+                            <div className="relative z-10 flex flex-col h-full">
+                                <div className={`w-16 h-16 mb-6 rounded-xl flex items-center justify-center text-white bg-gradient-to-br ${service.color} shadow-lg ${service.glow} transform group-hover:scale-110 transition-transform duration-300`}>
+                                    <div className="w-8 h-8 flex items-center justify-center">
+                                        <service.icon />
+                                    </div>
+                                </div>
+
+                                <h3 className="text-2xl font-heading font-bold text-slate-900 dark:text-white mb-3 group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-cyan-500 dark:group-hover:from-blue-400 dark:group-hover:to-cyan-400 transition-all duration-300">
+                                    {service.title}
+                                </h3>
+
+                                <p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-8 flex-grow">
+                                    {service.desc}
+                                </p>
+
+                                <div className="pt-6 border-t border-gray-100 dark:border-white/10 flex items-center justify-between mt-auto group-hover:border-cyan/20 transition-colors">
+                                    <span className="text-xs font-bold text-gray-400 uppercase tracking-wider group-hover:text-cyan transition-colors">Explore Solution</span>
+                                    <div className="w-8 h-8 rounded-full border border-gray-200 dark:border-white/20 text-gray-400 flex items-center justify-center transform group-hover:rotate-45 group-hover:border-cyan group-hover:text-cyan transition-all duration-300">
+                                        ↗
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Services;