453 lines
17 KiB
TypeScript
453 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { motion } from "framer-motion";
|
|
import {
|
|
ArrowRight,
|
|
Video,
|
|
Image,
|
|
Music,
|
|
Sparkles,
|
|
Zap,
|
|
Shield,
|
|
Users,
|
|
Check,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { useTranslation, getServerTranslations } from "@/lib/i18n";
|
|
import { useState, useEffect } from "react";
|
|
|
|
function useFeatures() {
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => setMounted(true), []);
|
|
const { t } = useTranslation();
|
|
|
|
const getT = (key: string) => {
|
|
if (!mounted) return getServerTranslations("en").t(key);
|
|
return t(key);
|
|
};
|
|
|
|
return [
|
|
{
|
|
icon: Video,
|
|
title: getT("home.tools.videoToFrames.title"),
|
|
description: getT("home.tools.videoToFrames.description"),
|
|
href: "/tools/video-frames",
|
|
},
|
|
{
|
|
icon: Image,
|
|
title: getT("home.tools.imageCompression.title"),
|
|
description: getT("home.tools.imageCompression.description"),
|
|
href: "/tools/image-compress",
|
|
},
|
|
{
|
|
icon: Music,
|
|
title: getT("home.tools.audioCompression.title"),
|
|
description: getT("home.tools.audioCompression.description"),
|
|
href: "/tools/audio-compress",
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
title: getT("home.tools.aiTools.title"),
|
|
description: getT("home.tools.aiTools.description"),
|
|
href: "/tools/ai-tools",
|
|
},
|
|
];
|
|
}
|
|
|
|
function useBenefits() {
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => setMounted(true), []);
|
|
const { t } = useTranslation();
|
|
|
|
const getT = (key: string) => {
|
|
if (!mounted) return getServerTranslations("en").t(key);
|
|
return t(key);
|
|
};
|
|
|
|
return [
|
|
{
|
|
icon: Zap,
|
|
title: getT("home.benefits.lightningFast.title"),
|
|
description: getT("home.benefits.lightningFast.description"),
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: getT("home.benefits.secure.title"),
|
|
description: getT("home.benefits.secure.description"),
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: getT("home.benefits.forDevelopers.title"),
|
|
description: getT("home.benefits.forDevelopers.description"),
|
|
},
|
|
];
|
|
}
|
|
|
|
function usePricingPlans() {
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => setMounted(true), []);
|
|
const { t } = useTranslation();
|
|
|
|
const getT = (key: string) => {
|
|
if (!mounted) return getServerTranslations("en").t(key);
|
|
return t(key);
|
|
};
|
|
|
|
return [
|
|
{
|
|
name: getT("home.pricing.plans.free.name"),
|
|
price: getT("home.pricing.plans.free.price"),
|
|
description: getT("home.pricing.plans.free.description"),
|
|
features: (mounted ? t("home.pricing.plans.free.features") : getServerTranslations("en").t("home.pricing.plans.free.features")) as unknown as string[],
|
|
cta: getT("home.pricing.plans.free.cta"),
|
|
href: "/register",
|
|
},
|
|
{
|
|
name: getT("home.pricing.plans.pro.name"),
|
|
price: getT("home.pricing.plans.pro.price"),
|
|
period: getT("home.pricing.plans.pro.period"),
|
|
description: getT("home.pricing.plans.pro.description"),
|
|
features: (mounted ? t("home.pricing.plans.pro.features") : getServerTranslations("en").t("home.pricing.plans.pro.features")) as unknown as string[],
|
|
cta: getT("home.pricing.plans.pro.cta"),
|
|
href: "/pricing",
|
|
popular: getT("home.pricing.plans.pro.popular"),
|
|
},
|
|
{
|
|
name: getT("home.pricing.plans.enterprise.name"),
|
|
price: getT("home.pricing.plans.enterprise.price"),
|
|
description: getT("home.pricing.plans.enterprise.description"),
|
|
features: (mounted ? t("home.pricing.plans.enterprise.features") : getServerTranslations("en").t("home.pricing.plans.enterprise.features")) as unknown as string[],
|
|
cta: getT("home.pricing.plans.enterprise.cta"),
|
|
href: "/contact",
|
|
},
|
|
];
|
|
}
|
|
|
|
function HeroSection() {
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => setMounted(true), []);
|
|
const { t } = useTranslation();
|
|
|
|
const getT = (key: string, params?: any) => {
|
|
if (!mounted) return getServerTranslations("en").t(key, params);
|
|
return t(key, params);
|
|
};
|
|
|
|
return (
|
|
<section className="relative overflow-hidden">
|
|
{/* Background gradient */}
|
|
<div className="absolute inset-0 -z-10">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-background to-background" />
|
|
<div className="absolute inset-0 bg-[url(/grid.svg)] bg-cover opacity-10" />
|
|
</div>
|
|
|
|
<div className="container py-24 md:py-32 xl:py-40 2xl:py-48">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="mx-auto max-w-5xl text-center 2xl:max-w-6xl 3xl:max-w-7xl"
|
|
>
|
|
<Badge className="mb-4" variant="secondary">
|
|
<Sparkles className="mr-1 h-3 w-3" />
|
|
{getT("home.hero.badge")}
|
|
</Badge>
|
|
<h1 className="mb-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl">
|
|
{getT("home.hero.title")}
|
|
</h1>
|
|
<p className="mb-8 text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
|
|
{getT("home.hero.description")}
|
|
</p>
|
|
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row xl:gap-6">
|
|
<Button size="lg" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
|
|
<Link href="/tools">
|
|
{getT("home.hero.startBuilding")} <ArrowRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
<Button size="lg" variant="outline" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
|
|
<Link href="/pricing">{getT("common.viewPricing")}</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
className="mt-16 grid grid-cols-3 gap-8 md:gap-16 xl:gap-24 2xl:gap-32"
|
|
>
|
|
<div>
|
|
<div className="text-3xl font-bold md:text-4xl xl:text-5xl 2xl:text-6xl">10K+</div>
|
|
<div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">{getT("home.hero.stats.developers")}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-3xl font-bold md:text-4xl xl:text-5xl 2xl:text-6xl">1M+</div>
|
|
<div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">{getT("home.hero.stats.filesProcessed")}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-3xl font-bold md:text-4xl xl:text-5xl 2xl:text-6xl">99.9%</div>
|
|
<div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">{getT("home.hero.stats.uptime")}</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function FeaturesSection() {
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => setMounted(true), []);
|
|
const { t } = useTranslation();
|
|
const features = useFeatures();
|
|
|
|
const getT = (key: string) => {
|
|
if (!mounted) return getServerTranslations("en").t(key);
|
|
return t(key);
|
|
};
|
|
|
|
return (
|
|
<section className="border-t border-border/40 bg-background/50 py-24 xl:py-32 2xl:py-40">
|
|
<div className="container">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5 }}
|
|
className="mb-16 text-center xl:mb-20 2xl:mb-24"
|
|
>
|
|
<h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
|
|
{getT("home.featuresSection.title")}
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
|
|
{getT("home.featuresSection.description")}
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 xl:gap-8 2xl:gap-10">
|
|
{features.map((feature, index) => (
|
|
<motion.div
|
|
key={feature.title}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
>
|
|
<Link href={feature.href}>
|
|
<Card className="h-full transition-all hover:border-primary/50 hover:shadow-lg hover:shadow-primary/5 xl:p-8 2xl:p-10">
|
|
<CardHeader>
|
|
<div className="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 xl:h-14 xl:w-14 2xl:h-16 2xl:w-16">
|
|
<feature.icon className="h-6 w-6 text-primary xl:h-7 xl:w-7 2xl:h-8 2xl:w-8" />
|
|
</div>
|
|
<CardTitle className="text-xl xl:text-2xl 2xl:text-3xl">{feature.title}</CardTitle>
|
|
<CardDescription className="text-base xl:text-lg 2xl:text-xl">{feature.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button variant="ghost" size="sm" className="w-full xl:text-base 2xl:text-lg">
|
|
{getT("common.tryNow")} <ArrowRight className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function BenefitsSection() {
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => setMounted(true), []);
|
|
const { t } = useTranslation();
|
|
const benefits = useBenefits();
|
|
|
|
const getT = (key: string) => {
|
|
if (!mounted) return getServerTranslations("en").t(key);
|
|
return t(key);
|
|
};
|
|
|
|
return (
|
|
<section className="py-24 xl:py-32 2xl:py-40">
|
|
<div className="container">
|
|
<div className="grid gap-12 lg:grid-cols-2 xl:gap-16 2xl:gap-20">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
|
|
{getT("home.benefits.title")}
|
|
</h2>
|
|
<p className="mb-8 text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
|
|
{getT("home.benefits.description")}
|
|
</p>
|
|
<Button size="lg" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
|
|
<Link href="/about">{getT("common.learnMore")}</Link>
|
|
</Button>
|
|
</motion.div>
|
|
|
|
<div className="space-y-6 xl:space-y-8">
|
|
{benefits.map((benefit, index) => (
|
|
<motion.div
|
|
key={benefit.title}
|
|
initial={{ opacity: 0, x: 20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
>
|
|
<Card className="xl:p-8 2xl:p-10">
|
|
<CardContent className="flex gap-4 p-6 xl:gap-6 2xl:gap-8">
|
|
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10 xl:h-14 xl:w-14 2xl:h-16 2xl:w-16">
|
|
<benefit.icon className="h-6 w-6 text-primary xl:h-7 xl:w-7 2xl:h-8 2xl:w-8" />
|
|
</div>
|
|
<div>
|
|
<h3 className="mb-2 text-lg font-semibold xl:text-xl 2xl:text-2xl">{benefit.title}</h3>
|
|
<p className="text-muted-foreground text-sm md:text-base xl:text-lg 2xl:text-xl">{benefit.description}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function PricingSection() {
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => setMounted(true), []);
|
|
const { t } = useTranslation();
|
|
const pricingPlans = usePricingPlans();
|
|
|
|
const getT = (key: string) => {
|
|
if (!mounted) return getServerTranslations("en").t(key);
|
|
return t(key);
|
|
};
|
|
|
|
return (
|
|
<section className="border-t border-border/40 bg-background/50 py-24 xl:py-32 2xl:py-40">
|
|
<div className="container">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5 }}
|
|
className="mb-16 text-center xl:mb-20 2xl:mb-24"
|
|
>
|
|
<h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
|
|
{getT("home.pricing.title")}
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
|
|
{getT("home.pricing.description")}
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid gap-8 md:grid-cols-3 xl:gap-10 2xl:gap-12">
|
|
{pricingPlans.map((plan, index) => (
|
|
<motion.div
|
|
key={plan.name}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
>
|
|
<Card className={`relative h-full ${plan.popular ? "border-primary" : ""} xl:p-8 2xl:p-10`}>
|
|
{plan.popular && (
|
|
<Badge className="absolute -top-3 left-1/2 -translate-x-1/2 xl:text-base 2xl:text-lg">
|
|
{plan.popular}
|
|
</Badge>
|
|
)}
|
|
<CardHeader>
|
|
<CardTitle className="text-xl xl:text-2xl 2xl:text-3xl">{plan.name}</CardTitle>
|
|
<CardDescription className="text-base xl:text-lg 2xl:text-xl">{plan.description}</CardDescription>
|
|
<div className="mt-4">
|
|
<span className="text-4xl font-bold xl:text-5xl 2xl:text-6xl">{plan.price}</span>
|
|
{plan.period && (
|
|
<span className="text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">{plan.period}</span>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<ul className="space-y-3">
|
|
{plan.features.map((feature) => (
|
|
<li key={feature} className="flex items-start gap-2">
|
|
<Check className="h-5 w-5 shrink-0 text-primary xl:h-6 xl:w-6 2xl:h-7 2xl:w-7" />
|
|
<span className="text-sm md:text-base xl:text-lg 2xl:text-xl">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Button className="w-full xl:text-lg xl:py-6 2xl:text-xl 2xl:py-7" variant={plan.popular ? "default" : "outline"} asChild>
|
|
<Link href={plan.href}>{plan.cta}</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function CTASection() {
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => setMounted(true), []);
|
|
const { t } = useTranslation();
|
|
|
|
const getT = (key: string) => {
|
|
if (!mounted) return getServerTranslations("en").t(key);
|
|
return t(key);
|
|
};
|
|
|
|
return (
|
|
<section className="py-24 xl:py-32 2xl:py-40">
|
|
<div className="container">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5 }}
|
|
className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-primary/20 via-primary/10 to-background p-12 text-center md:p-20 xl:p-24 2xl:p-32"
|
|
>
|
|
<div className="relative z-10">
|
|
<h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
|
|
{getT("home.cta.title")}
|
|
</h2>
|
|
<p className="mb-8 text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
|
|
{getT("home.cta.description")}
|
|
</p>
|
|
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row xl:gap-6">
|
|
<Button size="lg" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
|
|
<Link href="/register">{getT("home.cta.getStarted")}</Link>
|
|
</Button>
|
|
<Button size="lg" variant="outline" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
|
|
<Link href="/contact">{getT("common.contactSales")}</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<>
|
|
<HeroSection />
|
|
<FeaturesSection />
|
|
<BenefitsSection />
|
|
<PricingSection />
|
|
<CTASection />
|
|
</>
|
|
);
|
|
}
|