@sonordev/agency-site-kit 0.4.0 → 0.4.2

package/dist/portfolio/sections/ChallengesSection.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { c as PortfolioChallengesData } from '../../types-0tVPy4pU.cjs';
+import { c as PortfolioChallengesData } from '../../types-He5A9okM.cjs';
 
 interface ChallengesSectionProps {
     data: PortfolioChallengesData;

package/dist/portfolio/sections/ChallengesSection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { c as PortfolioChallengesData } from '../../types-0tVPy4pU.js';
+import { c as PortfolioChallengesData } from '../../types-He5A9okM.js';
 
 interface ChallengesSectionProps {
     data: PortfolioChallengesData;

package/dist/portfolio/sections/ChallengesSection.js

@@ -48,7 +48,7 @@ function ChallengesSection({ data }) {
             {
               className: "text-lg mb-12 max-w-2xl",
               style: { color: "var(--sk-text-secondary, #a1a1aa)" },
-              children: "Every great project starts with obstacles to overcome. Here is how we tackled them."
+              children: "What stood in the way, and how we cleared it."
             }
           )
         ] }),

package/dist/portfolio/sections/ChallengesSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/portfolio/components/sections/ChallengesSection.tsx"],"names":[],"mappings":"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","file":"ChallengesSection.js","sourcesContent":["// Server component — renders on the server; the client primitives below cross the\n// RSC boundary via package subpaths (never import them relatively here).\nimport React from 'react';\nimport type { PortfolioChallengesData } from '../../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface ChallengesSectionProps {\n  data: PortfolioChallengesData;\n}\n\n/** Icon registry lookup. Returns an inline SVG for known icon keys. */\nfunction ChallengeIcon({ name }: { name?: string }) {\n  if (!name) return null;\n\n  const icons: Record<string, React.ReactNode> = {\n    speed: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    seo: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"M21 21l-4.35-4.35\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n    ),\n    design: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    conversion: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M22 12h-4l-3 9L9 3l-3 9H2\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    mobile: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"M12 18h.01\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n    ),\n    content: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <path d=\"M14 2v6h6M16 13H8M16 17H8M10 9H8\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n  };\n\n  return (\n    <span style={{ color: 'var(--sk-primary, #6366f1)' }}>\n      {icons[name] || icons.speed}\n    </span>\n  );\n}\n\nexport default function ChallengesSection({ data }: ChallengesSectionProps) {\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-7xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-4\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Challenges &amp; Solutions\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            Every great project starts with obstacles to overcome. Here is how we tackled them.\n          </p>\n        </ScrollReveal>\n\n        <div className=\"flex flex-col gap-8\">\n          {data.items.map((item, index) => {\n            const isEven = index % 2 === 0;\n            return (\n              <ScrollReveal key={index} y={40} delay={index * 0.1}>\n                <GlassCard padding=\"lg\" hover={false}>\n                  <div\n                    className={`flex flex-col lg:flex-row gap-8 ${\n                      isEven ? '' : 'lg:flex-row-reverse'\n                    }`}\n                  >\n                    {/* Challenge side */}\n                    <div className=\"flex-1 flex flex-col gap-3\">\n                      <div className=\"flex items-center gap-3\">\n                        {/* Number badge */}\n                        <span\n                          className=\"flex items-center justify-center w-10 h-10 rounded-full text-sm font-bold shrink-0\"\n                          style={{\n                            background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                            color: 'var(--sk-primary, #6366f1)',\n                            border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)',\n                          }}\n                        >\n                          {String(index + 1).padStart(2, '0')}\n                        </span>\n                        <ChallengeIcon name={item.icon} />\n                        <h3\n                          className=\"text-xl font-semibold\"\n                          style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                        >\n                          {item.title}\n                        </h3>\n                      </div>\n                      <p\n                        className=\"text-base leading-relaxed\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        {item.description}\n                      </p>\n                    </div>\n\n                    {/* Divider */}\n                    <div\n                      className=\"hidden lg:block w-px self-stretch\"\n                      style={{\n                        background: 'var(--sk-border, rgba(255,255,255,0.1))',\n                      }}\n                    />\n                    <div\n                      className=\"lg:hidden h-px w-full\"\n                      style={{\n                        background: 'var(--sk-border, rgba(255,255,255,0.1))',\n                      }}\n                    />\n\n                    {/* Solution side */}\n                    <div className=\"flex-1 flex flex-col gap-3\">\n                      <div className=\"flex items-center gap-2\">\n                        <svg\n                          width=\"20\"\n                          height=\"20\"\n                          viewBox=\"0 0 20 20\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          style={{ color: '#10b981' }}\n                        >\n                          <path\n                            d=\"M16.667 5L7.5 14.167 3.333 10\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"2\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                          />\n                        </svg>\n                        <span\n                          className=\"text-sm font-semibold uppercase tracking-wider\"\n                          style={{ color: '#10b981' }}\n                        >\n                          Solution\n                        </span>\n                      </div>\n                      <p\n                        className=\"text-base leading-relaxed\"\n                        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                      >\n                        {item.solution}\n                      </p>\n                      {item.result && (\n                        <div\n                          className=\"mt-2 px-4 py-2 rounded-lg text-sm\"\n                          style={{\n                            background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 8%, transparent)',\n                            color: 'var(--sk-primary, #6366f1)',\n                            border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                          }}\n                        >\n                          <span className=\"font-semibold\">Result:</span> {item.result}\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                </GlassCard>\n              </ScrollReveal>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/portfolio/components/sections/ChallengesSection.tsx"],"names":[],"mappings":"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","file":"ChallengesSection.js","sourcesContent":["// Server component — renders on the server; the client primitives below cross the\n// RSC boundary via package subpaths (never import them relatively here).\nimport React from 'react';\nimport type { PortfolioChallengesData } from '../../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface ChallengesSectionProps {\n  data: PortfolioChallengesData;\n}\n\n/** Icon registry lookup. Returns an inline SVG for known icon keys. */\nfunction ChallengeIcon({ name }: { name?: string }) {\n  if (!name) return null;\n\n  const icons: Record<string, React.ReactNode> = {\n    speed: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    seo: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"M21 21l-4.35-4.35\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n    ),\n    design: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    conversion: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M22 12h-4l-3 9L9 3l-3 9H2\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n    mobile: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"M12 18h.01\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n    ),\n    content: (\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <path d=\"M14 2v6h6M16 13H8M16 17H8M10 9H8\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    ),\n  };\n\n  return (\n    <span style={{ color: 'var(--sk-primary, #6366f1)' }}>\n      {icons[name] || icons.speed}\n    </span>\n  );\n}\n\nexport default function ChallengesSection({ data }: ChallengesSectionProps) {\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-7xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-4\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Challenges &amp; Solutions\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            What stood in the way, and how we cleared it.\n          </p>\n        </ScrollReveal>\n\n        <div className=\"flex flex-col gap-8\">\n          {data.items.map((item, index) => {\n            const isEven = index % 2 === 0;\n            return (\n              <ScrollReveal key={index} y={40} delay={index * 0.1}>\n                <GlassCard padding=\"lg\" hover={false}>\n                  <div\n                    className={`flex flex-col lg:flex-row gap-8 ${\n                      isEven ? '' : 'lg:flex-row-reverse'\n                    }`}\n                  >\n                    {/* Challenge side */}\n                    <div className=\"flex-1 flex flex-col gap-3\">\n                      <div className=\"flex items-center gap-3\">\n                        {/* Number badge */}\n                        <span\n                          className=\"flex items-center justify-center w-10 h-10 rounded-full text-sm font-bold shrink-0\"\n                          style={{\n                            background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                            color: 'var(--sk-primary, #6366f1)',\n                            border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)',\n                          }}\n                        >\n                          {String(index + 1).padStart(2, '0')}\n                        </span>\n                        <ChallengeIcon name={item.icon} />\n                        <h3\n                          className=\"text-xl font-semibold\"\n                          style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                        >\n                          {item.title}\n                        </h3>\n                      </div>\n                      <p\n                        className=\"text-base leading-relaxed\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        {item.description}\n                      </p>\n                    </div>\n\n                    {/* Divider */}\n                    <div\n                      className=\"hidden lg:block w-px self-stretch\"\n                      style={{\n                        background: 'var(--sk-border, rgba(255,255,255,0.1))',\n                      }}\n                    />\n                    <div\n                      className=\"lg:hidden h-px w-full\"\n                      style={{\n                        background: 'var(--sk-border, rgba(255,255,255,0.1))',\n                      }}\n                    />\n\n                    {/* Solution side */}\n                    <div className=\"flex-1 flex flex-col gap-3\">\n                      <div className=\"flex items-center gap-2\">\n                        <svg\n                          width=\"20\"\n                          height=\"20\"\n                          viewBox=\"0 0 20 20\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          style={{ color: '#10b981' }}\n                        >\n                          <path\n                            d=\"M16.667 5L7.5 14.167 3.333 10\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"2\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                          />\n                        </svg>\n                        <span\n                          className=\"text-sm font-semibold uppercase tracking-wider\"\n                          style={{ color: '#10b981' }}\n                        >\n                          Solution\n                        </span>\n                      </div>\n                      <p\n                        className=\"text-base leading-relaxed\"\n                        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                      >\n                        {item.solution}\n                      </p>\n                      {item.result && (\n                        <div\n                          className=\"mt-2 px-4 py-2 rounded-lg text-sm\"\n                          style={{\n                            background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 8%, transparent)',\n                            color: 'var(--sk-primary, #6366f1)',\n                            border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                          }}\n                        >\n                          <span className=\"font-semibold\">Result:</span> {item.result}\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                </GlassCard>\n              </ScrollReveal>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/portfolio/sections/DetailsSection.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { d as PortfolioDetailsData } from '../../types-0tVPy4pU.cjs';
+import { d as PortfolioDetailsData } from '../../types-He5A9okM.cjs';
 
 interface DetailsSectionProps {
     data: PortfolioDetailsData;

package/dist/portfolio/sections/DetailsSection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { d as PortfolioDetailsData } from '../../types-0tVPy4pU.js';
+import { d as PortfolioDetailsData } from '../../types-He5A9okM.js';
 
 interface DetailsSectionProps {
     data: PortfolioDetailsData;

package/dist/portfolio/sections/HeroSection.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+var chunkZBPF7TLZ_cjs = require('../../chunk-ZBPF7TLZ.cjs');
 var ScrollReveal = require('@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal');
 var AnimatedCounter = require('@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter');
 var GlassCard = require('@sonordev/agency-site-kit/portfolio/primitives/GlassCard');
@@ -13,7 +14,6 @@ var AnimatedCounter__default = /*#__PURE__*/_interopDefault(AnimatedCounter);
 var GlassCard__default = /*#__PURE__*/_interopDefault(GlassCard);
 var DeviceTrifolio__default = /*#__PURE__*/_interopDefault(DeviceTrifolio);
 
-// src/portfolio/components/sections/HeroSection.tsx
 var HERO_PARALLAX_CSS = `
 @supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
@@ -66,7 +66,7 @@ function HeroSection({ data, screenshots, liveUrl }) {
                   color: "var(--sk-primary, #6366f1)",
                   border: "1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)"
                 },
-                children: data.category?.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
+                children: chunkZBPF7TLZ_cjs.formatCategoryLabel(data.category)
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -107,7 +107,7 @@ function HeroSection({ data, screenshots, liveUrl }) {
                   color: "var(--sk-text-secondary, #a1a1aa)",
                   border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
                 },
-                children: service
+                children: chunkZBPF7TLZ_cjs.formatServiceTag(service)
               },
               service
             )) }),

package/dist/portfolio/sections/HeroSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/portfolio/components/sections/HeroSection.tsx"],"names":["jsxs","jsx","DeviceTrifolio","ScrollReveal","GlassCard","AnimatedCounter"],"mappings":"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","file":"HeroSection.cjs","sourcesContent":["// Server component — the entire hero renders on the server and ships zero\n// component JS. Client primitives (counter, reveal, trifolio) cross the RSC\n// boundary via package subpaths.\nimport React from 'react';\nimport type { PortfolioHeroData } from '../../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport AnimatedCounter from '@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\nimport DeviceTrifolio from '@sonordev/agency-site-kit/portfolio/primitives/DeviceTrifolio';\n\n// LCP rule (monorepo CLAUDE.md, Performance): above-the-fold content renders\n// fully static — no entrance animation, no post-hydration re-hide. The text\n// column below must never be wrapped in ScrollReveal/SplitHeadline: hiding\n// the H1 after hydration moves LCP to the tween's end and tanks the mobile\n// Lighthouse score. Reveal animations are for the below-fold KPI cards only.\n\n// Background parallax as a CSS scroll-driven animation — progressive\n// enhancement: browsers without animation-timeline get a static gradient.\nconst HERO_PARALLAX_CSS = `\n@supports (animation-timeline: view()) {\n  @media (prefers-reduced-motion: no-preference) {\n    .sk-hero-bg {\n      animation: sk-hero-drift linear both;\n      animation-timeline: view(block);\n      animation-range: exit 0% exit 100%;\n    }\n    @keyframes sk-hero-drift {\n      from { transform: translateY(0); }\n      to { transform: translateY(30%); }\n    }\n  }\n}\n`;\n\ninterface HeroSectionProps {\n  data: PortfolioHeroData;\n  screenshots?: { desktop?: string; tablet?: string; mobile?: string };\n  liveUrl?: string;\n}\n\nexport default function HeroSection({ data, screenshots, liveUrl }: HeroSectionProps) {\n  const shots = screenshots || data.screenshots;\n  const url = liveUrl || data.liveUrl;\n\n  return (\n    <section\n      className=\"relative overflow-hidden w-full\"\n      style={{\n        minHeight: '90vh',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        background: 'var(--sk-bg, #0a0a0a)',\n      }}\n    >\n      {/* Parallax background layer (CSS scroll-driven) */}\n      <style href=\"sk-hero-parallax\" precedence=\"default\">\n        {HERO_PARALLAX_CSS}\n      </style>\n      <div\n        className=\"sk-hero-bg absolute inset-0 pointer-events-none\"\n        style={{\n          background: `radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent) 0%, transparent 70%)`,\n          willChange: 'transform',\n        }}\n      />\n\n      <div className=\"relative z-10 max-w-7xl mx-auto w-full min-w-0 px-4 sm:px-6 py-24 lg:py-32\">\n        <div className=\"grid grid-cols-1 min-w-0 lg:grid-cols-2 gap-12 lg:gap-16 items-start\">\n          {/* Text column — min-w-0 so grid track can shrink below content intrinsic width (mobile) */}\n          <div className=\"flex min-w-0 max-w-full flex-col gap-6\">\n            {/* Category badge */}\n            <span\n              className=\"inline-flex items-center self-start px-4 py-1.5 rounded-full text-sm font-medium\"\n              style={{\n                background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                color: 'var(--sk-primary, #6366f1)',\n                border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)',\n              }}\n            >\n              {data.category?.replace(/[-_]/g, ' ').replace(/\\b\\w/g, (c: string) => c.toUpperCase())}\n            </span>\n\n            {/* Headline — static, this is usually the LCP element */}\n            <h1\n              className=\"text-4xl md:text-5xl lg:text-6xl font-bold leading-tight\"\n              style={{\n                color: 'var(--sk-text-primary, #ffffff)',\n                fontFamily: 'var(--sk-font-heading, inherit)',\n                overflowWrap: 'break-word',\n                wordBreak: 'break-word',\n              }}\n            >\n              {data.headline}\n            </h1>\n\n            {/* Subheadline */}\n            <p\n              className=\"text-xl md:text-2xl font-medium\"\n              style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n            >\n              {data.subheadline}\n            </p>\n\n            {/* Description */}\n            <p\n              className=\"text-base md:text-lg leading-relaxed\"\n              style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n            >\n              {data.description}\n            </p>\n\n            {/* Services tags */}\n            {data.services.length > 0 && (\n              <div className=\"flex flex-wrap gap-2\">\n                {data.services.map((service) => (\n                  <span\n                    key={service}\n                    className=\"px-3 py-1 rounded-full text-xs font-medium\"\n                    style={{\n                      background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n                      color: 'var(--sk-text-secondary, #a1a1aa)',\n                      border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                    }}\n                  >\n                    {service}\n                  </span>\n                ))}\n              </div>\n            )}\n\n            {/* CTA button */}\n            {url && (\n              <a\n                href={url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                data-portfolio-action=\"live-site\"\n                className=\"inline-flex items-center gap-2 self-start px-6 py-3 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90\"\n                style={{\n                  background: 'var(--sk-primary, #6366f1)',\n                  color: '#ffffff',\n                }}\n              >\n                View Live Site\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M6 3h7v7M13 3L3 13\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                </svg>\n              </a>\n            )}\n\n          </div>\n\n          {/* Right column — trifolio + KPIs */}\n          <div className=\"flex min-w-0 max-w-full flex-col gap-10 lg:pt-8\">\n            {/* Device trifolio — realistic device frames */}\n            {(url || shots?.desktop || shots?.tablet || shots?.mobile) && (\n              <div className=\"min-w-0 max-w-full\">\n                <DeviceTrifolio\n                  screenshots={{\n                    desktop: shots?.desktop,\n                    tablet: shots?.tablet,\n                    mobile: shots?.mobile,\n                  }}\n                  url={url}\n                />\n              </div>\n            )}\n\n            {/* KPI cards — below trifolio in right column */}\n            {data.kpis.length > 0 && (\n              <ScrollReveal y={30} delay={0.6} stagger={0.1}>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {data.kpis.map((kpi, i) => (\n                    <GlassCard key={i} padding=\"sm\" hover={false} className=\"text-center\">\n                      <div\n                        className=\"text-2xl md:text-3xl font-bold\"\n                        style={{ color: 'var(--sk-primary, #6366f1)' }}\n                      >\n                        <AnimatedCounter\n                          value={kpi.value}\n                          suffix={kpi.suffix}\n                          prefix={kpi.prefix}\n                          duration={2.5}\n                        />\n                      </div>\n                      <div\n                        className=\"text-xs mt-1 font-medium\"\n                        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                      >\n                        {kpi.label}\n                      </div>\n                    </GlassCard>\n                  ))}\n                </div>\n              </ScrollReveal>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/portfolio/components/sections/HeroSection.tsx"],"names":["jsxs","jsx","formatCategoryLabel","DeviceTrifolio","ScrollReveal","GlassCard","AnimatedCounter"],"mappings":"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","file":"HeroSection.cjs","sourcesContent":["// Server component — the entire hero renders on the server and ships zero\n// component JS. Client primitives (counter, reveal, trifolio) cross the RSC\n// boundary via package subpaths.\nimport React from 'react';\nimport type { PortfolioHeroData } from '../../../types';\nimport { formatCategoryLabel, formatServiceTag } from '../../format';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport AnimatedCounter from '@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\nimport DeviceTrifolio from '@sonordev/agency-site-kit/portfolio/primitives/DeviceTrifolio';\n\n// LCP rule (monorepo CLAUDE.md, Performance): above-the-fold content renders\n// fully static — no entrance animation, no post-hydration re-hide. The text\n// column below must never be wrapped in ScrollReveal/SplitHeadline: hiding\n// the H1 after hydration moves LCP to the tween's end and tanks the mobile\n// Lighthouse score. Reveal animations are for the below-fold KPI cards only.\n\n// Background parallax as a CSS scroll-driven animation — progressive\n// enhancement: browsers without animation-timeline get a static gradient.\nconst HERO_PARALLAX_CSS = `\n@supports (animation-timeline: view()) {\n  @media (prefers-reduced-motion: no-preference) {\n    .sk-hero-bg {\n      animation: sk-hero-drift linear both;\n      animation-timeline: view(block);\n      animation-range: exit 0% exit 100%;\n    }\n    @keyframes sk-hero-drift {\n      from { transform: translateY(0); }\n      to { transform: translateY(30%); }\n    }\n  }\n}\n`;\n\ninterface HeroSectionProps {\n  data: PortfolioHeroData;\n  screenshots?: { desktop?: string; tablet?: string; mobile?: string };\n  liveUrl?: string;\n}\n\nexport default function HeroSection({ data, screenshots, liveUrl }: HeroSectionProps) {\n  const shots = screenshots || data.screenshots;\n  const url = liveUrl || data.liveUrl;\n\n  return (\n    <section\n      className=\"relative overflow-hidden w-full\"\n      style={{\n        minHeight: '90vh',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        background: 'var(--sk-bg, #0a0a0a)',\n      }}\n    >\n      {/* Parallax background layer (CSS scroll-driven) */}\n      <style href=\"sk-hero-parallax\" precedence=\"default\">\n        {HERO_PARALLAX_CSS}\n      </style>\n      <div\n        className=\"sk-hero-bg absolute inset-0 pointer-events-none\"\n        style={{\n          background: `radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent) 0%, transparent 70%)`,\n          willChange: 'transform',\n        }}\n      />\n\n      <div className=\"relative z-10 max-w-7xl mx-auto w-full min-w-0 px-4 sm:px-6 py-24 lg:py-32\">\n        <div className=\"grid grid-cols-1 min-w-0 lg:grid-cols-2 gap-12 lg:gap-16 items-start\">\n          {/* Text column — min-w-0 so grid track can shrink below content intrinsic width (mobile) */}\n          <div className=\"flex min-w-0 max-w-full flex-col gap-6\">\n            {/* Category badge */}\n            <span\n              className=\"inline-flex items-center self-start px-4 py-1.5 rounded-full text-sm font-medium\"\n              style={{\n                background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                color: 'var(--sk-primary, #6366f1)',\n                border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)',\n              }}\n            >\n              {formatCategoryLabel(data.category)}\n            </span>\n\n            {/* Headline — static, this is usually the LCP element */}\n            <h1\n              className=\"text-4xl md:text-5xl lg:text-6xl font-bold leading-tight\"\n              style={{\n                color: 'var(--sk-text-primary, #ffffff)',\n                fontFamily: 'var(--sk-font-heading, inherit)',\n                overflowWrap: 'break-word',\n                wordBreak: 'break-word',\n              }}\n            >\n              {data.headline}\n            </h1>\n\n            {/* Subheadline */}\n            <p\n              className=\"text-xl md:text-2xl font-medium\"\n              style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n            >\n              {data.subheadline}\n            </p>\n\n            {/* Description */}\n            <p\n              className=\"text-base md:text-lg leading-relaxed\"\n              style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n            >\n              {data.description}\n            </p>\n\n            {/* Services tags */}\n            {data.services.length > 0 && (\n              <div className=\"flex flex-wrap gap-2\">\n                {data.services.map((service) => (\n                  <span\n                    key={service}\n                    className=\"px-3 py-1 rounded-full text-xs font-medium\"\n                    style={{\n                      background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n                      color: 'var(--sk-text-secondary, #a1a1aa)',\n                      border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                    }}\n                  >\n                    {formatServiceTag(service)}\n                  </span>\n                ))}\n              </div>\n            )}\n\n            {/* CTA button */}\n            {url && (\n              <a\n                href={url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                data-portfolio-action=\"live-site\"\n                className=\"inline-flex items-center gap-2 self-start px-6 py-3 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90\"\n                style={{\n                  background: 'var(--sk-primary, #6366f1)',\n                  color: '#ffffff',\n                }}\n              >\n                View Live Site\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M6 3h7v7M13 3L3 13\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                </svg>\n              </a>\n            )}\n\n          </div>\n\n          {/* Right column — trifolio + KPIs */}\n          <div className=\"flex min-w-0 max-w-full flex-col gap-10 lg:pt-8\">\n            {/* Device trifolio — realistic device frames */}\n            {(url || shots?.desktop || shots?.tablet || shots?.mobile) && (\n              <div className=\"min-w-0 max-w-full\">\n                <DeviceTrifolio\n                  screenshots={{\n                    desktop: shots?.desktop,\n                    tablet: shots?.tablet,\n                    mobile: shots?.mobile,\n                  }}\n                  url={url}\n                />\n              </div>\n            )}\n\n            {/* KPI cards — below trifolio in right column */}\n            {data.kpis.length > 0 && (\n              <ScrollReveal y={30} delay={0.6} stagger={0.1}>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {data.kpis.map((kpi, i) => (\n                    <GlassCard key={i} padding=\"sm\" hover={false} className=\"text-center\">\n                      <div\n                        className=\"text-2xl md:text-3xl font-bold\"\n                        style={{ color: 'var(--sk-primary, #6366f1)' }}\n                      >\n                        <AnimatedCounter\n                          value={kpi.value}\n                          suffix={kpi.suffix}\n                          prefix={kpi.prefix}\n                          duration={2.5}\n                        />\n                      </div>\n                      <div\n                        className=\"text-xs mt-1 font-medium\"\n                        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                      >\n                        {kpi.label}\n                      </div>\n                    </GlassCard>\n                  ))}\n                </div>\n              </ScrollReveal>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/portfolio/sections/HeroSection.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { e as PortfolioHeroData } from '../../types-0tVPy4pU.cjs';
+import { e as PortfolioHeroData } from '../../types-He5A9okM.cjs';
 
 interface HeroSectionProps {
     data: PortfolioHeroData;

package/dist/portfolio/sections/HeroSection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { e as PortfolioHeroData } from '../../types-0tVPy4pU.js';
+import { e as PortfolioHeroData } from '../../types-He5A9okM.js';
 
 interface HeroSectionProps {
     data: PortfolioHeroData;

package/dist/portfolio/sections/HeroSection.js

@@ -1,10 +1,10 @@
+import { formatCategoryLabel, formatServiceTag } from '../../chunk-7D4H36UF.js';
 import ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';
 import AnimatedCounter from '@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter';
 import GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';
 import DeviceTrifolio from '@sonordev/agency-site-kit/portfolio/primitives/DeviceTrifolio';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/portfolio/components/sections/HeroSection.tsx
 var HERO_PARALLAX_CSS = `
 @supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
@@ -57,7 +57,7 @@ function HeroSection({ data, screenshots, liveUrl }) {
                   color: "var(--sk-primary, #6366f1)",
                   border: "1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)"
                 },
-                children: data.category?.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
+                children: formatCategoryLabel(data.category)
               }
             ),
             /* @__PURE__ */ jsx(
@@ -98,7 +98,7 @@ function HeroSection({ data, screenshots, liveUrl }) {
                   color: "var(--sk-text-secondary, #a1a1aa)",
                   border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
                 },
-                children: service
+                children: formatServiceTag(service)
               },
               service
             )) }),

package/dist/portfolio/sections/HeroSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/portfolio/components/sections/HeroSection.tsx"],"names":[],"mappings":"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","file":"HeroSection.js","sourcesContent":["// Server component — the entire hero renders on the server and ships zero\n// component JS. Client primitives (counter, reveal, trifolio) cross the RSC\n// boundary via package subpaths.\nimport React from 'react';\nimport type { PortfolioHeroData } from '../../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport AnimatedCounter from '@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\nimport DeviceTrifolio from '@sonordev/agency-site-kit/portfolio/primitives/DeviceTrifolio';\n\n// LCP rule (monorepo CLAUDE.md, Performance): above-the-fold content renders\n// fully static — no entrance animation, no post-hydration re-hide. The text\n// column below must never be wrapped in ScrollReveal/SplitHeadline: hiding\n// the H1 after hydration moves LCP to the tween's end and tanks the mobile\n// Lighthouse score. Reveal animations are for the below-fold KPI cards only.\n\n// Background parallax as a CSS scroll-driven animation — progressive\n// enhancement: browsers without animation-timeline get a static gradient.\nconst HERO_PARALLAX_CSS = `\n@supports (animation-timeline: view()) {\n  @media (prefers-reduced-motion: no-preference) {\n    .sk-hero-bg {\n      animation: sk-hero-drift linear both;\n      animation-timeline: view(block);\n      animation-range: exit 0% exit 100%;\n    }\n    @keyframes sk-hero-drift {\n      from { transform: translateY(0); }\n      to { transform: translateY(30%); }\n    }\n  }\n}\n`;\n\ninterface HeroSectionProps {\n  data: PortfolioHeroData;\n  screenshots?: { desktop?: string; tablet?: string; mobile?: string };\n  liveUrl?: string;\n}\n\nexport default function HeroSection({ data, screenshots, liveUrl }: HeroSectionProps) {\n  const shots = screenshots || data.screenshots;\n  const url = liveUrl || data.liveUrl;\n\n  return (\n    <section\n      className=\"relative overflow-hidden w-full\"\n      style={{\n        minHeight: '90vh',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        background: 'var(--sk-bg, #0a0a0a)',\n      }}\n    >\n      {/* Parallax background layer (CSS scroll-driven) */}\n      <style href=\"sk-hero-parallax\" precedence=\"default\">\n        {HERO_PARALLAX_CSS}\n      </style>\n      <div\n        className=\"sk-hero-bg absolute inset-0 pointer-events-none\"\n        style={{\n          background: `radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent) 0%, transparent 70%)`,\n          willChange: 'transform',\n        }}\n      />\n\n      <div className=\"relative z-10 max-w-7xl mx-auto w-full min-w-0 px-4 sm:px-6 py-24 lg:py-32\">\n        <div className=\"grid grid-cols-1 min-w-0 lg:grid-cols-2 gap-12 lg:gap-16 items-start\">\n          {/* Text column — min-w-0 so grid track can shrink below content intrinsic width (mobile) */}\n          <div className=\"flex min-w-0 max-w-full flex-col gap-6\">\n            {/* Category badge */}\n            <span\n              className=\"inline-flex items-center self-start px-4 py-1.5 rounded-full text-sm font-medium\"\n              style={{\n                background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                color: 'var(--sk-primary, #6366f1)',\n                border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)',\n              }}\n            >\n              {data.category?.replace(/[-_]/g, ' ').replace(/\\b\\w/g, (c: string) => c.toUpperCase())}\n            </span>\n\n            {/* Headline — static, this is usually the LCP element */}\n            <h1\n              className=\"text-4xl md:text-5xl lg:text-6xl font-bold leading-tight\"\n              style={{\n                color: 'var(--sk-text-primary, #ffffff)',\n                fontFamily: 'var(--sk-font-heading, inherit)',\n                overflowWrap: 'break-word',\n                wordBreak: 'break-word',\n              }}\n            >\n              {data.headline}\n            </h1>\n\n            {/* Subheadline */}\n            <p\n              className=\"text-xl md:text-2xl font-medium\"\n              style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n            >\n              {data.subheadline}\n            </p>\n\n            {/* Description */}\n            <p\n              className=\"text-base md:text-lg leading-relaxed\"\n              style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n            >\n              {data.description}\n            </p>\n\n            {/* Services tags */}\n            {data.services.length > 0 && (\n              <div className=\"flex flex-wrap gap-2\">\n                {data.services.map((service) => (\n                  <span\n                    key={service}\n                    className=\"px-3 py-1 rounded-full text-xs font-medium\"\n                    style={{\n                      background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n                      color: 'var(--sk-text-secondary, #a1a1aa)',\n                      border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                    }}\n                  >\n                    {service}\n                  </span>\n                ))}\n              </div>\n            )}\n\n            {/* CTA button */}\n            {url && (\n              <a\n                href={url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                data-portfolio-action=\"live-site\"\n                className=\"inline-flex items-center gap-2 self-start px-6 py-3 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90\"\n                style={{\n                  background: 'var(--sk-primary, #6366f1)',\n                  color: '#ffffff',\n                }}\n              >\n                View Live Site\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M6 3h7v7M13 3L3 13\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                </svg>\n              </a>\n            )}\n\n          </div>\n\n          {/* Right column — trifolio + KPIs */}\n          <div className=\"flex min-w-0 max-w-full flex-col gap-10 lg:pt-8\">\n            {/* Device trifolio — realistic device frames */}\n            {(url || shots?.desktop || shots?.tablet || shots?.mobile) && (\n              <div className=\"min-w-0 max-w-full\">\n                <DeviceTrifolio\n                  screenshots={{\n                    desktop: shots?.desktop,\n                    tablet: shots?.tablet,\n                    mobile: shots?.mobile,\n                  }}\n                  url={url}\n                />\n              </div>\n            )}\n\n            {/* KPI cards — below trifolio in right column */}\n            {data.kpis.length > 0 && (\n              <ScrollReveal y={30} delay={0.6} stagger={0.1}>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {data.kpis.map((kpi, i) => (\n                    <GlassCard key={i} padding=\"sm\" hover={false} className=\"text-center\">\n                      <div\n                        className=\"text-2xl md:text-3xl font-bold\"\n                        style={{ color: 'var(--sk-primary, #6366f1)' }}\n                      >\n                        <AnimatedCounter\n                          value={kpi.value}\n                          suffix={kpi.suffix}\n                          prefix={kpi.prefix}\n                          duration={2.5}\n                        />\n                      </div>\n                      <div\n                        className=\"text-xs mt-1 font-medium\"\n                        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                      >\n                        {kpi.label}\n                      </div>\n                    </GlassCard>\n                  ))}\n                </div>\n              </ScrollReveal>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/portfolio/components/sections/HeroSection.tsx"],"names":[],"mappings":"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","file":"HeroSection.js","sourcesContent":["// Server component — the entire hero renders on the server and ships zero\n// component JS. Client primitives (counter, reveal, trifolio) cross the RSC\n// boundary via package subpaths.\nimport React from 'react';\nimport type { PortfolioHeroData } from '../../../types';\nimport { formatCategoryLabel, formatServiceTag } from '../../format';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport AnimatedCounter from '@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\nimport DeviceTrifolio from '@sonordev/agency-site-kit/portfolio/primitives/DeviceTrifolio';\n\n// LCP rule (monorepo CLAUDE.md, Performance): above-the-fold content renders\n// fully static — no entrance animation, no post-hydration re-hide. The text\n// column below must never be wrapped in ScrollReveal/SplitHeadline: hiding\n// the H1 after hydration moves LCP to the tween's end and tanks the mobile\n// Lighthouse score. Reveal animations are for the below-fold KPI cards only.\n\n// Background parallax as a CSS scroll-driven animation — progressive\n// enhancement: browsers without animation-timeline get a static gradient.\nconst HERO_PARALLAX_CSS = `\n@supports (animation-timeline: view()) {\n  @media (prefers-reduced-motion: no-preference) {\n    .sk-hero-bg {\n      animation: sk-hero-drift linear both;\n      animation-timeline: view(block);\n      animation-range: exit 0% exit 100%;\n    }\n    @keyframes sk-hero-drift {\n      from { transform: translateY(0); }\n      to { transform: translateY(30%); }\n    }\n  }\n}\n`;\n\ninterface HeroSectionProps {\n  data: PortfolioHeroData;\n  screenshots?: { desktop?: string; tablet?: string; mobile?: string };\n  liveUrl?: string;\n}\n\nexport default function HeroSection({ data, screenshots, liveUrl }: HeroSectionProps) {\n  const shots = screenshots || data.screenshots;\n  const url = liveUrl || data.liveUrl;\n\n  return (\n    <section\n      className=\"relative overflow-hidden w-full\"\n      style={{\n        minHeight: '90vh',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        background: 'var(--sk-bg, #0a0a0a)',\n      }}\n    >\n      {/* Parallax background layer (CSS scroll-driven) */}\n      <style href=\"sk-hero-parallax\" precedence=\"default\">\n        {HERO_PARALLAX_CSS}\n      </style>\n      <div\n        className=\"sk-hero-bg absolute inset-0 pointer-events-none\"\n        style={{\n          background: `radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent) 0%, transparent 70%)`,\n          willChange: 'transform',\n        }}\n      />\n\n      <div className=\"relative z-10 max-w-7xl mx-auto w-full min-w-0 px-4 sm:px-6 py-24 lg:py-32\">\n        <div className=\"grid grid-cols-1 min-w-0 lg:grid-cols-2 gap-12 lg:gap-16 items-start\">\n          {/* Text column — min-w-0 so grid track can shrink below content intrinsic width (mobile) */}\n          <div className=\"flex min-w-0 max-w-full flex-col gap-6\">\n            {/* Category badge */}\n            <span\n              className=\"inline-flex items-center self-start px-4 py-1.5 rounded-full text-sm font-medium\"\n              style={{\n                background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 15%, transparent)',\n                color: 'var(--sk-primary, #6366f1)',\n                border: '1px solid color-mix(in srgb, var(--sk-primary, #6366f1) 25%, transparent)',\n              }}\n            >\n              {formatCategoryLabel(data.category)}\n            </span>\n\n            {/* Headline — static, this is usually the LCP element */}\n            <h1\n              className=\"text-4xl md:text-5xl lg:text-6xl font-bold leading-tight\"\n              style={{\n                color: 'var(--sk-text-primary, #ffffff)',\n                fontFamily: 'var(--sk-font-heading, inherit)',\n                overflowWrap: 'break-word',\n                wordBreak: 'break-word',\n              }}\n            >\n              {data.headline}\n            </h1>\n\n            {/* Subheadline */}\n            <p\n              className=\"text-xl md:text-2xl font-medium\"\n              style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n            >\n              {data.subheadline}\n            </p>\n\n            {/* Description */}\n            <p\n              className=\"text-base md:text-lg leading-relaxed\"\n              style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n            >\n              {data.description}\n            </p>\n\n            {/* Services tags */}\n            {data.services.length > 0 && (\n              <div className=\"flex flex-wrap gap-2\">\n                {data.services.map((service) => (\n                  <span\n                    key={service}\n                    className=\"px-3 py-1 rounded-full text-xs font-medium\"\n                    style={{\n                      background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n                      color: 'var(--sk-text-secondary, #a1a1aa)',\n                      border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                    }}\n                  >\n                    {formatServiceTag(service)}\n                  </span>\n                ))}\n              </div>\n            )}\n\n            {/* CTA button */}\n            {url && (\n              <a\n                href={url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                data-portfolio-action=\"live-site\"\n                className=\"inline-flex items-center gap-2 self-start px-6 py-3 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90\"\n                style={{\n                  background: 'var(--sk-primary, #6366f1)',\n                  color: '#ffffff',\n                }}\n              >\n                View Live Site\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M6 3h7v7M13 3L3 13\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                </svg>\n              </a>\n            )}\n\n          </div>\n\n          {/* Right column — trifolio + KPIs */}\n          <div className=\"flex min-w-0 max-w-full flex-col gap-10 lg:pt-8\">\n            {/* Device trifolio — realistic device frames */}\n            {(url || shots?.desktop || shots?.tablet || shots?.mobile) && (\n              <div className=\"min-w-0 max-w-full\">\n                <DeviceTrifolio\n                  screenshots={{\n                    desktop: shots?.desktop,\n                    tablet: shots?.tablet,\n                    mobile: shots?.mobile,\n                  }}\n                  url={url}\n                />\n              </div>\n            )}\n\n            {/* KPI cards — below trifolio in right column */}\n            {data.kpis.length > 0 && (\n              <ScrollReveal y={30} delay={0.6} stagger={0.1}>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {data.kpis.map((kpi, i) => (\n                    <GlassCard key={i} padding=\"sm\" hover={false} className=\"text-center\">\n                      <div\n                        className=\"text-2xl md:text-3xl font-bold\"\n                        style={{ color: 'var(--sk-primary, #6366f1)' }}\n                      >\n                        <AnimatedCounter\n                          value={kpi.value}\n                          suffix={kpi.suffix}\n                          prefix={kpi.prefix}\n                          duration={2.5}\n                        />\n                      </div>\n                      <div\n                        className=\"text-xs mt-1 font-medium\"\n                        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                      >\n                        {kpi.label}\n                      </div>\n                    </GlassCard>\n                  ))}\n                </div>\n              </ScrollReveal>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/portfolio/sections/PerformanceSection.cjs

@@ -169,24 +169,6 @@ function ScoreGauge({
     )
   ] });
 }
-var SCORE_EXPLANATIONS = {
-  performance: {
-    why: "Faster sites convert more visitors into customers. A 1-second delay in load time reduces conversions by up to 7%. Google uses page speed as a direct ranking factor.",
-    competitors: "Wix and GoDaddy sites typically score 30\u201350 due to bloated JavaScript bundles and shared hosting. Template builders prioritize ease-of-use over speed."
-  },
-  seo: {
-    why: "Technical SEO determines whether search engines can properly crawl, index, and rank your pages. Higher scores mean more organic visibility and free traffic.",
-    competitors: "DIY builders often miss critical SEO fundamentals\u2014proper meta tags, structured data, canonical URLs, and server-side rendering that search engines need."
-  },
-  accessibility: {
-    why: "Accessible sites reach more customers, including the 1 in 4 adults with disabilities. It also reduces legal risk and improves usability for everyone.",
-    competitors: "Template platforms generate markup that frequently fails WCAG standards\u2014missing alt text, poor contrast ratios, and keyboard navigation issues."
-  },
-  bestPractices: {
-    why: "Best practices cover security (HTTPS, safe APIs), modern code standards, and browser compatibility. They protect your business and your visitors.",
-    competitors: "Older platforms rely on outdated libraries, insecure dependencies, and legacy patterns that create vulnerabilities and degrade user trust."
-  }
-};
 function PerformanceSection({ data }) {
   const hasBeforeAfter = data.before && data.after;
   const scores = data.after || data.before;
@@ -214,7 +196,7 @@ function PerformanceSection({ data }) {
             {
               className: "text-lg mb-12 max-w-2xl",
               style: { color: "var(--sk-text-secondary, #a1a1aa)" },
-              children: hasBeforeAfter ? "Real Lighthouse scores \u2014 before and after our rebuild." : "Real performance metrics measured by Google Lighthouse."
+              children: hasBeforeAfter ? "Real Lighthouse scores, before and after our rebuild." : "Real performance metrics measured by Google Lighthouse."
             }
           )
         ] }),
@@ -233,51 +215,6 @@ function PerformanceSection({ data }) {
             cat.key
           );
         }) }) }),
-        scores && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 30, delay: 0.2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid md:grid-cols-2 gap-4 mb-12", children: CATEGORIES.map((cat) => {
-          const currentScore = scores[cat.key];
-          if (currentScore === void 0) return null;
-          const explanation = SCORE_EXPLANATIONS[cat.key];
-          if (!explanation) return null;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlassCard.default, { padding: "md", hover: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                className: "w-10 h-10 rounded-lg flex items-center justify-center shrink-0 text-sm font-bold",
-                style: {
-                  background: `color-mix(in srgb, ${getScoreColor(currentScore)} 15%, transparent)`,
-                  color: getScoreColor(currentScore)
-                },
-                children: currentScore
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "h4",
-                {
-                  className: "text-sm font-semibold mb-1",
-                  style: { color: "var(--sk-text-primary, #ffffff)" },
-                  children: cat.label
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "p",
-                {
-                  className: "text-xs leading-relaxed mb-2",
-                  style: { color: "var(--sk-text-secondary, #a1a1aa)" },
-                  children: explanation.why
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "p",
-                {
-                  className: "text-xs leading-relaxed",
-                  style: { color: "var(--sk-text-tertiary, #71717a)" },
-                  children: explanation.competitors
-                }
-              )
-            ] })
-          ] }) }, cat.key);
-        }) }) }),
         hasBeforeAfter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 30, delay: 0.3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid md:grid-cols-2 gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_GlassCard.default, { padding: "lg", hover: false, children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/portfolio/sections/PerformanceSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/portfolio/components/sections/PerformanceSection.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState } from 'react';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface LighthouseScores {\n  performance?: number;\n  seo?: number;\n  accessibility?: number;\n  bestPractices?: number;\n}\n\ninterface PerformanceSectionProps {\n  data: {\n    before?: LighthouseScores;\n    after?: LighthouseScores;\n    cwv?: {\n      lcp?: number;\n      cls?: number;\n      inp?: number;\n    };\n  };\n}\n\nconst CATEGORIES = [\n  { key: 'performance', label: 'Performance', color: '#10b981' },\n  { key: 'seo', label: 'SEO', color: '#6366f1' },\n  { key: 'accessibility', label: 'Accessibility', color: '#f59e0b' },\n  { key: 'bestPractices', label: 'Best Practices', color: '#3b82f6' },\n] as const;\n\nfunction getScoreColor(score: number): string {\n  if (score >= 90) return '#10b981'; // green\n  if (score >= 50) return '#f59e0b'; // amber\n  return '#ef4444'; // red\n}\n\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ power2.out\nconst RADIUS = 44;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nfunction ScoreGauge({\n  score,\n  label,\n  previousScore,\n  delay = 0,\n}: {\n  score: number;\n  label: string;\n  previousScore?: number;\n  delay?: number;\n}) {\n  const circleRef = useRef<SVGCircleElement>(null);\n  // SSR renders the real final score + arc (crawlers and no-JS users see the\n  // true number); the count-up only runs for gauges below the viewport.\n  const [displayScore, setDisplayScore] = useState(score);\n\n  useEffect(() => {\n    const circle = circleRef.current;\n    if (!circle) return;\n\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n      setDisplayScore(score);\n      return;\n    }\n\n    // Never re-hide a gauge already in the viewport at hydration.\n    const rect = circle.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) {\n      setDisplayScore(score);\n      return;\n    }\n\n    // Hidden state: arc fully retracted, score zeroed.\n    const finalOffset = CIRCUMFERENCE - (score / 100) * CIRCUMFERENCE;\n    circle.style.strokeDashoffset = String(CIRCUMFERENCE);\n    setDisplayScore(0);\n\n    let raf = 0;\n    const easeOut = (t: number) => 1 - Math.pow(1 - t, 2); // ≈ power2.out\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        io.disconnect();\n        // Draw the arc in, and count the score up in sync with the draw.\n        circle.style.transition = `stroke-dashoffset 1.5s ${EASE} ${delay}s`;\n        circle.style.strokeDashoffset = String(finalOffset);\n        const start = performance.now();\n        const tick = (now: number) => {\n          const p = Math.min(1, Math.max(0, (now - start - delay * 1000) / 1500));\n          setDisplayScore(Math.round(easeOut(p) * score));\n          if (p < 1) raf = requestAnimationFrame(tick);\n        };\n        raf = requestAnimationFrame(tick);\n      },\n      { rootMargin: '0px 0px -15% 0px' }, // ≈ the old 'top 85%' trigger\n    );\n    io.observe(circle);\n\n    return () => {\n      io.disconnect();\n      cancelAnimationFrame(raf);\n      circle.style.transition = '';\n      circle.style.strokeDashoffset = '';\n    };\n  }, [score, delay]);\n\n  const color = getScoreColor(score);\n  const improvement = previousScore ? score - previousScore : undefined;\n\n  return (\n    <div className=\"flex flex-col items-center gap-3\">\n      <div className=\"relative w-28 h-28\">\n        <svg className=\"w-full h-full -rotate-90\" viewBox=\"0 0 100 100\">\n          {/* Background circle */}\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"44\"\n            fill=\"none\"\n            stroke=\"var(--sk-surface, rgba(255,255,255,0.05))\"\n            strokeWidth=\"6\"\n          />\n          {/* Score arc — rendered at its final sweep; the effect retracts and\n              redraws it only when the gauge scrolls in */}\n          <circle\n            ref={circleRef}\n            cx=\"50\"\n            cy=\"50\"\n            r={RADIUS}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth=\"6\"\n            strokeLinecap=\"round\"\n            strokeDasharray={CIRCUMFERENCE}\n            strokeDashoffset={CIRCUMFERENCE - (score / 100) * CIRCUMFERENCE}\n          />\n        </svg>\n        {/* Score text */}\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          <span\n            className=\"text-2xl font-bold\"\n            style={{ color }}\n          >\n            {displayScore}\n          </span>\n        </div>\n      </div>\n      <span\n        className=\"text-sm font-medium text-center\"\n        style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n      >\n        {label}\n      </span>\n      {improvement !== undefined && improvement > 0 && (\n        <span\n          className=\"text-xs font-semibold px-2 py-0.5 rounded-full\"\n          style={{\n            background: 'color-mix(in srgb, #10b981 15%, transparent)',\n            color: '#10b981',\n          }}\n        >\n          +{improvement} pts\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** Explains why each Lighthouse category matters for the business */\nconst SCORE_EXPLANATIONS: Record<string, { why: string; competitors: string }> = {\n  performance: {\n    why: 'Faster sites convert more visitors into customers. A 1-second delay in load time reduces conversions by up to 7%. Google uses page speed as a direct ranking factor.',\n    competitors: 'Wix and GoDaddy sites typically score 30\\u201350 due to bloated JavaScript bundles and shared hosting. Template builders prioritize ease-of-use over speed.',\n  },\n  seo: {\n    why: 'Technical SEO determines whether search engines can properly crawl, index, and rank your pages. Higher scores mean more organic visibility and free traffic.',\n    competitors: 'DIY builders often miss critical SEO fundamentals\\u2014proper meta tags, structured data, canonical URLs, and server-side rendering that search engines need.',\n  },\n  accessibility: {\n    why: 'Accessible sites reach more customers, including the 1 in 4 adults with disabilities. It also reduces legal risk and improves usability for everyone.',\n    competitors: 'Template platforms generate markup that frequently fails WCAG standards\\u2014missing alt text, poor contrast ratios, and keyboard navigation issues.',\n  },\n  bestPractices: {\n    why: 'Best practices cover security (HTTPS, safe APIs), modern code standards, and browser compatibility. They protect your business and your visitors.',\n    competitors: 'Older platforms rely on outdated libraries, insecure dependencies, and legacy patterns that create vulnerabilities and degrade user trust.',\n  },\n};\n\nexport default function PerformanceSection({ data }: PerformanceSectionProps) {\n  const hasBeforeAfter = data.before && data.after;\n  const scores = data.after || data.before;\n  if (!scores && !data.cwv) return null;\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-5xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-4\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Performance\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            {hasBeforeAfter\n              ? 'Real Lighthouse scores — before and after our rebuild.'\n              : 'Real performance metrics measured by Google Lighthouse.'}\n          </p>\n        </ScrollReveal>\n\n        {/* Score gauges */}\n        {scores && (\n          <ScrollReveal y={30}>\n            <div className=\"grid grid-cols-2 md:grid-cols-4 gap-8 mb-8\">\n              {CATEGORIES.map((cat, i) => {\n                const currentScore = (scores as any)[cat.key];\n                const previousScore = hasBeforeAfter ? (data.before as any)?.[cat.key] : undefined;\n                if (currentScore === undefined) return null;\n                return (\n                  <ScoreGauge\n                    key={cat.key}\n                    score={currentScore}\n                    label={cat.label}\n                    previousScore={previousScore}\n                    delay={i * 0.15}\n                  />\n                );\n              })}\n            </div>\n          </ScrollReveal>\n        )}\n\n        {/* Why these scores matter — explanation cards */}\n        {scores && (\n          <ScrollReveal y={30} delay={0.2}>\n            <div className=\"grid md:grid-cols-2 gap-4 mb-12\">\n              {CATEGORIES.map((cat) => {\n                const currentScore = (scores as any)[cat.key];\n                if (currentScore === undefined) return null;\n                const explanation = SCORE_EXPLANATIONS[cat.key];\n                if (!explanation) return null;\n                return (\n                  <GlassCard key={cat.key} padding=\"md\" hover={false}>\n                    <div className=\"flex items-start gap-3\">\n                      <div\n                        className=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0 text-sm font-bold\"\n                        style={{\n                          background: `color-mix(in srgb, ${getScoreColor(currentScore)} 15%, transparent)`,\n                          color: getScoreColor(currentScore),\n                        }}\n                      >\n                        {currentScore}\n                      </div>\n                      <div>\n                        <h4\n                          className=\"text-sm font-semibold mb-1\"\n                          style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                        >\n                          {cat.label}\n                        </h4>\n                        <p\n                          className=\"text-xs leading-relaxed mb-2\"\n                          style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                        >\n                          {explanation.why}\n                        </p>\n                        <p\n                          className=\"text-xs leading-relaxed\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {explanation.competitors}\n                        </p>\n                      </div>\n                    </div>\n                  </GlassCard>\n                );\n              })}\n            </div>\n          </ScrollReveal>\n        )}\n\n        {/* Before/After comparison cards */}\n        {hasBeforeAfter && (\n          <ScrollReveal y={30} delay={0.3}>\n            <div className=\"grid md:grid-cols-2 gap-4\">\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-sm font-semibold uppercase tracking-wider mb-4\"\n                  style={{ color: '#ef4444' }}\n                >\n                  Before (Original Site)\n                </h3>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {CATEGORIES.map((cat) => {\n                    const val = (data.before as any)?.[cat.key];\n                    if (val === undefined) return null;\n                    return (\n                      <div key={cat.key} className=\"text-center\">\n                        <span className=\"text-2xl font-bold\" style={{ color: getScoreColor(val) }}>\n                          {val}\n                        </span>\n                        <span\n                          className=\"block text-[11px] mt-1\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {cat.label}\n                        </span>\n                      </div>\n                    );\n                  })}\n                </div>\n              </GlassCard>\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-sm font-semibold uppercase tracking-wider mb-4\"\n                  style={{ color: '#10b981' }}\n                >\n                  After (Next.js Rebuild)\n                </h3>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {CATEGORIES.map((cat) => {\n                    const val = (data.after as any)?.[cat.key];\n                    if (val === undefined) return null;\n                    return (\n                      <div key={cat.key} className=\"text-center\">\n                        <span className=\"text-2xl font-bold\" style={{ color: getScoreColor(val) }}>\n                          {val}\n                        </span>\n                        <span\n                          className=\"block text-[11px] mt-1\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {cat.label}\n                        </span>\n                      </div>\n                    );\n                  })}\n                </div>\n              </GlassCard>\n            </div>\n          </ScrollReveal>\n        )}\n\n        {/* Core Web Vitals */}\n        {data.cwv && (data.cwv.lcp != null || data.cwv.cls != null || data.cwv.inp != null) && (\n          <ScrollReveal y={30} delay={0.4}>\n            <div className=\"grid grid-cols-3 gap-4 mt-8\">\n              {data.cwv.lcp != null && (\n                <GlassCard padding=\"md\" hover={false} className=\"text-center\">\n                  <span\n                    className=\"text-2xl font-bold\"\n                    style={{ color: data.cwv.lcp < 2500 ? '#10b981' : data.cwv.lcp < 4000 ? '#f59e0b' : '#ef4444' }}\n                  >\n                    {(data.cwv.lcp / 1000).toFixed(1)}s\n                  </span>\n                  <span\n                    className=\"block text-xs mt-1\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    LCP\n                  </span>\n                </GlassCard>\n              )}\n              {data.cwv.cls != null && (\n                <GlassCard padding=\"md\" hover={false} className=\"text-center\">\n                  <span\n                    className=\"text-2xl font-bold\"\n                    style={{ color: data.cwv.cls < 0.1 ? '#10b981' : data.cwv.cls < 0.25 ? '#f59e0b' : '#ef4444' }}\n                  >\n                    {data.cwv.cls.toFixed(3)}\n                  </span>\n                  <span\n                    className=\"block text-xs mt-1\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    CLS\n                  </span>\n                </GlassCard>\n              )}\n              {data.cwv.inp != null && (\n                <GlassCard padding=\"md\" hover={false} className=\"text-center\">\n                  <span\n                    className=\"text-2xl font-bold\"\n                    style={{ color: data.cwv.inp < 200 ? '#10b981' : data.cwv.inp < 500 ? '#f59e0b' : '#ef4444' }}\n                  >\n                    {data.cwv.inp}ms\n                  </span>\n                  <span\n                    className=\"block text-xs mt-1\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    INP\n                  </span>\n                </GlassCard>\n              )}\n            </div>\n          </ScrollReveal>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":["ScrollReveal","GlassCard"]}
+{"version":3,"sources":["../../../src/portfolio/components/sections/PerformanceSection.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState } from 'react';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface LighthouseScores {\n  performance?: number;\n  seo?: number;\n  accessibility?: number;\n  bestPractices?: number;\n}\n\ninterface PerformanceSectionProps {\n  data: {\n    before?: LighthouseScores;\n    after?: LighthouseScores;\n    cwv?: {\n      lcp?: number;\n      cls?: number;\n      inp?: number;\n    };\n  };\n}\n\nconst CATEGORIES = [\n  { key: 'performance', label: 'Performance', color: '#10b981' },\n  { key: 'seo', label: 'SEO', color: '#6366f1' },\n  { key: 'accessibility', label: 'Accessibility', color: '#f59e0b' },\n  { key: 'bestPractices', label: 'Best Practices', color: '#3b82f6' },\n] as const;\n\nfunction getScoreColor(score: number): string {\n  if (score >= 90) return '#10b981'; // green\n  if (score >= 50) return '#f59e0b'; // amber\n  return '#ef4444'; // red\n}\n\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ power2.out\nconst RADIUS = 44;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nfunction ScoreGauge({\n  score,\n  label,\n  previousScore,\n  delay = 0,\n}: {\n  score: number;\n  label: string;\n  previousScore?: number;\n  delay?: number;\n}) {\n  const circleRef = useRef<SVGCircleElement>(null);\n  // SSR renders the real final score + arc (crawlers and no-JS users see the\n  // true number); the count-up only runs for gauges below the viewport.\n  const [displayScore, setDisplayScore] = useState(score);\n\n  useEffect(() => {\n    const circle = circleRef.current;\n    if (!circle) return;\n\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n      setDisplayScore(score);\n      return;\n    }\n\n    // Never re-hide a gauge already in the viewport at hydration.\n    const rect = circle.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) {\n      setDisplayScore(score);\n      return;\n    }\n\n    // Hidden state: arc fully retracted, score zeroed.\n    const finalOffset = CIRCUMFERENCE - (score / 100) * CIRCUMFERENCE;\n    circle.style.strokeDashoffset = String(CIRCUMFERENCE);\n    setDisplayScore(0);\n\n    let raf = 0;\n    const easeOut = (t: number) => 1 - Math.pow(1 - t, 2); // ≈ power2.out\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        io.disconnect();\n        // Draw the arc in, and count the score up in sync with the draw.\n        circle.style.transition = `stroke-dashoffset 1.5s ${EASE} ${delay}s`;\n        circle.style.strokeDashoffset = String(finalOffset);\n        const start = performance.now();\n        const tick = (now: number) => {\n          const p = Math.min(1, Math.max(0, (now - start - delay * 1000) / 1500));\n          setDisplayScore(Math.round(easeOut(p) * score));\n          if (p < 1) raf = requestAnimationFrame(tick);\n        };\n        raf = requestAnimationFrame(tick);\n      },\n      { rootMargin: '0px 0px -15% 0px' }, // ≈ the old 'top 85%' trigger\n    );\n    io.observe(circle);\n\n    return () => {\n      io.disconnect();\n      cancelAnimationFrame(raf);\n      circle.style.transition = '';\n      circle.style.strokeDashoffset = '';\n    };\n  }, [score, delay]);\n\n  const color = getScoreColor(score);\n  const improvement = previousScore ? score - previousScore : undefined;\n\n  return (\n    <div className=\"flex flex-col items-center gap-3\">\n      <div className=\"relative w-28 h-28\">\n        <svg className=\"w-full h-full -rotate-90\" viewBox=\"0 0 100 100\">\n          {/* Background circle */}\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"44\"\n            fill=\"none\"\n            stroke=\"var(--sk-surface, rgba(255,255,255,0.05))\"\n            strokeWidth=\"6\"\n          />\n          {/* Score arc — rendered at its final sweep; the effect retracts and\n              redraws it only when the gauge scrolls in */}\n          <circle\n            ref={circleRef}\n            cx=\"50\"\n            cy=\"50\"\n            r={RADIUS}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth=\"6\"\n            strokeLinecap=\"round\"\n            strokeDasharray={CIRCUMFERENCE}\n            strokeDashoffset={CIRCUMFERENCE - (score / 100) * CIRCUMFERENCE}\n          />\n        </svg>\n        {/* Score text */}\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          <span\n            className=\"text-2xl font-bold\"\n            style={{ color }}\n          >\n            {displayScore}\n          </span>\n        </div>\n      </div>\n      <span\n        className=\"text-sm font-medium text-center\"\n        style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n      >\n        {label}\n      </span>\n      {improvement !== undefined && improvement > 0 && (\n        <span\n          className=\"text-xs font-semibold px-2 py-0.5 rounded-full\"\n          style={{\n            background: 'color-mix(in srgb, #10b981 15%, transparent)',\n            color: '#10b981',\n          }}\n        >\n          +{improvement} pts\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport default function PerformanceSection({ data }: PerformanceSectionProps) {\n  const hasBeforeAfter = data.before && data.after;\n  const scores = data.after || data.before;\n  if (!scores && !data.cwv) return null;\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-5xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-4\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Performance\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            {hasBeforeAfter\n              ? 'Real Lighthouse scores, before and after our rebuild.'\n              : 'Real performance metrics measured by Google Lighthouse.'}\n          </p>\n        </ScrollReveal>\n\n        {/* Score gauges */}\n        {scores && (\n          <ScrollReveal y={30}>\n            <div className=\"grid grid-cols-2 md:grid-cols-4 gap-8 mb-8\">\n              {CATEGORIES.map((cat, i) => {\n                const currentScore = (scores as any)[cat.key];\n                const previousScore = hasBeforeAfter ? (data.before as any)?.[cat.key] : undefined;\n                if (currentScore === undefined) return null;\n                return (\n                  <ScoreGauge\n                    key={cat.key}\n                    score={currentScore}\n                    label={cat.label}\n                    previousScore={previousScore}\n                    delay={i * 0.15}\n                  />\n                );\n              })}\n            </div>\n          </ScrollReveal>\n        )}\n\n        {/* Before/After comparison cards */}\n        {hasBeforeAfter && (\n          <ScrollReveal y={30} delay={0.3}>\n            <div className=\"grid md:grid-cols-2 gap-4\">\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-sm font-semibold uppercase tracking-wider mb-4\"\n                  style={{ color: '#ef4444' }}\n                >\n                  Before (Original Site)\n                </h3>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {CATEGORIES.map((cat) => {\n                    const val = (data.before as any)?.[cat.key];\n                    if (val === undefined) return null;\n                    return (\n                      <div key={cat.key} className=\"text-center\">\n                        <span className=\"text-2xl font-bold\" style={{ color: getScoreColor(val) }}>\n                          {val}\n                        </span>\n                        <span\n                          className=\"block text-[11px] mt-1\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {cat.label}\n                        </span>\n                      </div>\n                    );\n                  })}\n                </div>\n              </GlassCard>\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-sm font-semibold uppercase tracking-wider mb-4\"\n                  style={{ color: '#10b981' }}\n                >\n                  After (Next.js Rebuild)\n                </h3>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {CATEGORIES.map((cat) => {\n                    const val = (data.after as any)?.[cat.key];\n                    if (val === undefined) return null;\n                    return (\n                      <div key={cat.key} className=\"text-center\">\n                        <span className=\"text-2xl font-bold\" style={{ color: getScoreColor(val) }}>\n                          {val}\n                        </span>\n                        <span\n                          className=\"block text-[11px] mt-1\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {cat.label}\n                        </span>\n                      </div>\n                    );\n                  })}\n                </div>\n              </GlassCard>\n            </div>\n          </ScrollReveal>\n        )}\n\n        {/* Core Web Vitals */}\n        {data.cwv && (data.cwv.lcp != null || data.cwv.cls != null || data.cwv.inp != null) && (\n          <ScrollReveal y={30} delay={0.4}>\n            <div className=\"grid grid-cols-3 gap-4 mt-8\">\n              {data.cwv.lcp != null && (\n                <GlassCard padding=\"md\" hover={false} className=\"text-center\">\n                  <span\n                    className=\"text-2xl font-bold\"\n                    style={{ color: data.cwv.lcp < 2500 ? '#10b981' : data.cwv.lcp < 4000 ? '#f59e0b' : '#ef4444' }}\n                  >\n                    {(data.cwv.lcp / 1000).toFixed(1)}s\n                  </span>\n                  <span\n                    className=\"block text-xs mt-1\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    LCP\n                  </span>\n                </GlassCard>\n              )}\n              {data.cwv.cls != null && (\n                <GlassCard padding=\"md\" hover={false} className=\"text-center\">\n                  <span\n                    className=\"text-2xl font-bold\"\n                    style={{ color: data.cwv.cls < 0.1 ? '#10b981' : data.cwv.cls < 0.25 ? '#f59e0b' : '#ef4444' }}\n                  >\n                    {data.cwv.cls.toFixed(3)}\n                  </span>\n                  <span\n                    className=\"block text-xs mt-1\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    CLS\n                  </span>\n                </GlassCard>\n              )}\n              {data.cwv.inp != null && (\n                <GlassCard padding=\"md\" hover={false} className=\"text-center\">\n                  <span\n                    className=\"text-2xl font-bold\"\n                    style={{ color: data.cwv.inp < 200 ? '#10b981' : data.cwv.inp < 500 ? '#f59e0b' : '#ef4444' }}\n                  >\n                    {data.cwv.inp}ms\n                  </span>\n                  <span\n                    className=\"block text-xs mt-1\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    INP\n                  </span>\n                </GlassCard>\n              )}\n            </div>\n          </ScrollReveal>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":["ScrollReveal","GlassCard"]}