shared-features 0.1.9 → 0.1.11
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/{admin-commonFeatures-CFhvjgp9.js → admin-commonFeatures-B-kV50BY.js} +2 -2
- package/dist/{admin-commonFeatures-CFhvjgp9.js.map → admin-commonFeatures-B-kV50BY.js.map} +1 -1
- package/dist/{admin-commonFeatures-pnaXeix_.cjs → admin-commonFeatures-BhJ3VunK.cjs} +2 -2
- package/dist/{admin-commonFeatures-pnaXeix_.cjs.map → admin-commonFeatures-BhJ3VunK.cjs.map} +1 -1
- package/dist/{broadcasts-DZsQNd4R.cjs → broadcasts-DjHsU8f1.cjs} +2 -2
- package/dist/{broadcasts-DZsQNd4R.cjs.map → broadcasts-DjHsU8f1.cjs.map} +1 -1
- package/dist/{broadcasts-Dlu51_38.js → broadcasts-aT9Tsryo.js} +2 -2
- package/dist/{broadcasts-Dlu51_38.js.map → broadcasts-aT9Tsryo.js.map} +1 -1
- package/dist/{commonFeatures-BuY97_K4.cjs → commonFeatures-BQH2DNB-.cjs} +47 -5
- package/dist/commonFeatures-BQH2DNB-.cjs.map +1 -0
- package/dist/{commonFeatures-LzPnbR6z.js → commonFeatures-C2hhoiJs.js} +47 -5
- package/dist/commonFeatures-C2hhoiJs.js.map +1 -0
- package/dist/components/ads/AdCarousel.d.ts +1 -1
- package/dist/components/ads/AdCarousel.d.ts.map +1 -1
- package/dist/components/ads/TopbarAdBanner.d.ts +1 -1
- package/dist/components/ads/TopbarAdBanner.d.ts.map +1 -1
- package/dist/components/index.cjs +1 -1
- package/dist/components/index.js +1 -1
- package/dist/hooks/index.cjs +2 -2
- package/dist/hooks/index.js +2 -2
- package/dist/{index-gXNz1Cox.js → index-BA8TGVYV.js} +618 -247
- package/dist/index-BA8TGVYV.js.map +1 -0
- package/dist/{index--8iNqKw6.cjs → index-ClreioC9.cjs} +616 -245
- package/dist/index-ClreioC9.cjs.map +1 -0
- package/dist/index.cjs +6 -6
- package/dist/index.js +6 -6
- package/dist/services/campaigns.d.ts.map +1 -1
- package/dist/services/index.cjs +3 -3
- package/dist/services/index.js +3 -3
- package/dist/{useCommonFeatures-CnmI83Er.js → useCommonFeatures-CYaONfel.js} +2 -2
- package/dist/{useCommonFeatures-CnmI83Er.js.map → useCommonFeatures-CYaONfel.js.map} +1 -1
- package/dist/{useCommonFeatures-CWqe4EhH.cjs → useCommonFeatures-Cy_bUPF6.cjs} +2 -2
- package/dist/{useCommonFeatures-CWqe4EhH.cjs.map → useCommonFeatures-Cy_bUPF6.cjs.map} +1 -1
- package/dist/{useFeatureFlags-9_E7gair.cjs → useFeatureFlags-BHfgRauR.cjs} +3 -3
- package/dist/{useFeatureFlags-9_E7gair.cjs.map → useFeatureFlags-BHfgRauR.cjs.map} +1 -1
- package/dist/{useFeatureFlags-DhIb0HYi.js → useFeatureFlags-CLPlwJmq.js} +3 -3
- package/dist/{useFeatureFlags-DhIb0HYi.js.map → useFeatureFlags-CLPlwJmq.js.map} +1 -1
- package/package.json +1 -1
- package/dist/commonFeatures-BuY97_K4.cjs.map +0 -1
- package/dist/commonFeatures-LzPnbR6z.js.map +0 -1
- package/dist/index--8iNqKw6.cjs.map +0 -1
- package/dist/index-gXNz1Cox.js.map +0 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, useEffect, useCallback, useState } from "react";
|
|
3
|
-
import { Box, IconButton, Flex, Text, Button, Card, Badge, Link, Dialog, Heading, Checkbox, Grid, Separator, Avatar } from "@radix-ui/themes";
|
|
3
|
+
import { Box, IconButton, Flex, Text, Button, Card, Badge, Link, Dialog, Heading, Checkbox, Grid, Container, Separator, Avatar } from "@radix-ui/themes";
|
|
4
4
|
import { Cross2Icon } from "@radix-ui/react-icons";
|
|
5
|
-
import { a as useCampaign, e as useOneTimeAdModal, m as useUpdateAdModal, b as useCampaigns, u as useAddressInfo, c as useContactInfo, d as useDeveloperInfo, i as useServices, j as useSkills, k as useSocialLinks, l as useTestimonials } from "./useCommonFeatures-
|
|
6
|
-
import { Sparkles, X, ExternalLink, Check, Gift, Play, Quote, ChevronLeft, ChevronRight, Megaphone, CheckCircle, AlertTriangle, AlertCircle, Info, Bell, MapPin, Mail, Phone, MessageCircle, Globe, Github, Linkedin, Briefcase,
|
|
7
|
-
import { R as isInitialized, E as getConfig } from "./commonFeatures-
|
|
5
|
+
import { a as useCampaign, e as useOneTimeAdModal, m as useUpdateAdModal, b as useCampaigns, u as useAddressInfo, c as useContactInfo, d as useDeveloperInfo, i as useServices, j as useSkills, k as useSocialLinks, l as useTestimonials } from "./useCommonFeatures-CYaONfel.js";
|
|
6
|
+
import { Sparkles, X, ExternalLink, Check, Gift, Play, Quote, ChevronLeft, ChevronRight, Zap, Star, ArrowRight, Megaphone, CheckCircle, AlertTriangle, AlertCircle, Info, Bell, MapPin, Mail, Phone, MessageCircle, Globe, Github, Linkedin, Briefcase, Code, Twitter } from "lucide-react";
|
|
7
|
+
import { R as isInitialized, E as getConfig } from "./commonFeatures-C2hhoiJs.js";
|
|
8
8
|
function AdPanel({
|
|
9
9
|
placement,
|
|
10
10
|
variant: _variant = "small_panel_2",
|
|
@@ -1482,6 +1482,7 @@ function TopbarAdBanner({
|
|
|
1482
1482
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
1483
1483
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
1484
1484
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
1485
|
+
const [progress, setProgress] = useState(0);
|
|
1485
1486
|
const trackedImpressions = useRef(/* @__PURE__ */ new Set());
|
|
1486
1487
|
const timerRef = useRef(null);
|
|
1487
1488
|
useEffect(() => {
|
|
@@ -1515,17 +1516,27 @@ function TopbarAdBanner({
|
|
|
1515
1516
|
}, [currentIndex, campaigns, recordImpression]);
|
|
1516
1517
|
useEffect(() => {
|
|
1517
1518
|
if (campaigns.length <= 1) return;
|
|
1519
|
+
setProgress(0);
|
|
1520
|
+
const progressInterval = 50;
|
|
1521
|
+
const steps = rotationInterval / progressInterval;
|
|
1522
|
+
let currentStep = 0;
|
|
1518
1523
|
timerRef.current = setInterval(() => {
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1524
|
+
currentStep++;
|
|
1525
|
+
setProgress(currentStep / steps * 100);
|
|
1526
|
+
if (currentStep >= steps) {
|
|
1527
|
+
setIsAnimating(true);
|
|
1528
|
+
setTimeout(() => {
|
|
1529
|
+
setCurrentIndex((prev) => (prev + 1) % campaigns.length);
|
|
1530
|
+
setProgress(0);
|
|
1531
|
+
currentStep = 0;
|
|
1532
|
+
setTimeout(() => setIsAnimating(false), 50);
|
|
1533
|
+
}, 200);
|
|
1534
|
+
}
|
|
1535
|
+
}, progressInterval);
|
|
1525
1536
|
return () => {
|
|
1526
1537
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
1527
1538
|
};
|
|
1528
|
-
}, [campaigns.length, rotationInterval]);
|
|
1539
|
+
}, [campaigns.length, rotationInterval, currentIndex]);
|
|
1529
1540
|
const handleClick = useCallback(
|
|
1530
1541
|
(campaign2) => {
|
|
1531
1542
|
recordClick(campaign2);
|
|
@@ -1534,22 +1545,26 @@ function TopbarAdBanner({
|
|
|
1534
1545
|
},
|
|
1535
1546
|
[recordClick]
|
|
1536
1547
|
);
|
|
1537
|
-
const
|
|
1548
|
+
const resetTimer = useCallback(() => {
|
|
1538
1549
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
1550
|
+
setProgress(0);
|
|
1551
|
+
}, []);
|
|
1552
|
+
const goToPrev = useCallback(() => {
|
|
1553
|
+
resetTimer();
|
|
1539
1554
|
setIsAnimating(true);
|
|
1540
1555
|
setTimeout(() => {
|
|
1541
1556
|
setCurrentIndex((prev) => (prev - 1 + campaigns.length) % campaigns.length);
|
|
1542
1557
|
setTimeout(() => setIsAnimating(false), 50);
|
|
1543
1558
|
}, 200);
|
|
1544
|
-
}, [campaigns.length]);
|
|
1559
|
+
}, [campaigns.length, resetTimer]);
|
|
1545
1560
|
const goToNext = useCallback(() => {
|
|
1546
|
-
|
|
1561
|
+
resetTimer();
|
|
1547
1562
|
setIsAnimating(true);
|
|
1548
1563
|
setTimeout(() => {
|
|
1549
1564
|
setCurrentIndex((prev) => (prev + 1) % campaigns.length);
|
|
1550
1565
|
setTimeout(() => setIsAnimating(false), 50);
|
|
1551
1566
|
}, 200);
|
|
1552
|
-
}, [campaigns.length]);
|
|
1567
|
+
}, [campaigns.length, resetTimer]);
|
|
1553
1568
|
if (loading || campaigns.length === 0 || isDismissed) return null;
|
|
1554
1569
|
const campaign = campaigns[currentIndex];
|
|
1555
1570
|
if (!campaign) return null;
|
|
@@ -1564,141 +1579,231 @@ function TopbarAdBanner({
|
|
|
1564
1579
|
{
|
|
1565
1580
|
className,
|
|
1566
1581
|
style: {
|
|
1567
|
-
background: `linear-gradient(
|
|
1568
|
-
borderBottom: `
|
|
1582
|
+
background: `linear-gradient(135deg, ${displayColor}12 0%, ${displayColor}08 50%, ${displayColor}12 100%)`,
|
|
1583
|
+
borderBottom: `1px solid ${displayColor}30`,
|
|
1569
1584
|
position: "relative",
|
|
1585
|
+
height: 100,
|
|
1570
1586
|
maxHeight: 100,
|
|
1571
1587
|
overflow: "hidden",
|
|
1572
1588
|
...style
|
|
1573
1589
|
},
|
|
1574
1590
|
children: [
|
|
1575
|
-
/* @__PURE__ */ jsx(
|
|
1576
|
-
|
|
1591
|
+
/* @__PURE__ */ jsx(
|
|
1592
|
+
Box,
|
|
1593
|
+
{
|
|
1594
|
+
style: {
|
|
1595
|
+
position: "absolute",
|
|
1596
|
+
inset: 0,
|
|
1597
|
+
background: `radial-gradient(ellipse at 50% 0%, ${displayColor}15 0%, transparent 70%)`,
|
|
1598
|
+
pointerEvents: "none"
|
|
1599
|
+
}
|
|
1600
|
+
}
|
|
1601
|
+
),
|
|
1602
|
+
/* @__PURE__ */ jsx(Box, { style: { height: 3, background: "var(--gray-a3)", position: "relative", zIndex: 1 }, children: /* @__PURE__ */ jsx(
|
|
1603
|
+
Box,
|
|
1604
|
+
{
|
|
1605
|
+
style: {
|
|
1606
|
+
position: "absolute",
|
|
1607
|
+
top: 0,
|
|
1608
|
+
left: 0,
|
|
1609
|
+
height: "100%",
|
|
1610
|
+
width: `${progress}%`,
|
|
1611
|
+
background: `linear-gradient(90deg, ${displayColor}, ${displayColor}cc)`,
|
|
1612
|
+
transition: "width 50ms linear",
|
|
1613
|
+
boxShadow: `0 0 10px ${displayColor}60`
|
|
1614
|
+
}
|
|
1615
|
+
}
|
|
1616
|
+
) }),
|
|
1617
|
+
/* @__PURE__ */ jsx(Container, { size: "4", style: { height: "calc(100% - 3px)" }, children: /* @__PURE__ */ jsxs(
|
|
1577
1618
|
Flex,
|
|
1578
1619
|
{
|
|
1579
1620
|
align: "center",
|
|
1580
1621
|
justify: "between",
|
|
1581
|
-
gap: "
|
|
1582
|
-
px: { initial: "3", sm: "4" },
|
|
1583
|
-
py: "2",
|
|
1622
|
+
gap: { initial: "2", sm: "4" },
|
|
1584
1623
|
style: {
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
transition: "all 0.2s ease-out",
|
|
1588
|
-
minHeight: 50,
|
|
1589
|
-
maxHeight: 70
|
|
1624
|
+
height: "100%",
|
|
1625
|
+
padding: "0 16px"
|
|
1590
1626
|
},
|
|
1591
1627
|
children: [
|
|
1592
|
-
|
|
1593
|
-
IconButton,
|
|
1594
|
-
{
|
|
1595
|
-
size: "1",
|
|
1596
|
-
variant: "ghost",
|
|
1597
|
-
color: "gray",
|
|
1598
|
-
onClick: goToPrev,
|
|
1599
|
-
style: { cursor: "pointer" },
|
|
1600
|
-
"aria-label": "Previous ad",
|
|
1601
|
-
children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
|
|
1602
|
-
}
|
|
1603
|
-
) }),
|
|
1604
|
-
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", style: { flex: 1, minWidth: 0 }, children: [
|
|
1628
|
+
/* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", style: { flexShrink: 0 }, children: [
|
|
1605
1629
|
/* @__PURE__ */ jsx(
|
|
1606
1630
|
Box,
|
|
1607
1631
|
{
|
|
1608
1632
|
style: {
|
|
1609
|
-
width:
|
|
1610
|
-
height:
|
|
1611
|
-
borderRadius:
|
|
1633
|
+
width: 28,
|
|
1634
|
+
height: 28,
|
|
1635
|
+
borderRadius: 6,
|
|
1612
1636
|
background: `${displayColor}20`,
|
|
1613
|
-
border: `1px solid ${displayColor}40`,
|
|
1614
1637
|
display: "flex",
|
|
1615
1638
|
alignItems: "center",
|
|
1616
|
-
justifyContent: "center"
|
|
1617
|
-
flexShrink: 0
|
|
1639
|
+
justifyContent: "center"
|
|
1618
1640
|
},
|
|
1619
|
-
|
|
1641
|
+
children: /* @__PURE__ */ jsx(Sparkles, { size: 14, color: displayColor })
|
|
1620
1642
|
}
|
|
1621
1643
|
),
|
|
1622
|
-
/* @__PURE__ */
|
|
1623
|
-
/* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", style: { lineHeight: 1.2 }, children: displayTitle }),
|
|
1624
|
-
/* @__PURE__ */ jsx(
|
|
1625
|
-
Text,
|
|
1626
|
-
{
|
|
1627
|
-
size: "1",
|
|
1628
|
-
color: "gray",
|
|
1629
|
-
style: {
|
|
1630
|
-
display: "-webkit-box",
|
|
1631
|
-
WebkitLineClamp: 1,
|
|
1632
|
-
WebkitBoxOrient: "vertical",
|
|
1633
|
-
overflow: "hidden"
|
|
1634
|
-
},
|
|
1635
|
-
children: displayTagline
|
|
1636
|
-
}
|
|
1637
|
-
)
|
|
1638
|
-
] }),
|
|
1639
|
-
/* @__PURE__ */ jsxs(
|
|
1640
|
-
Button,
|
|
1641
|
-
{
|
|
1642
|
-
size: "1",
|
|
1643
|
-
onClick: () => handleClick(campaign),
|
|
1644
|
-
style: {
|
|
1645
|
-
background: displayColor,
|
|
1646
|
-
color: "white",
|
|
1647
|
-
fontWeight: 600,
|
|
1648
|
-
fontSize: "12px",
|
|
1649
|
-
padding: "0 12px",
|
|
1650
|
-
height: 28,
|
|
1651
|
-
flexShrink: 0
|
|
1652
|
-
},
|
|
1653
|
-
children: [
|
|
1654
|
-
displayCta,
|
|
1655
|
-
/* @__PURE__ */ jsx(ExternalLink, { size: 12, style: { marginLeft: 4 } })
|
|
1656
|
-
]
|
|
1657
|
-
}
|
|
1658
|
-
)
|
|
1659
|
-
] }),
|
|
1660
|
-
/* @__PURE__ */ jsxs(Flex, { gap: "1", align: "center", children: [
|
|
1661
|
-
campaigns.length > 1 && /* @__PURE__ */ jsx(Box, { display: { initial: "none", sm: "block" }, children: /* @__PURE__ */ jsx(
|
|
1644
|
+
campaigns.length > 1 && /* @__PURE__ */ jsx(Box, { display: { initial: "none", md: "block" }, children: /* @__PURE__ */ jsx(
|
|
1662
1645
|
IconButton,
|
|
1663
1646
|
{
|
|
1664
1647
|
size: "1",
|
|
1665
1648
|
variant: "ghost",
|
|
1666
1649
|
color: "gray",
|
|
1667
|
-
onClick:
|
|
1650
|
+
onClick: goToPrev,
|
|
1668
1651
|
style: { cursor: "pointer" },
|
|
1669
|
-
"aria-label": "
|
|
1670
|
-
children: /* @__PURE__ */ jsx(
|
|
1652
|
+
"aria-label": "Previous ad",
|
|
1653
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
|
|
1671
1654
|
}
|
|
1672
|
-
) })
|
|
1655
|
+
) })
|
|
1656
|
+
] }),
|
|
1657
|
+
/* @__PURE__ */ jsxs(
|
|
1658
|
+
Flex,
|
|
1659
|
+
{
|
|
1660
|
+
align: "center",
|
|
1661
|
+
gap: { initial: "2", sm: "3" },
|
|
1662
|
+
style: {
|
|
1663
|
+
flex: 1,
|
|
1664
|
+
minWidth: 0,
|
|
1665
|
+
opacity: isAnimating ? 0 : 1,
|
|
1666
|
+
transform: isAnimating ? "translateY(-8px)" : "translateY(0)",
|
|
1667
|
+
transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
1668
|
+
},
|
|
1669
|
+
children: [
|
|
1670
|
+
/* @__PURE__ */ jsx(
|
|
1671
|
+
Box,
|
|
1672
|
+
{
|
|
1673
|
+
style: {
|
|
1674
|
+
width: 48,
|
|
1675
|
+
height: 48,
|
|
1676
|
+
borderRadius: 10,
|
|
1677
|
+
background: `linear-gradient(135deg, ${displayColor}25 0%, ${displayColor}15 100%)`,
|
|
1678
|
+
border: `1.5px solid ${displayColor}35`,
|
|
1679
|
+
display: "flex",
|
|
1680
|
+
alignItems: "center",
|
|
1681
|
+
justifyContent: "center",
|
|
1682
|
+
flexShrink: 0,
|
|
1683
|
+
boxShadow: `0 2px 8px ${displayColor}20`
|
|
1684
|
+
},
|
|
1685
|
+
dangerouslySetInnerHTML: { __html: displayIcon }
|
|
1686
|
+
}
|
|
1687
|
+
),
|
|
1688
|
+
/* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "0", style: { minWidth: 0, flex: 1 }, children: [
|
|
1689
|
+
/* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", style: { lineHeight: 1.3 }, children: displayTitle }),
|
|
1690
|
+
/* @__PURE__ */ jsx(
|
|
1691
|
+
Text,
|
|
1692
|
+
{
|
|
1693
|
+
size: "1",
|
|
1694
|
+
color: "gray",
|
|
1695
|
+
style: {
|
|
1696
|
+
display: "-webkit-box",
|
|
1697
|
+
WebkitLineClamp: 1,
|
|
1698
|
+
WebkitBoxOrient: "vertical",
|
|
1699
|
+
overflow: "hidden",
|
|
1700
|
+
lineHeight: 1.4
|
|
1701
|
+
},
|
|
1702
|
+
children: displayTagline
|
|
1703
|
+
}
|
|
1704
|
+
)
|
|
1705
|
+
] }),
|
|
1706
|
+
/* @__PURE__ */ jsx(
|
|
1707
|
+
Button,
|
|
1708
|
+
{
|
|
1709
|
+
size: "2",
|
|
1710
|
+
onClick: () => handleClick(campaign),
|
|
1711
|
+
style: {
|
|
1712
|
+
background: `linear-gradient(135deg, ${displayColor} 0%, ${displayColor}dd 100%)`,
|
|
1713
|
+
color: "white",
|
|
1714
|
+
fontWeight: 600,
|
|
1715
|
+
fontSize: "13px",
|
|
1716
|
+
padding: "0 16px",
|
|
1717
|
+
height: 32,
|
|
1718
|
+
flexShrink: 0,
|
|
1719
|
+
boxShadow: `0 2px 8px ${displayColor}40`,
|
|
1720
|
+
border: "none"
|
|
1721
|
+
},
|
|
1722
|
+
children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
|
|
1723
|
+
displayCta,
|
|
1724
|
+
/* @__PURE__ */ jsx(ExternalLink, { size: 13 })
|
|
1725
|
+
] })
|
|
1726
|
+
}
|
|
1727
|
+
)
|
|
1728
|
+
]
|
|
1729
|
+
}
|
|
1730
|
+
),
|
|
1731
|
+
/* @__PURE__ */ jsxs(Flex, { gap: "1", align: "center", style: { flexShrink: 0 }, children: [
|
|
1732
|
+
campaigns.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1733
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "none", md: "block" }, children: /* @__PURE__ */ jsx(
|
|
1734
|
+
IconButton,
|
|
1735
|
+
{
|
|
1736
|
+
size: "1",
|
|
1737
|
+
variant: "ghost",
|
|
1738
|
+
color: "gray",
|
|
1739
|
+
onClick: goToNext,
|
|
1740
|
+
style: { cursor: "pointer" },
|
|
1741
|
+
"aria-label": "Next ad",
|
|
1742
|
+
children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
|
|
1743
|
+
}
|
|
1744
|
+
) }),
|
|
1745
|
+
/* @__PURE__ */ jsx(Flex, { gap: "1", mx: "2", display: { initial: "none", sm: "flex" }, children: campaigns.map((_, i) => /* @__PURE__ */ jsx(
|
|
1746
|
+
Box,
|
|
1747
|
+
{
|
|
1748
|
+
style: {
|
|
1749
|
+
width: i === currentIndex ? 16 : 6,
|
|
1750
|
+
height: 6,
|
|
1751
|
+
borderRadius: 3,
|
|
1752
|
+
background: i === currentIndex ? displayColor : "var(--gray-a5)",
|
|
1753
|
+
cursor: "pointer",
|
|
1754
|
+
transition: "all 0.2s ease"
|
|
1755
|
+
},
|
|
1756
|
+
onClick: () => {
|
|
1757
|
+
resetTimer();
|
|
1758
|
+
setCurrentIndex(i);
|
|
1759
|
+
}
|
|
1760
|
+
},
|
|
1761
|
+
i
|
|
1762
|
+
)) })
|
|
1763
|
+
] }),
|
|
1673
1764
|
/* @__PURE__ */ jsx(
|
|
1674
1765
|
IconButton,
|
|
1675
1766
|
{
|
|
1676
1767
|
size: "1",
|
|
1677
|
-
variant: "
|
|
1768
|
+
variant: "soft",
|
|
1678
1769
|
color: "gray",
|
|
1679
1770
|
onClick: handleDismiss,
|
|
1680
|
-
style: { cursor: "pointer" },
|
|
1771
|
+
style: { cursor: "pointer", marginLeft: 4 },
|
|
1681
1772
|
"aria-label": "Close banner",
|
|
1682
|
-
children: /* @__PURE__ */ jsx(X, { size:
|
|
1773
|
+
children: /* @__PURE__ */ jsx(X, { size: 14 })
|
|
1683
1774
|
}
|
|
1684
1775
|
)
|
|
1685
1776
|
] })
|
|
1686
1777
|
]
|
|
1687
1778
|
}
|
|
1688
|
-
),
|
|
1689
|
-
campaigns.length > 1 && /* @__PURE__ */ jsx(
|
|
1690
|
-
|
|
1779
|
+
) }),
|
|
1780
|
+
campaigns.length > 1 && /* @__PURE__ */ jsx(
|
|
1781
|
+
Flex,
|
|
1691
1782
|
{
|
|
1783
|
+
justify: "center",
|
|
1784
|
+
gap: "1",
|
|
1692
1785
|
style: {
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
}
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1786
|
+
position: "absolute",
|
|
1787
|
+
bottom: 6,
|
|
1788
|
+
left: 0,
|
|
1789
|
+
right: 0
|
|
1790
|
+
},
|
|
1791
|
+
display: { initial: "flex", sm: "none" },
|
|
1792
|
+
children: campaigns.map((_, i) => /* @__PURE__ */ jsx(
|
|
1793
|
+
Box,
|
|
1794
|
+
{
|
|
1795
|
+
style: {
|
|
1796
|
+
width: 6,
|
|
1797
|
+
height: 6,
|
|
1798
|
+
borderRadius: "50%",
|
|
1799
|
+
background: i === currentIndex ? displayColor : "var(--gray-a5)",
|
|
1800
|
+
transition: "background 0.2s ease"
|
|
1801
|
+
}
|
|
1802
|
+
},
|
|
1803
|
+
i
|
|
1804
|
+
))
|
|
1805
|
+
}
|
|
1806
|
+
)
|
|
1702
1807
|
]
|
|
1703
1808
|
}
|
|
1704
1809
|
);
|
|
@@ -1744,7 +1849,7 @@ function AdCarousel({
|
|
|
1744
1849
|
setProgress(0);
|
|
1745
1850
|
currentStep = 0;
|
|
1746
1851
|
setTimeout(() => setIsAnimating(false), 50);
|
|
1747
|
-
},
|
|
1852
|
+
}, 250);
|
|
1748
1853
|
}
|
|
1749
1854
|
}, progressInterval);
|
|
1750
1855
|
return () => {
|
|
@@ -1769,7 +1874,7 @@ function AdCarousel({
|
|
|
1769
1874
|
setTimeout(() => {
|
|
1770
1875
|
setCurrentIndex((prev) => (prev - 1 + campaigns.length) % campaigns.length);
|
|
1771
1876
|
setTimeout(() => setIsAnimating(false), 50);
|
|
1772
|
-
},
|
|
1877
|
+
}, 250);
|
|
1773
1878
|
}, [campaigns.length, resetTimer]);
|
|
1774
1879
|
const goToNext = useCallback(() => {
|
|
1775
1880
|
resetTimer();
|
|
@@ -1777,7 +1882,7 @@ function AdCarousel({
|
|
|
1777
1882
|
setTimeout(() => {
|
|
1778
1883
|
setCurrentIndex((prev) => (prev + 1) % campaigns.length);
|
|
1779
1884
|
setTimeout(() => setIsAnimating(false), 50);
|
|
1780
|
-
},
|
|
1885
|
+
}, 250);
|
|
1781
1886
|
}, [campaigns.length, resetTimer]);
|
|
1782
1887
|
const goToSlide = useCallback((index) => {
|
|
1783
1888
|
if (index === currentIndex) return;
|
|
@@ -1786,7 +1891,7 @@ function AdCarousel({
|
|
|
1786
1891
|
setTimeout(() => {
|
|
1787
1892
|
setCurrentIndex(index);
|
|
1788
1893
|
setTimeout(() => setIsAnimating(false), 50);
|
|
1789
|
-
},
|
|
1894
|
+
}, 250);
|
|
1790
1895
|
}, [currentIndex, resetTimer]);
|
|
1791
1896
|
if (loading || campaigns.length === 0) return null;
|
|
1792
1897
|
const campaign = campaigns[currentIndex];
|
|
@@ -1798,148 +1903,414 @@ function AdCarousel({
|
|
|
1798
1903
|
const displayColor = campaign.customProductColor || product.color || "#3B82F6";
|
|
1799
1904
|
const displayIcon = campaign.customIcon || product.icon64 || "";
|
|
1800
1905
|
const displayFeatures = campaign.customFeatures || product.features || [];
|
|
1801
|
-
|
|
1802
|
-
|
|
1906
|
+
const displayDescription = product.description || displayTagline;
|
|
1907
|
+
const getProductTypeLabel = () => {
|
|
1908
|
+
switch (product.type) {
|
|
1909
|
+
case "extension":
|
|
1910
|
+
return "Browser Extension";
|
|
1911
|
+
case "android":
|
|
1912
|
+
return "Android App";
|
|
1913
|
+
case "ios":
|
|
1914
|
+
return "iOS App";
|
|
1915
|
+
case "web":
|
|
1916
|
+
return "Web App";
|
|
1917
|
+
default:
|
|
1918
|
+
return "App";
|
|
1919
|
+
}
|
|
1920
|
+
};
|
|
1921
|
+
return /* @__PURE__ */ jsx(
|
|
1922
|
+
Box,
|
|
1803
1923
|
{
|
|
1924
|
+
className,
|
|
1804
1925
|
style: {
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
overflow: "hidden"
|
|
1926
|
+
padding: "24px 0",
|
|
1927
|
+
...style
|
|
1808
1928
|
},
|
|
1809
|
-
children:
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
{
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1929
|
+
children: /* @__PURE__ */ jsx(Container, { size: "4", children: /* @__PURE__ */ jsxs(
|
|
1930
|
+
Card,
|
|
1931
|
+
{
|
|
1932
|
+
style: {
|
|
1933
|
+
background: `linear-gradient(145deg, var(--color-background) 0%, ${displayColor}08 100%)`,
|
|
1934
|
+
border: `1px solid ${displayColor}20`,
|
|
1935
|
+
borderRadius: 16,
|
|
1936
|
+
overflow: "hidden",
|
|
1937
|
+
height: 350,
|
|
1938
|
+
position: "relative"
|
|
1939
|
+
},
|
|
1940
|
+
children: [
|
|
1941
|
+
/* @__PURE__ */ jsx(
|
|
1942
|
+
Box,
|
|
1943
|
+
{
|
|
1944
|
+
style: {
|
|
1945
|
+
position: "absolute",
|
|
1946
|
+
top: -100,
|
|
1947
|
+
right: -100,
|
|
1948
|
+
width: 300,
|
|
1949
|
+
height: 300,
|
|
1950
|
+
borderRadius: "50%",
|
|
1951
|
+
background: `radial-gradient(circle, ${displayColor}12 0%, transparent 70%)`,
|
|
1952
|
+
pointerEvents: "none"
|
|
1953
|
+
}
|
|
1954
|
+
}
|
|
1955
|
+
),
|
|
1956
|
+
/* @__PURE__ */ jsx(
|
|
1957
|
+
Box,
|
|
1958
|
+
{
|
|
1959
|
+
style: {
|
|
1960
|
+
position: "absolute",
|
|
1961
|
+
bottom: -50,
|
|
1962
|
+
left: -50,
|
|
1963
|
+
width: 200,
|
|
1964
|
+
height: 200,
|
|
1965
|
+
borderRadius: "50%",
|
|
1966
|
+
background: `radial-gradient(circle, ${displayColor}08 0%, transparent 70%)`,
|
|
1967
|
+
pointerEvents: "none"
|
|
1968
|
+
}
|
|
1969
|
+
}
|
|
1970
|
+
),
|
|
1971
|
+
campaigns.length > 1 && /* @__PURE__ */ jsx(Box, { style: { height: 4, background: "var(--gray-a3)", position: "relative", zIndex: 2 }, children: /* @__PURE__ */ jsx(
|
|
1972
|
+
Box,
|
|
1973
|
+
{
|
|
1974
|
+
style: {
|
|
1975
|
+
position: "absolute",
|
|
1976
|
+
top: 0,
|
|
1977
|
+
left: 0,
|
|
1978
|
+
height: "100%",
|
|
1979
|
+
width: `${progress}%`,
|
|
1980
|
+
background: `linear-gradient(90deg, ${displayColor} 0%, ${displayColor}cc 100%)`,
|
|
1981
|
+
transition: "width 50ms linear",
|
|
1982
|
+
boxShadow: `0 0 12px ${displayColor}50`
|
|
1983
|
+
}
|
|
1984
|
+
}
|
|
1985
|
+
) }),
|
|
1986
|
+
/* @__PURE__ */ jsxs(Box, { style: { height: "calc(100% - 4px)", position: "relative", zIndex: 1 }, children: [
|
|
1987
|
+
/* @__PURE__ */ jsxs(
|
|
1988
|
+
Flex,
|
|
1989
|
+
{
|
|
1990
|
+
direction: { initial: "column", md: "row" },
|
|
1991
|
+
align: "stretch",
|
|
1992
|
+
style: { height: "100%" },
|
|
1993
|
+
children: [
|
|
1994
|
+
campaigns.length > 1 && /* @__PURE__ */ jsx(
|
|
1995
|
+
Flex,
|
|
1996
|
+
{
|
|
1997
|
+
align: "center",
|
|
1998
|
+
justify: "center",
|
|
1999
|
+
style: { width: 60, flexShrink: 0 },
|
|
2000
|
+
display: { initial: "none", md: "flex" },
|
|
2001
|
+
children: /* @__PURE__ */ jsx(
|
|
2002
|
+
IconButton,
|
|
2003
|
+
{
|
|
2004
|
+
size: "3",
|
|
2005
|
+
variant: "ghost",
|
|
2006
|
+
color: "gray",
|
|
2007
|
+
onClick: goToPrev,
|
|
2008
|
+
style: {
|
|
2009
|
+
cursor: "pointer",
|
|
2010
|
+
width: 44,
|
|
2011
|
+
height: 44,
|
|
2012
|
+
borderRadius: 12,
|
|
2013
|
+
background: "var(--gray-a3)"
|
|
2014
|
+
},
|
|
2015
|
+
"aria-label": "Previous",
|
|
2016
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, { size: 24 })
|
|
2017
|
+
}
|
|
2018
|
+
)
|
|
2019
|
+
}
|
|
2020
|
+
),
|
|
2021
|
+
/* @__PURE__ */ jsxs(
|
|
2022
|
+
Flex,
|
|
2023
|
+
{
|
|
2024
|
+
direction: { initial: "column", md: "row" },
|
|
2025
|
+
align: "center",
|
|
2026
|
+
gap: { initial: "4", md: "6" },
|
|
2027
|
+
p: { initial: "4", md: "5" },
|
|
2028
|
+
style: {
|
|
2029
|
+
flex: 1,
|
|
2030
|
+
opacity: isAnimating ? 0 : 1,
|
|
2031
|
+
transform: isAnimating ? "translateX(-20px) scale(0.98)" : "translateX(0) scale(1)",
|
|
2032
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
2033
|
+
},
|
|
2034
|
+
children: [
|
|
2035
|
+
/* @__PURE__ */ jsxs(
|
|
2036
|
+
Flex,
|
|
2037
|
+
{
|
|
2038
|
+
direction: "column",
|
|
2039
|
+
align: "center",
|
|
2040
|
+
gap: "3",
|
|
2041
|
+
style: { flexShrink: 0 },
|
|
2042
|
+
children: [
|
|
2043
|
+
/* @__PURE__ */ jsx(
|
|
2044
|
+
Box,
|
|
2045
|
+
{
|
|
2046
|
+
style: {
|
|
2047
|
+
width: 100,
|
|
2048
|
+
height: 100,
|
|
2049
|
+
borderRadius: 20,
|
|
2050
|
+
background: `linear-gradient(145deg, ${displayColor}20 0%, ${displayColor}10 100%)`,
|
|
2051
|
+
border: `2px solid ${displayColor}30`,
|
|
2052
|
+
display: "flex",
|
|
2053
|
+
alignItems: "center",
|
|
2054
|
+
justifyContent: "center",
|
|
2055
|
+
boxShadow: `0 8px 32px ${displayColor}20, inset 0 1px 0 ${displayColor}20`
|
|
2056
|
+
},
|
|
2057
|
+
dangerouslySetInnerHTML: { __html: displayIcon }
|
|
2058
|
+
}
|
|
2059
|
+
),
|
|
2060
|
+
/* @__PURE__ */ jsxs(
|
|
2061
|
+
Badge,
|
|
2062
|
+
{
|
|
2063
|
+
size: "2",
|
|
2064
|
+
style: {
|
|
2065
|
+
background: `${displayColor}15`,
|
|
2066
|
+
color: displayColor,
|
|
2067
|
+
fontWeight: 600,
|
|
2068
|
+
padding: "4px 12px"
|
|
2069
|
+
},
|
|
2070
|
+
children: [
|
|
2071
|
+
/* @__PURE__ */ jsx(Zap, { size: 12, style: { marginRight: 4 } }),
|
|
2072
|
+
getProductTypeLabel()
|
|
2073
|
+
]
|
|
2074
|
+
}
|
|
2075
|
+
)
|
|
2076
|
+
]
|
|
2077
|
+
}
|
|
2078
|
+
),
|
|
2079
|
+
/* @__PURE__ */ jsxs(
|
|
2080
|
+
Flex,
|
|
2081
|
+
{
|
|
2082
|
+
direction: "column",
|
|
2083
|
+
gap: "3",
|
|
2084
|
+
style: { flex: 1, minWidth: 0, textAlign: "left" },
|
|
2085
|
+
children: [
|
|
2086
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", wrap: "wrap", children: [
|
|
2087
|
+
/* @__PURE__ */ jsx(
|
|
2088
|
+
Text,
|
|
2089
|
+
{
|
|
2090
|
+
size: { initial: "5", md: "6" },
|
|
2091
|
+
weight: "bold",
|
|
2092
|
+
style: { lineHeight: 1.2 },
|
|
2093
|
+
children: displayTitle
|
|
2094
|
+
}
|
|
2095
|
+
),
|
|
2096
|
+
/* @__PURE__ */ jsxs(
|
|
2097
|
+
Flex,
|
|
2098
|
+
{
|
|
2099
|
+
align: "center",
|
|
2100
|
+
gap: "1",
|
|
2101
|
+
style: {
|
|
2102
|
+
background: `${displayColor}15`,
|
|
2103
|
+
padding: "4px 8px",
|
|
2104
|
+
borderRadius: 6
|
|
2105
|
+
},
|
|
2106
|
+
children: [
|
|
2107
|
+
/* @__PURE__ */ jsx(Star, { size: 12, fill: displayColor, color: displayColor }),
|
|
2108
|
+
/* @__PURE__ */ jsx(Text, { size: "1", weight: "medium", style: { color: displayColor }, children: "Featured" })
|
|
2109
|
+
]
|
|
2110
|
+
}
|
|
2111
|
+
)
|
|
2112
|
+
] }),
|
|
2113
|
+
/* @__PURE__ */ jsx(
|
|
2114
|
+
Text,
|
|
2115
|
+
{
|
|
2116
|
+
size: { initial: "2", md: "3" },
|
|
2117
|
+
color: "gray",
|
|
2118
|
+
style: {
|
|
2119
|
+
lineHeight: 1.5,
|
|
2120
|
+
display: "-webkit-box",
|
|
2121
|
+
WebkitLineClamp: 2,
|
|
2122
|
+
WebkitBoxOrient: "vertical",
|
|
2123
|
+
overflow: "hidden"
|
|
2124
|
+
},
|
|
2125
|
+
children: displayDescription
|
|
2126
|
+
}
|
|
2127
|
+
),
|
|
2128
|
+
displayFeatures.length > 0 && /* @__PURE__ */ jsx(
|
|
2129
|
+
Flex,
|
|
2130
|
+
{
|
|
2131
|
+
gap: { initial: "2", md: "4" },
|
|
2132
|
+
wrap: "wrap",
|
|
2133
|
+
mt: "1",
|
|
2134
|
+
children: displayFeatures.slice(0, 4).map((feature, i) => /* @__PURE__ */ jsxs(
|
|
2135
|
+
Flex,
|
|
2136
|
+
{
|
|
2137
|
+
align: "center",
|
|
2138
|
+
gap: "2",
|
|
2139
|
+
style: {
|
|
2140
|
+
background: "var(--gray-a3)",
|
|
2141
|
+
padding: "6px 12px",
|
|
2142
|
+
borderRadius: 8
|
|
2143
|
+
},
|
|
2144
|
+
children: [
|
|
2145
|
+
/* @__PURE__ */ jsx(
|
|
2146
|
+
Box,
|
|
2147
|
+
{
|
|
2148
|
+
style: {
|
|
2149
|
+
width: 18,
|
|
2150
|
+
height: 18,
|
|
2151
|
+
borderRadius: 4,
|
|
2152
|
+
background: `${displayColor}20`,
|
|
2153
|
+
display: "flex",
|
|
2154
|
+
alignItems: "center",
|
|
2155
|
+
justifyContent: "center"
|
|
2156
|
+
},
|
|
2157
|
+
children: /* @__PURE__ */ jsx(Check, { size: 12, color: displayColor, strokeWidth: 3 })
|
|
2158
|
+
}
|
|
2159
|
+
),
|
|
2160
|
+
/* @__PURE__ */ jsx(Text, { size: "1", weight: "medium", children: feature })
|
|
2161
|
+
]
|
|
2162
|
+
},
|
|
2163
|
+
i
|
|
2164
|
+
))
|
|
2165
|
+
}
|
|
2166
|
+
),
|
|
2167
|
+
/* @__PURE__ */ jsxs(
|
|
2168
|
+
Flex,
|
|
2169
|
+
{
|
|
2170
|
+
gap: "3",
|
|
2171
|
+
align: "center",
|
|
2172
|
+
mt: { initial: "2", md: "3" },
|
|
2173
|
+
wrap: "wrap",
|
|
2174
|
+
children: [
|
|
2175
|
+
/* @__PURE__ */ jsx(
|
|
2176
|
+
Button,
|
|
2177
|
+
{
|
|
2178
|
+
size: { initial: "2", md: "3" },
|
|
2179
|
+
onClick: () => handleClick(campaign),
|
|
2180
|
+
style: {
|
|
2181
|
+
background: `linear-gradient(135deg, ${displayColor} 0%, ${displayColor}dd 100%)`,
|
|
2182
|
+
color: "white",
|
|
2183
|
+
fontWeight: 600,
|
|
2184
|
+
padding: "0 24px",
|
|
2185
|
+
height: 44,
|
|
2186
|
+
boxShadow: `0 4px 16px ${displayColor}40`,
|
|
2187
|
+
border: "none",
|
|
2188
|
+
cursor: "pointer"
|
|
2189
|
+
},
|
|
2190
|
+
children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
2191
|
+
displayCta,
|
|
2192
|
+
/* @__PURE__ */ jsx(ArrowRight, { size: 18 })
|
|
2193
|
+
] })
|
|
2194
|
+
}
|
|
2195
|
+
),
|
|
2196
|
+
/* @__PURE__ */ jsx(
|
|
2197
|
+
Button,
|
|
2198
|
+
{
|
|
2199
|
+
size: { initial: "2", md: "3" },
|
|
2200
|
+
variant: "ghost",
|
|
2201
|
+
onClick: () => handleClick(campaign),
|
|
2202
|
+
style: {
|
|
2203
|
+
color: displayColor,
|
|
2204
|
+
fontWeight: 500,
|
|
2205
|
+
cursor: "pointer"
|
|
2206
|
+
},
|
|
2207
|
+
children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
|
|
2208
|
+
"View Details",
|
|
2209
|
+
/* @__PURE__ */ jsx(ExternalLink, { size: 14 })
|
|
2210
|
+
] })
|
|
2211
|
+
}
|
|
2212
|
+
)
|
|
2213
|
+
]
|
|
2214
|
+
}
|
|
2215
|
+
)
|
|
2216
|
+
]
|
|
2217
|
+
}
|
|
2218
|
+
)
|
|
2219
|
+
]
|
|
2220
|
+
}
|
|
2221
|
+
),
|
|
2222
|
+
campaigns.length > 1 && /* @__PURE__ */ jsx(
|
|
2223
|
+
Flex,
|
|
2224
|
+
{
|
|
2225
|
+
align: "center",
|
|
2226
|
+
justify: "center",
|
|
2227
|
+
style: { width: 60, flexShrink: 0 },
|
|
2228
|
+
display: { initial: "none", md: "flex" },
|
|
2229
|
+
children: /* @__PURE__ */ jsx(
|
|
2230
|
+
IconButton,
|
|
2231
|
+
{
|
|
2232
|
+
size: "3",
|
|
2233
|
+
variant: "ghost",
|
|
2234
|
+
color: "gray",
|
|
2235
|
+
onClick: goToNext,
|
|
2236
|
+
style: {
|
|
2237
|
+
cursor: "pointer",
|
|
2238
|
+
width: 44,
|
|
2239
|
+
height: 44,
|
|
2240
|
+
borderRadius: 12,
|
|
2241
|
+
background: "var(--gray-a3)"
|
|
2242
|
+
},
|
|
2243
|
+
"aria-label": "Next",
|
|
2244
|
+
children: /* @__PURE__ */ jsx(ChevronRight, { size: 24 })
|
|
2245
|
+
}
|
|
2246
|
+
)
|
|
2247
|
+
}
|
|
2248
|
+
)
|
|
2249
|
+
]
|
|
2250
|
+
}
|
|
2251
|
+
),
|
|
2252
|
+
campaigns.length > 1 && /* @__PURE__ */ jsxs(
|
|
2253
|
+
Flex,
|
|
2254
|
+
{
|
|
2255
|
+
justify: "center",
|
|
2256
|
+
align: "center",
|
|
2257
|
+
gap: "3",
|
|
2258
|
+
style: {
|
|
2259
|
+
position: "absolute",
|
|
2260
|
+
bottom: 16,
|
|
2261
|
+
left: 0,
|
|
2262
|
+
right: 0
|
|
2263
|
+
},
|
|
2264
|
+
children: [
|
|
2265
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "block", md: "none" }, children: /* @__PURE__ */ jsx(
|
|
2266
|
+
IconButton,
|
|
2267
|
+
{
|
|
2268
|
+
size: "1",
|
|
2269
|
+
variant: "soft",
|
|
2270
|
+
color: "gray",
|
|
2271
|
+
onClick: goToPrev,
|
|
2272
|
+
style: { cursor: "pointer" },
|
|
2273
|
+
"aria-label": "Previous",
|
|
2274
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
|
|
2275
|
+
}
|
|
2276
|
+
) }),
|
|
2277
|
+
/* @__PURE__ */ jsx(Flex, { gap: "2", children: campaigns.map((c, i) => /* @__PURE__ */ jsx(
|
|
2278
|
+
Box,
|
|
2279
|
+
{
|
|
2280
|
+
onClick: () => goToSlide(i),
|
|
2281
|
+
style: {
|
|
2282
|
+
width: i === currentIndex ? 32 : 10,
|
|
2283
|
+
height: 10,
|
|
2284
|
+
borderRadius: 5,
|
|
2285
|
+
background: i === currentIndex ? `linear-gradient(90deg, ${c.product?.color || displayColor}, ${c.product?.color || displayColor}cc)` : "var(--gray-a4)",
|
|
2286
|
+
cursor: "pointer",
|
|
2287
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2288
|
+
boxShadow: i === currentIndex ? `0 2px 8px ${c.product?.color || displayColor}40` : "none"
|
|
1881
2289
|
}
|
|
1882
|
-
)
|
|
1883
|
-
] }),
|
|
1884
|
-
/* @__PURE__ */ jsx(Text, { size: "2", color: "gray", style: { lineHeight: 1.4 }, children: displayTagline }),
|
|
1885
|
-
/* @__PURE__ */ jsx(Flex, { gap: "3", mt: "1", wrap: "wrap", display: { initial: "none", md: "flex" }, children: displayFeatures.slice(0, 3).map((feature, i) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "1", children: [
|
|
1886
|
-
/* @__PURE__ */ jsx(Check, { size: 14, color: displayColor, strokeWidth: 2.5 }),
|
|
1887
|
-
/* @__PURE__ */ jsx(Text, { size: "1", color: "gray", children: feature })
|
|
1888
|
-
] }, i)) })
|
|
1889
|
-
] }),
|
|
1890
|
-
/* @__PURE__ */ jsxs(
|
|
1891
|
-
Button,
|
|
1892
|
-
{
|
|
1893
|
-
size: { initial: "2", sm: "3" },
|
|
1894
|
-
onClick: () => handleClick(campaign),
|
|
1895
|
-
style: {
|
|
1896
|
-
background: displayColor,
|
|
1897
|
-
color: "white",
|
|
1898
|
-
fontWeight: 600,
|
|
1899
|
-
flexShrink: 0,
|
|
1900
|
-
boxShadow: `0 2px 8px ${displayColor}40`
|
|
1901
2290
|
},
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
),
|
|
1924
|
-
campaigns.length > 1 && /* @__PURE__ */ jsx(Flex, { justify: "center", gap: "2", mt: "3", children: campaigns.map((c, i) => /* @__PURE__ */ jsx(
|
|
1925
|
-
Box,
|
|
1926
|
-
{
|
|
1927
|
-
onClick: () => goToSlide(i),
|
|
1928
|
-
style: {
|
|
1929
|
-
width: 32,
|
|
1930
|
-
height: 4,
|
|
1931
|
-
borderRadius: 2,
|
|
1932
|
-
background: i === currentIndex ? c.product?.color || displayColor : "var(--gray-a4)",
|
|
1933
|
-
cursor: "pointer",
|
|
1934
|
-
transition: "background 0.2s ease"
|
|
1935
|
-
}
|
|
1936
|
-
},
|
|
1937
|
-
i
|
|
1938
|
-
)) })
|
|
1939
|
-
] })
|
|
1940
|
-
]
|
|
2291
|
+
i
|
|
2292
|
+
)) }),
|
|
2293
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "block", md: "none" }, children: /* @__PURE__ */ jsx(
|
|
2294
|
+
IconButton,
|
|
2295
|
+
{
|
|
2296
|
+
size: "1",
|
|
2297
|
+
variant: "soft",
|
|
2298
|
+
color: "gray",
|
|
2299
|
+
onClick: goToNext,
|
|
2300
|
+
style: { cursor: "pointer" },
|
|
2301
|
+
"aria-label": "Next",
|
|
2302
|
+
children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
|
|
2303
|
+
}
|
|
2304
|
+
) })
|
|
2305
|
+
]
|
|
2306
|
+
}
|
|
2307
|
+
)
|
|
2308
|
+
] })
|
|
2309
|
+
]
|
|
2310
|
+
}
|
|
2311
|
+
) })
|
|
1941
2312
|
}
|
|
1942
|
-
)
|
|
2313
|
+
);
|
|
1943
2314
|
}
|
|
1944
2315
|
const TYPE_STYLES = {
|
|
1945
2316
|
info: {
|
|
@@ -2584,4 +2955,4 @@ export {
|
|
|
2584
2955
|
getLargePanelVariant as s,
|
|
2585
2956
|
getSmallPanelVariant as t
|
|
2586
2957
|
};
|
|
2587
|
-
//# sourceMappingURL=index-
|
|
2958
|
+
//# sourceMappingURL=index-BA8TGVYV.js.map
|