Initial open-source self-hosted Songs2YT edition

2026-07-17 02:23:59 +02:00
commit 2aa8a84781
134 changed files with 17758 additions and 0 deletions
@@ -0,0 +1,116 @@
+"use client";
+
+import { useRef } from "react";
+import { ScrollReveal } from "@/components/ScrollReveal";
+import { SectionScrollTitle } from "@/components/SectionScrollTitle";
+import { GITEA_ISSUES_URL, SUPPORT_EMAIL } from "@/lib/plans";
+
+type SupportCardProps = {
+  title: string;
+  description: string;
+  href: string;
+  cta: string;
+  external?: boolean;
+  hover: string;
+  titleHover: string;
+  linkClass: string;
+  linkHover: string;
+};
+
+function SupportCard({
+  title,
+  description,
+  href,
+  cta,
+  external,
+  hover,
+  titleHover,
+  linkClass,
+  linkHover,
+}: SupportCardProps) {
+  return (
+    <a
+      href={href}
+      target={external ? "_blank" : undefined}
+      rel={external ? "noopener noreferrer" : undefined}
+      className={`group block rounded-xl border border-gray-700/50 bg-surface/80 p-6 backdrop-blur-sm transition-all duration-300 ${hover}`}
+    >
+      <h3
+        className={`mb-2 text-lg font-semibold text-white transition-colors duration-300 ${titleHover}`}
+      >
+        {title}
+      </h3>
+      <p className="mb-4 text-sm leading-relaxed text-gray-400 transition-colors duration-300 group-hover:text-gray-300">
+        {description}
+      </p>
+      <span
+        className={`inline-flex text-sm font-medium transition-all duration-300 group-hover:underline ${linkClass} ${linkHover}`}
+      >
+        {cta}
+      </span>
+    </a>
+  );
+}
+
+const SUPPORT_CARDS: SupportCardProps[] = [
+  {
+    title: "🛠️ Community & Self-Hosting",
+    description:
+      "Found a bug, want to request a feature, or need help setting up your Docker instance? Open an issue on our self-hosted Gitea.",
+    href: GITEA_ISSUES_URL,
+    cta: "Open Gitea Issues",
+    external: true,
+    hover:
+      "hover:border-[#609926]/45 hover:bg-[#609926]/[0.06] hover:shadow-lg hover:shadow-[#609926]/20",
+    titleHover: "group-hover:text-[#609926]",
+    linkClass: "text-[#609926]",
+    linkHover: "group-hover:text-[#7ab33a]",
+  },
+  {
+    title: "📩 Billing & Premium Support",
+    description:
+      "Have questions about your Pro subscription, custom limits, or Enterprise inquiries? Drop us an email.",
+    href: `mailto:${SUPPORT_EMAIL}`,
+    cta: SUPPORT_EMAIL,
+    hover:
+      "hover:border-accent/50 hover:bg-accent/[0.06] hover:shadow-lg hover:shadow-accent/20",
+    titleHover: "group-hover:text-accent",
+    linkClass: "text-accent",
+    linkHover: "group-hover:text-accent-hover",
+  },
+];
+
+export function SupportSection() {
+  const sectionRef = useRef<HTMLElement>(null);
+
+  return (
+    <section
+      ref={sectionRef}
+      id="support"
+      className="relative scroll-mt-24 overflow-x-visible overflow-y-hidden px-6 pb-24 pt-24"
+    >
+      <SectionScrollTitle sectionRef={sectionRef} title="Support" />
+
+      <div className="relative z-10 mx-auto max-w-4xl">
+        <ScrollReveal>
+          <h2 className="mb-4 text-center text-3xl font-bold text-white">Support</h2>
+          <p className="mx-auto mb-10 max-w-2xl text-center text-gray-400">
+            Community help for self-hosters, or reach us directly for billing and premium support.
+          </p>
+        </ScrollReveal>
+
+        <div className="mx-auto mt-10 grid grid-cols-1 gap-8 text-left md:grid-cols-2">
+          {SUPPORT_CARDS.map((card, index) => (
+            <ScrollReveal
+              key={card.title}
+              direction={index === 0 ? "left" : "right"}
+              delay={index * 120}
+            >
+              <SupportCard {...card} />
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}