Update src/app/page.tsx
This commit is contained in:
437
src/app/page.tsx
437
src/app/page.tsx
@@ -17,327 +17,140 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "#products",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="TechSolutions"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="TechSolutions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Готовое IT-решение для быстрого старта продаж"
|
||||
description="Профессиональный интернет-магазин с настроенным SEO и адаптивным дизайном. Осталось только подключить платежи и начать принимать трафик."
|
||||
tag="Проверено и готово к запуску"
|
||||
buttons={[
|
||||
{
|
||||
text: "Демо-версия",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "Обсудить проект",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",
|
||||
imageAlt: "Dashboard UI",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-concept-with-progress-close-up_23-2149151161.jpg?_wi=1",
|
||||
imageAlt: "Retail storefront",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-upon-robot-vacuum-cleaner-indoors_23-2150829989.jpg?_wi=1",
|
||||
imageAlt: "SaaS Platform",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-vr-glasses_23-2148847740.jpg?_wi=1",
|
||||
imageAlt: "Marketplace interface",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-computer-scientist-data-center-uses-ai-tablet_482257-121074.jpg?_wi=1",
|
||||
imageAlt: "B2B Portal",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="100+ успешных запусков"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
title="Готовое IT-решение для быстрого старта продаж"
|
||||
description="Профессиональный интернет-магазин с настроенным SEO и адаптивным дизайном. Осталось только подключить платежи и начать принимать трафик."
|
||||
tag="Проверено и готово к запуску"
|
||||
buttons={[
|
||||
{ text: "Демо-версия", href: "#" },
|
||||
{ text: "Обсудить проект", href: "#contact" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg", imageAlt: "Dashboard UI" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/business-concept-with-progress-close-up_23-2149151161.jpg", imageAlt: "Retail storefront" },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="100+ успешных запусков"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "SEO-оптимизированная структура",
|
||||
description: "Правильная архитектура ссылок, мета-теги и высокая скорость загрузки для ранжирования.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/red-delivery-car-deliver-express-shipping-fast-delivery-with-arrow-graph-background-3d-rendering_56104-1906.jpg",
|
||||
imageAlt: "SEO Icon",
|
||||
},
|
||||
{
|
||||
title: "Готовность к платежам",
|
||||
description: "Настроенные модули интеграции для популярных платежных шлюзов в один клик.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-hand-pay-with-card-via-pos-terminal_107791-17351.jpg",
|
||||
imageAlt: "Payment Icon",
|
||||
},
|
||||
{
|
||||
title: "Адаптивный дизайн",
|
||||
description: "Корректное отображение на всех устройствах, от смартфонов до десктопов.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/20-layout-line-filled-color-icon-pack-like-arrow-angular-remove-website-site_1142-16990.jpg",
|
||||
imageAlt: "Responsive Icon",
|
||||
},
|
||||
]}
|
||||
title="Техническое превосходство"
|
||||
description="Мы проработали каждый аспект, чтобы вы могли сфокусироваться на маркетинге, а не на разработке."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "SEO-оптимизированная структура", description: "Правильная архитектура ссылок, мета-теги и высокая скорость загрузки для ранжирования.", imageSrc: "http://img.b2bpic.net/free-photo/red-delivery-car-deliver-express-shipping-fast-delivery-with-arrow-graph-background-3d-rendering_56104-1906.jpg", imageAlt: "SEO Icon" },
|
||||
{ title: "Готовность к платежам", description: "Настроенные модули интеграции для популярных платежных шлюзов в один клик.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-hand-pay-with-card-via-pos-terminal_107791-17351.jpg", imageAlt: "Payment Icon" },
|
||||
{ title: "Адаптивный дизайн", description: "Корректное отображение на всех устройствах, от смартфонов до десктопов.", imageSrc: "http://img.b2bpic.net/free-vector/20-layout-line-filled-color-icon-pack-like-arrow-angular-remove-website-site_1142-16990.jpg", imageAlt: "Responsive Icon" },
|
||||
]}
|
||||
title="Техническое превосходство"
|
||||
description="Мы проработали каждый аспект, чтобы вы могли сфокусироваться на маркетинге, а не на разработке."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Classic Storefront",
|
||||
price: "от $1,500",
|
||||
variant: "Retail",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-concept-with-progress-close-up_23-2149151161.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "SaaS Platform",
|
||||
price: "от $3,200",
|
||||
variant: "Service",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-upon-robot-vacuum-cleaner-indoors_23-2150829989.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Digital Marketplace",
|
||||
price: "от $2,800",
|
||||
variant: "Digital",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-vr-glasses_23-2148847740.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "B2B Portal",
|
||||
price: "от $4,500",
|
||||
variant: "Enterprise",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-computer-scientist-data-center-uses-ai-tablet_482257-121074.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Dropshipping Kit",
|
||||
price: "от $1,200",
|
||||
variant: "Retail",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-cell-phone-box-background_58702-4729.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Agency Base",
|
||||
price: "от $2,000",
|
||||
variant: "Agency",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-data-center-computer-scientist-using-tablet-deploying-servers-network-hardware-it_482257-135612.jpg",
|
||||
},
|
||||
]}
|
||||
title="Варианты решений"
|
||||
description="Выберите архитектуру, идеально подходящую под вашу нишу."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Classic Storefront", price: "от $1,500", variant: "Retail", imageSrc: "http://img.b2bpic.net/free-photo/business-concept-with-progress-close-up_23-2149151161.jpg" },
|
||||
{ id: "p2", name: "SaaS Platform", price: "от $3,200", variant: "Service", imageSrc: "http://img.b2bpic.net/free-photo/close-upon-robot-vacuum-cleaner-indoors_23-2150829989.jpg" },
|
||||
{ id: "p3", name: "Digital Marketplace", price: "от $2,800", variant: "Digital", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-vr-glasses_23-2148847740.jpg" },
|
||||
{ id: "p4", name: "B2B Portal", price: "от $4,500", variant: "Enterprise", imageSrc: "http://img.b2bpic.net/free-photo/close-up-computer-scientist-data-center-uses-ai-tablet_482257-121074.jpg" },
|
||||
{ id: "p5", name: "Dropshipping Kit", price: "от $1,200", variant: "Retail", imageSrc: "http://img.b2bpic.net/free-photo/white-cell-phone-box-background_58702-4729.jpg" },
|
||||
{ id: "p6", name: "Agency Base", price: "от $2,000", variant: "Agency", imageSrc: "http://img.b2bpic.net/free-photo/close-up-data-center-computer-scientist-using-tablet-deploying-servers-network-hardware-it_482257-135612.jpg" },
|
||||
]}
|
||||
title="Варианты решений"
|
||||
description="Выберите архитектуру, идеально подходящую под вашу нишу."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "start",
|
||||
title: "Starter Pack",
|
||||
price: "от $990",
|
||||
period: "единоразово",
|
||||
features: [
|
||||
"Базовая SEO настройка",
|
||||
"Консультация по запуску",
|
||||
"Техническая поддержка",
|
||||
],
|
||||
button: {
|
||||
text: "Выбрать",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-concept-with-progress-close-up_23-2149151161.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
title: "Pro Solution",
|
||||
price: "от $2,490",
|
||||
period: "единоразово",
|
||||
features: [
|
||||
"Полный SEO аудит",
|
||||
"Настройка платежей",
|
||||
"Обучение управлению",
|
||||
"3 месяца поддержки",
|
||||
],
|
||||
button: {
|
||||
text: "Выбрать",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-upon-robot-vacuum-cleaner-indoors_23-2150829989.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "max",
|
||||
title: "Scale Edition",
|
||||
price: "от $4,990",
|
||||
period: "единоразово",
|
||||
features: [
|
||||
"Индивидуальный дизайн",
|
||||
"Кастомные интеграции",
|
||||
"Настройка рекламы",
|
||||
"Приоритетная поддержка",
|
||||
],
|
||||
button: {
|
||||
text: "Выбрать",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-vr-glasses_23-2148847740.jpg?_wi=3",
|
||||
},
|
||||
]}
|
||||
title="Прозрачные условия"
|
||||
description="Фиксированная стоимость за полностью рабочий продукт."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{ id: "start", title: "Starter Pack", price: "от $990", period: "единоразово", features: ["Базовая SEO настройка", "Консультация по запуску", "Техническая поддержка"], button: { text: "Выбрать", href: "#contact" }, imageSrc: "http://img.b2bpic.net/free-photo/business-concept-with-progress-close-up_23-2149151161.jpg" },
|
||||
{ id: "pro", title: "Pro Solution", price: "от $2,490", period: "единоразово", features: ["Полный SEO аудит", "Настройка платежей", "Обучение управлению", "3 месяца поддержки"], button: { text: "Выбрать", href: "#contact" }, imageSrc: "http://img.b2bpic.net/free-photo/close-upon-robot-vacuum-cleaner-indoors_23-2150829989.jpg" },
|
||||
{ id: "max", title: "Scale Edition", price: "от $4,990", period: "единоразово", features: ["Индивидуальный дизайн", "Кастомные интеграции", "Настройка рекламы", "Приоритетная поддержка"], button: { text: "Выбрать", href: "#contact" }, imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-vr-glasses_23-2148847740.jpg" },
|
||||
]}
|
||||
title="Прозрачные условия"
|
||||
description="Фиксированная стоимость за полностью рабочий продукт."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Решение полностью готово к работе. Запустили рекламу на следующий день после покупки."
|
||||
rating={5}
|
||||
author="Алексей И., основатель проекта"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-caucasian-unshaved-man-eyeglasses-looking-camera-with-sincere-smile-isolated-gray_171337-630.jpg",
|
||||
alt: "User",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/worker-with-big-smile-crossed-arms_1139-248.jpg",
|
||||
alt: "User",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
|
||||
alt: "User",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",
|
||||
alt: "User",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/side-view-smiley-modern-female_23-2148415853.jpg",
|
||||
alt: "User",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Решение полностью готово к работе. Запустили рекламу на следующий день после покупки."
|
||||
rating={5}
|
||||
author="Алексей И., основатель проекта"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-caucasian-unshaved-man-eyeglasses-looking-camera-with-sincere-smile-isolated-gray_171337-630.jpg", alt: "User" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/worker-with-big-smile-crossed-arms_1139-248.jpg", alt: "User" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", alt: "User" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg", alt: "User" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/side-view-smiley-modern-female_23-2148415853.jpg", alt: "User" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Готовы к старту?"
|
||||
title="Давайте обсудим вашу задачу"
|
||||
description="Запишитесь на демонстрацию демо-версии и получите полный список технических характеристик."
|
||||
buttons={[
|
||||
{
|
||||
text: "Написать в Telegram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "Заказать звонок",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Готовы к старту?"
|
||||
title="Давайте обсудим вашу задачу"
|
||||
description="Запишитесь на демонстрацию демо-версии и получите полный список технических характеристик."
|
||||
buttons={[
|
||||
{ text: "Написать в Telegram", href: "#" },
|
||||
{ text: "Заказать звонок", href: "#" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="TechSolutions"
|
||||
columns={[
|
||||
{
|
||||
title: "Продукты",
|
||||
items: [
|
||||
{
|
||||
label: "Магазины",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Сервисы",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Компания",
|
||||
items: [
|
||||
{
|
||||
label: "О нас",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Контакты",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Юридическое",
|
||||
items: [
|
||||
{
|
||||
label: "Договор",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Политика",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="TechSolutions"
|
||||
columns={[
|
||||
{ title: "Продукты", items: [{ label: "Магазины", href: "#products" }, { label: "Сервисы", href: "#products" }] },
|
||||
{ title: "Компания", items: [{ label: "О нас", href: "#" }, { label: "Контакты", href: "#contact" }] },
|
||||
{ title: "Юридическое", items: [{ label: "Договор", href: "#" }, { label: "Политика", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user