H

2026-01-30 00:25:07 +01:00
parent 03cd75576c
commit 593df01f0b
92 changed files with 0 additions and 0 deletions
--- a/src/components/ProjectShowcase.tsx
+++ b/src/components/ProjectShowcase.tsx
@@ -0,0 +1,80 @@
+import { ArrowUpRight } from "lucide-react";
+
+const projects = [
+  {
+    title: "Triple AI",
+    description: "Webentwicklung / UI Design / Custom Code",
+    image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop",
+  },
+  {
+    title: "Neutral",
+    description: "Webentwicklung / Custom Code",
+    image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop",
+  },
+  {
+    title: "Verbatim Labs",
+    description: "Webentwicklung / UI Design / Custom Code",
+    image: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800&h=600&fit=crop",
+  },
+  {
+    title: "JMK Engineers",
+    description: "Webentwicklung / UI Design / Custom Code",
+    image: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&h=600&fit=crop",
+  },
+  {
+    title: "GOODZ Club",
+    description: "Webentwicklung / Custom Code / Lokalisierung",
+    image: "https://images.unsplash.com/photo-1542744094-3a31f272c490?w=800&h=600&fit=crop",
+  },
+];
+
+const ProjectShowcase = () => {
+  return (
+    <section id="projects" className="py-24 md:py-32 bg-background relative">
+      <div className="container mx-auto px-6">
+        {/* Section Header */}
+        <div className="mb-16 md:mb-24">
+          <div className="label-tag mb-4">Ausgewählte Arbeiten</div>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase">
+            Projekte
+          </h2>
+        </div>
+
+        {/* Projects Grid */}
+        <div className="space-y-2">
+          {projects.map((project, index) => (
+            <a
+              key={project.title}
+              href="#"
+              className="group block project-card rounded-lg p-6 md:p-8"
+              style={{ animationDelay: `${index * 0.1}s` }}
+            >
+              <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                <div className="flex-1">
+                  <h3 className="text-2xl md:text-3xl font-display font-medium text-foreground mb-2 group-hover:text-muted-foreground transition-colors uppercase tracking-tight">
+                    {project.title}
+                  </h3>
+                  <p className="text-muted-foreground text-sm uppercase tracking-wider">
+                    {project.description}
+                  </p>
+                </div>
+                <div className="flex items-center gap-4">
+                  <div className="w-24 h-16 md:w-32 md:h-20 rounded overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                    <img 
+                      src={project.image} 
+                      alt={project.title}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                  <ArrowUpRight className="w-6 h-6 text-muted-foreground group-hover:text-foreground transition-colors" />
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ProjectShowcase;