feat: add product section components and integrate them into the homepage landing page
This commit is contained in:
Firman Ramdhani
@@ -0,0 +1,80 @@
|
||||
'use client';
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export function Contact() {
|
||||
const t = useTranslations();
|
||||
|
||||
const contactList = [
|
||||
{
|
||||
icon: 'uil-envelope-alt',
|
||||
titleKey: 'Contact.email',
|
||||
value: 'hello@pintumasuk.id',
|
||||
},
|
||||
{
|
||||
icon: 'uil-phone',
|
||||
titleKey: 'Contact.phone',
|
||||
value: '+62 812-3456-7890',
|
||||
},
|
||||
{
|
||||
icon: 'uil-map-marker',
|
||||
titleKey: 'Contact.office',
|
||||
valueKey: 'Contact.address',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="contact" id="contact">
|
||||
<div className="container">
|
||||
<div className="contact-card">
|
||||
<div className="contact-info">
|
||||
<span className="eyebrow eyebrow-light eyebrow-pill">
|
||||
<span className="dot"></span>
|
||||
{t('Contact.eyebrow')}
|
||||
</span>
|
||||
<h2 style={{ marginTop: '14px' }}>{t('Contact.title')}</h2>
|
||||
<p>{t('Contact.desc')}</p>
|
||||
|
||||
<div className="contact-list">
|
||||
{contactList.map((item, i) => (
|
||||
<div className="contact-item" key={i}>
|
||||
<div className="ci-icon">
|
||||
<i className={`uil ${item.icon}`}></i>
|
||||
</div>
|
||||
<div>
|
||||
<b>{(t as any)(item.titleKey)}</b>
|
||||
<span>{item.valueKey ? (t as any)(item.valueKey) : item.value}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="contact-form">
|
||||
<h3>{t('Contact.form.title')}</h3>
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
<div className="field-row">
|
||||
<div className="field">
|
||||
<label htmlFor="cname">{t('Contact.form.name')}</label>
|
||||
<input id="cname" type="text" placeholder={t('Contact.form.placeholderName')} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="cemail">{t('Contact.email')}</label>
|
||||
<input id="cemail" type="email" placeholder={t('Contact.form.placeholderEmail')} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="cmsg">{t('Contact.form.needs')}</label>
|
||||
<textarea id="cmsg" placeholder={t('Contact.form.placeholderNeeds')}></textarea>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-orange">
|
||||
{t('Contact.form.submit')}
|
||||
</button>
|
||||
<p className="form-note">{t('Contact.form.note')}</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export function Dashboard() {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<section className="dash-showcase" id="dashboard">
|
||||
<div className="container">
|
||||
<div className="dash-head">
|
||||
<h2>
|
||||
{t('Destinations.title21')}
|
||||
<br />
|
||||
{t('Destinations.title22')}
|
||||
</h2>
|
||||
<p>{t('Destinations.desc2')}</p>
|
||||
</div>
|
||||
|
||||
<svg width="0" height="0" style={{ position: 'absolute' }}>
|
||||
<defs>
|
||||
<linearGradient id="flowGrad" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" style={{ stopColor: 'var(--navy-900)' }} />
|
||||
<stop offset="100%" style={{ stopColor: 'var(--color-brand-2-500)' }} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div className="dash-flow">
|
||||
<div className="dash-flow-row">
|
||||
<div className="dash-source-card wide">
|
||||
<div className="dash-source-icon">
|
||||
<i className="uil uil-calendar-alt"></i>
|
||||
</div>
|
||||
<h4>{t('Destinations.apps.online.title')}</h4>
|
||||
<p>{t('Destinations.apps.online.desc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="dash-source-card wide">
|
||||
<div className="dash-source-icon">
|
||||
<i className="uil uil-money-stack"></i>
|
||||
</div>
|
||||
<h4>{t('Destinations.apps.cashier.title')}</h4>
|
||||
<p>{t('Destinations.apps.cashier.desc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="dash-flow-merge">
|
||||
<svg className="flow-curve" viewBox="0 0 60 100" preserveAspectRatio="none">
|
||||
<path className="flow-dash" d="M0,24 C 32,24 20,50 58,50" />
|
||||
<path className="flow-dash" d="M0,76 C 32,76 20,50 58,50" />
|
||||
</svg>
|
||||
<span className="flow-simple">
|
||||
<i className="uil uil-angle-double-down"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="dash-source-card wide">
|
||||
<div className="dash-source-icon">
|
||||
<i className="uil uil-newspaper"></i>
|
||||
</div>
|
||||
<h4>{t('Destinations.apps.pos.title')}</h4>
|
||||
<p>{t('Destinations.apps.pos.desc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="dash-flow-arrow">
|
||||
<svg className="flow-curve" viewBox="0 0 44 20" preserveAspectRatio="none">
|
||||
<path className="flow-dash" d="M1,10 C 14,1 20,19 43,11" />
|
||||
</svg>
|
||||
<span className="flow-simple">
|
||||
<i className="uil uil-angle-double-down"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="dash-source-card wide">
|
||||
<div className="dash-source-icon">
|
||||
<i className="uil uil-users-alt"></i>
|
||||
</div>
|
||||
<h4>{t('Destinations.apps.queue.title')}</h4>
|
||||
<p>{t('Destinations.apps.queue.desc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="dash-flow-arrow">
|
||||
<svg className="flow-curve" viewBox="0 0 44 20" preserveAspectRatio="none">
|
||||
<path className="flow-dash" d="M1,10 C 14,1 20,19 43,11 " />
|
||||
</svg>
|
||||
<span className="flow-simple">
|
||||
<i className="uil uil-angle-double-down"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="dash-source-card wide accent">
|
||||
<div className="dash-source-icon">
|
||||
<i className="uil uil-desktop"></i>
|
||||
</div>
|
||||
<h4>{t('Destinations.apps.admin.title')}</h4>
|
||||
<p>{t('Destinations.apps.admin.desc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { DestinationsCarousel } from '@/components/DestinationsCarousel';
|
||||
|
||||
export function Destinations() {
|
||||
const t = useTranslations();
|
||||
|
||||
const destinationsData = [
|
||||
{
|
||||
icon: 'uil-trees',
|
||||
titleKey: 'Destinations.items.themePark.title',
|
||||
descKey: 'Destinations.items.themePark.desc',
|
||||
},
|
||||
{
|
||||
icon: 'uil-ticket',
|
||||
titleKey: 'Destinations.items.event.title',
|
||||
descKey: 'Destinations.items.event.desc',
|
||||
},
|
||||
{
|
||||
icon: 'uil-archway',
|
||||
titleKey: 'Destinations.items.museum.title',
|
||||
descKey: 'Destinations.items.museum.desc',
|
||||
},
|
||||
{
|
||||
icon: 'uil-basketball',
|
||||
titleKey: 'Destinations.items.stadium.title',
|
||||
descKey: 'Destinations.items.stadium.desc',
|
||||
},
|
||||
{
|
||||
icon: 'uil-scenery',
|
||||
titleKey: 'Destinations.items.exhibition.title',
|
||||
descKey: 'Destinations.items.exhibition.desc',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="destinations" id="destinations">
|
||||
<div className="container">
|
||||
<DestinationsCarousel
|
||||
header={
|
||||
<div className="destinations-head">
|
||||
<h2>{t('Destinations.title')}</h2>
|
||||
<p>{t('Destinations.desc')}</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{destinationsData.map((item, i) => (
|
||||
<div className="dest-card" key={i}>
|
||||
<h4>{(t as any)(item.titleKey)}</h4>
|
||||
<p>{(t as any)(item.descKey)}</p>
|
||||
<div className="dest-icon">
|
||||
<i className={`uil ${item.icon}`}></i>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</DestinationsCarousel>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
'use client';
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export function Ecosystem() {
|
||||
const t = useTranslations();
|
||||
|
||||
useEffect(() => {
|
||||
const grid = document.getElementById('bentoGrid');
|
||||
let obs: IntersectionObserver;
|
||||
|
||||
if (grid) {
|
||||
const bars = grid.querySelectorAll<HTMLElement>('.report-bar');
|
||||
const ring = grid.querySelector<SVGElement>('.ring-progress');
|
||||
let done = false;
|
||||
|
||||
obs = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting && !done) {
|
||||
done = true;
|
||||
bars.forEach((bar, i) => {
|
||||
setTimeout(() => {
|
||||
if (bar.dataset.w) bar.style.width = bar.dataset.w;
|
||||
}, i * 150);
|
||||
});
|
||||
if (ring && ring.dataset.dash) {
|
||||
setTimeout(() => {
|
||||
ring.style.strokeDasharray = ring.dataset.dash!;
|
||||
}, 200);
|
||||
}
|
||||
obs.disconnect();
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.35 },
|
||||
);
|
||||
obs.observe(grid);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (obs) obs.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="ecosystem" id="ecosystem">
|
||||
<div className="container">
|
||||
<div className="ecosystem-head">
|
||||
<h2>{t('Ecosystem.title')}</h2>
|
||||
<p>{t('Ecosystem.desc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="bento" id="bentoGrid">
|
||||
{/* Ticketing */}
|
||||
<div className="bento-card bento-r1">
|
||||
<h3>{t('Ecosystem.ticketing.title')}</h3>
|
||||
<p>{t('Ecosystem.ticketing.desc')}</p>
|
||||
<div className="bento-illustration">
|
||||
<div className="ticket-rows">
|
||||
<div className="ticket-row">
|
||||
<div className="ticket-track drift-a" style={{ marginLeft: '-14px' }}>
|
||||
<span className="pill pill-outline">TX24409198-8798</span>
|
||||
<span className="pill pill-orange">TX24409198-8797</span>
|
||||
<span className="pill pill-lime">TX24409198-8798</span>
|
||||
<span className="pill pill-outline">TX24409198-8901</span>
|
||||
<span className="pill pill-navy">TX24409198-8811</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ticket-row">
|
||||
<div className="ticket-track drift-b" style={{ marginLeft: '-32px' }}>
|
||||
<span className="pill pill-lime">TX24409198-8801</span>
|
||||
<span className="pill pill-outline">TX24409198-8787</span>
|
||||
<span className="pill pill-navy">TX24409198-8786</span>
|
||||
<span className="pill pill-outline">TX24409198-8901</span>
|
||||
<span className="pill pill-outline">TX24409198-8881</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ticket-row">
|
||||
<div className="ticket-track drift-a" style={{ marginLeft: '-22px', animationDelay: '-1.4s' }}>
|
||||
<span className="pill pill-outline">TX24409198-8902</span>
|
||||
<span className="pill pill-lime">TX24409198-8788</span>
|
||||
<span className="pill pill-outline">TX24409198-8790</span>
|
||||
<span className="pill pill-orange">TX24409198-8905</span>
|
||||
<span className="pill pill-outline">TX24409198-8812</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Access Management */}
|
||||
<div className="bento-card bento-r2">
|
||||
<div className="bento-illustration access-illustration">
|
||||
<div className="chip-row">
|
||||
<div className="chip active">
|
||||
<span>{t('Ecosystem.stats.qr')}</span>
|
||||
<i className="uil uil-qrcode-scan"></i>
|
||||
</div>
|
||||
<div className="chip">
|
||||
<span>{t('Ecosystem.stats.gate')}</span>
|
||||
<i className="uil uil-monitor-heart-rate"></i>
|
||||
</div>
|
||||
<div className="chip">
|
||||
<span>{t('Ecosystem.stats.rfid')}</span>
|
||||
<i className="uil uil-rss-interface"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ring-wrap">
|
||||
<svg width="140" height="140" viewBox="0 0 100 100">
|
||||
<defs>
|
||||
<linearGradient id="rainbowGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#f66b0e" />
|
||||
<stop offset="70%" stopColor="#112b3c" />
|
||||
<stop offset="100%" stopColor="#205375" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="50" cy="50" r="34" fill="none" stroke="#E1E5E3" strokeWidth="9" />
|
||||
<circle
|
||||
className="ring-progress"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="34"
|
||||
fill="none"
|
||||
stroke="url(#rainbowGrad)"
|
||||
strokeWidth="9"
|
||||
strokeLinecap="round"
|
||||
data-dash="166 213.6"
|
||||
transform="rotate(-90 50 50)"
|
||||
/>
|
||||
</svg>
|
||||
<div className="ring-text">
|
||||
<b>0.4s</b>
|
||||
<small>{t('Ecosystem.stats.avg')}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>{t('Ecosystem.access.title')}</h3>
|
||||
<p>{t('Ecosystem.access.desc')}</p>
|
||||
</div>
|
||||
|
||||
{/* Visitor Operations */}
|
||||
<div className="bento-card bento-r3">
|
||||
<div className="bento-illustration visitor-illustration">
|
||||
<div className="avatar-row">
|
||||
<div className="avatar-stack">
|
||||
<div className="avatar" style={{ background: '#b9f001' }}></div>
|
||||
<div className="avatar" style={{ background: '#f66b0e' }}></div>
|
||||
<div className="avatar" style={{ background: '#112b3c' }}></div>
|
||||
<div className="avatar" style={{ background: '#e1e5e3' }}></div>
|
||||
</div>
|
||||
<span>{t('Ecosystem.stats.queue')}</span>
|
||||
</div>
|
||||
<div className="zone-grid">
|
||||
<div className="zone-cell" style={{ background: '#e1e5e3' }}></div>
|
||||
<div className="zone-cell" style={{ background: '#e1e5e3' }}></div>
|
||||
<div className="zone-cell" style={{ background: '#205375' }}></div>
|
||||
<div className="zone-cell" style={{ background: '#e1e5e3' }}></div>
|
||||
<div className="zone-cell" style={{ background: '#e1e5e3' }}></div>
|
||||
<div className="zone-cell" style={{ background: '#b9f001' }}></div>
|
||||
<div className="zone-cell" style={{ background: '#e1e5e3' }}></div>
|
||||
<div className="zone-cell" style={{ background: 'linear-gradient(135deg, #205375, #112b3c)' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>{t('Ecosystem.visitor.title')}</h3>
|
||||
<p>{t('Ecosystem.visitor.desc')}</p>
|
||||
</div>
|
||||
|
||||
{/* Report */}
|
||||
<div className="bento-card bento-r4">
|
||||
<h3 style={{ marginBottom: '8px' }}>{t('Ecosystem.report.title')}</h3>
|
||||
<p style={{ marginBottom: '26px' }}>{t('Ecosystem.report.desc')}</p>
|
||||
<div className="report-bars">
|
||||
{[
|
||||
{ w: '150px', bg: '#b9f001', val: 'Rp32.5M', key: 'Ecosystem.stats.revenue' },
|
||||
{ w: '220px', bg: '#f66b0e', val: '1,284', key: 'Ecosystem.stats.visitors' },
|
||||
{ w: '300px', bg: '#112b3c', val: '1,120,240', key: 'Ecosystem.stats.checkin' },
|
||||
].map((item, idx) => (
|
||||
<div className="report-bar-row" key={idx}>
|
||||
<div className="report-bar" data-w={item.w} style={{ background: item.bg }}></div>
|
||||
<div className="report-bar-value">
|
||||
<b>{item.val}</b>
|
||||
<small>{(t as any)(item.key)}</small>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export function Footer() {
|
||||
const t = useTranslations();
|
||||
|
||||
const footerLinks = [
|
||||
{ labelKey: 'Nav.home', href: '#' },
|
||||
{ labelKey: 'Nav.solutions', href: '#ecosystem' },
|
||||
{ labelKey: 'Nav.industries', href: '#destinations' },
|
||||
{ labelKey: 'Nav.pricing', href: '#pricing' },
|
||||
{ labelKey: 'Nav.contact', href: '#contact' },
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: 'uil-envelope-alt', href: '#' },
|
||||
{ icon: 'uil-phone', href: '#' },
|
||||
{ icon: 'uil-youtube', href: '#' },
|
||||
];
|
||||
|
||||
return (
|
||||
<footer className="footer">
|
||||
<div className="container">
|
||||
<div className="footer-top">
|
||||
<div className="footer-brand">
|
||||
<div className="brand">
|
||||
<a href="#">
|
||||
<div className="brand-mark">
|
||||
<img src="/brand/logo-primary.svg" alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<span className="brand-name" style={{ color: '#fff' }}></span>
|
||||
</div>
|
||||
<p>{t('Footer.desc')}</p>
|
||||
<p className="address">{t('Contact.address')}</p>
|
||||
</div>
|
||||
<div className="footer-cols">
|
||||
<div className="footer-col">
|
||||
<h5>{t('Footer.links')}</h5>
|
||||
{footerLinks.map((link, i) => (
|
||||
<a href={link.href} key={i}>
|
||||
{(t as any)(link.labelKey)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="footer-col">
|
||||
<h5>{t('Nav.contact')}</h5>
|
||||
<a href="mailto:hello@pintumasuk.id">hello@pintumasuk.id</a>
|
||||
<a href="tel:+6281234567890">+62 812-3456-7890</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom">
|
||||
<p>
|
||||
© <span>{new Date().getFullYear()}</span> {t('Footer.copyright')}
|
||||
</p>
|
||||
<div className="footer-social">
|
||||
{socialLinks.map((social, i) => (
|
||||
<a href={social.href} key={i}>
|
||||
<i className={`uil ${social.icon}`}></i>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export function Hero() {
|
||||
const t = useTranslations();
|
||||
|
||||
const statsData = [
|
||||
{
|
||||
icon: 'uil-clock-eight',
|
||||
labelKey: 'Hero.stats.timeAccess',
|
||||
value: (
|
||||
<>
|
||||
0.4<span>{t('Hero.stats.seconds')}</span>
|
||||
</>
|
||||
),
|
||||
subKey: 'Hero.stats.avgValidation',
|
||||
},
|
||||
{
|
||||
icon: 'uil-ticket',
|
||||
labelKey: 'Hero.stats.ticketsSold',
|
||||
value: '1.249',
|
||||
subKey: 'Hero.stats.todayAllChannels',
|
||||
},
|
||||
{
|
||||
icon: 'uil-sync',
|
||||
labelKey: 'Hero.stats.sync',
|
||||
value: '12',
|
||||
subKey: 'Hero.stats.txSynced',
|
||||
},
|
||||
{
|
||||
icon: 'uil-sliders-v',
|
||||
labelKey: 'Hero.stats.visitorOps',
|
||||
bars: [40, 70, 55, 90],
|
||||
subKey: 'Hero.stats.activeZones',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="hero">
|
||||
<div className="container">
|
||||
<div className="hero-inner">
|
||||
<h1>
|
||||
{t('Hero.title1')}
|
||||
<br />
|
||||
{t('Hero.title2')}
|
||||
</h1>
|
||||
|
||||
<div className="stat-row">
|
||||
{statsData.map((stat, i) => (
|
||||
<div className="stat-card" key={i}>
|
||||
<div className="stat-icon">
|
||||
<i className={`uil ${stat.icon}`}></i>
|
||||
</div>
|
||||
<div className="stat-label">{(t as any)(stat.labelKey)}</div>
|
||||
|
||||
{stat.bars ? (
|
||||
<div className="stat-bars" style={{ marginTop: '12px' }}>
|
||||
{stat.bars.map((h, j) => (
|
||||
<span key={j} style={{ height: `${h}%` }}></span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="stat-value">{stat.value}</div>
|
||||
)}
|
||||
|
||||
<div className="stat-sub">{(t as any)(stat.subKey)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="hero-body">
|
||||
<span className="eyebrow eyebrow-light eyebrow-pill">
|
||||
<span className="dot"></span>
|
||||
{t('Hero.subtitle')}
|
||||
</span>
|
||||
<p>{t('Hero.desc')}</p>
|
||||
<a href="#why" className="btn btn-navy">
|
||||
{t('Hero.cta')}
|
||||
<i className="uil uil-arrow-down-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
'use client';
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { LanguageSwitcher } from '@/components/LanguageSwitcher';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export function Navbar() {
|
||||
const t = useTranslations();
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const floating = window.scrollY > 60;
|
||||
setIsScrolled(floating);
|
||||
document.body.classList.toggle('nav-is-floating', floating);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
handleScroll();
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={`nav-wrapper ${isScrolled ? 'floating' : ''}`}>
|
||||
<div className="container">
|
||||
<nav className="nav">
|
||||
<div className="brand">
|
||||
<a href="#">
|
||||
<div className="brand-mark">
|
||||
<img src="/brand/logo-primary.svg" alt="" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<button className="nav-toggle" aria-label="Open menu" onClick={() => setIsMenuOpen(!isMenuOpen)}>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M4 7h16M4 12h16M4 17h16" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className={`nav-links ${isMenuOpen ? 'open' : ''}`} id="navLinks" onClick={() => setIsMenuOpen(false)}>
|
||||
<a href="#" style={{ color: '#fff', opacity: 0.85 }}>
|
||||
{t('Nav.home')}
|
||||
</a>
|
||||
<a href="#ecosystem" style={{ color: '#fff', opacity: 0.85 }}>
|
||||
{t('Nav.solutions')}
|
||||
</a>
|
||||
<a href="#destinations" style={{ color: '#fff', opacity: 0.85 }}>
|
||||
{t('Nav.industries')}
|
||||
</a>
|
||||
<a href="#pricing" style={{ color: '#fff', opacity: 0.85 }}>
|
||||
{t('Nav.pricing')}
|
||||
</a>
|
||||
<a href="#contact" style={{ color: '#fff', opacity: 0.85 }}>
|
||||
{t('Nav.contact')}
|
||||
</a>
|
||||
<a href="#contact" className="btn btn-orange">
|
||||
{t('Nav.demo')}
|
||||
</a>
|
||||
<div className="nav-divider"></div>
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export function Pricing() {
|
||||
const t = useTranslations();
|
||||
|
||||
const pricingPlans = [
|
||||
{
|
||||
key: 'rental',
|
||||
tags: [0, 1, 2],
|
||||
features: ['f1', 'f2', 'f3', 'f4', 'f5'],
|
||||
},
|
||||
{
|
||||
key: 'subscription',
|
||||
tags: [0, 1],
|
||||
features: ['f1', 'f2', 'f3', 'f4', 'f5'],
|
||||
},
|
||||
{
|
||||
key: 'onPremise',
|
||||
tags: [0, 1],
|
||||
features: ['f1', 'f2', 'f3', 'f4', 'f5'],
|
||||
},
|
||||
{
|
||||
key: 'buyOut',
|
||||
tags: [0, 1, 2],
|
||||
features: ['f1', 'f2', 'f3', 'f4', 'f5'],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="pricing" id="pricing">
|
||||
<div className="container-lg">
|
||||
<div className="pricing-head">
|
||||
<h2>
|
||||
{t('Pricing.title1')}
|
||||
<br />
|
||||
{t('Pricing.title2')}
|
||||
</h2>
|
||||
<p>{t('Pricing.desc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="pricing-grid">
|
||||
{pricingPlans.map((plan) => (
|
||||
<div className="price-card" key={plan.key}>
|
||||
<h3>{(t as any)(`Pricing.${plan.key}.title`)}</h3>
|
||||
<div className="price-tags">
|
||||
{plan.tags.map((tagIndex) => (
|
||||
<span className="tag" key={tagIndex}>
|
||||
{(t as any)(`Pricing.${plan.key}.tags.${tagIndex}`)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="price-desc">{(t as any)(`Pricing.${plan.key}.desc`)}</p>
|
||||
<a href="#contact" className="btn btn-orange">
|
||||
{t('Pricing.contactUs')}
|
||||
</a>
|
||||
<span className="feat-label">{t('Pricing.whatYouGet')}</span>
|
||||
<ul className="feat-list">
|
||||
{plan.features.map((featKey) => (
|
||||
<li key={featKey}>
|
||||
<i className="uil uil-check-circle"></i>
|
||||
{(t as any)(`Pricing.${plan.key}.${featKey}`)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export function Why() {
|
||||
const t = useTranslations();
|
||||
|
||||
const reasonsData = [
|
||||
{
|
||||
icon: 'uil-wifi-slash',
|
||||
titleKey: 'Why.items.offline.title',
|
||||
descKey: 'Why.items.offline.desc',
|
||||
},
|
||||
{
|
||||
icon: 'uil-bolt',
|
||||
titleKey: 'Why.items.speed.title',
|
||||
descKey: 'Why.items.speed.desc',
|
||||
},
|
||||
{
|
||||
icon: 'uil-expand-arrows-alt',
|
||||
titleKey: 'Why.items.flexibility.title',
|
||||
descKey: 'Why.items.flexibility.desc',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="why" id="why">
|
||||
<div className="container why-grid">
|
||||
<div className="why-sticky">
|
||||
<h2>{t('Why.title')}</h2>
|
||||
<p>{t('Why.desc')}</p>
|
||||
<div className="why-arrow">
|
||||
<i className="uil uil-arrow-up-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="why-cards">
|
||||
{reasonsData.map((reason, i) => (
|
||||
<div className="why-card" key={i}>
|
||||
<div className="why-card-icon">
|
||||
<i className={`uil ${reason.icon}`}></i>
|
||||
</div>
|
||||
<h3>{(t as any)(reason.titleKey)}</h3>
|
||||
<p>{(t as any)(reason.descKey)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user