feat: Add PostHog analytics and improve domain input styling
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled

PostHog Integration:
- Added PostHog analytics snippet to layout.tsx
- Project ID: phc_J0Ac94FAcsmbFj0CWOAqo9tGGSE4i9F4LXXfnN796gN
- API Host: https://eu.i.posthog.com
- Person profiles: identified_only

Domain Checker Styling:
- Changed input border from standard border to accent-colored ring
- Unfocused: ring-1 ring-accent/30 (thin green outline)
- Focused: ring-1 ring-accent/60 (brighter green)
- Matches puma logo accent color (#10b981)
- Smooth transitions for better UX
This commit is contained in:
yves.gugger
2025-12-08 15:33:41 +01:00
parent 8d6c211ec0
commit 70c22247cb
2 changed files with 16 additions and 2 deletions

View File

@ -180,6 +180,20 @@ export default function RootLayout({
/> />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
{/* PostHog Analytics */}
<script
dangerouslySetInnerHTML={{
__html: `
!function(t,e){var o,n,p,r;e.__SV||(window.posthog && window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init Dr Ur fi Lr zr ci Or jr capture Ai calculateEventProperties qr register register_once register_for_session unregister unregister_for_session Jr getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey cancelPendingSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Gr Br createPersonProfile Vr Cr Kr opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing Hr debug O Wr getPageViewId captureTraceFeedback captureTraceMetric Rr".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
posthog.init('phc_J0Ac94FAcsmbFj0CWOAqo9tGGSE4i9F4LXXfnN796gN', {
api_host: 'https://eu.i.posthog.com',
defaults: '2025-11-30',
person_profiles: 'identified_only',
});
`,
}}
/>
</head> </head>
<body className="bg-background text-foreground antialiased font-sans selection:bg-accent/20 selection:text-foreground"> <body className="bg-background text-foreground antialiased font-sans selection:bg-accent/20 selection:text-foreground">
{children} {children}

View File

@ -75,8 +75,8 @@ export function DomainChecker() {
{/* Input container */} {/* Input container */}
<div className={clsx( <div className={clsx(
"relative bg-background-secondary border rounded-xl sm:rounded-2xl transition-all duration-500", "relative bg-background-secondary rounded-xl sm:rounded-2xl transition-all duration-500",
isFocused ? "border-border-hover" : "border-border" isFocused ? "ring-1 ring-accent/60" : "ring-1 ring-accent/30"
)}> )}>
<input <input
type="text" type="text"