Merge version_3 into main #5
1421
src/app/layout.tsx
1421
src/app/layout.tsx
File diff suppressed because it is too large
Load Diff
189
src/app/page.tsx
189
src/app/page.tsx
@@ -2,6 +2,10 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
||||
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import { MapPin, Phone, Mail, ArrowRight } from "lucide-react";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
@@ -23,13 +27,196 @@ export default function Page() {
|
||||
{ name: "О нас", id: "#about" },
|
||||
{ name: "Услуги", id: "#services" },
|
||||
{ name: "Меню", id: "#menu" },
|
||||
{ name: "Отзывы", id: "#testimonials" },
|
||||
{ name: "Контакты", id: "#contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Заказать", href: "#contact"
|
||||
text: "Позвонить", href: "tel:+7(XXX)XXX-XX-XX"
|
||||
}}
|
||||
brandName="Special Coffee & Tea"
|
||||
/>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
title="Отзывы наших клиентов"
|
||||
description="Услышьте, что говорят наши постоянные гости о нашем кофе и чае"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Анна Петрова", role: "Регулярная клиентка", company: "Москва", rating: 5,
|
||||
imageSrc: "/placeholder.jpg", imageAlt: "Анна Петрова"},
|
||||
{
|
||||
id: "2", name: "Иван Сорокин", role: "Бизнесмен", company: "СПб", rating: 5,
|
||||
imageSrc: "/placeholder.jpg", imageAlt: "Иван Сорокин"},
|
||||
{
|
||||
id: "3", name: "Мария Яковлева", role: "Дизайнер", company: "Казань", rating: 5,
|
||||
imageSrc: "/placeholder.jpg", imageAlt: "Мария Яковлева"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "500+", label: "Счастливых клиентов" },
|
||||
{ value: "99%", label: "Рекомендуют друзьям" },
|
||||
{ value: "10+", label: "Лет опыта" },
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
title="Часто задаваемые вопросы"
|
||||
description="Ответы на вопросы о наших услугах, доставке и качестве"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "Какой кофе вы рекомендуете для дома?", content: "Мы рекомендуем нашу премиум коллекцию с выдержкой 6-12 месяцев. Она идеально подходит для любого способа приготовления."},
|
||||
{
|
||||
id: "2", title: "Предоставляете ли вы доставку?", content: "Да! Мы доставляем заказы по всему городу. Минимальный заказ - 500 рублей. Доставка осуществляется в течение 2-4 часов."},
|
||||
{
|
||||
id: "3", title: "Можно ли забрать заказ самостоятельно?", content: "Конечно! Заказ готов за 15 минут. Забрать можно в нашем кафе или через специальное окно самовывоза."},
|
||||
{
|
||||
id: "4", title: "Какие способы оплаты вы принимаете?", content: "Мы принимаем наличные, карты (Visa, MasterCard), и электронные платежи (Яндекс.касса, 1C-UMI)."},
|
||||
]}
|
||||
imageSrc="/placeholder.jpg"
|
||||
imageAlt="Кофейня Special Coffee & Tea"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="none"
|
||||
faqsAnimation="slide-up"
|
||||
mediaPosition="left"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Google Maps Section */}
|
||||
<div id="location" data-section="location" className="py-20 px-4 md:px-10">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<MapPin className="w-5 h-5" />
|
||||
<span className="text-sm font-semibold text-foreground/70">Местоположение</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4">Найдите нас на карте</h2>
|
||||
<p className="text-lg text-foreground/60 mb-8">Посетите наше кафе и насладитесь лучшим кофе и чаем в городе</p>
|
||||
</div>
|
||||
<div className="rounded-theme-capped overflow-hidden shadow-lg h-96">
|
||||
<iframe
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
loading="lazy"
|
||||
allowFullScreen
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
src="https://www.google.com/maps/embed?pb=Z3JhcGhxbGluYQ=="
|
||||
></iframe>
|
||||
</div>
|
||||
<div className="mt-12 grid md:grid-cols-3 gap-8">
|
||||
<div className="p-6 rounded-theme-capped bg-secondary-button text-center">
|
||||
<MapPin className="w-8 h-8 mx-auto mb-4 text-primary-cta" />
|
||||
<h3 className="font-semibold mb-2">Адрес</h3>
|
||||
<p className="text-sm text-foreground/70">ул. Кофейная, 42</p>
|
||||
<p className="text-sm text-foreground/70">Москва, 101000</p>
|
||||
</div>
|
||||
<div className="p-6 rounded-theme-capped bg-secondary-button text-center">
|
||||
<Phone className="w-8 h-8 mx-auto mb-4 text-primary-cta" />
|
||||
<h3 className="font-semibold mb-2">Телефон</h3>
|
||||
<p className="text-sm text-foreground/70">
|
||||
<a href="tel:+74959876543" className="hover:text-primary-cta transition">+7 (495) 987-65-43</a>
|
||||
</p>
|
||||
<p className="text-sm text-foreground/70">Пн-Вс: 08:00-22:00</p>
|
||||
</div>
|
||||
<div className="p-6 rounded-theme-capped bg-secondary-button text-center">
|
||||
<Mail className="w-8 h-8 mx-auto mb-4 text-primary-cta" />
|
||||
<h3 className="font-semibold mb-2">Email</h3>
|
||||
<p className="text-sm text-foreground/70">
|
||||
<a href="mailto:hello@specialcoffee.ru" className="hover:text-primary-cta transition">hello@specialcoffee.ru</a>
|
||||
</p>
|
||||
<p className="text-sm text-foreground/70">Ответим за 2 часа</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form Section */}
|
||||
<div id="contact" data-section="contact" className="py-20 px-4 md:px-10">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4">Свяжитесь с нами</h2>
|
||||
<p className="text-lg text-foreground/60">Закажите столик или задайте вопрос нашим специалистам</p>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6 bg-secondary-button rounded-theme-capped p-8 md:p-12">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Ваше имя *</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Иван Петров"
|
||||
required
|
||||
className="w-full px-4 py-3 rounded-theme-capped bg-background/50 border border-foreground/10 focus:border-primary-cta focus:outline-none transition"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Телефон *</label>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="+7 (495) 123-45-67"
|
||||
required
|
||||
className="w-full px-4 py-3 rounded-theme-capped bg-background/50 border border-foreground/10 focus:border-primary-cta focus:outline-none transition"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="ivan@example.com"
|
||||
className="w-full px-4 py-3 rounded-theme-capped bg-background/50 border border-foreground/10 focus:border-primary-cta focus:outline-none transition"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Сообщение *</label>
|
||||
<textarea
|
||||
placeholder="Расскажите о вашей заявке..."
|
||||
required
|
||||
rows={5}
|
||||
className="w-full px-4 py-3 rounded-theme-capped bg-background/50 border border-foreground/10 focus:border-primary-cta focus:outline-none transition resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-8 py-4 bg-primary-cta text-primary-cta-foreground font-semibold rounded-theme-capped hover:shadow-lg hover:shadow-primary-cta/50 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<Phone className="w-4 h-4" />
|
||||
Отправить запрос
|
||||
</button>
|
||||
<a
|
||||
href="tel:+74959876543"
|
||||
className="flex-1 px-8 py-4 bg-accent text-accent-foreground font-semibold rounded-theme-capped hover:shadow-lg hover:shadow-accent/50 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<Phone className="w-4 h-4" />
|
||||
Позвонить сейчас
|
||||
</a>
|
||||
</div>
|
||||
<p className="text-xs text-foreground/50 text-center">Ответим в течение 1 часа</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<ContactText
|
||||
text="Готовы насладиться лучшим кофе? Позвоните нам сейчас или посетите наше кафе сегодня!"
|
||||
animationType="entrance-slide"
|
||||
buttons={[
|
||||
{
|
||||
text: "Позвонить: +7 (495) 987-65-43", href: "tel:+74959876543"},
|
||||
{
|
||||
text: "Найти на карте", href: "#location"},
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user