Update page.tsx

app/[page]/page.tsx

@@ -1,45 +1,109 @@
-import type { Metadata } from 'next';
+import React from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
 
-import Prose from 'components/prose';
+const services = [
-import { getPage } from 'lib/shopify';
+  {
-import { notFound } from 'next/navigation';
+    title: "Производство корпоративной одежды",
+    description: "Мы создаем качественную одежду для бизнеса и спорта, подчеркивая индивидуальность вашей компании."
+  },
+  {
+    title: "Индивидуальный пошив на заказ",
+    description: "От 50 единиц – эксклюзивные заказы с учетом всех пожеланий по материалам и дизайну."
+  },
+  {
+    title: "Гарантия качества и долговечности",
+    description: "Мы используем только проверенные ткани и технологии, чтобы ваша одежда служила долго."
+  },
+  {
+    title: "Быстрые сроки производства",
+    description: "Оптимизированные процессы позволяют нам выполнять заказы в кратчайшие сроки."
+  }
+];
 
-export async function generateMetadata(props: {
+const faqs = [
-  params: Promise<{ page: string }>;
+  { question: "Как сделать заказ?", answer: "Свяжитесь с нами через форму на сайте, и мы поможем вам оформить заказ." },
-}): Promise<Metadata> {
+  { question: "Какие материалы вы используете?", answer: "Мы используем только качественные ткани, проверенные временем и практикой." },
-  const params = await props.params;
+  { question: "Можно ли заказать небольшой тираж?", answer: "Минимальный заказ от 20 единиц, индивидуальный пошив от 50 единиц." },
-  const page = await getPage(params.page);
+  { question: "Как долго длится производство?", answer: "Сроки зависят от объема заказа, в среднем от 10 до 20 рабочих дней." }
+];
 
-  if (!page) return notFound();
+const Hero = () => (
+  <div className="text-center py-16 bg-gray-100">
+    <h1 className="text-5xl font-bold">Производство одежды для бизнеса и спорта</h1>
+    <p className="mt-4 text-gray-600 text-lg">Качественная и долговечная одежда для успешных компаний.</p>
+    <Button className="mt-6 px-8 py-3 bg-blue-600 text-white text-lg rounded-lg">Оставить заявку</Button>
+  </div>
+);
 
-  return {
+const Portfolio = () => (
-    title: page.seo?.title || page.title,
+  <div className="p-6">
-    description: page.seo?.description || page.bodySummary,
+    <h2 className="text-3xl font-bold text-center mb-6">Наши работы</h2>
-    openGraph: {
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-      publishedTime: page.createdAt,
+      {["/work1.jpg", "/work2.jpg", "/work3.jpg"].map((src, index) => (
-      modifiedTime: page.updatedAt,
+        <motion.div key={index} whileHover={{ scale: 1.05 }} transition={{ duration: 0.3 }}>
-      type: 'article'
+          <Image src={src} alt={`Пример работы ${index + 1}`} width={300} height={300} className="rounded-lg shadow-md" />
-    }
+        </motion.div>
-  };
+      ))}
-}
+    </div>
+  </div>
+);
 
-export default async function Page(props: { params: Promise<{ page: string }> }) {
+const FAQ = () => (
-  const params = await props.params;
+  <div className="p-6">
-  const page = await getPage(params.page);
+    <h2 className="text-3xl font-bold text-center mb-6">Частые вопросы</h2>
+    <div className="space-y-4">
+      {faqs?.length > 0 ? (
+        faqs.map((faq, index) => (
+          <div key={index} className="p-4 bg-gray-100 rounded-lg shadow">
+            <h3 className="text-xl font-semibold">{faq.question}</h3>
+            <p className="text-gray-600 mt-2">{faq.answer}</p>
+          </div>
+        ))
+      ) : (
+        <p className="text-gray-600">Вопросы не найдены.</p>
+      )}
+    </div>
+  </div>
+);
 
-  if (!page) return notFound();
+const Contact = () => (
+  <div className="p-6 text-center bg-gray-200 rounded-lg mt-8">
+    <h2 className="text-3xl font-bold">Свяжитесь с нами</h2>
+    <p className="text-gray-600 text-lg">Оставьте заявку, и мы предложим вам лучшее решение.</p>
+    <Button className="mt-4 px-6 py-3 bg-blue-600 text-white text-lg rounded-lg">Оставить заявку</Button>
+  </div>
+);
 
-  return (
+const Services = () => (
-    <>
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
-      <h1 className="mb-8 text-5xl font-bold">{page.title}</h1>
+    {services?.length > 0 ? (
-      <Prose className="mb-8" html={page.body} />
+      services.map((service, index) => (
-      <p className="text-sm italic">
+        <motion.div key={index} whileHover={{ scale: 1.05 }} transition={{ duration: 0.3 }}>
-        {`This document was last updated on ${new Intl.DateTimeFormat(undefined, {
+          <Card className="p-6 shadow-lg rounded-2xl">
-          year: 'numeric',
+            <CardContent>
-          month: 'long',
+              <h3 className="text-2xl font-bold mb-2">{service.title}</h3>
-          day: 'numeric'
+              <p className="text-gray-600 text-lg">{service.description}</p>
-        }).format(new Date(page.updatedAt))}.`}
+            </CardContent>
-      </p>
+          </Card>
-    </>
+        </motion.div>
-  );
+      ))
-}
+    ) : (
+      <p className="text-gray-600">Список услуг временно недоступен.</p>
+    )}
+  </div>
+);
+
+const HomePage = () => (
+  <div>
+    <Hero />
+    <Services />
+    <Portfolio />
+    <FAQ />
+    <Contact />
+  </div>
+);
+
+export default HomePage;