virtual-ui-lib 1.0.56 → 1.0.58
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/index.js +196 -0
- package/dist/index.mjs +194 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
var index_exports = {};
|
|
31
31
|
__export(index_exports, {
|
|
32
32
|
Avatar: () => Avatar,
|
|
33
|
+
AvatarCard: () => AvatarCard,
|
|
33
34
|
CodeBlock: () => CodeBlock,
|
|
34
35
|
CustomInputField: () => CustomInputField,
|
|
35
36
|
DividerLine: () => DividerLine,
|
|
@@ -38,6 +39,7 @@ __export(index_exports, {
|
|
|
38
39
|
LoadingSpinner: () => LoadingSpinner,
|
|
39
40
|
NotificationToast: () => NotificationToast,
|
|
40
41
|
OtpInput: () => OtpInput,
|
|
42
|
+
PricingCard: () => PricingCard,
|
|
41
43
|
ResponsiveNavbar: () => ResponsiveNavbar,
|
|
42
44
|
SearchBar: () => SearchBar,
|
|
43
45
|
SkeletonLoader: () => SkeletonLoader,
|
|
@@ -818,9 +820,202 @@ var NotificationToast = ({
|
|
|
818
820
|
borderRadius: "0 2px 2px 0"
|
|
819
821
|
} })));
|
|
820
822
|
};
|
|
823
|
+
|
|
824
|
+
// src/components/AvatarCard/AvatarCard.jsx
|
|
825
|
+
var import_react18 = __toESM(require("react"));
|
|
826
|
+
var AvatarCard = ({
|
|
827
|
+
name = "Aryan Sharma",
|
|
828
|
+
role = "Frontend Developer",
|
|
829
|
+
followers = 2400,
|
|
830
|
+
following = 180,
|
|
831
|
+
projects = 34,
|
|
832
|
+
bio = "Building beautiful UIs one component at a time.",
|
|
833
|
+
avatar = "",
|
|
834
|
+
accent = "#6366f1",
|
|
835
|
+
bg = "#0f172a",
|
|
836
|
+
radius = "20px"
|
|
837
|
+
}) => {
|
|
838
|
+
const [followed, setFollowed] = (0, import_react18.useState)(false);
|
|
839
|
+
const alpha = (hex, op) => {
|
|
840
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
841
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
842
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
843
|
+
return `rgba(${r},${g},${b},${op})`;
|
|
844
|
+
};
|
|
845
|
+
const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
|
|
846
|
+
const stats = [
|
|
847
|
+
{ label: "Followers", value: followed ? followers + 1 : followers },
|
|
848
|
+
{ label: "Following", value: following },
|
|
849
|
+
{ label: "Projects", value: projects }
|
|
850
|
+
];
|
|
851
|
+
return /* @__PURE__ */ import_react18.default.createElement("div", { style: {
|
|
852
|
+
background: bg,
|
|
853
|
+
borderRadius: radius,
|
|
854
|
+
padding: "24px 20px",
|
|
855
|
+
width: "280px",
|
|
856
|
+
color: "#fff",
|
|
857
|
+
fontFamily: "system-ui, sans-serif",
|
|
858
|
+
boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
|
|
859
|
+
border: "1px solid rgba(255,255,255,0.08)",
|
|
860
|
+
position: "relative",
|
|
861
|
+
overflow: "hidden"
|
|
862
|
+
} }, /* @__PURE__ */ import_react18.default.createElement("div", { style: {
|
|
863
|
+
position: "absolute",
|
|
864
|
+
top: 0,
|
|
865
|
+
left: 0,
|
|
866
|
+
right: 0,
|
|
867
|
+
height: "3px",
|
|
868
|
+
background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
|
|
869
|
+
} }), /* @__PURE__ */ import_react18.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", marginBottom: "16px" } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: {
|
|
870
|
+
width: 72,
|
|
871
|
+
height: 72,
|
|
872
|
+
borderRadius: "50%",
|
|
873
|
+
background: avatar ? `url(${avatar}) center/cover` : `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.5)})`,
|
|
874
|
+
display: "flex",
|
|
875
|
+
alignItems: "center",
|
|
876
|
+
justifyContent: "center",
|
|
877
|
+
fontSize: "24px",
|
|
878
|
+
fontWeight: "800",
|
|
879
|
+
color: "#fff",
|
|
880
|
+
border: `3px solid ${alpha(accent, 0.4)}`,
|
|
881
|
+
marginBottom: "12px"
|
|
882
|
+
} }, !avatar && initials), /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: "16px", fontWeight: "700", marginBottom: "3px" } }, name), /* @__PURE__ */ import_react18.default.createElement("div", { style: {
|
|
883
|
+
fontSize: "12px",
|
|
884
|
+
fontWeight: "600",
|
|
885
|
+
color: accent,
|
|
886
|
+
background: alpha(accent, 0.12),
|
|
887
|
+
padding: "2px 10px",
|
|
888
|
+
borderRadius: "20px",
|
|
889
|
+
border: `1px solid ${alpha(accent, 0.3)}`
|
|
890
|
+
} }, role)), /* @__PURE__ */ import_react18.default.createElement("p", { style: {
|
|
891
|
+
fontSize: "12px",
|
|
892
|
+
color: "rgba(255,255,255,0.45)",
|
|
893
|
+
textAlign: "center",
|
|
894
|
+
lineHeight: 1.6,
|
|
895
|
+
marginBottom: "18px",
|
|
896
|
+
padding: "0 4px"
|
|
897
|
+
} }, bio), /* @__PURE__ */ import_react18.default.createElement("div", { style: {
|
|
898
|
+
display: "flex",
|
|
899
|
+
justifyContent: "space-around",
|
|
900
|
+
background: "rgba(255,255,255,0.04)",
|
|
901
|
+
border: "1px solid rgba(255,255,255,0.07)",
|
|
902
|
+
borderRadius: "12px",
|
|
903
|
+
padding: "12px 8px",
|
|
904
|
+
marginBottom: "16px"
|
|
905
|
+
} }, stats.map((s) => /* @__PURE__ */ import_react18.default.createElement("div", { key: s.label, style: { textAlign: "center" } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: "18px", fontWeight: "800" } }, s.value >= 1e3 ? (s.value / 1e3).toFixed(1) + "k" : s.value), /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: "10px", color: "rgba(255,255,255,0.4)", marginTop: "2px" } }, s.label)))));
|
|
906
|
+
};
|
|
907
|
+
|
|
908
|
+
// src/components/PricingCard/PricingCard.jsx
|
|
909
|
+
var import_react19 = __toESM(require("react"));
|
|
910
|
+
var PricingCard = ({
|
|
911
|
+
planName = "Pro Plan",
|
|
912
|
+
description = "For teams that need more power.",
|
|
913
|
+
price = 29,
|
|
914
|
+
currency = "$",
|
|
915
|
+
period = "per month",
|
|
916
|
+
badgeText = "Most Popular",
|
|
917
|
+
ctaText = "Get Started",
|
|
918
|
+
accent = "#6366f1",
|
|
919
|
+
bg = "#0f172a",
|
|
920
|
+
radius = "20px",
|
|
921
|
+
features = [
|
|
922
|
+
"Unlimited projects",
|
|
923
|
+
"Priority support",
|
|
924
|
+
"Advanced analytics",
|
|
925
|
+
"Custom integrations",
|
|
926
|
+
"Team collaboration"
|
|
927
|
+
],
|
|
928
|
+
onCtaClick = () => {
|
|
929
|
+
}
|
|
930
|
+
}) => {
|
|
931
|
+
const alpha = (hex, op) => {
|
|
932
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
933
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
934
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
935
|
+
return `rgba(${r},${g},${b},${op})`;
|
|
936
|
+
};
|
|
937
|
+
return /* @__PURE__ */ import_react19.default.createElement("div", { style: {
|
|
938
|
+
background: bg,
|
|
939
|
+
borderRadius: radius,
|
|
940
|
+
padding: "28px 24px",
|
|
941
|
+
width: "300px",
|
|
942
|
+
color: "#fff",
|
|
943
|
+
fontFamily: "system-ui, sans-serif",
|
|
944
|
+
boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
|
|
945
|
+
border: `1px solid ${alpha(accent, 0.25)}`,
|
|
946
|
+
position: "relative",
|
|
947
|
+
overflow: "hidden"
|
|
948
|
+
} }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
|
|
949
|
+
position: "absolute",
|
|
950
|
+
top: 0,
|
|
951
|
+
left: 0,
|
|
952
|
+
right: 0,
|
|
953
|
+
height: "3px",
|
|
954
|
+
background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
|
|
955
|
+
} }), badgeText && /* @__PURE__ */ import_react19.default.createElement("div", { style: {
|
|
956
|
+
display: "inline-flex",
|
|
957
|
+
alignItems: "center",
|
|
958
|
+
gap: "6px",
|
|
959
|
+
padding: "4px 12px",
|
|
960
|
+
borderRadius: "100px",
|
|
961
|
+
marginBottom: "14px",
|
|
962
|
+
background: alpha(accent, 0.12),
|
|
963
|
+
border: `1px solid ${alpha(accent, 0.3)}`,
|
|
964
|
+
fontSize: "11px",
|
|
965
|
+
fontWeight: "700",
|
|
966
|
+
color: accent,
|
|
967
|
+
letterSpacing: "0.5px",
|
|
968
|
+
textTransform: "uppercase"
|
|
969
|
+
} }, /* @__PURE__ */ import_react19.default.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ import_react19.default.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ import_react19.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px", lineHeight: 1.5 } }, description), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "52px", fontWeight: "800", color: "#fff", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ import_react19.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ import_react19.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ import_react19.default.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ import_react19.default.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)" } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
|
|
970
|
+
width: "18px",
|
|
971
|
+
height: "18px",
|
|
972
|
+
borderRadius: "50%",
|
|
973
|
+
flexShrink: 0,
|
|
974
|
+
display: "flex",
|
|
975
|
+
alignItems: "center",
|
|
976
|
+
justifyContent: "center",
|
|
977
|
+
background: alpha(accent, 0.18),
|
|
978
|
+
border: `1px solid ${alpha(accent, 0.4)}`
|
|
979
|
+
} }, /* @__PURE__ */ import_react19.default.createElement(
|
|
980
|
+
"svg",
|
|
981
|
+
{
|
|
982
|
+
width: "10",
|
|
983
|
+
height: "10",
|
|
984
|
+
viewBox: "0 0 12 12",
|
|
985
|
+
fill: "none",
|
|
986
|
+
stroke: "#fff",
|
|
987
|
+
strokeWidth: "2",
|
|
988
|
+
strokeLinecap: "round",
|
|
989
|
+
strokeLinejoin: "round"
|
|
990
|
+
},
|
|
991
|
+
/* @__PURE__ */ import_react19.default.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" })
|
|
992
|
+
)), f))), /* @__PURE__ */ import_react19.default.createElement(
|
|
993
|
+
"button",
|
|
994
|
+
{
|
|
995
|
+
onClick: onCtaClick,
|
|
996
|
+
style: {
|
|
997
|
+
width: "100%",
|
|
998
|
+
padding: "13px",
|
|
999
|
+
borderRadius: "12px",
|
|
1000
|
+
border: "none",
|
|
1001
|
+
background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
|
|
1002
|
+
color: "#fff",
|
|
1003
|
+
fontSize: "14px",
|
|
1004
|
+
fontWeight: "700",
|
|
1005
|
+
cursor: "pointer",
|
|
1006
|
+
letterSpacing: "0.2px",
|
|
1007
|
+
fontFamily: "system-ui, sans-serif"
|
|
1008
|
+
},
|
|
1009
|
+
onMouseEnter: (e) => e.currentTarget.style.opacity = "0.88",
|
|
1010
|
+
onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
|
|
1011
|
+
},
|
|
1012
|
+
ctaText
|
|
1013
|
+
));
|
|
1014
|
+
};
|
|
821
1015
|
// Annotate the CommonJS export names for ESM import in node:
|
|
822
1016
|
0 && (module.exports = {
|
|
823
1017
|
Avatar,
|
|
1018
|
+
AvatarCard,
|
|
824
1019
|
CodeBlock,
|
|
825
1020
|
CustomInputField,
|
|
826
1021
|
DividerLine,
|
|
@@ -829,6 +1024,7 @@ var NotificationToast = ({
|
|
|
829
1024
|
LoadingSpinner,
|
|
830
1025
|
NotificationToast,
|
|
831
1026
|
OtpInput,
|
|
1027
|
+
PricingCard,
|
|
832
1028
|
ResponsiveNavbar,
|
|
833
1029
|
SearchBar,
|
|
834
1030
|
SkeletonLoader,
|
package/dist/index.mjs
CHANGED
|
@@ -767,8 +767,201 @@ var NotificationToast = ({
|
|
|
767
767
|
borderRadius: "0 2px 2px 0"
|
|
768
768
|
} })));
|
|
769
769
|
};
|
|
770
|
+
|
|
771
|
+
// src/components/AvatarCard/AvatarCard.jsx
|
|
772
|
+
import React18, { useState as useState12 } from "react";
|
|
773
|
+
var AvatarCard = ({
|
|
774
|
+
name = "Aryan Sharma",
|
|
775
|
+
role = "Frontend Developer",
|
|
776
|
+
followers = 2400,
|
|
777
|
+
following = 180,
|
|
778
|
+
projects = 34,
|
|
779
|
+
bio = "Building beautiful UIs one component at a time.",
|
|
780
|
+
avatar = "",
|
|
781
|
+
accent = "#6366f1",
|
|
782
|
+
bg = "#0f172a",
|
|
783
|
+
radius = "20px"
|
|
784
|
+
}) => {
|
|
785
|
+
const [followed, setFollowed] = useState12(false);
|
|
786
|
+
const alpha = (hex, op) => {
|
|
787
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
788
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
789
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
790
|
+
return `rgba(${r},${g},${b},${op})`;
|
|
791
|
+
};
|
|
792
|
+
const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
|
|
793
|
+
const stats = [
|
|
794
|
+
{ label: "Followers", value: followed ? followers + 1 : followers },
|
|
795
|
+
{ label: "Following", value: following },
|
|
796
|
+
{ label: "Projects", value: projects }
|
|
797
|
+
];
|
|
798
|
+
return /* @__PURE__ */ React18.createElement("div", { style: {
|
|
799
|
+
background: bg,
|
|
800
|
+
borderRadius: radius,
|
|
801
|
+
padding: "24px 20px",
|
|
802
|
+
width: "280px",
|
|
803
|
+
color: "#fff",
|
|
804
|
+
fontFamily: "system-ui, sans-serif",
|
|
805
|
+
boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
|
|
806
|
+
border: "1px solid rgba(255,255,255,0.08)",
|
|
807
|
+
position: "relative",
|
|
808
|
+
overflow: "hidden"
|
|
809
|
+
} }, /* @__PURE__ */ React18.createElement("div", { style: {
|
|
810
|
+
position: "absolute",
|
|
811
|
+
top: 0,
|
|
812
|
+
left: 0,
|
|
813
|
+
right: 0,
|
|
814
|
+
height: "3px",
|
|
815
|
+
background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
|
|
816
|
+
} }), /* @__PURE__ */ React18.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", marginBottom: "16px" } }, /* @__PURE__ */ React18.createElement("div", { style: {
|
|
817
|
+
width: 72,
|
|
818
|
+
height: 72,
|
|
819
|
+
borderRadius: "50%",
|
|
820
|
+
background: avatar ? `url(${avatar}) center/cover` : `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.5)})`,
|
|
821
|
+
display: "flex",
|
|
822
|
+
alignItems: "center",
|
|
823
|
+
justifyContent: "center",
|
|
824
|
+
fontSize: "24px",
|
|
825
|
+
fontWeight: "800",
|
|
826
|
+
color: "#fff",
|
|
827
|
+
border: `3px solid ${alpha(accent, 0.4)}`,
|
|
828
|
+
marginBottom: "12px"
|
|
829
|
+
} }, !avatar && initials), /* @__PURE__ */ React18.createElement("div", { style: { fontSize: "16px", fontWeight: "700", marginBottom: "3px" } }, name), /* @__PURE__ */ React18.createElement("div", { style: {
|
|
830
|
+
fontSize: "12px",
|
|
831
|
+
fontWeight: "600",
|
|
832
|
+
color: accent,
|
|
833
|
+
background: alpha(accent, 0.12),
|
|
834
|
+
padding: "2px 10px",
|
|
835
|
+
borderRadius: "20px",
|
|
836
|
+
border: `1px solid ${alpha(accent, 0.3)}`
|
|
837
|
+
} }, role)), /* @__PURE__ */ React18.createElement("p", { style: {
|
|
838
|
+
fontSize: "12px",
|
|
839
|
+
color: "rgba(255,255,255,0.45)",
|
|
840
|
+
textAlign: "center",
|
|
841
|
+
lineHeight: 1.6,
|
|
842
|
+
marginBottom: "18px",
|
|
843
|
+
padding: "0 4px"
|
|
844
|
+
} }, bio), /* @__PURE__ */ React18.createElement("div", { style: {
|
|
845
|
+
display: "flex",
|
|
846
|
+
justifyContent: "space-around",
|
|
847
|
+
background: "rgba(255,255,255,0.04)",
|
|
848
|
+
border: "1px solid rgba(255,255,255,0.07)",
|
|
849
|
+
borderRadius: "12px",
|
|
850
|
+
padding: "12px 8px",
|
|
851
|
+
marginBottom: "16px"
|
|
852
|
+
} }, stats.map((s) => /* @__PURE__ */ React18.createElement("div", { key: s.label, style: { textAlign: "center" } }, /* @__PURE__ */ React18.createElement("div", { style: { fontSize: "18px", fontWeight: "800" } }, s.value >= 1e3 ? (s.value / 1e3).toFixed(1) + "k" : s.value), /* @__PURE__ */ React18.createElement("div", { style: { fontSize: "10px", color: "rgba(255,255,255,0.4)", marginTop: "2px" } }, s.label)))));
|
|
853
|
+
};
|
|
854
|
+
|
|
855
|
+
// src/components/PricingCard/PricingCard.jsx
|
|
856
|
+
import React19 from "react";
|
|
857
|
+
var PricingCard = ({
|
|
858
|
+
planName = "Pro Plan",
|
|
859
|
+
description = "For teams that need more power.",
|
|
860
|
+
price = 29,
|
|
861
|
+
currency = "$",
|
|
862
|
+
period = "per month",
|
|
863
|
+
badgeText = "Most Popular",
|
|
864
|
+
ctaText = "Get Started",
|
|
865
|
+
accent = "#6366f1",
|
|
866
|
+
bg = "#0f172a",
|
|
867
|
+
radius = "20px",
|
|
868
|
+
features = [
|
|
869
|
+
"Unlimited projects",
|
|
870
|
+
"Priority support",
|
|
871
|
+
"Advanced analytics",
|
|
872
|
+
"Custom integrations",
|
|
873
|
+
"Team collaboration"
|
|
874
|
+
],
|
|
875
|
+
onCtaClick = () => {
|
|
876
|
+
}
|
|
877
|
+
}) => {
|
|
878
|
+
const alpha = (hex, op) => {
|
|
879
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
880
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
881
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
882
|
+
return `rgba(${r},${g},${b},${op})`;
|
|
883
|
+
};
|
|
884
|
+
return /* @__PURE__ */ React19.createElement("div", { style: {
|
|
885
|
+
background: bg,
|
|
886
|
+
borderRadius: radius,
|
|
887
|
+
padding: "28px 24px",
|
|
888
|
+
width: "300px",
|
|
889
|
+
color: "#fff",
|
|
890
|
+
fontFamily: "system-ui, sans-serif",
|
|
891
|
+
boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
|
|
892
|
+
border: `1px solid ${alpha(accent, 0.25)}`,
|
|
893
|
+
position: "relative",
|
|
894
|
+
overflow: "hidden"
|
|
895
|
+
} }, /* @__PURE__ */ React19.createElement("div", { style: {
|
|
896
|
+
position: "absolute",
|
|
897
|
+
top: 0,
|
|
898
|
+
left: 0,
|
|
899
|
+
right: 0,
|
|
900
|
+
height: "3px",
|
|
901
|
+
background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
|
|
902
|
+
} }), badgeText && /* @__PURE__ */ React19.createElement("div", { style: {
|
|
903
|
+
display: "inline-flex",
|
|
904
|
+
alignItems: "center",
|
|
905
|
+
gap: "6px",
|
|
906
|
+
padding: "4px 12px",
|
|
907
|
+
borderRadius: "100px",
|
|
908
|
+
marginBottom: "14px",
|
|
909
|
+
background: alpha(accent, 0.12),
|
|
910
|
+
border: `1px solid ${alpha(accent, 0.3)}`,
|
|
911
|
+
fontSize: "11px",
|
|
912
|
+
fontWeight: "700",
|
|
913
|
+
color: accent,
|
|
914
|
+
letterSpacing: "0.5px",
|
|
915
|
+
textTransform: "uppercase"
|
|
916
|
+
} }, /* @__PURE__ */ React19.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ React19.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ React19.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px", lineHeight: 1.5 } }, description), /* @__PURE__ */ React19.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ React19.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ React19.createElement("span", { style: { fontSize: "52px", fontWeight: "800", color: "#fff", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ React19.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ React19.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ React19.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ React19.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)" } }, /* @__PURE__ */ React19.createElement("div", { style: {
|
|
917
|
+
width: "18px",
|
|
918
|
+
height: "18px",
|
|
919
|
+
borderRadius: "50%",
|
|
920
|
+
flexShrink: 0,
|
|
921
|
+
display: "flex",
|
|
922
|
+
alignItems: "center",
|
|
923
|
+
justifyContent: "center",
|
|
924
|
+
background: alpha(accent, 0.18),
|
|
925
|
+
border: `1px solid ${alpha(accent, 0.4)}`
|
|
926
|
+
} }, /* @__PURE__ */ React19.createElement(
|
|
927
|
+
"svg",
|
|
928
|
+
{
|
|
929
|
+
width: "10",
|
|
930
|
+
height: "10",
|
|
931
|
+
viewBox: "0 0 12 12",
|
|
932
|
+
fill: "none",
|
|
933
|
+
stroke: "#fff",
|
|
934
|
+
strokeWidth: "2",
|
|
935
|
+
strokeLinecap: "round",
|
|
936
|
+
strokeLinejoin: "round"
|
|
937
|
+
},
|
|
938
|
+
/* @__PURE__ */ React19.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" })
|
|
939
|
+
)), f))), /* @__PURE__ */ React19.createElement(
|
|
940
|
+
"button",
|
|
941
|
+
{
|
|
942
|
+
onClick: onCtaClick,
|
|
943
|
+
style: {
|
|
944
|
+
width: "100%",
|
|
945
|
+
padding: "13px",
|
|
946
|
+
borderRadius: "12px",
|
|
947
|
+
border: "none",
|
|
948
|
+
background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
|
|
949
|
+
color: "#fff",
|
|
950
|
+
fontSize: "14px",
|
|
951
|
+
fontWeight: "700",
|
|
952
|
+
cursor: "pointer",
|
|
953
|
+
letterSpacing: "0.2px",
|
|
954
|
+
fontFamily: "system-ui, sans-serif"
|
|
955
|
+
},
|
|
956
|
+
onMouseEnter: (e) => e.currentTarget.style.opacity = "0.88",
|
|
957
|
+
onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
|
|
958
|
+
},
|
|
959
|
+
ctaText
|
|
960
|
+
));
|
|
961
|
+
};
|
|
770
962
|
export {
|
|
771
963
|
Avatar,
|
|
964
|
+
AvatarCard,
|
|
772
965
|
CodeBlock,
|
|
773
966
|
CustomInputField,
|
|
774
967
|
DividerLine,
|
|
@@ -777,6 +970,7 @@ export {
|
|
|
777
970
|
LoadingSpinner,
|
|
778
971
|
NotificationToast,
|
|
779
972
|
OtpInput,
|
|
973
|
+
PricingCard,
|
|
780
974
|
ResponsiveNavbar,
|
|
781
975
|
SearchBar,
|
|
782
976
|
SkeletonLoader,
|