first pass - kryz inspired

2026-06-10 18:34:23 +00:00
parent 3063d01ec5
commit 771e1e166f
53 changed files with 10521 additions and 0 deletions
@@ -0,0 +1,166 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.hero {
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero-mountains {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center bottom;
+  }
+}
+
+.hero-gradient {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: $sky-gradient;
+  opacity: 0.85;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+  padding: $spacing-3xl $spacing-lg;
+}
+
+.hero-inner {
+  @include fade-in;
+}
+
+.hero-icon {
+  margin-bottom: $spacing-lg;
+  animation: float 4s ease-in-out infinite;
+
+  .hero-flower {
+    width: 100px;
+    height: 100px;
+    margin: 0 auto;
+    filter: drop-shadow(0 4px 12px rgba(232, 122, 46, 0.4));
+  }
+}
+
+.hero-title {
+  margin-bottom: $spacing-md;
+}
+
+.hero-line1 {
+  display: block;
+  font-size: 3.5rem;
+  font-weight: 700;
+  color: var(--color-white);
+  letter-spacing: 0.05em;
+}
+
+.hero-line2 {
+  display: block;
+  font-size: 3rem;
+  font-weight: 700;
+  @include gradient-text(var(--color-accent-light), var(--color-accent));
+}
+
+.hero-subtitle {
+  font-size: 1.15rem;
+  color: rgba(255, 255, 255, 0.85);
+  max-width: 600px;
+  margin: 0 auto $spacing-sm;
+  line-height: 1.7;
+}
+
+.hero-tagline {
+  font-style: italic;
+  color: var(--color-accent-muted);
+  font-size: 1.05rem;
+}
+
+.hero-actions {
+  display: flex;
+  gap: $spacing-md;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: $spacing-lg 0;
+}
+
+.btn-hero-primary {
+  @include button-style($accent-orange, $neutral-white, $accent-orange-dark);
+  font-size: 1.1rem;
+  padding: $spacing-sm $spacing-xl;
+  letter-spacing: 0.03em;
+}
+
+.btn-hero-secondary {
+  @include button-style(transparent, var(--color-white), rgba(255,255,255,0.15));
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  font-size: 1.1rem;
+  padding: $spacing-sm $spacing-xl;
+  letter-spacing: 0.03em;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.7);
+  }
+}
+
+.hero-listeners {
+  margin-top: $spacing-xl;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-sm;
+  font-size: 0.95rem;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.listeners-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: $radius-full;
+  background: $success-green;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 158, 79, 0.4); }
+  50%      { opacity: 0.7; box-shadow: 0 0 0 6px rgba(74, 158, 79, 0); }
+}
+
+.hero-divider {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 3;
+
+  img {
+    width: 100%;
+  }
+}
+
+// Responsive
+@media (max-width: #{$bp-md - 1px}) {
+  .hero-line1 { font-size: 2.5rem; }
+  .hero-line2 { font-size: 2.2rem; }
+  .hero-subtitle { font-size: 1rem; }
+  .hero-flower { width: 70px; height: 70px; }
+  .hero-actions { flex-direction: column; align-items: center; }
+}
+
+@media (max-width: #{$bp-sm - 1px}) {
+  .hero-line1 { font-size: 2rem; }
+  .hero-line2 { font-size: 1.8rem; }
+}