Merge pull request #188 from kjannette/home3

Home3

src/Components/Home/HomePageB.js

@@ -261,96 +261,90 @@ const HomePageB = () => {
   const homeContent = (
     <div className="homepage-container">
       <section className="section-one">
-        <div className="hero-text-container">
+        <div
-          <h1 className="hero-top">AI-asssisted legal drafting</h1>
+          className="hero-imgbox"
-          <div
+          style={{
-            className="hero-imgbox"
+            backgroundImage: `url(https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/038dfbe4-00e9-41f9-6b70-09e8e87fa600/public)`,
-            style={{
+            backgroundSize: "cover",
-              backgroundImage: `url(https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/038dfbe4-00e9-41f9-6b70-09e8e87fa600/public)`,
+            borderRadius: "20px",
-              backgroundSize: "cover",
+          }}
-              borderRadius: "20px",
+        >
-            }}
+          <div className="hero-middle">
-          >
+            <h1 className="hero-middle-header">{heroString}</h1>
-            <div className="hero-middle-box">
+            <h1 className="hero-middle-header">{heroString2}</h1>
-              <div className="hero-middle">{heroString}</div>
+          </div>
-              <div className="hero-middle">{heroString2}</div>
+          <div className="hero-button-box">
-              <div className="hero-button-box">
+            <button className="button-2" onClick={handleTryItButton}>
-                <button className="button-2" onClick={handleTryItButton}>
+              Start A Free Trial
-                  Start A Free Trial
+            </button>
-                </button>
+            <button className="button-2" onClick={handleDemo}>
-                <button className="button-2" onClick={handleDemo}>
+              Request a demo
-                  Request a demo
+            </button>
-                </button>
+          </div>
+          <div className="hero-text-box">
+            <div className="hero-text">
+              Reclaim hours every week. Spend more time growing your practice,
+              or just get home in time for dinner.
+            </div>
+            <div className="arrow-container">
+              <div className="arrow-sub-left"></div>
+              <div className="arrow-sub-right">
+                <div className="arrow-left"></div>
+                <div className="arrow-right">
+                  <img
+                    className="testi-arrow"
+                    src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/046d4940-35e7-481f-e3c1-259cc32d3800/public"
+                  ></img>
+                </div>
               </div>
             </div>
-            <div className="hero-text-box">
+            <div className="hero-testi-box">
-              <div className="hero-text">
+              <div className="hero-testi-left">
-                ATTN: Attorneys - reclaim hours every week. Spend more time
+                <StarFill
-                growing your practice, or just get home in time for dinner.
+                  style={{
-              </div>
+                    color: "#FFD700",
-              <div className="arrow-container">
+                    height: "20px",
-                <div className="arrow-sub-left"></div>
+                    width: "20px",
-                <div className="arrow-sub-right">
+                    marginRight: "6px",
-                  <div className="arrow-left"></div>
+                  }}
-                  <div className="arrow-right">
+                />
-                    <img
+                <StarFill
-                      className="testi-arrow"
+                  style={{
-                      src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/046d4940-35e7-481f-e3c1-259cc32d3800/public"
+                    color: "#FFD700",
-                    ></img>
+                    height: "20px",
-                  </div>
+                    width: "20px",
+                    marginRight: "6px",
+                  }}
+                />
+                <StarFill
+                  style={{
+                    color: "#FFD700",
+                    height: "20px",
+                    width: "20px",
+                    marginRight: "6px",
+                  }}
+                />
+                <StarFill
+                  style={{
+                    color: "#FFD700",
+                    height: "20px",
+                    width: "20px",
+                    marginRight: "6px",
+                  }}
+                />
+                <StarFill
+                  style={{ color: "#FFD700", height: "20px", width: "20px" }}
+                />
+                <div className="review-box">
+                  Used by over 1,100 Novodrafters, and counting.
                 </div>
               </div>
-              <div className="hero-testi-box">
+              <div className="hero-testi-right">
-                <div className="hero-testi-left">
+                <div className="hero-testi-right-inner">
-                  <StarFill
+                  <img
-                    style={{
+                    className="hero-testi-face"
-                      color: "#FFD700",
+                    src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/bdb625eb-2949-4416-f675-6660e1a04f00/public"
-                      height: "20px",
+                  ></img>
-                      width: "20px",
-                      marginRight: "6px",
-                    }}
-                  />
-                  <StarFill
-                    style={{
-                      color: "#FFD700",
-                      height: "20px",
-                      width: "20px",
-                      marginRight: "6px",
-                    }}
-                  />
-                  <StarFill
-                    style={{
-                      color: "#FFD700",
-                      height: "20px",
-                      width: "20px",
-                      marginRight: "6px",
-                    }}
-                  />
-                  <StarFill
-                    style={{
-                      color: "#FFD700",
-                      height: "20px",
-                      width: "20px",
-                      marginRight: "6px",
-                    }}
-                  />
-                  <StarFill
-                    style={{ color: "#FFD700", height: "20px", width: "20px" }}
-                  />
-                  <div className="review-box">
-                    Used by over 1,100 Novodrafters.
-                  </div>
-                </div>
-                <div className="hero-testi-right">
-                  <div className="hero-testi-right-inner">
-                    <div className="hero-test-pic-box">
-                      <img
-                        className="hero-testi-face"
-                        src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/bdb625eb-2949-4416-f675-6660e1a04f00/public"
-                      ></img>
-                    </div>
-                    <div className="hero-testi-text"></div>
-                  </div>
                 </div>
               </div>
             </div>
@@ -379,41 +373,28 @@ const HomePageB = () => {
           <div className="home-col-50">
             <div className="pad-2">
               <h2 className="section-three-header">
-                Made by Attorneys, for Attorneys.
+                Cut through the rote - focus on your priorities.
               </h2>
-              <div className="text-block-2-box">
-                <p className="section-three-wubhead">
-                  Tech developed by litigators that understand your needs.
-                </p>
-              </div>
               <p className="section-two-body">
-                We understand the demands on your time. For example, that
+                Novodraft is not a “chatbot”, or an “AI assistant. It is a
-                discovery request on your desk. With as few as three clicks, you
+                heuristic framework that leverages AI to free you from reciting
-                can draft a ready-to-serve response in minutes. It's as easy as
+                boilerplate, "raised-or-waived," "gotcha" arguments and
-                uploading a .pdf file.
+                objections.
+              </p>
+
+              <p className="section-two-body">
+                Novodraft generates discovery requests and responses within
+                precisely-defined natural language parameters. It even applies
+                CRAC structure, where appropriate.
               </p>
               <p className="section-two-body">
-                Novodraft cuts through the mire of rote tasks, but does much
+                This allows you to spend more time on key, dispositive issues.
-                more than automate.
+                The issues you know will carry the day.
               </p>
               <p className="section-two-body">
-                Intellidraft AI technology powers persuasive arguments and makes
+                Most importantly, Novdraft observes and incorporates your unique
-                otherwise boilerplate objections compelling. Augment your
+                preferences. Over time, you will find yourself more able to
-                drafting as much or as little as you want. Novodraft actively
+                "lean in" on what matters the most.
-                observes your edits, and, over time, incorporates your preferred
-                style.
-              </p>
-              <p className="section-two-body">
-                Novodraft is not a “chatbot”, nor is it an “AI assitant”. It is
-                a proprietary, algorithmic drafting system that leverages AI to
-                enhance drafting. It eliminates so-called "hallucinations" and
-                side-effects.
-              </p>
-              <p className="section-two-body">
-                Modeled on real, human attorney's drafting sttyles, it generates
-                discovery requests, responses and persuasive objections, within
-                specific natural language parameters. It even applies CRAC
-                structure, where appropriate.
               </p>
               <p className="section-two-body"></p>
               <div
@@ -428,14 +409,12 @@ const HomePageB = () => {
       <section className="section-3">
         <div className="section-three-header-box">
           <h2 className="section-three-header">
-            AI-Powered Legal Drafting Technology{" "}
+            AI-Enhanced Legal Drafting Technology{" "}
           </h2>
           <h2 className="section-three-header-mobile">
             Novo Drafting Technology
           </h2>
-          <p className="section-three-subhead">
+          <p className="section-three-subhead"></p>
-            Created by litigators, for litigators
-          </p>
         </div>
         <div className="card-section-container">
           {/***********  CARD ONE *********** */}

src/styles/homepage-b.scss

@@ -51,6 +51,7 @@ ul.navbar-nav {
 
 section.section-one {
   height: 680px;
+  margin-top: 30px;
   display: flex;
   justify-content: center;
 }
@@ -72,13 +73,23 @@ section.section-one {
 }
 
 .hero-middle {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 800px;
+}
+
+.hero-middle-header {
   font-size: 2.8rem;
   text-align: center;
   color: #000;
   font-family: Roboto;
   font-weight: 500;
   line-height: 3.4rem;
-  width: 800px;
 }
 
 .hero-imgbox {
@@ -104,9 +115,11 @@ section.section-one {
 }
 
 .hero-button-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
   margin-top: 50px;
-  padding-left: 8px;
+  padding-right: 10px;
-  width: 100%;
   height: 130px;
 }
 
@@ -195,6 +208,7 @@ section.section-one {
   justify-content: center;
   margin: auto;
   padding-left: 30px;
+  padding-top: 6px;
   width: 50%;
 }
 
@@ -895,6 +909,15 @@ li.nav-item {
     margin-left: auto;
   }
 
+  .section-one {
+    height: unset;
+    max-height: unset;
+    align-items: unset;
+    justify-content: unset;
+    margin: unset;
+    margin-top: unset;
+  }
+
   .mobile-lower-header-top {
     height: 60%;
 
@@ -902,6 +925,25 @@ li.nav-item {
     color: #fff;
   }
 
+  .hero-imgbox {
+    display: flex;
+    flex-direction: column;
+    width: 380px;
+  }
+
+  .hero-middle-box {
+    width: 380px;
+  }
+
+  .hero-middle {
+    width: 380px;
+  }
+
+  .hero-button-box {
+    display: flex;
+    flex-direction: column;
+  }
+
   .mobile-sw-deck {
     color: #fff;
     font-size: 16px;

src/styles/homepage.scss

@@ -21,6 +21,16 @@ a {
   font-family: Roboto;
 }
 
+.hero-top {
+  height: 13px;
+}
+
+.hero-top-text {
+  font-family: Roboto;
+  font-size: 12px;
+  color: #fff;
+}
+
 .card-image-container {
   display: flex;
   flex-direction: column;
@@ -744,6 +754,14 @@ li.nav-item {
     width: 392px;
   }
 
+  .hero-top {
+    display: none;
+  }
+
+  .hero-top-text {
+    display: none;
+  }
+
   ul.navbar-nav {
     margin-left: auto;
   }