From 18d2186101043c251687235bddf13b7f00b16846 Mon Sep 17 00:00:00 2001
From: Dominik Koch <dominik@koch-bautechnik.de>
Date: Wed, 16 Jul 2025 15:19:06 +0200
Subject: [PATCH] feat(hero): add sponsored by vercel to hero

---
 apps/web/src/components/icons.tsx             |  8 ++++
 apps/web/src/components/landing/hero.tsx      | 14 +++++++
 apps/web/src/components/ui/sponsor-button.tsx | 42 +++++++++++++++++++
 3 files changed, 64 insertions(+)
 create mode 100644 apps/web/src/components/ui/sponsor-button.tsx

diff --git a/apps/web/src/components/icons.tsx b/apps/web/src/components/icons.tsx
index 4f3986e3..68e8f0ff 100644
--- a/apps/web/src/components/icons.tsx
+++ b/apps/web/src/components/icons.tsx
@@ -38,6 +38,14 @@ export function GithubIcon({ className }: { className?: string }) {
   );
 }
 
+export function VercelIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} width="20" height="18" viewBox="0 0 76 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" fill="currentColor"/>
+    </svg>
+  );
+}
+
 export function BackgroundIcon({ className }: { className?: string }) {
   return (
     <svg
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index b1910dc5..944881ea 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/apps/web/src/components/landing/hero.tsx
@@ -3,6 +3,8 @@
 import { motion } from "motion/react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
+import { SponsorButton } from "../ui/sponsor-button";
+import { VercelIcon } from "../icons";
 import { ArrowRight } from "lucide-react";
 import { useState, useEffect } from "react";
 import { toast } from "sonner";
@@ -105,6 +107,18 @@ export function Hero() {
         transition={{ duration: 1 }}
         className="max-w-3xl mx-auto w-full flex-1 flex flex-col justify-center"
       >
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.6, duration: 0.8 }}
+          className="mb-4 flex justify-center"
+        >
+          <SponsorButton 
+            href="https://vercel.com/?utm_source=opencut"
+            logo={VercelIcon}
+            companyName="Vercel"
+          />
+        </motion.div>
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
diff --git a/apps/web/src/components/ui/sponsor-button.tsx b/apps/web/src/components/ui/sponsor-button.tsx
new file mode 100644
index 00000000..fdfaa0b0
--- /dev/null
+++ b/apps/web/src/components/ui/sponsor-button.tsx
@@ -0,0 +1,42 @@
+import { motion } from "motion/react";
+import { ComponentType } from "react";
+
+interface SponsorButtonProps {
+  href: string;
+  logo: ComponentType<{ className?: string }>;
+  companyName: string;
+  className?: string;
+}
+
+export function SponsorButton({
+  href,
+  logo: Logo,
+  companyName,
+  className = "",
+}: SponsorButtonProps) {
+
+  return (
+    <motion.a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`inline-flex items-center gap-2 px-3 py-2 rounded-full border border-white/10 bg-white/5 backdrop-blur-sm hover:bg-white/10 hover:border-white/20 transition-all duration-200 group shadow-lg ${className}`}
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+    >
+      <span className="text-xs font-medium text-zinc-400 group-hover:text-zinc-300 transition-colors">
+        Sponsored by
+      </span>
+
+      <div className="flex items-center gap-1.5">
+        <div className="text-zinc-100 group-hover:text-white transition-colors">
+          <Logo className="w-4 h-4" />
+        </div>
+
+        <span className="text-xs font-medium text-zinc-100 group-hover:text-white transition-colors">
+          {companyName}
+        </span>
+      </div>
+    </motion.a>
+  );
+}