@sonordev/agency-site-kit 0.4.0 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-L7E3UHQC.cjs → chunk-2Y2RJB3A.cjs} +16 -13
- package/dist/chunk-2Y2RJB3A.cjs.map +1 -0
- package/dist/{chunk-4N7ENJ7L.cjs → chunk-6OWFFV6N.cjs} +14 -12
- package/dist/chunk-6OWFFV6N.cjs.map +1 -0
- package/dist/chunk-7D4H36UF.js +13 -0
- package/dist/chunk-7D4H36UF.js.map +1 -0
- package/dist/{chunk-UNTOEWQL.js → chunk-7FFZX7C5.js} +10 -7
- package/dist/chunk-7FFZX7C5.js.map +1 -0
- package/dist/{chunk-7ZHRMWJU.cjs → chunk-A5WCMHAE.cjs} +2 -2
- package/dist/{chunk-7ZHRMWJU.cjs.map → chunk-A5WCMHAE.cjs.map} +1 -1
- package/dist/chunk-FM25LB67.js +50 -0
- package/dist/chunk-FM25LB67.js.map +1 -0
- package/dist/{chunk-KXLROAO5.js → chunk-FT2SNEYP.js} +2 -2
- package/dist/{chunk-KXLROAO5.js.map → chunk-FT2SNEYP.js.map} +1 -1
- package/dist/{chunk-XLK77USA.js → chunk-K2BGTDSN.js} +2 -2
- package/dist/{chunk-XLK77USA.js.map → chunk-K2BGTDSN.js.map} +1 -1
- package/dist/chunk-X76U7VLF.cjs +57 -0
- package/dist/chunk-X76U7VLF.cjs.map +1 -0
- package/dist/{chunk-NIZJLONK.js → chunk-X7UCJ45A.js} +14 -12
- package/dist/chunk-X7UCJ45A.js.map +1 -0
- package/dist/chunk-ZBPF7TLZ.cjs +16 -0
- package/dist/chunk-ZBPF7TLZ.cjs.map +1 -0
- package/dist/format-C-axf13G.d.cts +68 -0
- package/dist/format-poUpLtQ2.d.ts +68 -0
- package/dist/index.cjs +36 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +5 -3
- package/dist/index.js.map +1 -1
- package/dist/layout/index.d.cts +1 -1
- package/dist/layout/index.d.ts +1 -1
- package/dist/portfolio/client.cjs +25 -6
- package/dist/portfolio/client.cjs.map +1 -1
- package/dist/portfolio/client.d.cts +20 -1
- package/dist/portfolio/client.d.ts +20 -1
- package/dist/portfolio/client.js +22 -5
- package/dist/portfolio/client.js.map +1 -1
- package/dist/portfolio/components/PortfolioErrorFallback.cjs +1 -1
- package/dist/portfolio/components/PortfolioErrorFallback.cjs.map +1 -1
- package/dist/portfolio/components/PortfolioErrorFallback.js +1 -1
- package/dist/portfolio/index.cjs +36 -10
- package/dist/portfolio/index.d.cts +12 -4
- package/dist/portfolio/index.d.ts +12 -4
- package/dist/portfolio/index.js +5 -3
- package/dist/portfolio/sections/ChallengesSection.cjs +1 -1
- package/dist/portfolio/sections/ChallengesSection.cjs.map +1 -1
- package/dist/portfolio/sections/ChallengesSection.d.cts +1 -1
- package/dist/portfolio/sections/ChallengesSection.d.ts +1 -1
- package/dist/portfolio/sections/ChallengesSection.js +1 -1
- package/dist/portfolio/sections/ChallengesSection.js.map +1 -1
- package/dist/portfolio/sections/DetailsSection.d.cts +1 -1
- package/dist/portfolio/sections/DetailsSection.d.ts +1 -1
- package/dist/portfolio/sections/HeroSection.cjs +3 -3
- package/dist/portfolio/sections/HeroSection.cjs.map +1 -1
- package/dist/portfolio/sections/HeroSection.d.cts +1 -1
- package/dist/portfolio/sections/HeroSection.d.ts +1 -1
- package/dist/portfolio/sections/HeroSection.js +3 -3
- package/dist/portfolio/sections/HeroSection.js.map +1 -1
- package/dist/portfolio/sections/PerformanceSection.cjs +1 -64
- package/dist/portfolio/sections/PerformanceSection.cjs.map +1 -1
- package/dist/portfolio/sections/PerformanceSection.js +1 -64
- package/dist/portfolio/sections/PerformanceSection.js.map +1 -1
- package/dist/portfolio/sections/ResultsSection.cjs +4 -2
- package/dist/portfolio/sections/ResultsSection.cjs.map +1 -1
- package/dist/portfolio/sections/ResultsSection.d.cts +2 -2
- package/dist/portfolio/sections/ResultsSection.d.ts +2 -2
- package/dist/portfolio/sections/ResultsSection.js +3 -1
- package/dist/portfolio/sections/ResultsSection.js.map +1 -1
- package/dist/portfolio/sections/ServicesSection.d.cts +1 -1
- package/dist/portfolio/sections/ServicesSection.d.ts +1 -1
- package/dist/portfolio/sections/SiteArchitectureSection.cjs +1 -1
- package/dist/portfolio/sections/SiteArchitectureSection.cjs.map +1 -1
- package/dist/portfolio/sections/SiteArchitectureSection.js +1 -1
- package/dist/portfolio/sections/SiteArchitectureSection.js.map +1 -1
- package/dist/portfolio/sections/SpeedComparisonSection.cjs +1 -1
- package/dist/portfolio/sections/SpeedComparisonSection.cjs.map +1 -1
- package/dist/portfolio/sections/SpeedComparisonSection.js +1 -1
- package/dist/portfolio/sections/SpeedComparisonSection.js.map +1 -1
- package/dist/portfolio/sections/TechStackSection.d.cts +1 -1
- package/dist/portfolio/sections/TechStackSection.d.ts +1 -1
- package/dist/portfolio/sections/TestimonialSection.d.cts +1 -1
- package/dist/portfolio/sections/TestimonialSection.d.ts +1 -1
- package/dist/portfolio/server.cjs +40 -14
- package/dist/portfolio/server.d.cts +3 -1
- package/dist/portfolio/server.d.ts +3 -1
- package/dist/portfolio/server.js +3 -1
- package/dist/{types-0tVPy4pU.d.cts → types-He5A9okM.d.cts} +1 -1
- package/dist/{types-0tVPy4pU.d.ts → types-He5A9okM.d.ts} +1 -1
- package/package.json +3 -3
- package/dist/chunk-4N7ENJ7L.cjs.map +0 -1
- package/dist/chunk-L7E3UHQC.cjs.map +0 -1
- package/dist/chunk-NIZJLONK.js.map +0 -1
- package/dist/chunk-UNTOEWQL.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/portfolio/client.ts","../../src/portfolio/components/PortfolioGrid.tsx","../../src/portfolio/components/PortfolioCard.tsx","../../src/portfolio/components/PortfolioErrorFallback.tsx","../../src/portfolio/components/PortfolioLeadCTA.tsx","../../src/portfolio/components/PortfolioAnalytics.tsx"],"sourcesContent":["'use client';\n\n/**\n * @sonordev/agency-site-kit/portfolio/client — Client-only portfolio components\n *\n * Components in this barrel require browser APIs (DOM, events, animations).\n * The 'use client' directive marks the client boundary; the build also stamps\n * every compiled file in the client bundle with the directive.\n *\n * Individual section components live at\n * `@sonordev/agency-site-kit/portfolio/sections/<Name>` and animation\n * primitives at `@sonordev/agency-site-kit/portfolio/primitives/<Name>` —\n * import those subpaths directly to compose custom layouts.\n */\n\nimport type { PortfolioItem, PortfolioItemFull, PortfolioSection } from '../types';\n\n// Grid/Card are shared (directive-less) components; importing them through\n// this 'use client' barrel yields the client copy for client-side callers.\n// Server code renders them via PortfolioIndex / the /portfolio barrel.\nexport { default as PortfolioGrid } from './components/PortfolioGrid';\nexport { default as PortfolioCard } from './components/PortfolioCard';\n\n// Error boundary UI for portfolio routes (error.tsx must be a client file)\nexport { default as PortfolioErrorFallback } from './components/PortfolioErrorFallback';\nexport type { PortfolioErrorFallbackProps } from './components/PortfolioErrorFallback';\n\n// Lead capture CTA — Sonor managed form with case-study attribution\nexport { default as PortfolioLeadCTA } from './components/PortfolioLeadCTA';\nexport type { PortfolioLeadCTAProps } from './components/PortfolioLeadCTA';\n\n// Engagement-tracking island (PortfolioPage mounts this automatically;\n// exported for custom layouts)\nexport { default as PortfolioAnalytics } from './components/PortfolioAnalytics';\n\n// Re-export types for convenience\nexport type {\n PortfolioItem,\n PortfolioItemFull,\n PortfolioSection,\n};\n","// Shared component — no directive on purpose: hook-free, so it renders\n// server-side (zero JS) from PortfolioIndex and stays usable from client\n// code via the /portfolio/client barrel.\nimport React from 'react';\nimport type { PortfolioItem } from '../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport PortfolioCard from './PortfolioCard';\n\ninterface PortfolioGridProps {\n items: PortfolioItem[];\n className?: string;\n /** Base path for portfolio detail links (default: '/work') */\n basePath?: string;\n}\n\nexport default function PortfolioGrid({ items, className = '', basePath = '/work' }: PortfolioGridProps) {\n return (\n <ScrollReveal stagger={0.1}>\n <div\n className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 ${className}`}\n style={{\n gap: 'var(--sk-grid-gap, 24px)',\n }}\n >\n {items.map((item) => (\n <PortfolioCard key={item.id} item={item} basePath={basePath} />\n ))}\n </div>\n </ScrollReveal>\n );\n}\n","// Shared component — no directive on purpose: hook-free, so it renders\n// server-side (zero JS) from PortfolioIndex and stays usable from client\n// code via the /portfolio/client barrel.\nimport React from 'react';\nimport Image from 'next/image';\nimport Link from 'next/link';\nimport type { PortfolioItem } from '../../types';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface PortfolioCardProps {\n item: PortfolioItem;\n className?: string;\n /** Base path for portfolio detail links (default: '/work') */\n basePath?: string;\n}\n\nexport default function PortfolioCard({ item, className = '', basePath = '/work' }: PortfolioCardProps) {\n // Use hero_screenshots desktop → hero_image → trifolio screenshot convention\n const thumbnailSrc =\n item.hero_screenshots?.desktop ||\n item.hero_image ||\n (item.project_id ? `/portfolio-previews/${item.slug}.png` : undefined);\n const kpis = Array.isArray(item.kpis) ? item.kpis : [];\n const services = Array.isArray(item.services) ? item.services : [];\n const kpiPreview = kpis.slice(0, 3);\n const servicePreview = services.slice(0, 3);\n\n return (\n <Link href={`${basePath}/${item.slug}`} className={`block group ${className}`}>\n <GlassCard padding=\"sm\" hover>\n <div className=\"flex flex-col gap-4\">\n {/* Thumbnail */}\n {thumbnailSrc && (\n <div\n className=\"relative w-full overflow-hidden rounded-xl\"\n style={{ aspectRatio: '16/10' }}\n >\n <Image\n src={thumbnailSrc}\n alt={item.hero_image_alt || item.title}\n fill\n sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n className=\"object-cover object-top transition-transform duration-500 group-hover:scale-105\"\n />\n {/* Category badge */}\n <span\n className=\"absolute top-3 left-3 px-3 py-1 rounded-full text-[11px] uppercase tracking-wider font-semibold\"\n style={{\n background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 80%, transparent)',\n color: '#ffffff',\n backdropFilter: 'blur(8px)',\n }}\n >\n {item.category?.replace(/[-_]/g, ' ').replace(/\\b\\w/g, (c: string) => c.toUpperCase())}\n </span>\n </div>\n )}\n\n {/* Text content */}\n <div className=\"flex flex-col gap-2 px-2 pb-2\">\n <h3\n className=\"text-lg font-semibold line-clamp-1\"\n style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n >\n {item.title}\n </h3>\n\n {item.subtitle && (\n <p\n className=\"text-sm line-clamp-2\"\n style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n >\n {item.subtitle}\n </p>\n )}\n\n {/* KPI preview */}\n {kpiPreview.length > 0 && (\n <div className=\"flex items-center gap-4 mt-1\">\n {kpiPreview.map((kpi, i) => (\n <div key={i} className=\"flex flex-col\">\n <span\n className=\"text-base font-bold\"\n style={{ color: 'var(--sk-primary, #6366f1)' }}\n >\n {kpi.prefix || ''}\n {kpi.value.toLocaleString()}\n {kpi.suffix}\n </span>\n <span\n className=\"text-[10px] uppercase tracking-wider font-medium\"\n style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n >\n {kpi.label}\n </span>\n </div>\n ))}\n </div>\n )}\n\n {/* Services tags */}\n {servicePreview.length > 0 && (\n <div className=\"flex flex-wrap gap-1.5 mt-2\">\n {servicePreview.map((service) => (\n <span\n key={service}\n className=\"px-2.5 py-0.5 rounded-full text-[11px] 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 {services.length > 3 && (\n <span\n className=\"px-2.5 py-0.5 rounded-full text-[11px] font-medium\"\n style={{\n background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n color: 'var(--sk-text-tertiary, #71717a)',\n }}\n >\n +{item.services.length - 3}\n </span>\n )}\n </div>\n )}\n </div>\n </div>\n </GlassCard>\n </Link>\n );\n}\n","'use client';\n\n/**\n * Error boundary UI for portfolio routes — pairs with the PortfolioApiError\n * contract (infrastructure failures throw; Next renders the route's\n * error.tsx). Drop into `error.tsx`:\n *\n * ```tsx\n * 'use client';\n * export { PortfolioErrorFallback as default } from '@sonordev/agency-site-kit/portfolio/client';\n * ```\n */\n\nimport React from 'react';\n\nexport interface PortfolioErrorFallbackProps {\n error: Error & { digest?: string };\n reset: () => void;\n}\n\nexport default function PortfolioErrorFallback({ error, reset }: PortfolioErrorFallbackProps) {\n return (\n <section className=\"w-full py-24\">\n <div\n className=\"max-w-xl mx-auto px-8 py-12 rounded-2xl text-center flex flex-col items-center gap-4\"\n style={{\n background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n }}\n >\n <h2\n className=\"text-xl font-semibold\"\n style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n >\n Our work is taking a moment to load\n </h2>\n <p className=\"text-sm\" style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}>\n The portfolio couldn't be fetched just now. It's us, not you — try again in a\n few seconds.\n </p>\n {error?.digest && (\n <p className=\"text-xs\" style={{ color: 'var(--sk-text-tertiary, #71717a)' }}>\n Reference: {error.digest}\n </p>\n )}\n <button\n onClick={reset}\n className=\"mt-2 px-6 py-2.5 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90\"\n style={{ background: 'var(--sk-primary, #6366f1)', color: '#ffffff' }}\n >\n Try again\n </button>\n </div>\n </section>\n );\n}\n","'use client';\n\n/**\n * PortfolioLeadCTA — turn a case study into a lead source.\n *\n * Renders a Sonor managed form (site-kit ManagedForm — never hand-rolled\n * markup) inside a CTA shell. Attribution comes free on two rails:\n *\n * 1. The submission's metadata.pageUrl (sent automatically by site-kit)\n * lands in the CRM's page_url/source_url columns — that IS the case\n * study URL.\n * 2. onSuccess fires a `portfolio_lead` conversion with the case-study\n * slug via the standalone dispatch, so Signal/analytics can report\n * \"leads per case study\" without parsing URLs.\n *\n * If the managed form defines a hidden `portfolio_slug` field, define it in\n * the dashboard and it will arrive pre-filled too (fields JSONB).\n */\n\nimport React from 'react';\nimport { ManagedForm } from '@sonordev/site-kit/forms';\nimport { trackConversion } from '@sonordev/site-kit/client';\n\nexport interface PortfolioLeadCTAProps {\n /** Managed form key from the Sonor dashboard (e.g. \"portfolio-inquiry\"). */\n formId: string;\n /** The case study this CTA sits on — used for lead attribution. */\n item: { slug: string; title: string };\n heading?: string;\n description?: string;\n className?: string;\n}\n\nexport default function PortfolioLeadCTA({\n formId,\n item,\n heading = 'Want results like these?',\n description = \"Tell us about your project and we'll show you what's possible.\",\n className = '',\n}: PortfolioLeadCTAProps) {\n return (\n <section\n className={`w-full py-20 md:py-28 ${className}`}\n style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n data-portfolio-section=\"portfolioLeadForm\"\n >\n <div className=\"max-w-2xl mx-auto px-6\">\n <div\n className=\"rounded-2xl p-8 md:p-12\"\n style={{\n background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n backdropFilter: 'blur(16px)',\n border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n }}\n >\n <h2\n className=\"text-2xl md:text-3xl font-bold mb-3\"\n style={{\n color: 'var(--sk-text-primary, #ffffff)',\n fontFamily: 'var(--sk-font-heading, inherit)',\n }}\n >\n {heading}\n </h2>\n <p\n className=\"text-base mb-8\"\n style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n >\n {description}\n </p>\n\n <ManagedForm\n formId={formId}\n onSuccess={() => {\n trackConversion({\n type: 'portfolio_lead',\n metadata: { case_study: item.slug, case_study_title: item.title },\n });\n }}\n />\n </div>\n </div>\n </section>\n );\n}\n","'use client';\n\n/**\n * PortfolioAnalytics — childless engagement-tracking island.\n *\n * Mounted by PortfolioPage as a SIBLING of the content (never a wrapper —\n * house perf doctrine), deferred to idle so it stays out of the hydration\n * path. Observes the server-rendered `data-portfolio-section` markers and\n * emits events through site-kit's standalone dispatch (which queues until\n * the site's AnalyticsProvider mounts and no-ops if it never does):\n *\n * portfolio_section_view once per section type per page view\n * portfolio_live_site_click clicks on [data-portfolio-action=\"live-site\"]\n * portfolio_cta_click clicks on [data-portfolio-action=\"cta\"]\n *\n * This is the raw material for \"your QCR case study converts best\" insights.\n */\n\nimport { useEffect } from 'react';\nimport { trackEvent } from '@sonordev/site-kit/client';\n\nexport default function PortfolioAnalytics({ slug }: { slug: string }) {\n useEffect(() => {\n let cleanup = () => {};\n\n const setup = () => {\n const seen = new Set<string>();\n const io = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n if (!entry.isIntersecting) continue;\n const type = (entry.target as HTMLElement).dataset.portfolioSection;\n if (!type || seen.has(type)) continue;\n seen.add(type);\n trackEvent({\n name: 'portfolio_section_view',\n category: 'portfolio',\n label: type,\n properties: { case_study: slug, section: type },\n });\n }\n },\n { threshold: 0.4 },\n );\n document\n .querySelectorAll<HTMLElement>('[data-portfolio-section]')\n .forEach((el) => io.observe(el));\n\n const onClick = (event: MouseEvent) => {\n const link = (event.target as HTMLElement).closest<HTMLAnchorElement>(\n 'a[data-portfolio-action]',\n );\n if (!link) return;\n const action = link.dataset.portfolioAction;\n trackEvent({\n name: action === 'live-site' ? 'portfolio_live_site_click' : 'portfolio_cta_click',\n category: 'portfolio',\n label: slug,\n properties: { case_study: slug, href: link.href },\n });\n };\n document.addEventListener('click', onClick, { passive: true });\n\n cleanup = () => {\n io.disconnect();\n document.removeEventListener('click', onClick);\n };\n };\n\n // Idle-defer: engagement tracking must never compete with hydration.\n let idleId: number | ReturnType<typeof setTimeout>;\n if ('requestIdleCallback' in window) {\n idleId = window.requestIdleCallback(setup, { timeout: 3000 });\n } else {\n idleId = setTimeout(setup, 1500);\n }\n\n return () => {\n if ('requestIdleCallback' in window) window.cancelIdleCallback(idleId as number);\n else clearTimeout(idleId as ReturnType<typeof setTimeout>);\n cleanup();\n };\n }, [slug]);\n\n return null;\n}\n"],"mappings":"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","names":["Link","GlassCard","Image","import_jsx_runtime","ScrollReveal","import_jsx_runtime","import_jsx_runtime","import_client"]}
|
|
1
|
+
{"version":3,"sources":["../../src/portfolio/client.ts","../../src/portfolio/components/PortfolioGrid.tsx","../../src/portfolio/components/PortfolioCard.tsx","../../src/portfolio/curate-proof.ts","../../src/portfolio/format.ts","../../src/portfolio/components/PortfolioErrorFallback.tsx","../../src/portfolio/components/PortfolioLeadCTA.tsx","../../src/portfolio/components/PortfolioAnalytics.tsx"],"sourcesContent":["'use client';\n\n/**\n * @sonordev/agency-site-kit/portfolio/client — Client-only portfolio components\n *\n * Components in this barrel require browser APIs (DOM, events, animations).\n * The 'use client' directive marks the client boundary; the build also stamps\n * every compiled file in the client bundle with the directive.\n *\n * Individual section components live at\n * `@sonordev/agency-site-kit/portfolio/sections/<Name>` and animation\n * primitives at `@sonordev/agency-site-kit/portfolio/primitives/<Name>` —\n * import those subpaths directly to compose custom layouts.\n */\n\nimport type { PortfolioItem, PortfolioItemFull, PortfolioSection } from '../types';\n\n// Grid/Card are shared (directive-less) components; importing them through\n// this 'use client' barrel yields the client copy for client-side callers.\n// Server code renders them via PortfolioIndex / the /portfolio barrel.\nexport { default as PortfolioGrid } from './components/PortfolioGrid';\nexport { default as PortfolioCard } from './components/PortfolioCard';\n\n// Pure label formatters — client-side copy of the same source module the\n// server barrel exports (e.g. app-side category filter chips).\nexport { formatCategoryLabel, formatServiceTag } from './format';\n\n// Error boundary UI for portfolio routes (error.tsx must be a client file)\nexport { default as PortfolioErrorFallback } from './components/PortfolioErrorFallback';\nexport type { PortfolioErrorFallbackProps } from './components/PortfolioErrorFallback';\n\n// Lead capture CTA — Sonor managed form with case-study attribution\nexport { default as PortfolioLeadCTA } from './components/PortfolioLeadCTA';\nexport type { PortfolioLeadCTAProps } from './components/PortfolioLeadCTA';\n\n// Engagement-tracking island (PortfolioPage mounts this automatically;\n// exported for custom layouts)\nexport { default as PortfolioAnalytics } from './components/PortfolioAnalytics';\n\n// Re-export types for convenience\nexport type {\n PortfolioItem,\n PortfolioItemFull,\n PortfolioSection,\n};\n","// Shared component — no directive on purpose: hook-free, so it renders\n// server-side (zero JS) from PortfolioIndex and stays usable from client\n// code via the /portfolio/client barrel.\nimport React from 'react';\nimport type { PortfolioItem } from '../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport PortfolioCard from './PortfolioCard';\n\ninterface PortfolioGridProps {\n items: PortfolioItem[];\n className?: string;\n /** Base path for portfolio detail links (default: '/work') */\n basePath?: string;\n}\n\nexport default function PortfolioGrid({ items, className = '', basePath = '/work' }: PortfolioGridProps) {\n return (\n <ScrollReveal stagger={0.1}>\n <div\n className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 ${className}`}\n style={{\n gap: 'var(--sk-grid-gap, 24px)',\n }}\n >\n {items.map((item) => (\n <PortfolioCard key={item.id} item={item} basePath={basePath} />\n ))}\n </div>\n </ScrollReveal>\n );\n}\n","// Shared component — no directive on purpose: hook-free, so it renders\n// server-side (zero JS) from PortfolioIndex and stays usable from client\n// code via the /portfolio/client barrel.\nimport React from 'react';\nimport Image from 'next/image';\nimport Link from 'next/link';\nimport type { PortfolioItem } from '../../types';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\nimport { curateHeroKpis } from '../curate-proof';\nimport { formatCategoryLabel, formatServiceTag } from '../format';\n\ninterface PortfolioCardProps {\n item: PortfolioItem;\n className?: string;\n /** Base path for portfolio detail links (default: '/work') */\n basePath?: string;\n}\n\nexport default function PortfolioCard({ item, className = '', basePath = '/work' }: PortfolioCardProps) {\n // Use hero_screenshots desktop → hero_image → trifolio screenshot convention\n const thumbnailSrc =\n item.hero_screenshots?.desktop ||\n item.hero_image ||\n (item.project_id ? `/portfolio-previews/${item.slug}.png` : undefined);\n const kpis = Array.isArray(item.kpis) ? item.kpis : [];\n const services = Array.isArray(item.services) ? item.services : [];\n // Collapse per-category Lighthouse KPIs so a card never reads\n // \"100/100 · 100/100 · 100/100\" — business outcomes lead the preview.\n const kpiPreview = curateHeroKpis(kpis).slice(0, 3);\n const servicePreview = services.slice(0, 3);\n\n return (\n <Link href={`${basePath}/${item.slug}`} className={`block group ${className}`}>\n <GlassCard padding=\"sm\" hover>\n <div className=\"flex flex-col gap-4\">\n {/* Thumbnail */}\n {thumbnailSrc && (\n <div\n className=\"relative w-full overflow-hidden rounded-xl\"\n style={{ aspectRatio: '16/10' }}\n >\n <Image\n src={thumbnailSrc}\n alt={item.hero_image_alt || item.title}\n fill\n sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n className=\"object-cover object-top transition-transform duration-500 group-hover:scale-105\"\n />\n {/* Category badge */}\n <span\n className=\"absolute top-3 left-3 px-3 py-1 rounded-full text-[11px] uppercase tracking-wider font-semibold\"\n style={{\n background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 80%, transparent)',\n color: '#ffffff',\n backdropFilter: 'blur(8px)',\n }}\n >\n {formatCategoryLabel(item.category)}\n </span>\n </div>\n )}\n\n {/* Text content */}\n <div className=\"flex flex-col gap-2 px-2 pb-2\">\n <h3\n className=\"text-lg font-semibold line-clamp-1\"\n style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n >\n {item.title}\n </h3>\n\n {item.subtitle && (\n <p\n className=\"text-sm line-clamp-2\"\n style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n >\n {item.subtitle}\n </p>\n )}\n\n {/* KPI preview */}\n {kpiPreview.length > 0 && (\n <div className=\"flex items-center gap-4 mt-1\">\n {kpiPreview.map((kpi, i) => (\n <div key={i} className=\"flex flex-col\">\n <span\n className=\"text-base font-bold\"\n style={{ color: 'var(--sk-primary, #6366f1)' }}\n >\n {kpi.prefix || ''}\n {kpi.value.toLocaleString()}\n {kpi.suffix}\n </span>\n <span\n className=\"text-[10px] uppercase tracking-wider font-medium\"\n style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n >\n {kpi.label}\n </span>\n </div>\n ))}\n </div>\n )}\n\n {/* Services tags */}\n {servicePreview.length > 0 && (\n <div className=\"flex flex-wrap gap-1.5 mt-2\">\n {servicePreview.map((service) => (\n <span\n key={service}\n className=\"px-2.5 py-0.5 rounded-full text-[11px] 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 {services.length > 3 && (\n <span\n className=\"px-2.5 py-0.5 rounded-full text-[11px] font-medium\"\n style={{\n background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n color: 'var(--sk-text-tertiary, #71717a)',\n }}\n >\n +{item.services.length - 3}\n </span>\n )}\n </div>\n )}\n </div>\n </div>\n </GlassCard>\n </Link>\n );\n}\n","/**\n * curate-proof — single source of truth for which proof points a public case\n * study is allowed to display, and in what shape.\n *\n * Two classes of problem this guards against (both shipped to production on\n * upforge.io before this existed):\n *\n * 1. Repetition: generated items arrive with four \"100/100 Lighthouse X\"\n * KPIs in the hero, the same four restated as Results cards, AND a full\n * Performance section with score gauges. One differentiator repeated\n * twelve times per page stops differentiating. The Performance section is\n * the one home for the Lighthouse breakdown; hero/results/cards collapse\n * to at most one summary tile.\n *\n * 2. Self-harming live metrics: MetricsDelta rows are computed from raw\n * analytics baselines with no editorial judgment — a bounce rate of\n * \"100 → 99.69\" rendered as a green win. Marketing surfaces only show a\n * delta when it's a genuinely flattering, meaningful story.\n *\n * Used by PortfolioPage (hero KPIs + results items), PortfolioCard (KPI\n * preview), and MetricsProvenance (delta gate). Change display policy here,\n * nowhere else.\n */\n\nimport type {\n MetricsDelta,\n PortfolioHeroData,\n PortfolioItemFull,\n PortfolioResultItem,\n PortfolioResultsData,\n} from '../types';\n// The Lighthouse-KPI collapse policy is the shared cross-repo contract\n// (@sonordev/site-kit/portfolio/contract) — the same source signal-api mirrors\n// for content-time collapse. Imported (not re-implemented) so the display side\n// and the content side can never drift; re-exported so this module stays the\n// portfolio's single display-policy entry point.\nimport { curateHeroKpis, isLighthouseKpi } from '@sonordev/site-kit/portfolio/contract';\n\nexport { curateHeroKpis, isLighthouseKpi };\n\nconst LIGHTHOUSE_RE = /lighthouse/i;\n\n/**\n * True when a Results card merely restates a Lighthouse category score\n * (e.g. \"Perfect performance score … measured Lighthouse score of 100/100\").\n * Business outcomes (\"Complete 14-page rebuild\", \"682% session growth\")\n * never match: the title must be about a score AND the card must reference\n * Lighthouse or carry a x/100 metric.\n */\nexport function isLighthouseRestatement(item: PortfolioResultItem): boolean {\n if (!/score/i.test(item.title)) return false;\n if (LIGHTHOUSE_RE.test(`${item.title} ${item.description}`)) return true;\n return item.metric?.suffix === '/100';\n}\n\n/**\n * Drop Results cards that restate Lighthouse scores when the case study also\n * renders a Performance section (the score breakdown's single home).\n */\nexport function curateResultItems(\n items: PortfolioResultItem[],\n hasPerformanceSection: boolean,\n): PortfolioResultItem[] {\n if (!hasPerformanceSection) return items;\n const curated = items.filter((item) => !isLighthouseRestatement(item));\n // Never curate a Results section into emptiness — if every card was a\n // Lighthouse restatement, keep the strongest single card instead.\n return curated.length > 0 ? curated : items.slice(0, 1);\n}\n\n/**\n * Editorial gate for live metric deltas (\"Verified from live analytics\").\n * `direction` comes from the platform with 'up' meaning IMPROVED (lower-is-\n * better metrics are inverted server-side). A public case study only shows a\n * delta when it's a win worth telling:\n * - improved ('up'), never a regression or flat noise\n * - moved by a double-digit relative margin (small drift isn't a story)\n * - bounce-rate-style metrics must also be respectable in absolute terms —\n * \"100 → 99.69\" is technically an improvement and still self-harm\n */\nexport function gateMetricsDeltas(deltas: MetricsDelta[] | undefined | null): MetricsDelta[] {\n if (!deltas?.length) return [];\n return deltas.filter((d) => {\n if (d.direction !== 'up') return false;\n if (Math.abs(d.deltaPercent) < 10) return false;\n if (/bounce/i.test(d.metric) && d.current > 70) return false;\n return true;\n });\n}\n\n/**\n * Apply the full display policy to a portfolio item before rendering.\n * Pure — returns a new item; the fetched payload is never mutated.\n */\nexport function curatePortfolioProof(item: PortfolioItemFull): PortfolioItemFull {\n const hasPerformanceSection = item.sections.some(\n (s) => s.sectionType === 'portfolioPerformance',\n );\n\n return {\n ...item,\n sections: item.sections.map((section) => {\n if (section.sectionType === 'portfolioHero') {\n const data = section.data as PortfolioHeroData;\n return { ...section, data: { ...data, kpis: curateHeroKpis(data.kpis ?? []) } };\n }\n if (section.sectionType === 'portfolioResults') {\n const data = section.data as PortfolioResultsData;\n return {\n ...section,\n data: { ...data, items: curateResultItems(data.items ?? [], hasPerformanceSection) },\n };\n }\n return section;\n }),\n };\n}\n","/**\n * Presentation formatters shared by portfolio components and consuming apps.\n */\n\n/**\n * Human label for a category slug. Single source of truth — HeroSection,\n * PortfolioCard, and app-side filter chips all render categories through\n * this. Underscores become spaces; hyphens are PRESERVED so compound slugs\n * keep their canonical form (\"e-commerce\" → \"E-Commerce\", never \"E Commerce\"),\n * and every word start (including after a hyphen) is capitalized.\n */\nexport function formatCategoryLabel(slug: string | undefined | null): string {\n if (!slug) return '';\n return slug.replace(/_/g, ' ').replace(/\\b\\w/g, (c: string) => c.toUpperCase());\n}\n\n/**\n * Normalize a service tag's casing for display: the first character of each\n * word is uppercased, the rest left alone (so \"Next.js development\" becomes\n * \"Next.js Development\" and \"Technical SEO implementation\" keeps \"SEO\").\n * Fixes per-item casing drift in stored tags without touching the data.\n */\nexport function formatServiceTag(tag: string | undefined | null): string {\n if (!tag) return '';\n return tag.replace(/(^|[\\s/])([a-z])/g, (_m, sep: string, ch: string) => sep + ch.toUpperCase());\n}\n","'use client';\n\n/**\n * Error boundary UI for portfolio routes — pairs with the PortfolioApiError\n * contract (infrastructure failures throw; Next renders the route's\n * error.tsx). Drop into `error.tsx`:\n *\n * ```tsx\n * 'use client';\n * export { PortfolioErrorFallback as default } from '@sonordev/agency-site-kit/portfolio/client';\n * ```\n */\n\nimport React from 'react';\n\nexport interface PortfolioErrorFallbackProps {\n error: Error & { digest?: string };\n reset: () => void;\n}\n\nexport default function PortfolioErrorFallback({ error, reset }: PortfolioErrorFallbackProps) {\n return (\n <section className=\"w-full py-24\">\n <div\n className=\"max-w-xl mx-auto px-8 py-12 rounded-2xl text-center flex flex-col items-center gap-4\"\n style={{\n background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n }}\n >\n <h2\n className=\"text-xl font-semibold\"\n style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n >\n Our work is taking a moment to load\n </h2>\n <p className=\"text-sm\" style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}>\n The portfolio couldn't be fetched just now. It's us, not you. Try again in a\n few seconds.\n </p>\n {error?.digest && (\n <p className=\"text-xs\" style={{ color: 'var(--sk-text-tertiary, #71717a)' }}>\n Reference: {error.digest}\n </p>\n )}\n <button\n onClick={reset}\n className=\"mt-2 px-6 py-2.5 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90\"\n style={{ background: 'var(--sk-primary, #6366f1)', color: '#ffffff' }}\n >\n Try again\n </button>\n </div>\n </section>\n );\n}\n","'use client';\n\n/**\n * PortfolioLeadCTA — turn a case study into a lead source.\n *\n * Renders a Sonor managed form (site-kit ManagedForm — never hand-rolled\n * markup) inside a CTA shell. Attribution comes free on two rails:\n *\n * 1. The submission's metadata.pageUrl (sent automatically by site-kit)\n * lands in the CRM's page_url/source_url columns — that IS the case\n * study URL.\n * 2. onSuccess fires a `portfolio_lead` conversion with the case-study\n * slug via the standalone dispatch, so Signal/analytics can report\n * \"leads per case study\" without parsing URLs.\n *\n * If the managed form defines a hidden `portfolio_slug` field, define it in\n * the dashboard and it will arrive pre-filled too (fields JSONB).\n */\n\nimport React from 'react';\nimport { ManagedForm } from '@sonordev/site-kit/forms';\nimport { trackConversion } from '@sonordev/site-kit/client';\n\nexport interface PortfolioLeadCTAProps {\n /** Managed form key from the Sonor dashboard (e.g. \"portfolio-inquiry\"). */\n formId: string;\n /** The case study this CTA sits on — used for lead attribution. */\n item: { slug: string; title: string };\n heading?: string;\n description?: string;\n className?: string;\n}\n\nexport default function PortfolioLeadCTA({\n formId,\n item,\n heading = 'Want results like these?',\n description = \"Tell us about your project and we'll show you what's possible.\",\n className = '',\n}: PortfolioLeadCTAProps) {\n return (\n <section\n className={`w-full py-20 md:py-28 ${className}`}\n style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n data-portfolio-section=\"portfolioLeadForm\"\n >\n <div className=\"max-w-2xl mx-auto px-6\">\n <div\n className=\"rounded-2xl p-8 md:p-12\"\n style={{\n background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n backdropFilter: 'blur(16px)',\n border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n }}\n >\n <h2\n className=\"text-2xl md:text-3xl font-bold mb-3\"\n style={{\n color: 'var(--sk-text-primary, #ffffff)',\n fontFamily: 'var(--sk-font-heading, inherit)',\n }}\n >\n {heading}\n </h2>\n <p\n className=\"text-base mb-8\"\n style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n >\n {description}\n </p>\n\n <ManagedForm\n formId={formId}\n onSuccess={() => {\n trackConversion({\n type: 'portfolio_lead',\n metadata: { case_study: item.slug, case_study_title: item.title },\n });\n }}\n />\n </div>\n </div>\n </section>\n );\n}\n","'use client';\n\n/**\n * PortfolioAnalytics — childless engagement-tracking island.\n *\n * Mounted by PortfolioPage as a SIBLING of the content (never a wrapper —\n * house perf doctrine), deferred to idle so it stays out of the hydration\n * path. Observes the server-rendered `data-portfolio-section` markers and\n * emits events through site-kit's standalone dispatch (which queues until\n * the site's AnalyticsProvider mounts and no-ops if it never does):\n *\n * portfolio_section_view once per section type per page view\n * portfolio_live_site_click clicks on [data-portfolio-action=\"live-site\"]\n * portfolio_cta_click clicks on [data-portfolio-action=\"cta\"]\n *\n * This is the raw material for \"your QCR case study converts best\" insights.\n */\n\nimport { useEffect } from 'react';\nimport { trackEvent } from '@sonordev/site-kit/client';\n\nexport default function PortfolioAnalytics({ slug }: { slug: string }) {\n useEffect(() => {\n let cleanup = () => {};\n\n const setup = () => {\n const seen = new Set<string>();\n const io = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n if (!entry.isIntersecting) continue;\n const type = (entry.target as HTMLElement).dataset.portfolioSection;\n if (!type || seen.has(type)) continue;\n seen.add(type);\n trackEvent({\n name: 'portfolio_section_view',\n category: 'portfolio',\n label: type,\n properties: { case_study: slug, section: type },\n });\n }\n },\n { threshold: 0.4 },\n );\n document\n .querySelectorAll<HTMLElement>('[data-portfolio-section]')\n .forEach((el) => io.observe(el));\n\n const onClick = (event: MouseEvent) => {\n const link = (event.target as HTMLElement).closest<HTMLAnchorElement>(\n 'a[data-portfolio-action]',\n );\n if (!link) return;\n const action = link.dataset.portfolioAction;\n trackEvent({\n name: action === 'live-site' ? 'portfolio_live_site_click' : 'portfolio_cta_click',\n category: 'portfolio',\n label: slug,\n properties: { case_study: slug, href: link.href },\n });\n };\n document.addEventListener('click', onClick, { passive: true });\n\n cleanup = () => {\n io.disconnect();\n document.removeEventListener('click', onClick);\n };\n };\n\n // Idle-defer: engagement tracking must never compete with hydration.\n let idleId: number | ReturnType<typeof setTimeout>;\n if ('requestIdleCallback' in window) {\n idleId = window.requestIdleCallback(setup, { timeout: 3000 });\n } else {\n idleId = setTimeout(setup, 1500);\n }\n\n return () => {\n if ('requestIdleCallback' in window) window.cancelIdleCallback(idleId as number);\n else clearTimeout(idleId as ReturnType<typeof setTimeout>);\n cleanup();\n };\n }, [slug]);\n\n return null;\n}\n"],"mappings":"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","names":["Link","GlassCard","Image","import_jsx_runtime","ScrollReveal","import_jsx_runtime","import_jsx_runtime","import_client"]}
|
|
@@ -21,4 +21,23 @@ interface PortfolioCardProps {
|
|
|
21
21
|
}
|
|
22
22
|
declare function PortfolioCard({ item, className, basePath }: PortfolioCardProps): React.JSX.Element;
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
/**
|
|
25
|
+
* Presentation formatters shared by portfolio components and consuming apps.
|
|
26
|
+
*/
|
|
27
|
+
/**
|
|
28
|
+
* Human label for a category slug. Single source of truth — HeroSection,
|
|
29
|
+
* PortfolioCard, and app-side filter chips all render categories through
|
|
30
|
+
* this. Underscores become spaces; hyphens are PRESERVED so compound slugs
|
|
31
|
+
* keep their canonical form ("e-commerce" → "E-Commerce", never "E Commerce"),
|
|
32
|
+
* and every word start (including after a hyphen) is capitalized.
|
|
33
|
+
*/
|
|
34
|
+
declare function formatCategoryLabel(slug: string | undefined | null): string;
|
|
35
|
+
/**
|
|
36
|
+
* Normalize a service tag's casing for display: the first character of each
|
|
37
|
+
* word is uppercased, the rest left alone (so "Next.js development" becomes
|
|
38
|
+
* "Next.js Development" and "Technical SEO implementation" keeps "SEO").
|
|
39
|
+
* Fixes per-item casing drift in stored tags without touching the data.
|
|
40
|
+
*/
|
|
41
|
+
declare function formatServiceTag(tag: string | undefined | null): string;
|
|
42
|
+
|
|
43
|
+
export { PortfolioCard, PortfolioGrid, PortfolioItem, formatCategoryLabel, formatServiceTag };
|
|
@@ -21,4 +21,23 @@ interface PortfolioCardProps {
|
|
|
21
21
|
}
|
|
22
22
|
declare function PortfolioCard({ item, className, basePath }: PortfolioCardProps): React.JSX.Element;
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
/**
|
|
25
|
+
* Presentation formatters shared by portfolio components and consuming apps.
|
|
26
|
+
*/
|
|
27
|
+
/**
|
|
28
|
+
* Human label for a category slug. Single source of truth — HeroSection,
|
|
29
|
+
* PortfolioCard, and app-side filter chips all render categories through
|
|
30
|
+
* this. Underscores become spaces; hyphens are PRESERVED so compound slugs
|
|
31
|
+
* keep their canonical form ("e-commerce" → "E-Commerce", never "E Commerce"),
|
|
32
|
+
* and every word start (including after a hyphen) is capitalized.
|
|
33
|
+
*/
|
|
34
|
+
declare function formatCategoryLabel(slug: string | undefined | null): string;
|
|
35
|
+
/**
|
|
36
|
+
* Normalize a service tag's casing for display: the first character of each
|
|
37
|
+
* word is uppercased, the rest left alone (so "Next.js development" becomes
|
|
38
|
+
* "Next.js Development" and "Technical SEO implementation" keeps "SEO").
|
|
39
|
+
* Fixes per-item casing drift in stored tags without touching the data.
|
|
40
|
+
*/
|
|
41
|
+
declare function formatServiceTag(tag: string | undefined | null): string;
|
|
42
|
+
|
|
43
|
+
export { PortfolioCard, PortfolioGrid, PortfolioItem, formatCategoryLabel, formatServiceTag };
|
package/dist/portfolio/client.js
CHANGED
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
} from "../chunk-ZINKVJQU.js";
|
|
6
6
|
import {
|
|
7
7
|
PortfolioErrorFallback
|
|
8
|
-
} from "../chunk-
|
|
8
|
+
} from "../chunk-K2BGTDSN.js";
|
|
9
9
|
import {
|
|
10
10
|
PortfolioLeadCTA
|
|
11
11
|
} from "../chunk-CVT7I5BQ.js";
|
|
@@ -17,12 +17,27 @@ import ScrollReveal from "@sonordev/agency-site-kit/portfolio/primitives/ScrollR
|
|
|
17
17
|
import Image from "next/image";
|
|
18
18
|
import Link from "next/link";
|
|
19
19
|
import GlassCard from "@sonordev/agency-site-kit/portfolio/primitives/GlassCard";
|
|
20
|
+
|
|
21
|
+
// src/portfolio/curate-proof.ts
|
|
22
|
+
import { curateHeroKpis, isLighthouseKpi } from "@sonordev/site-kit/portfolio/contract";
|
|
23
|
+
|
|
24
|
+
// src/portfolio/format.ts
|
|
25
|
+
function formatCategoryLabel(slug) {
|
|
26
|
+
if (!slug) return "";
|
|
27
|
+
return slug.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
|
|
28
|
+
}
|
|
29
|
+
function formatServiceTag(tag) {
|
|
30
|
+
if (!tag) return "";
|
|
31
|
+
return tag.replace(/(^|[\s/])([a-z])/g, (_m, sep, ch) => sep + ch.toUpperCase());
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// src/portfolio/components/PortfolioCard.tsx
|
|
20
35
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
21
36
|
function PortfolioCard({ item, className = "", basePath = "/work" }) {
|
|
22
37
|
const thumbnailSrc = item.hero_screenshots?.desktop || item.hero_image || (item.project_id ? `/portfolio-previews/${item.slug}.png` : void 0);
|
|
23
38
|
const kpis = Array.isArray(item.kpis) ? item.kpis : [];
|
|
24
39
|
const services = Array.isArray(item.services) ? item.services : [];
|
|
25
|
-
const kpiPreview = kpis.slice(0, 3);
|
|
40
|
+
const kpiPreview = curateHeroKpis(kpis).slice(0, 3);
|
|
26
41
|
const servicePreview = services.slice(0, 3);
|
|
27
42
|
return /* @__PURE__ */ jsx(Link, { href: `${basePath}/${item.slug}`, className: `block group ${className}`, children: /* @__PURE__ */ jsx(GlassCard, { padding: "sm", hover: true, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
|
|
28
43
|
thumbnailSrc && /* @__PURE__ */ jsxs(
|
|
@@ -50,7 +65,7 @@ function PortfolioCard({ item, className = "", basePath = "/work" }) {
|
|
|
50
65
|
color: "#ffffff",
|
|
51
66
|
backdropFilter: "blur(8px)"
|
|
52
67
|
},
|
|
53
|
-
children: item.category
|
|
68
|
+
children: formatCategoryLabel(item.category)
|
|
54
69
|
}
|
|
55
70
|
)
|
|
56
71
|
]
|
|
@@ -105,7 +120,7 @@ function PortfolioCard({ item, className = "", basePath = "/work" }) {
|
|
|
105
120
|
color: "var(--sk-text-secondary, #a1a1aa)",
|
|
106
121
|
border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
|
|
107
122
|
},
|
|
108
|
-
children: service
|
|
123
|
+
children: formatServiceTag(service)
|
|
109
124
|
},
|
|
110
125
|
service
|
|
111
126
|
)),
|
|
@@ -147,6 +162,8 @@ export {
|
|
|
147
162
|
PortfolioCard,
|
|
148
163
|
PortfolioErrorFallback,
|
|
149
164
|
PortfolioGrid,
|
|
150
|
-
PortfolioLeadCTA
|
|
165
|
+
PortfolioLeadCTA,
|
|
166
|
+
formatCategoryLabel,
|
|
167
|
+
formatServiceTag
|
|
151
168
|
};
|
|
152
169
|
//# sourceMappingURL=client.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/portfolio/components/PortfolioGrid.tsx","../../src/portfolio/components/PortfolioCard.tsx"],"sourcesContent":["// Shared component — no directive on purpose: hook-free, so it renders\n// server-side (zero JS) from PortfolioIndex and stays usable from client\n// code via the /portfolio/client barrel.\nimport React from 'react';\nimport type { PortfolioItem } from '../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport PortfolioCard from './PortfolioCard';\n\ninterface PortfolioGridProps {\n items: PortfolioItem[];\n className?: string;\n /** Base path for portfolio detail links (default: '/work') */\n basePath?: string;\n}\n\nexport default function PortfolioGrid({ items, className = '', basePath = '/work' }: PortfolioGridProps) {\n return (\n <ScrollReveal stagger={0.1}>\n <div\n className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 ${className}`}\n style={{\n gap: 'var(--sk-grid-gap, 24px)',\n }}\n >\n {items.map((item) => (\n <PortfolioCard key={item.id} item={item} basePath={basePath} />\n ))}\n </div>\n </ScrollReveal>\n );\n}\n","// Shared component — no directive on purpose: hook-free, so it renders\n// server-side (zero JS) from PortfolioIndex and stays usable from client\n// code via the /portfolio/client barrel.\nimport React from 'react';\nimport Image from 'next/image';\nimport Link from 'next/link';\nimport type { PortfolioItem } from '../../types';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface PortfolioCardProps {\n item: PortfolioItem;\n className?: string;\n /** Base path for portfolio detail links (default: '/work') */\n basePath?: string;\n}\n\nexport default function PortfolioCard({ item, className = '', basePath = '/work' }: PortfolioCardProps) {\n // Use hero_screenshots desktop → hero_image → trifolio screenshot convention\n const thumbnailSrc =\n item.hero_screenshots?.desktop ||\n item.hero_image ||\n (item.project_id ? `/portfolio-previews/${item.slug}.png` : undefined);\n const kpis = Array.isArray(item.kpis) ? item.kpis : [];\n const services = Array.isArray(item.services) ? item.services : [];\n const kpiPreview = kpis.slice(0, 3);\n const servicePreview = services.slice(0, 3);\n\n return (\n <Link href={`${basePath}/${item.slug}`} className={`block group ${className}`}>\n <GlassCard padding=\"sm\" hover>\n <div className=\"flex flex-col gap-4\">\n {/* Thumbnail */}\n {thumbnailSrc && (\n <div\n className=\"relative w-full overflow-hidden rounded-xl\"\n style={{ aspectRatio: '16/10' }}\n >\n <Image\n src={thumbnailSrc}\n alt={item.hero_image_alt || item.title}\n fill\n sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n className=\"object-cover object-top transition-transform duration-500 group-hover:scale-105\"\n />\n {/* Category badge */}\n <span\n className=\"absolute top-3 left-3 px-3 py-1 rounded-full text-[11px] uppercase tracking-wider font-semibold\"\n style={{\n background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 80%, transparent)',\n color: '#ffffff',\n backdropFilter: 'blur(8px)',\n }}\n >\n {item.category?.replace(/[-_]/g, ' ').replace(/\\b\\w/g, (c: string) => c.toUpperCase())}\n </span>\n </div>\n )}\n\n {/* Text content */}\n <div className=\"flex flex-col gap-2 px-2 pb-2\">\n <h3\n className=\"text-lg font-semibold line-clamp-1\"\n style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n >\n {item.title}\n </h3>\n\n {item.subtitle && (\n <p\n className=\"text-sm line-clamp-2\"\n style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n >\n {item.subtitle}\n </p>\n )}\n\n {/* KPI preview */}\n {kpiPreview.length > 0 && (\n <div className=\"flex items-center gap-4 mt-1\">\n {kpiPreview.map((kpi, i) => (\n <div key={i} className=\"flex flex-col\">\n <span\n className=\"text-base font-bold\"\n style={{ color: 'var(--sk-primary, #6366f1)' }}\n >\n {kpi.prefix || ''}\n {kpi.value.toLocaleString()}\n {kpi.suffix}\n </span>\n <span\n className=\"text-[10px] uppercase tracking-wider font-medium\"\n style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n >\n {kpi.label}\n </span>\n </div>\n ))}\n </div>\n )}\n\n {/* Services tags */}\n {servicePreview.length > 0 && (\n <div className=\"flex flex-wrap gap-1.5 mt-2\">\n {servicePreview.map((service) => (\n <span\n key={service}\n className=\"px-2.5 py-0.5 rounded-full text-[11px] 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 {services.length > 3 && (\n <span\n className=\"px-2.5 py-0.5 rounded-full text-[11px] font-medium\"\n style={{\n background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n color: 'var(--sk-text-tertiary, #71717a)',\n }}\n >\n +{item.services.length - 3}\n </span>\n )}\n </div>\n )}\n </div>\n </div>\n </GlassCard>\n </Link>\n );\n}\n"],"mappings":"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","names":["jsx"]}
|
|
1
|
+
{"version":3,"sources":["../../src/portfolio/components/PortfolioGrid.tsx","../../src/portfolio/components/PortfolioCard.tsx","../../src/portfolio/curate-proof.ts","../../src/portfolio/format.ts"],"sourcesContent":["// Shared component — no directive on purpose: hook-free, so it renders\n// server-side (zero JS) from PortfolioIndex and stays usable from client\n// code via the /portfolio/client barrel.\nimport React from 'react';\nimport type { PortfolioItem } from '../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport PortfolioCard from './PortfolioCard';\n\ninterface PortfolioGridProps {\n items: PortfolioItem[];\n className?: string;\n /** Base path for portfolio detail links (default: '/work') */\n basePath?: string;\n}\n\nexport default function PortfolioGrid({ items, className = '', basePath = '/work' }: PortfolioGridProps) {\n return (\n <ScrollReveal stagger={0.1}>\n <div\n className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 ${className}`}\n style={{\n gap: 'var(--sk-grid-gap, 24px)',\n }}\n >\n {items.map((item) => (\n <PortfolioCard key={item.id} item={item} basePath={basePath} />\n ))}\n </div>\n </ScrollReveal>\n );\n}\n","// Shared component — no directive on purpose: hook-free, so it renders\n// server-side (zero JS) from PortfolioIndex and stays usable from client\n// code via the /portfolio/client barrel.\nimport React from 'react';\nimport Image from 'next/image';\nimport Link from 'next/link';\nimport type { PortfolioItem } from '../../types';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\nimport { curateHeroKpis } from '../curate-proof';\nimport { formatCategoryLabel, formatServiceTag } from '../format';\n\ninterface PortfolioCardProps {\n item: PortfolioItem;\n className?: string;\n /** Base path for portfolio detail links (default: '/work') */\n basePath?: string;\n}\n\nexport default function PortfolioCard({ item, className = '', basePath = '/work' }: PortfolioCardProps) {\n // Use hero_screenshots desktop → hero_image → trifolio screenshot convention\n const thumbnailSrc =\n item.hero_screenshots?.desktop ||\n item.hero_image ||\n (item.project_id ? `/portfolio-previews/${item.slug}.png` : undefined);\n const kpis = Array.isArray(item.kpis) ? item.kpis : [];\n const services = Array.isArray(item.services) ? item.services : [];\n // Collapse per-category Lighthouse KPIs so a card never reads\n // \"100/100 · 100/100 · 100/100\" — business outcomes lead the preview.\n const kpiPreview = curateHeroKpis(kpis).slice(0, 3);\n const servicePreview = services.slice(0, 3);\n\n return (\n <Link href={`${basePath}/${item.slug}`} className={`block group ${className}`}>\n <GlassCard padding=\"sm\" hover>\n <div className=\"flex flex-col gap-4\">\n {/* Thumbnail */}\n {thumbnailSrc && (\n <div\n className=\"relative w-full overflow-hidden rounded-xl\"\n style={{ aspectRatio: '16/10' }}\n >\n <Image\n src={thumbnailSrc}\n alt={item.hero_image_alt || item.title}\n fill\n sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n className=\"object-cover object-top transition-transform duration-500 group-hover:scale-105\"\n />\n {/* Category badge */}\n <span\n className=\"absolute top-3 left-3 px-3 py-1 rounded-full text-[11px] uppercase tracking-wider font-semibold\"\n style={{\n background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 80%, transparent)',\n color: '#ffffff',\n backdropFilter: 'blur(8px)',\n }}\n >\n {formatCategoryLabel(item.category)}\n </span>\n </div>\n )}\n\n {/* Text content */}\n <div className=\"flex flex-col gap-2 px-2 pb-2\">\n <h3\n className=\"text-lg font-semibold line-clamp-1\"\n style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n >\n {item.title}\n </h3>\n\n {item.subtitle && (\n <p\n className=\"text-sm line-clamp-2\"\n style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n >\n {item.subtitle}\n </p>\n )}\n\n {/* KPI preview */}\n {kpiPreview.length > 0 && (\n <div className=\"flex items-center gap-4 mt-1\">\n {kpiPreview.map((kpi, i) => (\n <div key={i} className=\"flex flex-col\">\n <span\n className=\"text-base font-bold\"\n style={{ color: 'var(--sk-primary, #6366f1)' }}\n >\n {kpi.prefix || ''}\n {kpi.value.toLocaleString()}\n {kpi.suffix}\n </span>\n <span\n className=\"text-[10px] uppercase tracking-wider font-medium\"\n style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n >\n {kpi.label}\n </span>\n </div>\n ))}\n </div>\n )}\n\n {/* Services tags */}\n {servicePreview.length > 0 && (\n <div className=\"flex flex-wrap gap-1.5 mt-2\">\n {servicePreview.map((service) => (\n <span\n key={service}\n className=\"px-2.5 py-0.5 rounded-full text-[11px] 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 {services.length > 3 && (\n <span\n className=\"px-2.5 py-0.5 rounded-full text-[11px] font-medium\"\n style={{\n background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n color: 'var(--sk-text-tertiary, #71717a)',\n }}\n >\n +{item.services.length - 3}\n </span>\n )}\n </div>\n )}\n </div>\n </div>\n </GlassCard>\n </Link>\n );\n}\n","/**\n * curate-proof — single source of truth for which proof points a public case\n * study is allowed to display, and in what shape.\n *\n * Two classes of problem this guards against (both shipped to production on\n * upforge.io before this existed):\n *\n * 1. Repetition: generated items arrive with four \"100/100 Lighthouse X\"\n * KPIs in the hero, the same four restated as Results cards, AND a full\n * Performance section with score gauges. One differentiator repeated\n * twelve times per page stops differentiating. The Performance section is\n * the one home for the Lighthouse breakdown; hero/results/cards collapse\n * to at most one summary tile.\n *\n * 2. Self-harming live metrics: MetricsDelta rows are computed from raw\n * analytics baselines with no editorial judgment — a bounce rate of\n * \"100 → 99.69\" rendered as a green win. Marketing surfaces only show a\n * delta when it's a genuinely flattering, meaningful story.\n *\n * Used by PortfolioPage (hero KPIs + results items), PortfolioCard (KPI\n * preview), and MetricsProvenance (delta gate). Change display policy here,\n * nowhere else.\n */\n\nimport type {\n MetricsDelta,\n PortfolioHeroData,\n PortfolioItemFull,\n PortfolioResultItem,\n PortfolioResultsData,\n} from '../types';\n// The Lighthouse-KPI collapse policy is the shared cross-repo contract\n// (@sonordev/site-kit/portfolio/contract) — the same source signal-api mirrors\n// for content-time collapse. Imported (not re-implemented) so the display side\n// and the content side can never drift; re-exported so this module stays the\n// portfolio's single display-policy entry point.\nimport { curateHeroKpis, isLighthouseKpi } from '@sonordev/site-kit/portfolio/contract';\n\nexport { curateHeroKpis, isLighthouseKpi };\n\nconst LIGHTHOUSE_RE = /lighthouse/i;\n\n/**\n * True when a Results card merely restates a Lighthouse category score\n * (e.g. \"Perfect performance score … measured Lighthouse score of 100/100\").\n * Business outcomes (\"Complete 14-page rebuild\", \"682% session growth\")\n * never match: the title must be about a score AND the card must reference\n * Lighthouse or carry a x/100 metric.\n */\nexport function isLighthouseRestatement(item: PortfolioResultItem): boolean {\n if (!/score/i.test(item.title)) return false;\n if (LIGHTHOUSE_RE.test(`${item.title} ${item.description}`)) return true;\n return item.metric?.suffix === '/100';\n}\n\n/**\n * Drop Results cards that restate Lighthouse scores when the case study also\n * renders a Performance section (the score breakdown's single home).\n */\nexport function curateResultItems(\n items: PortfolioResultItem[],\n hasPerformanceSection: boolean,\n): PortfolioResultItem[] {\n if (!hasPerformanceSection) return items;\n const curated = items.filter((item) => !isLighthouseRestatement(item));\n // Never curate a Results section into emptiness — if every card was a\n // Lighthouse restatement, keep the strongest single card instead.\n return curated.length > 0 ? curated : items.slice(0, 1);\n}\n\n/**\n * Editorial gate for live metric deltas (\"Verified from live analytics\").\n * `direction` comes from the platform with 'up' meaning IMPROVED (lower-is-\n * better metrics are inverted server-side). A public case study only shows a\n * delta when it's a win worth telling:\n * - improved ('up'), never a regression or flat noise\n * - moved by a double-digit relative margin (small drift isn't a story)\n * - bounce-rate-style metrics must also be respectable in absolute terms —\n * \"100 → 99.69\" is technically an improvement and still self-harm\n */\nexport function gateMetricsDeltas(deltas: MetricsDelta[] | undefined | null): MetricsDelta[] {\n if (!deltas?.length) return [];\n return deltas.filter((d) => {\n if (d.direction !== 'up') return false;\n if (Math.abs(d.deltaPercent) < 10) return false;\n if (/bounce/i.test(d.metric) && d.current > 70) return false;\n return true;\n });\n}\n\n/**\n * Apply the full display policy to a portfolio item before rendering.\n * Pure — returns a new item; the fetched payload is never mutated.\n */\nexport function curatePortfolioProof(item: PortfolioItemFull): PortfolioItemFull {\n const hasPerformanceSection = item.sections.some(\n (s) => s.sectionType === 'portfolioPerformance',\n );\n\n return {\n ...item,\n sections: item.sections.map((section) => {\n if (section.sectionType === 'portfolioHero') {\n const data = section.data as PortfolioHeroData;\n return { ...section, data: { ...data, kpis: curateHeroKpis(data.kpis ?? []) } };\n }\n if (section.sectionType === 'portfolioResults') {\n const data = section.data as PortfolioResultsData;\n return {\n ...section,\n data: { ...data, items: curateResultItems(data.items ?? [], hasPerformanceSection) },\n };\n }\n return section;\n }),\n };\n}\n","/**\n * Presentation formatters shared by portfolio components and consuming apps.\n */\n\n/**\n * Human label for a category slug. Single source of truth — HeroSection,\n * PortfolioCard, and app-side filter chips all render categories through\n * this. Underscores become spaces; hyphens are PRESERVED so compound slugs\n * keep their canonical form (\"e-commerce\" → \"E-Commerce\", never \"E Commerce\"),\n * and every word start (including after a hyphen) is capitalized.\n */\nexport function formatCategoryLabel(slug: string | undefined | null): string {\n if (!slug) return '';\n return slug.replace(/_/g, ' ').replace(/\\b\\w/g, (c: string) => c.toUpperCase());\n}\n\n/**\n * Normalize a service tag's casing for display: the first character of each\n * word is uppercased, the rest left alone (so \"Next.js development\" becomes\n * \"Next.js Development\" and \"Technical SEO implementation\" keeps \"SEO\").\n * Fixes per-item casing drift in stored tags without touching the data.\n */\nexport function formatServiceTag(tag: string | undefined | null): string {\n if (!tag) return '';\n return tag.replace(/(^|[\\s/])([a-z])/g, (_m, sep: string, ch: string) => sep + ch.toUpperCase());\n}\n"],"mappings":"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","names":["jsx"]}
|
|
@@ -44,7 +44,7 @@ function PortfolioErrorFallback({ error, reset }) {
|
|
|
44
44
|
children: "Our work is taking a moment to load"
|
|
45
45
|
}
|
|
46
46
|
),
|
|
47
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm", style: { color: "var(--sk-text-secondary, #a1a1aa)" }, children: "The portfolio couldn't be fetched just now. It's us, not you
|
|
47
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm", style: { color: "var(--sk-text-secondary, #a1a1aa)" }, children: "The portfolio couldn't be fetched just now. It's us, not you. Try again in a few seconds." }),
|
|
48
48
|
error?.digest && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-xs", style: { color: "var(--sk-text-tertiary, #71717a)" }, children: [
|
|
49
49
|
"Reference: ",
|
|
50
50
|
error.digest
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/portfolio/components/PortfolioErrorFallback.tsx"],"sourcesContent":["'use client';\n\n/**\n * Error boundary UI for portfolio routes — pairs with the PortfolioApiError\n * contract (infrastructure failures throw; Next renders the route's\n * error.tsx). Drop into `error.tsx`:\n *\n * ```tsx\n * 'use client';\n * export { PortfolioErrorFallback as default } from '@sonordev/agency-site-kit/portfolio/client';\n * ```\n */\n\nimport React from 'react';\n\nexport interface PortfolioErrorFallbackProps {\n error: Error & { digest?: string };\n reset: () => void;\n}\n\nexport default function PortfolioErrorFallback({ error, reset }: PortfolioErrorFallbackProps) {\n return (\n <section className=\"w-full py-24\">\n <div\n className=\"max-w-xl mx-auto px-8 py-12 rounded-2xl text-center flex flex-col items-center gap-4\"\n style={{\n background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n }}\n >\n <h2\n className=\"text-xl font-semibold\"\n style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n >\n Our work is taking a moment to load\n </h2>\n <p className=\"text-sm\" style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}>\n The portfolio couldn't be fetched just now. It's us, not you
|
|
1
|
+
{"version":3,"sources":["../../../src/portfolio/components/PortfolioErrorFallback.tsx"],"sourcesContent":["'use client';\n\n/**\n * Error boundary UI for portfolio routes — pairs with the PortfolioApiError\n * contract (infrastructure failures throw; Next renders the route's\n * error.tsx). Drop into `error.tsx`:\n *\n * ```tsx\n * 'use client';\n * export { PortfolioErrorFallback as default } from '@sonordev/agency-site-kit/portfolio/client';\n * ```\n */\n\nimport React from 'react';\n\nexport interface PortfolioErrorFallbackProps {\n error: Error & { digest?: string };\n reset: () => void;\n}\n\nexport default function PortfolioErrorFallback({ error, reset }: PortfolioErrorFallbackProps) {\n return (\n <section className=\"w-full py-24\">\n <div\n className=\"max-w-xl mx-auto px-8 py-12 rounded-2xl text-center flex flex-col items-center gap-4\"\n style={{\n background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n }}\n >\n <h2\n className=\"text-xl font-semibold\"\n style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n >\n Our work is taking a moment to load\n </h2>\n <p className=\"text-sm\" style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}>\n The portfolio couldn't be fetched just now. It's us, not you. Try again in a\n few seconds.\n </p>\n {error?.digest && (\n <p className=\"text-xs\" style={{ color: 'var(--sk-text-tertiary, #71717a)' }}>\n Reference: {error.digest}\n </p>\n )}\n <button\n onClick={reset}\n className=\"mt-2 px-6 py-2.5 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90\"\n style={{ background: 'var(--sk-primary, #6366f1)', color: '#ffffff' }}\n >\n Try again\n </button>\n </div>\n </section>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BQ;AAVO,SAAR,uBAAwC,EAAE,OAAO,MAAM,GAAgC;AAC5F,SACE,4CAAC,aAAQ,WAAU,gBACjB;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,kCAAkC;AAAA,YACnD;AAAA;AAAA,QAED;AAAA,QACA,4CAAC,OAAE,WAAU,WAAU,OAAO,EAAE,OAAO,oCAAoC,GAAG,uGAG9E;AAAA,QACC,OAAO,UACN,6CAAC,OAAE,WAAU,WAAU,OAAO,EAAE,OAAO,mCAAmC,GAAG;AAAA;AAAA,UAC/D,MAAM;AAAA,WACpB;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,8BAA8B,OAAO,UAAU;AAAA,YACrE;AAAA;AAAA,QAED;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}
|
package/dist/portfolio/index.cjs
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
require('../chunk-
|
|
3
|
+
var chunk2Y2RJB3A_cjs = require('../chunk-2Y2RJB3A.cjs');
|
|
4
|
+
var chunk6OWFFV6N_cjs = require('../chunk-6OWFFV6N.cjs');
|
|
5
|
+
require('../chunk-A5WCMHAE.cjs');
|
|
6
|
+
var chunkZBPF7TLZ_cjs = require('../chunk-ZBPF7TLZ.cjs');
|
|
7
|
+
var chunkX76U7VLF_cjs = require('../chunk-X76U7VLF.cjs');
|
|
6
8
|
require('../chunk-FCKDJ4MJ.cjs');
|
|
7
9
|
require('../chunk-HQGAX2LI.cjs');
|
|
8
10
|
require('../chunk-XOWSXZYW.cjs');
|
|
@@ -11,31 +13,55 @@ require('../chunk-XOWSXZYW.cjs');
|
|
|
11
13
|
|
|
12
14
|
Object.defineProperty(exports, "PORTFOLIO_SECTION_TYPES", {
|
|
13
15
|
enumerable: true,
|
|
14
|
-
get: function () { return
|
|
16
|
+
get: function () { return chunk2Y2RJB3A_cjs.PORTFOLIO_SECTION_TYPES; }
|
|
15
17
|
});
|
|
16
18
|
Object.defineProperty(exports, "PortfolioIndex", {
|
|
17
19
|
enumerable: true,
|
|
18
|
-
get: function () { return
|
|
20
|
+
get: function () { return chunk2Y2RJB3A_cjs.PortfolioIndex; }
|
|
19
21
|
});
|
|
20
22
|
Object.defineProperty(exports, "PortfolioIndexSkeleton", {
|
|
21
23
|
enumerable: true,
|
|
22
|
-
get: function () { return
|
|
24
|
+
get: function () { return chunk2Y2RJB3A_cjs.PortfolioIndexSkeleton; }
|
|
23
25
|
});
|
|
24
26
|
Object.defineProperty(exports, "PortfolioPage", {
|
|
25
27
|
enumerable: true,
|
|
26
|
-
get: function () { return
|
|
28
|
+
get: function () { return chunk2Y2RJB3A_cjs.PortfolioPage; }
|
|
27
29
|
});
|
|
28
30
|
Object.defineProperty(exports, "PortfolioPageSkeleton", {
|
|
29
31
|
enumerable: true,
|
|
30
|
-
get: function () { return
|
|
32
|
+
get: function () { return chunk2Y2RJB3A_cjs.PortfolioPageSkeleton; }
|
|
31
33
|
});
|
|
32
34
|
Object.defineProperty(exports, "PortfolioSchema", {
|
|
33
35
|
enumerable: true,
|
|
34
|
-
get: function () { return
|
|
36
|
+
get: function () { return chunk2Y2RJB3A_cjs.PortfolioSchema; }
|
|
35
37
|
});
|
|
36
38
|
Object.defineProperty(exports, "MetricsProvenance", {
|
|
37
39
|
enumerable: true,
|
|
38
|
-
get: function () { return
|
|
40
|
+
get: function () { return chunk6OWFFV6N_cjs.MetricsProvenance; }
|
|
41
|
+
});
|
|
42
|
+
Object.defineProperty(exports, "formatCategoryLabel", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
get: function () { return chunkZBPF7TLZ_cjs.formatCategoryLabel; }
|
|
45
|
+
});
|
|
46
|
+
Object.defineProperty(exports, "formatServiceTag", {
|
|
47
|
+
enumerable: true,
|
|
48
|
+
get: function () { return chunkZBPF7TLZ_cjs.formatServiceTag; }
|
|
49
|
+
});
|
|
50
|
+
Object.defineProperty(exports, "curateHeroKpis", {
|
|
51
|
+
enumerable: true,
|
|
52
|
+
get: function () { return chunkX76U7VLF_cjs.curateHeroKpis; }
|
|
53
|
+
});
|
|
54
|
+
Object.defineProperty(exports, "curatePortfolioProof", {
|
|
55
|
+
enumerable: true,
|
|
56
|
+
get: function () { return chunkX76U7VLF_cjs.curatePortfolioProof; }
|
|
57
|
+
});
|
|
58
|
+
Object.defineProperty(exports, "curateResultItems", {
|
|
59
|
+
enumerable: true,
|
|
60
|
+
get: function () { return chunkX76U7VLF_cjs.curateResultItems; }
|
|
61
|
+
});
|
|
62
|
+
Object.defineProperty(exports, "gateMetricsDeltas", {
|
|
63
|
+
enumerable: true,
|
|
64
|
+
get: function () { return chunkX76U7VLF_cjs.gateMetricsDeltas; }
|
|
39
65
|
});
|
|
40
66
|
//# sourceMappingURL=index.cjs.map
|
|
41
67
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { P as PortfolioItemFull, M as MetricsDelta } from '../types-
|
|
3
|
-
export {
|
|
2
|
+
import { P as PortfolioItemFull, M as MetricsDelta } from '../types-He5A9okM.cjs';
|
|
3
|
+
export { k as MetricSource, l as MetricsSnapshot, m as PORTFOLIO_SECTION_TYPES, o as PortfolioBeforeAfterData, p as PortfolioCTAData, c as PortfolioChallengesData, s as PortfolioConversionFunnelData, d as PortfolioDetailsData, t as PortfolioFeatureSpotlightData, v as PortfolioGalleryData, e as PortfolioHeroData, x as PortfolioItem, y as PortfolioKPI, b as PortfolioListResponse, A as PortfolioMetricsTimelineData, f as PortfolioResultsData, a as PortfolioSection, C as PortfolioSectionData, D as PortfolioSectionDataMap, E as PortfolioSectionType, F as PortfolioSeoData, g as PortfolioServicesData, H as PortfolioStrategyData, J as PortfolioTeamData, h as PortfolioTechStackData, i as PortfolioTestimonialData, N as PortfolioVideoData } from '../types-He5A9okM.cjs';
|
|
4
|
+
export { c as curatePortfolioProof, a as curateResultItems, f as formatCategoryLabel, b as formatServiceTag, g as gateMetricsDeltas } from '../format-C-axf13G.cjs';
|
|
4
5
|
export * from '@sonordev/agency-site-kit/portfolio/client';
|
|
6
|
+
export { curateHeroKpis } from '@sonordev/site-kit/portfolio/contract';
|
|
5
7
|
|
|
6
8
|
/**
|
|
7
9
|
* PortfolioPage — Server component that renders a full portfolio case study.
|
|
@@ -29,7 +31,7 @@ export * from '@sonordev/agency-site-kit/portfolio/client';
|
|
|
29
31
|
interface PortfolioPageProps {
|
|
30
32
|
item: PortfolioItemFull;
|
|
31
33
|
}
|
|
32
|
-
declare function PortfolioPage({ item }: PortfolioPageProps): React.JSX.Element;
|
|
34
|
+
declare function PortfolioPage({ item: rawItem }: PortfolioPageProps): React.JSX.Element;
|
|
33
35
|
|
|
34
36
|
/**
|
|
35
37
|
* PortfolioSchema — JSON-LD structured data for a case study page.
|
|
@@ -109,7 +111,13 @@ declare function PortfolioIndex({ basePath, category, page, pageSize, heading, e
|
|
|
109
111
|
*
|
|
110
112
|
* `direction` semantics come from the API: 'up' ALWAYS means "improved"
|
|
111
113
|
* (lower-is-better metrics like Avg Position/LCP are inverted server-side
|
|
112
|
-
* in metrics-baseline.service), so up renders
|
|
114
|
+
* in metrics-baseline.service), so 'up' renders green. The ARROW glyph
|
|
115
|
+
* follows the raw numbers instead — an improved bounce rate shows a green ▼,
|
|
116
|
+
* never a green ▲ next to a value that visibly went down.
|
|
117
|
+
*
|
|
118
|
+
* Deltas pass through gateMetricsDeltas (curate-proof.ts) before display:
|
|
119
|
+
* raw platform deltas carry no editorial judgment, and this strip only
|
|
120
|
+
* exists to flatter — see that module for the policy.
|
|
113
121
|
*/
|
|
114
122
|
|
|
115
123
|
interface MetricsProvenanceProps {
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { P as PortfolioItemFull, M as MetricsDelta } from '../types-
|
|
3
|
-
export {
|
|
2
|
+
import { P as PortfolioItemFull, M as MetricsDelta } from '../types-He5A9okM.js';
|
|
3
|
+
export { k as MetricSource, l as MetricsSnapshot, m as PORTFOLIO_SECTION_TYPES, o as PortfolioBeforeAfterData, p as PortfolioCTAData, c as PortfolioChallengesData, s as PortfolioConversionFunnelData, d as PortfolioDetailsData, t as PortfolioFeatureSpotlightData, v as PortfolioGalleryData, e as PortfolioHeroData, x as PortfolioItem, y as PortfolioKPI, b as PortfolioListResponse, A as PortfolioMetricsTimelineData, f as PortfolioResultsData, a as PortfolioSection, C as PortfolioSectionData, D as PortfolioSectionDataMap, E as PortfolioSectionType, F as PortfolioSeoData, g as PortfolioServicesData, H as PortfolioStrategyData, J as PortfolioTeamData, h as PortfolioTechStackData, i as PortfolioTestimonialData, N as PortfolioVideoData } from '../types-He5A9okM.js';
|
|
4
|
+
export { c as curatePortfolioProof, a as curateResultItems, f as formatCategoryLabel, b as formatServiceTag, g as gateMetricsDeltas } from '../format-poUpLtQ2.js';
|
|
4
5
|
export * from '@sonordev/agency-site-kit/portfolio/client';
|
|
6
|
+
export { curateHeroKpis } from '@sonordev/site-kit/portfolio/contract';
|
|
5
7
|
|
|
6
8
|
/**
|
|
7
9
|
* PortfolioPage — Server component that renders a full portfolio case study.
|
|
@@ -29,7 +31,7 @@ export * from '@sonordev/agency-site-kit/portfolio/client';
|
|
|
29
31
|
interface PortfolioPageProps {
|
|
30
32
|
item: PortfolioItemFull;
|
|
31
33
|
}
|
|
32
|
-
declare function PortfolioPage({ item }: PortfolioPageProps): React.JSX.Element;
|
|
34
|
+
declare function PortfolioPage({ item: rawItem }: PortfolioPageProps): React.JSX.Element;
|
|
33
35
|
|
|
34
36
|
/**
|
|
35
37
|
* PortfolioSchema — JSON-LD structured data for a case study page.
|
|
@@ -109,7 +111,13 @@ declare function PortfolioIndex({ basePath, category, page, pageSize, heading, e
|
|
|
109
111
|
*
|
|
110
112
|
* `direction` semantics come from the API: 'up' ALWAYS means "improved"
|
|
111
113
|
* (lower-is-better metrics like Avg Position/LCP are inverted server-side
|
|
112
|
-
* in metrics-baseline.service), so up renders
|
|
114
|
+
* in metrics-baseline.service), so 'up' renders green. The ARROW glyph
|
|
115
|
+
* follows the raw numbers instead — an improved bounce rate shows a green ▼,
|
|
116
|
+
* never a green ▲ next to a value that visibly went down.
|
|
117
|
+
*
|
|
118
|
+
* Deltas pass through gateMetricsDeltas (curate-proof.ts) before display:
|
|
119
|
+
* raw platform deltas carry no editorial judgment, and this strip only
|
|
120
|
+
* exists to flatter — see that module for the policy.
|
|
113
121
|
*/
|
|
114
122
|
|
|
115
123
|
interface MetricsProvenanceProps {
|
package/dist/portfolio/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
export { PORTFOLIO_SECTION_TYPES, PortfolioIndex, PortfolioIndexSkeleton, PortfolioPage, PortfolioPageSkeleton, PortfolioSchema } from '../chunk-
|
|
2
|
-
export { MetricsProvenance } from '../chunk-
|
|
3
|
-
import '../chunk-
|
|
1
|
+
export { PORTFOLIO_SECTION_TYPES, PortfolioIndex, PortfolioIndexSkeleton, PortfolioPage, PortfolioPageSkeleton, PortfolioSchema } from '../chunk-7FFZX7C5.js';
|
|
2
|
+
export { MetricsProvenance } from '../chunk-X7UCJ45A.js';
|
|
3
|
+
import '../chunk-FT2SNEYP.js';
|
|
4
|
+
export { formatCategoryLabel, formatServiceTag } from '../chunk-7D4H36UF.js';
|
|
5
|
+
export { curateHeroKpis, curatePortfolioProof, curateResultItems, gateMetricsDeltas } from '../chunk-FM25LB67.js';
|
|
4
6
|
import '../chunk-N7TVKUYQ.js';
|
|
5
7
|
import '../chunk-L4EOQVRJ.js';
|
|
6
8
|
import '../chunk-QL6KVIFR.js';
|
|
@@ -55,7 +55,7 @@ function ChallengesSection({ data }) {
|
|
|
55
55
|
{
|
|
56
56
|
className: "text-lg mb-12 max-w-2xl",
|
|
57
57
|
style: { color: "var(--sk-text-secondary, #a1a1aa)" },
|
|
58
|
-
children: "
|
|
58
|
+
children: "What stood in the way, and how we cleared it."
|
|
59
59
|
}
|
|
60
60
|
)
|
|
61
61
|
] }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/portfolio/components/sections/ChallengesSection.tsx"],"names":["jsx","jsxs","ScrollReveal","GlassCard"],"mappings":"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","file":"ChallengesSection.cjs","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 & 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"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/portfolio/components/sections/ChallengesSection.tsx"],"names":["jsx","jsxs","ScrollReveal","GlassCard"],"mappings":";;;;;;;;;;;;AAYA,SAAS,aAAA,CAAc,EAAE,IAAA,EAAK,EAAsB;AAClD,EAAA,IAAI,CAAC,MAAM,OAAO,IAAA;AAElB,EAAA,MAAM,KAAA,GAAyC;AAAA,IAC7C,KAAA,kBACEA,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,IAAA,EAAK,QAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,KAAA,EAAM,8BAChE,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,iCAAA,EAAkC,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,GAAA,EAAI,aAAA,EAAc,OAAA,EAAQ,cAAA,EAAe,OAAA,EAAQ,CAAA,EAC/H,CAAA;AAAA,IAEF,GAAA,kBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,KAAA,EAAM,4BAAA,EAChE,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAAC,QAAA,EAAA,EAAO,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,GAAA,EAAI,CAAA;AAAA,sBACpEA,cAAA,CAAC,UAAK,CAAA,EAAE,mBAAA,EAAoB,QAAO,cAAA,EAAe,WAAA,EAAY,GAAA,EAAI,aAAA,EAAc,OAAA,EAAQ;AAAA,KAAA,EAC1F,CAAA;AAAA,IAEF,MAAA,kBACEA,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,IAAA,EAAK,QAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,KAAA,EAAM,8BAChE,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,yDAAA,EAA0D,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,GAAA,EAAI,aAAA,EAAc,OAAA,EAAQ,cAAA,EAAe,OAAA,EAAQ,CAAA,EACvJ,CAAA;AAAA,IAEF,UAAA,kBACEA,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,IAAA,EAAK,QAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,KAAA,EAAM,8BAChE,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,2BAAA,EAA4B,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,GAAA,EAAI,aAAA,EAAc,OAAA,EAAQ,cAAA,EAAe,OAAA,EAAQ,CAAA,EACzH,CAAA;AAAA,IAEF,MAAA,kBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,KAAA,EAAM,4BAAA,EAChE,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,GAAA,EAAI,CAAA,EAAE,KAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,EAAA,EAAG,GAAA,EAAI,MAAA,EAAO,cAAA,EAAe,aAAY,GAAA,EAAI,CAAA;AAAA,sBACtFA,cAAA,CAAC,UAAK,CAAA,EAAE,YAAA,EAAa,QAAO,cAAA,EAAe,WAAA,EAAY,GAAA,EAAI,aAAA,EAAc,OAAA,EAAQ;AAAA,KAAA,EACnF,CAAA;AAAA,IAEF,OAAA,kBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,KAAA,EAAM,4BAAA,EAChE,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,uDAAA,EAAwD,MAAA,EAAO,cAAA,EAAe,aAAY,GAAA,EAAI,aAAA,EAAc,OAAA,EAAQ,cAAA,EAAe,OAAA,EAAQ,CAAA;AAAA,sBACnJA,cAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kCAAA,EAAmC,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,GAAA,EAAI,aAAA,EAAc,OAAA,EAAQ,cAAA,EAAe,OAAA,EAAQ;AAAA,KAAA,EAChI;AAAA,GAEJ;AAEA,EAAA,uBACEA,cAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,KAAA,EAAO,4BAAA,EAA6B,EAChD,QAAA,EAAA,KAAA,CAAM,IAAI,CAAA,IAAK,KAAA,CAAM,KAAA,EACxB,CAAA;AAEJ;AAEe,SAAR,iBAAA,CAAmC,EAAE,IAAA,EAAK,EAA2B;AAC1E,EAAA,uBACEA,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,uBAAA;AAAA,MACV,KAAA,EAAO,EAAE,UAAA,EAAY,uBAAA,EAAwB;AAAA,MAE7C,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACb,QAAA,EAAA;AAAA,wBAAAA,eAAA,CAACC,6BAAA,EAAA,EAAa,GAAG,EAAA,EACf,QAAA,EAAA;AAAA,0BAAAF,cAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,qCAAA;AAAA,cACV,KAAA,EAAO;AAAA,gBACL,KAAA,EAAO,iCAAA;AAAA,gBACP,UAAA,EAAY;AAAA,eACd;AAAA,cACD,QAAA,EAAA;AAAA;AAAA,WAED;AAAA,0BACAA,cAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,yBAAA;AAAA,cACV,KAAA,EAAO,EAAE,KAAA,EAAO,mCAAA,EAAoC;AAAA,cACrD,QAAA,EAAA;AAAA;AAAA;AAED,SAAA,EACF,CAAA;AAAA,wBAEAA,cAAA,CAAC,SAAI,SAAA,EAAU,qBAAA,EACZ,eAAK,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,KAAU;AAC/B,UAAA,MAAM,MAAA,GAAS,QAAQ,CAAA,KAAM,CAAA;AAC7B,UAAA,uBACEA,cAAA,CAACE,6BAAA,EAAA,EAAyB,CAAA,EAAG,EAAA,EAAI,KAAA,EAAO,KAAA,GAAQ,GAAA,EAC9C,QAAA,kBAAAF,cAAA,CAACG,0BAAA,EAAA,EAAU,OAAA,EAAQ,IAAA,EAAK,KAAA,EAAO,KAAA,EAC7B,QAAA,kBAAAF,eAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,CAAA,gCAAA,EACT,MAAA,GAAS,EAAA,GAAK,qBAChB,CAAA,CAAA;AAAA,cAGA,QAAA,EAAA;AAAA,gCAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4BAAA,EACb,QAAA,EAAA;AAAA,kCAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EAEb,QAAA,EAAA;AAAA,oCAAAD,cAAA;AAAA,sBAAC,MAAA;AAAA,sBAAA;AAAA,wBACC,SAAA,EAAU,oFAAA;AAAA,wBACV,KAAA,EAAO;AAAA,0BACL,UAAA,EAAY,iEAAA;AAAA,0BACZ,KAAA,EAAO,4BAAA;AAAA,0BACP,MAAA,EAAQ;AAAA,yBACV;AAAA,wBAEC,iBAAO,KAAA,GAAQ,CAAC,CAAA,CAAE,QAAA,CAAS,GAAG,GAAG;AAAA;AAAA,qBACpC;AAAA,oCACAA,cAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EAAM,IAAA,CAAK,IAAA,EAAM,CAAA;AAAA,oCAChCA,cAAA;AAAA,sBAAC,IAAA;AAAA,sBAAA;AAAA,wBACC,SAAA,EAAU,uBAAA;AAAA,wBACV,KAAA,EAAO,EAAE,KAAA,EAAO,iCAAA,EAAkC;AAAA,wBAEjD,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,mBAAA,EACF,CAAA;AAAA,kCACAA,cAAA;AAAA,oBAAC,GAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAU,2BAAA;AAAA,sBACV,KAAA,EAAO,EAAE,KAAA,EAAO,kCAAA,EAAmC;AAAA,sBAElD,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,iBAAA,EACF,CAAA;AAAA,gCAGAA,cAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAU,mCAAA;AAAA,oBACV,KAAA,EAAO;AAAA,sBACL,UAAA,EAAY;AAAA;AACd;AAAA,iBACF;AAAA,gCACAA,cAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAU,uBAAA;AAAA,oBACV,KAAA,EAAO;AAAA,sBACL,UAAA,EAAY;AAAA;AACd;AAAA,iBACF;AAAA,gCAGAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACb,QAAA,EAAA;AAAA,kCAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,oCAAAD,cAAA;AAAA,sBAAC,KAAA;AAAA,sBAAA;AAAA,wBACC,KAAA,EAAM,IAAA;AAAA,wBACN,MAAA,EAAO,IAAA;AAAA,wBACP,OAAA,EAAQ,WAAA;AAAA,wBACR,IAAA,EAAK,MAAA;AAAA,wBACL,KAAA,EAAM,4BAAA;AAAA,wBACN,KAAA,EAAO,EAAE,KAAA,EAAO,SAAA,EAAU;AAAA,wBAE1B,QAAA,kBAAAA,cAAA;AAAA,0BAAC,MAAA;AAAA,0BAAA;AAAA,4BACC,CAAA,EAAE,+BAAA;AAAA,4BACF,MAAA,EAAO,cAAA;AAAA,4BACP,WAAA,EAAY,GAAA;AAAA,4BACZ,aAAA,EAAc,OAAA;AAAA,4BACd,cAAA,EAAe;AAAA;AAAA;AACjB;AAAA,qBACF;AAAA,oCACAA,cAAA;AAAA,sBAAC,MAAA;AAAA,sBAAA;AAAA,wBACC,SAAA,EAAU,gDAAA;AAAA,wBACV,KAAA,EAAO,EAAE,KAAA,EAAO,SAAA,EAAU;AAAA,wBAC3B,QAAA,EAAA;AAAA;AAAA;AAED,mBAAA,EACF,CAAA;AAAA,kCACAA,cAAA;AAAA,oBAAC,GAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAU,2BAAA;AAAA,sBACV,KAAA,EAAO,EAAE,KAAA,EAAO,mCAAA,EAAoC;AAAA,sBAEnD,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,mBACR;AAAA,kBACC,KAAK,MAAA,oBACJC,eAAA;AAAA,oBAAC,KAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAU,mCAAA;AAAA,sBACV,KAAA,EAAO;AAAA,wBACL,UAAA,EAAY,gEAAA;AAAA,wBACZ,KAAA,EAAO,4BAAA;AAAA,wBACP,MAAA,EAAQ;AAAA,uBACV;AAAA,sBAEA,QAAA,EAAA;AAAA,wCAAAD,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,eAAA,EAAgB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,wBAAO,GAAA;AAAA,wBAAE,IAAA,CAAK;AAAA;AAAA;AAAA;AACvD,iBAAA,EAEJ;AAAA;AAAA;AAAA,WACF,EACF,KAjGiB,KAkGnB,CAAA;AAAA,QAEJ,CAAC,CAAA,EACH;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ","file":"ChallengesSection.cjs","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 & 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"]}
|