initial commit

2026-05-20 01:38:47 +02:00
commit 9d4f32ecf0
43 changed files with 9188 additions and 0 deletions
@@ -0,0 +1,161 @@
+import {ArrowRight, Box, CheckCircle2, DoorOpen, Layers3, Plug, Settings2, ShoppingCart, Workflow} from 'lucide-react';
+import type {Metadata} from 'next';
+import Image from 'next/image';
+import Link from 'next/link';
+import {ButtonLink} from '@/components/ButtonLink';
+import {Faq} from '@/components/Faq';
+import {HeroVisual} from '@/components/HeroVisual';
+import {SectionHeader} from '@/components/SectionHeader';
+import {Stats} from '@/components/Stats';
+import {contact} from '@/config/contact';
+import {demoContent, homeContent, marketingFaq} from '@/config/content';
+import messages from '../../../messages/pl.json';
+
+export const metadata: Metadata = {
+  title: messages.metadata.homeTitle,
+  description: messages.metadata.homeDescription
+};
+
+const platformIcons = [Settings2, Workflow, Plug, ShoppingCart];
+const industryIcons = [Box, Layers3, CheckCircle2];
+
+export default function HomePage() {
+  const demos = [demoContent.desk, demoContent.room, demoContent.door];
+
+  return (
+    <main>
+      <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">
+              <ButtonLink href="/pl/dema">{homeContent.hero.primaryCta}</ButtonLink>
+              <ButtonLink href={contact.url} variant="secondary" isExternal>
+                {homeContent.hero.secondaryCta}
+              </ButtonLink>
+            </div>
+          </div>
+          <HeroVisual />
+        </div>
+      </section>
+
+      <section className="sectionBand statsBand">
+        <div className="container">
+          <Stats stats={homeContent.stats} />
+        </div>
+      </section>
+
+      <section id="dema" className="sectionBand">
+        <div className="container">
+          <SectionHeader title={homeContent.demosTitle} description={homeContent.demosDescription} />
+          <div className="demoCards">
+            {demos.map(demo => (
+              <article className="demoCard" key={demo.slug}>
+                {demo.imageUrl ? (
+                  <Image src={demo.imageUrl} alt="" width={420} height={420} />
+                ) : (
+                  <div className="demoCard__visual" aria-hidden="true">
+                    <DoorOpen size={72} />
+                  </div>
+                )}
+                <div>
+                  <p className="eyebrow">{demo.eyebrow}</p>
+                  <h3>{demo.title}</h3>
+                  <p>{demo.intro}</p>
+                  <Link href={`/pl/dema?demo=${demo.slug}`}>
+                    {demo.openLabel}
+                    <ArrowRight size={18} />
+                  </Link>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section id="platforma" className="sectionBand sectionBand--tint">
+        <div className="container splitSection">
+          <SectionHeader title={homeContent.benefitsTitle} description={homeContent.benefitsDescription} />
+          <div className="featureGrid">
+            {homeContent.benefits.map((item, index) => {
+              const Icon = platformIcons[index];
+              return (
+                <article className="featureItem" key={item.title}>
+                  <Icon size={24} />
+                  <h3>{item.title}</h3>
+                  <p>{item.description}</p>
+                </article>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      <section className="sectionBand">
+        <div className="container">
+          <SectionHeader title={homeContent.industriesTitle} />
+          <div className="featureGrid featureGrid--three">
+            {homeContent.industries.map((item, index) => {
+              const Icon = industryIcons[index];
+              return (
+                <article className="featureItem" key={item.title}>
+                  <Icon size={24} />
+                  <h3>{item.title}</h3>
+                  <p>{item.description}</p>
+                </article>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      <section id="funkcje" className="sectionBand sectionBand--dark">
+        <div className="container splitSection splitSection--dark">
+          <SectionHeader title={homeContent.featuresTitle} />
+          <ul className="checkList">
+            {homeContent.features.map(feature => (
+              <li key={feature}>
+                <CheckCircle2 size={20} />
+                {feature}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <section className="sectionBand">
+        <div className="container">
+          <SectionHeader title={homeContent.processTitle} />
+          <div className="processGrid">
+            {homeContent.process.map((item, index) => (
+              <article key={item.title}>
+                <span>{index + 1}</span>
+                <h3>{item.title}</h3>
+                <p>{item.description}</p>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section id="faq" className="sectionBand sectionBand--tint">
+        <div className="container narrow">
+          <SectionHeader title="FAQ" />
+          <Faq items={marketingFaq} />
+        </div>
+      </section>
+
+      <section className="sectionBand">
+        <div className="container finalCta">
+          <h2>{homeContent.finalCta.title}</h2>
+          <p>{homeContent.finalCta.description}</p>
+          <ButtonLink href={contact.url} isExternal>
+            {homeContent.finalCta.button}
+          </ButtonLink>
+        </div>
+      </section>
+    </main>
+  );
+}