adaptive vers
This commit is contained in:
parent
32c5fcf2ac
commit
647e2c2dd9
@ -53,6 +53,46 @@
|
||||
// export default CustomLayout;
|
||||
|
||||
|
||||
// import React from 'react';
|
||||
// import { Layout } from 'antd';
|
||||
// import MainSection from './MainSection';
|
||||
// import FourstepSection from './FourSteps';
|
||||
// import MakeEasier from './MakeEasier';
|
||||
// import Questions from './Questions';
|
||||
// import WorkInTeam from './WorkInTeam';
|
||||
// import PriceList from './PriceList';
|
||||
// import Udobno from './Udobno';
|
||||
// import Header from './Header';
|
||||
// import ContactBlock from './ContactBlock';
|
||||
// import Footer from './Footer';
|
||||
|
||||
// const { Content } = Layout;
|
||||
|
||||
// const CustomLayout = () => (
|
||||
// <Layout className="layout">
|
||||
// <Header />
|
||||
// <Content style={{ padding: '0 50px', background: '#ffffff' }}>
|
||||
// <MainSection />
|
||||
|
||||
// <div className="relative w-full"> {/* Убрали ограничение высоты */}
|
||||
// <div>
|
||||
// <Udobno />
|
||||
// <MakeEasier />
|
||||
// <FourstepSection />
|
||||
// <WorkInTeam />
|
||||
// <PriceList />
|
||||
// <Questions />
|
||||
// <div className="w-full"><ContactBlock /></div> {/* Изменили mb-4 на w-full */}
|
||||
// </div>
|
||||
// </div>
|
||||
// </Content>
|
||||
|
||||
// <Footer />
|
||||
// </Layout>
|
||||
// );
|
||||
|
||||
// export default CustomLayout;
|
||||
|
||||
import React from 'react';
|
||||
import { Layout } from 'antd';
|
||||
import MainSection from './MainSection';
|
||||
@ -69,12 +109,12 @@ import Footer from './Footer';
|
||||
const { Content } = Layout;
|
||||
|
||||
const CustomLayout = () => (
|
||||
<Layout className="layout">
|
||||
<Layout className="layout" style={{ overflow: 'hidden' }}>
|
||||
<Header />
|
||||
<Content style={{ padding: '0 50px', background: '#ffffff' }}>
|
||||
<Content style={{ background: '#ffffff', position: 'relative' }}>
|
||||
<MainSection />
|
||||
|
||||
<div className="relative w-full"> {/* Убрали ограничение высоты */}
|
||||
<div className="relative w-full px-4 md:px-12 lg:px-50">
|
||||
<div>
|
||||
<Udobno />
|
||||
<MakeEasier />
|
||||
@ -82,7 +122,9 @@ const CustomLayout = () => (
|
||||
<WorkInTeam />
|
||||
<PriceList />
|
||||
<Questions />
|
||||
<div className="w-full"><ContactBlock /></div> {/* Изменили mb-4 на w-full */}
|
||||
<div className="w-full">
|
||||
<ContactBlock />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Content>
|
||||
|
||||
@ -125,6 +125,180 @@
|
||||
// }
|
||||
|
||||
|
||||
// import { useState } from "react";
|
||||
// import videoback from '../vids/backvideo2.webm';
|
||||
// import translations from '../translations.json';
|
||||
// import { useLanguage } from '../contexts/LanguageContext';
|
||||
|
||||
// export default function ContactBlock() {
|
||||
// const { language } = useLanguage();
|
||||
// const t = translations.contacts[language];
|
||||
|
||||
// function sendMessage(text)
|
||||
// {
|
||||
// const botToken = process.env.REACT_APP_TELEGRAM_BOT_TOKEN;
|
||||
// const chatId = process.env.REACT_APP_TELEGRAM_CHAT_ID;
|
||||
|
||||
// const url = `https://api.telegram.org/bot${botToken}/sendMessage`;
|
||||
|
||||
// const obj = {
|
||||
// chat_id: chatId, // Telegram chat id
|
||||
// text: text // The text to send
|
||||
// };
|
||||
|
||||
// const xht = new XMLHttpRequest();
|
||||
// xht.open("POST", url, true);
|
||||
// xht.setRequestHeader("Content-type", "application/json; charset=UTF-8");
|
||||
// xht.send(JSON.stringify(obj));
|
||||
// }
|
||||
|
||||
// const [formData, setFormData] = useState({
|
||||
// name: '',
|
||||
// email: '',
|
||||
// message: ''
|
||||
// });
|
||||
|
||||
// // const handleSubmit = (e) => {
|
||||
// // e.preventDefault();
|
||||
// // console.log('Form submitted:', formData);
|
||||
// // };
|
||||
|
||||
// const handleSubmit = (e) => {
|
||||
// e.preventDefault();
|
||||
|
||||
// // Формируем текст сообщения для Telegram
|
||||
// const messageText = `
|
||||
// Новое сообщение с сайта:
|
||||
// 👤 Имя: ${formData.name}
|
||||
// 📧 Email: ${formData.email}
|
||||
// 💬 Сообщение: ${formData.message}
|
||||
// `.trim();
|
||||
|
||||
// // Отправляем сообщение в Telegram
|
||||
// sendMessage(messageText);
|
||||
|
||||
// // Очищаем форму после отправки
|
||||
// setFormData({
|
||||
// name: '',
|
||||
// email: '',
|
||||
// message: ''
|
||||
// });
|
||||
|
||||
// // Показываем уведомление об успешной отправке
|
||||
// // alert(language === 'ru' ? 'Сообщение успешно отправлено!' : 'Message sent successfully!');
|
||||
// };
|
||||
|
||||
// const handleChange = (e) => {
|
||||
// setFormData({
|
||||
// ...formData,
|
||||
// [e.target.name]: e.target.value
|
||||
// });
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <div id="contacts-section" className="relative w-full min-h-[700px] bg-white">
|
||||
// <div className="relative flex justify-center items-center max-w-6xl mx-auto p-8 h-full">
|
||||
// {/* Main container with video background */}
|
||||
// <div className="w-full relative p-12 rounded-3xl overflow-hidden">
|
||||
// {/* Video background */}
|
||||
// <div className="absolute inset-0 z-0">
|
||||
// <video
|
||||
// autoPlay
|
||||
// loop
|
||||
// muted
|
||||
// playsInline
|
||||
// className="w-full h-full object-cover rounded-3xl"
|
||||
// >
|
||||
// <source src={videoback} type="video/webm" />
|
||||
// Your browser does not support the video tag.
|
||||
// </video>
|
||||
// {/* Optional overlay for better text visibility */}
|
||||
// <div
|
||||
// className="absolute inset-0 rounded-3xl"
|
||||
// style={{
|
||||
// background: 'linear-gradient(135deg, rgba(118, 184, 42, 0.3), rgba(144, 201, 92, 0.3))',
|
||||
// backdropFilter: 'blur(5px)',
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
|
||||
// {/* Content */}
|
||||
// <div className="relative z-10 flex justify-between items-center gap-12">
|
||||
// {/* Text content */}
|
||||
// <div className="w-1/2">
|
||||
// <h2 className="text-4xl font-extrabold mb-4 text-white drop-shadow-sm">
|
||||
// {t.title}
|
||||
// </h2>
|
||||
// <p className="text-2xl font-bold text-white">
|
||||
// {t.subtitle}
|
||||
// </p>
|
||||
// </div>
|
||||
|
||||
// {/* Form */}
|
||||
// <div className="w-[500px] bg-white/95 backdrop-blur-sm p-8 rounded-xl shadow-lg">
|
||||
// <h3 className="text-2xl font-bold text-center mb-6">{t.formTitle}</h3>
|
||||
|
||||
// <form onSubmit={handleSubmit} className="space-y-6">
|
||||
// <div>
|
||||
// <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
// {t.form.name.label}
|
||||
// </label>
|
||||
// <input
|
||||
// type="text"
|
||||
// id="name"
|
||||
// name="name"
|
||||
// value={formData.name}
|
||||
// onChange={handleChange}
|
||||
// placeholder={t.form.name.placeholder}
|
||||
// className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
|
||||
// required
|
||||
// />
|
||||
// </div>
|
||||
// <div>
|
||||
// <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
// {t.form.email.label}
|
||||
// </label>
|
||||
// <input
|
||||
// type="email"
|
||||
// id="email"
|
||||
// name="email"
|
||||
// value={formData.email}
|
||||
// onChange={handleChange}
|
||||
// placeholder={t.form.email.placeholder}
|
||||
// className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
|
||||
// required
|
||||
// />
|
||||
// </div>
|
||||
// <div>
|
||||
// <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
// {t.form.message.label}
|
||||
// </label>
|
||||
// <textarea
|
||||
// id="message"
|
||||
// name="message"
|
||||
// value={formData.message}
|
||||
// onChange={handleChange}
|
||||
// placeholder={t.form.message.placeholder}
|
||||
// rows={4}
|
||||
// className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
|
||||
// required
|
||||
// />
|
||||
// </div>
|
||||
// <button
|
||||
// type="submit"
|
||||
// className="w-full bg-[#000000] text-white font-medium py-2 px-4 rounded-md hover:bg-[#90c95c] transition-colors duration-200"
|
||||
// >
|
||||
// {t.form.submitButton}
|
||||
// </button>
|
||||
// </form>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
import { useState } from "react";
|
||||
import videoback from '../vids/backvideo2.webm';
|
||||
import translations from '../translations.json';
|
||||
@ -134,16 +308,14 @@ export default function ContactBlock() {
|
||||
const { language } = useLanguage();
|
||||
const t = translations.contacts[language];
|
||||
|
||||
function sendMessage(text)
|
||||
{
|
||||
function sendMessage(text) {
|
||||
const botToken = process.env.REACT_APP_TELEGRAM_BOT_TOKEN;
|
||||
const chatId = process.env.REACT_APP_TELEGRAM_CHAT_ID;
|
||||
|
||||
const url = `https://api.telegram.org/bot${botToken}/sendMessage`;
|
||||
|
||||
const obj = {
|
||||
chat_id: chatId, // Telegram chat id
|
||||
text: text // The text to send
|
||||
chat_id: chatId,
|
||||
text: text
|
||||
};
|
||||
|
||||
const xht = new XMLHttpRequest();
|
||||
@ -158,34 +330,21 @@ export default function ContactBlock() {
|
||||
message: ''
|
||||
});
|
||||
|
||||
// const handleSubmit = (e) => {
|
||||
// e.preventDefault();
|
||||
// console.log('Form submitted:', formData);
|
||||
// };
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Формируем текст сообщения для Telegram
|
||||
const messageText = `
|
||||
Новое сообщение с сайта:
|
||||
👤 Имя: ${formData.name}
|
||||
📧 Email: ${formData.email}
|
||||
💬 Сообщение: ${formData.message}
|
||||
`.trim();
|
||||
`.trim();
|
||||
|
||||
// Отправляем сообщение в Telegram
|
||||
sendMessage(messageText);
|
||||
|
||||
// Очищаем форму после отправки
|
||||
setFormData({
|
||||
name: '',
|
||||
email: '',
|
||||
message: ''
|
||||
});
|
||||
|
||||
// Показываем уведомление об успешной отправке
|
||||
// alert(language === 'ru' ? 'Сообщение успешно отправлено!' : 'Message sent successfully!');
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
@ -196,10 +355,10 @@ export default function ContactBlock() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="contacts-section" className="relative w-full min-h-[700px] bg-white">
|
||||
<div className="relative flex justify-center items-center max-w-6xl mx-auto p-8 h-full">
|
||||
{/* Main container with video background */}
|
||||
<div className="w-full relative p-12 rounded-3xl overflow-hidden">
|
||||
<div id="contacts-section" className="relative w-full min-h-[600px] md:min-h-[700px] bg-white">
|
||||
<div className="relative flex justify-center items-center max-w-6xl mx-auto p-4 md:p-8 h-full">
|
||||
{/* Main container */}
|
||||
<div className="w-full relative p-4 md:p-12 rounded-3xl overflow-hidden">
|
||||
{/* Video background */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<video
|
||||
@ -212,7 +371,7 @@ export default function ContactBlock() {
|
||||
<source src={videoback} type="video/webm" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
{/* Optional overlay for better text visibility */}
|
||||
{/* Overlay */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-3xl"
|
||||
style={{
|
||||
@ -223,22 +382,24 @@ export default function ContactBlock() {
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 flex justify-between items-center gap-12">
|
||||
<div className="relative z-10 flex flex-col md:flex-row justify-between items-center gap-6 md:gap-12">
|
||||
{/* Text content */}
|
||||
<div className="w-1/2">
|
||||
<h2 className="text-4xl font-extrabold mb-4 text-white drop-shadow-sm">
|
||||
<div className="w-full md:w-1/2 text-center md:text-left mb-6 md:mb-0">
|
||||
<h2 className="text-3xl md:text-4xl font-extrabold mb-4 text-white drop-shadow-sm">
|
||||
{t.title}
|
||||
</h2>
|
||||
<p className="text-2xl font-bold text-white">
|
||||
<p className="text-xl md:text-2xl font-bold text-white">
|
||||
{t.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<div className="w-[500px] bg-white/95 backdrop-blur-sm p-8 rounded-xl shadow-lg">
|
||||
<h3 className="text-2xl font-bold text-center mb-6">{t.formTitle}</h3>
|
||||
<div className="w-full md:w-[500px] bg-white/95 backdrop-blur-sm p-6 md:p-8 rounded-xl shadow-lg">
|
||||
<h3 className="text-xl md:text-2xl font-bold text-center mb-6">
|
||||
{t.formTitle}
|
||||
</h3>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-4 md:space-y-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{t.form.name.label}
|
||||
@ -284,7 +445,7 @@ export default function ContactBlock() {
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-[#000000] text-white font-medium py-2 px-4 rounded-md hover:bg-[#90c95c] transition-colors duration-200"
|
||||
>
|
||||
|
||||
@ -143,7 +143,81 @@
|
||||
// }
|
||||
|
||||
|
||||
// import { useState, useEffect } from 'react';
|
||||
// import logo from '../assets/images/logo200x50.png';
|
||||
// import translations from '../translations.json';
|
||||
// import { useLanguage } from '../contexts/LanguageContext';
|
||||
// import { CustomLink } from './CustomLink';
|
||||
// import LanguageSwitcher from './LanguageSwitcher';
|
||||
// import { ScrollLink } from './ScrollLink';
|
||||
|
||||
// export default function Header() {
|
||||
// const [isScrolled, setIsScrolled] = useState(false);
|
||||
// const { language } = useLanguage();
|
||||
// const t = translations.header[language];
|
||||
|
||||
// useEffect(() => {
|
||||
// const handleScroll = () => {
|
||||
// const isFullScreenPassed = window.scrollY > window.innerHeight;
|
||||
// setIsScrolled(isFullScreenPassed);
|
||||
// };
|
||||
|
||||
// window.addEventListener('scroll', handleScroll);
|
||||
// return () => window.removeEventListener('scroll', handleScroll);
|
||||
// }, []);
|
||||
|
||||
// return (
|
||||
// <header
|
||||
// className={`
|
||||
// fixed top-0 left-0 w-full z-50
|
||||
// transition-all duration-300
|
||||
// ${isScrolled
|
||||
// ? 'bg-white bg-opacity-90 backdrop-blur-md'
|
||||
// : 'bg-transparent backdrop-blur-md bg-opacity-30'
|
||||
// }
|
||||
// `}
|
||||
// >
|
||||
// <div className="container mx-auto px-4">
|
||||
// <div className="flex items-center justify-between h-16">
|
||||
// <div className="flex items-center">
|
||||
// <CustomLink to="/">
|
||||
// <img
|
||||
// src={logo}
|
||||
// alt="Logo"
|
||||
// className="h-12 w-auto"
|
||||
// />
|
||||
// </CustomLink>
|
||||
// </div>
|
||||
|
||||
// <nav className="hidden md:flex items-center space-x-8">
|
||||
// <CustomLink
|
||||
// to="/pricing"
|
||||
// className={`text-lg font-light transition-colors duration-200 ${
|
||||
// isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
|
||||
// }`}
|
||||
// >
|
||||
// {t.pricing}
|
||||
// </CustomLink>
|
||||
// <ScrollLink
|
||||
// to="#contacts-section"
|
||||
// className={`text-lg font-light transition-colors duration-200 ${
|
||||
// isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
|
||||
// }`}
|
||||
// >
|
||||
// {t.feedback}
|
||||
// </ScrollLink>
|
||||
// <LanguageSwitcher isScrolled={isScrolled} />
|
||||
// </nav>
|
||||
// </div>
|
||||
// </div>
|
||||
// </header>
|
||||
// );
|
||||
// }
|
||||
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { Menu, X } from 'lucide-react';
|
||||
import logo from '../assets/images/logo200x50.png';
|
||||
import translations from '../translations.json';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
@ -153,62 +227,96 @@ import { ScrollLink } from './ScrollLink';
|
||||
|
||||
export default function Header() {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const { language } = useLanguage();
|
||||
const t = translations.header[language];
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const isFullScreenPassed = window.scrollY > window.innerHeight;
|
||||
setIsScrolled(isFullScreenPassed);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
// Закрываем мобильное меню при смене маршрута
|
||||
useEffect(() => {
|
||||
setIsMobileMenuOpen(false);
|
||||
}, [location]);
|
||||
|
||||
const headerBg = isScrolled
|
||||
? 'bg-white bg-opacity-90 backdrop-blur-md'
|
||||
: 'bg-transparent backdrop-blur-md bg-opacity-30';
|
||||
|
||||
const textColor = isScrolled
|
||||
? 'text-gray-800 hover:text-gray-600'
|
||||
: 'text-white hover:text-gray-200';
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`
|
||||
fixed top-0 left-0 w-full z-50
|
||||
transition-all duration-300
|
||||
${isScrolled
|
||||
? 'bg-white bg-opacity-90 backdrop-blur-md'
|
||||
: 'bg-transparent backdrop-blur-md bg-opacity-30'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<header className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${headerBg}`}>
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Логотип */}
|
||||
<div className="flex items-center">
|
||||
<CustomLink to="/">
|
||||
<img
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
className="h-12 w-auto"
|
||||
/>
|
||||
<img src={logo} alt="Logo" className="h-12 w-auto" />
|
||||
</CustomLink>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Десктопная навигация */}
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
<CustomLink
|
||||
to="/pricing"
|
||||
className={`text-lg font-light transition-colors duration-200 ${
|
||||
isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
|
||||
}`}
|
||||
className={`text-lg font-light transition-colors duration-200 ${textColor}`}
|
||||
>
|
||||
{t.pricing}
|
||||
</CustomLink>
|
||||
<ScrollLink
|
||||
to="#contacts-section"
|
||||
className={`text-lg font-light transition-colors duration-200 ${
|
||||
isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
|
||||
}`}
|
||||
<ScrollLink
|
||||
to="#contacts-section"
|
||||
className={`text-lg font-light transition-colors duration-200 ${textColor}`}
|
||||
>
|
||||
{t.feedback}
|
||||
</ScrollLink>
|
||||
<LanguageSwitcher isScrolled={isScrolled} />
|
||||
</nav>
|
||||
|
||||
{/* Кнопка мобильного меню */}
|
||||
<button
|
||||
className="md:hidden p-2 rounded-lg focus:outline-none"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
>
|
||||
{isMobileMenuOpen ? (
|
||||
<X className={textColor} size={24} />
|
||||
) : (
|
||||
<Menu className={textColor} size={24} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Мобильное меню */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className={`md:hidden ${headerBg} px-4 py-2`}>
|
||||
<div className="flex flex-col space-y-4 pb-4">
|
||||
<CustomLink
|
||||
to="/pricing"
|
||||
className={`text-lg font-light transition-colors duration-200 ${textColor}`}
|
||||
>
|
||||
{t.pricing}
|
||||
</CustomLink>
|
||||
<ScrollLink
|
||||
to="#contacts-section"
|
||||
className={`text-lg font-light transition-colors duration-200 ${textColor}`}
|
||||
>
|
||||
{t.feedback}
|
||||
</ScrollLink>
|
||||
<div className="pt-2">
|
||||
<LanguageSwitcher isScrolled={isScrolled} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
@ -74,6 +74,99 @@
|
||||
// export default MainSection;
|
||||
|
||||
|
||||
// import React from 'react';
|
||||
// import { Typography, Button } from 'antd';
|
||||
// import { ArrowRightOutlined } from '@ant-design/icons';
|
||||
// import VideoBackground from './VideoBackground';
|
||||
// import styled from 'styled-components';
|
||||
// import translations from '../translations.json';
|
||||
// import { useLanguage } from '../contexts/LanguageContext';
|
||||
|
||||
// const { Title, Paragraph } = Typography;
|
||||
|
||||
|
||||
// const CustomFont = styled.div`
|
||||
// @font-face {
|
||||
// font-family: 'CustomFont';
|
||||
// src: url('../assets/fonts/ProtestStrike-Regular.ttf') format('truetype');
|
||||
// }
|
||||
// font-family: 'CustomFont', sans-serif;
|
||||
// `;
|
||||
|
||||
// const MainSection = () => {
|
||||
// const { language } = useLanguage();
|
||||
// const t = translations.mainSection[language];
|
||||
|
||||
// return (
|
||||
// <div style={{
|
||||
// width: '100%',
|
||||
// height: '100vh',
|
||||
// overflow: 'hidden'
|
||||
// }}>
|
||||
// <div style={{
|
||||
// position: 'absolute',
|
||||
// top: 0,
|
||||
// left: 0,
|
||||
// width: '100%',
|
||||
// height: '100%',
|
||||
// zIndex: 1
|
||||
// }}>
|
||||
// <VideoBackground />
|
||||
// </div>
|
||||
|
||||
// <div style={{
|
||||
// position: 'relative',
|
||||
// zIndex: 2,
|
||||
// display: 'flex',
|
||||
// flexDirection: 'column',
|
||||
// justifyContent: 'center',
|
||||
// alignItems: 'center',
|
||||
// textAlign: 'center',
|
||||
// height: '100%',
|
||||
// padding: '20px',
|
||||
// backgroundColor: 'rgba(255, 255, 255, 0)'
|
||||
// }}>
|
||||
|
||||
// <CustomFont>
|
||||
// <Title style={{ color: '#ffffff', fontSize: '84px', marginBottom: '5px' }}>
|
||||
// <span style={{ fontWeight: '900' }}>
|
||||
// <p style={{marginBottom: '0px'}}>{t.title}</p>
|
||||
// </span>
|
||||
// </Title>
|
||||
// </CustomFont>
|
||||
|
||||
// <Title level={2} style={{ color: '#ffffff', fontSize:'30px', marginBottom:'-5px' }}>
|
||||
// <span style={{ fontWeight: 'bold' }}>{t.subtitle}</span>
|
||||
// </Title>
|
||||
// <Title level={3} style={{ color: '#ffffff', fontSize:'45px', marginBottom:'0px' }}>
|
||||
// <span style={{ fontWeight: 'bold' }}>{t.description}</span>
|
||||
// </Title>
|
||||
// <Paragraph style={{ fontSize: 20, color: '#ffffff', maxWidth: '800px', margin: '20px auto' }}>
|
||||
// {t.descriptionn}
|
||||
// </Paragraph>
|
||||
// <Button
|
||||
// href="http://app.qwickpost.com/"
|
||||
// type="primary"
|
||||
// size="large"
|
||||
// style={{
|
||||
// background: 'rgba(255, 255, 255, 0)',
|
||||
// borderWidth: 3,
|
||||
// borderColor: '#ffffff',
|
||||
// fontSize:'18px',
|
||||
// fontWeight: 900,
|
||||
// marginTop: '20px'
|
||||
// }}
|
||||
// >
|
||||
// <p>{t.tryButton}</p>
|
||||
// <ArrowRightOutlined />
|
||||
// </Button>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default MainSection;
|
||||
|
||||
import React from 'react';
|
||||
import { Typography, Button } from 'antd';
|
||||
import { ArrowRightOutlined } from '@ant-design/icons';
|
||||
@ -84,7 +177,6 @@ import { useLanguage } from '../contexts/LanguageContext';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
|
||||
const CustomFont = styled.div`
|
||||
@font-face {
|
||||
font-family: 'CustomFont';
|
||||
@ -99,10 +191,14 @@ const MainSection = () => {
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
overflow: 'hidden'
|
||||
overflow: 'hidden',
|
||||
marginLeft: 'calc(-50vw + 50%)',
|
||||
marginRight: 'calc(-50vw + 50%)',
|
||||
position: 'relative'
|
||||
}}>
|
||||
{/* Фон с видео */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
@ -114,50 +210,74 @@ const MainSection = () => {
|
||||
<VideoBackground />
|
||||
</div>
|
||||
|
||||
{/* Контент */}
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
height: '100%',
|
||||
padding: '20px',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0)'
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
height: '100%',
|
||||
padding: '20px',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0)'
|
||||
}}>
|
||||
|
||||
<CustomFont>
|
||||
<Title style={{ color: '#ffffff', fontSize: '84px', marginBottom: '5px' }}>
|
||||
<Title style={{
|
||||
color: '#ffffff',
|
||||
fontSize: 'clamp(40px, 8vw, 84px)',
|
||||
marginBottom: '5px',
|
||||
wordBreak: 'break-word'
|
||||
}}>
|
||||
<span style={{ fontWeight: '900' }}>
|
||||
<p style={{marginBottom: '0px'}}>{t.title}</p>
|
||||
</span>
|
||||
</Title>
|
||||
</CustomFont>
|
||||
|
||||
<Title level={2} style={{ color: '#ffffff', fontSize:'30px', marginBottom:'-5px' }}>
|
||||
<Title level={2} style={{
|
||||
color: '#ffffff',
|
||||
fontSize: 'clamp(20px, 4vw, 30px)',
|
||||
marginBottom: '-5px'
|
||||
}}>
|
||||
<span style={{ fontWeight: 'bold' }}>{t.subtitle}</span>
|
||||
</Title>
|
||||
<Title level={3} style={{ color: '#ffffff', fontSize:'45px', marginBottom:'0px' }}>
|
||||
|
||||
<Title level={3} style={{
|
||||
color: '#ffffff',
|
||||
fontSize: 'clamp(24px, 5vw, 45px)',
|
||||
marginBottom: '0px'
|
||||
}}>
|
||||
<span style={{ fontWeight: 'bold' }}>{t.description}</span>
|
||||
</Title>
|
||||
<Paragraph style={{ fontSize: 20, color: '#ffffff', maxWidth: '800px', margin: '20px auto' }}>
|
||||
|
||||
<Paragraph style={{
|
||||
fontSize: 'clamp(16px, 2.5vw, 20px)',
|
||||
color: '#ffffff',
|
||||
maxWidth: '800px',
|
||||
margin: '20px auto',
|
||||
padding: '0 15px'
|
||||
}}>
|
||||
{t.descriptionn}
|
||||
</Paragraph>
|
||||
<Button
|
||||
|
||||
<Button
|
||||
href="http://app.qwickpost.com/"
|
||||
type="primary"
|
||||
size="large"
|
||||
style={{
|
||||
background: 'rgba(255, 255, 255, 0)',
|
||||
borderWidth: 3,
|
||||
borderColor: '#ffffff',
|
||||
fontSize:'18px',
|
||||
fontWeight: 900,
|
||||
marginTop: '20px'
|
||||
type="primary"
|
||||
size="large"
|
||||
style={{
|
||||
background: 'rgba(255, 255, 255, 0)',
|
||||
borderWidth: 3,
|
||||
borderColor: '#ffffff',
|
||||
fontSize: 'clamp(14px, 2vw, 18px)',
|
||||
fontWeight: 900,
|
||||
marginTop: '20px',
|
||||
height: 'auto',
|
||||
padding: '10px 20px'
|
||||
}}
|
||||
>
|
||||
<p>{t.tryButton}</p>
|
||||
<p style={{ margin: 0 }}>{t.tryButton}</p>
|
||||
<ArrowRightOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user