diff --git a/registry/components/AnimatedGridBackground.json b/registry/components/AnimatedGridBackground.json index b25e9b8..f9cb7ea 100644 --- a/registry/components/AnimatedGridBackground.json +++ b/registry/components/AnimatedGridBackground.json @@ -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)", diff --git a/registry/components/MetricCardSeven.json b/registry/components/MetricCardSeven.json index f5edadb..f8832e2 100644 --- a/registry/components/MetricCardSeven.json +++ b/registry/components/MetricCardSeven.json @@ -89,7 +89,7 @@ "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" }, - "usageExample": "", + "usageExample": "", "do": [ "Use for feature showcases", "Use for capability displays", diff --git a/registry/components/RadialGradientBackground.json b/registry/components/RadialGradientBackground.json index 80fe54d..3b7b0b3 100644 --- a/registry/components/RadialGradientBackground.json +++ b/registry/components/RadialGradientBackground.json @@ -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", diff --git a/src/app/page.tsx b/src/app/page.tsx index 90172f3..7a95531 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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% בשיחות טלפון" }, ], diff --git a/src/app/styles/utilities.css b/src/app/styles/utilities.css index 6cea115..3904c68 100644 --- a/src/app/styles/utilities.css +++ b/src/app/styles/utilities.css @@ -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; } diff --git a/src/components/background/AnimatedAuroraBackground.tsx b/src/components/background/AnimatedAuroraBackground.tsx index 4cba2a9..4991344 100644 --- a/src/components/background/AnimatedAuroraBackground.tsx +++ b/src/components/background/AnimatedAuroraBackground.tsx @@ -29,9 +29,9 @@ const AnimatedAuroraBackground = ({
diff --git a/src/components/background/AnimatedGridBackground.tsx b/src/components/background/AnimatedGridBackground.tsx index a5279b8..95b1b2e 100644 --- a/src/components/background/AnimatedGridBackground.tsx +++ b/src/components/background/AnimatedGridBackground.tsx @@ -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" > @@ -80,7 +80,7 @@ const AnimatedGridBackground = ({ /> - + {squares.map(({ id, pos: [x, y] }) => (
{/* top center */} -
+
{/* top right */} -
+
{/* center left */} -
+
{/* top left */} -
+
{/* bottom center */} -
+
); }; diff --git a/src/components/background/CanvasRevealBackground.tsx b/src/components/background/CanvasRevealBackground.tsx index 5b51641..0b59f0d 100644 --- a/src/components/background/CanvasRevealBackground.tsx +++ b/src/components/background/CanvasRevealBackground.tsx @@ -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', }} diff --git a/src/components/background/DownwardRaysBackground.tsx b/src/components/background/DownwardRaysBackground.tsx index a45961c..8b9803d 100644 --- a/src/components/background/DownwardRaysBackground.tsx +++ b/src/components/background/DownwardRaysBackground.tsx @@ -59,7 +59,7 @@ const DownwardRaysBackground = ({