feat: create sparkles controller

3 files changed, 113 insertions, 1 deletions

diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index 2731a07..0fe8099 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -1,3 +1,4 @@
+@import "variables/colours.scss";
 @import "@primer/css/alerts/index.scss";
 @import "@primer/css/avatars/index.scss";
 @import "@primer/css/blankslate/index.scss";
@@ -12,3 +13,36 @@
 @import "@primer/css/timeline/index.scss";
 @import "@primer/css/utilities/index.scss";
 @import "@primer/octicons/index.scss";
+@import "sparkles/header.scss";
+
+@font-face {
+  font-family: "Alliance No.1";
+  font-style: normal;
+  font-weight: $font-weight-normal;
+  src: url("../fonts/Alliance-No-1-Regular.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Alliance No.1";
+  font-style: italic;
+  font-weight: $font-weight-normal;
+  src: url("../fonts/Alliance-No-1-Italic.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Alliance No.1";
+  font-style: normal;
+  font-weight: $font-weight-semibold;
+  src: url("../fonts/Alliance-No-1-SemiBold.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Alliance No.1";
+  font-style: normal;
+  font-weight: $font-weight-bold;
+  src: url("../fonts/Alliance-No-1-Bold.woff") format("woff");
+  font-display: swap;
+}
diff --git a/app/javascript/styles/sparkles/header.scss b/app/javascript/styles/sparkles/header.scss
new file mode 100644
index 0000000..266f1cb
--- /dev/null
+++ b/app/javascript/styles/sparkles/header.scss
@@ -0,0 +1,79 @@
+.octicon-search {
+  position: absolute;
+  top: 7px;
+  left: 8px;
+}
+
+.header-link {
+  font-weight: $font-weight-bold;
+  color: var(--color-text-white);
+  white-space: nowrap;
+
+  &:hover,
+  &:focus {
+    color: var(--color-text-white);
+    text-decoration: none;
+  }
+}
+
+.hero {
+  background: linear-gradient(114.95deg, #24292E 30.38%, #781084 120.55%);
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
+  padding: 96px 0 200px 0;
+
+  .hero__calloutPrimary {
+    font-family: "Alliance No.1";
+    font-size: 72px;
+    font-weight: $font-weight-bold;
+    letter-spacing: -2px;
+    line-height: 72px;
+  }
+
+  .hero__calloutSecondary {
+    font-family: "Alliance No.1";
+    opacity: 0.6;
+   }
+
+  .hero-sparkle-label {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+
+    @include breakpoint(sm) {
+      top: 14px;
+    }
+  }
+
+  .hero-sparkle-input {
+    padding-left: 78px;
+  }
+}
+
+.header-brand-icon-bg {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: linear-gradient(152deg, #ff7300, #dc00ff, #008cff);
+    background-size: 600% 600%;
+
+    -webkit-animation: HeaderBrandBackgroundAnimation 15s ease infinite;
+    -moz-animation: HeaderBrandBackgroundAnimation 15s ease infinite;
+    animation: HeaderBrandBackgroundAnimation 15s ease infinite;
+}
+
+@-webkit-keyframes HeaderBrandBackgroundAnimation {
+    0%{background-position:14% 0%}
+    50%{background-position:87% 100%}
+    100%{background-position:14% 0%}
+}
+@-moz-keyframes HeaderBrandBackgroundAnimation {
+    0%{background-position:14% 0%}
+    50%{background-position:87% 100%}
+    100%{background-position:14% 0%}
+}
+@keyframes HeaderBrandBackgroundAnimation {
+    0%{background-position:14% 0%}
+    50%{background-position:87% 100%}
+    100%{background-position:14% 0%}
+}
diff --git a/app/javascript/styles/variables/colours.scss b/app/javascript/styles/variables/colours.scss
index d565ad9..c87445b 100644
--- a/app/javascript/styles/variables/colours.scss
+++ b/app/javascript/styles/variables/colours.scss
@@ -1,4 +1,3 @@
-
 // stylelint-disable primer/no-unused-vars
 
 // Immutable (static) color system