snow-flow 3.4.36 → 3.4.39

package/website/components/hero/Hero.css

@@ -0,0 +1,558 @@
+/* Hero Component - Black/White Minimalist Design */
+
+.sf-hero {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 50%, #e0e0e0 100%);
+}
+
+/* Background Animation */
+.sf-hero__background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+}
+
+.sf-hero--visible .sf-hero__background {
+  opacity: 1;
+}
+
+/* Animated Mesh */
+.sf-hero__mesh {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    radial-gradient(circle at 25% 25%, rgba(0,0,0,0.02) 0%, transparent 50%),
+    radial-gradient(circle at 75% 75%, rgba(0,0,0,0.02) 0%, transparent 50%);
+}
+
+.sf-hero__mesh-dot {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  animation: sf-float 6s ease-in-out infinite;
+}
+
+@keyframes sf-float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+    opacity: 0.3;
+  }
+  33% {
+    transform: translate(-10px, -10px) scale(1.2);
+    opacity: 0.6;
+  }
+  66% {
+    transform: translate(10px, 10px) scale(0.8);
+    opacity: 0.4;
+  }
+}
+
+/* Gradient Orbs */
+.sf-hero__orb {
+  position: absolute;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(0,0,0,0.03), rgba(0,0,0,0.06));
+  filter: blur(40px);
+  animation: sf-orb-float 8s ease-in-out infinite;
+}
+
+.sf-hero__orb--1 {
+  width: 300px;
+  height: 300px;
+  top: 10%;
+  left: 10%;
+  animation-delay: 0s;
+}
+
+.sf-hero__orb--2 {
+  width: 200px;
+  height: 200px;
+  top: 60%;
+  right: 15%;
+  animation-delay: 2s;
+}
+
+.sf-hero__orb--3 {
+  width: 150px;
+  height: 150px;
+  bottom: 20%;
+  left: 60%;
+  animation-delay: 4s;
+}
+
+@keyframes sf-orb-float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(20px, -20px) scale(1.1);
+  }
+}
+
+/* Content Container */
+.sf-hero__container {
+  position: relative;
+  z-index: 2;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  text-align: center;
+  width: 100%;
+}
+
+.sf-hero__content {
+  transform: translateY(30px);
+  opacity: 0;
+  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sf-hero--visible .sf-hero__content {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+/* Typography */
+.sf-hero__title {
+  font-size: clamp(3rem, 8vw, 6rem);
+  font-weight: 900;
+  margin-bottom: 1rem;
+  background: linear-gradient(135deg, #000000 0%, #333333 50%, #000000 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: sf-gradient-text 4s ease-in-out infinite;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.sf-hero__subtitle {
+  font-size: clamp(1.2rem, 3vw, 1.8rem);
+  font-weight: 300;
+  margin-bottom: 2rem;
+  color: #666666;
+  line-height: 1.4;
+}
+
+.sf-hero__description {
+  font-size: clamp(1rem, 2.5vw, 1.25rem);
+  line-height: 1.6;
+  color: #555555;
+  max-width: 700px;
+  margin: 0 auto 3rem;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.6s ease 0.3s;
+}
+
+.sf-hero__description--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Typewriter Cursor */
+.sf-hero__cursor {
+  display: inline-block;
+  background: #000000;
+  margin-left: 2px;
+  width: 3px;
+  animation: sf-cursor-blink 1s infinite;
+}
+
+@keyframes sf-cursor-blink {
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0;
+  }
+}
+
+@keyframes sf-gradient-text {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* CTA Buttons */
+.sf-hero__actions {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+  margin-bottom: 4rem;
+  flex-wrap: wrap;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.6s ease 0.5s;
+}
+
+.sf-hero__actions--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.sf-hero__cta {
+  position: relative;
+  padding: 1rem 2.5rem;
+  border: none;
+  border-radius: 50px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  overflow: hidden;
+  min-width: 180px;
+  justify-content: center;
+}
+
+/* Primary CTA */
+.sf-hero__cta--primary {
+  background: linear-gradient(135deg, #000000 0%, #333333 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.sf-hero__cta--primary:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.sf-hero__cta--primary:active {
+  transform: translateY(-1px);
+}
+
+/* Secondary CTA */
+.sf-hero__cta--secondary {
+  background: transparent;
+  color: #333333;
+  border: 2px solid #333333;
+}
+
+.sf-hero__cta--secondary:hover {
+  background: #000000;
+  color: white;
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+}
+
+.sf-hero__cta--secondary:hover .sf-hero__cta-arrow {
+  transform: translateX(5px);
+}
+
+/* CTA Effects */
+.sf-hero__cta-ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  transform: translate(-50%, -50%);
+  transition: all 0.5s ease;
+}
+
+.sf-hero__cta--primary:hover .sf-hero__cta-ripple {
+  width: 300px;
+  height: 300px;
+}
+
+.sf-hero__cta-arrow {
+  transition: transform 0.3s ease;
+  font-weight: bold;
+}
+
+/* Stats */
+.sf-hero__stats {
+  display: flex;
+  justify-content: center;
+  gap: 3rem;
+  flex-wrap: wrap;
+  margin-bottom: 2rem;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.6s ease 0.7s;
+}
+
+.sf-hero__stats--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.sf-hero__stat {
+  text-align: center;
+  opacity: 0;
+  transform: translateY(20px);
+  animation: sf-stat-appear 0.6s ease forwards;
+}
+
+@keyframes sf-stat-appear {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.sf-hero__stat-number {
+  font-size: 2.5rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, #000000, #666666);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1;
+  margin-bottom: 0.5rem;
+}
+
+.sf-hero__stat-label {
+  font-size: 0.9rem;
+  color: #666666;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+/* Scroll Indicator */
+.sf-hero__scroll-indicator {
+  position: absolute;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  opacity: 0;
+  transition: all 0.6s ease 1s;
+  cursor: pointer;
+}
+
+.sf-hero__scroll-indicator--visible {
+  opacity: 1;
+}
+
+.sf-hero__scroll-indicator:hover {
+  transform: translateX(-50%) translateY(-5px);
+}
+
+.sf-hero__scroll-arrow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sf-hero__scroll-arrow span {
+  display: block;
+  width: 2px;
+  height: 8px;
+  background: #666666;
+  margin: 1px 0;
+  border-radius: 2px;
+  animation: sf-scroll-arrow 2s infinite;
+}
+
+.sf-hero__scroll-arrow span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.sf-hero__scroll-arrow span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes sf-scroll-arrow {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+}
+
+.sf-hero__scroll-text {
+  font-size: 0.8rem;
+  color: #666666;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-top: 0.5rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .sf-hero__container {
+    padding: 0 1rem;
+  }
+
+  .sf-hero__title {
+    margin-bottom: 1.5rem;
+  }
+
+  .sf-hero__subtitle {
+    margin-bottom: 2rem;
+  }
+
+  .sf-hero__description {
+    margin-bottom: 2.5rem;
+  }
+
+  .sf-hero__actions {
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 3rem;
+  }
+
+  .sf-hero__cta {
+    width: 100%;
+    max-width: 280px;
+  }
+
+  .sf-hero__stats {
+    gap: 2rem;
+  }
+
+  .sf-hero__stat-number {
+    font-size: 2rem;
+  }
+
+  /* Reduce orb sizes on mobile */
+  .sf-hero__orb--1 {
+    width: 200px;
+    height: 200px;
+  }
+
+  .sf-hero__orb--2 {
+    width: 150px;
+    height: 150px;
+  }
+
+  .sf-hero__orb--3 {
+    width: 100px;
+    height: 100px;
+  }
+}
+
+@media (max-width: 480px) {
+  .sf-hero__stats {
+    gap: 1.5rem;
+  }
+
+  .sf-hero__stat-number {
+    font-size: 1.8rem;
+  }
+
+  .sf-hero__stat-label {
+    font-size: 0.8rem;
+  }
+
+  .sf-hero__cursor {
+    width: 2px;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .sf-hero__background,
+  .sf-hero__mesh-dot,
+  .sf-hero__orb,
+  .sf-hero__title,
+  .sf-hero__cursor,
+  .sf-hero__content,
+  .sf-hero__description,
+  .sf-hero__actions,
+  .sf-hero__stats,
+  .sf-hero__scroll-indicator,
+  .sf-hero__scroll-arrow span,
+  .sf-hero__cta,
+  .sf-hero__cta-ripple,
+  .sf-hero__stat {
+    animation: none;
+    transition: none;
+  }
+
+  .sf-hero__mesh-dot {
+    opacity: 0.1;
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .sf-hero {
+    background: white;
+  }
+
+  .sf-hero__title {
+    -webkit-text-fill-color: black;
+    color: black;
+  }
+
+  .sf-hero__subtitle,
+  .sf-hero__description {
+    color: black;
+  }
+
+  .sf-hero__cta--primary {
+    background: black;
+    color: white;
+  }
+
+  .sf-hero__cta--secondary {
+    border-color: black;
+    color: black;
+  }
+
+  .sf-hero__stat-number {
+    -webkit-text-fill-color: black;
+    color: black;
+  }
+
+  .sf-hero__orb {
+    background: rgba(0, 0, 0, 0.1);
+  }
+}
+
+/* Print Styles */
+@media print {
+  .sf-hero {
+    min-height: auto;
+    background: white;
+  }
+
+  .sf-hero__background,
+  .sf-hero__scroll-indicator {
+    display: none;
+  }
+
+  .sf-hero__title,
+  .sf-hero__subtitle,
+  .sf-hero__description,
+  .sf-hero__stat-number {
+    -webkit-text-fill-color: black;
+    color: black;
+  }
+}

package/website/components/hero/Hero.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snow-Flow Hero Component</title>
+    <link rel="stylesheet" href="Hero.css">
+</head>
+<body>
+    <!-- Hero Section Component -->
+    <section class="sf-hero" id="sf-hero">
+        <!-- Animated Background Mesh -->
+        <div class="sf-hero__background">
+            <div class="sf-hero__mesh" id="sf-hero-mesh">
+                <!-- Dots will be generated by JavaScript -->
+            </div>
+            
+            <!-- Gradient Orbs -->
+            <div class="sf-hero__orb sf-hero__orb--1"></div>
+            <div class="sf-hero__orb sf-hero__orb--2"></div>
+            <div class="sf-hero__orb sf-hero__orb--3"></div>
+        </div>
+
+        <div class="sf-hero__container">
+            <div class="sf-hero__content">
+                <!-- Main Title with Typewriter Effect -->
+                <h1 class="sf-hero__title" id="sf-hero-title">
+                    <!-- Title will be typed here by JavaScript -->
+                </h1>
+
+                <!-- Subtitle with Typewriter Effect -->
+                <h2 class="sf-hero__subtitle" id="sf-hero-subtitle">
+                    <!-- Subtitle will be typed here by JavaScript -->
+                </h2>
+
+                <!-- Description -->
+                <p class="sf-hero__description" id="sf-hero-description">
+                    Revolutionize your ServiceNow development with AI-powered automation, intelligent orchestration, and cutting-edge tools designed for the modern enterprise.
+                </p>
+
+                <!-- CTA Buttons -->
+                <div class="sf-hero__actions" id="sf-hero-actions">
+                    <button class="sf-hero__cta sf-hero__cta--primary" id="sf-hero-primary-cta" data-href="#get-started">
+                        Get Started
+                        <span class="sf-hero__cta-ripple"></span>
+                    </button>
+                    
+                    <button class="sf-hero__cta sf-hero__cta--secondary" id="sf-hero-secondary-cta" data-href="#features">
+                        Learn More
+                        <span class="sf-hero__cta-arrow">→</span>
+                    </button>
+                </div>
+
+                <!-- 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>
+                    <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>
+                    <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>
+                    <div class="sf-hero__stat" data-number="100%" data-label="Real Data">
+                        <div class="sf-hero__stat-number">100%</div>
+                        <div class="sf-hero__stat-label">Real Data</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Scroll Indicator -->
+            <div class="sf-hero__scroll-indicator" id="sf-hero-scroll">
+                <div class="sf-hero__scroll-arrow">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+                <span class="sf-hero__scroll-text">Scroll to explore</span>
+            </div>
+        </div>
+    </section>
+
+    <!-- Demo Sections for Scroll Testing -->
+    <section id="features" style="height: 100vh; background: linear-gradient(135deg, #f0f0f0, #e0e0e0); display: flex; align-items: center; justify-content: center;">
+        <h2>Features Section</h2>
+    </section>
+    
+    <section id="get-started" style="height: 100vh; background: linear-gradient(135deg, #e0e0e0, #d0d0d0); display: flex; align-items: center; justify-content: center;">
+        <h2>Get Started Section</h2>
+    </section>
+
+    <script src="Hero.js"></script>
+</body>
+</html>