1251 lines
52 KiB
TypeScript
1251 lines
52 KiB
TypeScript
'use client'
|
||
import { motion, AnimatePresence } from 'framer-motion'
|
||
import { useState, useCallback, useEffect } from "react"
|
||
|
||
export default function Home() {
|
||
|
||
const [openIndex, setOpenIndex] = useState<number | null>(null)
|
||
|
||
const [activeSection, setActiveSection] = useState<string>("PrimeCode");
|
||
|
||
useEffect(() => {
|
||
const sections = document.querySelectorAll("section[id]");
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
setActiveSection(entry.target.id);
|
||
}
|
||
});
|
||
},
|
||
{ rootMargin: "-50% 0px -50% 0px", threshold: 0 }
|
||
);
|
||
|
||
sections.forEach((section) => observer.observe(section));
|
||
return () => observer.disconnect();
|
||
}, []);
|
||
|
||
const navItems = [
|
||
{ id: "PrimeCode", label: "O nas" },
|
||
{ id: "Sytuacje", label: "Sytuacje" },
|
||
{ id: "Partner", label: "Potrzebujesz partnera" },
|
||
{ id: "Model", label: "Model Prime Code" },
|
||
{ id: "CoPotrafimy", label: "Co potrafimy?" },
|
||
{ id: "JakDzialamy", label: "Jak działamy?" },
|
||
{ id: "PomogliśmyCaseStudies", label: "Pomogliśmy" },
|
||
];
|
||
|
||
const caseStudies = [
|
||
{
|
||
title: "Firma kosmetyczna",
|
||
short: "Nowa strategia detaliczna i transformacja doświadczenia klientek w salonach.",
|
||
details: [
|
||
"Opracowanie nowej strategii detalicznej, integrującej sprzedaż z usługami.",
|
||
"Zaprojektowanie atmosfery sklepów oraz selekcja unikalnego asortymentu.",
|
||
"Transformacja komunikacji – od eksperckiej wiedzy do relacji opartej na empatii.",
|
||
"Redefinicja propozycji wartości – skupienie na doświadczeniu troski o zdrowie i piękno.",
|
||
"Stworzenie concept store’u jako pełnego doświadczenia marki.",
|
||
"Przejście z jednego formatu sklepu na trzy lepiej dopasowane formaty detaliczne.",
|
||
"Zmiana podejścia operacyjnego: od 4P do 7P, z naciskiem na doświadczenie klientki."
|
||
]
|
||
},
|
||
{
|
||
title: "Firma paliwowa",
|
||
short: "Integracja doświadczenia na stacjach z tożsamością marki i branding sensoryczny.",
|
||
details: [
|
||
"Integracja strategii marki ze strategią doświadczeń klienta.",
|
||
"Badania neuromarketingowe i ponad 100 rekomendacji optymalizacyjnych.",
|
||
"Wielowarstwowa propozycja wartości – od tankowania po rozbudowane doświadczenie marki.",
|
||
"Identyfikacja momentów prawdy i plan zarządzania nimi.",
|
||
"Mapa ścieżek klienta z instrukcją optymalizacji.",
|
||
"Projekt atmosfery stacji (kolorystyka, zapach, układ).",
|
||
"Kompleksowy branding sensoryczny angażujący wszystkie zmysły.",
|
||
"Standardy obsługi klienta odzwierciedlające wartości marki.",
|
||
"Mapa wdrożenia z harmonogramem i wytycznymi operacyjnymi."
|
||
]
|
||
},
|
||
{
|
||
title: "Firma technologiczna",
|
||
short: "Nowa architektura marki, system kompetencji i kultura klientocentryczna.",
|
||
details: [
|
||
"Zaprojektowanie struktury organizacyjnej i systemu kompetencji.",
|
||
"Redefinicja architektury marki (przejście z house of brands na branded house).",
|
||
"System zarządzania wartością klienta – poziom strategiczny, operacyjny i personalny.",
|
||
"„Playbooki” wdrażające pozycjonowanie do działań codziennych.",
|
||
"Usługi o wysokiej wartości dodanej, zmieniające postrzeganie firmy.",
|
||
"Model „high tech + high touch” łączący technologie z uważnością na klienta.",
|
||
"Strategia CRM wspierająca długofalowe relacje i wzrost."
|
||
]
|
||
}
|
||
]
|
||
|
||
const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
|
||
|
||
// === NOWE tiles (podmień całą dotychczasową definicję) ===
|
||
// === KAFELKI z jednolitym punktorowaniem ===
|
||
const tiles = [
|
||
{
|
||
title: "Brand Daily Scan™ – diagnoza w rytmie codzienności",
|
||
short: "Błyskawiczna analiza punktów styku, decyzji, procesów i sygnałów marki.",
|
||
output: "Mapa luk, insighty, benchmarki, rekomendacje.",
|
||
efekt:
|
||
"Mapa luk i niespójności, insighty z rzeczywistego użycia marki, benchmarki branżowe oraz rekomendacje naprawcze i wzmacniające.",
|
||
details: (
|
||
<>
|
||
<p >
|
||
Nie patrzymy na markę z dystansu. Wchodzimy w jej codzienne tętno.
|
||
Skupiamy się na tym, co naprawdę <strong>generuje doświadczenie klienta</strong>:
|
||
</p>
|
||
|
||
{/* stałe, eleganckie kropki */}
|
||
<ul className="mt-1 space-y-1">
|
||
<li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
|
||
punkty styku (touchpointy),
|
||
</li>
|
||
<li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
|
||
mikrodecyzje zespołów,
|
||
</li>
|
||
<li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
|
||
automatyczne procesy i sygnały marki.
|
||
</li>
|
||
</ul>
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: "Synchronizacja rytmu – faza pacingu",
|
||
short: "Zgrywamy Twoje działania z logiką marki. Automatyzujemy. Personalizujemy.",
|
||
output: "Roadmapa wdrożenia z KPI i zestawem eksperymentów.",
|
||
efekt:
|
||
"„Zgrane zegary” marki, marketingu, sprzedaży i obsługi; klarowne KPI oraz szybkie testy hipotez.",
|
||
details: (
|
||
<>
|
||
<p>
|
||
Integrujemy markę z codzienną dynamiką operacyjną. Nie robimy rewolucji —
|
||
<strong> synchronizujemy rytm</strong>:
|
||
</p>
|
||
|
||
{/* stałe, eleganckie kropki */}
|
||
<ul className="mt-1 space-y-1">
|
||
<li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
|
||
automatyzujemy to, co można,
|
||
</li>
|
||
<li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
|
||
personalizujemy to, co warto,
|
||
</li>
|
||
<li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
|
||
urealniamy to, co obiecujesz jako marka.
|
||
</li>
|
||
</ul>
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: "Wdrożenie i skalowanie",
|
||
short: "Marka w akcji: od call center i e-maili po pricing, CRM i fizyczną dostępność.",
|
||
output: "Efektywność, zaangażowanie, lojalność.",
|
||
efekt:
|
||
"Wzrost efektywności działań marketingowych, wyższe zaangażowanie użytkowników, zwiększenie lojalności i retencji — zmierzone.",
|
||
details: (
|
||
<>
|
||
<p >
|
||
Marka przestaje być tylko deklaracją. Zaczyna
|
||
<strong> działać w realnym czasie i miejscu</strong>:
|
||
</p>
|
||
|
||
{/* stałe, eleganckie kropki */}
|
||
<ul className="mt-1 space-y-1">
|
||
<li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
|
||
w aplikacji i e-mailach,
|
||
</li>
|
||
<li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
|
||
w polityce cenowej i mechanizmach CRM,
|
||
</li>
|
||
<li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
|
||
w sklepie internetowym i na półce w punkcie sprzedaży.
|
||
</li>
|
||
</ul>
|
||
</>
|
||
),
|
||
},
|
||
];
|
||
|
||
|
||
const scrollToIntegration = useCallback(() => {
|
||
const section = document.getElementById('DlaczegoIntegracji')
|
||
section?.scrollIntoView({ behavior: 'smooth' })
|
||
}, [])
|
||
|
||
return (
|
||
|
||
|
||
|
||
<div className="relative min-h-screen text-gray-900 overflow-hidden">
|
||
|
||
{/* ---- ESTETYCZNE, WIELOWARSTWOWE TŁO ---- */}
|
||
<div className="fixed inset-0 -z-10 overflow-hidden">
|
||
{/* Gradient bazowy */}
|
||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-blue-100" />
|
||
|
||
{/* Winieta dla lepszej głębi */}
|
||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_70%,rgba(0,0,0,0.05)_100%)] pointer-events-none" />
|
||
|
||
{/* Duży, miękki blob lewy-górny */}
|
||
<motion.div
|
||
animate={{ scale: [1, 1.05, 1] }}
|
||
transition={{ repeat: Infinity, duration: 15, ease: "easeInOut" }}
|
||
className="absolute top-[-5%] left-[-15%] w-[900px] h-[900px]
|
||
bg-gradient-to-tr from-cyan-200 via-blue-200 to-blue-300
|
||
opacity-30 rounded-full blur-3xl"
|
||
/>
|
||
|
||
{/* Duży, miękki blob prawy-dolny */}
|
||
<motion.div
|
||
animate={{ scale: [1, 1.07, 1] }}
|
||
transition={{ repeat: Infinity, duration: 18, ease: "easeInOut" }}
|
||
className="absolute bottom-[-5%] right-[-15%] w-[900px] h-[900px]
|
||
bg-gradient-to-tr from-blue-200 via-cyan-100 to-blue-300
|
||
opacity-25 rounded-full blur-3xl"
|
||
/>
|
||
|
||
{/* Centralny blob dla balansu */}
|
||
<motion.div
|
||
animate={{ scale: [1, 1.08, 1] }}
|
||
transition={{ repeat: Infinity, duration: 20, ease: "easeInOut" }}
|
||
className="absolute top-[45%] left-[50%] translate-x-[-50%] w-[500px] h-[500px]
|
||
bg-gradient-to-tr from-cyan-100 via-blue-100 to-blue-200
|
||
opacity-15 rounded-full blur-2xl"
|
||
/>
|
||
|
||
{/* Tekstura (grain) */}
|
||
<div className="absolute inset-0 opacity-[0.04] mix-blend-overlay"
|
||
style={{ backgroundImage: "url('/textures/noise.png')", backgroundSize: "200px 200px" }} />
|
||
</div>
|
||
|
||
{/* Sticky Navbar */}
|
||
<nav className="fixed top-0 left-0 w-full z-50 bg-white/70 backdrop-blur-md shadow-sm border-b border-cyan-100">
|
||
<div className="max-w-7xl mx-auto px-4 flex justify-between items-center py-4">
|
||
|
||
<a href="#PrimeCode" className="flex items-center gap-3">
|
||
<img src="/LogoPrimeCode-transparent.png" alt="Prime Code" className="h-8 w-auto" />
|
||
|
||
<span className="sr-only">Prime Code — O nas</span>
|
||
</a>
|
||
|
||
<div className="md:hidden">
|
||
<input type="checkbox" id="menu-toggle" className="peer hidden" />
|
||
<label htmlFor="menu-toggle" className="cursor-pointer">
|
||
<svg className="h-8 w-8 text-gray-700" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
|
||
</svg>
|
||
</label>
|
||
<ul className="hidden peer-checked:flex absolute top-full left-0 w-full flex-col bg-white shadow-lg">
|
||
{navItems.map((item) => (
|
||
<li key={item.id}>
|
||
<a
|
||
href={`#${item.id}`}
|
||
className={`block px-4 py-2 transition hover:text-cyan-700 ${activeSection === item.id ? "text-cyan-700 border-l-4 border-cyan-700" : ""
|
||
}`}
|
||
>
|
||
{item.label}
|
||
</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
<ul className="hidden md:flex gap-8 text-gray-700 font-semibold">
|
||
{navItems.map((item) => (
|
||
<li key={item.id}>
|
||
<a
|
||
href={`#${item.id}`}
|
||
className={`transition hover:text-cyan-700 ${activeSection === item.id ? "text-cyan-700 border-b-2 border-cyan-700 pb-1" : ""
|
||
}`}
|
||
>
|
||
{item.label}
|
||
</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
|
||
|
||
{/* HERO - Nowoczesna, elegancka sekcja wprowadzająca */}
|
||
<section
|
||
id="PrimeCode"
|
||
className="relative flex flex-col justify-center items-center min-h-screen px-6 py-16 md:py-24 text-center"
|
||
>
|
||
|
||
|
||
{/* Dynamiczne tło
|
||
<div className="absolute inset-0">
|
||
<div className="absolute -top-40 -left-40 w-96 h-96 bg-cyan-300 opacity-30 rounded-full blur-3xl animate-blob"></div>
|
||
<div className="absolute -bottom-40 -right-40 w-[500px] h-[500px] bg-blue-300 opacity-30 rounded-full blur-3xl animate-blob animation-delay-2000"></div>
|
||
</div> */}
|
||
|
||
{/* Główna treść */}
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: 60 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 1 }}
|
||
className=" bottom-10 z-10 text-7xl md:text-8xl lg:text-9xl font-extrabold text-cyan-900 drop-shadow-xl"
|
||
>
|
||
Prime Code
|
||
</motion.h1>
|
||
|
||
<motion.h2
|
||
initial={{ opacity: 0, y: 40 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.3, duration: 0.8 }}
|
||
className="mt-2 z-10 text-3xl md:text-4xl font-semibold text-cyan-700"
|
||
>
|
||
Integrujemy markę w codziennych działaniach
|
||
</motion.h2>
|
||
|
||
{/* Tagline */}
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.5, duration: 0.8 }}
|
||
className="mt-4 z-10 text-xl md:text-2xl text-cyan-600"
|
||
>
|
||
Marka, która działa codziennie. W czasie rzeczywistym. W każdym punkcie styku.
|
||
</motion.p>
|
||
|
||
{/* Dekoracyjna linia */}
|
||
<motion.div
|
||
initial={{ scaleX: 0 }}
|
||
animate={{ scaleX: 1 }}
|
||
transition={{ delay: 0.8, duration: 0.6 }}
|
||
className="mt-6 mb-6 w-32 h-1.5 rounded-full bg-gradient-to-r from-cyan-400 to-blue-500 origin-left z-10"
|
||
/>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 1.0, duration: 0.8 }}
|
||
className="z-10 max-w-3xl text-lg md:text-xl text-gray-700 leading-relaxed"
|
||
>
|
||
W Prime Code integrujemy markę z tym, co najważniejsze – realnymi działaniami, danymi,
|
||
technologią i zespołami. Nie tworzymy kampanii dla samej widoczności. Projektujemy
|
||
<strong className="font-semibold"> mechanizmy wzrostu</strong>, w których marka staje się fundamentem
|
||
operacyjnym: w komunikacji, sprzedaży, doświadczeniu klienta, polityce cenowej i kanałach dystrybucji.
|
||
</motion.p>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 1.2, duration: 0.8 }}
|
||
className="mt-4 z-10 max-w-3xl text-lg md:text-xl text-gray-700 leading-relaxed"
|
||
>
|
||
Bo marka <strong className="font-semibold">to nie tylko opowieść.</strong> To system. Aktywny,
|
||
skalowalny, zsynchronizowany z organizacją.
|
||
</motion.p>
|
||
|
||
|
||
|
||
{/* Strzałka zachęcająca do przewinięcia */}
|
||
<motion.div
|
||
onClick={scrollToIntegration}
|
||
animate={{ y: [0, 15, 0] }}
|
||
transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
|
||
className="absolute bottom-8 z-10 text-cyan-700 cursor-pointer"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="h-10 w-10"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
|
||
</motion.div>
|
||
|
||
</section>
|
||
|
||
|
||
|
||
{/* Dlaczego integracja marki to konieczność */}
|
||
<section
|
||
id="DlaczegoIntegracji"
|
||
className="relative flex flex-col justify-center items-center min-h-screen py-20 overflow-hidden"
|
||
>
|
||
<div className="relative max-w-4xl mx-auto px-6">
|
||
{/* Nagłówek */}
|
||
<motion.h2
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="text-4xl font-bold mb-4 text-center text-cyan-800"
|
||
>
|
||
Dlaczego integracja marki to konieczność?
|
||
</motion.h2>
|
||
<div className="mx-auto mb-10 h-1 w-20 bg-cyan-600" />
|
||
|
||
{/* Karta treści */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.98 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="bg-white border border-cyan-100 rounded-none p-8 md:p-10 text-gray-800 space-y-6 shadow"
|
||
>
|
||
{/* Akapit 1 */}
|
||
<div className="grid grid-cols-[16px_1fr] gap-3 items-start">
|
||
<span
|
||
className="mt-1 block w-2.5 h-2.5 rounded-full bg-cyan-600 shrink-0"
|
||
aria-hidden="true"
|
||
/>
|
||
<p>
|
||
<strong className="text-cyan-800">76% konsumentów oczekuje</strong>, że marka będzie
|
||
<strong className="text-cyan-800"> przewidywać ich potrzeby</strong>, nie tylko reagować
|
||
<span className="text-gray-500"> (Salesforce, 2023)</span>.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Akapit 2 */}
|
||
<div className="grid grid-cols-[16px_1fr] gap-3 items-start">
|
||
<span
|
||
className="mt-1 block w-2.5 h-2.5 rounded-full bg-cyan-600 shrink-0"
|
||
aria-hidden="true"
|
||
/>
|
||
<p>
|
||
Pokolenie Z <strong className="text-cyan-800">nie buduje lojalności przez reklamy</strong>.
|
||
Buduje ją przez <strong className="text-cyan-800">wartość, użyteczność i autentyczność</strong>.
|
||
<span className="font-semibold text-gray-800"> Aż 65% młodych konsumentów</span> deklaruje,
|
||
że lojalność wobec marki zależy od spójnych i realnych doświadczeń
|
||
<span className="text-gray-500"> (McKinsey, 2023)</span>.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Punkt nadrzędny + podpunkty */}
|
||
<div className="grid grid-cols-[16px_1fr] gap-3 items-start">
|
||
{/* kropka poziomu 1 */}
|
||
<span
|
||
className="mt-1 block w-2.5 h-2.5 rounded-full bg-cyan-600 shrink-0"
|
||
aria-hidden="true"
|
||
/>
|
||
<div>
|
||
<p>Marka nie żyje w kampaniach. Żyje w:</p>
|
||
|
||
{/* podpunkty (poziom 2) */}
|
||
<ul className="mt-2 space-y-2">
|
||
{[
|
||
'chatbotach, landingach, mailach i pushach,',
|
||
'procesach sprzedażowych i onboardingowych,',
|
||
'sposobie, w jaki działa Twój model cenowy, UX i obsługa klienta.',
|
||
].map((txt, i) => (
|
||
<li key={i} className="grid grid-cols-[12px_1fr] gap-3 items-start">
|
||
{/* mniejsza kropka poziomu 2 */}
|
||
<span
|
||
className="mt-1 block w-2 h-2 rounded-full bg-cyan-500 shrink-0"
|
||
aria-hidden="true"
|
||
/>
|
||
<span>{txt}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
{/* Akapit 4 */}
|
||
<div className="grid grid-cols-[16px_1fr] gap-3 items-start">
|
||
<span
|
||
className="mt-1 block w-2.5 h-2.5 rounded-full bg-cyan-600 shrink-0"
|
||
aria-hidden="true"
|
||
/>
|
||
<p>
|
||
Jeśli to wszystko nie gra razem, marka <strong className="text-cyan-800">traci moc</strong>.
|
||
<br />
|
||
<strong className="text-cyan-800">I traci klientów.</strong>
|
||
<span className="text-gray-500"> Według badania PwC aż 32% klientów</span> porzuca markę po jednej
|
||
złej interakcji, nawet jeśli wcześniej byli zadowoleni.
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Strzałka do kolejnej sekcji */}
|
||
<motion.div
|
||
onClick={() => document.getElementById('Sytuacje')?.scrollIntoView({ behavior: 'smooth' })}
|
||
animate={{ y: [0, 15, 0] }}
|
||
transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
|
||
className="absolute bottom-10 z-10 text-cyan-700 cursor-pointer"
|
||
aria-label="Przewiń do sekcji: Czy znasz te sytuacje?"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</motion.div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
{/* Czy znasz te sytuacje? */}
|
||
<section id='Sytuacje' className="relative flex flex-col justify-center items-center min-h-screen py-24 overflow-hidden">
|
||
<div className="max-w-6xl mx-auto px-6">
|
||
{/* Dynamiczne tło */}
|
||
{/* <div className="absolute inset-0">
|
||
<div className="absolute -top-40 -left-40 w-96 h-96 bg-cyan-300 opacity-20 rounded-full blur-3xl animate-blob"></div>
|
||
<div className="absolute -bottom-40 -right-40 w-96 h-96 bg-blue-300 opacity-20 rounded-full blur-3xl animate-blob animation-delay-2000"></div>
|
||
</div> */}
|
||
<motion.h2
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="text-4xl font-bold mb-14 text-center text-cyan-700 drop-shadow"
|
||
>
|
||
Czy znasz te sytuacje?
|
||
</motion.h2>
|
||
|
||
<div className="grid md:grid-cols-2 gap-8">
|
||
{[
|
||
{
|
||
title: "1. Brak spójności w komunikacji",
|
||
text: "Różne działy (np. marketing, sprzedaż, obsługa klienta) komunikują się w różnym tonie i z odmiennym przekazem."
|
||
},
|
||
{
|
||
title: "2. Realizacja działań promocyjnych bez odniesienia do tożsamości marki",
|
||
text: "Firma wdraża modne działania (np. TikTok, influencerzy, AI copywriting) bez filtrowania ich przez tożsamość i wartości marki."
|
||
},
|
||
{
|
||
title: "3. Problemy w skalowaniu działań",
|
||
text: "Przy szybkim wzroście lub ekspansji różne zespoły zaczynają prowadzić działania niespójne z tożsamością marki."
|
||
},
|
||
{
|
||
title: "4. Zmiany w zespole / outsourcing marketingu",
|
||
text: "Nowe osoby lub agencje marketingowe nie rozumieją w pełni marki i działają według własnych schematów."
|
||
},
|
||
{
|
||
title: "5. Brak narzędzi lub procesów ułatwiających pracę z marką",
|
||
text: "Pracownicy nie mają dostępu do aktualnych wytycznych (brand plan, key visuals, archetypy, kroki milowe)."
|
||
},
|
||
{
|
||
title: "6. Brak mierzalnego modelu integracji marki",
|
||
text: "Firma nie ma sposobu, by sprawdzić, czy kampania, post czy oferta są zgodne z marką."
|
||
}
|
||
].map((item, i) => (
|
||
<motion.div
|
||
key={i}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: i * 0.15, duration: 0.7, ease: 'easeOut' }}
|
||
className="p-6 bg-cyan-50/70 backdrop-blur-sm border border-cyan-100 rounded-none shadow hover:shadow-lg transition"
|
||
>
|
||
<h3 className="text-xl font-semibold text-cyan-700 mb-2">{item.title}</h3>
|
||
<p className="text-gray-700">{item.text}</p>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
{/* Strzałka do sekcji Partner */}
|
||
<motion.div
|
||
onClick={() => document.getElementById('Partner')?.scrollIntoView({ behavior: 'smooth' })}
|
||
animate={{ y: [0, 15, 0] }}
|
||
transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
|
||
className="absolute bottom-10 z-10 text-cyan-700 cursor-pointer"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="h-10 w-10"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</motion.div>
|
||
</section>
|
||
|
||
|
||
{/* Potrzebujesz partnera, który... */}
|
||
<section
|
||
id="Partner"
|
||
className="relative flex flex-col justify-between items-center min-h-screen py-24 overflow-hidden"
|
||
>
|
||
{/* Tło dekoracyjne */}
|
||
{/* <div className="absolute -top-20 -left-20 w-72 h-72 bg-cyan-200 rounded-full blur-3xl opacity-30 animate-pulse" />
|
||
<div className="absolute -bottom-20 -right-20 w-96 h-96 bg-blue-200 rounded-full blur-3xl opacity-30 animate-pulse" /> */}
|
||
|
||
<div className="relative z-10 max-w-5xl mx-auto px-6 w-full flex-grow flex flex-col justify-center items-center">
|
||
<motion.h2
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="text-4xl font-bold mb-12 text-center text-cyan-800 drop-shadow"
|
||
>
|
||
Potrzebujesz partnera, który:
|
||
</motion.h2>
|
||
|
||
<motion.ul
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.9, ease: 'easeOut' }}
|
||
className="space-y-6 text-lg leading-relaxed bg-white/70 backdrop-blur-lg border border-cyan-100 shadow-2xl rounded-none p-10 w-full"
|
||
>
|
||
{[
|
||
"myśli procesami, nie kanałami?",
|
||
"łączy branding z danymi, CX i automatyzacją?",
|
||
"projektuje mechanizmy wzrostu, a nie tylko „fajny content”?",
|
||
"wdraża AI w obsłudze marki, zamiast tylko mówić o trendach?",
|
||
"testuje i optymalizuje, zamiast zgadywać?"
|
||
].map((item, i) => (
|
||
<li key={i} className="flex items-start gap-4">
|
||
<span className="w-5 h-5 flex-shrink-0 rounded-full bg-cyan-500 mt-1" />
|
||
<span className="text-gray-800">
|
||
<strong>{item.split(" ")[0]}</strong> {item.replace(item.split(" ")[0], "")}
|
||
</span>
|
||
</li>
|
||
))}
|
||
</motion.ul>
|
||
|
||
{/* Nowa, wizualna dekoracja bez tekstu */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.3, duration: 0.8 }}
|
||
className="mt-16 flex justify-center items-center space-x-6"
|
||
>
|
||
<div className="w-24 h-24 bg-cyan-200 rounded-full blur-2xl animate-blob animation-delay-2000" />
|
||
<div className="w-32 h-32 bg-blue-200 rounded-full blur-3xl animate-blob" />
|
||
<div className="w-20 h-20 bg-cyan-100 rounded-full blur-xl animate-blob animation-delay-1000" />
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Animowany napis i strzałka przewijająca do Model */}
|
||
<motion.div
|
||
onClick={() => document.getElementById('Model')?.scrollIntoView({ behavior: 'smooth' })}
|
||
animate={{ y: [0, 10, 0] }}
|
||
transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
|
||
className="absolute bottom-10 flex flex-col items-center text-cyan-700 cursor-pointer"
|
||
>
|
||
<span className="text-lg font-medium mb-2">Spójrz na model Prime Code</span>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="h-8 w-8"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</motion.div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
{/* Model Prime Code */}
|
||
<motion.section
|
||
id="Model"
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||
className="relative flex flex-col justify-center items-center min-h-screen pt-12 pb-32 overflow-hidden"
|
||
>
|
||
{/* Dekoracyjne tło */}
|
||
{/* <div className="absolute -top-20 -left-20 w-72 h-72 bg-cyan-200 rounded-full blur-3xl opacity-30 animate-pulse" />
|
||
<div className="absolute -bottom-20 -right-20 w-96 h-96 bg-blue-200 rounded-full blur-3xl opacity-30 animate-pulse" /> */}
|
||
|
||
<div className="relative z-10 max-w-6xl w-full mx-auto px-6 flex-grow flex flex-col justify-center items-center">
|
||
<h2 className="-mt-4 text-3xl font-bold mb-4 text-cyan-800 text-center">
|
||
Model Prime Code: marka jako system operacyjny
|
||
</h2>
|
||
<p className="-mt-2 text-gray-700 max-w-3xl mx-auto mb-12 text-center">
|
||
W klasycznym ujęciu marka to obietnica. W dzisiejszej rzeczywistości to{' '}
|
||
<strong>system działania</strong>. Prime Code traktuje markę jak{' '}
|
||
<strong>system operacyjny</strong> firmy: regulujący rytm decyzji,
|
||
komunikacji i doświadczeń klienta. Spójność przestaje być tylko
|
||
kwestią estetyki a staje się{' '}
|
||
<strong>mierzalnym źródłem przewagi</strong>.
|
||
</p>
|
||
|
||
{/* Siatka kafelków – bez shared layout na całej siatce */}
|
||
<div className="grid md:grid-cols-3 gap-6 lg:gap-8 items-start">
|
||
{tiles.map((tile, index) => (
|
||
<Tile
|
||
key={index}
|
||
open={expandedIndex === index}
|
||
onOpen={() => setExpandedIndex(index)}
|
||
onClose={() => setExpandedIndex(null)}
|
||
title={tile.title}
|
||
short={tile.short}
|
||
output={tile.output}
|
||
efekt={tile.efekt}
|
||
details={tile.details}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Strzałka przewijania do następnej sekcji */}
|
||
<motion.div
|
||
onClick={() => document.getElementById('CoPotrafimy')?.scrollIntoView({ behavior: 'smooth' })}
|
||
animate={{ y: [0, 10, 0] }}
|
||
transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
|
||
className="absolute bottom-10 flex flex-col items-center text-cyan-700 cursor-pointer"
|
||
>
|
||
<span className="text-lg font-medium mb-2">Zobacz Co potrafimy?</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</motion.div>
|
||
</motion.section>
|
||
|
||
|
||
|
||
|
||
{/* Co potrafimy? */}
|
||
<motion.section
|
||
id="CoPotrafimy"
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="relative flex flex-col justify-center items-center min-h-screen pt-12 pb-32 overflow-hidden"
|
||
>
|
||
|
||
{/* Główna zawartość wyśrodkowana pionowo */}
|
||
<div className="max-w-5xl w-full mx-auto px-6 flex-grow flex flex-col justify-center">
|
||
<h2 className="text-4xl font-bold mb-14 text-center text-cyan-800 drop-shadow">
|
||
Co potrafimy?
|
||
</h2>
|
||
|
||
<motion.ul
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.9, ease: 'easeOut' }}
|
||
className="space-y-4 text-lg leading-relaxed bg-white/70 backdrop-blur-lg border border-cyan-100 shadow-2xl rounded-none p-10"
|
||
>
|
||
{[
|
||
"Projektujemy marki, które rosną dzięki danym i doświadczeniu użytkownika",
|
||
"Tworzymy systemy komunikacji, a nie tylko tone of voice",
|
||
"Zarządzamy marką tak jak innowacyjnym produktem lub usługą: zwinnie, testy, feedback, iteracje",
|
||
"Wdrażamy AI w miejscach, które mają znaczenie dla doświadczenia marki",
|
||
"Projektujemy onboarding, optymalizujemy punkty styku z klientem i mechanizmy wzrostu",
|
||
"Projektujemy szablony i piszemy playbooki dla marketingu, sprzedaży, HR i obsługi klienta z marką w centrum"
|
||
].map((item, i) => (
|
||
<li key={i} className="flex items-start gap-4">
|
||
<span className="w-2.5 h-2.5 mt-2 flex-shrink-0 rounded-full bg-cyan-600"></span>
|
||
<span className="text-gray-800">{item}</span>
|
||
</li>
|
||
))}
|
||
</motion.ul>
|
||
</div>
|
||
|
||
{/* Strzałka przewijania do następnej sekcji */}
|
||
<motion.div
|
||
onClick={() => document.getElementById('JakDzialamy')?.scrollIntoView({ behavior: 'smooth' })}
|
||
animate={{ y: [0, 10, 0] }}
|
||
transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
|
||
className="absolute bottom-10 flex flex-col items-center text-cyan-700 cursor-pointer"
|
||
>
|
||
<span className="text-lg font-medium mb-2">Zobacz, jak to działa</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</motion.div>
|
||
</motion.section>
|
||
|
||
|
||
|
||
|
||
{/* Zobacz, jak to działa bez ryzyka */}
|
||
<motion.section
|
||
id="JakDzialamy"
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="relative flex flex-col justify-center items-center min-h-screen pt-12 pb-32 overflow-hidden"
|
||
>
|
||
{/* Dekoracje w tle */}
|
||
{/* <div className="absolute -top-24 -left-24 w-96 h-96 bg-cyan-200 rounded-full blur-3xl opacity-30 animate-pulse" />
|
||
<div className="absolute -bottom-24 -right-24 w-80 h-80 bg-blue-300 rounded-full blur-3xl opacity-30 animate-pulse" /> */}
|
||
|
||
{/* Główna zawartość */}
|
||
<div className="relative z-10 max-w-5xl w-full mx-auto px-6 flex-grow flex flex-col justify-center items-center text-center">
|
||
<motion.h2
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="text-4xl font-bold mb-6 text-cyan-800 drop-shadow"
|
||
>
|
||
Zobacz, jak to działa bez ryzyka
|
||
</motion.h2>
|
||
<motion.h3
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.2, duration: 0.8 }}
|
||
className="text-2xl font-semibold mb-8 text-gray-800"
|
||
>
|
||
Brand Daily Test
|
||
</motion.h3>
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 10 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.3, duration: 0.8 }}
|
||
className="text-lg text-gray-700 max-w-2xl mb-12"
|
||
>
|
||
W 7 dni pokażemy Ci realne luki, szanse i jeden test do wdrożenia od ręki.
|
||
</motion.p>
|
||
|
||
<div className="grid md:grid-cols-2 gap-8 w-full">
|
||
{[
|
||
"mini-audyt doświadczeń i danych",
|
||
"mapa punktów styku",
|
||
"insighty do poprawy spójności i skuteczności",
|
||
"1 eksperyment do wdrożenia natychmiast"
|
||
].map((item, i) => (
|
||
<motion.div
|
||
key={i}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: i * 0.15, duration: 0.6 }}
|
||
className="flex items-start gap-4 bg-white/80 backdrop-blur-lg border border-cyan-100 rounded-none shadow-lg p-5 hover:shadow-xl transition h-full"
|
||
>
|
||
{/* kropka jak w sekcji "Potrzebujesz partnera" */}
|
||
<span
|
||
className="w-5 h-5 flex-shrink-0 rounded-full bg-cyan-500 mt-1"
|
||
aria-hidden="true"
|
||
/>
|
||
<span className="text-gray-800">{item}</span>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.5, duration: 0.8 }}
|
||
className="mt-12 text-lg text-gray-700"
|
||
>
|
||
<a href='#Kontakt' className="font-semibold underline decoration-cyan-600 underline-offset-4 hover:opacity-80">
|
||
Efekty zanim podejmiesz decyzję o dalszej współpracy.
|
||
</a>
|
||
</motion.p>
|
||
</div>
|
||
|
||
{/* Strzałka przewijania do następnej sekcji
|
||
<motion.div
|
||
onClick={() => document.getElementById('PomogliśmyCaseStudies')?.scrollIntoView({ behavior: 'smooth' })}
|
||
animate={{ y: [0, 10, 0] }}
|
||
transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
|
||
className="absolute bottom-10 flex flex-col items-center text-cyan-700 cursor-pointer"
|
||
>
|
||
<span className="text-lg font-medium mb-2">Zobacz komu pomogliśmy</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</motion.div> */}
|
||
</motion.section>
|
||
|
||
|
||
|
||
|
||
{/* Połączona sekcja „Pomogliśmy” + „Case Studies” (STATYCZNIE) */}
|
||
<motion.section
|
||
id="PomogliśmyCaseStudies"
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="py-24 relative overflow-visible min-h-screen"
|
||
>
|
||
<div className="max-w-6xl mx-auto px-6 text-center flex flex-col h-full">
|
||
|
||
{/* Nagłówek „Pomogliśmy” */}
|
||
<h2 className="text-4xl font-bold mb-10 text-cyan-800">
|
||
Pomogliśmy
|
||
</h2>
|
||
|
||
{/* LISTA STATYCZNA — zamiast karuzel */}
|
||
<div className="space-y-6">
|
||
{/* wiersz 1 */}
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
{[
|
||
"Ponad 20 firmom farmaceutycznym",
|
||
"Ponad 20 firmom FMCG",
|
||
"Ponad 15 firmom B2B",
|
||
"10 firmom technologicznym i startupom",
|
||
].map((item, i) => (
|
||
<div
|
||
key={`row1-${i}`}
|
||
className="flex items-start gap-4 p-5 bg-white/85 backdrop-blur-md border border-cyan-100 rounded-none shadow-sm hover:shadow-md transition text-left"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="h-6 w-6 text-cyan-600 flex-shrink-0"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth={2}
|
||
aria-hidden="true"
|
||
>
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
<p className="text-gray-800 text-base md:text-lg leading-relaxed text-left">
|
||
{item}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* wiersz 2 */}
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
{[
|
||
"4 bankom i 3 firmom ubezpieczeniowym",
|
||
"5 instytucjom edukacyjnym",
|
||
"Firmom z branży rozrywkowej, modowej, przemysłowej, wydawniczej, rolniczej i wielu innych",
|
||
"Globalnym centralom koncernów z USA, Kanady, Niemiec, Wielkiej Brytanii, Hiszpanii, Węgier i Polski",
|
||
].map((item, i) => (
|
||
<div
|
||
key={`row2-${i}`}
|
||
className="flex items-start gap-4 p-5 bg-white/85 backdrop-blur-md border border-cyan-100 rounded-none shadow-sm hover:shadow-md transition text-left"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="h-6 w-6 text-cyan-600 flex-shrink-0"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth={2}
|
||
aria-hidden="true"
|
||
>
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
<p className="text-gray-800 text-base md:text-lg leading-relaxed text-left">
|
||
{item}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
|
||
{/* Case Studies — bez zmian, korzysta z Twojego komponentu CaseCard */}
|
||
<div className="max-w-6xl mx-auto px-6 mt-16">
|
||
<h3 className="text-3xl font-bold mb-10 text-cyan-800">
|
||
Case Studies
|
||
</h3>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8 items-start">
|
||
{caseStudies.map((study, index) => (
|
||
<CaseCard
|
||
key={index}
|
||
index={index}
|
||
openIndex={openIndex}
|
||
setOpenIndex={setOpenIndex}
|
||
title={study.title}
|
||
short={study.short}
|
||
details={study.details}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.section>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
{/* KONTAKT – wyeksponowany baner */}
|
||
<section
|
||
id="Kontakt"
|
||
className="relative w-full bg-gradient-to-r from-cyan-700 via-cyan-600 to-blue-700 text-white py-14 md:py-20"
|
||
>
|
||
<div className="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.1fr_0.9fr] gap-10 items-center">
|
||
{/* Tekst + CTA */}
|
||
<div>
|
||
<h2 className="text-3xl md:text-4xl font-extrabold tracking-tight">
|
||
Zacznij od eksperymentu
|
||
</h2>
|
||
<p className="mt-3 md:mt-4 text-lg text-cyan-100 max-w-xl">
|
||
Zobacz, co marka może zrobić – w 7 dni.
|
||
</p>
|
||
|
||
<div className="mt-8 flex flex-col sm:flex-row gap-4">
|
||
<a
|
||
href="mailto:primecode@primecode.pl"
|
||
className="inline-flex items-center justify-center px-6 h-12 bg-white text-cyan-700 font-semibold border border-white hover:opacity-90 transition rounded-none"
|
||
aria-label="Napisz maila do Prime Code"
|
||
>
|
||
{/* mail icon */}
|
||
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
|
||
d="M4 4h16v16H4z M22 6l-10 7L2 6" />
|
||
</svg>
|
||
Napisz maila
|
||
</a>
|
||
<a
|
||
href="tel:+48500133609"
|
||
className="inline-flex items-center justify-center px-6 h-12 bg-transparent text-white font-semibold border border-white hover:bg-white/10 transition rounded-none"
|
||
aria-label="Zadzwoń do Prime Code"
|
||
>
|
||
{/* phone icon */}
|
||
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
|
||
d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07
|
||
19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.1 4.18
|
||
2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.98.36 1.93.69 2.84a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.24-1.26a2 2 0 0 1 2.11-.45c.91.33 1.86.56 2.84.69A2 2 0 0 1 22 16.92z" />
|
||
</svg>
|
||
Zadzwoń
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Karta z osobą kontaktową */}
|
||
<div className="bg-white text-gray-800 border border-cyan-100 shadow-xl p-6 md:p-7 rounded-none">
|
||
<div className="flex items-center gap-4">
|
||
<img
|
||
src="/jacek.jpg"
|
||
alt="Jacek Pogorzelski – Prime Code"
|
||
className="w-16 h-16 object-cover rounded-full"
|
||
/>
|
||
<div>
|
||
<a
|
||
href="https://jacekpogorzelski.pl"
|
||
className="text-lg font-semibold text-cyan-700 underline underline-offset-4"
|
||
>
|
||
Jacek Pogorzelski
|
||
</a>
|
||
<p className="text-sm text-gray-600 mt-0.5">Prime Code</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-5 space-y-2">
|
||
<a href="mailto:primecode@primecode.pl" className="flex items-center gap-2 group">
|
||
<svg className="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
|
||
d="M4 4h16v16H4z M22 6l-10 7L2 6" />
|
||
</svg>
|
||
<span className="group-hover:underline">primecode@primecode.pl</span>
|
||
</a>
|
||
<a href="tel:+48500133609" className="flex items-center gap-2 group">
|
||
<svg className="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
|
||
d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07
|
||
19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.1 4.18
|
||
2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.98.36 1.93.69 2.84a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.24-1.26a2 2 0 0 1 2.11-.45c.91.33 1.86.56 2.84.69A2 2 0 0 1 22 16.92z" />
|
||
</svg>
|
||
<span className="group-hover:underline">+48 500 133 609</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FOOTER – prosty i równy */}
|
||
<footer className="bg-gradient-to-b from-cyan-100 to-blue-100 border-t border-cyan-200">
|
||
<div className="max-w-6xl mx-auto px-6 py-8">
|
||
<p className="text-center text-sm text-gray-500">© 2025 Prime Code</p>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
{/* Quick contact bar */}
|
||
<div
|
||
aria-label="Szybki kontakt"
|
||
className="fixed z-50 bottom-4 right-4 sm:right-6 flex items-center gap-3 bg-white/90 backdrop-blur-md border border-cyan-100 shadow-lg rounded-full px-3 py-2"
|
||
>
|
||
<img src="/jacek.jpg" alt="Jacek Pogorzelski" className="w-7 h-7 rounded-full object-cover" />
|
||
<a href="mailto:primecode@primecode.pl" className="text-sm text-cyan-700 hover:underline">Email</a>
|
||
<span className="text-gray-300">•</span>
|
||
<a href="tel:+48500133609" className="text-sm text-cyan-700 hover:underline">Zadzwoń</a>
|
||
</div>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function CaseCard({
|
||
index,
|
||
openIndex,
|
||
setOpenIndex,
|
||
title,
|
||
short,
|
||
details
|
||
}: {
|
||
index: number
|
||
openIndex: number | null
|
||
setOpenIndex: (i: number | null) => void
|
||
title: string
|
||
short: string
|
||
details: string[]
|
||
}) {
|
||
const isOpen = openIndex === index
|
||
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
whileHover={{ scale: 1.03 }}
|
||
className="bg-white/80 backdrop-blur-lg shadow-xl border border-cyan-100 rounded-none
|
||
p-6 flex flex-col justify-between min-h-[220px] max-w-[350px] mx-auto transition-all duration-300"
|
||
>
|
||
<div>
|
||
<h3 className="text-2xl font-semibold text-cyan-700 mb-2">{title}</h3>
|
||
<p className="text-gray-700 mb-4">{short}</p>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setOpenIndex(isOpen ? null : index)}
|
||
className="mt-auto text-cyan-600 font-semibold hover:underline flex items-center gap-2 focus:outline-none"
|
||
>
|
||
{isOpen ? 'Zwiń' : 'Pokaż szczegóły'}
|
||
<svg
|
||
className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : 'rotate-0'}`}
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
|
||
<AnimatePresence>
|
||
{isOpen && (
|
||
<motion.ul
|
||
key="expanded"
|
||
initial={{ opacity: 0, height: 0 }}
|
||
animate={{ opacity: 1, height: 'auto' }}
|
||
exit={{ opacity: 0, height: 0 }}
|
||
transition={{ duration: 0.3 }}
|
||
className="mt-4 list-disc pl-5 text-left text-gray-700 space-y-2 text-sm">
|
||
{details.map((d, idx) => (
|
||
<li key={idx}>{d}</li>
|
||
))}
|
||
</motion.ul>
|
||
)}
|
||
</AnimatePresence>
|
||
</motion.div>
|
||
)
|
||
}
|
||
|
||
function Tile({
|
||
open,
|
||
onOpen,
|
||
onClose,
|
||
title,
|
||
short,
|
||
output,
|
||
efekt,
|
||
details,
|
||
}: {
|
||
open: boolean;
|
||
onOpen: () => void;
|
||
onClose: () => void;
|
||
title: string;
|
||
short: string;
|
||
output: string;
|
||
efekt: string;
|
||
details: React.ReactNode;
|
||
}) {
|
||
return (
|
||
<article
|
||
className={
|
||
"flex flex-col rounded-none border border-cyan-100 bg-white/90 transition-shadow duration-300 " +
|
||
(open ? "shadow-xl ring-1 ring-cyan-100" : "shadow")
|
||
}
|
||
>
|
||
{/* Górna, widoczna część – równa wysokość przy stanie zamkniętym */}
|
||
<div className={`p-6 flex flex-col ${open ? "" : "min-h-[280px]"}`}>
|
||
<div className="flex justify-between items-start">
|
||
<h3 className="text-xl font-semibold text-cyan-700 mb-2">{title}</h3>
|
||
|
||
</div>
|
||
|
||
<p className="text-gray-700 mb-2 leading-relaxed text-justify">{short}</p>
|
||
|
||
<p className="text-sm text-gray-700 leading-[1.65]">
|
||
<span className="font-semibold text-cyan-800">Output:</span> {output}
|
||
</p>
|
||
|
||
|
||
{!open && (
|
||
<div className="mt-auto pt-4 border-t border-cyan-100">
|
||
<button
|
||
type="button"
|
||
onClick={onOpen}
|
||
aria-expanded={open}
|
||
className="text-cyan-600 font-semibold hover:underline cursor-pointer"
|
||
>
|
||
Zobacz więcej
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Rozwijana część – animujemy tylko wysokość tej sekcji */}
|
||
<motion.div
|
||
initial={false}
|
||
animate={open ? { height: "auto", opacity: 1 } : { height: 0, opacity: 0 }}
|
||
transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
|
||
style={{ overflow: "hidden", willChange: "height", position: "relative", top: "-10px" }}
|
||
>
|
||
<div className="px-6 pt-0 pb-6 text-sm text-gray-700">
|
||
{/* typografia: ten sam line-height i marginesy */}
|
||
<div className="text-justify hyphens-auto leading-[1.65] [&>p]:mb-2 [&_ul]:my-2 [&_li]:leading-[1.65]">
|
||
{details}
|
||
<p className="mt-2">
|
||
<span className="font-semibold text-cyan-800">Efekt:</span> {efekt}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-4 pt-4 border-t border-cyan-100">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="text-cyan-600 font-semibold hover:underline cursor-pointer"
|
||
>
|
||
Zwiń
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
|
||
|
||
</article>
|
||
);
|
||
}
|
||
|
||
|
||
|