shared-features 0.1.11 → 0.1.13
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/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/{index-BA8TGVYV.js → index-CsoIWvB8.js} +217 -313
- package/dist/index-CsoIWvB8.js.map +1 -0
- package/dist/{index-ClreioC9.cjs → index-QOlXErYT.cjs} +216 -312
- package/dist/index-QOlXErYT.cjs.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/index-BA8TGVYV.js.map +0 -1
- package/dist/index-ClreioC9.cjs.map +0 -1
|
@@ -3,7 +3,7 @@ import { useRef, useEffect, useCallback, useState } from "react";
|
|
|
3
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
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,
|
|
6
|
+
import { Sparkles, X, ExternalLink, Check, Gift, Play, Quote, ChevronLeft, ChevronRight, Star, ArrowRight, Megaphone, CheckCircle, AlertTriangle, AlertCircle, Info, Bell, MapPin, Mail, Phone, MessageCircle, Globe, Github, Linkedin, Briefcase, Code, Twitter } from "lucide-react";
|
|
7
7
|
import { R as isInitialized, E as getConfig } from "./commonFeatures-C2hhoiJs.js";
|
|
8
8
|
function AdPanel({
|
|
9
9
|
placement,
|
|
@@ -1483,8 +1483,10 @@ function TopbarAdBanner({
|
|
|
1483
1483
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
1484
1484
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
1485
1485
|
const [progress, setProgress] = useState(0);
|
|
1486
|
+
const [isPaused, setIsPaused] = useState(false);
|
|
1486
1487
|
const trackedImpressions = useRef(/* @__PURE__ */ new Set());
|
|
1487
1488
|
const timerRef = useRef(null);
|
|
1489
|
+
const progressRef = useRef(0);
|
|
1488
1490
|
useEffect(() => {
|
|
1489
1491
|
try {
|
|
1490
1492
|
const dismissed = sessionStorage.getItem(DISMISSED_TOPBAR_KEY);
|
|
@@ -1516,19 +1518,18 @@ function TopbarAdBanner({
|
|
|
1516
1518
|
}, [currentIndex, campaigns, recordImpression]);
|
|
1517
1519
|
useEffect(() => {
|
|
1518
1520
|
if (campaigns.length <= 1) return;
|
|
1519
|
-
setProgress(0);
|
|
1520
1521
|
const progressInterval = 50;
|
|
1521
1522
|
const steps = rotationInterval / progressInterval;
|
|
1522
|
-
let currentStep = 0;
|
|
1523
1523
|
timerRef.current = setInterval(() => {
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1524
|
+
if (isPaused) return;
|
|
1525
|
+
progressRef.current++;
|
|
1526
|
+
setProgress(progressRef.current / steps * 100);
|
|
1527
|
+
if (progressRef.current >= steps) {
|
|
1527
1528
|
setIsAnimating(true);
|
|
1528
1529
|
setTimeout(() => {
|
|
1529
1530
|
setCurrentIndex((prev) => (prev + 1) % campaigns.length);
|
|
1530
1531
|
setProgress(0);
|
|
1531
|
-
|
|
1532
|
+
progressRef.current = 0;
|
|
1532
1533
|
setTimeout(() => setIsAnimating(false), 50);
|
|
1533
1534
|
}, 200);
|
|
1534
1535
|
}
|
|
@@ -1536,7 +1537,11 @@ function TopbarAdBanner({
|
|
|
1536
1537
|
return () => {
|
|
1537
1538
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
1538
1539
|
};
|
|
1539
|
-
}, [campaigns.length, rotationInterval,
|
|
1540
|
+
}, [campaigns.length, rotationInterval, isPaused]);
|
|
1541
|
+
useEffect(() => {
|
|
1542
|
+
progressRef.current = 0;
|
|
1543
|
+
setProgress(0);
|
|
1544
|
+
}, [currentIndex]);
|
|
1540
1545
|
const handleClick = useCallback(
|
|
1541
1546
|
(campaign2) => {
|
|
1542
1547
|
recordClick(campaign2);
|
|
@@ -1565,6 +1570,12 @@ function TopbarAdBanner({
|
|
|
1565
1570
|
setTimeout(() => setIsAnimating(false), 50);
|
|
1566
1571
|
}, 200);
|
|
1567
1572
|
}, [campaigns.length, resetTimer]);
|
|
1573
|
+
const handleMouseEnter = useCallback(() => {
|
|
1574
|
+
setIsPaused(true);
|
|
1575
|
+
}, []);
|
|
1576
|
+
const handleMouseLeave = useCallback(() => {
|
|
1577
|
+
setIsPaused(false);
|
|
1578
|
+
}, []);
|
|
1568
1579
|
if (loading || campaigns.length === 0 || isDismissed) return null;
|
|
1569
1580
|
const campaign = campaigns[currentIndex];
|
|
1570
1581
|
if (!campaign) return null;
|
|
@@ -1578,13 +1589,16 @@ function TopbarAdBanner({
|
|
|
1578
1589
|
Box,
|
|
1579
1590
|
{
|
|
1580
1591
|
className,
|
|
1592
|
+
onMouseEnter: handleMouseEnter,
|
|
1593
|
+
onMouseLeave: handleMouseLeave,
|
|
1581
1594
|
style: {
|
|
1582
1595
|
background: `linear-gradient(135deg, ${displayColor}12 0%, ${displayColor}08 50%, ${displayColor}12 100%)`,
|
|
1583
1596
|
borderBottom: `1px solid ${displayColor}30`,
|
|
1584
1597
|
position: "relative",
|
|
1585
|
-
height:
|
|
1586
|
-
maxHeight:
|
|
1598
|
+
height: 60,
|
|
1599
|
+
maxHeight: 60,
|
|
1587
1600
|
overflow: "hidden",
|
|
1601
|
+
cursor: "default",
|
|
1588
1602
|
...style
|
|
1589
1603
|
},
|
|
1590
1604
|
children: [
|
|
@@ -1619,41 +1633,24 @@ function TopbarAdBanner({
|
|
|
1619
1633
|
{
|
|
1620
1634
|
align: "center",
|
|
1621
1635
|
justify: "between",
|
|
1622
|
-
gap: { initial: "2", sm: "
|
|
1636
|
+
gap: { initial: "2", sm: "3" },
|
|
1623
1637
|
style: {
|
|
1624
1638
|
height: "100%",
|
|
1625
|
-
padding: "0
|
|
1639
|
+
padding: "0 12px"
|
|
1626
1640
|
},
|
|
1627
1641
|
children: [
|
|
1628
|
-
/* @__PURE__ */
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
},
|
|
1641
|
-
children: /* @__PURE__ */ jsx(Sparkles, { size: 14, color: displayColor })
|
|
1642
|
-
}
|
|
1643
|
-
),
|
|
1644
|
-
campaigns.length > 1 && /* @__PURE__ */ jsx(Box, { display: { initial: "none", md: "block" }, children: /* @__PURE__ */ jsx(
|
|
1645
|
-
IconButton,
|
|
1646
|
-
{
|
|
1647
|
-
size: "1",
|
|
1648
|
-
variant: "ghost",
|
|
1649
|
-
color: "gray",
|
|
1650
|
-
onClick: goToPrev,
|
|
1651
|
-
style: { cursor: "pointer" },
|
|
1652
|
-
"aria-label": "Previous ad",
|
|
1653
|
-
children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
|
|
1654
|
-
}
|
|
1655
|
-
) })
|
|
1656
|
-
] }),
|
|
1642
|
+
campaigns.length > 1 && /* @__PURE__ */ jsx(Box, { display: { initial: "none", md: "block" }, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
|
|
1643
|
+
IconButton,
|
|
1644
|
+
{
|
|
1645
|
+
size: "1",
|
|
1646
|
+
variant: "ghost",
|
|
1647
|
+
color: "gray",
|
|
1648
|
+
onClick: goToPrev,
|
|
1649
|
+
style: { cursor: "pointer" },
|
|
1650
|
+
"aria-label": "Previous ad",
|
|
1651
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
|
|
1652
|
+
}
|
|
1653
|
+
) }),
|
|
1657
1654
|
/* @__PURE__ */ jsxs(
|
|
1658
1655
|
Flex,
|
|
1659
1656
|
{
|
|
@@ -1663,7 +1660,7 @@ function TopbarAdBanner({
|
|
|
1663
1660
|
flex: 1,
|
|
1664
1661
|
minWidth: 0,
|
|
1665
1662
|
opacity: isAnimating ? 0 : 1,
|
|
1666
|
-
transform: isAnimating ? "translateY(-
|
|
1663
|
+
transform: isAnimating ? "translateY(-6px)" : "translateY(0)",
|
|
1667
1664
|
transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
1668
1665
|
},
|
|
1669
1666
|
children: [
|
|
@@ -1671,57 +1668,56 @@ function TopbarAdBanner({
|
|
|
1671
1668
|
Box,
|
|
1672
1669
|
{
|
|
1673
1670
|
style: {
|
|
1674
|
-
width:
|
|
1675
|
-
height:
|
|
1676
|
-
borderRadius:
|
|
1671
|
+
width: 36,
|
|
1672
|
+
height: 36,
|
|
1673
|
+
borderRadius: 8,
|
|
1677
1674
|
background: `linear-gradient(135deg, ${displayColor}25 0%, ${displayColor}15 100%)`,
|
|
1678
|
-
border: `
|
|
1675
|
+
border: `1px solid ${displayColor}35`,
|
|
1679
1676
|
display: "flex",
|
|
1680
1677
|
alignItems: "center",
|
|
1681
1678
|
justifyContent: "center",
|
|
1682
1679
|
flexShrink: 0,
|
|
1683
|
-
boxShadow: `0 2px
|
|
1680
|
+
boxShadow: `0 2px 6px ${displayColor}20`
|
|
1684
1681
|
},
|
|
1685
1682
|
dangerouslySetInnerHTML: { __html: displayIcon }
|
|
1686
1683
|
}
|
|
1687
1684
|
),
|
|
1688
|
-
/* @__PURE__ */ jsxs(Flex, {
|
|
1689
|
-
/* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", style: {
|
|
1690
|
-
/* @__PURE__ */ jsx(
|
|
1685
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", style: { minWidth: 0, flex: 1 }, children: [
|
|
1686
|
+
/* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", style: { whiteSpace: "nowrap" }, children: displayTitle }),
|
|
1687
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "none", sm: "block" }, style: { minWidth: 0, flex: 1 }, children: /* @__PURE__ */ jsx(
|
|
1691
1688
|
Text,
|
|
1692
1689
|
{
|
|
1693
1690
|
size: "1",
|
|
1694
1691
|
color: "gray",
|
|
1695
1692
|
style: {
|
|
1696
|
-
display: "-webkit-box",
|
|
1697
|
-
WebkitLineClamp: 1,
|
|
1698
|
-
WebkitBoxOrient: "vertical",
|
|
1699
1693
|
overflow: "hidden",
|
|
1700
|
-
|
|
1694
|
+
textOverflow: "ellipsis",
|
|
1695
|
+
whiteSpace: "nowrap",
|
|
1696
|
+
display: "block"
|
|
1701
1697
|
},
|
|
1702
1698
|
children: displayTagline
|
|
1703
1699
|
}
|
|
1704
|
-
)
|
|
1700
|
+
) })
|
|
1705
1701
|
] }),
|
|
1706
1702
|
/* @__PURE__ */ jsx(
|
|
1707
1703
|
Button,
|
|
1708
1704
|
{
|
|
1709
|
-
size: "
|
|
1705
|
+
size: "1",
|
|
1710
1706
|
onClick: () => handleClick(campaign),
|
|
1711
1707
|
style: {
|
|
1712
1708
|
background: `linear-gradient(135deg, ${displayColor} 0%, ${displayColor}dd 100%)`,
|
|
1713
1709
|
color: "white",
|
|
1714
1710
|
fontWeight: 600,
|
|
1715
|
-
fontSize: "
|
|
1716
|
-
padding: "0
|
|
1717
|
-
height:
|
|
1711
|
+
fontSize: "12px",
|
|
1712
|
+
padding: "0 12px",
|
|
1713
|
+
height: 28,
|
|
1718
1714
|
flexShrink: 0,
|
|
1719
|
-
boxShadow: `0 2px
|
|
1715
|
+
boxShadow: `0 2px 6px ${displayColor}40`,
|
|
1720
1716
|
border: "none"
|
|
1721
1717
|
},
|
|
1722
|
-
children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap:
|
|
1718
|
+
children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
|
|
1723
1719
|
displayCta,
|
|
1724
|
-
/* @__PURE__ */ jsx(ExternalLink, { size:
|
|
1720
|
+
/* @__PURE__ */ jsx(ExternalLink, { size: 11 })
|
|
1725
1721
|
] })
|
|
1726
1722
|
}
|
|
1727
1723
|
)
|
|
@@ -1730,23 +1726,11 @@ function TopbarAdBanner({
|
|
|
1730
1726
|
),
|
|
1731
1727
|
/* @__PURE__ */ jsxs(Flex, { gap: "1", align: "center", style: { flexShrink: 0 }, children: [
|
|
1732
1728
|
campaigns.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1733
|
-
/* @__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(
|
|
1729
|
+
/* @__PURE__ */ jsx(Flex, { gap: "1", mx: "1", children: campaigns.map((_, i) => /* @__PURE__ */ jsx(
|
|
1746
1730
|
Box,
|
|
1747
1731
|
{
|
|
1748
1732
|
style: {
|
|
1749
|
-
width: i === currentIndex ?
|
|
1733
|
+
width: i === currentIndex ? 14 : 6,
|
|
1750
1734
|
height: 6,
|
|
1751
1735
|
borderRadius: 3,
|
|
1752
1736
|
background: i === currentIndex ? displayColor : "var(--gray-a5)",
|
|
@@ -1759,7 +1743,19 @@ function TopbarAdBanner({
|
|
|
1759
1743
|
}
|
|
1760
1744
|
},
|
|
1761
1745
|
i
|
|
1762
|
-
)) })
|
|
1746
|
+
)) }),
|
|
1747
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "none", md: "block" }, children: /* @__PURE__ */ jsx(
|
|
1748
|
+
IconButton,
|
|
1749
|
+
{
|
|
1750
|
+
size: "1",
|
|
1751
|
+
variant: "ghost",
|
|
1752
|
+
color: "gray",
|
|
1753
|
+
onClick: goToNext,
|
|
1754
|
+
style: { cursor: "pointer" },
|
|
1755
|
+
"aria-label": "Next ad",
|
|
1756
|
+
children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
|
|
1757
|
+
}
|
|
1758
|
+
) })
|
|
1763
1759
|
] }),
|
|
1764
1760
|
/* @__PURE__ */ jsx(
|
|
1765
1761
|
IconButton,
|
|
@@ -1768,42 +1764,15 @@ function TopbarAdBanner({
|
|
|
1768
1764
|
variant: "soft",
|
|
1769
1765
|
color: "gray",
|
|
1770
1766
|
onClick: handleDismiss,
|
|
1771
|
-
style: { cursor: "pointer", marginLeft:
|
|
1767
|
+
style: { cursor: "pointer", marginLeft: 2 },
|
|
1772
1768
|
"aria-label": "Close banner",
|
|
1773
|
-
children: /* @__PURE__ */ jsx(X, { size:
|
|
1769
|
+
children: /* @__PURE__ */ jsx(X, { size: 12 })
|
|
1774
1770
|
}
|
|
1775
1771
|
)
|
|
1776
1772
|
] })
|
|
1777
1773
|
]
|
|
1778
1774
|
}
|
|
1779
|
-
) })
|
|
1780
|
-
campaigns.length > 1 && /* @__PURE__ */ jsx(
|
|
1781
|
-
Flex,
|
|
1782
|
-
{
|
|
1783
|
-
justify: "center",
|
|
1784
|
-
gap: "1",
|
|
1785
|
-
style: {
|
|
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
|
-
)
|
|
1775
|
+
) })
|
|
1807
1776
|
]
|
|
1808
1777
|
}
|
|
1809
1778
|
);
|
|
@@ -1818,8 +1787,10 @@ function AdCarousel({
|
|
|
1818
1787
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
1819
1788
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
1820
1789
|
const [progress, setProgress] = useState(0);
|
|
1790
|
+
const [isPaused, setIsPaused] = useState(false);
|
|
1821
1791
|
const trackedImpressions = useRef(/* @__PURE__ */ new Set());
|
|
1822
1792
|
const timerRef = useRef(null);
|
|
1793
|
+
const progressRef = useRef(0);
|
|
1823
1794
|
const {
|
|
1824
1795
|
campaigns,
|
|
1825
1796
|
loading,
|
|
@@ -1835,19 +1806,18 @@ function AdCarousel({
|
|
|
1835
1806
|
}, [currentIndex, campaigns, recordImpression]);
|
|
1836
1807
|
useEffect(() => {
|
|
1837
1808
|
if (campaigns.length <= 1) return;
|
|
1838
|
-
setProgress(0);
|
|
1839
1809
|
const progressInterval = 50;
|
|
1840
1810
|
const steps = rotationInterval / progressInterval;
|
|
1841
|
-
let currentStep = 0;
|
|
1842
1811
|
timerRef.current = setInterval(() => {
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1812
|
+
if (isPaused) return;
|
|
1813
|
+
progressRef.current++;
|
|
1814
|
+
setProgress(progressRef.current / steps * 100);
|
|
1815
|
+
if (progressRef.current >= steps) {
|
|
1846
1816
|
setIsAnimating(true);
|
|
1847
1817
|
setTimeout(() => {
|
|
1848
1818
|
setCurrentIndex((prev) => (prev + 1) % campaigns.length);
|
|
1849
1819
|
setProgress(0);
|
|
1850
|
-
|
|
1820
|
+
progressRef.current = 0;
|
|
1851
1821
|
setTimeout(() => setIsAnimating(false), 50);
|
|
1852
1822
|
}, 250);
|
|
1853
1823
|
}
|
|
@@ -1855,7 +1825,11 @@ function AdCarousel({
|
|
|
1855
1825
|
return () => {
|
|
1856
1826
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
1857
1827
|
};
|
|
1858
|
-
}, [campaigns.length, rotationInterval,
|
|
1828
|
+
}, [campaigns.length, rotationInterval, isPaused]);
|
|
1829
|
+
useEffect(() => {
|
|
1830
|
+
progressRef.current = 0;
|
|
1831
|
+
setProgress(0);
|
|
1832
|
+
}, [currentIndex]);
|
|
1859
1833
|
const handleClick = useCallback(
|
|
1860
1834
|
(campaign2) => {
|
|
1861
1835
|
recordClick(campaign2);
|
|
@@ -1893,6 +1867,12 @@ function AdCarousel({
|
|
|
1893
1867
|
setTimeout(() => setIsAnimating(false), 50);
|
|
1894
1868
|
}, 250);
|
|
1895
1869
|
}, [currentIndex, resetTimer]);
|
|
1870
|
+
const handleMouseEnter = useCallback(() => {
|
|
1871
|
+
setIsPaused(true);
|
|
1872
|
+
}, []);
|
|
1873
|
+
const handleMouseLeave = useCallback(() => {
|
|
1874
|
+
setIsPaused(false);
|
|
1875
|
+
}, []);
|
|
1896
1876
|
if (loading || campaigns.length === 0) return null;
|
|
1897
1877
|
const campaign = campaigns[currentIndex];
|
|
1898
1878
|
if (!campaign) return null;
|
|
@@ -1903,27 +1883,15 @@ function AdCarousel({
|
|
|
1903
1883
|
const displayColor = campaign.customProductColor || product.color || "#3B82F6";
|
|
1904
1884
|
const displayIcon = campaign.customIcon || product.icon64 || "";
|
|
1905
1885
|
const displayFeatures = campaign.customFeatures || product.features || [];
|
|
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
1886
|
return /* @__PURE__ */ jsx(
|
|
1922
1887
|
Box,
|
|
1923
1888
|
{
|
|
1924
1889
|
className,
|
|
1890
|
+
onMouseEnter: handleMouseEnter,
|
|
1891
|
+
onMouseLeave: handleMouseLeave,
|
|
1925
1892
|
style: {
|
|
1926
|
-
padding: "
|
|
1893
|
+
padding: "16px 0",
|
|
1894
|
+
cursor: "default",
|
|
1927
1895
|
...style
|
|
1928
1896
|
},
|
|
1929
1897
|
children: /* @__PURE__ */ jsx(Container, { size: "4", children: /* @__PURE__ */ jsxs(
|
|
@@ -1932,9 +1900,10 @@ function AdCarousel({
|
|
|
1932
1900
|
style: {
|
|
1933
1901
|
background: `linear-gradient(145deg, var(--color-background) 0%, ${displayColor}08 100%)`,
|
|
1934
1902
|
border: `1px solid ${displayColor}20`,
|
|
1935
|
-
borderRadius:
|
|
1903
|
+
borderRadius: 12,
|
|
1936
1904
|
overflow: "hidden",
|
|
1937
|
-
height:
|
|
1905
|
+
height: 200,
|
|
1906
|
+
maxHeight: 200,
|
|
1938
1907
|
position: "relative"
|
|
1939
1908
|
},
|
|
1940
1909
|
children: [
|
|
@@ -1943,32 +1912,17 @@ function AdCarousel({
|
|
|
1943
1912
|
{
|
|
1944
1913
|
style: {
|
|
1945
1914
|
position: "absolute",
|
|
1946
|
-
top: -
|
|
1947
|
-
right: -
|
|
1948
|
-
width:
|
|
1949
|
-
height:
|
|
1915
|
+
top: -50,
|
|
1916
|
+
right: -50,
|
|
1917
|
+
width: 150,
|
|
1918
|
+
height: 150,
|
|
1950
1919
|
borderRadius: "50%",
|
|
1951
1920
|
background: `radial-gradient(circle, ${displayColor}12 0%, transparent 70%)`,
|
|
1952
1921
|
pointerEvents: "none"
|
|
1953
1922
|
}
|
|
1954
1923
|
}
|
|
1955
1924
|
),
|
|
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(
|
|
1925
|
+
/* @__PURE__ */ jsx(Box, { style: { height: 3, background: "var(--gray-a3)", position: "relative", zIndex: 2 }, children: /* @__PURE__ */ jsx(
|
|
1972
1926
|
Box,
|
|
1973
1927
|
{
|
|
1974
1928
|
style: {
|
|
@@ -1979,16 +1933,15 @@ function AdCarousel({
|
|
|
1979
1933
|
width: `${progress}%`,
|
|
1980
1934
|
background: `linear-gradient(90deg, ${displayColor} 0%, ${displayColor}cc 100%)`,
|
|
1981
1935
|
transition: "width 50ms linear",
|
|
1982
|
-
boxShadow: `0 0
|
|
1936
|
+
boxShadow: `0 0 10px ${displayColor}50`
|
|
1983
1937
|
}
|
|
1984
1938
|
}
|
|
1985
1939
|
) }),
|
|
1986
|
-
/* @__PURE__ */ jsxs(Box, { style: { height: "calc(100% -
|
|
1940
|
+
/* @__PURE__ */ jsxs(Box, { style: { height: "calc(100% - 3px)", position: "relative", zIndex: 1 }, children: [
|
|
1987
1941
|
/* @__PURE__ */ jsxs(
|
|
1988
1942
|
Flex,
|
|
1989
1943
|
{
|
|
1990
|
-
|
|
1991
|
-
align: "stretch",
|
|
1944
|
+
align: "center",
|
|
1992
1945
|
style: { height: "100%" },
|
|
1993
1946
|
children: [
|
|
1994
1947
|
campaigns.length > 1 && /* @__PURE__ */ jsx(
|
|
@@ -1996,24 +1949,24 @@ function AdCarousel({
|
|
|
1996
1949
|
{
|
|
1997
1950
|
align: "center",
|
|
1998
1951
|
justify: "center",
|
|
1999
|
-
style: { width:
|
|
1952
|
+
style: { width: 48, flexShrink: 0 },
|
|
2000
1953
|
display: { initial: "none", md: "flex" },
|
|
2001
1954
|
children: /* @__PURE__ */ jsx(
|
|
2002
1955
|
IconButton,
|
|
2003
1956
|
{
|
|
2004
|
-
size: "
|
|
1957
|
+
size: "2",
|
|
2005
1958
|
variant: "ghost",
|
|
2006
1959
|
color: "gray",
|
|
2007
1960
|
onClick: goToPrev,
|
|
2008
1961
|
style: {
|
|
2009
1962
|
cursor: "pointer",
|
|
2010
|
-
width:
|
|
2011
|
-
height:
|
|
2012
|
-
borderRadius:
|
|
1963
|
+
width: 36,
|
|
1964
|
+
height: 36,
|
|
1965
|
+
borderRadius: 8,
|
|
2013
1966
|
background: "var(--gray-a3)"
|
|
2014
1967
|
},
|
|
2015
1968
|
"aria-label": "Previous",
|
|
2016
|
-
children: /* @__PURE__ */ jsx(ChevronLeft, { size:
|
|
1969
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, { size: 20 })
|
|
2017
1970
|
}
|
|
2018
1971
|
)
|
|
2019
1972
|
}
|
|
@@ -2021,73 +1974,47 @@ function AdCarousel({
|
|
|
2021
1974
|
/* @__PURE__ */ jsxs(
|
|
2022
1975
|
Flex,
|
|
2023
1976
|
{
|
|
2024
|
-
direction: { initial: "column", md: "row" },
|
|
2025
1977
|
align: "center",
|
|
2026
|
-
gap: { initial: "
|
|
2027
|
-
|
|
1978
|
+
gap: { initial: "3", md: "4" },
|
|
1979
|
+
px: { initial: "3", md: "4" },
|
|
1980
|
+
py: "3",
|
|
2028
1981
|
style: {
|
|
2029
1982
|
flex: 1,
|
|
2030
1983
|
opacity: isAnimating ? 0 : 1,
|
|
2031
|
-
transform: isAnimating ? "translateX(-
|
|
2032
|
-
transition: "all 0.
|
|
1984
|
+
transform: isAnimating ? "translateX(-16px) scale(0.98)" : "translateX(0) scale(1)",
|
|
1985
|
+
transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
2033
1986
|
},
|
|
2034
1987
|
children: [
|
|
2035
|
-
/* @__PURE__ */
|
|
2036
|
-
|
|
1988
|
+
/* @__PURE__ */ jsx(
|
|
1989
|
+
Box,
|
|
2037
1990
|
{
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
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
|
-
]
|
|
1991
|
+
style: {
|
|
1992
|
+
width: 64,
|
|
1993
|
+
height: 64,
|
|
1994
|
+
borderRadius: 12,
|
|
1995
|
+
background: `linear-gradient(145deg, ${displayColor}20 0%, ${displayColor}10 100%)`,
|
|
1996
|
+
border: `1.5px solid ${displayColor}30`,
|
|
1997
|
+
display: "flex",
|
|
1998
|
+
alignItems: "center",
|
|
1999
|
+
justifyContent: "center",
|
|
2000
|
+
flexShrink: 0,
|
|
2001
|
+
boxShadow: `0 4px 16px ${displayColor}15`
|
|
2002
|
+
},
|
|
2003
|
+
dangerouslySetInnerHTML: { __html: displayIcon }
|
|
2077
2004
|
}
|
|
2078
2005
|
),
|
|
2079
2006
|
/* @__PURE__ */ jsxs(
|
|
2080
2007
|
Flex,
|
|
2081
2008
|
{
|
|
2082
2009
|
direction: "column",
|
|
2083
|
-
gap: "
|
|
2084
|
-
style: { flex: 1, minWidth: 0
|
|
2010
|
+
gap: "1",
|
|
2011
|
+
style: { flex: 1, minWidth: 0 },
|
|
2085
2012
|
children: [
|
|
2086
|
-
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2",
|
|
2013
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
|
|
2087
2014
|
/* @__PURE__ */ jsx(
|
|
2088
2015
|
Text,
|
|
2089
2016
|
{
|
|
2090
|
-
size: { initial: "
|
|
2017
|
+
size: { initial: "3", md: "4" },
|
|
2091
2018
|
weight: "bold",
|
|
2092
2019
|
style: { lineHeight: 1.2 },
|
|
2093
2020
|
children: displayTitle
|
|
@@ -2098,14 +2025,15 @@ function AdCarousel({
|
|
|
2098
2025
|
{
|
|
2099
2026
|
align: "center",
|
|
2100
2027
|
gap: "1",
|
|
2028
|
+
display: { initial: "none", sm: "flex" },
|
|
2101
2029
|
style: {
|
|
2102
2030
|
background: `${displayColor}15`,
|
|
2103
|
-
padding: "
|
|
2104
|
-
borderRadius:
|
|
2031
|
+
padding: "2px 6px",
|
|
2032
|
+
borderRadius: 4
|
|
2105
2033
|
},
|
|
2106
2034
|
children: [
|
|
2107
|
-
/* @__PURE__ */ jsx(Star, { size:
|
|
2108
|
-
/* @__PURE__ */ jsx(Text, { size: "1", weight: "medium", style: { color: displayColor }, children: "Featured" })
|
|
2035
|
+
/* @__PURE__ */ jsx(Star, { size: 10, fill: displayColor, color: displayColor }),
|
|
2036
|
+
/* @__PURE__ */ jsx(Text, { size: "1", weight: "medium", style: { color: displayColor, fontSize: 10 }, children: "Featured" })
|
|
2109
2037
|
]
|
|
2110
2038
|
}
|
|
2111
2039
|
)
|
|
@@ -2113,109 +2041,85 @@ function AdCarousel({
|
|
|
2113
2041
|
/* @__PURE__ */ jsx(
|
|
2114
2042
|
Text,
|
|
2115
2043
|
{
|
|
2116
|
-
size:
|
|
2044
|
+
size: "2",
|
|
2117
2045
|
color: "gray",
|
|
2118
2046
|
style: {
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
WebkitBoxOrient: "vertical",
|
|
2123
|
-
overflow: "hidden"
|
|
2047
|
+
overflow: "hidden",
|
|
2048
|
+
textOverflow: "ellipsis",
|
|
2049
|
+
whiteSpace: "nowrap"
|
|
2124
2050
|
},
|
|
2125
|
-
children:
|
|
2051
|
+
children: displayTagline
|
|
2126
2052
|
}
|
|
2127
2053
|
),
|
|
2128
2054
|
displayFeatures.length > 0 && /* @__PURE__ */ jsx(
|
|
2129
2055
|
Flex,
|
|
2130
2056
|
{
|
|
2131
|
-
gap:
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
children: displayFeatures.slice(0,
|
|
2057
|
+
gap: "2",
|
|
2058
|
+
display: { initial: "none", md: "flex" },
|
|
2059
|
+
style: { marginTop: 4 },
|
|
2060
|
+
children: displayFeatures.slice(0, 3).map((feature, i) => /* @__PURE__ */ jsxs(
|
|
2135
2061
|
Flex,
|
|
2136
2062
|
{
|
|
2137
2063
|
align: "center",
|
|
2138
|
-
gap: "
|
|
2064
|
+
gap: "1",
|
|
2139
2065
|
style: {
|
|
2140
2066
|
background: "var(--gray-a3)",
|
|
2141
|
-
padding: "
|
|
2142
|
-
borderRadius:
|
|
2067
|
+
padding: "3px 8px",
|
|
2068
|
+
borderRadius: 4
|
|
2143
2069
|
},
|
|
2144
2070
|
children: [
|
|
2145
|
-
/* @__PURE__ */ jsx(
|
|
2146
|
-
|
|
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 })
|
|
2071
|
+
/* @__PURE__ */ jsx(Check, { size: 10, color: displayColor, strokeWidth: 3 }),
|
|
2072
|
+
/* @__PURE__ */ jsx(Text, { size: "1", style: { fontSize: 11 }, children: feature })
|
|
2161
2073
|
]
|
|
2162
2074
|
},
|
|
2163
2075
|
i
|
|
2164
2076
|
))
|
|
2165
2077
|
}
|
|
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
2078
|
)
|
|
2216
2079
|
]
|
|
2217
2080
|
}
|
|
2218
|
-
)
|
|
2081
|
+
),
|
|
2082
|
+
/* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", align: "center", style: { flexShrink: 0 }, children: [
|
|
2083
|
+
/* @__PURE__ */ jsx(
|
|
2084
|
+
Button,
|
|
2085
|
+
{
|
|
2086
|
+
size: "2",
|
|
2087
|
+
onClick: () => handleClick(campaign),
|
|
2088
|
+
style: {
|
|
2089
|
+
background: `linear-gradient(135deg, ${displayColor} 0%, ${displayColor}dd 100%)`,
|
|
2090
|
+
color: "white",
|
|
2091
|
+
fontWeight: 600,
|
|
2092
|
+
padding: "0 16px",
|
|
2093
|
+
height: 36,
|
|
2094
|
+
boxShadow: `0 3px 12px ${displayColor}40`,
|
|
2095
|
+
border: "none",
|
|
2096
|
+
cursor: "pointer"
|
|
2097
|
+
},
|
|
2098
|
+
children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
|
|
2099
|
+
displayCta,
|
|
2100
|
+
/* @__PURE__ */ jsx(ArrowRight, { size: 14 })
|
|
2101
|
+
] })
|
|
2102
|
+
}
|
|
2103
|
+
),
|
|
2104
|
+
/* @__PURE__ */ jsx(
|
|
2105
|
+
Button,
|
|
2106
|
+
{
|
|
2107
|
+
size: "1",
|
|
2108
|
+
variant: "ghost",
|
|
2109
|
+
onClick: () => handleClick(campaign),
|
|
2110
|
+
style: {
|
|
2111
|
+
color: displayColor,
|
|
2112
|
+
fontWeight: 500,
|
|
2113
|
+
cursor: "pointer",
|
|
2114
|
+
fontSize: 11
|
|
2115
|
+
},
|
|
2116
|
+
children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
|
|
2117
|
+
"Details",
|
|
2118
|
+
/* @__PURE__ */ jsx(ExternalLink, { size: 11 })
|
|
2119
|
+
] })
|
|
2120
|
+
}
|
|
2121
|
+
)
|
|
2122
|
+
] })
|
|
2219
2123
|
]
|
|
2220
2124
|
}
|
|
2221
2125
|
),
|
|
@@ -2224,24 +2128,24 @@ function AdCarousel({
|
|
|
2224
2128
|
{
|
|
2225
2129
|
align: "center",
|
|
2226
2130
|
justify: "center",
|
|
2227
|
-
style: { width:
|
|
2131
|
+
style: { width: 48, flexShrink: 0 },
|
|
2228
2132
|
display: { initial: "none", md: "flex" },
|
|
2229
2133
|
children: /* @__PURE__ */ jsx(
|
|
2230
2134
|
IconButton,
|
|
2231
2135
|
{
|
|
2232
|
-
size: "
|
|
2136
|
+
size: "2",
|
|
2233
2137
|
variant: "ghost",
|
|
2234
2138
|
color: "gray",
|
|
2235
2139
|
onClick: goToNext,
|
|
2236
2140
|
style: {
|
|
2237
2141
|
cursor: "pointer",
|
|
2238
|
-
width:
|
|
2239
|
-
height:
|
|
2240
|
-
borderRadius:
|
|
2142
|
+
width: 36,
|
|
2143
|
+
height: 36,
|
|
2144
|
+
borderRadius: 8,
|
|
2241
2145
|
background: "var(--gray-a3)"
|
|
2242
2146
|
},
|
|
2243
2147
|
"aria-label": "Next",
|
|
2244
|
-
children: /* @__PURE__ */ jsx(ChevronRight, { size:
|
|
2148
|
+
children: /* @__PURE__ */ jsx(ChevronRight, { size: 20 })
|
|
2245
2149
|
}
|
|
2246
2150
|
)
|
|
2247
2151
|
}
|
|
@@ -2254,10 +2158,10 @@ function AdCarousel({
|
|
|
2254
2158
|
{
|
|
2255
2159
|
justify: "center",
|
|
2256
2160
|
align: "center",
|
|
2257
|
-
gap: "
|
|
2161
|
+
gap: "2",
|
|
2258
2162
|
style: {
|
|
2259
2163
|
position: "absolute",
|
|
2260
|
-
bottom:
|
|
2164
|
+
bottom: 8,
|
|
2261
2165
|
left: 0,
|
|
2262
2166
|
right: 0
|
|
2263
2167
|
},
|
|
@@ -2271,21 +2175,21 @@ function AdCarousel({
|
|
|
2271
2175
|
onClick: goToPrev,
|
|
2272
2176
|
style: { cursor: "pointer" },
|
|
2273
2177
|
"aria-label": "Previous",
|
|
2274
|
-
children: /* @__PURE__ */ jsx(ChevronLeft, { size:
|
|
2178
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
|
|
2275
2179
|
}
|
|
2276
2180
|
) }),
|
|
2277
|
-
/* @__PURE__ */ jsx(Flex, { gap: "
|
|
2181
|
+
/* @__PURE__ */ jsx(Flex, { gap: "1", children: campaigns.map((c, i) => /* @__PURE__ */ jsx(
|
|
2278
2182
|
Box,
|
|
2279
2183
|
{
|
|
2280
2184
|
onClick: () => goToSlide(i),
|
|
2281
2185
|
style: {
|
|
2282
|
-
width: i === currentIndex ?
|
|
2283
|
-
height:
|
|
2284
|
-
borderRadius:
|
|
2186
|
+
width: i === currentIndex ? 20 : 8,
|
|
2187
|
+
height: 8,
|
|
2188
|
+
borderRadius: 4,
|
|
2285
2189
|
background: i === currentIndex ? `linear-gradient(90deg, ${c.product?.color || displayColor}, ${c.product?.color || displayColor}cc)` : "var(--gray-a4)",
|
|
2286
2190
|
cursor: "pointer",
|
|
2287
|
-
transition: "all 0.
|
|
2288
|
-
boxShadow: i === currentIndex ? `0 2px
|
|
2191
|
+
transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2192
|
+
boxShadow: i === currentIndex ? `0 2px 6px ${c.product?.color || displayColor}40` : "none"
|
|
2289
2193
|
}
|
|
2290
2194
|
},
|
|
2291
2195
|
i
|
|
@@ -2299,7 +2203,7 @@ function AdCarousel({
|
|
|
2299
2203
|
onClick: goToNext,
|
|
2300
2204
|
style: { cursor: "pointer" },
|
|
2301
2205
|
"aria-label": "Next",
|
|
2302
|
-
children: /* @__PURE__ */ jsx(ChevronRight, { size:
|
|
2206
|
+
children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
|
|
2303
2207
|
}
|
|
2304
2208
|
) })
|
|
2305
2209
|
]
|
|
@@ -2955,4 +2859,4 @@ export {
|
|
|
2955
2859
|
getLargePanelVariant as s,
|
|
2956
2860
|
getSmallPanelVariant as t
|
|
2957
2861
|
};
|
|
2958
|
-
//# sourceMappingURL=index-
|
|
2862
|
+
//# sourceMappingURL=index-CsoIWvB8.js.map
|