Add goal section to main page - without design.

TrueMoein · Feb 24, 2019 · 10d77e0 · 10d77e0
1 parent 3e75338
commit 10d77e0
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 3 deletions.
diff --git a/design/UI.bmpr b/design/UI.bmpr
diff --git a/website/pages/en/index.js b/website/pages/en/index.js
@@ -12,7 +12,7 @@ class HomeSplash extends React.Component {
     );
 
     const PromoSection = props => (
-      <div className="section promoSection" id="booklets">
+      <div className="section promoSection">
         <div className="promoRow">
           <div className="pluginRowBlock">{props.children}</div>
         </div>
@@ -65,7 +65,23 @@ class Index extends React.Component {
       <div>
         <HomeSplash config={config}/>
         <div className="mainContainer">
+        <div className="goal-section">
           <div className="wrapper">
+            <div className="row">
+              <div className="col-md-7 col-xs-12">
+                <h1>هدف</h1>
+                <p>این روزها جاوااسکریپت به امپراطور وب تبدیل شده است.
+                  این که این زبان و فریمورک های مربوط به آن را یا د بگیریم، کمک بسیاری
+                  برای تبدیل شدن به یک همه فن حریف در وب به ما خواهد داد.
+                </p>
+              </div>
+              <div className="col-md-5 col-xs-12 booklet-image">
+                <img width="220" src="/img/booklets/JS-Book.png" />
+              </div>
+            </div>
+          </div>
+        </div>
+          <div className="wrapper" id="booklets">
             <div className="row">
               {booklets.map(b => (
                 <Booklet key={b.name} booklet={b} />

diff --git a/website/siteConfig.js b/website/siteConfig.js
@@ -46,7 +46,7 @@ const siteConfig = {
 
   colors: {
     primaryColor: '#323330',
-    secondaryColor: '#f7b92a',
+    secondaryColor: '#f0db4f',
   },
 
   docsSideNavCollapsible: true,

diff --git a/website/static/css/custom.css b/website/static/css/custom.css
@@ -172,7 +172,10 @@ table {
 }
 
 .homeSplashFade {
-  background-color: #f7c500;
+  background: #F7971E;  /* fallback for old browsers */
+  background: -webkit-linear-gradient(to left, #FFD200, #F7971E);  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to left, #FFD200, #F7971E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
   direction: rtl;
 }
 
@@ -191,4 +194,16 @@ table {
 
 .nav-footer .sitemap a {
   margin: 0;
+}
+
+.goal-section {
+  background: #20232A;
+  color: white;
+  margin-top: -48px;
+  height: 400px;
+}
+
+.booklet-image {
+  text-align: left;
+  padding-top: 28px;
 }
diff --git a/website/static/img/booklets/JS-Book.png b/website/static/img/booklets/JS-Book.png