logos-kit 1.0.0

package/GoogleAnalytics.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import Script from "next/script";
+import type { ReactElement } from "react";
+
+type Props = {
+  measurementId: string | undefined;
+};
+
+export default function GoogleAnalytics({
+  measurementId,
+}: Props): ReactElement | null {
+  if (!measurementId) return null;
+
+  return (
+    <>
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${measurementId}`}
+        strategy="afterInteractive"
+      />
+      <Script id="ga-init" strategy="afterInteractive">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${measurementId}');
+        `}
+      </Script>
+    </>
+  );
+}

package/ScrollReveal.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import type { ReactElement, ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+  threshold?: number;
+};
+
+export default function ScrollReveal({
+  children,
+  className,
+  threshold = 0.12,
+}: Props): ReactElement {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          el.classList.add("is-visible");
+          observer.disconnect();
+        }
+      },
+      { threshold },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [threshold]);
+
+  const cls = className ? `reveal-group ${className}` : "reveal-group";
+  return (
+    <div ref={ref} className={cls}>
+      {children}
+    </div>
+  );
+}

package/analytics.ts

@@ -0,0 +1,27 @@
+declare global {
+  interface Window {
+    gtag?: (...args: unknown[]) => void;
+  }
+}
+
+function trackEvent(
+  name: string,
+  params?: Record<string, string | number | boolean>,
+): void {
+  if (typeof window === "undefined" || typeof window.gtag !== "function") return;
+  window.gtag("event", name, params);
+}
+
+export const track = {
+  contactFormSubmit: () => trackEvent("contact_form_submit"),
+  whatsappClick: (context?: string) =>
+    trackEvent("whatsapp_click", context ? { context } : undefined),
+  phoneClick: () => trackEvent("phone_click"),
+  emailClick: () => trackEvent("email_click"),
+  ctaClick: (label: string) => trackEvent("cta_click", { label }),
+  socialClick: (platform: string) => trackEvent("social_click", { platform }),
+  custom: (
+    name: string,
+    params?: Record<string, string | number | boolean>,
+  ) => trackEvent(name, params),
+} as const;

package/animations.css

@@ -0,0 +1,43 @@
+/* ── Logos Kit — Scroll & Hero animations ─────────────────────────── */
+
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Scroll reveal */
+.reveal-item {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.reveal-group.is-visible .reveal-item                          { animation: fade-in-up 0.6s ease forwards; animation-delay:    0ms; }
+.reveal-group.is-visible [data-reveal-delay="1"].reveal-item   { animation: fade-in-up 0.6s ease forwards; animation-delay:  120ms; }
+.reveal-group.is-visible [data-reveal-delay="2"].reveal-item   { animation: fade-in-up 0.6s ease forwards; animation-delay:  240ms; }
+.reveal-group.is-visible [data-reveal-delay="3"].reveal-item   { animation: fade-in-up 0.6s ease forwards; animation-delay:  360ms; }
+.reveal-group.is-visible [data-reveal-delay="4"].reveal-item   { animation: fade-in-up 0.6s ease forwards; animation-delay:  480ms; }
+.reveal-group.is-visible [data-reveal-delay="5"].reveal-item   { animation: fade-in-up 0.6s ease forwards; animation-delay:  600ms; }
+.reveal-group.is-visible [data-reveal-delay="6"].reveal-item   { animation: fade-in-up 0.6s ease forwards; animation-delay:  720ms; }
+.reveal-group.is-visible [data-reveal-delay="7"].reveal-item   { animation: fade-in-up 0.6s ease forwards; animation-delay:  840ms; }
+.reveal-group.is-visible [data-reveal-delay="8"].reveal-item   { animation: fade-in-up 0.6s ease forwards; animation-delay:  960ms; }
+.reveal-group.is-visible [data-reveal-delay="9"].reveal-item   { animation: fade-in-up 0.6s ease forwards; animation-delay: 1080ms; }
+.reveal-group.is-visible [data-reveal-delay="10"].reveal-item  { animation: fade-in-up 0.6s ease forwards; animation-delay: 1200ms; }
+
+/* Hero reveal */
+.hero-item {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.hero-active .hero-item                        { animation: fade-in-up 0.7s ease forwards; animation-delay:   0ms; }
+.hero-active [data-hero-delay="1"].hero-item   { animation: fade-in-up 0.7s ease forwards; animation-delay: 150ms; }
+.hero-active [data-hero-delay="2"].hero-item   { animation: fade-in-up 0.7s ease forwards; animation-delay: 300ms; }
+.hero-active [data-hero-delay="3"].hero-item   { animation: fade-in-up 0.7s ease forwards; animation-delay: 450ms; }
+.hero-active [data-hero-delay="4"].hero-item   { animation: fade-in-up 0.7s ease forwards; animation-delay: 600ms; }
+.hero-active [data-hero-delay="5"].hero-item   { animation: fade-in-up 0.7s ease forwards; animation-delay: 750ms; }
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .hero-item,
+  .reveal-item { opacity: 1; transform: none; animation: none; }
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "logos-kit",
+  "version": "1.0.0",
+  "description": "Shared components and styles for Logos Web Studio sites",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lumen-web-studio/logos-kit.git"
+  },
+  "files": [
+    "ScrollReveal.tsx",
+    "animations.css",
+    "GoogleAnalytics.tsx",
+    "analytics.ts"
+  ],
+  "exports": {
+    "./ScrollReveal": "./ScrollReveal.tsx",
+    "./animations.css": "./animations.css",
+    "./GoogleAnalytics": "./GoogleAnalytics.tsx",
+    "./analytics": "./analytics.ts"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "next": ">=14"
+  }
+}