356 lines
16 KiB
TypeScript
356 lines
16 KiB
TypeScript
import { useLocale, useTranslations } from 'next-intl';
|
|
|
|
import Image from "next/image";
|
|
import { Link } from '@/i18n/navigation';
|
|
import { LocaleType } from '@/i18n/i18n';
|
|
|
|
const { BLACK_FRIDAY_PROMO } = process.env;
|
|
import LanguageSwitcher from '@/app/ui/components/LanguageSwitcher';
|
|
import { generateAuthUrl } from '@/app/helpers/generateAuthUrl';
|
|
|
|
export default function Home() {
|
|
const t = useTranslations();
|
|
const currentYear = new Date().getFullYear();
|
|
const locale = useLocale();
|
|
const loginUrl = generateAuthUrl(locale as LocaleType, 'login');
|
|
const signUpUrl = generateAuthUrl(locale as LocaleType, 'signup');
|
|
|
|
return (
|
|
<>
|
|
{BLACK_FRIDAY_PROMO && (
|
|
<div className="promo">
|
|
{t('promo.black_friday')}
|
|
</div>
|
|
)}
|
|
<div className="page-container">
|
|
<header className="header">
|
|
<Link href="/" className="logo">
|
|
<Image src="/img/ui/logo_home.svg" alt="mssg.me logo" width={34} height={35} />
|
|
</Link>
|
|
<ul className="auth-buttons">
|
|
<li>
|
|
<a href={loginUrl} className="right">{t('website_home.common.auth.login')}</a>
|
|
</li>
|
|
<li>
|
|
<a href={signUpUrl}>{t('website_home.common.auth.signup')}</a>
|
|
</li>
|
|
</ul>
|
|
</header>
|
|
<section className="section intro-section">
|
|
<div className="content">
|
|
<h1 className="main-title">
|
|
<span className="gradiented">{t('website_home.home.intro.title.1')}</span>
|
|
<span>{t('website_home.home.intro.title.2')}</span>
|
|
</h1>
|
|
<p>{t('website_home.home.intro.description')}</p>
|
|
<div className="button-container center">
|
|
<a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
|
|
</div>
|
|
<div className="bbg-label"><span>backed by</span> <Image src="/img/ui/google_for_startups_logo.svg" alt="Google for startups logotype" width={260} height={32} /></div>
|
|
{/* <Link
|
|
href="https://apps.apple.com/us/app/mssg-me-website-builder/id6454930943?itsct=apps_box_badge&itscg=30200"
|
|
style={{
|
|
display: "inline-block",
|
|
overflow: "hidden",
|
|
borderRadius: "13px",
|
|
width: "250px",
|
|
height: "83px",
|
|
marginTop: "20px"
|
|
}}
|
|
>
|
|
<Image
|
|
src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1705968000"
|
|
alt="Download on the App Store"
|
|
style={{
|
|
borderRadius: "13px",
|
|
width: "250px",
|
|
height: "83px"
|
|
}}
|
|
/>
|
|
</Link> */}
|
|
</div>
|
|
</section>
|
|
<section className="section presentation-section">
|
|
<div className="presentation-hero">
|
|
<Image
|
|
className="presentation-hero-left"
|
|
src="/img/home/presentation/presentation_left_378w.webp"
|
|
sizes="(max-width: 420px) 126px,
|
|
(max-width: 1920px) 252px,
|
|
378px"
|
|
alt="Contact me landing example"
|
|
width={253}
|
|
height={471}
|
|
/>
|
|
<Image
|
|
className="presentation-hero-right"
|
|
src="/img/home/presentation/presentation_right_378w.webp"
|
|
sizes="(max-width: 420px) 126px,
|
|
(max-width: 1920px) 252px,
|
|
378px"
|
|
alt="Shop landing example"
|
|
width={253}
|
|
height={471}
|
|
/>
|
|
<Image
|
|
className="presentation-hero-center"
|
|
src="/img/home/presentation/presentation_center_441w.webp"
|
|
sizes="(max-width: 420px) 147px,
|
|
(max-width: 1920px) 294px,
|
|
441px"
|
|
alt="Multilink landing example"
|
|
width={253}
|
|
height={471}
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className="content section-content">
|
|
<h2 className="gradiented">{t('website_home.home.presentation.title')}</h2>
|
|
<p>{t('website_home.home.presentation.description')}</p>
|
|
<div className="button-container center">
|
|
<a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="section multi-link-section">
|
|
<div className="multi-link-hero-container">
|
|
<div className="multi-link-hero">
|
|
<Image
|
|
src="/img/home/multilink/multilink_441w.webp"
|
|
sizes="(max-width: 420px) 147px,
|
|
(max-width: 1920px) 294px,
|
|
441px"
|
|
alt="Multi-link page example"
|
|
width={295}
|
|
height={550}
|
|
/>
|
|
<div className="multi-link-hero__icon instagram">
|
|
<div>
|
|
<div>
|
|
<Image src="/img/home/multilink/instagram.svg" alt="Instagram icon" width={57} height={57} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="multi-link-hero__icon youtube">
|
|
<div>
|
|
<div>
|
|
<Image src="/img/home/multilink/youtube.svg" alt="YouTube icon" width={43} height={30} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="multi-link-hero__icon tiktok">
|
|
<div>
|
|
<div>
|
|
<Image src="/img/home/multilink/tiktok.svg" alt="TikTok icon" width={42} height={42} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="multi-link-hero__icon twitter">
|
|
<div>
|
|
<div>
|
|
<Image src="/img/home/multilink/twitter.svg" alt="Twitter icon" width={27} height={27} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="content section-content">
|
|
<h2 className="gradiented section-title">{t('website_home.home.multi_link.title')}</h2>
|
|
<h3 className="section-subtitle">{t('website_home.home.multi_link.subtitle')}</h3>
|
|
<p>{t('website_home.home.multi_link.description')}</p>
|
|
<div className="button-container">
|
|
<a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="section messengers-section">
|
|
<div className="messengers-hero-container">
|
|
<div className="messengers-hero">
|
|
<Image
|
|
src="/img/home/messengers/messengers_441w.webp"
|
|
sizes="(max-width: 420px) 147px,
|
|
(max-width: 1920px) 294px,
|
|
441px"
|
|
alt="Page with messengers example"
|
|
width={294}
|
|
height={548}
|
|
/>
|
|
<div className="icon-hey">
|
|
<Image
|
|
src="/img/home/messengers/hey_192w.webp"
|
|
sizes="(max-width: 420px) 64px,
|
|
(max-width: 1920px) 128px,
|
|
192px"
|
|
alt="Hey icon"
|
|
width={128}
|
|
height={128}
|
|
/>
|
|
</div>
|
|
<div className="message">
|
|
<Image
|
|
src="/img/home/messengers/message_501w.webp"
|
|
sizes="(max-width: 420px) 167px,
|
|
(max-width: 1920px) 334px,
|
|
501px"
|
|
alt="User message image"
|
|
width={338}
|
|
height={77}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="content section-content">
|
|
<h2 className="gradiented section-title">{t('website_home.home.messengers.title')}</h2>
|
|
<h3 className="section-subtitle">{t('website_home.home.messengers.subtitle')}</h3>
|
|
<p>{t('website_home.home.messengers.description')}</p>
|
|
<div className="button-container">
|
|
<a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="section store-section">
|
|
<div className="store-hero-container">
|
|
<div className="store-hero">
|
|
<Image
|
|
src="/img/home/store/store_441w.webp"
|
|
sizes="(max-width: 420px) 147px,
|
|
(max-width: 1920px) 294px,
|
|
441px"
|
|
alt="Online store page example"
|
|
width={294}
|
|
height={549}
|
|
/>
|
|
<div className="icon-cart">
|
|
<Image
|
|
src="/img/home/store/cart_192w.webp"
|
|
sizes="(max-width: 420px) 64px,
|
|
(max-width: 1920px) 128px,
|
|
192px"
|
|
alt="Shopping cart icon"
|
|
width={129}
|
|
height={129}
|
|
/>
|
|
</div>
|
|
<div className="order">
|
|
<Image
|
|
src="/img/home/store/order_342w.webp"
|
|
sizes="(max-width: 420px) 114px,
|
|
(max-width: 1920px) 228px,
|
|
342px"
|
|
alt="Shopping cart icon"
|
|
width={228}
|
|
height={200}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="content section-content">
|
|
<h2 className="gradiented section-title">{t('website_home.home.store.title')}</h2>
|
|
<h3 className="section-subtitle">{t('website_home.home.store.subtitle')}</h3>
|
|
<p>{t('website_home.home.store.description')}</p>
|
|
<div className="button-container">
|
|
<a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="section builder-section">
|
|
<div className="builder-hero-container">
|
|
<div className="builder-hero">
|
|
<Image
|
|
src="/img/home/builder/builder_441w.webp"
|
|
sizes="(max-width: 420px) 147px,
|
|
(max-width: 1920px) 294px,
|
|
441px"
|
|
alt="Website builder example"
|
|
width={264}
|
|
height={568}
|
|
/>
|
|
<div className="blocks">
|
|
<Image
|
|
src="/img/home/builder/blocks_333w.webp"
|
|
sizes="(max-width: 420px) 111px,
|
|
(max-width: 1920px) 222px,
|
|
333px"
|
|
alt="Website builder blocks"
|
|
width={198}
|
|
height={287}
|
|
/>
|
|
</div>
|
|
<div className="customize">
|
|
<Image
|
|
src="/img/home/builder/customize_486w.webp"
|
|
sizes="(max-width: 420px) 162px,
|
|
(max-width: 1920px) 324px,
|
|
486px"
|
|
alt="Website builder blocks customization"
|
|
width={291}
|
|
height={196}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="content section-content">
|
|
<h2 className="gradiented section-title">{t('website_home.home.builder.title')}</h2>
|
|
<h3 className="section-subtitle">{t('website_home.home.builder.subtitle')}</h3>
|
|
<p>{t('website_home.home.builder.description')}</p>
|
|
<div className="button-container">
|
|
<a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="features-section">
|
|
<div className="content">
|
|
<h2 className="section-subtitle">{t('website_home.home.features.title')}</h2>
|
|
<ul className="features-list">
|
|
<li>
|
|
<h3 className="section-subtitle">{t('website_home.home.features.list.domain.title')}</h3>
|
|
<p>{t('website_home.home.features.list.domain.description')}</p>
|
|
</li>
|
|
<li>
|
|
<h3 className="section-subtitle">{t('website_home.home.features.list.qr.title')}</h3>
|
|
<p>{t('website_home.home.features.list.qr.description')}</p>
|
|
</li>
|
|
<li>
|
|
<h3 className="section-subtitle">{t('website_home.home.features.list.analytics.title')}</h3>
|
|
<p>{t('website_home.home.features.list.analytics.description')}</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<section className="footer-cta-section">
|
|
<div className="content">
|
|
<h2 className="gradiented">{t('website_home.home.footer.title')}</h2>
|
|
<p>{t('website_home.home.footer.description')}</p>
|
|
<div className="button-container center">
|
|
<a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer className="footer">
|
|
<div className="content">
|
|
<ul className="footer-list">
|
|
<li>
|
|
<Link href="/privacy-policy">{t('website_home.common.terms.politics')}</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/terms-of-use">{t('website_home.common.terms.terms')}</Link>
|
|
</li>
|
|
</ul>
|
|
<ul className="footer-lang-chooser">
|
|
<LanguageSwitcher />
|
|
</ul>
|
|
<span className="copyright">mssg.me © {currentYear}</span>
|
|
<span className="made-in">Made in Ukraine <Image width="17" height="12" src="/img/ui/ua_flag.gif" alt="Ukrainian flag" unoptimized /></span>
|
|
<div className="bbg-label-footer"><span>backed by</span> <Image src="/img/ui/google_for_startups_logo.svg" alt="Google for startups logotype" width={160} height={19} /></div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<div className="cookie-message" id="cookie-message">
|
|
<span>{t('website_home.common.cookies.message')}</span>
|
|
<Link href="/privacy-policy">{t('website_home.common.cookies.link')}</Link>
|
|
<div className="close-cookie" id="close-cookie"></div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|