ddr/PrimeCode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wersja pokazowa 16.09.2025

Browse Source
This commit is contained in:
Dawid Drzewiecki
2025-09-16 11:19:07 +02:00
parent 4015121a60
commit b32a24f344
4 changed files with 203 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
app/page.tsx
View File

@@ -66,12 +66,13 @@ export default function Home() {
const navItems = [
{ id: 'PrimeCode', label: 'O nas' },
{ id: 'Sytuacje', label: 'Sytuacje' },
{ id: 'Partner', label: 'Potrzebujesz partnera' },
{ id: 'Sytuacje', label: 'Wyzwania' },
{ 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
className="mt-6 h-[3px] rounded-full
[mask-image:linear-gradient(90deg,transparent,black_10%,black_90%,transparent)]"
style={{ background: RULE[gradient] }}
/>
{/* <div 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,32 +763,73 @@ 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="max-w-7xl mx-auto w-full px-6 grid md:grid-cols-[0.9fr_1.1fr] gap-12 items-start md:items-center">
<motion.h1
<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-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.div
style={canParallax ? { y: titleY, willChange: "transform, opacity" } : undefined}
variants={h1V}
initial="hidden"
animate={ready ? "show" : "hidden"} // ← KLUCZ: fail-safe
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)]"
>
Prime Code
</motion.h1>
animate={ready ? "show" : "hidden"}
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">
{/* 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" }}
>
{/* wrapper: tło pod tekstem tylko na mobile */}
<div className="relative md:p-0 p-4 md:mx-0 -mx-2 md:rounded-none rounded-2xl">
{/* scrim (tylko mobile) */}
<div
aria-hidden
className="md:hidden absolute inset-0 z-0
bg-black/10 backdrop-blur-[1.5px]"
/>
{/* właściwa treść */}
<div className="relative z-10">
<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>
@@ -744,7 +850,10 @@ function HeroPixabayBG({
<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
@@ -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 }) {
return (
<div className={`relative w-full ${className}`}>
{/* główna linia (gradient, przygaszone końce) */}
<div
className="h-[2px] w-full rounded-full"
style={{
background:
"linear-gradient(90deg, rgba(253,186,116,1) 0%, rgba(249,115,22,1) 55%, rgba(244,114,182,1) 100%)",
WebkitMaskImage:
"linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%)",
maskImage:
"linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%)",
}}
/>
{/* subtelny highlight nad linią */}
<div
className="absolute inset-0 -translate-y-[2px] h-[1px] bg-white/60 mix-blend-screen"
style={{
WebkitMaskImage:
"linear-gradient(90deg, transparent 0, black 10%, black 90%, transparent 100%)",
maskImage:
"linear-gradient(90deg, transparent 0, black 10%, black 90%, transparent 100%)",
}}
/>
{/* delikatny glow */}
<div
className="pointer-events-none absolute -inset-x-1 -inset-y-[6px] blur-md"
style={{
background:
"linear-gradient(90deg, rgba(253,186,116,.18), rgba(249,115,22,.18), rgba(244,114,182,.18))",
WebkitMaskImage:
"linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%)",
maskImage:
"linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%)",
}}
/>
</div>
);
}
// function FancySeparator({ className = "" }: { className?: string }) {
// return (
// <div className={`relative w-full ${className}`}>
// {/* główna linia (gradient, przygaszone końce) */}
// <div
// className="h-[2px] w-full rounded-full"
// style={{
// background:
// "linear-gradient(90deg, rgba(253,186,116,1) 0%, rgba(249,115,22,1) 55%, rgba(244,114,182,1) 100%)",
// WebkitMaskImage:
// "linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%)",
// maskImage:
// "linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%)",
// }}
// />
// {/* subtelny highlight nad linią */}
// <div
// className="absolute inset-0 -translate-y-[2px] h-[1px] bg-white/60 mix-blend-screen"
// style={{
// WebkitMaskImage:
// "linear-gradient(90deg, transparent 0, black 10%, black 90%, transparent 100%)",
// maskImage:
// "linear-gradient(90deg, transparent 0, black 10%, black 90%, transparent 100%)",
// }}
// />
// {/* delikatny glow */}
// <div
// className="pointer-events-none absolute -inset-x-1 -inset-y-[6px] blur-md"
// style={{
// background:
// "linear-gradient(90deg, rgba(253,186,116,.18), rgba(249,115,22,.18), rgba(244,114,182,.18))",
// WebkitMaskImage:
// "linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%)",
// maskImage:
// "linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%)",
// }}
// />
// </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={`shrink-0 mt-[2px] grid place-items-center h-9 w-9 rounded-full bg-gradient-to-br ${accent} text-white`}>
<div className="grid grid-cols-[2.25rem_1fr] items-start gap-3
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
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>
<p className="text-neutral-700 mt-1">{short}</p>
</div>
</div>

BIN
out.rar
View File

Binary file not shown.

BIN
out.zip
View File

Binary file not shown.

BIN
public/LogoPrimeCode-transparent-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB