Upload components/Services.tsx with huggingface_hub

components/Services.tsx

@@ -0,0 +1,83 @@
+import { Ruler, HardHat, Home, TrendingUp } from 'lucide-react'
+
+const Services = () => {
+  const services = [
+    {
+      icon: Ruler,
+      title: 'Architecture & Design',
+      description: 'Innovative architectural solutions tailored to your vision, combining aesthetics with functionality.'
+    },
+    {
+      icon: HardHat,
+      title: 'Construction Management',
+      description: 'End-to-end project management ensuring timely delivery, quality control, and budget adherence.'
+    },
+    {
+      icon: Home,
+      title: 'Property Development',
+      description: 'Full-cycle development services from land acquisition to final delivery and beyond.'
+    },
+    {
+      icon: TrendingUp,
+      title: 'Investment Advisory',
+      description: 'Strategic real estate investment consulting to maximize returns and minimize risks.'
+    }
+  ]
+
+  return (
+    <section id="services" className="py-24 md:py-32 bg-margins-black relative overflow-hidden">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute inset-0" style={{
+          backgroundImage: `radial-gradient(circle at 1px 1px, white 1px, transparent 0)`,
+          backgroundSize: '40px 40px'
+        }} />
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        {/* Header */}
+        <div className="text-center max-w-3xl mx-auto mb-20">
+          <span className="text-margins-gray uppercase tracking-widest text-sm mb-4 block">Our Services</span>
+          <h2 className="text-4xl md:text-5xl font-light mb-6">Comprehensive Real Estate Solutions</h2>
+          <p className="text-margins-gray leading-relaxed">
+            From concept to completion, we offer a full spectrum of services designed to bring your vision to life 
+            with precision, quality, and innovation.
+          </p>
+        </div>
+
+        {/* Services Grid */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {services.map((service, index) => (
+            <div 
+              key={index} 
+              className="group p-8 border border-margins-dark hover:border-margins-gray transition-colors duration-300 bg-margins-black/50 backdrop-blur-sm"
+            >
+              <div className="w-14 h-14 rounded-full border border-margins-gray flex items-center justify-center mb-6 group-hover:border-white group-hover:bg-white group-hover:text-margins-black transition-all duration-300">
+                <service.icon className="w-6 h-6" />
+              </div>
+              <h3 className="text-lg font-light mb-4 uppercase tracking-wider">{service.title}</h3>
+              <p className="text-margins-gray text-sm leading-relaxed mb-6">{service.description}</p>
+              <a href="#contact" className="text-xs uppercase tracking-widest text-white hover:text-margins-gray transition-colors inline-flex items-center">
+                Learn More
+                <span className="ml-2 group-hover:translate-x-2 transition-transform duration-300">→</span>
+              </a>
+            </div>
+          ))}
+        </div>
+
+        {/* CTA */}
+        <div className="mt-20 text-center">
+          <p className="text-margins-gray mb-8">Ready to start your next project?</p>
+          <a 
+            href="#contact" 
+            className="inline-block px-10 py-4 bg-white text-margins-black uppercase tracking-widest text-sm hover:bg-margins-gray hover:text-white transition-all duration-300"
+          >
+            Schedule a Consultation
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Services