248 lines
22 KiB
TypeScript
248 lines
22 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import Link from "next/link";
|
||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||
import TextAbout from '@/components/sections/about/TextAbout';
|
||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
||
import ContactText from '@/components/sections/contact/ContactText';
|
||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||
import { Sparkles, CheckCircle, Zap, TrendingUp, Star, Mail, Send, Phone, FolderOpen, Users, Clock, Calendar, Palette, Smartphone, RotateCcw, MessageCircle, Link as LinkIcon, Globe, Server, Database, FormInput, Check } from "lucide-react";
|
||
|
||
export default function HomePage() {
|
||
const navItems = [
|
||
{ name: "Услуги", id: "services" },
|
||
{ name: "О компании", id: "about" },
|
||
{ name: "Процесс", id: "process" },
|
||
{ name: "Отзывы", id: "testimonials" },
|
||
];
|
||
|
||
const navButton = {
|
||
text: "Связаться с нами", href: "/contact"
|
||
};
|
||
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="icon-arrow"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="pill"
|
||
contentWidth="medium"
|
||
sizing="medium"
|
||
background="circleGradient"
|
||
cardStyle="layered-gradient"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="medium"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingInline
|
||
brandName="Mond Design"
|
||
navItems={navItems}
|
||
button={navButton}
|
||
animateOnLoad={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero" className="py-20 md:py-28">
|
||
<HeroSplitKpi
|
||
title="Создаём современные сайты, которые работают"
|
||
description="Mond Design — агентство веб-разработки, специализирующееся на создании красивых, функциональных и высокопроизводительных веб-сайтов для малого и среднего бизнеса."
|
||
background={{ variant: "plain" }}
|
||
kpis={[
|
||
{ value: "24+", label: "Завершённых проектов" },
|
||
{ value: "100%", label: "Удовлетворённых клиентов" },
|
||
{ value: "1+", label: "Год опыта" },
|
||
]}
|
||
enableKpiAnimation={true}
|
||
tag="Mond Design"
|
||
tagIcon={Sparkles}
|
||
tagAnimation="slide-up"
|
||
buttons={[
|
||
{ text: "Начать проект", href: "/contact" },
|
||
{ text: "Посмотреть портфолио", href: "/about" },
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/a-modern-sophisticated-web-development-w-1772553706424-80bb3524.png"
|
||
imageAlt="Web development dashboard"
|
||
mediaAnimation="slide-up"
|
||
imagePosition="right"
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about" className="py-20 md:py-28">
|
||
<TextAbout
|
||
tag="Кто мы"
|
||
tagIcon={CheckCircle}
|
||
tagAnimation="slide-up"
|
||
title="Мы создаём цифровые решения, которые превосходят ожидания клиентов. Каждый проект разрабатывается с учётом уникальных потребностей вашего бизнеса, современных трендов дизайна и лучших практик веб-разработки."
|
||
buttons={[{ text: "Узнать больше", href: "/about" }]}
|
||
buttonAnimation="slide-up"
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="process" data-section="process" className="py-20 md:py-28">
|
||
<FeatureCardNineteen
|
||
title="Наш процесс разработки"
|
||
description="Мы следуем проверенной методологии, которая гарантирует качество, эффективность и соответствие вашим требованиям."
|
||
tag="Как мы работаем"
|
||
tagIcon={Zap}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
id: 1,
|
||
tag: "Этап 1", title: "Стратегия и консультация", subtitle: "Понимаем вашу бизнес-задачу", description: "Анализируем ваш бизнес, целевую аудиторию и конкурентов. Определяем ключевые показатели успеха, создаём техническое задание и дизайн-концепцию. На этом этапе мы убедимся, что все детали согласованы и понятны обеим сторонам.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/a-strategic-planning-workspace-showing-w-1772553705594-229ad230.png?_wi=1", imageAlt: "Strategy planning session", buttons: [],
|
||
},
|
||
{
|
||
id: 2,
|
||
tag: "Этап 2", title: "Дизайн и прототипирование", subtitle: "Создаём визуальную концепцию", description: "Разрабатываем индивидуальный дизайн сайта с учётом специфики вашего бизнеса. Создаём интерактивные прототипы для согласования макетов. Дизайн адаптирован под все устройства: смартфоны, планшеты и компьютеры.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/a-designer-working-on-a-digital-mockup-w-1772553706391-a99da199.png?_wi=1", imageAlt: "Design mockups and prototypes", buttons: [],
|
||
},
|
||
{
|
||
id: 3,
|
||
tag: "Этап 3", title: "Разработка и тестирование", subtitle: "Воплощаем дизайн в реальность", description: "Разрабатываем функциональный код сайта с использованием современных технологий. Проводим тщательное тестирование на всех браузерах и устройствах. Оптимизируем производительность и скорость загрузки страниц.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/a-developer-coding-on-a-computer-with-vs-1772553706185-9c5b572a.png?_wi=1", imageAlt: "Development and coding process", buttons: [],
|
||
},
|
||
{
|
||
id: 4,
|
||
tag: "Этап 4", title: "Запуск и поддержка", subtitle: "Ваш сайт готов к работе", description: "Публикуем сайт на выбранном домене, проводим финальные проверки. Предоставляем документацию и обучение. Включаем в пакет услуг ежемесячное техническое обслуживание и поддержку.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/a-successful-website-launch-screen-showi-1772553708078-813ab0d8.png?_wi=1", imageAlt: "Website launch and deployment", buttons: [],
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics" className="py-20 md:py-28">
|
||
<MetricCardOne
|
||
title="Наши достижения"
|
||
description="Цифры, которые говорят о качестве нашей работы и успехе наших клиентов"
|
||
tag="Статистика"
|
||
tagIcon={TrendingUp}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
gridVariant="uniform-all-items-equal"
|
||
animationType="slide-up"
|
||
metrics={[
|
||
{ id: "1", value: "150", title: "Проектов", description: "Успешно завершённых и задействованных", icon: FolderOpen },
|
||
{ id: "2", value: "98", title: "Процентов", description: "Клиентов рекомендуют нас друзьям", icon: Users },
|
||
{ id: "3", value: "24", title: "Часов", description: "Среднее время ответа на запросы", icon: Clock },
|
||
{ id: "4", value: "2.5", title: "Месяца", description: "Среднее время разработки проекта", icon: Calendar },
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials" className="py-20 md:py-28">
|
||
<TestimonialCardFive
|
||
title="Что говорят наши клиенты"
|
||
description="Реальные истории успеха от компаний, которые вернули свой бизнес в Интернет"
|
||
tag="Отзывы"
|
||
tagIcon={Star}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Александр Петров, Генеральный директор, СеноПро", date: "Дата: 15 Декабря 2024", title: "Абсолютно профессиональный подход!", quote: "Mond Design создали нам сайт, который не только красивый, но и работает как часы. Клиенты начали быстрее находить нас в Интернете, и конверсия заявок выросла на 45%. Команда была внимательна к каждой детали и всегда готова помочь.", tag: "Тариф Бизнес", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/professional-headshot-of-a-confident-bus-1772553704736-4eb26811.png", avatarAlt: "Александр Петров", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/professional-headshot-of-a-confident-bus-1772553704736-4eb26811.png"
|
||
},
|
||
{
|
||
id: "2", name: "Мария Сорокина, Владелица, МастерДизайн", date: "Дата: 10 Ноября 2024", title: "Превосходили все ожидания", quote: "Когда мы впервые обратились к Mond Design, я была скептична. Но результат поразил меня. Сайт не только красиво выглядит, но и очень удобен для моих клиентов. Поддержка была безупречной на протяжении всего проекта.", tag: "Тариф Бизнес", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/professional-headshot-of-a-female-ceo-or-1772553704964-df90711e.png", avatarAlt: "Мария Сорокина", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/professional-headshot-of-a-female-ceo-or-1772553704964-df90711e.png"
|
||
},
|
||
{
|
||
id: "3", name: "Дмитрий Викторов, Директор, ТехНовация", date: "Дата: 5 Октября 2024", title: "Лучшее инвестирование в мой бизнес", quote: "За 5 лет работы с Mond Design они создали для нас 3 сайта. Каждый раз качество было на высшем уровне, сроки соблюдались, цены справедливые. Это партнёры, а не просто подрядчики.", tag: "Тариф Бизнес", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/professional-headshot-of-a-male-founder--1772553705028-fcb9c285.png", avatarAlt: "Дмитрий Викторов", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/professional-headshot-of-a-male-founder--1772553705028-fcb9c285.png"
|
||
},
|
||
{
|
||
id: "4", name: "Елена Козлова, Менеджер маркетинга, РазвитиеПро", date: "Дата: 20 Сентября 2024", title: "Десять из десяти, рекомендую!", quote: "Нам нужно было срочно обновить сайт, и Mond Design справились за рекордные сроки без ущерба качеству. SEO-оптимизация, мобильная адаптация, аналитика — всё есть. И техническая поддержка работает как швейцарские часы.", tag: "Тариф Бизнес", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/professional-headshot-of-a-business-prof-1772553704570-11e9363f.png", avatarAlt: "Елена Козлова", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/professional-headshot-of-a-business-prof-1772553704570-11e9363f.png"
|
||
},
|
||
{
|
||
id: "5", name: "Виктор Лазарев, Сооснователь, ИТ-Синергия", date: "Дата: 12 Августа 2024", title: "Настоящие профессионалы своего дела", quote: "От консультации до запуска — всё было чётко, ясно и результативно. Сайт получился минималистичным, но очень мощным. Интеграция с CRM прошла гладко. Спасибо за отличную работу!", tag: "Тариф Бизнес", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/professional-headshot-of-a-woman-entrepr-1772553704478-b4907faa.png", avatarAlt: "Виктор Лазарев", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/professional-headshot-of-a-woman-entrepr-1772553704478-b4907faa.png"
|
||
},
|
||
{
|
||
id: "6", name: "Анна Белова, Руководитель проекта, Эко-Логистика", date: "Дата: 28 Июля 2024", title: "Сайт, который продаёт", quote: "Никогда не думала, что хороший дизайн так влияет на продажи. Mond Design создали сайт, который не только красивый, но работающий. За полгода после запуска выручка выросла на 60%. Спасибо большое!", tag: "Тариф Бизнес", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/professional-headshot-of-a-man-in-busine-1772553705127-d23f2dba.png", avatarAlt: "Анна Белова", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/professional-headshot-of-a-man-in-busine-1772553705127-d23f2dba.png"
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services" className="py-20 md:py-28">
|
||
<FeatureCardTen
|
||
title="Тариф «Бизнес» — 29 999 ₽"
|
||
description="Комплексное решение для малого бизнеса, которому нужен современный сайт с возможностью принимать заявки и корректно работать на всех устройствах."
|
||
tag="Наши услуги"
|
||
tagIcon={Sparkles}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
animationType="slide-up"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
id: "1", title: "Разработка сайта", description: "Создаём профессиональный сайт с индивидуальным дизайном и полной адаптацией под мобильные устройства.", reverse: false,
|
||
media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/a-designer-working-on-a-digital-mockup-w-1772553706391-a99da199.png?_wi=2" },
|
||
items: [
|
||
{ icon: Palette, text: "Индивидуальный дизайн под ваш запрос" },
|
||
{ icon: Smartphone, text: "Адаптация под все устройства" },
|
||
{ icon: RotateCcw, text: "До 5 правок в рамках проекта" },
|
||
],
|
||
},
|
||
{
|
||
id: "2", title: "Коммуникация с клиентами", description: "Интегрируем кнопки мессенджеров и звонков для прямого взаимодействия с вашей аудиторией.", reverse: true,
|
||
media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/a-developer-coding-on-a-computer-with-vs-1772553706185-9c5b572a.png?_wi=2" },
|
||
items: [
|
||
{ icon: MessageCircle, text: "Кнопки мессенджеров (Telegram, WhatsApp)" },
|
||
{ icon: Phone, text: "Кнопка прямого звонка" },
|
||
{ icon: LinkIcon, text: "Быстрая связь с клиентом в один клик" },
|
||
],
|
||
},
|
||
{
|
||
id: "3", title: "Подключение домена и техническая настройка", description: "Публикуем сайт на выбранном вами домене с полной технической настройкой и оптимизацией.", reverse: false,
|
||
media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/a-successful-website-launch-screen-showi-1772553708078-813ab0d8.png?_wi=2" },
|
||
items: [
|
||
{ icon: Globe, text: "Подключение выбранного домена" },
|
||
{ icon: Server, text: "Базовая техническая настройка" },
|
||
{ icon: Zap, text: "Оптимизация производительности" },
|
||
],
|
||
},
|
||
{
|
||
id: "4", title: "Функция приёма заявок", description: "Подключаем систему приёма заявок с отправкой в удобный формат для обработки.", reverse: true,
|
||
media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxJRmTnamx9ofjvEZzdJdepY5/a-strategic-planning-workspace-showing-w-1772553705594-229ad230.png?_wi=2" },
|
||
items: [
|
||
{ icon: FormInput, text: "Формы обратной связи на сайте" },
|
||
{ icon: Mail, text: "Заявки приходят на вашу почту" },
|
||
{ icon: Database, text: "Удобный формат для обработки (доп. 2 990 ₽)" },
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact" className="py-20 md:py-28">
|
||
<ContactText
|
||
text="Готовы начать ваш проект? Свяжитесь с нами уже сегодня и получите консультацию от наших специалистов. Мы ответим на все ваши вопросы и поможем выбрать оптимальное решение для вашего бизнеса."
|
||
animationType="entrance-slide"
|
||
buttons={[
|
||
{ text: "Отправить запрос", href: "/contact" },
|
||
{ text: "Узнать цены", href: "/services" },
|
||
]}
|
||
background={{ variant: "plain" }}
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer" className="py-12 md:py-16">
|
||
<FooterCard
|
||
logoText="Mond Design"
|
||
copyrightText="© 2025 Mond Design. Все права защищены."
|
||
socialLinks={[
|
||
{ icon: Mail, href: "mailto:mond_design@mail.ru", ariaLabel: "Email" },
|
||
{ icon: Send, href: "https://t.me/mond_design", ariaLabel: "Telegram" },
|
||
{ icon: Phone, href: "tel:+79886961761", ariaLabel: "Phone" },
|
||
]}
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
}
|