base with cms integrated
This commit is contained in:
Трапезников Кирилл Иванович
@@ -0,0 +1,177 @@
|
||||
"use client";
|
||||
|
||||
// Добавили импорт Variants
|
||||
import { motion, Variants } from "framer-motion";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Monitor,
|
||||
Smartphone,
|
||||
Terminal,
|
||||
Apple,
|
||||
Download,
|
||||
ExternalLink,
|
||||
Bell,
|
||||
} from "lucide-react";
|
||||
import { Dictionary } from "@/lib/IDict";
|
||||
|
||||
export function DownloadClient({ dict }: { dict: Dictionary["download"] }) {
|
||||
const platforms = [
|
||||
{
|
||||
id: "windows",
|
||||
name: "Windows",
|
||||
version: dict.platforms.windows,
|
||||
icon: <Monitor className="w-8 h-8" />,
|
||||
status: "active",
|
||||
color: "text-primary",
|
||||
shadow: "shadow-[0_0_20px_rgba(0,240,255,0.2)]",
|
||||
borderHover: "hover:border-primary/50",
|
||||
},
|
||||
{
|
||||
id: "android",
|
||||
name: "Android",
|
||||
version: dict.platforms.android,
|
||||
icon: <Smartphone className="w-8 h-8" />,
|
||||
status: "active",
|
||||
color: "text-secondary",
|
||||
shadow: "shadow-[0_0_20px_rgba(112,0,255,0.2)]",
|
||||
borderHover: "hover:border-secondary/50",
|
||||
},
|
||||
{
|
||||
id: "linux",
|
||||
name: "Linux",
|
||||
version: dict.platforms.linux,
|
||||
icon: <Terminal className="w-8 h-8" />,
|
||||
status: "active",
|
||||
color: "text-primary",
|
||||
shadow: "shadow-[0_0_20px_rgba(0,240,255,0.2)]",
|
||||
borderHover: "hover:border-primary/50",
|
||||
},
|
||||
{
|
||||
id: "macos",
|
||||
name: "macOS",
|
||||
version: dict.platforms.macos,
|
||||
icon: <Apple className="w-8 h-8" />,
|
||||
status: "dev",
|
||||
color: "text-muted-foreground",
|
||||
shadow: "shadow-none",
|
||||
borderHover: "hover:border-border",
|
||||
},
|
||||
{
|
||||
id: "ios",
|
||||
name: "iOS",
|
||||
version: dict.platforms.ios,
|
||||
icon: <Apple className="w-8 h-8" />,
|
||||
status: "dev",
|
||||
color: "text-muted-foreground",
|
||||
shadow: "shadow-none",
|
||||
borderHover: "hover:border-border",
|
||||
},
|
||||
];
|
||||
|
||||
// Явно указываем тип Variants
|
||||
const containerVariants: Variants = {
|
||||
hidden: { opacity: 0 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.1 },
|
||||
},
|
||||
};
|
||||
|
||||
// Явно указываем тип Variants
|
||||
const itemVariants: Variants = {
|
||||
hidden: { opacity: 0, y: 40 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { type: "spring", stiffness: 300, damping: 24 },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pt-32 pb-24 px-4 container mx-auto max-w-5xl relative">
|
||||
{/* Декоративное свечение */}
|
||||
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[100vw] md:w-[600px] h-[400px] bg-primary/5 blur-[120px] rounded-full pointer-events-none -z-10" />
|
||||
|
||||
<div className="text-center mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold tracking-tight mb-4 text-foreground">
|
||||
{dict.title}
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
|
||||
{dict.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
|
||||
>
|
||||
{platforms.map((platform) => (
|
||||
<motion.div
|
||||
key={platform.id}
|
||||
variants={itemVariants}
|
||||
className={`bg-card/40 backdrop-blur-xl border border-border/50 rounded-[2rem] p-8 flex flex-col transition-all duration-500 relative overflow-hidden group ${platform.borderHover}`}
|
||||
>
|
||||
{/* Статус бейдж */}
|
||||
<div className="absolute top-6 right-6">
|
||||
{platform.status === "active" ? (
|
||||
<div className="px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider">
|
||||
{dict.badges.active}
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-3 py-1 rounded-full bg-muted border border-border text-muted-foreground text-xs font-bold uppercase tracking-wider">
|
||||
{dict.badges.dev}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Иконка */}
|
||||
<div
|
||||
className={`mb-6 p-4 rounded-2xl bg-background/50 inline-flex border border-border/50 ${platform.color} ${platform.shadow} transition-all duration-300`}
|
||||
>
|
||||
{platform.icon}
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold text-foreground mb-1">
|
||||
{platform.name}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-8">
|
||||
{platform.version}
|
||||
</p>
|
||||
|
||||
{/* Кнопки действий */}
|
||||
<div className="mt-auto flex flex-col gap-3">
|
||||
{platform.status === "active" ? (
|
||||
<>
|
||||
<Button className="w-full rounded-xl font-bold gap-2">
|
||||
<Download className="w-4 h-4" />
|
||||
{dict.buttons.direct}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full rounded-xl gap-2 border-border/50 bg-background/50 text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
{platform.id === "android"
|
||||
? dict.buttons.store
|
||||
: dict.buttons.github}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
variant="secondary"
|
||||
disabled
|
||||
className="w-full rounded-xl gap-2 opacity-50 cursor-not-allowed"
|
||||
>
|
||||
<Bell className="w-4 h-4" />
|
||||
{dict.buttons.notify}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { getDictionary } from "@/lib/dictionaries";
|
||||
import { DownloadClient } from "./download-client";
|
||||
|
||||
export default async function DownloadPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ lang: string }>;
|
||||
}) {
|
||||
const { lang } = await params;
|
||||
const dict = await getDictionary(lang);
|
||||
|
||||
return <DownloadClient dict={dict.download} />;
|
||||
}
|
||||
Reference in New Issue
Block a user