Merge pull request #314 from mezotv/feat/sponsored-by-vercel

feat(hero): add sponsored by vercel to hero

3 files changed, 64 insertions, 0 deletions

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 6e6a45cb..4a66e433 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";
@@ -116,6 +118,18 @@ export function Hero() {
         <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 }}
           transition={{ delay: 0.2, duration: 0.8 }}
           className="inline-block font-bold tracking-tighter text-4xl md:text-[4rem]"
         >
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>
+  );
+}