404 lines
16 KiB
JavaScript
404 lines
16 KiB
JavaScript
// import React from 'react'
|
||
// import { Facebook, Twitter, Instagram, Linkedin, Mail } from 'lucide-react'
|
||
|
||
|
||
// export default function Footer() {
|
||
// return (
|
||
// <footer className="bg-gray-100 mt-8">
|
||
// <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||
// <div className="xl:grid xl:grid-cols-3 xl:gap-8">
|
||
// <div className="space-y-8 xl:col-span-1">
|
||
// <p className="text-gray-500 text-base">
|
||
// Профессиональная платформа продвижения соц сетей. Упростите ваш социальный маркетинг с qWickPost.
|
||
// </p>
|
||
// <div className="flex space-x-6">
|
||
// <a href="#" className="text-gray-400 hover:text-gray-500">
|
||
// <span className="sr-only">Facebook</span>
|
||
// <Facebook className="h-6 w-6" />
|
||
// </a>
|
||
// <a href="#" className="text-gray-400 hover:text-gray-500">
|
||
// <span className="sr-only">Twitter</span>
|
||
// <Twitter className="h-6 w-6" />
|
||
// </a>
|
||
// <a href="#" className="text-gray-400 hover:text-gray-500">
|
||
// <span className="sr-only">Instagram</span>
|
||
// <Instagram className="h-6 w-6" />
|
||
// </a>
|
||
// <a href="#" className="text-gray-400 hover:text-gray-500">
|
||
// <span className="sr-only">LinkedIn</span>
|
||
// <Linkedin className="h-6 w-6" />
|
||
// </a>
|
||
// </div>
|
||
// </div>
|
||
// <div className="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
|
||
// <div className="md:grid md:grid-cols-2 md:gap-8">
|
||
// <div>
|
||
// <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">Решения</h3>
|
||
// <ul role="list" className="mt-4 space-y-4">
|
||
// <li>
|
||
// <a href="#" className="text-base text-gray-500 hover:text-gray-900">
|
||
// Планирование
|
||
// </a>
|
||
// </li>
|
||
// <li>
|
||
// <a href="#" className="text-base text-gray-500 hover:text-gray-900">
|
||
// Аналитика
|
||
// </a>
|
||
// </li>
|
||
// <li>
|
||
// <a href="#" className="text-base text-gray-500 hover:text-gray-900">
|
||
// Публикации
|
||
// </a>
|
||
// </li>
|
||
// </ul>
|
||
// </div>
|
||
// <div className="mt-12 md:mt-0">
|
||
// <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">Поддержка</h3>
|
||
// <ul role="list" className="mt-4 space-y-4">
|
||
// <li>
|
||
// <a href="#" className="text-base text-gray-500 hover:text-gray-900">
|
||
// Цены
|
||
// </a>
|
||
// </li>
|
||
// <li>
|
||
// <a href="#" className="text-base text-gray-500 hover:text-gray-900">
|
||
// Документация
|
||
// </a>
|
||
// </li>
|
||
// <li>
|
||
// <a href="#" className="text-base text-gray-500 hover:text-gray-900">
|
||
// Руководства
|
||
// </a>
|
||
// </li>
|
||
// </ul>
|
||
// </div>
|
||
// </div>
|
||
// <div className="md:grid md:grid-cols-2 md:gap-8">
|
||
// <div>
|
||
// <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">Компания</h3>
|
||
// <ul role="list" className="mt-4 space-y-4">
|
||
// <li>
|
||
// <a href="#" className="text-base text-gray-500 hover:text-gray-900">
|
||
// О нас
|
||
// </a>
|
||
// </li>
|
||
// <li>
|
||
// <a href="#" className="text-base text-gray-500 hover:text-gray-900">
|
||
// Блог
|
||
// </a>
|
||
// </li>
|
||
// <li>
|
||
// <a href="#" className="text-base text-gray-500 hover:text-gray-900">
|
||
// Партнеры
|
||
// </a>
|
||
// </li>
|
||
// </ul>
|
||
// </div>
|
||
// <div className="mt-12 md:mt-0">
|
||
// <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">Контакты</h3>
|
||
// <ul role="list" className="mt-4 space-y-4">
|
||
// <li className="flex">
|
||
// <Mail className="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
|
||
// <span className="ml-3 text-base text-gray-500">business@qwickpost.com</span>
|
||
// </li>
|
||
// <li className="flex">
|
||
// <span className="ml-3 text-base text-gray-500">Уагадугу, Буркина-Фасо</span>
|
||
// </li>
|
||
// <li className="flex">
|
||
// <span className="ml-3 text-base text-gray-500">Поддержка 24/7</span>
|
||
// </li>
|
||
// </ul>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
// <div className="mt-12 border-t border-gray-200 pt-8">
|
||
// <p className="text-base text-gray-400 xl:text-center">
|
||
// © 2024 qWickPost. Все права защищены.
|
||
// </p>
|
||
// </div>
|
||
// </div>
|
||
// </footer>
|
||
// )
|
||
// }
|
||
|
||
|
||
// import React from 'react';
|
||
// import { Facebook, Twitter, Instagram, Linkedin} from 'lucide-react';
|
||
// import translations from '../translations.json';
|
||
// import { useLanguage } from '../contexts/LanguageContext';
|
||
// import { Link } from 'react-router-dom';
|
||
// import { CustomLink } from './CustomLink';
|
||
// import { ScrollLink } from './ScrollLink';
|
||
|
||
// export default function Footer() {
|
||
// const { language } = useLanguage();
|
||
// const t = translations.footer[language];
|
||
|
||
// const socialIcons = {
|
||
// facebook: Facebook,
|
||
// twitter: Twitter,
|
||
// instagram: Instagram,
|
||
// linkedin: Linkedin
|
||
// };
|
||
|
||
// const renderSupportLink = (key, value) => {
|
||
// if (key === 'pricing') {
|
||
// return (
|
||
// <CustomLink to="/pricing" className="text-base text-gray-500 hover:text-gray-900">
|
||
// {value}
|
||
// </CustomLink>
|
||
// );
|
||
// }
|
||
// if (key === 'documentation') {
|
||
// return (
|
||
// <a href="/#contacts-section" className="text-base text-gray-500 hover:text-gray-900">
|
||
// {value}
|
||
// </a>
|
||
// );
|
||
// }
|
||
// return (
|
||
// <a href="#" className="text-base text-gray-500 hover:text-gray-900">
|
||
// {value}
|
||
// </a>
|
||
// );
|
||
// };
|
||
|
||
// return (
|
||
// <footer className="bg-gray-100 mt-8">
|
||
// <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||
// <div className="xl:grid xl:grid-cols-3 xl:gap-8">
|
||
// <div className="space-y-8 xl:col-span-1">
|
||
// <p className="text-gray-500 text-base">
|
||
// {t.description}
|
||
// </p>
|
||
// <div className="flex space-x-6">
|
||
// {Object.entries(t.socials).map(([key, value]) => {
|
||
// const Icon = socialIcons[key];
|
||
// return (
|
||
// <a key={key} href="#" className="text-gray-400 hover:text-gray-500">
|
||
// <span className="sr-only">{value}</span>
|
||
// <Icon className="h-6 w-6" />
|
||
// </a>
|
||
// );
|
||
// })}
|
||
// </div>
|
||
// </div>
|
||
|
||
// <div className="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
|
||
// <div className="md:grid md:grid-cols-2 md:gap-8">
|
||
// <div>
|
||
// <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
|
||
// {t.sections.solutions.title}
|
||
// </h3>
|
||
// <ul role="list" className="mt-4 space-y-4">
|
||
// {Object.entries(t.sections.solutions.links).map(([key, value]) => (
|
||
// <li key={key}>
|
||
// <a href="/#usability-section" className="text-base text-gray-500 hover:text-gray-900">
|
||
// {value}
|
||
// </a>
|
||
// </li>
|
||
// ))}
|
||
// </ul>
|
||
// </div>
|
||
// <div className="mt-12 md:mt-0">
|
||
// <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
|
||
// {t.sections.support.title}
|
||
// </h3>
|
||
// <ul role="list" className="mt-4 space-y-4">
|
||
// {Object.entries(t.sections.support.links).map(([key, value]) => (
|
||
// <li key={key}>
|
||
// {renderSupportLink(key, value)}
|
||
// </li>
|
||
// ))}
|
||
// </ul>
|
||
// </div>
|
||
// </div>
|
||
// <div className="md:grid md:grid-cols-2 md:gap-8">
|
||
// <div className="mt-12 md:mt-0">
|
||
// <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
|
||
// {t.sections.contacts.title}
|
||
// </h3>
|
||
// <ul role="list" className="mt-4 space-y-4">
|
||
// <li className="flex">
|
||
// {/* <Mail className="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" /> */}
|
||
// <span className="ml-3 text-base text-gray-500">
|
||
// {t.sections.contacts.email}
|
||
// </span>
|
||
// </li>
|
||
// <li className="flex">
|
||
// <span className="ml-3 text-base text-gray-500">
|
||
// {t.sections.contacts.address}
|
||
// </span>
|
||
// </li>
|
||
// <li className="flex">
|
||
// <span className="ml-3 text-base text-gray-500">
|
||
// {t.sections.contacts.support}
|
||
// </span>
|
||
// </li>
|
||
// </ul>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
// <div className="mt-12 border-t border-gray-200 pt-8">
|
||
// <p className="text-base text-gray-400 xl:text-center">
|
||
// {t.copyright}
|
||
// </p>
|
||
// </div>
|
||
// </div>
|
||
// </footer>
|
||
// );
|
||
// }
|
||
|
||
|
||
import React from 'react';
|
||
import { Facebook, Twitter, Instagram, Linkedin} from 'lucide-react';
|
||
import { FacebookFilled, XOutlined, InstagramOutlined, SendOutlined } from '@ant-design/icons';
|
||
import translations from '../translations.json';
|
||
import { useLanguage } from '../contexts/LanguageContext';
|
||
import { CustomLink } from './CustomLink';
|
||
|
||
export default function Footer() {
|
||
const { language } = useLanguage();
|
||
const t = translations.footer[language];
|
||
|
||
const socialIcons = {
|
||
facebook: FacebookFilled,
|
||
twitter: XOutlined,
|
||
instagram: InstagramOutlined,
|
||
telegramm: SendOutlined
|
||
};
|
||
|
||
// Здесь можно будет настроить URL-адреса социальных сетей
|
||
const socialLinks = {
|
||
facebook: "https://www.facebook.com/profile.php?id=61566725398725", // Заменить на реальный URL Facebook
|
||
twitter: "https://x.com/home", // Заменить на реальный URL Twitter
|
||
instagram: "https://www.instagram.com/qwick_post", // Заменить на реальный URL Instagram
|
||
telegramm: "https://web.telegram.org/" // Заменить на реальный URL LinkedIn
|
||
};
|
||
|
||
const renderSupportLink = (key, value) => {
|
||
if (key === 'pricing') {
|
||
return (
|
||
<CustomLink to="/pricing" className="text-base text-gray-500 hover:text-gray-900">
|
||
{value}
|
||
</CustomLink>
|
||
);
|
||
}
|
||
if (key === 'documentation') {
|
||
return (
|
||
<a href="/#contacts-section" className="text-base text-gray-500 hover:text-gray-900">
|
||
{value}
|
||
</a>
|
||
);
|
||
}
|
||
return (
|
||
<a href="#" className="text-base text-gray-500 hover:text-gray-900">
|
||
{value}
|
||
</a>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<footer className="bg-gray-100 mt-8">
|
||
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
|
||
<div className="space-y-8 xl:col-span-1">
|
||
<p className="text-gray-500 text-base">
|
||
{t.description}
|
||
</p>
|
||
<div className="flex space-x-6">
|
||
{Object.entries(t.socials).map(([key, value]) => {
|
||
const Icon = socialIcons[key];
|
||
return (
|
||
<a
|
||
key={key}
|
||
href={socialLinks[key]}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-gray-400 hover:text-gray-500"
|
||
title={value}
|
||
>
|
||
<span className="sr-only">{value}</span>
|
||
<Icon className="h-6 w-6" />
|
||
</a>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
|
||
<div className="md:grid md:grid-cols-2 md:gap-8">
|
||
<div>
|
||
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
|
||
{t.sections.solutions.title}
|
||
</h3>
|
||
<ul role="list" className="mt-4 space-y-4">
|
||
{Object.entries(t.sections.solutions.links).map(([key, value]) => (
|
||
<li key={key}>
|
||
<a href="/solutions" className="text-base text-gray-500 hover:text-gray-900">
|
||
{value}
|
||
</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
<div className="mt-12 md:mt-0">
|
||
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
|
||
{t.sections.support.title}
|
||
</h3>
|
||
<ul role="list" className="mt-4 space-y-4">
|
||
{Object.entries(t.sections.support.links).map(([key, value]) => (
|
||
<li key={key}>
|
||
{renderSupportLink(key, value)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div className="md:grid md:grid-cols-2 md:gap-8">
|
||
<div className="mt-12 md:mt-0">
|
||
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
|
||
{t.sections.contacts.title}
|
||
</h3>
|
||
<ul role="list" className="mt-4 space-y-4">
|
||
<li className="flex">
|
||
<a
|
||
href={`mailto:${t.sections.contacts.email}`}
|
||
className="ml-3 text-base text-gray-500 hover:text-gray-900"
|
||
>
|
||
{t.sections.contacts.email}
|
||
</a>
|
||
</li>
|
||
<li className="flex">
|
||
<a
|
||
href="https://www.google.com/maps/place/%D0%91%D1%83%D1%80%D0%BA%D0%B8%D0%BD%D0%B0-%D0%A4%D0%B0%D1%81%D0%BE/@12.2400091,-4.1961905,7z/data=!3m1!4b1!4m6!3m5!1s0xe2dca26d5a6709b:0x27930aed46836dab!8m2!3d12.238333!4d-1.561593!16zL20vMDE2OTk?entry=ttu&g_ep=EgoyMDI0MTExOS4yIKXMDSoASAFQAw%3D%3D" // Заменить на реальный URL карты
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="ml-3 text-base text-gray-500 hover:text-gray-900"
|
||
>
|
||
{t.sections.contacts.address}
|
||
</a>
|
||
</li>
|
||
<li className="flex">
|
||
{/* <a
|
||
className="ml-3 text-base text-gray-500 hover:text-gray-900"
|
||
>
|
||
{t.sections.contacts.support}
|
||
</a> */}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-12 border-t border-gray-200 pt-8">
|
||
<p className="text-base text-gray-400 xl:text-center">
|
||
{t.copyright}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
} |