Wersja pokazowa 16.09.2025

app/page.tsx

@@ -66,12 +66,13 @@ export default function Home() {
 
   const navItems = [
     { id: 'PrimeCode', label: 'O nas' },
-    { id: 'Sytuacje', label: 'Sytuacje' },
+    { id: 'Sytuacje', label: 'Wyzwania' },
-    { id: 'Partner', label: 'Potrzebujesz partnera' },
+    { id: 'Partner', label: 'Twoje potrzeby' },
     { id: 'Model', label: 'Model Prime Code' },
     { id: 'CoPotrafimy', label: 'Co potrafimy?' },
     { id: 'JakDzialamy', label: 'Jak działamy?' },
     { id: 'PomogliśmyCaseStudies', label: 'Pomogliśmy' },
+    { id: 'Kontakt', label: 'Kontakt' },
   ]
 
   const caseStudies = [
@@ -434,6 +435,35 @@ export default function Home() {
               Zobacz, co marka może zrobić — w 7 dni.
             </p>
 
+            {/* Lokalizacje – chipsy/glass */}
+            <div className="mt-5 flex flex-wrap items-center gap-2 text-sm">
+              <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full
+                         bg-white/10 ring-1 ring-white/20 backdrop-blur">
+                <span className="h-2 w-2 rounded-full
+                           bg-[radial-gradient(circle,#F28241_30%,#8C2E47_95%)]" />
+                Warszawa
+              </span>
+              <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full
+                         bg-white/10 ring-1 ring-white/20 backdrop-blur">
+                <span className="h-2 w-2 rounded-full
+                           bg-[radial-gradient(circle,#F28241_30%,#8C2E47_95%)]" />
+                Kraków
+              </span>
+              <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full
+                         bg-white/10 ring-1 ring-white/20 backdrop-blur">
+                <span className="h-2 w-2 rounded-full
+                           bg-[radial-gradient(circle,#F28241_30%,#8C2E47_95%)]" />
+                Gdańsk
+              </span>
+              <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full
+                         bg-white/10 ring-1 ring-white/20 backdrop-blur">
+                <span className="h-2 w-2 rounded-full
+                           bg-[radial-gradient(circle,#F28241_30%,#8C2E47_95%)]" />
+                Wrocław
+              </span>
+              <span className="px-2 text-white/85">— działamy zdalnie i hybrydowo</span>
+            </div>
+
             {/* CTA – biała i obrysowana, jak na zrzucie */}
             <div className="mt-8 flex flex-wrap gap-3">
               <a
@@ -453,6 +483,7 @@ export default function Home() {
                 <span>Zadzwoń</span>
               </a>
             </div>
+
           </motion.div>
 
           {/* PRAWA: karta kontaktowa – jasna, z cieniem (jak na screenie) */}
@@ -495,6 +526,8 @@ export default function Home() {
                 <Phone className="size-4 text-sky-600" aria-hidden />
                 <span>+48 500 133 609</span>
               </a>
+
+
             </div>
           </motion.aside>
         </div>
@@ -571,12 +604,37 @@ function Header({
 }: {
   title: string;
   className?: string;
-  gradient?: "none" | "warm" | "cool" | "coolSoft";
+  // --- w sygnaturze Header:
+  gradient?: "none" | "warm" | "cool" | "coolSoft" | "sunset" | "bloom" | "bloomSoft" | "bloomReverse" | "prime" | "primeSoft" | "primeReverse";
+
 }) {
   const TEXT = {
     warm: "text-transparent bg-clip-text bg-[linear-gradient(90deg,#FDBA74_0%,#F97316_55%,#F472B6_100%)]",
     cool: "text-transparent bg-clip-text bg-[linear-gradient(90deg,#0284C7_0%,#2563EB_55%,#4F46E5_100%)]",
     coolSoft: "text-transparent bg-clip-text bg-[linear-gradient(90deg,#38BDF8_0%,#3B82F6_55%,#6366F1_100%)]",
+    sunset: "text-transparent bg-clip-text bg-[linear-gradient(90deg,#FF7A00_0%,#FF3D81_70%)]",
+    // NOWE — motyw PRIME (Twoje kolory)
+    prime:
+      "text-transparent bg-clip-text bg-[linear-gradient(90deg,#F28241_0%,#CC2E47_100%)]",
+    primeSoft:
+      // delikatniejsza, nadal kończy się #8C2E47 jako najciemniejszym
+      "text-transparent bg-clip-text bg-[linear-gradient(90deg,#F7B891_0%,#F28241_45%,#8C2E47_100%)]",
+    primeReverse:
+      // jeśli potrzebujesz odwróconego kierunku, też kończymy #8C2E47
+      "text-transparent bg-clip-text bg-[linear-gradient(90deg,#F28241_0%,#8C2E47_100%)]",
+
+    // Twoja wersja
+    bloom:
+      "text-transparent bg-clip-text bg-[linear-gradient(90deg,#F59E0B,#F97316)]",
+
+    // Subtelniejsza na białym tle (lekko rozjaśnione odcienie)
+    bloomSoft:
+      "text-transparent bg-clip-text bg-[linear-gradient(90deg,#0E3E59_0%,#E68A56_40%,#96402A_56%,#C96A58_78%,#9A3A56_100%)]",
+
+    // Odwrócony kierunek (ciepłe → chłodne)
+    bloomReverse:
+      "text-transparent bg-clip-text bg-[linear-gradient(90deg,#8C2E47_0%,#BF533B_24%,#731702_45%,#F28241_70%,#083A59_100%)]",
+
     none: "",
   } as const;
 
@@ -584,7 +642,16 @@ function Header({
     warm: "linear-gradient(90deg,rgba(253,186,116,.9),rgba(249,115,22,.9),rgba(244,114,182,.9))",
     cool: "linear-gradient(90deg,rgba(2,132,199,.9),rgba(37,99,235,.9),rgba(79,70,229,.9))",
     coolSoft: "linear-gradient(90deg,rgba(56,189,248,.9),rgba(59,130,246,.9),rgba(99,102,241,.9))",
+    sunset: "linear-gradient(90deg,#FF7A00,#FF3D81)",
+    bloom: "linear-gradient(90deg,#8C2E47,#083A59,#F28241,#731702,#BF533B)",
+
+    bloomSoft: "linear-gradient(90deg,#0E3E59,#E68A56,#96402A,#C96A58,#9A3A56)",
+    bloomReverse: "linear-gradient(90deg,#8C2E47,#BF533B,#731702,#F28241,#083A59)",
     none: "linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.12))",
+    // NOWE — motyw PRIME (Twoje kolory)
+    prime: "linear-gradient(90deg,#F28241,#8C2E47)",
+    primeSoft: "linear-gradient(90deg,#F7B891,#F28241,#8C2E47)",
+    primeReverse: "linear-gradient(90deg,#F28241,#8C2E47)",
   } as const;
 
   return (
@@ -601,15 +668,13 @@ function Header({
         {title}
       </h2>
 
-      <div
+      {/* <div className="mt-6 h-[3px] rounded-full [mask-image:linear-gradient(90deg,transparent,black_10%,black_90%,transparent)]" style={{ background: RULE[gradient] }} /> */}
-        className="mt-6 h-[3px] rounded-full
-                   [mask-image:linear-gradient(90deg,transparent,black_10%,black_90%,transparent)]"
-        style={{ background: RULE[gradient] }}
-      />
     </header>
   );
 }
 
+
+
 function BackgroundMedia({
   src,
   poster,
@@ -698,53 +763,97 @@ function HeroPixabayBG({
     <section
       id="PrimeCode"
       ref={sectionRef}
-      className="relative min-h-[100dvh] md:h-[100svh] isolate scroll-mt-16"  // ← dvh na mobile
+      className="relative min-h-[100dvh] md:min-h-[calc(100svh-4rem)] isolate scroll-mt-16"  // ← dvh na mobile
     >
-      <div className="md:sticky md:top-0 md:h-screen">
+      <div className="md:sticky md:top-16 md:min-h-[calc(100svh-4rem)]">
         <BackgroundMedia src={src} poster={poster} sectionRef={sectionRef} />
 
         <MotionConfig reducedMotion="never">
-          <div className="relative z-10 flex items-start md:items-center h-full text-white py-24 md:py-0">
+          <div className="relative z-10 flex items-start md:items-start h-full text-white py-20 sm:py-24 md:pt-12 md:pb-60">
-            <div className="max-w-7xl mx-auto w-full px-6 grid md:grid-cols-[0.9fr_1.1fr] gap-12 items-start md:items-center">
+            <div className="max-w-7xl mx-auto w-full px-4 sm:px-6 grid grid-cols-1 md:grid-cols-[1.12fr_0.88fr] gap-8 sm:gap-12 items-start md:items-center">
-              <motion.h1
+
+              <motion.div
                 style={canParallax ? { y: titleY, willChange: "transform, opacity" } : undefined}
                 variants={h1V}
                 initial="hidden"
-                animate={ready ? "show" : "hidden"}      // ← KLUCZ: fail-safe
+                animate={ready ? "show" : "hidden"}
-                className="text-[clamp(2.4rem,10vw,6.5rem)] md:text-8xl lg:text-9xl font-extrabold drop-shadow-[0_3px_10px_rgba(0,0,0,.55)]"
+                className="relative w-fit select-none pointer-events-none mb-5 sm:mb-6 md:mb-2 md:mt-10 lg:mt-14 md:min-h-[90px] mx-auto justify-self-center md:justify-self-start md:mx-0">
-              >
-                Prime Code
-              </motion.h1>
 
+
+                {/* WŁAŚCIWE LOGO – większe i wyśrodkowane na mobile, z offsetem w lewo od md */}
+                <img
+                  src="/LogoPrimeCode-transparent.png"
+                  alt=""
+                  className="
+      h-auto
+    /* mobile – tak jak było: duże i czytelne */
+    w-[clamp(300px,88vw,760px)]
+    sm:w-[clamp(340px,80vw,780px)]
+
+    /* md – WYRAŹNIE większe (zawsze większe niż blok H2) */
+    md:w-[clamp(420px,48vw,680px)]
+   lg:w-[clamp(540px,46vw,760px)]
+   xl:w-[clamp(600px,44vw,820px)]
+
+    /* wyrównanie do lewego brzegu copy */
+    mx-auto md:mx-0
+    md:-ml-5 lg:-ml-6 xl:-ml-8
+
+    brightness-0 invert drop-shadow-[0_8px_22px_rgba(0,0,0,.45)]
+    "
+                  draggable={false}
+                />
+              </motion.div>
+
+              <h1 className="sr-only">Prime Code</h1>
+
+
+
+
+              {/* === COPY (z mobilnym scrimem) === */}
               <motion.div
                 variants={stackHero}
                 initial="hidden"
-                animate={ready ? "show" : "hidden"}      // ← KLUCZ: fail-safe
+                animate={ready ? "show" : "hidden"}
                 transition={{ delay: 0.25 }}
                 className="md:col-start-1 md:row-start-2"
                 style={{ willChange: "transform, opacity" }}
               >
-                <motion.h2 variants={itemHero} className="mt-2 text-3xl md:text-4xl font-semibold drop-shadow-[0_2px_8px_rgba(0,0,0,.55)]">
+                {/* wrapper: tło pod tekstem tylko na mobile */}
-                  Integrujemy markę w codziennych działaniach
+                <div className="relative md:p-0 p-4 md:mx-0 -mx-2 md:rounded-none rounded-2xl">
-                </motion.h2>
+                  {/* scrim (tylko mobile) */}
+                  <div
+                    aria-hidden
+                    className="md:hidden absolute inset-0 z-0 
+                 bg-black/10 backdrop-blur-[1.5px]"
+                  />
 
-                <motion.p variants={itemHero} className="mt-4 text-xl md:text-2xl text-white/95 drop-shadow-[0_2px_6px_rgba(0,0,0,.55)]">
+                  {/* właściwa treść */}
-                  Marka, która działa codziennie. W czasie rzeczywistym. W każdym punkcie styku.
+                  <div className="relative z-10">
-                </motion.p>
+                    <motion.h2 variants={itemHero} className="mt-2 text-3xl md:text-4xl font-semibold drop-shadow-[0_2px_8px_rgba(0,0,0,.55)]">
+                      Integrujemy markę w codziennych działaniach
+                    </motion.h2>
 
-                <motion.div variants={ruleHero} className="mt-6 h-[3px] w-28 origin-left bg-gradient-to-r from-cyan-400 to-blue-500" />
+                    <motion.p variants={itemHero} className="mt-4 text-xl md:text-2xl text-white/95 drop-shadow-[0_2px_6px_rgba(0,0,0,.55)]">
+                      Marka, która działa codziennie. W czasie rzeczywistym. W każdym punkcie styku.
+                    </motion.p>
 
-                <motion.p variants={itemHero} className="max-w-3xl text-lg md:text-xl text-white/92 leading-relaxed mt-6 drop-shadow-[0_2px_6px_rgba(0,0,0,.55)]">
+                    <motion.div variants={ruleHero} className="mt-6 h-[3px] w-28 origin-left bg-gradient-to-r from-cyan-400 to-blue-500" />
-                  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> 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 variants={itemHero} className="mt-4 max-w-3xl text-lg md:text-xl text-white/92 leading-relaxed drop-shadow-[0_2px_6px_rgba(0,0,0,.55)]">
+                    <motion.p variants={itemHero} className="max-w-3xl text-lg md:text-xl text-white/92 leading-relaxed mt-6 drop-shadow-[0_2px_6px_rgba(0,0,0,.55)]">
-                  Bo marka <strong>to nie tylko opowieść.</strong> To system. Aktywny, skalowalny, zsynchronizowany z organizacją.
+                      W Prime Code integrujemy markę z tym, co najważniejsze – realnymi działaniami, danymi,
-                </motion.p>
+                      technologią i zespołami. Nie tworzymy kampanii dla samej widoczności. Projektujemy
+                      <strong> 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 variants={itemHero} className="mt-4 max-w-3xl text-lg md:text-xl text-white/92 leading-relaxed drop-shadow-[0_2px_6px_rgba(0,0,0,.55)]">
+                      Bo marka <strong>to nie tylko opowieść.</strong> To system. Aktywny, skalowalny, zsynchronizowany z organizacją.
+                    </motion.p>
+                  </div>
+                </div>
               </motion.div>
+
             </div>
 
             <button
@@ -758,8 +867,8 @@ function HeroPixabayBG({
             </button>
           </div>
         </MotionConfig>
-      </div>
+      </div >
-    </section>
+    </section >
   );
 }
 
@@ -901,13 +1010,14 @@ function DlaczegoIntegracjiWarm({ why }: { why: WhyContent }) {
               leading-[1.18]
               pt-[2px] pb-[6px]
               text-transparent bg-clip-text
-              bg-[linear-gradient(90deg,#FFB457_0%,#FF7A59_45%,#F472B6_75%,#3B82F6_100%)]
+              bg-[linear-gradient(90deg,#F28241_0%,#CC2E47_100%)]
             `}
+
           >
             Dlaczego integracja marki to konieczność?
           </motion.h2>
         </motion.div>
-        <FancySeparator className="mt-5 max-w-4xl" />
+        {/* <FancySeparator className="mt-5 max-w-4xl" /> */}
       </header>
 
       <div className="relative max-w-4xl mx-auto px-6 mt-12">
@@ -995,46 +1105,46 @@ function BracketCorner({
 
 
 
-function FancySeparator({ className = "" }: { className?: string }) {
+// function FancySeparator({ className = "" }: { className?: string }) {
-  return (
+//   return (
-    <div className={`relative w-full ${className}`}>
+//     <div className={`relative w-full ${className}`}>
-      {/* główna linia (gradient, przygaszone końce) */}
+//       {/* główna linia (gradient, przygaszone końce) */}
-      <div
+//       <div
-        className="h-[2px] w-full rounded-full"
+//         className="h-[2px] w-full rounded-full"
-        style={{
+//         style={{
-          background:
+//           background:
-            "linear-gradient(90deg, rgba(253,186,116,1) 0%, rgba(249,115,22,1) 55%, rgba(244,114,182,1) 100%)",
+//             "linear-gradient(90deg, rgba(253,186,116,1) 0%, rgba(249,115,22,1) 55%, rgba(244,114,182,1) 100%)",
-          WebkitMaskImage:
+//           WebkitMaskImage:
-            "linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%)",
+//             "linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%)",
-          maskImage:
+//           maskImage:
-            "linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%)",
+//             "linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%)",
-        }}
+//         }}
-      />
+//       />
-      {/* subtelny highlight nad linią */}
+//       {/* subtelny highlight nad linią */}
-      <div
+//       <div
-        className="absolute inset-0 -translate-y-[2px] h-[1px] bg-white/60 mix-blend-screen"
+//         className="absolute inset-0 -translate-y-[2px] h-[1px] bg-white/60 mix-blend-screen"
-        style={{
+//         style={{
-          WebkitMaskImage:
+//           WebkitMaskImage:
-            "linear-gradient(90deg, transparent 0, black 10%, black 90%, transparent 100%)",
+//             "linear-gradient(90deg, transparent 0, black 10%, black 90%, transparent 100%)",
-          maskImage:
+//           maskImage:
-            "linear-gradient(90deg, transparent 0, black 10%, black 90%, transparent 100%)",
+//             "linear-gradient(90deg, transparent 0, black 10%, black 90%, transparent 100%)",
-        }}
+//         }}
-      />
+//       />
-      {/* delikatny glow */}
+//       {/* delikatny glow */}
-      <div
+//       <div
-        className="pointer-events-none absolute -inset-x-1 -inset-y-[6px] blur-md"
+//         className="pointer-events-none absolute -inset-x-1 -inset-y-[6px] blur-md"
-        style={{
+//         style={{
-          background:
+//           background:
-            "linear-gradient(90deg, rgba(253,186,116,.18), rgba(249,115,22,.18), rgba(244,114,182,.18))",
+//             "linear-gradient(90deg, rgba(253,186,116,.18), rgba(249,115,22,.18), rgba(244,114,182,.18))",
-          WebkitMaskImage:
+//           WebkitMaskImage:
-            "linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%)",
+//             "linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%)",
-          maskImage:
+//           maskImage:
-            "linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%)",
+//             "linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%)",
-        }}
+//         }}
-      />
+//       />
-    </div>
+//     </div>
-  );
+//   );
-}
+// }
 
 
 /* ======================= CZY ZNASZ TE SYTUACJE? (nowa wersja) ======================= */
@@ -1141,7 +1251,7 @@ function SytuacjeSection() {
         initial="hidden"
         whileInView="show"
         viewport={{ once: true, amount: 0.35 }}
-        className="max-w-6xl mx-auto px-6 grid gap-5 md:grid-cols-2 lg:grid-cols-3"
+        className="max-w-6xl mx-auto px-6 grid gap-5 md:grid-cols-2 lg:grid-cols-3 items-stretch"
       >
         {items.map((it, i) => (
           <SituationCardLite
@@ -1195,7 +1305,7 @@ function SituationCardLite({
   return (
     <motion.article
       variants={cardV}
-      className="relative overflow-hidden rounded-none bg-white ring-1 ring-black/8 hover:ring-black/10 transition
+      className="h-full relative overflow-hidden rounded-none bg-white ring-1 ring-black/8 hover:ring-black/10 transition
                  shadow-none hover:shadow-[0_8px_24px_rgba(16,24,40,0.06)]"
     >
       {/* cienka linia akcentowa u góry */}
@@ -1207,11 +1317,14 @@ function SituationCardLite({
                       [background-size:16px_16px]" />
 
       <div className="p-5">
-        <div className="flex items-start gap-3">
+        <div className="grid grid-cols-[2.25rem_1fr] items-start gap-3
-          <div className={`shrink-0 mt-[2px] grid place-items-center h-9 w-9 rounded-full bg-gradient-to-br ${accent} text-white`}>
+                min-h-[5.6rem] md:min-h-[4rem]">
+          <div className={`shrink-0 grid place-items-center h-9 w-9 rounded-full bg-gradient-to-br ${accent} text-white`}>
             <Icon className="h-[18px] w-[18px]" aria-hidden />
           </div>
-          <h3 className="text-[1.02rem] font-semibold leading-snug">{title}</h3>
+          <h3 className="text-[1.02rem] font-semibold leading-[1.3]">
+            {title}
+          </h3>
         </div>
 
         <p className="mt-2 text-[0.94rem] leading-relaxed text-neutral-700">{text}</p>
@@ -1303,7 +1416,7 @@ function PartnerSection() {
           whileInView="show"
           viewport={{ once: true, amount: 0.95 }}
         >
-          <Header title="Potrzebujesz partnera, który:" gradient="warm" />
+          <Header title="Potrzebujesz partnera, który:" gradient="prime" />
         </motion.div>
 
         <div className="max-w-5xl mx-auto px-6">
@@ -1580,11 +1693,11 @@ function CoPotrafimySection() {
           className={`${headingFont.className}
             inline-block text-[clamp(2rem,6vw,3.2rem)] font-extrabold tracking-[-0.02em]
             text-transparent bg-clip-text
-            bg-[linear-gradient(90deg,#FFB457_0%,#FF7A59_45%,#F472B6_75%,#3B82F6_100%)]`}
+            bg-[linear-gradient(90deg,#F28241_0%,#CC2E47_100%)]`}
         >
           Co potrafimy?
         </motion.h2>
-        <FancySeparator className="mt-5 max-w-4xl" />
+        {/* <FancySeparator className="mt-5 max-w-4xl" /> */}
       </header>
 
       <motion.ul
@@ -2001,11 +2114,11 @@ function PomoglismySection({
           className={`${headingFont.className}
             inline-block text-[clamp(2rem,6vw,3.2rem)] font-extrabold tracking-[-0.02em]
             text-transparent bg-clip-text
-            bg-[linear-gradient(90deg,#FFB457_0%,#FF7A59_45%,#F472B6_75%,#3B82F6_100%)]`}
+            bg-[linear-gradient(90deg,#F28241_0%,#CC2E47_100%)]`}
         >
           Pomogliśmy
         </motion.h2>
-        <FancySeparator className="mt-5 max-w-4xl" />
+        {/* <FancySeparator className="mt-5 max-w-4xl" /> */}
       </header>
 
       {/* Panel z wypunktowaniem – dwie kolumny od md */}
@@ -2183,17 +2296,7 @@ function CSCard({
           <span className="shrink-0 mt-[6px] inline-block w-2.5 h-2.5 rounded-full bg-gradient-to-br from-sky-400 to-indigo-500" />
           <div>
             <h4 className="text-lg font-semibold">{title}</h4>
-            <p
+            <p className="text-neutral-700 mt-1">{short}</p>
-              className="text-neutral-700 mt-1"
-              style={{
-                display: '-webkit-box',
-                WebkitLineClamp: 2,          // ← utnie do 2 linii (zmień na 3, jeśli wolisz)
-                WebkitBoxOrient: 'vertical',
-                overflow: 'hidden',
-              }}
-            >
-              {short}
-            </p>
           </div>
         </div>