@frequencyads/components 0.1.0 → 0.1.2

package/dist/index.css

@@ -237,6 +237,11 @@
 .root {
   position: absolute;
   inset: 0;
+  z-index: 1;
+  overflow: hidden;
+  pointer-events: none;
+}
+.video {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -246,17 +251,34 @@
 .root {
   position: relative;
   min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #121212;
   overflow: hidden;
+  background-color: #121212;
 }
 .content {
   position: relative;
-  z-index: 2;
-  text-align: center;
+  z-index: 10;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   padding: var(--mantine-spacing-xl);
+  text-align: center;
+}
+.label {
+  position: relative;
+  z-index: 20;
+  font-family: Montserrat, sans-serif;
+  font-size: calc(0.625rem * var(--mantine-scale));
+  text-transform: uppercase;
+  letter-spacing: 0.3em;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: calc(2rem * var(--mantine-scale));
+}
+@media (min-width: 48em) {
+  .label {
+    font-size: var(--mantine-font-size-xs);
+  }
 }
 .vignette {
   position: absolute;
@@ -276,12 +298,14 @@
 }
 .logoWrapper {
   position: relative;
+  margin-bottom: calc(2.5rem * var(--mantine-scale));
 }
 .logo {
   position: relative;
-  z-index: 2;
+  z-index: 10;
   width: calc(10rem * var(--mantine-scale));
   height: calc(10rem * var(--mantine-scale));
+  object-fit: contain;
 }
 @media (min-width: 48em) {
   .logo {
@@ -304,14 +328,15 @@
   background:
     radial-gradient(
       circle,
-      #169BDE 0%,
-      #7E57C2 50%,
+      #169bde 0%,
+      #7e57c2 50%,
       transparent 70%);
   transform: scale(1.5);
   pointer-events: none;
 }
 .textWrapper {
   position: relative;
+  margin-bottom: calc(2.5rem * var(--mantine-scale));
 }
 .heading {
   position: relative;
@@ -351,6 +376,8 @@
   animation: shimmer 6s ease-in-out infinite;
 }
 .tagline {
+  position: relative;
+  z-index: 20;
   color: rgba(255, 255, 255, 0.6);
   font-size: var(--mantine-font-size-lg);
   font-family:
@@ -358,6 +385,7 @@
     "Source Sans Pro",
     sans-serif;
   max-width: calc(35rem * var(--mantine-scale));
+  margin-bottom: calc(3rem * var(--mantine-scale));
 }
 @media (min-width: 48em) {
   .tagline {
@@ -377,6 +405,32 @@
 .secondaryButton:hover {
   background-color: rgba(255, 255, 255, 0.05);
 }
+.scrollIndicator {
+  position: absolute;
+  bottom: calc(3rem * var(--mantine-scale));
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(1rem * var(--mantine-scale));
+}
+.scrollLabel {
+  font-family: Montserrat, sans-serif;
+  font-size: calc(0.625rem * var(--mantine-scale));
+  text-transform: uppercase;
+  letter-spacing: 0.3em;
+  color: rgba(255, 255, 255, 0.2);
+}
+.scrollLine {
+  width: 1px;
+  height: calc(2rem * var(--mantine-scale));
+  background:
+    linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.4),
+      transparent);
+}
 
 /* src/MiniAudioPlayer/MiniAudioPlayer.module.css */
 .root {
@@ -541,3 +595,15 @@
 .description {
   max-width: 36rem;
 }
+
+/* src/TestimonialCard/TestimonialCard.module.css */
+.root {
+  border-left: 4px solid;
+  background-color: var(--mantine-color-gray-0);
+}
+[data-mantine-color-scheme=dark] .root {
+  background-color: var(--mantine-color-dark-6);
+}
+.quoteIcon {
+  opacity: 0.3;
+}

package/dist/index.d.mts

@@ -204,6 +204,8 @@ interface HeroProps {
     variant?: 'logo' | 'text';
     /** Heading text shown large in 'text' variant, used as alt text in 'logo' variant */
     heading?: string;
+    /** Small label shown above the logo/heading (e.g. "Brand Guidelines") */
+    label?: string;
     /** Subtitle shown below the logo or heading */
     tagline?: string;
     /** Image source for logo variant (defaults to Frequency mark) */
@@ -220,8 +222,10 @@ interface HeroProps {
     backgroundVideoSrc?: string;
     /** Show animated waveform (default true) */
     showWaveform?: boolean;
+    /** Show scroll indicator at bottom (default false) */
+    showScrollIndicator?: boolean;
 }
-declare function Hero({ variant, heading, tagline, logoSrc, gradient: gradientName, shimmer, primaryAction, secondaryAction, backgroundVideoSrc, showWaveform, }: HeroProps): react_jsx_runtime.JSX.Element;
+declare function Hero({ variant, heading, label, tagline, logoSrc, gradient: gradientName, shimmer, primaryAction, secondaryAction, backgroundVideoSrc, showWaveform, showScrollIndicator, }: HeroProps): react_jsx_runtime.JSX.Element;
 
 interface HintBadgeProps {
     /** Whether this is a "do" (positive) or "don't" (negative) hint */
@@ -330,6 +334,22 @@ interface SplitSectionProps {
 }
 declare function SplitSection({ badge, badgeColor, subtitle, title, titleColor, preTitle, description, actions, heading, children, stickyHeading, py, reversed, id, className, }: SplitSectionProps): react_jsx_runtime.JSX.Element;
 
+interface TestimonialCardProps {
+    /** The testimonial text */
+    quote: string;
+    /** Person's name */
+    name: string;
+    /** Job title / role */
+    role?: string;
+    /** Company name */
+    company?: string;
+    /** Avatar image URL (falls back to initials) */
+    avatarSrc?: string;
+    /** Accent color for the left border and quote icon (default: 'blue') */
+    accentColor?: MantineColor;
+}
+declare function TestimonialCard({ quote, name, role, company, avatarSrc, accentColor, }: TestimonialCardProps): react_jsx_runtime.JSX.Element;
+
 interface VideoBackgroundProps {
     /** Video source URL */
     src: string;
@@ -338,4 +358,4 @@ interface VideoBackgroundProps {
 }
 declare function VideoBackground({ src, opacity }: VideoBackgroundProps): react_jsx_runtime.JSX.Element;
 
-export { AnimatedCounter, type AnimatedCounterProps, AnimatedWaveform, type AnimatedWaveformProps, AudioPlayer, type AudioPlayerProps, AudioWaveform, type AudioWaveformHandle, type AudioWaveformProps, CodeBlock, type CodeBlockProps, ColorPalette, type ColorPaletteProps, ColorSwatch, type ColorSwatchProps, Copyable, type CopyableProps, DosDonts, type DosDontsItem, type DosDontsProps, ExpandableCard, type ExpandableCardProps, FadeInSection, type FadeInSectionProps, FrequencyWave, type FrequencyWaveProps, type GradientName, GradientSwatch, type GradientSwatchProps, Hero, type HeroAction, type HeroProps, HintBadge, type HintBadgeProps, MiniAudioPlayer, type MiniAudioPlayerProps, PrincipleCard, type PrincipleCardProps, SpeedDial, type SpeedDialAction, type SpeedDialProps, SplitSection, type SplitSectionProps, VideoBackground, type VideoBackgroundProps };
+export { AnimatedCounter, type AnimatedCounterProps, AnimatedWaveform, type AnimatedWaveformProps, AudioPlayer, type AudioPlayerProps, AudioWaveform, type AudioWaveformHandle, type AudioWaveformProps, CodeBlock, type CodeBlockProps, ColorPalette, type ColorPaletteProps, ColorSwatch, type ColorSwatchProps, Copyable, type CopyableProps, DosDonts, type DosDontsItem, type DosDontsProps, ExpandableCard, type ExpandableCardProps, FadeInSection, type FadeInSectionProps, FrequencyWave, type FrequencyWaveProps, type GradientName, GradientSwatch, type GradientSwatchProps, Hero, type HeroAction, type HeroProps, HintBadge, type HintBadgeProps, MiniAudioPlayer, type MiniAudioPlayerProps, PrincipleCard, type PrincipleCardProps, SpeedDial, type SpeedDialAction, type SpeedDialProps, SplitSection, type SplitSectionProps, TestimonialCard, type TestimonialCardProps, VideoBackground, type VideoBackgroundProps };

package/dist/index.d.ts

@@ -204,6 +204,8 @@ interface HeroProps {
     variant?: 'logo' | 'text';
     /** Heading text shown large in 'text' variant, used as alt text in 'logo' variant */
     heading?: string;
+    /** Small label shown above the logo/heading (e.g. "Brand Guidelines") */
+    label?: string;
     /** Subtitle shown below the logo or heading */
     tagline?: string;
     /** Image source for logo variant (defaults to Frequency mark) */
@@ -220,8 +222,10 @@ interface HeroProps {
     backgroundVideoSrc?: string;
     /** Show animated waveform (default true) */
     showWaveform?: boolean;
+    /** Show scroll indicator at bottom (default false) */
+    showScrollIndicator?: boolean;
 }
-declare function Hero({ variant, heading, tagline, logoSrc, gradient: gradientName, shimmer, primaryAction, secondaryAction, backgroundVideoSrc, showWaveform, }: HeroProps): react_jsx_runtime.JSX.Element;
+declare function Hero({ variant, heading, label, tagline, logoSrc, gradient: gradientName, shimmer, primaryAction, secondaryAction, backgroundVideoSrc, showWaveform, showScrollIndicator, }: HeroProps): react_jsx_runtime.JSX.Element;
 
 interface HintBadgeProps {
     /** Whether this is a "do" (positive) or "don't" (negative) hint */
@@ -330,6 +334,22 @@ interface SplitSectionProps {
 }
 declare function SplitSection({ badge, badgeColor, subtitle, title, titleColor, preTitle, description, actions, heading, children, stickyHeading, py, reversed, id, className, }: SplitSectionProps): react_jsx_runtime.JSX.Element;
 
+interface TestimonialCardProps {
+    /** The testimonial text */
+    quote: string;
+    /** Person's name */
+    name: string;
+    /** Job title / role */
+    role?: string;
+    /** Company name */
+    company?: string;
+    /** Avatar image URL (falls back to initials) */
+    avatarSrc?: string;
+    /** Accent color for the left border and quote icon (default: 'blue') */
+    accentColor?: MantineColor;
+}
+declare function TestimonialCard({ quote, name, role, company, avatarSrc, accentColor, }: TestimonialCardProps): react_jsx_runtime.JSX.Element;
+
 interface VideoBackgroundProps {
     /** Video source URL */
     src: string;
@@ -338,4 +358,4 @@ interface VideoBackgroundProps {
 }
 declare function VideoBackground({ src, opacity }: VideoBackgroundProps): react_jsx_runtime.JSX.Element;
 
-export { AnimatedCounter, type AnimatedCounterProps, AnimatedWaveform, type AnimatedWaveformProps, AudioPlayer, type AudioPlayerProps, AudioWaveform, type AudioWaveformHandle, type AudioWaveformProps, CodeBlock, type CodeBlockProps, ColorPalette, type ColorPaletteProps, ColorSwatch, type ColorSwatchProps, Copyable, type CopyableProps, DosDonts, type DosDontsItem, type DosDontsProps, ExpandableCard, type ExpandableCardProps, FadeInSection, type FadeInSectionProps, FrequencyWave, type FrequencyWaveProps, type GradientName, GradientSwatch, type GradientSwatchProps, Hero, type HeroAction, type HeroProps, HintBadge, type HintBadgeProps, MiniAudioPlayer, type MiniAudioPlayerProps, PrincipleCard, type PrincipleCardProps, SpeedDial, type SpeedDialAction, type SpeedDialProps, SplitSection, type SplitSectionProps, VideoBackground, type VideoBackgroundProps };
+export { AnimatedCounter, type AnimatedCounterProps, AnimatedWaveform, type AnimatedWaveformProps, AudioPlayer, type AudioPlayerProps, AudioWaveform, type AudioWaveformHandle, type AudioWaveformProps, CodeBlock, type CodeBlockProps, ColorPalette, type ColorPaletteProps, ColorSwatch, type ColorSwatchProps, Copyable, type CopyableProps, DosDonts, type DosDontsItem, type DosDontsProps, ExpandableCard, type ExpandableCardProps, FadeInSection, type FadeInSectionProps, FrequencyWave, type FrequencyWaveProps, type GradientName, GradientSwatch, type GradientSwatchProps, Hero, type HeroAction, type HeroProps, HintBadge, type HintBadgeProps, MiniAudioPlayer, type MiniAudioPlayerProps, PrincipleCard, type PrincipleCardProps, SpeedDial, type SpeedDialAction, type SpeedDialProps, SplitSection, type SplitSectionProps, TestimonialCard, type TestimonialCardProps, VideoBackground, type VideoBackgroundProps };

package/dist/index.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -78,6 +79,7 @@ __export(index_exports, {
   PrincipleCard: () => PrincipleCard,
   SpeedDial: () => SpeedDial,
   SplitSection: () => SplitSection,
+  TestimonialCard: () => TestimonialCard,
   VideoBackground: () => VideoBackground
 });
 module.exports = __toCommonJS(index_exports);
@@ -1081,7 +1083,9 @@ function GradientSwatch({ name, colors, description }) {
 }
 
 // src/Hero/Hero.tsx
+var import_react10 = require("react");
 var import_core13 = require("@mantine/core");
+var import_framer_motion3 = require("framer-motion");
 var import_frequency_mark_white = __toESM(require("@frequencyads/brand/assets/frequency-mark-white.svg"));
 var import_colors = require("@frequencyads/brand/colors");
 
@@ -1091,18 +1095,7 @@ var VideoBackground_default = {};
 // src/VideoBackground/VideoBackground.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function VideoBackground({ src, opacity = 0.3 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "video",
-    {
-      autoPlay: true,
-      muted: true,
-      loop: true,
-      playsInline: true,
-      className: VideoBackground_default.root,
-      style: { opacity },
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("source", { src, type: "video/mp4" })
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: VideoBackground_default.root, style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: VideoBackground_default.video, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("source", { src, type: "video/mp4" }) }) });
 }
 
 // src/Hero/Hero.module.css
@@ -1113,6 +1106,7 @@ var import_jsx_runtime15 = require("react/jsx-runtime");
 function Hero({
   variant = "logo",
   heading,
+  label,
   tagline,
   logoSrc = import_frequency_mark_white.default,
   gradient: gradientName = "frequencyAlive",
@@ -1120,71 +1114,144 @@ function Hero({
   primaryAction,
   secondaryAction,
   backgroundVideoSrc,
-  showWaveform
+  showWaveform,
+  showScrollIndicator = false
 }) {
-  const resolvedHeading = heading != null ? heading : variant === "text" ? "Frequency" : void 0;
+  const [mounted, setMounted] = (0, import_react10.useState)(false);
+  const resolvedHeading = heading != null ? heading : variant === "text" ? "Your Message" : void 0;
+  const resolvedLabel = label || (variant === "logo" ? "Welcome" : void 0);
   const hasActions = primaryAction || secondaryAction;
   const waveformVisible = showWaveform != null ? showWaveform : true;
   const grad = import_colors.gradients[gradientName];
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core13.Box, { className: Hero_default.root, children: [
+  (0, import_react10.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core13.Box, { component: "section", className: Hero_default.root, children: [
     backgroundVideoSrc && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VideoBackground, { src: backgroundVideoSrc }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core13.Stack, { className: Hero_default.content, align: "center", gap: "lg", children: [
-      variant === "logo" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: Hero_default.logoWrapper, children: [
-        waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AnimatedWaveform, {}),
-        waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Hero_default.vignette }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_core13.Image,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: Hero_default.content, children: [
+      mounted && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+        resolvedLabel && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_framer_motion3.motion.p,
           {
-            src: logoSrc,
-            alt: resolvedHeading != null ? resolvedHeading : "Frequency",
-            className: Hero_default.logo,
-            fit: "contain"
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            transition: { duration: 0.8, delay: 0.2 },
+            className: Hero_default.label,
+            children: resolvedLabel
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Hero_default.glow })
-      ] }),
-      variant === "text" && resolvedHeading && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: Hero_default.textWrapper, children: [
-        waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AnimatedWaveform, {}),
-        waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Hero_default.vignette }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_core13.Title,
+        variant === "logo" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          import_framer_motion3.motion.div,
           {
-            order: 1,
-            className: `${Hero_default.heading} ${shimmer ? Hero_default.shimmer : ""}`,
-            style: {
-              backgroundImage: `linear-gradient(135deg, ${grad.from}, ${grad.to}, ${grad.from})`,
-              backgroundSize: shimmer ? "200% 100%" : void 0
-            },
-            children: resolvedHeading
+            initial: { opacity: 0, scale: 0.8 },
+            animate: { opacity: 1, scale: 1 },
+            transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
+            className: Hero_default.logoWrapper,
+            children: [
+              waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AnimatedWaveform, {}),
+              waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Hero_default.vignette }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_framer_motion3.motion.img,
+                {
+                  src: logoSrc,
+                  alt: resolvedHeading != null ? resolvedHeading : "Frequency",
+                  className: Hero_default.logo,
+                  animate: { rotate: [0, 0.5, -0.5, 0] },
+                  transition: { duration: 8, repeat: Infinity, ease: "easeInOut" }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Hero_default.glow })
+            ]
           }
-        )
-      ] }),
-      tagline && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core13.Text, { className: Hero_default.tagline, children: tagline }),
-      hasActions && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core13.Group, { gap: "md", justify: "center", wrap: "wrap", children: [
-        primaryAction && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_core13.Button,
+        ),
+        variant === "text" && resolvedHeading && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          import_framer_motion3.motion.div,
           {
-            component: "a",
-            href: primaryAction.href,
-            size: "lg",
-            radius: 4,
-            className: Hero_default.primaryButton,
-            children: primaryAction.label
+            initial: { opacity: 0, scale: 0.8 },
+            animate: { opacity: 1, scale: 1 },
+            transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
+            className: Hero_default.textWrapper,
+            children: [
+              waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AnimatedWaveform, {}),
+              waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Hero_default.vignette }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_core13.Title,
+                {
+                  order: 1,
+                  className: `${Hero_default.heading} ${shimmer ? Hero_default.shimmer : ""}`,
+                  style: {
+                    backgroundImage: `linear-gradient(135deg, ${grad.from}, ${grad.to}, ${grad.from})`,
+                    backgroundSize: shimmer ? "200% 100%" : void 0
+                  },
+                  children: resolvedHeading
+                }
+              )
+            ]
           }
         ),
-        secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_core13.Button,
+        tagline && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_framer_motion3.motion.div,
           {
-            component: "a",
-            href: secondaryAction.href,
-            size: "lg",
-            radius: 4,
-            variant: "outline",
-            className: Hero_default.secondaryButton,
-            children: secondaryAction.label
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.8, delay: 0.7 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core13.Text, { className: Hero_default.tagline, children: tagline })
+          }
+        ),
+        hasActions && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_framer_motion3.motion.div,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.8, delay: 0.9 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core13.Group, { gap: "md", justify: "center", wrap: "wrap", children: [
+              primaryAction && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_core13.Button,
+                {
+                  component: "a",
+                  href: primaryAction.href,
+                  size: "lg",
+                  radius: 4,
+                  className: Hero_default.primaryButton,
+                  children: primaryAction.label
+                }
+              ),
+              secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_core13.Button,
+                {
+                  component: "a",
+                  href: secondaryAction.href,
+                  size: "lg",
+                  radius: 4,
+                  variant: "outline",
+                  className: Hero_default.secondaryButton,
+                  children: secondaryAction.label
+                }
+              )
+            ] })
           }
         )
-      ] })
+      ] }),
+      mounted && showScrollIndicator && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        import_framer_motion3.motion.div,
+        {
+          className: Hero_default.scrollIndicator,
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          transition: { duration: 1, delay: 1.4 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: Hero_default.scrollLabel, children: "Scroll" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_framer_motion3.motion.div,
+              {
+                className: Hero_default.scrollLine,
+                animate: { scaleY: [1, 1.5, 1] },
+                transition: { duration: 1.5, repeat: Infinity }
+              }
+            )
+          ]
+        }
+      )
     ] })
   ] });
 }
@@ -1218,7 +1285,7 @@ function HintBadge({ variant, children }) {
 }
 
 // src/MiniAudioPlayer/MiniAudioPlayer.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_core15 = require("@mantine/core");
 var import_icons_react3 = require("@tabler/icons-react");
 
@@ -1232,7 +1299,7 @@ var SIZE_CONFIG = {
   small: { height: 32, buttonSize: 28, iconSize: 16, waveHeight: 20, barWidth: 1, barGap: 0 },
   compact: { height: 40, buttonSize: 32, iconSize: 18, waveHeight: 24, barWidth: 2, barGap: 1 }
 };
-var MiniAudioPlayer = (0, import_react10.forwardRef)(
+var MiniAudioPlayer = (0, import_react11.forwardRef)(
   ({
     audioUrl,
     size = "mini",
@@ -1243,11 +1310,11 @@ var MiniAudioPlayer = (0, import_react10.forwardRef)(
     className,
     style
   }, ref) => {
-    const audioRef = (0, import_react10.useRef)(null);
-    const [isPlaying, setIsPlaying] = (0, import_react10.useState)(false);
-    const [currentTime, setCurrentTime] = (0, import_react10.useState)(0);
+    const audioRef = (0, import_react11.useRef)(null);
+    const [isPlaying, setIsPlaying] = (0, import_react11.useState)(false);
+    const [currentTime, setCurrentTime] = (0, import_react11.useState)(0);
     const config = SIZE_CONFIG[size];
-    (0, import_react10.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       const audio = audioRef.current;
       if (!audio) return;
       const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
@@ -1268,7 +1335,7 @@ var MiniAudioPlayer = (0, import_react10.forwardRef)(
         audio.removeEventListener("play", handlePlay);
       };
     }, [audioUrl]);
-    const handlePlayPause = (0, import_react10.useCallback)(() => {
+    const handlePlayPause = (0, import_react11.useCallback)(() => {
       const audio = audioRef.current;
       if (!audio) return;
       if (isPlaying) {
@@ -1280,7 +1347,7 @@ var MiniAudioPlayer = (0, import_react10.forwardRef)(
         onPlay == null ? void 0 : onPlay();
       }
     }, [isPlaying, onPlay, onPause]);
-    const handleSeek = (0, import_react10.useCallback)((time) => {
+    const handleSeek = (0, import_react11.useCallback)((time) => {
       const audio = audioRef.current;
       if (audio && !isNaN(time) && isFinite(time)) {
         audio.currentTime = time;
@@ -1365,7 +1432,7 @@ function PrincipleCard({
 }
 
 // src/SpeedDial/SpeedDial.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_core17 = require("@mantine/core");
 var import_icons_react4 = require("@tabler/icons-react");
 
@@ -1388,14 +1455,14 @@ function SpeedDial({
   className
 }) {
   var _a;
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react11.useState)(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react12.useState)(defaultOpen);
   const isOpen = controlledOpen != null ? controlledOpen : uncontrolledOpen;
-  const toggle = (0, import_react11.useCallback)(() => {
+  const toggle = (0, import_react12.useCallback)(() => {
     const next = !isOpen;
     setUncontrolledOpen(next);
     onOpenChange == null ? void 0 : onOpenChange(next);
   }, [isOpen, onOpenChange]);
-  const close = (0, import_react11.useCallback)(() => {
+  const close = (0, import_react12.useCallback)(() => {
     setUncontrolledOpen(false);
     onOpenChange == null ? void 0 : onOpenChange(false);
   }, [onOpenChange]);
@@ -1537,6 +1604,40 @@ function SplitSection({
     }
   );
 }
+
+// src/TestimonialCard/TestimonialCard.tsx
+var import_core19 = require("@mantine/core");
+var import_icons_react5 = require("@tabler/icons-react");
+
+// src/TestimonialCard/TestimonialCard.module.css
+var TestimonialCard_default = {};
+
+// src/TestimonialCard/TestimonialCard.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function getInitials(name) {
+  return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
+}
+function TestimonialCard({
+  quote,
+  name,
+  role,
+  company,
+  avatarSrc,
+  accentColor = "blue"
+}) {
+  const borderColor = `var(--mantine-color-${accentColor}-filled)`;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core19.Paper, { className: TestimonialCard_default.root, p: "lg", radius: "md", style: { borderLeftColor: borderColor }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons_react5.IconQuote, { size: 32, className: TestimonialCard_default.quoteIcon, color: borderColor }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Text, { fs: "italic", mt: "xs", mb: "md", children: quote }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core19.Group, { gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Avatar, { src: avatarSrc, alt: name, color: accentColor, radius: "xl", size: "md", children: getInitials(name) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core19.Stack, { gap: 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Text, { fw: 600, size: "sm", children: name }),
+        (role || company) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Text, { size: "xs", c: "dimmed", children: [role, company].filter(Boolean).join(", ") })
+      ] })
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnimatedCounter,
@@ -1558,5 +1659,6 @@ function SplitSection({
   PrincipleCard,
   SpeedDial,
   SplitSection,
+  TestimonialCard,
   VideoBackground
 });

package/dist/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -1035,15 +1036,9 @@ function GradientSwatch({ name, colors, description }) {
 }
 
 // src/Hero/Hero.tsx
-import {
-  Box as Box6,
-  Button as Button2,
-  Group as Group5,
-  Image,
-  Stack as Stack2,
-  Text as Text9,
-  Title as Title2
-} from "@mantine/core";
+import { useEffect as useEffect8, useState as useState10 } from "react";
+import { Box as Box6, Button as Button2, Group as Group5, Text as Text9, Title as Title2 } from "@mantine/core";
+import { motion as motion3 } from "framer-motion";
 import defaultLogoSrc from "@frequencyads/brand/assets/frequency-mark-white.svg";
 import { gradients } from "@frequencyads/brand/colors";
 
@@ -1053,28 +1048,18 @@ var VideoBackground_default = {};
 // src/VideoBackground/VideoBackground.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
 function VideoBackground({ src, opacity = 0.3 }) {
-  return /* @__PURE__ */ jsx13(
-    "video",
-    {
-      autoPlay: true,
-      muted: true,
-      loop: true,
-      playsInline: true,
-      className: VideoBackground_default.root,
-      style: { opacity },
-      children: /* @__PURE__ */ jsx13("source", { src, type: "video/mp4" })
-    }
-  );
+  return /* @__PURE__ */ jsx13("div", { className: VideoBackground_default.root, style: { opacity }, children: /* @__PURE__ */ jsx13("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: VideoBackground_default.video, children: /* @__PURE__ */ jsx13("source", { src, type: "video/mp4" }) }) });
 }
 
 // src/Hero/Hero.module.css
 var Hero_default = {};
 
 // src/Hero/Hero.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function Hero({
   variant = "logo",
   heading,
+  label,
   tagline,
   logoSrc = defaultLogoSrc,
   gradient: gradientName = "frequencyAlive",
@@ -1082,71 +1067,144 @@ function Hero({
   primaryAction,
   secondaryAction,
   backgroundVideoSrc,
-  showWaveform
+  showWaveform,
+  showScrollIndicator = false
 }) {
-  const resolvedHeading = heading != null ? heading : variant === "text" ? "Frequency" : void 0;
+  const [mounted, setMounted] = useState10(false);
+  const resolvedHeading = heading != null ? heading : variant === "text" ? "Your Message" : void 0;
+  const resolvedLabel = label || (variant === "logo" ? "Welcome" : void 0);
   const hasActions = primaryAction || secondaryAction;
   const waveformVisible = showWaveform != null ? showWaveform : true;
   const grad = gradients[gradientName];
-  return /* @__PURE__ */ jsxs12(Box6, { className: Hero_default.root, children: [
+  useEffect8(() => {
+    setMounted(true);
+  }, []);
+  return /* @__PURE__ */ jsxs12(Box6, { component: "section", className: Hero_default.root, children: [
     backgroundVideoSrc && /* @__PURE__ */ jsx14(VideoBackground, { src: backgroundVideoSrc }),
-    /* @__PURE__ */ jsxs12(Stack2, { className: Hero_default.content, align: "center", gap: "lg", children: [
-      variant === "logo" && /* @__PURE__ */ jsxs12("div", { className: Hero_default.logoWrapper, children: [
-        waveformVisible && /* @__PURE__ */ jsx14(AnimatedWaveform, {}),
-        waveformVisible && /* @__PURE__ */ jsx14("div", { className: Hero_default.vignette }),
-        /* @__PURE__ */ jsx14(
-          Image,
+    /* @__PURE__ */ jsxs12("div", { className: Hero_default.content, children: [
+      mounted && /* @__PURE__ */ jsxs12(Fragment2, { children: [
+        resolvedLabel && /* @__PURE__ */ jsx14(
+          motion3.p,
           {
-            src: logoSrc,
-            alt: resolvedHeading != null ? resolvedHeading : "Frequency",
-            className: Hero_default.logo,
-            fit: "contain"
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            transition: { duration: 0.8, delay: 0.2 },
+            className: Hero_default.label,
+            children: resolvedLabel
           }
         ),
-        /* @__PURE__ */ jsx14("div", { className: Hero_default.glow })
-      ] }),
-      variant === "text" && resolvedHeading && /* @__PURE__ */ jsxs12("div", { className: Hero_default.textWrapper, children: [
-        waveformVisible && /* @__PURE__ */ jsx14(AnimatedWaveform, {}),
-        waveformVisible && /* @__PURE__ */ jsx14("div", { className: Hero_default.vignette }),
-        /* @__PURE__ */ jsx14(
-          Title2,
+        variant === "logo" && /* @__PURE__ */ jsxs12(
+          motion3.div,
           {
-            order: 1,
-            className: `${Hero_default.heading} ${shimmer ? Hero_default.shimmer : ""}`,
-            style: {
-              backgroundImage: `linear-gradient(135deg, ${grad.from}, ${grad.to}, ${grad.from})`,
-              backgroundSize: shimmer ? "200% 100%" : void 0
-            },
-            children: resolvedHeading
+            initial: { opacity: 0, scale: 0.8 },
+            animate: { opacity: 1, scale: 1 },
+            transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
+            className: Hero_default.logoWrapper,
+            children: [
+              waveformVisible && /* @__PURE__ */ jsx14(AnimatedWaveform, {}),
+              waveformVisible && /* @__PURE__ */ jsx14("div", { className: Hero_default.vignette }),
+              /* @__PURE__ */ jsx14(
+                motion3.img,
+                {
+                  src: logoSrc,
+                  alt: resolvedHeading != null ? resolvedHeading : "Frequency",
+                  className: Hero_default.logo,
+                  animate: { rotate: [0, 0.5, -0.5, 0] },
+                  transition: { duration: 8, repeat: Infinity, ease: "easeInOut" }
+                }
+              ),
+              /* @__PURE__ */ jsx14("div", { className: Hero_default.glow })
+            ]
           }
-        )
-      ] }),
-      tagline && /* @__PURE__ */ jsx14(Text9, { className: Hero_default.tagline, children: tagline }),
-      hasActions && /* @__PURE__ */ jsxs12(Group5, { gap: "md", justify: "center", wrap: "wrap", children: [
-        primaryAction && /* @__PURE__ */ jsx14(
-          Button2,
+        ),
+        variant === "text" && resolvedHeading && /* @__PURE__ */ jsxs12(
+          motion3.div,
           {
-            component: "a",
-            href: primaryAction.href,
-            size: "lg",
-            radius: 4,
-            className: Hero_default.primaryButton,
-            children: primaryAction.label
+            initial: { opacity: 0, scale: 0.8 },
+            animate: { opacity: 1, scale: 1 },
+            transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
+            className: Hero_default.textWrapper,
+            children: [
+              waveformVisible && /* @__PURE__ */ jsx14(AnimatedWaveform, {}),
+              waveformVisible && /* @__PURE__ */ jsx14("div", { className: Hero_default.vignette }),
+              /* @__PURE__ */ jsx14(
+                Title2,
+                {
+                  order: 1,
+                  className: `${Hero_default.heading} ${shimmer ? Hero_default.shimmer : ""}`,
+                  style: {
+                    backgroundImage: `linear-gradient(135deg, ${grad.from}, ${grad.to}, ${grad.from})`,
+                    backgroundSize: shimmer ? "200% 100%" : void 0
+                  },
+                  children: resolvedHeading
+                }
+              )
+            ]
           }
         ),
-        secondaryAction && /* @__PURE__ */ jsx14(
-          Button2,
+        tagline && /* @__PURE__ */ jsx14(
+          motion3.div,
           {
-            component: "a",
-            href: secondaryAction.href,
-            size: "lg",
-            radius: 4,
-            variant: "outline",
-            className: Hero_default.secondaryButton,
-            children: secondaryAction.label
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.8, delay: 0.7 },
+            children: /* @__PURE__ */ jsx14(Text9, { className: Hero_default.tagline, children: tagline })
+          }
+        ),
+        hasActions && /* @__PURE__ */ jsx14(
+          motion3.div,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.8, delay: 0.9 },
+            children: /* @__PURE__ */ jsxs12(Group5, { gap: "md", justify: "center", wrap: "wrap", children: [
+              primaryAction && /* @__PURE__ */ jsx14(
+                Button2,
+                {
+                  component: "a",
+                  href: primaryAction.href,
+                  size: "lg",
+                  radius: 4,
+                  className: Hero_default.primaryButton,
+                  children: primaryAction.label
+                }
+              ),
+              secondaryAction && /* @__PURE__ */ jsx14(
+                Button2,
+                {
+                  component: "a",
+                  href: secondaryAction.href,
+                  size: "lg",
+                  radius: 4,
+                  variant: "outline",
+                  className: Hero_default.secondaryButton,
+                  children: secondaryAction.label
+                }
+              )
+            ] })
           }
         )
-      ] })
+      ] }),
+      mounted && showScrollIndicator && /* @__PURE__ */ jsxs12(
+        motion3.div,
+        {
+          className: Hero_default.scrollIndicator,
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          transition: { duration: 1, delay: 1.4 },
+          children: [
+            /* @__PURE__ */ jsx14("span", { className: Hero_default.scrollLabel, children: "Scroll" }),
+            /* @__PURE__ */ jsx14(
+              motion3.div,
+              {
+                className: Hero_default.scrollLine,
+                animate: { scaleY: [1, 1.5, 1] },
+                transition: { duration: 1.5, repeat: Infinity }
+              }
+            )
+          ]
+        }
+      )
     ] })
   ] });
 }
@@ -1180,7 +1238,7 @@ function HintBadge({ variant, children }) {
 }
 
 // src/MiniAudioPlayer/MiniAudioPlayer.tsx
-import { useRef as useRef7, useState as useState10, useEffect as useEffect8, forwardRef as forwardRef2, useCallback as useCallback6 } from "react";
+import { useRef as useRef7, useState as useState11, useEffect as useEffect9, forwardRef as forwardRef2, useCallback as useCallback6 } from "react";
 import { ActionIcon as ActionIcon2, Group as Group6, Box as Box7 } from "@mantine/core";
 import { IconPlayerPlayFilled as IconPlayerPlayFilled2, IconPlayerPauseFilled as IconPlayerPauseFilled2 } from "@tabler/icons-react";
 
@@ -1206,10 +1264,10 @@ var MiniAudioPlayer = forwardRef2(
     style
   }, ref) => {
     const audioRef = useRef7(null);
-    const [isPlaying, setIsPlaying] = useState10(false);
-    const [currentTime, setCurrentTime] = useState10(0);
+    const [isPlaying, setIsPlaying] = useState11(false);
+    const [currentTime, setCurrentTime] = useState11(0);
     const config = SIZE_CONFIG[size];
-    useEffect8(() => {
+    useEffect9(() => {
       const audio = audioRef.current;
       if (!audio) return;
       const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
@@ -1327,7 +1385,7 @@ function PrincipleCard({
 }
 
 // src/SpeedDial/SpeedDial.tsx
-import { useState as useState11, useCallback as useCallback7 } from "react";
+import { useState as useState12, useCallback as useCallback7 } from "react";
 import { ActionIcon as ActionIcon3, Transition, Tooltip, Box as Box8 } from "@mantine/core";
 import { IconPlus } from "@tabler/icons-react";
 
@@ -1350,7 +1408,7 @@ function SpeedDial({
   className
 }) {
   var _a;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState11(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState12(defaultOpen);
   const isOpen = controlledOpen != null ? controlledOpen : uncontrolledOpen;
   const toggle = useCallback7(() => {
     const next = !isOpen;
@@ -1425,7 +1483,7 @@ import {
   Badge as Badge2,
   Text as Text11,
   Title as Title4,
-  Stack as Stack3
+  Stack as Stack2
 } from "@mantine/core";
 
 // src/SplitSection/SplitSection.module.css
@@ -1450,7 +1508,7 @@ function SplitSection({
   id,
   className
 }) {
-  const headingContent = heading != null ? heading : /* @__PURE__ */ jsxs17(Stack3, { gap: "sm", children: [
+  const headingContent = heading != null ? heading : /* @__PURE__ */ jsxs17(Stack2, { gap: "sm", children: [
     badge && /* @__PURE__ */ jsxs17(Box9, { children: [
       /* @__PURE__ */ jsx18(
         Badge2,
@@ -1505,6 +1563,40 @@ function SplitSection({
     }
   );
 }
+
+// src/TestimonialCard/TestimonialCard.tsx
+import { Paper as Paper6, Text as Text12, Group as Group8, Avatar, Stack as Stack3 } from "@mantine/core";
+import { IconQuote } from "@tabler/icons-react";
+
+// src/TestimonialCard/TestimonialCard.module.css
+var TestimonialCard_default = {};
+
+// src/TestimonialCard/TestimonialCard.tsx
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+function getInitials(name) {
+  return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
+}
+function TestimonialCard({
+  quote,
+  name,
+  role,
+  company,
+  avatarSrc,
+  accentColor = "blue"
+}) {
+  const borderColor = `var(--mantine-color-${accentColor}-filled)`;
+  return /* @__PURE__ */ jsxs18(Paper6, { className: TestimonialCard_default.root, p: "lg", radius: "md", style: { borderLeftColor: borderColor }, children: [
+    /* @__PURE__ */ jsx19(IconQuote, { size: 32, className: TestimonialCard_default.quoteIcon, color: borderColor }),
+    /* @__PURE__ */ jsx19(Text12, { fs: "italic", mt: "xs", mb: "md", children: quote }),
+    /* @__PURE__ */ jsxs18(Group8, { gap: "sm", children: [
+      /* @__PURE__ */ jsx19(Avatar, { src: avatarSrc, alt: name, color: accentColor, radius: "xl", size: "md", children: getInitials(name) }),
+      /* @__PURE__ */ jsxs18(Stack3, { gap: 0, children: [
+        /* @__PURE__ */ jsx19(Text12, { fw: 600, size: "sm", children: name }),
+        (role || company) && /* @__PURE__ */ jsx19(Text12, { size: "xs", c: "dimmed", children: [role, company].filter(Boolean).join(", ") })
+      ] })
+    ] })
+  ] });
+}
 export {
   AnimatedCounter,
   AnimatedWaveform,
@@ -1525,5 +1617,6 @@ export {
   PrincipleCard,
   SpeedDial,
   SplitSection,
+  TestimonialCard,
   VideoBackground
 };

package/llms.txt

@@ -90,6 +90,15 @@ import { PrincipleCard } from '@frequencyads/components';
 ```
 Props: accentColor, title, description, doHint, dontHint
 
+### TestimonialCard
+Quote card with attribution, avatar, and accent color. Displays customer testimonials or endorsements.
+```tsx
+import { TestimonialCard } from '@frequencyads/components';
+<TestimonialCard quote="Frequency transformed our workflow." name="Sarah Chen" role="Head of Audio" company="Podcast Network Inc." accentColor="blue" />
+<TestimonialCard quote="Simply the best." name="Alex Kim" avatarSrc="/avatars/alex.jpg" accentColor="violet" />
+```
+Props: quote, name, role, company, avatarSrc, accentColor (MantineColor, default 'blue')
+
 ### DosDonts
 Side-by-side Do/Don't comparison cards with green/red coloring and check/X icons.
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frequencyads/components",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Shared Mantine UI components for Frequency apps",
   "license": "MIT",
   "main": "dist/index.js",
@@ -14,8 +14,8 @@
     }
   },
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts",
-    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "lint": "eslint .",
     "type-check": "tsc --noEmit"
   },