Upload components/Projects.tsx with huggingface_hub

components/Projects.tsx

@@ -0,0 +1,98 @@
+import { ArrowUpRight } from 'lucide-react'
+
+const Projects = () => {
+  const projects = [
+    {
+      id: 1,
+      title: 'The Horizon Tower',
+      location: 'Downtown District',
+      category: 'Residential',
+      image: 'https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=800&q=80',
+      year: '2024'
+    },
+    {
+      id: 2,
+      title: 'Marina Heights',
+      location: 'Waterfront',
+      category: 'Mixed Use',
+      image: 'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=800&q=80',
+      year: '2023'
+    },
+    {
+      id: 3,
+      title: 'Green Valley Estate',
+      location: 'Suburban',
+      category: 'Residential',
+      image: 'https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=800&q=80',
+      year: '2023'
+    },
+    {
+      id: 4,
+      title: 'Commerce Plaza',
+      location: 'Business District',
+      category: 'Commercial',
+      image: 'https://images.unsplash.com/photo-1486718448742-163732cd1544?w=800&q=80',
+      year: '2022'
+    }
+  ]
+
+  return (
+    <section id="projects" className="py-24 md:py-32 bg-margins-dark">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="flex flex-col md:flex-row md:items-end justify-between mb-16">
+          <div>
+            <span className="text-margins-gray uppercase tracking-widest text-sm mb-4 block">Portfolio</span>
+            <h2 className="text-4xl md:text-5xl font-light">Featured Projects</h2>
+          </div>
+          <a 
+            href="#" 
+            className="mt-6 md:mt-0 inline-flex items-center text-sm uppercase tracking-widest text-margins-gray hover:text-white transition-colors group"
+          >
+            View All Projects
+            <ArrowUpRight className="ml-2 w-4 h-4 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" />
+          </a>
+        </div>
+
+        {/* Projects Grid */}
+        <div className="grid md:grid-cols-2 gap-8">
+          {projects.map((project) => (
+            <div 
+              key={project.id} 
+              className="group relative overflow-hidden cursor-pointer"
+            >
+              {/* Image Container */}
+              <div className="aspect-[4/3] overflow-hidden bg-margins-black">
+                <img 
+                  src={project.image} 
+                  alt={project.title}
+                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                />
+                {/* Overlay */}
+                <div className="absolute inset-0 bg-margins-black/0 group-hover:bg-margins-black/40 transition-colors duration-300" />
+              </div>
+
+              {/* Content */}
+              <div className="absolute bottom-0 left-0 right-0 p-6 md:p-8 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <span className="text-xs uppercase tracking-widest text-margins-gray mb-2 block">
+                      {project.category} — {project.year}
+                    </span>
+                    <h3 className="text-2xl font-light mb-1">{project.title}</h3>
+                    <span className="text-margins-gray text-sm">{project.location}</span>
+                  </div>
+                  <div className="w-12 h-12 rounded-full border border-white/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                    <ArrowUpRight className="w-5 h-5" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Projects