@opensite/ui 1.8.5 → 1.8.6

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.
@@ -2,6 +2,7 @@
2
2
  'use strict';
3
3
 
4
4
  var React = require('react');
5
+ var react = require('motion/react');
5
6
  var clsx = require('clsx');
6
7
  var tailwindMerge = require('tailwind-merge');
7
8
  var classVarianceAuthority = require('class-variance-authority');
@@ -868,7 +869,7 @@ function HeroArchitectureFullscreen({
868
869
  pattern,
869
870
  patternOpacity,
870
871
  className: cn(
871
- "relative flex min-h-screen min-w-screen items-center justify-center dark w-full overflow-hidden font-poppins",
872
+ "relative flex min-h-screen min-w-screen items-center justify-center w-full overflow-hidden",
872
873
  className
873
874
  ),
874
875
  containerClassName,
@@ -882,8 +883,8 @@ function HeroArchitectureFullscreen({
882
883
  optixFlowConfig
883
884
  }
884
885
  ),
885
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 h-full w-full max-w-340 p-8 md:p-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-end gap-6 md:gap-12", children: [
886
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
886
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 h-full w-full max-w-full md:max-w-lg p-8 md:p-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-end gap-6", children: [
887
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
887
888
  tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
888
889
  "p",
889
890
  {
@@ -895,13 +896,51 @@ function HeroArchitectureFullscreen({
895
896
  }
896
897
  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
897
898
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
898
- "h1",
899
+ react.motion.h1,
899
900
  {
900
901
  className: cn(
901
- "text-3xl leading-snug! md:text-4xl lg:text-6xl text-white text-balance text-shadow-xl",
902
+ "text-6xl font-bold md:text-7xl lg:text-8xl text-white text-balance text-shadow-xl tracking-tight leading-0",
902
903
  headingClassName
903
904
  ),
904
- children: heading
905
+ initial: "hidden",
906
+ animate: "visible",
907
+ variants: {
908
+ hidden: {},
909
+ visible: {
910
+ transition: {
911
+ staggerChildren: 0.08,
912
+ delayChildren: 0.15
913
+ }
914
+ }
915
+ },
916
+ children: heading.split(" ").map((word, i) => /* @__PURE__ */ jsxRuntime.jsxs(
917
+ "span",
918
+ {
919
+ className: "inline-block overflow-hidden align-bottom",
920
+ children: [
921
+ /* @__PURE__ */ jsxRuntime.jsx(
922
+ react.motion.span,
923
+ {
924
+ className: "inline-block",
925
+ variants: {
926
+ hidden: { y: "100%", opacity: 0 },
927
+ visible: {
928
+ y: 0,
929
+ opacity: 1,
930
+ transition: {
931
+ duration: 0.5,
932
+ ease: [0.33, 1, 0.68, 1]
933
+ }
934
+ }
935
+ },
936
+ children: word
937
+ }
938
+ ),
939
+ i < heading.split(" ").length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-[0.3em]", children: "\xA0" })
940
+ ]
941
+ },
942
+ `${word}-${i}`
943
+ ))
905
944
  }
906
945
  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }))
907
946
  ] }),
@@ -909,7 +948,7 @@ function HeroArchitectureFullscreen({
909
948
  "p",
910
949
  {
911
950
  className: cn(
912
- "text-base text-balance text-white text-shadow-xl",
951
+ "text-lg md:text-xl text-balance text-white text-shadow-xl",
913
952
  descriptionClassName
914
953
  ),
915
954
  children: description
@@ -1,6 +1,7 @@
1
1
  "use client";
2
2
  import * as React from 'react';
3
3
  import React__default, { useMemo } from 'react';
4
+ import { motion } from 'motion/react';
4
5
  import { clsx } from 'clsx';
5
6
  import { twMerge } from 'tailwind-merge';
6
7
  import { cva } from 'class-variance-authority';
@@ -847,7 +848,7 @@ function HeroArchitectureFullscreen({
847
848
  pattern,
848
849
  patternOpacity,
849
850
  className: cn(
850
- "relative flex min-h-screen min-w-screen items-center justify-center dark w-full overflow-hidden font-poppins",
851
+ "relative flex min-h-screen min-w-screen items-center justify-center w-full overflow-hidden",
851
852
  className
852
853
  ),
853
854
  containerClassName,
@@ -861,8 +862,8 @@ function HeroArchitectureFullscreen({
861
862
  optixFlowConfig
862
863
  }
863
864
  ),
864
- /* @__PURE__ */ jsx("div", { className: "relative z-20 h-full w-full max-w-340 p-8 md:p-24", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-end gap-6 md:gap-12", children: [
865
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
865
+ /* @__PURE__ */ jsx("div", { className: "relative z-20 h-full w-full max-w-full md:max-w-lg p-8 md:p-24", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-end gap-6", children: [
866
+ /* @__PURE__ */ jsxs("div", { className: "relative", children: [
866
867
  tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx(
867
868
  "p",
868
869
  {
@@ -874,13 +875,51 @@ function HeroArchitectureFullscreen({
874
875
  }
875
876
  ) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
876
877
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
877
- "h1",
878
+ motion.h1,
878
879
  {
879
880
  className: cn(
880
- "text-3xl leading-snug! md:text-4xl lg:text-6xl text-white text-balance text-shadow-xl",
881
+ "text-6xl font-bold md:text-7xl lg:text-8xl text-white text-balance text-shadow-xl tracking-tight leading-0",
881
882
  headingClassName
882
883
  ),
883
- children: heading
884
+ initial: "hidden",
885
+ animate: "visible",
886
+ variants: {
887
+ hidden: {},
888
+ visible: {
889
+ transition: {
890
+ staggerChildren: 0.08,
891
+ delayChildren: 0.15
892
+ }
893
+ }
894
+ },
895
+ children: heading.split(" ").map((word, i) => /* @__PURE__ */ jsxs(
896
+ "span",
897
+ {
898
+ className: "inline-block overflow-hidden align-bottom",
899
+ children: [
900
+ /* @__PURE__ */ jsx(
901
+ motion.span,
902
+ {
903
+ className: "inline-block",
904
+ variants: {
905
+ hidden: { y: "100%", opacity: 0 },
906
+ visible: {
907
+ y: 0,
908
+ opacity: 1,
909
+ transition: {
910
+ duration: 0.5,
911
+ ease: [0.33, 1, 0.68, 1]
912
+ }
913
+ }
914
+ },
915
+ children: word
916
+ }
917
+ ),
918
+ i < heading.split(" ").length - 1 && /* @__PURE__ */ jsx("span", { className: "inline-block w-[0.3em]", children: "\xA0" })
919
+ ]
920
+ },
921
+ `${word}-${i}`
922
+ ))
884
923
  }
885
924
  ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading }))
886
925
  ] }),
@@ -888,7 +927,7 @@ function HeroArchitectureFullscreen({
888
927
  "p",
889
928
  {
890
929
  className: cn(
891
- "text-base text-balance text-white text-shadow-xl",
930
+ "text-lg md:text-xl text-balance text-white text-shadow-xl",
892
931
  descriptionClassName
893
932
  ),
894
933
  children: description
@@ -928,12 +928,14 @@ function HeroStatsSocialProof({
928
928
  return /* @__PURE__ */ jsxRuntime.jsx(
929
929
  "div",
930
930
  {
931
- className: cn("absolute -bottom-6 -left-6 rounded-xl p-4 shadow-lg"),
931
+ className: cn(
932
+ "absolute bottom-4 md:-bottom-6 left-4 right-4 md:right-auto md:-left-6 rounded-2xl max-w-md p-4 shadow-2xl bg-card text-card-foreground"
933
+ ),
932
934
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
933
- statusCard.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground", children: statusCard.icon }),
934
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
935
- statusCard.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold ", children: statusCard.title }),
936
- statusCard.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: statusCard.subtitle })
935
+ statusCard.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: statusCard.icon }),
936
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-balance", children: [
937
+ statusCard.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-sm md:text-md leading-snug", children: statusCard.title }),
938
+ statusCard.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-snug tracking-tight", children: statusCard.subtitle })
937
939
  ] })
938
940
  ] })
939
941
  }
@@ -950,7 +952,7 @@ function HeroStatsSocialProof({
950
952
  containerClassName,
951
953
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
952
954
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
953
- badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("px-4 py-2 text-sm", badgeClassName), children: [
955
+ badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("px-4 py-2", badgeClassName), children: [
954
956
  badgeIcon,
955
957
  typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
956
958
  ] }),
@@ -907,12 +907,14 @@ function HeroStatsSocialProof({
907
907
  return /* @__PURE__ */ jsx(
908
908
  "div",
909
909
  {
910
- className: cn("absolute -bottom-6 -left-6 rounded-xl p-4 shadow-lg"),
910
+ className: cn(
911
+ "absolute bottom-4 md:-bottom-6 left-4 right-4 md:right-auto md:-left-6 rounded-2xl max-w-md p-4 shadow-2xl bg-card text-card-foreground"
912
+ ),
911
913
  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
912
- statusCard.icon && /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground", children: statusCard.icon }),
913
- /* @__PURE__ */ jsxs("div", { children: [
914
- statusCard.title && /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: statusCard.title }),
915
- statusCard.subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm", children: statusCard.subtitle })
914
+ statusCard.icon && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: statusCard.icon }),
915
+ /* @__PURE__ */ jsxs("div", { className: "text-balance", children: [
916
+ statusCard.title && /* @__PURE__ */ jsx("div", { className: "font-semibold text-sm md:text-md leading-snug", children: statusCard.title }),
917
+ statusCard.subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm leading-snug tracking-tight", children: statusCard.subtitle })
916
918
  ] })
917
919
  ] })
918
920
  }
@@ -929,7 +931,7 @@ function HeroStatsSocialProof({
929
931
  containerClassName,
930
932
  children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
931
933
  /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
932
- badge && /* @__PURE__ */ jsxs(Badge, { className: cn("px-4 py-2 text-sm", badgeClassName), children: [
934
+ badge && /* @__PURE__ */ jsxs(Badge, { className: cn("px-4 py-2", badgeClassName), children: [
933
935
  badgeIcon,
934
936
  typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge
935
937
  ] }),
package/dist/registry.cjs CHANGED
@@ -56256,12 +56256,14 @@ function HeroStatsSocialProof({
56256
56256
  return /* @__PURE__ */ jsxRuntime.jsx(
56257
56257
  "div",
56258
56258
  {
56259
- className: cn("absolute -bottom-6 -left-6 rounded-xl p-4 shadow-lg"),
56259
+ className: cn(
56260
+ "absolute bottom-4 md:-bottom-6 left-4 right-4 md:right-auto md:-left-6 rounded-2xl max-w-md p-4 shadow-2xl bg-card text-card-foreground"
56261
+ ),
56260
56262
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
56261
- statusCard.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground", children: statusCard.icon }),
56262
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
56263
- statusCard.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold ", children: statusCard.title }),
56264
- statusCard.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: statusCard.subtitle })
56263
+ statusCard.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: statusCard.icon }),
56264
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-balance", children: [
56265
+ statusCard.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-sm md:text-md leading-snug", children: statusCard.title }),
56266
+ statusCard.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-snug tracking-tight", children: statusCard.subtitle })
56265
56267
  ] })
56266
56268
  ] })
56267
56269
  }
@@ -56278,7 +56280,7 @@ function HeroStatsSocialProof({
56278
56280
  containerClassName,
56279
56281
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
56280
56282
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
56281
- badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("px-4 py-2 text-sm", badgeClassName), children: [
56283
+ badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("px-4 py-2", badgeClassName), children: [
56282
56284
  badgeIcon,
56283
56285
  typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
56284
56286
  ] }),
@@ -56803,7 +56805,7 @@ function HeroArchitectureFullscreen({
56803
56805
  pattern,
56804
56806
  patternOpacity,
56805
56807
  className: cn(
56806
- "relative flex min-h-screen min-w-screen items-center justify-center dark w-full overflow-hidden font-poppins",
56808
+ "relative flex min-h-screen min-w-screen items-center justify-center w-full overflow-hidden",
56807
56809
  className
56808
56810
  ),
56809
56811
  containerClassName,
@@ -56817,8 +56819,8 @@ function HeroArchitectureFullscreen({
56817
56819
  optixFlowConfig
56818
56820
  }
56819
56821
  ),
56820
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 h-full w-full max-w-340 p-8 md:p-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-end gap-6 md:gap-12", children: [
56821
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
56822
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 h-full w-full max-w-full md:max-w-lg p-8 md:p-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-end gap-6", children: [
56823
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
56822
56824
  tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
56823
56825
  "p",
56824
56826
  {
@@ -56830,13 +56832,51 @@ function HeroArchitectureFullscreen({
56830
56832
  }
56831
56833
  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
56832
56834
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
56833
- "h1",
56835
+ react.motion.h1,
56834
56836
  {
56835
56837
  className: cn(
56836
- "text-3xl leading-snug! md:text-4xl lg:text-6xl text-white text-balance text-shadow-xl",
56838
+ "text-6xl font-bold md:text-7xl lg:text-8xl text-white text-balance text-shadow-xl tracking-tight leading-0",
56837
56839
  headingClassName
56838
56840
  ),
56839
- children: heading
56841
+ initial: "hidden",
56842
+ animate: "visible",
56843
+ variants: {
56844
+ hidden: {},
56845
+ visible: {
56846
+ transition: {
56847
+ staggerChildren: 0.08,
56848
+ delayChildren: 0.15
56849
+ }
56850
+ }
56851
+ },
56852
+ children: heading.split(" ").map((word, i) => /* @__PURE__ */ jsxRuntime.jsxs(
56853
+ "span",
56854
+ {
56855
+ className: "inline-block overflow-hidden align-bottom",
56856
+ children: [
56857
+ /* @__PURE__ */ jsxRuntime.jsx(
56858
+ react.motion.span,
56859
+ {
56860
+ className: "inline-block",
56861
+ variants: {
56862
+ hidden: { y: "100%", opacity: 0 },
56863
+ visible: {
56864
+ y: 0,
56865
+ opacity: 1,
56866
+ transition: {
56867
+ duration: 0.5,
56868
+ ease: [0.33, 1, 0.68, 1]
56869
+ }
56870
+ }
56871
+ },
56872
+ children: word
56873
+ }
56874
+ ),
56875
+ i < heading.split(" ").length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-[0.3em]", children: "\xA0" })
56876
+ ]
56877
+ },
56878
+ `${word}-${i}`
56879
+ ))
56840
56880
  }
56841
56881
  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }))
56842
56882
  ] }),
@@ -56844,7 +56884,7 @@ function HeroArchitectureFullscreen({
56844
56884
  "p",
56845
56885
  {
56846
56886
  className: cn(
56847
- "text-base text-balance text-white text-shadow-xl",
56887
+ "text-lg md:text-xl text-balance text-white text-shadow-xl",
56848
56888
  descriptionClassName
56849
56889
  ),
56850
56890
  children: description
package/dist/registry.js CHANGED
@@ -56216,12 +56216,14 @@ function HeroStatsSocialProof({
56216
56216
  return /* @__PURE__ */ jsx(
56217
56217
  "div",
56218
56218
  {
56219
- className: cn("absolute -bottom-6 -left-6 rounded-xl p-4 shadow-lg"),
56219
+ className: cn(
56220
+ "absolute bottom-4 md:-bottom-6 left-4 right-4 md:right-auto md:-left-6 rounded-2xl max-w-md p-4 shadow-2xl bg-card text-card-foreground"
56221
+ ),
56220
56222
  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
56221
- statusCard.icon && /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground", children: statusCard.icon }),
56222
- /* @__PURE__ */ jsxs("div", { children: [
56223
- statusCard.title && /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: statusCard.title }),
56224
- statusCard.subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm", children: statusCard.subtitle })
56223
+ statusCard.icon && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: statusCard.icon }),
56224
+ /* @__PURE__ */ jsxs("div", { className: "text-balance", children: [
56225
+ statusCard.title && /* @__PURE__ */ jsx("div", { className: "font-semibold text-sm md:text-md leading-snug", children: statusCard.title }),
56226
+ statusCard.subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm leading-snug tracking-tight", children: statusCard.subtitle })
56225
56227
  ] })
56226
56228
  ] })
56227
56229
  }
@@ -56238,7 +56240,7 @@ function HeroStatsSocialProof({
56238
56240
  containerClassName,
56239
56241
  children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
56240
56242
  /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
56241
- badge && /* @__PURE__ */ jsxs(Badge, { className: cn("px-4 py-2 text-sm", badgeClassName), children: [
56243
+ badge && /* @__PURE__ */ jsxs(Badge, { className: cn("px-4 py-2", badgeClassName), children: [
56242
56244
  badgeIcon,
56243
56245
  typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge
56244
56246
  ] }),
@@ -56763,7 +56765,7 @@ function HeroArchitectureFullscreen({
56763
56765
  pattern,
56764
56766
  patternOpacity,
56765
56767
  className: cn(
56766
- "relative flex min-h-screen min-w-screen items-center justify-center dark w-full overflow-hidden font-poppins",
56768
+ "relative flex min-h-screen min-w-screen items-center justify-center w-full overflow-hidden",
56767
56769
  className
56768
56770
  ),
56769
56771
  containerClassName,
@@ -56777,8 +56779,8 @@ function HeroArchitectureFullscreen({
56777
56779
  optixFlowConfig
56778
56780
  }
56779
56781
  ),
56780
- /* @__PURE__ */ jsx("div", { className: "relative z-20 h-full w-full max-w-340 p-8 md:p-24", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-end gap-6 md:gap-12", children: [
56781
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
56782
+ /* @__PURE__ */ jsx("div", { className: "relative z-20 h-full w-full max-w-full md:max-w-lg p-8 md:p-24", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-end gap-6", children: [
56783
+ /* @__PURE__ */ jsxs("div", { className: "relative", children: [
56782
56784
  tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx(
56783
56785
  "p",
56784
56786
  {
@@ -56790,13 +56792,51 @@ function HeroArchitectureFullscreen({
56790
56792
  }
56791
56793
  ) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
56792
56794
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
56793
- "h1",
56795
+ motion$1.h1,
56794
56796
  {
56795
56797
  className: cn(
56796
- "text-3xl leading-snug! md:text-4xl lg:text-6xl text-white text-balance text-shadow-xl",
56798
+ "text-6xl font-bold md:text-7xl lg:text-8xl text-white text-balance text-shadow-xl tracking-tight leading-0",
56797
56799
  headingClassName
56798
56800
  ),
56799
- children: heading
56801
+ initial: "hidden",
56802
+ animate: "visible",
56803
+ variants: {
56804
+ hidden: {},
56805
+ visible: {
56806
+ transition: {
56807
+ staggerChildren: 0.08,
56808
+ delayChildren: 0.15
56809
+ }
56810
+ }
56811
+ },
56812
+ children: heading.split(" ").map((word, i) => /* @__PURE__ */ jsxs(
56813
+ "span",
56814
+ {
56815
+ className: "inline-block overflow-hidden align-bottom",
56816
+ children: [
56817
+ /* @__PURE__ */ jsx(
56818
+ motion$1.span,
56819
+ {
56820
+ className: "inline-block",
56821
+ variants: {
56822
+ hidden: { y: "100%", opacity: 0 },
56823
+ visible: {
56824
+ y: 0,
56825
+ opacity: 1,
56826
+ transition: {
56827
+ duration: 0.5,
56828
+ ease: [0.33, 1, 0.68, 1]
56829
+ }
56830
+ }
56831
+ },
56832
+ children: word
56833
+ }
56834
+ ),
56835
+ i < heading.split(" ").length - 1 && /* @__PURE__ */ jsx("span", { className: "inline-block w-[0.3em]", children: "\xA0" })
56836
+ ]
56837
+ },
56838
+ `${word}-${i}`
56839
+ ))
56800
56840
  }
56801
56841
  ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading }))
56802
56842
  ] }),
@@ -56804,7 +56844,7 @@ function HeroArchitectureFullscreen({
56804
56844
  "p",
56805
56845
  {
56806
56846
  className: cn(
56807
- "text-base text-balance text-white text-shadow-xl",
56847
+ "text-lg md:text-xl text-balance text-white text-shadow-xl",
56808
56848
  descriptionClassName
56809
56849
  ),
56810
56850
  children: description
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opensite/ui",
3
- "version": "1.8.5",
3
+ "version": "1.8.6",
4
4
  "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
5
5
  "keywords": [
6
6
  "react",
@@ -3378,8 +3378,8 @@
3378
3378
  "vitest": "^4.0.10"
3379
3379
  },
3380
3380
  "dependencies": {
3381
- "@opensite/hooks": "2.0.7",
3382
- "@page-speed/forms": "0.4.6",
3381
+ "@opensite/hooks": "2.0.8",
3382
+ "@page-speed/forms": "0.4.7",
3383
3383
  "@page-speed/img": "0.4.5",
3384
3384
  "@page-speed/lightbox": "0.2.1",
3385
3385
  "@page-speed/pdf-viewer": "0.1.9",