diff --git a/app/globals.css b/app/globals.css index 26f2d80..616b66d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -41,4 +41,34 @@ html { 100% { background-position: 0% 50%; } +} + +/* tailwind.config lub global.css */ +.bg-grid { + background-image: url('/visuals/grid.svg'); + background-size: 24px 24px; +} + +.bg-noise { + background-image: url('/visuals/noise.png'); + background-size: 200px 200px; + opacity: .05; +} + +/* Hero video jest dekoracyjne – chowamy natywne UI przeglądarek */ +.heroVideo::-webkit-media-controls { + display: none !important; +} + +.heroVideo::-webkit-media-controls-enclosure { + display: none !important; +} + +.heroVideo::-webkit-media-controls-panel { + display: none !important; +} + +/* Firefox/Edge raczej nie pokażą UI bez atrybutu controls, ale zostawiamy dla pewności: */ +.heroVideo::-moz-media-controls { + display: none !important; } \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 7e766bf..f846f04 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,129 +1,159 @@ 'use client' -import { motion, AnimatePresence, useScroll, useTransform, useMotionTemplate, useTime, MotionValue, useSpring } from "framer-motion"; -import { useState, useCallback, useEffect } from "react" -import { Palette, Sparkles, Gauge, FlaskConical, TrendingUp, Users, Brain, CheckCircle2, Zap, CircleDot, XCircle } from "lucide-react"; -// na górze pliku (masz już useEffect), dodaj: -import { createPortal } from "react-dom"; +import { + motion, + MotionConfig, + useInView, + AnimatePresence, + useScroll, + useTransform, + useReducedMotion, + useMotionValue, + useSpring, + type Variants, +} from "framer-motion"; + +import { Megaphone, MessageSquare, LineChart, Users, Wrench, ClipboardCheck, Mail, Phone, Menu, X } from "lucide-react"; +import React, { useRef, useEffect, useState, useCallback } from 'react' + +import { Plus_Jakarta_Sans } from "next/font/google"; + +const headingFont = Plus_Jakarta_Sans({ + subsets: ["latin"], + weight: ["700", "800"], + display: "swap", +}); + + +import { Manrope } from "next/font/google"; + +const sytuacjeFont = Manrope({ + subsets: ["latin"], + weight: ["700", "800"], + display: "swap", +}); + + + +/* ========================================================= + Prime Code — Neo-Editorial+, full-bleed video hero + Tekst zachowany 1:1 + ========================================================= */ export default function Home() { - const [openIndex, setOpenIndex] = useState(null) + const [activeSection, setActiveSection] = useState('PrimeCode') + const [mobileOpen, setMobileOpen] = useState(false); - const [activeSection, setActiveSection] = useState("PrimeCode"); - - const [uiVariant, setUiVariant] = useState<"A" | "B" | "C">("A"); - // A = Vibrant, B = Editorial, C = Dark + // blokuj scroll body, gdy menu otwarte + useEffect(() => { + document.body.style.overflow = mobileOpen ? "hidden" : ""; + return () => { document.body.style.overflow = ""; }; + }, [mobileOpen]); 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 sections = document.querySelectorAll('section[id]') + const obs = new IntersectionObserver( + (entries) => entries.forEach((e) => e.isIntersecting && setActiveSection(e.target.id)), + { rootMargin: '-55% 0px -45% 0px' } + ) + sections.forEach((s) => obs.observe(s)) + return () => obs.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" }, - ]; + { 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.", + 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." - ] + '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.", + 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." - ] + '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.", + 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." - ] - } + '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.', + ], + }, ] - // --- Wspólna treść dla wszystkich wariantów sekcji "DlaczegoIntegracji" --- + + + // Dlaczego (treść 1:1) const why = { p1: ( <> - 76% konsumentów oczekuje, że marka będzie - przewidywać ich potrzeby, nie tylko reagować - (Salesforce, 2023). + 76% konsumentów oczekuje, że marka będzie + przewidywać ich potrzeby, nie tylko reagować + (Salesforce, 2023). ), p2: ( <> - Pokolenie Z nie buduje lojalności przez reklamy. - Buduje ją przez wartość, użyteczność i autentyczność. - Aż 65% młodych konsumentów deklaruje, + Pokolenie Z nie buduje lojalności przez reklamy. + Buduje ją przez wartość, użyteczność i autentyczność. + Aż 65% młodych konsumentów deklaruje, że lojalność wobec marki zależy od spójnych i realnych doświadczeń - (McKinsey, 2023). + (McKinsey, 2023). ), - bulletsIntro: "Marka nie żyje w kampaniach. Żyje w:", + bulletsIntro: 'Marka nie żyje w kampaniach. Żyje w:', bullets: [ - "chatbotach, landingach, mailach i pushach,", - "procesach sprzedażowych i onboardingowych,", - "sposobie, w jaki działa Twój model cenowy, UX i obsługa klienta.", + 'chatbotach, landingach, mailach i pushach,', + 'procesach sprzedażowych i onboardingowych,', + 'sposobie, w jaki działa Twój model cenowy, UX i obsługa klienta.', ], p3: ( <> - Jeśli to wszystko nie gra razem, marka traci moc. + Jeśli to wszystko nie gra razem, marka traci moc.
- I traci klientów. - Według badania PwC aż 32% klientów porzuca markę po jednej + I traci klientów. + Według badania PwC aż 32% klientów porzuca markę po jednej złej interakcji, nawet jeśli wcześniej byli zadowoleni. ), - }; - + } const [expandedIndex, setExpandedIndex] = useState(null); @@ -216,58 +246,30 @@ export default function Home() { }, ]; - const scrollToIntegration = useCallback(() => { - const section = document.getElementById('DlaczegoIntegracji') - section?.scrollIntoView({ behavior: 'smooth' }) + document.getElementById('DlaczegoIntegracji')?.scrollIntoView({ behavior: 'smooth' }) }, []) return ( +
+ {/* Subtelny akcent kolorystyczny + siatka */} + + {/* Pasek postępu scrolla */} + - - -
- - - - - {/* Sticky Navbar */} -