Upload components/About.tsx with huggingface_hub

components/About.tsx

@@ -0,0 +1,80 @@
+import { Building2, Leaf, Award } from 'lucide-react'
+
+const About = () => {
+  const stats = [
+    { number: '15+', label: 'Years Experience' },
+    { number: '50+', label: 'Projects Completed' },
+    { number: '2M+', label: 'Sq Ft Developed' },
+    { number: '100%', label: 'Client Satisfaction' },
+  ]
+
+  const features = [
+    {
+      icon: Building2,
+      title: 'Innovative Design',
+      description: 'Pushing boundaries with architectural excellence and contemporary aesthetics'
+    },
+    {
+      icon: Leaf,
+      title: 'Sustainable Future',
+      description: 'Eco-conscious developments that minimize environmental impact'
+    },
+    {
+      icon: Award,
+      title: 'Award Winning',
+      description: 'Recognized globally for outstanding contributions to real estate'
+    }
+  ]
+
+  return (
+    <section id="about" className="py-24 md:py-32 bg-margins-black">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Main Content */}
+        <div className="grid md:grid-cols-2 gap-16 items-center mb-24">
+          <div className="animate-slide-up">
+            <span className="text-margins-gray uppercase tracking-widest text-sm mb-4 block">About Us</span>
+            <h2 className="text-4xl md:text-5xl font-light mb-6 leading-tight">
+              Creating Spaces That
+              <span className="block font-normal italic text-margins-gray">Inspire & Endure</span>
+            </h2>
+          </div>
+          <div className="space-y-6 text-margins-gray leading-relaxed animate-slide-up">
+            <p>
+              Margins Developments is a premier real estate development company dedicated to creating 
+              exceptional living and working environments. With over 15 years of experience, we have 
+              established ourselves as leaders in innovative architectural design and sustainable development.
+            </p>
+            <p>
+              Our commitment to excellence drives every project we undertake, from luxury residential 
+              towers to mixed-use commercial spaces. We believe in creating developments that not only 
+              meet the needs of today but anticipate the demands of tomorrow.
+            </p>
+          </div>
+        </div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-24 py-12 border-y border-margins-dark">
+          {stats.map((stat, index) => (
+            <div key={index} className="text-center">
+              <div className="text-4xl md:text-5xl font-light mb-2">{stat.number}</div>
+              <div className="text-margins-gray text-sm uppercase tracking-widest">{stat.label}</div>
+            </div>
+          ))}
+        </div>
+
+        {/* Features */}
+        <div className="grid md:grid-cols-3 gap-12">
+          {features.map((feature, index) => (
+            <div key={index} className="group">
+              <feature.icon className="w-8 h-8 mb-6 text-margins-gray group-hover:text-white transition-colors duration-300" />
+              <h3 className="text-xl font-light mb-4 uppercase tracking-wider">{feature.title}</h3>
+              <p className="text-margins-gray leading-relaxed">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default About