diff --git a/app/globals.css b/app/globals.css index a2dc41e..26f2d80 100644 --- a/app/globals.css +++ b/app/globals.css @@ -24,3 +24,21 @@ body { color: var(--foreground); font-family: Arial, Helvetica, sans-serif; } + +html { + scroll-behavior: smooth; +} + +@keyframes gradientShift { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } + + 100% { + background-position: 0% 50%; + } +} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 21b686d..ab65e92 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,103 +1,1250 @@ -import Image from "next/image"; +'use client' +import { motion, AnimatePresence } from 'framer-motion' +import { useState, useCallback, useEffect } from "react" export default function Home() { - return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
-
- - Vercel logomark - Deploy now - - - Read our docs + const [openIndex, setOpenIndex] = useState(null) + + const [activeSection, setActiveSection] = useState("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(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: ( + <> +

+ Nie patrzymy na markę z dystansu. Wchodzimy w jej codzienne tętno. + Skupiamy się na tym, co naprawdę generuje doświadczenie klienta: +

+ + {/* stałe, eleganckie kropki */} +
    +
  • + punkty styku (touchpointy), +
    • +
  • + mikrodecyzje zespołów, +
    • +
  • + automatyczne procesy i sygnały marki. +
    • +
+ + ), + }, + { + 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: ( + <> +

+ Integrujemy markę z codzienną dynamiką operacyjną. Nie robimy rewolucji — + synchronizujemy rytm: +

+ + {/* stałe, eleganckie kropki */} +
    +
  • + automatyzujemy to, co można, +
    • +
  • + personalizujemy to, co warto, +
    • +
  • + urealniamy to, co obiecujesz jako marka. +
    • +
+ + ), + }, + { + 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: ( + <> +

+ Marka przestaje być tylko deklaracją. Zaczyna + działać w realnym czasie i miejscu: +

+ + {/* stałe, eleganckie kropki */} +
    +
  • + w aplikacji i e-mailach, +
    • +
  • + w polityce cenowej i mechanizmach CRM, +
    • +
  • + w sklepie internetowym i na półce w punkcie sprzedaży. +
    • +
+ + ), + }, + ]; + + + const scrollToIntegration = useCallback(() => { + const section = document.getElementById('DlaczegoIntegracji') + section?.scrollIntoView({ behavior: 'smooth' }) + }, []) + + return ( + + + +
+ + {/* ---- ESTETYCZNE, WIELOWARSTWOWE TŁO ---- */} +
+ {/* Gradient bazowy */} +
-