Update components/gallery.tsx

components/gallery.tsx

@@ -0,0 +1,60 @@
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import Image from "next/image";
+
+const images = [
+  {
+    url: "https://images.unsplash.com/photo-1607860108855-64acf2078ed9?q=80&w=800&auto=format&fit=crop",
+    alt: "Car interior detailing"
+  },
+  {
+    url: "https://images.unsplash.com/photo-1552930294-6b595f4c2974?q=80&w=800&auto=format&fit=crop",
+    alt: "Shiny car exterior"
+  },
+  {
+    url: "https://images.unsplash.com/photo-1601362840469-51e4d8d59085?q=80&w=800&auto=format&fit=crop",
+    alt: "Wheel cleaning"
+  },
+  {
+    url: "https://images.unsplash.com/photo-1599256621730-535171e28e50?q=80&w=800&auto=format&fit=crop",
+    alt: "Foam wash"
+  },
+  {
+    url: "https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?q=80&w=800&auto=format&fit=crop",
+    alt: "Ceramic coating application"
+  },
+  {
+    url: "https://images.unsplash.com/photo-1580273916550-e323be2ae537?q=80&w=800&auto=format&fit=crop",
+    alt: "Polished luxury car"
+  }
+];
+
+export function Gallery() {
+  return (
+    <section id="gallery" className="py-24">
+      <Container>
+        <div className="text-center max-w-3xl mx-auto mb-16">
+          <Heading>Our Work</Heading>
+          <Subheading className="mt-4">
+            Take a look at some of the vehicles we've transformed. Quality and attention to detail in every job.
+          </Subheading>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {images.map((image, index) => (
+            <div key={index} className="relative aspect-square overflow-hidden rounded-xl group">
+              <Image
+                src={image.url}
+                alt={image.alt}
+                fill
+                className="object-cover transition-transform duration-500 group-hover:scale-110"
+              />
+              <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors" />
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}