ready site

app/components/DocumentLayout.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+
+interface DocumentLayoutProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+const DocumentLayout = ({ title, children }: DocumentLayoutProps) => {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+      },
+    },
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-20">
+      <div className="container mx-auto px-4">
+        <motion.div
+          initial="hidden"
+          animate="visible"
+          variants={containerVariants}
+          className="max-w-4xl mx-auto"
+        >
+          {/* Навигация */}
+          <motion.div variants={itemVariants} className="mb-8">
+            <Link
+              href="/"
+              className="inline-flex items-center text-blue-700 hover:text-blue-800"
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              <span>Вернуться на главную</span>
+            </Link>
+          </motion.div>
+
+          {/* Заголовок */}
+          <motion.div
+            variants={itemVariants}
+            className="bg-white rounded-xl p-8 shadow-lg mb-8"
+          >
+            <h1 className="text-3xl md:text-4xl font-bold text-gray-900">
+              {title}
+            </h1>
+          </motion.div>
+
+          {/* Контент */}
+          <motion.div
+            variants={itemVariants}
+            className="bg-white rounded-xl p-8 shadow-lg prose prose-blue max-w-none"
+          >
+            {children}
+          </motion.div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default DocumentLayout;