Songs2YT
437 lines
15 KiB
TypeScript
437 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { ScrollReveal } from "@/components/ScrollReveal";
|
|
import { useInView } from "@/hooks/useInView";
|
|
import { useMockupProgress } from "@/hooks/useMockupProgress";
|
|
import { SectionScrollTitle } from "@/components/SectionScrollTitle";
|
|
|
|
function FilmStripIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<rect x="2" y="4" width="20" height="16" rx="2" />
|
|
<path d="M2 8h20M2 16h20M6 4v4M6 16v4M10 4v4M10 16v4M14 4v4M14 16v4M18 4v4M18 16v4" />
|
|
<path d="m15 9 3 3-3 3" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function YouTubeIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8z" />
|
|
<path fill="#12121f" d="M9.75 15.02l6.35-3.02-6.35-3.02v6.04z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function CoinsIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<ellipse cx="8" cy="6" rx="5" ry="2" />
|
|
<path d="M3 6v4c0 1.1 2.24 2 5 2s5-.9 5-2V6" />
|
|
<path d="M3 10v4c0 1.1 2.24 2 5 2s5-.9 5-2v-4" />
|
|
<ellipse cx="16" cy="14" rx="5" ry="2" />
|
|
<path d="M11 14v4c0 1.1 2.24 2 5 2s5-.9 5-2v-4" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function PlaylistIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<path d="M4 6h12M4 12h12M4 18h8" strokeLinecap="round" />
|
|
<path d="M17 14.5v5l4-2.5-4-2.5z" fill="currentColor" stroke="none" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function NoteIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<path d="M9 18V5l12-2v13" />
|
|
<circle cx="6" cy="18" r="3" />
|
|
<circle cx="18" cy="16" r="3" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function WaveIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<path d="M4 12h1M7 12h1M10 8v8M13 10v4M16 7v10M19 11v2" strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function GearsIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const BENEFITS = [
|
|
{
|
|
title: "No editing required",
|
|
desc: "Skip complex video editors. Just upload an image and audio, and Songs2YT handles the rest.",
|
|
Icon: FilmStripIcon,
|
|
},
|
|
{
|
|
title: "YouTube-ready output",
|
|
desc: "Videos are encoded and uploaded with the metadata you set, ready for your channel.",
|
|
Icon: YouTubeIcon,
|
|
},
|
|
{
|
|
title: "Free tier included",
|
|
desc: "Start creating with 14 videos every 12 hours at up to 720p. No credit card needed.",
|
|
Icon: CoinsIcon,
|
|
},
|
|
{
|
|
title: "YouTube playlists",
|
|
desc: "Independent Artist (Pro) can create YouTube playlists and add every upload from the dashboard or API.",
|
|
Icon: PlaylistIcon,
|
|
},
|
|
] as const;
|
|
|
|
const STOCK_THUMBS = [
|
|
"https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=120&h=120&fit=crop&auto=format",
|
|
"https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=120&h=120&fit=crop&auto=format",
|
|
"https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?w=120&h=120&fit=crop&auto=format",
|
|
"https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=120&h=120&fit=crop&auto=format",
|
|
"https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=120&h=120&fit=crop&auto=format",
|
|
"https://images.unsplash.com/photo-1571330735066-03aaa9429d89?w=120&h=120&fit=crop&auto=format",
|
|
"https://images.unsplash.com/photo-1619983081563-430f63602796?w=120&h=120&fit=crop&auto=format",
|
|
"https://images.unsplash.com/photo-1483412033650-1015ddeb83d1?w=120&h=120&fit=crop&auto=format",
|
|
] as const;
|
|
|
|
function TypewriterText({ text }: { text: string }) {
|
|
const [displayed, setDisplayed] = useState("");
|
|
const [done, setDone] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let index = 0;
|
|
const interval = setInterval(() => {
|
|
index += 1;
|
|
setDisplayed(text.slice(0, index));
|
|
if (index >= text.length) {
|
|
clearInterval(interval);
|
|
setDone(true);
|
|
}
|
|
}, 45);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [text]);
|
|
|
|
return (
|
|
<span className="text-xs font-medium text-gray-300">
|
|
{displayed}
|
|
{!done && <span className="ml-0.5 inline-block w-[2px] animate-pulse bg-red-400">|</span>}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function BenefitCard({
|
|
title,
|
|
desc,
|
|
Icon,
|
|
}: {
|
|
title: string;
|
|
desc: string;
|
|
Icon: typeof FilmStripIcon;
|
|
}) {
|
|
return (
|
|
<div className="group relative overflow-hidden rounded-xl border border-red-500/20 bg-surface p-6 shadow-[0_0_24px_rgba(239,68,68,0.08)] transition-all duration-300 hover:border-red-500/40 hover:shadow-[0_0_32px_rgba(239,68,68,0.18)]">
|
|
<Icon className="absolute right-5 top-5 h-8 w-8 text-gray-600 transition-colors duration-300 group-hover:text-red-500/50" />
|
|
<h3 className="pr-12 text-lg font-semibold text-white">{title}</h3>
|
|
<p className="mt-3 text-sm leading-relaxed text-gray-400">{desc}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CheckIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg
|
|
className={className}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2.5"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function MockupProgressRow({
|
|
initialWidth,
|
|
midWidth,
|
|
active,
|
|
phaseOneMs = 3000,
|
|
phaseTwoMs = 2000,
|
|
}: {
|
|
initialWidth: string;
|
|
midWidth: string;
|
|
active: boolean;
|
|
phaseOneMs?: number;
|
|
phaseTwoMs?: number;
|
|
}) {
|
|
const { phase, processed, transitionMs } = useMockupProgress(active, phaseOneMs, phaseTwoMs);
|
|
|
|
const width = phase === 0 ? initialWidth : phase === 1 ? midWidth : "100%";
|
|
|
|
return (
|
|
<div>
|
|
<p className="mb-1 text-[10px] text-gray-500">{processed ? "Processed" : "Processing..."}</p>
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-1 min-w-0 flex-1 rounded-full bg-gray-700">
|
|
<div
|
|
className="h-full rounded-full bg-white/80 ease-out"
|
|
style={{
|
|
width,
|
|
transition: phase >= 1 ? `width ${transitionMs}ms ease-out` : "none",
|
|
}}
|
|
/>
|
|
</div>
|
|
<CheckIcon
|
|
className={`h-3.5 w-3.5 shrink-0 text-accent transition-all duration-300 ${
|
|
processed ? "scale-100 opacity-100" : "scale-75 opacity-0"
|
|
}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DashboardMockup() {
|
|
const { ref, inView } = useInView();
|
|
const sidebarIcons = [NoteIcon, WaveIcon, GearsIcon] as const;
|
|
|
|
return (
|
|
<div ref={ref} className="rounded-xl border border-gray-700/50 bg-surface-dark p-4">
|
|
<div className="flex gap-4">
|
|
<div className="flex w-11 shrink-0 flex-col items-center gap-3 rounded-lg bg-surface py-3">
|
|
<div className="h-2 w-2 rounded-full bg-gray-500" />
|
|
{sidebarIcons.map((Icon, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex h-7 w-7 items-center justify-center rounded-md border border-gray-700/50 bg-surface-dark text-gray-500"
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="min-w-0 flex-1 space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<TypewriterText text="Multi-step configuration" />
|
|
<div className="h-4 w-8 rounded-full bg-red-500/80" />
|
|
</div>
|
|
<div className="h-7 rounded border border-gray-700 bg-surface px-2 text-xs leading-7 text-gray-500">
|
|
Title
|
|
</div>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
<span className="rounded bg-gray-700 px-2 py-0.5 text-[10px] text-gray-400">genre</span>
|
|
<span className="rounded bg-gray-700 px-2 py-0.5 text-[10px] text-gray-400">audio</span>
|
|
</div>
|
|
<div className="flex h-7 items-center justify-between rounded border border-gray-700 bg-surface px-2 text-xs text-gray-500">
|
|
Category <span className="text-gray-400">Music ▾</span>
|
|
</div>
|
|
<div className="space-y-2 pt-1">
|
|
<MockupProgressRow active={inView} initialWidth="25%" midWidth="45%" phaseOneMs={3000} phaseTwoMs={2000} />
|
|
<MockupProgressRow active={inView} initialWidth="10%" midWidth="55%" phaseOneMs={3000} phaseTwoMs={2000} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ProcessFlow() {
|
|
return (
|
|
<div className="relative mt-4 overflow-hidden rounded-xl border border-gray-700/50 bg-surface-dark p-5">
|
|
<svg
|
|
className="pointer-events-none absolute inset-0 h-full w-full"
|
|
viewBox="0 0 420 240"
|
|
preserveAspectRatio="none"
|
|
aria-hidden="true"
|
|
>
|
|
<defs>
|
|
<linearGradient id="flowGradH" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stopColor="rgb(239 68 68 / 0.15)" />
|
|
<stop offset="50%" stopColor="rgb(239 68 68 / 0.55)" />
|
|
<stop offset="100%" stopColor="rgb(239 68 68 / 0.15)" />
|
|
</linearGradient>
|
|
<linearGradient id="flowGradV" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stopColor="rgb(239 68 68 / 0.5)" />
|
|
<stop offset="100%" stopColor="rgb(239 68 68 / 0.15)" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<path
|
|
d="M 58 52 C 120 52, 140 58, 168 72"
|
|
fill="none"
|
|
stroke="url(#flowGradH)"
|
|
strokeWidth="1.5"
|
|
className="benefits-flow-path"
|
|
/>
|
|
<path
|
|
d="M 58 118 C 120 108, 140 88, 168 78"
|
|
fill="none"
|
|
stroke="url(#flowGradH)"
|
|
strokeWidth="1.5"
|
|
className="benefits-flow-path"
|
|
style={{ animationDelay: "0.3s" }}
|
|
/>
|
|
<path
|
|
d="M 198 75 C 250 75, 285 68, 318 68"
|
|
fill="none"
|
|
stroke="url(#flowGradH)"
|
|
strokeWidth="1.5"
|
|
className="benefits-flow-path"
|
|
style={{ animationDelay: "0.6s" }}
|
|
/>
|
|
</svg>
|
|
|
|
<div className="relative z-10">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex flex-col gap-4">
|
|
<FlowInput label="Batch Audio Files" icon="audio" />
|
|
<FlowInput label="Single Cover Image" icon="image" />
|
|
</div>
|
|
|
|
<div className="flex flex-1 flex-col items-center px-2 pt-6">
|
|
<div className="benefits-process-icon flex h-16 w-16 items-center justify-center rounded-xl border border-red-500/40 bg-surface shadow-[0_0_20px_rgba(239,68,68,0.25)]">
|
|
<Image
|
|
src="/database.png"
|
|
alt="Process"
|
|
width={40}
|
|
height={40}
|
|
className="h-10 w-10 object-contain brightness-0 invert opacity-90"
|
|
/>
|
|
</div>
|
|
<span className="mt-2 text-[10px] font-medium text-gray-400">Process</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center">
|
|
<div className="grid grid-cols-4 gap-1.5">
|
|
{STOCK_THUMBS.map((src) => (
|
|
<div
|
|
key={src}
|
|
className="relative h-11 w-11 overflow-hidden rounded border border-gray-700"
|
|
>
|
|
<Image
|
|
src={src}
|
|
alt=""
|
|
fill
|
|
sizes="44px"
|
|
className="scale-110 object-cover blur-[2px]"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/25" />
|
|
<span className="absolute inset-0 flex items-center justify-center text-[9px] text-white/80">
|
|
▶
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<svg
|
|
className="my-2 h-10 w-6 overflow-visible"
|
|
viewBox="0 0 6 40"
|
|
aria-hidden="true"
|
|
>
|
|
<line
|
|
x1="3"
|
|
y1="2"
|
|
x2="3"
|
|
y2="38"
|
|
stroke="rgb(239 68 68 / 0.55)"
|
|
strokeWidth="1.5"
|
|
className="benefits-flow-path"
|
|
style={{ animationDelay: "0.9s" }}
|
|
/>
|
|
</svg>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<YouTubeIcon className="h-9 w-9 text-red-500" />
|
|
<div>
|
|
<p className="text-xs font-bold tracking-wider text-white">YouTube</p>
|
|
<p className="text-[10px] font-semibold tracking-[0.15em] text-red-400">DIRECT UPLOAD</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FlowInput({ label, icon }: { label: string; icon: "audio" | "image" }) {
|
|
return (
|
|
<div className="flex flex-col items-center gap-1.5">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg border border-gray-700 bg-surface">
|
|
{icon === "audio" ? (
|
|
<NoteIcon className="h-5 w-5 text-gray-500" />
|
|
) : (
|
|
<svg className="h-5 w-5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<circle cx="8.5" cy="8.5" r="1.5" />
|
|
<path d="M21 15l-5-5L5 21" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
<span className="max-w-[72px] text-center text-[9px] leading-tight text-gray-500">{label}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BenefitsVisual() {
|
|
return (
|
|
<div className="rounded-2xl border border-gray-700/50 bg-surface p-5 shadow-2xl shadow-black/30">
|
|
<DashboardMockup />
|
|
<ProcessFlow />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BenefitsScrollTitle({ sectionRef }: { sectionRef: React.RefObject<HTMLElement | null> }) {
|
|
return <SectionScrollTitle sectionRef={sectionRef} title="Benefits" />;
|
|
}
|
|
|
|
export function BenefitsSection() {
|
|
const sectionRef = useRef<HTMLElement>(null);
|
|
|
|
return (
|
|
<section
|
|
ref={sectionRef}
|
|
id="benefits"
|
|
className="relative scroll-mt-24 overflow-x-visible overflow-y-hidden px-6 py-24"
|
|
>
|
|
<BenefitsScrollTitle sectionRef={sectionRef} />
|
|
<div className="relative z-10 mx-auto max-w-7xl">
|
|
<ScrollReveal>
|
|
<h2 className="mb-12 text-center text-3xl font-bold text-white">Benefits</h2>
|
|
</ScrollReveal>
|
|
|
|
<div className="grid items-start gap-10 lg:grid-cols-[1fr_1.15fr] lg:gap-12">
|
|
<div className="flex flex-col gap-5">
|
|
{BENEFITS.map((benefit, index) => (
|
|
<ScrollReveal key={benefit.title} delay={index * 100} direction="left">
|
|
<BenefitCard title={benefit.title} desc={benefit.desc} Icon={benefit.Icon} />
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
|
|
<ScrollReveal delay={200} direction="right">
|
|
<BenefitsVisual />
|
|
</ScrollReveal>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|