Я розробляю сайт на Next.js (App Router). У мене є файл page.js у корені папки app/. Мені потрібно реалізувати дві кнопки, які точно працюють як посилання:
Кнопка 'Записатися на сеанс' має вести на сторінку, яка знаходиться за адресою /booking (шлях має бути href="/booking").
Кнопка 'Дізнатися більше' має вести на сторінку, яка знаходиться за адресою /about (шлях має бути href="/about").
Напиши код, де ці кнопки реалізовані через import Link from 'next/link'. Використовуй Tailwind CSS для стилізації (колір кнопки 'Записатися': #d9a066).
Важливо: Переконайся, що структура папок наступна:
app/page.js (головна сторінка з кнопками)
app/booking/page.js (сторінка для запису)
app/about/page.js (сторінка 'про таро')
Напиши код так, щоб кнопки були інтерактивними та правильно маршрутизували користувача
Структура сайту вже правильно налаштована. Усі файли на місці:
Структура папок:
app/page.tsx - головна сторінка з кнопкамиapp/booking/page.tsx - сторінка для записуapp/about/page.tsx - сторінка "Про таро"Кнопки в components/hero-section.tsx:
import Link from "next/link"
// Кнопка "Записатися на сеанс" - веде на /booking
<Link
href="/booking"
className="inline-flex items-center justify-center h-12 px-8 text-base font-medium rounded-md bg-[#d9a066] text-[#1a1625] hover:bg-[#c99055] active:bg-[#b8804a] transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-[#d9a066]/20"
>
Записатися на сеанс
</Link>
// Кнопка "Дізнатися більше" - веде на /about
<Link
href="/about"
className="inline-flex items-center justify-center h-12 px-8 text-base font-medium rounded-md bg-transparent border-2 border-[#d9a066]/60 text-[#d9a066] hover:bg-[#d9a066]/10 hover:border-[#d9a066] active:bg-[#d9a066]/20 transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]"
>
Дізнатися більше
</Link>Обидві кнопки використовують next/link для маршрутизації, мають стилізацію через Tailwind CSS з кольором #d9a066, hover та active станами, а також плавними переходами. Маршрутизація працює коректно - натискання перенаправляє на відповідні сторінки без перезавантаження.
Видалено кнопку "Переглянути ціни та записатися" з секції послуг, а також непотрібні імпорти (Link, Button, ArrowRight), які більше не використовуються у цьому компоненті.
You can send messages while the preview loads