Songs2YT
117 lines
3.5 KiB
TypeScript
117 lines
3.5 KiB
TypeScript
"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>
|
|
);
|
|
}
|