Merge pull request #8 from campfire-previews/new-hero

new hero

css/index.css

@@ -12,6 +12,64 @@
   font-family: "proxima-nova", sans-serif;
   /* font-family: "futura", sans-serif; */
   scroll-behavior: smooth;
+  /* --campfire-gradient: radial-gradient(
+    circle,
+    rgba(239, 190, 67, 1) 12%,
+    rgba(237, 152, 55, 1) 32%,
+    rgba(237, 107, 44, 1) 49%,
+    rgba(226, 85, 79, 1) 75%,
+    rgba(39, 47, 63, 1) 100%
+  ); */
+
+  --campfire-gradient: linear-gradient(
+    319deg,
+    rgba(239, 190, 67, 1) 12%,
+    rgba(237, 152, 55, 1) 32%,
+    rgba(237, 107, 44, 1) 49%,
+    rgba(226, 85, 79, 1) 80%,
+    rgba(39, 47, 63, 1) 100%
+  );
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2024-4-24 14:14:25
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info. 
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation shadow-drop-2-center
+ * ----------------------------------------
+ */
+@-webkit-keyframes shadow-drop-2-center {
+  0% {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+  100% {
+    -webkit-transform: translateZ(50px);
+    transform: translateZ(50px);
+    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
+  }
+}
+@keyframes shadow-drop-2-center {
+  0% {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+  100% {
+    -webkit-transform: translateZ(50px);
+    transform: translateZ(50px);
+    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
+  }
 }
 
 /* HEADER + NAV */
@@ -41,6 +99,14 @@ nav {
   }
 }
 
+.gradient {
+  background: var(--campfire-gradient);
+  background-position: 50% 75%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
 /* HERO SECTION */
 #landing-wrap {
   height: 100vh;
@@ -53,24 +119,60 @@ nav {
   position: relative;
   color: white;
   display: flex;
-  flex-direction: column;
+  width: 100%;
   align-items: center;
-  gap: 20px;
+  justify-content: center;
   z-index: 20;
   padding-top: 120px;
 
+  #landing-title {
+    position: absolute;
+    transform: translateX(-30%);
+    flex-grow: 1;
+    z-index: 20;
+  }
+
+  #landing-video {
+    position: relative;
+    transform: translate(50%, 10%);
+
+    img {
+      width: 500px;
+    }
+
+    a {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: block;
+    }
+
+    a svg {
+      fill: white;
+      transform: scale(0.8);
+      transition: transform 0.5s;
+    }
+    a svg:hover {
+      box-shadow: #272f3f;
+      transform: scale(0.9);
+    }
+  }
+
   h1 {
     font-family: Futura, sans-serif;
-    font-size: 3rem;
-    margin-top: -20px;
+    font-size: 4rem;
+    margin-top: 10px;
   }
 
   h2 {
-    font-size: 1.25rem;
-    width: 50%;
-    text-align: center;
+    font-size: 1rem;
   }
 
+  /* a,
+  video {
+    box-shadow: 0px 0px 30px var(--dark-blue);
+  }
   a {
     display: inline-block;
     background-color: var(--red);
@@ -79,12 +181,11 @@ nav {
     text-decoration: none;
     border-radius: 500px;
     font-weight: 700;
-    box-shadow: 0px 0px 30px var(--dark-blue);
-  }
+  } */
 
-  a:hover {
+  /* a:hover {
     background-color: var(--darker-red);
-  }
+  } */
 }
 
 #landing-wrap:before {

index.html

@@ -29,12 +29,29 @@
     </header>
     <div id="landing-wrap">
       <section id="landing">
-        <img src="images/logo-mark.svg" alt="campfire-logo" />
-        <h1>campfire</h1>
-        <h2>
-          open-source, self-hosted collaborative deploy previews for everyone
-        </h2>
-        <a href="#case-study-content" id="cta">read our case study</a>
+        <div id="landing-title">
+          <h2>Open-source, Self-hosted</h2>
+          <h1 class="gradient">Collaborative</h1>
+          <h1>Deploy Previews</h1>
+        </div>
+        <div id="landing-video">
+          <a data-fslightbox="gallery" href="/media/campfire-demo-v1.mp4">
+            <svg
+              width="132"
+              height="132"
+              viewBox="0 0 132 132"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="66" cy="66" r="66" />
+              <path
+                d="M90.8506 67.9255L53.4623 89.5117L53.4623 46.3394L90.8506 67.9255Z"
+                fill="#151A31"
+              />
+            </svg>
+          </a>
+          <img src="/images/video-preview.png" alt="video-preview" />
+        </div>
+        <!-- <a href="#case-study-content" id="cta">read our case study</a> -->
       </section>
     </div>
     <div id="rock-wrapper">
@@ -259,7 +276,7 @@ <h1>2 - The Problem</h1>
               systems like Git and SVN to better manage and track code changes.
               However, these systems did not solve the problem of testing
               changes in a controlled environment before production deployment.
-              <br>
+              <br />
               <a class="reference" href="#section-8-References">1</a>
               <a class="reference" href="#section-8-References">2</a>
             </p>
@@ -334,7 +351,7 @@ <h1>2 - The Problem</h1>
               If bugs are detected during staging tests, the process from branch
               creation to staging deployment may need to be repeated to ensure
               all issues are thoroughly addressed.
-              <br>
+              <br />
               <a class="reference" href="#section-8-References">4</a
               ><a class="reference" href="#section-8-References">5</a
               ><a class="reference" href="#section-8-References">6</a>
@@ -563,7 +580,19 @@ <h2>3.3 - DIY</h2>
           >
             <h1>4 - Introducing Campfire</h1>
             <p>
-              Campfire removes the trouble of building a DIY solution from scratch while still providing organizations control over their data, and allowing integration into an existing CI/CD pipeline. Our primary goal was to design a feedback interface that integrates seamlessly with the deploy preview, ensuring stakeholders can provide feedback without switching contexts. This interface supports comments and session replays and allows the capture of contextual data to enhance understanding. Although not as feature and integration-rich as solutions like Livecycle, Netlify Drawer, and Vercel, Campfire offers an open-source alternative with comments that sync to a GitHub pull request and the ability to record sessions, providing context-rich feedback directly within the deploy preview.
+              Campfire removes the trouble of building a DIY solution from
+              scratch while still providing organizations control over their
+              data, and allowing integration into an existing CI/CD pipeline.
+              Our primary goal was to design a feedback interface that
+              integrates seamlessly with the deploy preview, ensuring
+              stakeholders can provide feedback without switching contexts. This
+              interface supports comments and session replays and allows the
+              capture of contextual data to enhance understanding. Although not
+              as feature and integration-rich as solutions like Livecycle,
+              Netlify Drawer, and Vercel, Campfire offers an open-source
+              alternative with comments that sync to a GitHub pull request and
+              the ability to record sessions, providing context-rich feedback
+              directly within the deploy preview.
             </p>
             <p>
               <img