snow-flow 4.2.0 → 4.2.2

package/website/components/hero/Hero.html

@@ -53,17 +53,17 @@
 
                 <!-- Stats -->
                 <div class="sf-hero__stats" id="sf-hero-stats">
-                    <div class="sf-hero__stat" data-number="17" data-label="MCP Servers">
-                        <div class="sf-hero__stat-number">17</div>
-                        <div class="sf-hero__stat-label">MCP Servers</div>
+                    <div class="sf-hero__stat" data-number="23" data-label="Enterprise MCP Servers">
+                        <div class="sf-hero__stat-number">23</div>
+                        <div class="sf-hero__stat-label">Enterprise MCP Servers</div>
                     </div>
-                    <div class="sf-hero__stat" data-number="200+" data-label="Tools">
-                        <div class="sf-hero__stat-number">200+</div>
-                        <div class="sf-hero__stat-label">Tools</div>
+                    <div class="sf-hero__stat" data-number="355+" data-label="Enterprise Tools">
+                        <div class="sf-hero__stat-number">355+</div>
+                        <div class="sf-hero__stat-label">Enterprise Tools</div>
                     </div>
-                    <div class="sf-hero__stat" data-number="80%" data-label="Time Saved">
-                        <div class="sf-hero__stat-number">80%</div>
-                        <div class="sf-hero__stat-label">Time Saved</div>
+                    <div class="sf-hero__stat" data-number="85%" data-label="Memory Optimized">
+                        <div class="sf-hero__stat-number">85%</div>
+                        <div class="sf-hero__stat-label">Memory Optimized</div>
                     </div>
                     <div class="sf-hero__stat" data-number="100%" data-label="Real Data">
                         <div class="sf-hero__stat-number">100%</div>

package/website/components/hero/Hero.jsx

@@ -8,9 +8,9 @@ const Hero = ({
   primaryCTA = { text: "Get Started", href: "#get-started" },
   secondaryCTA = { text: "Learn More", href: "#features" },
   stats = [
-    { number: "17", label: "MCP Servers" },
-    { number: "200+", label: "Tools" },
-    { number: "80%", label: "Time Saved" },
+    { number: "23", label: "Enterprise MCP Servers" },
+    { number: "355+", label: "Enterprise Tools" },
+    { number: "85%", label: "Memory Optimized" },
     { number: "100%", label: "Real Data" }
   ],
   backgroundAnimation = true,

package/website/css/button-contrast-fixes.css

@@ -0,0 +1,133 @@
+/* =========================================
+   BUTTON CONTRAST & VISIBILITY FIXES
+   ========================================= */
+
+/* HERO-INSPIRED PRIMARY BUTTON */
+.btn-primary {
+  background: linear-gradient(135deg, 
+    rgba(102, 126, 234, 0.95) 0%, 
+    rgba(118, 75, 162, 0.95) 50%, 
+    rgba(240, 147, 251, 0.95) 100%) !important; /* Same gradient as hero orbs */
+  color: var(--white) !important;
+  border: 2px solid rgba(255, 255, 255, 0.4) !important;
+  backdrop-filter: blur(20px) !important;
+  -webkit-backdrop-filter: blur(20px) !important;
+  border-radius: var(--radius-2xl) !important;
+  padding: var(--space-4) var(--space-8) !important;
+  font-weight: 600 !important;
+  font-size: var(--font-lg) !important;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
+  box-shadow: 
+    0 8px 32px rgba(102, 126, 234, 0.3),
+    0 0 40px rgba(118, 75, 162, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  font-family: var(--font-sans) !important;
+  position: relative !important;
+  overflow: hidden !important;
+}
+
+/* PRIMARY BUTTON TEXT - FORCE WHITE */
+.btn-primary .btn-text {
+  color: var(--white) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
+}
+
+.btn-primary .btn-icon {
+  color: var(--white) !important;
+}
+
+.btn-primary:hover {
+  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 8px 20px rgba(29, 78, 216, 0.5) !important;
+}
+
+/* SECONDARY BUTTON (GitHub) - COMPLETE REDESIGN */
+.btn-glass {
+  background: rgba(255, 255, 255, 0.95) !important; /* Almost white background */
+  color: var(--black) !important; /* Black text for contrast */
+  border: 2px solid rgba(0, 0, 0, 0.1) !important;
+  backdrop-filter: blur(10px) !important;
+  font-weight: 500 !important;
+  position: relative !important;
+}
+
+.btn-glass:hover {
+  background: var(--white) !important;
+  color: var(--black) !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* GitHub button text visibility */
+.btn-glass .btn-text {
+  color: var(--black) !important; /* Dark text on light button */
+  font-weight: 500 !important;
+}
+
+.btn-glass .btn-icon {
+  color: #f59e0b !important; /* Gold star */
+  font-size: var(--font-lg) !important;
+}
+
+/* REDESIGNED GITHUB BUTTON - PROFESSIONAL STYLING */
+.btn-glass {
+  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important; /* Dark gray gradient */
+  color: var(--white) !important; /* White text */
+  border: 2px solid #6b7280 !important; /* Gray border */
+  position: relative !important;
+  overflow: visible !important;
+}
+
+.btn-glass:hover {
+  background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
+  border-color: #9ca3af !important;
+}
+
+/* GitHub button badge - MUCH CLEANER */
+.btn-badge {
+  position: absolute !important;
+  top: -10px !important;
+  right: -10px !important;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; /* Green for version */
+  color: var(--white) !important;
+  font-size: 11px !important; /* Very small and clean */
+  padding: 4px 8px !important;
+  border-radius: 6px !important;
+  font-weight: 600 !important;
+  border: 1px solid var(--white) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+  white-space: nowrap !important;
+  z-index: 20 !important;
+  font-family: var(--font-mono) !important; /* Monospace for version numbers */
+}
+
+/* Button container spacing and alignment */
+.hero-actions {
+  display: flex !important;
+  gap: var(--space-4) !important;
+  justify-content: center !important;
+  align-items: center !important;
+  margin: var(--space-8) 0 !important;
+}
+
+/* Button inner content alignment */
+.btn-inner {
+  display: flex !important;
+  align-items: center !important;
+  gap: var(--space-2) !important;
+}
+
+/* Remove any conflicting button styles */
+.btn {
+  text-decoration: none !important;
+  cursor: pointer !important;
+  transition: all 0.3s ease !important;
+  border-radius: var(--radius-lg) !important;
+  padding: var(--space-3) var(--space-6) !important;
+  font-family: var(--font-sans) !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}

package/website/css/button-fixes.css

@@ -0,0 +1,49 @@
+/* =========================================
+   BUTTON & BADGE FIXES v4.2.0
+   ========================================= */
+
+/* GitHub button badge sizing fix */
+.btn-badge {
+  font-size: var(--font-sm) !important; /* Larger font for readability */
+  padding: var(--space-1) var(--space-3) !important; /* Better padding */
+  background: rgba(16, 185, 129, 1) !important; /* Fully opaque */
+  color: var(--white) !important;
+  border-radius: var(--radius-base) !important;
+  font-weight: 600 !important;
+  text-shadow: none !important; /* Clean text */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
+  white-space: nowrap !important; /* Prevent text wrapping */
+  min-width: auto !important;
+  overflow: visible !important;
+}
+
+/* Button container fixes */
+.btn {
+  position: relative !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: var(--space-2) !important;
+  min-height: 48px !important; /* Ensure enough height for badge */
+  padding: var(--space-3) var(--space-6) !important;
+}
+
+.btn-glass {
+  background: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  backdrop-filter: blur(10px) !important;
+  color: var(--white) !important;
+  border-radius: var(--radius-lg) !important;
+}
+
+/* Fix button text visibility */
+.btn-text {
+  color: var(--white) !important;
+  font-weight: 500 !important;
+  font-size: var(--font-base) !important;
+}
+
+.btn-icon {
+  font-size: var(--font-lg) !important;
+  color: var(--white) !important;
+}

package/website/css/enterprise-section-update.css

@@ -0,0 +1,38 @@
+/* =========================================
+   ENTERPRISE SECTION CONTENT UPDATE
+   ========================================= */
+
+/* Update the "New in v4.2.0" section with enterprise features */
+.enterprise-features-grid {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
+  gap: var(--space-6) !important;
+  margin: var(--space-8) 0 !important;
+}
+
+.enterprise-feature-card {
+  background: var(--gradient-glass) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: var(--radius-xl) !important;
+  padding: var(--space-6) !important;
+  text-align: center !important;
+}
+
+.enterprise-feature-icon {
+  font-size: var(--font-4xl) !important;
+  margin-bottom: var(--space-3) !important;
+  display: block !important;
+}
+
+.enterprise-feature-title {
+  color: var(--white) !important;
+  font-size: var(--font-xl) !important;
+  font-weight: 700 !important;
+  margin-bottom: var(--space-2) !important;
+}
+
+.enterprise-feature-description {
+  color: var(--gray-300) !important;
+  font-size: var(--font-sm) !important;
+  line-height: var(--leading-relaxed) !important;
+}

package/website/css/font-standardization.css

@@ -0,0 +1,54 @@
+/* =========================================
+   FONT STANDARDIZATION ACROSS WEBSITE
+   ========================================= */
+
+/* Override all font inconsistencies with standard Snow-Flow fonts */
+
+/* Main font family for all text */
+body, 
+html,
+h1, h2, h3, h4, h5, h6,
+p, span, div, a, button,
+.btn, .card, .pill,
+.hero-title, .hero-subtitle,
+.stat-label, .feature-title {
+  font-family: var(--font-sans) !important;
+}
+
+/* Code and monospace elements */
+code, 
+pre,
+.code-block,
+.btn-badge,
+.version-badge,
+.copy-btn,
+kbd {
+  font-family: var(--font-mono) !important;
+}
+
+/* Specific overrides for consistency */
+.api-docs code,
+.api-docs pre {
+  font-family: var(--font-mono) !important; /* Override Fira Code references */
+}
+
+/* Button text standardization */
+.btn-text,
+.btn-inner,
+.hero-actions .btn {
+  font-family: var(--font-sans) !important;
+  font-weight: 500 !important;
+}
+
+/* Ensure consistent font rendering */
+* {
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+/* High DPI display optimization */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  body {
+    font-weight: 400 !important; /* Slightly lighter on high DPI */
+  }
+}

package/website/css/footer-hero-styling.css

@@ -0,0 +1,73 @@
+/* =========================================
+   FOOTER HERO-INSPIRED STYLING  
+   ========================================= */
+
+/* Footer with hero background treatment */
+footer {
+  background: 
+    radial-gradient(at 30% 20%, hsla(240, 60%, 20%, 0.4) 0%, transparent 60%),
+    radial-gradient(at 70% 80%, hsla(260, 60%, 25%, 0.4) 0%, transparent 60%),
+    var(--black) !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
+  position: relative !important;
+  overflow: hidden !important;
+}
+
+/* Footer noise effect like hero */
+footer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.02;
+  z-index: 1;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='footerNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23footerNoise)'/%3E%3C/svg%3E");
+  mix-blend-mode: overlay;
+}
+
+/* Footer content */
+.footer-content {
+  position: relative !important;
+  z-index: 10 !important;
+  padding: var(--space-16) 0 var(--space-8) !important;
+}
+
+/* Footer logo */
+.footer-logo {
+  color: var(--white) !important;
+  font-family: var(--font-sans) !important;
+  font-weight: 700 !important;
+  font-size: var(--font-2xl) !important;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
+  margin-bottom: var(--space-4) !important;
+}
+
+/* Footer links */
+.footer-links a {
+  color: var(--gray-300) !important;
+  text-decoration: none !important;
+  font-family: var(--font-sans) !important;
+  font-weight: 400 !important;
+  transition: all 0.3s ease !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
+}
+
+.footer-links a:hover {
+  color: var(--white) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
+}
+
+/* Footer copyright with hero styling */
+.footer-copyright {
+  color: var(--gray-400) !important;
+  font-family: var(--font-sans) !important;
+  font-size: var(--font-sm) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
+  padding-top: var(--space-4) !important;
+  margin-top: var(--space-8) !important;
+  text-align: center !important;
+}

package/website/css/hero-compact-spacing.css

@@ -0,0 +1,60 @@
+/* =========================================
+   HERO COMPACT SPACING ADJUSTMENTS
+   ========================================= */
+
+/* Reduce excessive top spacing in hero */
+.hero {
+  padding-top: 100pxik !important;
+  padding-bottom: var(--space-16) !important; /* Some bottom space for stats */
+}
+
+/* Mountain logo positioning - closer to navbar */
+.hero-logo-container {
+  margin-top: var(--space-4) !important; /* Much less top margin */
+  margin-bottom: var(--space-6) !important; /* Less bottom margin */
+}
+
+/* Title positioning - tighter spacing */
+.hero-title {
+  margin-top: var(--space-4) !important; /* Less space after logo */
+  margin-bottom: var(--space-4) !important; /* Less space before subtitle */
+}
+
+/* Subtitle tighter spacing */
+.hero-subtitle {
+  margin-bottom: var(--space-6) !important; /* Less space before pills */
+}
+
+/* Feature pills tighter spacing */
+.feature-pills {
+  margin: var(--space-4) 0 var(--space-6) !important; /* Compact margins */
+}
+
+/* CTA buttons tighter spacing */
+.hero-actions {
+  margin: var(--space-6) 0 !important; /* Less margin around buttons */
+}
+
+/* Overall hero content compactness + CONTAINER FIX */
+.hero-content {
+  max-width: 80% !important; /* CRITICAL: Stay within viewport */
+  width: 100% !important; /* Full available width */
+  padding: var(--space-12) var(--space-4) var(--space-8) !important; /* Side padding to prevent overflow */
+  box-sizing: border-box !important; /* Include padding in width calculation */
+}
+
+/* Mobile adjustments for compact layout */
+@media (max-width: 768px) {
+  .hero-content {
+    padding-top: var(--space-8) !important;
+  }
+  
+  .hero-title {
+    margin-top: var(--space-2) !important;
+    margin-bottom: var(--space-3) !important;
+  }
+  
+  .hero-actions {
+    margin: var(--space-4) 0 !important;
+  }
+}

package/website/css/hero-contrast-fixes.css

@@ -0,0 +1,195 @@
+/* =========================================
+   HERO CONTRAST & READABILITY FIXES v4.2.0
+   ========================================= */
+
+/* Critical contrast improvements for hero section */
+
+/* Ensure all hero text has proper z-index layering */
+.hero-content * {
+  z-index: 10;
+}
+
+/* CENTERING FIX: Force hero content center alignment */
+.hero-content {
+  text-align: center !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  max-width: 100% !important;
+}
+
+/* Individual title centering - NORMAL HORIZONTAL TEXT */
+.hero-title {
+  text-align: center !important;
+  width: 100% !important;
+  display: block !important; /* NORMAL: Just a regular centered heading */
+  margin: 0 auto !important;
+}
+
+/* Fade-in word animations with better contrast */
+.fade-in-word span {
+  opacity: 0;
+  animation: fadeInUp 0.6s ease forwards;
+  color: var(--gray-100); /* CONTRAST FIX: Very light gray for excellent readability */
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
+}
+
+/* Version badge MAXIMUM VISIBILITY - NEON BRIGHT */
+.version-badge {
+  /* CRITICAL VISIBILITY FIX: Ultra bright neon colors */
+  font-size: var(--font-xl) !important; /* Very large */
+  padding: var(--space-4) var(--space-6) !important; /* Large padding */
+  background: linear-gradient(135deg, #ff0080 0%, #ff4d6d 100%) !important; /* Bright pink/red neon */
+  color: var(--white) !important; /* White text */
+  font-weight: 900 !important; /* Maximum boldness */
+  border: 4px solid var(--white) !important; /* Thick white border */
+  border-radius: var(--radius-2xl) !important; /* Large radius */
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important; /* Strong shadow */
+  box-shadow: 
+    0 0 30px rgba(255, 0, 128, 0.8),
+    0 0 60px rgba(255, 77, 109, 0.6),
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 2px 0 rgba(255, 255, 255, 0.3) !important; /* Neon glow effect */
+  position: absolute !important; /* Absolute positioning for precise control */
+  top: -20px !important;
+  right: -30px !important;
+  transform: rotate(-5deg) scale(1.2) !important; /* Angled and scaled */
+  z-index: 1000 !important; /* Absolute highest z-index */
+  animation: neon-pulse 2s ease-in-out infinite !important;
+}
+
+@keyframes neon-pulse {
+  0%, 100% { 
+    box-shadow: 
+      0 0 30px rgba(255, 0, 128, 0.8),
+      0 0 60px rgba(255, 77, 109, 0.6),
+      0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+  50% { 
+    box-shadow: 
+      0 0 40px rgba(255, 0, 128, 1),
+      0 0 80px rgba(255, 77, 109, 0.8),
+      0 12px 40px rgba(0, 0, 0, 0.5);
+  }
+}
+
+.animated-badge {
+  animation: badge-pulse 2s ease-in-out infinite;
+}
+
+@keyframes badge-pulse {
+  0%, 100% { transform: scale(1); box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3); }
+  50% { transform: scale(1.05); box-shadow: 0 6px 12px rgba(16, 185, 129, 0.5); }
+}
+
+/* Title letters enhanced contrast - INLINE HORIZONTAL */
+.title-letter {
+  display: inline-block !important; /* CRITICAL: Inline-block for horizontal letters with animation support */
+  opacity: 0;
+  animation: letterDrop 0.6s ease forwards;
+  /* CRITICAL FIX: Force white color for title letters */
+  color: var(--white) !important;
+  text-shadow: 
+    0 2px 4px rgba(0, 0, 0, 0.8),
+    0 4px 8px rgba(0, 0, 0, 0.6),
+    0 0 20px rgba(255, 255, 255, 0.1); /* Subtle white glow */
+  /* Ensure horizontal spacing */
+  margin-right: 2px !important;
+}
+
+/* Hero title force white color and CENTER - NO DISPLAY OVERRIDE */
+.hero-title {
+  color: var(--white) !important;
+  -webkit-text-fill-color: var(--white) !important;
+  text-align: center !important;
+  margin: 0 auto !important;
+  width: 100% !important;
+}
+
+/* Only target non-letter elements to avoid breaking inline letters */
+.hero-title .version-badge {
+  display: inline-block !important;
+}
+
+@keyframes letterDrop {
+  0% {
+    opacity: 0;
+    transform: translateY(-50px) rotateX(90deg);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) rotateX(0deg);
+  }
+}
+
+/* Feature pills enhanced visibility */
+.feature-pills .pill {
+  /* VISIBILITY FIX: Much stronger background for better text contrast */
+  background: rgba(0, 0, 0, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.feature-pills .pill:hover {
+  background: rgba(0, 0, 0, 0.9);
+  border-color: rgba(255, 255, 255, 0.6);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
+}
+
+/* Subtitle lines enhanced readability */
+.subtitle-line,
+.subtitle-line-2 {
+  display: block;
+  line-height: var(--leading-relaxed);
+}
+
+.subtitle-line-2 {
+  margin-top: var(--space-2);
+}
+
+/* Background orbs - ensure they don't interfere */
+.floating-orb {
+  /* INTERFERENCE FIX: Move orbs further back and reduce impact */
+  z-index: 0 !important;
+  opacity: 0.15 !important; /* Even more subtle */
+  mix-blend-mode: soft-light; /* Softer blending with background */
+}
+
+/* Responsive contrast adjustments */
+@media (max-width: 768px) {
+  .hero-content {
+    /* MOBILE FIX: Even stronger backdrop on mobile */
+    background: rgba(0, 0, 0, 0.5);
+    padding: var(--space-6);
+  }
+  
+  .hero-title {
+    text-shadow: 
+      0 2px 4px rgba(0, 0, 0, 0.9),
+      0 4px 8px rgba(0, 0, 0, 0.7),
+      0 0 30px rgba(255, 255, 255, 0.2);
+  }
+  
+  .hero-subtitle {
+    color: var(--gray-100); /* Even lighter on mobile */
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
+  }
+}
+
+/* Dark mode safeguards */
+@media (prefers-color-scheme: dark) {
+  .hero-title {
+    color: var(--white) !important;
+  }
+  
+  .hero-subtitle {
+    color: var(--gray-200) !important;
+  }
+  
+  .pill {
+    background: rgba(0, 0, 0, 0.8) !important;
+    color: var(--white) !important;
+  }
+}