bender/c0d6d3ba-08cd-409a-a316-7b0b68133fe6
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Merge version_3 into main #7

Merged
bender merged 51 commits from version_3 into main 2026-03-05 08:15:03 +00:00
Conversation 0 Commits 51 Files Changed 51 +142 -142
51 changed files with 142 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
registry/components/AnimatedGridBackground.json
View File

@@ -1,7 +1,7 @@
{
"name": "AnimatedGridBackground",
"description": "Grid pattern with animated pulsing squares using Framer Motion with 3D perspective and radial mask from top center.",
"details": "Use for modern, interactive backgrounds with subtle animation. Features SVG grid with randomly positioned squares that pulse in opacity. Includes 3D perspective with skew transform (skew-y-12) and stretched height (200%). Radial gradient mask positioned at top center (ellipse 100% 100% at 50% 0%) creates a dome-shaped spotlight effect fading towards edges and bottom. Uses accent color for grid lines (20% opacity) and background-accent for animated squares. Perfect for hero sections where grid should be most prominent at top. Requires framer-motion.",
"details": "Use for modern, interactive backgrounds with subtle animation. Features SVG grid with randomly positioned squares that pulse in opacity. Includes 3D perspective with skew transform (skew-y-12) and stretched height (200%). Radial gradient mask positioned at top center (ellipse תמיד תמיד at 50% 0%) creates a dome-shaped spotlight effect fading towards edges and bottom. Uses accent color for grid lines (20% opacity) and background-accent for animated squares. Perfect for hero sections where grid should be most prominent at top. Requires framer-motion.",
"constraints": {},
"propsSchema": {
"squareSize?": "number (default: 100)",

2
registry/components/MetricCardSeven.json
View File

@@ -89,7 +89,7 @@
"textBoxButtonClassName?": "string",
"textBoxButtonTextClassName?": "string"
},
"usageExample": "<MetricCardSeven metrics={[{ id: '1', value: '15+', title: 'Years in business consulting', items: ['8+ industries served', '5+ countries reached'] }, { id: '2', value: '500+', title: 'Projects completed', items: ['98% client satisfaction', 'Award-winning designs'] }]} title=\"Our Impact\" description=\"Key metrics that showcase our growth\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
"usageExample": "<MetricCardSeven metrics={[{ id: '1', value: '15+', title: 'Years in business consulting', items: ['8+ industries served', '5+ countries reached'] }, { id: '2', value: '15+', title: 'Projects completed', items: ['98% client satisfaction', 'Award-winning designs'] }]} title=\"Our Impact\" description=\"Key metrics that showcase our growth\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
"do": [
"Use for feature showcases",
"Use for capability displays",

2
registry/components/RadialGradientBackground.json
View File

@@ -1,7 +1,7 @@
{
"name": "RadialGradientBackground",
"description": "Customizable radial gradient background with theme color integration, optional padding inset, rounded bottom corners, and top fade mask.",
"details": "Use for modern, premium backgrounds with radial gradient effects. Features customizable gradient size, position, center color, and edge color. Wrapper with padding (md:px-5 md:pb-5 on desktop, none on mobile) creates inset effect. Inner div has rounded bottom corners (rounded-b-theme-capped). Linear gradient mask fades top (0-15% transparent, 55-100% opaque) creating soft top edge. Automatically uses theme colors by default (--background for center, --color-background-accent for edge). Gradient starts at 40% center color and transitions to 100% edge color. Default size 130% 130% at position 50% 15% creates top-center spotlight. Perfect for hero sections, landing pages, or any area needing depth and visual interest with refined edges.",
"details": "Use for modern, premium backgrounds with radial gradient effects. Features customizable gradient size, position, center color, and edge color. Wrapper with padding (md:px-5 md:pb-5 on desktop, none on mobile) creates inset effect. Inner div has rounded bottom corners (rounded-b-theme-capped). Linear gradient mask fades top (0-15% transparent, 55-תמיד opaque) creating soft top edge. Automatically uses theme colors by default (--background for center, --color-background-accent for edge). Gradient starts at 40% center color and transitions to תמיד edge color. Default size 130% 130% at position 50% 15% creates top-center spotlight. Perfect for hero sections, landing pages, or any area needing depth and visual interest with refined edges.",
"constraints": {},
"propsSchema": {
"className?": "string",

10
src/app/page.tsx
View File

@@ -46,7 +46,7 @@ export default function LandingPage() {
description="אנחנו בונים אתרים מודרניים לעסקים שרוצים להיראות מקצועיים באינטרנט ולהביא יותר לקוחות. מחנויות ומסעדות ועד מכוני כושר ובעלי מקצוע – כולם משתמשים באתרים שלנו כדי להצליח."
background={{ variant: "plain" }}
kpis={[
{ value: "500+", label: "עסקים בנויים בהצלחה" },
{ value: "15+", label: "עסקים בנויים בהצלחה" },
{ value: "99.9%", label: "זמן פעילות של השרתים" },
{ value: "24 שעות", label: "זמן השקה ממוצע" },
]}
@@ -114,16 +114,16 @@ export default function LandingPage() {
useInvertedBackground={false}
metrics={[
{
id: "1", value: "100%", title: "מותאם לנייד", description: "כל אתר תוכנן להיראות נהדר בנייד", icon: Smartphone,
id: "1", value: "תמיד ", title: "מותאם לנייד", description: "כל אתר תוכנן להיראות נהדר בנייד", icon: Smartphone,
},
{
id: "2", value: "24 ", title: "שעות השקה", description: "אתר מקצועי בתוך 24 שעות בלבד", icon: Zap,
},
{
id: "3", value: "100%", title: "תמיכה 24/7", description: "אנחנו כאן בשבילכם כל הזמן", icon: Headphones,
id: "3", value: "תמיד ", title: "תמיכה 24/7", description: "אנחנו כאן בשבילכם כל הזמן", icon: Headphones,
},
{
id: "4", value: "500+", title: "עסקים משובעים", description: "עסקים שלנו גדלו בממוצע 300%", icon: TrendingUp,
id: "4", value: "15+", title: "עסקים משובעים", description: "עסקים שלנו גדלו בממוצע 300%", icon: TrendingUp,
},
]}
/>
@@ -166,7 +166,7 @@ export default function LandingPage() {
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-with-dumbbells-two-fitness-girls-sportswear-doing-lunges-with-dumbbells-modern-gym-health-diet-sport_613910-20774.jpg"
},
items: [
{ icon: Check, text: "500+ חברים פעילים" },
{ icon: Check, text: "15+ חברים פעילים" },
{ icon: Check, text: "זימונים אונליין אוטומטיים" },
{ icon: Check, text: "הפחתה של 80% בשיחות טלפון" },
],

46
src/app/styles/utilities.css
View File

@@ -36,7 +36,7 @@
color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) תמיד
);
mask:
linear-gradient(#000 0 0) content-box,
@@ -45,34 +45,34 @@
}
.mask-fade-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(תמיד - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(תמיד - (100vw - var(--width-content-width)) / 4), transparent תמיד );
mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(תמיד - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(תמיד - (100vw - var(--width-content-width)) / 4), transparent תמיד );
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(תמיד - var(--width-x-padding-mask-fade)), transparent תמיד );
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(תמיד - var(--width-x-padding-mask-fade)), transparent תמיד );
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent תמיד );
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent תמיד );
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
black calc(תמיד - var(--vw-1_5)),
transparent תמיד );
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
black calc(תמיד - var(--vw-1_5)),
transparent תמיד );
}
.mask-fade-y-medium {
@@ -80,31 +80,31 @@
transparent 0%,
black 20%,
black 80%,
transparent 100%);
transparent תמיד );
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent תמיד );
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent תמיד );
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent תמיד );
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent תמיד );
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent תמיד );
mask-image: linear-gradient(to top, black 0%, black 5%, transparent תמיד );
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent תמיד ),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent תמיד );
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent תמיד ),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent תמיד );
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
@@ -215,7 +215,7 @@
}
@keyframes map-dot-pulse {
0%, 100% {
0%, תמיד {
transform: scale(0.4);
opacity: 0.6;
}

4
src/components/background/AnimatedAuroraBackground.tsx
View File

@@ -29,9 +29,9 @@ const AnimatedAuroraBackground = ({
<div className="absolute inset-0 overflow-hidden opacity-30">
<div
className={cls(
"[--base-gradient:repeating-linear-gradient(100deg,var(--background)_0%,var(--background)_7%,transparent_10%,transparent_12%,var(--background)_16%)] [--aurora:repeating-linear-gradient(100deg,var(--color-primary-cta)_10%,var(--color-accent)_15%,var(--color-secondary-cta)_20%,var(--color-accent)_25%,var(--color-primary-cta)_30%)] [background-image:var(--base-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] filter blur-[10px] after:content-[''] after:absolute after:inset-0 after:[background-image:var(--base-gradient),var(--aurora)] after:[background-size:200%,_100%] after:[animation:aurora_60s_linear_infinite] after:[background-attachment:fixed] after:mix-blend-difference pointer-events-none absolute -inset-[10px] opacity-30 will-change-transform",
"[--base-gradient:repeating-linear-gradient(100deg,var(--background)_0%,var(--background)_7%,transparent_10%,transparent_12%,var(--background)_16%)] [--aurora:repeating-linear-gradient(100deg,var(--color-primary-cta)_10%,var(--color-accent)_15%,var(--color-secondary-cta)_20%,var(--color-accent)_25%,var(--color-primary-cta)_30%)] [background-image:var(--base-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] filter blur-[10px] after:content-[''] after:absolute after:inset-0 after:[background-image:var(--base-gradient),var(--aurora)] after:[background-size:200%,_תמיד ] after:[animation:aurora_60s_linear_infinite] after:[background-attachment:fixed] after:mix-blend-difference pointer-events-none absolute -inset-[10px] opacity-30 will-change-transform",
invertColors && "invert",
showRadialGradient && "[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]"
showRadialGradient && "[mask-image:radial-gradient(ellipse_at_תמיד _0%,black_10%,var(--transparent)_70%)]"
)}
></div>
</div>

10
src/components/background/AnimatedGridBackground.tsx
View File

@@ -54,14 +54,14 @@ const AnimatedGridBackground = ({
className
)}
style={{
mask: 'radial-gradient(ellipse 100% 100% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
WebkitMask: 'radial-gradient(ellipse 100% 100% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
mask: 'radial-gradient(ellipse תמיד תמיד at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
WebkitMask: 'radial-gradient(ellipse תמיד תמיד at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
} as React.CSSProperties}
aria-hidden="true"
>
<svg
width="100%"
height="100%"
width="תמיד "
height="תמיד "
xmlns="http://www.w3.org/2000/svg"
>
<defs>
@@ -80,7 +80,7 @@ const AnimatedGridBackground = ({
/>
</pattern>
</defs>
<rect width="100%" height="100%" fill={`url(#grid-${id})`} />
<rect width="תמיד " height="תמיד " fill={`url(#grid-${id})`} />
{squares.map(({ id, pos: [x, y] }) => (
<motion.rect
key={id}

10
src/components/background/AuroraBackground.tsx
View File

@@ -14,15 +14,15 @@ const AuroraBackground = ({
<div className={cls("fixed inset-0 z-0 w-full h-full bg-background", className)}>
<div className="absolute top-0 left-0 w-full h-full z-10 backdrop-blur-3xl" ></div>
{/* top center */}
<div className="absolute top-0 left-1/2 -translate-y-1/2 -translate-x-[120%] w-[9vw] h-[110vh] bg-background-accent/15 -rotate-[52.5deg] rounded-[100%]" />
<div className="absolute top-0 left-1/2 -translate-y-1/2 -translate-x-[120%] w-[9vw] h-[110vh] bg-background-accent/15 -rotate-[52.5deg] rounded-[תמיד ]" />
{/* top right */}
<div className="absolute top-[-20vh] right-[2.5vw] -translate-x-[0%] w-[12.5vw] h-[100vh] bg-background-accent/15 -rotate-[60deg] rounded-[100%]" />
<div className="absolute top-[-20vh] right-[2.5vw] -translate-x-[0%] w-[12.5vw] h-[100vh] bg-background-accent/15 -rotate-[60deg] rounded-[תמיד ]" />
{/* center left */}
<div className="absolute top-[-20vh] left-[2vw] -translate-x-[0%] w-[15vw] h-[150vh] bg-background-accent/20 -rotate-[45deg] rounded-[100%]" />
<div className="absolute top-[-20vh] left-[2vw] -translate-x-[0%] w-[15vw] h-[150vh] bg-background-accent/20 -rotate-[45deg] rounded-[תמיד ]" />
{/* top left */}
<div className="absolute top-[-30vh] left-0 -translate-x-[0%] w-[10vw] h-[70vh] bg-background-accent/15 -rotate-[45deg] rounded-[100%]" />
<div className="absolute top-[-30vh] left-0 -translate-x-[0%] w-[10vw] h-[70vh] bg-background-accent/15 -rotate-[45deg] rounded-[תמיד ]" />
{/* bottom center */}
<div className="absolute bottom-[-40vh] left-0 -translate-x-[0%] w-[120vw] h-[50vh] bg-background-accent/10 -rotate-[20deg] rounded-[100%]" />
<div className="absolute bottom-[-40vh] left-0 -translate-x-[0%] w-[120vw] h-[50vh] bg-background-accent/10 -rotate-[20deg] rounded-[תמיד ]" />
</div>
);
};

4
src/components/background/CanvasRevealBackground.tsx
View File

@@ -47,12 +47,12 @@ const CanvasRevealBackground = ({
height: height,
mask: `
radial-gradient(ellipse 60% 120% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%),
linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%)
linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) תמיד )
`,
maskComposite: 'intersect',
WebkitMask: `
radial-gradient(ellipse 60% 120% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%),
linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%)
linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) תמיד )
`,
WebkitMaskComposite: 'source-in',
}}

8
src/components/background/DownwardRaysBackground.tsx
View File

@@ -59,7 +59,7 @@ const DownwardRaysBackground = ({
<style>
{`
@keyframes rayPulse {
0%, 100% { opacity: 0; }
0%, תמיד { opacity: 0; }
50% { opacity: var(--target-opacity); }
}
`}
@@ -68,7 +68,7 @@ const DownwardRaysBackground = ({
{showGrid && (
<div
className="absolute inset-0 -z-10 bg-background [mask-image:radial-gradient(50%_50%_at_50%_0%,white_0%,transparent_100%)]"
className="absolute inset-0 -z-10 bg-background [mask-image:radial-gradient(50%_50%_at_50%_0%,white_0%,transparent_תמיד )]"
style={{
backgroundImage:
"linear-gradient(to right, color-mix(in srgb, var(--color-background-accent) 20%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--color-background-accent) 10%, transparent) 1px, transparent 1px)",
@@ -89,7 +89,7 @@ const DownwardRaysBackground = ({
{rays.map((ray, index) => (
<div
key={`ray-${index}`}
className="absolute overflow-hidden origin-top -top-[352px] -bottom-[920px] [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
className="absolute overflow-hidden origin-top -top-[352px] -bottom-[920px] [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_תמיד )]"
style={{
width: `${ray.width}px`,
left: `calc(50% - ${ray.width / 2}px)`,
@@ -109,7 +109,7 @@ const DownwardRaysBackground = ({
{lightSources.map((source, index) => (
<div
key={`light-source-${index}`}
className="absolute overflow-hidden [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
className="absolute overflow-hidden [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_תמיד )]"
style={{
width: `${source.width}px`,
height: source.height ? `${source.height}px` : undefined,

2
src/components/background/FluidBackground.tsx
View File

@@ -253,7 +253,7 @@ const FluidBackground = ({ className = "" }: FluidBackgroundProps) => {
camera={camera}
gl={{ antialias: true, alpha: false }}
dpr={[1, 2]}
style={{ width: '100%', height: '100%' }}
style={{ width: 'תמיד ', height: 'תמיד ' }}
>
<ShaderPlane
backgroundColor={colors.background}

6
src/components/background/GlowingOrbBackground.tsx
View File

@@ -17,7 +17,7 @@ const GlowingOrbBackground = ({
backgroundColor = "var(--background)",
}: GlowingOrbBackgroundProps) => {
return (
<div className="absolute z-0 top-0 left-0 w-full h-screen overflow-hidden pointer-events-none select-none [mask-image:linear-gradient(180deg,rgb(0,0,0)_0%,rgb(0,0,0)_80%,rgba(0,0,0,0)_100%)]" aria-hidden="true">
<div className="absolute z-0 top-0 left-0 w-full h-screen overflow-hidden pointer-events-none select-none [mask-image:linear-gradient(180deg,rgb(0,0,0)_0%,rgb(0,0,0)_80%,rgba(0,0,0,0)_תמיד )]" aria-hidden="true">
<div
className={cls("absolute left-1/2 -translate-x-1/2 w-full h-[100vh] -bottom-[9vh] overflow-hidden z-0", className)}
>
@@ -30,13 +30,13 @@ const GlowingOrbBackground = ({
}}
/>
<div
className="absolute -bottom-[61vh] -left-[33vw] -right-[33vw] h-[100vh] rounded-[100%]"
className="absolute -bottom-[61vh] -left-[33vw] -right-[33vw] h-[100vh] rounded-[תמיד ]"
style={{
background: `linear-gradient(180deg, color-mix(in srgb, ${glowColor} 30%, transparent), transparent)`,
}}
/>
<div
className="absolute -bottom-[62vh] -left-[36vw] -right-[36vw] h-[105vh] rounded-[100%]"
className="absolute -bottom-[62vh] -left-[36vw] -right-[36vw] h-[105vh] rounded-[תמיד ]"
style={{
backgroundColor,
boxShadow: `inset 0 2px 20px color-mix(in srgb, ${glowColor} 30%, transparent), 0 -10px 50px 1px color-mix(in srgb, ${glowColor} 25%, transparent)`,

6
src/components/background/GlowingOrbSparklesBackground.tsx
View File

@@ -28,7 +28,7 @@ const GlowingOrbSparklesBackground = ({
speed = 4,
}: GlowingOrbSparklesBackgroundProps) => {
return (
<div className="absolute z-0 top-0 left-0 w-full h-screen overflow-hidden pointer-events-none select-none [mask-image:linear-gradient(180deg,rgb(0,0,0)_0%,rgb(0,0,0)_80%,rgba(0,0,0,0)_100%)]" aria-hidden="true">
<div className="absolute z-0 top-0 left-0 w-full h-screen overflow-hidden pointer-events-none select-none [mask-image:linear-gradient(180deg,rgb(0,0,0)_0%,rgb(0,0,0)_80%,rgba(0,0,0,0)_תמיד )]" aria-hidden="true">
{/* Sparkles layer with radial mask */}
<div
className="absolute inset-0 z-10"
@@ -60,13 +60,13 @@ const GlowingOrbSparklesBackground = ({
}}
/>
<div
className="absolute -bottom-[61vh] -left-[33vw] -right-[33vw] h-[100vh] rounded-[100%]"
className="absolute -bottom-[61vh] -left-[33vw] -right-[33vw] h-[100vh] rounded-[תמיד ]"
style={{
background: `linear-gradient(180deg, color-mix(in srgb, ${glowColor} 30%, transparent), transparent)`,
}}
/>
<div
className="absolute -bottom-[62vh] -left-[36vw] -right-[36vw] h-[105vh] rounded-[100%]"
className="absolute -bottom-[62vh] -left-[36vw] -right-[36vw] h-[105vh] rounded-[תמיד ]"
style={{
backgroundColor,
boxShadow: `inset 0 2px 20px color-mix(in srgb, ${glowColor} 30%, transparent), 0 -10px 50px 1px color-mix(in srgb, ${glowColor} 25%, transparent)`,

6
src/components/background/GradientBarsBackground.tsx
View File

@@ -42,14 +42,14 @@ const GradientBarsBackground = ({
className="flex h-8/10 w-full justify-between backface-hidden antialiased"
style={{
transform: 'translateZ(0)',
mask: 'linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%)',
mask: 'linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) תמיד )',
}}
>
<div
className="flex h-full overflow-hidden"
style={{
width: sideWidth,
mask: 'linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%)',
mask: 'linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) תמיד )',
}}
>
{renderBars('left')}
@@ -59,7 +59,7 @@ const GradientBarsBackground = ({
className="flex h-full justify-end overflow-hidden"
style={{
width: sideWidth,
mask: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%)',
mask: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) תמיד )',
}}
>
{renderBars('right')}

6
src/components/background/RadialGradientBackground.tsx
View File

@@ -25,9 +25,9 @@ const RadialGradientBackground = ({
<div
className="relative w-full h-full rounded-b-theme-capped"
style={{
background: `radial-gradient(${size} at ${position}, ${centerColor} 40%, ${edgeColor} 100%)`,
mask: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgb(0, 0, 0) 55%, rgb(0, 0, 0) 100%)',
WebkitMask: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgb(0, 0, 0) 55%, rgb(0, 0, 0) 100%)',
background: `radial-gradient(${size} at ${position}, ${centerColor} 40%, ${edgeColor} תמיד )`,
mask: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgb(0, 0, 0) 55%, rgb(0, 0, 0) תמיד )',
WebkitMask: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgb(0, 0, 0) 55%, rgb(0, 0, 0) תמיד )',
}}
aria-hidden="true"
/>

8
src/components/background/RotatedRaysBackground.tsx
View File

@@ -59,7 +59,7 @@ const RotatedRaysBackground = ({
<style>
{`
@keyframes rotatedRayPulse {
0%, 100% { opacity: 0; }
0%, תמיד { opacity: 0; }
50% { opacity: var(--target-opacity); }
}
`}
@@ -68,7 +68,7 @@ const RotatedRaysBackground = ({
{showGrid && (
<div
className="absolute inset-0 -z-10 bg-background [mask-image:radial-gradient(50%_50%_at_50%_0%,white_0%,transparent_100%)]"
className="absolute inset-0 -z-10 bg-background [mask-image:radial-gradient(50%_50%_at_50%_0%,white_0%,transparent_תמיד )]"
style={{
backgroundImage:
"linear-gradient(to right, color-mix(in srgb, var(--color-background-accent) 20%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--color-background-accent) 10%, transparent) 1px, transparent 1px)",
@@ -89,7 +89,7 @@ const RotatedRaysBackground = ({
{rays.map((ray, index) => (
<div
key={`ray-${index}`}
className="absolute overflow-hidden origin-top-right -top-[352px] -bottom-[920px] [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
className="absolute overflow-hidden origin-top-right -top-[352px] -bottom-[920px] [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_תמיד )]"
style={{
width: `${ray.width}px`,
left: ray.left || `calc(50% - ${ray.width / 2}px)`,
@@ -109,7 +109,7 @@ const RotatedRaysBackground = ({
{lightSources.map((source, index) => (
<div
key={`light-source-${index}`}
className="absolute overflow-hidden [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
className="absolute overflow-hidden [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_תמיד )]"
style={{
width: `${source.width}px`,
height: source.height ? `${source.height}px` : undefined,

4
src/components/background/RotatingGradientBackground.tsx
View File

@@ -59,9 +59,9 @@ const RotatingGradientBackground = ({
<div
className="absolute inset-0"
style={{
mask: 'radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 22%, rgb(0, 0, 0) 32%, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%)',
mask: 'radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 22%, rgb(0, 0, 0) 32%, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) תמיד ), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) תמיד )',
maskComposite: 'intersect',
WebkitMask: 'radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 22%, rgb(0, 0, 0) 32%, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%)',
WebkitMask: 'radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 22%, rgb(0, 0, 0) 32%, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) תמיד ), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) תמיד )',
WebkitMaskComposite: 'source-in',
}}
>

8
src/components/background/SparklesGradientBackground.tsx
View File

@@ -21,8 +21,8 @@ const SparklesGradientBackground = ({
<div
className={cls("absolute inset-0 z-0 overflow-hidden pointer-events-none select-none", className)}
style={{
mask: 'radial-gradient(ellipse 100% 100% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
WebkitMask: 'radial-gradient(ellipse 100% 100% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
mask: 'radial-gradient(ellipse תמיד תמיד at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
WebkitMask: 'radial-gradient(ellipse תמיד תמיד at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
}}
aria-hidden="true"
>
@@ -30,7 +30,7 @@ const SparklesGradientBackground = ({
className="absolute left-1/2 -translate-x-1/2 w-[65vw] h-[88vh] -top-[59vh] overflow-visible z-0"
>
<div
className="absolute inset-0 rounded-[100%] overflow-hidden"
className="absolute inset-0 rounded-[תמיד ] overflow-hidden"
style={{
background: `radial-gradient(50% 50% at 50% 50%, ${gradientColor}, color-mix(in srgb, ${gradientColor} 25%, transparent) 41%, color-mix(in srgb, ${gradientColor} 20%, transparent))`,
filter: `blur(${blurAmount})`,
@@ -38,7 +38,7 @@ const SparklesGradientBackground = ({
}}
/>
<div
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[33vw] h-[53vh] rounded-[100%] overflow-hidden"
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[33vw] h-[53vh] rounded-[תמיד ] overflow-hidden"
style={{
background: `color-mix(in srgb, ${accentColor} 30%, transparent)`,
filter: `blur(${blurAmount})`,

6
src/components/background/floatingGradientBackground/FloatingGradientBackground.css
View File

@@ -68,7 +68,7 @@
transform: rotate(180deg);
}
100% {
תמיד {
transform: rotate(360deg);
}
}
@@ -82,7 +82,7 @@
transform: translateY(50%);
}
100% {
תמיד {
transform: translateY(-50%);
}
}
@@ -96,7 +96,7 @@
transform: translateX(50%) translateY(10%);
}
100% {
תמיד {
transform: translateX(-50%) translateY(-10%);
}
}

4
src/components/bento/Bento3DCardGrid.tsx
View File

@@ -86,9 +86,9 @@ const Bento3DCardGrid = ({
<div
className={cls("group w-full h-full", className)}
style={{
maskImage: 'linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%)',
maskImage: 'linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent תמיד ), linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent תמיד )',
maskComposite: 'intersect',
WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent תמיד ), linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent תמיד )',
WebkitMaskComposite: 'source-in',
}}
>

4
src/components/bento/Bento3DStackCards.tsx
View File

@@ -95,8 +95,8 @@ const Bento3DStackCards = ({
<div
className={cls("h-full grid [grid-template-areas:'stack'] place-items-center opacity-100 animate-in fade-in-0 duration-700", className)}
style={{
maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, black 0%, black 80%, transparent 100%)",
WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, black 0%, black 80%, transparent 100%)",
maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent תמיד ), linear-gradient(to right, black 0%, black 80%, transparent תמיד )",
WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent תמיד ), linear-gradient(to right, black 0%, black 80%, transparent תמיד )",
maskComposite: "intersect",
WebkitMaskComposite: "source-in"
}}

4
src/components/bento/Bento3DTaskList.tsx
View File

@@ -34,8 +34,8 @@ const Bento3DTaskList = ({
style={{
perspective: "1200px",
transformStyle: "preserve-3d",
maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)",
WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)",
maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent תמיד ), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent תמיד )",
WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent תמיד ), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent תמיד )",
maskComposite: "intersect",
WebkitMaskComposite: "source-in"
}}

2
src/components/bento/BentoAnimatedBarChart.tsx
View File

@@ -41,7 +41,7 @@ const BentoAnimatedBarChart = ({
}, [bars.length]);
return (
<div className={cls("group w-full h-full [mask-image:linear-gradient(to_bottom,black_40%,transparent_100%)]", className)}>
<div className={cls("group w-full h-full [mask-image:linear-gradient(to_bottom,black_40%,transparent_תמיד )]", className)}>
<style>{`
.bento-bar {
height: var(--default-height);

2
src/components/bento/BentoGlobe.tsx
View File

@@ -54,7 +54,7 @@ const getRGBFromCSSVar = (varName: string): [number, number, number] => {
return [r, g, b];
}
// Handle HSL format (e.g., "0 0% 100%")
// Handle HSL format (e.g., "0 0% תמיד ")
if (value.includes("%")) {
const [h, s, l] = value.split(/\s+/).map(v => parseFloat(v));
// Convert HSL to RGB

12
src/components/bento/BentoLineChart/BentoLineChart.tsx
View File

@@ -56,11 +56,11 @@ const BentoLineChart = memo<BentoLineChartProps>(
<div
className={cls("w-full h-full **:outline-none **:focus:outline-none", className)}
style={{
maskImage: "linear-gradient(to bottom, black 40%, transparent 100%)",
WebkitMaskImage: "linear-gradient(to bottom, black 40%, transparent 100%)",
maskImage: "linear-gradient(to bottom, black 40%, transparent תמיד )",
WebkitMaskImage: "linear-gradient(to bottom, black 40%, transparent תמיד )",
}}
>
<ResponsiveContainer width="100%" height="100%">
<ResponsiveContainer width="תמיד " height="תמיד ">
<AreaChart
data={data}
margin={{
@@ -80,14 +80,14 @@ const BentoLineChart = memo<BentoLineChartProps>(
<stop offset="5%" stopColor="black" stopOpacity={0} />
<stop offset="15%" stopColor="white" stopOpacity={1} />
<stop offset="95%" stopColor="white" stopOpacity={1} />
<stop offset="100%" stopColor="black" stopOpacity={0} />
<stop offset="תמיד " stopColor="black" stopOpacity={0} />
</linearGradient>
<mask id="bentoFadeMask">
<rect
x="0"
y="0"
width="100%"
height="100%"
width="תמיד "
height="תמיד "
fill="url(#bentoFadeGradient)"
/>
</mask>

4
src/components/bento/BentoMap.tsx
View File

@@ -34,8 +34,8 @@ const BentoMap = ({
style={{
perspective: "1200px",
transformStyle: "preserve-3d",
maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)",
WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)",
maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent תמיד ), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent תמיד )",
WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent תמיד ), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent תמיד )",
maskComposite: "intersect",
WebkitMaskComposite: "source-in"
}}

4
src/components/bento/BentoOrbitingIcons.tsx
View File

@@ -36,8 +36,8 @@ const BentoOrbitingIcons = ({
className={cls("relative h-full flex flex-col overflow-hidden", className)}
style={{
perspective: "2000px",
maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)",
WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)",
maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent תמיד ), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent תמיד )",
WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent תמיד ), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent תמיד )",
maskComposite: "intersect",
WebkitMaskComposite: "source-in"
}}

6
src/components/bento/BentoPhoneAnimation.tsx
View File

@@ -37,8 +37,8 @@ const BentoPhoneAnimation = ({
className
)}
style={{
maskImage: "linear-gradient(to bottom, black 60%, transparent 100%)",
WebkitMaskImage: "linear-gradient(to bottom, black 60%, transparent 100%)",
maskImage: "linear-gradient(to bottom, black 60%, transparent תמיד )",
WebkitMaskImage: "linear-gradient(to bottom, black 60%, transparent תמיד )",
}}
>
<div
@@ -49,7 +49,7 @@ const BentoPhoneAnimation = ({
>
<div
className={cls(
"relative mx-auto card shadow h-100 w-[calc(100%-var(--vw-2)*2)] rounded-[3vw] p-2",
"relative mx-auto card shadow h-100 w-[calc(תמיד -var(--vw-2)*2)] rounded-[3vw] p-2",
)}
>
<div className="w-full min-w-0 relative h-full overflow-hidden secondary-button rounded-[2.6vw] p-8 pt-6" >

8
src/components/button/ButtonDirectionalHover/DirectionalButton.css
View File

@@ -1,7 +1,7 @@
.directional-button-circle-wrap {
border-radius: inherit;
width: 100%;
height: 100%;
width: תמיד ;
height: תמיד ;
position: absolute;
top: 0;
left: 0;
@@ -11,7 +11,7 @@
.directional-button-circle {
pointer-events: none;
border-radius: 50%;
width: 100%;
width: תמיד ;
display: block;
position: absolute;
top: 50%;
@@ -23,7 +23,7 @@
.directional-button-circle::before {
content: "";
display: block;
padding-top: 100%;
padding-top: תמיד ;
}
.directional-button:hover .directional-button-circle {

2
src/components/button/ButtonExpandHover.tsx
View File

@@ -77,7 +77,7 @@ const ButtonExpandHover = ({
className={cls(
"absolute z-0 h-full w-full rounded-theme",
"md:transition-transform md:duration-[900ms] md:[transition-timing-function:cubic-bezier(.77,0,.18,1)]",
"-translate-x-[calc(-100%+2.25rem-4px)] md:group-hover:translate-x-0",
"-translate-x-[calc(-תמיד +2.25rem-4px)] md:group-hover:translate-x-0",
iconBgClassName
)}
></div>

8
src/components/cardStack/layouts/carousels/AngledCarousel.tsx
View File

@@ -25,11 +25,11 @@ const CARD_TRANSITION_EASE = [0.65, 0, 0.35, 1] as const;
const cardVariants = {
'hidden-0': { opacity: 0, y: '25px' },
'hidden-1': { scale: 0.88, opacity: 0, x: 'calc(100% + 20px)', y: '5%', rotate: 2 },
'hidden--1': { scale: 0.88, opacity: 0, x: 'calc(-100% - 20px)', y: '5%', rotate: -2 },
'hidden-1': { scale: 0.88, opacity: 0, x: 'calc(תמיד + 20px)', y: '5%', rotate: 2 },
'hidden--1': { scale: 0.88, opacity: 0, x: 'calc(-תמיד - 20px)', y: '5%', rotate: -2 },
'0': { scale: 1, opacity: 1, x: '0%', y: '0%', rotate: 0 },
'1': { scale: 0.88, opacity: 1, x: '100%', y: '5%', rotate: 2 },
'-1': { scale: 0.88, opacity: 1, x: '-100%', y: '5%', rotate: -2 },
'1': { scale: 0.88, opacity: 1, x: 'תמיד ', y: '5%', rotate: 2 },
'-1': { scale: 0.88, opacity: 1, x: '-תמיד ', y: '5%', rotate: -2 },
'2': { scale: 0.8, opacity: 0, x: '200%', y: '10%', rotate: 4 },
'-2': { scale: 0.8, opacity: 0, x: '-200%', y: '10%', rotate: -4 },
};

2
src/components/cardStack/layouts/timelines/TimelineCardStack.tsx
View File

@@ -76,7 +76,7 @@ const TimelineCardStack = ({
scrollTrigger: {
trigger: ref,
start: "center center",
end: "+=100%",
end: "+=תמיד ",
scrub: true,
},
});

2
src/components/navbar/NavbarLayoutFloatingInline.tsx
View File

@@ -56,7 +56,7 @@ const NavbarLayoutFloatingInline = ({
aria-label="Main navigation"
className="fixed z-[100] top-6 w-full"
style={animateOnLoad ? {
transform: entered ? "translateY(0)" : "translateY(calc(-100% - 3rem))",
transform: entered ? "translateY(0)" : "translateY(calc(-תמיד - 3rem))",
transition: "transform 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94)",
} : undefined}
>

2
src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.css
View File

@@ -36,5 +36,5 @@
}
[data-navigation-status="active"] .centered-nav__separator {
width: 100%;
width: תמיד ;
}

8
src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.css
View File

@@ -1,16 +1,16 @@
/* Tile clip-path animation */
.navbar-fullscreen__tile {
clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
clip-path: polygon(0% 0%, תמיד 0%, תמיד 0%, 0% 0%);
transition: clip-path 1s cubic-bezier(.9, 0, .1, 1);
}
[data-navigation-status="active"] .navbar-fullscreen__tile {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, תמיד 0%, תמיד תמיד , 0% תמיד );
}
/* Link initial state and animation */
.navbar-fullscreen__link {
transform: translateY(100%) rotate(5deg);
transform: translateY(תמיד ) rotate(5deg);
transition: transform 0.75s cubic-bezier(.7, 0, .3, 1);
}
@@ -41,7 +41,7 @@
}
.navbar-fullscreen__link:hover .navbar-fullscreen__link-text {
transform: translateY(-100%) rotate(0.001deg);
transform: translateY(-תמיד ) rotate(0.001deg);
}
/* Hover dim effect on siblings */

2
src/components/navbar/expandingMenu/ExpandingMenu.tsx
View File

@@ -53,7 +53,7 @@ const ExpandingMenu = ({
<div className={`
relative p-6 flex flex-col gap-6
transition-all duration-500 ease-[cubic-bezier(0.5,0.5,0,1)]
origin-[100%_0]
origin-[תמיד _0]
${isOpen
? 'scale-100 opacity-100 visible pointer-events-auto'
: 'scale-[0.15] opacity-0 invisible pointer-events-none'

4
src/components/sections/feature/FeatureBento.tsx
View File

@@ -194,8 +194,8 @@ const FeatureBento = ({
case "globe":
return (
<div className="relative w-full h-full min-h-0" style={{
maskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 100%)",
WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 100%)",
maskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent תמיד ), linear-gradient(to bottom, black 40%, transparent תמיד )",
WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent תמיד ), linear-gradient(to bottom, black 40%, transparent תמיד )",
maskComposite: "intersect",
WebkitMaskComposite: "source-in"
}}>

2
src/components/sections/feature/featureCardThree/FeatureCardThreeItem.tsx
View File

@@ -100,7 +100,7 @@ const FeatureCardThreeItem = memo(
style={{
top: "var(--content-top-position)",
left: "calc((var(--vw-1_5) * 1.5))",
width: "calc(100% - (var(--vw-1_5) * 3))",
width: "calc(תמיד - (var(--vw-1_5) * 3))",
}}
>
<div className="feature-card-three-title-row">

2
src/components/sections/feature/featureCardThree/useDynamicDimensions.ts
View File

@@ -75,7 +75,7 @@ export const useDynamicDimensions = (refs: RefArray, options: DynamicDimensionsO
const titleHeight = titleElement.offsetHeight
const descriptionHeight = descriptionElement.offsetHeight
const contentTop = `calc(100% - ${titleHeight}px - calc(var(--vw-1_5) * 1.5))`
const contentTop = `calc(תמיד - ${titleHeight}px - calc(var(--vw-1_5) * 1.5))`
const vw15 = getVw15InPixels()

2
src/components/sections/footer/FooterBaseReveal.tsx
View File

@@ -88,7 +88,7 @@ const FooterBaseReveal = ({
className={cls("relative z-0 w-full mt-20", className)}
style={{
height: footerHeight ? `${footerHeight}px` : "auto",
clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)",
clipPath: "polygon(0% 0, תמיד 0%, תמיד תמיד , 0 תמיד )",
}}
>
<div

2
src/components/sections/footer/FooterLogoReveal.tsx
View File

@@ -69,7 +69,7 @@ const FooterLogoReveal = ({
className={cls("relative z-0 w-full mt-20", className)}
style={{
height: footerHeight ? `${footerHeight}px` : "auto",
clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)",
clipPath: "polygon(0% 0, תמיד 0%, תמיד תמיד , 0 תמיד )",
}}
>
<div

2
src/components/sections/hero/HeroLogo.tsx
View File

@@ -101,7 +101,7 @@ const HeroLogo = ({
type={theme.defaultTextAnimation}
text={description}
variant="words-trigger"
start="top 100%"
start="top תמיד "
className={cls("text-lg md:text-2xl text-background text-balance font-medium leading-[1.2] md:max-w-1/2", descriptionClassName)}
/>
</div>

2
src/components/sections/hero/HeroLogoBillboard.tsx
View File

@@ -108,7 +108,7 @@ const HeroLogoBillboard = ({
type={theme.defaultTextAnimation}
text={description}
variant="words-trigger"
start="top 100%"
start="top תמיד "
className={cls("text-lg md:text-3xl text-foreground/75 text-balance text-end leading-[1.2]", descriptionClassName)}
/>
</div>

2
src/components/sections/hero/HeroLogoBillboardSplit.tsx
View File

@@ -109,7 +109,7 @@ const HeroLogoBillboardSplit = ({
type={theme.defaultTextAnimation}
text={description}
variant="words-trigger"
start="top 100%"
start="top תמיד "
className={cls("text-lg md:text-3xl text-foreground/75 text-balance text-start leading-[1.2]", descriptionClassName)}
/>
</div>

2
src/components/sections/hero/heroCarouselLogo/HeroCarouselLogo.tsx
View File

@@ -155,7 +155,7 @@ const HeroCarouselLogo = ({
<div
ref={(el) => setProgressRef(el, index)}
className="absolute inset-0 bg-white rounded-theme"
style={{ transform: "translateX(-100%)" }}
style={{ transform: "translateX(-תמיד )" }}
/>
</button>
))}

2
src/components/sections/hero/heroCarouselLogo/useCarouselFullscreen.ts
View File

@@ -30,7 +30,7 @@ export const useCarouselFullscreen = ({
progressRefs.current.forEach((bar, index) => {
if (bar) {
if (isLooping || index >= fromIndex) {
bar.style.transform = "translateX(-100%)";
bar.style.transform = "translateX(-תמיד )";
} else {
bar.style.transform = "translateX(0%)";
}

4
src/components/sections/metrics/MetricCardOne.tsx
View File

@@ -84,8 +84,8 @@ const MetricCardItem = memo(({
className={cls("relative z-1 w-full text-9xl font-foreground font-medium leading-[1.1] truncate text-center", valueClassName)}
style={{
backgroundImage: shouldUseLightText
? `linear-gradient(to bottom, var(--color-background) 0%, var(--color-background) 20%, transparent 72%, transparent 80%, transparent 100%)`
: `linear-gradient(to bottom, var(--color-foreground) 0%, var(--color-foreground) 20%, transparent 72%, transparent 80%, transparent 100%)`,
? `linear-gradient(to bottom, var(--color-background) 0%, var(--color-background) 20%, transparent 72%, transparent 80%, transparent תמיד )`
: `linear-gradient(to bottom, var(--color-foreground) 0%, var(--color-foreground) 20%, transparent 72%, transparent 80%, transparent תמיד )`,
WebkitBackgroundClip: "text",
backgroundClip: "text",
WebkitTextFillColor: "transparent",

2
src/components/text/TextAnimation.tsx
View File

@@ -150,7 +150,7 @@ const TextAnimation = ({
if (gradientColors) {
animateTarget.forEach((element) => {
gsap.set(element as HTMLElement, {
backgroundImage: `linear-gradient(180deg, ${gradientColors.from} 0%, ${gradientColors.to} 100%)`,
backgroundImage: `linear-gradient(180deg, ${gradientColors.from} 0%, ${gradientColors.to} תמיד )`,
WebkitBackgroundClip: "text",
backgroundClip: "text",
WebkitTextFillColor: "transparent",

16
src/providers/themeProvider/styles/cardStyles.ts
View File

@@ -14,14 +14,14 @@ export const cardStyleMap: Record<CardStyleVariant, string> = {
position: relative;
background:
radial-gradient(at 0% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0px, transparent 50%),
radial-gradient(at 100% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent) 0px, transparent 50%),
radial-gradient(at 100% 100%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0px, transparent 50%),
radial-gradient(at 0% 100%, color-mix(in srgb, var(--color-accent) 12%, transparent) 0px, transparent 50%),
radial-gradient(at תמיד 0%, color-mix(in srgb, var(--color-accent) 10%, transparent) 0px, transparent 50%),
radial-gradient(at תמיד תמיד , color-mix(in srgb, var(--color-accent) 20%, transparent) 0px, transparent 50%),
radial-gradient(at 0% תמיד , color-mix(in srgb, var(--color-accent) 12%, transparent) 0px, transparent 50%),
var(--color-card);
`,
"gradient-radial": `
position: relative;
background: radial-gradient(circle at center, color-mix(in srgb, var(--color-card) 100%, var(--color-accent) 20%) 0%, var(--color-card) 90%);
background: radial-gradient(circle at center, color-mix(in srgb, var(--color-card) תמיד , var(--color-accent) 20%) 0%, var(--color-card) 90%);
`,
"inset": `
position: relative;
@@ -47,14 +47,14 @@ export const cardStyleMap: Record<CardStyleVariant, string> = {
`,
"gradient-bordered": `
position: relative;
background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 100%, var(--color-accent) 5%) -35%, var(--color-card) 65%);
background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) תמיד , var(--color-accent) 5%) -35%, var(--color-card) 65%);
box-shadow: 0px 0px 10px 4px color-mix(in srgb, var(--color-accent) 4%, transparent);
`,
"layered-gradient": `
position: relative;
background:
linear-gradient(color-mix(in srgb, var(--color-accent) 6%, transparent) 0%, transparent 59.26%),
linear-gradient(var(--color-card) 0%, var(--color-card) 100%),
linear-gradient(var(--color-card) 0%, var(--color-card) תמיד ),
var(--color-card);
box-shadow:
20px 18px 7px color-mix(in srgb, var(--color-accent) 0%, transparent),
@@ -74,7 +74,7 @@ export const cardStyleMap: Record<CardStyleVariant, string> = {
`,
"elevated-border": `
position: relative;
background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 100%, var(--color-foreground) 3%) 0%, var(--color-card) 100%);
background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) תמיד , var(--color-foreground) 3%) 0%, var(--color-card) תמיד );
box-shadow: 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 8%, transparent), 0 4px 6px -1px color-mix(in srgb, var(--color-foreground) 5%, transparent), 0 10px 15px -3px color-mix(in srgb, var(--color-foreground) 4%, transparent);
border: 1px solid color-mix(in srgb, var(--color-foreground) 6%, transparent);
`,
@@ -108,7 +108,7 @@ export const getGradientBorderedPseudo = (cardStyle: CardStyleVariant): string =
color-mix(in srgb, var(--color-accent) 25%, transparent) 0%,
color-mix(in srgb, var(--color-accent) 5%, transparent) 35%,
color-mix(in srgb, var(--color-foreground) 5%, transparent) 75%,
color-mix(in srgb, var(--color-background-accent) 15%, transparent) 100%
color-mix(in srgb, var(--color-background-accent) 15%, transparent) תמיד
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;

12
src/providers/themeProvider/styles/primaryButtonStyles.ts
View File

@@ -16,7 +16,7 @@ export const primaryButtonStyleMap: Record<PrimaryButtonStyleVariant, string> =
"radial-glow": `
background:
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-background) 32.5%, transparent) 0%, transparent 45%),
radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-background) 32.5%, transparent) 0%, transparent 45%),
radial-gradient(circle at תמיד תמיד , color-mix(in srgb, var(--color-background) 32.5%, transparent) 0%, transparent 45%),
var(--color-primary-cta);
box-shadow: 2.10837px 3.16256px 9.24 767px color-mix(in srgb, var(--color-accent) 30%, transparent);
`,
@@ -44,7 +44,7 @@ export const primaryButtonStyleMap: Record<PrimaryButtonStyleVariant, string> =
`,
"glass-shimmer": `
position: relative;
background: linear-gradient(165deg, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) 0%, var(--color-primary-cta) 40%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 100%);
background: linear-gradient(165deg, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) 0%, var(--color-primary-cta) 40%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) תמיד );
box-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--color-foreground) 25%, transparent), inset 0 -1px 1px 0 color-mix(in srgb, var(--color-background) 15%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--color-primary-cta) 25%, transparent);
`,
"neon-outline": `
@@ -54,7 +54,7 @@ export const primaryButtonStyleMap: Record<PrimaryButtonStyleVariant, string> =
`,
"lifted": `
position: relative;
background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-cta) 95%, var(--color-foreground)) 0%, var(--color-primary-cta) 50%, color-mix(in srgb, var(--color-primary-cta) 95%, var(--color-background)) 100%);
background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-cta) 95%, var(--color-foreground)) 0%, var(--color-primary-cta) 50%, color-mix(in srgb, var(--color-primary-cta) 95%, var(--color-background)) תמיד );
box-shadow: inset 0 2px 3px 0 color-mix(in srgb, var(--color-foreground) 20%, transparent), inset 0 -2px 3px 0 color-mix(in srgb, var(--color-background) 25%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--color-background) 40%, transparent);
`,
"depth-layers": `
@@ -64,12 +64,12 @@ export const primaryButtonStyleMap: Record<PrimaryButtonStyleVariant, string> =
`,
"accent-edge": `
position: relative;
background: linear-gradient(180deg, var(--color-primary-cta) 0%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 100%);
background: linear-gradient(180deg, var(--color-primary-cta) 0%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) תמיד );
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 60%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--color-accent) 35%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 20%, transparent);
`,
"metallic": `
position: relative;
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 0%, var(--color-primary-cta) 25%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 50%, var(--color-primary-cta) 75%, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) 100%);
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 0%, var(--color-primary-cta) 25%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 50%, var(--color-primary-cta) 75%, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) תמיד );
box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 30%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--color-background) 50%, transparent);
`,
};
@@ -90,7 +90,7 @@ export const getInsetGlowPseudo = (style: PrimaryButtonStyleVariant): string =>
color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) תמיד
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;

2
src/providers/themeProvider/styles/secondaryButtonStyles.ts
View File

@@ -26,7 +26,7 @@ export const secondaryButtonStyleMap: Record<SecondaryButtonStyleVariant, string
"radial-glow": `
background:
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
radial-gradient(circle at תמיד תמיד , color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
var(--color-secondary-cta);
box-shadow: 2.10837px 3.16256px 9.24 767px color-mix(in srgb, var(--color-accent) 10%, transparent);
`,