rework components v2
This commit is contained in:
Kuba Pyla
@@ -1,25 +1,26 @@
|
||||
import type {Metadata} from 'next';
|
||||
import {getTranslations} from 'next-intl/server';
|
||||
import {DemoBrowser} from '@/components/DemoBrowser';
|
||||
import {DemoSubnav} from '@/components/DemoSubnav';
|
||||
import {SectionHeader} from '@/components/SectionHeader';
|
||||
import {orderedDemos} from '@/config/content';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Dema konfiguratorów 3D | Ultifide',
|
||||
description: 'Lista interaktywnych dem konfiguratorów 3D Ultifide z podglądem biurka, wnętrz i drzwi.'
|
||||
};
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const t = await getTranslations('metadata');
|
||||
|
||||
return {
|
||||
title: t('demosPageTitle'),
|
||||
description: t('demosPageDescription')
|
||||
};
|
||||
}
|
||||
|
||||
export default async function DemosPage() {
|
||||
const t = await getTranslations('demosPage');
|
||||
|
||||
export default function DemosPage() {
|
||||
return (
|
||||
<main>
|
||||
<section className="sectionBand sectionBand--light demosPage">
|
||||
<div className="container demosContainer">
|
||||
<SectionHeader
|
||||
eyebrow="Dema konfiguratorów"
|
||||
title="Sprawdź konfiguratory 3D w jednym miejscu"
|
||||
description="Wybierz demo z listy, przetestuj je od razu w podglądzie, a potem przejdź do strony z opisem zastosowania i korzyści."
|
||||
/>
|
||||
<DemoSubnav demos={orderedDemos} hrefType="browser" />
|
||||
<SectionHeader title={t('title')} description={t('description')} />
|
||||
<DemoBrowser demos={orderedDemos} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -5,8 +5,7 @@ import messages from '../../../../messages/pl.json';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: messages.metadata.deskTitle,
|
||||
description:
|
||||
'Poznaj konfigurator 3D, który zwiększa konwersję i pozwala klientom tworzyć własne biurka regulowane w czasie rzeczywistym.'
|
||||
description: messages.metadata.deskDescription
|
||||
};
|
||||
|
||||
export default function DeskDemoPage() {
|
||||
|
||||
@@ -5,8 +5,7 @@ import messages from '../../../../messages/pl.json';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: messages.metadata.doorTitle,
|
||||
description:
|
||||
'Poznaj konfigurator 3D drzwi, który pozwala klientom dobrać model, kolor, przeszklenie, klamkę i detale w czasie rzeczywistym.'
|
||||
description: messages.metadata.doorDescription
|
||||
};
|
||||
|
||||
export default function DoorDemoPage() {
|
||||
|
||||
@@ -5,8 +5,7 @@ import messages from '../../../../messages/pl.json';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: messages.metadata.roomTitle,
|
||||
description:
|
||||
'Poznaj konfigurator 3D, który pozwala klientom projektować całe pomieszczenia i zestawy mebli w czasie rzeczywistym.'
|
||||
description: messages.metadata.roomDescription
|
||||
};
|
||||
|
||||
export default function RoomDemoPage() {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type {Metadata} from 'next';
|
||||
import localFont from 'next/font/local';
|
||||
import messages from '../../../messages/pl.json';
|
||||
import {NextIntlClientProvider} from 'next-intl';
|
||||
import {getMessages} from 'next-intl/server';
|
||||
import {notFound} from 'next/navigation';
|
||||
@@ -36,7 +37,7 @@ const poppins = localFont({
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
default: 'Konfiguratory 3D | Ultifide',
|
||||
default: messages.metadata.defaultTitle,
|
||||
template: '%s'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -24,7 +24,6 @@ export default function HomePage() {
|
||||
<section className="hero sectionBand sectionBand--light">
|
||||
<div className="container hero__grid">
|
||||
<div className="hero__content">
|
||||
<p className="eyebrow">{homeContent.hero.eyebrow}</p>
|
||||
<h1>{homeContent.hero.title}</h1>
|
||||
<p>{homeContent.hero.description}</p>
|
||||
<div className="buttonRow">
|
||||
@@ -139,7 +138,7 @@ export default function HomePage() {
|
||||
|
||||
<section id="faq" className="sectionBand sectionBand--tint">
|
||||
<div className="container narrow">
|
||||
<SectionHeader title="FAQ" />
|
||||
<SectionHeader title={homeContent.faqTitle} />
|
||||
<Faq items={marketingFaq} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
+208
-23
@@ -95,12 +95,12 @@ p {
|
||||
}
|
||||
|
||||
.siteHeader {
|
||||
--site-header-height: 78px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
border-bottom: 1px solid rgba(157, 158, 180, 0.22);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
backdrop-filter: blur(14px);
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.siteHeader__inner {
|
||||
@@ -118,6 +118,12 @@ p {
|
||||
width: 154px;
|
||||
}
|
||||
|
||||
.siteHeader__logo svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 44px;
|
||||
}
|
||||
|
||||
.logoMark {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@@ -240,13 +246,14 @@ p {
|
||||
}
|
||||
|
||||
.hero__content,
|
||||
.demoHero__grid > div {
|
||||
.demoHero__content {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.hero__content > p:not(.eyebrow),
|
||||
.demoHero__grid > div > p:not(.eyebrow),
|
||||
.demoHero__content > p:not(.eyebrow),
|
||||
.sectionHeader > p {
|
||||
max-width: 680px;
|
||||
color: $gray-light;
|
||||
@@ -449,7 +456,6 @@ p {
|
||||
border: 1px solid rgba(0, 28, 68, 0.12);
|
||||
border-radius: 8px;
|
||||
background: $white;
|
||||
box-shadow: 0 22px 60px rgba(0, 28, 68, 0.12);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@@ -483,7 +489,8 @@ p {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.demoFrame__actions a {
|
||||
.demoFrame__actions a,
|
||||
.demoFrame__actions button {
|
||||
display: inline-flex;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
@@ -491,6 +498,42 @@ p {
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(0, 28, 68, 0.12);
|
||||
border-radius: 6px;
|
||||
background: $white;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.demoFrameOverlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
display: grid;
|
||||
padding: 12px;
|
||||
background: rgba(0, 28, 68, 0.55);
|
||||
}
|
||||
|
||||
.demoFrameOverlay__panel {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.demoFrameOverlay__viewport {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
background: #edf5ff;
|
||||
}
|
||||
|
||||
.demoFrameOverlay__viewport iframe {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.demoFrame__viewport {
|
||||
@@ -731,7 +774,8 @@ p {
|
||||
}
|
||||
|
||||
.demoHero__visual {
|
||||
min-height: 420px;
|
||||
width: 100%;
|
||||
min-height: min(420px, 52vh);
|
||||
}
|
||||
|
||||
.demoCard > div {
|
||||
@@ -793,19 +837,28 @@ p {
|
||||
}
|
||||
|
||||
.demoSubnavBar {
|
||||
--demo-subnav-height: 53px;
|
||||
position: sticky;
|
||||
top: 78px;
|
||||
top: var(--site-header-height, 78px);
|
||||
z-index: 19;
|
||||
min-height: var(--demo-subnav-height);
|
||||
border-bottom: 1px solid rgba(0, 28, 68, 0.1);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
backdrop-filter: blur(14px);
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.demoSubnavBar .container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: min(1180px, calc(100% - 40px));
|
||||
min-height: var(--demo-subnav-height);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demoSubnavBar .demoSubnav {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -967,11 +1020,76 @@ p {
|
||||
}
|
||||
|
||||
.demoHero {
|
||||
padding-top: clamp(56px, 8vw, 92px);
|
||||
padding: clamp(20px, 2.5vw, 32px) 0 clamp(20px, 3vw, 32px);
|
||||
}
|
||||
|
||||
.demoHero__grid {
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demoHero__media {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.demoHero__media > span {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.demoHero__media img {
|
||||
width: 100%;
|
||||
max-height: min(420px, 52vh);
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.demoHero__media .demoHero__visual {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demoPreview {
|
||||
--hero-content-width: min(1180px, calc(100% - 40px));
|
||||
--demo-frame-width: calc((var(--hero-content-width) + 100vw) / 2);
|
||||
--demo-frame-bar-height: 52px;
|
||||
--demo-editor-chrome: calc(var(--site-header-height, 78px) + var(--demo-subnav-height, 53px) + var(--demo-frame-bar-height) + 40px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
scroll-margin-top: calc(var(--site-header-height, 78px) + var(--demo-subnav-height, 53px));
|
||||
padding: 0 0 clamp(12px, 1.5vw, 20px);
|
||||
}
|
||||
|
||||
.demoPage .sectionHeader h2,
|
||||
.demoPage .finalCta h2 {
|
||||
max-width: 820px;
|
||||
font-size: clamp(1.45rem, 2.4vw, 2.1rem);
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.demoPage .sectionHeader {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.demoPage .demoPreview + .sectionBand {
|
||||
padding-top: clamp(24px, 3vw, 40px);
|
||||
}
|
||||
|
||||
.demoPreview .demoFrame {
|
||||
width: var(--demo-frame-width);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.demoPreview .demoFrame__viewport {
|
||||
aspect-ratio: unset;
|
||||
width: 100%;
|
||||
height: calc(120svh - var(--demo-editor-chrome));
|
||||
min-height: min(90svh, 900px);
|
||||
}
|
||||
|
||||
.contactSection {
|
||||
@@ -1011,9 +1129,10 @@ p {
|
||||
}
|
||||
|
||||
.contactSection__scheduler {
|
||||
--contact-scheduler-height: 555px;
|
||||
width: 100%;
|
||||
height: 555px;
|
||||
max-height: 555px;
|
||||
height: var(--contact-scheduler-height);
|
||||
max-height: var(--contact-scheduler-height);
|
||||
border: 1px solid rgba(0, 28, 68, 0.1);
|
||||
border-radius: 8px;
|
||||
background: $tertiary;
|
||||
@@ -1122,7 +1241,13 @@ p {
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.siteHeader__inner {
|
||||
grid-template-columns: 150px 1fr auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding-inline: 14px;
|
||||
}
|
||||
|
||||
.siteHeader__nav,
|
||||
@@ -1132,13 +1257,13 @@ p {
|
||||
|
||||
.siteHeader__menu {
|
||||
display: inline-flex;
|
||||
justify-self: end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.siteHeader__mobileNav {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 10px 20px 20px;
|
||||
padding: 10px 14px 20px;
|
||||
border-top: 1px solid rgba(0, 28, 68, 0.08);
|
||||
background: $white;
|
||||
}
|
||||
@@ -1148,14 +1273,16 @@ p {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.demoSubnavBar {
|
||||
top: 68px;
|
||||
.demoSubnavBar .container {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding-inline: 14px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.demoSubnavBar .demoSubnav {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@@ -1164,11 +1291,40 @@ p {
|
||||
.demoBrowser,
|
||||
.splitSection,
|
||||
.contactSection__grid,
|
||||
.contactSection__intro,
|
||||
.footer__inner {
|
||||
.contactSection__intro {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.contactSection__schedulerWrap,
|
||||
.contactSection__scheduler {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer__brand {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.footer__brand a {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.footer__contact {
|
||||
order: 2;
|
||||
justify-self: start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.footer__brand p {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.demoBrowser__sidebar {
|
||||
position: static;
|
||||
}
|
||||
@@ -1202,11 +1358,14 @@ p {
|
||||
@media (max-width: 720px) {
|
||||
.container,
|
||||
.narrow,
|
||||
.siteHeader__inner,
|
||||
.footer__inner {
|
||||
width: min(100% - 28px, 1180px);
|
||||
}
|
||||
|
||||
.siteHeader {
|
||||
--site-header-height: 68px;
|
||||
}
|
||||
|
||||
.siteHeader__inner {
|
||||
min-height: 68px;
|
||||
}
|
||||
@@ -1215,6 +1374,22 @@ p {
|
||||
width: 138px;
|
||||
}
|
||||
|
||||
.siteHeader__logo svg {
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
.contactSection__scheduler {
|
||||
--contact-scheduler-height: 370px;
|
||||
}
|
||||
|
||||
.contactSection.sectionBand {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.contactSection__schedulerWrap {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.statsGrid,
|
||||
.demoCards,
|
||||
.demoSubnav,
|
||||
@@ -1240,6 +1415,16 @@ p {
|
||||
min-height: 480px;
|
||||
}
|
||||
|
||||
.demoPreview {
|
||||
--hero-content-width: min(1180px, calc(100% - 28px));
|
||||
}
|
||||
|
||||
.demoPreview .demoFrame__viewport {
|
||||
aspect-ratio: unset;
|
||||
height: calc(120svh - var(--demo-editor-chrome));
|
||||
min-height: min(85svh, 800px);
|
||||
}
|
||||
|
||||
.heroVisual__scene {
|
||||
grid-template-columns: 1fr;
|
||||
min-height: auto;
|
||||
|
||||
+3
-2
@@ -1,10 +1,11 @@
|
||||
import type {Metadata} from 'next';
|
||||
import messages from '../../messages/pl.json';
|
||||
import './globals.scss';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL('https://ultifide.com'),
|
||||
title: 'Konfiguratory 3D | Ultifide',
|
||||
description: 'Konfiguratory 3D dla produktów, wnętrz i sprzedaży B2B.'
|
||||
title: messages.metadata.defaultTitle,
|
||||
description: messages.metadata.defaultDescription
|
||||
};
|
||||
|
||||
export default function RootLayout({children}: Readonly<{children: React.ReactNode}>) {
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import Link from 'next/link';
|
||||
import messages from '../../messages/pl.json';
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<main className="notFound">
|
||||
<h1>Nie znaleziono strony</h1>
|
||||
<h1>{messages.notFound.title}</h1>
|
||||
<Link className="button button--primary" href="/pl">
|
||||
Wróć do strony głównej
|
||||
{messages.notFound.backHome}
|
||||
</Link>
|
||||
</main>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user