Songs2YT
235 lines
8.2 KiB
TypeScript
235 lines
8.2 KiB
TypeScript
"use client";
|
|
|
|
import { ScrollReveal } from "@/components/ScrollReveal";
|
|
import { useInView } from "@/hooks/useInView";
|
|
import { useMockupProgress } from "@/hooks/useMockupProgress";
|
|
|
|
function LayersIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z" />
|
|
<path d="M2 17l10 5 10-5" />
|
|
<path d="M2 12l10 5 10-5" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function SlidersIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3" />
|
|
<circle cx="4" cy="14" r="2" />
|
|
<circle cx="12" cy="12" r="2" />
|
|
<circle cx="20" cy="16" r="2" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function CloudUploadIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<path d="M12 16V8M12 8l-3 3M12 8l3 3" />
|
|
<path d="M7 18a4 4 0 0 1 0-8 5 5 0 0 1 9.9-1A4 4 0 1 1 17 18H7z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function ImageIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} 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>
|
|
);
|
|
}
|
|
|
|
function AudioIcon({ 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>
|
|
);
|
|
}
|
|
|
|
const STEPS = [
|
|
{
|
|
number: 1,
|
|
title: "Single/Batch creation",
|
|
desc: "One image, many audios, each becomes a separate video.",
|
|
Icon: LayersIcon,
|
|
},
|
|
{
|
|
number: 2,
|
|
title: "Per-video settings",
|
|
desc: "Title, tags, privacy, and category for every upload.",
|
|
Icon: SlidersIcon,
|
|
},
|
|
{
|
|
number: 3,
|
|
title: "Direct upload",
|
|
desc: "Connect YouTube once and publish automatically.",
|
|
Icon: CloudUploadIcon,
|
|
},
|
|
] as const;
|
|
|
|
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 AppMockup() {
|
|
const phaseOneMs = 3000;
|
|
const phaseTwoMs = 2000;
|
|
const initialWidth = "20%";
|
|
const midWidth = "45%";
|
|
const { ref, inView } = useInView();
|
|
const { phase, processed, transitionMs } = useMockupProgress(inView, phaseOneMs, phaseTwoMs);
|
|
|
|
const width = phase === 0 ? initialWidth : phase === 1 ? midWidth : "100%";
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="mt-10 overflow-hidden rounded-2xl border border-gray-700/60 bg-surface-dark shadow-2xl shadow-black/40"
|
|
>
|
|
<div className="flex items-center gap-2 border-b border-gray-700/50 px-4 py-3">
|
|
<span className="h-2.5 w-2.5 rounded-full bg-gray-600" />
|
|
<span className="h-2.5 w-2.5 rounded-full bg-gray-600" />
|
|
<span className="h-2.5 w-2.5 rounded-full bg-gray-600" />
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
<div className="rounded-xl border border-gray-700/50 bg-surface p-6">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="mockup-upload-box mockup-upload-box-image flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-600 bg-surface-dark px-4 py-8">
|
|
<ImageIcon className="mockup-icon-image mb-3 h-8 w-8 text-gray-500" />
|
|
<span className="text-xs font-semibold tracking-widest text-gray-500">IMAGE</span>
|
|
</div>
|
|
<div className="mockup-upload-box mockup-upload-box-audio flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-600 bg-surface-dark px-4 py-8">
|
|
<AudioIcon className="mockup-icon-audio mb-3 h-8 w-8 text-gray-500" />
|
|
<span className="text-xs font-semibold tracking-widest text-gray-500">AUDIO</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="mt-6 text-sm text-gray-400">
|
|
{processed ? (
|
|
"Processed"
|
|
) : (
|
|
<>
|
|
Processing
|
|
<span className="mockup-dot-1">.</span>
|
|
<span className="mockup-dot-2">.</span>
|
|
<span className="mockup-dot-3">.</span>
|
|
</>
|
|
)}
|
|
</p>
|
|
<div className="mt-2 flex items-center gap-2">
|
|
<div className="relative h-1 min-w-0 flex-1 overflow-hidden rounded-full bg-gray-700">
|
|
<div
|
|
className="relative h-full rounded-full bg-white/90 ease-out"
|
|
style={{
|
|
width,
|
|
transition: phase >= 1 ? `width ${transitionMs}ms ease-out` : "none",
|
|
}}
|
|
>
|
|
{!processed && (
|
|
<span className="mockup-progress-shimmer absolute inset-y-0 w-1/2 rounded-full bg-gradient-to-r from-transparent via-white/50 to-transparent" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<CheckIcon
|
|
className={`h-4 w-4 shrink-0 text-accent transition-all duration-300 ${
|
|
processed ? "scale-100 opacity-100" : "scale-75 opacity-0"
|
|
}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StepCard({
|
|
number,
|
|
title,
|
|
desc,
|
|
Icon,
|
|
}: {
|
|
number: number;
|
|
title: string;
|
|
desc: string;
|
|
Icon: typeof LayersIcon;
|
|
}) {
|
|
return (
|
|
<div className="group relative overflow-hidden rounded-2xl border border-gray-700/50 bg-surface transition-all duration-300 hover:border-gray-500 hover:bg-surface-light hover:shadow-xl hover:shadow-black/30">
|
|
<span
|
|
className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 select-none text-[7.5rem] font-bold leading-none text-gray-600/20 transition-all duration-500 ease-out group-hover:left-1/2 group-hover:-translate-x-1/2 group-hover:scale-[1.18] group-hover:text-red-500/25 sm:text-[8.5rem]"
|
|
aria-hidden="true"
|
|
>
|
|
{number}
|
|
</span>
|
|
|
|
<div className="relative flex items-center gap-6 px-8 py-9 pl-24 sm:pl-28">
|
|
<div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-gray-600/50 bg-surface-dark text-gray-400 transition-all duration-300 group-hover:border-red-500/30 group-hover:text-red-400">
|
|
<Icon className="h-7 w-7" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-white transition-colors duration-300 group-hover:text-red-400 sm:text-xl">
|
|
{title}
|
|
</h3>
|
|
<p className="mt-2 text-base leading-relaxed text-gray-400 transition-colors duration-300 group-hover:text-gray-300">
|
|
{desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function StepsSection() {
|
|
return (
|
|
<section className="mx-auto max-w-6xl scroll-mt-20 px-6 pb-24 pt-32">
|
|
<div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
|
|
<ScrollReveal direction="left">
|
|
<div>
|
|
<h2 className="text-2xl font-bold leading-snug text-white sm:text-3xl">
|
|
Upload your content in 3 simple steps:
|
|
</h2>
|
|
<p className="mt-6 text-base leading-relaxed text-gray-400">
|
|
From a single track to a full batch, Songs2YT walks you through creating and
|
|
publishing videos to YouTube without touching a video editor.
|
|
</p>
|
|
<AppMockup />
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
<div className="flex flex-col gap-7">
|
|
{STEPS.map((step, index) => (
|
|
<ScrollReveal key={step.number} delay={index * 120} direction="right">
|
|
<StepCard
|
|
number={step.number}
|
|
title={step.title}
|
|
desc={step.desc}
|
|
Icon={step.Icon}
|
|
/>
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|