THE LAST ONE BEFORE THE RELEASE

frontend/style/components/checkout-form.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { useCart } from "@/contexts/cart-context"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { CheckCircle2 } from "lucide-react"
+
+// Mock function for YooMoney payment
+const processYooMoneyPayment = async (amount: number): Promise<boolean> => {
+  // Simulate API call
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+  // Simulate successful payment (in real app, this would be the actual API response)
+  return true
+}
+
+export function CheckoutForm() {
+  const [step, setStep] = useState(1)
+  const [address, setAddress] = useState("")
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [isOrderPlaced, setIsOrderPlaced] = useState(false)
+
+  const { items, clearCart } = useCart()
+  const router = useRouter()
+
+  // Define the getTotalPrice function inside the component
+  const getTotalPrice = () => {
+    return items.reduce((total, item) => total + item.price * item.quantity, 0)
+  }
+
+  const handleAddressSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (address.trim()) {
+      setStep(2)
+    }
+  }
+
+  const handlePayment = async () => {
+    setIsProcessing(true)
+    const totalPrice = getTotalPrice() // Calculate total price here
+    const paymentSuccess = await processYooMoneyPayment(totalPrice)
+
+    if (paymentSuccess) {
+      setIsOrderPlaced(true)
+      clearCart()
+    } else {
+      alert("Оплата не прошла. Пожалуйста, попробуйте еще раз.")
+    }
+    setIsProcessing(false)
+  }
+
+  if (isOrderPlaced) {
+    return (
+      <div className="text-center py-10">
+        <CheckCircle2 className="w-16 h-16 text-green-500 mx-auto mb-4" />
+        <h2 className="text-2xl font-bold mb-2">Заказ успешно оформлен!</h2>
+        <p className="mb-4">Спасибо за покупку. Ваш заказ будет доставлен по указанному адресу.</p>
+        <Button onClick={() => router.push("/")}>Вернуться на главную</Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-md mx-auto">
+      {step === 1 && (
+        <form onSubmit={handleAddressSubmit} className="space-y-4">
+          <h2 className="text-xl font-bold mb-4">Шаг 1: Адрес доставки</h2>
+          <div>
+            <Label htmlFor="address">Адрес</Label>
+            <Textarea
+              id="address"
+              value={address}
+              onChange={(e) => setAddress(e.target.value)}
+              placeholder="Введите полный адрес доставки"
+              required
+            />
+          </div>
+          <Button type="submit">Продолжить</Button>
+        </form>
+      )}
+
+      {step === 2 && (
+        <div className="space-y-4">
+          <h2 className="text-xl font-bold mb-4">Шаг 2: Оплата</h2>
+          <div className="bg-gray-100 p-4 rounded-md">
+            <h3 className="font-semibold mb-2">Итого к оплате:</h3>
+            <p className="text-2xl font-bold">{getTotalPrice()} ₽</p>
+          </div>
+          <Button onClick={handlePayment} disabled={isProcessing} className="w-full">
+            {isProcessing ? "Обработка..." : "Оплатить через ЮMoney"}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/style/components/header.tsx

@@ -19,10 +19,11 @@ export function Header() {
   return (
     <header className="border-b sticky top-0 bg-white z-50">
       <div className="container mx-auto px-4">
-        <div className="flex h-16 items-center justify-between">
-          <div className="flex items-center gap-4">
-            <Link href="/" className="text-2xl font-bold text-blue-600">
-              STORE
+        <div className="flex flex-col md:flex-row h-auto md:h-16 items-center justify-between">
+          <div className="flex items-center gap-4 mt-4 md:mt-0">
+            {/* Используем отступ слева для надписи STORE */}
+            <Link href="/" className="text-2xl font-bold text-blue-600 ml-[100px] md:ml-0">
+              ETRNOS
             </Link>
             <div className="hidden md:block">
               <CatalogMenu />
@@ -87,5 +88,4 @@ export function Header() {
       </div>
     </header>
   )
-}
-
+}